:root{color-scheme:dark;--bg:#0b0f18;--panel:#151b28;--panel2:#1a2332;--line:#2b3648;--ink:#f3f7ff;--muted:#9caec4;--accent:#49d9b6;--accent2:#91ebd4;--accent-bg:#183c39;--orange:#f7be72;--radius:17px;font-family:Inter,"Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(900px 500px at 80% -100px,#20324965,transparent),var(--bg);margin:0;color:var(--ink);line-height:1.55}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app-shell{max-width:1570px;margin:auto;padding:0 28px}.topbar{height:81px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#64efd2,#249887);display:grid;place-items:center;font-weight:900;font-size:24px;color:#092a2b}.brand strong{font-size:22px;letter-spacing:-.9px}.brand-end{color:var(--accent)}.brand small{display:block;font-size:9px;letter-spacing:2.5px;color:var(--muted);font-weight:750}.topright{display:flex;align-items:center;gap:25px}.top-chip{font-size:12px;color:#b8c7d9}.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5edbaf;margin-right:6px;box-shadow:0 0 0 4px #5edbaf1f}.icon-link{font-size:13px;border:1px solid var(--line);padding:9px 13px;border-radius:9px;color:#d6e4ef}.intro{padding:30px 0 26px;display:flex;justify-content:space-between;align-items:end;gap:26px}.eyebrow,.tiny-label{color:var(--accent);letter-spacing:1.7px;font-size:10px;font-weight:800}.intro h1{font-size:clamp(26px,3.1vw,39px);margin:6px 0 5px;font-weight:800;letter-spacing:-1.5px}.intro h1 span{color:var(--accent)}.intro p{color:var(--muted);font-size:13px;margin:0;max-width:740px}.intro p b{color:#e7f7ff}.progress-pane{min-width:218px;width:230px}.progress-num{text-align:right;font-size:27px;font-weight:800;line-height:1.1}.progress-num .muted{font-size:12px;color:var(--muted);font-weight:500}.progress-track{background:#2c3747;border-radius:100px;height:6px;margin:12px 0 6px;overflow:hidden}.progress-track i{display:block;width:0%;height:100%;background:linear-gradient(90deg,#39cfba,#b5f7de);transition:width .2s}.progress-pane small{display:block;font-size:10px;color:var(--muted);text-align:right}.workspace{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(360px,0.86fr);align-items:start;gap:21px}.left-column,.right-column{display:flex;flex-direction:column;gap:19px;min-width:0}.panel{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);overflow:hidden;box-shadow:0 13px 35px #00000018}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:19px 21px 17px}.panel-heading h2{font-size:16px;font-weight:760;letter-spacing:-.25px;margin:3px 0 0}.pill{display:inline-flex;align-items:center;gap:6px;background:var(--accent-bg);color:var(--accent2);font-size:11px;padding:6px 10px;border-radius:100px;white-space:nowrap}.pill.pale{background:#222e3d;color:#b8c8d9}.pill.warn{background:#3b2d24;color:#f8c18e}.dot-sep{color:#56747a}.video-frame{width:calc(100% - 30px);aspect-ratio:16/9;background:#0a0d13;margin:0 auto;position:relative;border-radius:10px;overflow:hidden;min-height:210px}#youtube-player,#youtube-player iframe{width:100%;height:100%;position:absolute;inset:0}.video-loading{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,#273a43,#101925 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;pointer-events:none}.loading-icon{display:grid;place-items:center;width:66px;height:66px;font-size:24px;background:#d9fff128;color:#78f0cf;border:1px solid #7ceac055;border-radius:50%}.video-loading p{margin:10px 0 0;font-weight:700}.video-loading small{font-size:12px;color:var(--muted)}.video-loading.hidden{display:none}.timingline{padding:12px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}.timingline .tiny-label{font-size:9px}.current-time{margin-left:auto;font-variant-numeric:tabular-nums;font-size:13px;color:#ecf4fc;font-weight:700}.subtitle-panel{text-align:center;padding:16px 22px 20px;min-height:139px}.caption-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#8da5b6;font-size:9px;letter-spacing:1.1px;margin-bottom:15px}.caption-head span:nth-child(2){color:#deba7f;text-align:right;font-size:10px;letter-spacing:0}.japanese-line{font-size:20px;line-height:1.55;font-weight:680;min-height:35px}.japanese-line rt{font-size:9px;color:#a8decf;font-weight:400}.vietnamese-line{color:#b0c4d8;font-size:13px;margin-top:9px}.player-controls{padding:15px 17px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;align-items:center}.btn{background:#252f40;border:1px solid #3c4b60;color:#ecf2f8;border-radius:9px;padding:9px 12px;font-size:12px;font-weight:650;white-space:nowrap}.btn:hover{background:#304056}.control-primary{background:var(--accent);border-color:var(--accent);color:#073a34}.control-primary:hover{background:#8bebd6}.speed-control{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}select{background:#243246;border-radius:8px;padding:7px;color:#eef4f9;border:1px solid #3b4a62}.switch-text{color:#a7bacc;font-size:11px;white-space:nowrap;display:flex;align-items:center;gap:6px}.switch-text input,.view-settings input{accent-color:var(--accent)}.chapter-grid{padding:0 15px 8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.chapter-item{background:#202a3b;border:1px solid #344055;border-radius:11px;text-align:left;padding:13px;color:#e7eff8;min-height:93px}.chapter-item:hover{border-color:var(--accent)}.chapter-item strong{display:block;font-size:12px}.chapter-item .tm{color:var(--accent);display:block;font-size:11px;margin-top:7px;font-weight:700}.chapter-item small{font-size:10px;color:#9cafc7;display:block;margin-top:5px;line-height:1.35}.subtle-note{padding:0 18px 16px;font-size:11px;color:#a7b7cb;line-height:1.5}.tool-desc{margin:0 21px 15px;color:#b3c2d5;font-size:12px}.selected-panel{margin:0 20px 15px;border-radius:10px;padding:12px 14px;background:#101d27;border:1px solid #2e4552}.selected-panel #selectedText{margin-top:6px;font-size:14px;line-height:1.7}.timestamp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 20px 12px}.timestamp-grid label,.lookup-label{display:block;font-size:11px;color:#acbfd3}.timestamp-grid input,.lookup-label input{display:block;margin-top:6px;width:100%;border:1px solid #3b4960;border-radius:8px;color:#e7f2fd;background:#202c3c;padding:10px}.marker-actions{padding:0 20px;display:flex;flex-wrap:wrap;gap:8px}.accent-btn{background:#1d4f48;border-color:#388775;color:#b7f9df}.accent-btn:hover{background:#2b6e62}.shortcut-tip{color:#899cb0;font-size:11px;margin:14px 20px}kbd{background:#2b3b4c;padding:2px 5px;border-radius:4px;font-size:11px;color:#fff}.import-box{margin:12px 20px;padding:15px;background:#202c3d;border:1px dashed #547082;border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:10px}.import-box strong{font-size:12px;display:block}.import-box small{display:block;font-size:11px;color:#aabed2;margin-top:4px;line-height:1.5}.file-btn{display:inline-flex;align-items:center;justify-content:center}.export-actions{display:flex;flex-wrap:wrap;padding:5px 20px 20px;gap:8px}.danger-quiet{color:#eeb6b8}.toast{color:#8bedc3;font-size:12px;padding:0 20px 14px;min-height:10px}.transcript-panel{overflow:hidden}.transcripts-title{padding-bottom:15px}.count-bubble{display:grid;place-items:center;border-radius:9px;background:#263447;color:#c2d4e7;font-size:11px;font-weight:700;width:34px;height:30px}.tabs{display:flex;border-bottom:1px solid var(--line);padding:0 20px;gap:18px}.tab{color:#95aabf;border:0;border-bottom:2px solid transparent;padding:0 1px 12px;background:transparent;font-size:13px;font-weight:700}.tab.active{color:var(--accent);border-color:var(--accent)}.tab span{font-size:10px;background:#2b3c4f;padding:2px 5px;border-radius:100px}.search-bar{margin:13px 15px 0;background:#202b3a;border:1px solid #344156;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:10px}.search-bar span{font-size:22px;color:#8ca5b5}.search-bar input{border:none;outline:none;background:none;color:#f4f7fc;min-width:0;width:100%;height:39px;font-size:12px}.search-bar button{border:0;background:none;color:#aab7c9;font-size:19px}.view-settings{display:flex;align-items:center;gap:14px;padding:12px 19px;color:#bed0dd;font-size:11px;flex-wrap:wrap}.view-settings label{white-space:nowrap}.list-scroller{max-height:725px;overflow:auto;padding:0 12px 14px;scrollbar-width:thin;scrollbar-color:#4b6072 transparent}.section-label{padding:15px 11px 9px;font-size:10px;font-weight:800;letter-spacing:.35px;color:#74d8c6}.cue{padding:13px 13px 12px;border:1px solid transparent;border-radius:11px;position:relative;transition:background .1s;cursor:pointer}.cue:hover{background:#212c3c}.cue.active{background:#1e3742;border-color:#3a7f81}.cue + .cue{border-top:1px solid #ffffff0a}.cue-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}.cue .index{font-size:11px;font-weight:800;color:#89a2ba}.cue-time{color:#9daec1;background:#202d3e;border-radius:6px;padding:3px 7px;font-size:10px;font-variant-numeric:tabular-nums}.cue-time.synced{color:#abefd1;background:#244b43}.cue-ja{font-size:15px;color:#f1f6fa;line-height:1.85;font-weight:550;word-break:break-word}.cue-ja rt{font-size:9px;line-height:1;color:#81dcca}.cue-vi{font-size:12px;color:#aebfd2;line-height:1.65;margin-top:6px}.word-token{display:inline;border:0;color:inherit;background:transparent;margin:0;padding:0 1px;text-align:inherit;font-size:inherit;line-height:inherit;font-family:inherit;cursor:pointer;border-radius:3px}.word-token:hover{color:#8ff4d4;background:#33625755}.word-token ruby{ruby-position:over}.word-token rt{font-size:9px}.cue-footer{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:9px;color:#8298ae;font-size:10px}.cue-footer span{font-size:10px}.cue-footer button{font-size:11px;border:1px solid #3d5364;border-radius:6px;background:#233746;color:#b9e8e4;padding:4px 8px}.cue-footer button:hover{background:#2f5c56}.dictionary-panel{padding-bottom:14px}.look-icon{color:var(--accent);font-size:23px;font-weight:800}.dictionary-placeholder{padding:4px 20px 13px;color:#a5b8ca;font-size:12px}.word-top{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:0 20px}.word-written{font-size:28px;font-weight:800}.word-reading{font-size:13px;color:#abdbd0}.lookup-label{padding:10px 20px}.word-context{border-top:1px solid var(--line);margin:10px 20px 0;padding-top:10px;font-size:12px;color:#afc2d8}.saved-heading{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;font-weight:700;font-size:12px}.saved-word{border-bottom:1px solid var(--line);padding:12px 14px;display:flex;justify-content:space-between;gap:12px}.saved-word strong{display:block;font-size:16px}.saved-word small{display:block;color:#9adac9}.saved-word em{display:block;color:#b8cadd;font-style:normal;font-size:12px}.tiny-btn{font-size:10px;padding:6px 9px}footer{text-align:center;margin:26px 0;color:#8194ac;font-size:11px}footer a{color:#86d7d0}.empty{padding:22px;color:#9bb0c6;font-size:12px;text-align:center}
@media(max-width:1000px){.workspace{grid-template-columns:1fr}.right-column{display:grid;grid-template-columns:1fr minmax(240px,.5fr);align-items:start}.list-scroller{max-height:570px}.dictionary-panel{position:sticky;top:12px}}
@media(max-width:700px){.app-shell{padding:0 12px}.topbar{height:69px}.brand strong{font-size:19px}.top-chip{display:none}.intro{display:block;padding:20px 0}.intro h1{font-size:28px}.progress-pane{margin-top:16px;width:100%}.progress-num{text-align:left}.progress-pane small{text-align:left}.right-column{display:flex}.panel-heading{padding:16px}.video-frame{width:calc(100% - 22px);min-height:0}.player-controls{gap:8px}.speed-control{margin-left:0}.chapter-grid{grid-template-columns:1fr 1fr}.subtitle-panel{padding:15px}.japanese-line{font-size:18px}.import-box{flex-direction:column;align-items:start}.import-box .file-btn{width:100%}.list-scroller{max-height:620px}.topright{gap:5px}.icon-link{font-size:11px;padding:7px}.progress-pane{min-width:0}.pill{font-size:10px}.panel-heading h2{font-size:14px}}

/* Interactive linguistic annotations */
.grammar-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.grammar-chip{padding:4px 8px;border-radius:7px;border:1px solid #426582;background:#21374e;color:#d8e8fc;font:600 11px/1.4 inherit;cursor:pointer;letter-spacing:0}
.grammar-chip:hover,.grammar-chip:focus-visible{border-color:#78dcca;background:#26495d;color:#adfae4}
.live-grammar{justify-content:center;margin-top:12px}
.word-token.review{border-bottom:1px dotted #ffc47e;color:#f2d9a4}
.word-token{border-bottom:1px solid transparent}
.word-token:hover{border-bottom-color:#9df9d8}
.dictionary-panel{scroll-margin-top:10px}
.dictionary-panel .word-written{overflow-wrap:anywhere}
.source-advice{display:block;color:#aebdd0;font-size:11px;margin:0 20px 12px}
@media (max-width:640px){.grammar-chip{padding:5px 7px;font-size:10px}.live-grammar{justify-content:flex-start}.japanese-line{font-size:18px}}

/* V4: Tra từ/ngữ pháp dưới dạng popup sát từ được chọn. */
.lookup-hint{margin:0 16px 10px;padding:8px 11px;border-radius:9px;background:#1b2936;color:#a4c6cd;font-size:11px;line-height:1.5}
.word-token{border-bottom:1px dotted #5a8d91;transition:background .12s,border-color .12s;padding:1px 1px 0}
.word-token.grammar-annotated{border-bottom:2px dotted #81dcd1}
.word-token:hover,.word-token:focus-visible{color:#98f9d6;background:#3a5c6b66;border-radius:3px}
.lexical-popup[hidden]{display:none!important}
.lexical-popup{position:fixed;z-index:10000;width:328px;max-height:min(520px,calc(100dvh - 24px));overflow:auto;background:#f8fafc;color:#132032;border:1px solid #c5ded9;box-shadow:0 18px 60px #000a;border-radius:14px;padding:13px 15px 15px;text-align:left;line-height:1.48;animation:popIn .13s ease-out}
@keyframes popIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.lookup-popup-top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#64798c;letter-spacing:.7px;font-size:10px;font-weight:800}
.popup-close{border:0;color:#334155;background:#e9eef4;border-radius:7px;font-size:21px;width:28px;height:28px;line-height:1;display:grid;place-items:center}
.popup-close:hover{background:#d2e7e0}
.popup-tabs{display:flex;gap:4px;background:#e6edf1;padding:3px;border-radius:9px;margin:7px 0 11px}
.popup-tabs[hidden]{display:none}
.popup-tabs button{flex:1;background:transparent;color:#5e6e81;border:0;padding:7px 8px;font-size:12px;font-weight:700;border-radius:7px}
.popup-tabs button.active{background:#fff;color:#0a7461;box-shadow:0 1px 4px #0002}
.popup-word{font-size:23px;font-weight:790;letter-spacing:-.3px;overflow-wrap:anywhere;margin:3px 0}
.popup-reading{font-size:12px;color:#087d71;font-weight:650;margin-top:2px}
.popup-meaning{font-size:14px;font-weight:550;margin:11px 0 9px;color:#1e293b;white-space:pre-wrap;overflow-wrap:anywhere}
.popup-context,.popup-grammar-context{font-size:11px;background:#ecf3f6;border-radius:8px;color:#52677b;padding:9px;max-height:84px;overflow:auto;overflow-wrap:anywhere}
.popup-save{border:1px solid #86cec0;background:#d8f4eb;color:#087564;border-radius:8px;padding:8px 12px;margin-top:10px;font-size:12px;font-weight:700}
.popup-save:hover{background:#c6ebdf}
.popup-grammar-more{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.grammar-option{border:1px solid #d3dde6;background:#edf2f7;border-radius:7px;padding:5px 7px;font-size:11px;color:#344054}
.grammar-option.chosen{background:#ddf5ec;color:#087564;border-color:#76bdac}
@media(max-width:599px){.lexical-popup.mobile-pop{width:auto!important;max-height:min(68dvh,470px);border-radius:17px;box-shadow:0 -14px 48px #000b}.lexical-popup .popup-word{font-size:22px}}