/* ==========================================================================
   HSK Base — Stylesheet
   - Core layout + table styling
   - Toolbar, filters, and UI overlays
   - Section comments added for maintainability
   ========================================================================== */
h1{text-align:center;font-size:2em;color:#1a1a2e;border-bottom:none;padding-bottom:0}
.subtitle{text-align:center;color:#666;margin-bottom:20px}
html.preload,body.preload{background:#fff}
body.preload{opacity:1;pointer-events:auto}
body.preload *{transition:none!important}
body{background:#fff;color:#1a1a2e}
#toolbar{border-bottom-width:0!important;border-bottom-style:none!important}
body.dark #toolbar{border-bottom-width:0!important;border-bottom-style:none!important}
body.sepia #toolbar{border-bottom-width:0!important;border-bottom-style:none!important}

/* ── Performance: skip offscreen layout/paint ───────────────────────── */
.toc,
.grp-wrap,
table,
#filtered-view{
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

.virt-hidden{display:none!important}
.virt-spacer td{padding:0!important;border:none!important;height:0!important}

@supports (content-visibility: auto) {
  .grp-wrap { content-visibility: auto; contain-intrinsic-size: 800px 600px; }
}
body:not(.dark):not(.sepia) .grp-wrap { content-visibility: visible; contain-intrinsic-size: auto; }
h2.pos-group{background:#1a1a2e;color:#fff;padding:10px 16px;margin:30px 0 10px;border-radius:6px}
/* Hide section wrappers when flat filtered view is active */
body.flat-view h2.pos-group,body.flat-view h3.phonetic-group,body.flat-view .grp-wrap{display:none!important}
h2.pos-group .pos-zh{font-size:.7em;opacity:.7;margin-left:8px}
h3.phonetic-group{background:#f0f0f0;padding:6px 14px;margin:8px 0 4px;font-size:.9em;color:#444;border-left:4px solid #e94560}
.comp{font-size:1.1em;font-weight:bold;color:#1a1a2e}
/* ===== Vocabulary table ===== */
table{width:100%;border-collapse:collapse;margin-bottom:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}
thead tr{background:#e94560;color:#fff}
th,td{padding:8px 10px;border:1px solid #ddd;vertical-align:top}
tr:nth-child(even){background:#f9f9f9}
.rownum{color:#999;font-size:.8em;text-align:center}
.zh{font-size:1.6em;font-weight:bold;color:#1a1a2e}
.py{font-size:.8em;color:#666;margin-top:2px}
.ex-zh{font-size:1em;color:#333}
.ex-py{font-size:.8em;color:#888;margin-top:2px}
.trans-cell,.ex-td,.ex-cell,[data-col="trans"],[data-col="ex"]{overflow-wrap:normal;word-break:normal;hyphens:none}
.trans-cell{position:relative;padding-left:30px}
.drag-handle{
  position:absolute;
  left:8px;
  top:8px;
  width:16px;
  height:16px;
  border-radius:4px;
  border:1px solid #cfcfd6;
  background:#f4f4f8;
  color:#666;
  font-size:9px;
  line-height:14px;
  text-align:center;
  cursor:grab;
  user-select:none;
  padding:0;
}
.drag-handle:active{cursor:grabbing}
.gnote{font-size:.8em;background:#fff8e1;border-left:3px solid #f9a825;padding:6px 8px;margin-top:6px}
.no-sent{color:#ccc}
/* ===== Contents / TOC ===== */
.toc{background:#fff;border:1px solid #ddd;padding:12px 20px;margin-bottom:24px;border-radius:6px}
.toc h3{margin:0 0 8px}
.toc a{display:inline-block;margin:3px 8px;color:#1a1a2e;text-decoration:none;font-size:.9em}
.toc a:hover{color:#e94560}
.toc-count{color:#999;font-size:.85em}

.cb-col{width:30px;text-align:center;padding:4px 6px}
.cb-cell{text-align:center;vertical-align:middle;padding:4px 6px;width:30px}
.learn-cb{width:16px;height:16px;cursor:pointer;accent-color:#2ecc71}
#learned-section{background:#f5fff5;border-top:3px solid #2ecc71;padding:20px 0;margin-top:40px}
#learned-section h2{color:#27ae60;border-bottom:2px solid #2ecc71;padding-bottom:8px}
#learned-table thead tr{background:#2ecc71;color:#fff}
/* ── Tone colors ──────────────────────────────────────────────── */
.py-t1{color:#e74c3c}.py-t2{color:#f39c12}.py-t3{color:#27ae60}.py-t4{color:#2980b9}.py-t0{color:#888}

/* ── HSK progress bar ────────────────────────────────────────── */
.hsk-prog{display:flex;align-items:center;gap:4px;font-size:.72em}
.hsk-prog-bar{width:60px;height:8px;background:#eee;border-radius:4px;overflow:hidden;display:inline-block}
.hsk-prog-fill{height:100%;border-radius:4px;transition:width .3s}
body.dark .hsk-prog-bar{background:#333}

/* ── HSK level badges ────────────────────────────────────────── */
.hsk-badge{display:inline-block;font-size:.6em;font-weight:bold;padding:1px 4px;border-radius:3px;vertical-align:middle;margin-left:4px;color:#fff;line-height:1.4}
.hsk-1{background:#27ae60}.hsk-2{background:#2ecc71}.hsk-3{background:#f39c12}
.hsk-4{background:#e67e22}.hsk-5{background:#e74c3c}.hsk-6{background:#8e44ad}

/* ── Search highlight ────────────────────────────────────────── */
mark{background:#ffeb3b;color:#000;border-radius:2px;padding:0 1px}
body.dark mark{background:#f39c12;color:#000}

/* ── Familiar column ─────────────────────────────────────────── */
.fam-col{width:30px;text-align:center;padding:4px 6px}
.fam-cell{text-align:center;vertical-align:middle;padding:4px}
.fam-cb{width:15px;height:15px;cursor:pointer;accent-color:#f39c12;opacity:.8}

/* ── Flashcard study mode ─────────────────────────────────────── */
#study-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:9000;display:flex;align-items:center;justify-content:center}
#study-card{background:#fff;border-radius:16px;padding:32px;width:min(600px,90vw);min-height:400px;display:flex;flex-direction:column;gap:16px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3)}
#study-progress{font-size:.85em;color:#666;display:flex;align-items:center;gap:8px}
#study-close,#study-close2{margin-left:auto;background:none;border:none;cursor:pointer;font-size:1.2em;color:#999}
#study-front{flex:1;display:flex;align-items:center;justify-content:center}
#study-zh{font-size:clamp(2.5em,6vw,5em);font-weight:bold;color:#1a1a2e;cursor:pointer;text-align:center;line-height:1.2}
#study-back{flex:1;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
#study-py{font-size:1.5em;color:#555}
#study-trans{font-size:1.2em;color:#333;max-width:90%}
#study-ex{font-size:.9em;color:#888;max-width:90%;font-style:italic}
#study-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
#study-show{padding:12px 32px;background:#e94560;color:#fff;border:none;border-radius:8px;font-size:1em;cursor:pointer}
#study-know{padding:12px 28px;background:#27ae60;color:#fff;border:none;border-radius:8px;font-size:1em;cursor:pointer}
#study-learning{padding:12px 28px;background:#f1c40f;color:#4d3b00;border:none;border-radius:8px;font-size:1em;cursor:pointer}
#study-dont{padding:12px 28px;background:#e74c3c;color:#fff;border:none;border-radius:8px;font-size:1em;cursor:pointer}
#study-summary{text-align:center;flex:1;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center}
#study-again,#study-close2{padding:10px 24px;border:none;border-radius:8px;cursor:pointer;font-size:1em}
#study-again{background:#e94560;color:#fff}
body.dark #study-card{background:#1a1a2e;color:#e0e0e0}
body.dark #study-zh{color:#e94560}
/* ── Multiple choice quiz ─────────────────────────────────────── */
#quiz-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);z-index:9001;display:flex;align-items:center;justify-content:center}
#quiz-card{background:#fff;border-radius:16px;padding:28px;width:min(640px,92vw);display:flex;flex-direction:column;gap:16px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
#quiz-progress{font-size:.85em;color:#666;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#quiz-close,#quiz-close2{margin-left:auto;background:none;border:none;cursor:pointer;font-size:1.2em;color:#999}
#quiz-question{text-align:center;padding:12px 0}
#quiz-zh{font-size:3.5em;font-weight:bold;color:#1a1a2e;cursor:pointer}
#quiz-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quiz-choice{padding:12px 16px;border:2px solid #e0e0e0;border-radius:10px;cursor:pointer;font-size:1em;background:#fff;text-align:left;transition:border-color .15s,background .15s}
.quiz-choice:hover{border-color:#e94560;background:#fff5f7}
.quiz-choice.correct{border-color:#27ae60;background:#f0fff4;color:#27ae60;font-weight:bold}
.quiz-choice.wrong{border-color:#e74c3c;background:#fff5f5;color:#e74c3c}
.quiz-choice.reveal{border-color:#27ae60;background:#f0fff4}
#quiz-feedback.ok{color:#27ae60}
#quiz-feedback.err{color:#e74c3c}
#quiz-again,#quiz-close2{padding:10px 24px;border:none;border-radius:8px;cursor:pointer;font-size:1em;margin:4px}
#quiz-again{background:#e94560;color:#fff}
body.dark #quiz-card{background:#1a1a2e;color:#e0e0e0}
body.dark .quiz-choice{background:#16213e;border-color:#333;color:#e0e0e0}
body.dark .quiz-choice:hover{border-color:#e94560}

#quiz-toggle-py{padding:4px 8px;border:1px solid #ccc;border-radius:6px;background:#f5f5f5;font-size:.78em;cursor:pointer}
#quiz-toggle-py:hover{background:#e94560;color:#fff;border-color:#e94560}
#quiz-card.quiz-hide-py #quiz-py{display:none}
#quiz-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#quiz-know{padding:10px 22px;background:#27ae60;color:#fff;border:none;border-radius:8px;font-size:1em;cursor:pointer}
#quiz-learning{padding:10px 22px;background:#f1c40f;color:#4d3b00;border:none;border-radius:8px;font-size:1em;cursor:pointer}
#quiz-dont{padding:10px 22px;background:#e74c3c;color:#fff;border:none;border-radius:8px;font-size:1em;cursor:pointer}
#quiz-next{padding:10px 22px;background:#1a1a2e;color:#fff;border:none;border-radius:8px;font-size:1em;cursor:pointer}
#quiz-next:disabled{opacity:.5;cursor:not-allowed}
#quiz-setup{display:flex;flex-direction:column;gap:12px}
.quiz-setup-head{display:flex;align-items:center;gap:10px}
.quiz-setup-title{font-weight:700;font-size:1.1em}
#quiz-setup-close{margin-left:auto;background:none;border:none;cursor:pointer;font-size:1.2em;color:#999}
.quiz-setup-row{display:flex;flex-direction:column;gap:6px}
.quiz-setup-label{font-size:.85em;color:#666}
#quiz-levels{display:flex;flex-wrap:wrap;gap:6px}
.quiz-level-btn{padding:6px 10px;border:1px solid #ccc;border-radius:6px;background:#f5f5f5;cursor:pointer;font-size:.85em}
.quiz-level-btn.active{background:#e94560;color:#fff;border-color:#e94560}
#quiz-size{width:110px;padding:6px 8px;border:1px solid #ccc;border-radius:6px;font-size:.9em}
.quiz-setup-toggle{font-size:.9em;color:#444}
.quiz-setup-actions{display:flex;gap:10px;justify-content:flex-end}
#quiz-start{padding:8px 18px;background:#e94560;color:#fff;border:none;border-radius:8px;cursor:pointer}
#quiz-exit{padding:8px 18px;background:#f5f5f5;color:#333;border:1px solid #ccc;border-radius:8px;cursor:pointer}
#quiz-exit:hover{background:#eee}

/* ── Chinese news overlay ───────────────────────────────────── */
#news-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);z-index:9002;display:flex;align-items:center;justify-content:center}
#news-card{background:#fff;border-radius:14px;padding:14px;width:min(980px,94vw);display:flex;flex-direction:column;gap:10px;box-shadow:0 20px 60px rgba(0,0,0,.35);position:relative}
#news-header{display:flex;align-items:center;gap:8px;font-size:.95em;color:#333}
#news-title{font-weight:600}
#news-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
#news-tools{display:flex;align-items:center;gap:6px}
.news-tool{border:1px solid #c9c9c9;background:#f7f7f7;border-radius:6px;padding:2px 6px;font-size:.75em;cursor:pointer;color:#333}
.news-tool.active{background:#2f2f44;border-color:#2f2f44;color:#fff}
#news-volume-wrap{display:flex;align-items:center;gap:6px;font-size:.78em;color:#555}
#news-volume{width:110px}
#news-vol-val{min-width:40px;text-align:right;color:#666}
#news-close{background:none;border:none;cursor:pointer;font-size:1.2em;color:#999}
#news-player-wrap{position:relative}
#news-player{width:100%;height:min(70vh,560px);background:#000;border-radius:10px}
#news-audio{width:100%;height:44px;display:none;background:#000;border-radius:10px}
#news-captions{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(0,0,0,.65);color:#fff;border-radius:8px;padding:8px 10px;font-size:.95em;line-height:1.35;pointer-events:none}
#news-under{display:flex;align-items:center;gap:10px;margin-top:8px}
#news-subtitles{flex:1;min-height:42px;background:rgba(0,0,0,.35);border-radius:8px;padding:8px 10px;color:#fff;font-size:.9em;line-height:1.35}
#news-subtitles .cap-py{color:#ffe8b3;font-size:.85em}
#news-subtitles .cap-tr{color:#cde7ff;font-size:.85em;margin-top:2px}
#news-subtitles .live-transcript{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.15)}
#news-subtitles .live-zh{font-size:.95em;color:#fff}
#news-subtitles .live-en{font-size:.85em;color:#cde7ff;margin-top:2px}
#news-subtitles .live-history{margin-top:6px;max-height:120px;overflow:auto;font-size:.8em;color:#b9c7d9;line-height:1.25}
#news-subtitles .live-history .hist-item{margin-top:3px}
#news-subtitles .live-status{margin-top:4px;font-size:.75em;color:#9aa9bf}
.news-nav-btn{width:36px;height:32px;border:none;border-radius:8px;background:#e43c5c;color:#fff;font-size:18px;cursor:pointer}
.news-nav-btn:hover{filter:brightness(1.05)}
#news-captions .cap-py{font-size:.85em;color:#ffe8b3;margin-top:2px}
#news-captions .cap-tr{font-size:.85em;color:#cde7ff;margin-top:2px}
#news-captions.hidden{display:none}
#news-overlay.radio-mode #news-player{display:none}
#news-overlay.radio-mode #news-audio{display:block}
#news-overlay.radio-mode #news-captions{display:none}
#news-overlay.radio-mode #news-subtitles{display:none}
#news-overlay.radio-mode #news-tools{display:none}
#news-overlay.radio-mode #news-under{justify-content:space-between}
#tb-row-news select{padding:4px 6px;border:1px solid #ccc;border-radius:4px;font-size:.82em}
#tb-row-news .cdx-btn{padding:4px 10px;font-size:.82em}
/* ── News reader overlay ───────────────────────────────────── */
#news-read-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);z-index:9003;display:flex;align-items:center;justify-content:center}
#news-read-card{background:#fff;border-radius:14px;padding:14px;width:min(1100px,96vw);max-height:92vh;display:flex;flex-direction:column;gap:10px;box-shadow:0 20px 60px rgba(0,0,0,.35);position:relative}
#news-read-header{display:flex;align-items:center;gap:8px;font-size:.95em;color:#333}
#news-read-title{font-weight:600}
#news-read-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
#news-read-close{background:none;border:none;cursor:pointer;font-size:1.2em;color:#999}
#news-read-body{display:flex;gap:12px;min-height:0}
#news-read-side{width:280px;min-width:240px;display:flex;flex-direction:column;gap:8px}
.news-read-label{font-size:.78em;color:#666;margin-top:4px}
#news-read-channel{padding:6px;border:1px solid #ccc;border-radius:6px}
#news-read-articles{flex:1;overflow:auto;border:1px solid #e3e3e3;border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:6px;background:#fafafa}
.news-article-item{padding:8px;border-radius:8px;border:1px solid transparent;cursor:pointer;font-size:.86em;line-height:1.25;color:#333;background:#fff}
.news-article-item:hover{border-color:#d0d0d0}
.news-article-item.active{border-color:#e43c5c;box-shadow:0 6px 14px rgba(228,60,92,.15)}
#news-read-content{flex:1;min-width:0;overflow:auto;border:1px solid #e3e3e3;border-radius:10px;padding:12px;background:#fcfcfc}
#news-read-article-title{margin:0 0 10px 0;font-size:1.05em;color:#222}
#news-read-lines{display:flex;flex-direction:column;gap:10px}
.news-line{padding:8px 10px;border-radius:8px;background:#fff;border:1px solid #f0f0f0}
.news-line .line-zh{font-size:1em;color:#111}
.news-line .line-py{margin-top:4px;font-size:.88em;color:#666}
.news-line .line-tr-en{margin-top:4px;font-size:.88em;color:#2d5f9f}
.news-line .line-tr-ru{margin-top:2px;font-size:.88em;color:#4a6b2d}
.news-line.is-reading .line-zh{color:#e53935;font-weight:600}
#news-read-status{font-size:.8em;color:#777}
#news-read-overlay.hide-pinyin .line-py{display:none}
#news-read-overlay.hide-translation .line-tr-en,
#news-read-overlay.hide-translation .line-tr-ru{display:none}
body.dark #news-card{background:#1a1a2e;color:#e0e0e0}
body.dark #news-title{color:#e0e0e0}
body.dark #news-close{color:#bbb}
body.dark .news-tool{background:#2a2a40;border-color:#3a3a55;color:#e0e0e0}
body.dark .news-tool.active{background:#e43c5c;border-color:#e43c5c;color:#fff}
body.dark #news-volume-wrap{color:#cfd2e3}
body.dark #news-vol-val{color:#cfd2e3}
body.dark #news-read-card{background:#1a1a2e;color:#e0e0e0}
body.dark #news-read-title{color:#e0e0e0}
body.dark #news-read-close{color:#bbb}
body.dark #news-read-articles{background:#15152a;border-color:#2c2c45}
body.dark .news-article-item{background:#1e1e34;color:#d7d9e5}
body.dark #news-read-content{background:#141428;border-color:#2c2c45}
body.dark .news-line{background:#1c1c33;border-color:#2a2a44}
body.dark .news-line .line-zh{color:#f2f2f2}
body.dark .news-line .line-py{color:#b9c4d8}
body.dark .news-line .line-tr-en{color:#9ec5ff}
body.dark .news-line .line-tr-ru{color:#b4d69a}
body.dark #news-read-status{color:#b8bdd6}

/* ── Familiar section ────────────────────────────────────────── */
#fam-section{background:#fffde7;border-top:3px solid #f39c12;padding:20px 0;margin-top:30px}
#fam-section>h2{color:#e67e22;border-bottom:2px solid #f39c12;padding-bottom:8px;padding-left:12px;margin:0 0 12px}
#fam-table thead tr{background:#f39c12;color:#fff}

/* ── Toolbar ─────────────────────────────────────────────────── */
#toolbar{position:static;z-index:2000;background:#fff;border-bottom:none;box-shadow:0 2px 8px rgba(0,0,0,.1)}
#tb-main{padding:4px 12px}
.tb-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:4px 0}
.tb-row:first-child{border-bottom:1px solid rgba(0,0,0,.07)}
.tb-sep{width:1px;height:18px;background:rgba(0,0,0,.15);margin:0 2px}
.tb-label{font-size:.78em;color:#666;white-space:nowrap}
#search-wrap{display:flex;gap:4px;align-items:center}
#search-input{width:200px;padding:5px 10px;border:1px solid #ccc;border-radius:4px;font-size:.9em;outline:none}
#search-input:focus{border-color:#e94560}
#search-lang{padding:5px 4px;border:1px solid #ccc;border-radius:4px;font-size:.85em}
#search-clear{padding:4px 8px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background:#f5f5f5;font-size:.85em}
#stats-bar{font-size:.82em;color:#555;white-space:nowrap}
#stats-bar b{color:#1a1a2e}
.mode-btn{padding:4px 9px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background:#f5f5f5;font-size:.82em}
.mode-btn.active{background:#e94560;color:#fff;border-color:#e94560}
#font-toggle{padding:4px 9px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background:#f5f5f5;font-size:.82em}
#btn-col-all,#btn-exp-all{padding:4px 8px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background:#f5f5f5;font-size:.82em}
#font-panel{display:none;flex-wrap:wrap;gap:10px;padding:8px 12px;background:#f9f9f9;border-top:1px solid #eee;align-items:center}
.fr{display:flex;align-items:center;gap:6px;font-size:.82em}
.fr label{font-weight:bold;min-width:58px}
.fr select{padding:3px 5px;border:1px solid #ccc;border-radius:3px}
.fr input[type=range]{width:80px;cursor:pointer}
.fr .sv{font-size:.78em;color:#888;min-width:32px}

/* ── TTS buttons ─────────────────────────────────────────────── */
.tts-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid #ddd;border-radius:3px;cursor:pointer;background:#f9f9f9;font-size:.7em;color:#666;flex-shrink:0;padding:0;line-height:1}
.tts-btn:hover{background:#e94560;color:#fff;border-color:#e94560}
.tts-btn.on{background:#e94560;color:#fff}
.wordcell{display:flex;align-items:flex-start;gap:6px}
.wc-inner{flex:1}
.ex-td{position:relative}
.ex-td-inner{display:block}
.wordcell .tts-btn{margin-top:4px}
.wordcell .zh{line-height:1.1}
.ex-td .ex-zh{display:flex;align-items:center;gap:8px}
.ex-td .tts-btn{width:24px;height:24px;font-size:.8em;margin:0}
.ex-td .ex-py{margin-left:32px}

/* ── Stroke order popup ──────────────────────────────────────── */
#hz-popup{position:fixed;background:#fff;border:2px solid #e94560;border-radius:10px;padding:10px;z-index:9999;display:none;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.hz-char{cursor:help;border-bottom:1px dotted #e94560;display:inline-block;transition:color .15s}
.hz-char:hover{color:#e94560}

/* ── Group collapse ──────────────────────────────────────────── */
.grp-wrap.grp-col{display:none}
.grp-empty{display:none!important}
h2.pos-group.pos-empty{display:none!important}
.coll-btn{float:right;padding:1px 7px;border:1px solid #bbb;border-radius:3px;cursor:pointer;font-size:.78em;background:#fff;color:#555}
.coll-btn:hover{background:#e94560;color:#fff;border-color:#e94560}

/* ── Search hidden ───────────────────────────────────────────── */
.sr-hide{display:none!important}

/* ── Dark mode ───────────────────────────────────────────────── */
body.dark{background:#111122;color:#e8e8e8}
body.dark #toolbar{background:#1a1a2e;border-bottom:none;box-shadow:0 2px 10px rgba(0,0,0,.5)}
body.dark table{background:#1c1c30;box-shadow:0 1px 4px rgba(0,0,0,.5)}
body.dark tr:nth-child(even){background:#222238}
body.dark thead tr{background:#9b1f35}
body.dark th,body.dark td{border-color:#2e2e4a}
body.dark .zh{color:#ffffff!important}
body.dark .py{color:#a8c8e8}
body.dark td.trans-cell{color:#e8e8e8}
body.dark .ex-zh{color:#ffffff}
body.dark .ex-py{color:#88b8d8}
body.dark .rownum{color:#6868a0}
body.dark .drag-handle{background:#22223a;border-color:#3e3e5a;color:#c8c8e0}
body.dark h2.pos-group{background:#1a1a2e;color:#fff;border-radius:4px}
body.dark h3.phonetic-group{background:#222238;color:#c8c8e0;border-left-color:#e94560}
body.dark .comp{color:#90caf9}
body.dark .toc{background:#1c1c30;border-color:#2e2e4a}
body.dark .toc a{color:#90caf9}
body.dark .toc a:hover{color:#e94560}
body.dark .toc-count{color:#6868a0}
body.dark .gnote{background:#222238;border-left-color:#f9a825;color:#e0d080}
body.dark .subtitle{color:#a0a0c0}
body.dark #stats-bar{color:#a0a0c0}
body.dark #stats-bar b{color:#90caf9}
body.dark .mode-btn,body.dark #font-toggle,body.dark #btn-col-all,body.dark #btn-exp-all,body.dark #search-clear,body.dark #search-lang{background:#22223a;color:#c8c8e0;border-color:#3e3e5a}
body.dark #search-input{background:#22223a;color:#e8e8e8;border-color:#3e3e5a}
body.dark .mode-btn.active{background:#e94560;color:#fff;border-color:#e94560}
body.dark #font-panel{background:#181828;border-top-color:#2e2e4a}
body.dark .fr select{background:#22223a;color:#c8c8e0;border-color:#3e3e5a}
body.dark .fr label{color:#c8c8e0}
body.dark #hz-popup{background:#1c1c30;border-color:#e94560;color:#e8e8e8}
body.dark #fam-section{background:#1e1800}
body.dark #fam-section h2{color:#f9a825;border-bottom-color:#f9a825}
body.dark #fam-table thead tr{background:#6b4f00}
body.dark #learned-section{background:#0a1f0a}
body.dark #learned-section h2{color:#4caf50;border-bottom-color:#4caf50}
body.dark #learned-table thead tr{background:#1b5e20}
body.dark .tts-btn{border-color:#3e3e5a;background:#22223a;color:#90caf9}
body.dark .tts-btn:hover{background:#e94560;color:#fff;border-color:#e94560}
body.dark .tb-row:first-child{border-bottom-color:rgba(255,255,255,.08)}
body.dark .tb-sep{background:rgba(255,255,255,.15)}
body.dark .tb-label{color:#8888aa}
body.dark .coll-btn{background:#22223a;color:#a0a0c0;border-color:#3e3e5a}

/* ── Sepia mode ──────────────────────────────────────────────── */
body.sepia{background:#f4e8c1;color:#3a2a18}
body.sepia #toolbar{background:#ede0b5;border-bottom:none}
body.sepia table{background:#fdf5e0}
body.sepia tr:nth-child(even){background:#f5e8c5}
body.sepia thead tr{background:#8b5e3c;color:#fff}
body.sepia th,body.sepia td{border-color:#d4b893}
body.sepia h2.pos-group{background:#5c3d18}
body.sepia h3.phonetic-group{background:#e8d5a0;color:#3a2a18;border-left-color:#8b5e3c}
body.sepia .toc{background:#fdf5e0;border-color:#c8a875}
body.sepia .zh{color:#4a2000}
body.sepia .py{color:#8a6040}
body.sepia .tts-btn{border-color:#c8a875;background:#fdf5e0;color:#8b5e3c}
body.sepia .tb-row:first-child{border-bottom-color:rgba(0,0,0,.1)}
body.sepia .tb-label{color:#8a6040}
body.sepia .drag-handle{background:#fdf5e0;border-color:#c8a875;color:#5c3d18}

/* ── Print ───────────────────────────────────────────────────── */
@media print{
  #toolbar,#hz-popup,.donate-bar,#study-overlay,#quiz-overlay,#cdx-confirm{display:none!important}
  .cb-cell,.cb-col,.fam-cell,.fam-col,.tts-btn,.coll-btn{display:none!important}
  .drag-handle{display:none!important}
  td.trans-cell{padding-left:10px!important}
  .grp-wrap.grp-col{display:block!important}
  #fam-section,#learned-section{display:block!important}
  body{background:#fff!important;color:#000!important;max-width:100%!important;padding:8px!important}
  table{box-shadow:none!important;page-break-inside:avoid}
  h2.pos-group{background:#333!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .zh{color:#000!important}
  .py-t1{color:#c0392b!important}.py-t2{color:#d68910!important}.py-t3{color:#1e8449!important}.py-t4{color:#1a5276!important}
  thead tr{background:#555!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  h1,h3{display:none}
}

/* ── Column visibility toggle (data cols only) ───────────────── */
thead th:not(.cb-col):not(.fam-col){cursor:pointer;user-select:none}
thead th:not(.cb-col):not(.fam-col):hover{opacity:.8}
body.hide-num  th:nth-child(3),body.hide-num  td:nth-child(3){display:none!important}
body.hide-word th:nth-child(4),body.hide-word td:nth-child(4){display:none!important}
body.hide-trans th:nth-child(5),body.hide-trans td:nth-child(5){display:none!important}
body.hide-ex   th:nth-child(6),body.hide-ex   td:nth-child(6){display:none!important}
/* col-btn toolbar toggles */
.col-btn{padding:3px 8px;border:1px solid #e94560;border-radius:3px;cursor:pointer;background:#e94560;color:#fff;font-size:.78em}
.col-btn.hidden{background:#f5f5f5!important;color:#aaa!important;border-color:#ccc!important;text-decoration:line-through;opacity:0.65}
/* speed selector */
#speed-sel{padding:4px 6px;border:1px solid #ccc;border-radius:4px;font-size:.82em;cursor:pointer}
/* volume control */
#vol-range{width:90px;cursor:pointer;accent-color:var(--pal-accent)}
#vol-val{font-size:.78em;color:#666;min-width:36px;text-align:right}
/* dark overrides */
body.dark #speed-sel{background:#22223a;color:#c8c8e0;border-color:#3e3e5a}
body.dark #vol-val{color:#8888aa}
body.dark .col-btn{background:#9b1f35;border-color:#9b1f35}
body.dark .col-btn.hidden{background:#1a1a2e!important;color:#555!important;border-color:#3e3e5a!important;opacity:0.65}
/* sepia overrides */
body.sepia #speed-sel{background:#fdf5e0;color:#3a2a18;border-color:#c8a875}
body.sepia #vol-val{color:#8a6040}
body.sepia .col-btn{background:#8b5e3c;border-color:#8b5e3c}
body.sepia .col-btn.hidden{background:#f4e8c1!important;color:#999!important;border-color:#d4b893!important;opacity:0.65}
@media print{body.hide-num th:nth-child(3),body.hide-num td:nth-child(3),body.hide-word th:nth-child(4),body.hide-word td:nth-child(4),body.hide-trans th:nth-child(5),body.hide-trans td:nth-child(5),body.hide-ex th:nth-child(6),body.hide-ex td:nth-child(6){display:none!important}}

/* ── Codex additions ─────────────────────────────────────────────────────── */

/* CSS custom properties for palette */
:root {
  --pal-accent: #e94560;
  --pal-dark:   #c73652;
}

/* Apply palette vars */
h3.phonetic-group { border-left-color: var(--pal-accent) !important; }
thead tr { background: var(--pal-accent) !important; }
.mode-btn.active { background: var(--pal-accent) !important; border-color: var(--pal-accent) !important; }
.tts-btn:hover { background: var(--pal-accent) !important; border-color: var(--pal-accent) !important; }
.hz-char { border-bottom-color: var(--pal-accent) !important; }
.hz-char:hover { color: var(--pal-accent) !important; }
#hz-popup { border-color: var(--pal-accent) !important; }
h1 { border-bottom-color: transparent !important; }
.col-btn:not(.hidden) { background: var(--pal-accent) !important; border-color: var(--pal-accent) !important; }
.coll-btn:hover { background: var(--pal-accent) !important; border-color: var(--pal-accent) !important; }
#search-input:focus { border-color: var(--pal-accent) !important; }
#toolbar { border-bottom-color: transparent !important; }
.learn-cb { accent-color: var(--pal-accent) !important; }

/* Dark mode h1 fix */
body.dark h1 { color: #fff !important; text-shadow: 0 0 20px rgba(233,69,96,0.5); }

/* Lang switching */
.trans-en { display: none; }
.lang-en .trans-ru { display: none; }
.lang-en .trans-en { display: inline; }

/* data-col column visibility (replaces nth-child selectors) */
body.hide-num  [data-col="num"]  { display: none !important; }
body.hide-word [data-col="word"] { display: none !important; }
body.hide-trans [data-col="trans"] { display: none !important; }
body.hide-ex   [data-col="ex"]   { display: none !important; }

/* Drag ghost */
.drag-ghost { opacity: 0.4; background: #f0e0e8 !important; }

/* Snapshot / palette dropdown */
.cdx-btn {
  padding: 4px 9px; border: 1px solid #ccc; border-radius: 4px;
  cursor: pointer; background: #f5f5f5; font-size: .82em; position: relative;
}
.cdx-btn:hover { background: var(--pal-accent); color:#fff; border-color: var(--pal-accent); }
.cdx-dropdown {
  display: none; position: absolute; top: 100%; left: 0; z-index: 9000;
  background: #fff; border: 1px solid #ccc; border-radius: 4px;
  min-width: 260px; box-shadow: 0 4px 12px rgba(0,0,0,.15); max-height: 340px; overflow-y: auto;
}
.cdx-dropdown.open { display: block; }
.cdx-dropdown-item {
  padding: 7px 12px; cursor: pointer; font-size: .82em; border-bottom: 1px solid #f0f0f0;
}
.cdx-dropdown-item:hover { background: #f5f5f5; }
.cdx-dropdown-item:last-child { border-bottom: none; }
.cdx-wrap { position: relative; display: inline-block; }

/* ── POS filter buttons ──────────────────────────────────────── */
.pos-btn{padding:3px 7px;border:1px solid #ccc;border-radius:3px;cursor:pointer;background:#f5f5f5;font-size:.78em}
.pos-btn:hover{border-color:var(--pal-accent);color:var(--pal-accent)}
.pos-btn.active{background:var(--pal-accent);color:#fff;border-color:var(--pal-accent)}
body.dark .pos-btn{background:#22223a;color:#c8c8e0;border-color:#3e3e5a}
body.dark .pos-btn:hover{border-color:#e94560;color:#e94560}
body.dark .pos-btn.active{background:#e94560;color:#fff;border-color:#e94560}
body.sepia .pos-btn{background:#fdf5e0;color:#3a2a18;border-color:#c8a875}
body.sepia .pos-btn.active{background:#8b5e3c;color:#fff;border-color:#8b5e3c}
tr.pos-hide{display:none!important}

/* ── Alpha filter buttons ────────────────────────────────────── */
.alpha-btn{padding:2px 5px;border:1px solid #ccc;border-radius:2px;cursor:pointer;background:#f5f5f5;font-size:.72em;min-width:22px;text-align:center}
.alpha-btn:hover{border-color:var(--pal-accent);color:var(--pal-accent)}
.alpha-btn.active{background:var(--pal-accent);color:#fff;border-color:var(--pal-accent)}
body.dark .alpha-btn{background:#22223a;color:#c8c8e0;border-color:#3e3e5a}
body.dark .alpha-btn:hover{border-color:#e94560;color:#e94560}
body.dark .alpha-btn.active{background:#e94560;color:#fff}
body.sepia .alpha-btn{background:#fdf5e0;color:#3a2a18;border-color:#c8a875}
body.sepia .alpha-btn.active{background:#8b5e3c;color:#fff}
tr.alpha-hide{display:none!important}

/* Sort buttons */
.sort-btn {
  padding: 3px 8px; border: 1px solid #ccc; border-radius: 3px;
  cursor: pointer; background: #f5f5f5; font-size: .78em;
}
.sort-btn.active { background: var(--pal-accent); color:#fff; border-color: var(--pal-accent); }

/* HSK filter buttons */
.hsk-btn {
  padding: 3px 8px; border: 1px solid #ccc; border-radius: 3px;
  cursor: pointer; background: #f5f5f5; font-size: .78em;
}
.hsk-btn.active { background: #8e44ad; color:#fff; border-color: #8e44ad; }
tr.hsk-hide{display:none!important}

/* Filtered view */
#filtered-view { margin-top: 12px; }
#filtered-view table { width: 100%; border-collapse: collapse; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); }

/* Confirmation popup overlay */
#cdx-confirm {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 99999; align-items: center; justify-content: center;
}
#cdx-confirm.open { display: flex; }
#cdx-confirm-box {
  background: #fff; border-radius: 8px; padding: 24px 28px;
  max-width: 380px; width: 90%; box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
#cdx-confirm-box p { margin: 0 0 16px; font-size: .95em; }
#cdx-confirm-box .cdx-conf-btns { display: flex; gap: 10px; justify-content: flex-end; }
#cdx-confirm-box button {
  padding: 6px 16px; border-radius: 4px; border: 1px solid #ccc;
  cursor: pointer; font-size: .88em;
}
#cdx-confirm-box .cdx-conf-ok { background: var(--pal-accent); color:#fff; border-color: var(--pal-accent); }
body.dark #cdx-confirm-box { background: #1c1c30; color: #e8e8e8; }
body.dark #cdx-confirm-box button { background: #22223a; color: #c8c8e0; border-color: #3e3e5a; }
body.dark #cdx-confirm-box .cdx-conf-ok { background: var(--pal-accent); color: #fff; }
body.dark .cdx-btn { background: #22223a; color: #c8c8e0; border-color: #3e3e5a; }
body.dark .cdx-dropdown { background: #1c1c30; border-color: #3e3e5a; }
body.dark .cdx-dropdown-item { border-bottom-color: #2e2e4a; color: #c8c8e0; }
body.dark .cdx-dropdown-item:hover { background: #22223a; }
body.dark .sort-btn { background: #22223a; color: #c8c8e0; border-color: #3e3e5a; }
body.dark .sort-btn.active { background: var(--pal-accent); color: #fff; }
body.sepia .cdx-btn { background: #fdf5e0; color: #3a2a18; border-color: #c8a875; }
body.sepia .sort-btn { background: #fdf5e0; color: #3a2a18; border-color: #c8a875; }


.lang-en .gnote-ru{display:none!important}
.lang-en .gnote-en{display:inline!important}

/* Bug2 fix: filtered-view headers must show even in flat-view */
#filtered-view h2.pos-group,#filtered-view h3.phonetic-group{display:block!important}

/* filtered-view table class for theme support */
.fv-table{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* Dark mode filtered view */
body.dark #filtered-view h2.pos-group{background:#1a1a2e;color:#fff}
body.dark #filtered-view h3.phonetic-group{background:#222238;color:#c8c8e0;border-left-color:#e94560}
body.dark .fv-table{background:#1c1c30!important;box-shadow:0 1px 4px rgba(0,0,0,.5)}
body.dark .fv-table tr:nth-child(even){background:#222238}
body.dark .fv-table thead tr{background:#9b1f35}
body.dark .fv-table th,body.dark .fv-table td{border-color:#2e2e4a;color:#e8e8e8}

/* Dark mode general improvements */
body.dark .toc a:visited{color:#90caf9}
body.dark .mode-btn{color:#c8c8e0}
body.dark select option{background:#22223a;color:#c8c8e0}

/* Dark mode study and quiz card CSS */
body.dark #study-card{background:#1a1a2e;color:#e0e0e0;border:1px solid #2e2e4a}
body.dark #study-py{color:#90caf9}
body.dark #study-trans{color:#e8e8e8}
body.dark #study-ex{color:#a0a0c0}
body.dark #quiz-card{background:#1a1a2e;color:#e0e0e0;border:1px solid #2e2e4a}
body.dark #quiz-zh{color:#e94560}
body.dark #quiz-py{color:#90caf9}

/* ── Show-all columns + export buttons ───────────────────────── */
#btn-show-all-cols{padding:3px 8px;border:1px solid #888;border-radius:3px;cursor:pointer;background:#f5f5f5;color:#444;font-size:.78em}
#btn-show-all-cols:hover{background:#e94560;color:#fff;border-color:#e94560}
body.dark #btn-show-all-cols{background:#22223a;color:#c8c8e0;border-color:#3e3e5a}
body.dark #btn-show-all-cols:hover{background:#e94560;border-color:#e94560}
body.sepia #btn-show-all-cols{background:#fdf5e0;color:#3a2a18;border-color:#c8a875}
.export-btn{padding:4px 10px;border:1px solid #27ae60;border-radius:4px;cursor:pointer;background:#27ae60;color:#fff;font-size:.82em;font-weight:600}
.export-btn:hover{background:#1e8449;border-color:#1e8449}
body.dark .export-btn{background:#1a5c30;color:#a0e8b0;border-color:#27ae60}
body.dark .export-btn:hover{background:#27ae60;color:#fff}
body.sepia .export-btn{background:#5c8a3a;border-color:#5c8a3a}

/* ── Keep alignment when columns hidden ───────────────────────── */
body[class*='hide-'] table{table-layout:auto!important}
/* Remove inline-style width constraints so columns expand into hidden space */
body.hide-num   th[data-col="num"],  body.hide-num   td[data-col="num"]  {width:0!important;padding:0!important;overflow:hidden}
body.hide-word  th[data-col="word"], body.hide-word  td[data-col="word"] {width:0!important;padding:0!important}
body.hide-trans th[data-col="trans"],body.hide-trans td[data-col="trans"]{width:0!important;padding:0!important}
body.hide-ex    th[data-col="ex"],   body.hide-ex    td[data-col="ex"]   {width:0!important;padding:0!important}
/* Proportional widths for common single-hide cases */
body.hide-word  th[data-col="trans"],body.hide-word  td[data-col="trans"]{width:40%!important}
body.hide-word  th[data-col="ex"],   body.hide-word  td[data-col="ex"]   {width:57%!important}
body.hide-trans th[data-col="word"], body.hide-trans td[data-col="word"] {width:30%!important}
body.hide-trans th[data-col="ex"],   body.hide-trans td[data-col="ex"]   {width:67%!important}
body.hide-ex    th[data-col="word"], body.hide-ex    td[data-col="word"] {width:35%!important}
body.hide-ex    th[data-col="trans"],body.hide-ex    td[data-col="trans"]{width:60%!important}

/* Donate bar */
.donate-bar{text-align:center;padding:10px;margin:8px 0;background:linear-gradient(135deg,#fff5f7,#fff);border:1px solid #f9d0d8;border-radius:8px}
.donate-btn{display:inline-block;background:#e94560;color:#fff;text-decoration:none;padding:8px 20px;border-radius:20px;font-size:.9em;font-weight:bold;transition:background .2s}
.donate-btn:hover{background:#c73652}
.donate-info{display:block;font-size:.78em;color:#999;margin-top:4px}
body.dark .donate-bar{background:linear-gradient(135deg,#1e1020,#1a1a2e);border-color:#3e2040}
body.dark .donate-info{color:#6868a0}


/* ── Hide duplicate table headers within POS sections ────────────────────── */
/* JS adds .pos-first-table to the first table in each POS section */
table:not(.pos-first-table):not(#fam-table):not(#learned-table):not(.fv-table) thead {
  visibility: hidden;
}
table:not(.pos-first-table):not(#fam-table):not(#learned-table):not(.fv-table) thead th {
  padding: 0;
  border: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
}

/* ── Back to top button ───────────────────────────────────────────────────── */
#back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(233,69,96,0.85);
  color: #fff;
  font-size: 1.3em;
  border: none;
  cursor: pointer;
  z-index: 800;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: opacity .2s, background .2s;
}
#back-to-top:hover { background: #e94560; }
#back-to-top.visible { display: flex; }

/* ── Mobile header ────────────────────────────────────────────────────────── */
#mobile-header {
  display: none;
}
#mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 998;
}

@media (max-width: 1024px) {
  #mobile-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 2px solid #e94560;
    position: static;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
  }
  body.dark #mobile-header { background: #1a1a2e; }
  body.sepia #mobile-header { background: #ede0b5; }

  .mobile-title {
    font-weight: 700;
    font-size: 1.05em;
    color: #e94560;
    white-space: nowrap;
  }

  #mobile-search-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: .9em;
    min-width: 0;
  }

  #hamburger-btn {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    padding: 4px 8px;
    color: #e94560;
    line-height: 1;
  }

  /* Toolbar hidden on mobile by default, slides in as overlay */
  #toolbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 999;
    transform: translateY(-110%);
    transition: transform .25s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
  }
  #toolbar.mobile-open {
    transform: translateY(0);
  }

  /* Example column hidden on mobile by default */
  [data-col="ex"] { display: none; }
  .col-ex-visible [data-col="ex"] { display: table-cell; }

  /* Table takes full width */
  table { width: 100%; }
  .wordcell .zh { font-size: 1.4em; }
  .wordcell .py { font-size: .78em; }
}


/* ===== Head inline styles (moved from index.html) ===== */
/* Hide phoneme headers during search */
body.searching h3.phonetic-group { display: none !important; }
/* Hide phoneme headers in filtered-view always */
#filtered-view h3.phonetic-group { display: none !important; }
/* Grip handle for row reordering */
.grip-handle {
  cursor: grab;
  color: #aaa;
  font-size: 14px;
  padding: 0 4px;
  user-select: none;
  display: inline-block;
  letter-spacing: -2px;
}
.grip-handle:active { cursor: grabbing; }
tr.dragging-row { opacity: 0.5; background: #f0f8ff !important; }
tr.drag-over-row { border-top: 3px solid #e94560 !important; }
.title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 6px;
  width: 100%;
}
.title-text{flex:1;text-align:center}
.title-row h1 { margin: 0; text-align:center; }
.main-page-hero {
  background: #e94560;
  color: #fff;
  padding: 9px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1em;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(233, 69, 96, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: static;
  transform: none;
}
.main-page-hero:hover { filter: brightness(1.08); }
#title-subtitle{
  text-align:center;
}
#tb-sections{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1.4fr;
  gap:8px;
  padding:6px 4px 10px;
  --tb-scale: 1;
}
#tb-sections{
  transform-origin: top center;
}
@supports (zoom: 1) {
  #tb-sections{ zoom: var(--tb-scale); transform: none; width:100%; }
}
@supports not (zoom: 1) {
  #tb-sections{ transform: scale(var(--tb-scale)); width: calc(100% / var(--tb-scale)); }
}
#tb-sections .tb-section{
  background: rgba(0,0,0,0.03);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:8px;
  padding:6px;
  min-width:0;
}
body.dark #tb-sections .tb-section{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
body.sepia #tb-sections .tb-section{
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.1);
}
#tb-sections .tb-row{margin:2px 0;}
#tb-sections .tb-row:first-child{border-bottom:none;}
#tb-sec-1 #search-wrap{flex:1 1 100%;}
#tb-sec-2{min-width:260px}
#tb-sec-2 #vol-range{width:120px}
#tb-sec-2 #speed-sel{min-width:70px}
#tb-tools{display:none;flex-direction:column;gap:6px;margin-top:4px}
#tb-tools.open{display:flex}
#btn-tools-toggle.active{background:var(--pal-accent);border-color:var(--pal-accent);color:#fff}
#btn-lang-toggle{background:var(--pal-accent);border-color:var(--pal-accent);color:#fff;font-weight:700}
@media (max-width: 1350px){
  #tb-sections{--tb-scale:.95;}
}
@media (max-width: 1250px){
  #tb-sections{--tb-scale:.9;}
}
@media (max-width: 1150px){
  #tb-sections{--tb-scale:.85;}
}
@media (max-width: 1050px){
  #tb-sections{--tb-scale:.8;}
}
@media (max-width: 900px){
  #tb-sections{
    --tb-scale:1;
    transform:none;
    width:100%;
    grid-template-columns:1fr;
  }
}
@media (max-width: 900px) {
  .title-row { flex-direction: column; }
  .title-text{width:100%}
}

/* Quiz layout tweaks */
#quiz-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
#quiz-header-actions{display:flex;align-items:center;gap:8px}
#quiz-header-actions #quiz-close{margin-left:0}
#quiz-question{text-align:left;padding:6px 0}
#quiz-zh{text-align:left;font-size:3.2em}
#quiz-feedback{text-align:left;min-height:1.2em}
#quiz-actions{justify-content:flex-start}
#quiz-next{margin-left:auto}

/* Quiz vertical layout enforcement */
#quiz-main{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
#quiz-question,#quiz-choices,#quiz-feedback,#quiz-actions,#quiz-summary{width:100%}
#quiz-choices{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Quiz center align for zh/pinyin */
#quiz-question{display:flex;flex-direction:column;align-items:center;text-align:center}
#quiz-zh,#quiz-py{text-align:center}