*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#ede5d8;--card-bg:#e4dbd0;--card-inner:#dbd1c5;--border:#c9bfb2;
  --text-primary:#2c2416;--text-secondary:#6b5e4a;--text-muted:#9c8f7a;
  --highlight:#fde047;--tab-active:#d6cdc2;
  --pill-yellow-bg:#f0e6c0;--pill-blue-bg:#ccdaf5;--pill-purple-bg:#dbd0f5;
  --pill-green-bg:#c5e8ce;--pill-rose-bg:#f0cdd3;
  --accent:#b07a3c;--accent-light:#e8d5bb;--accent-glow:#d4a059;--accent-rgb:176,122,60;--ink:44,36,22;
  --neon-color: #f97316;
  --neon-glow: rgba(249, 115, 22, 0.65);

  /* Subtitle Panel Theme Variables - Cafe Light */
  --sub-panel-bg: #f4eae1;
  --sub-panel-border: rgba(255, 255, 255, 0.6);
  --sub-panel-shadow: 0 8px 24px rgba(139, 115, 85, 0.12);
  --sub-btn-bg: rgba(var(--ink), 0.04); /* 温和微暗墨色，消除白光 */
  --sub-btn-hover-bg: var(--bg); /* 使用温暖的网页底色 */
  --sub-btn-color: #6d5843;
  --sub-btn-active-color: #4a2f13;
  --sub-btn-shadow: 0 4px 12px rgba(109, 88, 67, 0.15);
  --sub-control-bg: rgba(109, 88, 67, 0.08);
  --sub-item-active-bg: var(--bg); /* 使用温暖的网页底色 */
  --sub-item-active-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
:root.theme-sage{
  --bg:#e8ede0;--card-bg:#dfe4d7;--card-inner:#d7dccf;--border:#c8cfc0;
  --tab-active:#cdd4c5;
  --accent:#5a7a4a;--accent-light:#c5d8b8;--accent-glow:#a3c078;--accent-rgb:90,122,74;
  --neon-color: #10b981;
  --neon-glow: rgba(16, 185, 129, 0.65);

  /* Subtitle Panel Theme Variables - Sage Light */
  --sub-panel-bg: #e5ede2;
  --sub-panel-border: rgba(255, 255, 255, 0.6);
  --sub-panel-shadow: 0 8px 24px rgba(90, 122, 74, 0.10);
  --sub-btn-bg: rgba(var(--ink), 0.04); /* 温和微暗墨色，消除白光 */
  --sub-btn-hover-bg: var(--bg); /* 使用清新的网页底色 */
  --sub-btn-color: #4d5d43;
  --sub-btn-active-color: #2e3d25;
  --sub-btn-shadow: 0 4px 12px rgba(90, 122, 74, 0.12);
  --sub-control-bg: rgba(90, 122, 74, 0.08);
  --sub-item-active-bg: var(--bg); /* 使用清新的网页底色 */
  --sub-item-active-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
:root.theme-sky{
  --bg:#e7eff5;--card-bg:#dde8f0;--card-inner:#d3e0ea;--border:#bfd0de;--tab-active:#cdddea;
  --text-primary:#16364d;--text-secondary:#4a6377;--text-muted:#8196a6;--ink:22,54,77;
  --accent:#2f8fd8;--accent-light:#bcdcf2;--accent-glow:#5fb0e8;--accent-rgb:47,143,216;
  --neon-color:#0ea5e9;--neon-glow:rgba(14,165,233,0.65);

  /* Subtitle Panel Theme Variables - Sky Light */
  --sub-panel-bg:#e6f0f8;
  --sub-panel-border:rgba(255,255,255,0.6);
  --sub-panel-shadow:0 8px 24px rgba(47,143,216,0.12);
  --sub-btn-bg:rgba(var(--ink),0.04);
  --sub-btn-hover-bg:var(--bg);
  --sub-btn-color:#3f5d73;
  --sub-btn-active-color:#163a55;
  --sub-btn-shadow:0 4px 12px rgba(47,143,216,0.14);
  --sub-control-bg:rgba(47,143,216,0.08);
  --sub-item-active-bg:var(--bg);
  --sub-item-active-shadow:0 2px 8px rgba(0,0,0,0.08);
}
html,body{height:100%;overflow:hidden;background:#111;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;color:var(--text-primary)}

/* ── Upload Screen ─────────────────────────────────────────── */
/* Full-page upload screen retired: import now happens in-place via #video-import.
   Kept hidden in the DOM so its #file-input / #drop-zone references stay valid. */
#upload-screen{height:100vh;display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:var(--bg)}
.upload-box{width:480px;border:2px dashed var(--border);border-radius:16px;padding:52px 40px;text-align:center;cursor:pointer;background:var(--card-bg);transition:border-color .2s,background .2s}
.upload-box:hover,.upload-box.drag-over{border-color:var(--accent);background:var(--card-inner)}
.upload-icon{font-size:40px;margin-bottom:16px;opacity:.5}
.upload-title{font-size:18px;font-weight:700;margin-bottom:8px}
.upload-sub{font-size:13px;color:var(--text-muted);line-height:1.6}
.upload-btn{margin-top:20px;padding:10px 32px;background:var(--accent);color:#fff;border:none;border-radius:999px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1)}
.upload-btn:hover{transform:translateY(-2px);box-shadow:var(--sub-btn-shadow)}
.upload-btn:active{transform:translateY(0) scale(0.96)}
#file-input{display:none}
.upload-hint{font-size:12px;color:var(--text-muted)}
.upload-badge{display:inline-block;font-size:12px;font-weight:500;padding:3px 10px;border-radius:999px;background:var(--card-inner);border:1px solid var(--border);color:var(--text-muted);margin-bottom:24px}

/* ── App Layout ─────────────────────────────────────────────── */
#app{display:none;height:100vh;width:100vw}
.layout{display:flex;height:100vh;overflow:hidden}

/* ── Panel Divider ──────────────────────────────────────────── */
.panel-divider{width:5px;flex-shrink:0;background:var(--bg);cursor:col-resize;position:relative;transition:background .15s;z-index:10}
.panel-divider:hover,.panel-divider.dragging{background:var(--accent-glow)}
.panel-divider::after{display:none}
/* 拖动分隔线时：提示浏览器优化宽度变化，并暂时屏蔽视频/画布的指针事件，减少重排/重绘负担 */
body.resizing .left-panel{will-change:width}
body.resizing #player,body.resizing #ambient-canvas{pointer-events:none}
body.resizing .transcript-panel,body.resizing #cards{contain:layout}

/* ── Left Panel ─────────────────────────────────────────────── */
.left-panel{width:50%;min-width:280px;display:flex;flex-direction:column;height:100vh;background:var(--card-bg);overflow:hidden;flex-shrink:0}

/* Video */
.video-wrapper{position:relative;background:var(--card-bg);flex-shrink:0;cursor:pointer;display:flex;justify-content:center;align-items:flex-start}
.player-inner{position:relative;z-index:1;flex-shrink:0;width:min(100%, calc(52vh * 16 / 9));line-height:0}
#ambient-canvas{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);filter:blur(20px) saturate(1.2);opacity:.85;z-index:0;pointer-events:none}
.video-wrapper.portrait-mode,.video-wrapper.portrait-fill{overflow:hidden}
/* 竖屏模式：canvas 只覆盖 player 区域，不渗入上下 padding，避免亮线 */
.video-wrapper.portrait-mode #ambient-canvas,.video-wrapper.portrait-fill #ambient-canvas{top:4px;right:3px;bottom:10px;left:3px;width:auto;height:auto;border-radius:28px}
#player{width:100%;display:block;aspect-ratio:16/9;object-fit:contain;background:var(--card-bg)}
/* 视频播放前海报 */
.video-poster{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--card-bg);cursor:pointer;transition:opacity .4s}
.video-poster.hidden{opacity:0;pointer-events:none}
.vp-img{width:100%;height:100%;object-fit:cover;display:block}
.vp-ep-label{position:absolute;bottom:calc(18% + 28px);left:50%;transform:translateX(-50%);font-size:15px;font-weight:700;color:rgba(255,255,255,.65);letter-spacing:.06em;pointer-events:none}
.vp-play-hint{position:absolute;bottom:18%;left:50%;transform:translateX(-50%);font-size:13px;color:rgba(255,255,255,.45);opacity:.85;pointer-events:none}

/* ── Phone shell (portrait fit & fill) ────────────────── */
.video-wrapper.portrait-mode,
.video-wrapper.portrait-fill{
  background:#151515;
  border-radius:32px;
  padding:4px 3px 10px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 0 2px #1c1c1e,
    0 0 0 3px #2c2c2e,
    0 16px 40px rgba(0,0,0,.5);
  margin:4px auto;
  width:fit-content;
  align-self:center;
}

/* Home indicator - thinner and more refined */
.video-wrapper.portrait-mode::after,
.video-wrapper.portrait-fill::after{
  content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:60px;height:2px;background:rgba(255,255,255,.3);border-radius:1px;z-index:10;pointer-events:none;
}
/* Player inside phone shell */
.video-wrapper.portrait-mode .player-inner,
.video-wrapper.portrait-fill .player-inner{
  width:calc((52vh - 14px) * 9/16);
  border-radius:28px;
  overflow:hidden;
}
.video-wrapper.portrait-mode #player{
  aspect-ratio:9/16;width:100%;
  height:calc(52vh - 14px);
  border-radius:28px;object-fit:contain;background:#000;
}
.video-wrapper.portrait-fill #player{
  aspect-ratio:9/16;width:100%;
  height:calc(52vh - 14px);
  border-radius:28px;object-fit:cover;background:#000;
}
.video-wrapper.portrait-mode .video-import,
.video-wrapper.portrait-fill .video-import{
  inset:4px 3px 10px !important;
  border-radius:28px !important;
}

/* Custom Controls */
.custom-controls{background:var(--card-inner);flex-shrink:0;user-select:none;width:min(100%, calc(52vh * 16 / 9));align-self:center}
.progress-area{padding:5px 8px 3px;cursor:pointer}
.progress-track{position:relative;height:4px;background:rgba(var(--ink),.18);border-radius:2px}
.progress-buffered{position:absolute;left:0;top:0;height:100%;background:rgba(var(--ink),.22);border-radius:2px;pointer-events:none;transition:width .3s}
.progress-fill{position:absolute;left:0;top:0;height:100%;background:var(--accent);border-radius:2px;pointer-events:none}
.progress-thumb{position:absolute;top:50%;width:12px;height:12px;background:var(--accent);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.25);opacity:0;transition:opacity .15s}
.progress-area:hover .progress-thumb{opacity:1}
.progress-area:hover .progress-track{height:6px}
.progress-area:hover .progress-fill,.progress-area:hover .progress-buffered{top:-1px;height:6px}
.controls-row{display:flex;align-items:center;gap:5px;padding:2px 6px 3px 2px;position:relative}
.ctrl-btn{background:var(--sub-btn-bg);border:none;color:rgba(var(--ink),.55);cursor:pointer;padding:6px 10px;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);flex-shrink:0;}
.ctrl-btn:hover{color:var(--text-primary);background:var(--sub-btn-hover-bg);transform:translateY(-2px);box-shadow:var(--sub-btn-shadow)}
.ctrl-btn:active{transform:translateY(0) scale(0.96);box-shadow:none}
.ctrl-btn svg{display:block;width:24px;height:24px}
#btn-play{width:40px;height:40px;border-radius:50%;padding:0;padding-left:4px;display:inline-flex;align-items:center;justify-content:center}
#btn-play svg{width:30px;height:30px}
.ctrl-skip{font-size:11px;font-weight:600;font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;padding:4px 7px}
.time-display{display:flex;flex-direction:column;align-items:center;line-height:1;flex-shrink:0;cursor:pointer;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;padding:0 3px;margin-right:8px;border-radius:5px;transition:color .15s,background .15s}
.time-cur{font-size:13px;font-weight:600;color:var(--text-secondary)}
.time-arrow{font-size:10px;color:var(--text-muted);line-height:.7;margin:1px 0}
.time-total{font-size:8.5px;color:var(--text-muted)}
.time-display.repeat-on .time-cur{color:var(--accent)}
.time-display:hover{color:var(--text-primary);background:rgba(var(--ink),.06)}
.time-display.repeat-on{color:var(--accent);font-weight:600;background:rgba(var(--accent-rgb),.12)}
.spacer{flex:1}
.volume-group{display:flex;align-items:center;gap:2px}
.vol-track-wrap{width:44px;padding:9px 0;cursor:pointer;display:flex;align-items:center;flex-shrink:0}
.vol-track{position:relative;width:100%;height:3px;background:rgba(var(--ink),.18);border-radius:2px;transition:height .12s}
.vol-fill{position:absolute;left:0;top:0;height:100%;width:100%;background:var(--accent);border-radius:2px;pointer-events:none}
.vol-track-wrap:hover .vol-track{height:5px}
.vol-track-wrap:hover .vol-fill{top:-1px;height:5px}
/* Playback speed control */
.speed-control{position:relative;display:flex;align-items:center;flex-shrink:0}
.ctrl-speed{font-size:14px;font-weight:600;font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;padding:6px 7px;min-width:40px}
.ctrl-btn.ctrl-speed.btn-active{color:var(--accent);background:rgba(var(--accent-rgb),.14)}
.speed-menu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--card-bg);border:1px solid var(--border);border-radius:9px;padding:4px;display:none;flex-direction:column;gap:2px;z-index:60;box-shadow:0 6px 24px rgba(0,0,0,.22);min-width:96px;opacity:0;transition:opacity .12s,transform .12s}
.speed-menu.open{display:flex;opacity:1;transform:translateX(-50%) translateY(0)}
.speed-menu::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--border)}
.speed-opt{display:flex;align-items:center;justify-content:space-between;gap:8px;background:none;border:none;font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;font-size:11.5px;font-weight:600;color:var(--text-secondary);padding:5px 9px;border-radius:6px;cursor:pointer;text-align:left;transition:background .1s,color .1s}
.speed-opt:hover{background:rgba(var(--accent-rgb),.1);color:var(--text-primary)}
.speed-opt.active{background:rgba(var(--accent-rgb),.15);color:var(--accent)}
.speed-opt .speed-note{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;font-size:10px;font-weight:500;color:var(--text-muted)}
.speed-opt.active .speed-note{color:var(--accent)}

/* Transcript Panel */
.transcript-panel{flex:1;overflow-y:auto;background:var(--card-bg)}
.transcript-panel::-webkit-scrollbar{width:4px}
.transcript-panel::-webkit-scrollbar-track{background:transparent}
.transcript-panel::-webkit-scrollbar-thumb{background:rgba(var(--ink),.2);border-radius:2px}
/* top/bottom padding so active line can scroll to center */
.transcript-panel::before{content:'';display:block;height:40px}
.transcript-panel::after{content:none}
.transcript-end-quiz{min-height:38vh;display:flex;align-items:flex-start;justify-content:center;padding:32px 12px 0;cursor:pointer;color:rgba(var(--ink),.28);font-size:13px;font-weight:600;letter-spacing:.05em;user-select:none;transition:color .15s;text-align:center}
.transcript-end-quiz:hover{color:var(--accent)}
.transcript-line{display:flex;align-items:baseline;gap:4px;padding:3px 16px 3px 8px;cursor:pointer;border-left:3px solid transparent;transition:background .15s}
.transcript-line.speaker-start{padding-top:8px}
.transcript-line:hover{background:rgba(255,255,255,.38)}
.transcript-line.t-active{background:rgba(255,255,255,.22)}
/* 多句循环选区高亮 — 使用与「正在播放」一致的底色 */
.transcript-line.range-loop{background:rgba(255,255,255,.22)}
.transcript-line.range-loop:hover{background:rgba(255,255,255,.3)}
.transcript-line.range-loop.t-active{background:rgba(255,255,255,.34)}
/* Speaker label — only shown on first line of each speaker block */
.transcript-speaker{font-size:9px;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;white-space:nowrap;flex-shrink:0;width:34px;user-select:none;line-height:1.55;position:relative;display:block}
.tl-spk{display:block;padding-top:2px;overflow:hidden;text-overflow:ellipsis}
#transcript-panel.spk-filtered .tl-spk:not(:empty){color:var(--spkf-color)!important;font-weight:700;letter-spacing:.02em}
.spk-time{position:absolute;bottom:100%;left:0;margin-bottom:-3px;font-size:7px;font-weight:400;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;opacity:.35;letter-spacing:-.2px;line-height:1}
.spk-dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;flex-shrink:0}
.transcript-text{font-size:13px;color:rgba(var(--ink),.45);line-height:1.55;transition:color .15s;flex:1}
.transcript-line.t-active .transcript-text{color:var(--text-primary);font-weight:500}
.fav-btn,.copy-btn{background:none;border:none;cursor:pointer;padding:2px 4px;margin-left:4px;flex-shrink:0;color:var(--text-muted);opacity:0;transition:opacity .12s,color .12s;align-self:center;line-height:0}
.transcript-line:hover .fav-btn,.transcript-line:hover .copy-btn{opacity:.5}
.fav-btn:hover,.copy-btn:hover{opacity:1;color:var(--accent)}
.transcript-line.faved .fav-btn{opacity:1;color:var(--accent)}
.fav-btn svg,.copy-btn svg{display:block;width:14px;height:14px}
.note-fav{padding:2px 0;line-height:1.85}
.notes-subtabs{display:flex;gap:7px;padding:5px 20px 6px 29px;flex-shrink:0}
.ntab{background:var(--sub-btn-bg);border:none;color:var(--text-secondary);padding:4px 14px;border-radius:999px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:color .1s,background .1s,box-shadow .1s,transform .12s cubic-bezier(0.4, 0, 0.2, 1)}
.ntab:hover{color:var(--text-primary);background:var(--sub-btn-hover-bg);transform:translateY(-2px);box-shadow:var(--sub-btn-shadow)}
.ntab:active{transform:translateY(0) scale(0.96)}
.ntab.active{background:var(--tab-active);color:var(--text-primary);box-shadow:var(--sub-item-active-shadow)}
.ntab-minor{font-size:11px;padding:3px 10px;opacity:.7}
.ntab-minor:hover{opacity:1}
#notes-view{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}
#favorites-view{flex:1;overflow-y:auto;display:none;min-height:0}
#favorites-view::-webkit-scrollbar{width:4px}
#favorites-view::-webkit-scrollbar-thumb{background:rgba(var(--ink),.2);border-radius:2px}
#favorites-list{display:flex;flex-direction:column;gap:8px;padding:12px 20px 32px}
.fav-item{display:flex;align-items:flex-start;gap:9px;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.fav-jump{flex-shrink:0;background:var(--sub-btn-bg);border:none!important;border-radius:999px!important;font-size:10px;font-weight:500;color:var(--accent);font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;cursor:pointer;padding:3px 10px!important;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1)!important}
.fav-jump:hover{background:var(--accent-light);transform:translateY(-2.5px);box-shadow:var(--sub-btn-shadow)}
.fav-jump:active{transform:translateY(0) scale(0.94)}
.fav-text{flex:1;font-size:13.5px;line-height:1.6;color:var(--text-primary);cursor:text;outline:none;border-radius:4px;padding:1px 3px;margin:0 -3px;transition:background .12s}
.fav-text:focus{background:rgba(var(--ink),.06)}
.fav-remove{flex-shrink:0;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:13px;line-height:1;padding:2px 4px;opacity:.5;transition:opacity .12s,color .12s}
.fav-remove:hover{opacity:1;color:#c04a4a}
.fav-empty{text-align:center;color:var(--text-muted);font-size:13px;line-height:1.9;padding:48px 24px}
#shots-view{flex:1;overflow-y:auto;display:none;min-height:0}
#shots-view::-webkit-scrollbar{width:4px}
#shots-view::-webkit-scrollbar-thumb{background:rgba(var(--ink),.2);border-radius:2px}
#shots-list{display:flex;flex-direction:column;gap:12px;padding:12px 16px 32px}
.shot-item{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:8px;position:relative}
.shot-img{display:block;width:100%;border-radius:6px}
.shot-bar{display:flex;align-items:center;margin-top:7px}
.shot-remove{position:absolute;top:7px;right:7px;z-index:2;background:rgba(0,0,0,.5);color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:11px;line-height:20px;text-align:center;cursor:pointer;opacity:.85;padding:0}
.shot-remove:hover{opacity:1;background:#c04a4a}
.shot-note{margin-top:7px;font-size:13px;line-height:1.6;color:var(--text-primary);outline:none;border:1px solid transparent;border-radius:6px;padding:4px 7px;min-height:1.6em;cursor:text;transition:border-color .12s,background .12s}
.shot-note:focus{border-color:var(--border);background:rgba(var(--ink),.04)}
/* ── 笔记内嵌截图卡片 ── */
.note-shot-card{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:8px 0;display:block;user-select:none}
.nsc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.nsc-del{background:rgba(0,0,0,.35);color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:11px;line-height:20px;text-align:center;cursor:pointer;opacity:.7;padding:0;flex-shrink:0}
.nsc-del:hover{opacity:1;background:#c04a4a}
.nsc-img{display:block;width:100%;border-radius:6px}
.nsc-caption{margin-top:8px;font-size:13px;line-height:1.65;color:var(--text-primary);outline:none;border:1px solid transparent;border-radius:6px;padding:6px 8px;min-height:1.6em;cursor:text;transition:border-color .12s,background .12s;user-select:text;white-space:pre-wrap;word-break:break-word}
.nsc-caption:focus{border-color:var(--border);background:rgba(var(--ink),.04)}
.nsc-caption:empty::before{content:attr(data-ph);color:var(--text-muted);opacity:.6;pointer-events:none}
.shot-note:empty::before{content:attr(data-ph);color:var(--text-muted);opacity:.6;pointer-events:none}
#radar-view{flex:1;overflow-y:auto;display:none;min-height:0}
#radar-view::-webkit-scrollbar{width:4px}
#radar-view::-webkit-scrollbar-thumb{background:rgba(var(--ink),.2);border-radius:2px}
#radar-list{display:flex;flex-direction:column;gap:10px;padding:12px 16px 32px}
.radar-item{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:9px 11px}
.radar-item .fav-jump{margin-bottom:6px}
.radar-tip{font-size:13px;line-height:1.6;color:var(--text-primary)}
.radar-item{transition:box-shadow .3s,border-color .3s,background .3s,transform .3s}
.radar-item-active{border-color:var(--accent);background:rgba(var(--ink),.06);box-shadow:0 0 0 2px var(--accent),0 0 12px rgba(var(--accent-rgb),.35);animation:radarBreathe .8s ease-in-out infinite}
@keyframes radarBreathe{0%{box-shadow:0 0 0 2px var(--accent),0 0 8px rgba(var(--accent-rgb),.25);transform:scale(1)}50%{box-shadow:0 0 0 3px var(--accent),0 0 18px rgba(var(--accent-rgb),.5);transform:scale(1.02)}100%{box-shadow:0 0 0 2px var(--accent),0 0 8px rgba(var(--accent-rgb),.25);transform:scale(1)}}

#radar-flash{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.6);font-size:54px;line-height:1;z-index:7;opacity:0;pointer-events:none;filter:drop-shadow(0 2px 12px rgba(0,0,0,.55))}
#radar-flash.flash{animation:radarFlash 1.6s ease-out forwards}

/* ── In-video import prompt (replaces the full-page upload screen) ──
   Shown over the player when this episode has no video loaded yet; clicking it
   opens the file picker. Hidden once a video is loaded. */
.video-import{position:absolute;inset:0;z-index:8;display:none;align-items:center;justify-content:center;background:#0d0d0f;cursor:pointer}
.video-import-card{text-align:center;padding:24px 28px;border:2px dashed rgba(255,255,255,.18);border-radius:16px;background:rgba(255,255,255,.03);transition:border-color .2s,background .2s;max-width:84%}
.video-import:hover .video-import-card{border-color:var(--accent-glow);background:rgba(255,255,255,.06)}
.video-import-icon{font-size:34px;margin-bottom:10px;opacity:.85}
.video-import-title{font-size:15px;font-weight:700;color:#f0f0f0;margin-bottom:6px}
.video-import-title .import-main{position:relative;display:inline-block}
.video-import-title .import-or{position:absolute;left:100%;top:0;white-space:nowrap}
.video-import-title .import-ep{position:relative}
.video-import-title .import-eyes{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:12px;font-size:22px;line-height:1}
.video-import-sub{font-size:11.5px;line-height:1.7;color:rgba(255,255,255,.5);visibility:hidden}
/* ── 中央咖啡馆元素：FRIENDS 圆点字母风 + 线描橙沙发 + 暖场文案 ── */
.cp-wordmark{display:flex;align-items:center;justify-content:center;gap:5px;font-family:'Georgia',serif;font-weight:700;font-size:21px;letter-spacing:2px;color:#efe7d8;margin-bottom:4px}
.cp-wordmark i{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.cp-wordmark i:nth-of-type(3n+1){background:#e4572e}
.cp-wordmark i:nth-of-type(3n+2){background:#4a90d9}
.cp-wordmark i:nth-of-type(3n){background:#f2b705}
.cp-illustration{width:144px;height:auto;display:block;margin:6px auto 12px}
.video-import:hover .cp-illustration{filter:drop-shadow(0 0 6px rgba(224,132,62,.25))}
.cp-fine{display:inline-block;margin-top:5px;font-size:10.5px;opacity:.72}

/* ── 情景喜剧氛围：极淡暖色暗角 + 胶片颗粒（明暗双主题，纯装饰，pointer-events:none 不挡操作）── */
#ambiance{position:fixed;inset:0;pointer-events:none;z-index:9000;background:radial-gradient(ellipse 135% 120% at 50% 44%,transparent 58%,rgba(62,38,18,.16) 100%)}
#ambiance::before{content:"";position:fixed;inset:0;opacity:.03;background:repeating-linear-gradient(to bottom,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 3px);background-size:100% 3px}
#ambiance::after{content:"";position:fixed;inset:0;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px 140px}
:root.theme-sage #ambiance{background:radial-gradient(ellipse 135% 120% at 50% 44%,transparent 58%,rgba(56,33,12,.13) 100%)}
:root.theme-sky #ambiance{background:radial-gradient(ellipse 135% 120% at 50% 44%,transparent 58%,rgba(12,74,110,.13) 100%)}
:root.dark #ambiance{background:radial-gradient(ellipse 135% 120% at 50% 44%,transparent 54%,rgba(0,0,0,.30) 100%)}
:root.dark #ambiance::after{opacity:.065}
@keyframes radarFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}14%{opacity:.9;transform:translate(-50%,-50%) scale(1.06)}28%{opacity:.4;transform:translate(-50%,-50%) scale(1)}44%{opacity:.9;transform:translate(-50%,-50%) scale(1.06)}60%{opacity:.4;transform:translate(-50%,-50%) scale(1)}76%{opacity:.85;transform:translate(-50%,-50%) scale(1.04)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}}
/* 行内单句循环标记 */
.transcript-repeat-tag{display:none;font-size:9px;font-weight:600;font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;color:var(--accent);background:var(--card-inner);border:1px solid var(--accent);border-radius:4px;padding:2px 8px;margin-left:8px;flex-shrink:0;align-self:center;white-space:nowrap;isolation:isolate}
.transcript-line.repeat-active .transcript-repeat-tag{display:inline-flex;align-items:center;gap:3px}
/* ── Dictation mode ─────────────────────────────────────────── */
.transcript-header-bar{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:2px 0;padding:5px 12px;border-top:1px solid var(--border);background:var(--card-bg);flex-shrink:0}
.dict-toggle-btn{font-size:13px;font-weight:600;padding:6px 16px;border-radius:999px;border:none;background:var(--sub-btn-bg);color:var(--sub-btn-color);cursor:pointer;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);font-family:inherit;letter-spacing:.02em}
.dict-toggle-btn:hover{background:var(--sub-btn-hover-bg);color:var(--text-primary);transform:translateY(-2px);box-shadow:var(--sub-btn-shadow)}
.dict-toggle-btn:active{transform:translateY(0) scale(0.96);box-shadow:none}
.clip-btn{display:none;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:4px 12px;border-radius:999px;border:none;background:var(--sub-btn-bg);color:var(--sub-btn-color);cursor:pointer;margin-right:6px;font-family:inherit;letter-spacing:.02em;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);opacity:.85}
.clip-btn.visible{display:inline-flex}
.clip-btn:hover{background:var(--sub-btn-hover-bg);color:var(--text-primary);transform:translateY(-2px);box-shadow:var(--sub-btn-shadow);opacity:1}
.clip-btn:active{transform:translateY(0) scale(0.96)}
.clip-btn.recording{background:rgba(192,74,74,.14)!important;color:#c04a4a!important;box-shadow:inset 0 0 0 1px #c04a4a!important;opacity:1}
#clip-cmd{display:none;padding:8px 14px 10px;background:var(--card-inner);border-top:1px solid var(--border);flex-shrink:0;position:relative}
#clip-cmd.visible{display:block}
#clip-cmd .cc-note{font-size:11px;color:var(--text-muted);line-height:1.5;margin-bottom:5px;padding-right:18px}
#clip-cmd .cc-row{display:flex;align-items:flex-start;gap:7px;margin-top:5px;cursor:pointer;border-radius:6px;padding:5px 7px;background:var(--card-bg);border:1px solid var(--border);transition:border-color .12s,background .12s}
#clip-cmd .cc-row:hover{border-color:var(--accent)}
#clip-cmd .cc-row.copied{border-color:var(--accent);background:rgba(var(--accent-rgb),.12)}
#clip-cmd .cc-tag{flex-shrink:0;font-size:9px;font-weight:600;color:var(--accent);background:rgba(var(--accent-rgb),.14);border-radius:999px;padding:2px 7px;margin-top:1px;white-space:nowrap}
#clip-cmd code{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;font-size:10.5px;color:var(--text-primary);line-height:1.5;word-break:break-all;user-select:all}
#clip-cmd .cc-x{position:absolute;top:7px;right:11px;cursor:pointer;color:var(--text-muted);font-size:13px;line-height:1}
#clip-cmd .cc-x:hover{color:var(--text-primary)}
.dict-toggle-btn.active{background:var(--accent)!important;color:#fff!important}
.speaker-filter-chip{display:none;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid var(--accent);background:rgba(var(--accent-rgb),.12);color:var(--accent);cursor:default;font-family:inherit;letter-spacing:.02em;margin-right:6px}
.speaker-filter-chip.visible{display:flex}
.speaker-filter-chip .chip-x{cursor:pointer;font-size:13px;line-height:1;opacity:.7;transition:opacity .1s}.speaker-filter-chip .chip-x:hover{opacity:1}
.phrase-filter-chip{display:none;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid var(--accent);background:rgba(var(--accent-rgb),.12);color:var(--accent);cursor:default;font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;letter-spacing:.02em;margin-right:6px;max-width:60%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.phrase-filter-chip.visible{display:flex}
.phrase-filter-chip .chip-x{cursor:pointer;font-size:13px;line-height:1;opacity:.7;transition:opacity .1s}.phrase-filter-chip .chip-x:hover{opacity:1}
.range-loop-chip{display:none;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid var(--accent);background:rgba(var(--accent-rgb),.12);color:var(--accent);cursor:default;font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;letter-spacing:.02em;margin-right:6px}
.range-loop-chip.visible{display:flex}
.range-loop-chip .chip-x{cursor:pointer;font-size:13px;line-height:1;opacity:.7;transition:opacity .1s}.range-loop-chip .chip-x:hover{opacity:1}
.transcript-speaker{cursor:pointer}.transcript-speaker:hover{opacity:.7}
.blank{border:none;border-bottom:1.5px solid rgba(var(--ink),.28);background:transparent;font:inherit;font-size:13px;line-height:1.55;color:var(--text-muted);outline:none;padding:0 2px 1px;text-align:center;vertical-align:baseline;transition:border-color .12s,color .12s;min-width:1.5ch}
.blank:focus{border-bottom-color:var(--accent);background:rgba(var(--accent-rgb),.05)}
.blank.correct{border-bottom-color:rgba(var(--ink),.5);color:var(--text-primary);pointer-events:none}
.line-all-correct{background:rgba(var(--accent-rgb),.13);border-radius:4px;transition:background .3s}
.blank.wrong{border-bottom-color:#c04a4a;color:#c04a4a;animation:blk-shake .22s ease}
.blank.revealed{border-bottom-color:#b09880;color:#b09880;font-style:italic;pointer-events:none}
.punct{color:rgba(var(--ink),.45);font-size:13px;line-height:1.55;white-space:pre}
.transcript-line.t-active .punct{color:var(--text-primary)}
@keyframes blk-shake{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}70%{transform:translateX(4px)}}
/* 语言切换按钮已下线（界面固定中文），保留 DOM 与 i18n 逻辑以便将来恢复。
   双 id + !important：需要压过 `#top-toolbar > *{display:flex!important}` 和 body.app-ready 规则 */
#top-toolbar #btn-lang,#btn-lang{display:none!important}

/* 相关资源：条目内的中文译文（如 100 件事英汉对照） */
.res-zh{color:var(--text-secondary)}

/* 无声视频提示（音轨不被浏览器支持时） */
#audio-warn{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);z-index:9;max-width:86%;background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:10px 32px 10px 13px;font-size:12px;color:var(--text-primary);box-shadow:0 4px 18px rgba(0,0,0,.28);line-height:1.6}
#audio-warn b{display:block;font-size:12.5px;margin-bottom:2px}
#audio-warn span{color:var(--text-secondary)}
#audio-warn code{display:block;margin-top:6px;padding:6px 8px;background:var(--card-inner);border:1px solid var(--border);border-radius:5px;font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;font-size:10.5px;user-select:all;word-break:break-all}
#audio-warn-x{position:absolute;top:6px;right:8px;border:none;background:none;color:var(--text-muted);font-size:15px;cursor:pointer;line-height:1;padding:2px}
#audio-warn-x:hover{color:var(--text-primary)}

/* Subtitle mask */
.subtitle-mask{position:absolute;bottom:10px;left:40px;right:40px;height:22.5%;background:rgba(0,0,0,.22);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:4;display:none;pointer-events:none;border-radius:4px;transition:background .2s,backdrop-filter .2s,-webkit-backdrop-filter .2s}
.subtitle-mask.on{display:block}
.subtitle-mask.mask-heavy{background:rgba(0,0,0,.42);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.video-wrapper.portrait-mode .subtitle-mask,
.video-wrapper.portrait-fill .subtitle-mask{display:none!important}
/* Audio-only overlay */
.audio-only-overlay{position:absolute;inset:0;background:transparent;display:none;align-items:center;justify-content:center;flex-direction:column;gap:0;z-index:5}
.audio-only-overlay::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(18px) brightness(.55);-webkit-backdrop-filter:blur(18px) brightness(.55);z-index:-1}
/* 听音中：整块视频区盖成纯黑，不再用 clip-path 抠洞露出底部画面 */
.audio-only-overlay.on{display:flex}
.audio-only-label{font-size:11px;color:rgba(255,255,255,.28);letter-spacing:.08em;flex-shrink:0;margin-bottom:4px}
#audio-wave-canvas{position:absolute;bottom:0;left:0;width:100%;height:30%;z-index:6;pointer-events:none;display:none}
.video-wrapper.bigsub-active #audio-wave-canvas{display:block}
.video-wrapper #audio-wave-canvas.wave-on{display:block}
/* Pitch contour canvas */
#pitch-canvas{position:absolute;bottom:0;left:0;width:100%;height:40%;pointer-events:none;z-index:1}
.pitch-controls{position:absolute;bottom:12px;right:16px;display:none;align-items:center;gap:8px;z-index:2}
.audio-only-overlay.on .pitch-controls{display:flex}
.pitch-rec-btn{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font-size:16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;line-height:1}
.pitch-rec-btn:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.15)}
.pitch-rec-btn.recording{border-color:#e74c3c;background:rgba(231,76,60,.2);animation:recPulse 1s ease-in-out infinite}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 rgba(231,76,60,.4)}50%{box-shadow:0 0 0 8px rgba(231,76,60,0)}}
.pitch-score{font-size:14px;font-weight:600;font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;color:rgba(255,255,255,.85);background:rgba(0,0,0,.4);padding:4px 10px;border-radius:6px;opacity:0;transition:opacity .3s}
.pitch-score.visible{opacity:1}
.pitch-legend{position:absolute;top:10px;left:14px;display:flex;gap:12px;z-index:2;font-size:10px;font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;color:rgba(255,255,255,.5)}
.pitch-legend span::before{content:'';display:inline-block;width:12px;height:2px;border-radius:1px;vertical-align:middle;margin-right:4px}
.pitch-legend .leg-char::before{background:var(--accent-glow)}
.pitch-legend .leg-user::before{background:#5b9bd5}
.ctrl-btn.btn-active{color:var(--accent);background:rgba(var(--accent-rgb),.14)}
.ctrl-btn.btn-fill-active{color:#7a5f10;background:rgba(122,95,16,.1)}
/* 循环单句模式 — 播放按钮高亮 */
#btn-play.btn-repeat{color:var(--accent);background:rgba(var(--accent-rgb),.14)}

.bigsub-active video{filter:blur(18px) brightness(.55);pointer-events:none;transform:scale(1.08);transition:filter .3s ease,transform .3s ease}
.bigsub-active #video-subtitle{display:none!important}
/* ── Big Subtitle overlay (大字幕) ───────────────────────────── */
#big-subtitle{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;background:transparent;text-align:center;padding:24px;z-index:2;overflow:hidden;line-height:normal}
#big-subtitle.on{display:flex}
.bigsub-speaker{font-size:var(--bigsub-spk-size,13px);color:rgba(255,255,255,.85);text-transform:capitalize;letter-spacing:1px;margin-bottom:10px;opacity:.75;min-height:18px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.bigsub-en{font-size:var(--bigsub-en-size,26px);font-weight:600;color:#fff;line-height:1.55;max-width:88%;transition:opacity .22s ease;text-shadow:0 2px 12px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.5)}
.bigsub-zh{font-size:var(--bigsub-zh-size,18px);color:rgba(255,255,255,.8);margin-top:10px;max-width:88%;opacity:.65;transition:opacity .22s ease;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.bigsub-upload{position:absolute;bottom:8px;right:12px;font-size:13px;color:var(--text-muted);cursor:pointer;opacity:.5;transition:opacity .2s;padding:6px 10px;z-index:5}
.bigsub-upload:hover{opacity:1;text-decoration:underline}
.bigsub-idle{opacity:.5;font-size:clamp(16px,2.8vw,22px);color:rgba(255,255,255,.7);text-shadow:0 1px 6px rgba(0,0,0,.5)}
#btn-bigsub{padding:2px 4px!important}
#btn-bigsub .bigsub-icon{display:flex;align-items:flex-end;justify-content:center;width:34px;height:18px;border:1.5px solid currentColor;border-radius:2.5px;padding-bottom:1.5px}
#btn-bigsub .bigsub-label{font-size:6px;font-weight:700;line-height:1;padding:1px 2px;background:#222;color:#fff;border-radius:1.5px;letter-spacing:.1px;white-space:nowrap}
#btn-bigsub.btn-active{color:var(--accent);background:rgba(var(--accent-rgb),.14)}
#btn-bigsub.btn-active .bigsub-label{background:var(--accent);color:#fff}

#humor-flash{position:absolute;top:calc(100% / 12);left:50%;transform:translate(-50%,-50%) scale(0);font-size:clamp(48px,8vw,72px);z-index:10;pointer-events:none;opacity:0;filter:drop-shadow(0 2px 12px rgba(0,0,0,.5))}
#humor-flash.humor-flash-anim{animation:humorPop 1.6s ease-out forwards}
@keyframes humorPop{0%{opacity:1;transform:translate(-50%,-50%) scale(0)}8%{transform:translate(-50%,-50%) scale(1.3)}16%{transform:translate(-50%,-50%) scale(1)}25%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:.8}100%{opacity:0;transform:translate(-50%,-50%) scale(.6)}}

/* ── Word Popup & Wordbook ──────────────────────────────────── */
.tw{cursor:pointer;border-radius:2px;transition:background .12s}
.tw:hover{background:rgba(var(--accent-rgb),.15);text-decoration:underline dotted var(--accent)}
#word-popup{display:none;flex-direction:column;gap:8px;position:absolute;z-index:100;width:280px;padding:14px 16px;background:var(--card-bg);border:1px solid rgba(var(--ink),.1);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.18);font-size:13px;line-height:1.5}
.wp-context{font-size:13px;color:var(--text-secondary);line-height:1.7}
.wp-context .tw{cursor:default;transition:none}
.wp-context .tw:hover{background:none;text-decoration:none}
.wp-context .tw.wp-hl{font-size:17px;font-weight:700;color:var(--text-primary);background:none;padding:0;border-radius:0}
.wp-context .tw{cursor:default}
.wp-context .tw:hover{background:none;text-decoration:none}
.wp-hl{background:rgba(var(--accent-rgb),.2);border-radius:2px;padding:0 2px}
.wp-zh{font-size:12px;color:var(--text-muted)}
.wp-btn{align-self:flex-start;padding:6px 14px;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;background:var(--accent);color:#fff;transition:background .15s,transform .1s}
.wp-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.wp-btn-saved{background:rgba(var(--ink),.08);color:var(--text-secondary);cursor:default}
.wp-btn-saved:hover{filter:none;transform:none}
#wordbook-view{padding:10px 0}
.wordbook-item{background:var(--card-bg);border-radius:10px;padding:10px 12px;margin-bottom:6px;cursor:pointer;transition:background .12s}
.wordbook-item:hover{background:rgba(var(--ink),.06)}
.wb-top{display:flex;align-items:center;gap:9px}
.wb-ctx{flex:1;font-size:15px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-hl{background:none;color:var(--text-primary);font-weight:700;font-size:17px}
.wb-note-area{margin-top:8px}
.wb-note{width:100%;min-height:48px;border:1px solid rgba(var(--ink),.1);border-radius:8px;background:rgba(var(--ink),.03);color:var(--text-primary);font-size:12px;padding:8px 10px;resize:vertical;font-family:inherit;outline:none;transition:border-color .15s}
.wb-note:focus{border-color:var(--accent)}#notes-editor .wb-ep-tag{font-size:10px;font-weight:600;padding:2px 8px;border-radius:999px;background:rgba(var(--accent-rgb),.12);color:var(--accent);cursor:pointer;user-select:none;display:inline-block;vertical-align:middle}
#notes-editor .wb-ep-tag:hover{background:var(--accent);color:#fff}
.wb-ep-tag{flex-shrink:0;font-size:10px;font-weight:600;padding:2px 8px;border-radius:999px;background:rgba(var(--accent-rgb),.12);color:var(--accent);cursor:pointer}
.wb-hint{text-align:center;font-size:11px;color:var(--text-muted);padding:10px 0 4px;opacity:.6}
.wb-remove{flex-shrink:0;border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:4px;transition:color .12s,background .12s}
.wb-remove:hover{color:var(--danger,#e74c3c);background:rgba(231,76,60,.08)}

/* ── Toast ────────────────────────────────────────────────────── */
#app-toast{position:fixed;top:40px;left:50%;transform:translateX(-50%) translateY(-20px);background:rgba(0,0,0,.82);color:#fff;font-size:13px;padding:10px 22px;border-radius:10px;z-index:99999;pointer-events:none;opacity:0;transition:opacity .25s,transform .25s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#app-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Right Panel ─────────────────────────────────────────────── */
.right-panel{flex:1;min-width:240px;display:flex;flex-direction:column;height:100vh;background:var(--bg);overflow:hidden;position:relative;container-type:inline-size}
.panel-header{padding:56px 24px 12px 12px;flex-shrink:0;display:flex;flex-direction:column;}
/* 本集剧名（"The One With…"）—— 复古剧名风：暖橙斜体衬线 */
#ep-title{font-family:'Georgia','Noto Serif SC',serif;font-style:italic;font-size:19px;font-weight:600;color:var(--accent);letter-spacing:.01em;line-height:1.3;margin-bottom:30px}
:root.dark #ep-title{color:var(--accent-glow)}
.badge-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.panel-badge{display:inline-block;font-size:11px;font-weight:500;padding:3px 10px;border-radius:999px;background:var(--card-inner);border:1px solid var(--border);color:var(--text-muted);}
.panel-title-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:10px 20px 6px 0}
/* 错落有致：四个按钮轻微高低交错，无倾角 */
.panel-title{--wy:0px}
.panel-title:nth-of-type(1){--wy:-1.5px}
.panel-title:nth-of-type(2){--wy:1.5px}
.panel-title:nth-of-type(3){--wy:-1px}
.panel-title:nth-of-type(4){--wy:2px}
.panel-title{font-family:'Georgia','Noto Serif SC',serif;font-size:16px;font-weight:600;color:var(--text-muted);letter-spacing:-.01em;cursor:pointer;transition:color .1s,background .1s,box-shadow .1s,transform .12s cubic-bezier(0.4, 0, 0.2, 1);background:var(--sub-btn-bg);border:none;border-radius:999px;padding:7px 18px;box-shadow:none;transform:translateY(var(--wy))}
.panel-title:hover{color:var(--text-primary);background:var(--sub-btn-hover-bg);transform:translateY(calc(var(--wy) - 2px));box-shadow:var(--sub-btn-shadow)}
.panel-title:active{transform:translateY(var(--wy)) scale(0.96);box-shadow:none}
.panel-title.sect-active{font-size:16px;font-weight:700;color:var(--text-primary);background:var(--bg);box-shadow:var(--sub-item-active-shadow)}
/* Notes panel */
#notes-panel{display:none;flex:1;flex-direction:column;overflow:hidden;position:relative}
#notes-panel.visible{display:flex}
.notes-hint{font-size:11px;color:var(--text-muted);padding:6px 20px;border-bottom:1px solid var(--border);flex-shrink:0;letter-spacing:.01em}
#notes-editor{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;line-height:1.85;color:var(--text-primary);padding:14px 20px 52px;overflow-y:auto;white-space:pre-wrap;word-break:break-word;cursor:text;min-height:0}
/* 持久化快捷键提示——始终在编辑区底部，不影响输入 */
#notes-hints{padding:8px 20px 16px;flex-shrink:0;pointer-events:none;user-select:none;opacity:.45;font-size:11px;line-height:1.85;color:rgba(156,143,122,1);font-family:inherit}
.nh-head{font-weight:700;font-size:12px;margin-bottom:2px}
.nh-item{white-space:nowrap}
.nh-div{display:inline-block;width:1px;height:11px;background:rgba(156,143,122,.4);margin:0 8px;vertical-align:middle}
#notes-editor.is-empty::before{content:attr(data-placeholder);color:rgba(156,143,122,.45);font-size:16px;pointer-events:none;display:block;white-space:pre-line;line-height:1.85}
.note-ts-btn{display:inline-flex;align-items:center;gap:3px;padding:3px 10px;background:var(--sub-btn-bg);border:none!important;border-radius:999px!important;font-size:10px;font-weight:500;color:var(--text-secondary);font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;cursor:pointer;vertical-align:middle;white-space:nowrap;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);user-select:none;line-height:1.6}
.note-ts-btn:hover{color:var(--accent);background:var(--accent-light);transform:translateY(-2px);box-shadow:var(--sub-btn-shadow)}
.note-ts-btn:active{transform:translateY(0) scale(0.94)}
.notes-import-btn{display:inline-flex;align-items:center;justify-content:flex-end;gap:3px;padding:3px 12px;border:none;border-radius:999px;font-size:11px;font-weight:600;cursor:pointer;background:rgba(var(--accent-rgb),.1);color:var(--accent);font-family:inherit;margin-top:6px;margin-right:16px;transition:all .25s;max-width:50%;white-space:nowrap;align-self:flex-end}
.notes-import-btn:hover{background:var(--accent);color:#fff}
/* 版本更新提示条 */
#update-bar{position:fixed;top:0;left:0;right:0;z-index:99999;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 16px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;animation:slideDown .35s ease}
.update-top{display:flex;align-items:center;gap:12px}
#update-bar button{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);color:#fff;padding:5px 16px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s;flex-shrink:0}
#update-bar button:hover{background:rgba(255,255,255,.35)}
.update-list{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:400;opacity:.9}
.update-item{padding-left:2px}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
/* 下一集提示条 */
#next-ep-bar{position:absolute;bottom:12px;right:12px;z-index:10;display:flex;align-items:center;gap:8px;padding:6px 14px;background:rgba(0,0,0,.78);border-radius:12px;font-size:13px;color:#fff;backdrop-filter:blur(8px);animation:fadeIn .3s ease}
#next-ep-btn{width:36px;height:36px;border-radius:50%;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0}
#next-ep-btn:hover{transform:scale(1.08)}
.next-ep-ring{animation:countdown-ring 15s linear forwards}
@keyframes countdown-ring{from{stroke-dashoffset:0}to{stroke-dashoffset:94.2}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* Notes export button — floating bottom-right */
#btn-export-pdf{position:absolute;bottom:10px;right:12px;z-index:5;display:inline-flex;align-items:center;gap:3px;padding:4px 12px;background:var(--sub-btn-bg);border:none;border-radius:999px;font-size:12px;font-style:normal;font-weight:500;color:var(--text-muted);font-family:inherit;letter-spacing:0;cursor:pointer;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);outline:none;opacity:.7;transform:scale(.72);transform-origin:100% 100%}
#btn-export-pdf:hover{color:var(--accent);background:var(--sub-btn-hover-bg);transform:scale(.72) translateY(-2px);box-shadow:var(--sub-btn-shadow);opacity:1}
#btn-export-pdf:active{transform:scale(.72) translateY(0) scale(0.96);box-shadow:none}
/* Print / PDF export */
@media print{
  body>*{display:none!important}
  #print-notes-root{display:block!important}
}
#print-notes-root{display:none}
#print-notes-root{font-family:'Georgia',serif;padding:48px 56px;max-width:680px;margin:0 auto;color:#1a1a1a;line-height:1.9;font-size:14px}
#print-notes-root h2{font-size:17px;font-weight:700;margin-bottom:4px;letter-spacing:.01em}
#print-notes-root .print-meta{font-size:11px;color:#888;margin-bottom:28px;padding-bottom:12px;border-bottom:1px solid #ddd}
#print-notes-root .print-body{white-space:pre-wrap;word-break:break-word}
#print-notes-root .print-ts{display:inline-block;font-size:10px;font-family:'Courier New',monospace;color:var(--accent);background:var(--accent-light);border:1px solid var(--border);border-radius:999px;padding:1px 7px;vertical-align:middle;margin:0 2px}
/* Quiz panel */
#quiz-panel{display:none;flex:1;overflow-y:auto;padding:0 20px 40px;gap:14px}

/* 第一张卡片顶栏：共 X 题（2/5）+ 重新出题（3/5） */
.quiz-top-inner{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px dashed rgba(var(--accent-rgb),.18)}
.quiz-top-inner .quiz-total-bar{grid-column:2;justify-self:center}
.quiz-top-inner .quiz-regen{grid-column:3;justify-self:center}
.quiz-total-bar{font-size:12px;font-weight:600;color:var(--text-muted);letter-spacing:.03em;flex-shrink:0}
#quiz-panel::-webkit-scrollbar{width:4px}
#quiz-panel::-webkit-scrollbar-thumb{background:rgba(var(--ink),.2);border-radius:2px}
#quiz-panel.visible{display:flex;flex-direction:column}
.quiz-tabs{display:flex;align-items:center;gap:7px;padding:5px 0 8px 9px;flex-shrink:0}
.quiz-tabs .quiz-regen{margin-left:auto}
.quiz-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.quiz-header-title{font-size:12px;font-weight:600;color:var(--text-muted)}
.quiz-regen{font-size:11px;color:var(--sub-btn-color);background:var(--sub-btn-bg);border:none;border-radius:999px;padding:4px 12px;cursor:pointer;font-family:inherit;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1)}
.quiz-regen:hover{color:var(--text-primary);background:var(--sub-btn-hover-bg);transform:translateY(-2px);box-shadow:var(--sub-btn-shadow)}
.quiz-regen:active{transform:translateY(0) scale(0.96)}
/* 再来一套按钮——与重新出题同款 */
.quiz-again-btn{font-size:11px;color:var(--sub-btn-color);background:var(--sub-btn-bg);border:none;border-radius:999px;padding:4px 12px;cursor:pointer;font-family:inherit;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1)}
.quiz-again-btn:hover{color:var(--text-primary);background:var(--sub-btn-hover-bg);transform:translateY(-2px);box-shadow:var(--sub-btn-shadow)}
.quiz-again-btn:active{transform:translateY(0) scale(0.96)}
/* ── 底部提示线 ── */
#cards::after,#radar-list::after,.search-has-results::after{
  content:'- - - - - - - -  我是有底线的  - - - - - - - -';
  display:block;text-align:center;font-size:11px;color:var(--text-muted);opacity:.35;
  padding:16px 0 24px;white-space:nowrap;letter-spacing:.03em;
}
.quiz-card{background:var(--card-bg);border-radius:10px;padding:14px 16px;border:1px solid var(--border);flex-shrink:0}
.quiz-num{font-size:10px;font-weight:600;color:var(--text-muted);margin-bottom:8px;font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace}
.quiz-sentence{font-size:14px;line-height:1.75;margin-bottom:12px;color:var(--text-primary)}
.quiz-blank{display:inline-block;min-width:72px;height:1.2em;background:rgba(var(--accent-rgb),.15);border-radius:4px;vertical-align:text-bottom;margin:0 3px}
.quiz-options{display:flex;flex-wrap:wrap;gap:7px}
.quiz-opt{font-size:12px;font-weight:500;padding:5px 14px;border-radius:999px;border:none;background:var(--sub-btn-bg);cursor:pointer;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);font-family:inherit;color:var(--text-secondary)}
.quiz-opt:hover:not([disabled]){color:var(--text-primary);background:var(--sub-btn-hover-bg);transform:translateY(-2px);box-shadow:var(--sub-btn-shadow)}
.quiz-opt:active:not([disabled]){transform:translateY(0) scale(0.96)}
.quiz-opt.correct{background:rgba(var(--accent-rgb),.15)!important;box-shadow:inset 0 0 0 1.5px var(--accent)!important;color:var(--accent)!important}
.quiz-opt.wrong{background:rgba(192,74,74,.1)!important;box-shadow:inset 0 0 0 1.5px #c04a4a!important;color:#c04a4a!important}
.quiz-opt.reveal{background:rgba(var(--accent-rgb),.08)!important;box-shadow:inset 0 0 0 1px var(--accent)!important;color:var(--accent)!important;opacity:.65}
.quiz-num{display:flex;align-items:center;gap:6px}
.quiz-ts-btn{display:inline-flex;align-items:center;gap:3px;padding:3px 10px;background:var(--sub-btn-bg);border:none!important;border-radius:999px!important;font-size:10px;font-weight:500;color:var(--text-secondary);font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);margin-left:auto}
.quiz-ts-btn:hover{color:var(--accent);background:var(--accent-light);transform:translateY(-2px);box-shadow:var(--sub-btn-shadow)}
.quiz-ts-btn:active{transform:translateY(0) scale(0.94)}
.quiz-type-badge{font-size:9px;font-weight:700;padding:1px 6px;border-radius:3px;margin-left:6px;vertical-align:middle;background:rgba(var(--accent-rgb),.12);color:var(--accent);border:1px solid rgba(var(--accent-rgb),.25);letter-spacing:.02em}
.quiz-type-badge-spk{background:rgba(100,80,180,.1);color:#5840b0;border-color:rgba(100,80,180,.25)}
.quiz-type-badge-seq{background:rgba(60,150,100,.1);color:#2e8b57;border-color:rgba(60,150,100,.25)}
.quiz-prompt{font-size:12px;color:var(--text-muted);margin-bottom:8px;font-weight:600}
.quiz-options-stack{display:flex;flex-direction:column;gap:7px}
.quiz-sentence-seq{font-size:14px;line-height:1.75;margin-bottom:6px;color:var(--text-primary)}
.quiz-opt-long{display:block;width:100%;text-align:left;white-space:normal;line-height:1.75;border-radius:8px;padding:8px 14px;font-size:14px;font-family:inherit;text-align:left;white-space:normal;line-height:1.5}
.quiz-spk-label{font-weight:700;color:var(--accent);margin-right:4px}
.quiz-sentence-spk{font-style:italic;font-size:14px;line-height:1.75;margin-bottom:12px;color:var(--text-primary)}
/* ── Lang toggle ── */
#btn-lang{position:fixed;top:9px;right:52px;z-index:2000;font-size:13px;font-style:normal;font-weight:500;padding:3px 9px;border-radius:6px;border:1px solid var(--border);background:none;color:var(--text-muted);cursor:pointer;font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;letter-spacing:0;transition:all .15s;outline:none;-webkit-tap-highlight-color:transparent;display:none;opacity:.7}
#btn-lang:focus,#btn-lang:focus-visible,#btn-lang:active{outline:none;box-shadow:none}
#btn-lang:hover{color:var(--accent);border-color:var(--accent)}
body.app-ready #btn-lang{display:block}
/* 关注公众号 — hover 浮现二维码 */
#follow-wechat{position:fixed;top:9px;right:100px;z-index:2000;font-size:13px;font-style:normal;font-weight:500;padding:3px 9px;border-radius:6px;border:1px solid var(--border);background:none;color:var(--text-muted);cursor:default;font-family:inherit;letter-spacing:0;display:none;opacity:.7}
body.app-ready #follow-wechat{display:block}
#follow-wechat:hover{color:var(--accent);border-color:var(--accent)}
#wechat-qr-pop{position:absolute;top:100%;right:0;padding-top:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s,transform .15s}
#follow-wechat:hover #wechat-qr-pop{opacity:1;visibility:visible;transform:translateY(0)}
.qr-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px;box-shadow:0 4px 14px rgba(0,0,0,.08);width:max-content}
.qr-card img{display:block;width:115px;height:auto;border-radius:6px}
.qr-card .qr-name{text-align:center;font-size:13px;font-weight:600;color:#222;margin-top:9px;font-family:inherit}
.qr-card .qr-sub{text-align:center;font-size:11px;color:#9a9a9a;margin-top:2px;font-family:inherit}
.qr-card .qr-missing{display:none;font-size:11px;color:#b06a3a;text-align:center;line-height:1.7;padding:26px 8px}
.tab-filter-bar{display:flex;gap:7px;padding:5px 20px 8px 29px;align-items:center;flex-wrap:wrap;flex-shrink:0}
.bar-divider{display:none}
#filters{display:contents}
.tab{background:var(--sub-btn-bg);border:none;color:var(--text-secondary);padding:4px 14px;border-radius:999px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:color .1s,background .1s,box-shadow .1s,transform .12s cubic-bezier(0.4, 0, 0.2, 1)}
.tab:hover{color:var(--text-primary);background:var(--sub-btn-hover-bg);transform:translateY(-2px);box-shadow:var(--sub-btn-shadow)}
.tab:active{transform:translateY(0) scale(0.96)}
.tab.active{background:var(--tab-active);color:var(--text-primary);box-shadow:var(--sub-item-active-shadow)}
.filter{background:var(--sub-btn-bg);border:none;color:var(--text-muted);padding:3px 10px;border-radius:999px;font-size:8px;font-weight:500;font-family:inherit;cursor:pointer;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1)}
.filter:hover{color:var(--text-secondary);transform:translateY(-2px);box-shadow:var(--sub-btn-shadow)}
.filter:active{transform:translateY(0) scale(0.96)}
.filter.active{color:var(--text-primary);background:var(--card-inner);box-shadow:var(--sub-item-active-shadow)}
/* Colored filter pills — muted when inactive, lit when active */
.filter.filter-kouyu{background:rgba(200,175,85,.18);color:rgba(100,78,18,.48);border-color:rgba(122,95,16,.14)}
.filter.filter-kouyu:hover{background:rgba(200,175,85,.3);color:rgba(100,78,18,.7)}
.filter.filter-kouyu.active{background:var(--pill-yellow-bg);border-color:rgba(122,95,16,.38);color:#7a5f10}
.filter.filter-gudin{background:rgba(175,148,218,.18);color:rgba(74,42,144,.48);border-color:rgba(74,42,144,.14)}
.filter.filter-gudin:hover{background:rgba(175,148,218,.3);color:rgba(74,42,144,.7)}
.filter.filter-gudin.active{background:var(--pill-purple-bg);border-color:rgba(74,42,144,.38);color:#4a2a90}
.filter.filter-xiyu{background:rgba(148,178,218,.18);color:rgba(26,64,128,.48);border-color:rgba(26,64,128,.14)}
.filter.filter-xiyu:hover{background:rgba(148,178,218,.3);color:rgba(26,64,128,.7)}
.filter.filter-xiyu.active{background:var(--pill-blue-bg);border-color:rgba(26,64,128,.38);color:#1a4080}
.filter.filter-phrasal{background:rgba(138,198,148,.18);color:rgba(26,85,48,.48);border-color:rgba(26,85,48,.14)}
.filter.filter-phrasal:hover{background:rgba(138,198,148,.3);color:rgba(26,85,48,.7)}
.filter.filter-phrasal.active{background:var(--pill-green-bg);border-color:rgba(26,85,48,.38);color:#1a5530}
.filter.filter-vocab-v{background:rgba(192,74,74,.16);color:rgba(128,32,64,.5);border-color:rgba(128,32,64,.14)}
.filter.filter-vocab-v:hover{background:rgba(192,74,74,.26);color:rgba(128,32,64,.72)}
.filter.filter-vocab-v.active{background:var(--pill-rose-bg);border-color:rgba(128,32,64,.38);color:#802040}
.filter.filter-vocab-n{background:rgba(60,140,200,.16);color:rgba(26,80,128,.5);border-color:rgba(26,80,128,.14)}
.filter.filter-vocab-n:hover{background:rgba(60,140,200,.26);color:rgba(26,80,128,.72)}
.filter.filter-vocab-n.active{background:#cce8f8;border-color:rgba(26,80,128,.38);color:#1a5080}
.filter.filter-vocab-adj{background:rgba(120,90,200,.16);color:rgba(64,48,160,.5);border-color:rgba(64,48,160,.14)}
.filter.filter-vocab-adj:hover{background:rgba(120,90,200,.26);color:rgba(64,48,160,.72)}
.filter.filter-vocab-adj.active{background:#e0d8f8;border-color:rgba(64,48,160,.38);color:#4030a0}

/* Cards */
#cards{flex:1;overflow-y:auto;padding:14px 20px 32px 10px;display:flex;flex-direction:column;gap:10px}
#cards::-webkit-scrollbar{width:4px}
#cards::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.cards-empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px 20px;text-align:center}
.cards-empty-icon{font-size:36px;opacity:.35}
.cards-empty-text{font-size:13px;line-height:1.7;color:var(--text-muted);opacity:.7}
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:13px 15px;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s;scroll-margin-top:8px}
.card:hover{border-color:var(--border);background:var(--card-inner)}
.card.card-active{border-color:rgba(var(--ink),.55);box-shadow:0 0 0 3px rgba(var(--ink),.12)}
.card-header{display:flex;align-items:flex-start;gap:7px;margin-bottom:9px}
.card-title{font-size:14px;font-weight:700;color:var(--text-primary);flex:1;font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;line-height:1.4}
.pill{font-size:10px;font-weight:500;padding:1px 7px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.pill-kouyu  {background:var(--pill-yellow-bg);color:#7a5f10}
.pill-xiyu   {background:var(--pill-blue-bg);color:#1a4080}
.pill-gudin  {background:var(--pill-purple-bg);color:#4a2a90}
.pill-phrasal{background:var(--pill-green-bg);color:#1a5530}
.pill-vocab  {background:var(--pill-rose-bg);color:#802040}
.pill-vocab-n  {background:#cce8f8;color:#1a5080}
.pill-vocab-adj{background:#e0d8f8;color:#4030a0}
.pill-vocab-v  {background:#d3edd9;color:#1c6437}
.pill-vocab-adv{background:#fbe3c8;color:#94530f}
.pill-wenhua   {background:#cdeeea;color:#15695b}
.scene-jump-btn{display:inline-flex;align-items:center;gap:3px;padding:3px 10px;background:var(--sub-btn-bg);border:none!important;border-radius:999px!important;font-size:10px;font-weight:500;color:var(--text-secondary);font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1)!important}
.scene-jump-btn:hover{color:var(--accent);background:var(--accent-light);transform:translateY(-2px);box-shadow:var(--sub-btn-shadow)}
.scene-jump-btn:active{transform:translateY(0) scale(0.94)}
.card.card-active .scene-jump-btn{color:var(--accent);background:rgba(var(--accent-rgb),0.12)}
.card-scene{background:var(--card-inner);border-radius:8px;padding:10px 12px;margin-bottom:9px;display:flex;flex-direction:column;gap:2px}
.scene-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.scene-label{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
.scene-ts{font-size:10px;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace}
.scene-line{font-size:13px;color:var(--text-secondary);line-height:1.65}
.scene-line.target{font-size:16px;color:var(--text-primary);font-weight:400;line-height:1.6}
.scene-line .hl{background:none;font-weight:700;color:var(--text-primary)}
.definitions{display:flex;flex-direction:column;gap:3px}
.def-line{display:flex;gap:7px;font-size:12px;line-height:1.5;color:var(--text-secondary)}
.def-line.zh{color:var(--text-muted);font-size:11px}
.flag{flex-shrink:0}

/* ── Search ──────────────────────────────────────────────────── */
.tab-search{display:flex;align-items:center;gap:5px;flex-shrink:0;font-size:11px}

/* ── 右上角统一工具条：搜索台词 / 关注公众号 / 语言 / 主题，做成一个长条、四个分段 ── */
#top-toolbar{position:fixed;top:9px;right:12px;z-index:2000;display:flex;flex-direction:column;align-items:center;gap:0;background:none;border:none;box-shadow:none}
#top-toolbar{transition:transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);transform-origin:top right;transform:scale(.78)}
#top-toolbar:hover{transform:scale(1)}
#top-toolbar > *{position:static!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;display:flex!important;align-items:center;justify-content:center;gap:5px;border:none!important;border-radius:999px!important;background:var(--sub-btn-bg)!important;margin:0!important;box-shadow:none!important;opacity:.45!important;font-size:12.5px;font-weight:500;font-family:inherit;font-style:normal;letter-spacing:0;line-height:1;padding:6px 14px!important;color:var(--sub-btn-color)!important;cursor:pointer;white-space:nowrap;transition:all 0.35s cubic-bezier(0.25,0.46,0.45,0.94)!important;-webkit-tap-highlight-color:transparent;outline:none;transform:none;animation:none;transform-origin:top center}
#top-toolbar:hover > *{opacity:1!important;transform:scale(1.04)!important;animation:lantern-sway 2.4s ease-in-out infinite}
#top-toolbar:hover > :nth-child(1){animation-delay:0s}
#top-toolbar:hover > :nth-child(2){animation-delay:.4s}
#top-toolbar:hover > :nth-child(3){animation-delay:.2s}
#top-toolbar > * + *{border-left:none!important}
#top-toolbar > .tt-seg{position:relative!important}
/* 连接线：从当前按钮底部向下延伸到下一个按钮顶部 */
#top-toolbar > #follow-wechat::after,
#top-toolbar > #btn-theme::after{content:'';position:absolute;top:100%;left:50%;width:1px;height:3px;margin-left:-0.5px;background:var(--text-muted);opacity:.25;transition:all 0.35s cubic-bezier(0.25,0.46,0.45,0.94)}
#top-toolbar:hover > #follow-wechat::after,
#top-toolbar:hover > #btn-theme::after{opacity:.3}
/* 渐进间距：上小下大 */
#top-toolbar > .tt-seg + .tt-seg:not([style*="display:none"]){margin-top:3px!important;transition:margin-top 0.35s cubic-bezier(0.25,0.46,0.45,0.94)!important}
#top-toolbar:hover > .tt-seg + .tt-seg:not([style*="display:none"]){margin-top:3px!important}
#top-toolbar > .tt-seg + .tt-seg + .tt-seg:not([style*="display:none"]){margin-top:3px!important;transition:margin-top 0.35s cubic-bezier(0.25,0.46,0.45,0.94)!important}
#top-toolbar:hover > .tt-seg + .tt-seg + .tt-seg:not([style*="display:none"]){margin-top:3px!important}
/* 渐进大小：上小下大 */
#top-toolbar > :nth-child(1){transform:scale(.88);transform-origin:top center}
#top-toolbar > :nth-child(3){transform:scale(1.08);transform-origin:top center}
#top-toolbar:hover > :nth-child(1){transform:scale(.92)!important}
#top-toolbar:hover > :nth-child(3){transform:scale(1.12)!important}
#top-toolbar:hover > .tt-seg::before{height:3px;top:-3px}
#top-toolbar:hover > .tt-seg + .tt-seg:not([style*="display:none"])::before{height:4px;top:-4px}
#top-toolbar:hover > .tt-seg + .tt-seg + .tt-seg:not([style*="display:none"])::before{height:5px;top:-5px}
#top-toolbar > *:hover{background:var(--sub-btn-hover-bg)!important;color:var(--text-primary)!important;box-shadow:var(--sub-btn-shadow)!important;animation:lantern-sway-single .9s ease-in-out infinite}
#top-toolbar > *:active{transform:translateY(0) scale(0.96)!important;box-shadow:none!important}

/* ── 第三个按钮（主题切换）下方灯笼坠 ── */
#btn-style::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);width:8px;height:22px;pointer-events:none;margin-top:1px;
  background:
    /* 顶结 */
    radial-gradient(circle, rgba(156,143,122,.32) 30%, transparent 31%) 50% 1px / 3px 3px no-repeat,
    /* 左须 */
    linear-gradient(rgba(156,143,122,.22), rgba(156,143,122,.04)) 25% 20% / 1px 70% no-repeat,
    /* 中须 */
    linear-gradient(rgba(156,143,122,.22), rgba(156,143,122,.04)) 50% 20% / 1px 70% no-repeat,
    /* 右须 */
    linear-gradient(rgba(156,143,122,.22), rgba(156,143,122,.04)) 75% 20% / 1px 70% no-repeat;
  transform-origin:50% 0;animation:tassel-sway 3s ease-in-out infinite}
@keyframes tassel-sway{0%,100%{transform:translateX(-50%) rotate(0deg)}20%{transform:translateX(-50%) rotate(2deg)}50%{transform:translateX(-50%) rotate(-1.5deg)}75%{transform:translateX(-50%) rotate(1deg)}}
@keyframes lantern-sway{0%,100%{transform:scale(1.04) rotate(0deg)}15%{transform:scale(1.04) rotate(2.5deg)}40%{transform:scale(1.04) rotate(-2deg)}60%{transform:scale(1.04) rotate(1.2deg)}75%{transform:scale(1.04) rotate(-1.8deg)}90%{transform:scale(1.04) rotate(0.5deg)}}
@keyframes lantern-sway-single{0%,100%{transform:scale(1.06) rotate(0deg)}25%{transform:scale(1.06) rotate(3.5deg)}55%{transform:scale(1.06) rotate(-3deg)}80%{transform:scale(1.06) rotate(1.5deg)}}
/* 搜索台词：默认不高亮，只有打开搜索面板（.active）时才高亮 */
#top-toolbar #tab-search.active{background:var(--tab-active)!important;color:var(--text-primary)!important;box-shadow:var(--sub-item-active-shadow)!important}
/* 关注公众号：悬浮弹二维码，需相对定位作锚点；本身不是点击按钮 */
#top-toolbar #follow-wechat{position:relative!important;cursor:default}
#top-toolbar #btn-theme svg{width:16px;height:16px}
/* 「搜索台词」「关注公众号」文字用斜体 */
#top-toolbar #tab-search,#top-toolbar #follow-wechat{font-style:italic}
body.in-fullscreen #top-toolbar{display:none}
#search-panel{flex:1;overflow-y:auto;display:none;flex-direction:column;min-height:0}
#search-panel.visible{display:flex}
.search-box-area{padding:12px 20px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
.search-input-row{display:flex;align-items:center;gap:8px;background:var(--card-bg);border:1.5px solid var(--border);border-radius:10px;padding:8px 12px;transition:border-color .15s;max-width:320px;margin:0 auto}
.search-input-row:focus-within{border-color:var(--accent)}
.search-icon-wrap{color:var(--text-muted);flex-shrink:0;display:flex}
#search-input{flex:1;border:none;background:none;font-size:14px;font-family:inherit;color:var(--text-primary);outline:none}
#search-input::placeholder{color:var(--text-muted)}
#search-clear-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:0 2px;font-size:15px;line-height:1;display:none;flex-shrink:0}
#search-clear-btn:hover{color:var(--text-primary)}
#search-clear-btn.visible{display:block}
.search-count-line{margin-top:7px;font-size:12px;color:var(--text-muted);font-weight:500}
.search-results-list{flex:1;overflow-y:auto;padding:4px 0 32px;background:var(--card-bg)}
.search-result{display:flex;align-items:baseline;gap:10px;padding:9px 20px;cursor:pointer;transition:background .1s,border-left-color .1s;border-left:3px solid transparent}
.search-result:hover{background:rgba(var(--accent-rgb),.1);border-left-color:var(--accent)}
.search-result-ts{font-size:10px;font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;color:var(--accent);white-space:nowrap;flex-shrink:0;padding-top:1px}
.search-result-text{font-size:14px;color:rgba(var(--ink),.5);font-weight:400;line-height:1.55}
.search-result-text .hl{font-weight:600;color:var(--text-primary)}
.search-empty{padding:24vh 20px 20px;text-align:center;color:var(--text-muted);font-size:13px;line-height:1.8;background:var(--card-bg)}
.search-empty-arrow{display:block;width:48px;height:18px;margin:8px auto 0;color:rgba(var(--accent-rgb),.7)}

/* ── 暗色模式（夜间），降低夜间使用时的亮度 ───────────────────── */
:root.dark{
  --bg:#1d1a16;
  --card-bg:#26221d;
  --card-inner:#302b25;
  --border:#443d34;
  --text-primary:#ede5d8;
  --text-secondary:#c4b8a8;
  --text-muted:#8f8474;
  --tab-active:#3a3430;
  --ink:237,229,216;
  --accent:#d4a059;
  --accent-light:#3a2e1e;
  --accent-glow:#d4a059;
  --accent-rgb:212,160,89;
  --neon-color: #ff8833;
  --neon-glow: rgba(255, 136, 51, 0.85);

  /* Subtitle Panel Theme Variables - Cafe Dark */
  --sub-panel-bg: #2a241e;
  --sub-panel-border: rgba(255, 255, 255, 0.05);
  --sub-panel-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --sub-btn-bg: rgba(255, 255, 255, 0.06);
  --sub-btn-hover-bg: rgba(255, 255, 255, 0.12);
  --sub-btn-color: #c5bcae;
  --sub-btn-active-color: #ede5d8;
  --sub-btn-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  --sub-control-bg: rgba(255, 255, 255, 0.04);
  --sub-item-active-bg: rgba(255, 255, 255, 0.12);
  --sub-item-active-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
:root.dark.theme-sage{
  --bg:#1a1d18;--card-bg:#23271f;--card-inner:#2b3027;--border:#3b4135;
  --text-primary:#e9ede1;--text-secondary:#bcc4b2;--text-muted:#8b9382;
  --tab-active:#363c30;--ink:233,237,225;
  --accent:#a3c078;--accent-light:#2a3520;--accent-glow:#a3c078;--accent-rgb:163,192,120;
  --neon-color: #00ff88;
  --neon-glow: rgba(0, 255, 136, 0.85);

  /* Subtitle Panel Theme Variables - Sage Dark */
  --sub-panel-bg: #21251e;
  --sub-panel-border: rgba(255, 255, 255, 0.05);
  --sub-panel-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --sub-btn-bg: rgba(255, 255, 255, 0.06);
  --sub-btn-hover-bg: rgba(255, 255, 255, 0.12);
  --sub-btn-color: #bcc5b2;
  --sub-btn-active-color: #e9ede1;
  --sub-btn-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  --sub-control-bg: rgba(255, 255, 255, 0.04);
  --sub-item-active-bg: rgba(255, 255, 255, 0.12);
  --sub-item-active-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
:root.dark.theme-sky{
  --bg:#15191f;--card-bg:#1d2530;--card-inner:#26303c;--border:#374554;
  --text-primary:#e6eef6;--text-secondary:#aebccc;--text-muted:#7e8da0;
  --tab-active:#2f3d4c;--ink:230,238,246;
  --accent:#6fb7e8;--accent-light:#1c2c3a;--accent-glow:#6fb7e8;--accent-rgb:111,183,232;
  --neon-color:#38bdf8;--neon-glow:rgba(56,189,248,0.85);
  --sub-panel-bg:#1b2330;--sub-panel-border:rgba(255,255,255,0.05);
  --sub-panel-shadow:0 8px 24px rgba(0,0,0,0.35);
  --sub-btn-bg:rgba(255,255,255,0.06);--sub-btn-hover-bg:rgba(255,255,255,0.12);
  --sub-btn-color:#b3c2d3;--sub-btn-active-color:#e6eef6;
  --sub-btn-shadow:0 4px 12px rgba(0,0,0,0.25);--sub-control-bg:rgba(255,255,255,0.04);
  --sub-item-active-bg:rgba(255,255,255,0.12);--sub-item-active-shadow:0 2px 8px rgba(0,0,0,0.2);
}
/* 行高亮在暗色下减弱，避免夜间刺眼 */
:root.dark .transcript-line:hover{background:rgba(255,255,255,.07)}
:root.dark .transcript-line.t-active{background:rgba(255,255,255,.10)}
:root.dark .transcript-line.range-loop{background:rgba(255,255,255,.10)}
:root.dark .transcript-line.range-loop:hover{background:rgba(255,255,255,.14)}
:root.dark .transcript-line.range-loop.t-active{background:rgba(255,255,255,.16)}
/* “听音中”按钮：暗色下用深底白字，避免浅底白字看不清 */
/* 暗色下词卡 hover 用深色 */
:root.dark .card:hover{background:rgba(var(--accent-rgb),.1);border-color:rgba(var(--accent-rgb),.25)}
/* 暗色模式下未激活筛选标签的颜色修复，提升对比度 */
:root.dark .filter.filter-kouyu:not(.active){background:rgba(200,175,85,.12);color:rgba(230,210,130,.75);border-color:rgba(200,175,85,.3)}
:root.dark .filter.filter-kouyu:not(.active):hover{background:rgba(200,175,85,.24);color:rgba(230,210,130,.95)}
:root.dark .filter.filter-gudin:not(.active){background:rgba(175,148,218,.12);color:rgba(200,180,240,.75);border-color:rgba(175,148,218,.3)}
:root.dark .filter.filter-gudin:not(.active):hover{background:rgba(175,148,218,.24);color:rgba(200,180,240,.95)}
:root.dark .filter.filter-xiyu:not(.active){background:rgba(148,178,218,.12);color:rgba(180,200,240,.75);border-color:rgba(148,178,218,.3)}
:root.dark .filter.filter-xiyu:not(.active):hover{background:rgba(148,178,218,.24);color:rgba(180,200,240,.95)}
:root.dark .filter.filter-phrasal:not(.active){background:rgba(138,198,148,.12);color:rgba(170,230,180,.75);border-color:rgba(138,198,148,.3)}
:root.dark .filter.filter-phrasal:not(.active):hover{background:rgba(138,198,148,.24);color:rgba(170,230,180,.95)}
/* ── 主题切换按钮（右上角，始终可见，含上传页）── */
#btn-theme{position:fixed;top:9px;right:12px;z-index:2000;display:inline-flex;align-items:center;justify-content:center;padding:0;width:28px;height:28px;border-radius:50%;border:none;background:var(--sub-btn-bg);color:var(--text-muted);cursor:pointer;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);outline:none;-webkit-tap-highlight-color:transparent;opacity:.7}
#btn-theme:hover{color:var(--text-primary);background:var(--sub-btn-hover-bg);transform:translateY(-2px);box-shadow:var(--sub-btn-shadow);opacity:1}
#btn-theme:active{transform:translateY(0) scale(0.92)}
#btn-theme:focus,#btn-theme:focus-visible{outline:none;box-shadow:none}
#btn-style{font-size:15px;line-height:1;padding:0;width:28px;height:28px;border-radius:50%;border:none;background:var(--sub-btn-bg);cursor:pointer;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);outline:none;-webkit-tap-highlight-color:transparent;opacity:.75}
#btn-style:hover{background:var(--sub-btn-hover-bg);transform:translateY(-2px);box-shadow:var(--sub-btn-shadow);opacity:1}
#btn-style:active{transform:translateY(0) scale(0.92)}
#btn-theme svg{display:block;width:19px;height:19px}

/* ── 台词分析面板 ─────────────────────────────────────────────── */
#analysis-panel{display:none;flex:1;overflow-y:auto;flex-direction:column;min-height:0;background:var(--bg)}
#analysis-panel.visible{display:flex}
#analysis-panel::-webkit-scrollbar{width:4px}
#analysis-panel::-webkit-scrollbar-thumb{background:rgba(var(--ink),.2);border-radius:2px}
.analysis-subtabs{display:flex;gap:7px;flex-wrap:wrap;padding:10px 20px 8px;flex-shrink:0;position:sticky;top:0;background:var(--bg);z-index:1}
.atab{background:var(--sub-btn-bg);border:none;color:var(--text-secondary);padding:4px 14px;border-radius:999px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:color .1s,background .1s,box-shadow .1s,transform .12s cubic-bezier(0.4, 0, 0.2, 1)}
.atab:hover{color:var(--text-primary);background:var(--sub-btn-hover-bg);transform:translateY(-2px);box-shadow:var(--sub-btn-shadow)}
.atab:active{transform:translateY(0) scale(0.96)}
.atab.active{background:var(--tab-active);color:var(--text-primary);box-shadow:var(--sub-item-active-shadow)}
#analysis-body{padding:14px 20px 40px;display:flex;flex-direction:column;gap:9px}
/* 台词分析三小节直接堆叠，用小标题分隔（子标签已去掉）*/
.analysis-h{font-size:13.5px;font-weight:700;color:var(--text-primary);margin:6px 0 2px;padding-top:16px;border-top:1px solid var(--border)}
.analysis-h:first-child{margin-top:0;padding-top:2px;border-top:none}
.stat-row{display:flex;gap:6px;margin-bottom:2px;align-items:stretch}
.stat-heading{writing-mode:vertical-lr;text-orientation:mixed;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--text-secondary);background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:8px 6px;letter-spacing:.1em;flex-shrink:0}
.stat-cell{flex:1;background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:12px 4px;text-align:center;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.stat-num{font-size:20px;font-weight:700;color:var(--text-primary);font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;line-height:1.2}
.stat-label{font-size:10px;color:var(--text-muted);margin-top:3px}
.an-collapse{border:1px solid var(--border);border-radius:10px;margin-top:4px;overflow:hidden}
.an-collapse-sum{display:flex;align-items:center;padding:10px 14px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text-primary);user-select:none;list-style:none;background:var(--card-bg)}
.an-collapse-sum::-webkit-details-marker{display:none}
.an-collapse-sum::before{content:'▸';margin-right:6px;font-size:11px;color:var(--text-muted);transition:transform .15s}
.an-collapse[open]>.an-collapse-sum::before{transform:rotate(90deg)}
.an-collapse-count{font-size:12px;font-weight:700;color:var(--accent);margin-left:auto}
.an-collapse-body{padding:2px 14px 10px}
.an-hint{font-size:11px;color:var(--text-muted);line-height:1.6;padding:2px 2px 4px}
.spk-row{display:flex;align-items:center;gap:10px;padding:5px 0}
.spk-name{display:flex;align-items:center;gap:6px;width:92px;flex-shrink:0;font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spk-bar-wrap{flex:1;height:8px;background:var(--card-inner);border-radius:4px;overflow:hidden;min-width:30px}
.spk-bar{height:100%;border-radius:4px}
.spk-stat{font-size:10.5px;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;white-space:nowrap;flex-shrink:0}
.colloc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:var(--card-bg);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:border-color .15s,background .15s}
.colloc-row:hover{border-color:var(--accent);background:var(--card-inner)}
.colloc-row-active{border-color:var(--accent);background:var(--card-inner);box-shadow:inset 0 0 0 1.5px var(--accent)}
.colloc-text{font-size:14px;color:var(--text-primary);font-weight:500}
.colloc-count{font-size:11px;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono','Courier New',monospace;flex-shrink:0}
.an-empty{text-align:center;color:var(--text-muted);padding:40px 20px;font-size:13px;line-height:1.8}
.spk-row{cursor:pointer;border-radius:7px;padding:8px 7px;margin:0 -7px}
.spk-row:hover{background:var(--card-inner)}
.spk-row-active{background:var(--card-inner);box-shadow:inset 0 0 0 1.5px var(--accent)}

/* ── Bilingual Subtitles & Toggles ── */
.sub-toggle-group {
  display: inline-flex;
  align-items: center;
  gap: 12px; /* 舒适的组间距 */
  margin-right: 8px;
}

/* 普通按钮（如友情提示）：增加圆润度与超轻动效 */
.sub-toggle-group button:not(.segmented-item) {
  border-radius: 999px; /* 完美胶囊化 */
  border: none;
  background: var(--sub-btn-bg);
  color: var(--sub-btn-color); /* 深咖色文字，比纯黑/纯灰更温柔 */
  font-weight: 500;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
}

/* 悬停时微微放大并亮起 */
.sub-toggle-group button:not(.segmented-item):hover {
  background: var(--sub-btn-hover-bg);
  transform: translateY(-2px);
  box-shadow: var(--sub-btn-shadow);
}

/* 按下时有弹簧回馈感 */
.sub-toggle-group button:not(.segmented-item):active {
  transform: translateY(0) scale(0.96);
}

/* 选中项高亮样式 (针对独立按钮如友情提示) */
.sub-toggle-group button:not(.segmented-item).active {
  background: var(--sub-btn-hover-bg);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
  color: var(--text-primary);
  font-weight: 600;
}

/* 3. 【重点】字幕切换（英/双/关）胶囊化组合 */
.subtitle-segmented-control {
  position: relative;
  display: inline-flex;
  background: var(--sub-control-bg); /* 凹陷的跑道背景 */
  padding: 3px;
  border-radius: 999px;
  gap: 2px;
  align-items: center;
  user-select: none;
}

.segmented-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 58px;
  height: 26px;
  background: var(--sub-item-active-bg); /* 选中项：像一张盖在上面的白色小卡片漂浮起来 */
  border-radius: 999px; /* 内部也是胶囊 */
  box-shadow: var(--sub-item-active-shadow);
  transform: translateX(calc((100% + 2px) * var(--sub-slider-index, 0)));
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.segmented-item {
  position: relative;
  width: 58px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--sub-btn-color);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;
  transition: color 0.15s;
  padding: 0;
  outline: none;
  border-radius: 999px;
}

.segmented-item:hover {
  color: var(--text-primary);
}

.segmented-item.active {
  color: var(--sub-btn-active-color);
  font-weight: 600;
}

/* Subtitle Font-Size Adjustments */
.sub-size-group {
  display: inline-flex;
  background: var(--sub-control-bg); /* 凹陷的跑道背景 */
  padding: 3px;
  border-radius: 999px;
  gap: 2px;
  align-items: center;
  margin-right: 8px;
}
.sub-size-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none !important;
  border-radius: 999px !important;
  padding: 4px 10px;
  color: var(--sub-btn-color);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.sub-size-btn:hover {
  background: var(--sub-item-active-bg);
  color: var(--text-primary);
  box-shadow: var(--sub-item-active-shadow);
}
.sub-size-btn:active {
  transform: scale(0.92);
}

.sub-en {
  display: block;
}
.sub-zh {
  display: block;
  font-size: 11.5px;
  color: rgba(var(--ink), 0.45);
  margin-top: 3px;
  font-weight: normal;
}
.transcript-line.t-active .sub-zh {
  color: rgba(var(--ink), 0.65);
}

/* Subtitle display modes for transcript panel */
#transcript-panel.sub-mode-en .sub-zh { display: none !important; }
#transcript-panel.sub-mode-zh .sub-en { display: none !important; }
#transcript-panel.sub-mode-none .sub-en,
#transcript-panel.sub-mode-none .sub-zh { display: none !important; }

/* Video subtitle overlay */
.video-subtitle {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  text-align: center;
  width: 90%;
  pointer-events: none;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  display: none;
  transition: opacity 0.2s;
}
.video-subtitle .sub-en {
  color: #dcdcdc;
  font-size: var(--sub-en-size, 22px);
  font-weight: 600;
  line-height: 1.45;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.video-subtitle .sub-zh {
  color: #dcdcdc;
  font-size: var(--sub-zh-size, 18px);
  font-weight: 500;
  margin-top: 4px;
  line-height: 1.45;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* Subtitle display modes for video overlay */
.video-subtitle.sub-mode-en .sub-zh { display: none !important; }
.video-subtitle.sub-mode-zh .sub-en { display: none !important; }
.video-subtitle.sub-mode-none { display: none !important; }
.video-subtitle.sub-mode-none .sub-en,
.video-subtitle.sub-mode-none .sub-zh { display: none !important; }

/* Hide subtitle mask button but keep functionality in background */
#btn-sub-mask {
  display: none !important;
}

/* Portrait Fit Mode (portrait-mode) - Keep original height, position subtitles in bottom black bar close to video */
.video-wrapper.portrait-mode .player-inner {
  height: calc(52vh - 30px) !important;
  background: #000 !important;
}
.video-wrapper.portrait-mode #player {
  height: calc(52vh - 30px) !important;
  aspect-ratio: 9/16 !important;
  object-fit: contain !important;
}
.video-wrapper.portrait-mode .video-subtitle {
  bottom: 18% !important;
}

/* Portrait Fill Mode (portrait-fill) - Expand container downwards by 64px, align video at top, show subtitles below */
.video-wrapper.portrait-fill .player-inner {
  height: calc(52vh - 30px + 64px) !important;
  background: #000 !important;
}
.video-wrapper.portrait-fill #player {
  height: calc(52vh - 30px) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  object-fit: cover !important;
}
.video-wrapper.portrait-fill .video-subtitle {
  bottom: 10px !important;
}

/* Disable subtitle mask completely */
.subtitle-mask {
  display: none !important;
}

/* Hide top-right fixed controls in fullscreen mode to prevent Safari overlap bugs */
body.in-fullscreen #btn-theme,
body.in-fullscreen #btn-lang,
body.in-fullscreen #follow-wechat,
body:has(:fullscreen) #btn-theme,
body:has(:fullscreen) #btn-lang,
body:has(:fullscreen) #follow-wechat {
  display: none !important;
}

/* ── 全屏：让视频铺满整个屏幕 ──
   「含台词栏全屏」= #left-panel 进入全屏。平时 .player-inner 高度被限制在 52vh，
   全屏时若不放大，视频只会停在屏幕中间一小块，看起来像「点了没反应」。
   这里让视频区撑满整屏，视频按 16:9 填满（减去底部控制条约 78px）。
   用 JS 切换的 body.in-fullscreen 类驱动，避免依赖浏览器对 :fullscreen 伪类的支持差异。 */
body.in-fullscreen .left-panel{width:100vw;height:100vh}
body.in-fullscreen .video-wrapper{flex:1 1 auto;min-height:0;align-items:center;justify-content:center;background:#000}
body.in-fullscreen .player-inner{width:min(100vw, calc((100vh - 78px) * 16 / 9))}
body.in-fullscreen .custom-controls{width:min(100vw, calc((100vh - 78px) * 16 / 9))}
body.in-fullscreen .transcript-header-bar{width:min(100vw, calc((100vh - 78px) * 16 / 9));align-self:center}
/* 全屏时让视频底色与黑色画布一致，消除 object-fit:contain 留出的那条很细的米色边线 */
body.in-fullscreen #player,
body.pseudo-fullscreen #player{background:#000}

/* 退化版全屏：原生 Fullscreen API 被拒时，用定位让视频区填满整个浏览器窗口。
   背景铺黑、盖住其它内容；视频放大复用上面的 body.in-fullscreen 规则。 */
body.pseudo-fullscreen .left-panel{position:fixed;inset:0;width:100vw;height:100vh;z-index:99999;background:#000}

/* ── Text Sizing Overrides (Enlarged for Readability) ── */
.transcript-text {
  font-size: var(--trans-en-size, 15.5px) !important;
}
.transcript-text .sub-zh {
  font-size: var(--trans-zh-size, 13.5px) !important;
}
.transcript-speaker {
  font-size: var(--trans-spk-size, 12.5px) !important;
  width: var(--trans-spk-width, 44px) !important;
  font-weight: 700 !important;
}

.card-title {
  font-size: 16px !important;
}
.scene-line {
  font-size: 15px !important;
}
.scene-line.target {
  font-size: 18px !important;
}
.definitions {
  gap: 4px !important;
}
.def-line {
  font-size: 14px !important;
}
.def-line.zh {
  font-size: 13px !important;
}

#notes-editor {
  font-size: 16px !important;
}
.notes-hint {
  font-size: 12.5px !important;
}
.fav-text {
  font-size: 15.5px !important;
}
.radar-tip {
  font-size: 15px !important;
}

.search-result-text {
  font-size: 15.5px !important;
}

.quiz-sentence, .quiz-sentence-spk {
  font-size: 16px !important;
}
.quiz-opt {
  font-size: 14px !important;
}

/* ── Season & Episode Dropdown Index Selector ── */
.ep-selector-wrap {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.ep-select {
  appearance: none;
  -webkit-appearance: none;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 22px 4px 10px;
  border-radius: 999px;
  background: var(--card-inner);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  outline: none;
  transition: all 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%238b9382' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.ep-select:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  background-color: var(--bg-card);
}
.ep-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--ink), 0.05);
}
:root.dark .ep-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%238b9382' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ── Custom season / episode dropdowns (built in app.js → buildDropdown) ──
   Styled to match the rest of the UI: pill trigger + floating card popup. */
.ep-custom-wrap{position:relative;display:inline-flex;align-items:center}
.ep-select-custom{
  appearance:none;-webkit-appearance:none;
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;
  padding:4px 9px 4px 11px;
  border-radius:999px;
  background:var(--card-inner);
  border:1px solid var(--border);
  color:var(--text-muted);
  cursor:pointer;outline:none;line-height:1;
  transition:border-color .15s,color .15s,background-color .15s;
}
.ep-select-custom:hover{border-color:var(--accent);color:var(--text-primary);background:var(--bg-card)}
.ep-select-custom svg{flex-shrink:0;opacity:.7;transition:transform .18s ease}
/* Open state (chevron flips, trigger highlights) */
.ep-custom-wrap:has(.ep-dropdown.open) .ep-select-custom{border-color:var(--accent);color:var(--text-primary);background:var(--bg-card)}
.ep-custom-wrap:has(.ep-dropdown.open) .ep-select-custom svg{transform:rotate(180deg);opacity:1}

.ep-dropdown{
  position:absolute;top:calc(100% + 6px);right:0;
  min-width:100%;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:10px;
  padding:4px;
  display:none;flex-direction:column;gap:1px;
  z-index:120;
  box-shadow:0 8px 28px rgba(0,0,0,.22);
  max-height:300px;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(4px);
  transition:opacity .12s ease,transform .12s ease;
}
.ep-dropdown.open{display:flex;opacity:1;transform:translateY(0)}
.ep-option{
  display:flex;align-items:center;gap:5px;
  padding:5px 12px 5px 6px;
  border-radius:6px;
  font-size:11.5px;font-weight:600;
  color:var(--text-secondary);
  cursor:pointer;white-space:nowrap;
  transition:background-color .1s,color .1s;
}
.ep-option:hover{background:rgba(var(--accent-rgb),.1);color:var(--text-primary)}
.ep-option.ep-selected{background:rgba(var(--accent-rgb),.15);color:var(--accent)}
.ep-check{
  display:inline-flex;align-items:center;justify-content:center;
  width:11px;flex-shrink:0;
  font-size:10px;color:var(--accent);
}
/* thin scrollbar inside the episode list */
.ep-dropdown::-webkit-scrollbar{width:6px}
.ep-dropdown::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.ep-dropdown::-webkit-scrollbar-track{background:transparent}

/* ── Vertically-stacked prev/next-sentence buttons (上一句 / 下一句) ──
   Stacked up/down to mirror the vertical transcript scroll. */
.seek-line-group{display:inline-flex;flex-direction:column;justify-content:center;flex-shrink:0}
.seek-line-group .ctrl-btn{padding:2px 8px;border-radius:999px}
.seek-line-group .ctrl-btn svg{display:block;width:17px;height:17px}

/* ── Episode selector, centered inside the player control bar ──
   The control bar sits between the video and the transcript — outside both lock
   overlays — so episode navigation stays available and is never covered by the
   paywall. The two flanking .spacer elements keep it centered. */
.ep-selector-inline{flex-shrink:0;gap:6px}
.ep-selector-inline .ep-select{font-size:12px;padding:4px 21px 4px 10px}

/* ── 剧集选择：移到右栏顶部，与右上角「搜索台词/关注公众号」工具栏同一行、靠左 ──
   绝对定位在 .right-panel 内部，left 相对右栏 → 自动跟随中间分隔条拖动，无需 JS。
   z-index 60 > 付费墙(.section-lock-overlay z-index:50)，所以锁集时也不会被付费墙盖住，
   保证任何时候都能切换剧集。 */
.ep-selector-top{position:absolute;top:9px;left:12px;z-index:60;gap:6px}
.ep-selector-top .ep-select{font-size:12px;padding:4px 21px 4px 10px}

/* ── VIP Paywall Lock Overlay (已移除付费墙，默认隐藏) ── */
.section-lock-overlay {
  display: none;
}

/* ══ 付费墙（FRIENDS Learning 设计稿）══ */
#right-panel-lock-overlay{padding:42px 14px 16px}
.paywall{width:min(94%,400px);max-height:100%;overflow-y:auto;background:#0b0f18;border:1px solid rgba(255,255,255,.08);border-radius:18px;box-shadow:0 22px 60px rgba(0,0,0,.55);color:#e7ebf2;padding:24px 22px 26px;display:flex;flex-direction:column;gap:15px;text-align:left;font-family:inherit}
.paywall::-webkit-scrollbar{width:5px}
.paywall::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.pw-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pw-brand{display:flex;flex-direction:column;gap:5px}
.pw-friends{display:flex;align-items:center;gap:4px;font-family:'Georgia',serif;font-weight:700;font-size:23px;letter-spacing:1px;color:#f3f0e8}
.pw-friends i{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pw-friends i:nth-of-type(3n+1){background:#e4572e}
.pw-friends i:nth-of-type(3n+2){background:#4a90d9}
.pw-friends i:nth-of-type(3n){background:#f2b705}
.pw-learning{font-size:38px;font-weight:800;line-height:.9;color:#efb14d;letter-spacing:-.5px;width:max-content;position:relative}
.pw-learning::after{content:'';position:absolute;left:1px;right:14%;bottom:-5px;height:3px;border-radius:2px;background:#efb14d;opacity:.8}
.pw-hero{width:100px;height:auto;flex-shrink:0;border-radius:10px}
.pw-unlock{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#cdd3dc}
.pw-unlock-ico{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.06);font-size:12px}
.pw-watching{display:flex;align-items:center;gap:12px;background:#141a26;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px 16px}
.pw-play{flex-shrink:0;width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#2b3242,#191f2c);display:flex;align-items:center;justify-content:center;color:#8aa0c8}
.pw-watching-1{font-size:14.5px;color:#e7ebf2}
.pw-watching-1 b{color:#efb14d;font-weight:700}
.pw-watching-2{font-size:12px;color:#8b93a3;margin-top:3px;line-height:1.5}
.pw-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pw-feat{display:flex;align-items:flex-start;gap:10px;background:#141a26;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:13px}
.pw-feat-wide{grid-column:1 / -1}
.pw-fi{flex-shrink:0;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;background:rgba(255,255,255,.05)}
.pw-ft{font-size:13.5px;font-weight:700;color:#eef1f6;line-height:1.2}
.pw-fd{font-size:11px;color:#838b9b;margin-top:4px;line-height:1.45}
.pw-qrcard{position:relative;display:flex;align-items:center;justify-content:center;gap:18px;background:radial-gradient(130% 150% at 50% 0%,rgba(239,177,77,.09),transparent 70%),#10141e;border:1px solid rgba(239,177,77,.28);border-radius:16px;padding:22px 18px;overflow:hidden}
.pw-qr{position:relative;width:108px;height:108px;background:#fff;border-radius:12px;padding:7px;flex-shrink:0;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.pw-qr>svg{width:100%;height:100%;display:block}
.pw-qr-lock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:25px;height:25px;border-radius:7px;background:#1b1f2a;display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:0 0 0 4px #fff}
.pw-qr-cta{font-size:21px;font-weight:800;color:#fff;line-height:1.25;position:relative;z-index:1}
.pw-qr-cta b{color:#efb14d}
.pw-d{position:absolute;z-index:0}
.pw-d-couch{left:8px;bottom:8px;width:52px;opacity:.55}
.pw-d-cup{right:12px;bottom:12px;width:26px;opacity:.55}
.pw-code{display:flex;flex-direction:column;align-items:center;gap:11px;margin-top:2px}
.pw-code-h{display:flex;align-items:center;gap:12px;font-size:13px;color:#7d8597;width:100%}
.pw-code-h span{flex:1;height:1px;background:rgba(255,255,255,.1)}
.pw-code-row{display:flex;gap:10px;width:100%}
#vip-code-input{flex:1;min-width:0;background:#141a26;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:11px 14px;color:#e7ebf2;font-size:14px;font-family:inherit;outline:none}
#vip-code-input::placeholder{color:#5d667a}
#vip-code-input:focus{border-color:#efb14d}
#vip-submit-btn{flex-shrink:0;background:#efb14d;color:#1a130a;border:none;border-radius:10px;padding:11px 24px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:filter .15s}
#vip-submit-btn:hover{filter:brightness(1.07)}
.pw-code .vip-error-msg{color:#e87c6a;font-size:12px;min-height:13px;margin:0;text-align:center}
.pw-code-foot{font-size:11.5px;color:#6f7891}
.section-lock-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 24px;
  width: 85%;
  max-width: 320px;
  text-align: center;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
}
:root.dark .section-lock-card {
  background: #1e252b;
  border-color: rgba(255, 255, 255, 0.08);
}
.section-lock-icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.section-lock-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.section-lock-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.vip-card {
  background: linear-gradient(135deg, rgba(30, 37, 43, 0.95) 0%, rgba(20, 24, 28, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 40px rgba(212, 175, 55, 0.05);
  border-radius: 20px;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
  color: #e5e7eb;
}
.vip-header {
  text-align: center;
}
.vip-lock-icon {
  font-size: 44px;
  margin-bottom: 12px;
  display: inline-block;
  animation: vip-lock-pulse 2s infinite ease-in-out;
}
@keyframes vip-lock-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.6)); }
  100% { transform: scale(1); }
}
.vip-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1px;
}
.vip-subtitle {
  font-size: 13px;
  color: #d4af37;
  font-weight: 600;
  letter-spacing: 4px;
  margin-top: 4px;
}
.vip-desc {
  font-size: 14px;
  color: #9ca3af;
  line-height: 1.6;
}
.vip-desc strong {
  color: #ffffff;
}
.vip-desc .vip-ep-name {
  color: #d4af37;
}
.vip-benefits {
  list-style: none;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.vip-benefits li {
  color: #d1d5db;
  line-height: 1.8;
  position: relative;
  padding-left: 22px;
}
.vip-benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #d4af37;
  font-weight: bold;
}
.vip-payment-section {
  display: flex;
}
.vip-qr-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.vip-qr-code {
  background: #ffffff;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vip-qr-svg {
  width: 100%;
  height: auto;
  display: block;
}
.vip-qr-hint {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 8px;
  font-weight: 500;
}
.vip-input-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vip-input-tip {
  font-size: 12.5px;
  color: #9ca3af;
}
.vip-input-row {
  display: flex;
  gap: 8px;
}
#vip-code-input {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 14px;
  color: #ffffff;
  font-size: 13px;
  outline: none;
  transition: all 0.2s;
}
#vip-code-input:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.25);
}
#vip-submit-btn {
  background: linear-gradient(135deg, #d4af37 0%, #aa8010 100%);
  color: #0f1214;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
#vip-submit-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
#vip-submit-btn:active {
  transform: translateY(0);
}
.vip-error-msg {
  font-size: 12px;
  color: #f87171;
  height: 18px;
  line-height: 18px;
}
.vip-or-divider {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.15);
  text-transform: uppercase;
}
.vip-or-divider::before,
.vip-or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.vip-or-divider::before { margin-right: 8px; }
.vip-or-divider::after { margin-left: 8px; }

/* right panel layout overrides */
.section-vip-card {
  width: 90% !important;
  max-width: 420px !important;
  padding: 20px !important;
  border-radius: 14px !important;
}
.section-vip-card .vip-payment-section {
  flex-direction: column !important;
  gap: 16px !important;
}
.section-vip-card .vip-qr-container {
  flex: 0 0 auto !important;
  width: 130px !important;
  margin: 0 auto !important;
}
.section-vip-card .vip-benefits {
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
}
.section-vip-card .vip-benefits li {
  font-size: 12.5px !important;
  margin-bottom: 6px !important;
}
.section-vip-card .vip-header {
  margin-bottom: 16px !important;
}
.section-vip-card .vip-lock-icon {
  font-size: 32px !important;
  margin-bottom: 6px !important;
}
.section-vip-card .vip-title {
  font-size: 18px !important;
}
.section-vip-card .vip-desc {
  font-size: 12.5px !important;
  margin-bottom: 12px !important;
}
.section-vip-card #vip-code-input {
  padding: 8px 10px !important;
  font-size: 12px !important;
}
.section-vip-card #vip-submit-btn {
  padding: 8px 12px !important;
  font-size: 12px !important;
}

/* ══ 相关资源（资料库 + 阅读器，付费内容）══ */
#resources-panel{display:none;flex:1;flex-direction:column;overflow:hidden;min-height:0;position:relative;background:var(--bg)}
#resources-panel.visible{display:flex}

/* 资料库：文档卡片列表 - 胶囊滑动选择器 */
.res-doctabs{display:flex;gap:12px;flex-wrap:wrap;padding:8px 20px 8px 29px;flex-shrink:0;background:var(--bg);align-items:center;margin-bottom:16px}
.res-segmented-control {
  position: relative;
  display: inline-flex;
  background: var(--sub-control-bg); /* 凹陷的跑道背景 */
  padding: 3px;
  border-radius: 999px;
  gap: 2px;
  align-items: center;
  user-select: none;
  flex-wrap: wrap;
}
.res-segmented-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  background: var(--sub-item-active-bg); /* 选中项：白色卡片/深色卡片 */
  border-radius: 999px;
  box-shadow: var(--sub-item-active-shadow);
  transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), top 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s cubic-bezier(0.4, 0, 0.2, 1), height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none; /* 让鼠标事件穿透到下方的按钮 */
}
.res-doctab {
  position: relative;
  z-index: 2; /* 确保文字在滑块上方 */
  background: transparent !important;
  border: none !important;
  color: var(--text-secondary);
  padding: 5px 15px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  line-height: 1.2;
}
.res-doctab:hover {
  color: var(--text-primary);
}
.res-doctab:active {
  transform: scale(0.95);
}
.res-doctab.active {
  color: var(--text-primary);
  font-weight: 700;
}

/* 阅读器：顶部条 + （目录 | 正文）*/
#res-reader{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;position:relative}
.res-reader-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--card-bg)}
.res-back{font-size:12.5px;font-weight:600;padding:5px 14px;border:none;border-radius:999px;background:var(--sub-btn-bg);color:var(--text-secondary);cursor:pointer;flex-shrink:0;font-family:inherit;white-space:nowrap;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1)}
.res-back:hover{background:var(--sub-btn-hover-bg);color:var(--text-primary);transform:translateY(-2px);box-shadow:var(--sub-btn-shadow)}
.res-back:active{transform:translateY(0) scale(0.96)}
.res-doc-title-bar{font-size:13px;font-weight:700;color:var(--text-primary);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-search{width:110px;flex-shrink:0;font-size:11px;padding:3px 10px;border:1px solid var(--border);border-radius:999px;background:var(--card-inner);color:var(--text-primary);outline:none;font-family:inherit}
.res-search:focus{border-color:var(--accent)}
/* 全部剧本搜索结果列表 */
.res-search-head{position:sticky;top:0;background:var(--card-bg);padding:2px 0 10px;z-index:3}
.res-search-wide{width:100%;font-size:13px;padding:7px 14px}
.res-search-count{font-size:12px;color:var(--text-muted);margin-top:8px;padding-left:2px}
.res-search-results{display:flex;flex-direction:column;gap:1px;padding-bottom:32px}
.res-search-result{display:flex;gap:10px;align-items:baseline;text-align:left;width:100%;background:none;border:none;border-radius:6px;padding:9px 10px;cursor:pointer;font-family:inherit;transition:background .12s}
.res-search-result:hover{background:rgba(var(--ink),.06)}
.res-result-loc{flex-shrink:0;min-width:58px;font-size:11px;font-weight:700;color:var(--accent);font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;white-space:nowrap}
.res-result-text{flex:1;font-size:13px;line-height:1.55;color:var(--text-secondary)}
.res-reader-body{flex:1;display:flex;overflow:hidden;min-height:0;border-radius:14px 14px 0 0}

/* 目录 */
.res-toc{width:56px;flex-shrink:0;overflow-y:auto;border-right:1px solid var(--border);padding:12px 4px 24px;background:var(--card-bg);scrollbar-width:thin;scrollbar-color:rgba(var(--ink),.2) transparent}
.res-toc::-webkit-scrollbar{width:4px}
.res-toc::-webkit-scrollbar-track{background:transparent}
.res-toc::-webkit-scrollbar-thumb{background:rgba(var(--ink),.2);border-radius:2px}
.res-toc::-webkit-scrollbar{width:2px}
.res-toc::-webkit-scrollbar-thumb{background:rgba(var(--ink),.18);border-radius:2px}
.res-toc::-webkit-scrollbar-track{background:transparent}
.res-toc-season-group{margin-bottom:4px}
.res-toc-season-btn{display:block;width:100%;text-align:center;font-size:11px;font-weight:700;color:var(--accent);background:none;border:none;padding:6px 4px;letter-spacing:.03em;cursor:pointer;font-family:inherit;border-radius:5px;transition:color .2s,background-color .2s}
.res-toc-season-btn:hover{background:rgba(var(--ink),.06);color:var(--accent)}
.res-toc-season-group.expanded .res-toc-season-btn{color:var(--accent);font-weight:800}
.res-toc-season-items{display:none}
.res-toc-season-group.expanded .res-toc-season-items{display:block}
.res-toc-season-items .res-toc-item{text-align:center;padding:5px 0}
.res-toc-item{display:block;width:100%;text-align:left;font-size:12px;line-height:1.35;color:var(--text-secondary);padding:5px 8px;border:none;background:none;border-radius:5px;cursor:pointer;font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-toc-item:hover{background:rgba(var(--ink),.06);color:var(--text-primary)}
.res-toc-item.active{background:rgba(var(--ink),.08);color:var(--text-primary);font-weight:600}
.res-toc-empty{font-size:12px;color:var(--text-muted);padding:12px 10px}

/* 正文 */
.res-content{flex:1;overflow-y:auto;padding:16px 22px 48px;min-width:0}
.res-content::-webkit-scrollbar{width:5px}
.res-content::-webkit-scrollbar-thumb{background:rgba(var(--ink),.2);border-radius:2px}
.res-sec-title{font-size:calc(16px * var(--res-fscale,1));font-weight:700;color:var(--text-primary);margin:0 0 14px;line-height:1.4;padding-bottom:10px;border-bottom:1px solid var(--border)}
.res-sec-body p{font-size:calc(14px * var(--res-fscale,1));line-height:1.78;color:var(--text-secondary);margin:0 0 11px;word-break:break-word}
/* 字号调节 / 回到顶部 / 集间互链 */
.res-fontsize{display:flex;gap:4px;flex-shrink:0}
.res-fontsize button{font-size:12px;font-weight:600;padding:4px 12px;border:none;border-radius:999px;background:var(--sub-btn-bg);color:var(--text-secondary);cursor:pointer;font-family:inherit;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1)}
.res-fontsize button:hover{background:var(--sub-btn-hover-bg);color:var(--text-primary);transform:translateY(-2px);box-shadow:var(--sub-btn-shadow)}
.res-fontsize button:active{transform:translateY(0) scale(0.96)}
#res-totop{position:absolute;right:18px;bottom:18px;width:36px;height:36px;border-radius:50%;border:none;background:var(--sub-btn-bg);color:var(--text-secondary);font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:6;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1)}
#res-totop:hover{background:var(--sub-btn-hover-bg);color:var(--text-primary);transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,.22)}
#res-totop:active{transform:translateY(0) scale(0.94)}
.res-sec-head{display:flex;align-items:center;gap:10px;margin-bottom:18px;position:relative;width:100%}
.res-sec-head .res-sec-title{margin:0;padding:0;border:none;flex:0 1 auto;min-width:0}
/* 装饰分隔：用小星星代替横线（mask 让 background-color 透出星形，保持随主题变色）*/
.res-sec-line{flex:1;min-width:18px;height:12px;background-color:rgba(var(--accent-rgb),.55);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='M10 2.2 L10.95 5.05 L13.8 6 L10.95 6.95 L10 9.8 L9.05 6.95 L6.2 6 L9.05 5.05 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x center / 20px 12px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='M10 2.2 L10.95 5.05 L13.8 6 L10.95 6.95 L10 9.8 L9.05 6.95 L6.2 6 L9.05 5.05 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x center / 20px 12px}
.res-sec-line-mid{width:16px;height:12px;flex-shrink:0;background-color:rgba(var(--accent-rgb),.55);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpath d='M7 2.2 L7.95 5.05 L10.8 6 L7.95 6.95 L7 9.8 L6.05 6.95 L3.2 6 L6.05 5.05 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpath d='M7 2.2 L7.95 5.05 L10.8 6 L7.95 6.95 L7 9.8 L6.05 6.95 L3.2 6 L6.05 5.05 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 12px 12px}
/* 字号按钮单独占一行、靠右，不与正文同行 */
.res-font-float{display:flex;justify-content:flex-end;gap:4px;margin:0 0 10px;float:none}
.res-xlink{flex-shrink:0;font-size:10px;font-weight:600;padding:3px 10px;border:none;border-radius:999px;background:var(--sub-btn-bg);color:var(--accent);cursor:pointer;white-space:nowrap;font-family:inherit;margin:0;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1)}
.res-xlink:hover{background:var(--accent-light);color:var(--accent);transform:translateY(-2px);box-shadow:var(--sub-btn-shadow)}
.res-xlink:active{transform:translateY(0) scale(0.96)}
.res-loading{font-size:13px;color:var(--text-muted);padding:24px}
mark.res-hit{background:rgba(245,200,66,.5);color:inherit;border-radius:2px;padding:0 1px}
:root.dark mark.res-hit{background:rgba(212,154,90,.45)}

/* 付费锁里的激活码输入 */
.res-vip-row{display:flex;gap:8px;margin-top:6px;width:100%;max-width:260px}
#res-vip-code{flex:1;min-width:0;font-size:13px;padding:8px 12px;border:1px solid var(--border);border-radius:7px;background:var(--card-inner);color:var(--text-primary);outline:none;font-family:inherit}
#res-vip-code:focus{border-color:var(--accent)}
#res-vip-submit{font-size:13px;font-weight:600;padding:8px 20px;border:none;border-radius:999px;background:var(--accent);color:#fff;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1)}
#res-vip-submit:hover{transform:translateY(-2px);box-shadow:var(--sub-btn-shadow);filter:brightness(1.07)}
#res-vip-submit:active{transform:translateY(0) scale(0.96);box-shadow:none}
.res-vip-error{font-size:12px;color:#d9534f;min-height:16px;margin-top:6px}

/* ── 顶部工具栏：垂直堆叠（明暗、垂直公众号胶囊、风格） ── */
#top-toolbar {
  background: none;
  border: none;
  box-shadow: none;
  gap: 8px;
  align-items: center;
  flex-direction: column;
}
#top-toolbar > * {
  border: none!important;
  background: var(--sub-btn-bg)!important;
  color: var(--sub-btn-color)!important;
  box-shadow: none!important;
  margin: 0 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1)!important;
}
#top-toolbar > *:hover {
  background: var(--sub-btn-hover-bg)!important;
  color: var(--text-primary)!important;
  transform: translateY(-2px)!important;
  box-shadow: var(--sub-btn-shadow)!important;
}
#top-toolbar > *:active {
  transform: translateY(0) scale(0.92)!important;
  box-shadow: none!important;
}
#top-toolbar #follow-wechat {
  border-radius: 999px!important;
  padding: 12px 8px !important;
  font-size: 11.5px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  cursor: default;
}
#top-toolbar #wechat-qr-pop {
  position: absolute;
  top: 50% !important;
  right: 100% !important;
  left: auto !important;
  bottom: auto !important;
  padding-right: 8px;
  padding-top: 0 !important;
  opacity: 0;
  visibility: hidden;
  transform: translate(6px, -50%) !important;
  transition: opacity .15s, transform .15s;
}
#top-toolbar #follow-wechat:hover #wechat-qr-pop {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%) !important;
}
#top-toolbar #btn-style {
  border-radius: 50%!important;
  width: 28px!important;
  height: 28px!important;
  padding: 0!important;
  font-size: 12px;
}
#top-toolbar #btn-theme {
  border-radius: 50%!important;
  width: 28px!important;
  height: 28px!important;
  padding: 0!important;
}

/* ── 搜索台词按钮移到剧集选择右侧 ── */
.ep-selector-top #tab-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 12px !important;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px !important;
  border: none !important;
  background: var(--sub-btn-bg) !important;
  color: var(--sub-btn-color) !important;
  cursor: pointer;
  transition: color .1s, background .1s, box-shadow .1s, transform .12s cubic-bezier(0.4, 0, 0.2, 1) !important;
  height: 24px;
  box-sizing: border-box;
  box-shadow: none !important;
}
.ep-selector-top #tab-search:hover {
  color: var(--text-primary) !important;
  background-color: var(--sub-btn-hover-bg) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--sub-btn-shadow) !important;
}
.ep-selector-top #tab-search:active {
  transform: translateY(0) scale(0.96) !important;
  box-shadow: none !important;
}
.ep-selector-top #tab-search.active {
  background: var(--tab-active) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--sub-item-active-shadow) !important;
}
.ep-selector-top #tab-search svg {
  margin: 0 !important;
}

@container (max-width: 350px) {
  .ep-selector-top #tab-search span {
    display: none;
  }
  .ep-selector-top #tab-search {
    padding: 0 !important;
    width: 24px;
    height: 24px;
  }
}

/* ── 字幕时间轴调节按钮 ── */
/* ── 字幕时间轴调节按钮 (单按钮内嵌 +/-) ── */
.offset-control {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  background: var(--sub-btn-bg);
  border: none;
  color: var(--sub-btn-color);
  border-radius: 999px; /* capsule! */
  height: 28px;
  box-sizing: border-box;
  padding: 0;
  box-shadow: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.offset-control:hover {
  background: var(--sub-btn-hover-bg);
  transform: translateY(-2px);
  box-shadow: var(--sub-btn-shadow);
}

.offset-control:active {
  transform: translateY(0) scale(0.96);
  box-shadow: none;
}

.offset-control.btn-active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), .14);
}

.offset-btn-step {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 700;
  color: rgba(var(--ink), 0.6);
  width: 22px;
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}

.offset-control.btn-active .offset-btn-step {
  color: var(--accent);
}

#btn-offset-dec {
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}

#btn-offset-inc {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

.offset-btn-step:hover {
  background: rgba(var(--ink), 0.08);
  color: var(--text-primary);
}

.offset-control.btn-active .offset-btn-step:hover {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

.offset-btn-step:active {
  background: rgba(var(--ink), 0.15);
}

.offset-control.btn-active .offset-btn-step:active {
  background: rgba(var(--accent-rgb), 0.2);
}

.offset-val {
  font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-weight: 700;
  color: rgba(var(--ink), 0.7);
  padding: 0 5px;
  min-width: 38px;
  text-align: center;
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}

.offset-control.btn-active .offset-val {
  color: var(--accent);
}

.offset-val:hover {
  background: rgba(var(--ink), 0.04);
  color: var(--text-primary);
}

.offset-control.btn-active .offset-val:hover {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
}

/* ── Steaming coffee icon inside spacer ── */
.controls-row .spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.coffee-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--ink), 0.18);            /* 播放时=关灯：沙发变暗 */
  transition: color 0.45s ease, filter 0.45s ease;
}
.coffee-svg { width: 28px; height: 28px; overflow: visible; }
.cup-body, .cup-handle, .cup-saucer { stroke-width: 1.7; vector-effect: non-scaling-stroke; }
.cup-steam { stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 0.8s ease; }

/* ── 播放时：咖啡亮起 + 热气上冒 ── */
.coffee-icon.lights-on {
  color: #e8843a;
  filter: drop-shadow(0 0 3px rgba(232,132,58,0.55)) drop-shadow(0 0 8px rgba(232,132,58,0.30));
  animation: coffee-lights-on 0.5s ease-out;
}
.coffee-icon.lights-on .cup-steam { opacity: 0.75; }
.coffee-icon.lights-on .cup-steam-1 { animation: steam-rise 1.8s ease-in-out infinite; }
.coffee-icon.lights-on .cup-steam-2 { animation: steam-rise 1.8s ease-in-out 0.35s infinite; }
.coffee-icon.lights-on .cup-steam-3 { animation: steam-rise 1.8s ease-in-out 0.7s infinite; }
@keyframes coffee-lights-on {
  0%   { color: rgba(var(--ink),0.18); filter: none; }
  40%  { color: #ffb066; filter: drop-shadow(0 0 6px rgba(232,132,58,0.75)); }
  100% { color: #e8843a; filter: drop-shadow(0 0 3px rgba(232,132,58,0.55)) drop-shadow(0 0 8px rgba(232,132,58,0.30)); }
}
@keyframes steam-rise {
  0%   { opacity: 0;    transform: translateY(0) scaleX(1); }
  30%  { opacity: 0.8;  transform: translateY(-2px) scaleX(1.1); }
  70%  { opacity: 0.5;  transform: translateY(-5px) scaleX(0.9); }
  100% { opacity: 0;    transform: translateY(-8px) scaleX(0.7); }
}

/* ── 打赏弹窗 ── */
.tip-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.tip-overlay.visible { opacity: 1; pointer-events: auto; }
.tip-card {
  background: var(--card-bg, #fff); border-radius: 14px;
  padding: 16px 16px 12px; text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  animation: tip-pop 0.3s cubic-bezier(.34,1.3,.64,1);
}
@keyframes tip-pop { 0%{transform:scale(0.85);opacity:0} 100%{transform:scale(1);opacity:1} }
.tip-card-title {
  font-size: 18px; font-weight: 700; color: var(--text-primary);
  margin-bottom: 16px;
}
.tip-card-qr { width: 300px; height: 300px; border-radius: 10px; margin: 0 auto 16px; display: block; }
.tip-card-sub { font-size: 14px; color: var(--text-muted); line-height: 1.5; }

/* ── 点击咖啡杯 → "friends" 文字飘出 ── */
.friends-pop {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--accent);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.coffee-icon.pop-friends .friends-pop {
  animation: friends-float 1.4s cubic-bezier(.22,.68,.36,1) forwards;
}
@keyframes friends-float {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.7); }
  18%  { opacity: 1; transform: translate(-50%, -140%) scale(1); }
  60%  { opacity: 1; transform: translate(-50%, -170%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -220%) scale(1.05); }
}

#cmd-btn, #clip-cmd { display: none !important; }

/* ── Playback Shortcuts Panel ── */
.shortcuts-container {
  padding: 16px 16px;
  animation: shortcutsFadeIn 0.25s ease-out;
  background: var(--card-bg);
}
.tips-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 14px;
  margin-top: 24px;
  letter-spacing: 0.5px;
}
.tips-section-title:first-child {
  margin-top: 0;
}
.shortcuts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 500px) {
  .shortcuts-grid {
    grid-template-columns: 1fr;
  }
}
.shortcuts-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shortcuts-item {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  padding: 8px 12px;
  background: rgba(var(--ink), 0.03);
  border-radius: 9px;
  border: 1px solid rgba(var(--ink), 0.04);
  transition: background 0.15s;
}
.shortcuts-item:hover {
  background: rgba(var(--ink), 0.05);
}
.shortcuts-key {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  background: var(--bg-card);
  color: var(--accent);
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid rgba(var(--ink), 0.15);
  border-bottom: 3px solid rgba(var(--ink), 0.25);
  box-shadow: 0 2px 3px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  display: inline-block;
  line-height: 1.2;
  flex-shrink: 0;
}
.shortcuts-flat-key {
  font-family: inherit;
  font-size: 12px;
  background: rgba(var(--ink), 0.05);
  border: 1px solid rgba(var(--ink), 0.08);
  border-bottom: 2px solid rgba(var(--ink), 0.12);
  color: var(--text-primary);
  padding: 3px 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
/* Mini controls styled flat like player bar controls */
/* 其他提示里的迷你控件 —— 与播放器真实按钮一致：扁平灰色胶囊（非激活态），无键帽边框/阴影 */
.tips-mini-group {
  display: inline-flex;
  align-items: center;
  background: var(--sub-btn-bg);
  border: none;
  border-radius: 999px;
  padding: 2px 4px;
  box-shadow: none;
}
.tips-mini-btn {
  background: var(--sub-btn-bg);
  border: none;
  color: rgba(var(--ink), 0.55);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
.tips-mini-val {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 500;
  color: rgba(var(--ink), 0.6);
  padding: 0 4px;
  line-height: 1;
}
.tips-mini-time {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  color: rgba(var(--ink), 0.55);
  background: var(--sub-btn-bg);
  border: none;
  padding: 3px 8px;
  border-radius: 999px;
  line-height: 1.1;
  box-shadow: none;
}
.tips-mini-text-btn {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: rgba(var(--ink), 0.55);
  background: var(--sub-btn-bg);
  border: none;
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
/* 跳转上一句/下一句：与控制栏 seek-line-group 一致，两个三角形上下竖排 */
.tips-mini-skip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 0;
  color: rgba(var(--ink), 0.55);
}

.tips-mini-ctrlbtn {
  padding: 4px 6px;
  color: rgba(var(--ink), 0.6);
}
.tips-mini-ctrlbtn svg {
  display: block;
}
/* Tips panel card grid — matches stat-cell look */
.tips-cards-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.tips-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 8px 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  min-height: 78px;
}
.tips-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--ink), 0.55); /* 与控制栏真实按钮的非激活灰一致 */
}
.tips-card-icon svg {
  width: 26px;
  height: 26px;
}
.tips-card-icon .tips-mini-skip svg {
  width: 12px;
  height: 12px;
}
.tips-card-emoji {
  font-size: 20px;
  line-height: 1;
}
.tips-card-label {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.shortcuts-desc {
  font-size: 12px;
  font-weight: 500;
  color: rgba(var(--ink), 0.65);
}
.transcript-panel.show-shortcuts::before {
  display: none !important;
}
@keyframes shortcutsFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}