/* 全局 */
:root{
  --purple:#8b5cf6; --blue:#3b82f6; --orange:#f59e0b; --green:#10b981; --red:#ef4444;
  --bg:#f6f7fb; --card:#ffffff; --text:#1f2937; --muted:#8a94a6; --line:#e8ecf3;
  --topbar-bg:rgba(255,255,255,.92); --nav-text:#4b5563; --nav-hover:#eef2ff;
  --panel:#ffffff; --surface:#f1f5f9; --surface-2:#f8fafc; --text2:#374151;
  --accent-soft:#eef4ff; --accent-soft-2:#dbeafe;
  --radius:14px; --shadow:0 1px 3px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;font-size:15px;line-height:1.6;padding-bottom:70px}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted);font-size:13px}

/* 顶栏 */
.topbar{position:sticky;top:0;z-index:50;background:var(--topbar-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-inner{max-width:none;margin:0 auto;display:flex;align-items:center;gap:18px;padding:12px 18px}
.logo{font-weight:800;font-size:18px;display:flex;align-items:center;gap:8px}
.mainnav{display:flex;gap:4px;flex:1;flex-wrap:nowrap;justify-content:center;overflow-x:auto}
.mainnav a{padding:7px 14px;border-radius:10px;color:var(--nav-text);font-size:14.5px}
.mainnav a:hover{background:var(--nav-hover);color:var(--blue)}
.mainnav a.active{background:var(--nav-hover);color:var(--blue);font-weight:600}
.userbox{display:flex;gap:10px;align-items:center}
.userchip{display:flex;align-items:center;gap:8px;padding:5px 14px 5px 6px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;cursor:pointer;font-size:14px;padding:9px 18px;border-radius:10px;transition:.15s}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:#2563eb}
.btn-ghost{border:1px solid var(--line);background:var(--panel);color:var(--text2)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-light{background:var(--accent-soft);color:var(--blue)}
.btn-light:hover{background:var(--accent-soft-2)}
.btn-sm{padding:6px 12px;font-size:13px;border-radius:8px}
.btn-danger{background:#fef2f2;color:var(--red)}
.btn-danger:hover{background:#fee2e2}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* 页面容器 */
.page{max-width:1200px;margin:0 auto;padding:24px 20px}
.page-title{font-size:22px;font-weight:800;margin-bottom:4px}
.page-sub{color:var(--muted);margin-bottom:20px}

/* 卡片 */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.vcard{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:.18s;display:block;min-width:0}
.vcard:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(16,24,40,.12)}
.vcard img{width:100%;height:150px;object-fit:cover;display:block}
.vcard .vc-body{padding:12px 14px}
.vcard .vc-title{font-weight:700;font-size:14.5px;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vcard .vc-meta{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:12px;padding:2px 8px;border-radius:6px;background:var(--surface);color:var(--muted)}
.tag.t-diff{background:#fef3c7;color:#b45309}
.tag.t-topic{background:#ecfdf5;color:#059669}

/* 筛选器 */
.filters{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 18px;margin-bottom:18px;display:flex;flex-direction:column;gap:10px}
.frow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.frow .flabel{font-size:13px;color:var(--muted);width:64px;flex:none}
.chip{padding:5px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font-size:13px;cursor:pointer;color:var(--text2)}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}

/* 空状态 */
.empty{padding:70px 20px;text-align:center;color:var(--muted)}
.empty .big{font-size:42px;margin-bottom:12px}

/* 表单 */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.input{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-size:15px;outline:none;background:var(--panel);color:var(--text)}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.auth-card{max-width:420px;margin:40px auto}
.auth-card h1{font-size:20px;margin-bottom:18px}
.link{color:var(--blue);cursor:pointer}

/* toast */
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 22px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:999;max-width:80vw}
.toast.show{opacity:.95}

/* 首页：全宽自适应 + 左侧栏（学习情况 + 视频筛选） */
body.home-wide .page{max-width:none;padding:14px 18px}
.home-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:16px;align-items:start}
.home-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:76px;max-height:calc(100vh - 90px);overflow-y:auto}
.home-side .card{margin-bottom:0}
.home-main .grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
@media(max-width:1000px){.home-layout{grid-template-columns:1fr}.home-side{position:static;max-height:none}}
.topic-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px}
.ttab{padding:7px 18px;border-radius:999px;font-size:14px;color:#4b5563;background:transparent;cursor:pointer}
.ttab:hover{color:var(--blue)}
.ttab.on{color:var(--blue);font-weight:700;background:var(--panel);box-shadow:var(--shadow)}
.side-title{font-weight:800;display:flex;align-items:center;gap:6px;margin-bottom:10px}
.stat4{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;margin-bottom:8px}
.s4 .n{font-size:21px;font-weight:800}
.s4 .l{font-size:11px;color:var(--muted)}
.c-dark{color:#111827}.c-green{color:var(--green)}.c-orange{color:var(--orange)}.c-blue{color:var(--blue)}
.cal-nav{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin:10px 0 6px;font-size:14px}
.cal-arrow{cursor:pointer;color:#64748b;padding:0 8px;border-radius:6px}
.cal-arrow:hover{background:var(--nav-hover);color:var(--blue)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-size:12px}
.cal-wd{color:#94a3b8;font-size:11px}
.cal-day{padding:5px 0;border-radius:7px;color:#4b5563}
.cal-day.study{background:#d1fae5;color:#059669;font-weight:600}
.cal-day.checkin{background:var(--green);color:#fff;font-weight:700}
.cal-day.today{border:1.5px solid var(--green);font-weight:800}
.flabel2{font-size:12.5px;color:#64748b;margin:10px 0 5px}
.fselect{width:100%;background:var(--panel);color:var(--text)}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg-btn{text-align:center;padding:8px 0;font-size:13.5px;color:#4b5563;cursor:pointer}
.seg-btn:hover{background:var(--surface-2)}
.seg-btn.on{background:var(--accent-soft);color:var(--blue);font-weight:700}



/* 后台筛选：紧凑下拉多选组件 */
.mselect{position:relative}
.mselect-btn{width:100%;text-align:left;padding:9px 30px 9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:14px;color:var(--text2);cursor:pointer;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mselect-btn::after{content:"▾";position:absolute;right:12px;color:#94a3b8}
.mselect-btn:hover{border-color:var(--blue)}
.mselect-btn.has{border-color:var(--blue);color:var(--blue);font-weight:600}
.mselect-panel{position:absolute;top:calc(100% + 6px);left:0;min-width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(16,24,40,.16);z-index:40;padding:6px;max-height:260px;overflow:auto;display:none}
.mselect.open .mselect-panel{display:block}
.mselect-panel label{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:7px;cursor:pointer;font-size:13.5px;white-space:nowrap}
.mselect-panel label:hover{background:var(--surface)}
.mselect-panel input[type=checkbox]{accent-color:var(--blue)}

/* 后台筛选：输入框内清除按钮 */
.search-wrap .clear-x{position:absolute;right:9px;top:50%;transform:translateY(-50%);cursor:pointer;color:#94a3b8;font-size:15px;line-height:1;user-select:none}
.search-wrap .clear-x:hover{color:var(--red)}

/* 视频卡片增强 */
.vc-thumb{position:relative}
.vc-thumb img{width:100%;height:150px;object-fit:cover;display:block}
.vc-dur{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.65);color:#fff;font-size:11.5px;padding:1px 7px;border-radius:5px}
.vc-foot{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:11.5px;margin-top:8px;border-top:1px dashed var(--line);padding-top:7px}
.vc-foot .vc-date{margin-left:auto}

/* 列表行 */
.row{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 16px;margin-bottom:10px;cursor:pointer;transition:.15s}
.row:hover{box-shadow:0 8px 24px rgba(16,24,40,.12)}
.row img{width:96px;height:60px;object-fit:cover;border-radius:8px;flex:none}
.row .ts{font-size:12px;color:var(--muted);flex:none;width:44px}
.row .rtext{flex:1;min-width:0}
.row .ren{font-weight:600}
.row .rzh{color:var(--muted);font-size:13.5px}
.row .rtitle{color:#94a3b8;font-size:12.5px;margin-top:2px}
.mark{background:none;color:var(--purple);font-weight:800}

mark{background:none;color:var(--purple);font-weight:800}

/* 最近学习：进度与时间 */
.prog-wrap{width:200px;flex:none}
/* 窄屏/手机模式：整行改为上下堆叠（真实窄屏 + 手机预览模式都生效） */
@media (max-width: 640px) {
  .row { flex-wrap: wrap; }
  .row > img { width: 100%; height: 150px; }
  .row .rtext { flex: 1 1 100%; }
  .row .prog-wrap { width: 100%; margin-top: 10px; }
  .row .prog-top { font-size: 13px; }
  .row .pbar { height: 8px; }
}
/* 手机预览模式（宽屏下 430px 列）：同样的堆叠规则 */
body.phone-mode .row { flex-wrap: wrap; }
body.phone-mode .row > img { width: 100%; height: 150px; }
body.phone-mode .row .rtext { flex: 1 1 100%; }
body.phone-mode .row .prog-wrap { width: 100%; margin-top: 10px; }
body.phone-mode .row .prog-top { font-size: 13px; }
body.phone-mode .row .pbar { height: 8px; }
.prog-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}
.prog-top b{color:var(--blue);font-size:13px}
.prog-top b.done{color:var(--green)}
.pbar{height:7px;background:var(--surface);border-radius:99px;overflow:hidden;margin:5px 0 4px}
.pfill{height:100%;background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:99px}
.ptime{font-size:11.5px;color:var(--muted)}

/* 页脚 */
.footer{position:fixed;left:0;right:0;bottom:0;z-index:40;max-width:none;margin:0;padding:10px 16px;text-align:center;color:var(--muted);font-size:13px;background:var(--bg)}

/* 移动端 */
.mobiletab{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--line);z-index:60}
.mobiletab a{flex:1;display:flex;flex-direction:column;align-items:center;padding:8px 0;font-size:11px;color:#6b7280}
.mobiletab a span{font-size:19px}
@media(max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .mainnav{display:none}
  .mobiletab{display:flex}
  body{padding-bottom:80px}
}

/* ---------------- 播放页 ---------------- */
.player-layout{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:16px;align-items:start}
@media(max-width:1100px){.player-layout{grid-template-columns:1fr}}
.player-col .card{padding:14px}
.pl-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pl-head .back{font-size:20px;color:#4b5563;cursor:pointer;padding:2px 8px;border-radius:8px}
.pl-head .back:hover{background:var(--nav-hover)}
.pl-head h1{font-size:17px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage{position:relative;background:#000;border-radius:12px;overflow:hidden}
/* 视频始终等比显示（contain）：任何模式、任何源比例（16:9/4:3/竖屏）都不变形；
   舞台盒子比例由 JS 按视频元数据自适应（见 player.js fitStageAR） */
.stage video{width:100%;height:100%;display:block;object-fit:contain;object-position:center;border:none;background:#000}
.stage iframe{width:100%;height:100%;display:block;border:none;background:#000;aspect-ratio:16/9}
.stage.zoom-100 video{width:100%}
.stage.zoom-125 video{width:125%}
.stage.zoom-150 video{width:150%}
.bigview .player-layout{grid-template-columns:1fr}
.bigview .sub-col{display:none}
.controls{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.ctl{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;cursor:pointer;font-size:11.5px;color:#4b5563;padding:6px 9px;border-radius:10px}
.ctl .ico{width:36px;height:36px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:16px}
.ctl:hover{background:var(--nav-hover)}
.ctl.on .ico{background:var(--blue);color:#fff}
.ctl.on{color:var(--blue);font-weight:600}
.ctl.play .ico{background:var(--blue);color:#fff;width:44px;height:44px;font-size:19px}
.under-sub{margin-top:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;text-align:center;min-height:44px}
.under-sub .u-en{font-weight:700}
.under-sub .u-zh{color:var(--muted);font-size:13.5px}
.video-sub{position:absolute;left:0;right:0;bottom:52px;text-align:center;pointer-events:none;padding:4px 18px;z-index:5}
.video-sub .vs-en{display:inline-block;background:rgba(0,0,0,.6);color:#fff;font-weight:700;font-size:15px;padding:3px 12px;border-radius:6px;line-height:1.6}
.video-sub .vs-zh{display:inline-block;background:rgba(0,0,0,.6);color:#e5e7eb;font-size:12.5px;padding:2px 10px;border-radius:6px;margin-top:4px}
body.subsize-sm .video-sub .vs-en{font-size:12.5px}
body.subsize-md .video-sub .vs-en{font-size:17px}
body.subsize-lg .video-sub .vs-en{font-size:20px}
.desc{margin-top:12px;font-size:13.5px;color:var(--text2);background:var(--surface-2);border-radius:10px;padding:10px 14px}
.desc b{display:block;margin-bottom:4px;color:var(--text)}
.start-cta{margin:12px 0;padding:12px;text-align:center;border:1px dashed #c7d2fe;border-radius:10px;color:var(--blue);font-weight:700;cursor:pointer;background:var(--accent-soft)}
.start-cta:hover{background:var(--nav-hover)}

/* 字幕面板 */
.sub-col .card{padding:0;display:flex;flex-direction:column;max-height:calc(100vh - 110px);position:sticky;top:76px}
.sub-head{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.sub-head .stitle{font-weight:800;display:flex;align-items:center;gap:6px;flex:1}
.stitle::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--blue)}
.sbtn{border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:6px 11px;font-size:13px;cursor:pointer;color:var(--text2);display:inline-flex;align-items:center;gap:5px}
.sbtn:hover{border-color:var(--blue);color:var(--blue)}
.sbtn.on{background:var(--accent-soft);border-color:var(--accent-soft-2);color:var(--blue);font-weight:600}
.sub-list{overflow-y:auto;padding:10px;scrollbar-gutter:stable}
.sub-list::-webkit-scrollbar{width:10px}
.sub-list::-webkit-scrollbar-track{background:transparent}
.sub-list::-webkit-scrollbar-thumb{background:#c5cddd;border-radius:99px;min-height:40px;border:2px solid transparent;background-clip:padding-box}
.sub-list::-webkit-scrollbar-thumb:hover{background:#9aa7ba;border:2px solid transparent;background-clip:padding-box}
.modal-body::-webkit-scrollbar{width:10px}
.modal-body::-webkit-scrollbar-track{background:transparent}
.modal-body::-webkit-scrollbar-thumb{background:#c5cddd;border-radius:99px;min-height:40px;border:2px solid transparent;background-clip:padding-box}
.sent{padding:10px 12px;border-radius:10px;cursor:pointer;margin-bottom:6px;border:1px solid transparent}
.sent:hover{background:var(--surface-2)}
.sent.cur{background:var(--accent-soft);border-color:var(--accent-soft-2)}
.sent .s-ts{font-size:11.5px;color:#94a3b8;margin-bottom:2px}
.sent .s-en{font-weight:600;font-size:15px}
.sent .s-zh{color:var(--muted);font-size:13.5px;margin-top:2px}
.sent .s-phon{color:#7c3aed;font-size:12.5px;margin-top:2px;font-family:"Segoe UI",Consolas}
body.lang-en .s-zh,body.lang-zh .s-en{display:none}
body.hide-annot .vw{background:none!important;color:inherit!important;font-weight:inherit}
body.subsize-sm .s-en{font-size:13px}body.subsize-md .s-en{font-size:17px}body.subsize-lg .s-en{font-size:20px}
.vw{border-radius:4px;padding:0 2px;font-weight:800}
.vw-word{background:#f3e8ff;color:#7c3aed}
.vw-phrase{background:#dbeafe;color:#1d4ed8}
.vw-expression{background:#fef3c7;color:#b45309}

/* 练习模式 */
.dict-row,.shadow-row{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;position:relative}
.dict-row .eye{position:absolute;top:8px;right:10px;cursor:pointer;color:#94a3b8;font-size:15px}
.dict-row .btns{display:flex;gap:8px}
.dict-input{width:100%;margin-top:8px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.dict-ok{color:var(--green);font-weight:700}.dict-bad{color:var(--red);font-weight:700}
.cloze-input{display:inline-block;width:110px;padding:2px 8px;margin:0 3px;border:none;border-bottom:2px solid var(--blue);font-size:14px;outline:none;background:#eff6ff;border-radius:4px 4px 0 0;text-align:center}
.fulltext{padding:6px 4px;line-height:2}
.fulltext .ft-en{font-size:15.5px;margin-bottom:16px}
.fulltext .ft-zh{color:#4b5563}
.practice-menu{position:absolute;top:44px;right:14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:30;min-width:140px;overflow:hidden}
.practice-menu a{display:block;padding:9px 16px;font-size:14px;cursor:pointer}
.practice-menu a:hover{background:var(--surface)}
.pset-panel{position:absolute;top:52px;right:10px;width:300px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(16,24,40,.18);z-index:40;padding:4px 14px 12px}

/* 弹窗 */
.modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.modal-mask.show{display:flex}
.modal{background:var(--panel);border-radius:16px;width:min(1200px,96vw);max-height:88vh;overflow:hidden;display:flex;flex-direction:column}
.modal.small{width:min(420px,96vw)}
.modal .m-head{display:flex;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);font-weight:800;font-size:16px}
.modal .m-head .x{margin-left:auto;cursor:pointer;color:#94a3b8;font-size:20px;padding:0 4px}
.modal .m-body{overflow-y:auto;padding:16px 20px}
.mtabs{display:flex;border-bottom:1px solid var(--line)}
.mtabs .mt{flex:1;text-align:center;padding:12px;cursor:pointer;font-size:14.5px;color:#64748b;border-bottom:2px solid transparent}
.mtabs .mt.on{font-weight:800}
.mtabs .mt.on.c-word{color:#7c3aed;border-color:#7c3aed}
.mtabs .mt.on.c-phrase{color:#1d4ed8;border-color:#1d4ed8}
.mtabs .mt.on.c-expression{color:#b45309;border-color:#b45309}
.mtools{display:flex;gap:10px;margin-bottom:14px}
.mtools .sbtn{flex:1;justify-content:center}
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1000px){.vgrid{grid-template-columns:repeat(2,1fr)}}
.vcard-w{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px}
.vcard-w .w-top{display:flex;align-items:center;gap:6px}
.vcard-w .w-text{font-size:16px;font-weight:800;flex:1;word-break:break-word}
.vcard-w.c-word .w-text{color:#7c3aed}.vcard-w.c-phrase .w-text{color:#1d4ed8}.vcard-w.c-expression .w-text{color:#b45309}
.w-star{cursor:pointer;color:#cbd5e1;font-size:16px;background:none;border:none}
.w-star.on{color:#f59e0b}
.w-book{font-size:11px;border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--text2);background:var(--surface-2);cursor:pointer}
.w-phon{font-size:12.5px;color:#475569;display:flex;gap:10px;flex-wrap:wrap}
.w-phon .p-us{color:#2563eb}.w-phon .p-uk{color:#dc2626}
.w-def{background:var(--surface);border-radius:8px;padding:8px;min-height:64px;font-size:13.5px;color:var(--text2);text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:1}
.w-def.open{background:var(--surface-2);color:var(--text)}
.w-foot{display:flex;gap:8px}
.w-foot .btn{flex:1}
.pset-row{display:flex;align-items:center;justify-content:space-between;padding:11px 2px;border-bottom:1px solid var(--f,line)}
.pset-row .pl{font-size:14.5px}
.switch{position:relative;width:44px;height:24px;background:#e2e8f0;border-radius:999px;cursor:pointer;transition:.2s;flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.2s}
.switch.on{background:var(--blue)}
.switch.on::after{left:23px}
.size-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.size-grid .sbtn{justify-content:center;padding:10px}

/* 个人中心 */
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.profile-grid{grid-template-columns:1fr}}
.puser{display:flex;align-items:center;gap:14px;grid-column:1/-1}
.puser .avatar{width:54px;height:54px;font-size:24px}
.puser .badge{font-size:12px;background:#eff6ff;color:var(--blue);border-radius:6px;padding:2px 8px;font-weight:600}
.puser .right{margin-left:auto;text-align:right;font-size:13px;color:var(--muted)}
.quota{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;gap:30px;margin:10px 0}
.quota .q-num{font-size:24px;font-weight:800;color:var(--blue)}
.dev-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line);font-size:13.5px}
.dev-row:last-child{border-bottom:none}
.dev-row .d-ico{font-size:18px}
.dev-row .d-meta{flex:1;min-width:0}
.dev-row .cur{font-size:11px;background:#ecfdf5;color:#059669;border-radius:5px;padding:1px 6px}
.cal{display:flex;gap:8px;margin-top:10px}
.cal .cday{flex:1;text-align:center;font-size:12px;color:var(--muted)}
.cal .cday .dot{width:30px;height:30px;line-height:30px;border-radius:50%;margin:4px auto 0;background:var(--surface);color:var(--muted)}
.cal .cday.hit .dot{background:var(--green);color:#fff;font-weight:700}

/* 手机端播放模式：窄屏居中 + 移动端布局 */
body.phone-mode{background:#d8dfeb}
body.phone-mode .topbar{max-width:430px;margin:0 auto;border-radius:0 0 14px 14px;box-shadow:var(--shadow)}
body.phone-mode .topbar-inner{padding:10px 14px}
body.phone-mode .mobiletab{max-width:430px;margin:0 auto;bottom:8px;border-radius:14px;box-shadow:0 4px 18px rgba(16,24,40,.22);border:1px solid var(--line)}
body.phone-mode .page,body.phone-mode .footer{max-width:430px;margin:0 auto;background:#fff;box-shadow:0 0 24px rgba(16,24,40,.10)}
body.phone-mode .page{min-height:calc(100vh - 130px)}
body.phone-mode .mainnav{display:none}
body.phone-mode .mobiletab{display:flex}
body.phone-mode .grid{grid-template-columns:1fr}
body.phone-mode .vcard img{height:200px}
body.phone-mode .home-layout{grid-template-columns:1fr}
body.phone-mode .home-side{display:none}
body.phone-mode .topic-tabs{margin-bottom:10px}
body.phone-mode .player-layout{grid-template-columns:1fr}
body.phone-mode .sub-col .card{position:static;max-height:none}
body.phone-mode .profile-grid{grid-template-columns:1fr}
body.phone-mode .footer{background:transparent;box-shadow:none}
.phone-banner{max-width:430px;margin:0 auto 14px;background:#eef4ff;color:var(--blue);border:1px solid #bfd7fe;border-radius:10px;padding:8px 14px;font-size:13.5px;text-align:center}

.sec-row{display:flex;align-items:center;gap:10px;padding:12px 2px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:8px}
.sec-row:hover{background:var(--surface-2)}
.sec-row .arrow{margin-left:auto;color:#94a3b8;font-size:20px;flex:none}
.logout-card{background:#fff7f7;border:1px solid #fecaca}

/* 统计 */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.stat{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;text-align:center}
.stat .num{font-size:26px;font-weight:800;color:var(--blue)}
.stat .lbl{font-size:13px;color:var(--muted)}

/* 锁定遮罩 */
.lock-mask{position:absolute;inset:0;background:rgba(15,23,42,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:10;color:#fff;text-align:center;padding:20px}
.lock-mask .lk-title{font-size:18px;font-weight:800}
.lock-mask p{color:#cbd5e1;font-size:13.5px;max-width:380px}

/* 后台分页栏 + 每页条数选择 */
.pgbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.pg-per{padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:13px;color:var(--text2);cursor:pointer}
.pg-per:hover{border-color:var(--blue)}
.pg-per:focus{outline:none;border-color:var(--blue)}

/* 我上传视频的字幕状态徽章（首页卡片 / 学习列表行） */
.vc-subs{display:flex;align-items:center;gap:8px;font-size:12px;margin-top:6px;
  border-radius:8px;padding:5px 10px}
.vc-subs.ok{background:#f2f9f4;color:#217a3c}
.vc-subs.miss{background:#fdf3e7;color:#b45309}
.vc-subs-btn{margin-left:auto;cursor:pointer;font-weight:700;color:#1d4ed8;
  background:#fff;border:1px solid #c7d7f5;border-radius:6px;padding:2px 8px;white-space:nowrap}
.vc-subs-btn:hover{background:#eaf1fe;border-color:#1d4ed8}

/* 播放页自动补齐（翻译+词汇）进度条 */
.auto-enrich{margin:0 0 8px}
.auto-enrich .ae-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fdf3e7;border:1px solid #f5d9ae;color:#8a5a1a;border-radius:10px;
  padding:8px 12px;font-size:13px}
.ae-row.running{background:#eef4ff;border-color:#bfd7fe;color:#274a8a}
.ae-row.err{background:#fdecec;border-color:#f3b6b6;color:#a03030}
.ae-row .ae-input{flex:1;min-width:150px;height:30px;padding:4px 10px;font-size:12.5px}
.ae-row .ae-txt{flex:1;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ae-row .ae-ico{flex:none}
.ae-spin{width:14px;height:14px;border:2px solid #bfd7fe;border-top-color:#274a8a;
  border-radius:50%;animation:ae-spin .8s linear infinite;flex:none}
@keyframes ae-spin{to{transform:rotate(360deg)}}

/* 字幕颜色图例（动态字幕面板）：居中胶囊条，随主题适配 */
.sub-legend{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  font-size:12px;color:var(--muted);margin:2px 0 10px;padding:6px 12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px}
.sub-legend .vw{font-size:11.5px}
.sub-legend .sl-tip{color:var(--muted);font-size:11.5px}

/* 词汇弹窗：固定高度，切换页签时外框保持不动，仅内容区内部滚动 */
#vocabMask .modal{height:min(760px,86vh)}
#vocabMask .m-body{flex:1;min-height:0}

/* 上传流程步骤条（上传方式 / 本地上传 / YouTube 上传 / 字幕工具页） */
.up-steps{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.up-steps .step{display:flex;align-items:center;gap:8px;background:#f6f9ff;border:1px solid #dce7fb;
  border-radius:10px;padding:8px 14px;font-size:13px;color:#2b4a77}
.up-steps .step b{font-size:15px;color:#2f6fdf}

/* ===== 播放页视图模式：标准(默认) / 剧场 vm-theater / 最大化 vm-max / 纯画面(bigview，原有规则) ===== */
/* 剧场：视频横贯整个浏览器宽度（16:9 等比，超宽屏限高 80vh），字幕面板移到下方，页面可滚动 */
body.vm-theater .player-layout{grid-template-columns:1fr}
body.vm-theater .player-col{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
body.vm-theater .player-col .card{padding:14px}
body.vm-theater .stage{width:min(100%,calc(80vh * 16 / 9));margin:0 auto}

/* 最大化：铺满整个浏览器视口（覆盖站点头部），字幕仍在右侧，两栏各自内部滚动 */
body.vm-max{overflow:hidden}
body.vm-max .player-layout{position:fixed;inset:0;z-index:90;width:100vw;max-width:none;
  grid-template-columns:minmax(0,1fr) 460px;gap:14px;padding:14px 16px;
  align-items:stretch;background:#eef1f5}
body.vm-max .player-col .card,body.vm-max .sub-col .card{height:100%;margin:0}
body.vm-max .player-col .card{display:flex;flex-direction:column;overflow:auto}
body.vm-max .stage{flex:none}
body.vm-max .stage video,body.vm-max .stage iframe{height:calc(100vh - 290px);width:100%;aspect-ratio:auto}
body.vm-max .sub-col,body.vm-max .sub-col .card{height:100%}
body.vm-max .sub-col .card{display:flex;flex-direction:column;overflow:hidden}
body.vm-max .sub-list{flex:1;min-height:0}

/* ===== 视图模式体验优化 ===== */
/* 剧场：100vw 含滚动条宽度会导致 8px 横向溢出，直接禁止横向滚动 */
body.vm-theater{overflow-x:hidden}

/* 切换流畅度：视频区域尺寸变化做平滑过渡 */
.player-layout{transition:grid-template-columns .3s ease}
.stage{transition:width .3s ease,height .3s ease,margin .3s ease}
body.vm-theater .player-col{transition:width .3s ease,margin .3s ease}

/* 最大化：视频列弹性填充（flex-basis 0 杜绝内容循环爆算），画面居中、黑边自适应，控制条始终可见 */
body.vm-max .player-col .card{display:flex;flex-direction:column;overflow:auto}
body.vm-max .stage{flex:1 1 0;min-height:240px;width:auto;display:flex;align-items:center;justify-content:center}
body.vm-max .stage video{width:auto;max-width:100%;height:100%;aspect-ratio:auto}
body.vm-max .stage iframe{width:100%;height:auto;aspect-ratio:16/9;max-height:100%}

/* 剧场布局最终方案：直接放开页面容器宽度（同 body.home-wide 先例），
   弃用 100vw + 负边距技巧（该技巧受滚动条/内边距影响会产生横向溢出） */
body.vm-theater .page{max-width:none;padding:14px 18px}
body.vm-theater .player-col{width:auto;max-width:none;margin:0}
body.vm-theater .player-col .card{padding:14px}
body.vm-theater .stage{width:min(100%,calc(80vh * 16 / 9));margin:0 auto}

/* 剧场：字幕面板与视频画面对齐（同宽居中，正好在视频正下方） */
body.vm-theater .sub-col{width:min(100%,calc(80vh * 16 / 9));margin:0 auto}

/* ===== 视图模式分段选择器（四档平铺，点哪个去哪个，当前档高亮） ===== */
.vm-seg{display:inline-flex;flex-wrap:wrap;gap:2px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:3px;margin-left:auto}
.vm-seg button{border:none;background:none;cursor:pointer;font-size:12.5px;color:#4b5563;
  padding:5px 12px;border-radius:999px;white-space:nowrap;transition:background .2s,color .2s}
.vm-seg button:hover{color:#1d4ed8;background:#e8f0fe}
.vm-seg button.on{background:#2f6fdf;color:#fff;font-weight:700}

/* 切换流畅度：模式变更时播放区整体轻微淡入 */
.player-layout.vm-anim{animation:viewFade .28s ease}
@keyframes viewFade{from{opacity:.35}to{opacity:1}}

/* 剧场（v2）：视频放大至整页宽，字幕固定右侧（不再移到下方） */
body.vm-theater .player-layout{grid-template-columns:minmax(0,1fr) 460px}
body.vm-theater .stage{width:100%;margin:0}
body.vm-theater .stage video,body.vm-theater .stage iframe{max-height:calc(100vh - 150px);margin:0 auto}
body.vm-theater .sub-col{width:auto;margin:0}

/* 窄屏：视图分段选择器换行到标题下方，避免与打卡/收藏挤在一行 */
@media(max-width:1100px){
  .pl-head{flex-wrap:wrap}
  .vm-seg{order:9;width:100%;margin-left:0;justify-content:center}
}

/* 最大化：右列卡片顶格与视频对齐（覆盖普通模式的 sticky 吸附与限高） */
body.vm-max .sub-col{position:static}
body.vm-max .sub-col .card{position:static;top:auto;max-height:none}

/* 最大化修复：视频改绝对定位填充剩余空间（height:100% 在滚动弹性容器里会循环爆算成超大元素） */
body.vm-max .stage{position:relative;display:block;flex:1 1 auto;min-height:240px;width:auto}
body.vm-max .stage video,body.vm-max .stage iframe{position:absolute;inset:0;width:100%;
  height:100%;object-fit:contain;aspect-ratio:auto;max-width:none;max-height:none}

/* 最大化（定案）：stage 用确定性高度，杜绝任何弹性/百分比循环爆算 */
body.vm-max .player-col .card{display:block;overflow:auto}
body.vm-max .stage{display:block;width:100%;height:calc(100vh - 330px);min-height:260px;flex:none}
body.vm-max .stage video,body.vm-max .stage iframe{position:absolute;inset:0;width:100%;
  height:100%;object-fit:contain;aspect-ratio:auto;max-width:none;max-height:none}

/* 最大化（关键）：锁定网格行高为视口高度，右列字幕列表内部滚动，
   否则行高被字幕列表内容撑到两万多像素、视频跟着被拉爆 */
body.vm-max .player-layout{grid-template-rows:minmax(0,1fr)}

/* 最大化（定案v2）：stage 弹性填满整个左列高度（视频已绝对定位填充，无循环爆算风险），
   控制条/开始学习/简介依次排在下方 */
body.vm-max .player-col .card{display:flex;flex-direction:column;height:100%}
body.vm-max .stage{height:auto;flex:1 1 auto;min-height:260px;width:100%}
body.vm-max .controls,body.vm-max .start-cta,body.vm-max .under-sub,body.vm-max .desc{flex:none}

/* 全模式保比例：视频一律等比显示（contain），任何盒型都不拉伸变形 */
.stage video{object-fit:contain;object-position:center}

/* 最大化模式下画面缩放改用 transform（与绝对定位填充兼容，放大裁边不变形） */
body.vm-max .stage.zoom-125 video{width:100%;height:100%;transform:scale(1.25)}
body.vm-max .stage.zoom-150 video{width:100%;height:100%;transform:scale(1.5)}
body.vm-max .stage.zoom-100 video{width:100%;height:100%;transform:scale(1)}

/* 最大化（v3）：视频顶天立地占满整列高度，标题行/控制条悬浮于画面之上 */
body.vm-max .player-col .card{display:block;height:100%;padding:0;overflow:hidden;position:relative}
body.vm-max .stage{position:absolute;inset:0;height:100%;min-height:0;width:100%;display:block;flex:none}
body.vm-max .pl-head{position:absolute;top:0;left:0;right:0;z-index:6;margin:0;padding:12px 16px;
  background:linear-gradient(rgba(10,15,22,.78),rgba(10,15,22,0))}
body.vm-max .pl-head h1,body.vm-max .pl-head .back{color:#fff}
body.vm-max .controls{position:absolute;left:0;right:0;bottom:56px;z-index:6;margin:0;padding:8px 0;
  background:rgba(10,15,22,.55);backdrop-filter:blur(4px);border-radius:0}
body.vm-max .video-sub{bottom:132px}
body.vm-max .start-cta,body.vm-max .under-sub,body.vm-max .desc{display:none}

/* 最大化：悬浮标题/控制条自动隐藏（播放中鼠标静止 2 秒后滑出屏幕，字幕不被遮挡） */
body.vm-max .controls,body.vm-max .pl-head{transition:transform .3s ease,opacity .3s ease}
body.vm-max.hide-hud .controls{transform:translateY(140%);opacity:0}
body.vm-max.hide-hud .pl-head{transform:translateY(-140%);opacity:0}

/* 最大化：视频/字幕之间的可拖拽分隔条（拖右 = 视频变宽字幕变窄，双击恢复） */
body.vm-max .player-layout{grid-template-columns:minmax(0,1fr) 10px var(--sub-w,460px)}
body.vm-max .vm-divider{display:block;cursor:col-resize;background:transparent;
  border-radius:4px;transition:background .15s;touch-action:none}
body.vm-max .vm-divider:hover,body.vm-max .vm-divider.dragging{background:#93b8f0}
body.resizing{user-select:none;cursor:col-resize}
body.resizing *{cursor:col-resize!important}

/* 隐藏状态下悬浮层不拦截点击 */
body.vm-max.hide-hud .controls,body.vm-max.hide-hud .pl-head{pointer-events:none}

/* 自动补齐百分比进度条 */
.ae-track{height:6px;background:#dbe5f1;border-radius:999px;overflow:hidden;margin-top:6px}
.ae-fill{height:100%;background:#2f6fdf;border-radius:999px;transition:width .5s ease}
.ae-pct{font-size:11.5px;color:#5b7bb2;margin-top:3px;text-align:right}

/* ================= 界面主题系统 v2（设计语言参考 shadcn/ui · daisyUI · Material You） =================
   架构：组件只消费语义变量；主题只覆盖变量。护眼主题支持运行时调参（明度/绿色浓度/色温）。 */

html[data-theme="dark"]{
  color-scheme:dark;
  background:#04070e;
  --bg:#0a0f1c; --card:#111a2c; --panel:#17223a; --surface:#1b2740; --surface-2:#152034;
  --text:#e8edf7; --text2:#c5cfe2; --muted:#8a97ad; --line:#223052;
  --topbar-bg:rgba(9,14,27,.85); --nav-text:#c9d4e8; --nav-hover:#16233e;
  --accent-soft:#152642; --accent-soft-2:#1c3054;
  --blue:#60a5fa; --green:#34d399; --orange:#fbbf24; --red:#f87171; --purple:#a78bfa;
  --shadow:0 1px 2px rgba(0,0,0,.55),0 12px 32px rgba(0,0,0,.42);
}
html[data-theme="dark"] .pl-head h1,html[data-theme="dark"] .pl-head .back{color:#fff}
html[data-theme="dark"] .st-log{background:#0e1626;border-color:#223050;color:#c9d4e8}
html[data-theme="dark"] .btn-light,html[data-theme="cool"] .btn-light{background:var(--accent-soft);color:var(--blue)}
html[data-theme="dark"] .btn-light:hover,html[data-theme="cool"] .btn-light:hover{background:var(--accent-soft-2)}
html[data-theme="dark"] .sent.cur,html[data-theme="cool"] .sent.cur{background:var(--accent-soft);border-color:#2c3e5f}
html[data-theme="dark"] .sent .s-zh,html[data-theme="cool"] .sent .s-zh,
html[data-theme="dark"] .desc,html[data-theme="cool"] .desc{color:var(--text2)}
html[data-theme="dark"] .tag,html[data-theme="dark"] .chip,
html[data-theme="dark"] .ua-table th,html[data-theme="cool"] .ua-table th{background:var(--surface);color:var(--muted)}
html[data-theme="dark"] .ua-table td,html[data-theme="cool"] .ua-table td{color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .start-cta,html[data-theme="cool"] .start-cta{border-color:#2c3e5f;background:var(--accent-soft)}
html[data-theme="dark"] .under-sub,html[data-theme="cool"] .under-sub{background:var(--surface-2);border-color:var(--line)}
html[data-theme="dark"] .vc-subs.ok{background:#0f2f22;color:#6ee7b7}
html[data-theme="dark"] .vc-subs.miss{background:#3a2a10;color:#fcd34d}
html[data-theme="dark"] .ae-row.running{background:var(--accent-soft);border-color:#2c3e5f}
html[data-theme="dark"] .ae-track,html[data-theme="cool"] .ae-track{background:var(--surface)}

/* 🌿 护眼（参数可在播放设置中实时调节：明度 / 绿色浓度 / 色温暖度） */
html[data-theme="eye"]{
  --bg:hsl(130 26% 86%); --card:hsl(130 24% 91%); --panel:hsl(130 24% 93%);
  --surface:hsl(130 22% 84%); --surface-2:hsl(130 22% 89%);
  --text:#24352a; --text2:#3c5242; --muted:#6b806e; --line:hsl(130 24% 72%);
  --topbar-bg:hsla(130 26% 88% / .92); --nav-text:#3d5240; --nav-hover:hsl(130 22% 79%);
  --accent-soft:hsl(130 20% 84%); --accent-soft-2:hsl(130 22% 78%);
  --blue:#2f7d55; --green:#2f9e6e; --orange:#a8730f; --red:#b05a4a; --purple:#6b5fa8;
  --shadow:0 1px 3px rgba(47,80,55,.12),0 8px 24px rgba(47,80,55,.08);
}

/* 🎨 艺术（暖纸 + 赭石/橄榄，美术馆配色） */
html[data-theme="art"]{
  --bg:#f2eadb; --card:#fbf5e9; --panel:#fffdf6; --surface:#ede2cd; --surface-2:#f4ecdc;
  --text:#33291c; --text2:#5a4a36; --muted:#9c8b72; --line:#e0d2b8;
  --topbar-bg:rgba(248,241,228,.92); --nav-text:#6b5b45; --nav-hover:#efe3cc;
  --accent-soft:#f1e6d0; --accent-soft-2:#e8d8ba;
  --blue:#b4552d; --green:#7d8b41; --orange:#d9972b; --red:#b04a3a; --purple:#8a5fa8;
  --radius:18px;
  --shadow:0 2px 8px rgba(122,95,58,.12),0 12px 30px rgba(122,95,58,.1);
}
html[data-theme="art"] body{font-family:Georgia,"Songti SC","SimSun",serif}
html[data-theme="art"] .page-title,html[data-theme="art"] .card h3,
html[data-theme="art"] .stitle{letter-spacing:.5px}

/* 🌍 海外（国际简洁风：Material 白 + 标准蓝，8px 小圆角） */
html[data-theme="global"]{
  --bg:#f8f9fa; --card:#ffffff; --panel:#ffffff; --surface:#f1f3f4; --surface-2:#f8f9fa;
  --text:#202124; --text2:#3c4043; --muted:#5f6368; --line:#dadce0;
  --topbar-bg:rgba(255,255,255,.95); --nav-text:#3c4043; --nav-hover:#e8f0fe;
  --accent-soft:#e8f0fe; --accent-soft-2:#d2e3fc;
  --blue:#1a73e8; --green:#188038; --orange:#e8710a; --red:#d93025; --purple:#9334e6;
  --radius:8px;
  --shadow:0 1px 2px rgba(60,64,67,.15),0 1px 3px 1px rgba(60,64,67,.06);
}

/* 深色主题组件适配（暗/酷共用） */
html[data-theme="dark"] .tag,html[data-theme="cool"] .tag,
html[data-theme="dark"] .chip,html[data-theme="cool"] .chip,
html[data-theme="dark"] .sbtn,html[data-theme="cool"] .sbtn{background:var(--surface);color:var(--text2)}
html[data-theme="dark"] .muted,html[data-theme="cool"] .muted,
html[data-theme="dark"] .page-sub,html[data-theme="cool"] .page-sub{color:var(--muted)}
html[data-theme="dark"] .ua-table th,html[data-theme="cool"] .ua-table th{background:var(--surface);color:var(--muted)}
html[data-theme="dark"] .ua-table td,html[data-theme="cool"] .ua-table td{color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .pset-panel,html[data-theme="cool"] .pset-panel{background:var(--panel)}
html[data-theme="dark"] .modal,html[data-theme="cool"] .modal{background:var(--panel)}
html[data-theme="dark"] .input,html[data-theme="cool"] .input{background:var(--panel);color:var(--text)}
html[data-theme="dark"] .userchip,html[data-theme="cool"] .userchip{background:var(--panel)}
html[data-theme="dark"] .w-def,html[data-theme="cool"] .w-def{background:var(--surface);color:var(--text2)}
html[data-theme="dark"] .vc-subs.ok{background:#0f2f22;color:#6ee7b7}
html[data-theme="dark"] .vc-subs.miss{background:#3a2a10;color:#fcd34d}
html[data-theme="dark"] .ae-row.running{background:var(--accent-soft);border-color:#2c3e5f}
html[data-theme="dark"] .ae-track,html[data-theme="cool"] .ae-track{background:var(--surface)}

/* 界面主题切换器（播放设置面板内） */
.theme-seg{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.theme-seg button{border:1px solid var(--line);background:var(--panel);color:var(--text2);
  cursor:pointer;font-size:12.5px;padding:5px 10px;border-radius:999px;transition:.15s}
.theme-seg button:hover{border-color:var(--blue);color:var(--blue)}
.theme-seg button.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}

/* 🌿 护眼参数调节器（选择护眼主题后出现；明度/绿色浓度/色温暖度 实时生效） */
.eye-tuner{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:10px;
  border:1px dashed var(--line);border-radius:10px;background:var(--surface-2)}
.eye-tuner .eye-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text2)}
.eye-tuner .eye-row>span{width:64px;flex:none}
.eye-tuner input[type=range]{flex:1;accent-color:var(--green)}
.eye-tuner .eye-act{display:flex;justify-content:flex-end;margin-top:2px}

/* ================= 主题调优 v3 ================= */

/* 🌙 黑色：真·深黑（OLED 友好），表面仅微微提亮以保留层级 */
html[data-theme="dark"]{
  --bg:#030304; --card:#0e0e11; --panel:#131317; --surface:#17171c; --surface-2:#0c0c0f;
  --text:#ededf0; --text2:#c9c9cf; --muted:#7c7c85; --line:#232329;
  --topbar-bg:rgba(4,4,5,.92); --nav-text:#c9c9cf; --nav-hover:#17171c;
  --accent-soft:#151519; --accent-soft-2:#1d1d23;
  --shadow:0 1px 2px rgba(0,0,0,.85),0 12px 32px rgba(0,0,0,.65);
}

/* ① 极光流动背景（三组光斑缓慢漂移） */
/* ② 卡片流光扫过线（顶部青紫光带周期性划过） */
/* ③ 页面标题流光字 */
/* ④ 播放按钮霓虹呼吸 */
@media (prefers-reduced-motion: reduce){
}

/* 网格电路背景（缓慢平移）+ 青色辉光 */
/* 卡片：青色描边 + 青蓝流光扫过线 */
/* 标题：青蓝流光字 */
/* 主按钮青蓝渐变 + 辉光；头像同步 */
@media (prefers-reduced-motion: reduce){
}


/* 字幕校准（播放设置面板内） */
.cal-seg{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.cal-seg button{border:1px solid var(--line);background:var(--panel);color:var(--text2);
  cursor:pointer;font-size:12px;padding:5px 9px;border-radius:8px;transition:.15s}
.cal-seg button:hover{border-color:var(--blue);color:var(--blue)}
.cal-note{font-size:11.5px;color:var(--muted);margin-top:6px}

/* 最大化：收紧视频列与字幕列之间的缝隙（38px → 20px） */
body.vm-max .player-layout{gap:6px}
body.vm-max .vm-divider{width:8px}

/* 分隔条交互修正：光标路过只淡显（不抢视线），按下拖拽时才高亮 */
body.vm-max .vm-divider:hover{background:rgba(147,168,255,.22)}
body.vm-max .vm-divider.dragging{background:#93b8f0}

/* 字幕管理：两步确认清除按钮 */
.pset-row .clear-subs{width:100%;color:#b04a3a;border:1px solid rgba(176,74,58,.35);background:#fff}
.pset-row .clear-subs:hover{background:#fdf0f0;border-color:#b04a3a}
.pset-row .clear-subs.danger-armed{background:#b04a3a;color:#fff;border-color:#b04a3a}

/* ---- 本地观看 /local：文件全程留在用户电脑，不经服务器 ---- */
.badge-local{font-size:11px;font-weight:600;color:#047857;background:#d7f5e9;border:1px solid #a7e3cc;border-radius:99px;padding:2px 9px;margin-left:8px;vertical-align:2px;white-space:nowrap}
.local-empty{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;background:var(--card);padding:20px}
.local-empty .le-ico{font-size:44px;line-height:1}
.local-empty .le-t{font-size:17px;font-weight:700;color:var(--text)}
.local-empty .le-d{font-size:12.5px;color:var(--muted);line-height:1.9;max-width:560px}
.local-empty .le-btns{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap;justify-content:center}
.local-empty.drag{outline:2px dashed var(--blue);outline-offset:-12px;background:var(--accent-soft)}
.local-osd{position:absolute;left:50%;transform:translateX(-50%);bottom:8%;z-index:3;max-width:86%;background:rgba(0,0,0,.74);color:#fff;padding:8px 14px;border-radius:10px;font-size:16px;font-weight:600;text-align:center;line-height:1.55;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.local-osd .zh{display:block;font-size:13px;font-weight:400;opacity:.92;margin-top:3px}
.local-filebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:12px}
.lf-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:4px 10px;color:var(--text2);max-width:100%}
.lf-chip .nm{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-chip select,.lf-sel{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:8px;font-size:11.5px;padding:1px 4px;max-width:300px}
.local-hint{padding:26px 16px;text-align:center;color:var(--muted);font-size:12.5px;line-height:2}
html[data-theme="dark"] .badge-local,html[data-theme="cool"] .badge-local{color:#6ee7b7;background:rgba(16,185,129,.14);border-color:rgba(110,231,183,.35)}

/* 播放页：字幕被清空/缺失时的补字幕引导（仅可管理该视频的人可见） */
.subs-empty{margin:10px;padding:12px;border:1px dashed var(--orange,#d97706);border-radius:10px;background:var(--surface-2);text-align:center}
.subs-empty .se-t{font-weight:700;font-size:13.5px;color:var(--text)}
.subs-empty .se-d{font-size:12px;color:var(--muted);line-height:1.8;margin:6px 0 10px}

/* 全站统一：隐藏页面级滚动条（滚轮/键盘滚动能力保留）；
   侧栏、字幕列表等面板自身的滚动条不受影响（如首页左侧栏） */
html{scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
html::-webkit-scrollbar{width:0;height:0;display:none}
body::-webkit-scrollbar{width:0;height:0;display:none}

/* 管理后台左侧导航（/admin 与 /upload-admin） */
.admin-shell{display:grid;grid-template-columns:205px minmax(0,1fr);gap:16px;align-items:start}
/* 左目录固定定位：锚点跳转/平滑滚动时纹丝不动 */
.admin-nav{min-width:205px}
.admin-nav .card{position:fixed;top:76px;width:205px;padding:10px;display:flex;flex-direction:column;gap:4px}
@media(max-width:900px){.admin-nav .card{position:static;width:auto}}
.admin-nav .side-title{margin-bottom:6px}
.anav-item{display:block;padding:9px 12px;border-radius:10px;font-size:13.5px;color:var(--text2)}
.anav-item:hover{background:var(--surface)}
.anav-item.on{background:var(--nav-hover);color:var(--blue);font-weight:600}
@media(max-width:900px){.admin-shell{grid-template-columns:1fr}.admin-nav{position:static}}


/* ================= 黑色主题 · 满天繁星炫彩星空顶 v2 =================
   三层星星：大星炫彩层(26颗/漂移420s极慢) + 中星层(26颗/300s反向) + 微星尘底色(20颗)；
   闪烁频率 2.6s/3.4s 交替；固定背景层不随滚动，卡片实色不受影响。 */
html[data-theme="dark"] body{
  background-color:transparent;
  background-image:
    radial-gradient(0.9px 0.9px at 22.9% 4.4%, #e0e7ffa5, transparent 55%),
    radial-gradient(1.12px 1.12px at 89.8% 91.1%, #ccfbf19e, transparent 55%),
    radial-gradient(1.21px 1.21px at 47.0% 45.1%, #e0e7ff75, transparent 55%),
    radial-gradient(1.16px 1.16px at 55.3% 77.8%, #ffffff99, transparent 60%),
    radial-gradient(1.21px 1.21px at 12.7% 14.5%, #ccfbf170, transparent 55%),
    radial-gradient(0.99px 0.99px at 11.5% 15.2%, #fef9c375, transparent 55%),
    radial-gradient(1.12px 1.12px at 67.3% 79.5%, #ffffffa8, transparent 55%),
    radial-gradient(1.2px 1.2px at 89.0% 21.2%, #ffffffa0, transparent 65%),
    radial-gradient(1.13px 1.13px at 22.3% 13.0%, #dbeafeaa, transparent 60%),
    radial-gradient(1.21px 1.21px at 92.4% 72.7%, #dbeafe89, transparent 60%),
    radial-gradient(1.26px 1.26px at 35.4% 3.8%, #dbeafe89, transparent 55%),
    radial-gradient(1.12px 1.12px at 56.3% 38.0%, #dbeafeb2, transparent 65%),
    radial-gradient(1.14px 1.14px at 31.3% 35.5%, #dbeafea8, transparent 65%),
    radial-gradient(1.22px 1.22px at 62.6% 82.2%, #e0e7ff70, transparent 60%),
    radial-gradient(1.04px 1.04px at 80.8% 24.0%, #e0e7ff84, transparent 55%),
    radial-gradient(1.17px 1.17px at 17.0% 10.0%, #e0e7ff93, transparent 60%),
    radial-gradient(1.16px 1.16px at 12.5% 46.4%, #ffffff5b, transparent 55%),
    radial-gradient(0.89px 0.89px at 71.8% 45.8%, #fef9c382, transparent 65%),
    radial-gradient(0.84px 0.84px at 43.7% 87.3%, #ccfbf163, transparent 60%),
    radial-gradient(1.18px 1.18px at 64.4% 27.7%, #ffffff72, transparent 65%);
  background-size:460px 460px;
}
html[data-theme="dark"] body::before{
  content:"";position:fixed;inset:-140px;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(2.99px 2.99px at 89.0% 48.7%, #bae6fdc4, transparent 60%),
    radial-gradient(2.17px 2.17px at 94.6% 67.4%, #fde68af2, transparent 60%),
    radial-gradient(2.22px 2.22px at 30.1% 2.7%, #fcd34def, transparent 65%),
    radial-gradient(2.85px 2.85px at 61.1% 63.1%, #fde68ae0, transparent 55%),
    radial-gradient(2.31px 2.31px at 29.1% 61.6%, #93c5fdc6, transparent 65%),
    radial-gradient(1.84px 1.84px at 5.4% 68.3%, #fda4afe5, transparent 55%),
    radial-gradient(2.5px 2.5px at 19.6% 49.4%, #fde68ac6, transparent 55%),
    radial-gradient(1.88px 1.88px at 6.3% 60.7%, #a5f3fcf7, transparent 55%),
    radial-gradient(2.58px 2.58px at 44.8% 74.5%, #bae6fdcc, transparent 60%),
    radial-gradient(1.83px 1.83px at 56.6% 89.7%, #c4b5fdfc, transparent 60%),
    radial-gradient(2.81px 2.81px at 62.7% 90.8%, #c4b5fded, transparent 60%),
    radial-gradient(2.65px 2.65px at 57.9% 76.5%, #bae6fdf2, transparent 60%),
    radial-gradient(2.54px 2.54px at 45.3% 33.0%, #bae6fddd, transparent 55%),
    radial-gradient(2.57px 2.57px at 89.7% 70.2%, #f9a8d4db, transparent 60%),
    radial-gradient(2.81px 2.81px at 39.4% 68.2%, #a5f3fcf7, transparent 60%),
    radial-gradient(1.92px 1.92px at 53.4% 75.0%, #6ee7b7db, transparent 55%),
    radial-gradient(2.83px 2.83px at 36.6% 62.6%, #ffffffd1, transparent 55%),
    radial-gradient(2.73px 2.73px at 40.5% 50.5%, #f9a8d4ed, transparent 65%),
    radial-gradient(2.82px 2.82px at 97.5% 29.0%, #f9a8d4cc, transparent 65%),
    radial-gradient(1.96px 1.96px at 44.4% 42.2%, #fda4afd1, transparent 60%),
    radial-gradient(2.62px 2.62px at 60.2% 60.6%, #fcd34dc9, transparent 65%),
    radial-gradient(2.75px 2.75px at 43.2% 91.7%, #fde68ac9, transparent 65%),
    radial-gradient(1.87px 1.87px at 65.1% 36.5%, #c4b5fdf4, transparent 55%),
    radial-gradient(2.05px 2.05px at 82.8% 6.4%, #c4b5fde5, transparent 60%),
    radial-gradient(2.4px 2.4px at 55.5% 46.7%, #fda4afdd, transparent 65%),
    radial-gradient(2.09px 2.09px at 14.7% 64.7%, #a5f3fcce, transparent 60%);
  background-size:760px 760px;
  animation:sky-drift-a 420s linear infinite, sky-twinkle-a 2.6s ease-in-out infinite alternate;
}
html[data-theme="dark"] body::after{
  content:"";position:fixed;inset:-140px;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1.42px 1.42px at 40.3% 11.7%, #e0f2feed, transparent 60%),
    radial-gradient(1.4px 1.4px at 21.2% 12.6%, #fecdd3c4, transparent 60%),
    radial-gradient(1.12px 1.12px at 13.4% 57.6%, #bfdbfed6, transparent 55%),
    radial-gradient(1.21px 1.21px at 2.6% 88.4%, #fecdd396, transparent 60%),
    radial-gradient(1.78px 1.78px at 89.2% 70.3%, #fef3c7c4, transparent 65%),
    radial-gradient(1.46px 1.46px at 58.6% 17.4%, #fecdd396, transparent 60%),
    radial-gradient(1.8px 1.8px at 60.8% 40.7%, #a7f3d08c, transparent 55%),
    radial-gradient(1.68px 1.68px at 45.2% 68.2%, #bfdbfee8, transparent 60%),
    radial-gradient(1.16px 1.16px at 24.0% 7.1%, #ddd6febf, transparent 55%),
    radial-gradient(1.63px 1.63px at 8.5% 49.5%, #fecdd3aa, transparent 60%),
    radial-gradient(1.3px 1.3px at 3.7% 55.3%, #ffffffaa, transparent 60%),
    radial-gradient(1.13px 1.13px at 48.9% 6.1%, #e0f2fee2, transparent 65%),
    radial-gradient(1.67px 1.67px at 24.8% 16.4%, #fde68a8e, transparent 65%),
    radial-gradient(1.23px 1.23px at 40.3% 65.2%, #fde68aed, transparent 55%),
    radial-gradient(1.52px 1.52px at 63.6% 40.6%, #a7f3d09e, transparent 60%),
    radial-gradient(1.33px 1.33px at 26.8% 81.2%, #a7f3d099, transparent 60%),
    radial-gradient(1.22px 1.22px at 60.2% 27.9%, #a7f3d0e5, transparent 65%),
    radial-gradient(1.37px 1.37px at 20.6% 33.9%, #ddd6fec6, transparent 55%),
    radial-gradient(1.68px 1.68px at 28.4% 12.6%, #ddd6fedd, transparent 65%),
    radial-gradient(1.27px 1.27px at 75.6% 90.9%, #ddd6fec9, transparent 65%),
    radial-gradient(1.65px 1.65px at 26.6% 7.7%, #ddd6fe9b, transparent 65%),
    radial-gradient(1.32px 1.32px at 18.8% 32.2%, #ffffffe8, transparent 55%),
    radial-gradient(1.33px 1.33px at 36.5% 65.2%, #bfdbfee0, transparent 60%),
    radial-gradient(1.78px 1.78px at 78.8% 24.6%, #ffffffa3, transparent 60%),
    radial-gradient(1.58px 1.58px at 70.3% 82.8%, #fecdd3a8, transparent 65%),
    radial-gradient(1.12px 1.12px at 8.9% 45.8%, #ffffffad, transparent 60%);
  background-size:540px 540px;
  animation:sky-drift-b 300s linear infinite reverse, sky-twinkle-b 3.4s ease-in-out infinite alternate;
}
@keyframes sky-drift-a{from{transform:translate3d(0,0,0)}to{transform:translate3d(-360px,180px,0)}}
@keyframes sky-drift-b{from{transform:translate3d(0,0,0)}to{transform:translate3d(260px,-130px,0)}}
@keyframes sky-twinkle-a{from{opacity:.35}to{opacity:1}}
@keyframes sky-twinkle-b{from{opacity:.9}to{opacity:.35}}

/* ================= 黑色主题 · 实时字幕（当前句）强化 =================
   原样式与普通句子几乎无差别导致看不清：改为蓝色描边卡片+纯白加粗英文+亮色中文。 */
html[data-theme="dark"] .sent.cur{
  background:linear-gradient(180deg,#1d3060,#152447);
  border-color:#3b82f6;
  box-shadow:0 0 0 1px rgba(96,165,250,.55),0 6px 22px rgba(59,130,246,.30);
}
html[data-theme="dark"] .sent.cur .s-en{color:#fff;font-weight:800}
html[data-theme="dark"] .sent.cur .s-zh{color:#dbe9ff}
html[data-theme="dark"] .sent.cur .s-ts{color:#7fb3ff;font-weight:600}