/* ========== VIDEO LEARNING PAGE v6 — 2-Column Flex ========== */

/* ── Wrapper ── */
.video-wrapper {
    max-width:1100px; margin:0 auto;
    background:rgba(255,255,255,.45); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.55); border-radius:24px; padding:16px 20px;
    box-shadow:0 20px 50px rgba(0,0,0,.06); width:100%; box-sizing:border-box;
}
body.dark-mode .video-wrapper { background:rgba(15,23,42,.7); border-color:rgba(255,255,255,.08); }

/* ── Shell ── */
.video-sticky-shell {
    width:100%; box-sizing:border-box;
    padding:0 24px; max-width:1148px; margin:0 auto; margin-top:20px; margin-bottom: 40px;
}
.video-sticky-shell .video-wrapper {
    padding:16px 20px; border-radius:24px; box-sizing:border-box;
    display:flex; flex-direction:column;
}

/* ── Title ── */
.video-title-bar {
    display:flex; align-items:center; gap:8px; padding:6px 12px;
    background:rgba(255,255,255,.35); border-radius:10px; margin-bottom:10px; flex-wrap:wrap;
}
body.dark-mode .video-title-bar { background:rgba(30,41,59,.35); }
.video-title-badge { display:flex; align-items:center; justify-content:center; min-width:30px; height:30px; background:#4f46e5; color:#fff; border-radius:7px; font-size:.9em; font-weight:800; flex-shrink:0; }
.video-title-heading { font-size:1em; font-weight:800; color:#1e293b; margin:0; flex:1; min-width:0; letter-spacing:-.2px; }
body.dark-mode .video-title-heading { color:#f1f5f9; }
.video-title-meta { font-size:.72em; color:#94a3b8; font-weight:600; flex-shrink:0; }

/* ════════════════ GRID LAYOUT ════════════════ */
.video-grid {
    display:grid;
    grid-template-columns:2.1fr 1fr;
    grid-template-rows:auto auto 180px auto;
    gap:6px;
    flex:1; min-height:0;
}
body.vmode-listen-mode .video-grid {
    grid-template-rows:auto auto auto auto;
}
.video-grid-video      { grid-row:1; grid-column:1; }
.video-grid-controls   { grid-row:2; grid-column:1; margin-top:-2px; }
.video-grid-sublist    { grid-row:1 / 3; grid-column:2; min-height:0; position:relative; }
.video-grid-cursub     { grid-row:3; grid-column:1; min-height:0; display:flex; flex-direction:column; }
.video-grid-mode       { grid-row:4; grid-column:1; min-height:0; display:flex; flex-direction:column; }
.video-grid-modebtns   { grid-row:3; grid-column:2; }

.video-col-left {
    display:contents;
}
.video-col-right {
    display:contents;
}

/* ── Video Player ── */
.video-player-wrap {
    position:relative; width:100%;
    aspect-ratio:16/9; background:#0f172a;
    border-radius:12px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.12);
    border:2px solid rgba(255,255,255,.08); cursor:pointer; flex-shrink:0;
}
.video-player-wrap.cc-covered::after, .video-player-wrap.dict-mode-active::after { content:""; position:absolute; bottom:0; left:0; width:100%; height:18%; background:#000; z-index:10; pointer-events:none; }
#youtube-player,#youtube-player iframe { width:100%; height:100%; border:none; pointer-events:none; }

/* ── Controls Bar ── */
.video-controls-bar {
    display:flex; align-items:center; gap:4px; padding:4px 8px;
    background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.5);
    border-radius:10px; flex-wrap:wrap; flex-shrink:0;
}
body.dark-mode .video-controls-bar { background:rgba(30,41,59,.65); border-color:rgba(255,255,255,.05); }

.video-ctrl-btn {
    background:rgba(255,255,255,.7); border:1px solid rgba(0,0,0,.05); color:#475569;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    padding:5px; border-radius:7px; transition:all .18s; flex-shrink:0; backdrop-filter:blur(4px);
}
.video-ctrl-btn:hover { background:#fff; color:#4f46e5; border-color:rgba(79,70,229,.2); }
.video-ctrl-btn:active { transform:scale(.95); }
body.dark-mode .video-ctrl-btn { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.05); color:#94a3b8; }
body.dark-mode .video-ctrl-btn:hover { background:rgba(255,255,255,.08); color:#a5b4fc; }

#vb-play-pause { background:#4f46e5; color:#fff; border:none; width:30px; height:30px; padding:0; box-shadow:0 3px 10px rgba(79,70,229,.25); }
#vb-play-pause:hover { background:#4338ca; color:#fff; }
body.dark-mode #vb-play-pause { background:#6366f1; }

.video-time-display { font-size:.7em; color:#64748b; font-weight:600; min-width:34px; text-align:center; user-select:none; font-variant-numeric:tabular-nums; }
body.dark-mode .video-time-display { color:#94a3b8; }

/* Progress */
.video-progress-wrap { flex:1; position:relative; min-width:36px; height:16px; display:flex; align-items:center; }
.video-progress { width:100%; -webkit-appearance:none; appearance:none; height:3px; background:rgba(0,0,0,.07); border-radius:2px; outline:none; cursor:pointer; z-index:1; }
.video-progress:hover { height:5px; }
body.dark-mode .video-progress { background:rgba(255,255,255,.06); }
.video-progress::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:11px; height:11px; border-radius:50%; background:#4f46e5; cursor:pointer; box-shadow:0 2px 4px rgba(79,70,229,.25); border:2px solid #fff; }
body.dark-mode .video-progress::-webkit-slider-thumb { border-color:#1e293b; }

/* Note dots */
.progress-notes-layer { position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:2; }
.timeline-note-dot { position:absolute; top:50%; transform:translate(-50%,-50%); width:6px; height:6px; background:#f59e0b; border:1.5px solid #fff; border-radius:50%; cursor:pointer; pointer-events:all; transition:transform .15s; box-shadow:0 0 0 2px rgba(245,158,11,.15); }
.timeline-note-dot:hover { transform:translate(-50%,-50%) scale(1.7); }
body.dark-mode .timeline-note-dot { border-color:#1e293b; }

.note-tooltip { position:fixed; z-index:9999; background:#1e293b; color:#f8fafc; padding:8px 12px; border-radius:8px; font-size:.74em; font-weight:600; pointer-events:none; max-width:220px; line-height:1.4; box-shadow:0 8px 24px rgba(0,0,0,.25); white-space:pre-wrap; word-break:break-word; }
.note-tooltip .note-tip-time { color:#f59e0b; font-size:.85em; margin-bottom:2px; }

/* Speed */
.video-speed-select { font-size:.65em; font-weight:700; padding:3px 2px; border:1px solid rgba(0,0,0,.07); border-radius:6px; background:rgba(255,255,255,.65); color:#475569; cursor:pointer; font-family:inherit; transition:all .18s; backdrop-filter:blur(4px); min-width:44px; }
.video-speed-select:hover { border-color:#4f46e5; }
body.dark-mode .video-speed-select { background:rgba(255,255,255,.04); color:#cbd5e1; border-color:rgba(255,255,255,.07); }

/* CC */
.cc-dropdown-wrap { position:relative; flex-shrink:0; }
.cc-toggle-btn { display:flex; align-items:center; justify-content:center; padding:3px 5px; border:1px solid rgba(0,0,0,.07); border-radius:6px; background:rgba(255,255,255,.65); color:#475569; cursor:pointer; font-size:.65em; font-weight:700; transition:all .18s; backdrop-filter:blur(4px); min-width:28px; }
.cc-toggle-btn:hover { border-color:#4f46e5; color:#4f46e5; }
.cc-toggle-btn.active { background:#eef2ff; color:#4f46e5; border-color:#4f46e5; }
body.dark-mode .cc-toggle-btn { background:rgba(255,255,255,.04); color:#cbd5e1; border-color:rgba(255,255,255,.07); }
body.dark-mode .cc-toggle-btn.active { background:rgba(99,102,241,.12); color:#a5b4fc; border-color:#818cf8; }
.cc-dropdown {
    display:none; position:absolute; top:100%; right:0; margin-top:4px;
    background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:10px;
    padding:4px; min-width:105px; box-shadow:0 10px 30px rgba(0,0,0,.12);
    z-index:9999; flex-direction:column; gap:2px;
}
.cc-dropdown.open { display:flex; }
body.dark-mode .cc-dropdown { background:#1e293b; border-color:rgba(255,255,255,.08); }
.cc-option { padding:6px 10px; border:none; border-radius:7px; background:transparent; color:#475569; font-size:.78em; font-weight:600; cursor:pointer; text-align:left; font-family:inherit; transition:all .12s; }
.cc-option:hover { background:rgba(79,70,229,.06); color:#4f46e5; }
.cc-option.active { background:#eef2ff; color:#4f46e5; font-weight:700; }
body.dark-mode .cc-option { color:#cbd5e1; }
body.dark-mode .cc-option:hover { background:rgba(99,102,241,.1); color:#a5b4fc; }
body.dark-mode .cc-option.active { background:rgba(99,102,241,.15); color:#a5b4fc; }

/* ── Gear Settings Dropdown ── */
.gear-dropdown-wrap { position:relative; flex-shrink:0; }
.gear-toggle-btn {
    display:flex; align-items:center; justify-content:center; padding:3px 5px;
    border:1px solid rgba(0,0,0,.07); border-radius:6px;
    background:rgba(255,255,255,.65); color:#475569; cursor:pointer;
    font-size:.7em; transition:all .18s; backdrop-filter:blur(4px); min-width:28px;
}
.gear-toggle-btn:hover { border-color:#4f46e5; color:#4f46e5; }
body.dark-mode .gear-toggle-btn { background:rgba(255,255,255,.04); color:#cbd5e1; border-color:rgba(255,255,255,.07); }
.gear-dropdown {
    display:none; position:absolute; top:100%; right:0; margin-top:4px;
    background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:10px;
    padding:8px; min-width:180px; box-shadow:0 10px 30px rgba(0,0,0,.12);
    z-index:9999; flex-direction:column; gap:6px;
}
.gear-dropdown.open { display:flex; }
body.dark-mode .gear-dropdown { background:#1e293b; border-color:rgba(255,255,255,.08); }
.gear-row {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    font-size:.72em; font-weight:600; color:#475569;
}
body.dark-mode .gear-row { color:#cbd5e1; }
.gear-row select {
    font-size:.85em; padding:3px 6px; border:1px solid rgba(0,0,0,.1); border-radius:5px;
    background:#f8fafc; color:#334155; font-family:inherit; cursor:pointer; max-width:110px;
}
body.dark-mode .gear-row select { background:#0f172a; color:#e2e8f0; border-color:rgba(255,255,255,.1); }

/* Gear toggle switch */
.gear-toggle { position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0; }
.gear-toggle input { opacity:0; width:0; height:0; }
.gear-slider { position:absolute; inset:0; background:#cbd5e1; border-radius:10px; cursor:pointer; transition:background .2s; }
.gear-slider::before { content:''; position:absolute; width:16px; height:16px; left:2px; bottom:2px; background:#fff; border-radius:50%; transition:transform .2s; }
.gear-toggle input:checked+.gear-slider { background:#4f46e5; }
.gear-toggle input:checked+.gear-slider::before { transform:translateX(16px); }
body.dark-mode .gear-slider { background:#475569; }
body.dark-mode .gear-toggle input:checked+.gear-slider { background:#6366f1; }

/* ════════════════ BILINGUAL SUBTITLE + MODE CONTENT ════════════════ */
/* Current subtitle — always visible, CC-controlled */
.video-current-sub {
    background:rgba(255,255,255,.65); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-radius:10px; padding:16px 16px 12px 16px; text-align:center;
    box-shadow:0 2px 10px rgba(0,0,0,.03);
    height: 180px; box-sizing: border-box; overflow: hidden;
    display:flex; flex-direction:column; justify-content:center; gap:8px;
    border:1px solid rgba(255,255,255,.5); transition:all .2s;
    flex-shrink:0; position:relative; flex:1;
    font-family:'Noto Sans KR','Pretendard',sans-serif;
}
.video-current-sub.cc-off { display:none; }
.video-current-sub.cc-kr .cur-sub-vi { display:none; }
.video-current-sub.cc-kr .cur-sub-next-vi { display:none; }
.video-current-sub.cc-vn .cur-sub-ko { display:none; }
.video-current-sub.cc-vn .cur-sub-next-ko { display:none; }
.video-current-sub.dict-mode-active .cur-sub-vi { display:none !important; }
.video-current-sub.dict-mode-active .cur-sub-next { display:none !important; }

.cur-sub-active { position:relative; z-index:2; transition:transform .3s ease, opacity .3s ease; }
.cur-sub-ko { font-size:1.3em; font-weight:900; color:var(--sub-color, #1e293b); margin-bottom:3px; line-height:var(--sub-spacing, 1.4); cursor:pointer; font-family:var(--sub-font, inherit); }
.cur-sub-ko:hover { color:#4f46e5; }
.cur-sub-vi { font-size:.9em; color:#64748b; font-weight:600; line-height:var(--sub-spacing, 1.4); }

.cur-sub-next { position:absolute; bottom:8px; left:0; right:0; z-index:1; opacity:.55; }
.cur-sub-next-ko { font-size:.9em; font-weight:700; color:#64748b; line-height:1.3; }
.cur-sub-next-vi { display:none; }

/* Slide animation — only on current subtitle, NOT next */
.cur-sub-slide .cur-sub-active { animation:slideUpIn .35s ease; }
@keyframes slideUpIn { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }

body.dark-mode .video-current-sub { background:rgba(30,41,59,.65); border-color:rgba(255,255,255,.06); }
body.dark-mode .cur-sub-ko { color:#f8fafc; }
body.dark-mode .cur-sub-vi { color:#94a3b8; }
body.dark-mode .cur-sub-next-ko { color:#64748b; }
body.dark-mode .cur-sub-next-vi { color:#475569; }

/* Enlarged subtitle in listen mode — fills available space */
.video-current-sub.sub-listen {
    flex:1.2; flex-shrink:1;
    padding:16px 36px 36px 36px; min-height:140px;
    justify-content:flex-start;
}
.video-current-sub.sub-listen .cur-sub-ko { font-size:var(--sub-listen-size, 2.4em); }
.video-current-sub.sub-listen .cur-sub-vi { font-size:1.1em; }
.video-current-sub.sub-listen .cur-sub-next-ko { font-size:1em; }
.video-current-sub.sub-listen .cur-sub-next { bottom:12px; }

/* Mode content area — only visible for speak/dictation/notes */
.video-mode-content { width:100%; }
.video-mode-content:empty-listening { display:none; }
.vmode-pane { display:none; }
.vmode-pane.active { display:block; animation:fadeIn .25s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:translateY(0);} }
/* In listen mode, hide mode-content to give subtitle more space */
.vmode-listen-mode .video-mode-content { flex:0; min-height:0; }
.vmode-listen-mode .video-current-sub { flex:1.2; }
.vmode-listen-mode .video-grid-mode { flex:1; min-height:0; }

/* ── Speak Mode Results ── */
.video-current-sub.speak-mode-active .cur-sub-next { display: none !important; }
.video-current-sub.speak-mode-active #speak-result-in-sub { display: block; }
.speak-result-in-sub {
    display: none;
    font-size: 1.15em;
    color: #64748b;
    margin-top: auto;
    text-align: center;
    line-height: 1.45;
    word-break: keep-all;
    min-height: 32px;
}
body.dark-mode .speak-result-in-sub { color: #94a3b8; }
.speak-mic-pulse {
    width:10px; height:10px; background:#8b5cf6; border-radius:50%;
    animation:pulse 1s infinite; display: inline-block;
}
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(139,92,246,.4);} 70%{box-shadow:0 0 0 8px rgba(139,92,246,0);} 100%{box-shadow:0 0 0 0 rgba(139,92,246,0);} }

/* ── Dictation ── */
.dict-hint { font-size:.72em; font-weight:700; color:#94a3b8; margin-bottom:6px; text-transform:uppercase; }
.dict-target-vi { background:rgba(79,70,229,.04); border:1px solid rgba(79,70,229,.1); border-radius:10px; padding:10px 14px; font-size:.9em; font-weight:700; color:#4338ca; margin-bottom:10px; }
body.dark-mode .dict-target-vi { background:rgba(99,102,241,.1); border-color:rgba(99,102,241,.15); color:#a5b4fc; }
.dict-input { width:100%; box-sizing:border-box; font-size:.92em; font-weight:500; padding:10px 14px; border:2px solid rgba(0,0,0,.08); border-radius:10px; font-family:'Pretendard',sans-serif; color:#1e293b; background:#fff; transition:all .2s; resize:none; min-height:44px; }
.dict-input:focus { border-color:#4f46e5; outline:none; box-shadow:0 0 0 4px rgba(79,70,229,.08); }
body.dark-mode .dict-input { background:#0f172a; color:#f1f5f9; border-color:rgba(255,255,255,.08); }
.dict-input.correct { border-color:#22c55e!important; background:#f0fdf4!important; }
.dict-input.incorrect { border-color:#ef4444!important; background:#fef2f2!important; }
body.dark-mode .dict-input.correct { background:rgba(34,197,94,.1)!important; }
body.dark-mode .dict-input.incorrect { background:rgba(239,68,68,.1)!important; }
.dict-check-btn { padding:8px 18px; background:#4f46e5; color:#fff; border:none; border-radius:10px; font-size:.84em; font-weight:700; cursor:pointer; font-family:inherit; transition:all .2s; box-shadow:0 3px 10px rgba(79,70,229,.2); }
.dict-check-btn:hover { background:#4338ca; transform:translateY(-1px); }
.dict-result { margin-top:8px; font-size:.84em; line-height:1.5; }
.dict-result .correct-char { color:#16a34a; font-weight:700; }
.dict-result .incorrect-char { color:#dc2626; font-weight:700; text-decoration:underline wavy; }
.dict-result .missing-char { color:#f59e0b; font-weight:600; }
.dict-score { font-size:.92em; font-weight:800; color:#4f46e5; }
.diff-line { padding:6px 10px; border-radius:6px; margin-bottom:4px; font-family:'Pretendard',monospace; font-size:.82em; }
.diff-line.original { background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; }
body.dark-mode .diff-line.original { background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.15); color:#86efac; }
.diff-line.user-input { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
body.dark-mode .diff-line.user-input { background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.15); color:#fca5a5; }

/* ── Dictation New UI ── */
.dict-reveal-eye { position:absolute; top:50%; right:10px; transform:translateY(-50%); background:rgba(255,255,255,.8); border:1px solid rgba(0,0,0,.1); border-radius:8px; padding:4px 8px; font-size:1.1em; cursor:pointer; box-shadow:0 2px 5px rgba(0,0,0,.1); transition:all .2s; z-index:5; }
.dict-reveal-eye:hover { background:#fff; transform:translateY(-50%) scale(1.05); }
body.dark-mode .dict-reveal-eye { background:rgba(30,41,59,.9); border-color:rgba(255,255,255,.1); }
.dict-hidden-text { filter:blur(5px); user-select:none; transition:filter .3s; }
.dict-hidden-text.revealed { filter:none; user-select:text; }
.dict-blank-input { display:inline-block; margin:0 3px; font-family:inherit; border:none; background:transparent; outline:none; transition:all .2s; min-width:40px; text-align:center; cursor:text; border-bottom:2px solid transparent; }
.dict-blank-input:empty::before { content:"___"; color:#94a3b8; letter-spacing:1px; }
.dict-blank-input:focus { border-bottom:2px solid #4f46e5; background:rgba(79,70,229,.05); border-radius:4px; }
.dict-blank-input.correct { color:#10b981; pointer-events:none; font-weight:700; border-bottom:none; }
.dict-blank-input.incorrect { color:#ef4444; }
body.dark-mode .dict-blank-input:empty::before { color:#64748b; }
body.dark-mode .dict-blank-input:focus { background:rgba(99,102,241,.15); }

.dict-btn-big { display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 20px; font-size:.9em; font-weight:800; border-radius:12px; cursor:pointer; font-family:inherit; transition:all .2s; border:none; box-shadow:0 4px 12px rgba(0,0,0,.08); }
.dict-btn-big:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.12); }
.dict-btn-big:active { transform:translateY(1px); }
.dict-btn-primary { background:linear-gradient(135deg, #4f46e5, #6366f1); color:#fff; }
.dict-btn-primary:hover { background:linear-gradient(135deg, #4338ca, #4f46e5); }
.dict-btn-secondary { background:#f8fafc; color:#475569; border:1px solid #e2e8f0; }
.dict-btn-secondary:hover { background:#fff; color:#4f46e5; border-color:#cbd5e1; }
body.dark-mode .dict-btn-secondary { background:rgba(30,41,59,.8); color:#cbd5e1; border-color:rgba(255,255,255,.1); }
body.dark-mode .dict-btn-secondary:hover { background:rgba(30,41,59,1); color:#fff; }
.dict-btn-big .icon { font-size:1.15em; }

/* ── Notes ── */
.notes-add-area { display:flex; gap:6px; margin-bottom:10px; }
.notes-input { flex:1; box-sizing:border-box; font-size:.82em; font-weight:500; padding:7px 10px; border:2px solid rgba(0,0,0,.08); border-radius:8px; font-family:inherit; color:#1e293b; background:#fff; transition:all .2s; resize:none; min-height:36px; }
.notes-input:focus { border-color:#4f46e5; outline:none; box-shadow:0 0 0 3px rgba(79,70,229,.08); }
body.dark-mode .notes-input { background:#0f172a; color:#f1f5f9; border-color:rgba(255,255,255,.08); }
.notes-add-btn { padding:7px 14px; background:#4f46e5; color:#fff; border:none; border-radius:8px; font-size:.8em; font-weight:700; cursor:pointer; font-family:inherit; transition:all .2s; flex-shrink:0; }
.notes-add-btn:hover { background:#4338ca; }
.notes-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.notes-list::-webkit-scrollbar { width:3px; }
.notes-list::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1); border-radius:10px; }
body.dark-mode .notes-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); }
.note-card { background:#fffbeb; border:1px solid #fef3c7; border-radius:8px; padding:8px 12px; font-size:.8em; color:#78350f; position:relative; line-height:1.45; }
body.dark-mode .note-card { background:rgba(251,191,36,.08); border-color:rgba(251,191,36,.15); color:#fde68a; }
.note-card .note-time { font-size:.7em; font-weight:700; color:#f59e0b; margin-bottom:3px; cursor:pointer; }
.note-card .note-time:hover { text-decoration:underline; }
.note-card .note-sub-ko { font-size:.78em; color:#92400e; margin-bottom:3px; font-weight:500; }
body.dark-mode .note-card .note-sub-ko { color:#fbbf24; }
.note-card .note-delete { position:absolute; top:4px; right:6px; background:none; border:none; cursor:pointer; font-size:.9em; color:#d97706; opacity:.5; transition:opacity .15s; }
.note-card .note-delete:hover { opacity:1; }
.practice-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#94a3b8; text-align:center; gap:6px; font-size:.82em; padding:20px 12px; }
.practice-empty .empty-icon { font-size:2.4em; opacity:.5; }

/* ════════════════ 4 ROUND ACTION BUTTONS (inside speak pane) ════════════════ */
.video-actions-row { display:flex; justify-content:center; gap:24px; flex-shrink:0; padding:10px 0 2px; }
.vact-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; }
.vact-btn {
    width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(0,0,0,.08);
    background:rgba(255,255,255,.75); color:#475569; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all .2s; backdrop-filter:blur(6px); padding:0;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.vact-btn:hover { background:#fff; border-color:#4f46e5; color:#4f46e5; box-shadow:0 4px 14px rgba(79,70,229,.15); transform:translateY(-2px); }
.vact-btn:active { transform:scale(.92); }
.vact-btn.active { background:#eef2ff; border-color:#4f46e5; color:#4f46e5; box-shadow:0 2px 8px rgba(79,70,229,.12); }
body.dark-mode .vact-btn { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); color:#94a3b8; }
body.dark-mode .vact-btn:hover { background:rgba(255,255,255,.1); border-color:#818cf8; color:#a5b4fc; }
body.dark-mode .vact-btn.active { background:rgba(99,102,241,.15); border-color:#818cf8; color:#a5b4fc; }
.vact-icon { font-size:1.1em; line-height:1; display:flex; align-items:center; justify-content:center; }
.vact-icon svg { display:block; }
.vact-label { font-size:.65em; color:#94a3b8; font-weight:600; white-space:nowrap; }
body.dark-mode .vact-label { color:#64748b; }

/* ════════════════ RIGHT COLUMN: SUBTITLE LIST ════════════════ */
.subtitle-panel {
    background:rgba(255,255,255,.6); border:1px solid rgba(0,0,0,.06);
    border-radius:14px; overflow:hidden; display:flex; flex-direction:column;
    backdrop-filter:blur(4px); height:100%;
}
@media (min-width: 1101px) {
    .subtitle-panel { position:absolute; top:0; left:0; right:0; bottom:0; height:auto; }
}
body.dark-mode .subtitle-panel { background:rgba(30,41,59,.55); border-color:rgba(255,255,255,.06); }

.subtitle-header { display:flex; align-items:center; gap:4px; padding:8px 10px; border-bottom:1px solid rgba(0,0,0,.06); flex-shrink:0; }
body.dark-mode .subtitle-header { border-color:rgba(255,255,255,.06); }
.subtitle-search { flex:1; font-size:.72em; font-weight:500; padding:5px 6px 5px 24px; border:1px solid rgba(0,0,0,.08); border-radius:6px; background:rgba(255,255,255,.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") 6px center no-repeat; color:#475569; font-family:inherit; transition:all .2s; min-width:0; }
.subtitle-search:focus { border-color:#4f46e5; outline:none; box-shadow:0 0 0 3px rgba(79,70,229,.08); }
body.dark-mode .subtitle-search { background-color:rgba(255,255,255,.05); color:#e2e8f0; border-color:rgba(255,255,255,.08); }
.sub-header-btn { flex-shrink:0; width:26px; height:26px; border:1px solid rgba(0,0,0,.08); border-radius:6px; background:transparent; font-size:.8em; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; opacity:.5; color:#64748b; }
.sub-header-btn:hover { opacity:1; background:rgba(0,0,0,.04); }
.sub-header-btn.active { opacity:1; color:#f59e0b; background:rgba(245,158,11,.1); border-color:#f59e0b; }
body.dark-mode .sub-header-btn { border-color:rgba(255,255,255,.1); color:#94a3b8; }
body.dark-mode .sub-header-btn.active { color:#fbbf24; background:rgba(251,191,36,.1); border-color:#fbbf24; }

.subtitle-footer { padding:4px 10px; border-top:1px solid rgba(0,0,0,.04); font-size:.64em; font-weight:600; color:#94a3b8; display:flex; align-items:center; gap:6px; flex-shrink:0; }
body.dark-mode .subtitle-footer { border-color:rgba(255,255,255,.04); }

.subtitle-list { flex:1; overflow-y:auto; padding:2px 0; scroll-behavior:smooth; min-height:0; }
.subtitle-list::-webkit-scrollbar { width:3px; }
.subtitle-list::-webkit-scrollbar-thumb { background:rgba(0,0,0,.08); border-radius:10px; }
body.dark-mode .subtitle-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); }

.sub-item { display:flex; align-items:flex-start; gap:5px; padding:5px 26px 5px 10px; cursor:pointer; border-left:3px solid transparent; transition:all .15s; position:relative; }
.sub-item+.sub-item { border-top:1px solid rgba(0,0,0,.03); }
body.dark-mode .sub-item+.sub-item { border-top-color:rgba(255,255,255,.03); }
.sub-item:hover { background:rgba(79,70,229,.04); }
.sub-item.active { background:rgba(79,70,229,.06); border-left-color:#4f46e5; }
body.dark-mode .sub-item.active { background:rgba(99,102,241,.1); border-left-color:#818cf8; }
.sub-idx { font-size:.62em; font-weight:800; color:#94a3b8; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.03); border-radius:4px; flex-shrink:0; }
.sub-item.active .sub-idx { background:#4f46e5; color:#fff; }
.sub-time { font-size:.68em; color:#94a3b8; font-weight:600; min-width:34px; flex-shrink:0; font-variant-numeric:tabular-nums; padding-top:1px; }
.sub-item.active .sub-time { color:#4f46e5; }
.sub-text-wrap { flex:1; min-width:0; }
.sub-ko { font-size:.85em; font-weight:600; color:#1e293b; line-height:1.45; word-break:keep-all; cursor:text; }
body.dark-mode .sub-ko { color:#f1f5f9; }
.sub-vi { font-size:.74em; color:#64748b; line-height:1.35; margin-top:1px; }
body.dark-mode .sub-vi { color:#94a3b8; }

.subtitle-list.eye-hidden .sub-text-wrap { visibility:hidden; }

.sub-star { position:absolute; top:4px; right:4px; width:20px; height:20px; border:none; border-radius:4px; background:transparent; color:#cbd5e1; font-size:.72em; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; padding:0; opacity:0; z-index:2; }
.sub-item:hover .sub-star,.sub-item.saved .sub-star { opacity:1; }
.sub-star:hover { color:#f59e0b; background:rgba(245,158,11,.1); transform:scale(1.2); }
.sub-star.active { opacity:1; color:#f59e0b; }
body.dark-mode .sub-star { color:#64748b; }
body.dark-mode .sub-star.active { color:#fbbf24; }
.sub-item.saved { background:rgba(245,158,11,.03); }
body.dark-mode .sub-item.saved { background:rgba(251,191,36,.05); }
.sub-item.filtered-out { display:none; }

/* ════════════════ 2x2 MODE BUTTONS (right col bottom) ════════════════ */
.mode-grid-2x2 { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:8px; flex-shrink:0; height: 180px; }
.mbtn-card {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; padding:12px 6px; background:rgba(255,255,255,.6);
    border:2px solid rgba(0,0,0,.06); border-radius:14px;
    cursor:pointer; font-family:inherit; transition:all .2s; backdrop-filter:blur(4px);
}
.mbtn-card:hover { border-color:rgba(79,70,229,.2); box-shadow:0 6px 20px rgba(79,70,229,.08); transform:translateY(-2px); }
.mbtn-card:active { transform:scale(.97); }
.mbtn-card.active { background:#4f46e5; border-color:#4f46e5; box-shadow:0 6px 20px rgba(79,70,229,.3); }
body.dark-mode .mbtn-card { background:rgba(30,41,59,.55); border-color:rgba(255,255,255,.06); }
body.dark-mode .mbtn-card:hover { border-color:rgba(99,102,241,.3); }
body.dark-mode .mbtn-card.active { background:#6366f1; border-color:#6366f1; }
.mbtn-icon { font-size:1.7em; line-height:1; transition:transform .2s; display:flex; align-items:center; justify-content:center; }
.mbtn-icon svg { display:block; stroke:#475569; transition:stroke .2s; }
.mbtn-card.active .mbtn-icon svg { stroke:#fff; }
.mbtn-card:hover .mbtn-icon { transform:scale(1.1); }
.mbtn-label { font-size:.82em; font-weight:800; color:#475569; text-align:center; line-height:1.3; transition:color .2s; }
.mbtn-card.active .mbtn-label { color:#fff; }
body.dark-mode .mbtn-label { color:#cbd5e1; }
body.dark-mode .mbtn-card.active .mbtn-label { color:#fff; }

/* ── Hero (home.html) ── */
.video-hero-wrap { position:relative; border-radius:20px; overflow:hidden; margin-bottom:24px; box-shadow:0 8px 32px rgba(79,70,229,.12); }
.video-hero { position:relative; z-index:1; background:linear-gradient(135deg,#1e1b4b 0%,#3730a3 30%,#5b21b6 65%,#9d174d 100%); padding:28px 32px; display:flex; align-items:center; gap:18px; }
.video-hero::after { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events:none; opacity:.5; }
.video-hero h1 { font-size:1.45em; font-weight:900; letter-spacing:-.4px; color:#fff; margin:0 0 4px; }
.video-hero p { color:rgba(255,255,255,.7); font-size:.88em; margin:0; font-weight:500; }
.video-hero-badge { display:flex; align-items:center; justify-content:center; min-width:52px; height:52px; background:rgba(255,255,255,.15); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2); border-radius:14px; font-size:1.4em; font-weight:900; color:#fff; flex-shrink:0; }
.video-hero-text { flex:1; min-width:0; }
.video-hero-meta { display:flex; gap:14px; margin-top:8px; }
.video-hero-meta span { display:flex; align-items:center; gap:5px; font-size:.78em; color:rgba(255,255,255,.55); font-weight:500; }
.video-hero-progress { display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }
.video-hero-progress-bar { width:80px; height:4px; background:rgba(255,255,255,.15); border-radius:2px; overflow:hidden; }
.video-hero-progress-fill { height:100%; background:#a78bfa; border-radius:2px; transition:width .3s; }

/* ── Home cards ── */
.video-lesson-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.video-lesson-card { background:rgba(255,255,255,.7); border:1px solid rgba(0,0,0,.06); border-radius:18px; overflow:hidden; cursor:pointer; transition:all .25s; text-decoration:none; color:inherit; display:flex; flex-direction:column; backdrop-filter:blur(4px); }
.video-lesson-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.1); border-color:rgba(79,70,229,.15); }
.video-lesson-card:active { transform:scale(.98); }
body.dark-mode .video-lesson-card { background:rgba(30,41,59,.6); border-color:rgba(255,255,255,.06); }
.video-lesson-card .card-thumb { aspect-ratio:16/10; background:linear-gradient(135deg,#3730a3,#5b21b6); display:flex; align-items:center; justify-content:center; font-size:2.8em; position:relative; }
.video-lesson-card:nth-child(2n) .card-thumb { background:linear-gradient(135deg,#1e40af,#7e22ce); }
.video-lesson-card:nth-child(3n) .card-thumb { background:linear-gradient(135deg,#6d28d9,#be185d); }
.video-lesson-card .card-thumb::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.3),transparent 50%); opacity:0; transition:opacity .2s; }
.video-lesson-card:hover .card-thumb::after { opacity:1; }
.video-lesson-card .card-play-icon { position:absolute; width:48px; height:48px; background:rgba(255,255,255,.2); backdrop-filter:blur(6px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.6em; opacity:0; transform:scale(.8); transition:all .25s; }
.video-lesson-card:hover .card-play-icon { opacity:1; transform:scale(1); }
.video-lesson-card .card-body { padding:16px 20px; }
.video-lesson-card .card-title { font-weight:800; font-size:1.05em; color:#1e293b; margin-bottom:6px; }
body.dark-mode .video-lesson-card .card-title { color:#f1f5f9; }
.video-lesson-card .card-meta { font-size:.8em; color:#94a3b8; display:flex; gap:12px; align-items:center; font-weight:500; }
.video-lesson-card-wrap { position:relative; }
.video-lesson-card-wrap .card-admin-actions { position:absolute; top:10px; right:10px; display:flex; gap:6px; z-index:5; opacity:0; transition:opacity .2s; }
.video-lesson-card-wrap:hover .card-admin-actions { opacity:1; }
.card-admin-btn { width:32px; height:32px; border:1px solid rgba(0,0,0,.1); border-radius:8px; background:rgba(255,255,255,.85); backdrop-filter:blur(4px); cursor:pointer; font-size:.9em; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.card-admin-btn:hover { transform:scale(1.1); }
.card-admin-btn.edit:hover { background:#eff6ff; border-color:#3b82f6; }
.card-admin-btn.delete:hover { background:#fef2f2; border-color:#ef4444; }
body.dark-mode .card-admin-btn { background:rgba(30,41,59,.85); border-color:rgba(255,255,255,.1); }

/* ── Hide mobile bottom nav on desktop ── */
@media (min-width: 769px) {
    .mobile-bottom-nav { display: none; }
}

/* ── Responsive ── */
@media (max-width:1100px) {
    .video-grid {
        grid-template-columns:1fr;
        grid-template-rows:auto auto auto auto auto;
    }
    .video-grid-video      { grid-row:1; grid-column:1; }
    .video-grid-controls   { grid-row:2; grid-column:1; }
    .video-grid-sublist    { grid-row:3; grid-column:1; max-height:280px; }
    .video-grid-cursub     { grid-row:4; grid-column:1; }
    .video-grid-modebtns   { grid-row:5; grid-column:1; }
    .video-grid-mode       { grid-row:6; grid-column:1; }
    .video-grid-modebtns .mode-grid-2x2 { grid-template-columns:repeat(4,1fr); grid-template-rows:auto; }
}
@media (max-width:991px) {
    .video-sticky-shell { position:static!important; height:auto!important; overflow:visible!important; }
}
@media (max-width:768px) {
    body {
        padding: 0 !important; margin: 0 !important; overflow: hidden !important;
        display: flex !important; flex-direction: column !important;
        box-sizing: border-box;
        height: 100vh; /* fallback cho browser cũ */
        height: 100dvh; /* dynamic viewport — JS important inline style sẽ ghi đè */
        min-height: 0 !important; /* dập min-height:100vh từ base.css */
    }
    html {
        margin: 0; padding: 0;
        height: 100vh;
        height: 100dvh;
    }

    /* Ẩn lớp gradient phía trên gây khoảng trống lớn */
    .top-gradient-mask { display: none !important; }

    /* Navbar sát lên trên, margin nhỏ gọn */
    .global-nav { position: relative !important; top: 0 !important; flex-shrink: 0 !important; margin: 4px 8px 0 8px !important; width: auto !important; border-radius: 12px !important; }

    .video-sticky-shell { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; padding: 0 !important; margin: 6px 0 0 0 !important; overflow: hidden; flex: 1; display: flex; flex-direction: column; min-height: 0; }
    .video-wrapper { padding: 0 !important; border: none !important; border-radius: 0 !important; margin: 0 !important; flex: 1; display: flex; flex-direction: column; min-height: 0; }

    /* Chiều cao thanh 5 tab — tỷ lệ theo % chiều cao màn hình thực (100dvh đã tự trừ thanh địa chỉ trình duyệt), có chặn trên/dưới cho máy quá ngắn/quá dài, cộng vùng an toàn home-indicator iPhone */
    :root { --mobile-nav-h: calc(clamp(50px, 8vh, 74px) + env(safe-area-inset-bottom)); }

    .video-grid { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 0; overflow: hidden; }

    /* ═══ TOP: Fixed video ═══ */
    .video-grid-video { order: 1; flex-shrink: 0; }
    .video-player-wrap { border-radius: 0 !important; border: none !important; }

    /* ═══ TOP: Compact controls bar ═══ */
    .video-grid-controls {
        order: 2;
        flex-shrink: 0; padding: 5px 8px;
        background: #fff; z-index: 10;
        border-bottom: 1px solid #e2e8f0;
    }
    body.dark-mode .video-grid-controls { background: #0f172a; border-bottom-color: #334155; }

    .video-controls-bar { padding: 0; gap: 3px; flex-wrap: nowrap; align-items: center; }
    .video-ctrl-btn { padding: 4px; border-radius: 6px; }
    .video-ctrl-btn svg { display: block; }
    #vb-play-pause { width: 26px; height: 26px; flex-shrink: 0; }
    .video-time-display { font-size: 0.6em; min-width: 26px; }
    .video-speed-select { font-size: 0.58em; padding: 2px 1px; min-width: 36px; }
    .cc-toggle-btn { padding: 2px 3px; font-size: 0.58em; }
    .cc-toggle-btn svg { width: 14px; height: 14px; }
    .gear-toggle-btn { padding: 2px 3px; font-size: 0.58em; }
    .video-progress-wrap { min-width: 24px; height: 14px; }

    /* Hide desktop 2x2 mode buttons */
    .video-grid-modebtns { display: none !important; }

    /* ═══ MIDDLE: Scrollable content (padding-bottom for bottom nav) ═══ */
    /* max-height: none — clears the 280px cap inherited from the @media(max-width:1100px) rule above */
    .video-grid-sublist { order: 3; display: none; max-height: none; }
    .video-grid-cursub { order: 4; flex-shrink: 0; }

    .video-current-sub {
        height: auto; min-height: 90px; max-height: 150px;
        padding: 10px 14px; border-radius: 0; border-left: none; border-right: none;
    }
    .video-current-sub .cur-sub-ko { font-size: 1.1em; }
    .video-current-sub .cur-sub-vi { font-size: 0.82em; }

    .video-grid-mode {
        order: 6;
        flex: 1; overflow-y: auto; min-height: 0;
        display: flex; flex-direction: column;
        padding: 8px 10px;
    }

    /* ── SUBLIST MODE (Phụ đề tab): chỉ hiện full list script, lấp đầy từ dưới thanh video xuống tận thanh 5 tab ── */
    .video-grid.show-sublist .video-grid-sublist {
        display: flex; flex-direction: column; flex: 1;
        overflow-y: auto; min-height: 0; max-height: none;
    }
    .video-grid.show-sublist .video-grid-cursub { display: none !important; }
    .video-grid.show-sublist .video-grid-mode { display: none !important; }
    .video-grid.show-sublist .subtitle-list { padding-bottom: 10px; } /* small breathing room; bar space already reserved on .video-grid */
    .subtitle-panel { border-radius: 0; border: none; height: 100%; }

    /* ── LISTEN MODE: mở rộng subtitle, ẩn mode content ── */
    .video-grid.vmode-listen-mode .video-grid-mode {
        flex: 0; overflow: hidden; padding: 0; min-height: 0;
    }
    .video-grid.vmode-listen-mode .video-mode-content { display: none; }
    .video-grid.vmode-listen-mode .video-grid-cursub { flex: 1; display: flex; }

    .video-current-sub.sub-listen {
        flex: 1; height: auto; min-height: auto; max-height: none;
        padding: 10px 18px 40px 18px; justify-content: flex-start; gap: 0;
    }
    .video-current-sub.sub-listen .cur-sub-ko { font-size: var(--sub-listen-size, 1.6em); }
    .video-current-sub.sub-listen .cur-sub-vi { font-size: 0.92em; }
    .video-current-sub.sub-listen .cur-sub-next-ko { font-size: 0.82em; }
    .video-current-sub.sub-listen .cur-sub-next { bottom: 14px; }

    /* Dictation sizing */
    .dict-actions-big {
        flex-wrap: wrap; gap: 8px;
        display: flex; justify-content: center;
        margin-top: 12px;
    }
    .dict-btn-big { font-size: 0.85em; padding: 8px 12px; }

    /* Extra bottom padding no longer needed */
    .video-grid-mode:has(#mode-dictation.active) { padding-bottom: 0 !important; }

    /* Speak-mode subtitle — same box size as dictation, so switching tabs doesn't shift the layout */
    .video-current-sub.speak-mode-active {
        min-height: 160px !important;
        padding-bottom: 50px !important;
    }

    /* Same top offset as .dict-actions-big so prev/next/mic/loop buttons sit at the same position as the dictation buttons */
    .video-actions-row {
        margin-top: 12px;
        padding: 0;
    }

    /* Dictation subtitle — more height for input + hint spacing */
    .video-current-sub.dict-mode-active {
        min-height: 160px !important;
        padding-bottom: 50px !important;
    }

    /* Dictation VI hint — compact bulb icon */
    .dict-hint-label {
        color: #64748b; position: absolute; left: 0; top: 2px;
        display: flex; align-items: center;
    }
    .dict-vi-hint-wrapper {
        font-size: 0.75em !important;
        bottom: 8px !important;
        left: 14px !important;
        right: 14px !important;
    }

    /* ═══ BOTTOM TAB BAR: đặt cuối cùng trong flex column bằng "order" (KHÔNG dùng position:fixed) — .video-grid phía trên là flex:1 nên đẩy thanh này nằm sát đáy màn hình một cách tự nhiên qua layout flow bình thường, không bị lỗi thanh địa chỉ trình duyệt che khuất như position:fixed hay gặp trên Safari iOS / webview ═══ */
    .mobile-bottom-nav {
        display: flex;
        order: 1; /* .video-grid không set order = mặc định 0, nên nav luôn render sau nó */
        flex-shrink: 0;
        height: var(--mobile-nav-h);
        box-sizing: border-box;
        justify-content: space-around; align-items: center;
        background: rgba(255,255,255,0.97);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid rgba(0,0,0,0.07);
        padding: 6px 0 calc(5px + env(safe-area-inset-bottom)) 0;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
    }
    body.dark-mode .mobile-bottom-nav { background: rgba(15,23,42,0.97); border-color: rgba(255,255,255,0.08); }

    .mobile-tab-btn {
        background: none; border: none;
        display: flex; flex-direction: column; align-items: center;
        gap: 2px; color: #94a3b8;
        font-size: 0.66em; font-weight: 600;
        padding: 3px 2px; cursor: pointer;
        transition: color 0.18s, transform 0.18s;
        min-width: 0; flex: 1; max-width: 72px;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-tab-btn svg { width: 20px; height: 20px; transition: transform 0.18s; }
    .mobile-tab-btn span { white-space: nowrap; line-height: 1.2; }
    .mobile-tab-btn.active { color: #4f46e5; }
    .mobile-tab-btn.active svg { transform: scale(1.1); }
    .mobile-tab-btn:active { transform: scale(0.9); }
    body.dark-mode .mobile-tab-btn { color: #64748b; }
    body.dark-mode .mobile-tab-btn.active { color: #818cf8; }
}
@media (max-width:600px) {
    .video-controls-bar { flex-wrap: wrap; row-gap: 5px; }
    .video-progress-wrap { width: 100%; min-width: 60px; order: 10; }
    .video-title-heading { font-size:.88em; }
    .mode-grid-2x2 { gap:5px; }
}