*{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; } :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; } 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 28px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:opacity .15s} .upload-btn:hover{opacity:.85} #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:26px;right:6px;bottom:20px;left:6px;width:auto;height:auto} #player{width:100%;display:block;aspect-ratio:16/9;object-fit:contain;background:var(--card-bg)} /* ── Phone shell (portrait fit & fill) ────────────────── */ .video-wrapper.portrait-mode, .video-wrapper.portrait-fill{ background:#1c1c1e; border-radius:40px; padding:26px 6px 20px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 0 0 2px #3a3a3c, 0 0 0 5px #1e1e1e, 0 0 0 6px #444, 0 28px 90px rgba(0,0,0,.85); margin:4px auto; width:fit-content; align-self:center; } /* Dynamic Island / notch */ .video-wrapper.portrait-mode::before, .video-wrapper.portrait-fill::before{ content:'';position:absolute;top:9px;left:50%;transform:translateX(-50%); width:72px;height:5px;background:#3a3a3c;border-radius:3px;z-index:10;pointer-events:none; } /* Home indicator */ .video-wrapper.portrait-mode::after, .video-wrapper.portrait-fill::after{ content:'';position:absolute;bottom:7px;left:50%;transform:translateX(-50%); width:90px;height:4px;background:rgba(255,255,255,.28);border-radius:2px;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 - 46px) * 9/16); } .video-wrapper.portrait-mode #player{ aspect-ratio:9/16;width:100%; height:calc(52vh - 46px); border-radius:6px;object-fit:contain;background:#000; } .video-wrapper.portrait-fill #player{ aspect-ratio:9/16;width:100%; height:calc(52vh - 46px); border-radius:6px;object-fit:cover;background:#000; } /* 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:rgba(var(--ink),.06);border:1px solid rgba(var(--ink),.10);border-bottom:2px solid rgba(var(--ink),.15);color:rgba(var(--ink),.6);cursor:pointer;padding:5px 7px;border-radius:7px;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s,border-color .15s,box-shadow .15s;flex-shrink:0;box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.06)} .ctrl-btn:hover{color:var(--text-primary);background:rgba(var(--ink),.12);border-color:rgba(var(--ink),.16)} .ctrl-btn:active{border-bottom-width:1px;transform:translateY(1px);box-shadow:none} .ctrl-btn svg{display:block;width:24px;height:24px} #btn-play{padding-left:3px} #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} #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{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{opacity:.5} .fav-btn:hover{opacity:1;color:var(--accent)} .transcript-line.faved .fav-btn{opacity:1;color:var(--accent)} .fav-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:transparent;border:1px solid var(--border);color:var(--text-secondary);padding:3px 12px;border-radius:7px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s} .ntab:hover{color:var(--text-primary);border-color:var(--border)} .ntab.active{background:var(--tab-active);color:var(--text-primary);border-color:var(--border)} .ntab-minor{font-size:11px;padding:2px 8px;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(--card-inner);border:1px solid var(--border);border-radius:999px;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:2px 8px;transition:all .15s} .fav-jump:hover{border-color:var(--accent);background:var(--accent-light)} .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)} .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-sub{font-size:11.5px;line-height:1.7;color:rgba(255,255,255,.5)} /* ── 中央咖啡馆元素：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.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 14px;border-radius:5px;border:1px solid var(--border);background:var(--card-inner);color:rgba(var(--ink),.3);cursor:pointer;transition:all .15s;font-family:inherit;letter-spacing:.02em} .clip-btn{display:none;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:5px;border:1px solid var(--border);background:var(--card-inner);color:var(--text-muted);cursor:pointer;margin-right:6px;font-family:inherit;letter-spacing:.02em;transition:all .15s;opacity:.85} .clip-btn.visible{display:inline-flex} .clip-btn:hover{color:var(--text-primary);border-color:var(--border);opacity:1} .clip-btn.recording{border-color:#c04a4a;background:rgba(192,74,74,.14);color:#c04a4a;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);color:#fff;border-color:var(--accent)} .dict-toggle-btn.dict-listen{background:var(--text-secondary);color:#fff;border-color:var(--text-secondary)} .speaker-filter-chip{display:none;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 8px 3px 10px;border-radius:5px;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 8px 3px 10px;border-radius:5px;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 8px 3px 10px;border-radius:5px;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,.97);z-index:-1} /* 听音中：整块视频区盖成纯黑，不再用 clip-path 抠洞露出底部画面 */ .video-wrapper:not(.portrait-mode):not(.portrait-fill) .audio-only-overlay.dict-listen-state::before{clip-path:none} .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{display:none} /* Pitch contour canvas */ #pitch-canvas{position:absolute;bottom:0;left:0;width:100%;height:40%;pointer-events:none;z-index:1} .video-wrapper:not(.portrait-mode):not(.portrait-fill) .audio-only-overlay.dict-listen-state #pitch-canvas{bottom:calc(12px + 22.5%)} .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)} /* ── Right Panel ─────────────────────────────────────────────── */ .right-panel{flex:1;min-width:240px;display:flex;flex-direction:column;height:100vh;background:var(--bg);overflow:hidden;position:relative} .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:8px 20px 2px 0} .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:all .15s;background:rgba(var(--ink),.05);border:1px solid rgba(var(--ink),.08);border-bottom:2px solid rgba(var(--ink),.13);border-radius:8px;padding:7px 16px;box-shadow:0 1px 2px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.06)} .panel-title:hover{color:var(--text-primary);background:rgba(var(--ink),.10);border-color:rgba(var(--ink),.16)} .panel-title:active{border-bottom-width:1px;transform:translateY(1px);box-shadow:none} .panel-title.sect-active{font-size:16px;font-weight:700;color:var(--text-primary);background:var(--bg-card);border:1px solid rgba(var(--ink),.12);border-bottom:2px solid rgba(var(--ink),.18);box-shadow:0 1px 3px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.08)} /* 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-editor.is-empty::before{content:attr(data-placeholder);color:rgba(156,143,122,.45);font-size:11.5px;pointer-events:none;display:block;white-space:pre-line;line-height:2.4} .note-ts-btn{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;background:var(--card-bg);border:1px solid var(--border);border-radius:999px;font-size:10px;font-weight:500;color:var(--text-muted);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 .15s;user-select:none;line-height:1.6} .note-ts-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-light)} /* 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:2px 7px;background:none;border:1px solid var(--border);border-radius:6px;font-size:12px;font-style:normal;font-weight:500;color:var(--text-muted);font-family:inherit;letter-spacing:0;cursor:pointer;transition:all .15s;outline:none;opacity:.7;transform:scale(.72);transform-origin:100% 100%} #btn-export-pdf:hover{color:var(--accent);border-color:var(--accent)} /* 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} #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(--text-muted);background:none;border:1px solid var(--border);border-radius:5px;padding:3px 8px;cursor:pointer;font-family:inherit;transition:all .15s} .quiz-regen:hover{color:var(--accent);border-color:var(--accent)} .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 12px;border-radius:6px;border:1px solid var(--border);background:var(--card-inner);cursor:pointer;transition:all .12s;font-family:inherit;color:var(--text-secondary)} .quiz-opt:hover:not([disabled]){border-color:var(--accent);color:var(--accent);background:rgba(var(--accent-rgb),.08)} .quiz-opt.correct{background:rgba(var(--accent-rgb),.15)!important;border-color:var(--accent)!important;color:var(--accent)!important} .quiz-opt.wrong{background:rgba(192,74,74,.1)!important;border-color:#c04a4a!important;color:#c04a4a!important} .quiz-opt.reveal{background:rgba(var(--accent-rgb),.08)!important;border-color: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:1px 7px;background:var(--card-bg);border:1px solid var(--border);border-radius:999px;font-size:10px;font-weight:500;color:var(--text-muted);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 .15s;margin-left:auto} .quiz-ts-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-light)} .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-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:transparent;border:1px solid var(--border);color:var(--text-secondary);padding:3px 10px;border-radius:7px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s} .tab:hover{color:var(--text-primary);border-color:var(--border)} .tab.active{background:var(--tab-active);color:var(--text-primary);border-color:var(--border)} .filter{background:transparent;border:1px solid var(--border);color:var(--text-muted);padding:2px 8px;border-radius:999px;font-size:8px;font-weight:500;font-family:inherit;cursor:pointer;transition:all .15s} .filter:hover{color:var(--text-secondary)} .filter.active{color:var(--text-primary);border-color:var(--text-secondary);background:var(--card-inner)} /* 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} .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} .scene-jump-btn{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;background:var(--card-bg);border:1px solid var(--border);border-radius:999px;font-size:10px;font-weight:500;color:var(--text-muted);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 .15s} .scene-jump-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-light)} .card.card-active .scene-jump-btn{border-color:var(--accent);color:var(--accent)} .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;align-items:stretch;border:1px solid var(--border);border-radius:8px;background:var(--card-bg);box-shadow:0 1px 5px rgba(0,0,0,.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:0!important;background:none!important;margin:0!important;transform:none!important;box-shadow:none!important;opacity:1!important;font-size:12.5px;font-weight:500;font-family:inherit;font-style:normal;letter-spacing:0;line-height:1;padding:6px 12px;color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s;-webkit-tap-highlight-color:transparent;outline:none} #top-toolbar > * + *{border-left:1px solid var(--border)!important} /* 分段分隔线 */ #top-toolbar > *:first-child{border-top-left-radius:7px;border-bottom-left-radius:7px} #top-toolbar > *:last-child{border-top-right-radius:7px;border-bottom-right-radius:7px} #top-toolbar > *:hover{background:rgba(var(--ink),.07)!important;color:var(--text-primary)} /* 搜索台词：默认不高亮，只有打开搜索面板（.active）时才高亮 */ #top-toolbar #tab-search.active{background:var(--tab-active)!important;color:var(--text-primary)} /* 关注公众号：悬浮弹二维码，需相对定位作锚点；本身不是点击按钮 */ #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} .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:48px 20px;text-align:center;color:var(--text-muted);font-size:13px;line-height:1.8;background:var(--card-bg)} /* ── 暗色模式（夜间），降低夜间使用时的亮度 ───────────────────── */ :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; } :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; } /* 行高亮在暗色下减弱，避免夜间刺眼 */ :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)} /* “听音中”按钮：暗色下用深底白字，避免浅底白字看不清 */ :root.dark .dict-toggle-btn.dict-listen{background:rgba(var(--accent-rgb),.25);border-color:rgba(var(--accent-rgb),.25);color:#fff} /* 暗色下词卡 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:4px 7px;border-radius:6px;border:1px solid var(--border);background:none;color:var(--text-muted);cursor:pointer;transition:all .15s;outline:none;-webkit-tap-highlight-color:transparent;opacity:.7} #btn-theme:hover{color:var(--accent);border-color:var(--accent)} #btn-theme:focus,#btn-theme:focus-visible{outline:none;box-shadow:none} #btn-style{font-size:15px;line-height:1;padding:3px 5px;border-radius:6px;border:1px solid var(--border);background:none;cursor:pointer;transition:all .15s;outline:none;-webkit-tap-highlight-color:transparent;opacity:.75} #btn-style:hover{border-color:var(--accent);opacity:1} #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:transparent;border:1px solid var(--border);color:var(--text-secondary);padding:3px 10px;border-radius:7px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s} .atab:hover{color:var(--text-primary);border-color:var(--border)} .atab.active{background:var(--tab-active);color:var(--text-primary);border-color:var(--border)} #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; gap: 3px; margin-right: 8px; align-items: center; } .sub-toggle-btn { background: rgba(var(--ink), 0.06); border: 1px solid rgba(var(--ink), 0.10); border-bottom: 2px solid rgba(var(--ink), 0.15); padding: 5px 13px; font-size: 13px; font-weight: 500; color: rgba(var(--ink), 0.6); border-radius: 7px; cursor: pointer; transition: all 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.06); } .sub-toggle-btn:hover { color: var(--text-primary); background: rgba(var(--ink), 0.10); border-color: rgba(var(--ink), 0.16); } .sub-toggle-btn:active { border-bottom-width: 1px; transform: translateY(1px); box-shadow: none; } .sub-toggle-btn.active { background: var(--bg-card); color: var(--text-primary); border: 1px solid rgba(var(--ink), 0.14); border-bottom: 2px solid rgba(var(--ink), 0.20); box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.08); } /* Subtitle Font-Size Adjustments */ .sub-size-group { display: inline-flex; gap: 3px; margin-right: 8px; align-items: center; } .sub-size-btn { background: rgba(var(--ink), 0.06); border: 1px solid rgba(var(--ink), 0.10); border-bottom: 2px solid rgba(var(--ink), 0.15); padding: 5px 11px; font-size: 13px; font-weight: 500; color: rgba(var(--ink), 0.6); border-radius: 7px; cursor: pointer; transition: all 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.06); } .sub-size-btn:hover { color: var(--text-primary); background: rgba(var(--ink), 0.10); border-color: rgba(var(--ink), 0.16); } .sub-size-btn:active { border-bottom-width: 1px; transform: translateY(1px); box-shadow: none; } .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: #ffffff; 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: #ffffff; 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 - 46px) !important; background: #000 !important; } .video-wrapper.portrait-mode #player { height: calc(52vh - 46px) !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 - 46px + 64px) !important; background: #000 !important; } .video-wrapper.portrait-fill #player { height: calc(52vh - 46px) !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))} /* 退化版全屏：原生 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"); } /* ── 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:1px 6px;border-radius:4px} .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 { position: absolute; inset: 0; z-index: 50; /* 半透明 + 轻微模糊：让用户「隐约看到」底下已做好的内容（勾起付费欲）， 但读不清、用不了——必须付费解锁。 */ background: rgba(var(--ink), 0.03); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: auto; } :root.dark .section-lock-overlay { background: rgba(15, 18, 20, 0.18); } .section-lock-overlay.unlocked { opacity: 0; pointer-events: 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} /* 资料库：文档卡片列表 */ /* 三份资料：横向二级标签（同 .analysis-subtabs / .atab 风格）*/ .res-doctabs{display:flex;gap:7px;flex-wrap:wrap;padding:5px 20px 8px 29px;flex-shrink:0;background:var(--bg);align-items:center} .res-doctab{background:transparent;border:1px solid var(--border);color:var(--text-secondary);padding:4px 12px;border-radius:7px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s;white-space:nowrap} .res-doctab:hover{color:var(--text-primary);border-color:var(--border)} .res-doctab.active{background:var(--tab-active);color:var(--text-primary);border-color:var(--border)} /* 阅读器：顶部条 + （目录 | 正文）*/ #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 10px;border:1px solid var(--border);border-radius:6px;background:var(--card-inner);color:var(--text-secondary);cursor:pointer;flex-shrink:0;font-family:inherit;white-space:nowrap} .res-back:hover{border-color:var(--accent);color:var(--text-primary)} .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:120px;flex-shrink:0;font-size:11.5px;padding:4px 10px;border:1px solid var(--border);border-radius:999px;background:var(--card-inner);color:var(--text-primary);outline:none;font-family:inherit;margin-left:auto} .res-search:focus{border-color:var(--accent)} .res-reader-body{flex:1;display:flex;overflow:hidden;min-height:0} /* 目录 */ .res-toc{width:56px;flex-shrink:0;overflow-y:auto;border-right:1px solid var(--border);padding:8px 4px 24px;background:var(--card-bg)} .res-toc::-webkit-scrollbar{width:4px} .res-toc::-webkit-scrollbar-thumb{background:rgba(var(--ink),.2);border-radius:2px} .res-toc-season{position:sticky;top:0;font-size:11px;font-weight:700;color:var(--accent);background:var(--card-bg);padding:6px 8px 3px;letter-spacing:.03em} .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:var(--accent);color:#fff;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 8px;border:1px solid var(--border);border-radius:6px;background:var(--card-inner);color:var(--text-secondary);cursor:pointer;font-family:inherit} .res-fontsize button:hover{border-color:var(--accent);color:var(--text-primary)} #res-totop{position:absolute;right:18px;bottom:18px;width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--card-bg);color:var(--text-secondary);font-size:18px;cursor:pointer;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(0,0,0,.18);z-index:6} #res-totop:hover{border-color:var(--accent);color:var(--text-primary)} .res-sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)} .res-sec-head .res-sec-title{margin:0;padding:0;border:none} .res-sec-tools{display:flex;align-items:center;gap:10px;flex-shrink:0} /* 字号按钮单独占一行、靠右，不与正文同行 */ .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:2px 7px;border:1px solid var(--accent);border-radius:999px;background:transparent;color:var(--accent);cursor:pointer;white-space:nowrap;font-family:inherit;margin-top:2px} .res-xlink:hover{background:var(--accent);color:#fff} .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 16px;border:none;border-radius:7px;background:var(--accent);color:#fff;cursor:pointer;font-family:inherit;white-space:nowrap} .res-vip-error{font-size:12px;color:#d9534f;min-height:16px;margin-top:6px}