/* ── V2 Design Tokens ─────────────────────────────────────────── */
/*
 * Four-color semantic system — warm, focused, learning-oriented.
 *
 * BLUE   base / interactive   nav active, primary buttons, links, CTA
 * GREEN  completed / done     ✓ ready status, quiz passed, earned, success
 * AMBER  pending / next       ⏳ pending, due, processing, light warning
 * CORAL  alert / error        ⚠ overdue, destructive, error, "again"
 *
 * Neutrals carry a warm undertone so the whole page feels calm and
 * inviting — a learning companion, not a dashboard.
 *
 * Palette updated E12 (2026-03-25) for sustained focus during 20-30min sessions.
 */
:root {
    /* ── Blue — base / interactive (Hanlexon brand blue, softened) ── */
    --hx-primary:        #3B7DD8;   /* warm blue — brand identity, softer than steel */
    --hx-primary-mid:    #2E6BBF;   /* hover / pressed                     */
    --hx-primary-light:  #EBF2FC;   /* surface tint for hover / active nav */
    --hx-primary-border: #B0CCEE;   /* border on blue surfaces             */

    /* ── Green — completed / success / ready ── */
    --hx-green:          #5B8C5A;   /* sage green — soft, not neon         */
    --hx-green-mid:      #4a7549;   /* hover                               */
    --hx-green-light:    #edf5ed;   /* surface tint                        */
    --hx-green-border:   #b8d4b7;   /* border on green surfaces            */

    /* ── Amber — pending / due / next / light warning ── */
    --hx-yellow:         #D4943A;   /* warm amber — inviting, not alarming */
    --hx-yellow-mid:     #b87e30;   /* hover                               */
    --hx-yellow-light:   #fef8ee;   /* surface tint                        */
    --hx-yellow-border:  #f0d8a8;   /* border on amber surfaces            */

    /* ── Coral — alert / error / overdue / destructive ── */
    --hx-red:            #D4665A;   /* soft coral — noticeable but not harsh */
    --hx-red-mid:        #b8544a;   /* hover                               */
    --hx-red-light:      #fdf2f0;   /* surface tint                        */
    --hx-red-border:     #f0c4be;   /* border on coral surfaces            */

    /* ── Purple (game answer D, decorative only) ── */
    --hx-purple:         #7B5EA7;
    --hx-purple-mid:     #6a4f92;

    /* ── Legacy aliases (keep for backwards compat) ── */
    --hx-amber:          var(--hx-yellow);
    --hx-amber-light:    var(--hx-yellow-light);
    --hx-blue:           var(--hx-primary);
    --hx-blue-light:     var(--hx-primary-light);

    /* ── Neutrals (warm-tinted for calm, focused temperature) ── */
    --hx-bg:             #FAFAF7;   /* warm white — not clinical           */
    --hx-card-bg:        #FFFFFF;
    --hx-surface:        #F3F0EB;   /* warm surface for chips, tags        */
    --hx-border:         #E5E0D8;   /* warm gray border                    */
    --hx-text:           #2D2D2D;   /* near-black — easy on the eyes       */
    --hx-text-muted:     #5A5A5A;   /* medium warm gray                    */
    --hx-text-faint:     #8A8A8A;   /* lighter warm gray                   */

    /* ── Tone colors (WCAG AA contrast ≥4.5:1 against white) ── */
    --tone-1:            #B94A40;   /* 1st tone — deeper red (5.1:1)       */
    --tone-2:            #4A7A49;   /* 2nd tone — deeper green (5.0:1)     */
    --tone-3:            #3E6690;   /* 3rd tone — deeper blue (6.0:1)      */
    --tone-4:            #6B4A96;   /* 4th tone — deeper purple (6.9:1)    */
    --tone-5:            #767676;   /* neutral tone — WCAG gray (4.5:1)    */

    /* Spacing scale (4px base) */
    --space-1: 0.25rem;   /* 4px  - tight */
    --space-2: 0.5rem;    /* 8px  - compact */
    --space-3: 0.75rem;   /* 12px - default gap */
    --space-4: 1rem;      /* 16px - section padding */
    --space-5: 1.5rem;    /* 24px - section margin */
    --space-6: 2rem;      /* 32px - page padding */
    --space-8: 3rem;      /* 48px - hero spacing */

    /* Typography scale (Major Third 1.25) */
    --text-xs: 0.72rem;
    --text-sm: 0.85rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-cjk-browse: 1.4rem;
    --text-cjk-study: 3rem;
    --text-cjk-hero: 5rem;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.16);

    /* Z-index scale */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    --z-toast: 1100;

    /* Misc */
    --hx-radius: 8px;
    --hx-font-cjk: "KaiTi", "STKaiti", "Kaiti SC", "SimSun", "Microsoft YaHei", serif;
    --hx-transition: 0.15s ease;

    /* ── Energy / Celebration palette ── */
    --hx-gold:           #f59e0b;   /* streak / achievement gold            */
    --hx-gold-mid:       #d97706;   /* hover                                */
    --hx-gold-light:     #fef3c7;   /* surface tint                         */
    --hx-coral:          #f97316;   /* celebration / energy orange          */
    --hx-coral-mid:      #ea6e0e;   /* hover                                */
    --hx-coral-light:    #fff7ed;   /* surface tint                         */
    --hx-streak-low:     var(--hx-green);   /* 1-6 days  — green  "getting started" */
    --hx-streak-mid:     #f59e0b;   /* 7-29 days — gold   "on a roll"       */
    --hx-streak-high:    var(--hx-red);   /* 30+ days  — red    "on fire"         */

    /* ── Motion ── */
    --hx-spring:         cubic-bezier(0.34, 1.56, 0.64, 1);   /* bouncy spring      */
    --hx-ease-out:       cubic-bezier(0.16, 1, 0.3, 1);        /* smooth decelerate  */
    --hx-duration-fast:  0.15s;
    --hx-duration-base:  0.25s;
    --hx-duration-slow:  0.4s;
}

/* ── Dark Mode ───────────────────────────────────────────────── */
[data-theme="dark"] {
    /* Blue */
    --hx-primary:        #5B9AE8;
    --hx-primary-mid:    #6DAAF0;
    --hx-primary-light:  rgba(59, 125, 216, 0.22);
    --hx-primary-border: rgba(91, 154, 232, 0.3);
    /* Green */
    --hx-green:          #7ab879;
    --hx-green-mid:      #8dcc8c;
    --hx-green-light:    rgba(91, 140, 90, 0.2);
    --hx-green-border:   rgba(122, 184, 121, 0.3);
    /* Amber */
    --hx-yellow:         #e8a844;
    --hx-yellow-mid:     #f0b855;
    --hx-yellow-light:   rgba(212, 148, 58, 0.2);
    --hx-yellow-border:  rgba(232, 168, 68, 0.35);
    /* Coral */
    --hx-red:            #e88880;
    --hx-red-mid:        #f09890;
    --hx-red-light:      rgba(212, 102, 90, 0.2);
    --hx-red-border:     rgba(232, 136, 128, 0.3);
    /* Legacy aliases */
    --hx-amber:          var(--hx-yellow);
    --hx-amber-light:    var(--hx-yellow-light);
    --hx-blue:           var(--hx-primary);
    --hx-blue-light:     var(--hx-primary-light);
    /* Energy — dark variants */
    --hx-gold:           #fbbf24;
    --hx-gold-light:     rgba(251, 191, 36, 0.2);
    --hx-coral:          #fb923c;
    --hx-coral-light:    rgba(249, 115, 22, 0.2);
    --hx-streak-low:     #4ade80;
    --hx-streak-mid:     #fbbf24;
    --hx-streak-high:    #f87171;
    /* Neutrals — warm dark */
    --hx-bg:             #141210;
    --hx-card-bg:        #1e1c18;
    --hx-surface:        #282520;
    --hx-border:         #3a352e;
    --hx-text:           #e8e4de;
    --hx-text-muted:     #b0a99e;   /* 8.0:1 vs #141210 */
    --hx-text-faint:     #918a80;   /* 5.5:1 vs #141210 */
    /* Tones — dark mode */
    --tone-1:            #e88880;
    --tone-2:            #7ab879;
    --tone-3:            #7a9fc5;
    --tone-4:            #9b80c5;
    --tone-5:            #9a948a;
}
[data-theme="dark"] .rating-btn.again      { border-color: var(--hx-red);    background: var(--hx-red-light);    color: var(--hx-red); }
[data-theme="dark"] .rating-btn.again:hover { background: rgba(196,35,42,0.35); }
[data-theme="dark"] .rating-btn.hard       { border-color: var(--hx-yellow);  background: var(--hx-yellow-light); color: var(--hx-yellow); }
[data-theme="dark"] .rating-btn.hard:hover  { background: rgba(192,116,0,0.35); }
[data-theme="dark"] .rating-btn.good       { border-color: var(--hx-primary); background: var(--hx-primary-light); color: var(--hx-primary); }
[data-theme="dark"] .rating-btn.good:hover  { background: rgba(45,99,168,0.35); }
[data-theme="dark"] .rating-btn.easy       { border-color: var(--hx-green);   background: var(--hx-green-light);  color: var(--hx-green); }
[data-theme="dark"] .rating-btn.easy:hover  { background: rgba(26,122,74,0.35); }
[data-theme="dark"] .hsk-search input { color: var(--hx-text); }
[data-theme="dark"] .hanzi-btn { color: var(--hx-text-muted); }
[data-theme="dark"] .audio-btn { color: var(--hx-text-muted); }
[data-theme="dark"] .btn-outline-secondary { color: var(--hx-text-muted); border-color: var(--hx-border); }
[data-theme="dark"] .btn-outline-secondary:hover { color: var(--hx-text); background: var(--hx-border); border-color: var(--hx-border); }
[data-theme="dark"] .st-decomp { background: rgba(56, 189, 248, 0.10); }
[data-theme="dark"] .st-scramble-tile { border-color: rgba(56, 189, 248, 0.5); }

/* ── Accessibility ───────────────────────────────────────────── */
/* Skip-to-content link: hidden until focused via Tab */
.hx-skip-link {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
    z-index: 10000;
}
.hx-skip-link:focus {
    position: fixed; left: 50%; top: 0.5rem;
    transform: translateX(-50%);
    width: auto; height: auto; overflow: visible;
    padding: 0.5rem 1.25rem; border-radius: 6px;
    background: #1a5276; color: #fff; /* dark blue: 8.5:1 contrast, works in both themes */
    font-size: 0.85rem; font-weight: 600; text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ── Global Polish ────────────────────────────────────────────── */
/* Focus indicators for keyboard accessibility */
:focus-visible {
    outline: 2px solid var(--hx-primary);
    outline-offset: 2px;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--hx-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(37, 99, 168, 0.15);
}
/* Smooth page transitions */
.hx-main, .ws-main-panel { animation: fadeIn 0.25s ease-out; }
/* Button press feedback */
button:active:not(:disabled) { transform: scale(0.97); }
/* Loading spinner utility class */
.hx-loading { display: inline-flex; align-items: center; gap: 0.4rem; }
.hx-loading::after {
    content: ''; width: 14px; height: 14px; border: 2px solid var(--hx-border);
    border-top-color: var(--hx-primary); border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
/* Smooth scroll behavior */
html { scroll-behavior: smooth; }
/* Selection color */
::selection { background: var(--hx-primary-light); color: var(--hx-primary-mid); }

/* ── Common Layout ─────────────────────────────────────────────── */
body { background: var(--hx-bg); color: var(--hx-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* ── Top Bar (Phase 25) ──────────────────────────────────────── */
.hx-header {
    background: var(--hx-card-bg); border-bottom: 1px solid var(--hx-border);
    padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.75rem;
    position: sticky; top: 0; z-index: var(--z-sticky, 100);
}
.hx-logo { font-size: 1.1rem; font-weight: 700; color: var(--hx-primary); text-decoration: none; white-space: nowrap; }
.hx-logo:hover { color: var(--hx-primary); }
.hx-topbar-utils { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.hx-topbar-action { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; }
@media (max-width: 576px) { .hx-topbar-user-label, .hx-topbar-action span { display: none; } }
.hx-topbar-link {
    font-size: 0.85rem; color: var(--hx-text-muted); text-decoration: none;
    padding: 0.3rem 0.6rem; border-radius: 6px; transition: all 0.15s; white-space: nowrap;
}
.hx-topbar-link:hover { background: var(--hx-primary-light); color: var(--hx-primary); }
.hx-sidebar-toggle { display: none; }

/* ── Left Sidebar (Phase 25) ─────────────────────────────────── */
.hx-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--hx-sidebar-w, 185px); background: var(--hx-card-bg);
    border-right: none;
    overflow-y: auto; z-index: var(--z-dropdown, 50);
    transition: transform 0.25s ease;
    display: flex; flex-direction: column;
}
/* Collapsed sidebar: icons only, labels hidden */
.hx-sidebar.hx-sidebar-collapsed .hx-sidebar-header,
.hx-sidebar.hx-sidebar-collapsed .hx-nav-group-label,
.hx-sidebar.hx-sidebar-collapsed .nav-label,
.hx-sidebar.hx-sidebar-collapsed .hx-classic-switch { display: none !important; }
.hx-sidebar.hx-sidebar-collapsed .nav-link { justify-content: center; padding: 0.5rem; }
.hx-sidebar.hx-sidebar-collapsed .nav-link i { margin-right: 0; font-size: 1.1rem; }
.hx-sidebar.hx-sidebar-collapsed { overflow-x: hidden; }

.hx-sidebar-resize {
    position: fixed; top: 0; bottom: 0;
    left: var(--hx-sidebar-w, 185px); width: 5px;
    cursor: col-resize; z-index: calc(var(--z-dropdown, 50) + 1);
    background: transparent; border-left: 1px solid var(--hx-border);
    transition: background 0.15s;
}
.hx-sidebar-resize:hover,
.hx-sidebar-resize.dragging { background: var(--hx-primary); opacity: 0.4; }
body.hx-sidebar-dragging { cursor: col-resize !important; user-select: none; }
body.hx-sidebar-dragging * { cursor: col-resize !important; }
.hx-sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--hx-border);
    flex-shrink: 0;
}
.hx-sidebar-header .hx-logo { font-size: 1rem; }
/* (header-actions removed — tour is now floating, classic switch is inline) */
.hx-classic-switch {
    font-size: 0.75rem !important; padding: 0.1rem 0.35rem !important;
    font-weight: 600; line-height: 1.2; color: var(--hx-primary);
}
.hx-classic-switch:hover { opacity: 1; }
.hx-sidebar-role { padding: 0.5rem 0.75rem 0.15rem; }
.hx-sidebar-nav { display: flex; flex-direction: column; padding: 0.35rem 0.35rem; gap: 1px; flex: 1; overflow-y: auto; }
.hx-sidebar-link {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.4rem 0.6rem; border-radius: 6px;
    font-size: 0.82rem; color: var(--hx-text-muted);
    text-decoration: none; transition: all 0.15s;
    position: relative;
}
.hx-sidebar-link i { font-size: 0.9rem; width: 1.1rem; text-align: center; }
.hx-sidebar-link:hover { background: var(--hx-surface); color: var(--hx-text); }
.hx-sidebar-link.active { background: var(--hx-primary-light); color: var(--hx-primary); font-weight: 600; }
.hx-sidebar-link .nav-badge { margin-left: auto; }

/* Section headers */
.hx-sidebar-section {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: #6b7280;
    padding: 0.55rem 0.6rem 0.15rem;
}
.hx-sidebar-divider {
    height: 1px; background: var(--hx-border); margin: 0.35rem 0.6rem;
}

/* Expandable parent button */
.hx-sidebar-expand {
    background: none; border: none; cursor: pointer; width: 100%;
    text-align: left; font-family: inherit;
}
.hx-expand-arrow {
    margin-left: auto; font-size: 0.7rem;
    transition: transform 0.2s ease; opacity: 0.5;
}
.hx-sidebar-expand.expanded .hx-expand-arrow { transform: rotate(180deg); }
.hx-sidebar-expand:hover .hx-expand-arrow { opacity: 1; }

/* Children panel */
.hx-sidebar-children {
    max-height: 0; overflow: hidden;
    transition: max-height 0.25s ease;
}
.hx-sidebar-children.open { max-height: 400px; }
.hx-sidebar-child {
    padding-left: 2.2rem !important;
    font-size: 0.8rem !important;
}
.hx-sidebar-child i { font-size: 0.85rem !important; }

.hx-sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.3); z-index: var(--z-dropdown, 49);
}

/* Sidebar shifts the top bar and main content on desktop */
body.hx-has-sidebar .hx-header { margin-left: var(--hx-sidebar-w, 185px); }
body.hx-has-sidebar .hx-main { margin-left: var(--hx-sidebar-w, 185px); }
body.hx-has-sidebar .ws-layout { margin-left: var(--hx-sidebar-w, 185px); }

.nav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    font-size: 0.75rem; font-weight: 700; line-height: 1;
    background: var(--hx-red); color: white; border-radius: 9px;
    margin-left: 4px; vertical-align: top;
}
.hx-bottom-link .nav-badge {
    position: absolute; top: -2px; right: -4px;
    min-width: 16px; height: 16px; font-size: 0.75rem;
    margin-left: 0;
}
.hx-nav-role-badge {
    font-size: 0.75rem; font-weight: 600; color: #374151;
    background: var(--hx-border); padding: 0.1rem 0.45rem; border-radius: 4px;
    white-space: nowrap;
}
.hx-main { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }

/* ── HSK Level Tabs ────────────────────────────────────────────── */
.hsk-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.hsk-tab {
    padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.82rem; font-weight: 600;
    border: 1px solid var(--hx-border); background: var(--hx-card-bg); color: var(--hx-text-muted);
    cursor: pointer; transition: all 0.15s; text-decoration: none;
}
.hsk-tab:hover { border-color: var(--hx-primary); color: var(--hx-primary); }
.hsk-tab.active { background: var(--hx-primary); color: white; border-color: var(--hx-primary); }
.hsk-count { font-size: 0.75rem; opacity: 0.7; margin-left: 0.2rem; }

/* ── Word Grid ─────────────────────────────────────────────────── */
.word-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; }
.word-card {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    padding: 0.75rem 1rem; display: flex; gap: 0.75rem; align-items: flex-start;
    transition: border-color 0.15s, box-shadow 0.2s, transform 0.15s; text-decoration: none; color: inherit;
}
.word-card:hover { border-color: var(--hx-primary); box-shadow: 0 4px 12px rgba(37,99,168,0.12); transform: translateY(-1px); }
.word-char {
    font-family: var(--hx-font-cjk);
    font-size: var(--text-cjk-browse); line-height: 1; color: var(--hx-text); min-width: 2rem; text-align: center;
}
.word-info { flex: 1; min-width: 0; }
.word-pinyin { font-size: 0.82rem; color: var(--hx-primary); font-weight: 500; }
.word-def { font-size: 0.78rem; color: var(--hx-text-muted); margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Compact Word List View ──────────────────────────────────── */
.word-list-table { width: 100%; border-collapse: collapse; }
.word-list-table th {
    font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--hx-text-faint); font-weight: 600; padding: var(--space-2) var(--space-3);
    text-align: left; border-bottom: 2px solid var(--hx-border);
}
.word-list-row {
    cursor: pointer; transition: background var(--hx-transition);
}
.word-list-row:hover { background: var(--hx-primary-light); }
.word-list-row td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--hx-border); }
.word-list-char {
    font-family: var(--hx-font-cjk); font-size: var(--text-lg); font-weight: 600; color: var(--hx-text);
}
.word-list-pinyin { font-size: var(--text-sm); color: var(--hx-primary); font-weight: 500; }
.word-list-def { font-size: var(--text-sm); color: var(--hx-text-muted); }

/* ── Search ────────────────────────────────────────────────────── */
.hsk-search { position: relative; max-width: 320px; margin-bottom: 1rem; }
.hsk-search input {
    width: 100%; padding: 0.45rem 0.75rem 0.45rem 2.2rem; border: 1px solid var(--hx-border);
    border-radius: 20px; font-size: 0.82rem; background: var(--hx-card-bg); outline: none;
}
.hsk-search input:focus { border-color: var(--hx-primary); box-shadow: 0 0 0 3px rgba(37,99,168,0.12); }
.hsk-search i { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--hx-text-faint); font-size: 0.85rem; }

/* ── Stats bar ─────────────────────────────────────────────────── */
.stats-bar {
    display: flex; gap: 1.5rem; margin-bottom: 1.25rem; padding: 0.75rem 1rem;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    flex-wrap: wrap; align-items: flex-start;
}
.stat-item { text-align: center; }
.stat-num { font-size: 1.25rem; font-weight: 700; color: var(--hx-primary); }
.stat-label { font-size: 0.75rem; color: var(--hx-text-faint); text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Progress bars ─────────────────────────────────────────────── */
.hx-progress-bar {
    height: 8px; background: var(--hx-surface); border-radius: 4px;
    overflow: hidden; margin-top: 0.3rem;
}
.hx-progress-fill {
    height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, var(--hx-primary), color-mix(in srgb, var(--hx-primary) 70%, var(--hx-green)));
    transition: width 0.5s var(--hx-spring);
}

/* ── Micro-unit cards ──────────────────────────────────────────── */
.unit-card {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    padding: 1rem; margin-bottom: 0.75rem;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.unit-card:hover { border-color: var(--hx-primary); box-shadow: 0 2px 8px rgba(2,132,199,0.08); }
.unit-title { font-weight: 600; font-size: 0.9rem; color: var(--hx-text); }
.unit-words {
    font-size: 0.82rem; color: var(--hx-text-muted); margin-top: 0.2rem;
    font-family: var(--hx-font-cjk); letter-spacing: 0.15em;
}
.unit-btn {
    padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.78rem; font-weight: 600;
    background: var(--hx-primary); color: white; border: none; text-decoration: none;
    white-space: nowrap; transition: background 0.15s;
}
.unit-btn:hover { background: var(--hx-primary-mid); color: white; }

/* ── View toggle ───────────────────────────────────────────────── */
.view-toggle { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; }

/* ── Study page layout ─────────────────────────────────────────── */
.study-container { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 768px) { .study-container { grid-template-columns: 1fr; } }

.study-hanzi-panel {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    padding: 1.5rem; text-align: center;
    display: flex; flex-direction: column; align-items: center;
}

/* ── Selected character display (left panel header) ────────────── */
.selected-char-display {
    display: flex; align-items: center; gap: 0.5rem; justify-content: center;
    margin-bottom: 0.5rem;
}
.selected-char-text {
    font-family: var(--hx-font-cjk); font-size: 2.5rem; line-height: 1.2;
    color: var(--hx-text); font-weight: 600;
}
.selected-char-pinyin {
    font-size: 1rem; color: var(--hx-primary); font-weight: 500;
}
.selected-char-audio {
    padding: 0.25rem 0.5rem; font-size: 0.78rem;
}

/* ── Character Structure (left panel: merged components + stroke) ─ */
.char-structure {
    width: 100%; text-align: left;
    margin-top: 1rem; padding-top: 0.75rem;
    border-top: 1px solid var(--hx-border);
}
.structure-type {
    font-size: 0.78rem; color: var(--hx-text-muted); margin-bottom: 0.35rem;
}
.component-tree {
    margin: 0.25rem 0; font-size: 0.88rem;
}
.component-item {
    display: flex; align-items: baseline; gap: 0.3rem;
    padding: 0.15rem 0; line-height: 1.4;
}
.component-branch {
    color: var(--hx-border); font-family: monospace; font-size: 0.8rem;
    width: 1rem; flex-shrink: 0;
}
.component-char {
    font-family: var(--hx-font-cjk); font-size: 1.1rem; color: var(--hx-text); font-weight: 500;
}
.component-pinyin {
    font-size: 0.78rem; color: var(--hx-primary);
}
.component-def {
    font-size: 0.78rem; color: var(--hx-text-muted);
}
.structure-radical {
    font-size: 0.78rem; color: var(--hx-text-muted); margin-top: 0.35rem;
}
.structure-stroke-img {
    margin-top: 0.5rem;
}
.structure-stroke-img img {
    max-width: 100%; height: auto; max-height: 80px; object-fit: contain;
    border-radius: 4px;
}
.study-info-panel {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    padding: 1.5rem;
}
.study-nav {
    margin-top: 1.25rem; display: flex; justify-content: space-between; align-items: center;
}

/* ── Character selector (multi-char words) ─────────────────────── */
.char-selector {
    display: flex; gap: 0.4rem; justify-content: center; margin-bottom: 0.75rem;
}
.char-tab {
    font-family: var(--hx-font-cjk); font-size: 1.5rem; line-height: 1;
    width: 2.5rem; height: 2.5rem; border-radius: 8px;
    border: 2px solid var(--hx-border); background: var(--hx-card-bg); color: var(--hx-text);
    cursor: pointer; transition: all 0.15s;
    display: flex; align-items: center; justify-content: center;
}
.char-tab:hover { border-color: var(--hx-primary); color: var(--hx-primary); }
.char-tab.active { border-color: var(--hx-primary); background: var(--hx-primary-light); color: var(--hx-primary); }

/* ── Hanzi Writer controls ─────────────────────────────────────── */
.hanzi-controls { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
.hanzi-btn {
    padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.82rem; font-weight: 500;
    border: 1px solid var(--hx-border); background: var(--hx-card-bg); cursor: pointer;
    transition: all 0.15s; display: inline-flex; align-items: center; gap: 0.3rem;
}
.hanzi-btn:hover { border-color: var(--hx-primary); color: var(--hx-primary); }
.hanzi-btn.active { background: var(--hx-primary); color: white; border-color: var(--hx-primary); }

/* ── Audio button ──────────────────────────────────────────────── */
.audio-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.4rem 0.75rem; border-radius: 20px; font-size: 0.82rem;
    border: 1px solid var(--hx-border); background: var(--hx-card-bg); cursor: pointer;
    transition: all 0.15s;
}
.audio-btn:hover { border-color: var(--hx-primary); color: var(--hx-primary); }

/* ── Slow / English audio buttons ─────────────────────────────── */
.audio-btn-slow, .audio-btn-en {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.2rem;
    background: none; border: 1px solid var(--hx-border); border-radius: 20px;
    padding: 0.3rem 0.6rem; font-size: var(--text-xs); color: var(--hx-text-muted);
    cursor: pointer; transition: all var(--hx-transition);
}
.audio-btn-slow:hover, .audio-btn-en:hover {
    border-color: var(--hx-primary); color: var(--hx-primary);
}
[data-theme="dark"] .audio-btn-slow, [data-theme="dark"] .audio-btn-en { color: var(--hx-text-muted); }

/* ── Mastery buttons ───────────────────────────────────────────── */
.mastery-actions { display: flex; gap: 0.5rem; justify-content: center; }
.mastery-btn {
    padding: 0.5rem 1.5rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600;
    border: none; cursor: pointer; transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.mastery-btn.know { background: var(--hx-primary-light); color: var(--hx-primary); }
.mastery-btn.know:hover { background: var(--hx-primary); color: white; }
.mastery-btn.dont-know { background: var(--hx-red-light); color: var(--hx-red); }
.mastery-btn.dont-know:hover { background: var(--hx-red); color: white; }

/* ── HSK badge ─────────────────────────────────────────────────── */
.hsk-badge {
    display: inline-block; padding: 0.15rem 0.5rem; border-radius: 12px;
    font-size: 0.75rem; font-weight: 600;
    background: var(--hx-primary-light); color: var(--hx-primary);
}

/* ── Semantic status badges (reading library, games, assignments) ── */
/*
 * Usage: <span class="hx-status-badge hx-status-pending">Pending</span>
 * Maps to the four-color system: blue=active/info, green=done,
 * yellow=pending/processing, red=error/rejected.
 */
.hx-status-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.18rem 0.55rem; border-radius: 10px;
    font-size: 0.75rem; font-weight: 600; line-height: 1.4;
    border: 1px solid transparent; white-space: nowrap;
}
/* pending — nothing started yet */
.hx-status-pending    { background: var(--hx-yellow-light); color: var(--hx-yellow);  border-color: var(--hx-yellow-border); }
/* processing / annotating — in progress */
.hx-status-processing { background: var(--hx-yellow-light); color: var(--hx-yellow);  border-color: var(--hx-yellow-border); }
/* annotated — halfway done */
.hx-status-annotated  { background: var(--hx-primary-light);color: var(--hx-primary); border-color: var(--hx-primary-border); }
/* ready — fully done, usable */
.hx-status-ready      { background: var(--hx-green-light);  color: var(--hx-green);   border-color: var(--hx-green-border); }
/* rejected / error */
.hx-status-rejected   { background: var(--hx-red-light);    color: var(--hx-red);     border-color: var(--hx-red-border); }
/* completed (student finished assignment) */
.hx-status-completed  { background: var(--hx-green-light);  color: var(--hx-green);   border-color: var(--hx-green-border); }
/* due soon */
.hx-status-due        { background: var(--hx-yellow-light); color: var(--hx-yellow);  border-color: var(--hx-yellow-border); }
/* overdue */
.hx-status-overdue    { background: var(--hx-red-light);    color: var(--hx-red);     border-color: var(--hx-red-border); }
/* game waiting */
.hx-status-waiting    { background: var(--hx-yellow-light); color: var(--hx-yellow);  border-color: var(--hx-yellow-border); }
/* game active */
.hx-status-active     { background: var(--hx-green-light);  color: var(--hx-green);   border-color: var(--hx-green-border); }
/* game ended */
.hx-status-ended      { background: var(--hx-border);       color: var(--hx-text-muted); }

/* Processing spinner on yellow badge */
.hx-status-processing::before {
    content: ''; display: inline-block; width: 8px; height: 8px;
    border: 1.5px solid var(--hx-yellow-border);
    border-top-color: var(--hx-yellow); border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ── Decomposition ─────────────────────────────────────────────── */
.decomposition {
    font-family: var(--hx-font-cjk); font-size: 1.5rem;
    color: var(--hx-text-muted); letter-spacing: 0.3em;
}

/* ── Example sentence ──────────────────────────────────────────── */
.example-block {
    background: var(--hx-bg); border-radius: var(--hx-radius);
    padding: 0.75rem 1rem; margin-top: 0.35rem;
}
.example-sentence { font-family: var(--hx-font-cjk); font-size: 1.1rem; }
.example-pinyin { font-size: 0.82rem; color: var(--hx-primary); margin-top: 0.2rem; }
.example-translation { font-size: 0.82rem; color: var(--hx-text-muted); margin-top: 0.2rem; }

/* ── Related words ─────────────────────────────────────────────── */
.related-words { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.related-word-chip {
    padding: 0.25rem 0.75rem; border-radius: 16px; font-size: 0.78rem;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); cursor: pointer;
    transition: all 0.15s; text-decoration: none; color: var(--hx-text);
}
.related-word-chip:hover { border-color: var(--hx-primary); color: var(--hx-primary); }

/* ── Word context bar (multi-char words) ──────────────────────── */
.word-context-bar {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    padding: 0.5rem 0.75rem; margin-bottom: 0.75rem;
    background: var(--hx-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    font-size: 0.85rem;
}
.word-context-char {
    font-family: var(--hx-font-cjk); font-size: 1.1rem; font-weight: 600; color: var(--hx-text);
}

/* ── Section headings ──────────────────────────────────────────── */
.info-section-label {
    font-size: 0.75rem; text-transform: uppercase; color: var(--hx-text-faint);
    letter-spacing: 0.05em; margin-top: 0.75rem; margin-bottom: 0.25rem;
}

/* ── Review page ──────────────────────────────────────────────── */
.review-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.25rem; padding: 0.75rem 1rem;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
}
.review-progress { flex: 1; margin-right: 1rem; }
.review-progress-bar {
    height: 10px; background: var(--hx-surface); border-radius: 5px; overflow: hidden;
}
.review-progress-fill {
    height: 100%; border-radius: 5px;
    background: linear-gradient(90deg, var(--hx-primary), color-mix(in srgb, var(--hx-primary) 70%, var(--hx-green)));
    transition: width 0.5s var(--hx-spring);
}
.review-stats {
    font-size: 0.85rem; font-weight: 600; color: var(--hx-text-muted); white-space: nowrap;
}

.review-card {
    max-width: 600px; margin: 0 auto;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    padding: 2rem; text-align: center; min-height: 300px;
    cursor: pointer; box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s, transform 0.2s var(--hx-spring);
}
.review-card:hover { box-shadow: var(--shadow-md); }

.review-char {
    font-family: var(--hx-font-cjk); font-size: 5rem; color: var(--hx-text);
    line-height: 1.2; margin-bottom: 1rem;
}
.review-hint { font-size: 0.85rem; color: var(--hx-text-faint); }

.review-pinyin {
    font-size: 1.2rem; color: var(--hx-primary); font-weight: 500; margin-bottom: 0.5rem;
}
.review-definition {
    font-size: 1rem; color: var(--hx-text); margin-bottom: 1rem;
}

/* ── Rating buttons ───────────────────────────────────────────── */
.review-ratings {
    display: flex; gap: 0.5rem; justify-content: center; margin-top: 1.5rem;
    flex-wrap: wrap;
}
.rating-btn {
    flex: 1; min-width: 70px; max-width: 120px;
    padding: 0.75rem 0.75rem; border-radius: var(--hx-radius);
    font-size: 0.85rem; font-weight: 600; border: 2px solid; cursor: pointer;
    transition: all 0.15s; text-align: center; line-height: 1.3;
}
.rating-btn .rating-desc {
    display: block; font-size: 0.68rem; font-weight: 400; opacity: 0.6; margin-top: 0.1rem;
}
.rating-btn .rating-interval {
    display: block; font-size: 0.75rem; font-weight: 400; opacity: 0.8;
}
.rating-btn .rating-key {
    display: inline-block; font-size: 0.75rem; font-weight: 700; opacity: 0.5;
    background: var(--hx-border); border-radius: 3px; padding: 0 0.3rem;
    margin-right: 0.2rem; vertical-align: baseline; font-family: inherit;
    border: 1px solid var(--hx-border);
}
.rating-btn.again { border-color: #fca5a5; background: #fef2f2; color: #991b1b; }
.rating-btn.again:hover { background: #fca5a5; color: #7f1d1d; }
.rating-btn.hard { border-color: #fbbf24; background: #fffbeb; color: #92400e; }
.rating-btn.hard:hover { background: #fbbf24; color: #78350f; }
.rating-btn.good { border-color: var(--hx-primary-light); background: #f0f9ff; color: var(--hx-primary); }
.rating-btn.good:hover { background: var(--hx-primary-light); color: var(--hx-primary); }
.rating-btn.easy { border-color: #93c5fd; background: #eff6ff; color: #1e40af; }
.rating-btn.easy:hover { background: #93c5fd; color: #1e3a8a; }

/* ── Review banner (home page) ────────────────────────────────── */
.review-banner { margin-bottom: 1rem; }
.review-banner-content {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--hx-amber-light); border: 1px solid var(--hx-amber); border-radius: var(--hx-radius);
    font-size: 0.85rem; color: var(--hx-amber);
}
.review-banner-content .unit-btn {
    margin-left: auto; padding: 0.35rem 0.85rem; font-size: 0.78rem;
}

/* ── Session summary ──────────────────────────────────────────── */
.review-summary {
    max-width: 500px; margin: 2rem auto; text-align: center;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    padding: 2rem;
}
.review-summary h3 { color: var(--hx-primary); margin-bottom: 1rem; }
.summary-stat {
    display: inline-flex; flex-direction: column; align-items: center;
    margin: 0 1rem 1rem;
}
.summary-stat-num { font-size: 1.5rem; font-weight: 700; color: var(--hx-primary); }
.summary-stat-label {
    font-size: 0.75rem; text-transform: uppercase; color: var(--hx-text-faint);
    letter-spacing: 0.05em;
}
.summary-actions {
    display: flex; gap: 0.75rem; justify-content: center; margin-top: 1.5rem;
}

/* ── Loading ───────────────────────────────────────────────────── */
.loading { text-align: center; padding: 3rem; color: var(--hx-text-faint); }
.loading i { font-size: 1.5rem; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Animations ───────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.hx-fade-in { animation: fadeIn 0.3s ease-out; }
@keyframes cardFlip { 0% { transform: rotateY(0deg); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0deg); } }
.review-card.flipping { animation: cardFlip 0.4s ease-in-out; }

/* ── Wave 1: Staggered entrance system ───────────────────────── */
@keyframes revealUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes revealScale {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}
.stagger-in > * {
    opacity: 0;
    animation: revealUp 0.35s ease-out forwards;
}
.stagger-in > *:nth-child(1) { animation-delay: 0.04s; }
.stagger-in > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-in > *:nth-child(3) { animation-delay: 0.16s; }
.stagger-in > *:nth-child(4) { animation-delay: 0.22s; }
.stagger-in > *:nth-child(5) { animation-delay: 0.28s; }
.stagger-in > *:nth-child(6) { animation-delay: 0.34s; }
.stagger-in > *:nth-child(7) { animation-delay: 0.38s; }
.stagger-in > *:nth-child(8) { animation-delay: 0.42s; }
.stagger-in > *:nth-child(n+9) { animation-delay: 0.46s; }

/* Grid stagger for word cards (faster, subtler) */
.stagger-grid > * {
    opacity: 0;
    animation: revealUp 0.25s ease-out forwards;
}
.stagger-grid > *:nth-child(-n+4)  { animation-delay: 0.03s; }
.stagger-grid > *:nth-child(n+5):nth-child(-n+8)  { animation-delay: 0.08s; }
.stagger-grid > *:nth-child(n+9):nth-child(-n+12) { animation-delay: 0.13s; }
.stagger-grid > *:nth-child(n+13):nth-child(-n+16) { animation-delay: 0.18s; }
.stagger-grid > *:nth-child(n+17) { animation-delay: 0.22s; }

/* Scale entrance for hero elements */
.reveal-scale { animation: revealScale 0.4s ease-out; }

/* ── Wave 1: Smooth dark mode transition ─────────────────────── */
:root, [data-theme="dark"] {
    transition: background-color 0.25s ease, color 0.25s ease;
}
body, .hx-main, .hx-header, .hx-bottom-nav,
.review-card, .word-card, .unit-card, .grammar-card,
.hx-card, .dash-streak-card, .focus-card, .focus-item,
.hx-coach-hero, .hx-coach-strip, .hx-next-item, .hx-hero-cta,
.ai-card-section, .session-summary {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ── Wave 1: Chevron rotation for collapsible toggles ────────── */
.ai-section-header i.bi-chevron-down,
.ai-section-header i.bi-chevron-right,
.collapsible-chevron {
    transition: transform 0.2s ease;
}
.ai-section-header.open i.bi-chevron-down,
.ai-section-header.open i.bi-chevron-right,
.collapsible-chevron.open {
    transform: rotate(180deg);
}

/* ── Wave 1: Button press & pulse feedback ───────────────────── */
.hanzi-btn, .unit-btn, .mastery-btn, .rating-btn,
.audio-btn, .audio-btn-inline, .hsk-tab, .view-toggle-btn,
.char-tab, .speed-time-btn, .tone-choice-btn, .sentence-tile,
.focus-item, .dash-plan-item a {
    transition: all var(--hx-transition);
}
@keyframes btnPulse {
    0% { box-shadow: 0 0 0 0 rgba(2,132,199,0.4); }
    70% { box-shadow: 0 0 0 8px rgba(2,132,199,0); }
    100% { box-shadow: 0 0 0 0 rgba(2,132,199,0); }
}
.btn-pulse { animation: btnPulse 0.5s ease-out; }

/* ── R1: Micro-interactions — button press, card lift, progress easing ── */
.hanzi-btn:active, .unit-btn:active, .mastery-btn:active,
.rating-btn:active, .audio-btn:active {
    transform: scale(0.96);
    transition-duration: 0.08s;
}
.review-card, .learn-card, .dash-panel, .dash-streak-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.review-card:hover, .learn-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.hx-progress-fill {
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Wave 1: Focus card gentle attention pulse ───────────────── */
@keyframes focusPulse {
    0%, 100% { box-shadow: var(--shadow-sm); }
    50% { box-shadow: 0 4px 16px rgba(2,132,199,0.15); }
}
.focus-card-pulse { animation: focusPulse 3s ease-in-out 1; }

/* ── Wave 1: Skeleton shimmer for loading states ─────────────── */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--hx-border) 25%, var(--hx-bg) 50%, var(--hx-border) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}
.skeleton-line {
    height: 0.9rem; margin-bottom: 0.5rem; border-radius: 4px;
    background: linear-gradient(90deg, var(--hx-border) 25%, var(--hx-bg) 50%, var(--hx-border) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}
.skeleton-line:nth-child(2) { width: 85%; animation-delay: 0.1s; }
.skeleton-line:nth-child(3) { width: 65%; animation-delay: 0.2s; }

/* ── Wave 2: Card directional slide ──────────────────────────── */
@keyframes slideOutLeft {
    to { opacity: 0; transform: translateX(-60px); }
}
@keyframes slideOutRight {
    to { opacity: 0; transform: translateX(60px); }
}
@keyframes slideInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}
.slide-out-left { animation: slideOutLeft 0.2s ease-in forwards; }
.slide-out-right { animation: slideOutRight 0.2s ease-in forwards; }
.slide-in-up { animation: slideInUp 0.25s ease-out; }
.slide-in-right { animation: slideInRight 0.25s ease-out; }
.slide-in-left { animation: slideInLeft 0.25s ease-out; }

/* ── Wave 2: Character crossfade ─────────────────────────────── */
@keyframes charFadeOut { to { opacity: 0; } }
@keyframes charFadeIn { from { opacity: 0; } to { opacity: 1; } }
.char-fade-out { animation: charFadeOut 0.15s ease-in forwards; }
.char-fade-in { animation: charFadeIn 0.2s ease-out; }

/* ── Wave 2: Session summary scale entrance ──────────────────── */
@keyframes summaryReveal {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.summary-reveal { animation: summaryReveal 0.4s ease-out; }

/* ── Wave 2: Mastery button pulse on action ──────────────────── */
@keyframes masteryPulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.06); }
    100% { transform: scale(1); }
}
.mastery-pulse { animation: masteryPulse 0.35s ease-out; }

/* ── Wave 4: Streak flame evolution ──────────────────────────── */
.streak-flame { display: inline; }
.streak-flame-7 { filter: brightness(1.2); }
.streak-flame-30 {
    filter: brightness(1.3) saturate(1.3);
    text-shadow: 0 0 6px rgba(245,158,11,0.4);
}
.streak-flame-100 {
    filter: brightness(1.4) saturate(1.5);
    text-shadow: 0 0 10px rgba(245,158,11,0.6), 0 0 20px rgba(245,158,11,0.3);
}

/* ── Wave 4: Session excellence golden border ────────────────── */
.session-excellent {
    border: 2px solid var(--hx-amber) !important;
    box-shadow: 0 0 16px rgba(245,158,11,0.15) !important;
}
.session-excellent-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    color: var(--hx-amber); font-weight: 700; font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}

/* ── Wave 4: First-word celebration ──────────────────────────── */
@keyframes celebratePop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.celebrate-pop { animation: celebratePop 0.5s ease-out; }

/* ── Wave 5: Nav sliding indicator (legacy, sidebar replaces horizontal nav) ── */
.hx-nav-indicator { display: none; }

/* ── Wave 6: Universal exercise card system ──────────────────── */
.exercise-card {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: 12px; padding: var(--space-5);
    max-width: 520px; margin: 0 auto;
    position: relative; overflow: hidden;
}
.exercise-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-4); font-size: var(--text-sm); color: var(--hx-text-muted);
}
.exercise-skill-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.15rem 0.5rem; border-radius: 12px; font-size: var(--text-xs);
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
}
.skill-listen { background: var(--hx-primary-light); color: var(--hx-primary-mid); }
.skill-read   { background: #dcfce7; color: #15803d; }
.skill-speak  { background: #fef9c3; color: #a16207; }
.skill-write  { background: #fee2e2; color: #b91c1c; }
[data-theme="dark"] .skill-listen { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .skill-read   { background: #14532d; color: #86efac; }
[data-theme="dark"] .skill-speak  { background: #422006; color: #fde68a; }
[data-theme="dark"] .skill-write  { background: #451a1a; color: #fca5a5; }

.exercise-progress-dots {
    display: flex; gap: 4px; align-items: center;
}
.exercise-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--hx-border); transition: background 0.2s ease;
}
.exercise-dot.done { background: var(--hx-primary); }
.exercise-dot.active {
    background: var(--hx-primary); width: 10px; height: 10px;
}

.exercise-instruction {
    font-size: var(--text-base); color: var(--hx-text-muted);
    margin-bottom: var(--space-4); text-align: center;
}
.exercise-stimulus {
    text-align: center; padding: var(--space-4) 0;
    min-height: 120px; display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: var(--space-2);
}
.exercise-stimulus-char {
    font-size: var(--text-cjk-study); font-family: var(--hx-font-cjk);
    font-weight: 700;
}
.exercise-response {
    margin-top: var(--space-3);
}
.exercise-actions {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: var(--space-4); padding-top: var(--space-3);
    border-top: 1px solid var(--hx-border);
}

/* Exercise feedback states */
@keyframes correctFlash {
    0% { border-color: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,0.3); }
    50% { box-shadow: 0 0 0 6px rgba(22,163,74,0); }
    100% { border-color: var(--hx-border); }
}
@keyframes incorrectFlash {
    0% { border-color: var(--hx-red); box-shadow: 0 0 0 0 rgba(220,38,38,0.3); }
    50% { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
    100% { border-color: var(--hx-border); }
}
.exercise-correct { animation: correctFlash 0.6s ease-out; }
.exercise-incorrect { animation: incorrectFlash 0.6s ease-out; }

/* ── Wave 6: Page-turn card transition ───────────────────────── */
@keyframes cardPageIn {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes cardPageOut {
    to { opacity: 0; transform: translateX(-50px); }
}
.card-page-in { animation: cardPageIn 0.25s ease-out; }
.card-page-out { animation: cardPageOut 0.2s ease-in forwards; }

/* ── Wave 6: Phase interstitial ──────────────────────────────── */
.phase-interstitial {
    text-align: center; padding: var(--space-6);
    animation: revealScale 0.35s ease-out;
}
.phase-interstitial-icon {
    font-size: 2.5rem; margin-bottom: var(--space-3);
}
.phase-interstitial-title {
    font-size: var(--text-lg); font-weight: 700; color: var(--hx-text);
    margin-bottom: var(--space-2);
}
.phase-interstitial-subtitle {
    font-size: var(--text-sm); color: var(--hx-text-muted);
}

/* ── Wave 7: Teacher traffic-light status grid ───────────────── */
.teacher-status-grid {
    display: flex; gap: var(--space-2); margin-bottom: var(--space-4);
}
.teacher-status-cell {
    flex: 1; text-align: center; padding: var(--space-3);
    border-radius: var(--hx-radius); border: 1px solid var(--hx-border);
    background: var(--hx-card-bg); cursor: pointer;
    transition: all 0.15s ease;
}
.teacher-status-cell:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.teacher-status-num { font-size: var(--text-xl); font-weight: 700; display: block; }
.teacher-status-label { font-size: var(--text-xs); color: var(--hx-text-muted); text-transform: uppercase; }
.status-active .teacher-status-num { color: var(--hx-green); }
.status-slow .teacher-status-num   { color: var(--hx-yellow); }
.status-stuck .teacher-status-num  { color: var(--hx-red); }
.status-gone .teacher-status-num { color: var(--hx-text-faint); }

/* Teacher student narrative card */
.student-narrative {
    padding: var(--space-4); background: var(--hx-card-bg);
    border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    line-height: 1.7; font-size: var(--text-sm); color: var(--hx-text);
}
.student-narrative strong { color: var(--hx-primary); }
.student-narrative .skill-inline {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-weight: 600;
}
.student-narrative .skill-ok { color: var(--hx-success, #16a34a); }
.student-narrative .skill-warn { color: var(--hx-amber); }
.student-narrative .skill-weak { color: var(--hx-red); }

/* ── Wave 8: Scenario magazine layout ────────────────────────── */
.scenario-hero {
    text-align: center; padding: var(--space-6) var(--space-4);
    margin-bottom: var(--space-5);
}
.scenario-title-zh {
    font-size: var(--text-2xl); font-family: var(--hx-font-cjk);
    font-weight: 700; margin-bottom: var(--space-1);
}
.scenario-title-en {
    font-size: var(--text-lg); color: var(--hx-text-muted); margin-bottom: var(--space-4);
}
.scenario-chapter-track {
    display: flex; align-items: center; gap: var(--space-2);
    justify-content: center; margin-bottom: var(--space-3);
    font-size: var(--text-sm); color: var(--hx-text-muted);
}
.scenario-track-dot {
    width: 10px; height: 10px; border-radius: 50%; background: var(--hx-border);
    transition: background 0.2s;
}
.scenario-track-dot.done { background: var(--hx-primary); }
.scenario-track-dot.current {
    background: var(--hx-primary); width: 12px; height: 12px;
    box-shadow: 0 0 0 3px rgba(2,132,199,0.2);
}
.scenario-track-line {
    flex: 1; max-width: 40px; height: 2px; background: var(--hx-border);
}
.scenario-track-line.done { background: var(--hx-primary); }

.scenario-previously {
    background: var(--hx-bg); border-left: 3px solid var(--hx-primary);
    padding: var(--space-3) var(--space-4); border-radius: 0 var(--hx-radius) var(--hx-radius) 0;
    font-size: var(--text-sm); color: var(--hx-text-muted);
    margin-bottom: var(--space-4);
}

.scenario-vocab-preview {
    display: flex; gap: var(--space-3); justify-content: center;
    flex-wrap: wrap; margin: var(--space-4) 0;
}
.scenario-vocab-chip {
    text-align: center; padding: var(--space-2) var(--space-3);
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); cursor: pointer;
    transition: all 0.15s;
}
.scenario-vocab-chip:hover { border-color: var(--hx-primary); }
.scenario-vocab-char {
    font-size: var(--text-lg); font-family: var(--hx-font-cjk);
    font-weight: 700; display: block;
}
.scenario-vocab-def {
    font-size: var(--text-xs); color: var(--hx-text-muted);
}

.scenario-cultural-note {
    display: flex; gap: var(--space-3); align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    background: var(--hx-amber-light); border-radius: var(--hx-radius);
    font-size: var(--text-sm); color: var(--hx-text);
    margin-top: var(--space-4);
}
.scenario-cultural-note i { color: var(--hx-amber); font-size: var(--text-lg); flex-shrink: 0; }

/* ── Wave 8: Graded reader clean mode ────────────────────────── */
.reader-container {
    max-width: 640px; margin: 0 auto; padding: var(--space-5) var(--space-4);
}
.reader-text {
    font-family: var(--hx-font-cjk); font-size: var(--text-lg);
    line-height: 2; color: var(--hx-text);
}
.reader-word {
    cursor: pointer; transition: background-color 0.1s;
    border-radius: 2px; padding: 0 1px;
}
.reader-word:hover { background: var(--hx-primary-light); }
.reader-word-unknown {
    border-bottom: 1px dotted var(--hx-text-muted);
}
.reader-popup {
    position: absolute; background: var(--hx-card-bg);
    border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    padding: var(--space-3); box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown); min-width: 160px;
    animation: revealScale 0.15s ease-out;
}
.reader-popup-char {
    font-size: var(--text-xl); font-family: var(--hx-font-cjk); font-weight: 700;
}
.reader-popup-pinyin { color: var(--hx-primary); font-size: var(--text-sm); }
.reader-popup-def { color: var(--hx-text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }
.reader-popup-actions {
    display: flex; gap: var(--space-2); margin-top: var(--space-2);
    border-top: 1px solid var(--hx-border); padding-top: var(--space-2);
}

/* ── Toast notifications ──────────────────────────────────────── */
#hx-toast-container {
    position: fixed; top: 1rem; right: 1rem; z-index: var(--z-toast);
    display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none;
}
.hx-toast {
    pointer-events: auto; padding: 0.75rem 1rem; border-radius: var(--hx-radius);
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); font-size: 0.85rem; color: var(--hx-text);
    display: flex; align-items: center; gap: 0.75rem; min-width: 250px; max-width: 400px;
    transform: translateX(120%); transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0;
}
.hx-toast-show { transform: translateX(0); opacity: 1; }
.hx-toast-hide { transform: translateX(120%); opacity: 0; }
.hx-toast-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--hx-text-muted); padding: 0; margin-left: auto; }
.hx-toast-success { border-left: 3px solid var(--hx-green); }
.hx-toast-error   { border-left: 3px solid var(--hx-red); }
.hx-toast-info    { border-left: 3px solid var(--hx-primary); }

/* ── Modal overlay ────────────────────────────────────────────── */
.hx-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    opacity: 0; transition: opacity 0.3s ease;
    pointer-events: none;
}
.hx-modal-overlay.hx-modal-show { opacity: 1; pointer-events: auto; }
.hx-modal {
    background: var(--hx-card-bg); border-radius: 12px; padding: 2rem;
    max-width: 420px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    transform: translateY(20px); transition: transform 0.3s ease;
}
.hx-modal-show .hx-modal { transform: translateY(0); }

/* ── Daily Session CTA ──────────────────────────────────────── */
.hx-session-cta {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.25rem; border-radius: 12px;
    background: linear-gradient(135deg, var(--hx-primary), var(--hx-primary-mid));
    color: #fff; text-decoration: none;
    box-shadow: 0 2px 8px rgba(59,125,216,0.2);
    transition: transform 0.15s, box-shadow 0.15s;
    margin-bottom: 1rem;
}
.hx-session-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(59,125,216,0.3);
    color: #fff; text-decoration: none;
}
.hx-session-cta--done {
    background: linear-gradient(135deg, var(--hx-green), var(--hx-green-mid));
    box-shadow: 0 2px 8px rgba(91,140,90,0.2);
    cursor: default;
}
.hx-session-cta__icon {
    font-size: 1.5rem; flex-shrink: 0;
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.2); border-radius: 10px;
}
.hx-session-cta__text { flex: 1; min-width: 0; }
.hx-session-cta__title {
    display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.3;
}
.hx-session-cta__detail {
    display: block; font-size: 0.78rem; opacity: 0.85; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hx-session-cta__arrow { font-size: 1.1rem; opacity: 0.7; flex-shrink: 0; }
.hx-session-selector {
    display: flex; gap: 0.5rem; margin-bottom: 1rem;
}
.hx-session-opt {
    flex: 1; padding: 0.5rem 0.75rem; border-radius: 8px;
    border: 1px solid var(--hx-border); background: var(--hx-card-bg);
    color: var(--hx-text-muted); font-size: 0.8rem; font-weight: 500;
    cursor: pointer; transition: all 0.15s; text-align: center;
}
.hx-session-opt:hover { border-color: var(--hx-primary); color: var(--hx-primary); }
.hx-session-opt.active {
    background: var(--hx-primary-light); border-color: var(--hx-primary);
    color: var(--hx-primary); font-weight: 600;
}

/* ── Dashboard ────────────────────────────────────────────────── */
.dash-streak-card {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); padding: 1.5rem; text-align: center; margin-bottom: 1.25rem;
}
.dash-streak-num { font-size: 2.5rem; font-weight: 700; color: var(--hx-primary); }
.dash-streak-label { font-size: 0.85rem; color: var(--hx-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dash-panel {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); padding: 1rem;
}

.dash-activity-chart {
    display: flex; align-items: flex-end; gap: 0.5rem; height: 120px; padding-top: 0.5rem;
}
.dash-activity-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.dash-activity-bar { width: 100%; max-width: 32px; background: var(--hx-primary); border-radius: 4px 4px 0 0; min-height: 3px; transition: height 0.4s ease; }
.dash-activity-count { font-size: 0.75rem; color: var(--hx-text-muted); margin-top: 0.25rem; }
.dash-activity-label { font-size: 0.75rem; color: var(--hx-text-faint); }
.dash-state-item { margin-bottom: 0.5rem; }

/* ── Daily Learning Plan (hero card) ─────────────────────────── */
.dash-daily-plan {
    background: linear-gradient(135deg, rgba(2,132,199,0.08) 0%, rgba(5,150,105,0.06) 100%);
    border: 2px solid var(--hx-primary); border-radius: var(--hx-radius);
    padding: 1.25rem; margin-bottom: 1.25rem;
}
.dash-daily-plan-header {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 1.05rem; font-weight: 700; color: var(--hx-text); margin-bottom: 0.75rem;
}
.dash-daily-plan-header i { color: var(--hx-primary); font-size: 1.1rem; }
.dash-daily-plan-time {
    margin-left: auto; font-size: 0.78rem; font-weight: 400;
    color: var(--hx-text-muted); background: var(--hx-card-bg);
    padding: 0.15rem 0.5rem; border-radius: 999px;
}
.dash-daily-plan-items { display: flex; flex-direction: column; gap: 0.5rem; }
.dash-plan-item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.65rem 0.75rem; border-radius: 8px;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    transition: box-shadow 0.2s;
}
.dash-plan-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.dash-plan-item.primary {
    border-color: var(--hx-primary); background: rgba(2,132,199,0.04);
}
.dash-plan-item i { font-size: 1.1rem; width: 1.5rem; text-align: center; flex-shrink: 0; }
.dash-plan-text { flex: 1; font-size: 0.85rem; color: var(--hx-text); }
.dash-plan-text em { font-style: italic; color: var(--hx-text-muted); }
.dash-plan-action { font-size: 0.78rem; padding: 0.25rem 0.65rem; text-decoration: none; white-space: nowrap; }

/* ── Review writing practice ─────────────────────────────────── */
#review-hanzi-target { display: flex; justify-content: center; }
#review-hanzi-target svg { border: 1px solid var(--hx-border); border-radius: var(--hx-radius); }

/* ── AI Tools ─────────────────────────────────────────────────── */
.ai-settings-bar {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem;
    padding: 0.75rem 1rem; margin-bottom: 1.25rem;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
}
.ai-settings-left { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.ai-settings-right { display: flex; gap: 0.5rem; }
.ai-settings-label { font-size: 0.82rem; font-weight: 600; color: var(--hx-text-muted); white-space: nowrap; }
.ai-active-model {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.75rem; border-radius: 12px; font-size: 0.78rem; font-weight: 600;
    background: var(--hx-primary); color: white; white-space: nowrap;
}
.ai-provider-badges { display: flex; flex-direction: column; gap: 0.4rem; flex-wrap: wrap; }
.ai-provider-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.5rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600;
    background: var(--hx-primary-light); color: var(--hx-primary); text-transform: capitalize;
}
.ai-provider-badge.ai-badge-active {
    border: 1.5px solid var(--hx-primary);
}
.ai-badge-set-default {
    background: none; border: none; cursor: pointer; font: inherit; color: inherit;
    padding: 0; text-transform: capitalize;
}
.ai-badge-set-default:hover { opacity: 0.8; }
.ai-badge-model { font-weight: 400; opacity: 0.7; font-size: 0.75rem; }
.ai-badge-delete {
    background: none; border: none; cursor: pointer; font-size: 0.9rem; line-height: 1;
    color: var(--hx-text-faint); padding: 0 0.15rem; margin-left: 0.1rem;
}
.ai-badge-delete:hover { color: var(--hx-red); }

/* Provider badge row with capabilities */
.ai-provider-badge-row {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    padding: 0.35rem 0.5rem; border-radius: 8px;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
}
.ai-provider-badge-row.ai-badge-active {
    border-color: var(--hx-primary); background: var(--hx-primary-light);
}

/* Capability badges */
.ai-cap-badges { display: flex; gap: 0.25rem; flex-wrap: wrap; align-items: center; }
.ai-cap-badge {
    display: inline-flex; align-items: center;
    padding: 0.1rem 0.35rem; border-radius: 6px;
    font-size: 0.68rem; font-weight: 500; white-space: nowrap;
}
.ai-cap-badge.cap-yes {
    background: var(--hx-accent-light, #e8f5e9); color: var(--hx-green, var(--hx-green));
}
.ai-cap-badge.cap-no {
    background: var(--hx-surface, #f5f5f5); color: var(--hx-text-faint, #999);
}

/* BYOK Wizard steps indicator */
.ai-wizard-steps {
    display: flex; gap: 0.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--hx-border);
}
.ai-wiz-step {
    font-size: 0.78rem; color: var(--hx-text-faint); font-weight: 500;
    padding: 0.2rem 0.5rem; border-radius: 1rem;
}
.ai-wiz-step.active {
    color: var(--hx-primary); background: var(--hx-primary-light); font-weight: 600;
}
.ai-wiz-step.done {
    color: var(--hx-green, var(--hx-green));
}

/* Wizard provider cards */
.ai-wiz-providers { display: flex; flex-direction: column; gap: 0.5rem; }
.ai-wiz-provider-card {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.75rem 1rem; border-radius: var(--hx-radius);
    border: 1.5px solid var(--hx-border); background: var(--hx-card-bg);
    cursor: pointer; transition: all 0.15s;
}
.ai-wiz-provider-card:hover {
    border-color: var(--hx-primary); box-shadow: 0 2px 8px rgba(2,132,199,0.1);
}
.ai-wiz-provider-card.configured {
    opacity: 0.65;
}
.ai-wiz-provider-card.configured:hover {
    opacity: 0.85;
}
.ai-wiz-provider-header {
    display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9rem;
}
.ai-wiz-provider-header i { font-size: 1.1rem; color: var(--hx-primary); }
.ai-wiz-provider-name { flex: 1; }
.ai-wiz-configured-tag {
    font-size: 0.7rem; font-weight: 500; color: var(--hx-green, var(--hx-green));
    background: var(--hx-accent-light, #e8f5e9); padding: 0.1rem 0.4rem;
    border-radius: 0.75rem;
}
.ai-wiz-cap-count {
    font-size: 0.75rem; font-weight: 500; color: var(--hx-text-muted);
}
.ai-wiz-provider-caps { padding-left: 1.5rem; }

/* Wizard step 2 - selected provider header */
.ai-wiz-selected-provider {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.75rem; border-radius: var(--hx-radius);
    background: var(--hx-primary-light); margin-bottom: 0.75rem;
    font-size: 0.9rem;
}
.ai-wiz-selected-provider i { color: var(--hx-primary); }
.ai-wiz-change-btn {
    margin-left: auto; background: none; border: none;
    color: var(--hx-primary); font-size: 0.78rem; cursor: pointer;
    text-decoration: underline; padding: 0;
}

/* Wizard step 3 - success */
.ai-wiz-success-box {
    padding: 0.75rem 1rem; border-radius: var(--hx-radius);
    background: var(--hx-accent-light, #e8f5e9); border: 1px solid var(--hx-green, var(--hx-green));
    margin-bottom: 0.75rem;
}
.ai-wiz-coverage {
    padding: 0.75rem 1rem; border-radius: var(--hx-radius);
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    margin-bottom: 0.75rem;
}
.ai-wiz-suggest {
    display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0.6rem 0.75rem; border-radius: var(--hx-radius);
    background: var(--hx-amber-bg, #fff8e1); border: 1px solid var(--hx-amber, #f59e0b);
    font-size: 0.82rem; margin-bottom: 0.5rem;
}
@media (max-width: 480px) {
    .ai-wiz-provider-card { padding: 0.6rem; }
    .ai-cap-badges { gap: 0.2rem; }
    .ai-cap-badge { font-size: 0.65rem; padding: 0.15rem 0.3rem; }
}

.ai-features-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.75rem;
}
.ai-feature-card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem; background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); cursor: pointer; transition: all 0.15s;
}
.ai-feature-card:hover { border-color: var(--hx-primary); box-shadow: 0 2px 8px rgba(2,132,199,0.08); }
.ai-feature-icon { font-size: 1.75rem; color: var(--hx-primary); flex-shrink: 0; }
.ai-feature-title { font-size: 0.95rem; font-weight: 600; color: var(--hx-text); }
.ai-feature-desc { font-size: 0.78rem; color: var(--hx-text-muted); margin-top: 0.15rem; }

.ai-panel {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    overflow: hidden;
}
.ai-panel-header {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--hx-border); flex-wrap: wrap;
}
.ai-back-btn {
    background: none; border: none; cursor: pointer; font-size: 0.85rem;
    color: var(--hx-text-muted); padding: 0.3rem 0.5rem; border-radius: 6px;
    transition: all 0.15s;
}
.ai-back-btn:hover { color: var(--hx-primary); background: var(--hx-primary-light); }
.ai-panel-title { font-weight: 600; font-size: 0.9rem; color: var(--hx-text); }
.ai-provider-select {
    margin-left: auto; padding: 0.3rem 0.6rem; border: 1px solid var(--hx-border);
    border-radius: 6px; font-size: 0.78rem; background: var(--hx-card-bg); color: var(--hx-text);
    text-transform: capitalize;
}
.ai-panel-body { padding: 1rem; }

.ai-input-group { margin-bottom: 0.5rem; }
.ai-input-group label {
    display: block; font-size: 0.78rem; font-weight: 600;
    color: var(--hx-text-muted); margin-bottom: 0.25rem;
}
.ai-input-group input,
.ai-input-group textarea,
.ai-input-group select {
    width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--hx-border);
    border-radius: 6px; font-size: 0.85rem; background: var(--hx-bg); color: var(--hx-text);
    resize: vertical;
}
.ai-input-group input:focus,
.ai-input-group textarea:focus,
.ai-input-group select:focus { border-color: var(--hx-primary); outline: none; box-shadow: 0 0 0 3px rgba(2,132,199,0.12); }
.ai-input-row { display: flex; gap: 0.75rem; align-items: flex-end; margin-bottom: 0.75rem; }
.ai-input-row .unit-btn { white-space: nowrap; height: fit-content; }

.ai-checkbox {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.82rem; color: var(--hx-text); cursor: pointer;
    padding: 0.25rem 0.5rem; border: 1px solid var(--hx-border); border-radius: 6px;
}
.ai-checkbox input { accent-color: var(--hx-primary); }

.ai-next-step {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    padding: 0.6rem 0.75rem; margin-bottom: 0.75rem;
    background: var(--hx-primary-light); border: 1px solid var(--hx-primary-border);
    border-radius: var(--hx-radius, 10px);
}
.ai-next-step__label {
    font-size: 0.75rem; font-weight: 700; color: var(--hx-primary);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.ai-next-step__alt {
    display: flex; gap: 0.3rem; margin-left: auto;
}

.ai-results { margin-top: 1rem; }
.ai-result-list { display: flex; flex-direction: column; gap: 0.5rem; }
.ai-result-card {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem;
    background: var(--hx-bg); border-radius: var(--hx-radius);
    transition: background 0.15s;
}
.ai-result-card:hover { background: var(--hx-primary-light); }
.ai-result-main { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ai-result-word { font-family: var(--hx-font-cjk); font-size: 1.25rem; color: var(--hx-text); font-weight: 600; }
.ai-result-pinyin { font-size: 0.82rem; color: var(--hx-primary); }
.ai-result-def { font-size: 0.82rem; color: var(--hx-text-muted); flex: 1; min-width: 0; }
.ai-result-note { font-size: 0.75rem; color: var(--hx-text-faint); font-style: italic; }
.ai-result-actions {
    display: flex; gap: 0.15rem; margin-left: auto; flex-shrink: 0;
}
.ai-result-actions a,
.ai-result-actions button {
    width: 32px; height: 32px; border-radius: 6px; border: none;
    background: transparent; color: var(--hx-text-faint); font-size: 0.95rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s; text-decoration: none;
}
.ai-result-actions a:hover,
.ai-result-actions button:hover { background: var(--hx-primary-light); color: var(--hx-primary); }
.ai-result-title { font-weight: 600; font-size: 0.9rem; color: var(--hx-text); }
.ai-result-desc { font-size: 0.82rem; color: var(--hx-text-muted); margin-top: 0.15rem; }
.ai-study-link {
    margin-left: auto; color: var(--hx-text-faint); font-size: 1rem;
    text-decoration: none; transition: color 0.15s; flex-shrink: 0;
}
.ai-study-link:hover { color: var(--hx-primary); }

.ai-priority-badge {
    font-size: 0.75rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 8px;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.ai-priority-high { background: var(--hx-red-light); color: var(--hx-red); }
.ai-priority-medium { background: var(--hx-amber-light); color: var(--hx-amber); }
.ai-priority-low { background: var(--hx-primary-light); color: var(--hx-primary); }

.ai-sentence-num {
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: var(--hx-primary-light); color: var(--hx-primary);
    font-size: 0.75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ai-sentence-chinese { font-family: var(--hx-font-cjk); font-size: 1.05rem; color: var(--hx-text); }
.ai-sentence-pinyin { font-size: 0.82rem; color: var(--hx-primary); margin-top: 0.1rem; }
.ai-sentence-english { font-size: 0.82rem; color: var(--hx-text-muted); margin-top: 0.1rem; }

/* ── My Vocab page ────────────────────────────────────────────── */
.hx-vocab-stats {
    display: flex; gap: 1rem; margin-bottom: 0.75rem;
}
.hx-vocab-stat {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.82rem; color: var(--hx-text-muted);
}
.hx-vocab-stat__num {
    font-weight: 700; font-size: 1.1rem; color: var(--hx-text);
}
.hx-vocab-toolbar {
    display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem;
}
.hx-vocab-search {
    flex: 1; position: relative;
}
.hx-vocab-search input {
    width: 100%; padding: 0.55rem 0.75rem 0.55rem 2.2rem;
    border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    background: var(--hx-bg); color: var(--hx-text); font-size: 0.88rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.hx-vocab-search input:focus {
    border-color: var(--hx-primary); box-shadow: 0 0 0 3px rgba(37,99,168,0.12); outline: none;
}
.hx-vocab-search i {
    position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
    color: var(--hx-text-faint); font-size: 0.85rem; pointer-events: none;
}
.hx-vocab-add-btn {
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: var(--hx-primary); color: white; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.15s, transform 0.1s; flex-shrink: 0;
}
.hx-vocab-add-btn:hover { background: var(--hx-primary-mid); }
.hx-vocab-add-btn:active { transform: scale(0.93); }

.hx-vocab-tags {
    display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.75rem;
}
.hx-vocab-tag {
    padding: 0.25rem 0.65rem; border-radius: 999px; border: 1px solid var(--hx-border);
    background: var(--hx-bg); color: var(--hx-text-muted); font-size: 0.78rem;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.hx-vocab-tag:hover { border-color: var(--hx-primary); color: var(--hx-primary); }
.hx-vocab-tag.active { background: var(--hx-primary); color: white; border-color: var(--hx-primary); }

.hx-vocab-group {
    margin-bottom: 1rem;
}
.hx-vocab-group__header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.35rem 0; margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--hx-border);
}
.hx-vocab-group__title {
    font-size: 0.82rem; font-weight: 600; color: var(--hx-text);
}
.hx-vocab-group__count {
    font-weight: 400; color: var(--hx-text-muted); margin-left: 0.3rem;
}
.hx-vocab-group__actions {
    display: flex; gap: 0.35rem;
}
.hx-vocab-group__btn {
    padding: 0.15rem 0.5rem; border-radius: 6px; border: 1px solid var(--hx-border);
    background: var(--hx-bg); color: var(--hx-text-muted); font-size: 0.75rem;
    cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 0.25rem;
}
.hx-vocab-group__btn:hover { border-color: var(--hx-primary); color: var(--hx-primary); }

.hx-vocab-card {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.5rem 0; border-bottom: 1px solid var(--hx-border-light, rgba(0,0,0,0.04));
    transition: background 0.12s;
}
.hx-vocab-card:last-child { border-bottom: none; }
.hx-vocab-card:hover { background: var(--hx-primary-light); margin: 0 -0.5rem; padding: 0.5rem; border-radius: var(--hx-radius); }
.hx-vocab-card__char {
    font-family: var(--hx-font-cjk); font-size: 1.35rem; font-weight: 600;
    color: var(--hx-text); min-width: 2.5rem; text-align: center; flex-shrink: 0;
}
.hx-vocab-card__info { flex: 1; min-width: 0; }
.hx-vocab-card__pinyin { font-size: 0.8rem; color: var(--hx-primary); }
.hx-vocab-card__def {
    font-size: 0.8rem; color: var(--hx-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hx-vocab-card__actions {
    display: flex; gap: 0.15rem; flex-shrink: 0;
}
.hx-vocab-card__actions button,
.hx-vocab-card__actions a {
    width: 32px; height: 32px; border-radius: 6px; border: none;
    background: transparent; color: var(--hx-text-faint); font-size: 0.9rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s; text-decoration: none;
}
.hx-vocab-card__actions button:hover,
.hx-vocab-card__actions a:hover { background: var(--hx-primary-light); color: var(--hx-primary); }
.hx-vocab-card__actions .vocab-delete-btn:hover { background: var(--hx-red-light, #fee2e2); color: var(--hx-red); }

.hx-vocab-empty {
    text-align: center; padding: 3rem 1rem;
}
.hx-vocab-empty i { font-size: 2.5rem; color: var(--hx-text-faint); }
.hx-vocab-empty h3 { margin-top: 1rem; color: var(--hx-text); font-size: 1.1rem; }
.hx-vocab-empty p { color: var(--hx-text-muted); font-size: 0.88rem; }
.hx-vocab-empty a { color: var(--hx-primary); text-decoration: none; }

.hx-vocab-add-form {
    padding: 0.75rem; margin-bottom: 0.75rem; border-radius: var(--hx-radius);
    background: var(--hx-bg-subtle, var(--hx-primary-light)); border: 1px solid var(--hx-border);
}
.hx-vocab-add-form input {
    padding: 0.45rem 0.6rem; border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    background: var(--hx-bg); color: var(--hx-text); font-size: 0.88rem; width: 100%;
}
.hx-vocab-add-form input:focus { border-color: var(--hx-primary); outline: none; }

/* ── Vocab pinyin preview & disambiguation ─────────────────────── */

.hx-vocab-pinyin-preview {
    margin: 0.5rem 0 0.75rem;
    padding: 0.6rem 0.75rem;
    background: var(--hx-bg);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius);
}
.hx-vocab-pinyin-stack {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    gap: 0.15rem 0.35rem; line-height: 1.2;
}
.hx-vocab-char-wrap {
    display: inline-flex; flex-direction: column; align-items: center;
    text-align: center; vertical-align: bottom; position: relative;
    padding: 0 1px;
}
.hx-vocab-char-wrap > .pinyin {
    display: block; font-size: 0.72rem; line-height: 1.1;
    color: var(--hx-text-muted); font-family: var(--hx-font-base, inherit);
    margin-bottom: 1px; user-select: none;
}
.hx-vocab-char-wrap > .char {
    display: block; font-family: var(--hx-font-cjk, inherit);
    font-size: 1.35rem; line-height: 1.2; color: var(--hx-text);
}
.hx-vocab-char-wrap.non-cjk > .char { color: var(--hx-text-muted); }
.hx-vocab-char-wrap.resolved-multi { cursor: pointer; }
.hx-vocab-char-wrap.resolved-multi > .pinyin { color: var(--hx-primary); }
.hx-vocab-char-wrap.unresolved { cursor: pointer; }
.hx-vocab-char-wrap.unresolved > .pinyin {
    color: var(--hx-red); font-weight: 600;
    text-decoration: underline wavy var(--hx-red);
    text-underline-offset: 1px;
}
.hx-vocab-char-wrap.unresolved > .char {
    color: var(--hx-red);
    text-decoration: underline wavy var(--hx-red);
    text-underline-offset: 2px;
}
.hx-vocab-char-wrap.user-corrected { cursor: pointer; }
.hx-vocab-char-wrap.user-corrected > .pinyin {
    color: var(--hx-primary); font-weight: 600;
}
.hx-vocab-char-wrap:not(.non-cjk):hover > .pinyin {
    background: var(--hx-primary-light); border-radius: 3px;
}

.hx-vocab-pinyin-status {
    margin-top: 0.4rem; font-size: 0.75rem; color: var(--hx-text-muted);
    line-height: 1.4;
}
.hx-vocab-pinyin-status.has-unresolved {
    color: var(--hx-red); font-weight: 500;
}

/* Per-syllable pinyin on cards (red mark + click-to-correct) */
.hx-vocab-card__py-syll {
    display: inline-block;
}
.hx-vocab-card__py-syll[data-idx] { cursor: pointer; }
.hx-vocab-card__py-syll[data-idx]:hover {
    background: var(--hx-primary-light); border-radius: 3px;
}
.hx-vocab-card__py-syll.unresolved {
    color: var(--hx-red); font-weight: 600;
    text-decoration: underline wavy var(--hx-red);
    text-underline-offset: 1px;
}
.hx-vocab-card__py-syll.user-corrected {
    color: var(--hx-primary); font-weight: 600;
}
.hx-vocab-card .hx-vocab-pinyin-status {
    margin-top: 0.15rem; font-size: 0.7rem;
}

/* Disambiguation popover (Add form + cards) */
.hx-pinyin-popover {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    padding: 0.5rem; min-width: 9rem; max-width: 16rem;
    z-index: var(--z-modal);
}
.hx-pinyin-popover__header {
    font-family: var(--hx-font-cjk, inherit);
    font-size: 1.4rem; line-height: 1; color: var(--hx-text);
    text-align: center; padding: 0.25rem 0 0.5rem;
    border-bottom: 1px solid var(--hx-border); margin-bottom: 0.5rem;
}
.hx-pinyin-popover__list {
    display: flex; flex-direction: column; gap: 0.25rem;
}
.hx-pinyin-popover__opt {
    appearance: none; background: var(--hx-bg);
    border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    padding: 0.4rem 0.6rem; font-size: 0.88rem; color: var(--hx-text);
    text-align: left; cursor: pointer; transition: all 0.12s;
    font-family: inherit;
}
.hx-pinyin-popover__opt:hover {
    background: var(--hx-primary-light); border-color: var(--hx-primary);
    color: var(--hx-primary);
}
.hx-pinyin-popover__opt.active {
    background: var(--hx-primary); border-color: var(--hx-primary);
    color: white; font-weight: 600;
}

/* Chat */
.ai-chat-messages {
    flex: 1; overflow-y: auto; padding: 0.5rem 0;
    display: flex; flex-direction: column; gap: 0.75rem;
}
.ai-chat-msg { display: flex; }
.ai-chat-user { justify-content: flex-end; }
.ai-chat-assistant { justify-content: flex-start; }
.ai-chat-bubble {
    max-width: 80%; padding: 0.6rem 0.9rem; border-radius: 12px;
    font-size: 0.88rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.ai-chat-user .ai-chat-bubble { background: var(--hx-primary); color: white; border-bottom-right-radius: 4px; }
.ai-chat-assistant .ai-chat-bubble { background: var(--hx-bg); color: var(--hx-text); border: 1px solid var(--hx-border); border-bottom-left-radius: 4px; }
.hx-chat-chips {
    display: flex; gap: 0.35rem; padding: 0.35rem 0; flex-wrap: wrap;
}
.hx-chat-chip {
    padding: 3px 10px; border: 1px solid var(--hx-border); border-radius: 999px;
    background: var(--hx-card-bg); color: var(--hx-text-muted); font-size: 0.72rem;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.hx-chat-chip:hover { border-color: var(--hx-primary); color: var(--hx-primary); }
.ai-chat-input {
    display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.75rem;
    border-top: 1px solid var(--hx-border);
}
.ai-chat-input textarea {
    width: 100%; min-height: 60px; max-height: 140px; padding: 0.5rem 0.75rem;
    border: 1px solid var(--hx-border); border-radius: 8px; font-size: 0.85rem;
    background: var(--hx-bg); color: var(--hx-text); font-family: inherit;
    line-height: 1.4; resize: vertical; overflow-y: auto; box-sizing: border-box;
}
.ai-chat-input textarea:focus { border-color: var(--hx-primary); outline: none; }
.hx-chat-toolbar {
    display: flex; align-items: center; gap: 0.25rem;
}
.hx-chat-toolbar .unit-btn { padding: 0.35rem 0.75rem; border-radius: 16px; flex-shrink: 0; font-size: 0.82rem; }
.hx-chat-toolbar .hx-chat-mic { flex-shrink: 0; }

@keyframes typingDots { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }
.ai-typing { animation: typingDots 1.4s infinite; font-size: 1.2rem; }
.ai-scenario-pill {
    display: inline-block; padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.75rem;
    background: var(--hx-bg); border: 1px solid var(--hx-border); color: var(--hx-text-muted);
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.ai-scenario-pill:hover { border-color: var(--hx-primary); color: var(--hx-primary); }
.ai-scenario-pill.active { background: var(--hx-primary-light); border-color: var(--hx-primary); color: var(--hx-primary); font-weight: 600; }

/* Reading */
.ai-reading-passage {
    background: var(--hx-bg); border-radius: var(--hx-radius); padding: 1.25rem;
}
.ai-reading-title {
    font-family: var(--hx-font-cjk); font-size: 1.1rem; color: var(--hx-text);
    margin-bottom: 0.75rem; font-weight: 600;
}
.ai-reading-chinese {
    font-family: var(--hx-font-cjk); font-size: 1.15rem; line-height: 2;
    color: var(--hx-text); margin-bottom: 0.75rem;
}
.ai-reading-pinyin { font-size: 0.85rem; color: var(--hx-primary); margin-bottom: 0.5rem; line-height: 1.6; }
.ai-reading-english { font-size: 0.85rem; color: var(--hx-text-muted); line-height: 1.6; margin-bottom: 1rem; }
.ai-reading-words { margin-top: 1rem; }

/* Loading & Error */
.ai-loading-inline { text-align: center; padding: 2rem; color: var(--hx-text-faint); }
.ai-loading-inline i { animation: spin 1s linear infinite; margin-right: 0.5rem; }
.ai-error { text-align: center; padding: 1rem; color: var(--hx-red); font-size: 0.85rem; }

/* ── Floating Chat Widget ─────────────────────────────────────── */
.hx-chat-fab {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: var(--z-modal-backdrop);
    width: 56px; height: 56px; border-radius: 50%; border: none;
    background: var(--hx-primary); color: white; font-size: 1.4rem;
    cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s, opacity 0.2s;
}
.hx-chat-fab:hover { transform: scale(1.08); }
.hx-chat-fab-hidden { transform: scale(0); opacity: 0; pointer-events: none; }

/* Tour floating action button — sits above the chat FAB */
.hx-tour-fab {
    position: fixed; top: 4.5rem; right: 1.25rem; z-index: var(--z-dropdown, 50);
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: var(--hx-primary); color: white; font-size: 0.95rem;
    cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s, opacity 0.2s;
    opacity: 0.75;
}
.hx-tour-fab:hover { transform: scale(1.1); opacity: 1; }
body.hx-immersive .hx-tour-fab { display: none; }

.hx-chat-panel {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: var(--z-modal-backdrop);
    width: 380px; height: 520px; max-height: calc(100vh - 3rem);
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    display: flex; flex-direction: column; overflow: hidden;
    transform: scale(0.8) translateY(20px); opacity: 0; pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: bottom right;
}
.hx-chat-panel.open { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; }

.hx-chat-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0.9rem; background: var(--hx-primary); color: white;
    flex-shrink: 0;
}
.hx-chat-header-title { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 0.4rem; }
.hx-chat-header-actions { display: flex; align-items: center; gap: 0.5rem; }
.hx-chat-level {
    padding: 0.15rem 0.3rem; border-radius: 4px; border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.15); color: white; font-size: 0.75rem;
}
.hx-chat-close {
    background: none; border: none; color: white; font-size: 1.3rem;
    cursor: pointer; padding: 0; line-height: 1; opacity: 0.8;
}
.hx-chat-close:hover { opacity: 1; }

.hx-chat-scenarios {
    display: flex; gap: 0.25rem; padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--hx-border); overflow-x: auto;
    white-space: nowrap; flex-shrink: 0;
}

.hx-chat-body {
    display: flex; flex-direction: column; flex: 1; min-height: 0;
    padding: 0.5rem 0.6rem;
}
.hx-chat-body .ai-chat-messages { flex: 1; overflow-y: auto; }
.hx-chat-body .ai-chat-input { padding-top: 0.5rem; }
.hx-chat-text-input {
    flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--hx-border);
    border-radius: 20px; font-size: 0.85rem; background: var(--hx-bg); color: var(--hx-text);
}
.hx-chat-text-input:focus { border-color: var(--hx-primary); outline: none; }
.hx-chat-send { padding: 0.5rem 0.8rem; border-radius: 20px; }

/* ── Chat Voice Controls ─────────────────────────────────────── */
.hx-chat-mic, .ai-chat-mic {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hx-border);
    background: transparent; color: var(--hx-text-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
    flex-shrink: 0; transition: all 0.2s;
}
.hx-chat-mic:hover, .ai-chat-mic:hover { color: var(--hx-primary); border-color: var(--hx-primary); }
.hx-chat-mic.recording, .ai-chat-mic.recording {
    color: #e53e3e; border-color: #e53e3e; animation: mic-pulse 1s infinite;
}
@keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229,62,62,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(229,62,62,0); }
}
/* Recording indicator pulsing (E11) */
@keyframes hxPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.hx-chat-voice-toggle, .ai-chat-voice-toggle {
    width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--hx-border);
    background: transparent; color: var(--hx-text-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem;
    transition: all 0.2s;
}
.hx-chat-voice-toggle:hover, .ai-chat-voice-toggle:hover { color: var(--hx-primary); border-color: var(--hx-primary); }
.hx-chat-voice-toggle.active, .ai-chat-voice-toggle.active {
    color: #fff; background: var(--hx-primary); border-color: var(--hx-primary);
}
.ai-chat-bubble .audio-btn-inline {
    display: inline-block; margin-left: 0.3rem; font-size: 0.8rem;
    background: none; border: none; color: var(--hx-text-muted); cursor: pointer;
    padding: 0.1rem 0.2rem; vertical-align: middle;
}
.ai-chat-bubble .audio-btn-inline:hover { color: var(--hx-primary); }

/* ── Chat Action Buttons (Phase 8) ───────────────────────────── */
.hx-chat-action-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.35rem 0.75rem; border-radius: 6px; font-size: 0.82rem;
    background: var(--hx-primary); color: #fff; text-decoration: none;
    margin: 0.25rem 0.15rem; transition: opacity 0.2s;
}
.hx-chat-action-btn:hover { opacity: 0.85; color: #fff; }

/* ── AI Tutor ────────────────────────────────────────────────── */
.ai-tutor-modes {
    display: flex; gap: 0.75rem; flex-wrap: wrap;
}
.ai-tutor-mode-check {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.82rem; cursor: pointer; padding: 0.3rem 0.6rem;
    border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    transition: all 0.15s;
}
.ai-tutor-mode-check:has(input:checked) { border-color: var(--hx-primary); background: rgba(2,132,199,0.06); }
.ai-tutor-mode-check input { margin: 0; accent-color: var(--hx-primary); }
.ai-tutor-homework { margin-top: 1rem; text-align: left; }
.ai-tutor-homework-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--hx-text); }
.ai-tutor-hw-item {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem;
    border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    margin-bottom: 0.4rem; font-size: 0.82rem; background: var(--hx-card-bg);
}
.ai-tutor-hw-item:hover { border-color: var(--hx-primary); }
.ai-tutor-hw-icon { font-size: 1rem; color: var(--hx-primary); flex-shrink: 0; }
.ai-tutor-hw-info { flex: 1; }
.ai-tutor-hw-info strong { display: block; font-size: 0.85rem; }
.ai-tutor-hw-info span { color: var(--hx-text-muted); }
.ai-tutor-progress {
    height: 8px; background: var(--hx-surface); border-radius: 4px;
    margin-bottom: 1rem; overflow: hidden;
}
.ai-tutor-progress-fill {
    height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, var(--hx-primary), color-mix(in srgb, var(--hx-primary) 70%, var(--hx-green)));
    transition: width 0.5s var(--hx-spring); width: 0%;
}
.ai-tutor-greeting {
    padding: 0.75rem 1rem; background: var(--hx-bg); border-radius: var(--hx-radius);
    border: 1px solid var(--hx-border); margin-bottom: 1rem; font-size: 0.9rem;
}
.ai-tutor-step {
    padding: 1.25rem; background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); text-align: center;
}
.ai-tutor-step-badge {
    display: inline-block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
    padding: 0.15rem 0.5rem; border-radius: 10px; margin-bottom: 0.75rem; letter-spacing: 0.03em;
}
.ai-tutor-step-badge.listen { background: var(--hx-primary-light); color: var(--hx-primary); }
.ai-tutor-step-badge.speak  { background: #fce7f3;                color: #be185d; }
.ai-tutor-step-badge.read   { background: var(--hx-green-light);  color: var(--hx-green); }
.ai-tutor-step-badge.write  { background: var(--hx-yellow-light); color: var(--hx-yellow); }
.ai-tutor-step-badge.quiz   { background: #ede9fe;                color: #5b21b6; }
.ai-tutor-instruction { font-size: 0.85rem; color: var(--hx-text-muted); margin-bottom: 0.75rem; }
.ai-tutor-chinese { font-family: var(--hx-font-cjk); font-size: 1.75rem; font-weight: 600; margin-bottom: 0.25rem; }
.ai-tutor-pinyin { font-size: 0.9rem; color: var(--hx-primary); margin-bottom: 0.25rem; }
.ai-tutor-english { font-size: 0.85rem; color: var(--hx-text-muted); margin-bottom: 1rem; }
.ai-tutor-hint { font-size: 0.78rem; color: var(--hx-text-muted); font-style: italic; margin-bottom: 0.75rem; }
.ai-tutor-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.ai-tutor-actions .unit-btn { min-width: 100px; }
.ai-tutor-choices { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; max-width: 400px; margin-left: auto; margin-right: auto; }
.ai-tutor-choice {
    padding: 0.6rem 1rem; border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    background: var(--hx-card-bg); cursor: pointer; text-align: left; font-size: 0.88rem;
    transition: all 0.15s;
}
.ai-tutor-choice:hover { border-color: var(--hx-primary); }
.ai-tutor-choice.correct { border-color: var(--hx-green); background: #d1fae5; }
.ai-tutor-choice.wrong { border-color: var(--hx-red); background: #fee2e2; }
.ai-tutor-summary {
    padding: 1.25rem; background: var(--hx-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); text-align: center;
}
.ai-tutor-score { font-size: 2rem; font-weight: 700; color: var(--hx-primary); margin: 0.5rem 0; }
.ai-tutor-writer-target {
    width: 200px; height: 200px; margin: 0.5rem auto 1rem;
    border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
}

/* ── AI Classroom Layout ─────────────────────────────────────── */
.ai-classroom {
    display: grid; grid-template-columns: 1fr 340px;
    gap: 0; border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    overflow: hidden; min-height: 480px; background: var(--hx-card-bg);
}
.ai-classroom-board {
    display: flex; flex-direction: column; border-right: 1px solid var(--hx-border);
    background: var(--hx-bg);
}
.ai-classroom-board-header {
    padding: 0.5rem 0.75rem; font-size: 0.78rem; font-weight: 600;
    color: var(--hx-text-muted); border-bottom: 1px solid var(--hx-border);
    background: var(--hx-card-bg); display: flex; align-items: center; gap: 0.4rem;
}
.ai-classroom-board-content {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 1.5rem; text-align: center; overflow-y: auto;
}
/* Board content elements */
.ai-board-char {
    font-family: var(--hx-font-cjk); font-size: 4rem; font-weight: 700;
    line-height: 1.2; margin-bottom: 0.5rem; color: var(--hx-text);
}
.ai-board-pinyin {
    font-size: 1.1rem; color: var(--hx-primary); margin-bottom: 0.25rem;
    transition: opacity 0.3s;
}
.ai-board-english {
    font-size: 0.9rem; color: var(--hx-text-muted); margin-bottom: 1rem;
}
.ai-board-writer {
    width: 220px; height: 220px; margin: 0 auto 1rem;
    border: 2px dashed var(--hx-border); border-radius: var(--hx-radius);
    background: white;
}
[data-theme="dark"] .ai-board-writer { background: #1e293b; }
/* Handwriting canvas on whiteboard */
.ai-board-canvas-wrap {
    position: relative; width: 240px; height: 240px; margin: 0.5rem auto 0.75rem;
}
.ai-board-canvas {
    width: 240px; height: 240px; border: 2px solid var(--hx-border);
    border-radius: var(--hx-radius); background: white; cursor: crosshair;
    touch-action: none;
}
[data-theme="dark"] .ai-board-canvas { background: #1e293b; }
.ai-board-canvas-actions {
    display: flex; gap: 0.4rem; justify-content: center; margin-top: 0.4rem;
}
.ai-board-canvas-actions button { font-size: 0.78rem; padding: 0.25rem 0.6rem; }
/* Lesson history */
.ai-tutor-history { margin-top: 1rem; }
.ai-tutor-history-title {
    font-size: 0.82rem; font-weight: 600; color: var(--hx-text-muted);
    margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.3rem;
}
.ai-tutor-history-item {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem;
    border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    margin-bottom: 0.3rem; font-size: 0.82rem; background: var(--hx-card-bg);
    cursor: pointer; transition: border-color 0.15s;
}
.ai-tutor-history-item:hover { border-color: var(--hx-primary); }
.ai-tutor-history-score {
    font-weight: 700; font-size: 0.85rem; min-width: 40px; text-align: right;
}
.ai-tutor-history-info { flex: 1; }
.ai-tutor-history-info strong { display: block; font-size: 0.82rem; }
.ai-tutor-history-info span { font-size: 0.75rem; color: var(--hx-text-muted); }
.ai-tutor-history-clear {
    font-size: 0.75rem; color: var(--hx-text-muted); cursor: pointer;
    background: none; border: none; margin-left: auto; text-decoration: underline;
}
.ai-board-choices {
    display: flex; flex-direction: column; gap: 0.4rem; width: 100%; max-width: 360px;
}
.ai-board-choices .ai-tutor-choice { text-align: center; }
.ai-board-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
    padding: 0.2rem 0.6rem; border-radius: 10px; margin-bottom: 1rem; letter-spacing: 0.03em;
}
.ai-board-badge.listen { background: var(--hx-primary-light); color: var(--hx-primary); }
.ai-board-badge.speak  { background: #fce7f3;                color: #be185d; }
.ai-board-badge.read   { background: var(--hx-green-light);  color: var(--hx-green); }
.ai-board-badge.write  { background: var(--hx-yellow-light); color: var(--hx-yellow); }
.ai-board-badge.quiz   { background: #ede9fe;                color: #5b21b6; }

/* Chat pane */
.ai-classroom-chat {
    display: flex; flex-direction: column; background: var(--hx-card-bg);
}
.ai-classroom-chat-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.35rem 0.75rem; border-bottom: 1px solid var(--hx-border);
}
.tutor-mute-btn {
    background: none; border: none; color: var(--hx-text-muted); cursor: pointer;
    padding: 0.2rem 0.4rem; font-size: 0.9rem; border-radius: 4px;
    transition: color 0.15s;
}
.tutor-mute-btn:hover { color: var(--hx-primary); }
.tutor-mute-btn.muted { color: var(--hx-danger, var(--hx-red)); opacity: 0.8; }
.ai-classroom-chat-log {
    flex: 1; overflow-y: auto; padding: 0.75rem; display: flex;
    flex-direction: column; gap: 0.5rem;
}
.ai-classroom-chat-input {
    padding: 0.5rem 0.75rem; border-top: 1px solid var(--hx-border);
    display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center;
    min-height: 48px; align-items: center;
}
.ai-classroom-chat-input .unit-btn,
.ai-classroom-chat-input .hanzi-btn { font-size: 0.82rem; padding: 0.4rem 0.75rem; }

/* Collapsed step summaries */
.tutor-step-collapsed {
    border: 1px solid var(--hx-border); border-radius: 8px;
    overflow: hidden; font-size: 0.78rem;
}
.tutor-step-collapsed-header {
    padding: 0.35rem 0.6rem; background: var(--hx-bg); color: var(--hx-text-muted);
    cursor: pointer; display: flex; align-items: center; gap: 0.3rem;
    transition: background 0.15s;
}
.tutor-step-collapsed-header:hover { background: var(--hx-border); }
.tutor-step-chevron { margin-left: auto; font-size: 0.65rem; }
.tutor-step-collapsed-body {
    padding: 0.4rem 0.6rem; border-top: 1px solid var(--hx-border);
    display: flex; flex-direction: column; gap: 0.35rem;
}

/* Scroll-to-bottom button */
.ai-classroom-chat { position: relative; }
.tutor-scroll-btn {
    position: absolute; bottom: 56px; right: 12px;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--hx-primary); color: white; border: none;
    cursor: pointer; display: none; align-items: center; justify-content: center;
    font-size: 0.85rem; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: var(--z-base); transition: opacity 0.2s;
}
.tutor-scroll-btn:hover { opacity: 0.85; }

/* Chat bubbles */
.ai-tchat-msg {
    display: flex; gap: 0.4rem; align-items: flex-start; max-width: 100%;
}
.ai-tchat-msg.prof { flex-direction: row; }
.ai-tchat-msg.student { flex-direction: row-reverse; }
.ai-tchat-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
}
.ai-tchat-avatar.prof-avatar {
    background: linear-gradient(135deg, var(--hx-primary-mid), var(--hx-primary));
    color: white; position: relative;
}
/* Animated avatar states */
.ai-prof-avatar-lg {
    width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 0.5rem;
    background: linear-gradient(135deg, var(--hx-primary-mid), var(--hx-primary)); color: white;
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
    position: relative; transition: transform 0.3s, box-shadow 0.3s;
}
.ai-prof-avatar-lg.talking {
    animation: prof-talk 0.5s ease-in-out infinite alternate;
    box-shadow: 0 0 12px rgba(2,132,199,0.4);
}
.ai-prof-avatar-lg.happy {
    animation: prof-bounce 0.6s ease; box-shadow: 0 0 16px rgba(5,150,105,0.5);
    background: linear-gradient(135deg, var(--hx-green), #10b981);
}
.ai-prof-avatar-lg.thinking {
    animation: prof-think 1.5s ease-in-out infinite;
    opacity: 0.7;
}
.ai-prof-avatar-lg.sad {
    background: linear-gradient(135deg, var(--hx-red), #f87171);
    animation: prof-shake 0.4s ease;
}
@keyframes prof-talk {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}
@keyframes prof-bounce {
    0% { transform: scale(1); }
    40% { transform: scale(1.2) rotate(-5deg); }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); }
}
@keyframes prof-think {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@keyframes prof-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.ai-tchat-avatar.student-avatar {
    background: var(--hx-border); color: var(--hx-text-muted);
}
.ai-tchat-bubble {
    padding: 0.5rem 0.7rem; border-radius: 12px; font-size: 0.85rem;
    line-height: 1.4; max-width: 260px; word-wrap: break-word;
}
.ai-tchat-msg.prof .ai-tchat-bubble {
    background: var(--hx-bg); border: 1px solid var(--hx-border);
    border-top-left-radius: 4px;
}
.ai-tchat-msg.student .ai-tchat-bubble {
    background: var(--hx-primary-light); border: 1px solid rgba(2,132,199,0.2);
    border-top-right-radius: 4px;
}
.ai-tchat-bubble .ai-tchat-chinese {
    font-family: var(--hx-font-cjk); font-size: 1rem; font-weight: 600;
}
.ai-tchat-bubble .ai-tchat-pinyin {
    font-size: 0.78rem; color: var(--hx-primary);
}
.ai-tchat-bubble .ai-tchat-hint {
    font-size: 0.75rem; color: var(--hx-text-muted); font-style: italic;
}
/* Speaker button inside chat bubble */
.ai-tchat-speak-btn {
    background: none; border: none; color: var(--hx-text-muted); cursor: pointer;
    padding: 0.1rem 0.2rem; font-size: 0.75rem; opacity: 0.5;
    transition: opacity 0.15s, color 0.15s; float: right; margin-top: 0.2rem;
}
.ai-tchat-speak-btn:hover { opacity: 1; color: var(--hx-primary); }
/* Speak result inline */
.ai-tchat-speak-result {
    font-size: 0.82rem; min-height: 1.2rem; margin-top: 0.25rem;
}

/* ── Mobile Responsive ────────────────────────────────────────── */
/* ── Mobile Sidebar Drawer (Phase 25) ────────────────────────── */
@media (max-width: 768px) {
    .study-container { grid-template-columns: 1fr; }
    .dash-grid { grid-template-columns: 1fr; }

    /* Sidebar: off-screen by default, slide in on .open */
    .hx-sidebar { transform: translateX(-100%); z-index: var(--z-modal, 200); }
    .hx-sidebar.open { transform: translateX(0); }
    .hx-sidebar-overlay.open { display: block; }
    .hx-sidebar-resize { display: none; }

    /* Top bar: no sidebar offset on mobile */
    body.hx-has-sidebar .hx-header { margin-left: 0; }
    body.hx-has-sidebar .hx-main { margin-left: 0; }
    body.hx-has-sidebar .ws-layout { margin-left: 0; }

    /* Show hamburger on mobile */
    .hx-sidebar-toggle { display: flex; }

    .hx-main { padding: 1rem 0.75rem; }
    .word-grid { grid-template-columns: 1fr; }
    .hsk-tabs { gap: 0.25rem; }
    .hsk-tab { padding: 0.3rem 0.65rem; font-size: 0.75rem; }

    .review-char { font-size: 3.5rem; }
    .review-ratings { flex-wrap: wrap; }
    .rating-btn { min-width: 60px; padding: 0.6rem 0.6rem; min-height: 44px; }

    .stats-bar { gap: 0.75rem; }
    .stat-num { font-size: 1rem; }

    .summary-actions { flex-direction: column; }
    .unit-btn, .hanzi-btn, .audio-btn, .audio-btn-slow, .audio-btn-en { min-height: 44px; }

    .ai-features-grid { grid-template-columns: 1fr; }
    .ai-settings-bar { flex-direction: column; align-items: flex-start; }
    .ai-input-row { flex-direction: column; }
    .ai-input-row .unit-btn { width: 100%; text-align: center; }
    .ai-chat-bubble { max-width: 90%; }

    .ai-classroom { grid-template-columns: 1fr; min-height: auto; }
    .ai-classroom-board { border-right: none; border-bottom: 1px solid var(--hx-border); min-height: 280px; }
    .ai-classroom-chat { max-height: 300px; }
    .ai-tchat-bubble { max-width: 220px; }

    .hx-chat-fab { bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); right: 1rem; }
    .hx-chat-panel { bottom: 0; right: 0; left: 0; width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; transform-origin: bottom center; }

    #hx-toast-container { left: 0.5rem; right: 0.5rem; }
    .hx-toast { min-width: auto; }

    .cls-grid { grid-template-columns: 1fr; }
    .cls-join-row { flex-direction: column; }
    .td-overview-grid { grid-template-columns: 1fr 1fr; }
    .td-table { font-size: 0.8rem; }
    .parent-child-card { flex-direction: column; gap: 0.75rem; }

    .quiz-word { font-size: 2.5rem; }
    .quiz-card { padding: 1.25rem; }
    .mock-level-grid { grid-template-columns: repeat(2, 1fr); }
    .readiness-grid { grid-template-columns: repeat(2, 1fr); }
    .wod-card { flex-direction: column; text-align: center; gap: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════
   Classroom
   ═══════════════════════════════════════════════════════════════ */

.cls-tabs {
    display: flex; gap: 0.25rem; margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--hx-border); padding-bottom: 0.25rem;
}
.cls-tab {
    padding: 0.5rem 1rem; border: none; background: none; color: var(--hx-text-muted);
    cursor: pointer; font-size: 0.9rem; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.cls-tab.active { color: var(--hx-primary); border-bottom-color: var(--hx-primary); font-weight: 600; }
.cls-tab:hover { color: var(--hx-text); }

.cls-actions { margin-bottom: 1rem; }
.cls-join-row { display: flex; gap: 0.5rem; align-items: center; }
.cls-join-row input {
    flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); background: var(--hx-card-bg); color: var(--hx-text);
    font-size: 0.9rem; font-family: monospace; letter-spacing: 0.15em;
}

.cls-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}
.cls-card {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); overflow: hidden;
}
.cls-card-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.75rem 1rem; border-bottom: 1px solid var(--hx-border);
}
.cls-card-header h4 { margin: 0; font-size: 1rem; color: var(--hx-text); }
.cls-member-count { font-size: 0.8rem; color: var(--hx-text-muted); }
.cls-card-body { padding: 0.75rem 1rem; font-size: 0.85rem; color: var(--hx-text-muted); }
.cls-join-code { font-family: monospace; letter-spacing: 0.1em; }
.cls-card-actions {
    display: flex; gap: 0.5rem; padding: 0.5rem 1rem;
    border-top: 1px solid var(--hx-border);
}

.cls-empty { text-align: center; padding: 3rem; color: var(--hx-text-muted); }
.cls-empty i { display: block; margin-bottom: 0.5rem; }

.cls-detail-header {
    display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;
}
.cls-detail-header h3 { margin: 0; color: var(--hx-text); }
.cls-detail-info { margin-bottom: 1rem; }
.cls-info-row { padding: 0.4rem 0; font-size: 0.9rem; color: var(--hx-text); }
.cls-info-row code {
    padding: 0.15rem 0.5rem; background: var(--hx-bg); border-radius: 4px;
    font-family: monospace; letter-spacing: 0.15em;
}
.cls-detail-actions { display: flex; gap: 0.5rem; margin-bottom: 1rem; }

.cls-assignments { margin-top: 0.5rem; }
.cls-assign-card {
    padding: 0.75rem 1rem; border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); margin-bottom: 0.5rem;
    background: var(--hx-card-bg);
}
.cls-assign-title { font-weight: 600; color: var(--hx-text); }
.cls-assign-meta { font-size: 0.8rem; color: var(--hx-text-muted); margin-top: 0.25rem; }
.cls-assign-meta .badge {
    background: var(--hx-primary); color: #fff; padding: 0.1rem 0.4rem;
    border-radius: 4px; font-size: 0.75rem;
}

.cls-members { margin-top: 0.5rem; }
.cls-member-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--hx-border);
    font-size: 0.85rem; color: var(--hx-text);
    cursor: pointer; transition: background 0.15s;
}
.cls-member-row:hover {
    background: var(--hx-primary-light, rgba(99,102,241,0.06));
}
.btn-sm { padding: 0.2rem 0.4rem; font-size: 0.75rem; }

/* ═══════════════════════════════════════════════════════════════
   Teacher Dashboard
   ═══════════════════════════════════════════════════════════════ */

.td-header-bar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.5rem;
}
.td-header-bar h2 { margin: 0; color: var(--hx-text); font-size: 1.25rem; }

.td-overview-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1rem; margin-bottom: 1.5rem;
}
.td-stat-card {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); padding: 1rem; text-align: center;
}
.td-stat-icon { font-size: 1.25rem; color: var(--hx-primary); margin-bottom: 0.25rem; }
.td-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--hx-text); }
.td-stat-label { font-size: 0.75rem; color: var(--hx-text-muted); }

.td-table {
    width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.td-table th {
    text-align: left; padding: 0.5rem 0.75rem; border-bottom: 2px solid var(--hx-border);
    color: var(--hx-text-muted); font-weight: 600; font-size: 0.8rem;
}
.td-table td {
    padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--hx-border); color: var(--hx-text);
}
.td-student-row { cursor: pointer; }
.td-student-row:hover { background: var(--hx-bg); }

.td-student-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-top: 1rem;
}
.td-breakdown {
    display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem;
}
.td-breakdown-item {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); padding: 0.5rem 1rem; text-align: center;
}
.td-breakdown-label {
    display: block; font-size: 0.75rem; color: var(--hx-text-muted); text-transform: capitalize;
}
.td-breakdown-value {
    display: block; font-size: 1.1rem; font-weight: 700; color: var(--hx-text);
}

.td-activity-chart {
    display: flex; align-items: flex-end; gap: 2px; height: 70px;
    margin-top: 0.5rem; padding: 0.25rem 0;
}
.td-bar {
    flex: 1; background: var(--hx-primary); border-radius: 2px 2px 0 0;
    min-width: 4px; transition: height 0.3s;
}
.td-bar:hover { opacity: 0.8; }

/* ═══════════════════════════════════════════════════════════════
   Parent Portal
   ═══════════════════════════════════════════════════════════════ */

.parent-link-bar {
    display: flex; gap: 0.5rem; margin-bottom: 1.5rem; align-items: center;
}
.parent-link-bar input {
    flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); background: var(--hx-card-bg); color: var(--hx-text);
    font-size: 0.9rem;
}

.parent-child-card {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem; background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); margin-bottom: 0.75rem;
}
.parent-child-info {
    display: flex; align-items: center; gap: 0.75rem; color: var(--hx-text);
    font-size: 0.95rem;
}
.parent-child-actions { display: flex; gap: 0.5rem; }

/* ═══════════════════════════════════════════════════════════════
   Assessment / Quiz
   ═══════════════════════════════════════════════════════════════ */

.quiz-header {
    display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem;
    padding: 0.5rem 0; flex-wrap: wrap;
}
.quiz-level-badge {
    padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.82rem; font-weight: 700;
    background: var(--hx-primary); color: white;
}
.quiz-timer {
    font-size: 1.1rem; font-weight: 700; color: var(--hx-text); font-variant-numeric: tabular-nums;
}
.quiz-timer-warning { color: var(--hx-red); }
.quiz-progress-text {
    font-size: 0.85rem; color: var(--hx-text-muted); margin-left: auto;
}

.quiz-card {
    max-width: 600px; margin: 0 auto; padding: 2rem;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    text-align: center; box-shadow: var(--shadow-sm);
}
.quiz-word {
    font-family: var(--hx-font-cjk); font-size: 3.5rem; color: var(--hx-text);
    line-height: 1.2; margin-bottom: 0.75rem;
}
.quiz-prompt {
    font-size: 0.9rem; color: var(--hx-text-muted); margin-bottom: 1.25rem;
}

.quiz-choices {
    display: flex; flex-direction: column; gap: 0.5rem; max-width: 400px; margin: 0 auto;
}
.quiz-choice {
    padding: 0.75rem 1rem; border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    background: var(--hx-card-bg); color: var(--hx-text); font-size: 0.9rem;
    cursor: pointer; transition: all 0.15s; text-align: left;
}
.quiz-choice:hover { border-color: var(--hx-primary); background: var(--hx-primary-light); }
.quiz-choice:disabled { cursor: default; opacity: 0.85; }
.quiz-choice-correct {
    border-color: var(--hx-primary) !important; background: var(--hx-primary-light) !important;
    color: var(--hx-primary) !important; font-weight: 600;
}
.quiz-choice-wrong {
    border-color: var(--hx-red) !important; background: var(--hx-red-light) !important; color: #991b1b !important;
}
[data-theme="dark"] .quiz-choice-wrong {
    background: #451a1a !important; color: #fca5a5 !important;
}

.quiz-result-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 5rem; height: 5rem; border-radius: 50%; font-size: 1.5rem; font-weight: 700;
    color: white;
}

.quiz-wrong-words { display: flex; flex-direction: column; gap: 0.4rem; }
.quiz-wrong-word-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 0.75rem; background: var(--hx-bg); border-radius: var(--hx-radius);
}
.quiz-wrong-word { font-family: var(--hx-font-cjk); font-size: 1.1rem; color: var(--hx-text); }
.quiz-wrong-def { font-size: 0.82rem; color: var(--hx-text-muted); }

/* Mock Test level grid */
.mock-level-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    max-width: 500px; margin: 1.5rem auto;
}

/* ── HSK Readiness ──────────────────────────────────────────── */
.readiness-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem; margin-top: 0.75rem;
}
.readiness-card {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    padding: 0.75rem; text-align: center;
}
.readiness-level { font-weight: 700; font-size: 0.9rem; color: var(--hx-text); margin-bottom: 0.25rem; }
.readiness-pct { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.25rem; }
.readiness-ready { color: var(--hx-green); }
.readiness-not-ready { color: var(--hx-text-muted); }
.readiness-badge {
    display: inline-block; padding: 0.1rem 0.5rem; border-radius: 12px;
    font-size: 0.75rem; font-weight: 600;
}
.readiness-badge.ready     { background: var(--hx-green-light);  color: var(--hx-green); }
.readiness-badge.not-ready { background: var(--hx-border);       color: var(--hx-text-muted); }

/* ── Word of Day ────────────────────────────────────────────── */
.wod-card {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    padding: 1.25rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 1.5rem;
}
.wod-char {
    font-family: var(--hx-font-cjk); font-size: 3rem; color: var(--hx-primary);
    line-height: 1; flex-shrink: 0;
}
.wod-info { flex: 1; }
.wod-pinyin { font-size: 0.9rem; color: var(--hx-primary); font-weight: 500; }
.wod-def { font-size: 0.85rem; color: var(--hx-text-muted); margin-top: 0.15rem; }
.wod-label {
    font-size: 0.75rem; text-transform: uppercase; color: var(--hx-text-faint);
    letter-spacing: 0.05em; margin-bottom: 0.25rem;
}

/* ── Keyboard Shortcuts Overlay ─────────────────────────────── */
.shortcuts-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.shortcuts-panel {
    background: var(--hx-card-bg); border-radius: 12px; padding: 1.5rem 2rem;
    max-width: 380px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.shortcuts-grid {
    display: flex; flex-direction: column; gap: 0.5rem;
}
.shortcut-item {
    display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--hx-text);
}
.shortcut-item span { margin-left: auto; color: var(--hx-text-muted); font-size: 0.82rem; }
kbd {
    display: inline-block; padding: 0.15rem 0.45rem; border-radius: 4px;
    background: var(--hx-bg); border: 1px solid var(--hx-border);
    font-family: monospace; font-size: 0.78rem; color: var(--hx-text);
    box-shadow: 0 1px 0 var(--hx-border);
}

/* ── Diagnostic results ─────────────────────────────────────── */
.diag-level-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 6rem; height: 6rem; border-radius: 50%; font-size: 1.75rem; font-weight: 700;
    background: var(--hx-primary); color: white;
}

/* ── Spin animation for loading icons ───────────────────────── */
.spin { animation: spin 1s linear infinite; }

/* ── Assessment history table ───────────────────────────────── */
.assess-history { width: 100%; font-size: 0.85rem; border-collapse: collapse; }
.assess-history th {
    text-align: left; padding: 0.4rem 0.6rem; border-bottom: 2px solid var(--hx-border);
    color: var(--hx-text-muted); font-weight: 600; font-size: 0.78rem;
}
.assess-history td {
    padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--hx-border); color: var(--hx-text);
}

/* ── Welcome Section (Home Page) ──────────────────────────── */
#welcome-section {
    margin-bottom: 1.5rem; padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--hx-border);
}
.welcome-hero {
    text-align: center; margin-bottom: 1.5rem; padding: 2rem 1rem 1rem;
}
.welcome-title {
    font-size: 1.75rem; font-weight: 700; color: var(--hx-text); margin-bottom: 0.25rem;
}
.welcome-tagline {
    font-size: 1rem; color: var(--hx-text-muted); margin: 0;
}
.welcome-features {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem; margin-bottom: 1.5rem;
}
.welcome-feature-card {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); padding: 1rem; text-align: center;
    text-decoration: none; color: inherit; transition: all 0.15s;
}
.welcome-feature-card:hover {
    border-color: var(--hx-primary); box-shadow: 0 2px 8px rgba(2,132,199,0.08);
    transform: translateY(-1px);
}
.welcome-feature-icon { font-size: 1.5rem; color: var(--hx-primary); margin-bottom: 0.5rem; }
.welcome-feature-title { font-size: 0.9rem; font-weight: 600; color: var(--hx-text); }
.welcome-feature-desc { font-size: 0.75rem; color: var(--hx-text-muted); margin-top: 0.25rem; }
.welcome-steps {
    display: flex; align-items: center; justify-content: center;
    gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap;
    padding: 1rem; background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius);
}
.welcome-step { display: flex; align-items: center; gap: 0.5rem; }
.welcome-step-num {
    width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--hx-primary); color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}
.welcome-step-text { display: flex; flex-direction: column; }
.welcome-step-text strong { font-size: 0.85rem; color: var(--hx-text); }
.welcome-step-text span { font-size: 0.75rem; color: var(--hx-text-muted); }
.welcome-step-arrow { color: var(--hx-text-faint); font-size: 1rem; }
.welcome-cta {
    text-align: center; margin-bottom: 0;
    display: flex; gap: 0.75rem; justify-content: center; align-items: center;
}
.welcome-cta-btn { padding: 0.6rem 1.5rem; font-size: 0.9rem; }
/* Collapsed state for returning users */
#welcome-section.welcome-collapsed .welcome-hero,
#welcome-section.welcome-collapsed .welcome-features,
#welcome-section.welcome-collapsed .welcome-steps { display: none; }
#welcome-section.welcome-collapsed { margin-bottom: 0.75rem; padding-bottom: 0.75rem; }
@media (max-width: 768px) {
    .welcome-features { grid-template-columns: repeat(2, 1fr); }
    .welcome-steps { flex-direction: column; gap: 0.5rem; }
    .welcome-step-arrow { transform: rotate(90deg); }
    .welcome-hero { padding: 1rem 0.5rem 0.5rem; }
    .welcome-title { font-size: 1.35rem; }
}

/* ── Welcome / Onboarding ──────────────────────────────────── */
.welcome-card {
    max-width: 480px; margin: 2rem auto; padding: 2rem;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius);
}
.welcome-title { margin: 0 0 0.25rem; color: var(--hx-text); font-size: 1.35rem; }
.welcome-sub { color: var(--hx-text-muted); font-size: 0.9rem; margin: 0 0 1.25rem; }
.welcome-choices { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.welcome-choice {
    flex: 1; min-width: 130px; padding: 1.25rem 0.75rem; text-align: center;
    background: var(--hx-bg); border: 2px solid var(--hx-border); border-radius: var(--hx-radius);
    cursor: pointer; transition: all 0.15s;
}
.welcome-choice:hover { border-color: var(--hx-primary); }
.welcome-choice i { font-size: 1.75rem; color: var(--hx-primary); display: block; margin-bottom: 0.5rem; }
.welcome-choice-title { font-size: 0.95rem; font-weight: 600; color: var(--hx-text); }
.welcome-choice-desc { font-size: 0.78rem; color: var(--hx-text-muted); margin-top: 0.15rem; }
.welcome-back {
    background: none; border: none; cursor: pointer; font-size: 0.85rem;
    color: var(--hx-text-muted); padding: 0; margin-bottom: 0.75rem;
}
.welcome-back:hover { color: var(--hx-primary); }
.welcome-select {
    width: 100%; padding: 0.5rem; border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); font-size: 0.9rem; margin-bottom: 0.5rem;
    background: var(--hx-card-bg); color: var(--hx-text);
}
.welcome-action {
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    width: 100%; padding: 0.55rem 1rem; font-size: 0.85rem;
    text-align: center; text-decoration: none; border-radius: var(--hx-radius);
}
.goal-grid, .pace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.goal-btn, .pace-btn {
    padding: 1.2rem;
    border: 2px solid var(--hx-border);
    border-radius: 12px;
    background: var(--hx-surface);
    color: var(--hx-text);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    font-size: 0.95rem;
}
.goal-btn:hover, .pace-btn:hover {
    border-color: var(--hx-accent);
    transform: translateY(-2px);
}
.goal-btn.selected, .pace-btn.selected {
    border-color: var(--hx-accent);
    background: var(--hx-accent-bg, rgba(59, 130, 246, 0.1));
}
.goal-btn i, .pace-btn i {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

/* ── Role Home Pages ──────────────────────────────────────── */
/* E3-S: Home content narrow column — prevents full-width stretching on wide screens */
.hx-home-col {
    max-width: 900px;
    margin: 0 auto;
}

/* ── E3-U: Dashboard Zones ──────────────────────────────────── */

/* Zone A: Status Strip */
.hx-status-strip {
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem; flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.hx-status-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.75rem; font-weight: 500; color: var(--hx-text-muted);
    padding: 0.2rem 0.6rem; border-radius: 999px;
    background: var(--hx-surface);
}
.hx-status-pill--warm { color: #92400e; }
.hx-status-pill--hot  { color: var(--hx-red, var(--hx-red)); font-weight: 700; }
.hx-status-pill--exam { color: var(--hx-primary); }
.hx-status-pill--exam i { font-size: 0.7rem; }
.hx-dot-track { display: inline-flex; gap: 2px; align-items: center; }
.hx-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--hx-border);
    transition: background 0.3s ease;
}
.hx-dot--filled { background: var(--hx-primary); }

/* Zone B: Progress Hero */
.hx-progress-hero {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); box-shadow: var(--shadow-sm);
    padding: 1rem; margin-bottom: 0.75rem;
    transition: box-shadow 0.2s ease;
}
.hx-progress-hero__top {
    display: flex; align-items: center; gap: 1rem;
}
.hx-gauge { width: 100px; height: 100px; flex-shrink: 0; }
.hx-gauge__track {
    fill: none; stroke: var(--hx-surface); stroke-width: 7;
}
.hx-gauge__fill {
    fill: none; stroke-width: 7; stroke-linecap: round;
    transition: stroke-dashoffset 1s var(--hx-spring);
}
.hx-gauge__pct {
    font-size: 1.4rem; font-weight: 800; fill: var(--hx-text);
    dominant-baseline: auto;
}
.hx-gauge__label {
    font-size: 0.75rem; font-weight: 500; fill: var(--hx-text-muted);
    dominant-baseline: auto;
}
.hx-progress-hero__stats { flex: 1; min-width: 0; }
.hx-progress-hero__level {
    font-size: 0.95rem; font-weight: 700; color: var(--hx-text);
    margin-bottom: 0.15rem;
}
.hx-progress-hero__words {
    font-size: 0.8rem; color: var(--hx-text-muted); margin-bottom: 0.4rem;
}
.hx-progress-hero__bar {
    height: 8px; background: var(--hx-surface); border-radius: 4px;
    overflow: hidden; margin-bottom: 0.3rem;
}
.hx-progress-hero__bar-fill {
    height: 100%; border-radius: 4px;
    transition: width 0.8s var(--hx-spring);
}
.hx-progress-hero__ready {
    font-size: 0.78rem; font-weight: 600; color: var(--hx-green);
}
.hx-progress-hero__remaining {
    font-size: 0.78rem; color: var(--hx-text-muted);
}
.hx-progress-hero__coverage {
    font-size: 0.75rem; color: var(--hx-text-muted); margin-top: 0.15rem;
}

/* Progress hero expand toggle */
.hx-progress-hero__toggle {
    display: flex; align-items: center; justify-content: center;
    gap: 0.3rem; width: 100%;
    margin-top: 0.6rem; padding: 0.3rem 0;
    background: none; border: none; border-top: 1px solid var(--hx-border);
    color: var(--hx-text-muted); font-size: 0.75rem; font-weight: 500;
    cursor: pointer; transition: color 0.15s;
}
.hx-progress-hero__toggle:hover { color: var(--hx-primary); }
.hx-progress-hero__toggle i {
    font-size: 0.7rem;
    transition: transform 0.25s var(--hx-spring);
}
.hx-progress-hero__expand {
    max-height: 0; overflow: hidden;
    transition: max-height 0.35s var(--hx-spring);
}
.hx-progress-hero__expand.is-open { max-height: 500px; }

/* All-levels mini list (inside progress hero expand) */
.hx-all-levels { padding-top: 0.5rem; }
.hx-all-levels__row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.25rem 0; text-decoration: none;
    transition: background 0.15s;
}
.hx-all-levels__row:hover { background: var(--hx-surface); border-radius: 4px; }
.hx-all-levels__label {
    font-size: 0.78rem; font-weight: 600; color: var(--hx-text);
    min-width: 3.2rem;
}
.hx-all-levels__bar {
    flex: 1; height: 6px; background: var(--hx-surface);
    border-radius: 3px; overflow: hidden;
}
.hx-all-levels__bar-fill {
    height: 100%; border-radius: 3px;
    transition: width 0.5s var(--hx-spring);
}
.hx-all-levels__pct {
    font-size: 0.75rem; color: var(--hx-text-muted);
    min-width: 2.5rem; text-align: right;
}

/* Zone: Compact Roadmap (self-guided) */
.hx-roadmap {
    display: flex; align-items: flex-start; gap: 0;
    padding: 0.65rem 0.5rem; margin-bottom: 0.5rem;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius, 10px);
    overflow-x: auto;
}
.hx-roadmap__step {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    min-width: 0; flex: 1; text-decoration: none; color: inherit;
}
a.hx-roadmap__step:hover .hx-roadmap__dot {
    transform: scale(1.15);
}
a.hx-roadmap__step { cursor: pointer; }
.hx-roadmap__dot {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
    transition: all 0.2s;
}
.hx-roadmap__step--done .hx-roadmap__dot {
    background: var(--hx-green); color: #fff;
}
.hx-roadmap__step--active .hx-roadmap__dot {
    background: var(--hx-primary); color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hx-primary) 20%, transparent);
}
.hx-roadmap__step--locked .hx-roadmap__dot {
    background: var(--hx-border); color: var(--hx-text-faint);
}
.hx-roadmap__step--locked .hx-roadmap__dot i { font-size: 0.65rem; }
.hx-roadmap__content { margin-top: 0.3rem; }
.hx-roadmap__label {
    font-size: 0.75rem; font-weight: 600; color: var(--hx-text);
    line-height: 1.2;
}
.hx-roadmap__step--locked .hx-roadmap__label { color: var(--hx-text-faint); }
.hx-roadmap__step--done .hx-roadmap__label { color: var(--hx-text-muted); }
.hx-roadmap__detail {
    font-size: 0.75rem; color: var(--hx-text-muted); margin-top: 0.1rem;
}
.hx-roadmap__step--locked .hx-roadmap__detail { color: var(--hx-text-faint); }
.hx-roadmap__bar {
    width: 100%; max-width: 60px; height: 3px; border-radius: 2px;
    background: var(--hx-border); margin: 0.25rem auto 0;
}
.hx-roadmap__bar-fill {
    height: 100%; border-radius: 2px; background: var(--hx-primary);
    transition: width 0.3s;
}
.hx-roadmap__connector {
    width: 20px; min-width: 12px; height: 2px;
    background: var(--hx-border); align-self: center; margin-top: -14px;
    flex-shrink: 0;
}
.hx-roadmap__connector--done { background: var(--hx-green); }

/* Zone D: Weekly Plan */
.hx-weekly-plan { margin-top: 0.5rem; margin-bottom: 0.75rem; padding: 0.65rem 0.75rem; background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius, 10px); }
.hx-weekly-plan__header {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.78rem; font-weight: 600; color: var(--hx-text-muted);
    margin-bottom: 0.3rem;
}
.hx-weekly-plan__header a {
    font-size: 0.75rem; color: var(--hx-primary); text-decoration: none;
}
.hx-weekly-plan__header a:hover { text-decoration: underline; }
.hx-weekly-plan__focus {
    font-size: 0.75rem; color: #92400e;
    margin-bottom: 0.35rem;
}
.hx-weekly-plan__focus i { font-size: 0.7rem; margin-right: 0.15rem; }
.hx-weekly-plan__item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0; font-size: 0.83rem; color: var(--hx-text);
    cursor: pointer;
    border-bottom: 1px solid color-mix(in srgb, var(--hx-border) 50%, transparent);
}
.hx-weekly-plan__item:last-child { border-bottom: none; }
.hx-weekly-plan__item input[type="checkbox"] {
    accent-color: var(--hx-primary); width: 1rem; height: 1rem;
    flex-shrink: 0; cursor: pointer;
}
.hx-weekly-plan__item i { font-size: 0.85rem; flex-shrink: 0; }
.hx-weekly-plan__item.is-done { opacity: 0.45; }
.hx-weekly-plan__item.is-done .hx-weekly-plan__title { text-decoration: line-through; }
.hx-weekly-plan__title { font-weight: 500; }
.hx-weekly-plan__link {
    text-decoration: none; color: inherit; flex: 1; min-width: 0;
}
.hx-weekly-plan__link:hover { color: var(--hx-primary); }

.home-section {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); padding: 1.25rem; margin-bottom: 1rem;
}
/* E3-Q5: Section title warmth — sentence case, warmer color, no shouting */
.home-section-title {
    font-size: 0.85rem; font-weight: 700; letter-spacing: 0.01em;
    color: var(--hx-text); margin-bottom: 0.75rem;
}
.home-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.home-action-card {
    flex: 1; min-width: 120px; padding: 1rem; text-align: center; text-decoration: none;
    background: var(--hx-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    transition: all 0.15s; cursor: pointer; color: var(--hx-text);
}
.home-action-card:hover { border-color: var(--hx-primary); color: var(--hx-text); }
.home-action-card i { font-size: 1.5rem; color: var(--hx-primary); display: block; margin-bottom: 0.35rem; }
.home-action-card .action-label { font-size: 0.82rem; font-weight: 600; }
.home-action-card .action-detail { font-size: 0.75rem; color: var(--hx-text-muted); margin-top: 0.15rem; }
.home-stat { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--hx-text); }
.home-stat i { color: var(--hx-primary); }
/* E3-Q3: Progress bar polish — taller, gradient fill, spring easing */
.home-progress-bar {
    height: 10px; background: var(--hx-surface); border-radius: 5px; overflow: hidden; margin-top: 0.5rem;
}
.home-progress-fill {
    height: 100%; border-radius: 5px;
    background: linear-gradient(90deg, var(--hx-primary), color-mix(in srgb, var(--hx-primary) 70%, var(--hx-green)));
    transition: width 0.5s var(--hx-spring);
}

/* ── Today's Focus ─────────────────────────────────────────── */
.focus-card {
    background: linear-gradient(135deg, var(--hx-primary-light), var(--hx-card-bg));
    border: 1px solid var(--hx-primary); border-radius: var(--hx-radius);
    padding: 1.25rem; margin-bottom: 1rem; position: relative; overflow: hidden;
}
.focus-card::before {
    content: ''; position: absolute; top: -30px; right: -30px;
    width: 100px; height: 100px; border-radius: 50%;
    background: var(--hx-primary); opacity: 0.06;
}
.focus-greeting {
    font-size: 1.1rem; font-weight: 700; color: var(--hx-text); margin-bottom: 0.15rem;
}
.focus-subtitle {
    font-size: 0.82rem; color: var(--hx-text-muted); margin-bottom: 1rem;
}
.focus-items { display: flex; flex-direction: column; gap: 0.6rem; }
.focus-item {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: 8px; text-decoration: none; color: var(--hx-text);
    transition: all 0.15s; cursor: pointer;
}
.focus-item:hover { border-color: var(--hx-primary); transform: translateX(2px); }
.focus-item-icon {
    width: 36px; height: 36px; border-radius: 8px; display: flex;
    align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0;
}
.focus-item-icon.review { background: #fef3c7; color: #d97706; }
.focus-item-icon.study  { background: var(--hx-primary-light); color: var(--hx-primary); }
.focus-item-icon.streak { background: #fce7f3; color: #db2777; }
.focus-item-icon.vocab  { background: #d1fae5; color: var(--hx-green); }
.focus-item-icon.test   { background: #ede9fe; color: #7c3aed; }
.focus-item-icon.read   { background: var(--hx-primary-light); color: var(--hx-primary); }
.focus-item-body { flex: 1; min-width: 0; }
.focus-item-title { font-size: 0.88rem; font-weight: 600; }
.focus-item-desc { font-size: 0.78rem; color: var(--hx-text-muted); margin-top: 0.1rem; }
.focus-item-arrow { color: var(--hx-text-faint); font-size: 0.9rem; }
.focus-streak-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem; font-weight: 600; color: var(--hx-primary);
    background: var(--hx-primary-light); padding: 0.2rem 0.6rem;
    border-radius: 999px; margin-left: 0.5rem;
}

/* ── Coach Hero — minimal context line above action tiles ────── */
.hx-coach-hero {
    background: none; border: none; padding: 0; margin-bottom: 0;
    position: static; overflow: visible;
}
.hx-coach-hero::before { display: none; }
.hx-coach-msg  { display: none; }  /* replaced by .hx-coach-line only */
.hx-coach-avatar { display: none; }
.hx-coach-text { display: none; }
.hx-coach-greeting { display: none; }
/* E3-Q6: Coach line accent — readable text, not faded */
.hx-coach-line {
    font-size: 0.85rem; color: var(--hx-text); line-height: 1.5;
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
    margin: 0 0 0.65rem;
}
.hx-hero-cta {
    display: flex; align-items: center; gap: 0.65rem;
    width: 100%; padding: 0.7rem 1rem; background: var(--hx-primary); color: white;
    border: none; border-radius: var(--hx-radius); font-size: 0.92rem; font-weight: 700;
    text-decoration: none; cursor: pointer; transition: all 0.15s; line-height: 1.3;
}
.hx-hero-cta:hover {
    background: var(--hx-primary-mid); color: white;
    transform: translateY(-1px); box-shadow: 0 4px 12px rgba(2,132,199,0.3);
}
.hx-hero-cta > i { font-size: 1.15rem; flex-shrink: 0; }
/* Legacy direct span/small — kept for any callers that haven't migrated to hx-hero-cta-body */
.hx-hero-cta > span { font-size: 0.92rem; font-weight: 700; flex: 1; }
.hx-hero-cta > small { font-size: 0.75rem; font-weight: 400; opacity: 0.85; margin-left: auto; white-space: nowrap; }
.hx-next-up { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.hx-next-item {
    display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.6rem;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: 8px; text-decoration: none; color: var(--hx-text);
    font-size: 0.85rem; transition: all 0.15s;
}
.hx-next-item > i:first-child { font-size: 1rem; color: var(--hx-primary); flex-shrink: 0; }
.hx-next-item > span { flex: 1; min-width: 0; }
.hx-next-item > i.bi-chevron-right { color: var(--hx-text-faint); font-size: 0.8rem; }
.hx-next-item:hover { border-color: var(--hx-primary); }

/* Coach strip for teacher/parent/admin home pages */
.hx-coach-strip {
    display: flex; align-items: center; gap: 0.75rem;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); padding: 0.9rem 1rem; margin-bottom: 1rem;
}

/* Prof Hanlexon welcome intro on onboarding step 0 */
.welcome-prof-intro {
    display: flex; align-items: flex-start; gap: 0.85rem;
    background: var(--hx-primary-light); border-radius: var(--hx-radius);
    padding: 1rem 1.1rem; margin-bottom: 1.25rem;
}
.welcome-prof-name {
    font-size: 0.88rem; font-weight: 700; color: var(--hx-primary); margin-bottom: 0.2rem;
}
.welcome-prof-quote { font-size: 0.85rem; color: var(--hx-text); line-height: 1.4; }

/* ── Worksheet Center: Full-Width Layout ──────────────────── */
.ws-layout {
    display: flex; flex-direction: column; height: calc(100vh - 52px); overflow: hidden;
}

/* Sources panel no longer used as separate column */
.ws-sources-panel { display: none; }
.ws-source-panels { flex: 1; overflow-y: auto; padding-top: 0.25rem; }
.ws-source-content { display: none; }
.ws-source-content--active { display: block; }
.ws-sources-close {
    background: none; border: none; color: var(--hx-text-muted);
    cursor: pointer; padding: 0; font-size: 0.9rem; line-height: 1;
}
.ws-sources-close:hover { color: var(--hx-text); }
.ws-sources-title {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--hx-text-muted);
    padding: 0 0.75rem 0.5rem; margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--hx-border);
}
.ws-source-group { border-bottom: 1px solid var(--hx-border); }
.ws-source-header {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 0.6rem 0.75rem; border: none; background: none;
    color: var(--hx-text); font-size: 0.85rem; font-weight: 500;
    cursor: pointer; transition: background 0.15s;
}
.ws-source-header:hover { background: var(--hx-primary-light); }
.ws-source-header span { display: flex; align-items: center; gap: 0.4rem; }
.ws-source-header i.ws-source-chevron {
    font-size: 0.7rem; color: var(--hx-text-muted); transition: transform 0.2s;
}
.ws-source-header.ws-source-open { color: var(--hx-primary); background: var(--hx-primary-light); }
.ws-source-header.ws-source-open i.ws-source-chevron { transform: rotate(90deg); color: var(--hx-primary); }
.ws-source-body { padding: 0.5rem 0.75rem; }
.ws-source-select {
    width: 100%; padding: 0.35rem 0.5rem; border: 1px solid var(--hx-border);
    border-radius: 6px; background: var(--hx-bg); color: var(--hx-text);
    font-size: 0.82rem;
}
.ws-source-action {
    width: 100%; padding: 0.4rem; border: 1px solid var(--hx-primary);
    border-radius: 6px; background: var(--hx-primary); color: white;
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: background 0.15s;
}
.ws-source-action:hover { background: var(--hx-primary-mid); }

/* AI word chips */
.ws-ai-word-chip {
    padding: 0.25rem 0.5rem; border-radius: 4px; border: 1px solid var(--hx-border);
    background: var(--hx-card-bg); font-family: var(--hx-font-cjk); font-size: 1rem;
    cursor: pointer; transition: all 0.15s;
}
.ws-ai-word-chip:hover { border-color: var(--hx-primary); background: var(--hx-primary-light); }
.ws-ai-word-chip.selected { background: var(--hx-primary); color: white; border-color: var(--hx-primary); }

/* Sources toggle (inline in toolbar) */
.ws-sources-toggle {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.85rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600;
    background: var(--hx-primary); color: white; border: none;
    cursor: pointer; white-space: nowrap;
    transition: background 0.15s, transform 0.1s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.ws-sources-toggle:hover { background: var(--hx-primary-mid); transform: translateY(-1px); }
.ws-sources-toggle:active { transform: translateY(0); }

/* ── Browse mode ─────────────────────────────────────────── */
/* Browse mode header */
.ws-browse-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--hx-border);
    background: var(--hx-surface, #f8f9fb);
}

/* Browse grid — card grid for word cards / list cards */
.ws-browse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
    padding: 0.5rem 0;
}

/* Word card in browse grid */
.ws-browse-card {
    padding: 0.5rem;
    border: 1px solid var(--hx-border);
    border-radius: 8px;
    background: var(--hx-card-bg);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.ws-browse-card:hover {
    border-color: var(--hx-primary);
    background: var(--hx-primary-light);
}
.ws-browse-card.selected {
    border-color: var(--hx-primary);
    background: var(--hx-primary-light);
    box-shadow: 0 0 0 2px var(--hx-primary);
}
.ws-browse-card__char {
    font-family: var(--hx-font-cjk);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--hx-text);
    line-height: 1.2;
}
.ws-browse-card__pinyin {
    font-size: 0.75rem;
    color: var(--hx-primary);
    margin-top: 0.15rem;
}
.ws-browse-card__def {
    font-size: 0.75rem;
    color: var(--hx-text-muted);
    margin-top: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* List card (for My Lists) — wider, horizontal layout */
.ws-browse-list-card {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--hx-border);
    border-radius: 8px;
    background: var(--hx-card-bg);
    cursor: pointer;
    transition: all 0.15s;
}
.ws-browse-list-card:hover {
    border-color: var(--hx-primary);
    background: var(--hx-primary-light);
}
.ws-browse-list-card__title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hx-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-browse-list-card__meta {
    font-size: 0.75rem;
    color: var(--hx-text-muted);
    margin-top: 0.15rem;
}

/* My Lists vertical list items */
.ws-mylist-item {
    display: flex; align-items: center; gap: 0.4rem; width: 100%; text-align: left;
    padding: 0.45rem 0.6rem; border: none; border-bottom: 1px solid var(--hx-border);
    background: none; color: var(--hx-text); cursor: pointer; font-size: 0.85rem;
    transition: background 0.15s;
}
.ws-mylist-item:hover { background: var(--hx-primary-light); }
.ws-mylist-item:last-child { border-bottom: none; }

/* Browse panel content padding */
.ws-browse-panel {
    padding: 0.75rem 1rem;
    overflow-y: auto;
    flex: 1;
}
/* Preview bar (sticky at bottom of browse mode) */
.ws-browse-preview {
    position: sticky; bottom: 0;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--hx-border);
    background: var(--hx-surface, #f8f9fb);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}
.ws-browse-preview__label {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.78rem; font-weight: 600; color: var(--hx-text);
    margin-bottom: 0.35rem;
}
.ws-browse-preview__text {
    font-family: var(--hx-font-cjk); font-size: 1.1rem; line-height: 1.6;
    color: var(--hx-text); padding: 0.5rem; max-height: 80px; overflow-y: auto;
    border: 1px solid var(--hx-border); border-radius: 6px; background: var(--hx-card-bg);
    word-break: break-all;
}

/* ── Main panel (full-width) ─────────────────────────────── */
.ws-main-panel {
    flex: 1; overflow-y: auto; min-width: 0;
    display: flex; flex-direction: column;
}

/* Sticky toolbar */
.ws-toolbar {
    position: sticky; top: 0; z-index: var(--z-dropdown);
    background: var(--hx-card-bg); border-bottom: 1px solid var(--hx-border);
    padding: 0.5rem 1rem;
}
.ws-toolbar-row { margin-bottom: 0.4rem; }
.ws-toolbar-row:last-child { margin-bottom: 0; }
.ws-text-input {
    width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--hx-border);
    border-radius: 6px; font-size: 0.95rem; background: var(--hx-bg);
    color: var(--hx-text); resize: vertical; font-family: var(--hx-font-cjk);
    min-height: 4rem; max-height: 50vh;
}
.ws-text-input:focus { border-color: var(--hx-primary); outline: none; box-shadow: 0 0 0 3px rgba(2,132,199,0.12); }
.ws-title-input {
    padding: 0.3rem 0.6rem; border: 1px solid var(--hx-border);
    border-radius: 6px; font-size: 0.82rem; background: var(--hx-bg);
    color: var(--hx-text); width: 200px; min-width: 120px;
}
.ws-title-input:focus { border-color: var(--hx-primary); outline: none; }

.ws-toolbar-actions {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.ws-toolbar-settings {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    padding-top: 0.35rem; border-top: 1px solid var(--hx-border);
}

/* Tool tab groups */
.ws-tool-tabs { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; min-width: 0; }
.ws-tab-switcher { display: flex; gap: 0.25rem; }
.ws-tab-toggle {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.25rem 0.65rem; border: none; border-radius: 20px;
    background: transparent; color: var(--hx-text-muted); font-size: 0.78rem; font-weight: 500;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.ws-tab-toggle:hover { color: var(--hx-primary); background: var(--hx-primary-light); }
.ws-tab-toggle.ws-tab-active {
    color: var(--hx-primary); background: var(--hx-primary-light); font-weight: 600;
}
.ws-tab-panel { animation: fadeIn 0.2s ease-out; }

/* Type buttons in toolbar */
.ws-type-buttons { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.ws-type-btn {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.3rem 0.6rem; border: 1px solid var(--hx-border); border-radius: 6px;
    background: var(--hx-card-bg); color: var(--hx-text); font-size: 0.82rem;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.ws-type-btn:hover { border-color: var(--hx-primary); color: var(--hx-primary); }
.ws-type-btn.ws-type-active {
    border-color: var(--hx-primary); background: var(--hx-primary-light);
    color: var(--hx-primary); font-weight: 600;
}

/* Preview controls in toolbar */
.ws-preview-controls {
    display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
    font-size: 0.82rem;
}

/* Print button */
.ws-print-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.75rem; border: 1px solid var(--hx-primary); border-radius: 6px;
    background: var(--hx-primary); color: white; font-size: 0.82rem; font-weight: 600;
    cursor: pointer; transition: background 0.15s; white-space: nowrap;
    margin-left: auto;
}
.ws-print-btn:hover { background: var(--hx-primary-mid); }

/* Preview thumbnails */
.ws-preview-thumbs { padding: 0.5rem; background: var(--hx-card-bg); border-bottom: 1px solid var(--hx-border); display: flex; gap: 0.5rem; overflow-x: auto; }
.ws-thumb { width: 2.5rem; height: 3.5rem; border: 2px solid var(--hx-border); border-radius: 4px; background: var(--hx-card-bg); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; }
.ws-thumb:hover, .ws-thumb.active { border-color: var(--hx-primary); }
.ws-thumb.active { box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2); }
.ws-thumb-num { font-size: 0.75rem; font-weight: 600; color: var(--hx-text-muted); }

/* Preview area */
#ws-preview-area { padding: 1rem; flex: 1; overflow-y: auto; }
.pv-content-inline { width: 100%; }
.pv-content-inline .pv-page {
    transform-origin: top center;
    transform: scale(var(--pv-scale, 0.75));
    margin-bottom: calc(-11in * (1 - var(--pv-scale, 0.75)));
    margin-left: auto; margin-right: auto;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
/* Breathing room after the last A4 page so it doesn't touch browser bottom */
.pv-content-inline::after {
    content: ''; display: block;
    height: calc(3rem + 11in * (1 - var(--pv-scale, 0.75)));
}

/* Settings option buttons (kept for compatibility) */
.ws-type-option-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 0.85rem; border: 1px solid var(--hx-border); border-radius: 8px;
    font-size: 0.85rem; color: var(--hx-text); background: var(--hx-card-bg);
    cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.ws-type-option-btn:hover { border-color: var(--hx-primary); }
.ws-type-option-btn.active {
    border-color: var(--hx-primary); background: var(--hx-primary-light); font-weight: 600;
}

/* ── Word cards in sidebar ────────────────────────────────── */
.ws-word-list {
    max-height: 300px; overflow-y: auto; margin-top: 0.5rem;
    display: flex; flex-direction: column; gap: 0.2rem;
}
.ws-word-load-all {
    width: 100%; padding: 0.35rem; border: 1px solid var(--hx-primary); border-radius: 6px;
    background: var(--hx-primary-light); color: var(--hx-primary); font-size: 0.78rem; font-weight: 600;
    cursor: pointer; margin-bottom: 0.3rem;
}
.ws-word-load-all:hover { background: var(--hx-primary); color: white; }
.ws-word-card {
    display: flex; align-items: center; gap: 0.4rem; width: 100%; text-align: left;
    padding: 0.3rem 0.4rem; border: 1px solid var(--hx-border); border-radius: 5px;
    background: var(--hx-bg); color: var(--hx-text); cursor: pointer; font-size: 0.78rem;
    transition: background 0.15s;
}
.ws-word-card:hover { background: var(--hx-primary-light); border-color: var(--hx-primary); }
.ws-wc-char { font-family: var(--hx-font-cjk); font-weight: 600; font-size: 0.9rem; min-width: 1.5rem; }
.ws-wc-meta { flex: 1; overflow: hidden; display: flex; flex-direction: column; gap: 0.05rem; }
.ws-wc-pinyin { color: var(--hx-primary); font-size: 0.75rem; }
.ws-wc-def { color: var(--hx-text-muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Interactive tools: Practice mode ────────────────────── */
.st-practice { padding: 1rem 0; }
.st-practice-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
    max-width: 800px; margin: 0 auto;
}
.st-hanzi-panel {
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
}
.st-selected-char {
    display: flex; align-items: center; gap: 0.5rem; justify-content: center;
}
.st-char-display {
    font-family: var(--hx-font-cjk); font-size: 2rem; font-weight: 700;
    color: var(--hx-text); text-align: center;
}
.st-char-selector {
    display: flex; gap: 0.25rem; flex-wrap: wrap; justify-content: center;
}
.st-hanzi-target {
    width: 220px; height: 220px; border: 2px solid var(--hx-border); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--hx-card-bg);
}
.st-hanzi-controls { display: flex; gap: 0.4rem; }
.st-quiz-feedback { font-size: 0.85rem; min-height: 1.2rem; text-align: center; }
.st-word-context {
    padding: 0.5rem; background: var(--hx-primary-light); border-radius: 6px;
    margin-bottom: 0.75rem; font-size: 0.85rem;
}
.st-info-panel {
    padding: 0.5rem 0; font-size: 0.9rem; color: var(--hx-text);
}
.st-info-pinyin { font-size: 1.1rem; color: var(--hx-primary); font-weight: 500; margin-bottom: 0.25rem; }
.st-info-badges { margin-bottom: 0.5rem; }
.st-info-definition { font-size: 0.95rem; margin-bottom: 0.75rem; line-height: 1.5; }
.st-info-decomp-section, .st-info-example-section, .st-info-related-section, .st-info-stroke-section {
    margin-bottom: 0.75rem; font-size: 0.85rem;
}
.st-info-stroke-img { max-width: 200px; border-radius: 4px; }
.st-nav {
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    padding: 0.75rem 1rem; border-top: 1px solid var(--hx-border);
    background: var(--hx-card-bg);
    position: sticky; bottom: 0; z-index: 10;
}
.st-word-counter { font-size: 0.85rem; color: var(--hx-text-muted); min-width: 4rem; text-align: center; }
.st-mastery-actions { display: flex; gap: 0.4rem; }
.st-btn-know { color: var(--hx-primary) !important; border-color: var(--hx-primary) !important; }
.st-btn-dont-know { color: var(--hx-red, var(--hx-red)) !important; border-color: var(--hx-red, var(--hx-red)) !important; }

/* ── Interactive tools: Flashcard mode ───────────────────── */
.st-flashcard {
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    padding: 2rem 0;
}
.st-fc-scene {
    perspective: 600px; width: 280px; height: 280px; will-change: transform;
}
.st-fc-card {
    width: 100%; height: 100%; position: relative;
    transform-style: preserve-3d; transition: transform 0.5s;
    cursor: pointer; outline: none; will-change: transform;
}
.st-fc-card.st-fc-flipped { transform: rotateY(180deg); }
.st-fc-front, .st-fc-back {
    position: absolute; inset: 0; backface-visibility: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 2px solid var(--hx-border); border-radius: 12px;
    background: var(--hx-card-bg); padding: 1rem;
}
.st-fc-back { transform: rotateY(180deg); }
.st-fc-char {
    font-family: var(--hx-font-cjk); font-size: 5rem; font-weight: 700;
    color: var(--hx-text); line-height: 1.1;
}
.st-fc-pinyin { font-size: 1.5rem; color: var(--hx-primary); margin-bottom: 0.5rem; }
.st-fc-def { font-size: 1rem; color: var(--hx-text); text-align: center; line-height: 1.4; }
.st-fc-hint-pinyin {
    font-size: 1rem; color: var(--hx-primary); text-align: center;
}
.st-fc-nav {
    display: flex; align-items: center; gap: 1rem;
}
.st-fc-counter { font-size: 0.85rem; color: var(--hx-text-muted); min-width: 4rem; text-align: center; }
.st-fc-options { margin-top: 0.5rem; }
.st-fc-swipe-hint {
    text-align: center; font-size: 0.75rem; color: var(--hx-text-faint);
    margin-top: 0.75rem; opacity: 0.7;
}

/* ── Interactive tools: Scramble mode ────────────────────── */
.st-scramble { padding: 1rem 0; max-width: 700px; margin: 0 auto; }
.st-scramble-hint { text-align: center; font-size: 0.85rem; color: var(--hx-text-muted); margin-bottom: 1rem; }
.st-scramble-sources {
    display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
    margin-bottom: 1.5rem; min-height: 3.5rem;
}
.st-scramble-tile {
    width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center;
    font-family: var(--hx-font-cjk); font-size: 1.4rem; font-weight: 600;
    background: var(--hx-card-bg); border: 2px solid var(--hx-primary);
    border-radius: 8px; cursor: grab; transition: opacity 0.3s, transform 0.3s;
    color: var(--hx-text); user-select: none; -webkit-touch-callout: none; will-change: transform;
    touch-action: none; -webkit-tap-highlight-color: transparent;
}
.st-scramble-tile:hover { transform: scale(1.08); box-shadow: 0 2px 8px rgba(34,197,94,0.2); }
.st-scramble-tile:active { transform: scale(1.12); }
.st-tile-dragging { opacity: 0.4; transform: scale(0.9); }
.st-tile-matched { opacity: 0; transform: scale(0.5); pointer-events: none; transition: all 0.4s ease-out; }
.st-scramble-targets {
    display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
}
.st-scramble-slot {
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
    transition: transform 0.3s;
}
.st-scramble-pinyin {
    font-size: 0.82rem; color: var(--hx-primary); text-align: center; min-width: 3rem;
}
.st-scramble-drop {
    width: 3rem; height: 3rem; border: 2px dashed var(--hx-border); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--hx-font-cjk); font-size: 1.4rem; font-weight: 600;
    color: var(--hx-text); transition: all 0.3s;
}
.st-slot-hover .st-scramble-drop { border-color: var(--hx-primary); background: var(--hx-primary-light); transform: scale(1.05); }
.st-slot-wrong { animation: shake 0.4s; }
.st-slot-wrong .st-scramble-drop { border-color: var(--hx-red); background: #fef2f2; }
.st-slot-matched { animation: matchPop 0.3s ease-out; }
.st-slot-matched .st-scramble-drop {
    border-style: solid; border-color: var(--hx-primary); background: var(--hx-primary-light);
    box-shadow: 0 0 12px rgba(34,197,94,0.3);
}
.st-drop-filled { color: var(--hx-text); }
.st-scramble-result {
    text-align: center; margin-top: 1.5rem; padding: 1rem;
    font-size: 1rem; font-weight: 600; color: var(--hx-primary);
    animation: fadeInUp 0.3s ease-out;
}
.st-scramble-touch-clone {
    position: fixed; z-index: var(--z-modal-backdrop); pointer-events: none;
    width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center;
    font-family: var(--hx-font-cjk); font-size: 1.6rem; font-weight: 600;
    background: var(--hx-card-bg); border: 2px solid var(--hx-primary);
    border-radius: 10px; color: var(--hx-text);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15); opacity: 0.9;
    transition: transform 0.05s;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
@keyframes matchPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Empty state guidance ────────────────────────────────── */
.ws-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 3rem 1.5rem; text-align: center; flex: 1; min-height: 300px;
}
.ws-empty-icon {
    font-size: 2.5rem; color: var(--hx-primary); margin-bottom: 1rem; opacity: 0.7;
}
.ws-empty-title {
    font-size: 1.25rem; font-weight: 600; color: var(--hx-text); margin: 0 0 0.5rem;
}
.ws-empty-desc {
    font-size: 0.9rem; color: var(--hx-text-muted); margin: 0 0 1.5rem; line-height: 1.5;
}
.ws-empty-tools {
    display: flex; flex-direction: column; gap: 0.5rem; text-align: left;
    max-width: 320px;
}
.ws-empty-tool {
    font-size: 0.85rem; color: var(--hx-text-muted); padding: 0.4rem 0;
}
.ws-empty-tool i { color: var(--hx-primary); margin-right: 0.3rem; }
.ws-empty-tool strong { color: var(--hx-text); }

/* ── Tablet responsive (769-1024px) ──────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    .st-fc-scene { width: 240px; height: 240px; }
    .ws-preview-thumbs { gap: 0.35rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ws-thumb { width: 2rem; height: 2.8rem; }
    .ws-thumb-num { font-size: 0.75rem; }
}

/* ── Interactive mobile responsive ───────────────────────── */
@media (max-width: 768px) {
    .st-practice-grid { grid-template-columns: 1fr; }
    .st-fc-scene { width: 220px; height: 220px; }
    .st-fc-char { font-size: 3.5rem; }
    .st-nav { flex-wrap: wrap; gap: 0.5rem; }
    .st-mastery-actions { order: 3; width: 100%; justify-content: center; }
    .st-scramble-tile, .st-scramble-drop { min-width: 2.75rem; min-height: 2.75rem; width: 2.75rem; height: 2.75rem; font-size: 1.2rem; }
    .st-scramble-sources, .st-scramble-targets { gap: 0.6rem; }
    .st-scramble-touch-clone { width: 3rem; height: 3rem; font-size: 1.4rem; }
}

/* ── Unified Character Learning (hx-char-learn.js) ───────── */
.cl-progress { padding: 0.5rem 0; margin-bottom: 0.5rem; }
.cl-progress-row { display: flex; align-items: center; gap: 0.75rem; }
.cl-step-label { font-size: 0.82rem; color: var(--hx-text-muted); white-space: nowrap; }
.cl-progress-track { flex: 1; height: 6px; background: var(--hx-border); border-radius: 3px; overflow: hidden; }
.cl-progress-bar { height: 100%; background: var(--hx-primary); border-radius: 3px; transition: width 0.3s ease; width: 0%; }
.cl-card {
    max-width: 520px; margin: 0 auto;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); padding: 1.5rem 1.25rem;
    box-shadow: var(--shadow-sm);
}
.cl-char {
    font-family: var(--hx-font-cjk); font-size: 4.5rem; font-weight: 700;
    color: var(--hx-text); text-align: center; line-height: 1.2;
}
.cl-info-row { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0.4rem 0; }
.cl-pinyin { font-size: 1.25rem; color: var(--hx-primary); font-weight: 500; }
.cl-audio-btn { padding: 0.2rem 0.45rem; font-size: 0.95rem; line-height: 1; border-radius: 50%; }
.cl-definition { font-size: 1.05rem; color: var(--hx-text-muted); text-align: center; margin-bottom: 0.75rem; }

/* Stroke area */
.cl-stroke-area { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.cl-hanzi-writer {
    width: 150px; height: 150px; position: relative;
    border: 1.5px solid #d44; border-radius: 6px;
    background-color: var(--hx-card-bg);
}
/* Dashed red grid lines inside the writer — matches print mi-zi-ge */
.cl-hanzi-writer::before,
.cl-hanzi-writer::after {
    content: ''; position: absolute; pointer-events: none; z-index: 0;
}
.cl-hanzi-writer::before {
    /* Vertical + horizontal center dashed lines */
    top: 0; left: 50%; width: 0; height: 100%;
    border-left: 1.5px dashed rgb(238,162,162);
    box-shadow: inset 0 0 0 0 transparent; /* placeholder — horizontal via child */
}
.cl-hanzi-writer::after {
    /* Horizontal center dashed line */
    left: 0; top: 50%; width: 100%; height: 0;
    border-top: 1.5px dashed rgb(238,162,162);
}
/* Diagonal lines via nested pseudo-elements on the SVG wrapper */
.cl-hanzi-writer > svg { position: relative; z-index: 1; }
.cl-char-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: center; }
.cl-char-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; border-radius: 6px;
    border: 1px solid var(--hx-border); background: var(--hx-card-bg);
    color: var(--hx-text); font-family: var(--hx-font-cjk, serif);
    font-size: 1.15rem; cursor: pointer; transition: all 0.15s;
}
.cl-char-chip:hover { border-color: var(--hx-primary); }
.cl-char-chip.active { background: var(--hx-primary); color: #fff; border-color: var(--hx-primary); }
.cl-stroke-btns { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; }
.cl-stroke-btns .hanzi-btn { font-size: 0.78rem; padding: 0.3rem 0.6rem; }
.cl-stroke-feedback { font-size: 0.82rem; text-align: center; min-height: 1.2em; }

/* Tabs */
.cl-tabs {
    display: flex; border-bottom: 1px solid var(--hx-border); margin-bottom: 0.75rem;
}
.cl-tab {
    flex: 1; padding: 0.5rem 0.75rem; font-size: 0.85rem; font-weight: 600;
    color: var(--hx-text-muted); background: none; border: none; border-bottom: 2px solid transparent;
    cursor: pointer; transition: all 0.15s; text-align: center;
}
.cl-tab:hover { color: var(--hx-text); }
.cl-tab.active { color: var(--hx-primary); border-bottom-color: var(--hx-primary); }
.cl-tab-panel { min-height: 3rem; }
.cl-phrase-context {
    margin-bottom: 0.5rem; padding: 0.5rem 0.75rem;
    background: var(--hx-primary-bg, rgba(2,132,199,0.08)); border-radius: 6px;
    border-left: 3px solid var(--hx-primary);
}
.cl-phrase-word { font-family: var(--hx-font-cjk); font-size: 1.1rem; font-weight: 700; color: var(--hx-text); }
.cl-phrase-py { color: var(--hx-primary); font-size: 0.9rem; }
.cl-phrase-def { font-size: 0.85rem; color: var(--hx-text-muted); margin-top: 0.15rem; }
.cl-def-block { margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; background: var(--hx-surface); border-radius: 6px; }
.cl-def-py { color: var(--hx-primary); font-weight: 600; font-size: 0.95rem; }
.cl-def-text { font-size: 0.95rem; color: var(--hx-text); }
.cl-loading { text-align: center; color: var(--hx-text-muted); font-size: 0.85rem; padding: 0.75rem; }
.cl-empty { text-align: center; color: var(--hx-text-faint); font-size: 0.82rem; font-style: italic; padding: 0.5rem; }

/* Definition tab */
.cl-section-title { font-size: 0.82rem; font-weight: 600; color: var(--hx-text); margin-bottom: 0.35rem; }
.cl-related-words { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.75rem; }
.cl-related-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.85rem; padding: 0.25rem 0.5rem;
    background: var(--hx-surface); border-radius: 6px;
    color: var(--hx-text); font-family: var(--hx-font-cjk, serif);
}
.cl-related-py { color: var(--hx-primary); font-size: 0.78rem; }
.cl-related-def { color: var(--hx-text-muted); font-size: 0.75rem; }
.cl-example-box { background: var(--hx-bg); border-radius: 0.6rem; padding: 0.75rem 1rem; }
.cl-example-zh { font-size: 1.1rem; color: var(--hx-text); margin-bottom: 0.3rem; }
.cl-example-py { font-size: 0.85rem; color: var(--hx-primary); }
.cl-example-en { font-size: 0.82rem; color: var(--hx-text-muted); }
.cl-ex-audio { background: none; border: none; color: var(--hx-primary); cursor: pointer; font-size: 0.9rem; padding: 0.1rem 0.25rem; vertical-align: middle; }

/* Structure tab */
.cl-decomp-formula {
    font-family: var(--hx-font-cjk); font-size: 1.2rem; text-align: center;
    color: var(--hx-text); margin-bottom: 0.5rem; font-weight: 600;
}
.cl-decomp-parts { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.5rem; }
.cl-decomp-part {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.3rem 0.5rem; border-radius: 6px;
    background: var(--hx-surface);
}
.cl-decomp-char { font-family: var(--hx-font-cjk); font-size: 1.2rem; font-weight: 600; color: var(--hx-text); }
.cl-decomp-info { font-size: 0.82rem; color: var(--hx-text-muted); }
.cl-decomp-etymology { font-size: 0.82rem; color: var(--hx-text-muted); font-style: italic; }

/* Test Me button */
.cl-test-me-wrap { text-align: center; margin-top: 0.5rem; }
.cl-test-me-wrap .unit-btn { font-size: 0.95rem; padding: 0.55rem 2.5rem; }

/* Quiz */
.cl-quiz-area { margin-top: 0.75rem; }
.cl-quiz-char {
    font-family: var(--hx-font-cjk); font-size: 3.5rem;
    color: var(--hx-text); text-align: center; margin-bottom: 0.35rem;
}
.cl-quiz-prompt { font-size: 0.88rem; color: var(--hx-text-muted); text-align: center; margin-bottom: 0.75rem; }
.cl-quiz-choices { display: flex; flex-direction: column; gap: 0.4rem; }
.cl-quiz-btn {
    width: 100%; text-align: left; padding: 0.7rem 1rem;
    font-size: 0.92rem; border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); background: var(--hx-card-bg);
    color: var(--hx-text); cursor: pointer; transition: all 0.15s;
}
.cl-quiz-btn:hover { border-color: var(--hx-primary); }
.cl-quiz-feedback { text-align: center; font-size: 0.9rem; margin-top: 0.5rem; }

/* Summary */
.cl-summary { text-align: center; padding: 2rem 0; max-width: 520px; margin: 0 auto; }
.cl-summary-icon { font-size: 3rem; color: var(--hx-primary); }
.cl-summary-title { margin: 1rem 0 0.5rem; }
.cl-summary-count { color: var(--hx-text-muted); margin-bottom: 1rem; }
.cl-summary-chars { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.cl-summary-tile {
    background: var(--hx-surface); border-radius: 0.75rem;
    padding: 0.75rem 1rem; text-align: center; min-width: 5rem;
}
.cl-summary-tile-char { font-size: 2rem; font-weight: 700; color: var(--hx-text); font-family: var(--hx-font-cjk); }
.cl-summary-tile-py { font-size: 0.8rem; color: var(--hx-primary); }
.cl-summary-tile-def { font-size: 0.75rem; color: var(--hx-text-muted); max-width: 6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-summary-info { font-size: 0.85rem; color: var(--hx-text-muted); margin-bottom: 1.5rem; }
.cl-summary-actions { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
.cl-summary-actions .unit-btn,
.cl-summary-actions .hanzi-btn { width: 100%; max-width: 280px; text-align: center; }

@media (max-width: 480px) {
    .cl-char { font-size: 3.5rem; }
    .cl-card { padding: 1rem; }
    .cl-hanzi-writer { width: 120px; height: 120px; }
}

/* ── Worksheet share dialog ──────────────────────────────── */
.ws-share-overlay {
    display: none; position: fixed; inset: 0; z-index: var(--z-modal);
    background: rgba(0,0,0,0.4); align-items: center; justify-content: center;
}
.ws-share-modal {
    background: var(--hx-bg); border-radius: 12px; padding: 1.5rem;
    width: 90%; max-width: 420px; box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.ws-share-modal h3 { margin: 0 0 1rem; font-size: 1.1rem; }
.ws-share-form { display: flex; flex-direction: column; gap: 0.75rem; }
.ws-share-form input[type="text"],
.ws-share-form textarea { font-size: 0.85rem; }
.ws-share-form textarea { resize: vertical; }
.ws-share-form .ws-share-row { display: flex; gap: 0.5rem; }
.ws-share-form .ws-share-row select { flex: 1; }
.ws-share-form .ws-share-row label {
    display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; cursor: pointer;
}
.ws-share-actions {
    display: flex; gap: 0.5rem; margin-top: 1rem; justify-content: flex-end;
}
.ws-share-actions button { padding: 0.4rem 1rem; }
.ws-share-actions .ws-share-submit-btn { background: var(--hx-primary); color: #fff; }
.ws-share-result {
    display: none; margin-top: 0.75rem; padding: 0.5rem;
    background: var(--hx-primary-light); border-radius: 6px; font-size: 0.85rem;
}

/* ── Worksheet print styles ──────────────────────────────── */
@media print {
    .ws-layout { display: block; height: auto; overflow: visible; }
    .ws-toolbar, .ws-sources-toggle,
    .hx-header, .hx-bottom-nav, #ws-interactive-area { display: none !important; }
    .ws-main-panel { overflow: visible; }
    #ws-preview-area { padding: 0 !important; }
    .pv-content-inline { padding: 0 !important; margin: 0 !important; }
    .pv-content-inline .pv-page {
        transform: none !important; margin-bottom: 0 !important;
        box-shadow: none; border-radius: 0;
    }
    body { background: white !important; }
}

/* ── Worksheet mobile responsive ─────────────────────────── */
@media (max-width: 768px) {
    .ws-layout { height: auto; overflow: visible; }
    .ws-sources-toggle { font-size: 0.78rem; padding: 0.25rem 0.5rem; }
    .ws-main-panel { overflow: visible; height: auto; }
    .ws-toolbar { position: relative; }
    .ws-title-input { width: 100%; }
    .ws-type-label { display: none; }
    .ws-preview-thumbs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .ws-thumb { width: 2rem; height: 2.8rem; }
    .ws-thumb-num { font-size: 0.75rem; }
    .pv-content-inline .pv-page {
        transform: scale(var(--pv-scale, 0.5)) !important;
        margin-bottom: calc(-11in * (1 - var(--pv-scale, 0.5))) !important;
    }
}

/* ── Landing Page ────────────────────────────────────────────── */
/* Compact the main wrapper on landing only (page must fit a 13" laptop). */
body.landing-page .hx-main { padding: 0.25rem 1.5rem 3rem; }
/* Sticky footer for the landing page only: pin .landing-footer-compact to the
   bottom of the viewport with position:fixed. Avoids the flex / 100vh layout
   pitfalls (Chromium reports html height = 798 even when window.innerHeight
   = 720, which broke the previous flex-based attempt). The 3rem bottom
   padding above on .hx-main reserves space so the natural content never
   sits underneath the fixed footer. */
body.landing-page .landing-footer-compact {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--hx-bg);
    z-index: 5;
}

.landing-hero {
    text-align: center; padding: 0.25rem 1rem 0.25rem;
}
.landing-hero-title {
    font-size: 2.25rem; font-weight: 800; color: var(--hx-text);
    margin: 0 0 0.25rem; line-height: 1.2;
}
.landing-hero-sub {
    font-size: 0.92rem; color: var(--hx-text-muted); margin: 0.25rem auto 0;
    max-width: 580px; line-height: 1.45;
}
.landing-search {
    position: relative; max-width: 520px; margin: 0 auto 1rem;
}
.landing-search input {
    width: 100%; padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 2px solid var(--hx-border); border-radius: 28px;
    font-size: 0.95rem; background: var(--hx-card-bg); color: var(--hx-text); outline: none;
}
.landing-search input:focus { border-color: var(--hx-primary); box-shadow: 0 0 0 3px rgba(2,132,199,0.12); }
.landing-search i {
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    color: var(--hx-text-faint); font-size: 1rem;
}
.landing-search-results {
    display: none; position: absolute; z-index: var(--z-dropdown); width: 100%;
    max-width: 520px; left: 50%; transform: translateX(-50%);
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1); overflow: hidden; margin-top: -0.5rem;
}
.landing-result-item {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem;
    text-decoration: none; color: var(--hx-text); transition: background 0.1s;
}
.landing-result-item:hover { background: var(--hx-primary-light); }
.landing-result-word { font-family: var(--hx-font-cjk); font-size: 1.2rem; font-weight: 600; min-width: 2rem; }
.landing-result-pinyin { font-size: 0.82rem; color: var(--hx-primary); min-width: 4rem; }
.landing-result-def { flex: 1; font-size: 0.82rem; color: var(--hx-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.landing-result-more {
    display: block; padding: 0.5rem 1rem; text-align: center;
    font-size: 0.82rem; color: var(--hx-primary); text-decoration: none;
    border-top: 1px solid var(--hx-border);
}
.landing-result-more:hover { background: var(--hx-primary-light); }
.landing-no-results { padding: 0.75rem 1rem; text-align: center; font-size: 0.85rem; color: var(--hx-text-faint); }

.landing-cta {
    display: flex; gap: 0.75rem; justify-content: center; align-items: center;
    margin-top: 1.5rem;
}
.landing-cta-btn { padding: 0.65rem 1.5rem; font-size: 0.92rem; }

/* Single-row final CTA: [Common Q] [Create Account] [See Pricing] */
.landing-final-cta {
    display: flex; align-items: center; justify-content: center;
    gap: 1.25rem; padding: 0.5rem 1rem 0.25rem; flex-wrap: wrap;
}
.landing-final-secondary {
    color: var(--hx-text-muted); text-decoration: none;
    font-size: 0.82rem; display: inline-flex; align-items: center; gap: 0.3rem;
    transition: color 0.15s;
}
.landing-final-secondary:hover { color: var(--hx-primary); }
.landing-final-secondary i { font-size: 0.85rem; }

.landing-roles { padding: 2rem 0; }
.landing-section-title {
    font-size: 1.25rem; font-weight: 700; color: var(--hx-text);
    text-align: center; margin-bottom: 1.25rem;
}
.landing-role-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem;
}
.landing-role-card {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    padding: 1.5rem; text-align: center; transition: all 0.15s;
}
.landing-role-card:hover { border-color: var(--hx-primary); box-shadow: 0 2px 8px rgba(2,132,199,0.08); }
.landing-role-card i { font-size: 2rem; color: var(--hx-primary); display: block; margin-bottom: 0.75rem; }
.landing-role-title { font-size: 1rem; font-weight: 700; color: var(--hx-text); margin-bottom: 0.35rem; }
.landing-role-desc { font-size: 0.82rem; color: var(--hx-text-muted); line-height: 1.5; }

.landing-features { padding: 0.35rem 0 0.5rem; }
.landing-feature-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem;
    max-width: 720px; margin: 0 auto;
}
@media (max-width: 600px) {
    .landing-feature-grid { grid-template-columns: 1fr; }
}
.landing-feature-item {
    display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.55rem 0.7rem;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
}
.landing-feature-item i { font-size: 1.2rem; color: var(--hx-primary); flex-shrink: 0; margin-top: 0.1rem; }
.landing-feature-name { font-size: 0.85rem; font-weight: 600; color: var(--hx-text); }
.landing-feature-desc { font-size: 0.72rem; color: var(--hx-text-muted); margin-top: 0.05rem; line-height: 1.4; }

.landing-demo { padding: 2rem 0; text-align: center; }
.landing-demo-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.75rem; padding: 3rem; background: var(--hx-card-bg); border: 2px dashed var(--hx-border);
    border-radius: var(--hx-radius); color: var(--hx-text-faint); font-size: 0.95rem;
}
.landing-demo-placeholder i { font-size: 3rem; }

.landing-browse { text-align: center; padding: 1rem 0 3rem; }

/* ── Landing: Social Proof / Testimonials ────────────────────── */
.landing-social-proof { padding: 2rem 0; }
.landing-testimonial-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem;
}
.landing-testimonial {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    padding: 1.25rem 1.5rem; position: relative;
}
.landing-testimonial::before {
    content: "\201C"; position: absolute; top: 0.5rem; left: 0.75rem;
    font-size: 2.5rem; color: var(--hx-primary); opacity: 0.15; font-family: Georgia, serif; line-height: 1;
}
.landing-testimonial-quote {
    font-size: 0.88rem; color: var(--hx-text); line-height: 1.6; margin: 0 0 0.75rem;
    font-style: italic;
}
.landing-testimonial-author {
    font-size: 0.78rem; color: var(--hx-text-muted);
}

/* ── Landing: Pricing ────────────────────────────────────────── */
.landing-pricing { padding: 2rem 0; }
.landing-pricing-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem;
    max-width: 640px; margin: 0 auto;
}
.landing-pricing-card {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    padding: 1.5rem; display: flex; flex-direction: column;
}
.landing-pricing-highlight {
    border-color: var(--hx-primary); box-shadow: 0 0 0 1px var(--hx-primary), var(--shadow-md);
}
.landing-pricing-tier {
    font-size: 1.1rem; font-weight: 700; color: var(--hx-text); margin-bottom: 0.5rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.landing-pricing-price {
    font-size: 1.75rem; font-weight: 800; color: var(--hx-primary); margin-bottom: 1rem;
}
.landing-pricing-price span {
    font-size: 0.82rem; font-weight: 400; color: var(--hx-text-muted);
}
.landing-pricing-features {
    list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1;
}
.landing-pricing-features li {
    font-size: 0.85rem; color: var(--hx-text); padding: 0.3rem 0;
    display: flex; align-items: center; gap: 0.5rem;
}
.landing-pricing-features li i { color: var(--hx-primary); font-size: 0.85rem; flex-shrink: 0; }
.landing-pricing-features li .bi-stars { color: var(--hx-amber); }

/* ── Landing: Footer ─────────────────────────────────────────── */
.landing-footer {
    padding: 2rem 1rem 1rem; color: var(--hx-text-muted); font-size: 0.82rem;
    border-top: 1px solid var(--hx-border); margin-top: 2rem;
}
.landing-footer-inner {
    display: flex; justify-content: space-between; align-items: flex-start;
    max-width: 700px; margin: 0 auto; flex-wrap: wrap; gap: 1.5rem;
}
.landing-footer a {
    display: block; color: var(--hx-text-muted); text-decoration: none;
    font-size: 0.78rem; padding: 0.15rem 0; transition: color 0.15s;
}
.landing-footer a:hover { color: var(--hx-primary); }

/* ── Student home: folder-tab strip (Today / This Week / HSK) ── */
.hx-folder-tabs {
    display: flex; gap: 0; padding: 0;
    border-bottom: 1px solid var(--hx-border);
    margin-top: 0.75rem;
}
.hx-folder-tab {
    flex: 1; min-width: 0;
    border: 1px solid var(--hx-border); border-bottom: none;
    background: var(--hx-bg);
    color: var(--hx-text-muted);
    padding: 0.55rem 0.5rem;
    font-size: 0.85rem; font-weight: 600;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    margin-right: -1px; /* overlap borders so adjacent tabs share an edge */
    transition: background 0.15s, color 0.15s;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
}
.hx-folder-tab i { font-size: 0.9rem; }
.hx-folder-tab:hover { color: var(--hx-text); background: var(--hx-card-bg); }
.hx-folder-tab.active {
    background: var(--hx-card-bg);
    color: var(--hx-primary);
    /* Lift the active tab above the body's top border for the file-folder look */
    border-bottom: 1px solid var(--hx-card-bg);
    margin-bottom: -1px;
    z-index: 1;
}
.hx-folder-tab:focus-visible {
    outline: 2px solid var(--hx-primary); outline-offset: -2px;
}
.hx-folder-body {
    background: var(--hx-card-bg);
    border: 1px solid var(--hx-border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 0.75rem 1rem;
    min-height: 120px;
}
.hx-folder-panel { animation: fadeIn 0.2s ease-out; }
@media (max-width: 480px) {
    .hx-folder-tab { font-size: 0.78rem; padding: 0.5rem 0.35rem; }
    .hx-folder-tab i { font-size: 0.85rem; }
}

/* Classic UI chip in the top nav (next to the logo on V2 pages) */
.hx-ui-toggle {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.25rem 0.65rem; margin-left: 0.5rem;
    border: 1px solid var(--hx-border); border-radius: 999px;
    background: var(--hx-card-bg); color: var(--hx-text-muted);
    font-size: 0.75rem; font-weight: 500; text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.hx-ui-toggle:hover {
    border-color: var(--hx-primary); color: var(--hx-primary);
    background: var(--hx-card-bg); text-decoration: none;
}
.hx-ui-toggle i { font-size: 0.78rem; }
@media (max-width: 600px) {
    .hx-ui-toggle { padding: 0.2rem 0.5rem; font-size: 0.7rem; }
    .hx-ui-toggle span, .hx-ui-toggle .label-long { display: none; }
}

/* sr-only: visually hidden but available to screen readers + SEO */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Compact single-row footer (used on landing) */
.landing-footer-compact { padding: 0.6rem 1rem; margin-top: 0.75rem; border-top: 1px solid var(--hx-border); }
.landing-footer-row {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 0.4rem 1.1rem; max-width: 900px; margin: 0 auto;
    font-size: 0.78rem; color: var(--hx-text-muted);
}
.landing-footer-compact .landing-footer-row a {
    display: inline; padding: 0; color: var(--hx-text-muted); text-decoration: none;
}
.landing-footer-compact .landing-footer-row a:hover { color: var(--hx-primary); }
.landing-footer-compact .landing-footer-row a i { font-size: 0.95rem; vertical-align: middle; }
.landing-footer-copy { color: var(--hx-text-faint); margin-left: 0.5rem; }
@media (max-width: 480px) {
    .landing-footer-row { gap: 0.35rem 0.75rem; font-size: 0.74rem; }
}

/* ── Landing: Stats line + Dictionary search (E29.5) ──────── */
.landing-stats-line {
    text-align: center; font-size: 0.76rem; color: var(--hx-text-muted); margin: 0.4rem 0 0;
}
.landing-search-row {
    display: flex; justify-content: center;
    /* Breathing room above pushes the bar down from the top nav so it sits
       visually prominently (Google-style) instead of crammed against the menu. */
    margin: 1.5rem auto 1rem;
    padding: 0 1rem;
}
.landing-search-form {
    position: relative; display: flex; align-items: stretch;
    width: 100%; max-width: 580px;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.landing-search-form:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.landing-search-form:focus-within {
    border-color: var(--hx-primary);
    box-shadow: 0 0 0 3px rgba(2,132,199,0.12);
}
#landing-search-input {
    flex: 1; min-width: 0;
    border: none; background: transparent; outline: none;
    padding: 0.75rem 0.75rem 0.75rem 1.4rem;
    font-size: 1rem; color: var(--hx-text);
    border-radius: 999px;
}
#landing-search-input::placeholder { color: var(--hx-text-faint); }
/* Suppress the native clear (X) button — it overlaps our submit button */
#landing-search-input::-webkit-search-cancel-button,
#landing-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.landing-search-submit {
    border: none; background: var(--hx-primary); color: #fff;
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; margin: 3px;
    transition: background 0.15s;
}
.landing-search-submit:hover { background: #0369a1; }
.landing-search-submit i { font-size: 1.05rem; }
.landing-search-form .landing-search-results {
    /* Override the legacy .landing-search-results { display:none } at line ~3880
       which was tied to the old landing-search input. We use the [hidden] HTML
       attribute toggled from JS to show/hide instead. */
    display: block;
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 0.35rem;
    transform: none; max-width: none;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    overflow: hidden; z-index: var(--z-dropdown, 50);
    text-align: left;
}
.landing-search-form .landing-search-results[hidden] { display: none; }
.landing-search-item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.55rem 0.9rem; text-decoration: none;
    color: var(--hx-text); transition: background 0.1s;
    border-bottom: 1px solid var(--hx-border-light, var(--hx-border));
}
.landing-search-item:last-of-type { border-bottom: none; }
.landing-search-item:hover { background: var(--hx-primary-light, var(--hx-bg)); }
.landing-search-word {
    font-family: var(--hx-font-cjk, serif); font-size: 1.15rem; font-weight: 600;
    min-width: 2rem; flex-shrink: 0;
}
.landing-search-pinyin { font-size: 0.78rem; color: var(--hx-primary); min-width: 4rem; flex-shrink: 0; }
.landing-search-def {
    flex: 1; font-size: 0.78rem; color: var(--hx-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.landing-search-more {
    display: block; padding: 0.5rem 0.9rem; text-align: center;
    font-size: 0.78rem; color: var(--hx-primary); text-decoration: none;
    background: var(--hx-bg); border-top: 1px solid var(--hx-border);
}
.landing-search-more:hover { background: var(--hx-primary-light, var(--hx-bg)); }
.landing-search-no-results {
    padding: 0.75rem 0.9rem; text-align: center;
    font-size: 0.82rem; color: var(--hx-text-faint);
}

/* ── Landing: Audience Tabs (E29.5) ───────────────────────── */
.audience-tabs {
    display: inline-flex; gap: 0.25rem; padding: 0.2rem;
    background: var(--hx-surface); border: 1px solid var(--hx-border);
    border-radius: 999px; margin: 0 auto 0.4rem;
}
.audience-tab {
    border: none; background: transparent; color: var(--hx-text-muted);
    padding: 0.45rem 1.1rem; border-radius: 999px; font-size: 0.88rem;
    font-weight: 600; cursor: pointer; min-height: 40px;
    display: inline-flex; align-items: center; gap: 0.4rem;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.audience-tab i { font-size: 1rem; }
.audience-tab:hover { color: var(--hx-text); }
.audience-tab.active {
    background: var(--hx-primary); color: #fff;
    box-shadow: 0 1px 4px rgba(2,132,199,0.25);
}
.audience-tab:focus-visible {
    outline: 2px solid var(--hx-primary); outline-offset: 2px;
}
.audience-panel { animation: fadeIn 0.2s ease-out; }
@media (max-width: 480px) {
    .audience-tab { padding: 0.5rem 0.8rem; font-size: 0.82rem; }
    .audience-tab i { font-size: 0.9rem; }
}

/* ── Landing: Demo gallery (E29.5) ─────────────────────────── */
.landing-demo-gallery {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 0.55rem; max-width: 940px; margin: 0.5rem auto 0.25rem;
    padding: 0 0.5rem;
}
.demo-tile {
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    padding: 0.5rem 0.4rem; border: 1px solid var(--hx-border);
    border-radius: 10px; background: var(--hx-card-bg);
    text-decoration: none; color: var(--hx-text);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
a.demo-tile:hover {
    border-color: var(--hx-primary); transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(2,132,199,0.12);
}
.demo-tile-meta { text-align: center; }
.demo-tile-title { font-size: 0.74rem; font-weight: 600; color: var(--hx-text); }
.demo-tile-sub { font-size: 0.68rem; color: var(--hx-text-muted); margin-top: 0.05rem; }
.demo-tile-action {
    font-size: 0.65rem !important; padding: 0.1rem 0.5rem !important;
    margin-top: 0.1rem;
}

/* 米字格 writing-box used by both the live animation and the static grid */
.mizige-box {
    width: 88px; height: 88px; flex-shrink: 0; position: relative;
    border: 1px solid var(--hx-border); border-radius: 4px;
    background-image:
        linear-gradient(to right, transparent calc(50% - 0.5px), var(--hx-border) calc(50% - 0.5px), var(--hx-border) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--hx-border) calc(50% - 0.5px), var(--hx-border) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--hx-border) calc(50% - 0.5px), var(--hx-border) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(to bottom left, transparent calc(50% - 0.5px), var(--hx-border) calc(50% - 0.5px), var(--hx-border) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.mizige-box #landing-hw-target { position: absolute; inset: 0; }
.mizige-static {
    display: flex; align-items: center; justify-content: center;
}
.mizige-char {
    font-family: var(--hx-font-cjk, serif); font-size: 3.6rem; font-weight: 500;
    color: var(--hx-text); line-height: 1;
}

/* Multi-cell printable writing-grid preview (demo tile 2) */
.demo-grid-multi {
    width: 88px; height: 88px; flex-shrink: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);
    gap: 2px; padding: 2px;
    border: 1px solid var(--hx-border); border-radius: 4px;
    background: var(--hx-card-bg);
}
.demo-grid-cell {
    border: 1px solid var(--hx-border-light, #e2e8f0);
    background-image:
        linear-gradient(to right, transparent calc(50% - 0.5px), var(--hx-border-light, #e5e7eb) calc(50% - 0.5px), var(--hx-border-light, #e5e7eb) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--hx-border-light, #e5e7eb) calc(50% - 0.5px), var(--hx-border-light, #e5e7eb) calc(50% + 0.5px), transparent calc(50% + 0.5px));
    background-size: 100% 100%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--hx-font-cjk, serif); font-size: 0.95rem; line-height: 1;
    color: var(--hx-text);
}
.demo-grid-cell span { font-weight: 500; }

/* Reading-with-audio thumbnail */
.demo-reading-card {
    width: 88px; height: 88px; flex-shrink: 0;
    border: 1px solid var(--hx-border); border-radius: 4px;
    background: var(--hx-bg);
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 0.05rem; padding: 0.35rem 0.4rem; overflow: hidden;
}
.demo-reading-line { font-family: var(--hx-font-cjk, serif); font-size: 0.7rem; color: var(--hx-text); line-height: 1.25; white-space: nowrap; }
.demo-reading-pinyin { font-size: 0.55rem; color: var(--hx-text-muted); }
.demo-reading-audio { font-size: 0.55rem; color: var(--hx-primary); display: inline-flex; align-items: center; gap: 0.2rem; margin-top: 0.15rem; }

/* HSK sample question thumbnail */
.demo-hsk-card {
    width: 88px; height: 88px; flex-shrink: 0;
    border: 1px solid var(--hx-border); border-radius: 4px;
    background: var(--hx-bg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.25rem; padding: 0.4rem;
}
.demo-hsk-q { font-family: var(--hx-font-cjk, serif); font-size: 0.78rem; color: var(--hx-text); line-height: 1.2; }
.demo-hsk-blank { display: inline-block; min-width: 0.85rem; border-bottom: 1px solid var(--hx-text-muted); margin: 0 0.05rem; }
.demo-hsk-opts { display: flex; gap: 0.3rem; font-size: 0.6rem; }
.demo-hsk-opt { color: var(--hx-text-muted); padding: 0.05rem 0.25rem; border: 1px solid var(--hx-border); border-radius: 3px; background: var(--hx-card-bg); }
.demo-hsk-opt-correct { color: var(--hx-primary); border-color: var(--hx-primary); font-weight: 600; }

/* Prof Hanlexon thumbnail */
.demo-prof-card {
    width: 88px; height: 88px; flex-shrink: 0;
    border: 1px solid var(--hx-border); border-radius: 4px;
    background: var(--hx-bg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.25rem; padding: 0.35rem;
}
.demo-prof-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--hx-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.demo-prof-bubble {
    font-family: var(--hx-font-cjk, serif); font-size: 0.6rem; color: var(--hx-text);
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: 8px; padding: 0.15rem 0.35rem; line-height: 1.2;
}

@media (max-width: 980px) {
    .landing-demo-gallery { grid-template-columns: repeat(3, 1fr); max-width: 600px; }
}
@media (max-width: 600px) {
    .landing-demo-gallery { grid-template-columns: repeat(2, 1fr); max-width: 420px; }
}

/* ── Reading Generate card ────────────────────────────────── */
.rd-gen-card {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 0.6rem; background: var(--hx-card-bg);
    border: 1px solid var(--hx-border); border-radius: 8px;
}
.rd-gen-header {
    font-size: 0.75rem; font-weight: 600; color: var(--hx-text-muted);
    padding-bottom: 0.3rem; border-bottom: 1px solid var(--hx-border);
}
.rd-gen-section { display: flex; flex-direction: column; gap: 0.25rem; }
.rd-gen-label {
    font-size: 0.68rem; font-weight: 600; color: var(--hx-text-faint);
    text-transform: uppercase; letter-spacing: 0.03em;
}
/* Source picker: category tabs + scrollable item list */
.rd-gen-source-picker {
    border: 1px solid var(--hx-border); border-radius: 6px; overflow: hidden;
}
.rd-gen-cats {
    display: flex; background: var(--hx-surface); border-bottom: 1px solid var(--hx-border);
}
.rd-gen-cat {
    flex: 1; padding: 0.3rem 0; font-size: 0.7rem; font-weight: 600;
    color: var(--hx-text-muted); background: none; border: none;
    cursor: pointer; text-align: center; transition: all 0.15s;
    display: flex; align-items: center; justify-content: center; gap: 0.2rem;
}
.rd-gen-cat:hover { color: var(--hx-text); }
.rd-gen-cat.active {
    color: var(--hx-primary); background: var(--hx-card-bg);
    box-shadow: inset 0 -2px 0 var(--hx-primary);
}
.rd-gen-items {
    max-height: 120px; overflow-y: auto; padding: 0.15rem;
}
.rd-gen-item {
    display: block; width: 100%; text-align: left; padding: 0.3rem 0.5rem;
    font-size: 0.75rem; color: var(--hx-text); background: none;
    border: none; border-radius: 4px; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rd-gen-item:hover { background: var(--hx-surface); }
.rd-gen-item.active { background: var(--hx-primary); color: #fff; }
.rd-gen-item-meta {
    font-size: 0.68rem; color: var(--hx-text-faint); margin-left: 0.3rem;
}
/* Selected source chip */
.rd-gen-selected {
    display: flex; align-items: center; gap: 0.3rem;
    padding: 0.25rem 0.5rem; background: var(--hx-primary-bg, rgba(2,132,199,0.08));
    border: 1px solid var(--hx-primary); border-radius: 6px;
    font-size: 0.75rem; color: var(--hx-primary); font-weight: 500;
}
.rd-gen-clear {
    background: none; border: none; color: var(--hx-primary);
    font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 0.15rem;
}
/* Settings: 3 compact selects in a row */
.rd-gen-settings {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.35rem;
}
.rd-gen-setting { display: flex; flex-direction: column; gap: 0.1rem; }
.rd-gen-select {
    border: 1px solid var(--hx-border); border-radius: 5px;
    font-size: 0.75rem; padding: 0.25rem 0.2rem;
    background: var(--hx-bg); color: var(--hx-text); width: 100%;
}
.rd-gen-select:focus { border-color: var(--hx-primary); outline: none; }
.rd-gen-textarea {
    border: 1px solid var(--hx-border); border-radius: 5px;
    font-size: 0.75rem; padding: 0.3rem 0.4rem;
    background: var(--hx-bg); color: var(--hx-text);
    resize: none; outline: none; width: 100%; box-sizing: border-box;
}
.rd-gen-textarea:focus { border-color: var(--hx-primary); }
/* Prompt preview */
.rd-gen-preview {
    font-size: 0.72rem; color: var(--hx-text-muted); line-height: 1.4;
    padding: 0.35rem 0.5rem; background: var(--hx-surface);
    border-radius: 5px; border: 1px dashed var(--hx-border);
    max-height: 80px; overflow-y: auto;
}
.rd-gen-actions { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.1rem; }
.rd-gen-btn { font-size: 0.78rem; padding: 0.35rem 1rem; }
.rd-gen-status { font-size: 0.7rem; color: var(--hx-text-muted); flex: 1; }

/* ── Reading + HSK sample preview pages (E29.5 guest mode) ── */
.reading-sample-card, .hsk-sample-card {
    border: 1px solid var(--hx-border); border-radius: 12px;
    background: var(--hx-card-bg); padding: 1.25rem 1.25rem 1rem;
}
.reading-sample-controls {
    display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
    margin-bottom: 1rem; padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--hx-border);
}
.reading-sample-toggle {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.85rem; color: var(--hx-text-muted); cursor: pointer;
}
.reading-sample-body { font-family: var(--hx-font-cjk, serif); }
.rs-line { margin-bottom: 0.85rem; font-size: 1.4rem; line-height: 1.9; color: var(--hx-text); }
.rs-line ruby { display: inline-flex; flex-direction: column; align-items: center; vertical-align: top; margin: 0 0.05rem; }
.rs-line ruby rt { font-size: 0.55rem; color: var(--hx-text-muted); font-family: var(--hx-font, sans-serif); line-height: 1.1; margin-bottom: 0.1rem; }
.rs-line ruby rb { display: block; }
.rs-punct { font-family: var(--hx-font-cjk, serif); }
.rs-en { font-family: var(--hx-font, sans-serif); font-size: 0.82rem; color: var(--hx-text-muted); margin-top: 0.25rem; display: none; }
.reading-sample-body.hide-pinyin ruby rt { visibility: hidden; }
.reading-sample-body.show-en .rs-en { display: block; }

/* HSK sample question */
.hsk-sample-prompt { margin-bottom: 1.25rem; }
.hsk-sample-label {
    display: inline-block; font-size: 0.7rem; font-weight: 600;
    color: var(--hx-primary); text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}
.hsk-sample-stem {
    font-family: var(--hx-font-cjk, serif); font-size: 1.5rem;
    color: var(--hx-text); line-height: 1.6;
}
.hsk-sample-stem ruby { display: inline-flex; flex-direction: column; align-items: center; margin: 0 0.05rem; vertical-align: top; }
.hsk-sample-stem ruby rt { font-size: 0.55rem; color: var(--hx-text-muted); font-family: var(--hx-font, sans-serif); line-height: 1.1; margin-bottom: 0.1rem; }
.hsk-blank { display: inline-block; min-width: 2.5rem; border-bottom: 2px solid var(--hx-text-muted); margin: 0 0.25rem; }
.hsk-sample-stem-en { font-family: var(--hx-font, sans-serif); font-size: 0.85rem; color: var(--hx-text-muted); margin-top: 0.4rem; }
.hsk-sample-options {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem;
}
.hsk-option {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.65rem 0.85rem; border: 1px solid var(--hx-border);
    border-radius: 8px; background: var(--hx-bg); color: var(--hx-text);
    font-family: var(--hx-font-cjk, serif); font-size: 1rem;
    cursor: pointer; transition: all 0.15s;
}
.hsk-option:hover:not(:disabled) { border-color: var(--hx-primary); background: var(--hx-primary-light, var(--hx-bg)); }
.hsk-option:disabled { cursor: default; opacity: 0.85; }
.hsk-key {
    display: inline-flex; width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center;
    border: 1px solid var(--hx-border); border-radius: 4px;
    font-family: var(--hx-font, sans-serif); font-size: 0.75rem; font-weight: 600;
    color: var(--hx-text-muted); flex-shrink: 0;
}
.hsk-en { font-family: var(--hx-font, sans-serif); font-size: 0.78rem; color: var(--hx-text-muted); margin-left: auto; }
.hsk-option-correct { border-color: #16a34a; background: rgba(22,163,74,0.08); }
.hsk-option-correct .hsk-key { background: #16a34a; color: #fff; border-color: #16a34a; }
.hsk-option-wrong { border-color: #dc2626; background: rgba(220,38,38,0.06); }
.hsk-option-wrong .hsk-key { background: #dc2626; color: #fff; border-color: #dc2626; }
.hsk-sample-explain { margin-top: 1.25rem; padding: 0.85rem 1rem; border-top: 1px solid var(--hx-border); }
.hsk-explain-result { font-size: 0.95rem; font-weight: 600; }
.hsk-result-correct { color: #16a34a; }
.hsk-result-wrong { color: #dc2626; }
@media (max-width: 480px) {
    .hsk-sample-options { grid-template-columns: 1fr; }
    .rs-line { font-size: 1.2rem; }
}
/* Guide TOC */
.guide-toc-link { color: var(--hx-text-muted); text-decoration: none; padding: 0.15rem 0; font-size: 0.82rem; display: block; }
.guide-toc-link:hover { color: var(--hx-primary); }

/* FAQ page */
.faq-section-title { font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--hx-border); }
.faq-section-title:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.faq-item { margin-bottom: 0.5rem; border: 1px solid var(--hx-border); border-radius: 6px; overflow: hidden; }
.faq-item summary { padding: 0.75rem 1rem; font-weight: 500; font-size: 0.92rem; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; }
.faq-item summary::before { content: '\25B6'; font-size: 0.65rem; color: var(--hx-text-muted); transition: transform 0.2s; flex-shrink: 0; }
.faq-item[open] summary::before { transform: rotate(90deg); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { padding: 0 1rem 0.75rem; margin: 0; font-size: 0.88rem; color: var(--hx-text-muted); line-height: 1.6; }
.faq-item a { color: var(--hx-primary); text-decoration: none; }
.faq-item a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .landing-hero { padding: 2rem 0.5rem 1rem; }
    .landing-hero-title { font-size: 1.5rem; line-height: 1.3; }
    .landing-hero-sub { font-size: 0.88rem; }
    .landing-cta { flex-direction: column; }
    .landing-cta-btn { width: 100%; text-align: center; padding: 0.75rem 1rem; font-size: 1rem; min-height: 48px; }
    .landing-role-grid { grid-template-columns: repeat(2, 1fr); }
    .landing-feature-grid { grid-template-columns: 1fr; }
    .landing-search-results { left: 0; transform: none; }
    .landing-testimonial-grid { grid-template-columns: 1fr; }
    .landing-pricing-grid { grid-template-columns: 1fr; }
    .landing-footer-inner { flex-direction: column; gap: 1rem; }
    /* Guide TOC: hide sidebar on mobile */
    #guide-toc { display: none !important; }
}

/* ── Micro-animations ────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }

/* Card hover lift */
.landing-role-card,
.landing-feature-item,
.landing-testimonial,
.landing-pricing-card { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.landing-role-card:hover,
.landing-feature-item:hover,
.landing-testimonial:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.landing-pricing-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* Staggered entrance for grid items */
.landing-role-card { animation: fadeInUp 0.3s ease-out backwards; }
.landing-role-card:nth-child(1) { animation-delay: 0.05s; }
.landing-role-card:nth-child(2) { animation-delay: 0.1s; }
.landing-role-card:nth-child(3) { animation-delay: 0.15s; }
.landing-role-card:nth-child(4) { animation-delay: 0.2s; }

.landing-feature-item { animation: fadeInUp 0.3s ease-out backwards; }
.landing-feature-item:nth-child(1) { animation-delay: 0.05s; }
.landing-feature-item:nth-child(2) { animation-delay: 0.1s; }
.landing-feature-item:nth-child(3) { animation-delay: 0.15s; }
.landing-feature-item:nth-child(4) { animation-delay: 0.2s; }
.landing-feature-item:nth-child(5) { animation-delay: 0.25s; }
.landing-feature-item:nth-child(6) { animation-delay: 0.3s; }

/* Button press feedback */
.unit-btn:active, .hanzi-btn:active { transform: scale(0.97); }

/* Smooth page entrance */
.hx-main { animation: fadeIn 0.2s ease-out; }

/* ── School Admin Home ──────────────────────────────────────── */
.admin-stat-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem; margin-bottom: 1.25rem;
}
.admin-stat-card {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); padding: 1rem; text-align: center;
}
.admin-stat-num { font-size: 1.5rem; font-weight: 700; color: var(--hx-primary); }
.admin-stat-label { font-size: 0.75rem; color: var(--hx-text-muted); text-transform: uppercase; }

/* ── Mobile Bottom Nav ──────────────────────────────────────── */
.hx-bottom-nav {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--hx-card-bg); border-top: 1px solid var(--hx-border);
    padding: 0.35rem 0 calc(0.35rem + env(safe-area-inset-bottom, 0px)); z-index: var(--z-modal);
}
.hx-bottom-nav-inner {
    display: flex; justify-content: space-around; max-width: 500px; margin: 0 auto;
}
.hx-bottom-link {
    display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
    padding: 0.4rem 0.5rem; text-decoration: none; color: var(--hx-text-muted);
    font-size: 0.75rem; transition: color 0.15s; min-width: 3.5rem; min-height: 44px;
}
.hx-bottom-link i { font-size: 1.15rem; }
.hx-bottom-link.active { color: var(--hx-primary); }
.hx-bottom-link:hover { color: var(--hx-primary); }

@media (max-width: 768px) {
    .hx-bottom-nav { display: block; }
    body { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)); }
    /* Bottom nav replaces sidebar on mobile — hamburger still opens full sidebar drawer */
}

/* ── Focus Mode Nav (E3-E) — minimal header for review/reading ── */
.hx-focus-back {
    display: flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: var(--hx-radius);
    color: var(--hx-text-muted); text-decoration: none; flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.hx-focus-back:hover { background: var(--hx-surface); color: var(--hx-primary); }
.hx-focus-back i { font-size: 1.1rem; }
.hx-focus-title {
    flex: 1; font-size: 0.92rem; font-weight: 600;
    color: var(--hx-text); text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── E5 Phase 22: Immersive Focus Mode ─────────────────────── */
body.hx-immersive .hx-sidebar { display: none !important; }
body.hx-immersive .hx-sidebar-resize { display: none !important; }
body.hx-immersive.hx-has-sidebar .hx-header { margin-left: 0; }
body.hx-immersive.hx-has-sidebar .hx-main { margin-left: 0; }
body.hx-immersive.hx-has-sidebar .ws-layout { margin-left: 0; }
body.hx-immersive .hx-main { padding-top: 0; }
.hx-immersive-exit {
    position: fixed; top: 0.75rem; right: 0.75rem; z-index: 1000;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    color: var(--hx-text-muted); font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.15s, color 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.hx-immersive-exit:hover { background: var(--hx-surface); color: var(--hx-red); }

/* ── Nav Search (inline dictionary) ──────────────────────────── */
.hx-nav-search {
    position: relative; flex: 1; max-width: 360px; margin: 0 0.75rem;
}
.hx-nav-search input {
    width: 100%; padding: 0.35rem 0.6rem 0.35rem 2rem;
    border: 1px solid var(--hx-border); border-radius: 16px;
    font-size: 0.82rem; background: var(--hx-bg); color: var(--hx-text); outline: none;
    transition: border-color 0.2s;
}
.hx-nav-search input { padding-left: 0.6rem; padding-right: 2rem; }
.hx-nav-search input:focus { border-color: var(--hx-primary); }
.hx-nav-search-btn {
    background: none; border: 1px solid var(--hx-border); cursor: pointer;
    color: var(--hx-text-muted); font-size: 0.82rem; padding: 0.3rem 0.55rem;
    border-radius: 0 16px 16px 0; margin-left: -1px;
    background: var(--hx-card-bg); transition: background 0.15s, color 0.15s;
    display: flex; align-items: center;
}
.hx-nav-search-btn:hover { background: var(--hx-primary); color: #fff; border-color: var(--hx-primary); }
.hx-nav-search input { border-radius: 16px 0 0 16px; }
.hx-search-clear {
    position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 0.15rem;
    color: var(--hx-text-muted); font-size: 0.72rem; line-height: 1;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; transition: background 0.15s, color 0.15s;
}
.hx-search-clear:hover { background: var(--hx-border); color: var(--hx-text); }
.hx-nav-search-results {
    display: none; position: absolute; top: 100%; right: 0; width: 320px;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1); z-index: var(--z-sticky); margin-top: 0.25rem;
    max-height: 360px; overflow-y: auto;
}
.hx-nav-search-option:hover, .hx-nav-search-option:focus {
    background: var(--hx-primary-light); outline: none;
}
@media (max-width: 768px) {
    .hx-nav-search { flex: 1; margin-left: 0; margin-right: 0; }
    .hx-nav-search input { width: 100%; }
    .hx-nav-search input:focus { width: 100%; }
}

/* ── Character Decomposition ────────────────────────────────── */
.st-decomp { margin-top: 1rem; padding: 1rem; background: var(--hx-primary-light); border-radius: var(--hx-radius); }
.st-decomp-title { font-size: 0.82rem; font-weight: 600; color: var(--hx-text-muted); margin-bottom: 0.5rem; }
.st-decomp-formula { font-size: 1.5rem; font-family: var(--hx-font-cjk); text-align: center; margin-bottom: 0.75rem; color: var(--hx-text); }
.st-decomp-details { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.st-decomp-part { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--hx-card-bg); border-radius: 6px; border: 1px solid var(--hx-border); cursor: pointer; transition: all 0.15s; }
.st-decomp-part:hover { border-color: var(--hx-primary); transform: translateY(-1px); }
.st-decomp-char { font-size: 1.3rem; font-family: var(--hx-font-cjk); font-weight: 700; color: var(--hx-primary); }
.st-decomp-info { font-size: 0.82rem; color: var(--hx-text-muted); }
.st-decomp-etymology { font-size: 0.8rem; color: var(--hx-text-muted); text-align: center; margin-top: 0.5rem; font-style: italic; }

/* ── Leaderboard ───────────────────────────────────────────── */
.hx-leaderboard { margin-top: 0.75rem; }
.hx-lb-title { font-size: 0.82rem; font-weight: 600; color: var(--hx-text-muted); margin-bottom: 0.5rem; }
.hx-lb-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; font-size: 0.85rem; }
.hx-lb-rank { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--hx-primary); color: #fff; font-weight: 700; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; }
.hx-lb-name { flex: 1; font-weight: 500; }
.hx-lb-stat { font-size: 0.78rem; color: var(--hx-text-muted); display: flex; align-items: center; gap: 0.2rem; }

/* ── Home Error State ───────────────────────────────────────── */
.home-error {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--hx-text-muted);
    font-size: 0.9rem;
}
.home-error a {
    color: var(--hx-primary);
    text-decoration: underline;
    cursor: pointer;
}
.home-error a:hover {
    color: var(--hx-primary-mid);
}

/* ── Print styles ───────────────────────────────────────────── */
@media print {
    .hx-header, .hx-sidebar, .hx-sidebar-overlay, #theme-toggle, #nav-hamburger, .hx-bottom-nav,
    .review-ratings, .summary-actions, .unit-btn, .hanzi-btn { display: none !important; }
    .hx-main { max-width: 100%; padding: 0; margin-left: 0 !important; }
    body { background: white; color: black; padding-bottom: 0 !important; }
}

/* ── AI chip focus styles ──────────────────────────────────── */
.ws-ai-word-chip:focus-visible {
    outline: 2px solid var(--hx-primary);
    outline-offset: 2px;
}

/* ── Audio buttons (C1) ───────────────────────────────────── */
.audio-btn-inline { background:none; border:none; color:var(--hx-primary); cursor:pointer; padding:0.1rem 0.3rem; font-size:0.9rem; vertical-align:middle; opacity:0.7; transition:opacity 0.15s; }
.audio-btn-inline:hover { opacity:1; }

/* ── Listening mode (C2) ─────────────────────────────────── */
.listening-choices { display:grid; grid-template-columns:repeat(4, 1fr); gap:0.4rem; margin-top:0.75rem; }
.listening-choice {
    padding:0.5rem 0.6rem; font-size:0.95rem; text-align:center;
    border:1.5px solid var(--hx-border); border-radius:var(--hx-radius);
    cursor:pointer; background:var(--hx-card-bg); color:var(--hx-text);
    transition:border-color 0.15s, background 0.15s, transform 0.15s var(--hx-spring);
}
.listening-choice:hover { border-color:var(--hx-primary); background:var(--hx-primary-light); }
.listening-choice.selected { border-color:var(--hx-primary); background:var(--hx-primary-light); color:var(--hx-primary); font-weight:600; }
.listening-choice.correct { border-color:var(--hx-green); background:var(--hx-green-light); color:var(--hx-green); font-weight:600; }
.listening-choice.incorrect { border-color:var(--hx-red); background:var(--hx-red-light); color:var(--hx-red); }

/* ── AI Content Sections (B1/B2) ──────────────────────────── */
.ai-card-section { margin-bottom:0.5rem; border:1px solid var(--hx-border); border-radius:8px; overflow:hidden; }
.ai-section-header { padding:0.4rem 0.75rem; font-size:0.82rem; font-weight:600; color:var(--hx-primary); background:var(--hx-bg-subtle); display:flex; align-items:center; gap:0.4rem; }
.ai-section-body { padding:0.5rem 0.75rem; font-size:0.85rem; color:var(--hx-text); line-height:1.5; }

/* ── Reduced motion ────────────────────────────────────────── */
/* ── AI Tutor dark mode overrides ─────────────────────────────── */
[data-theme="dark"] .ai-board-badge.listen,
[data-theme="dark"] .ai-tutor-step-badge.listen { background: var(--hx-primary-light);  color: var(--hx-primary); }
[data-theme="dark"] .ai-board-badge.speak,
[data-theme="dark"] .ai-tutor-step-badge.speak  { background: rgba(236,72,153,0.2);     color: #f9a8d4; }
[data-theme="dark"] .ai-board-badge.read,
[data-theme="dark"] .ai-tutor-step-badge.read   { background: var(--hx-green-light);   color: var(--hx-green); }
[data-theme="dark"] .ai-board-badge.write,
[data-theme="dark"] .ai-tutor-step-badge.write  { background: var(--hx-yellow-light);  color: var(--hx-yellow); }
[data-theme="dark"] .ai-board-badge.quiz,
[data-theme="dark"] .ai-tutor-step-badge.quiz   { background: rgba(139,92,246,0.2);    color: #c4b5fd; }
[data-theme="dark"] .ai-tutor-choice.correct { background: rgba(16,185,129,0.2) !important; border-color: var(--hx-green) !important; color: #6ee7b7; }
[data-theme="dark"] .ai-tutor-choice.wrong { background: rgba(239,68,68,0.15) !important; border-color: var(--hx-red) !important; color: #fca5a5; }
[data-theme="dark"] .ai-prof-avatar-lg { background: linear-gradient(135deg, var(--hx-primary-mid), var(--hx-primary)); }
[data-theme="dark"] .ai-prof-avatar-lg.happy { background: linear-gradient(135deg, #047857, var(--hx-green)); }
[data-theme="dark"] .ai-prof-avatar-lg.sad { background: linear-gradient(135deg, #b91c1c, var(--hx-red)); }
[data-theme="dark"] .ai-tchat-bubble { border-color: var(--hx-border); }
[data-theme="dark"] .ai-classroom-board { background: var(--hx-card-bg); }
[data-theme="dark"] .ai-board-canvas { background: #1e293b; border-color: var(--hx-border); }
[data-theme="dark"] .dash-daily-plan { border-color: var(--hx-primary); background: rgba(56,189,248,0.06); }
[data-theme="dark"] .dash-plan-item.primary { border-color: var(--hx-primary); background: rgba(56,189,248,0.08); }

/* ── Accessibility: focus-visible states ──────────────────────── */
.ai-feature-card:focus-visible,
.ai-tutor-choice:focus-visible,
.ai-tutor-history-item:focus-visible,
.ai-board-canvas-actions button:focus-visible,
.ai-back-btn:focus-visible,
.dash-plan-item a:focus-visible {
    outline: 2px solid var(--hx-primary);
    outline-offset: 2px;
}
.ai-tutor-choice { cursor: pointer; }
.ai-tutor-choice:focus-visible { box-shadow: 0 0 0 2px var(--hx-primary); }
.ai-feature-card { outline: none; }
.ai-feature-card:focus-visible { box-shadow: 0 0 0 2px var(--hx-primary); }

@media (prefers-reduced-motion: reduce) {
    .st-fc-card, .st-fc-scene, .st-scramble-tile, .ws-thumb,
    .hx-toast, .focus-card, .focus-item,
    .ai-prof-avatar-lg, .ai-typing, .ai-tutor-progress-fill,
    .stagger-in > *, .stagger-grid > *, .reveal-scale,
    .slide-out-left, .slide-out-right, .slide-in-up, .slide-in-right, .slide-in-left,
    .char-fade-out, .char-fade-in, .summary-reveal, .mastery-pulse, .btn-pulse,
    .exercise-card, .card-page-in, .card-page-out, .phase-interstitial,
    .celebrate-pop, .skeleton-line, .skeleton {
        transition: none !important;
        animation: none !important;
    }
    .stagger-in > *, .stagger-grid > * { opacity: 1 !important; }
}

/* Timer warning pulse */
.timer-warning { animation: timer-pulse 1s ease-in-out infinite; }
@keyframes timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Unified empty state component */
.hx-empty-state {
    text-align: center; padding: 2rem 1rem; color: var(--hx-text-muted);
}
.hx-empty-state i { font-size: 2rem; color: var(--hx-text-faint); display: block; margin-bottom: 0.5rem; }
.hx-empty-state p { font-size: 0.9rem; margin: 0.5rem 0; }
.hx-empty-state .hx-empty-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }

/* ── Session Summary (universal component) ───────────────────── */
.session-summary { text-align: center; padding: var(--space-6) var(--space-4); animation: fadeIn 0.3s ease-out; }
.session-summary-icon { font-size: 2.5rem; color: var(--hx-primary); margin-bottom: var(--space-3); }
.session-summary h2 { margin-bottom: var(--space-5); }
.session-summary-stats {
    display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap;
    margin-bottom: var(--space-5);
}
.session-stat { text-align: center; min-width: 70px; }
.session-stat-value { font-size: var(--text-2xl); font-weight: 700; color: var(--hx-text); }
.session-stat-label { font-size: var(--text-xs); color: var(--hx-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.session-summary-streak { font-size: var(--text-sm); color: var(--hx-amber); margin-bottom: var(--space-5); }
.session-summary-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.session-summary-weak { margin-bottom: var(--space-5); }
.session-summary-weak-title {
    font-size: var(--text-sm); color: var(--hx-text-muted); text-transform: uppercase;
    letter-spacing: 0.05em; margin-bottom: var(--space-2);
}
.session-summary-weak-list { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.session-weak-chip {
    display: inline-flex; align-items: baseline; gap: 0.25rem;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); padding: 0.25rem 0.6rem; font-size: var(--text-sm);
}
.session-weak-pinyin { color: var(--hx-primary); font-size: var(--text-xs); }
.session-weak-def { color: var(--hx-text-muted); font-size: var(--text-xs); }
@media (max-width: 600px) {
    .session-summary-actions { flex-direction: column; align-items: center; }
    .session-summary-actions .unit-btn,
    .session-summary-actions .hanzi-btn { width: 100%; max-width: 280px; }
}

/* ── Ruby Pinyin Annotations ─────────────────────────────────── */
ruby { ruby-position: over; }
ruby rt {
    font-size: var(--text-xs);
    color: var(--hx-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.ruby-fallback { /* when pinyin count doesn't match */ }
.ruby-fallback .ruby-chinese { font-family: var(--hx-font-cjk); }
.ruby-fallback .ruby-pinyin { font-size: var(--text-xs); color: var(--hx-primary); }

/* ── Settings Tabs ─────────────────────────────────────────────── */
.settings-tabs {
    display: flex; gap: var(--space-2); border-bottom: 1px solid var(--hx-border);
    margin-bottom: var(--space-5); overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.settings-tab {
    padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: 600;
    color: var(--hx-text-muted); background: none; border: none; border-bottom: 2px solid transparent;
    cursor: pointer; transition: all 0.15s; white-space: nowrap; display: flex; align-items: center; gap: 0.35rem;
}
.settings-tab:hover { color: var(--hx-primary); }
.settings-tab.active { color: var(--hx-primary); border-bottom-color: var(--hx-primary); }
.settings-tab-panel { animation: settingsFadeIn 0.15s ease; }
@keyframes settingsFadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 640px) {
    .settings-tabs { gap: 0; }
    .settings-tab { padding: var(--space-2) var(--space-3); font-size: 0.78rem; }
}

/* ── Mobile UX fixes (B2/B4/B5) ──────────────────────────────── */

/* B2: Prevent iOS Safari auto-zoom on input focus (requires >= 16px / 1rem) */
@media (max-width: 768px) {
    input, textarea, select { font-size: 1rem !important; }
}

/* B4: Audio inline buttons — meet 44px minimum touch target */
@media (max-width: 768px) {
    .audio-btn-inline { min-height: 44px; min-width: 44px; padding: 0.4rem; }
}

/* ── Mock Test Score Trend ─────────────────────────────── */
.mock-trend { padding: 0.75rem; background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius); margin-top: 0.75rem; }
.mock-trend-title { font-size: 0.82rem; font-weight: 600; color: var(--hx-text-muted); margin-bottom: 0.5rem; }
.mock-trend-chart { width: 100%; height: 60px; }
.mock-trend-label { font-size: 0.75rem; color: var(--hx-text-faint); text-align: right; margin-top: 0.25rem; }

/* ── Activity Heatmap ──────────────────────────────────────── */
.dash-heatmap { padding: 0.75rem; background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius); margin-bottom: 1rem; }
.dash-heatmap-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--hx-text); }
.heatmap-grid { display: flex; gap: 2px; overflow-x: auto; }
.heatmap-col { display: flex; flex-direction: column; gap: 2px; }
.heatmap-cell { width: 10px; height: 10px; border-radius: 2px; }
.heatmap-cell[data-level="0"] { background: var(--hx-bg-subtle, #ebedf0); }
.heatmap-cell[data-level="1"] { background: #9be9a8; }
.heatmap-cell[data-level="2"] { background: #40c463; }
.heatmap-cell[data-level="3"] { background: #30a14e; }
.heatmap-cell[data-level="4"] { background: #216e39; }
[data-theme="dark"] .heatmap-cell[data-level="0"] { background: #161b22; }
[data-theme="dark"] .heatmap-cell[data-level="1"] { background: #0e4429; }
[data-theme="dark"] .heatmap-cell[data-level="2"] { background: #006d32; }
[data-theme="dark"] .heatmap-cell[data-level="3"] { background: #26a641; }
[data-theme="dark"] .heatmap-cell[data-level="4"] { background: #39d353; }
.heatmap-legend { display: flex; align-items: center; gap: 3px; margin-top: 0.5rem; font-size: 0.75rem; color: var(--hx-text-faint); }

/* ── Unit Progress ────────────────────────────────────────── */
.dash-units { padding: 0.75rem; background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: var(--hx-radius); margin-bottom: 1rem; margin-top: 1.25rem; }
.dash-units-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--hx-text); }
.dash-units-grid { display: flex; flex-direction: column; gap: 0.35rem; }
.dash-unit-item { display: flex; align-items: center; gap: 0.5rem; }
.dash-unit-label { font-size: 0.78rem; color: var(--hx-text-muted); width: 50px; flex-shrink: 0; }
.dash-unit-bar { flex: 1; height: 8px; background: var(--hx-bg-subtle, #ebedf0); border-radius: 4px; overflow: hidden; }
.dash-unit-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; }
.dash-unit-pct { font-size: 0.75rem; color: var(--hx-text-muted); width: 32px; text-align: right; }

/* B5: Landscape orientation — reduce chrome to maximize content area */
@media (orientation: landscape) and (max-height: 500px) {
    .hx-main { padding-top: 0.5rem; }
    .hx-bottom-nav { padding: 0.2rem 0; }
}

/* ── Speed Drill ──────────────────────────────────────────────── */
#speed-countdown {
    position: absolute; top: 0.5rem; right: 0.5rem;
    width: 44px; height: 44px;
}
#speed-countdown svg { width: 100%; height: 100%; }
#speed-countdown-text {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 0.85rem; font-weight: 700; color: var(--hx-text);
}
#speed-streak {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 2rem; font-weight: 800; color: var(--hx-primary);
    pointer-events: none; z-index: var(--z-toast);
    animation: streakPop 0.6s ease-out forwards; opacity: 0;
}
@keyframes streakPop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1) translateY(-20px); }
}
.speed-time-btn {
    padding: 0.4rem 0.75rem; border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    background: var(--hx-card-bg); color: var(--hx-text); cursor: pointer; font-size: 0.85rem;
    transition: all 0.15s;
}
.speed-time-btn.active { background: var(--hx-primary); color: #fff; border-color: var(--hx-primary); }
.speed-time-btn:hover { border-color: var(--hx-primary); }
.speed-timeout-flash { animation: timeoutFlash 0.4s ease-out; }
@keyframes timeoutFlash {
    0% { box-shadow: 0 0 0 0 rgba(220,38,38,0.5); }
    50% { box-shadow: 0 0 0 6px rgba(220,38,38,0.2); }
    100% { box-shadow: none; }
}

/* ── Grammar Cards ─────────────────────────────────────────── */
.grammar-card {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); padding: 1rem; margin-bottom: 0.75rem;
    transition: border-color 0.15s, box-shadow 0.2s;
}
.grammar-card:hover { border-color: var(--hx-primary); box-shadow: 0 2px 8px rgba(2,132,199,0.08); }
.grammar-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.grammar-title-zh { font-family: var(--hx-font-cjk); font-size: 1.05rem; font-weight: 600; color: var(--hx-text); }
.grammar-title-en { font-size: 0.82rem; color: var(--hx-text-muted); }
.grammar-pattern {
    background: var(--hx-primary-light); padding: 0.5rem 0.75rem; border-radius: 6px;
    font-size: 1.1rem; font-weight: 600; font-family: var(--hx-font-cjk);
    text-align: center; margin: 0.5rem 0; color: var(--hx-primary);
}
.grammar-explanation { font-size: 0.88rem; color: var(--hx-text); line-height: 1.6; margin-bottom: 0.75rem; }
.grammar-examples { border-top: 1px solid var(--hx-border); padding-top: 0.5rem; }
.grammar-example { padding: 0.35rem 0; font-size: 0.85rem; }
.grammar-example-zh { font-family: var(--hx-font-cjk); font-size: 1rem; }
.grammar-example-py { font-size: 0.8rem; color: var(--hx-primary); }
.grammar-example-en { color: var(--hx-text-muted); font-size: 0.82rem; }
.grammar-practice-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    margin-top: 0.5rem; padding: 0.3rem 0.75rem; border-radius: 20px;
    font-size: 0.78rem; font-weight: 600; background: none;
    color: var(--hx-primary); border: 1px solid var(--hx-primary);
    cursor: pointer; transition: background 0.15s, color 0.15s;
}
.grammar-practice-btn:hover { background: var(--hx-primary); color: white; }

/* ── Exam Readiness Widget ──────────────────────────────────── */
.dash-readiness {
    display: flex; align-items: center; gap: 1.25rem;
    padding: 1rem; background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); margin-bottom: 1rem;
}
.dash-readiness-ring { width: 120px; height: 120px; flex-shrink: 0; }
.dash-readiness-ring svg { width: 100%; height: 100%; }
.dash-readiness-info { flex: 1; font-size: 0.9rem; }
.dash-readiness-info > div { margin-bottom: 0.25rem; }
@media (max-width: 480px) {
    .dash-readiness { flex-direction: column; text-align: center; }
    .dash-readiness-ring { width: 100px; height: 100px; }
}

/* ── Swipe hint (review cards, touch devices) ────────────────── */
.swipe-hint {
    position: absolute; bottom: 0.5rem; left: 50%; transform: translateX(-50%);
    font-size: 0.75rem; color: var(--hx-text-faint); opacity: 0.6;
    display: flex; align-items: center; gap: 0.25rem;
    pointer-events: none;
}
@media (hover: hover) { .swipe-hint { display: none; } }

/* ── Quick review button (dashboard) ─────────────────────────── */
.quick-review-btn {
    margin-bottom: 1rem; text-align: center;
}
.quick-review-btn a {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    width: 100%;
}

/* ── Prof Briefing (S1) ──────────────────────────────────────── */
.dash-briefing {
    background: var(--hx-card-bg);
    border: 1px solid var(--hx-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.briefing-greeting { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }
.briefing-plan { display: flex; flex-direction: column; gap: 0.75rem; }
.briefing-item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem; border-radius: 8px;
    background: var(--hx-bg); cursor: pointer;
    text-decoration: none; color: var(--hx-text);
    transition: background 0.2s;
}
.briefing-item:hover { background: var(--hx-accent-bg, rgba(59,130,246,0.08)); }
.briefing-item i { font-size: 1.2rem; color: var(--hx-primary); }
.briefing-item .priority-high { font-weight: 600; }
.briefing-progress { margin-top: 1rem; font-size: 0.85rem; color: var(--hx-text-faint); }
.briefing-encouragement { margin-top: 0.5rem; font-style: italic; color: var(--hx-primary); }

/* ── Weekly Insights (S5) ────────────────────────────────────── */
.dash-insights {
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem;
}
.insights-header { font-weight: 600; margin-bottom: 1rem; }
.insights-stat { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--hx-border); }
.insights-trend-up { color: var(--hx-green); }
.insights-trend-down { color: var(--hx-red); }
.insights-trend-stable { color: var(--hx-text-faint); }
.weak-pair { display: inline-flex; gap: 0.25rem; align-items: center; }
.weak-pair-vs { color: var(--hx-text-faint); font-size: 0.8rem; }

/* ── Prof Hint (S5 review intervention) ──────────────────────── */
.prof-hint {
    position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
    z-index: 1000; max-width: 400px; width: calc(100% - 2rem);
    animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { transform: translateX(-50%) translateY(100%); } to { transform: translateX(-50%) translateY(0); } }
.prof-hint-content {
    background: var(--hx-card-bg); border: 2px solid var(--hx-primary);
    border-radius: 12px; padding: 1rem; display: flex; gap: 0.75rem; align-items: flex-start;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.prof-hint-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.prof-hint-text { flex: 1; font-size: 0.9rem; line-height: 1.4; }
.prof-hint-dismiss {
    background: var(--hx-primary); color: white; border: none; border-radius: 6px;
    padding: 0.3rem 0.8rem; font-size: 0.8rem; cursor: pointer; flex-shrink: 0;
}

/* ── Achievement Badges (S8) ─────────────────────────────────── */
.badges-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem; margin-top: 1rem;
}
.badge-card {
    text-align: center; padding: 1rem; border-radius: 12px;
    border: 1px solid var(--hx-border); background: var(--hx-card-bg);
    transition: transform 0.2s;
}
.badge-card.earned { border-color: var(--hx-green); }
.badge-card.locked { opacity: 0.4; filter: grayscale(1); }
.badge-card i { font-size: 2rem; display: block; margin-bottom: 0.5rem; }
.badge-card.earned i { color: var(--hx-green); }
.badge-title { font-weight: 600; font-size: 0.85rem; }
.badge-desc { font-size: 0.75rem; color: var(--hx-text-faint); margin-top: 0.25rem; }
.badge-date { font-size: 0.75rem; color: var(--hx-green); margin-top: 0.25rem; }

/* ── Export Buttons (S10) ────────────────────────────────────── */
.export-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

/* ── Prof Session (S6) — Mobile-first lesson UI ──────────────── */
.prof-lesson {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--hx-bg); z-index: var(--z-modal);
    display: flex; flex-direction: column;
    overflow: hidden;
}

/* ── Progress bar ──────────────────────────────────────────────── */
.prof-lesson-progress {
    flex-shrink: 0; padding: 0.75rem 1rem 0.5rem;
    display: flex; align-items: center; gap: 0.75rem;
    background: var(--hx-card-bg); border-bottom: 1px solid var(--hx-border);
}
.prof-lesson-progress-close {
    background: none; border: none; font-size: 1.25rem; color: var(--hx-text-muted);
    cursor: pointer; padding: 0.25rem; line-height: 1; min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
}
.prof-lesson-progress-bar {
    flex: 1; height: 10px; background: var(--hx-surface); border-radius: 5px; overflow: hidden;
}
.prof-lesson-progress-fill {
    height: 100%; border-radius: 5px;
    background: linear-gradient(90deg, var(--hx-primary), color-mix(in srgb, var(--hx-primary) 70%, var(--hx-green)));
    transition: width 0.5s var(--hx-spring);
}
.prof-lesson-progress-text {
    font-size: var(--text-sm); font-weight: 600; color: var(--hx-text-muted); white-space: nowrap;
}

/* ── Phase indicator ───────────────────────────────────────────── */
.prof-lesson-phase {
    flex-shrink: 0; text-align: center; padding: 0.5rem 1rem;
    font-size: var(--text-sm); font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--hx-text-muted);
}
.prof-lesson-phase[data-phase="teach"] { color: var(--hx-primary); }
.prof-lesson-phase[data-phase="review"] { color: var(--hx-amber); }
.prof-lesson-phase[data-phase="drill"] { color: var(--hx-green); }
.prof-lesson-phase i { margin-right: 0.25rem; }

/* ── Card area ─────────────────────────────────────────────────── */
.prof-lesson-card-area {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 1rem; overflow-y: auto; position: relative;
}
.prof-lesson-card {
    width: 100%; max-width: 480px;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border); border-radius: 16px;
    padding: 2rem 1.5rem; text-align: center;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.prof-lesson-card.slide-left {
    animation: profSlideLeft 0.3s ease forwards;
}
.prof-lesson-card.slide-right {
    animation: profSlideRight 0.3s ease forwards;
}
@keyframes profSlideLeft {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(-100%); opacity: 0; }
}
@keyframes profSlideRight {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(100%); opacity: 0; }
}
@keyframes profSlideIn {
    from { transform: translateX(60px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.prof-lesson-card.slide-in {
    animation: profSlideIn 0.3s ease forwards;
}
.prof-lesson-card-char {
    font-family: var(--hx-font-cjk); font-size: var(--text-cjk-hero);
    color: var(--hx-text); line-height: 1.2; margin-bottom: 0.75rem;
    cursor: pointer;
}
.prof-lesson-card-pinyin {
    font-size: var(--text-lg); color: var(--hx-primary); font-weight: 500;
    margin-bottom: 0.5rem;
}
.prof-lesson-card-meaning {
    font-size: var(--text-base); color: var(--hx-text-muted);
    margin-bottom: 1rem;
}
.prof-lesson-card-example {
    font-size: var(--text-sm); color: var(--hx-text);
    background: var(--hx-primary-light); border-radius: var(--hx-radius);
    padding: 0.75rem 1rem; text-align: left; line-height: 1.6;
    font-family: var(--hx-font-cjk);
}
.prof-lesson-card-example-en {
    font-size: var(--text-xs); color: var(--hx-text-muted); margin-top: 0.25rem;
    font-family: inherit;
}
.prof-lesson-card-hint {
    font-size: var(--text-sm); color: var(--hx-text-faint); margin-top: 1rem;
}
.prof-lesson-card-feedback {
    margin-top: 0.75rem; font-size: var(--text-sm); font-weight: 600;
    padding: 0.5rem; border-radius: var(--hx-radius);
}
.prof-lesson-card-feedback.correct {
    color: #166534; background: #dcfce7;
}
.prof-lesson-card-feedback.incorrect {
    color: #991b1b; background: #fee2e2;
}
[data-theme="dark"] .prof-lesson-card-feedback.correct { color: #86efac; background: #14532d; }
[data-theme="dark"] .prof-lesson-card-feedback.incorrect { color: #fca5a5; background: #451a1a; }

/* ── Drill input ───────────────────────────────────────────────── */
.prof-lesson-drill-input {
    display: flex; gap: 0.5rem; justify-content: center; align-items: center;
    margin-top: 1rem;
}
.prof-lesson-drill-input input {
    font-size: var(--text-lg); text-align: center; padding: 0.6rem 1rem;
    border: 2px solid var(--hx-border); border-radius: var(--hx-radius);
    background: var(--hx-bg); color: var(--hx-text); width: 200px;
    font-family: inherit;
}
.prof-lesson-drill-input input:focus {
    border-color: var(--hx-primary); outline: none;
}
.prof-lesson-drill-input button {
    min-width: 44px; min-height: 44px;
}

/* ── Review rating buttons inside lesson ───────────────────────── */
.prof-lesson-ratings {
    display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap;
    margin-top: 1.25rem;
}
.prof-lesson-ratings .rating-btn {
    min-height: 48px; min-width: 72px;
}

/* ── Reveal tap target ─────────────────────────────────────────── */
.prof-lesson-card-reveal {
    display: inline-block; padding: 0.75rem 2rem; margin-top: 1rem;
    background: var(--hx-primary-light); color: var(--hx-primary);
    border-radius: var(--hx-radius); font-size: var(--text-sm); font-weight: 600;
    cursor: pointer; min-height: 44px;
    transition: background 0.15s;
}
.prof-lesson-card-reveal:hover { background: var(--hx-primary); color: white; }

/* ── Bottom navigation ─────────────────────────────────────────── */
.prof-lesson-nav {
    flex-shrink: 0; display: flex; gap: 0.5rem;
    padding: 0.75rem 1rem; background: var(--hx-card-bg);
    border-top: 1px solid var(--hx-border);
    justify-content: center;
}
.prof-lesson-nav button {
    min-height: 48px; min-width: 48px; padding: 0.6rem 1.5rem;
    border-radius: var(--hx-radius); font-size: var(--text-sm); font-weight: 600;
    border: 1px solid var(--hx-border); background: var(--hx-card-bg); color: var(--hx-text);
    cursor: pointer; transition: all 0.15s;
}
.prof-lesson-nav button:hover { background: var(--hx-primary-light); border-color: var(--hx-primary); }
.prof-lesson-nav button:disabled { opacity: 0.4; cursor: not-allowed; }
.prof-lesson-nav button.primary {
    background: var(--hx-primary); color: white; border-color: var(--hx-primary);
}
.prof-lesson-nav button.primary:hover { background: var(--hx-primary-mid); }

/* ── Phase transition screen ───────────────────────────────────── */
.prof-lesson-phase-done {
    text-align: center; padding: 3rem 1.5rem;
}
.prof-lesson-phase-done i { font-size: 2.5rem; color: var(--hx-primary); margin-bottom: 1rem; display: block; }
.prof-lesson-phase-done h3 { color: var(--hx-text); margin-bottom: 0.5rem; }
.prof-lesson-phase-done p { color: var(--hx-text-muted); font-size: var(--text-sm); }

/* ── Session summary ───────────────────────────────────────────── */
.prof-lesson-summary {
    text-align: center; padding: 2rem 1.5rem; max-width: 480px; margin: 0 auto;
}
.prof-lesson-summary h3 { color: var(--hx-primary); margin-bottom: 1.25rem; }
.prof-lesson-summary-stats {
    display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.prof-lesson-summary-stat {
    display: flex; flex-direction: column; align-items: center;
}
.prof-lesson-summary-stat .num {
    font-size: var(--text-xl); font-weight: 700; color: var(--hx-primary);
}
.prof-lesson-summary-stat .label {
    font-size: var(--text-xs); text-transform: uppercase; color: var(--hx-text-faint);
    letter-spacing: 0.05em;
}
.prof-lesson-summary-actions {
    display: flex; gap: 0.75rem; justify-content: center; margin-top: 1rem;
}

/* ── Desktop: constrain card width, add padding ────────────────── */
@media (min-width: 768px) {
    .prof-lesson-card { padding: 2.5rem 2rem; }
    .prof-lesson-card-char { font-size: 6rem; }
    .prof-lesson-nav { padding: 1rem 2rem; }
    .prof-lesson-progress { padding: 1rem 2rem 0.75rem; }
    .prof-lesson-phase { padding: 0.75rem 2rem; }
}

/* ── Listening card (dictation) ────────────────────────────────── */
.prof-lesson-card-listen-icon {
    text-align: center; margin: 1.5rem 0; cursor: pointer;
}
.prof-lesson-card-listen-icon i {
    font-size: 4rem; color: var(--hx-primary);
    transition: transform 0.2s;
}
.prof-lesson-card-listen-icon i:hover { transform: scale(1.15); }
.prof-lesson-card-listen-icon i:active { transform: scale(0.95); }

/* ── Tone drill ────────────────────────────────────────────────── */
.prof-lesson-tone-choices {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0.75rem; margin: 1.5rem 0; max-width: 280px;
    margin-left: auto; margin-right: auto;
}
.tone-choice-btn {
    padding: 0.75rem 1rem; border: 2px solid var(--hx-border);
    border-radius: 12px; background: var(--hx-bg);
    font-size: 1.1rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s; color: var(--hx-text);
}
.tone-choice-btn:hover { border-color: var(--hx-primary); background: var(--hx-primary-light); }
.tone-choice-btn.correct { border-color: #16a34a; background: #dcfce7; color: #166534; }
.tone-choice-btn.incorrect { border-color: var(--hx-red); background: #fee2e2; color: #991b1b; }
.tone-choice-btn:disabled { cursor: default; opacity: 0.7; }

/* ── Sentence construction ─────────────────────────────────────── */
.sentence-drop-zone {
    min-height: 52px; border: 2px dashed var(--hx-border);
    border-radius: 12px; padding: 0.5rem; margin: 0.75rem 0;
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    align-items: center; background: var(--hx-bg-card);
}
.sentence-drop-zone:empty::after {
    content: 'Tap words to build sentence...';
    color: var(--hx-text-faint); font-size: 0.85rem;
    padding: 0.3rem;
}
.sentence-word-bank {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    justify-content: center; margin: 0.75rem 0;
}
.sentence-tile {
    display: inline-block; padding: 0.5rem 0.8rem;
    background: var(--hx-primary-light); color: var(--hx-primary);
    border: 1px solid var(--hx-primary); border-radius: 8px;
    font-size: 1.05rem; font-weight: 600; cursor: pointer;
    user-select: none; transition: all 0.15s;
}
.sentence-tile:hover { background: var(--hx-primary); color: white; }
.sentence-tile:active { transform: scale(0.93); }

/* ── Speaking card ─────────────────────────────────────────────── */
.prof-lesson-speak-btn {
    text-align: center; margin: 1.5rem 0;
}
.prof-lesson-speak-btn button {
    padding: 1rem 2rem; font-size: 1rem; border-radius: 50px;
}
.prof-lesson-speak-btn button i { margin-right: 0.3rem; }

/* ── Skill balance (briefing) ──────────────────────────────────── */
.skill-balance {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem; margin: 0.75rem 0;
}
.skill-balance-item {
    text-align: center; padding: 0.5rem; border-radius: 8px;
    background: var(--hx-bg-card); border: 1px solid var(--hx-border);
}
.skill-balance-item .num {
    display: block; font-size: 1.2rem; font-weight: 700;
    color: var(--hx-primary);
}
.skill-balance-item .label {
    display: block; font-size: 0.75rem; text-transform: uppercase;
    color: var(--hx-text-muted); margin-top: 0.15rem;
}

/* ── Dark mode adjustments for new cards ───────────────────────── */
@media (prefers-color-scheme: dark) {
    .tone-choice-btn { background: var(--hx-bg-card); border-color: var(--hx-border); }
    .tone-choice-btn.correct { background: #14532d; color: #86efac; border-color: #16a34a; }
    .tone-choice-btn.incorrect { background: #7f1d1d; color: #fca5a5; border-color: var(--hx-red); }
    .sentence-tile { background: rgba(2,132,199,0.15); }
    .sentence-tile:hover { background: var(--hx-primary); }
    .sentence-drop-zone { background: var(--hx-bg-card); border-color: var(--hx-border); }
}

/* ═══════════════════════════════════════════════════════════════
   ENERGY DESIGN SYSTEM — "Learning Feels Like Living"
   All new celebration, gamification, and personality components.
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ─────────────────────────────────────────────────── */
@keyframes bounce-in {
    0%   { transform: scale(0.5) translateY(10px); opacity: 0; }
    60%  { transform: scale(1.08) translateY(-4px); opacity: 1; }
    80%  { transform: scale(0.96) translateY(1px); }
    100% { transform: scale(1) translateY(0); }
}
@keyframes slide-up-in {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes xp-float-up {
    0%   { transform: translateY(0)    scale(1);    opacity: 1; }
    60%  { transform: translateY(-28px) scale(1.15); opacity: 1; }
    100% { transform: translateY(-48px) scale(0.9);  opacity: 0; }
}
@keyframes card-correct-flash {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
    40%  { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0.2); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@keyframes card-wrong-shake {
    0%, 100% { transform: translateX(0); }
    15%  { transform: translateX(-8px); }
    30%  { transform: translateX(8px); }
    45%  { transform: translateX(-6px); }
    60%  { transform: translateX(6px); }
    75%  { transform: translateX(-3px); }
    90%  { transform: translateX(3px); }
}
@keyframes streak-pulse {
    0%, 100% { transform: scale(1); }
    50%  { transform: scale(1.15); }
}
@keyframes xp-bar-fill {
    from { width: 0; }
}
@keyframes confetti-fall {
    0%   { transform: translateY(-10px) rotate(0deg);   opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes celebration-pop-in {
    0%   { transform: scale(0.7); opacity: 0; }
    70%  { transform: scale(1.05); }
    100% { transform: scale(1);   opacity: 1; }
}
@keyframes typing-dot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%            { transform: translateY(-5px); opacity: 1; }
}
@keyframes goal-ring-fill {
    from { stroke-dashoffset: 100; }
}
@keyframes hover-lift {
    to { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}
@keyframes nav-badge-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    50%       { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}

/* ── Streak Pill ───────────────────────────────────────────────── */
.hx-streak-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.55rem; border-radius: 20px;
    font-size: 0.78rem; font-weight: 700; line-height: 1;
    background: var(--hx-gold-light); color: var(--hx-gold-mid);
    border: 1px solid var(--hx-gold);
    transition: transform var(--hx-duration-fast) var(--hx-spring);
    white-space: nowrap;
}
.hx-streak-pill.streak-low  { background: #dcfce7; color: #15803d; border-color: var(--hx-streak-low); }
.hx-streak-pill.streak-mid  { background: var(--hx-gold-light); color: var(--hx-gold-mid); border-color: var(--hx-gold); }
.hx-streak-pill.streak-high { background: #fee2e2; color: #b91c1c; border-color: var(--hx-streak-high); animation: streak-pulse 2s ease-in-out infinite; }
.hx-streak-pill .streak-fire { font-size: 0.95em; }
[data-theme="dark"] .hx-streak-pill.streak-low  { background: rgba(34,197,94,0.15); color: var(--hx-streak-low); }
[data-theme="dark"] .hx-streak-pill.streak-mid  { background: rgba(251,191,36,0.15); color: var(--hx-gold); }
[data-theme="dark"] .hx-streak-pill.streak-high { background: rgba(239,68,68,0.15);  color: var(--hx-streak-high); }

/* ── XP Bar ────────────────────────────────────────────────────── */
.hx-xp-bar-wrap {
    background: var(--hx-border); border-radius: 8px; height: 8px;
    overflow: hidden; flex: 1;
}
.hx-xp-bar {
    height: 100%; border-radius: 8px;
    background: linear-gradient(90deg, var(--hx-primary), var(--hx-coral));
    transition: width 0.6s var(--hx-ease-out);
    animation: xp-bar-fill 0.6s var(--hx-ease-out) both;
}
.hx-xp-row {
    display: flex; align-items: center; gap: 0.6rem;
    margin-bottom: 0.75rem;
}
.hx-xp-label { font-size: 0.75rem; color: var(--hx-text-muted); white-space: nowrap; }

/* ── Daily Goal Ring ────────────────────────────────────────────── */
.hx-goal-ring-wrap {
    display: flex; align-items: center; gap: 0.65rem;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); padding: 0.65rem 0.85rem;
    margin-bottom: 1rem;
}
.hx-goal-ring svg { flex-shrink: 0; }
.hx-goal-ring-track { fill: none; stroke: var(--hx-border); stroke-width: 4; }
.hx-goal-ring-fill  {
    fill: none; stroke: var(--hx-coral); stroke-width: 4;
    stroke-linecap: round; stroke-dasharray: 100;
    transform-origin: 50% 50%; transform: rotate(-90deg);
    transition: stroke-dashoffset 0.8s var(--hx-ease-out);
    animation: goal-ring-fill 0.8s var(--hx-ease-out) both;
}
.hx-goal-ring-fill.done { stroke: var(--hx-green); }
.hx-goal-ring-text { line-height: 1.2; }
.hx-goal-ring-text strong { font-size: 0.9rem; font-weight: 700; color: var(--hx-text); display: block; }
.hx-goal-ring-text span   { font-size: 0.75rem; color: var(--hx-text-muted); }

/* ── Prof Hanlexon Speech Bubble ───────────────────────────────── */
.hx-prof-row {
    display: flex; align-items: flex-start; gap: 0.65rem;
    margin-bottom: 1rem;
}
.hx-prof-avatar {
    font-size: 2rem; line-height: 1; flex-shrink: 0;
    animation: bounce-in 0.5s var(--hx-spring) both;
}
.hx-prof-bubble {
    position: relative; background: var(--hx-card-bg);
    border: 1.5px solid var(--hx-primary-border);
    border-radius: 12px 12px 12px 2px;
    padding: 0.65rem 0.85rem;
    box-shadow: var(--shadow-sm);
    animation: slide-up-in 0.3s var(--hx-ease-out) 0.15s both;
    flex: 1; min-width: 0;
}
.hx-prof-bubble::before {
    content: ''; position: absolute; left: -8px; top: 12px;
    border: 5px solid transparent;
    border-right-color: var(--hx-primary-border);
}
.hx-prof-bubble::after {
    content: ''; position: absolute; left: -6px; top: 13px;
    border: 4px solid transparent;
    border-right-color: var(--hx-card-bg);
}
.hx-prof-bubble p { margin: 0; font-size: 0.9rem; color: var(--hx-text); line-height: 1.45; }
.hx-prof-bubble .prof-name { font-size: 0.75rem; font-weight: 700; color: var(--hx-primary); margin-bottom: 0.2rem; text-transform: uppercase; letter-spacing: 0.04em; }
/* Emotional state variants */
.hx-prof-bubble.emotion-celebrating { border-color: var(--hx-gold); background: var(--hx-gold-light); }
.hx-prof-bubble.emotion-celebrating::after { border-right-color: var(--hx-gold-light); }
.hx-prof-bubble.emotion-concerned { border-color: var(--hx-red-border); }
.hx-prof-bubble.emotion-thinking   { border-color: var(--hx-border); }
/* Typing dots animation */
.prof-thinking-dots { display: inline-flex; gap: 3px; align-items: center; padding: 2px 0; }
.prof-thinking-dots span {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--hx-text-muted); display: inline-block;
    animation: typing-dot 1.2s ease-in-out infinite;
}
.prof-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.prof-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
[data-theme="dark"] .hx-prof-bubble { background: var(--hx-card-bg); border-color: var(--hx-primary-border); }
[data-theme="dark"] .hx-prof-bubble.emotion-celebrating { background: rgba(251,191,36,0.12); border-color: var(--hx-gold); }

/* ── XP Float Pop ───────────────────────────────────────────────── */
.hx-xp-pop {
    position: fixed; pointer-events: none; z-index: 9999;
    font-size: 0.9rem; font-weight: 800; color: var(--hx-gold);
    text-shadow: 0 1px 4px rgba(0,0,0,0.2);
    animation: xp-float-up 0.9s var(--hx-ease-out) both;
}

/* ── Session Complete Overlay ───────────────────────────────────── */
.hx-celebration-overlay {
    position: fixed; inset: 0; z-index: var(--z-modal);
    background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.2s ease;
}
.hx-celebration-card {
    background: var(--hx-card-bg); border-radius: 20px;
    padding: 2rem 1.5rem; max-width: 380px; width: 100%;
    text-align: center; position: relative; overflow: hidden;
    box-shadow: var(--shadow-xl);
    animation: celebration-pop-in 0.4s var(--hx-spring) both;
}
.hx-celebration-emoji { font-size: 3.5rem; line-height: 1; margin-bottom: 0.5rem; }
.hx-celebration-title { font-size: 1.5rem; font-weight: 800; color: var(--hx-text); margin-bottom: 0.25rem; }
.hx-celebration-sub   { font-size: 0.9rem; color: var(--hx-text-muted); margin-bottom: 1.25rem; }
.hx-celebration-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem; margin-bottom: 1.25rem;
}
.hx-cel-stat { background: var(--hx-bg); border-radius: 10px; padding: 0.6rem 0.4rem; }
.hx-cel-stat .num   { font-size: 1.4rem; font-weight: 800; color: var(--hx-primary); display: block; }
.hx-cel-stat .label { font-size: 0.75rem; color: var(--hx-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.hx-celebration-xp {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--hx-gold-light); border: 1px solid var(--hx-gold);
    border-radius: 20px; padding: 0.35rem 0.9rem; margin-bottom: 1.25rem;
    font-size: 0.9rem; font-weight: 700; color: var(--hx-gold-mid);
}
.hx-celebration-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.hx-celebration-actions .hx-btn-primary {
    flex: 1; padding: 0.7rem; background: var(--hx-primary); color: white;
    border: none; border-radius: var(--hx-radius); font-weight: 700;
    font-size: 0.9rem; cursor: pointer;
    transition: background var(--hx-duration-fast), transform var(--hx-duration-fast) var(--hx-spring);
}
.hx-celebration-actions .hx-btn-primary:hover  { background: var(--hx-primary-mid); transform: translateY(-1px); }
.hx-celebration-actions .hx-btn-primary:active { transform: scale(0.97); }
.hx-celebration-actions .hx-btn-ghost {
    flex: 1; padding: 0.7rem; background: transparent; color: var(--hx-text-muted);
    border: 1px solid var(--hx-border); border-radius: var(--hx-radius);
    font-size: 0.9rem; cursor: pointer;
    transition: color var(--hx-duration-fast), border-color var(--hx-duration-fast);
}
.hx-celebration-actions .hx-btn-ghost:hover { color: var(--hx-text); border-color: var(--hx-text-muted); }
[data-theme="dark"] .hx-celebration-card { background: var(--hx-card-bg); }
[data-theme="dark"] .hx-cel-stat { background: rgba(255,255,255,0.05); }

/* ── Streak Milestone Overlay ───────────────────────────────────── */
.hx-milestone-overlay {
    position: fixed; inset: 0; z-index: calc(var(--z-modal) + 1);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 2rem;
    animation: fadeIn 0.3s ease;
}
.hx-milestone-fire  { font-size: 5rem; animation: streak-pulse 1.5s ease-in-out infinite; margin-bottom: 0.5rem; }
.hx-milestone-days  { font-size: 4rem; font-weight: 900; color: var(--hx-gold); line-height: 1; }
.hx-milestone-label { font-size: 1.1rem; color: rgba(255,255,255,0.8); margin: 0.3rem 0 1rem; }
.hx-milestone-msg   { font-size: 0.95rem; color: rgba(255,255,255,0.6); margin-bottom: 2rem; max-width: 280px; }
.hx-milestone-btn {
    padding: 0.8rem 2rem; background: var(--hx-gold); color: #1a1a2e;
    border: none; border-radius: 50px; font-size: 1rem; font-weight: 800;
    cursor: pointer; transition: transform 0.15s var(--hx-spring);
}
.hx-milestone-btn:hover  { transform: scale(1.05); }
.hx-milestone-btn:active { transform: scale(0.97); }

/* ── Join Code Card (teacher class creation) ────────────────────── */
.hx-join-code-card {
    background: linear-gradient(135deg, var(--hx-primary-light), var(--hx-card-bg));
    border: 2px solid var(--hx-primary); border-radius: 14px;
    padding: 1.5rem; text-align: center; margin: 1rem 0;
}
.hx-join-code-card .code-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--hx-text-muted); margin-bottom: 0.4rem; }
.hx-join-code-card .code-value {
    font-size: 2.2rem; font-weight: 900; letter-spacing: 0.12em;
    color: var(--hx-primary); font-family: monospace;
    margin-bottom: 0.75rem;
}
.hx-join-code-card .code-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.hx-join-code-copy {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 0.9rem; background: var(--hx-primary); color: white;
    border: none; border-radius: 8px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: background var(--hx-duration-fast), transform var(--hx-duration-fast) var(--hx-spring);
}
.hx-join-code-copy:hover  { background: var(--hx-primary-mid); }
.hx-join-code-copy:active { transform: scale(0.96); }
.hx-join-code-secondary {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 0.9rem; background: transparent;
    border: 1px solid var(--hx-border); border-radius: 8px;
    font-size: 0.82rem; color: var(--hx-text-muted); cursor: pointer;
    transition: color var(--hx-duration-fast), border-color var(--hx-duration-fast);
}
.hx-join-code-secondary:hover { color: var(--hx-text); border-color: var(--hx-text-muted); }
[data-theme="dark"] .hx-join-code-card { background: linear-gradient(135deg, var(--hx-primary-light), var(--hx-card-bg)); }

/* ── Review Progress Bar ────────────────────────────────────────── */
.hx-review-progress {
    position: sticky; top: 0; z-index: var(--z-sticky);
    background: var(--hx-card-bg); border-bottom: 1px solid var(--hx-border);
    padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.75rem;
}
.hx-review-progress .rp-bar-wrap {
    flex: 1; height: 8px; background: var(--hx-border); border-radius: 8px; overflow: hidden;
}
.hx-review-progress .rp-bar {
    height: 100%; border-radius: 8px;
    background: linear-gradient(90deg, var(--hx-primary), var(--hx-green));
    transition: width 0.4s var(--hx-ease-out);
    min-width: 4px;
}
.hx-review-progress .rp-bar.complete { background: var(--hx-green); }
.hx-review-progress .rp-count { font-size: 0.78rem; color: var(--hx-text-muted); white-space: nowrap; font-weight: 600; }

/* ── Lesson Progress Bar ────────────────────────────────────────── */
.hx-lesson-progress {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1rem; margin-bottom: 1rem;
    background: var(--hx-card-bg); border-bottom: 1px solid var(--hx-border);
}
.hx-lesson-step {
    flex: 1; height: 6px; background: var(--hx-border); border-radius: 4px;
    transition: background 0.3s var(--hx-ease-out);
}
.hx-lesson-step.done    { background: var(--hx-green); }
.hx-lesson-step.current { background: var(--hx-primary); animation: streak-pulse 2s ease-in-out infinite; }

/* ── Card Feedback (correct/wrong) ──────────────────────────────── */
.hx-card-correct { animation: card-correct-flash 0.5s ease-out both; }
.hx-card-wrong   { animation: card-wrong-shake 0.4s ease-out both; }

/* ── Student Avatar Grid (classroom) ────────────────────────────── */
.hx-avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 0.5rem; margin: 0.75rem 0;
}
.hx-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 700; color: white;
    cursor: default; position: relative;
    transition: transform 0.15s var(--hx-spring), box-shadow 0.15s;
    flex-direction: column; line-height: 1;
}
.hx-avatar:hover { transform: scale(1.12); box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 1; }
.hx-avatar .av-initials { font-size: 0.8rem; font-weight: 700; }
.hx-avatar .av-active-dot {
    position: absolute; bottom: 1px; right: 1px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--hx-green); border: 2px solid var(--hx-card-bg);
}
.hx-avatar .av-inactive-dot {
    position: absolute; bottom: 1px; right: 1px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--hx-border); border: 2px solid var(--hx-card-bg);
}

/* ── Assignment Status Chips ────────────────────────────────────── */
.hx-assign-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.15rem 0.5rem; border-radius: 12px;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.hx-assign-chip.pending  { background: var(--hx-yellow-light); color: var(--hx-yellow); border: 1px solid var(--hx-yellow-border); }
.hx-assign-chip.done     { background: var(--hx-green-light);  color: var(--hx-green);  border: 1px solid var(--hx-green-border); }
.hx-assign-chip.overdue  { background: var(--hx-red-light);    color: var(--hx-red);    border: 1px solid var(--hx-red-border); }

/* ── Activity Feed (teacher home) ───────────────────────────────── */
.hx-activity-feed { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0; }
.hx-activity-item {
    display: flex; align-items: center; gap: 0.6rem;
    font-size: 0.83rem; color: var(--hx-text); padding: 0.4rem 0;
    border-bottom: 1px solid var(--hx-border); animation: slide-up-in 0.3s var(--hx-ease-out) both;
}
.hx-activity-item:last-child { border-bottom: none; }
.hx-activity-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; flex-shrink: 0; }
.hx-activity-icon.active   { background: var(--hx-green-light); color: var(--hx-green); }
.hx-activity-icon.inactive { background: var(--hx-yellow-light); color: var(--hx-yellow); }
.hx-activity-icon.new      { background: var(--hx-primary-light); color: var(--hx-primary); }
.hx-activity-text { flex: 1; }
.hx-activity-text strong { font-weight: 600; }
.hx-activity-meta { font-size: 0.75rem; color: var(--hx-text-faint); white-space: nowrap; }

/* ── Nudge Button ───────────────────────────────────────────────── */
.hx-nudge-btn {
    padding: 0.25rem 0.6rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600;
    background: var(--hx-yellow-light); color: var(--hx-yellow); border: 1px solid var(--hx-yellow-border);
    cursor: pointer; transition: background var(--hx-duration-fast), transform var(--hx-duration-fast) var(--hx-spring);
    white-space: nowrap;
}
.hx-nudge-btn:hover  { background: var(--hx-yellow-border); }
.hx-nudge-btn:active { transform: scale(0.95); }

/* ── Activity Bar (class card) ──────────────────────────────────── */
.hx-activity-bar-wrap {
    display: flex; align-items: center; gap: 0.4rem;
    margin-top: 0.25rem;
}
.hx-activity-bar-track { flex: 1; height: 4px; background: var(--hx-border); border-radius: 4px; overflow: hidden; }
.hx-activity-bar-fill  { height: 100%; border-radius: 4px; background: var(--hx-green); transition: width 0.6s var(--hx-ease-out); }
.hx-activity-bar-label { font-size: 0.75rem; color: var(--hx-text-muted); white-space: nowrap; }

/* ── Nav streak pill in nav bar ─────────────────────────────────── */
.hx-nav-streak {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.4rem;
    border-radius: 10px; background: var(--hx-gold-light); color: var(--hx-gold-mid);
    border: 1px solid var(--hx-gold); line-height: 1; margin-left: 0.25rem;
    transition: transform 0.15s var(--hx-spring);
}
.hx-nav-streak:hover { transform: scale(1.1); }
.hx-nav-streak.streak-high { background: #fee2e2; color: #b91c1c; border-color: var(--hx-streak-high); animation: streak-pulse 2s infinite; }
[data-theme="dark"] .hx-nav-streak { background: rgba(251,191,36,0.15); color: var(--hx-gold); border-color: var(--hx-gold); }
[data-theme="dark"] .hx-nav-streak.streak-high { background: rgba(239,68,68,0.15); color: var(--hx-streak-high); }

/* ── Nav badge pulse ────────────────────────────────────────────── */
.nav-badge.pulsing { animation: nav-badge-pulse 2s ease-in-out infinite; }

/* ── Welcome / Onboarding ───────────────────────────────────────── */
.welcome-choice-card {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.9rem 1rem; border: 2px solid var(--hx-border);
    border-radius: 12px; cursor: pointer; background: var(--hx-card-bg);
    transition: border-color 0.15s, background 0.15s, transform 0.15s var(--hx-spring), box-shadow 0.15s;
    text-align: left;
}
.welcome-choice-card:hover  { border-color: var(--hx-primary); background: var(--hx-primary-light); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.welcome-choice-card.selected { border-color: var(--hx-primary); background: var(--hx-primary-light); }
.welcome-choice-card .wcc-icon {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; background: var(--hx-primary-light); color: var(--hx-primary);
}
.welcome-choice-card .wcc-body strong { display: block; font-size: 0.92rem; font-weight: 700; color: var(--hx-text); margin-bottom: 0.1rem; }
.welcome-choice-card .wcc-body span  { font-size: 0.78rem; color: var(--hx-text-muted); }
.welcome-progress-dots { display: flex; gap: 0.4rem; justify-content: center; margin-bottom: 1.5rem; }
.welcome-progress-dots .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--hx-border); transition: background 0.2s, transform 0.2s var(--hx-spring);
}
.welcome-progress-dots .dot.active { background: var(--hx-primary); transform: scale(1.3); }
.welcome-progress-dots .dot.done   { background: var(--hx-green); }

/* ── Empty State with Prof ──────────────────────────────────────── */
.hx-empty-prof {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 2rem 1rem; gap: 0.75rem;
}
.hx-empty-prof .ep-avatar { font-size: 3rem; animation: bounce-in 0.5s var(--hx-spring) both; }
.hx-empty-prof .ep-title  { font-size: 1rem; font-weight: 700; color: var(--hx-text); margin: 0; }
.hx-empty-prof .ep-body   { font-size: 0.85rem; color: var(--hx-text-muted); line-height: 1.5; margin: 0; max-width: 280px; }
.hx-empty-prof .ep-cta    {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.6rem 1.2rem; background: var(--hx-primary); color: white;
    border: none; border-radius: var(--hx-radius); font-size: 0.85rem; font-weight: 700;
    cursor: pointer; text-decoration: none;
    transition: background var(--hx-duration-fast), transform var(--hx-duration-fast) var(--hx-spring);
    margin-top: 0.25rem;
}
.hx-empty-prof .ep-cta:hover  { background: var(--hx-primary-mid); color: white; transform: translateY(-1px); }
.hx-empty-prof .ep-cta:active { transform: scale(0.97); }

/* ── Confetti Canvas ────────────────────────────────────────────── */
#hx-confetti-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: calc(var(--z-modal) + 10);
}

/* ── Global hover-lift for interactive cards ────────────────────── */
.home-action-card, .focus-item, .hx-card, .cls-card {
    transition: transform var(--hx-duration-fast) var(--hx-spring),
                box-shadow var(--hx-duration-fast);
}
.home-action-card:hover, .focus-item:hover, .hx-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.cls-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ── Slide-up entrance for dynamically rendered content ─────────── */
.hx-animate-in { animation: slide-up-in 0.3s var(--hx-ease-out) both; }
.hx-bounce-in  { animation: bounce-in  0.5s var(--hx-spring)   both; }

/* ── Responsive adjustments ─────────────────────────────────────── */
@media (max-width: 480px) {
    .hx-celebration-card { padding: 1.5rem 1rem; }
    .hx-celebration-title { font-size: 1.25rem; }
    .hx-milestone-fire { font-size: 4rem; }
    .hx-milestone-days { font-size: 3rem; }
    .hx-goal-ring-wrap { padding: 0.5rem 0.65rem; }
    .hx-avatar { width: 42px; height: 42px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOME PAGE — NEW UX PATTERNS
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Material Tile (heritage / parent practice picker) ── */
.hx-material-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .65rem .5rem;
    border: 1.5px solid var(--hx-border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--hx-text);
    background: var(--hx-card-bg);
    cursor: pointer;
    transition: transform var(--hx-duration-fast) var(--hx-spring),
                box-shadow var(--hx-duration-fast) ease,
                border-color var(--hx-duration-fast) ease;
    text-align: center;
}
.hx-material-tile:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
    border-color: var(--hx-primary);
    color: var(--hx-text);
    text-decoration: none;
}
.hx-material-tile:active { transform: scale(0.97); }
.hx-material-tile__icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hx-material-tile__label { font-size: .82rem; font-weight: 700; }
.hx-material-tile__sub   { font-size: .7rem; color: var(--hx-text-muted); }

/* ── Teacher Action Row (2 equal hero buttons) ── */
.hx-teacher-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-bottom: .25rem;
}
.hx-teacher-action-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem .9rem;
    border-radius: var(--hx-radius);
    background: var(--hx-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: .85rem;
    transition: transform var(--hx-duration-fast) var(--hx-spring),
                box-shadow var(--hx-duration-fast) ease;
    box-shadow: 0 2px 8px rgba(74,144,217,.2);
}
.hx-teacher-action-btn i { font-size: 1rem; flex-shrink: 0; }
.hx-teacher-action-btn small { font-size: .72rem; font-weight: 400; opacity: .85; margin-left: auto; }
.hx-teacher-action-btn:hover  { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(74,144,217,.3); color: #fff; text-decoration: none; }
.hx-teacher-action-btn:active { transform: scale(0.97); }
.hx-teacher-action-btn--secondary {
    background: var(--hx-card-bg);
    color: var(--hx-primary);
    border: 1.5px solid var(--hx-primary);
    box-shadow: none;
}
.hx-teacher-action-btn--secondary:hover { background: var(--hx-primary-light); color: var(--hx-primary); }

/* ── Class card (teacher home) ── */
.hx-cls-card {
    border: 1px solid var(--hx-border);
    border-radius: 12px;
    padding: .85rem;
    margin-bottom: .6rem;
    background: var(--hx-card-bg);
    transition: box-shadow var(--hx-duration-fast) ease;
}
.hx-cls-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.08); }
.hx-cls-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
    flex-wrap: wrap;
}
.hx-cls-card__name    { font-weight: 700; font-size: .95rem; color: var(--hx-text); }
.hx-cls-card__meta    { font-size: .78rem; color: var(--hx-text-muted); }
.hx-cls-card__actions { display: flex; gap: .35rem; flex-wrap: wrap; }
.hx-cls-card__stats   { margin-top: .4rem; color: var(--hx-text-muted); }

/* ── Parent child card ── */
.hx-parent-child-card {
    border: 1px solid var(--hx-border);
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: .85rem;
    background: var(--hx-card-bg);
}

/* ── Hero CTA variants ── */
.hx-hero-cta--calm {
    background: var(--hx-card-bg) !important;
    color: var(--hx-primary) !important;
    border: 2px solid var(--hx-primary) !important;
    box-shadow: none !important;
}
.hx-hero-cta--pulse {
    animation: streak-pulse 2s ease-in-out infinite;
}

/* ── hx-next-item sub-label ── */
.hx-next-item-body   { display: flex; flex-direction: column; flex: 1; gap: .1rem; }
.hx-next-item-sub    { font-size: .72rem; color: var(--hx-text-muted); font-weight: 400; }

/* ── Hero CTA — detail as subtitle under title (not right-aligned noise) ── */
.hx-hero-cta-body    { display: flex; flex-direction: column; flex: 1; gap: .1rem; }
.hx-hero-cta-title   { font-size: .92rem; font-weight: 700; line-height: 1.2; }
.hx-hero-cta-detail  { font-size: .72rem; font-weight: 400; opacity: .8; }

/* ── Action tile grid: 2-column compact cards for "what to do next" ── */
/* Replaces full-width list rows — full card is tap target, no ambiguous chevron */
.hx-action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .55rem;
    margin-top: .75rem;
}
.hx-action-tile {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: .3rem; padding: .75rem; background: var(--hx-card-bg);
    border: 1px solid var(--hx-border); border-radius: 10px;
    text-decoration: none; color: var(--hx-text);
    transition: border-color .15s, box-shadow .15s;
    min-height: 72px;
}
.hx-action-tile:hover {
    border-color: var(--hx-primary);
    box-shadow: 0 2px 8px rgba(2,132,199,.12);
    color: var(--hx-text);
}
.hx-action-tile i    { font-size: 1.25rem; color: var(--hx-primary); line-height: 1; }
.hx-action-tile span { font-size: .82rem; font-weight: 600; line-height: 1.3; }
.hx-action-tile small { font-size: .7rem; color: var(--hx-text-muted); font-weight: 400; line-height: 1.3; }
.hx-action-tile--highlight { border-color: var(--hx-gold, #f59e0b); background: color-mix(in srgb, var(--hx-gold, #f59e0b) 8%, var(--hx-card-bg)); }
.hx-action-tile--highlight i { color: var(--hx-gold, #f59e0b); }

/* ── Assignment row (classroom student) ── */
.hx-assignment-row { padding:.7rem;border:1px solid var(--hx-border);border-radius:10px;margin-bottom:.45rem;background:var(--hx-card-bg); }
.hx-assignment-row__title { display:flex;justify-content:space-between;align-items:center;gap:.4rem;flex-wrap:wrap;font-weight:600;font-size:.9rem; }
.hx-assignment-row__actions { display:flex;gap:.35rem;margin-top:.45rem;flex-wrap:wrap; }

/* ═══════════════════════════════════════════════════════════════════════
   UNIFIED TILE SYSTEM — replaces hx-material-tile / hx-action-tile /
   hx-teacher-action-btn across all 7 home pages.
   Old classes kept as-is for backward compat.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Base tile ── */
.hx-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    padding: .75rem;
    background: var(--hx-card-bg);
    border: 1px solid var(--hx-border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--hx-text);
    cursor: pointer;
    transition: transform var(--hx-duration-fast, .18s) var(--hx-spring, cubic-bezier(.34,1.56,.64,1)),
                box-shadow var(--hx-duration-fast, .18s) ease,
                border-color var(--hx-duration-fast, .18s) ease;
    min-height: 86px;
}
.hx-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--hx-primary);
    color: var(--hx-text);
    text-decoration: none;
}
.hx-tile:active { transform: scale(0.97); }

/* ── Icon circle ── */
.hx-tile__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--hx-surface);
    color: var(--hx-text-muted);
    transition: background .2s, color .2s;
}
.hx-tile__icon i { font-size: 1.1rem; line-height: 1; }

/* E3-Q2: Semantic icon colors — colored tint backgrounds by context */
.hx-tile__icon--blue   { background: var(--hx-primary-light); color: var(--hx-primary); }
.hx-tile__icon--green  { background: var(--hx-green-light);   color: var(--hx-green); }
.hx-tile__icon--yellow { background: var(--hx-yellow-light);  color: var(--hx-yellow); }
.hx-tile__icon--red    { background: var(--hx-red-light);     color: var(--hx-red); }
.hx-tile__label  { font-size: .82rem; font-weight: 700; line-height: 1.3; display: block; }
.hx-tile__sub    { font-size: .7rem;  color: var(--hx-text-muted); font-weight: 400; line-height: 1.3; display: block; }

/* ── Size variants ── */

/* --sm: 3-column, centered (heritage / parent practice picker) */
.hx-tile--sm {
    min-height: 72px;
    padding: .65rem .5rem;
    align-items: center;
    text-align: center;
}
.hx-tile--sm .hx-tile__icon { width: 1.8rem; height: 1.8rem; border-radius: 7px; }
.hx-tile--sm .hx-tile__icon i { font-size: 1rem; }

/* --md: 2-column, left-aligned (student homes) — default size */
/* (inherits base styles, no overrides needed) */

/* --lg: 2-column, left-aligned, roomier (teacher hero actions) */
.hx-tile--lg {
    min-height: 100px;
    padding: .85rem 1rem;
}
.hx-tile--lg .hx-tile__icon { width: 2.4rem; height: 2.4rem; border-radius: 9px; }
.hx-tile--lg .hx-tile__icon i { font-size: 1.3rem; }

/* ── Semantic variants ── */
.hx-tile--highlight {
    border-color: var(--hx-primary-border);
    background: var(--hx-primary-light);
}
.hx-tile--highlight:hover { border-color: var(--hx-primary); box-shadow: 0 4px 14px rgba(37,99,168,.12); }
.hx-tile--calm { background: var(--hx-card-bg); }
.hx-tile--calm:hover { transform: none; box-shadow: none; border-color: var(--hx-text-muted); }

/* ── E3-A: Primary action tile — full-width, horizontal, clear intent ── */
.hx-tile--primary {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: .85rem;
    padding: .95rem 1.1rem;
    min-height: 58px;
    background: linear-gradient(135deg, var(--hx-primary-light), color-mix(in srgb, var(--hx-primary) 6%, var(--hx-card-bg)));
    border: 1.5px solid var(--hx-primary-border);
    border-radius: 10px;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--hx-primary) 12%, transparent);
}
.hx-tile--primary .hx-tile__icon {
    width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--hx-primary) !important;
    color: #fff !important;
    flex-shrink: 0;
}
.hx-tile--primary .hx-tile__icon i { font-size: 1rem; }
.hx-tile--primary .hx-tile__text { flex: 1; min-width: 0; }
.hx-tile--primary .hx-tile__label { font-size: .95rem; font-weight: 700; }
.hx-tile--primary .hx-tile__sub   { font-size: .78rem; }
.hx-tile--primary::after {
    content: '›'; color: var(--hx-primary); font-size: 1.5rem;
    line-height: 1; flex-shrink: 0; margin-left: auto;
}
.hx-tile--primary:hover {
    background: color-mix(in srgb, var(--hx-primary) 14%, var(--hx-card-bg));
    border-color: var(--hx-primary); transform: none;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--hx-primary) 18%, transparent);
}

/* ── E3-A: Secondary tiles — no colored icon backgrounds ── */
.hx-tile--secondary .hx-tile__icon {
    background: var(--hx-bg) !important;
    color: var(--hx-text-faint) !important;
}
.hx-tile--secondary:hover .hx-tile__icon { color: var(--hx-primary) !important; }

/* ── Grid layouts ── */
.hx-tile-grid        { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; margin-top: .65rem; }
.hx-tile-grid--3col  { grid-template-columns: repeat(3, 1fr); }

/* ── Collapsible Zone C (details toggle) ── */
.hx-details-zone {
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius, 12px);
    background: var(--hx-card-bg);
    margin-bottom: 1rem;
    overflow: hidden;
}
.hx-details-zone > summary {
    padding: .65rem .85rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--hx-text-muted);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .4rem;
    user-select: none;
}
.hx-details-zone > summary::after {
    content: '›';
    margin-left: auto;
    font-size: 1rem;
    transition: transform .2s ease;
    display: inline-block;
}
.hx-details-zone[open] > summary::after { transform: rotate(90deg); }
.hx-details-zone > summary::-webkit-details-marker { display: none; }
.hx-details-zone__body { padding: .65rem .85rem .85rem; border-top: 1px solid var(--hx-border); }

/* ── Nav test-ready badge ── */
.nav-badge--ready {
    background: var(--hx-green, var(--hx-green));
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.nav-badge--new {
    background: var(--hx-primary, #4a90d9);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    animation: nav-badge-pulse 2s ease-in-out 3;
}

/* ── Nav review badge pulse ── */
.nav-badge--pulse {
    animation: nav-badge-pulse 2s ease-in-out infinite;
}

/* ── Bottom nav streak pill ── */
.hx-nav-streak {
    font-size: .78rem;
    font-weight: 700;
    padding: .2rem .5rem;
    border-radius: 20px;
    white-space: nowrap;
}
.hx-nav-streak.streak-low  { background:var(--hx-streak-low,var(--hx-green));  color:#fff; }
.hx-nav-streak.streak-mid  { background:var(--hx-streak-mid,#f59e0b);  color:#451a03; }
.hx-nav-streak.streak-high { background:var(--hx-streak-high,var(--hx-red)); color:#fff; }

/* ── E3-S1: Reading page headers ── */
.rd-page-header {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 1rem;
}
.rd-page-title {
    margin: 0; color: var(--hx-text); font-size: 1.15rem; font-weight: 700;
}

/* ── E3-S1: Reading content areas ── */
.rd-content {
    padding: 1rem;
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius);
    margin-bottom: 0.75rem;
    background: var(--hx-card-bg);
    box-shadow: var(--shadow-sm);
}
.rd-content--chinese {
    font-family: var(--hx-font-cjk);
    font-size: 1.4rem;
    line-height: 2.2;
    letter-spacing: 0.03em;
    color: var(--hx-text);
}
.rd-content--pinyin {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--hx-primary);
}
.rd-content--english {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--hx-text-muted);
}

/* ── E3-S1: Reading toolbar — two-row layout ── */
.rd-toolbar {
    display: flex; flex-direction: column; gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.6rem;
    background: var(--hx-surface);
    border-radius: var(--hx-radius);
}
.rd-toolbar__toggles {
    display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center;
}
.rd-toolbar__actions {
    display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center;
    padding-top: 0.35rem;
    border-top: 1px solid var(--hx-border);
}
.rd-toolbar__actions .hanzi-btn {
    color: var(--hx-text-muted);
    border-color: transparent;
    background: transparent;
}
.rd-toolbar__actions .hanzi-btn:hover {
    color: var(--hx-primary);
    border-color: var(--hx-primary-border);
    background: var(--hx-card-bg);
}

/* ── Reading Intelligence — char hover gloss (RI.1/RI.2) ── */
.rd-char {
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.1s;
}
.rd-char:hover { background: rgba(99,102,241,0.1); }
.rd-char.rd-highlight-active.rd-char-known    { border-bottom: 2px solid var(--hx-primary, #6366f1); padding-bottom: 1px; }
.rd-char.rd-highlight-active.rd-char-stretch  { border-bottom: 2px solid var(--hx-amber, #f59e0b); padding-bottom: 1px; }
.rd-char.rd-highlight-active.rd-char-challenge{ border-bottom: 2px solid var(--hx-red, var(--hx-red)); padding-bottom: 1px; }
.rd-char.rd-highlight-active.rd-char-unknown  { border-bottom: 2px dashed var(--hx-text-faint, #94a3b8); padding-bottom: 1px; }

/* Karaoke sentence highlight */
.hx-karaoke-active {
    background: rgba(2, 132, 199, 0.12);
    border-radius: 3px;
    transition: background 0.2s;
}

/* ═══════════════════════════════════════════════════════════════════
   E3-B: Skeleton loading — replaces spinning icon on all home pages
   ═══════════════════════════════════════════════════════════════════ */
@keyframes hx-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.hx-skeleton {
    background: linear-gradient(
        90deg,
        var(--hx-border) 0%,
        color-mix(in srgb, var(--hx-bg) 70%, var(--hx-card-bg)) 50%,
        var(--hx-border) 100%
    );
    background-size: 200% 100%;
    animation: hx-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--hx-radius);
}

/* ═══════════════════════════════════════════════════════════════════
   E3-D: Utility classes — replace recurring inline styles in JS
   ═══════════════════════════════════════════════════════════════════ */
.hx-text-xs    { font-size: var(--text-xs); }
.hx-text-sm    { font-size: var(--text-sm); }
.hx-c-muted    { color: var(--hx-text-muted); }
.hx-c-faint    { color: var(--hx-text-faint); }
.hx-c-primary  { color: var(--hx-primary); }
.hx-fw-600     { font-weight: 600; }
.hx-fw-700     { font-weight: 700; }
.hx-flex-row   { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.hx-flex-between { display: flex; justify-content: space-between; align-items: baseline; }

/* ═══════════════════════════════════════════════════════════════════
   E3-G: Quick-access chips — low-weight nav row below progress bar
   ═══════════════════════════════════════════════════════════════════ */
/* E3-Q4: Chip enhancement — surface bg, hover lift, spring transition */
.hx-chip {
    display: inline-flex;
    align-items: center;
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--hx-text-muted);
    background: var(--hx-surface);
    border: 1px solid var(--hx-border);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s, border-color .2s, transform .25s var(--hx-spring), box-shadow .2s;
}
.hx-chip:hover {
    color: var(--hx-primary); border-color: var(--hx-primary-border);
    transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
#quick-access  { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 .15rem; }

/* ── AI Action Cards (R1) ─────────────────────────────────────────── */
.hx-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.hx-action-card {
    background: var(--hx-bg); border: 1px solid var(--hx-border); border-radius: 8px;
    padding: 0.75rem; font-size: 0.9rem;
}
.hx-action-chinese { font-size: 1.3rem; font-weight: 600; margin-bottom: 0.25rem; }
.hx-action-char-large { font-size: 2rem; font-weight: 700; text-align: center; margin-bottom: 0.25rem; }
.hx-action-pinyin { color: var(--hx-text-muted); font-size: 0.85rem; }
.hx-action-english { color: var(--hx-text-muted); font-size: 0.85rem; margin-top: 0.15rem; }
.hx-action-definition { margin-top: 0.15rem; }
.hx-action-explanation { color: var(--hx-text-muted); margin-top: 0.35rem; font-size: 0.85rem; }
.hx-action-mnemonic { color: var(--hx-amber); font-size: 0.85rem; margin-top: 0.25rem; }
.hx-action-example { font-style: italic; color: var(--hx-text-muted); margin-top: 0.25rem; font-size: 0.85rem; }
.hx-action-pattern { font-weight: 600; font-size: 1.1rem; margin-bottom: 0.25rem; }
.hx-action-radical, .hx-action-components { color: var(--hx-text-muted); font-size: 0.85rem; margin-top: 0.15rem; }
.hx-action-tone { font-size: 0.85rem; margin-top: 0.15rem; }
.hx-action-mistake { color: var(--hx-red); font-size: 0.85rem; margin-top: 0.15rem; }
.hx-action-tip { color: var(--hx-green); font-size: 0.85rem; margin-top: 0.15rem; }
.hx-action-examples { margin: 0.35rem 0 0 1.2rem; padding: 0; font-size: 0.85rem; }
.hx-action-examples li { margin-bottom: 0.15rem; }
.hx-action-desc { color: var(--hx-text-muted); font-size: 0.85rem; margin-top: 0.15rem; }
.hx-action-question { font-weight: 500; margin-bottom: 0.5rem; }
.hx-action-options { display: flex; flex-direction: column; gap: 0.3rem; }
.hx-action-option {
    text-align: left; padding: 0.5rem 0.75rem; border: 1px solid var(--hx-border);
    border-radius: 6px; background: var(--hx-surface); cursor: pointer; transition: all 0.15s;
}
.hx-action-option:hover:not(:disabled) { border-color: var(--hx-primary); background: var(--hx-primary-bg); }
.hx-action-option.correct { border-color: var(--hx-green); background: rgba(34,197,94,0.1); }
.hx-action-option.wrong { border-color: var(--hx-red); background: rgba(239,68,68,0.1); }
.hx-action-option:disabled { cursor: default; opacity: 0.8; }
.hx-action-audio-btn { margin-left: 0.25rem; }
.hx-action-suggest-link {
    display: inline-flex; align-items: center; gap: 0.35rem;
    color: var(--hx-primary); font-weight: 500; text-decoration: none;
}
.hx-action-suggest-link:hover { text-decoration: underline; }
.hx-action-nav-link { color: var(--hx-primary); text-decoration: none; }
.hx-action-nav-link:hover { text-decoration: underline; }
.hx-action-celebrate {
    text-align: center; font-size: 1.1rem; font-weight: 500;
    padding: 1rem; background: linear-gradient(135deg, rgba(251,191,36,0.1), rgba(34,197,94,0.1));
    border-color: var(--hx-amber);
}
.hx-action-text { white-space: pre-wrap; }
/* Credits meter badge */
.hx-credits-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 10px;
    background: var(--hx-surface); border: 1px solid var(--hx-border);
}
.hx-credits-badge.low { color: var(--hx-amber); border-color: var(--hx-amber); }
.hx-credits-badge.depleted { color: var(--hx-red); border-color: var(--hx-red); }
/* ── Slash Command Autocomplete (R3-3) ────────────────────────── */
.hx-chat-autocomplete {
    position: absolute; bottom: 100%; left: 0; right: 0;
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius); box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    max-height: 200px; overflow-y: auto; z-index: 1060;
}
.hx-ac-item {
    display: flex; gap: 0.5rem; padding: 0.45rem 0.75rem; cursor: pointer;
    font-size: 0.82rem; align-items: center;
}
.hx-ac-item:hover, .hx-ac-item.active { background: var(--hx-surface); }
.hx-ac-cmd { font-weight: 600; color: var(--hx-primary); min-width: 5rem; }
.hx-ac-desc { color: var(--hx-text-muted); }
/* ── Sentence Analysis Panel (R4) ─────────────────────────────── */
.hx-analysis-overlay {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050;
    max-height: 60vh; overflow-y: auto;
    background: var(--hx-surface); border-top: 2px solid var(--hx-primary);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15); border-radius: 1rem 1rem 0 0;
    padding: 1rem 1.25rem 1.5rem; transform: translateY(100%);
    transition: transform 0.3s ease;
}
.hx-analysis-overlay.open { transform: translateY(0); }
.hx-analysis-close {
    position: absolute; top: 0.5rem; right: 0.75rem; background: none;
    border: none; font-size: 1.25rem; color: var(--hx-text-muted); cursor: pointer;
}
.hx-analysis-sentence {
    font-size: 1.3rem; font-weight: 600; margin-bottom: 0.25rem;
    color: var(--hx-text);
}
.hx-analysis-pinyin { font-size: 0.85rem; color: var(--hx-primary); margin-bottom: 0.15rem; }
.hx-analysis-translation { font-size: 0.85rem; color: var(--hx-text-muted); margin-bottom: 0.75rem; }
.hx-analysis-section { margin-bottom: 0.75rem; }
.hx-analysis-section-title {
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
    color: var(--hx-text-muted); margin-bottom: 0.35rem; letter-spacing: 0.03em;
}
.hx-analysis-grammar-item, .hx-analysis-vocab-item, .hx-analysis-char-item {
    background: var(--hx-bg); border: 1px solid var(--hx-border);
    border-radius: 0.5rem; padding: 0.5rem 0.65rem; margin-bottom: 0.35rem;
    font-size: 0.82rem;
}
.hx-analysis-grammar-pattern { font-weight: 600; color: var(--hx-primary); }
.hx-analysis-vocab-word { font-weight: 600; font-size: 1rem; }
.hx-analysis-vocab-pinyin { color: var(--hx-primary); margin-left: 0.35rem; }
.hx-analysis-vocab-def { color: var(--hx-text-muted); }
.hx-analysis-vocab-level {
    display: inline-block; font-size: 0.75rem; padding: 0.1rem 0.35rem;
    border-radius: 4px; background: var(--hx-primary); color: #fff;
    margin-left: 0.35rem; vertical-align: middle;
}
.hx-analysis-add-review {
    float: right; background: none; border: none; cursor: pointer;
    color: var(--hx-text-muted); font-size: 0.85rem; padding: 0; margin-left: 0.25rem;
}
.hx-analysis-add-review:hover { color: var(--hx-primary); }
.hx-analysis-cultural {
    font-size: 0.82rem; color: var(--hx-text-muted); font-style: italic;
    padding: 0.5rem; background: rgba(251,191,36,0.08); border-radius: 0.5rem;
}
.hx-sentence-tap { cursor: pointer; border-bottom: 1px dashed var(--hx-border); }

/* ── Mobile font-size minimums (WCAG: no text below 12px) ── */
@media (max-width: 480px) {
    .hanzi-btn.hx-classic-switch { font-size: 0.75rem !important; }
    .hx-nav-role-badge { font-size: 0.75rem; }
    .hx-sidebar-section { font-size: 0.75rem; }
    .nav-badge, .hx-bottom-link .nav-badge { font-size: 0.75rem !important; }
    .hx-progress-hero__coverage { font-size: 0.75rem; }
    .hx-all-levels__pct { font-size: 0.75rem; }
    .hx-sidebar-link, .hx-sidebar-link a, #hx-sidebar a, .hx-bottom-nav a { font-size: 0.75rem; }
}
.hx-sentence-tap:hover { background: rgba(59,130,246,0.08); border-radius: 2px; }

/* ── Mobile 375px fixes (E8-5C) ──────────────────────────────── */
@media (max-width: 400px) {
    .tr-mode-btn { min-width: auto !important; font-size: 0.85rem; }
    .prof-lesson-card-char { font-size: 3.5rem; }
    .prof-lesson-card-pinyin { font-size: 1rem; }
}

/* ── Onboarding Tour (Driver.js override) ───────────────────── */
.hx-tour-popover .driver-popover {
    background: var(--hx-card-bg) !important;
    border: 1px solid var(--hx-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
}
.hx-tour-popover .driver-popover-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--hx-text) !important;
}
.hx-tour-popover .driver-popover-description {
    font-size: 0.88rem !important;
    color: var(--hx-text-muted) !important;
    line-height: 1.5 !important;
}
.hx-tour-popover .driver-popover-progress-text {
    color: var(--hx-text-faint) !important;
}
.hx-tour-popover .driver-popover-next-btn,
.hx-tour-popover .driver-popover-prev-btn {
    background: var(--hx-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 0.82rem !important;
}
.hx-tour-popover .driver-popover-prev-btn {
    background: var(--hx-surface) !important;
    color: var(--hx-text-muted) !important;
}

/* ══════════════════════════════════════════════════════════════
   E23: Shared menu bar (Google Docs pattern for all skill pages)
   ══════════════════════════════════════════════════════════════ */
.hx-menu-wrap { position:relative; display:inline-block; }
.hx-menu-btn {
    border:none; background:none; padding:0.2rem 0.5rem; font-size:0.82rem; font-weight:500;
    color:var(--hx-text); cursor:pointer; border-radius:4px;
}
.hx-menu-btn:hover { background:var(--hx-border); }
.hx-menu-dropdown {
    position:absolute; top:100%; left:0; z-index:999; min-width:210px;
    background:var(--hx-card-bg); border:1px solid var(--hx-border); border-radius:8px;
    box-shadow:0 4px 16px rgba(0,0,0,0.15); padding:0.3rem 0; margin-top:0.15rem;
}
.hx-menu-subpanel {
    position:absolute; top:100%; left:220px; z-index:1000; width:320px; max-height:420px; overflow-y:auto;
    background:var(--hx-card-bg); border:1px solid var(--hx-border); border-radius:8px;
    box-shadow:0 4px 16px rgba(0,0,0,0.15); padding:0.75rem; margin-top:0.15rem;
}
.hx-menu-item {
    display:flex; align-items:center; gap:0.5rem; width:100%; border:none; background:none;
    padding:0.4rem 0.75rem; font-size:0.85rem; color:var(--hx-text); cursor:pointer; text-align:left;
}
.hx-menu-item:hover { background:var(--hx-primary); color:#fff; border-radius:4px; }
.hx-menu-item:hover .hx-menu-arrow { color:#fff; }
.hx-menu-arrow { margin-left:auto; font-size:0.6rem; color:var(--hx-text-muted); }
.hx-menu-divider { height:1px; background:var(--hx-border); margin:0.2rem 0.5rem; }
.hx-menu-bar {
    display:flex; align-items:center; gap:0.35rem; padding:0.25rem 0.75rem;
}
.hx-menu-badge {
    display:none; background:var(--hx-red,#ef4444); color:#fff; font-size:0.6rem;
    padding:0.1rem 0.3rem; border-radius:8px; margin-left:0.2rem; font-weight:700;
}

/* ══════════════════════════════════════════════════════════════════
   Reading Library Cards (shared between reading-library.jsp and reading.js inline)
   ══════════════════════════════════════════════════════════════════ */

.rl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
@media (max-width:575px) { .rl-grid { grid-template-columns:1fr; } }
.rl-card { background:var(--hx-card-bg); border:1px solid var(--hx-border); border-radius:var(--hx-radius);
    padding:1rem; display:flex; flex-direction:column; gap:0.5rem; min-height:160px; text-decoration:none; color:inherit;
    transition:box-shadow 0.15s, border-color 0.15s; border-left:4px solid var(--hx-border); }
.rl-card:hover { border-color:var(--hx-primary); box-shadow:0 2px 8px rgba(0,0,0,0.08); border-left-color:var(--hx-primary); }
.rl-card:has(.rl-hsk-1) { border-left-color:var(--hx-green-mid,#166534); }
.rl-card:has(.rl-hsk-2) { border-left-color:var(--hx-primary-mid,#1e40af); }
.rl-card:has(.rl-hsk-3) { border-left-color:var(--hx-yellow-mid,#854d0e); }
.rl-card:has(.rl-hsk-4) { border-left-color:#9d174d; }
.rl-card:has(.rl-hsk-5) { border-left-color:#5b21b6; }
.rl-card:has(.rl-hsk-6) { border-left-color:var(--hx-red-mid,#991b1b); }
.rl-card:has(.rl-hsk-7) { border-left-color:#92400e; }
.rl-card:has(.rl-hsk-8) { border-left-color:#075985; }
.rl-card:has(.rl-hsk-9) { border-left-color:#166534; }
.rl-card-title { font-size:0.97rem; font-weight:700; color:var(--hx-text); line-height:1.3; }
.rl-card-meta { display:flex; flex-wrap:wrap; gap:0.35rem; align-items:center; }
.rl-card-tags { display:flex; flex-wrap:wrap; gap:0.3rem; margin-top:0.1rem; }
.rl-tag { font-size:0.75rem; padding:0.1rem 0.45rem; border-radius:999px; background:var(--hx-bg);
    border:1px solid var(--hx-border); color:var(--hx-text-muted); }
.rl-card-actions { display:flex; gap:0.5rem; margin-top:auto; padding-top:0.5rem; flex-wrap:wrap; }
.rl-hsk-1 { background:var(--hx-green-light,#dcfce7);   color:var(--hx-green-mid,#166534); }
.rl-hsk-2 { background:var(--hx-primary-light,#dbeafe); color:var(--hx-primary-mid,#1e40af); }
.rl-hsk-3 { background:var(--hx-yellow-light,#fef9c3);  color:var(--hx-yellow-mid,#854d0e); }
.rl-hsk-4 { background:#fce7f3; color:#9d174d; }
.rl-hsk-5 { background:#ede9fe; color:#5b21b6; }
.rl-hsk-6 { background:var(--hx-red-light,#fee2e2);     color:var(--hx-red-mid,#991b1b); }
.rl-hsk-7 { background:#fef3c7; color:#92400e; }
.rl-hsk-8 { background:#e0f2fe; color:#075985; }
.rl-hsk-9 { background:#f0fdf4; color:#166534; }

/* Section header row — spans the full grid row, sits between tile groups */
.rl-section-header {
    grid-column: 1 / -1;
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 0.5rem 0 0.25rem;
}
.rl-section-header:first-child { padding-top: 0; }
.rl-section-title { font-size: 0.92rem; font-weight: 700; color: var(--hx-text); }
.rl-section-count { font-size: 0.75rem; color: var(--hx-text-muted); }

/* "+" New tile — Google Docs style, dashed border, centered plus sign */
.rl-card-new {
    border: 2px dashed var(--hx-border); background: transparent;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.25rem; cursor: pointer; text-decoration: none;
}
.rl-card-new:hover { border-color: var(--hx-primary); }
.rl-card-new-plus { font-size: 2rem; line-height: 1; color: var(--hx-text-muted); font-weight: 300; }
.rl-card-new:hover .rl-card-new-plus { color: var(--hx-primary); }
.rl-card-new-label { font-size: 0.82rem; color: var(--hx-text-muted); }
.rl-card-new:hover .rl-card-new-label { color: var(--hx-primary); }

/* ══════════════════════════════════════════════════════════════════
   Reading Audio Player Bar
   ══════════════════════════════════════════════════════════════════ */

.rd-audio-bar {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    max-width: 480px; margin: 0 auto;
    background: var(--hx-card-bg, #fff);
    border: 1px solid var(--hx-border); border-radius: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    animation: hx-dd-open 0.2s ease;
}
.rd-ab-btn {
    background: none; border: none; cursor: pointer;
    color: var(--hx-text); font-size: 1rem; padding: 0.15rem 0.3rem;
    border-radius: 50%; transition: background 0.15s, color 0.15s;
    display: flex; align-items: center; justify-content: center;
    min-width: 28px; min-height: 28px;
}
.rd-ab-btn:hover { background: var(--hx-border); }
.rd-ab-play {
    background: var(--hx-primary); color: #fff; font-size: 1.05rem;
    min-width: 32px; min-height: 32px;
}
.rd-ab-play:hover { background: var(--hx-primary-dark, #1e5a8a); color: #fff; }
.rd-ab-time {
    font-size: 0.68rem; color: var(--hx-text-muted);
    font-variant-numeric: tabular-nums; min-width: 2.2rem; text-align: center;
    user-select: none;
}
.rd-ab-track {
    flex: 1; height: 6px; background: var(--hx-border);
    border-radius: 3px; position: relative; cursor: pointer;
    min-width: 80px;
}
.rd-ab-progress {
    height: 100%; background: var(--hx-primary);
    border-radius: 3px; width: 0%; transition: width 0.1s linear;
    pointer-events: none;
}
.rd-ab-handle {
    position: absolute; top: 50%; width: 14px; height: 14px;
    background: var(--hx-primary); border: 2px solid #fff;
    border-radius: 50%; transform: translate(-50%, -50%);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: grab; left: 0%; transition: left 0.1s linear;
}
.rd-ab-handle:active { cursor: grabbing; transform: translate(-50%, -50%) scale(1.2); }
.rd-ab-track:hover .rd-ab-handle { transform: translate(-50%, -50%) scale(1.15); }
.rd-ab-speed {
    border: 1px solid var(--hx-border); border-radius: 4px;
    font-size: 0.68rem; padding: 0.1rem 0.2rem;
    background: var(--hx-bg); color: var(--hx-text);
    cursor: pointer;
}
[data-theme="dark"] .rd-ab-handle { border-color: var(--hx-card-bg); }
[data-theme="dark"] .rd-ab-play { box-shadow: 0 1px 4px rgba(0,0,0,0.4); }

/* ══════════════════════════════════════════════════════════════════
   UX Polish — Quick Wins
   ══════════════════════════════════════════════════════════════════ */

/* #2: Smooth menu dropdown animations — works with both style.display and hx-open toggling */
.hx-menu-wrap .hx-menu-dropdown.hx-open {
    display: block !important;
    animation: hx-dd-open 0.15s ease;
}
@keyframes hx-dd-open {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* #9: Dark mode shadow & border fixes */
[data-theme="dark"] .hx-card,
[data-theme="dark"] .word-card,
[data-theme="dark"] .cls-card,
[data-theme="dark"] .quiz-card {
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    border-color: var(--hx-border);
}
[data-theme="dark"] .hx-menu-dropdown {
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
[data-theme="dark"] .hx-sidebar {
    box-shadow: 2px 0 8px rgba(0,0,0,0.3);
}
[data-theme="dark"] .hx-toast {
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* #8: Empty state polish */
.hx-empty-state {
    text-align: center; padding: 3rem 1.5rem; color: var(--hx-text-muted);
}
.hx-empty-state i { font-size: 2.5rem; margin-bottom: 0.75rem; display: block; opacity: 0.4; }
.hx-empty-state p { margin: 0.5rem 0; line-height: 1.5; }
.hx-empty-state .hx-empty-cta {
    display: inline-block; margin-top: 1rem; padding: 0.5rem 1.2rem;
    background: var(--hx-primary); color: #fff; border-radius: 6px;
    text-decoration: none; font-size: 0.85rem; font-weight: 600;
    transition: background 0.15s;
}
.hx-empty-state .hx-empty-cta:hover { background: var(--hx-primary-dark, #1e5a8a); }

/* #5: Double-click prevention — disabled buttons look obviously disabled */
button[disabled], .hanzi-btn[disabled] {
    opacity: 0.5; cursor: not-allowed;
}

/* #13: Tablet layout (769px–1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    :root { --hx-sidebar-w: 160px; }
    .hx-sidebar { font-size: 0.82rem; }
    .hx-sidebar-link span { font-size: 0.82rem; }
    .hx-main { padding: 1rem; }
    .ai-features-grid { grid-template-columns: 1fr 1fr; }
    .td-overview-grid { grid-template-columns: 1fr 1fr; }
}

/* #1 + #10: Mobile touch targets + font sizes */
@media (max-width: 768px) {
    /* Enforce 44px touch targets on ALL interactive elements */
    .hanzi-btn, .unit-btn, .audio-btn, .hx-menu-btn, .hx-menu-item,
    select, .ws-print-btn, .hx-sidebar-link {
        min-height: 44px;
    }
    /* Readable font sizes (WCAG AA) */
    .hanzi-btn, .unit-btn, .audio-btn, .hx-menu-btn { font-size: 0.85rem; }
    select, input[type="text"], textarea { font-size: 0.9rem; }
    label { font-size: 0.85rem; }

    /* #4: Reading control bar — wrap on small screens */
    #rd-controls {
        flex-wrap: wrap !important;
        white-space: normal !important;
        gap: 0.25rem !important;
        padding: 0.4rem !important;
    }
    #rd-controls label { white-space: nowrap; }
    #rd-controls select { max-width: 90px; }
    #rd-controls .hanzi-btn { padding: 0.3rem 0.5rem; }

    /* Confirm dialog mobile sizing */
    .hx-confirm-overlay .hx-confirm-dialog {
        width: calc(100vw - 2rem); max-width: 360px;
    }
}

/* ── Prof Hanlexon Virtual Classroom ──────────────────────────── */

.prof-page {
    position: fixed;
    inset: 0;
    z-index: 800; /* below chat bubble (900) so help bubble is accessible */
    display: flex;
    flex-direction: column;
    background: var(--hx-bg);
    overflow: hidden;
}

/* Header — slim */
.prof-header {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 0.5rem;
    background: var(--hx-card-bg);
    border-bottom: 1px solid var(--hx-border);
    flex-shrink: 0;
}
.prof-header-btn {
    background: none; border: none; color: var(--hx-text);
    font-size: 1.1rem; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 6px;
}
.prof-header-btn:hover { background: var(--hx-hover); }
.prof-header-left {
    display: flex; align-items: center; gap: 0.4rem;
    font-weight: 600; font-size: 0.92rem; color: var(--hx-text);
}
.prof-header-msg {
    font-size: 0.72rem; color: var(--hx-text-muted);
    margin-left: 1rem;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.prof-header-msg .sys-error {
    color: var(--hx-danger, #dc3545);
    background: rgba(220,53,69,0.08);
    border-radius: 4px; padding: 0.1rem 0.4rem;
}
.prof-header-msg .sys-info {
    color: var(--hx-text-muted);
}

/* Three-column layout: Left (scenarios) | Center (board) | Right (chat, toggleable) */
.prof-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* Left panel — scenario selection */
.prof-left {
    width: 240px;
    min-width: 200px;
    border-right: 1px solid var(--hx-border);
    background: var(--hx-card-bg);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.prof-left-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

/* Center — the board */
.prof-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    overflow-y: auto;
    min-width: 0;
}

/* Right panel — chat. Height synced with board via JS. */
.prof-right {
    width: 280px;
    min-width: 220px;
    border-left: 1px solid var(--hx-border);
    background: var(--hx-card-bg);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-self: flex-start; /* don't stretch to full body — height set by JS */
    margin-top: 0.5rem; /* match center padding */
}
.prof-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid var(--hx-border);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--hx-text);
}
.prof-chat-header button {
    background: none; border: none; color: var(--hx-text-muted); cursor: pointer; font-size: 0.95rem;
}
.prof-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}
.prof-chat-msg {
    margin-bottom: 0.4rem;
    font-size: 0.82rem;
    line-height: 1.4;
}
.prof-chat-msg .chat-role {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--hx-text-muted);
}
.prof-chat-msg.from-prof .chat-text { color: var(--hx-text); }
.prof-chat-msg.from-user .chat-text { color: var(--hx-primary); }
.prof-chat-msg.from-system .chat-text { color: var(--hx-text-muted); font-style: italic; font-size: 0.78rem; }
.prof-chat-input {
    display: flex;
    gap: 0.3rem;
    padding: 0.4rem;
    border-top: 1px solid var(--hx-border);
}
.prof-chat-input input {
    flex: 1;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--hx-border);
    border-radius: 16px;
    background: var(--hx-bg);
    color: var(--hx-text);
    font-size: 0.82rem;
    outline: none;
}
.prof-chat-input input:focus { border-color: var(--hx-primary); }
.prof-chat-input button {
    width: 32px; height: 32px; border-radius: 50%;
    border: none; background: var(--hx-primary); color: #fff;
    font-size: 0.78rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

/* ═══ Blackboard video frame (resizable) ═══ */
.prof-video-frame {
    width: 100%;
    max-width: 640px;
    aspect-ratio: 16 / 9;
    resize: vertical;
    min-height: 200px;
    border: 5px solid #8B6914;
    border-image: linear-gradient(135deg, #a07828 0%, #6b5010 50%, #9a7420 100%) 1;
    /* border-radius not used — border-image overrides it (corners are sharp like a real board frame) */
    box-shadow: inset 0 0 40px rgba(0,0,0,0.35), 0 3px 10px rgba(0,0,0,0.2);
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: visible; /* controls moved outside — no need to clip */
    flex-shrink: 0;
    /* Default: classroom blackboard */
    background:
        radial-gradient(ellipse at 20% 30%, rgba(45,74,46,0.9), transparent 60%),
        radial-gradient(ellipse at 80% 70%, rgba(30,60,32,0.8), transparent 50%),
        linear-gradient(135deg, #2a4a2c 0%, #1a3320 30%, #223b24 50%, #1e3522 70%, #2d4a2e 100%);
}
/* Scene backgrounds — atmospheric CSS for each scenario theme.
   When real images are available, add: background-image: url('/images/scenes/xxx.jpg');
   The dark overlay layer ensures chalk text readability over any image. */

/* Shared dark overlay for all scenes with images */
.prof-video-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.15);
    pointer-events: none;
    z-index: 0;
}
.prof-video-frame > * { position: relative; z-index: 1; }

/* Default: classroom — green chalkboard (already set as main background) */

/* Restaurant — warm amber/red, lantern glow */
.prof-video-frame[data-scene="restaurant"] {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(180,80,20,0.3), transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(160,60,10,0.2), transparent 40%),
        radial-gradient(circle at 80% 15%, rgba(255,180,50,0.15), transparent 30%),
        linear-gradient(135deg, #3d1f0e 0%, #5c2e15 30%, #4a2511 60%, #3d1f0e 100%);
}

/* Airport — cool blue-gray, runway lights */
.prof-video-frame[data-scene="airport"] {
    background:
        radial-gradient(ellipse at 50% 90%, rgba(100,180,255,0.1), transparent 40%),
        radial-gradient(ellipse at 20% 30%, rgba(60,100,160,0.2), transparent 50%),
        linear-gradient(180deg, #0d1520 0%, #1a2a3a 30%, #243b50 60%, #1a2a3a 100%);
}

/* Hotel — warm purple/burgundy, elegant */
.prof-video-frame[data-scene="hotel"] {
    background:
        radial-gradient(ellipse at 40% 30%, rgba(120,60,120,0.25), transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(80,40,80,0.2), transparent 40%),
        linear-gradient(135deg, #2d1f3d 0%, #3d2a52 30%, #332345 60%, #2d1f3d 100%);
}

/* Market — warm ochre/orange, bustling */
.prof-video-frame[data-scene="market"] {
    background:
        radial-gradient(ellipse at 25% 25%, rgba(200,120,40,0.2), transparent 45%),
        radial-gradient(ellipse at 75% 75%, rgba(180,100,30,0.15), transparent 40%),
        radial-gradient(circle at 60% 20%, rgba(255,200,80,0.1), transparent 25%),
        linear-gradient(135deg, #3a2a1a 0%, #4d3820 30%, #3f2e18 60%, #3a2a1a 100%);
}

/* Park / outdoors — deep green with dappled light */
.prof-video-frame[data-scene="park"] {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(80,160,60,0.2), transparent 45%),
        radial-gradient(ellipse at 70% 70%, rgba(40,100,40,0.15), transparent 40%),
        radial-gradient(circle at 50% 10%, rgba(200,220,100,0.08), transparent 30%),
        linear-gradient(135deg, #1a3018 0%, #2a4a20 30%, #1e3a1a 60%, #1a3018 100%);
}

/* Hospital / clinic — cool teal, clinical */
.prof-video-frame[data-scene="hospital"] {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(60,160,160,0.15), transparent 50%),
        linear-gradient(135deg, #142828 0%, #1a3838 30%, #163030 60%, #142828 100%);
}

/* Office / work — slate blue, modern */
.prof-video-frame[data-scene="office"] {
    background:
        radial-gradient(ellipse at 40% 30%, rgba(80,100,140,0.2), transparent 50%),
        linear-gradient(135deg, #1a1e2e 0%, #252a3a 30%, #1e2230 60%, #1a1e2e 100%);
}

/* School — warm chalkboard with chalk dust */
.prof-video-frame[data-scene="school"] {
    background:
        radial-gradient(ellipse at 15% 85%, rgba(255,255,255,0.03), transparent 40%),
        radial-gradient(ellipse at 75% 20%, rgba(255,255,255,0.02), transparent 35%),
        linear-gradient(135deg, #2a4a2c 0%, #1a3320 30%, #223b24 60%, #2d4a2e 100%);
}

/* Home / family — warm brown, cozy */
.prof-video-frame[data-scene="home"] {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(180,120,60,0.2), transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(255,180,80,0.1), transparent 30%),
        linear-gradient(135deg, #2e2018 0%, #3d2a1a 30%, #352418 60%, #2e2018 100%);
}

/* Library — dark wood, scholarly */
.prof-video-frame[data-scene="library"] {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(140,100,50,0.15), transparent 50%),
        radial-gradient(ellipse at 30% 80%, rgba(100,70,30,0.1), transparent 40%),
        linear-gradient(135deg, #1e1810 0%, #2e2418 30%, #261e14 60%, #1e1810 100%);
}

/* Café / tea house — warm mocha */
.prof-video-frame[data-scene="cafe"] {
    background:
        radial-gradient(ellipse at 40% 25%, rgba(160,100,50,0.25), transparent 45%),
        radial-gradient(circle at 70% 70%, rgba(200,140,60,0.1), transparent 35%),
        linear-gradient(135deg, #2a1e14 0%, #3d2e1e 30%, #332618 60%, #2a1e14 100%);
}

/* Train / transit — dark steel blue */
.prof-video-frame[data-scene="transit"] {
    background:
        radial-gradient(ellipse at 50% 80%, rgba(80,120,180,0.12), transparent 40%),
        linear-gradient(135deg, #141a24 0%, #1e2a38 30%, #182230 60%, #141a24 100%);
}

/* Side avatars — fixed at edges of the board */
.prof-side-avatar {
    width: 14%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.3rem 0.2rem;
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 0.8rem;
}
.prof-avatar-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(240,230,208,0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem; color: #f0e6d0;
    transition: all 0.3s;
}
.prof-avatar-icon.speaking {
    box-shadow: 0 0 16px rgba(240,230,208,0.35);
    border-color: rgba(240,230,208,0.6);
}
.prof-avatar-label {
    font-size: 0.6rem; color: rgba(240,230,208,0.4); font-weight: 600;
}
/* Scene-specific Prof avatar backgrounds — swap to real images via:
   .prof-video-frame[data-scene="restaurant"] .prof-avatar-icon {
       background-image: url('/images/avatars/prof-restaurant.png');
       background-size: cover; font-size: 0;
   } */
.prof-video-frame[data-scene="restaurant"] .prof-avatar-icon { border-color: rgba(200,120,50,0.4); }
.prof-video-frame[data-scene="cafe"] .prof-avatar-icon { border-color: rgba(180,140,80,0.4); }
.prof-video-frame[data-scene="airport"] .prof-avatar-icon { border-color: rgba(100,160,220,0.4); }
.prof-video-frame[data-scene="transit"] .prof-avatar-icon { border-color: rgba(80,120,180,0.4); }
.prof-video-frame[data-scene="hotel"] .prof-avatar-icon { border-color: rgba(140,80,160,0.4); }
.prof-video-frame[data-scene="market"] .prof-avatar-icon { border-color: rgba(200,150,60,0.4); }
.prof-video-frame[data-scene="hospital"] .prof-avatar-icon { border-color: rgba(60,180,180,0.4); }
.prof-video-frame[data-scene="office"] .prof-avatar-icon { border-color: rgba(100,120,160,0.4); }
.prof-video-frame[data-scene="park"] .prof-avatar-icon { border-color: rgba(80,160,80,0.4); }
.prof-video-frame[data-scene="home"] .prof-avatar-icon { border-color: rgba(180,130,70,0.4); }
.prof-video-frame[data-scene="library"] .prof-avatar-icon { border-color: rgba(140,110,60,0.4); }
.prof-video-frame[data-scene="school"] .prof-avatar-icon { border-color: rgba(200,180,100,0.4); }
.prof-user-icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(180,210,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: rgba(180,210,255,0.6);
    transition: all 0.3s;
}
.prof-user-icon.active {
    border-color: rgba(100,200,255,0.6);
    box-shadow: 0 0 12px rgba(100,200,255,0.2);
    color: rgba(180,220,255,0.9);
}

/* Board chat line styles */
.prof-chat-line {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 0.88rem;
    line-height: 1.5;
    max-width: 75%;
    padding: 0.1rem 0;
}
/* Prof lines: warm cream, lean left (~15% indent) */
.prof-chat-line.from-prof {
    color: #f0e6d0;
    margin-left: 8%;
    margin-right: auto;
}
/* Student lines: soft cyan, lean right (~55% from left) */
.prof-chat-line.from-user {
    color: #a8d8ea;
    margin-left: 45%;
    margin-right: auto;
}
/* Interim STT — lighter, italic */
.prof-chat-line.from-user.interim {
    color: rgba(168,216,234,0.5);
    font-style: italic;
}
/* All lines visible — older lines slightly softer */
.prof-chat-line { opacity: 0.7; }
.prof-chat-line:last-child { opacity: 1; }
.prof-chat-line:nth-last-child(2) { opacity: 0.9; }
.prof-chat-line:nth-last-child(3) { opacity: 0.8; }

/* Sound wave animation — shared for both Prof and User */
.prof-soundwave {
    display: flex; gap: 2px; height: 14px; align-items: flex-end;
    opacity: 0; transition: opacity 0.2s;
}
.prof-soundwave.active { opacity: 1; }
.prof-soundwave span {
    width: 2.5px;
    border-radius: 1px;
    animation: none;
}
.prof-sw-left span { background: rgba(240,230,208,0.6); }
.prof-sw-right span { background: rgba(100,200,255,0.6); }
.prof-soundwave.active span {
    animation: prof-wave 0.6s ease-in-out infinite alternate;
}
.prof-soundwave span:nth-child(1) { height: 3px; animation-delay: 0s; }
.prof-soundwave span:nth-child(2) { height: 7px; animation-delay: 0.1s; }
.prof-soundwave span:nth-child(3) { height: 11px; animation-delay: 0.2s; }
.prof-soundwave span:nth-child(4) { height: 7px; animation-delay: 0.3s; }
.prof-soundwave span:nth-child(5) { height: 3px; animation-delay: 0.4s; }
@keyframes prof-wave {
    from { height: 3px; }
    to { height: 13px; }
}

/* Board center — holds teaching overlay and rolling chat */
.prof-board-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.2rem 0;
    min-width: 0;
    height: 100%; /* explicit height so flex children (board-chat) can fill it */
    overflow: hidden; /* board-chat handles its own scrolling */
}

/* Board chat — the actual scrollable conversation area */
.prof-board-chat {
    flex: 1 1 0;
    min-height: 0; /* allow flex shrink */
    overflow-y: auto;
    scrollbar-width: none;
    padding: 0.2rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.prof-board-chat::-webkit-scrollbar { display: none; }
/* Board title — scenario name or conversation theme at top of board center */
.prof-board-title {
    font-size: 0.72rem;
    color: rgba(240,230,208,0.35);
    font-family: var(--hx-font-base);
    text-align: center;
    padding: 0.1rem 0.3rem;
    letter-spacing: 0.5px;
}
.prof-board-title:empty { display: none; }

/* Teaching content — overlays the chat when Prof teaches (hidden by default during conversation) */
.prof-board-content {
    color: #f0e6d0;
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 1.2rem;
    line-height: 1.8;
    text-shadow: 0 0 4px rgba(240,230,208,0.1);
    padding: 0.3rem 0.5rem;
    background: rgba(30,50,30,0.85);
    border-radius: 6px;
    margin-bottom: 0.3rem;
}
.prof-board-content:empty { display: none; }
.prof-board-content .board-speech {
    font-size: 1.3rem;
    margin-bottom: 0.2rem;
}
.prof-board-content .board-teaching {
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-size: 1rem;
    line-height: 2;
}
.prof-board-content .board-teaching-note {
    font-size: 0.78rem;
    color: rgba(240,230,208,0.5);
    font-family: var(--hx-font-base);
    margin-top: 0.15rem;
}

/* Board controls — below the frame, centered */
.prof-board-controls {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.3rem 0;
    width: 100%;
    max-width: 640px;
}
.prof-bctrl {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--hx-border); background: var(--hx-card-bg);
    color: var(--hx-text-muted); font-size: 0.85rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.prof-bctrl:hover { background: var(--hx-hover); color: var(--hx-text); }
/* Mic button — same size as other controls, color indicates state */
.prof-bctrl-mic {
    width: 32px; height: 32px; font-size: 0.85rem;
    background: var(--hx-primary); color: #fff;
    border: 1px solid var(--hx-primary);
    position: relative;
}
.prof-bctrl-mic:hover { opacity: 0.9; }
.prof-bctrl-mic.recording {
    background: var(--hx-danger, #dc3545);
    border-color: var(--hx-danger, #dc3545);
    animation: prof-pulse 1.2s infinite;
    box-shadow: 0 0 12px rgba(220,53,69,0.4);
}
.prof-bctrl-mic.recording::after {
    content: 'Listening...';
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.58rem;
    color: var(--hx-danger, #dc3545);
    white-space: nowrap;
    font-family: var(--hx-font-base);
    font-weight: 600;
}
@keyframes prof-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,53,69,0.4); }
    50% { box-shadow: 0 0 0 8px rgba(220,53,69,0); }
}
.prof-bctrl-end { color: var(--hx-danger, #dc3545); border-color: var(--hx-danger, #dc3545); }
.prof-bctrl-end:hover { background: rgba(220,53,69,0.1); }

/* Status bar — below controls, outside board. Shows Prof status + errors. */
.prof-system-msg {
    width: 100%;
    max-width: 640px;
    text-align: center;
    font-size: 0.72rem;
    color: var(--hx-text-muted);
    padding: 0.1rem 0.5rem;
    min-height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.prof-status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    display: inline-block; flex-shrink: 0;
}
.prof-status-dot.online { background: #22c55e; box-shadow: 0 0 4px rgba(34,197,94,0.4); }
.prof-status-dot.standby { background: #eab308; box-shadow: 0 0 4px rgba(234,179,8,0.3); }
.prof-status-dot.offline { background: #ef4444; box-shadow: 0 0 4px rgba(239,68,68,0.3); }
.prof-system-msg .sys-error {
    color: var(--hx-danger, #dc3545);
    background: rgba(220,53,69,0.08);
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
}
.prof-system-msg .sys-info {
    color: var(--hx-text-muted);
}
.prof-system-msg .sys-text {
    color: var(--hx-text-muted);
    font-size: 0.68rem;
}

/* Subtitles — compact, below text bar */
.prof-subtitles {
    width: 100%; text-align: center; min-height: 0.8rem; padding: 0.35rem 0.5rem;
}
.prof-subtitles .sub-py { font-size: 0.78rem; color: var(--hx-primary); line-height: 1.6; }
.prof-subtitles .sub-zh { font-size: 0.92rem; color: var(--hx-text); font-family: var(--hx-font-cjk); line-height: 1.6; }
.prof-subtitles .sub-en { font-size: 0.72rem; color: var(--hx-text-muted); margin-top: 0.3rem; line-height: 1.5; }
/* Per-character aligned pinyin ↔ hanzi */
.prof-subtitles .sub-interlinear { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.2rem; margin-bottom: 0.2rem; }
.prof-subtitles .sub-pair { display: flex; flex-direction: column; align-items: center; min-width: 1.5rem; }
.prof-subtitles .sub-py-char { font-size: 0.7rem; color: var(--hx-primary); line-height: 1.3; white-space: nowrap; }
.prof-subtitles .sub-zh-char { font-size: 0.92rem; color: var(--hx-text); font-family: var(--hx-font-cjk); line-height: 1.4; }

/* Chips row */
.prof-chips-row {
    width: 100%;
    display: flex; align-items: center; gap: 0.35rem; min-height: 1rem;
    justify-content: center;
}
.prof-suggestion-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; }
.prof-chip {
    padding: 0.3rem 0.65rem;
    border: 1px solid rgba(240,230,208,0.4);
    border-radius: 18px;
    background: rgba(42,74,44,0.7);
    color: #f0e6d0;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    font-family: 'Ma Shan Zheng', cursive;
}
.prof-chip:hover { background: rgba(240,230,208,0.15); border-color: rgba(240,230,208,0.7); }

/* Landing */
#prof-landing { width: 100%; max-width: 780px; }
.prof-rec-card {
    display: block; width: 100%;
    padding: 0.65rem 0.9rem; margin-bottom: 0.4rem;
    border: 1px solid var(--hx-border); border-radius: 10px;
    background: var(--hx-card-bg); cursor: pointer;
    transition: all 0.15s; text-align: left;
}
.prof-rec-card:hover { border-color: var(--hx-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.prof-rec-card .rec-title { font-size: 0.9rem; font-weight: 600; color: var(--hx-text); }
.prof-rec-card .rec-desc { font-size: 0.78rem; color: var(--hx-text-muted); margin-top: 0.1rem; }
.prof-landing-links { margin-top: 0.4rem; text-align: center; }
.prof-landing-link { font-size: 0.82rem; color: var(--hx-primary); text-decoration: none; }
.prof-landing-link:hover { text-decoration: underline; }
.prof-custom-request { margin-top: 0.5rem; text-align: center; }
.prof-custom-input {
    width: 100%; max-width: 400px;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--hx-border); border-radius: 20px;
    background: var(--hx-card-bg); color: var(--hx-text);
    font-size: 0.82rem; text-align: center;
}
.prof-custom-input:focus { border-color: var(--hx-primary); outline: none; }

/* (old separate input-bar and controls removed — now integrated in board) */

/* (old transcript panel removed — replaced by right chat panel) */

/* More menu — positioned near the board */
.prof-more-menu {
    position: fixed; bottom: 40%; left: 50%; transform: translateX(-50%);
    background: var(--hx-card-bg); border: 1px solid var(--hx-border);
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    min-width: 220px; padding: 0.3rem 0; z-index: 20;
}
.prof-more-item {
    display: block; width: 100%; text-align: left;
    padding: 0.45rem 0.9rem; border: none; background: none;
    color: var(--hx-text); font-size: 0.82rem; cursor: pointer;
}
.prof-more-item:hover { background: var(--hx-hover); }
.prof-more-item i { margin-right: 0.35rem; color: var(--hx-text-muted); }
.prof-more-divider { height: 1px; background: var(--hx-border); margin: 0.2rem 0; }

/* Voice picker — inline button + popover */
.prof-voice-wrap { position: relative; }
.prof-bctrl-voice {
    width: auto; height: 32px; border-radius: 16px;
    padding: 0 0.6rem; gap: 0.3rem; font-size: 0.72rem;
    display: flex; align-items: center;
}
.prof-bctrl-voice span { font-weight: 600; }
.prof-voice-popover {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--hx-card-bg);
    border: 1px solid var(--hx-border);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    min-width: 180px;
    padding: 0.3rem 0;
    z-index: 20;
}
.prof-voice-option {
    display: flex; align-items: center; gap: 0.4rem;
    width: 100%; padding: 0.4rem 0.75rem;
    border: none; background: none;
    color: var(--hx-text); font-size: 0.8rem; cursor: pointer;
    text-align: left;
}
.prof-voice-option:hover { background: var(--hx-hover); }
.prof-voice-option.active { font-weight: 600; color: var(--hx-primary); }
.prof-voice-option .voice-check {
    margin-left: auto; color: var(--hx-primary); font-size: 0.85rem;
}
.prof-voice-option .voice-gender {
    font-size: 0.75rem; color: var(--hx-text-muted);
}

/* Scenario tile grid */
.prof-scenario-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0.6rem 0.5rem; border: 2px solid; border-radius: 10px;
    cursor: pointer; transition: all 0.15s; text-align: center; min-height: 90px;
}
.prof-scenario-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.prof-scenario-tile .tile-icon { font-size: 1.2rem; color: rgba(255,255,255,0.7); margin-bottom: 0.25rem; }
.prof-scenario-tile .tile-title {
    font-size: 0.88rem; font-weight: 600; color: #f0e6d0;
    font-family: var(--hx-font-cjk); line-height: 1.3;
}
.prof-scenario-tile .tile-en { font-size: 0.7rem; color: rgba(240,230,208,0.5); margin-top: 0.15rem; }
.prof-scenario-tile .tile-vocab {
    font-size: 0.68rem; color: rgba(240,230,208,0.4); margin-top: 0.2rem;
    font-family: var(--hx-font-cjk);
}

/* Filter buttons */
.prof-filter-btn {
    padding: 0.2rem 0.55rem; border: 1px solid var(--hx-border); border-radius: 14px;
    background: var(--hx-card-bg); color: var(--hx-text-muted);
    font-size: 0.75rem; cursor: pointer; transition: all 0.15s;
}
.prof-filter-btn:hover { border-color: var(--hx-primary); color: var(--hx-text); }
.prof-filter-btn.active {
    background: var(--hx-primary); color: #fff; border-color: var(--hx-primary);
}

/* Mobile — stack vertically */
@media (max-width: 768px) {
    .prof-body { flex-direction: column; }
    .prof-left { width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid var(--hx-border); max-height: 30vh; }
    .prof-right { width: 100%; min-width: 0; border-left: none; border-top: 1px solid var(--hx-border); max-height: 40vh; }
    .prof-video-frame { aspect-ratio: 4 / 3; }
    .prof-avatar-icon { width: 40px; height: 40px; font-size: 1.2rem; }
    .prof-user-icon { width: 36px; height: 36px; font-size: 1rem; }
    .prof-board-content { font-size: 0.95rem; }
    .prof-scenario-tile { min-height: 65px; padding: 0.4rem; }
}