:root[data-theme="light"] {
            --bg: #f1f8f5;
            --panel: #ffffff;
            --panel-2: #f7fcfa;
            --pill: #e8f3ef;
            --border: #d0e6de;
            --text: #15352e;
            --text-sub: #5f776f;
            --accent: #238b78;
            --accent-2: #16806e;
            --accent-soft: rgba(35, 139, 120, 0.10);
            --orange: #ff8c00;
            --green: #10b981;
            --red: #f43f5e;
            --gold: #f59e0b;
            --nav-active: linear-gradient(135deg, #62c9ad, #238b78);
            --nav-active-text: #ffffff;
            --shadow: 0 20px 40px -15px rgba(35, 139, 120, 0.16);
            --grad: linear-gradient(135deg, #62c9ad 0%, #238b78 100%);
            --grad-orange: linear-gradient(90deg, #ff8c00, #ff5e00);
            --grad-track: #dcefe8;
            --canvas-grid: rgba(35, 139, 120, 0.16);
            --stroke-color: #238b78;
        }

        :root[data-theme="dark"] {
            --bg: #030712;
            --panel: #0b0f19;
            --panel-2: #111827;
            --pill: #1f2937;
            --border: rgba(99, 102, 241, 0.2);
            --text: #f9fafb;
            --text-sub: #9ca3af;
            --accent: #a855f7;
            --accent-2: #ec4899;
            --accent-soft: rgba(168, 85, 247, 0.15);
            --orange: #fb923c;
            --green: #34d399;
            --red: #f87171;
            --gold: #fbbf24;
            --nav-active: linear-gradient(135deg, #a855f7, #ec4899);
            --nav-active-text: #ffffff;
            --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
            --grad: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
            --grad-orange: linear-gradient(90deg, #38bdf8, #a855f7);
            --grad-track: #1f2937;
            --canvas-grid: rgba(56, 189, 248, 0.25);
            --stroke-color: #38bdf8;
        }

        html { scroll-behavior: smooth; }
        ::selection { background: var(--accent); color: #fff; }

        * { 
            box-sizing: border-box; 
            transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                        color 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                        border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                        box-shadow 0.25s ease; 
        }

        body {
            background-color: var(--bg);
            background-image:
                radial-gradient(circle at 10% 10%, var(--accent-soft) 0%, transparent 45%),
                radial-gradient(circle at 90% 90%, var(--accent-soft) 0%, transparent 45%);
            color: var(--text);
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            margin: 0; padding: 24px;
            min-height: 100vh;
        }

        .app-shell {
            max-width: 1180px; margin: 0 auto;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 32px;
            box-shadow: var(--shadow);
            padding: 24px 30px 36px;
            min-height: calc(100vh - 48px);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            position: relative;
        }

        .top-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
        .logo { font-size: 23px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 10px; }
        .logo-accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

        .nav-pills { display: flex; gap: 6px; background: var(--pill); padding: 5px; border-radius: 999px; border: 1px solid var(--border); overflow-x: auto; max-width: 100%; box-shadow: inset 0 2px 4px rgba(0,0,0,0.03); }
        .nav-pills::-webkit-scrollbar { display: none; }
        .menu-btn { border: none; background: transparent; color: var(--text-sub); padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; }
        .menu-btn:hover { color: var(--text); }
        .menu-btn.active { background: var(--nav-active); color: var(--nav-active-text); box-shadow: 0 6px 16px rgba(124, 58, 237, 0.25); transform: translateY(-1px); }

        .top-actions { display: flex; align-items: center; gap: 12px; }
        .icon-circle-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .icon-circle-btn:hover { border-color: var(--accent); transform: scale(1.05); }
        .stat-chip { background: var(--panel-2); border: 1px solid var(--border); padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; color: var(--text); }
        .stat-chip.xp { color: var(--gold); border-color: rgba(245, 158, 11, 0.3); }
        .life-chip { gap: 6px; border-color: rgba(244, 63, 94, 0.3); }
        .life-chip small { color: var(--text-sub); font-size: 9px; font-weight: 700; white-space: nowrap; }
        .life-plus-btn { width: 20px; height: 20px; min-width: 20px; padding: 0; margin-left: 1px; border: 0; border-radius: 50%; background: var(--red); color: #fff; font-size: 14px; line-height: 20px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; font-family: inherit; }
        .life-plus-btn:hover { transform: scale(1.15); }
        
        .life-shop-modal { max-width: 560px; width: calc(100% - 32px); }
        .life-shop-options { display: grid; gap: 12px; margin-top: 18px; }
        .life-shop-option { width: 100%; text-align: left; background: var(--panel-2); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-family: inherit; }
        .life-shop-option:hover { border-color: var(--accent); transform: translateY(-2px); }
        .life-shop-option-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
        .life-shop-icon { font-size: 24px; flex: 0 0 auto; }
        .life-shop-title { font-size: 14px; font-weight: 800; margin-bottom: 3px; }
        .life-shop-desc { font-size: 12px; color: var(--text-sub); line-height: 1.35; }
        .life-shop-price { font-size: 16px; font-weight: 800; white-space: nowrap; color: var(--accent); }

        .page-head { margin-bottom: 22px; }
        .screen-title { font-size: 15px; font-weight: 600; color: var(--text-sub); margin: 0; }

        .home-grid { display: grid; grid-template-columns: 1fr 310px; gap: 22px; align-items: start; }
        @media (max-width: 900px) { .home-grid { grid-template-columns: 1fr; } }

        .welcome-title { font-size: 30px; font-weight: 700; color: var(--text-sub); margin: 4px 0 20px; }
        .welcome-title b { color: var(--text); font-weight: 800; }

        .level-pill-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
        .level-pill { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; font-family: inherit; }
        .level-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
        .level-pill:nth-child(2) .dot { background: var(--orange); }
        .level-pill:nth-child(3) .dot { background: var(--green); }
        .level-pill:nth-child(4) .dot { background: var(--red); }
        .level-pill:nth-child(5) .dot { background: var(--gold); }
        .level-pill:nth-child(6) .dot { background: var(--accent-2); }
        .level-pill.active { background: var(--nav-active); color: var(--nav-active-text); border-color: transparent; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
        .level-pill.errors-btn { border-color: var(--red); color: var(--red); }
        .level-pill.errors-btn.active { background: var(--red); color: #fff; }

        .home-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
        .two-col { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
        @media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }

        .card, .neo-card, .hsk30-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 24px; padding: 24px; box-shadow: var(--shadow); }
        .card:hover, .neo-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
        .card-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 0 0 16px; }

        .selfstudy-card { background: var(--grad); border-radius: 20px; padding: 22px; color: #fff; cursor: pointer; position: relative; overflow: hidden; box-shadow: 0 12px 28px rgba(124, 58, 237, 0.3); }
        .selfstudy-card:hover { transform: translateY(-2px); }
        .badge-new { display: inline-block; background: rgba(255,255,255,0.25); backdrop-filter: blur(4px); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; text-transform: uppercase; }
        .selfstudy-card h4 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
        .selfstudy-card p { margin: 0 0 16px; font-size: 13px; opacity: 0.9; }
        .progress-track { width: 100%; height: 7px; background: rgba(255,255,255,0.25); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
        .progress-fill { height: 100%; background: #ffffff; border-radius: 4px; transition: width 0.4s ease; }
        .progress-row { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; opacity: 0.95; }

        .course-list-item { display: flex; align-items: center; justify-content: space-between; padding: 13px 4px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; }
        .course-list-item:last-child { border-bottom: none; }
        .course-list-item:hover { color: var(--accent); padding-left: 4px; }

        .level-big { font-size: 56px; font-weight: 800; color: var(--text); line-height: 1; margin: 6px 0 4px; }
        .level-sub { font-size: 12px; color: var(--text-sub); margin-bottom: 20px; }
        .mini-stat { margin-bottom: 14px; }
        .mini-stat .row { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
        .mini-stat .row span:last-child { color: var(--text-sub); }
        .mini-track { width: 100%; height: 12px; background: var(--grad-track); border-radius: 999px; overflow: hidden; }
        .mini-track.orange .mini-fill { background: var(--grad-orange); }
        .mini-track.green .mini-fill { background: linear-gradient(90deg, #34d399, #16a34a); }
        .mini-track.purple .mini-fill { background: var(--grad); }
        .mini-fill { height: 100%; border-radius: 999px; width: 0%; transition: width 0.5s ease; }

        .teacher-table { width: 100%; border-collapse: collapse; }
        .teacher-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-sub); padding: 6px 10px; border-bottom: 1px solid var(--border); }
        .teacher-table td { padding: 13px 10px; font-size: 14px; color: var(--text); border-bottom: 1px solid var(--border); }
        .teacher-table tr:last-child td { border-bottom: none; }
        .teacher-table tbody tr { cursor: pointer; }
        .teacher-table tbody tr:hover td { color: var(--accent); }
        .type-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); }
        .pct-badge { font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 6px; background: var(--grad-orange); color: #fff; margin-left: 8px; }
        .mentor-cell { display: flex; align-items: center; gap: 10px; }
        .mentor-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }

        .side-col { display: flex; flex-direction: column; gap: 18px; }
        .activity-num { font-size: 46px; font-weight: 800; color: var(--text); line-height: 1; }
        .activity-label { font-size: 13px; color: var(--text-sub); font-weight: 600; }
        .week-dots { display: flex; gap: 8px; margin: 14px 0 18px; }
        .week-dot { width: 34px; height: 34px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
        .week-dot.off { background: var(--panel); border: 1px dashed var(--border); color: var(--text-sub); }

        .profile-mini { border-top: 1px solid var(--border); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
        .profile-mini-row { display: flex; align-items: center; gap: 10px; }
        .profile-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff; flex-shrink: 0; }
        .profile-mini-row h4 { margin: 0; font-size: 14px; color: var(--text); }
        .profile-mini-row p { margin: 0; font-size: 12px; color: var(--text-sub); }
        .level-info-row { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--text-sub); }
        .xp-bar-track { width: 100%; height: 6px; background: var(--grad-track); border-radius: 3px; overflow: hidden; }
        .xp-bar-fill { width: 0%; height: 100%; background: var(--grad); border-radius: 3px; transition: width 0.4s ease; }

        .task-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
        .task-row:last-of-type { border-bottom: none; }
        .task-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
        .task-icon.c1 { background: var(--accent-soft); }
        .task-icon.c2 { background: #fff3e0; }
        .task-icon.c3 { background: #e8f9ee; }
        :root[data-theme="dark"] .task-icon.c2 { background: rgba(255,159,28,0.15); }
        :root[data-theme="dark"] .task-icon.c3 { background: rgba(22,163,74,0.15); }
        .task-info { flex: 1; }
        .task-info small { display: block; font-size: 11px; color: var(--text-sub); }
        .task-info span { font-size: 14px; font-weight: 600; color: var(--text); }
        .task-min { font-size: 13px; font-weight: 600; color: var(--text-sub); }

        .btn-black { width: 100%; background: var(--nav-active); color: var(--nav-active-text); border: none; padding: 14px; border-radius: 14px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; margin-top: 14px; }
        .btn-black:hover { opacity: 0.92; transform: translateY(-1px); }

        .btn-primary { background: var(--grad); color: #fff; border: none; padding: 15px 28px; border-radius: 16px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 10px 25px rgba(124, 58, 237, 0.3); }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(124, 58, 237, 0.4); }
        .btn-all-list { background: var(--nav-active); color: var(--nav-active-text); border: none; padding: 11px 18px; border-radius: 12px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 8px; }
        .nav-btn { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 11px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
        .nav-btn:hover { border-color: var(--accent); }

        .neo-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 24px; padding: 30px; max-width: 760px; margin: 0 auto; box-shadow: var(--shadow); }
        .card-header-panel { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; flex-wrap: wrap; gap: 15px; }
        .structure-box { background: var(--accent-soft); border-left: 4px solid var(--accent); padding: 14px 18px; border-radius: 0 12px 12px 0; font-family: monospace; font-size: 15px; color: var(--accent); margin-bottom: 20px; font-weight: 600; }
        .example-item { background: var(--panel); border: 1px solid var(--border); padding: 15px; border-radius: 14px; margin-bottom: 10px; }
        .nav-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; border-top: 1px solid var(--border); padding-top: 18px; gap: 10px; flex-wrap: wrap; }

        .timer-bar-container { width: 100%; height: 8px; background: var(--grad-track); border-radius: 4px; overflow: hidden; margin-bottom: 20px; }
        .timer-bar-fill { width: 100%; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(1); }
        .cn-char { font-size: 84px; font-weight: 700; color: var(--text); margin: 8px 0; text-align: center; }
        .cn-pinyin { font-size: 23px; color: var(--accent); font-weight: 600; margin-bottom: 8px; text-align: center; }
        .cn-meaning { font-size: 17px; color: var(--text-sub); margin-bottom: 24px; text-align: center; }
        .options-stack { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
        .option-item { background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 15px 20px; border-radius: 14px; text-align: left; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; }
        .option-item:hover { border-color: var(--accent); transform: translateX(2px); }
        .option-item.correct { background: var(--green) !important; color: #fff !important; border-color: var(--green); }
        .option-item.wrong { background: var(--red) !important; color: #fff !important; border-color: var(--red); }

        .canvas-wrapper-outer { width: 100%; overflow-x: auto; padding: 10px 0; display: flex; justify-content: center; }
        .canvas-container { position: relative; height: 220px; margin: 0 auto 15px; background: var(--panel); border: 2px solid var(--accent); border-radius: 20px; box-shadow: 0 12px 30px rgba(124, 58, 237, 0.12); touch-action: none; flex-shrink: 0; transition: width 0.3s ease; }
        .mizige-grid-wrapper { position: absolute; top:0; right:0; bottom:0; left:0; display: flex; pointer-events: none; }
        .mizige-cell { width: 220px; height: 220px; border-right: 1px dashed var(--canvas-grid); flex-shrink: 0; }
        .mizige-cell:last-child { border-right: none; }
        .mizige-svg { width: 100%; height: 100%; stroke: var(--canvas-grid); stroke-width: 1.5; stroke-dasharray: 4, 4; }
        .canvas-bg-text-wrapper { position: absolute; top:0; right:0; bottom:0; left:0; display: flex; pointer-events: none; }
        .canvas-bg-char { width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; font-size: 130px; font-weight: 800; color: var(--accent); opacity: 0.15; user-select: none; flex-shrink: 0; transition: opacity 0.2s ease; }
        .canvas-bg-text-wrapper.hidden-guide .canvas-bg-char { opacity: 0 !important; }
        #writingCanvas { position: absolute; top:0; right:0; bottom:0; left:0; cursor: crosshair; z-index: 2; }
        .canvas-tools { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
        .canvas-tool-btn { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
        .canvas-tool-btn:hover { border-color: var(--accent); }
        .canvas-tool-btn.primary-check { background: var(--grad); color: #ffffff; border-color: transparent; font-weight: 700; box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3); }

        .flashcard-wrapper { perspective: 1000px; width: 100%; max-width: 480px; height: 310px; margin: 0 auto 20px; cursor: pointer; }
        .flashcard-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d; }
        .flashcard-wrapper.flipped .flashcard-inner { transform: rotateY(180deg); }
        .flashcard-front, .flashcard-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 24px; border: 2px solid var(--border); background: var(--panel); box-shadow: 0 12px 30px rgba(0,0,0,0.06); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; overflow: hidden; }
        .flashcard-back { transform: rotateY(180deg); background: var(--panel-2); border-color: var(--accent); }
        .flashcard-hint { font-size: 12px; color: var(--text-sub); margin-top: 10px; font-weight: 600; }
        .flashcard-speaker-btn { background: var(--accent-soft); color: var(--accent); border: none; width: 48px; height: 48px; border-radius: 50%; font-size: 22px; cursor: pointer; margin-top: 10px; display: flex; align-items: center; justify-content: center; }
        .flashcard-speaker-btn:hover { transform: scale(1.08); }
        .flashcard-actions { display: flex; justify-content: center; gap: 15px; margin-top: 15px; }
        .btn-card-action { padding: 12px 24px; border-radius: 14px; font-size: 14px; font-weight: 700; cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
        .btn-card-repeat { background: #fee2e2; color: var(--red); }
        .btn-card-know { background: #dcfce7; color: var(--green); }
        :root[data-theme="dark"] .btn-card-repeat { background: rgba(239,68,68,0.2); }
        :root[data-theme="dark"] .btn-card-know { background: rgba(22,163,74,0.2); }

        .image-mode-subnav { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; background: var(--panel); padding: 6px; border-radius: 999px; border: 1px solid var(--border); width: fit-content; margin-left: auto; margin-right: auto; }
        .image-sub-btn { border: none; background: transparent; color: var(--text-sub); padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
        .image-sub-btn.active { background: var(--accent); color: #fff; }

        .image-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
        .image-option-card { background: var(--panel); border: 2px solid var(--border); border-radius: 16px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; height: 140px; }
        .image-option-card:hover { border-color: var(--accent); }
        .image-option-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
        .image-option-card.correct { border-color: var(--green) !important; background: rgba(22, 163, 74, 0.15); }
        .image-option-card.wrong { border-color: var(--red) !important; background: rgba(239, 68, 68, 0.15); }

        .image-question-box { width: 100%; max-width: 320px; height: 200px; margin: 0 auto 20px; border-radius: 20px; overflow: hidden; border: 2px solid var(--border); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
        .image-question-box img { width: 100%; height: 100%; object-fit: cover; }

        .modal-overlay { display: none; position: fixed; top:0; right:0; bottom:0; left:0; background: rgba(15,15,25,0.5); backdrop-filter: blur(8px); z-index: 1000; justify-content: center; align-items: center; padding: 20px; }
        .modal-overlay.open { display: flex; }
        .modal-card { background: var(--panel); border: 1px solid var(--border); width: 100%; max-width: 650px; max-height: 85vh; border-radius: 24px; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow); }
        .modal-header { padding: 20px 25px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
        .modal-search-box { padding: 15px 25px; border-bottom: 1px solid var(--border); background: var(--panel-2); }
        .modal-search-input { width: 100%; background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 12px 16px; border-radius: 12px; font-size: 15px; outline: none; font-family: inherit; }
        .modal-topics-list { overflow-y: auto; padding: 20px 25px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
        .modal-topic-btn { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); text-align: left; padding: 14px 18px; border-radius: 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: inherit; }

        .rate-btn { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; }
        .rate-btn.active { background: var(--accent); color: #ffffff; border-color: var(--accent); }

        .hsk-system-switcher { display: flex; gap: 6px; background: var(--pill); border: 1px solid var(--border); padding: 5px; border-radius: 999px; width: fit-content; margin-bottom: 16px; }
        .hsk-system-btn { border: 0; background: transparent; color: var(--text-sub); padding: 9px 18px; border-radius: 999px; font: 600 13px inherit; cursor: pointer; }
        .hsk-system-btn.active { background: var(--nav-active); color: var(--nav-active-text); }
        .hsk30-panel { display: none; }
        .hsk30-panel.active { display: block; }
        .hsk30-levels { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin-bottom: 18px; }
        .hsk30-level-btn.high { grid-column: span 1; }
        .hsk30-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 22px; padding: 22px; }
        .hsk30-card-head { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 18px; }
        .hsk30-title { margin: 0 0 5px; font-size: 21px; color: var(--text); }
        .hsk30-subtitle { margin: 0; color: var(--text-sub); font-size: 13px; line-height: 1.5; }
        .hsk30-badge { background: var(--accent-soft); color: var(--accent); padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
        .hsk30-content { display: grid; gap: 10px; }
        .hsk30-item { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
        .hsk30-item-main { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
        .hsk30-char { font-size: 28px; font-weight: 800; color: var(--text); }
        .hsk30-pinyin { color: var(--accent); font-weight: 700; }
        .hsk30-meaning { color: var(--text-sub); }
        .hsk30-empty { text-align: center; color: var(--text-sub); padding: 35px 15px; }

        .hidden { display: none !important; }

        .section-heading-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
        .section-subtitle { margin: 4px 0 0; color: var(--text-sub); font-size: 13px; }
        .exam-home-btn { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; margin-top: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); cursor: pointer; font-weight: 700; }
        .exam-home-btn:hover { border-color: var(--text-sub); }
        .exam-badge, .league-week-badge { background: var(--accent-soft); color: var(--accent); padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
        .exam-level-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
        .exam-level-card { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 14px; padding: 16px 10px; cursor: pointer; text-align: left; font-family: inherit; }
        .exam-level-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
        .exam-level-card b, .exam-level-card span { display: block; }
        .exam-level-card span { color: var(--text-sub); font-size: 12px; margin-top: 4px; }
        .exam-actions { margin-top: 18px; padding: 18px; border: 1px solid var(--border); border-radius: 16px; display: flex; align-items: center; justify-content: space-between; gap: 15px; background: var(--panel); }
        .exam-actions p { margin: 5px 0 0; color: var(--text-sub); font-size: 13px; }
        .league-level-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
        .league-level { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-family: inherit; font-weight: 700; }
        .league-level.active { background: var(--text); color: var(--bg); }
        .league-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 18px; }
        .league-summary > div { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 15px; }
        .league-kicker { display: block; color: var(--text-sub); font-size: 12px; margin-bottom: 5px; }
        .league-summary strong { font-size: 22px; }
        .league-table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 16px; }
        .league-table { width: 100%; border-collapse: collapse; }
        .league-table th, .league-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; }
        .league-table th { color: var(--text-sub); font-size: 12px; }
        .league-table tr.me { background: var(--accent-soft); font-weight: 800; }
        .activity-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
        .activity-heading .card-title { margin: 0; }
        .league-mini-btn { width: 30px; height: 30px; border: 1px solid var(--border); background: var(--panel); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; padding: 0; transition: transform .15s ease, background .15s ease; }
        .league-mini-btn:hover { transform: scale(1.08); background: var(--accent-soft); }
        .league-note { color: var(--text-sub); font-size: 12px; margin-top: 12px; }

        .path-entry { border-color: var(--accent); background: var(--accent-soft); }
        .path-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 20px; align-items: start; }
        .path-main { min-height: 620px; }
        .path-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
        .path-head h2 { margin: 5px 0 6px; font-size: 28px; color: var(--text); }
        .path-head p, .path-side p { margin: 0; color: var(--text-sub); line-height: 1.55; }
        .path-kicker { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
        .path-total-progress { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
        .path-total-progress strong { color: var(--accent); font-size: 26px; }
        .path-total-progress span { color: var(--text-sub); font-size: 11px; }
        .path-progress-track { height: 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin: 18px 0 28px; }
        .path-progress-fill { width: 0; height: 100%; background: var(--grad); transition: width .3s ease; }
        .learning-path { max-width: 620px; margin: 0 auto; }
        .path-loading, .path-empty { color: var(--text-sub); text-align: center; padding: 50px 10px; }
        .path-unit { margin-bottom: 34px; }
        .path-unit-header { background: var(--panel-2); border: 1px solid var(--border); padding: 16px 18px; border-radius: 18px; margin-bottom: 18px; }
        .path-unit-header span { color: var(--accent); font-size: 11px; font-weight: 800; }
        .path-unit-header h3 { margin: 4px 0; font-size: 18px; color: var(--text); }
        .path-unit-header p { margin: 0; color: var(--text-sub); font-size: 12px; }
        .path-node-row { display: flex; margin: 13px 0; position: relative; }
        .path-node-row:nth-child(3n+2) { justify-content: center; }
        .path-node-row:nth-child(3n) { justify-content: flex-end; }
        .path-node { width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--accent); color: white; cursor: pointer; box-shadow: 0 7px 0 color-mix(in srgb,var(--accent) 72%,black),0 12px 24px rgba(0,0,0,.14); font: 800 24px inherit; position: relative; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; }
        .path-node:hover:not(:disabled) { transform: scale(1.08) translateY(-3px); }
        .path-node.completed { background: #22c55e; box-shadow: 0 7px 0 #15803d,0 12px 24px rgba(0,0,0,.12); }
        .path-node.locked { background: var(--panel-2); color: var(--text-sub); border: 2px solid var(--border); box-shadow: 0 6px 0 var(--border); cursor: not-allowed; }
        .path-node-label { position: absolute; left: 50%; transform: translateX(-50%); top: 84px; color: var(--text-sub); font-size: 10px; width: 125px; text-align: center; font-weight: 700; }
        .path-node-score { position: absolute; right: -6px; top: -5px; background: var(--panel); color: #22c55e; border: 1px solid var(--border); border-radius: 999px; padding: 2px 6px; font-size: 10px; }
        .path-side { position: sticky; top: 18px; }
        .path-side h3 { margin-top: 0; }
        .path-legend { display: grid; gap: 9px; margin: 20px 0; color: var(--text); font-size: 13px; }
        .path-side .btn-primary { width: 100%; }
        .path-lesson-overlay { position: fixed; top:0; right:0; bottom:0; left:0; z-index: 1100; background: rgba(15,15,25,.68); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 18px; }
        .path-lesson-card { background: var(--panel); color: var(--text); width: min(680px,100%); min-height: 480px; max-height: 92vh; overflow: auto; border-radius: 26px; border: 1px solid var(--border); box-shadow: var(--shadow); padding: 24px; }
        .path-lesson-top { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; }
        .path-close { border: 0; background: var(--panel-2); color: var(--text); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
        .path-lesson-progress { height: 10px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
        .path-lesson-progress div { height: 100%; width: 0; background: var(--grad); transition: width .25s ease; }
        #pathLessonCounter { font-size: 12px; font-weight: 800; color: var(--text-sub); }
        .path-question { text-align: center; padding: 38px 10px 12px; }
        .path-question-type { color: var(--accent); font-size: 12px; font-weight: 800; text-transform: uppercase; }
        .path-question h3 { font-size: 22px; margin: 10px 0; }
        .path-question-char { font-size: 64px; font-weight: 800; line-height: 1.2; }
        .path-question-pinyin { color: var(--accent); font-size: 18px; margin-top: 5px; }
        .path-audio-btn { width: 82px; height: 82px; border-radius: 50%; border: 0; background: var(--grad); color: white; font-size: 34px; cursor: pointer; margin: 14px auto; }
        .path-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 25px; }
        .path-option { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 14px; padding: 15px; cursor: pointer; font: 700 14px inherit; min-height: 54px; }
        .path-option:hover { border-color: var(--accent); }
        .path-option.correct { background: #dcfce7; border-color: #22c55e; color: #166534; }
        .path-option.wrong { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
        .path-result { text-align: center; padding: 54px 20px 20px; }
        .path-result-icon { font-size: 64px; }
        .path-result h2 { margin: 12px 0 5px; }
        .path-result-score { font-size: 32px; color: var(--accent); font-weight: 800; margin: 16px 0; }
        .path-result-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--text-sub); }

        @media (max-width: 850px) {
            .path-layout { grid-template-columns: 1fr; }
            .path-side { position: static; }
            .path-options { grid-template-columns: 1fr; }
            .path-head { flex-direction: column; }
            .path-total-progress { align-items: flex-start; }
        }

        @media (max-width: 700px) {
            .exam-level-grid { grid-template-columns: repeat(2,1fr); }
            .league-summary { grid-template-columns: 1fr; }
            .exam-actions { flex-direction: column; align-items: stretch; }
        }

        @media (max-width: 640px) {
            body { padding: 12px; }
            .app-shell { padding: 16px; border-radius: 24px; }
            .neo-card { padding: 22px; }
            .flashcard-wrapper { height: 280px; }
            .image-options-grid { grid-template-columns: 1fr 1fr; }
            .image-option-card { height: 110px; }
        }

/* ========================================================================== */
/* HSK AI PREP — NAVY / NEON VISUAL LAYER                                     */
/* Keeps the existing DOM, IDs and JavaScript contracts intact.               */
/* ========================================================================== */

:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #020b1d;
    --panel: rgba(3, 15, 37, .97);
    --panel-2: rgba(7, 24, 52, .94);
    --pill: rgba(4, 18, 43, .92);
    --text: #f7f9ff;
    --text-sub: #aebcdf;
    --border: rgba(58, 137, 223, .42);
    --accent: #9b5cff;
    --accent-2: #00ddff;
    --accent-soft: rgba(145, 76, 255, .16);
    --orange: #ff7c52;
    --green: #19ebcc;
    --red: #ff4fb5;
    --gold: #ffc947;
    --grad: linear-gradient(105deg, #7a43ff 0%, #b945ff 48%, #ff4fb5 100%);
    --grad-orange: linear-gradient(90deg, #ff9f43, #ff4f9a);
    --grad-track: rgba(34, 65, 118, .6);
    --nav-active: linear-gradient(105deg, #7541ff, #c342ff 58%, #ff4eae);
    --nav-active-text: #fff;
    --shadow: 0 18px 50px rgba(0, 0, 0, .42), inset 0 1px rgba(255,255,255,.025);
    --canvas-grid: rgba(95, 154, 238, .3);
}

* { box-sizing: border-box; }

body {
    padding: 10px;
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 15% 5%, rgba(36, 58, 157, .21), transparent 30%),
        radial-gradient(ellipse at 80% 15%, rgba(127, 38, 177, .13), transparent 27%),
        linear-gradient(145deg, #020817 0%, #031026 45%, #020a18 100%);
    color: var(--text);
    font-size: 14px;
}

body::before {
    content: "";
    position: fixed;
    top:0; right:0; bottom:0; left:0;
    pointer-events: none;
    opacity: .18;
    background-image: linear-gradient(rgba(55,145,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(55,145,255,.04) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, #000, transparent 75%);
}

.app-shell {
    width: min(1480px, calc(100vw - 20px));
    max-width: none;
    min-height: calc(100vh - 20px);
    margin: 0 auto;
    padding: 0 18px 18px;
    overflow: hidden;
    border: 1px solid rgba(52, 145, 236, .75);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(2,14,34,.98), rgba(3,17,40,.98));
    box-shadow: 0 0 0 1px rgba(0,234,255,.04), 0 24px 80px rgba(0,0,0,.56);
}

.top-bar {
    min-height: 60px;
    margin: 0 -18px 14px;
    padding: 8px 18px;
    flex-wrap: nowrap;
    border-bottom: 1px solid rgba(45, 124, 207, .28);
    background: rgba(2, 12, 30, .9);
    box-shadow: 0 6px 22px rgba(0,0,0,.25);
}

.logo { min-width: 170px; gap: 4px; font-size: 20px; letter-spacing: -.5px; }
.logo-accent { background: linear-gradient(180deg, #fb7cff, #a453ff); -webkit-background-clip: text; background-clip: text; }

.nav-pills {
    max-width: none;
    margin: 0 auto;
    padding: 3px;
    gap: 2px;
    border-color: rgba(43, 112, 197, .2);
    border-radius: 9px;
    background: rgba(3, 17, 39, .58);
    box-shadow: none;
}

.menu-btn {
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 7px;
    color: #b9c7e9;
    font-size: 11px;
    font-weight: 650;
}
.menu-btn:hover { color: #fff; background: rgba(45,91,166,.28); }
.menu-btn.active { background: var(--nav-active); box-shadow: 0 0 16px rgba(187,62,255,.52), inset 0 1px rgba(255,255,255,.35); }

.top-actions { gap: 8px; }
.top-rating-btn{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 10px;border:1px solid rgba(42,159,135,.45);border-radius:999px;color:#baf4df;background:#071a37;font:700 12px inherit;cursor:pointer;transition:transform .15s ease,background .15s ease}.top-rating-btn span{font-size:15px;line-height:1}.top-rating-btn:hover{transform:translateY(-1px);background:#0b2a45}
.icon-circle-btn { width: 34px; height: 34px; border-color: rgba(57,137,223,.52); background: #071a37; font-size: 14px; }
.stat-chip { min-height: 34px; padding: 7px 12px; border-color: rgba(48,125,210,.42); background: #071a37; font-size: 12px; }
.stat-chip.xp { color: #ffcf43; }
.life-plus-btn { background: var(--grad); }

.page-head { display: none; }
.screen-view { animation: neoScreenIn .24s ease both; }
@keyframes neoScreenIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.home-grid { grid-template-columns: minmax(0, 1fr) 310px; gap: 14px; }
.home-main, .side-col { gap: 12px; }
.welcome-title { margin: 4px 0 3px; color: #fff; font-size: 27px; line-height: 1.08; }
.welcome-title::after { content: "\AКаждый день — шаг ближе к твоей цели!"; white-space: pre; color: #a9badf; font-size: 12px; font-weight: 500; line-height: 2.2; }
.hsk-system-switcher { margin: 0 0 2px; padding: 3px; border-radius: 9px; }
.hsk-system-btn { padding: 7px 15px; border-radius: 7px; }
.level-pill-row { gap: 7px; margin-bottom: 4px; }
.level-pill { padding: 8px 13px; border-radius: 9px; background: #071a39; border-color: rgba(53,128,215,.35); font-size: 12px; }
.level-pill.active { box-shadow: 0 0 15px rgba(174,65,255,.38); }
.two-col { grid-template-columns: 1.35fr .65fr; gap: 12px; }

.card, .neo-card, .hsk30-card {
    padding: 16px;
    border-color: rgba(44, 125, 211, .38);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(5,23,52,.97), rgba(3,17,39,.97));
    box-shadow: inset 0 1px rgba(255,255,255,.025), 0 12px 34px rgba(0,0,0,.22);
}
.card:hover, .neo-card:hover { border-color: rgba(54, 164, 241, .7); }
.card-title { margin-bottom: 12px; font-size: 15px; }

.selfstudy-card {
    min-height: 180px;
    padding: 16px 46% 16px 16px;
    border: 1px solid rgba(183,91,255,.55);
    border-radius: 11px;
    background:
        linear-gradient(100deg, rgba(72,35,175,.98) 0%, rgba(100,40,190,.88) 46%, rgba(4,20,46,.08) 72%),
        url('../assets/aimi-neon.webp') right 2px bottom -44px / auto 238px no-repeat,
        linear-gradient(130deg, #172b71, #0b1838);
    box-shadow: inset 0 1px rgba(255,255,255,.18), 0 0 24px rgba(133,51,255,.24);
}
.selfstudy-card h4 { font-size: 19px; }
.selfstudy-card p { line-height: 1.5; }
.badge-new { padding: 3px 8px; }
.progress-track { height: 7px; background: rgba(2,14,39,.7); }
.progress-fill { background: linear-gradient(90deg, #00e8ff, #b1faff); box-shadow: 0 0 10px #00dfff; }
.course-list-item { margin-top: 6px; padding: 10px 12px; border: 1px solid rgba(47,119,205,.28); border-radius: 9px; background: rgba(7,27,60,.66); font-size: 12px; }
.course-list-item:hover { padding-left: 14px; background: rgba(19,47,91,.8); }
.level-big { color: #fff; text-shadow: 0 0 20px rgba(123,91,255,.5); }
.mini-track { height: 8px; }

.teacher-table { border-collapse: separate; border-spacing: 0 6px; }
.teacher-table thead { display: none; }
.teacher-table tbody tr { background: rgba(8,30,66,.75); }
.teacher-table td { padding: 10px; border: solid rgba(52,126,210,.22); border-width: 1px 0; font-size: 12px; }
.teacher-table td:first-child { border-left-width: 1px; border-radius: 9px 0 0 9px; }
.teacher-table td:last-child { border-right-width: 1px; border-radius: 0 9px 9px 0; }

.exam-home-btn { margin: 0; padding: 11px 14px; color: #fff; border-color: rgba(167,74,255,.55); background: linear-gradient(105deg, rgba(105,55,240,.8), rgba(240,61,177,.65)); }
.activity-num { color: #fff; font-size: 38px; }
.week-dot { width: 31px; height: 31px; border-radius: 8px; background: rgba(124,70,255,.18); }
.profile-avatar { background: url('../assets/aimi-neon.webp') center 9% / 175% auto no-repeat, #091d42; color: transparent; border: 1px solid #4bcfff; }
.task-row { padding: 8px 0; }
.task-icon { border-radius: 8px; }
.btn-black, .btn-primary, .btn-all-list { background: var(--grad); color: #fff; box-shadow: 0 0 18px rgba(185,63,255,.28); }

.neo-card { max-width: 920px; border-radius: 13px; }
#screenLessons .neo-card { position: relative; max-width: 980px; }
#screenLessons .neo-card::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 72px;
    width: 190px;
    height: 210px;
    pointer-events: none;
    background: url('../assets/aimi-neon.webp') center top / contain no-repeat;
    filter: drop-shadow(0 0 16px rgba(0,209,255,.25));
}
#screenLessons #quizCardContent { margin-left: 205px; min-height: 325px; }
.timer-bar-container { height: 7px; background: #122a58; }
.timer-bar-fill { background: linear-gradient(90deg, #00dff7, #53efff); box-shadow: 0 0 12px #00dff7; }
.cn-char { font-size: 72px; }
.cn-pinyin { color: #d7ddff; }
.option-item, .path-option {
    padding: 13px 16px;
    border-color: rgba(47,123,209,.3);
    border-radius: 9px;
    background: #0a2249;
}
.option-item:hover, .path-option:hover { border-color: #8d72ff; background: #102d5c; }

.structure-box { background: rgba(125,70,255,.13); border-color: #a55cff; color: #d9c5ff; }
.example-item, .flashcard-front, .flashcard-back { background: #071c3e; border-color: rgba(61,140,226,.38); }
.flashcard-front, .flashcard-back { box-shadow: 0 20px 46px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.035); }
.flashcard-back { border-color: #9c58ff; }
.flashcard-speaker-btn { background: rgba(178,69,255,.2); color: #ff63d0; }
.nav-btn { border-color: rgba(54,133,220,.37); border-radius: 9px; background: #091e42; }

.modal-overlay { background: rgba(0, 5, 17, .76); }
.modal-card { border-color: rgba(58,146,238,.6); border-radius: 14px; background: #04132e; }
.modal-search-input { background: #071c3d; }
.modal-topic-btn { background: #081f43; }

.exam-page-card, .league-page-card { max-width: 980px; margin: 0 auto; }
.exam-level-grid { gap: 8px; }
.exam-level-card { border-radius: 9px; background: #081f43; }
.exam-level-card.active { background: var(--grad); color: #fff; box-shadow: 0 0 16px rgba(171,67,255,.35); }
.exam-level-card.active span { color: rgba(255,255,255,.82); }
.exam-actions { border-radius: 10px; background: #071c3e; }
.exam-actions .btn-black { width: auto; min-width: 175px; margin: 0; }

#screenProfile .neo-card { position: relative; min-height: 490px; padding-left: 250px; }
#screenProfile .neo-card::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 60px;
    width: 205px;
    height: 390px;
    border-right: 1px solid rgba(53,129,217,.25);
    background: url('../assets/aimi-neon.webp') center top / 190px auto no-repeat;
    filter: drop-shadow(0 0 18px rgba(0,220,255,.2));
}

.path-layout { grid-template-columns: minmax(0,1fr) 280px; gap: 12px; }
.path-main {
    position: relative;
    min-height: 780px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(2,13,33,.2), rgba(2,10,26,.5)),
        url('../assets/hsk-path-night.webp') center / cover no-repeat;
}
.path-main::after { content: ""; position: absolute; top:0; right:0; bottom:0; left:0; pointer-events: none; background: linear-gradient(180deg, rgba(1,11,30,.18), transparent 25%, rgba(1,9,24,.25)); }
.path-head, .path-progress-track, .learning-path { position: relative; z-index: 1; }
.path-head { padding: 4px 5px 0; text-shadow: 0 2px 8px #000; }
.path-unit-header { backdrop-filter: blur(10px); background: rgba(3,17,40,.78); }
.path-node { width: 82px; height: 82px; background: linear-gradient(145deg,#9e70ff,#473485); border: 7px solid rgba(203,192,255,.38); box-shadow: 0 8px 0 #29214f, 0 0 24px rgba(112,86,255,.45); }
.path-node.completed { background: linear-gradient(145deg,#24edcf,#168c9f); }
.path-node.locked { background: linear-gradient(145deg,#696b96,#323759); }
.path-node-label { padding: 4px 7px; border-radius: 6px; background: rgba(1,10,27,.82); color: #e5eaff; }
.path-side { border-radius: 12px; }

.path-lesson-card { border-color: rgba(61,147,238,.56); border-radius: 14px; background: #04142f; }
.path-lesson-top>div:nth-child(2){min-width:0}.path-lesson-top>div:nth-child(2)>strong{display:block;margin-bottom:7px;color:var(--text);font-size:15px}.path-unit-intro{padding:24px 4px 8px}.path-unit-intro-copy{padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(145deg,var(--panel-2),var(--panel));}.path-unit-intro-copy h2{margin:7px 0 6px;font-size:24px;color:var(--text)}.path-unit-intro-copy p{margin:0;color:var(--text-sub);line-height:1.5;font-size:13px}.path-task-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:16px 0 20px}.path-task-row{display:flex;align-items:center;gap:10px;min-height:58px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2)}.path-task-row.is-done{border-color:rgba(42,159,135,.55);background:rgba(42,159,135,.12)}.path-task-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:10px;background:var(--grad);font-size:16px}.path-task-row b{display:block;color:var(--text);font-size:12px}.path-task-row small{display:block;margin-top:4px;color:var(--text-sub);font-size:10px}.path-start-unit{width:100%;justify-content:center}
:root[data-theme="light"] .path-lesson-card{background:#e5f4ec;border-color:#9bceb9}.path-lesson-card .path-question-type{color:var(--accent)}
@media(max-width:600px){.path-task-list{grid-template-columns:1fr}.path-unit-intro-copy h2{font-size:20px}}
/* Выполнение этапа — самостоятельный полноэкранный раздел, а не модальное окно поверх карты */
.path-lesson-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1100;display:block;min-height:100vh;overflow-y:auto;padding:0;background:var(--bg);backdrop-filter:none}
.path-lesson-card{box-sizing:border-box;width:100%;min-height:0;max-height:none;overflow:visible;border:0;border-radius:0;background:var(--bg);box-shadow:none;padding:28px max(18px,calc((100vw - 1080px)/2)) 28px}
.path-lesson-overlay{top:0;right:0;bottom:0;left:0;width:100%;height:100vh;min-height:100vh;overflow-y:auto}
body:has(#pathLessonOverlay:not(.hidden)){overflow:hidden}body.path-overlay-open{overflow:hidden}
.path-lesson-top{max-width:900px;margin:0 auto 18px;padding-bottom:14px;border-bottom:1px solid var(--border);grid-template-columns:38px 1fr auto}
.path-lesson-top>div:nth-child(2)>strong{font-size:17px}
.path-lesson-meta{display:flex;align-items:center;gap:10px;white-space:nowrap}.path-lesson-meta b{padding:7px 10px;border:1px solid var(--accent);border-radius:999px;color:var(--accent);background:var(--accent-soft);font-size:11px}
#pathLessonBody{max-width:900px;margin:0 auto}
.path-question{max-width:760px;margin:0 auto;padding:42px 18px 18px}
.path-unit-intro{max-width:900px;margin:0 auto;padding-top:22px}
.path-close{width:38px;height:38px;border-radius:12px}
:root[data-theme="light"] .path-lesson-overlay,:root[data-theme="light"] .path-lesson-card{background:#d3ebdf}
:root[data-theme="light"] #pathLessonBody{background:#d3ebdf}
:root[data-theme="light"] .path-unit-intro-copy,:root[data-theme="light"] .path-task-row,:root[data-theme="light"] .path-word-card,:root[data-theme="light"] .path-training-options .path-option{background:#a8d3bf;border-color:#82bda4;color:#164b3e}
:root[data-theme="light"] .path-training-progress{background:#c4e0d3}
:root[data-theme="light"] .path-grammar-pattern{background:#dcefe6;border-color:#a8d2c0;color:#1d6e5a}
:root[data-theme="light"] .path-grammar-examples span{background:#d5ebdf;color:#285c4e}
:root[data-theme="light"] .path-lesson-card{position:relative;isolation:isolate}
:root[data-theme="light"] .path-lesson-card:after{display:none}
:root[data-theme="light"] .path-lesson-top,:root[data-theme="light"] #pathLessonBody{position:relative;z-index:1}
:root[data-theme="light"] .path-question{max-width:700px;margin-left:max(0px,calc((100% - 900px)/2));margin-right:220px}
:root[data-theme="light"] .path-option{border:2px solid #6fb69e;background:#d7eee3;color:#164b3e;box-shadow:0 3px 0 rgba(42,159,135,.18);font-weight:800}
:root[data-theme="light"] .path-option:hover{border-color:#258c73;background:#c5e6d5;color:#123f35}
:root[data-theme="light"] .path-option.correct{background:#b8e3ca;border-color:#23966f;color:#145b43}
:root[data-theme="light"] .path-option.wrong{background:#f5d5d5;border-color:#d15e67;color:#8c2833}
:root[data-theme="light"] .path-lesson-meta b{border-color:#66b397;color:#1b7d67;background:#d4eee2}
@media(max-width:760px){:root[data-theme="light"] .path-lesson-card:after{right:8px;top:76px;width:110px;height:150px;opacity:.55}:root[data-theme="light"] .path-question{margin-right:0;padding-top:190px}}

/* Задания Пути HSK используют ту же композицию, что и экран тренировки */
.path-training-intro{position:relative;height:195px;margin:0 0 8px;overflow:visible}
.path-training-aimi{position:absolute;left:0;top:-4px;width:250px;height:205px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 0 15px rgba(42,159,135,.28))}
.path-training-speech{position:absolute;left:255px;top:14px;display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--text)}
.path-training-speech b{font-size:13px;color:var(--text)}
.path-training-speech span{font-size:11px;line-height:1.45;color:var(--text-sub)}
.path-training-streak{display:none}
.path-training-progress{position:absolute;left:255px;right:0;top:150px;height:7px;border-radius:7px;background:var(--grad-track);overflow:hidden}
.path-training-progress span{display:block;height:100%;border-radius:inherit;background:var(--accent);transition:width 1s linear}
.path-training-count{position:absolute;left:255px;top:173px;color:var(--accent);font-size:11px}
.path-training-grid{display:grid;grid-template-columns:41% 59%;gap:8px;min-height:260px}
.path-word-card{display:flex;align-items:center;flex-direction:column;justify-content:flex-start;min-height:244px;padding:34px 8px 58px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2);text-align:center}
.path-word-card .path-question-type{margin-bottom:10px}
.path-word-card .path-question-char{font-size:62px;line-height:1;color:var(--text)}
.path-word-card .path-question-pinyin{margin-top:14px;color:var(--text-sub);font-size:13px}
.path-word-card .path-word-audio{margin-top:54px;border:0;background:transparent;color:var(--accent);font-size:22px;cursor:pointer}
.path-training-options{padding-top:0}
.path-training-options .path-options{display:grid;grid-template-columns:1fr;gap:8px;counter-reset:path-option}
.path-training-options .path-option{position:relative;min-height:49px;padding:11px 12px 11px 50px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2);color:var(--text);font-size:12px;font-weight:700;text-align:left;cursor:pointer}
.path-training-options .path-option:before{content:counter(path-option,upper-alpha);counter-increment:path-option;position:absolute;left:10px;top:10px;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px}
.path-training-options .path-option:hover{border-color:var(--accent);background:var(--accent-soft)}
:root[data-theme="light"] .path-training-aimi{filter:drop-shadow(0 0 15px rgba(42,159,135,.28))}
:root[data-theme="dark"] .path-training-aimi{filter:drop-shadow(0 0 15px rgba(0,208,255,.25))}
@media(max-width:560px){.path-training-intro{height:98px}.path-training-aimi{width:100px;height:92px}.path-training-speech{left:102px;top:7px;font-size:8px}.path-training-speech b{font-size:9px}.path-training-speech span{font-size:8px}.path-training-streak{top:6px;font-size:7px;padding:6px}.path-training-progress{left:132px;top:73px;height:5px}.path-training-count{left:102px;top:80px;font-size:8px}.path-training-grid{gap:6px;min-height:0}.path-word-card{min-height:96px;padding:15px 4px 36px}.path-word-card .path-question-char{font-size:34px}.path-word-card .path-question-pinyin{margin-top:6px;font-size:9px}.path-word-card .path-word-audio{margin-top:12px;font-size:12px}.path-training-options .path-option{min-height:23px;padding:4px 5px 4px 28px;font-size:8px}.path-training-options .path-option:before{left:4px;top:3px;width:18px;height:18px;font-size:8px}}

::-webkit-scrollbar-thumb { background: linear-gradient(#6b55de, #d044d7); }

@media (max-width: 1050px) {
    .top-bar { flex-wrap: wrap; }
    .logo { min-width: auto; }
    .nav-pills { order: 3; width: 100%; justify-content: center; }
    .home-grid { grid-template-columns: 1fr 270px; }
}

@media (max-width: 850px) {
    body { padding: 0; }
    .app-shell { width: 100%; min-height: 100vh; border-radius: 0; border-width: 0; padding: 0 12px 18px; }
    .top-bar { margin: 0 -12px 12px; padding: 8px 12px; }
    .home-grid, .path-layout { grid-template-columns: 1fr; }
    .side-col { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .side-col .exam-home-btn { grid-column: 1 / -1; }
    #screenProfile .neo-card { padding-left: 16px; padding-top: 225px; }
    #screenProfile .neo-card::before { top: 40px; left: 50%; transform: translateX(-50%); width: 180px; height: 170px; border: 0; background-size: 160px auto; }
}

@media (max-width: 640px) {
    .logo { font-size: 18px; }
    .top-actions .stat-chip { display: none; }
    .menu-btn { padding: 7px 10px; font-size: 10px; }
    .two-col, .side-col { grid-template-columns: 1fr; }
    .selfstudy-card { padding-right: 35%; background-size: auto, 170px auto, auto; }
    #screenLessons .neo-card::before { display: none; }
    #screenLessons #quizCardContent { margin-left: 0; }
    .path-main { min-height: 680px; }
}

/* Approved six-screen composition */
.vocab-engine { display:none !important; }
.dictionary-layout { display:grid; grid-template-columns:190px 1fr; min-height:690px; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#03132e; }
.dictionary-cats { position:relative; padding:12px 10px 260px; border-right:1px solid rgba(56,131,215,.3); background:linear-gradient(#061a39,#031229); }
.dictionary-cats button { width:100%; display:flex; justify-content:space-between; border:0; border-radius:7px; padding:10px 12px; color:#bdc9e8; background:transparent; text-align:left; font:600 12px inherit; cursor:pointer; }
.dictionary-cats button.active { color:#fff; background:#0a2b59; box-shadow:inset 3px 0 #9157ff; }
.dictionary-cats small { color:#63759e; }
.dictionary-mascot { position:absolute; top:auto; right:0; bottom:0; left:0; height:260px; background:url('../assets/aimi-neon.webp') center bottom -65px/220px auto no-repeat; }
.dictionary-mascot span { position:absolute; top:0; left:16px; padding:12px; border-radius:50%; color:#6645d5; background:white; font-size:10px; font-weight:800; transform:rotate(-4deg); }
.dictionary-main { padding:14px; }
.dictionary-search { height:39px; padding:11px 14px; border:1px solid #214b82; border-radius:7px; background:#0a234d; color:#8293bb; font-size:12px; }
.dictionary-filters { display:grid; grid-template-columns:130px 150px 1fr; gap:8px; margin:10px 0; }
.dictionary-filters button { padding:10px 12px; border:1px solid #214b82; border-radius:7px; color:#eaf0ff; background:#0a234d; text-align:left; }
.dictionary-filters button:last-child { justify-self:end; }
.dictionary-table { border:1px solid #214b82; border-radius:8px; overflow:hidden; }
.dictionary-table>div { display:grid; grid-template-columns:80px 80px 120px 1fr 30px; align-items:center; min-height:51px; padding:0 14px; border-bottom:1px solid rgba(45,104,180,.28); background:rgba(6,24,54,.66); }
.dictionary-table>div:last-child { border:0; }
.dictionary-table span { color:#7bbcff; }.dictionary-table b{font-size:18px}.dictionary-table small{color:#c1cbed}.dictionary-table em{color:#c1cbed;font-style:normal}.dictionary-table i{font-style:normal;color:#b7c5e8}
.dictionary-pages { margin:24px 0 4px; text-align:center; color:#b9c6e5; word-spacing:10px; }.dictionary-pages b{padding:9px 12px;border-radius:6px;background:#102e61;color:#fff}

.exam-detail-grid { display:grid; grid-template-columns:.85fr 1.6fr; gap:12px; margin-top:12px; }
.exam-history-empty { padding: 10px 0; color: var(--text-sub); font-size: 12px; }
.exam-database-status { display:block; margin-top:6px; color:var(--accent); font-size:11px; }
.exam-detail-grid section,.exam-history { padding:16px; border:1px solid rgba(47,124,211,.35); border-radius:10px; background:#061a39; }
.exam-detail-grid h3,.exam-history h3{margin:0 0 10px}.exam-detail-grid p{margin:7px 0;color:#bdc9e7;font-size:12px}.exam-detail-grid section:first-child .btn-primary{width:100%;justify-content:center;margin-top:14px;padding:12px}
.exam-detail-grid section:nth-child(2) button{width:100%;display:flex;justify-content:space-between;margin:7px 0;padding:11px;border:1px solid rgba(55,127,212,.25);border-radius:7px;color:#e8edff;background:#0b2855}.exam-detail-grid small{float:right;color:#ff62c8}.exam-detail-grid button b{padding:4px 10px;border-radius:6px;background:#44369a}
.exam-history{margin-top:12px}.exam-history>div{display:flex;justify-content:space-between;padding:9px;border-bottom:1px solid rgba(55,127,212,.2);font-size:12px}.exam-history span{color:#aebcdf}.exam-history b{color:#22e8cb}

.profile-layout { display:grid; grid-template-columns:260px 1fr; max-width:1080px !important; min-height:650px !important; padding:0 !important; overflow:hidden; }
.profile-layout::before { display:none !important; }
.profile-person{padding:28px 18px;border-right:1px solid rgba(54,129,216,.3);text-align:center;background:linear-gradient(#061a3a,#03132e)}
.profile-portrait{width:110px;height:110px;margin:0 auto 10px;border:2px solid #12d8ff;border-radius:50%;background:url('../assets/aimi-neon.webp') center 8%/185% auto no-repeat,#071c40;box-shadow:0 0 24px rgba(0,206,255,.35)}
.profile-person h2{margin:8px 0 2px}.profile-person>p{margin:0;color:#9eaccd;font-size:12px}.profile-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:18px 0}.profile-numbers b{font-size:18px}.profile-numbers small{display:block;color:#96a6c9;font-size:9px}.profile-level{padding:13px;text-align:left;border:1px solid rgba(55,129,215,.3);border-radius:9px;background:#081f44}.profile-level>*{display:block}.profile-level b{margin:7px 0}.profile-level i{height:7px;border-radius:5px;background:#173866}.profile-level i span{display:block;width:32%;height:100%;border-radius:5px;background:#14e0f5}.profile-level small{margin-top:7px;color:#9eaccd;font-size:9px}
.settings-panel{padding:22px}.settings-panel>h2{margin:0 0 10px}.settings-panel section{padding:12px 0;border-bottom:1px solid rgba(55,129,215,.25)}.settings-panel section:last-child{border:0}.settings-panel h3{margin:0 0 8px;font-size:12px}.settings-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.settings-buttons button,.data-actions button{padding:10px;border:1px solid #214b82;border-radius:7px;color:#dbe4fb;background:#0a234c}.settings-buttons button.active{background:linear-gradient(105deg,#6840e7,#9d3de2);box-shadow:0 0 14px rgba(163,62,234,.3)}.settings-panel label{display:flex;justify-content:space-between;padding:8px 10px;margin:5px 0;border:1px solid rgba(55,129,215,.25);border-radius:7px;background:#081f43;color:#bdc9e7;font-size:11px}.settings-panel input{accent-color:#a747ff}.data-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.data-actions button:last-child{color:#ff6a75;border-color:#8b343f}.settings-panel p{color:#9eaccd;font-size:11px;line-height:1.7}

#screenPath>.path-layout { display:none; }
#screenPath>.path-layout.active{display:grid}.path-stages-back{position:relative;z-index:2;margin:0 0 12px;padding:8px 13px;border:1px solid rgba(69,132,213,.45);border-radius:8px;color:#dce7ff;background:#09234c;font:700 10px inherit;cursor:pointer}.path-stages-back:hover{border-color:#9e5cff;color:#fff;box-shadow:0 0 12px rgba(151,77,246,.3)}

/* Экран этапов: компактная ночная дорожка как в утверждённом макете */
#screenPath>.path-layout.active{grid-template-columns:1fr;max-width:760px;margin:0 auto}.path-layout.active .path-side{display:none}.path-layout.active .path-main{min-height:820px;padding:16px 22px 55px;border-radius:12px;background:linear-gradient(180deg,rgba(1,12,34,.12),rgba(1,8,24,.28)),url('../assets/hsk-path-night.webp') center top/cover fixed}.path-layout.active .path-head h2{margin:2px 0;font-size:25px}.path-layout.active .path-head p{font-size:10px}.path-layout.active .path-progress-track{height:7px;margin:12px 0 20px;background:rgba(5,25,58,.9)}.path-layout.active .learning-path{position:relative;max-width:560px;padding:8px 0}.path-layout.active .learning-path:before{content:"";position:absolute;z-index:0;left:50%;top:20px;bottom:20px;width:5px;transform:translateX(-50%);border-radius:9px;background:repeating-linear-gradient(180deg,#fff 0 9px,rgba(158,126,255,.65) 9px 18px);box-shadow:0 0 10px #835cff}.path-layout.active .path-unit{position:relative;z-index:1;display:flex;align-items:center;gap:14px;width:72%;min-height:100px;margin:0 0 15px}.path-layout.active .path-unit:nth-child(odd){margin-right:auto}.path-layout.active .path-unit:nth-child(even){margin-left:auto;flex-direction:row-reverse}.path-layout.active .path-stage-orb{display:grid;place-items:center;flex:0 0 78px;height:78px;border:8px solid rgba(200,190,245,.42);border-radius:50%;color:#fff;background:linear-gradient(145deg,#695b9f,#302c57);box-shadow:0 7px 0 #20203e,0 0 22px rgba(116,87,222,.55);font-size:24px;cursor:pointer}.path-layout.active .path-unit.completed .path-stage-orb{background:linear-gradient(145deg,#14e8e2,#4b5ee8);box-shadow:0 7px 0 #233678,0 0 22px #12cced}.path-layout.active .path-unit.locked .path-stage-orb{color:#aeb7d5;filter:saturate(.55);cursor:not-allowed}.path-layout.active .path-unit-header{flex:1;min-width:0;margin:0;padding:10px 12px;border-color:rgba(63,116,190,.35);border-radius:9px;background:rgba(2,16,39,.91);box-shadow:0 7px 20px rgba(0,0,0,.28);backdrop-filter:blur(7px)}.path-layout.active .path-unit-header span{font-size:9px;color:#a7b8db}.path-layout.active .path-unit-header h3{margin:2px 0;font-size:14px}.path-layout.active .path-unit-header p{max-height:28px;overflow:hidden;font-size:8px;line-height:1.35}.path-layout.active .path-unit-header small{display:block;margin-top:6px;color:#b7c5e4;font-size:8px}.path-layout.active .path-unit:nth-child(even) .path-unit-header{text-align:right}@media(max-width:620px){.path-layout.active .path-main{padding:12px 10px 40px}.path-layout.active .path-unit{width:88%}.path-layout.active .path-stage-orb{flex-basis:64px;height:64px;border-width:6px}.path-layout.active .path-unit-header p{display:none}}
.path-overview { position:relative; max-width:1080px; min-height:730px; margin:0 auto; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:linear-gradient(180deg,rgba(3,19,48,.12),rgba(2,10,28,.3)),url('../assets/hsk-path-night.webp') center/cover no-repeat; }
.path-overview:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(90deg,rgba(2,12,31,.45),transparent 40%,rgba(2,12,31,.25))}
.path-overview-head{position:relative;z-index:2;display:flex;justify-content:space-between;padding:25px 25px 0;text-shadow:0 2px 10px #000}.path-overview-head h1{margin:0;font-size:27px}.path-overview-head p{margin:5px 0;color:#d0d9f2}.path-version{display:flex;align-items:flex-start}.path-version button{padding:10px 14px;border:1px solid #42599c;color:#c4cee9;background:#0a1e48}.path-version button:first-child{border-radius:8px 0 0 8px}.path-version button:last-child{border-radius:0 8px 8px 0}.path-version button.active{background:linear-gradient(105deg,#7455fa,#b64ef5);color:white;box-shadow:0 0 16px #854bea}
.path-levels{position:absolute;z-index:2;left:50%;top:115px;bottom:35px;width:450px;transform:translateX(-50%)}.path-level{position:absolute;display:flex;align-items:center;gap:14px;width:320px;padding:10px;border:0;color:white;background:transparent;text-align:left}.path-level:nth-child(1){left:60px;top:0}.path-level:nth-child(2){left:155px;top:115px}.path-level:nth-child(3){left:60px;top:230px}.path-level:nth-child(4){left:155px;top:345px}.path-level:nth-child(5){left:60px;top:460px}.path-level-orb{display:grid;place-items:center;flex:0 0 82px;height:82px;border:8px solid rgba(186,176,239,.4);border-radius:50%;background:linear-gradient(145deg,#66549a,#29254c);box-shadow:0 8px 0 #20203d,0 0 22px rgba(108,88,213,.5);font-size:28px}.path-level.current .path-level-orb{background:linear-gradient(145deg,#1ce7ff,#5548d6);box-shadow:0 8px 0 #24337a,0 0 24px #16cce9}.path-level>span:last-child{flex:1;padding:10px;border-radius:9px;background:rgba(3,16,39,.88);box-shadow:0 6px 20px rgba(0,0,0,.3)}.path-level b,.path-level small,.path-level i{display:block}.path-level b{font-size:17px}.path-level small{color:#bfcbe7;font-size:9px}.path-level i{height:6px;margin:7px 0;border-radius:4px;background:#182f59}.path-level em{display:block;width:32%;height:100%;border-radius:4px;background:#11e0f4}.path-map-copy{position:absolute;z-index:2;right:35px;top:240px;color:#f1f4ff;text-align:center;line-height:1.55;text-shadow:0 2px 8px #000}.path-progress-card{position:absolute;z-index:2;left:24px;bottom:24px;width:180px;padding:14px;border:1px solid rgba(72,142,223,.35);border-radius:9px;background:rgba(3,18,43,.9)}.path-progress-card>*{display:block}.path-progress-card b{font-size:18px;margin:5px 0}.path-progress-card div{height:7px;border-radius:5px;background:#193864}.path-progress-card span{display:block;width:32%;height:100%;border-radius:5px;background:#18def2}.path-progress-card small{margin-top:5px;color:#b9c6e3;font-size:9px}

@media(max-width:760px){.dictionary-layout,.profile-layout{grid-template-columns:1fr}.dictionary-cats{display:none}.dictionary-table>div{grid-template-columns:60px 55px 90px 1fr 20px}.profile-person{border-right:0;border-bottom:1px solid var(--border)}.exam-detail-grid{grid-template-columns:1fr}.path-levels{transform:translateX(-56%) scale(.82)}.path-map-copy{display:none}}

/* Современный экран профиля */
#screenProfile .profile-layout {
  display:grid; grid-template-columns:minmax(280px, .72fr) minmax(0, 1.55fr);
  max-width:1120px !important; min-height:0 !important; padding:0 !important;
  overflow:hidden; border:1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius:26px; background:var(--panel); box-shadow:0 22px 60px rgba(3,14,36,.16);
}
#screenProfile .profile-person {
  position:relative; padding:34px 28px 30px; border:0; border-right:1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  text-align:left; background:linear-gradient(155deg, color-mix(in srgb, var(--accent) 18%, var(--panel)), var(--panel) 72%); overflow:hidden;
}
#screenProfile .profile-person::before { content:""; position:absolute; width:220px; height:220px; border-radius:50%; right:-88px; top:-92px; background:color-mix(in srgb, var(--accent) 18%, transparent); filter:blur(2px); }
#screenProfile .profile-identity { position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
#screenProfile .profile-portrait { width:116px; height:116px; margin:0; padding:0; border-radius:32px; border:3px solid color-mix(in srgb, var(--accent) 70%, white); box-shadow:0 12px 28px color-mix(in srgb, var(--accent) 26%, transparent); cursor:pointer; appearance:none; transition:transform .18s ease, filter .18s ease; }
#screenProfile .profile-portrait:hover { transform:translateY(-2px) scale(1.02); filter:saturate(1.12); }
#screenProfile .profile-portrait.has-custom-avatar { background-size:cover; background-position:center; }
#screenProfile .profile-online { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; color:var(--accent-strong,var(--accent)); background:color-mix(in srgb, var(--accent) 13%, var(--panel)); font-size:12px; font-weight:700; }
#screenProfile .profile-online i { width:7px; height:7px; border-radius:50%; background:#39c995; box-shadow:0 0 0 4px rgba(57,201,149,.15); }
#screenProfile .profile-kicker { margin:24px 0 7px; color:var(--accent-strong,var(--accent)); font-size:11px; font-weight:800; letter-spacing:.12em; }
#screenProfile .profile-person h2 { margin:0; font-size:30px; letter-spacing:-.04em; color:var(--text); }
#screenProfile .profile-email { margin:5px 0 0; color:var(--text-sub); font-size:13px; }
#screenProfile .profile-account-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:15px 0 2px; padding:10px 11px; border:1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius:12px; background:color-mix(in srgb, var(--accent) 7%, var(--panel)); }
#screenProfile .profile-account-row>div { min-width:0; }
#screenProfile .profile-account-row span { display:block; color:var(--accent-strong,var(--accent)); font-size:12px; font-weight:800; }
#screenProfile .profile-account-row small { display:block; margin-top:3px; color:var(--text-sub); font-size:10px; }
#screenProfile .profile-account-row .profile-premium-link { display:block; margin-top:6px; padding:0!important; border:0!important; background:transparent!important; color:var(--accent-strong,var(--accent)); font-size:10px; font-weight:800; cursor:pointer; }
#screenProfile .profile-premium-link:hover { text-decoration:underline; }
#screenProfile .profile-account-actions { display:flex; flex-direction:column; justify-content:flex-end; gap:5px; }
#screenProfile .profile-account-row button { flex:0 0 auto; padding:7px 9px; border:1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); border-radius:9px; color:var(--text); background:color-mix(in srgb, var(--panel) 85%, var(--accent)); font-size:10px; font-weight:800; cursor:pointer; }
#screenProfile .profile-account-row button:hover { border-color:var(--accent); transform:translateY(-1px); }
#screenProfile .profile-sync-status { margin:9px 0 0; color:var(--text-sub); font-size:11px; }
#screenProfile .profile-achievements { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
#screenProfile .profile-achievements span { padding:6px 8px; border:1px solid color-mix(in srgb, var(--border) 70%, var(--accent)); border-radius:8px; color:var(--text-sub); background:color-mix(in srgb, var(--panel) 78%, transparent); font-size:10px; font-weight:800; opacity:.62; }
#screenProfile .profile-achievements span.unlocked { color:var(--accent-strong,var(--accent)); border-color:color-mix(in srgb, var(--accent) 42%, var(--border)); background:color-mix(in srgb, var(--accent) 13%, var(--panel)); opacity:1; }
#screenProfile .profile-activity { margin-top:15px; padding-top:13px; border-top:1px solid color-mix(in srgb, var(--border) 65%, transparent); }
#screenProfile .profile-activity-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; color:var(--text); font-size:12px; }
#screenProfile .profile-activity-heading small { color:var(--text-sub); font-size:10px; font-weight:700; }
#screenProfile .profile-activity-list { min-height:20px; }
#screenProfile .profile-activity-item { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid color-mix(in srgb, var(--border) 35%, transparent); }
#screenProfile .profile-activity-item:last-child { border-bottom:0; }
#screenProfile .profile-activity-item>span { display:grid; place-items:center; width:22px; height:22px; border-radius:7px; background:color-mix(in srgb, var(--accent) 16%, var(--panel)); color:var(--accent-strong,var(--accent)); font-weight:900; }
#screenProfile .profile-activity-item div { min-width:0; flex:1; }
#screenProfile .profile-activity-item b, #screenProfile .profile-activity-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#screenProfile .profile-activity-item b { color:var(--text); font-size:11px; }
#screenProfile .profile-activity-item small { margin-top:2px; color:var(--text-sub); font-size:9px; }
#screenProfile .profile-activity-item em { color:var(--text-sub); font-size:9px; font-style:normal; }
#screenProfile .profile-empty-state { display:block; padding:7px 0; color:var(--text-sub); font-size:10px; }
.exam-runner-overlay { position:fixed; top:0; right:0; bottom:0; left:0; z-index:1200; display:grid; place-items:center; padding:18px; background:rgba(4,8,20,.9); background:color-mix(in srgb, var(--bg) 90%, #000 10%); }
.exam-runner-overlay.hidden { display:none; }
.exam-variant-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1190;display:grid;place-items:center;padding:18px;background:rgba(1,9,28,.82);backdrop-filter:blur(12px)}
.exam-variant-overlay.hidden{display:none}
body.exam-variant-open{overflow:hidden}
.exam-variant-dialog{width:min(920px,100%);max-height:min(92vh,880px);overflow:auto;border:1px solid color-mix(in srgb,var(--accent) 48%,var(--border));border-radius:20px;background:linear-gradient(150deg,color-mix(in srgb,var(--panel) 96%,var(--accent) 4%),var(--panel));box-shadow:0 28px 90px rgba(0,0,0,.42)}
.exam-variant-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 26px 18px;border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent)}
.exam-variant-kicker{display:block;margin-bottom:5px;color:var(--accent-strong,var(--accent));font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.exam-variant-header h2{margin:0;color:var(--text);font-size:25px}.exam-variant-header p{margin:7px 0 0;color:var(--text-sub);font-size:14px;line-height:1.5}
.exam-variant-close{width:38px;height:38px;flex:0 0 auto;border:1px solid var(--border);border-radius:11px;color:var(--text-sub);background:transparent;font-size:17px;cursor:pointer}.exam-variant-close:hover{border-color:var(--accent);color:var(--text)}
.exam-variant-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:22px 26px}
.exam-variant-card{position:relative;min-height:96px;padding:15px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border));border-radius:13px;color:var(--text);background:color-mix(in srgb,var(--panel) 86%,var(--accent) 6%);text-align:left;cursor:pointer;transition:transform .18s,border-color .18s,background .18s}
.exam-variant-card:hover,.exam-variant-card:focus-visible{transform:translateY(-2px);border-color:var(--accent);background:color-mix(in srgb,var(--panel) 78%,var(--accent) 12%);outline:none}
.exam-variant-card b,.exam-variant-card span{display:block}.exam-variant-card b{font-size:16px}.exam-variant-card span{margin-top:8px;color:var(--text-sub);font-size:12px;line-height:1.35}.exam-variant-card span::before{content:'';display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#f0a64b;box-shadow:0 0 0 3px color-mix(in srgb,#f0a64b 16%,transparent)}
.exam-variant-card.is-notified{border-color:#f0a64b;background:color-mix(in srgb,var(--panel) 78%,#f0a64b 9%)}
.exam-variant-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 26px 22px;border-top:1px solid color-mix(in srgb,var(--border) 72%,transparent)}.exam-variant-footer span{color:var(--text-sub);font-size:13px}.exam-variant-footer .btn-black{width:auto;min-width:120px;margin:0}
@media(max-width:760px){.exam-variant-header{padding:20px 18px 15px}.exam-variant-header h2{font-size:21px}.exam-variant-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:18px}.exam-variant-card{min-height:84px}.exam-variant-footer{align-items:stretch;flex-direction:column;padding:15px 18px 18px}.exam-variant-footer .btn-black{width:100%}}
.exam-runner-card { width:min(900px,100%); max-height:min(94vh,900px); overflow:auto; border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border)); border-radius:20px; background:var(--panel); box-shadow:0 24px 80px rgba(0,0,0,.32); }
.exam-runner-header { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; padding:17px 20px 13px; border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent); }
.exam-runner-header>button { width:32px; height:32px; border:1px solid var(--border); border-radius:10px; color:var(--text-sub); background:transparent; cursor:pointer; }
.exam-runner-header b,.exam-runner-header small { display:block; }.exam-runner-header b{color:var(--text);font-size:16px}.exam-runner-header small{margin-top:3px;color:var(--text-sub);font-size:11px}.exam-runner-header>strong{color:var(--accent-strong,var(--accent));font-size:24px;font-variant-numeric:tabular-nums}
.exam-runner-progress { height:6px; margin:0 20px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--border) 65%,transparent); }.exam-runner-progress span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
#examRunnerBody { min-height:410px; padding:28px 34px; color:var(--text); }.exam-runner-intro{text-align:center;padding:80px 20px}.exam-runner-intro h2{margin:0 0 10px;font-size:28px}.exam-runner-intro p{color:var(--text-sub)}.exam-runner-question h2{margin:0 0 8px;font-size:28px}.exam-runner-instruction{margin:0 0 18px;color:var(--text-sub)}.exam-runner-pinyin{margin-top:7px;color:var(--accent-strong,var(--accent));font-size:14px}.exam-runner-image{display:block;max-width:min(280px,100%);max-height:190px;margin:14px auto;border-radius:12px;object-fit:contain}.exam-runner-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}.exam-runner-option{min-height:54px;padding:12px 15px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border));border-radius:12px;color:var(--text);background:color-mix(in srgb,var(--panel) 80%,var(--accent) 5%);font-size:16px;font-weight:700;text-align:left;cursor:pointer}.exam-runner-option:hover,.exam-runner-option.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--panel))}.exam-runner-option img{display:block;width:100%;height:120px;object-fit:contain;margin-bottom:6px}.exam-runner-feedback{margin-top:16px;padding:11px 13px;border-radius:10px;background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--text-sub)}.exam-runner-transfer{text-align:center;padding:70px 20px}.exam-runner-transfer h2{margin:0 0 10px}.exam-transfer-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;max-width:620px;margin:22px auto 0;text-align:left}.exam-transfer-row{display:grid;grid-template-columns:25px 1fr;gap:4px;align-items:center;padding:8px 9px;border:1px solid color-mix(in srgb,var(--border) 75%,var(--accent));border-radius:8px;background:color-mix(in srgb,var(--panel) 80%,var(--accent) 4%)}.exam-transfer-row>b{color:var(--accent-strong,var(--accent));font-size:12px}.exam-transfer-row span{color:var(--text);font-size:11px}.exam-transfer-row small{grid-column:2;color:var(--text-sub);font-size:9px}.exam-transfer-row strong{color:var(--accent-strong,var(--accent))}.exam-runner-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent)}.exam-runner-footer span{color:var(--text-sub);font-size:12px}.exam-result{text-align:center;padding:28px}.exam-result-score{font-size:46px;font-weight:900;color:var(--accent-strong,var(--accent))}.exam-result-pass{color:#23a579;font-weight:800}.exam-result-fail{color:#e26d75;font-weight:800}
@media(max-width:650px){#examRunnerBody{padding:22px 16px}.exam-runner-options{grid-template-columns:1fr}.exam-transfer-list{grid-template-columns:repeat(2,minmax(0,1fr))}.exam-runner-header>strong{font-size:19px}}
.exam-runner-question-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.exam-runner-star{width:38px;height:34px;flex:0 0 auto;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));border-radius:10px;color:var(--text-sub);background:transparent;font-size:22px;line-height:1;cursor:pointer}.exam-runner-star:hover,.exam-runner-star.marked{border-color:var(--accent);color:var(--accent-strong,var(--accent));background:color-mix(in srgb,var(--accent) 13%,var(--panel))}
.exam-runner-star:hover,.exam-runner-star.marked{border-color:#d9a928;color:#f2c94c;background:color-mix(in srgb,#f2c94c 15%,var(--panel))}.exam-transfer-row.marked{border-color:#d9a928;background:color-mix(in srgb,#f2c94c 12%,var(--panel))}.exam-transfer-row.marked small{color:#c4931c}
.exam-runner-image{width:auto;max-width:min(220px,100%);max-height:140px;margin:12px auto}.exam-audio-status{display:block;margin-top:4px;color:var(--accent-strong,var(--accent));font-size:11px;font-weight:700}
.exam-audio-player{display:flex;align-items:center;gap:9px;margin-top:9px}.exam-audio-player progress{width:150px;height:6px;accent-color:var(--accent)}.exam-audio-player span{color:var(--text-sub);font-size:10px;font-weight:700}
#screenProfile .profile-progress-visuals { display:grid; grid-template-columns:1.1fr .9fr; gap:9px; margin-top:12px; }
#screenProfile .profile-visual-card { padding:10px; border:1px solid color-mix(in srgb, var(--border) 70%, var(--accent)); border-radius:11px; background:color-mix(in srgb, var(--panel) 78%, transparent); }
#screenProfile .profile-visual-card .profile-activity-heading { margin-bottom:9px; }
#screenProfile .profile-activity-calendar { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
#screenProfile .profile-calendar-day { display:grid; place-items:center; gap:2px; min-height:39px; padding:4px 1px; border-radius:7px; color:var(--text-sub); background:color-mix(in srgb, var(--border) 42%, var(--panel)); }
#screenProfile .profile-calendar-day b { font-size:8px; text-transform:uppercase; }
#screenProfile .profile-calendar-day span { color:var(--text); font-size:11px; font-weight:800; }
#screenProfile .profile-calendar-day.intensity-1 { background:color-mix(in srgb, var(--accent) 18%, var(--panel)); }
#screenProfile .profile-calendar-day.intensity-2 { background:color-mix(in srgb, var(--accent) 32%, var(--panel)); }
#screenProfile .profile-calendar-day.intensity-3 { background:color-mix(in srgb, var(--accent) 48%, var(--panel)); color:#fff; }
#screenProfile .profile-calendar-day.intensity-4 { background:var(--accent); color:#fff; }
#screenProfile .profile-calendar-day.intensity-3 span, #screenProfile .profile-calendar-day.intensity-4 span { color:#fff; }
#screenProfile .profile-activity-chart { display:flex; align-items:flex-end; justify-content:space-between; gap:5px; height:68px; padding-top:4px; }
#screenProfile .profile-chart-column { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:4px; }
#screenProfile .profile-chart-column span { display:block; width:100%; max-width:17px; min-height:3px; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 72%, #fff), var(--accent)); }
#screenProfile .profile-chart-column small { color:var(--text-sub); font-size:8px; }
@media (max-width:720px) { #screenProfile .profile-progress-visuals { grid-template-columns:1fr; } }
#screenProfile .profile-badges { display:flex; flex-wrap:wrap; gap:7px; margin:18px 0 22px; }
#screenProfile .profile-badges span { padding:7px 9px; border:1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius:9px; color:var(--text-sub); background:color-mix(in srgb, var(--accent) 7%, var(--panel)); font-size:11px; font-weight:700; }
#screenProfile .profile-numbers { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 22px; }
#screenProfile .profile-numbers b { display:flex; flex-direction:column; gap:2px; padding:11px 8px; border:1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius:13px; background:color-mix(in srgb, var(--panel) 78%, var(--accent)); color:var(--text); font-size:18px; }
#screenProfile .profile-numbers strong { color:var(--accent-strong,var(--accent)); font-size:14px; }
#screenProfile .profile-numbers small { color:var(--text-sub); font-size:10px; font-weight:600; }
#screenProfile .profile-level { padding:15px; border:1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); border-radius:16px; background:color-mix(in srgb, var(--panel) 68%, var(--accent)); }
#screenProfile .profile-level div { display:grid; grid-template-columns:1fr auto; align-items:end; gap:4px; }
#screenProfile .profile-level small { display:block; color:var(--text-sub); font-size:10px; }
#screenProfile .profile-level b { margin:5px 0 0; color:var(--text); font-size:20px; }
#screenProfile .profile-level div span { color:var(--accent-strong,var(--accent)); font-size:11px; font-weight:800; }
#screenProfile .profile-level i { display:block; height:9px; margin:13px 0 8px; border-radius:20px; background:color-mix(in srgb, var(--text-sub) 17%, transparent); overflow:hidden; }
#screenProfile .profile-level i span { display:block; width:32%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),color-mix(in srgb, var(--accent) 50%, #65d4b0)); }
#screenProfile .profile-hsk-context { display:flex; justify-content:space-between; gap:10px; margin-top:10px; padding:9px 12px; border-radius:10px; color:var(--text-sub); background:color-mix(in srgb, var(--accent) 7%, var(--panel)); font-size:11px; }
#screenProfile .profile-hsk-context b { color:var(--accent-strong,var(--accent)); }
#screenProfile .profile-quote { margin-top:24px; padding-left:13px; border-left:3px solid var(--accent); color:var(--text-sub); font-size:12px; line-height:1.55; font-style:italic; }
#screenProfile .settings-panel { padding:30px 34px; background:var(--panel); }
#screenProfile .profile-settings-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
#screenProfile .profile-settings-heading .profile-kicker { margin:0 0 4px; }
#screenProfile .profile-settings-heading h2 { margin:0; color:var(--text); font-size:27px; letter-spacing:-.035em; }
#screenProfile .profile-settings-heading>div:first-child span { display:block; margin-top:5px; color:var(--text-sub); font-size:13px; }
#screenProfile .profile-settings-spark { display:grid; place-items:center; width:40px; height:40px; border-radius:13px; background:linear-gradient(135deg,var(--accent),color-mix(in srgb, var(--accent) 52%, #70ddbb)); color:#fff; font-size:21px; box-shadow:0 9px 22px color-mix(in srgb, var(--accent) 26%, transparent); }
#screenProfile .profile-insights { padding-top:0!important; }
#screenProfile .profile-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
#screenProfile .profile-stat-grid>div { padding:12px 13px; border:1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-radius:12px; background:color-mix(in srgb, var(--accent) 7%, var(--panel)); }
#screenProfile .profile-stat-grid strong { display:block; color:var(--text); font-size:21px; letter-spacing:-.04em; }
#screenProfile .profile-stat-grid span { display:block; margin-top:3px; color:var(--text-sub); font-size:10px; }
#screenProfile .profile-achievements { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
#screenProfile .profile-achievements span { padding:6px 8px; border-radius:8px; color:var(--text-sub); background:color-mix(in srgb, var(--accent) 8%, var(--panel)); font-size:10px; font-weight:700; }
#screenProfile .settings-panel section { padding:19px 0; border-bottom:1px solid color-mix(in srgb, var(--border) 76%, transparent); }
#screenProfile .settings-panel section:last-child { border:0; }
#screenProfile .settings-section-title { display:flex; gap:11px; align-items:flex-start; margin-bottom:12px; }
#screenProfile .settings-icon { display:grid; place-items:center; flex:0 0 auto; width:31px; height:31px; border-radius:10px; color:var(--accent-strong,var(--accent)); background:color-mix(in srgb, var(--accent) 13%, var(--panel)); font-size:15px; font-weight:800; }
#screenProfile .settings-section-title h3 { margin:0; color:var(--text); font-size:15px; }
#screenProfile .settings-section-title h3 span { margin-left:5px; color:var(--accent-strong,var(--accent)); font-size:11px; }
#screenProfile .settings-section-title p { margin:3px 0 0; color:var(--text-sub); font-size:11px; }
#screenProfile .settings-buttons { gap:9px; }
#screenProfile .interface-language-buttons { grid-template-columns:repeat(4,minmax(0,1fr)); }
#screenProfile .interface-language-buttons button { min-width:0; }
@media (max-width:620px) { #screenProfile .interface-language-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); } }
#screenProfile .settings-buttons button, #screenProfile .data-actions button { min-height:40px; border:1px solid color-mix(in srgb, var(--border) 78%, var(--accent)); border-radius:11px; color:var(--text); background:color-mix(in srgb, var(--panel) 83%, var(--accent)); font-size:12px; font-weight:700; transition:transform .18s ease, border-color .18s ease, background .18s ease; }
#screenProfile .settings-buttons button:hover, #screenProfile .data-actions button:hover { transform:translateY(-1px); border-color:var(--accent); }
#screenProfile .settings-buttons button.active { color:#fff; background:linear-gradient(135deg,var(--accent),color-mix(in srgb, var(--accent) 55%, #4bd0a5)); border-color:transparent; box-shadow:0 8px 18px color-mix(in srgb, var(--accent) 24%, transparent); }
#screenProfile .global-hsk-selector { display:flex; gap:10px; padding:5px; border:1px solid color-mix(in srgb, var(--border) 74%, var(--accent)); border-radius:13px; background:color-mix(in srgb, var(--panel) 85%, var(--accent)); }
#screenProfile .global-system-tabs { display:flex; gap:5px; padding-right:10px; border-right:1px solid color-mix(in srgb, var(--border) 80%, transparent); }
#screenProfile .global-level-tabs { display:flex; flex:1; gap:5px; }
#screenProfile .global-hsk-selector button { flex:1; min-height:35px; border:0; border-radius:9px; color:var(--text-sub); background:transparent; font-weight:800; }
#screenProfile .global-hsk-selector button.active { color:#fff; background:var(--accent); box-shadow:0 5px 12px color-mix(in srgb, var(--accent) 24%, transparent); }
#screenProfile .settings-panel label { min-height:42px; align-items:center; padding:9px 12px; margin:7px 0; border:1px solid color-mix(in srgb, var(--border) 76%, var(--accent)); border-radius:11px; background:color-mix(in srgb, var(--panel) 82%, var(--accent)); color:var(--text-sub); font-size:12px; }
#screenProfile .settings-panel input { width:17px; height:17px; accent-color:var(--accent); }
#screenProfile .data-actions { gap:9px; }
#screenProfile .data-actions button:last-child { color:#d85d68; border-color:color-mix(in srgb, #d85d68 40%, var(--border)); }
#screenProfile .profile-version { margin:13px 0 0 !important; color:var(--text-sub) !important; font-size:11px !important; }
@media(max-width:760px){
  #screenProfile .profile-layout{grid-template-columns:1fr;border-radius:20px}
  #screenProfile .profile-person{border-right:0;border-bottom:1px solid color-mix(in srgb, var(--accent) 22%, var(--border));padding:25px 20px}
  #screenProfile .settings-panel{padding:24px 20px}
  #screenProfile .profile-settings-heading h2{font-size:23px}
  #screenProfile .global-hsk-selector{flex-direction:column}.global-system-tabs{padding:0 0 5px;border-right:0;border-bottom:1px solid color-mix(in srgb, var(--border) 80%, transparent)}
  #screenProfile .profile-account-row{align-items:flex-start;flex-direction:column}.profile-account-actions{justify-content:flex-start!important}
  #screenProfile .profile-stat-grid{grid-template-columns:1fr 1fr}.profile-stat-grid>div:last-child{grid-column:1/-1}
}

/* Exact approved dashboard */
.legacy-home-grid{position:absolute!important;left:-10000px!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
.approved-dashboard{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:12px;max-width:1080px;margin:0 auto}.dash-main{min-width:0}.dash-welcome{display:flex;justify-content:space-between;align-items:center;padding:8px 12px 6px}.dash-welcome h1{margin:0;font-size:25px;line-height:1.12}.dash-welcome p{margin:7px 0 0;color:#aab9dc;font-size:11px}.dash-motto{text-align:right;color:#d5ddf5;font-family:serif;font-size:19px;line-height:1.35}.dash-motto span{color:#ff5ac7}
.continue-card{position:relative;min-height:278px;overflow:hidden;border:1px solid #1b6fc6;border-radius:11px;background:linear-gradient(100deg,rgba(29,31,104,.94) 0%,rgba(78,32,165,.9) 48%,rgba(0,11,30,.1) 73%),url('../assets/aimi-neon.webp') right -5px bottom -110px/auto 410px no-repeat,linear-gradient(#071d46,#061631);box-shadow:inset 0 0 32px rgba(18,99,207,.2)}.continue-card:after{content:"";position:absolute;top:auto;right:0;bottom:0;left:0;height:42px;background:linear-gradient(180deg,transparent,rgba(2,14,36,.9))}.continue-copy{position:relative;z-index:2;width:65%;padding:14px}.continue-copy>h3{margin:0 0 10px;font-size:17px}.lesson-label{display:inline-block;padding:8px 13px;border-radius:7px 7px 0 0;background:linear-gradient(105deg,#4931b9,#8d37d5);font-size:12px}.continue-copy h2{margin:0;padding:10px 12px 4px;background:linear-gradient(105deg,rgba(70,42,185,.9),rgba(141,48,206,.45));font-size:17px}.continue-copy p{margin:0;padding:3px 12px 12px;background:linear-gradient(105deg,rgba(70,42,185,.9),rgba(141,48,206,.45));color:#e1e5fb;font-size:11px;line-height:1.5}.continue-progress{display:flex;align-items:center;gap:8px;padding:8px 12px;background:linear-gradient(105deg,rgba(70,42,185,.9),rgba(141,48,206,.45))}.continue-progress i{flex:1;height:7px;border-radius:5px;background:#27306a}.continue-progress i span{display:block;width:68%;height:100%;border-radius:5px;background:linear-gradient(90deg,#11e5f5,#b7f8ff)}.continue-progress b{font-size:11px}.continue-copy button{width:100%;margin-top:10px;padding:12px;border:1px solid #ff78e1;border-radius:8px;color:#fff;background:linear-gradient(105deg,#8445ff,#ff4ab8);box-shadow:0 0 18px rgba(245,68,196,.45);font-weight:800}
.dash-section-title{margin:10px 0 7px;font-size:13px}.study-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.study-cards button{display:grid;grid-template-columns:34px 1fr auto;grid-template-rows:auto auto;align-items:center;padding:11px 9px;border:1px solid #1f5694;border-radius:9px;color:#fff;background:linear-gradient(145deg,#092451,#061a39);text-align:left}.study-cards i{grid-row:1/3;display:grid;place-items:center;width:31px;height:31px;border-radius:7px;background:linear-gradient(145deg,#236bd0,#1ecce0);font-style:normal;font-size:18px}.study-cards button:nth-child(2) i{background:linear-gradient(145deg,#8f42e9,#ed53e0)}.study-cards button:nth-child(3) i{background:linear-gradient(145deg,#356cf1,#6553ea)}.study-cards button:nth-child(4) i{background:linear-gradient(145deg,#1fc0c5,#4d7de7)}.study-cards b{font-size:10px}.study-cards small{color:#17e6d4;font-size:9px}.study-cards span{grid-column:2/4;color:#aab9d9;font-size:8px}.dash-topics-head{display:flex;align-items:center;gap:12px;margin:12px 0 6px}.dash-topics-head h3{margin:0;font-size:13px}.dash-topics-head span{color:#9daccc;font-size:9px}.dash-topics-head button{margin-left:auto;border:0;color:#ff5bc7;background:transparent;font-size:10px;font-weight:800}.dash-topics{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.dash-topics button{display:flex;gap:8px;padding:8px;border:1px solid #1d4d83;border-radius:8px;color:#fff;background:#082047;text-align:left}.dash-topics>button>b{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;background:linear-gradient(145deg,#10d7e9,#2181d7)}.dash-topics button:nth-child(2)>b{background:linear-gradient(145deg,#9f4df1,#6f4ee2)}.dash-topics span{flex:1;font-size:8px}.dash-topics small,.dash-topics i{display:block}.dash-topics small{color:#9fb0d0}.dash-topics i{height:3px;margin-top:4px;border-radius:3px;background:#1b3765}.dash-topics em{display:block;height:100%;border-radius:3px;background:#15deed}
.dash-side{display:flex;flex-direction:column;gap:10px}.dash-chips{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.dash-chips span{padding:10px 7px;border:1px solid #1f518c;border-radius:20px;background:#061a39;text-align:center;font-size:9px}.dash-chips span:nth-child(2){color:#ffd24d}.dash-chips span:nth-child(3){color:#ff61c5}.dash-chips strong{padding:2px 5px;border-radius:50%;background:#9b45ff;color:#fff}.level-ring-card,.daily-card{padding:14px;border:1px solid #1d548f;border-radius:10px;background:linear-gradient(145deg,#082047,#05172f)}.level-ring-card h2{margin:0;font-size:18px}.level-ring{display:grid;place-items:center;width:112px;height:112px;margin:8px auto;border-radius:50%;background:conic-gradient(#1ee9ff 0 32%,#1a315e 32%);box-shadow:0 0 18px rgba(16,211,255,.3)}.level-ring:before{content:"";position:absolute;width:85px;height:85px;border-radius:50%;background:#071a3a}.level-ring span{position:relative;z-index:1;font-size:23px;font-weight:800}.level-ring-card p{text-align:center;color:#b9c6df;font-size:9px}.level-ring-card button{width:100%;padding:9px;border:0;border-radius:6px;color:#d7e1f5;background:#0d2a57;font-size:9px}.daily-card{flex:1}.daily-card header{display:flex;justify-content:space-between}.daily-card h3{margin:0;font-size:12px}.daily-card header b{color:#ff4fc0}.daily-card>div{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid rgba(54,126,211,.22)}.daily-card i{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:linear-gradient(145deg,#7e4aff,#c541f0);font-style:normal}.daily-card span{font-size:9px;font-weight:700}.daily-card small{display:block;color:#ffc348}
.daily-card .daily-task{cursor:pointer;transition:background .18s ease,opacity .18s ease}.daily-card .daily-task:hover{background:rgba(54,126,211,.12)}.daily-card .daily-task.completed{opacity:.72}.daily-card .daily-task>span{flex:1;min-width:0}.daily-card .daily-task>span b{display:block;line-height:1.2}.daily-card .daily-task-status{margin-left:auto;color:#55e6ba;font-size:9px;white-space:nowrap}.daily-card .daily-task-status:empty{display:none}.daily-card .daily-task.completed i{background:linear-gradient(145deg,#159f83,#32d8ac)}

/* Exact approved training composition */
#screenLessons .neo-card{max-width:1080px!important;min-height:660px;padding:0!important}.training-mode-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:0 0 8px;padding:0 0 9px;border-bottom:1px solid var(--border)}.training-mode-bar .level-pill{justify-content:center;border-radius:7px}.training-mode-bar .training-more{display:none}.training-intro{position:relative;height:118px;margin-bottom:-118px;pointer-events:none}.training-intro:before{content:"";position:absolute;left:0;top:0;width:185px;height:160px;background:url('../assets/aimi-neon.webp') center top/180px auto no-repeat;filter:drop-shadow(0 0 12px rgba(0,218,255,.25))}.training-speech{position:absolute;left:190px;top:17px;display:flex;flex-direction:column;gap:5px;font-size:11px}.training-speech span{color:#b6c3df;line-height:1.45}.training-streak{position:absolute;right:6px;top:7px;padding:8px 11px;border:1px solid #1e518d;border-radius:8px;background:#0a2350;font-size:9px}.training-streak::first-letter{color:#ff5cd0}#screenLessons #lessonTopicTag{margin-left:195px;margin-top:10px;color:#fff!important}#screenLessons #timerContainer{margin-left:195px;width:calc(100% - 200px);margin-bottom:6px}#screenLessons .neo-card::before{display:none!important}#screenLessons #quizCardContent{margin-left:195px;min-height:465px;padding:8px 8px 0}.cn-char{margin:0;padding:16px;border:1px solid #1d548f;border-radius:9px;background:linear-gradient(145deg,#0c2a5f,#171d59);font-size:54px}.cn-pinyin{margin-top:-32px;color:#e7ecff;font-size:14px}.cn-meaning{margin:38px 0 10px;color:#d2daf1;font-size:12px}.options-stack{gap:8px}.option-item{position:relative;padding:12px 16px 12px 48px}.option-item:before{content:counter(list-item,upper-alpha);position:absolute;left:10px;top:8px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#2d477c;color:#e7edff;font-size:11px}.options-stack{counter-reset:list-item}.option-item{counter-increment:list-item}
@media(max-width:800px){.approved-dashboard{grid-template-columns:1fr}.dash-side{display:grid;grid-template-columns:1fr 1fr}.dash-chips{grid-column:1/-1}.continue-card{background-size:auto,auto 350px,auto}.study-cards,.dash-topics{grid-template-columns:repeat(2,1fr)}#screenLessons #quizCardContent,#screenLessons #lessonTopicTag,#screenLessons #timerContainer{margin-left:0;width:100%}.training-intro{display:none}.training-mode-bar{grid-template-columns:repeat(3,1fr)}}
.dash-topics button.is-next{border-color:#b254f0;box-shadow:0 0 12px rgba(178,84,240,.25)}.dash-topics button.is-mastered{border-color:#16d7d8}.dash-topics button.is-mastered>b{background:linear-gradient(145deg,#13d8c6,#2384db)}

.training-speech{top:-3px!important;gap:4px!important}.training-streak{top:-3px!important}.training-intro:after{content:attr(data-progress);position:absolute;right:8px;top:73px;color:#fff;font-size:10px;font-weight:800}#screenLessons #lessonTopicTag{visibility:hidden;height:8px;margin:0 0 0 195px!important}

#screenLessons .training-speech{left:255px;right:10px;width:auto;display:flex;flex-direction:row;align-items:center;gap:24px;top:16px!important}
#screenLessons .training-speech b{font-size:16px;white-space:nowrap}
#screenLessons .training-speech span{font-size:13px;white-space:nowrap}
#screenLessons .training-speech br{display:none}
#screenLessons .training-heart{color:#2fae8b;font-size:16px;font-weight:900;margin:0 4px}
.words-no-audio>.cn-char:after{display:none!important}
#screenLessons #quizCardContent.reverse-word-mode>.cn-char{font-size:32px!important;line-height:1.18;overflow-wrap:anywhere;word-break:break-word}
#screenLessons #quizCardContent.draw-mode{display:block!important;min-height:360px;padding:0 8px 12px}
#screenLessons #quizCardContent.draw-mode>.cn-char,
#screenLessons #quizCardContent.draw-mode>.cn-pinyin{display:none!important}
#screenLessons #quizCardContent.draw-mode>.cn-meaning{display:block!important;margin:0 0 12px;padding:10px 12px;color:var(--text);font-size:14px;font-weight:700;text-align:center}
#screenLessons #quizCardContent.draw-mode>#drawArea{display:block!important;width:100%;margin:0}
#screenLessons #quizCardContent.hidden{display:none!important}
#screenLessons #quizCardContent.reading-words-mode.hidden{display:none!important}
#screenLessons #writingCanvas.writing-error{filter:drop-shadow(0 0 5px rgba(239,68,68,.5))}
#screenLessons #writingCanvas.writing-success{filter:drop-shadow(0 0 5px rgba(35,139,120,.55))}
:root[data-theme="dark"] #screenLessons .words-direction-btn{
  border-color:#4c2b86!important;
  color:#cfc1ff!important;
  background:#081a3a!important;
}
:root[data-theme="dark"] #screenLessons .words-direction-btn.active{
  border-color:#a855f7!important;
  color:#fff!important;
  background:linear-gradient(135deg,#7c3aed,#c026d3)!important;
  box-shadow:0 4px 12px rgba(139,92,246,.32)!important;
}
.archive-title>img.knowledge-aimi-portrait{content:url('../assets/knowledge-base-aimi.webp')!important}
:root[data-theme="light"] .archive-title>img.knowledge-aimi-portrait{content:url('../assets/knowledge-base-aimi-jade.webp')!important}
.words-direction-toggle{display:flex;gap:6px;margin:8px 0 10px;flex-wrap:wrap}
.words-direction-btn{padding:7px 11px;border:1px solid var(--border);border-radius:8px;color:var(--text-sub);background:var(--panel);font:700 11px inherit;cursor:pointer;transition:.18s ease}
.words-direction-btn.active{color:#fff;border-color:#2fae8b;background:#2fae8b;box-shadow:0 3px 10px rgba(47,174,139,.2)}
.writing-format-toggle{display:flex;gap:6px;margin:8px 0 12px;flex-wrap:wrap}
.writing-format-btn{padding:7px 11px;border:1px solid var(--border);border-radius:8px;color:var(--text-sub);background:var(--panel);font:700 11px inherit;cursor:pointer}
.writing-format-btn.active{color:#fff;border-color:#2fae8b;background:#2fae8b}
.writing-format-btn:disabled{opacity:.55;cursor:not-allowed}
.training-intro.writing-active:after{display:none!important}
.writing-back-selection{display:block;width:100%;margin:8px 0 0;padding:10px 14px;border:1px solid var(--border);border-radius:9px;color:var(--text-sub);background:var(--panel);font:700 11px inherit;cursor:pointer}
.writing-back-selection:hover{border-color:#2fae8b;color:var(--text)}

/* Pixel-matched training screen from the approved close-up */
#screenLessons{max-width:900px;margin:0 auto}
#screenLessons .neo-card{min-height:0!important;padding:8px!important;border-radius:11px!important;background:#03142f!important}
#screenLessons .training-mode-bar{grid-template-columns:repeat(5,1fr);gap:4px;margin:0 0 5px;padding:0;border:0}
#screenLessons .training-mode-bar .level-pill{min-height:48px;padding:8px 5px;border-radius:7px;font-size:11px;background:#08234d}
#screenLessons .training-mode-bar .level-pill.active{background:linear-gradient(110deg,#8748ff,#ff42ba);box-shadow:0 0 15px rgba(207,60,255,.45)}
#screenLessons .training-mode-bar .errors-btn{border-color:#77346d;color:#ff6779}
#screenLessons .training-intro{height:132px;margin:0;overflow:visible}
#screenLessons .training-intro:before{left:0;top:0;width:25%;height:142px;background-position:center top;background-size:contain}
#screenLessons .training-speech{left:25.5%;top:30px!important;font-size:11px}
#screenLessons .training-speech b{font-size:12px}
#screenLessons .training-speech span{font-size:10px}
#screenLessons .training-streak{right:4px;top:22px!important;padding:8px 10px;font-size:9px}
#screenLessons .training-intro:after{left:25.5%;right:auto;top:101px;padding-right:14px;border-right:0;color:#fff;font-size:10px}
#screenLessons #lessonTopicTag{display:none!important}
#screenLessons #timerContainer{position:absolute;left:calc(25.5% + 48px);right:18px;top:128px;width:auto;height:6px;margin:0;background:#102b58}
#screenLessons #quizCardContent{position:relative;display:grid;grid-template-columns:41% 59%;gap:8px;min-height:260px;margin:0;padding:0}
#screenLessons #quizCardContent>.cn-char{grid-column:1;grid-row:1;display:flex!important;align-items:flex-start;justify-content:center;min-height:244px;margin:0;padding:34px 8px 70px;border:1px solid #244e93;border-radius:9px;background:linear-gradient(155deg,#142762,#181c5b);font-size:62px;line-height:1}
#screenLessons #quizCardContent>.cn-char:after{content:"🔊";position:absolute;left:calc(20.5% - 16px);top:178px;font-size:22px;filter:hue-rotate(75deg)}
#screenLessons #quizCardContent>.cn-pinyin{position:absolute;z-index:2;left:0;top:132px;width:41%;margin:0;color:#e7ebff;font-size:13px;text-align:center}
#screenLessons #quizCardContent>.cn-meaning{display:none!important}
#screenLessons #optionsContainer{grid-column:2;grid-row:1;display:flex!important;gap:7px;margin:0}
#screenLessons #optionsContainer .option-item{min-height:49px;padding:11px 12px 11px 50px;border-radius:9px;background:#092653;font-size:12px}
#screenLessons #optionsContainer .option-item:before{left:10px;top:10px;width:27px;height:27px}
#screenLessons #audioPlayArea,#screenLessons #imageQuestionContainer,#screenLessons #drawArea,#screenLessons #builderArea,#screenLessons #imageOptionsGrid{grid-column:1/-1}
.training-answer-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:7px}
.training-answer-actions button{min-height:51px;border:1px solid #245190;border-radius:9px;color:#fff;background:linear-gradient(145deg,#0a2a5a,#09214a);font:800 12px inherit;cursor:pointer}
.training-answer-actions .training-check{border-color:#d45bd6;background:linear-gradient(110deg,#8748ff,#ff42b7);box-shadow:0 0 16px rgba(221,64,255,.42)}
.training-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px;padding-top:7px;border-top:1px solid rgba(44,112,196,.25)}
.training-tools button{min-height:45px;border:1px solid #164479;border-radius:7px;color:#b9c7e6;background:#061b3b;font:600 9px inherit;text-align:left;padding:8px 10px}
.training-tools button:nth-child(2){color:#d9def3}.training-tools button:nth-child(2)::first-letter{color:#ff4fb5}.training-tools button:nth-child(3)::first-letter{color:#ff7658}
@media(max-width:560px){#screenLessons .training-mode-bar .level-pill{min-height:32px;font-size:8px}#screenLessons .training-intro{height:86px}#screenLessons .training-intro:before{height:93px}#screenLessons .training-speech{top:10px!important;font-size:8px}#screenLessons .training-speech b{font-size:9px}#screenLessons .training-speech span{font-size:8px}#screenLessons .training-streak{top:8px!important;font-size:7px;padding:6px}#screenLessons .training-intro:after{top:66px;font-size:8px}#screenLessons #timerContainer{top:97px;height:5px}#screenLessons #quizCardContent{min-height:0;gap:6px}#screenLessons #quizCardContent>.cn-char{min-height:97px;padding:17px 4px 36px;font-size:34px}#screenLessons #quizCardContent>.cn-pinyin{top:57px;font-size:9px}#screenLessons #quizCardContent>.cn-char:after{left:calc(20.5% - 8px);top:75px;font-size:12px}#screenLessons #optionsContainer{gap:4px}#screenLessons #optionsContainer .option-item{min-height:23px;padding:4px 5px 4px 28px;font-size:8px}#screenLessons #optionsContainer .option-item:before{left:4px;top:3px;width:18px;height:18px;font-size:8px}.training-answer-actions button{min-height:29px;font-size:8px}.training-tools{margin-top:5px}.training-tools button{min-height:28px;padding:4px;font-size:6px}}

/* Training correction: preserve every original mode and use the exact supplied Aimi art */
#screenLessons .training-mode-bar{grid-template-columns:repeat(4,1fr);gap:5px}
#screenLessons .training-mode-bar .level-pill{display:flex!important;min-height:40px;font-size:10px}
#screenLessons .training-mode-bar .level-pill.hidden{display:none!important}
.words-training-intro{margin:18px auto;max-width:720px;padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--panel-2);color:var(--text)}
.words-training-intro-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:var(--text-sub);font-size:13px}.words-training-intro-head strong{color:var(--accent);font-size:11px}.words-training-sections{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.words-training-section{display:flex;align-items:center;gap:10px;width:100%;padding:11px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;text-align:left;cursor:pointer}.words-training-section.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.words-training-section>span{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--accent);color:#fff;font-weight:800}.words-training-section div{display:flex;flex-direction:column;gap:2px;flex:1}.words-training-section small{color:var(--text-sub);font-size:10px}.words-training-section>strong{color:var(--accent);font-size:10px}.words-training-start{width:100%;justify-content:center;margin-top:12px}
#screenLessons .training-intro{height:150px}
#screenLessons .training-intro:before{left:0;top:0;width:28%;height:150px;background-image:url('../assets/training-reference.webp');background-repeat:no-repeat;background-size:400% auto;background-position:left 17.2%;filter:none}
#screenLessons .training-speech{left:27.5%;top:22px!important}
#screenLessons .training-streak{top:18px!important}
#screenLessons .training-intro:after{left:27.5%;top:110px}
#screenLessons #timerContainer{left:calc(27.5% + 50px);top:191px}
#screenLessons #quizCardContent{grid-template-columns:41% 59%}
#screenLessons #quizCardContent>.cn-char{min-height:205px;padding-top:30px;font-size:44px;font-weight:600}
#screenLessons #quizCardContent>.cn-pinyin{top:108px;font-size:12px}
#screenLessons #quizCardContent>.cn-char:after{top:151px;font-size:18px}
#screenLessons #optionsContainer .option-item{min-height:38px;padding-top:8px;padding-bottom:8px;font-size:11px;font-weight:600}
#screenLessons #optionsContainer .option-item:before{top:6px;width:25px;height:25px}
@media(max-width:560px){#screenLessons .training-mode-bar{grid-template-columns:repeat(4,1fr)}#screenLessons .training-mode-bar .level-pill{min-height:29px;padding:4px 2px;font-size:6.5px}#screenLessons .training-intro{height:98px}#screenLessons .training-intro:before{width:28%;height:98px;background-size:400% auto;background-position:left 17.2%}#screenLessons .training-speech{left:28%;top:13px!important}#screenLessons .training-streak{top:10px!important}#screenLessons .training-intro:after{left:28%;top:73px}#screenLessons #timerContainer{left:calc(28% + 30px);top:140px}#screenLessons #quizCardContent>.cn-char{min-height:96px;padding-top:15px;font-size:27px}#screenLessons #quizCardContent>.cn-pinyin{top:52px;font-size:8px}#screenLessons #quizCardContent>.cn-char:after{top:72px;font-size:11px}#screenLessons #optionsContainer .option-item{min-height:22px;padding-top:3px;padding-bottom:3px;font-size:7px}#screenLessons #optionsContainer .option-item:before{top:2px;width:18px;height:18px}}

#screenLessons .training-intro{height:215px}
#screenLessons .training-intro:before{width:250px;height:215px;background-size:900px 900px;background-position:0 -150px}
#screenLessons .training-speech{left:255px}
#screenLessons .training-intro:after{left:255px;top:168px}
#screenLessons #timerContainer{left:305px;top:248px}
@media(max-width:560px){#screenLessons .training-intro{height:92px}#screenLessons .training-intro:before{width:100px;height:92px;background-size:360px 360px;background-position:0 -60px}#screenLessons .training-speech{left:102px;top:10px!important}#screenLessons .training-intro:after{left:102px;top:68px}#screenLessons #timerContainer{left:132px;top:135px}}

#screenLessons .training-intro:before{background-image:url('../assets/aimi-training-hq.webp');background-size:contain;background-position:center bottom;background-repeat:no-repeat;filter:drop-shadow(0 0 15px rgba(0,208,255,.3))}
@media(max-width:560px){#screenLessons .training-intro:before{background-size:contain;background-position:center bottom}}

/* Final training spacing and typography refinement */
#screenLessons .training-intro{height:195px;margin-top:-8px}
#screenLessons .training-intro:before{top:-4px;height:205px}
#screenLessons .training-speech{top:14px!important;font-size:12px}
#screenLessons .training-speech b{font-size:13px}
#screenLessons .training-speech span{font-size:11px}
#screenLessons .training-streak{top:10px!important;font-size:10px}
#screenLessons .training-intro:after{top:150px;font-size:11px}
#screenLessons #timerContainer{top:220px}
#screenLessons #quizCardContent>.cn-pinyin{font-size:13px}
#screenLessons #optionsContainer .option-item{font-size:12px}
.training-answer-actions button{font-size:13px}
.training-tools button{font-size:10px}
@media(max-width:560px){#screenLessons .training-intro{height:82px;margin-top:-4px}#screenLessons .training-intro:before{top:-2px;height:88px}#screenLessons .training-speech{top:7px!important;font-size:8px}#screenLessons .training-speech b{font-size:9px}#screenLessons .training-speech span{font-size:8px}#screenLessons .training-streak{top:6px!important;font-size:7px}#screenLessons .training-intro:after{top:59px;font-size:8px}#screenLessons #timerContainer{top:125px}#screenLessons #quizCardContent>.cn-pinyin{font-size:9px}#screenLessons #optionsContainer .option-item{font-size:8px}.training-answer-actions button{font-size:9px}.training-tools button{font-size:7px}}

.dash-welcome-actions{display:flex;align-items:center;gap:16px}.dash-hsk-switcher{display:flex;padding:3px;border:1px solid #24558d;border-radius:8px;background:#061a39;box-shadow:inset 0 1px rgba(255,255,255,.03)}.dash-hsk-btn{padding:8px 12px;border:0;border-radius:6px;color:#9fb0d2;background:transparent;font:700 10px inherit;cursor:pointer}.dash-hsk-btn.active{color:#fff;background:linear-gradient(110deg,#7c49ff,#f744bd);box-shadow:0 0 13px rgba(196,65,255,.42)}
@media(max-width:640px){.dash-welcome-actions{gap:7px;flex-direction:column;align-items:flex-end}.dash-hsk-btn{padding:6px 8px;font-size:8px}}

.legacy-home-grid{display:none!important}

.profile-hsk-setting h3{display:flex;align-items:center;justify-content:space-between;gap:10px}.profile-hsk-setting h3 span{color:#d6c8ff;font-size:9px;font-weight:700}.global-hsk-selector{display:flex;align-items:center;gap:8px;padding:5px;border:1px solid rgba(49,126,211,.35);border-radius:8px;background:#061936}.global-system-tabs,.global-level-tabs{display:flex;gap:3px}.global-level-tabs{flex:1}.global-system-btn,.global-level-btn{min-height:26px;padding:4px 9px;border:1px solid rgba(49,118,201,.3);border-radius:6px;color:#9fafd0;background:#0a2147;font:700 9px inherit;cursor:pointer}.global-level-btn{flex:1;min-width:28px}.global-system-btn:hover,.global-level-btn:hover{color:#fff;border-color:#675edc}.global-system-btn.active,.global-level-btn.active{color:#fff;border-color:transparent;background:linear-gradient(110deg,#7748f5,#e344ca);box-shadow:0 0 8px rgba(179,62,242,.3)}.profile-hsk-note{display:block;margin-top:4px;color:#7588ad;font-size:7px}
@media(max-width:850px){.global-hsk-selector{align-items:stretch;flex-direction:column}.global-system-tabs button{flex:1}}
.path-level.unavailable{opacity:.48;filter:grayscale(.65);cursor:not-allowed}.path-level.unavailable .path-level-orb{box-shadow:0 7px 0 #20203d}
.path-level.locked .path-level-orb{filter:saturate(.35) grayscale(.35);opacity:.78}.path-level.locked>span:last-child{opacity:.72}
.path-level.completed .path-level-orb{color:#d9fff2;background:linear-gradient(145deg,#4bb69a,#238b78);border-color:rgba(197,255,232,.55);box-shadow:0 8px 0 #216a5b,0 0 18px rgba(42,159,135,.35)}.path-level.completed>span:last-child{opacity:.82}
.path-grammar-examples span small,.path-grammar-examples span em{display:block;margin-top:4px}.path-grammar-examples span small{color:#7fdcff}.path-grammar-examples span em{color:#aebddd;font-style:normal;font-size:11px}

/* Точная композиция открытой дорожки: персонаж, платформы, карточки и светящийся маршрут */
.path-layout.active .path-main{max-width:720px;min-height:900px;padding:18px 22px 70px;background:linear-gradient(180deg,rgba(2,12,35,.08),rgba(1,8,24,.22)),url('../assets/hsk-path-night.webp') center top/cover fixed}.path-layout.active .path-head{max-width:500px}.path-stage-quote{position:absolute;z-index:2;right:25px;top:120px;color:#e7edff;text-align:center;font-size:10px;line-height:1.45;text-shadow:0 2px 8px #000}.path-stage-quote b{color:#d9b8ff}.path-stage-sign{position:absolute;z-index:2;left:16px;top:245px;display:flex;flex-direction:column;transform:rotate(-5deg);padding:10px 17px;border:3px solid #5a2a16;border-radius:3px;color:#29150c;background:linear-gradient(#f6b66e,#de7e3c);box-shadow:0 6px 15px rgba(0,0,0,.45);font-weight:900}.path-stage-sign b{font-size:20px}.path-stage-sign span{font-size:9px}.path-layout.active .learning-path{max-width:560px;padding:52px 0 20px}.path-layout.active .learning-path:before{display:none}.path-layout.active .path-unit{width:430px;min-height:112px;margin:0 0 10px 115px!important;gap:13px;flex-direction:row!important}.path-layout.active .path-unit:nth-child(even){margin-left:190px!important}.path-layout.active .path-unit:not(:last-child):after{content:"";position:absolute;z-index:-1;left:39px;top:80px;width:105px;height:5px;border-radius:8px;background:repeating-linear-gradient(90deg,#fff 0 9px,rgba(203,178,255,.55) 9px 17px);box-shadow:0 0 9px #b58cff;transform:rotate(28deg);transform-origin:left center}.path-layout.active .path-unit:nth-child(even):not(:last-child):after{transform:rotate(152deg);left:39px}.path-layout.active .path-stage-orb{position:relative;overflow:visible;flex:0 0 82px;height:82px;border:9px solid rgba(202,194,244,.46);background:radial-gradient(circle at 50% 35%,#8177b3,#38365d 68%);box-shadow:0 8px 0 #252542,0 0 20px rgba(135,108,235,.5)}.path-layout.active .path-stage-icon{position:relative;z-index:2}.path-layout.active .path-unit:not(.locked):not(.completed) .path-stage-orb{background:radial-gradient(circle at 50% 35%,#44e8ff,#3651c9 68%);box-shadow:0 8px 0 #20367a,0 0 28px #19d9ff}.path-stage-mascot{position:absolute;z-index:4;left:50%;bottom:42px;width:105px;height:auto;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 0 10px rgba(41,218,255,.9))}.path-layout.active .path-unit-header{min-height:72px;padding:10px 13px;border:1px solid rgba(61,111,185,.35);border-radius:9px;text-align:left!important;background:linear-gradient(135deg,rgba(3,19,46,.97),rgba(2,13,34,.94))}.path-layout.active .path-unit-header h3{font-size:15px}.path-layout.active .path-unit-header p{font-size:8px}.path-layout.active .path-unit-header small{position:relative;padding-right:18px}.path-layout.active .path-unit.locked .path-unit-header:after{content:"🔒";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:15px}@media(max-width:720px){.path-stage-quote{display:none}.path-stage-sign{left:8px;top:220px;transform:scale(.8) rotate(-5deg)}.path-layout.active .path-unit,.path-layout.active .path-unit:nth-child(even){width:88%;margin-left:auto!important;margin-right:auto!important}.path-stage-mascot{width:88px}}

.path-grammar-task{max-width:560px;margin:28px auto;text-align:center}.path-grammar-task h3{margin:14px 0 10px;font-size:24px}.path-grammar-pattern{padding:14px;border:1px solid rgba(114,94,235,.5);border-radius:10px;color:#65eaff;background:#081f47;font-size:20px;font-weight:800}.path-grammar-examples{display:grid;gap:8px;margin:16px 0}.path-grammar-examples span{padding:10px;border-radius:8px;color:#e7edff;background:#071a3a}.path-grammar-task .btn-primary{width:100%;margin-top:8px}

/* Open HSK stage map — matched to the approved square reference */
#screenPath>.path-layout.active{width:min(100%,720px);max-width:720px;margin:0 auto}
.path-layout.active .path-main{position:relative;box-sizing:border-box;width:100%;max-width:none;min-height:720px;padding:14px 14px 90px;overflow:hidden;border:1px solid #1684cf;border-radius:4px;background:linear-gradient(180deg,rgba(1,8,29,.02),rgba(1,7,24,.08)),url('../assets/hsk-path-night-square.webp') center top/100% auto no-repeat,#020b22;box-shadow:0 0 28px rgba(0,87,178,.2)}
.path-layout.active .path-main::after{background:linear-gradient(180deg,rgba(0,7,24,.04),transparent 38%,rgba(0,6,22,.22))}
.path-layout.active .path-stages-back{position:absolute;z-index:8;left:8px;top:51px;width:28px;height:28px;margin:0;padding:0;border-radius:50%;background:rgba(3,18,48,.75);font-size:16px}
.path-layout.active .path-head{z-index:5;max-width:none;min-height:61px;padding:0 2px;align-items:flex-start}.path-layout.active .path-kicker{display:none}.path-layout.active .path-head h2{margin:0;font-size:27px;line-height:1.05;letter-spacing:-.7px}.path-layout.active .path-head p{margin-top:5px;font-size:10px}
.path-stage-version{display:flex;gap:3px;margin-left:auto;padding:3px;border:1px solid rgba(81,111,181,.42);border-radius:8px;background:rgba(4,15,43,.72)}.path-stage-version .path-system-btn{min-height:29px;padding:5px 12px;border:0;border-radius:6px;color:#aebcda;background:rgba(10,28,63,.8);font:700 9px inherit;cursor:pointer}.path-stage-version .path-system-btn.active{color:#fff;background:linear-gradient(110deg,#7454ff,#d94cff);box-shadow:0 0 13px rgba(156,76,255,.58)}
.path-stage-quote{right:18px;top:116px;font-size:11px;line-height:1.5}
.path-stage-sign{left:17px;top:300px;min-width:119px;padding:11px 15px 10px;border:4px solid #512514;border-radius:2px;transform:rotate(-5deg);color:#321307;background:linear-gradient(95deg,rgba(84,34,11,.14),transparent 16%,rgba(255,218,142,.14) 48%,rgba(95,34,9,.15)),repeating-linear-gradient(0deg,rgba(95,38,12,.1) 0 2px,transparent 2px 12px),linear-gradient(#f4ad60,#d86f2e);box-shadow:inset 0 0 0 2px rgba(255,199,116,.38),0 7px 14px rgba(0,0,0,.52);text-align:center;text-shadow:0 1px rgba(255,217,154,.45)}.path-stage-sign:before,.path-stage-sign:after{content:"";position:absolute;top:7px;width:5px;height:5px;border-radius:50%;background:#4c2414;box-shadow:0 0 0 1px #b46b3b}.path-stage-sign:before{left:7px}.path-stage-sign:after{right:7px}.path-stage-sign b{font-family:"Microsoft YaHei","Noto Sans SC",sans-serif;font-size:28px;line-height:1}.path-stage-sign span{margin-top:5px;font-size:10px;font-weight:900}
.path-stage-progress-card{position:absolute;z-index:5;left:14px;top:574px;width:155px;padding:12px;border:1px solid rgba(62,129,210,.48);border-radius:8px;background:rgba(3,20,49,.95);box-shadow:0 8px 22px rgba(0,0,0,.35)}.path-stage-progress-card small,.path-stage-progress-card b,.path-stage-progress-card span{display:block}.path-stage-progress-card small{font-size:9px;font-weight:700}.path-stage-progress-card b{margin:7px 0 8px;font-size:18px}.path-stage-progress-card span{margin-top:7px;color:#c0cce5;font-size:8px}.path-stage-progress-card span strong{font-size:8px}.path-stage-progress-card .path-progress-track{height:7px;margin:0;border-radius:7px;background:#163762}.path-stage-progress-card .path-progress-fill{height:100%;border-radius:7px;background:linear-gradient(90deg,#10dfea,#43baff);box-shadow:0 0 9px rgba(21,222,239,.6)}
.path-layout.active .learning-path{z-index:3;width:475px;max-width:none;margin:0 auto;padding:20px 0 40px}.path-layout.active .path-unit,.path-layout.active .path-unit:nth-child(even){width:355px;min-height:104px;margin:0 0 9px 88px!important;gap:10px;flex-direction:row!important}.path-layout.active .path-unit:nth-child(even){margin-left:142px!important}.path-layout.active .path-unit:not(:last-child):after{left:38px;top:75px;width:83px;height:4px;transform:rotate(31deg)}.path-layout.active .path-unit:nth-child(even):not(:last-child):after{left:38px;transform:rotate(149deg)}.path-layout.active .path-stage-orb{flex:0 0 75px;height:75px;border-width:8px}.path-stage-mascot{bottom:37px;width:94px}.path-layout.active .path-unit-header{min-height:66px;padding:9px 12px;border-radius:8px}.path-layout.active .path-unit-header h3{font-size:14px}.path-layout.active .path-unit-header p,.path-layout.active .path-unit-header small{font-size:8px}
@media(max-width:720px){.path-layout.active .path-main{min-height:660px;padding:10px 8px 80px;background-size:auto 660px}.path-layout.active .path-head h2{font-size:21px}.path-layout.active .path-head p{font-size:8px}.path-stage-version .path-system-btn{padding:4px 7px;font-size:7px}.path-layout.active .learning-path{width:100%;padding-top:22px}.path-layout.active .path-unit,.path-layout.active .path-unit:nth-child(even){width:78%;margin-left:16%!important}.path-layout.active .path-unit:nth-child(even){margin-left:22%!important}.path-stage-sign{top:270px;left:5px;transform:scale(.72) rotate(-5deg);transform-origin:left top}.path-stage-progress-card{top:535px;left:7px;width:125px}.path-stage-quote{display:none}}

/* The mountain scene and glowing trail continue to the last stage on every HSK level. */
.path-layout.active .path-main{background-image:linear-gradient(180deg,rgba(1,8,29,.02),rgba(1,7,24,.08)),url('../assets/hsk-path-night-square.webp'),url('../assets/hsk-path-trail-tile.webp');background-size:100% 100%,720px 720px,720px 720px;background-position:center top,center top,center 720px;background-repeat:no-repeat,no-repeat,repeat-y;background-color:#020b22}
.path-layout.active .path-main:before{content:"";position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(90deg,rgba(1,7,24,.12),transparent 23% 77%,rgba(1,7,24,.12))}
.path-encouragement{position:absolute;z-index:4;left:calc(100% + 9px);top:27px;width:108px;padding:9px 8px;border:1px solid rgba(134,119,225,.28);border-radius:10px;color:#f1edff;background:linear-gradient(135deg,rgba(7,23,57,.88),rgba(20,15,60,.82));box-shadow:0 5px 15px rgba(0,0,0,.27),0 0 13px rgba(118,79,232,.12);font-size:9px;font-weight:700;line-height:1.4;text-align:center;text-shadow:0 2px 6px #000}.path-encouragement:before{content:"♡";display:block;margin-bottom:3px;color:#ff72cf;font-size:13px}.path-encouragement:after{content:"";position:absolute;left:-6px;top:16px;width:10px;height:10px;border-left:1px solid rgba(134,119,225,.28);border-bottom:1px solid rgba(134,119,225,.28);background:#0a173b;transform:rotate(45deg)}
.path-encouragement.to-left{right:calc(100% + 9px);left:auto}.path-encouragement.to-left:after{right:-6px;left:auto;border:0;border-top:1px solid rgba(134,119,225,.28);border-right:1px solid rgba(134,119,225,.28)}
@media(max-width:720px){.path-layout.active .path-main{background-size:100% 100%,auto 660px,auto 660px;background-position:center top,center top,center 660px}.path-encouragement{display:none}}

/* Aimi Archive: vocabulary, grammar and future language collections */
.archive-old-grammar-nav{display:none!important}.archive-command{margin-bottom:10px;padding:14px!important;background:linear-gradient(135deg,#061936,#091640 60%,#17134a)!important}.archive-title{display:flex;align-items:center;gap:12px}.archive-title>span{display:grid;place-items:center;width:52px;height:52px;border:1px solid #5d64da;border-radius:14px;color:#7cf0ff;background:linear-gradient(145deg,#102b68,#29185f);box-shadow:0 0 18px rgba(94,80,255,.28);font-size:18px;font-weight:800}.archive-title h1{margin:0;font-size:22px}.archive-title p{margin:4px 0 0;color:#94a8ce;font-size:10px}.archive-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:13px 0}.archive-tabs button{min-height:38px;border:1px solid #234a80;border-radius:9px;color:#aebde0;background:#082049;font:700 10px inherit;cursor:pointer}.archive-tabs button:hover{color:#fff;border-color:#7967ed}.archive-tabs button.active{color:#fff;border-color:transparent;background:linear-gradient(110deg,#744aff,#ed43bd);box-shadow:0 0 15px rgba(185,65,243,.35)}.archive-selectors{display:flex;align-items:flex-end;gap:18px;padding-top:10px;border-top:1px solid rgba(68,114,183,.25)}.archive-selectors>div{display:flex;gap:4px;align-items:center}.archive-selectors small{margin-right:6px;color:#7489b0;font-size:8px;text-transform:uppercase}.archive-system-btn,.archive-level-btn{min-width:38px;min-height:28px;padding:4px 9px;border:1px solid #254a7d;border-radius:7px;color:#aebde0;background:#071d41;font:700 9px inherit;cursor:pointer}.archive-system-btn.active,.archive-level-btn.active{color:#fff;border-color:#8659ef;background:linear-gradient(125deg,#5b46dd,#be3ed2);box-shadow:0 0 9px rgba(134,73,232,.3)}.archive-pane{padding:14px!important}.archive-pane-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.archive-pane-head span{color:#7cecff;font-size:8px;font-weight:800;letter-spacing:1px}.archive-pane-head h2{margin:3px 0 0;font-size:18px}.archive-pane-head>b{padding:7px 10px;border:1px solid #275285;border-radius:8px;color:#d5e2fb;background:#09234c;font-size:9px}.archive-search{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:0 12px;border:1px solid #244e82;border-radius:9px;color:#7392c4;background:#061a3a}.archive-search:focus-within{border-color:#6c63dd;box-shadow:0 0 12px rgba(102,80,223,.18)}.archive-search input{width:100%;height:38px;border:0;outline:0;color:#e9efff;background:transparent;font:10px inherit}.archive-word-list{overflow:hidden;border:1px solid rgba(43,94,153,.45);border-radius:10px;background:rgba(3,16,39,.72)}.archive-word-row{display:grid;grid-template-columns:30px minmax(70px,1fr) minmax(90px,1fr) minmax(180px,2.2fr) 35px;align-items:center;gap:8px;min-height:43px;padding:5px 10px;border-bottom:1px solid rgba(43,94,153,.25)}.archive-word-row:last-child{border-bottom:0}.archive-word-row:hover{background:rgba(23,51,99,.48)}.archive-word-row button{border:0;color:#68dfff;background:transparent;cursor:pointer}.archive-word-row b{font-size:15px}.archive-word-row span{color:#9eb5dc;font-size:9px}.archive-word-row em{color:#d3ddf1;font-size:9px;font-style:normal}.archive-word-row small{color:#586f9c;font-size:8px;text-align:right}.archive-pages{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:12px}.archive-pages button{width:34px;height:29px;border:1px solid #285187;border-radius:7px;color:#fff;background:#09244e;cursor:pointer}.archive-pages button:disabled{opacity:.35;cursor:default}.archive-pages span{color:#aebddd;font-size:9px}.archive-loading{padding:30px;color:#8095bd;text-align:center;font-size:10px}.archive-empty{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.archive-empty.hidden{display:none}.archive-empty>span{display:grid;place-items:center;width:78px;height:78px;border:1px solid #6656da;border-radius:24px;color:#72edff;background:linear-gradient(145deg,#112d67,#29165f);box-shadow:0 0 25px rgba(105,72,230,.3);font-size:30px;font-weight:800}.archive-empty h2{margin:17px 0 6px;font-size:23px}.archive-empty p{max-width:360px;margin:0;color:#9daed0;font-size:11px}.archive-empty small{margin-top:18px;color:#e061c6;font-size:8px;letter-spacing:1.5px}.archive-legacy-engine{display:none!important}#screenGrammar>.neo-card:not(.archive-command){border-top-left-radius:4px;border-top-right-radius:4px}
@media(max-width:650px){.archive-tabs{grid-template-columns:repeat(2,1fr)}.archive-selectors{align-items:stretch;flex-direction:column;gap:7px}.archive-selectors>div{flex-wrap:wrap}.archive-word-row{grid-template-columns:25px 60px 75px 1fr}.archive-word-row small{display:none}.archive-word-row em{font-size:8px}}
.player-level-card{padding:12px 14px;border:1px solid #1d548f;border-radius:10px;background:linear-gradient(145deg,#101d4b,#071832);box-shadow:0 0 16px rgba(49,116,226,.12)}.player-level-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.player-level-head small{display:block;color:#aebddd;font-size:9px;line-height:1.2}.player-level-head strong{display:block;margin-top:3px;color:#fff;font-size:14px}.player-level-head>b{color:#1ee9ff;font-size:16px;line-height:1.2}.player-level-track{height:9px;margin:10px 0 7px;border-radius:8px;background:#142d57;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(95,155,232,.16)}.player-level-track span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#1ee9ff,#8d5bff,#ff4fc0);transition:width .35s ease}.player-level-meta{display:flex;justify-content:space-between;gap:8px;color:#b9c6df;font-size:9px}.player-level-meta span:last-child{text-align:right;color:#8498bf}

/* Светлая тема главной страницы. Базовые переменные уже переключаются через
   data-theme, но утверждённые карточки используют собственные градиенты,
   поэтому здесь явно переопределяем их после всех тёмных стилей. */
:root[data-theme="light"] body {
  background-color:#eef3fb;
  background-image:
    radial-gradient(circle at 10% 10%,rgba(124,58,237,.08) 0%,transparent 45%),
    radial-gradient(circle at 90% 90%,rgba(37,150,190,.07) 0%,transparent 45%);
}
:root[data-theme="light"] body::before {
  opacity:.08;
  background-image:
    linear-gradient(rgba(66,120,190,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(66,120,190,.08) 1px,transparent 1px);
}
:root[data-theme="light"] .app-shell {
  border-color:#b9cce8;
  background:linear-gradient(145deg,#fff,#f2f6fd);
  box-shadow:0 18px 50px rgba(51,86,140,.14);
}
:root[data-theme="light"] .top-bar {
  border-bottom-color:#d6e1f0;
  background:rgba(255,255,255,.94);
  box-shadow:0 6px 22px rgba(63,93,135,.10);
}
:root[data-theme="light"] .nav-pills {
  border-color:#d4deee;
  background:#eaf0f9;
}
:root[data-theme="light"] .icon-circle-btn,
:root[data-theme="light"] .stat-chip {
  color:#22324b;
  border-color:#b7cce8;
  background:#f8fbff;
  box-shadow:0 4px 12px rgba(48,82,132,.08);
}
:root[data-theme="light"] .stat-chip.xp { color:#a66a00; }
:root[data-theme="light"] .life-chip { color:#c83d87; }
:root[data-theme="light"] .menu-btn { color:#5b6b84; }
:root[data-theme="light"] .menu-btn:hover { color:#18243b; }
:root[data-theme="light"] .logo { color:#18243b; }
:root[data-theme="light"] .approved-dashboard .dash-welcome h1,
:root[data-theme="light"] .approved-dashboard .dash-section-title,
:root[data-theme="light"] .approved-dashboard .dash-topics-head h3 { color:#1a2943; }
:root[data-theme="light"] .approved-dashboard .dash-topics-head span { color:#637492; }
:root[data-theme="light"] .approved-dashboard .dash-welcome p { color:#5f6f89; }
:root[data-theme="light"] .approved-dashboard .dash-motto {
  color:#485978;
  text-shadow:none;
}
:root[data-theme="light"] .approved-dashboard .continue-card {
  background:
    linear-gradient(100deg,rgba(83,66,194,.93),rgba(141,73,207,.78) 48%,rgba(224,237,252,.2) 73%),
    url('../assets/aimi-neon.webp') right -5px bottom -110px/auto 410px no-repeat,
    linear-gradient(#eef4ff,#e9effd);
  box-shadow:inset 0 0 32px rgba(58,99,207,.15);
}
:root[data-theme="light"] .approved-dashboard .continue-copy p { color:#f3f4ff; }
:root[data-theme="light"] .approved-dashboard .study-cards button {
  color:#17243d;
  background:linear-gradient(145deg,#fff,#edf4ff);
  border-color:#b7cce8;
}
:root[data-theme="light"] .approved-dashboard .study-cards span { color:#627491; }
:root[data-theme="light"] .approved-dashboard .dash-topics button {
  color:#1b2a45;
  background:#f6f9ff;
  border-color:#bad0eb;
}
:root[data-theme="light"] .approved-dashboard .dash-topics small { color:#667b9c; }
:root[data-theme="light"] .approved-dashboard .level-ring-card,
:root[data-theme="light"] .approved-dashboard .daily-card,
:root[data-theme="light"] .approved-dashboard .player-level-card {
  color:#17243d;
  background:linear-gradient(145deg,#fff,#eef4fc);
  border-color:#b7cce8;
  box-shadow:0 8px 24px rgba(48,82,132,.10);
}
:root[data-theme="light"] .approved-dashboard .level-ring:before { background:#fff; }
:root[data-theme="light"] .approved-dashboard .player-level-head small { color:#5f718e; }
:root[data-theme="light"] .approved-dashboard .player-level-head strong { color:#192843; }
:root[data-theme="light"] .approved-dashboard .player-level-head>b { color:#079eb7; }
:root[data-theme="light"] .approved-dashboard .player-level-track {
  background:#d7e3f1;
  box-shadow:inset 0 0 0 1px rgba(75,122,178,.12);
}
:root[data-theme="light"] .approved-dashboard .player-level-meta { color:#50627e; }
:root[data-theme="light"] .approved-dashboard .player-level-meta span:last-child { color:#6f81a0; }
:root[data-theme="light"] .approved-dashboard .daily-card h3,
:root[data-theme="light"] .approved-dashboard .daily-card .daily-task>span b { color:#1b2943; }
:root[data-theme="light"] .approved-dashboard .daily-card .daily-task-status { color:#079b78; }
:root[data-theme="light"] .approved-dashboard .daily-card>div { border-bottom-color:rgba(79,126,182,.18); }
:root[data-theme="light"] .approved-dashboard .level-ring-card small,
:root[data-theme="light"] .approved-dashboard .level-ring-card p { color:#50627e; }

/* Светлые поля и панели остаются читаемыми после перехода из главного меню. */
:root[data-theme="light"] #screenLessons .neo-card,
:root[data-theme="light"] .archive-command,
:root[data-theme="light"] .archive-pane {
  color:var(--text);
  background:linear-gradient(145deg,#fff,#f1f6fd)!important;
  border-color:#b7cce8!important;
}
:root[data-theme="light"] .archive-tabs button,
:root[data-theme="light"] .archive-search,
:root[data-theme="light"] .archive-system-btn,
:root[data-theme="light"] .archive-level-btn {
  color:#425574;
  background:#f2f6fc;
  border-color:#b7cce8;
}
:root[data-theme="light"] .archive-search input { color:#1d2d47; }
:root[data-theme="light"] .archive-word-list { background:#f8fbff; border-color:#c3d5e9; }
:root[data-theme="light"] .archive-word-row { border-bottom-color:rgba(79,126,182,.18); }
:root[data-theme="light"] .archive-word-row:hover { background:#edf4fc; }
:root[data-theme="light"] .archive-word-row span { color:#5e7495; }
:root[data-theme="light"] .archive-word-row em { color:#3d506d; }

/* Профиль использует отдельные тёмные панели, поэтому переводим их в ту же
   светлую палитру, что и главную страницу. */
:root[data-theme="light"] #screenProfile .profile-layout {
  color:#1a2943;
  background:linear-gradient(145deg,#fff,#f1f6fd)!important;
  border-color:#b7cce8!important;
  box-shadow:0 12px 34px rgba(48,82,132,.12);
}
:root[data-theme="light"] #screenProfile .profile-person {
  color:#1a2943;
  border-right-color:#c7d8eb;
  background:linear-gradient(180deg,#edf5ff,#e5eef9);
}
:root[data-theme="light"] #screenProfile .profile-person>p,
:root[data-theme="light"] #screenProfile .profile-numbers small,
:root[data-theme="light"] #screenProfile .profile-level small { color:#617492; }
:root[data-theme="light"] #screenProfile .profile-level {
  border-color:#b9cfe7;
  background:#f7faff;
}
:root[data-theme="light"] #screenProfile .profile-level i { background:#d6e4f2; }
:root[data-theme="light"] #screenProfile .settings-panel { background:transparent; }
:root[data-theme="light"] #screenProfile .settings-panel section { border-bottom-color:#cbdbea; }
:root[data-theme="light"] #screenProfile .settings-buttons button,
:root[data-theme="light"] #screenProfile .data-actions button {
  color:#405574;
  border-color:#b6cce5;
  background:#f5f9ff;
}
:root[data-theme="light"] #screenProfile .settings-buttons button:hover,
:root[data-theme="light"] #screenProfile .data-actions button:hover { border-color:#7c63e8; }
:root[data-theme="light"] #screenProfile .settings-buttons button.active {
  color:#fff;
  border-color:transparent;
  background:linear-gradient(105deg,#6840e7,#c13fca);
}
:root[data-theme="light"] #screenProfile .settings-panel label {
  color:#536884;
  border-color:#c5d7e9;
  background:#f5f9ff;
}
:root[data-theme="light"] #screenProfile .settings-panel p { color:#637492; }

/* Нефритовая палитра светлого режима: мягкие зелёные акценты вместо
   фиолетово-розового неона. */
:root[data-theme="light"] .menu-btn.active {
  color:#fff;
  background:linear-gradient(135deg,#63c9ad,#238b78)!important;
  box-shadow:0 5px 14px rgba(35,139,120,.22),inset 0 1px rgba(255,255,255,.35);
}
:root[data-theme="light"] .menu-btn:hover { background:rgba(75,166,142,.12); }
:root[data-theme="light"] .approved-dashboard .continue-card {
  background:
    linear-gradient(100deg,rgba(45,105,91,.94),rgba(61,146,121,.78) 48%,rgba(229,246,239,.20) 73%),
    url('../assets/aimi-neon.webp') right -5px bottom -110px/auto 410px no-repeat,
    linear-gradient(#eaf7f2,#e0f0eb);
  box-shadow:inset 0 0 24px rgba(34,128,103,.14);
}
:root[data-theme="light"] .approved-dashboard .lesson-label,
:root[data-theme="light"] .approved-dashboard .continue-copy h2,
:root[data-theme="light"] .approved-dashboard .continue-copy p,
:root[data-theme="light"] .approved-dashboard .continue-progress {
  background:linear-gradient(105deg,rgba(49,119,99,.92),rgba(66,155,127,.68));
}
:root[data-theme="light"] .approved-dashboard .continue-progress i {
  background:rgba(8,53,52,.72);
}
:root[data-theme="light"] .approved-dashboard .continue-progress i span {
  background:linear-gradient(90deg,#9ce7d5,#45b596);
  box-shadow:0 0 8px rgba(112,218,190,.32);
}
:root[data-theme="light"] .approved-dashboard .continue-copy button {
  border-color:#79cdb7;
  background:linear-gradient(105deg,#3eaa8f,#238b78);
  box-shadow:0 5px 14px rgba(35,139,120,.24);
}
:root[data-theme="light"] .approved-dashboard .study-cards button,
:root[data-theme="light"] .approved-dashboard .dash-topics button {
  border-color:#afd7ca;
  box-shadow:0 3px 10px rgba(47,120,101,.06);
}
:root[data-theme="light"] .approved-dashboard .study-cards i,
:root[data-theme="light"] .approved-dashboard .study-cards button:nth-child(2) i,
:root[data-theme="light"] .approved-dashboard .study-cards button:nth-child(3) i,
:root[data-theme="light"] .approved-dashboard .study-cards button:nth-child(4) i {
  color:#fff;
  background:linear-gradient(145deg,#54bfa4,#278e79);
}
:root[data-theme="light"] .approved-dashboard .study-cards small,
:root[data-theme="light"] .approved-dashboard .dash-topics-head button,
:root[data-theme="light"] .approved-dashboard .daily-card header b { color:#218b76; }
:root[data-theme="light"] .approved-dashboard .dash-topics>button>b {
  background:linear-gradient(145deg,#65cbb0,#2b9780);
}
:root[data-theme="light"] .approved-dashboard .dash-topics button:nth-child(2)>b {
  background:linear-gradient(145deg,#7ad0b9,#3d9e87);
}
:root[data-theme="light"] .approved-dashboard .dash-topics i { background:#c6e6dc; }
:root[data-theme="light"] .approved-dashboard .dash-topics em { background:#3cae91; }
:root[data-theme="light"] .approved-dashboard .level-ring {
  box-shadow:0 0 16px rgba(42,159,135,.16);
}
:root[data-theme="light"] .approved-dashboard .level-ring-card button {
  color:#286456;
  background:#dff2eb;
}
:root[data-theme="light"] .approved-dashboard .player-level-track span {
  background:linear-gradient(90deg,#6acdb2,#2d9e84);
}
:root[data-theme="light"] .approved-dashboard .daily-card i {
  background:linear-gradient(145deg,#65cbb0,#2b9780);
}
:root[data-theme="light"] .approved-dashboard .daily-card .daily-task.completed i {
  background:linear-gradient(145deg,#54b99e,#278b76);
}
:root[data-theme="light"] .archive-tabs button.active,
:root[data-theme="light"] .archive-system-btn.active,
:root[data-theme="light"] .archive-level-btn.active {
  color:#fff;
  border-color:transparent;
  background:linear-gradient(110deg,#62c9ad,#238b78);
  box-shadow:0 5px 12px rgba(35,139,120,.18);
}
:root[data-theme="light"] #screenProfile .settings-buttons button.active {
  background:linear-gradient(105deg,#62c9ad,#238b78);
  box-shadow:0 5px 12px rgba(35,139,120,.18);
}
:root[data-theme="light"] #screenProfile .settings-buttons button:hover,
:root[data-theme="light"] #screenProfile .data-actions button:hover { border-color:#4cae95; }
:root[data-theme="light"] #screenProfile .global-hsk-selector {
  border-color:#b5dacc;
  background:#e6f4ef;
}
:root[data-theme="light"] #screenProfile .global-system-btn,
:root[data-theme="light"] #screenProfile .global-level-btn {
  color:#4d7066;
  border-color:#b5dacc;
  background:#f5fbf8;
}
:root[data-theme="light"] #screenProfile .global-system-btn.active,
:root[data-theme="light"] #screenProfile .global-level-btn.active {
  color:#fff;
  border-color:transparent;
  background:linear-gradient(110deg,#62c9ad,#238b78);
  box-shadow:0 4px 10px rgba(35,139,120,.18);
}
:root[data-theme="light"] #screenProfile .profile-hsk-setting h3 span { color:#278b77; }
:root[data-theme="light"] #screenProfile .settings-panel input[type="checkbox"] {
  accent-color:#2b9780;
}

/* Нефритовый светлый стиль для словаря и грамматики. */
:root[data-theme="light"] .archive-command,
:root[data-theme="light"] .archive-pane {
  color:#183b32;
  background:linear-gradient(145deg,#ffffff,#f1f9f6)!important;
  border-color:#afd6c9!important;
  box-shadow:0 10px 26px rgba(42,119,99,.10);
}
:root[data-theme="light"] .archive-title h1,
:root[data-theme="light"] .archive-pane-head h2 { color:#183b32; }
:root[data-theme="light"] .archive-title p,
:root[data-theme="light"] .archive-selectors small,
:root[data-theme="light"] .archive-pages span,
:root[data-theme="light"] .archive-loading { color:#6a8b81; }
:root[data-theme="light"] .archive-tabs button,
:root[data-theme="light"] .archive-system-btn,
:root[data-theme="light"] .archive-level-btn {
  color:#4b6c62;
  border-color:#afd6c9;
  background:#edf8f4;
}
:root[data-theme="light"] .archive-tabs button:hover,
:root[data-theme="light"] .archive-system-btn:hover,
:root[data-theme="light"] .archive-level-btn:hover {
  color:#245d4e;
  border-color:#67bba4;
  background:#dff2eb;
}
:root[data-theme="light"] .archive-tabs button.active,
:root[data-theme="light"] .archive-system-btn.active,
:root[data-theme="light"] .archive-level-btn.active {
  color:#fff;
  border-color:transparent;
  background:linear-gradient(110deg,#62c9ad,#238b78);
  box-shadow:0 5px 12px rgba(35,139,120,.18);
}
:root[data-theme="light"] .archive-selectors { border-top-color:rgba(68,145,120,.22); }
:root[data-theme="light"] .archive-search {
  color:#4b8a78;
  border-color:#afd6c9;
  background:#f5fbf8;
}
:root[data-theme="light"] .archive-search:focus-within {
  border-color:#5cb79d;
  box-shadow:0 0 12px rgba(42,159,135,.16);
}
:root[data-theme="light"] .archive-search input { color:#244d41; }
:root[data-theme="light"] .archive-word-list,
:root[data-theme="light"] .archive-collection-list {
  border-color:#c1e0d5;
  background:#f8fdfb;
}
:root[data-theme="light"] .archive-word-row,
:root[data-theme="light"] .archive-collection-list>* {
  border-bottom-color:rgba(79,145,122,.18);
}
:root[data-theme="light"] .archive-word-row:hover,
:root[data-theme="light"] .archive-collection-list>*:hover { background:#edf8f4; }
:root[data-theme="light"] .archive-word-row button { color:#2b9780; }
:root[data-theme="light"] .archive-word-row span,
:root[data-theme="light"] .archive-word-row em { color:#4f7167; }
:root[data-theme="light"] .archive-word-row small { color:#719287; }
:root[data-theme="light"] .archive-pane-head>div>span { color:#2b9780; }
:root[data-theme="light"] .archive-pane-head>b {
  color:#286456;
  border-color:#afd6c9;
  background:#dff2eb;
}
:root[data-theme="light"] .archive-pages button {
  border-color:#afd6c9;
  color:#286456;
  background:#edf8f4;
}
:root[data-theme="light"] .archive-empty>span {
  border-color:#83c7b2;
  color:#2b9780;
  background:linear-gradient(145deg,#dff4ec,#bde5d8);
  box-shadow:0 0 20px rgba(42,159,135,.18);
}
:root[data-theme="light"] .archive-empty small { color:#2b9780; }

/* Основная карточка грамматики тоже должна оставаться светлой и нефритовой. */
:root[data-theme="light"] #screenGrammar>.neo-card:not(.archive-command) {
  color:#183b32;
  background:linear-gradient(145deg,#ffffff,#f1f9f6)!important;
  border-color:#afd6c9!important;
  box-shadow:0 10px 26px rgba(42,119,99,.10);
}
:root[data-theme="light"] #screenGrammar .structure-box {
  color:#286456;
  background:#e4f4ee;
  border-left-color:#3cae91;
}
:root[data-theme="light"] #screenGrammar .example-item {
  color:#183b32;
  background:#f7fcfa;
  border-color:#c1e0d5;
}
:root[data-theme="light"] #screenGrammar .btn-primary,
:root[data-theme="light"] #screenGrammar .btn-all-list {
  color:#fff;
  background:linear-gradient(110deg,#62c9ad,#238b78);
  box-shadow:0 5px 12px rgba(35,139,120,.18);
}
:root[data-theme="light"] #screenGrammar .nav-btn {
  color:#286456;
  border-color:#afd6c9;
  background:#edf8f4;
}
:root[data-theme="light"] #screenGrammar .nav-btn:hover {
  border-color:#67bba4;
  background:#dff2eb;
}
:root[data-theme="light"] #screenGrammar .options-stack .option-item {
  color:#28584d;
  border-color:#afd6c9;
  background:#f1f9f6;
}
:root[data-theme="light"] #screenGrammar .options-stack .option-item:hover {
  border-color:#67bba4;
  background:#dff2eb;
}
:root[data-theme="light"] #screenGrammar #grammarTitle {
  color:#183b32!important;
}
:root[data-theme="light"] #screenGrammar #grammarIdBadge,
:root[data-theme="light"] #screenGrammar #grammarExplanation,
:root[data-theme="light"] #screenGrammar #grammarCounterIndicator,
:root[data-theme="light"] #screenGrammar h4,
:root[data-theme="light"] #screenGrammar #grammarReadView [style*="var(--text-sub)"] {
  color:#6a8b81!important;
}
:root[data-theme="light"] #screenGrammar .example-item [style*="var(--text)"] {
  color:#183b32!important;
}
:root[data-theme="light"] #screenGrammar .example-item [style*="var(--accent)"] {
  color:#2b9780!important;
}
:root[data-theme="light"] #screenGrammar .example-item [style*="var(--text-sub)"] {
  color:#6a8b81!important;
}
:root[data-theme="light"] #screenGrammar #grammarReadView [style*="var(--accent)"] {
  color:#2b9780!important;
}

/* Карточки загадок и идиом в светлом архиве. */
:root[data-theme="light"] .archive-collection-list {
  display:grid;
  gap:10px;
}
:root[data-theme="light"] .archive-collection-card {
  padding:14px 16px;
  border:1px solid #c1e0d5;
  border-radius:10px;
  color:#183b32;
  background:#f7fcfa;
  box-shadow:0 4px 12px rgba(42,119,99,.06);
}
:root[data-theme="light"] .archive-collection-card h3 {
  margin:0 0 7px;
  color:#245d4e;
  font-size:15px;
}
:root[data-theme="light"] .archive-collection-card p {
  margin:5px 0 0;
  color:#55756a;
  font-size:11px;
  line-height:1.45;
}
:root[data-theme="light"] .archive-collection-card .collection-pinyin {
  color:#2b9780;
  font-weight:600;
}
:root[data-theme="light"] .archive-collection-card .collection-meaning {
  color:#3f675b;
}
:root[data-theme="light"] .archive-collection-card details {
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid rgba(79,145,122,.18);
}
:root[data-theme="light"] .archive-collection-card summary {
  color:#2b9780;
  cursor:pointer;
  font-weight:700;
}
:root[data-theme="light"] .archive-collection-card details p {
  padding:8px 10px;
  border-radius:7px;
  background:#eaf7f2;
}

/* Нефритовая Айми для главной карточки продолжения в светлой теме. */
:root[data-theme="light"] .approved-dashboard .continue-card {
  background:
    linear-gradient(100deg,rgba(45,105,91,.94),rgba(61,146,121,.78) 48%,rgba(229,246,239,.20) 73%),
    url('../assets/aimi-neon-jade.webp') right -5px bottom -110px/auto 410px no-repeat,
    linear-gradient(#eaf7f2,#e0f0eb);
}
:root[data-theme="light"] .logo-accent {
  background:linear-gradient(180deg,#62c9ad,#238b78);
  -webkit-background-clip:text;
  background-clip:text;
}
:root[data-theme="light"] .life-plus-btn {
  color:#fff;
  background:linear-gradient(145deg,#62c9ad,#238b78);
  box-shadow:0 0 10px rgba(35,139,120,.28);
}
:root[data-theme="light"] .life-plus-btn:hover {
  background:linear-gradient(145deg,#7ad8bf,#2b9780);
  box-shadow:0 0 14px rgba(35,139,120,.38);
}
:root[data-theme="light"] #lifeShopModal {
  background:rgba(27,82,68,.30);
}
:root[data-theme="light"] #lifeShopModal .modal-card {
  color:#183b32;
  border-color:#afd6c9;
  background:linear-gradient(145deg,#ffffff,#f1f9f6);
  box-shadow:0 18px 42px rgba(42,119,99,.18);
}
:root[data-theme="light"] #lifeShopModal .modal-header {
  border-bottom-color:#c1e0d5;
}
:root[data-theme="light"] #lifeShopModal .modal-header h3 {
  color:#183b32!important;
}
:root[data-theme="light"] #lifeShopModal .modal-header p,
:root[data-theme="light"] #lifeShopModal .modal-header button {
  color:#6a8b81!important;
}
:root[data-theme="light"] #lifeShopModal .life-shop-option {
  color:#183b32;
  border-color:#c1e0d5;
  background:#f7fcfa;
}
:root[data-theme="light"] #lifeShopModal .life-shop-option:hover {
  border-color:#67bba4;
  background:#eaf7f2;
  box-shadow:0 5px 14px rgba(42,119,99,.10);
}
:root[data-theme="light"] #lifeShopModal .life-shop-title { color:#245d4e; }
:root[data-theme="light"] #lifeShopModal .life-shop-desc { color:#6a8b81; }
:root[data-theme="light"] #lifeShopModal .life-shop-price { color:#2b9780; }

/* Нефритовый светлый стиль экрана тренировки. */
:root[data-theme="light"] #screenLessons .neo-card {
  color:#183b32;
  background:linear-gradient(145deg,#fff,#f1f9f6)!important;
  border-color:#afd6c9!important;
  box-shadow:0 12px 30px rgba(42,119,99,.10);
}
:root[data-theme="light"] #screenLessons .training-mode-bar .level-pill {
  color:#4b6c62;
  border-color:#afd6c9;
  background:#edf8f4;
}
:root[data-theme="light"] #screenLessons .training-mode-bar .level-pill:hover {
  color:#235b4d;
  border-color:#67bba4;
  background:#dff2eb;
}
:root[data-theme="light"] #screenLessons .training-mode-bar .level-pill.active {
  color:#fff;
  border-color:transparent;
  background:linear-gradient(110deg,#62c9ad,#238b78);
  box-shadow:0 5px 12px rgba(35,139,120,.18);
}
:root[data-theme="light"] #screenLessons .training-mode-bar .errors-btn {
  color:#b54d62;
  border-color:#e6b4be;
  background:#fff5f6;
}
:root[data-theme="light"] #screenLessons .training-speech b { color:#2d6557; }
:root[data-theme="light"] #screenLessons .training-speech span { color:#6a8b81; }
:root[data-theme="light"] #screenLessons .training-intro:after { color:#3b7568!important; }
:root[data-theme="light"] #screenLessons .training-streak {
  color:#3a695d;
  border-color:#afd6c9;
  background:#e2f3ed;
  box-shadow:0 4px 12px rgba(42,119,99,.10);
}
:root[data-theme="light"] #screenLessons #lessonTopicTag { color:#278b77!important; }
:root[data-theme="light"] #screenLessons #timerContainer {
  background:#d5ebe4;
  box-shadow:inset 0 0 0 1px rgba(53,131,110,.10);
}
:root[data-theme="light"] #screenLessons #timerBarFill {
  background:linear-gradient(90deg,#65cbb0,#2b9780);
  box-shadow:none;
}
:root[data-theme="light"] #screenLessons #quizCardContent>.cn-char {
  color:#183b32;
  border-color:#9ecfbe;
  background:linear-gradient(155deg,#e3f4ee,#cce9df);
  box-shadow:0 5px 16px rgba(42,119,99,.10);
}
:root[data-theme="light"] #screenLessons #quizCardContent>.cn-pinyin,
:root[data-theme="light"] #screenLessons #quizCardContent>.cn-meaning {
  color:#3f6b5e;
}
:root[data-theme="light"] #screenLessons #optionsContainer .option-item {
  color:#23463c;
  border-color:#afd6c9;
  background:#f5fbf8;
  box-shadow:0 3px 9px rgba(42,119,99,.06);
}
:root[data-theme="light"] #screenLessons #optionsContainer .option-item:hover {
  border-color:#58ae95;
  background:#e7f5f0;
}
:root[data-theme="light"] #screenLessons #optionsContainer .option-item:before {
  color:#fff;
  background:#4daa91;
}
:root[data-theme="light"] #screenLessons .training-answer-actions button {
  color:#3c675b;
  border-color:#afd6c9;
  background:#edf8f4;
}
:root[data-theme="light"] #screenLessons .training-answer-actions button:hover {
  border-color:#55ad94;
  background:#e0f2eb;
}
:root[data-theme="light"] #screenLessons .training-answer-actions .training-check {
  color:#fff;
  border-color:#3b9f86;
  background:linear-gradient(110deg,#62c9ad,#238b78);
  box-shadow:0 5px 13px rgba(35,139,120,.18);
}
:root[data-theme="light"] #screenLessons .training-tools {
  border-top-color:rgba(74,145,124,.22);
}
:root[data-theme="light"] #screenLessons .training-tools button {
  color:#4b6c62;
  border-color:#afd6c9;
  background:#f4faf7;
}
:root[data-theme="light"] #screenLessons .training-tools button:hover {
  border-color:#55ad94;
  background:#e4f4ee;
}
:root[data-theme="light"] #screenLessons .training-tools button:nth-child(2) { color:#387b69; }
:root[data-theme="light"] #screenLessons .training-tools button:nth-child(2)::first-letter,
:root[data-theme="light"] #screenLessons .training-tools button:nth-child(3)::first-letter { color:#2b9780; }
:root[data-theme="light"] #screenLessons .image-mode-subnav {
  border-color:#afd6c9;
  background:#edf8f4;
}
:root[data-theme="light"] #screenLessons .image-sub-btn.active,
:root[data-theme="light"] #screenLessons .rate-btn.active {
  color:#fff;
  background:#2b9780;
  border-color:#2b9780;
}

/* Светлый фон Пути HSK — выбранный нефритовый сад с мостами и пагодой. */
:root[data-theme="light"] .path-layout.active .path-main {
  border-color:#9ecfbe;
  background-image:
    linear-gradient(180deg,rgba(240,250,246,.04),rgba(239,249,245,.18)),
    url('../assets/hsk-path-light-square.webp');
  background-size:100% 100%,100% 100%;
  background-position:center top,center top;
  background-repeat:no-repeat,no-repeat;
  background-color:#eaf7f1;
  box-shadow:0 8px 28px rgba(42,119,99,.12);
}
:root[data-theme="light"] .path-layout.active .path-main::before {
  background:linear-gradient(90deg,rgba(235,249,243,.18),transparent 23% 77%,rgba(235,249,243,.18));
}
:root[data-theme="light"] .path-layout.active .path-main::after {
  background:linear-gradient(180deg,rgba(238,250,245,.04),transparent 38%,rgba(227,245,237,.16));
}
:root[data-theme="light"] .path-layout.active .path-head { text-shadow:0 1px 5px rgba(255,255,255,.72); }
:root[data-theme="light"] .path-layout.active .path-head h2 { color:#204d40; }
:root[data-theme="light"] .path-layout.active .path-head p { color:#5a7d70; }
:root[data-theme="light"] .path-layout.active .path-stages-back {
  color:#35695b;
  border-color:#a6d4c4;
  background:rgba(245,252,249,.9);
}
:root[data-theme="light"] .path-stage-version {
  border-color:#a9d6c7;
  background:rgba(234,247,241,.88);
}
:root[data-theme="light"] .path-stage-version .path-system-btn {
  color:#4b7064;
  background:rgba(248,253,251,.92);
}
:root[data-theme="light"] .path-stage-version .path-system-btn.active {
  color:#fff;
  background:linear-gradient(110deg,#62c9ad,#238b78);
  box-shadow:0 4px 10px rgba(35,139,120,.18);
}
:root[data-theme="light"] .path-stage-quote {
  color:#3d6c5e;
  text-shadow:0 1px 4px rgba(255,255,255,.8);
}
:root[data-theme="light"] .path-stage-quote b { color:#238b78; }
:root[data-theme="light"] .path-layout.active .path-unit-header {
  color:#244d41;
  border-color:#abd5c6;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(232,247,240,.90));
  box-shadow:0 6px 16px rgba(42,119,99,.10);
}
:root[data-theme="light"] .path-layout.active .path-unit-header span,
:root[data-theme="light"] .path-layout.active .path-unit-header small { color:#5b7c70; }
:root[data-theme="light"] .path-layout.active .path-unit-header p { color:#55756a; }
:root[data-theme="light"] .path-layout.active .path-unit:not(:last-child)::after {
  background:repeating-linear-gradient(90deg,#fff 0 9px,#a7d8c8 9px 17px);
  box-shadow:0 0 8px rgba(73,161,135,.30);
}
:root[data-theme="light"] .path-layout.active .path-stage-orb {
  border-color:rgba(255,255,255,.70);
  color:#fff;
  background:radial-gradient(circle at 50% 35%,#91d8c1,#4a9e87 68%);
  box-shadow:0 8px 0 #6a9f90,0 0 18px rgba(42,139,113,.18);
}
:root[data-theme="light"] .path-layout.active .path-unit:not(.locked):not(.completed) .path-stage-orb {
  background:radial-gradient(circle at 50% 35%,#b5e8d6,#4ca58d 68%);
  box-shadow:0 8px 0 #629e8c,0 0 20px rgba(42,159,135,.22);
}
:root[data-theme="light"] .path-layout.active .path-unit.completed .path-stage-orb {
  background:linear-gradient(145deg,#62c9ad,#238b78);
  box-shadow:0 8px 0 #4b8777,0 0 18px rgba(35,139,120,.20);
}
:root[data-theme="light"] .path-stage-progress-card {
  color:#244d41;
  border-color:#a9d6c7;
  background:rgba(250,255,252,.93);
  box-shadow:0 7px 18px rgba(42,119,99,.12);
}
:root[data-theme="light"] .path-stage-progress-card span { color:#5b7c70; }
:root[data-theme="light"] .path-stage-progress-card .path-progress-track { background:#d2ebe2; }
:root[data-theme="light"] .path-stage-progress-card .path-progress-fill {
  background:linear-gradient(90deg,#63cbb0,#2b9780);
  box-shadow:none;
}
:root[data-theme="light"] .path-encouragement {
  color:#37685b;
  text-shadow:none;
  border-color:#add6c8;
  background:linear-gradient(135deg,rgba(250,255,252,.94),rgba(231,246,240,.90));
  box-shadow:0 5px 15px rgba(42,119,99,.10);
}
:root[data-theme="light"] .path-encouragement:after {
  background:#e8f6f0;
  border-color:#add6c8;
}

/* Тот же выбранный фон используется на обзорном экране уровней. */
:root[data-theme="light"] .path-overview {
  border-color:#a4d2c3;
  background-image:
    linear-gradient(180deg,rgba(240,250,246,.04),rgba(239,249,245,.18)),
    url('../assets/hsk-path-light-square.webp');
  background-position:center,center;
  background-size:cover,cover;
  box-shadow:0 10px 28px rgba(42,119,99,.12);
}
:root[data-theme="light"] .path-overview::after {
  background:linear-gradient(90deg,rgba(237,249,244,.42),transparent 42%,rgba(237,249,244,.20));
}
:root[data-theme="light"] .path-overview-head { text-shadow:0 1px 5px rgba(255,255,255,.82); }
:root[data-theme="light"] .path-overview-head h1 { color:#204d40; }
:root[data-theme="light"] .path-overview-head p { color:#56796e; }
:root[data-theme="light"] .path-version button {
  color:#4c7065;
  border-color:#a9d6c7;
  background:rgba(247,253,250,.90);
}
:root[data-theme="light"] .path-version button.active {
  color:#fff;
  background:linear-gradient(105deg,#62c9ad,#238b78);
  box-shadow:0 5px 12px rgba(35,139,120,.18);
}
:root[data-theme="light"] .path-level { color:#244d41; }
:root[data-theme="light"] .path-level>span:last-child {
  background:rgba(250,255,252,.90);
  border:1px solid rgba(169,214,199,.90);
  box-shadow:0 6px 16px rgba(42,119,99,.10);
}
:root[data-theme="light"] .path-level small { color:#5b7c70; }
:root[data-theme="light"] .path-level-orb {
  border-color:rgba(255,255,255,.75);
  background:linear-gradient(145deg,#91d8c1,#4a9e87);
  box-shadow:0 8px 0 #6a9f90,0 0 18px rgba(42,139,113,.18);
}
:root[data-theme="light"] .path-level.current .path-level-orb {
  background:linear-gradient(145deg,#b5e8d6,#4ca58d);
  box-shadow:0 8px 0 #629e8c,0 0 20px rgba(42,159,135,.22);
}
:root[data-theme="light"] .path-level i { background:#d2ebe2; }
:root[data-theme="light"] .path-level em { background:#3cae91; }
:root[data-theme="light"] .path-map-copy {
  color:#37685b;
  text-shadow:0 1px 5px rgba(255,255,255,.82);
}
:root[data-theme="light"] .path-progress-card {
  border-color:#a9d6c7;
  background:rgba(250,255,252,.92);
  box-shadow:0 7px 18px rgba(42,119,99,.12);
}
:root[data-theme="light"] .path-progress-card b { color:#244d41; }
:root[data-theme="light"] .path-progress-card div { background:#d2ebe2; }
:root[data-theme="light"] .path-progress-card span { background:#3cae91; }
:root[data-theme="light"] .path-progress-card small { color:#5b7c70; }

/* Единая мягкая мятная основа светлой темы: вместо резкого белого —
   спокойный нефритовый оттенок во всех меню и панелях. */
:root[data-theme="light"] {
  color-scheme:light;
  --bg:#eaf5f1;
  --panel:#f3faf7;
  --panel-2:#e9f4ef;
  --pill:#deefe8;
  --border:#c4dfd3;
  --text:#183b32;
  --text-sub:#648077;
  --accent:#238b78;
  --accent-2:#16806e;
  --accent-soft:rgba(35,139,120,.10);
  --green:#2b9780;
  --grad:linear-gradient(135deg,#62c9ad 0%,#238b78 100%);
  --nav-active:linear-gradient(135deg,#62c9ad,#238b78);
  --shadow:0 18px 42px rgba(42,119,99,.13);
}
:root[data-theme="light"] body {
  background-color:#dff1e8;
  background-image:
    radial-gradient(circle at 10% 10%,rgba(74,177,147,.16) 0%,transparent 45%),
    radial-gradient(circle at 90% 90%,rgba(35,139,120,.11) 0%,transparent 45%);
}
:root[data-theme="light"] .app-shell {
  background:linear-gradient(145deg,#eaf7f1,#e1f1e9)!important;
  border-color:#c4dfd3;
}
:root[data-theme="light"] .top-bar {
  background:rgba(229,243,236,.97)!important;
  border-bottom-color:#cfe5da;
}
:root[data-theme="light"] .nav-pills { background:#d8ece3; border-color:#b9dacc; }
:root[data-theme="light"] .icon-circle-btn,
:root[data-theme="light"] .stat-chip {
  background:#e8f5ef!important;
  border-color:#bddbce;
}
:root[data-theme="light"] .approved-dashboard .study-cards button {
  background:linear-gradient(145deg,#e8f5ef,#dcefe6);
  border-color:#b9dace;
}
:root[data-theme="light"] .approved-dashboard .dash-topics button {
  background:#e4f3ec;
  border-color:#beddd1;
}
:root[data-theme="light"] .approved-dashboard .level-ring-card,
:root[data-theme="light"] .approved-dashboard .daily-card,
:root[data-theme="light"] .approved-dashboard .player-level-card {
  background:linear-gradient(145deg,#e6f4ed,#dcefe6);
  border-color:#b9dace;
}
:root[data-theme="light"] .approved-dashboard .level-ring:before { background:#dcefe6; }
:root[data-theme="light"] #screenProfile .profile-layout {
  background:linear-gradient(145deg,#e7f5ee,#dcefe6)!important;
  border-color:#b9dace!important;
}
:root[data-theme="light"] #screenProfile .profile-person {
  background:linear-gradient(155deg,#d8eee4 0%,#cfe9df 58%,#c6e3d8 100%)!important;
  border-right-color:#a9d6c7!important;
}
:root[data-theme="light"] #screenProfile .profile-account-row,
:root[data-theme="light"] #screenProfile .profile-numbers b,
:root[data-theme="light"] #screenProfile .profile-level,
:root[data-theme="light"] #screenProfile .profile-hsk-context {
  background:rgba(239,251,246,.58);
  border-color:#a9d6c7;
}
:root[data-theme="light"] #screenLessons .neo-card {
  background:linear-gradient(145deg,#e6f4ed,#dcefe6)!important;
  border-color:#afd6c9!important;
}
:root[data-theme="light"] .archive-command,
:root[data-theme="light"] .archive-pane,
:root[data-theme="light"] #screenGrammar>.neo-card:not(.archive-command) {
  background:linear-gradient(145deg,#e7f5ee,#dcefe6)!important;
}
:root[data-theme="light"] .modal-card,
:root[data-theme="light"] #screenExam .card,
:root[data-theme="light"] .exam-page-card,
:root[data-theme="light"] .league-page-card {
  background:linear-gradient(145deg,#e7f5ee,#dcefe6)!important;
  border-color:#b9dace;
}
:root[data-theme="light"] .modal-search-box { background:#e7f3ed; }
:root[data-theme="light"] .modal-search-input,
:root[data-theme="light"] .modal-topic-btn {
  background:#f1faf6;
  border-color:#c1e0d5;
}
:root[data-theme="light"] .path-level>span:last-child,
:root[data-theme="light"] .path-progress-card {
  background:rgba(220,242,232,.97);
  border-color:#a7d5c3;
}

/* Контраст текста на мягком мятном фоне */
:root[data-theme="light"] body { color:#183b32!important; }
:root[data-theme="light"] .approved-dashboard .dash-welcome h1,
:root[data-theme="light"] .approved-dashboard .dash-section-title,
:root[data-theme="light"] .approved-dashboard .dash-topics-head h3,
:root[data-theme="light"] .approved-dashboard .level-ring-card h2,
:root[data-theme="light"] .approved-dashboard .daily-card h3,
:root[data-theme="light"] .approved-dashboard .player-level-head strong,
:root[data-theme="light"] .approved-dashboard .player-level-head small,
:root[data-theme="light"] .approved-dashboard .player-level-meta,
:root[data-theme="light"] .approved-dashboard .study-cards b,
:root[data-theme="light"] .approved-dashboard .study-cards span,
:root[data-theme="light"] .approved-dashboard .dash-topics span,
:root[data-theme="light"] .approved-dashboard .dash-topics small,
:root[data-theme="light"] .approved-dashboard .level-ring-card p,
:root[data-theme="light"] .approved-dashboard .dash-welcome .welcome-title {
  color:#244d41!important;
}
:root[data-theme="light"] .approved-dashboard .dash-welcome p,
:root[data-theme="light"] .approved-dashboard .dash-motto,
:root[data-theme="light"] .approved-dashboard .dash-topics-head span,
:root[data-theme="light"] .approved-dashboard .level-ring-card small,
:root[data-theme="light"] .approved-dashboard .daily-card small {
  color:#5f776f!important;
}
:root[data-theme="light"] .approved-dashboard .dash-topics-head button,
:root[data-theme="light"] .approved-dashboard .dash-topics-head a {
  color:#238b78!important;
}
:root[data-theme="light"] .approved-dashboard .player-level-head>b {
  color:#238b78!important;
}
:root[data-theme="light"] .approved-dashboard .player-level-track span {
  background:linear-gradient(90deg,#4bb69a,#238b78)!important;
}
:root[data-theme="light"] .top-rating-btn{color:#237b68;background:#d8eee3;border-color:#9ccfbb}.top-rating-btn:hover{background:#c8e7d8}
:root[data-theme="light"] .path-stage-mascot{filter:hue-rotate(290deg) saturate(.8) brightness(1.04) drop-shadow(0 0 10px rgba(42,159,135,.42));}
:root[data-theme="light"] #screenLessons .training-intro:before {
  background-image:url('../assets/aimi-neon-jade.webp')!important;
  filter:drop-shadow(0 0 12px rgba(42,159,135,.28));
}
.path-level {
  box-sizing:border-box;
  width:320px;
  min-height:102px;
}
.path-level>span:last-child {
  box-sizing:border-box;
  min-width:0;
  min-height:62px;
  overflow:hidden;
}
.path-level b,
.path-level small {
  overflow-wrap:anywhere;
  white-space:normal;
}
:root:not([data-theme="light"]) .path-level>span:last-child {
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  padding:10px 0;
}
:root[data-theme="light"] .logo { color:#183b32!important; }
:root[data-theme="light"] .logo span { color:#238b78!important; }

/* Финальный оттенок: фон заметно мятный, но остаётся светлым. */
:root[data-theme="light"] body {
  background-color:#a9d5bb!important;
  background-image:
    radial-gradient(circle at 12% 8%,rgba(104,196,160,.18),transparent 42%),
    radial-gradient(circle at 88% 92%,rgba(49,151,117,.12),transparent 45%);
}
:root[data-theme="light"] .app-shell {
  background:linear-gradient(145deg,#bfe3cc,#b2dcc2)!important;
}
:root[data-theme="light"] .top-bar { background:rgba(185,222,199,.99)!important; }
:root[data-theme="light"] #screenHome,
:root[data-theme="light"] #screenPath,
:root[data-theme="light"] #screenLessons,
:root[data-theme="light"] #screenKnowledge,
:root[data-theme="light"] #screenProfile,
:root[data-theme="light"] #screenGrammar,
:root[data-theme="light"] #screenExam {
  background:transparent!important;
}
:root[data-theme="light"] .screen-view {
  background:#b7dec5!important;
}
:root[data-theme="light"] .approved-dashboard {
  background:#b7dec5;
}
:root[data-theme="light"] .approved-dashboard .level-ring-card,
:root[data-theme="light"] .approved-dashboard .daily-card,
:root[data-theme="light"] .approved-dashboard .player-level-card,
:root[data-theme="light"] .approved-dashboard .study-cards button,
:root[data-theme="light"] .approved-dashboard .dash-topics button {
  background:linear-gradient(145deg,#d9eee3,#cee8da);
}

/* Экзамен HSK: убираем оставшиеся неоновые тёмные панели в светлой теме. */
:root[data-theme="light"] #screenExam .exam-page-card,
:root[data-theme="light"] #screenExam .exam-actions,
:root[data-theme="light"] #screenExam .exam-detail-grid section,
:root[data-theme="light"] #screenExam .exam-history {
  color:#214d3e!important;
  background:linear-gradient(145deg,#cbe8d7,#b9ddc8)!important;
  border-color:#91c7aa!important;
  box-shadow:0 8px 22px rgba(42,119,99,.10)!important;
}
:root[data-theme="light"] #screenExam .exam-level-card {
  color:#214d3e!important;
  background:#b9ddc9!important;
  border-color:#8fc4a8!important;
}
:root[data-theme="light"] .approved-dashboard .level-ring-card {
  background:linear-gradient(145deg,#c9e7d8,#b9dccb)!important;
  border-color:#91c7aa!important;
}
:root[data-theme="light"] .approved-dashboard .level-ring {
  background:conic-gradient(#2a9f87 0 32%,#a9d3c0 32%)!important;
  box-shadow:0 0 18px rgba(42,159,135,.18);
}
:root[data-theme="light"] .approved-dashboard .level-ring:before {
  background:#d7eee3!important;
}
:root[data-theme="light"] #screenExam .exam-level-card.active {
  color:#fff!important;
  background:linear-gradient(145deg,#54b997,#238b78)!important;
  border-color:#238b78!important;
}
:root[data-theme="light"] #screenExam .exam-level-card span,
:root[data-theme="light"] #screenExam .exam-actions p,
:root[data-theme="light"] #screenExam .exam-detail-grid p,
:root[data-theme="light"] #screenExam .exam-history span {
  color:#4d7564!important;
}
:root[data-theme="light"] #screenExam .exam-detail-grid section:nth-child(2) button {
  color:#214d3e!important;
  background:#b5dbc5!important;
  border-color:#8fc4a8!important;
}
:root[data-theme="light"] #screenExam .exam-detail-grid section:nth-child(2) button b {
  color:#fff!important;
  background:linear-gradient(145deg,#54b997,#238b78)!important;
}
:root[data-theme="light"] #screenExam .exam-detail-grid small {
  color:#238b78!important;
}
:root[data-theme="light"] #screenExam .exam-actions .btn-black,
:root[data-theme="light"] #screenExam .exam-detail-grid .btn-primary {
  color:#fff!important;
  background:linear-gradient(145deg,#54b997,#238b78)!important;
  border-color:#238b78!important;
  box-shadow:0 8px 18px rgba(35,139,120,.22)!important;
}
:root[data-theme="light"] #screenExam .exam-history>div {
  border-bottom-color:rgba(54,126,94,.20)!important;
}
:root[data-theme="light"] #screenExam .exam-history b {
  color:#238b78!important;
}

/* Keep the handwriting workspace compact so the task starts near the top. */
#screenLessons .training-intro.writing-active {
  height: 92px !important;
}
#screenLessons .training-intro.writing-active:before {
  height: 108px !important;
}
#screenLessons .training-intro.writing-active .training-speech {
  top: 10px !important;
}
#screenLessons #quizCardContent.draw-mode {
  margin-top: -10px !important;
}

@media (max-width: 560px) {
  #screenLessons .training-intro.writing-active {
    height: 74px !important;
  }
  #screenLessons .training-intro.writing-active:before {
    height: 78px !important;
  }
  #screenLessons #quizCardContent.draw-mode {
    margin-top: -6px !important;
  }
}

/* HSK writing sentence builder uses the prompt area instead of the word card. */
#screenLessons #quizCardContent.writing-sentence-mode > .cn-char {
  display: none !important;
}
#screenLessons #quizCardContent.writing-sentence-mode > .cn-meaning {
  display: block !important;
  grid-column: 1 / -1;
  margin: 0 0 14px !important;
  padding: 14px 16px;
  color: var(--text) !important;
  font-size: 16px !important;
  font-weight: 700;
  text-align: center;
}

/* Dark theme direction controls: use the same purple accent as the rest of the night UI. */
:root[data-theme="dark"] #screenLessons .words-direction-btn {
  border-color: #4c2b86 !important;
  color: #cfc1ff !important;
  background: #081a3a !important;
}
:root[data-theme="dark"] #screenLessons .words-direction-btn.active {
  border-color: #a855f7 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #7c3aed, #c026d3) !important;
  box-shadow: 0 4px 12px rgba(139,92,246,.32) !important;
}
:root[data-theme="dark"] #screenLessons .writing-format-btn {
  border-color: #4c2b86 !important;
  color: #cfc1ff !important;
  background: #081a3a !important;
}
:root[data-theme="dark"] #screenLessons .writing-format-btn.active {
  border-color: #a855f7 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #7c3aed, #c026d3) !important;
  box-shadow: 0 4px 12px rgba(139,92,246,.32) !important;
}
:root[data-theme="dark"] #screenLessons .training-heart {
  color: #c026d3 !important;
  text-shadow: 0 0 8px rgba(192,38,211,.55);
}
#screenLessons #quizCardContent.reading-words-mode > .cn-meaning {
  display: block !important;
  grid-column: 1 / -1;
  margin: 0 0 12px !important;
  color: var(--text-sub) !important;
  font-size: 14px !important;
  font-weight: 700;
  text-align: center;
}
#screenLessons #quizCardContent.reading-words-mode {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-height: 0 !important;
  padding: 12px 8px 18px !important;
}
#screenLessons #quizCardContent.reading-words-mode > .cn-char {
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 16px 10px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-size: 30px !important;
  line-height: 1.35 !important;
  text-align: center;
}
#screenLessons #quizCardContent.reading-words-mode > .cn-char:after {
  display: none !important;
}
#screenLessons #quizCardContent.reading-words-mode > .cn-meaning {
  order: 2;
  margin: 0 0 4px !important;
  padding: 0 8px !important;
  font-size: 13px !important;
}
#screenLessons #quizCardContent.reading-words-mode > #optionsContainer {
  order: 3;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
#screenLessons #quizCardContent.reading-order-mode {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 8px 0 20px !important;
}
#screenLessons #quizCardContent.reading-order-mode > #quizChar {
  white-space: pre-line !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  text-align: left !important;
  padding: 10px 18px 18px !important;
  font-size: 22px !important;
  line-height: 1.65 !important;
}
#screenLessons #quizCardContent.reading-order-mode > #quizQuestion {
  margin: 0 0 10px !important;
}
.reading-order-entry { display:flex; gap:10px; align-items:center; justify-content:center; width:100%; padding:12px 18px 0; }
.reading-order-entry input { width:180px; min-height:48px; border:1px solid var(--border); border-radius:12px; background:var(--panel); color:var(--text); font:700 22px inherit; text-align:center; text-transform:uppercase; letter-spacing:6px; outline:none; }
.reading-order-entry input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.reading-order-entry input.correct { border-color:#2aab8d; background:rgba(42,171,141,.16); color:#18785f; }
.reading-order-entry input.wrong { border-color:#e15b6d; background:rgba(225,91,109,.14); color:#bd3047; }
.reading-order-entry .btn-primary { min-height:48px; padding:0 18px; }
.reading-order-feedback { min-height:24px; padding:10px 18px 0; text-align:center; font-weight:700; }
.reading-order-feedback.correct { color:#2aab8d; }
.reading-order-feedback.wrong { color:#e15b6d; }
.reading-order-actions { display:flex; justify-content:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.reading-order-actions button { border:1px solid var(--border); border-radius:10px; padding:9px 16px; background:var(--panel); color:var(--text); font:700 14px inherit; cursor:pointer; }
.reading-order-actions button:first-child { background:var(--accent); color:#fff; border-color:var(--accent); }
@media(max-width:620px){.reading-order-entry{flex-direction:column}.reading-order-entry input{width:100%}.reading-order-entry .btn-primary{width:100%}}

/* Training studio refresh: one polished shell for every practice mode */
#screenLessons { max-width:1180px !important; margin:0 auto; }
#screenLessons > .neo-card {
  position:relative; overflow:hidden; min-height:0 !important; padding:20px !important;
  border:1px solid color-mix(in srgb, var(--accent) 28%, var(--border)) !important;
  border-radius:26px !important; background:linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--panel-2) 82%, var(--accent-soft))) !important;
  box-shadow:0 20px 55px rgba(10,35,65,.14) !important;
}
#screenLessons > .neo-card:before { display:block !important; opacity:.18; pointer-events:none; }
#screenLessons .training-mode-bar {
  position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:0 0 18px; padding:0; border:0;
}
#screenLessons .training-mode-bar .level-pill {
  min-height:46px; justify-content:center; border:1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius:14px;
  background:color-mix(in srgb, var(--panel-2) 90%, var(--accent-soft)); color:var(--text-sub); font-size:13px; font-weight:800; transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
#screenLessons .training-mode-bar .level-pill:hover { transform:translateY(-2px); }
#screenLessons .training-mode-bar .level-pill.active { color:#fff; border-color:transparent; background:linear-gradient(125deg,var(--accent),var(--accent-2)); box-shadow:0 10px 22px color-mix(in srgb, var(--accent) 30%, transparent); }
#screenLessons .training-intro { height:168px; margin:0 0 12px; border-radius:20px; background:linear-gradient(115deg,color-mix(in srgb, var(--accent-soft) 75%, transparent),transparent 72%); }
#screenLessons .training-intro:before { width:220px; height:174px; background-size:220px auto; filter:drop-shadow(0 8px 18px color-mix(in srgb, var(--accent) 22%, transparent)); }
#screenLessons .training-speech { left:245px; top:36px !important; gap:8px; }
#screenLessons .training-speech b { color:var(--text); font-size:20px; letter-spacing:-.02em; }
#screenLessons .training-speech span { color:var(--text-sub); font-size:14px; }
#screenLessons .training-heart { color:var(--accent) !important; }
#screenLessons .training-intro:after { top:124px; right:24px; color:var(--accent); font-size:13px; }
#screenLessons #timerContainer { left:245px; right:25px; top:151px; width:auto; height:8px; border-radius:99px; background:color-mix(in srgb, var(--accent-soft) 65%, var(--panel)); overflow:hidden; }
#screenLessons #timerBarFill { border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
#screenLessons .words-training-intro { max-width:none; margin:10px 0 16px; padding:20px; border:1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); border-radius:18px; background:color-mix(in srgb, var(--panel-2) 92%, transparent); box-shadow:0 12px 30px rgba(10,35,65,.08); }
#screenLessons .words-training-intro-head { font-size:14px; }
#screenLessons .words-training-intro-head span { color:var(--text); font-weight:800; }
#screenLessons .words-training-intro-head strong { color:var(--accent); }
#screenLessons .writing-format-toggle, #screenLessons .words-direction-toggle { gap:8px; margin:10px 0 14px; padding:4px; border-radius:13px; background:color-mix(in srgb, var(--accent-soft) 55%, transparent); }
#screenLessons .writing-format-btn, #screenLessons .words-direction-btn { min-height:40px; border-radius:10px; color:var(--text-sub); font-size:12px; }
#screenLessons .writing-format-btn.active, #screenLessons .words-direction-btn.active { color:#fff; background:var(--accent); box-shadow:0 5px 14px color-mix(in srgb, var(--accent) 22%, transparent); }
#screenLessons .words-training-sections { gap:10px; }
#screenLessons .words-training-section { min-height:62px; padding:12px 14px; border-radius:14px; border-color:color-mix(in srgb, var(--accent) 18%, var(--border)); background:color-mix(in srgb, var(--panel) 88%, var(--accent-soft)); }
#screenLessons .words-training-section:hover, #screenLessons .words-training-section.active { border-color:var(--accent); transform:translateY(-1px); box-shadow:0 8px 18px color-mix(in srgb, var(--accent) 15%, transparent); }
#screenLessons .words-training-start { min-height:50px; border-radius:14px; font-size:16px; background:linear-gradient(120deg,var(--accent),var(--accent-2)); box-shadow:0 10px 22px color-mix(in srgb, var(--accent) 24%, transparent); }
#screenLessons #quizCardContent { margin:0 !important; min-height:360px; padding:16px !important; border:1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-radius:20px; background:color-mix(in srgb, var(--panel-2) 82%, transparent); box-shadow:0 12px 30px rgba(10,35,65,.08); }
#screenLessons #quizCardContent > .cn-char { border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius:18px; background:linear-gradient(145deg,color-mix(in srgb, var(--accent-soft) 70%, var(--panel)),var(--panel)); }
#screenLessons #optionsContainer .option-item { min-height:54px; border:1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius:14px; background:color-mix(in srgb, var(--panel) 86%, var(--accent-soft)); color:var(--text); font-size:14px; }
#screenLessons #optionsContainer .option-item:hover { border-color:var(--accent); transform:translateX(3px); }
#screenLessons .training-answer-actions { justify-content:center; gap:10px; margin:16px 0 10px; }
#screenLessons .training-answer-actions button, #screenLessons .writing-back-selection { border-radius:12px; border:1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); background:color-mix(in srgb, var(--panel-2) 88%, transparent); color:var(--text); font-weight:800; }
#screenLessons .training-tools { display:flex; gap:10px; margin-top:18px; }
#screenLessons .training-tools button { flex:1; min-height:42px; border:1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius:12px; background:transparent; color:var(--text-sub); }
#screenLessons .training-intro.writing-active { height:205px; margin-bottom:8px; }
#screenLessons .training-intro.writing-active:before { top:26px; }
#screenLessons .training-intro.writing-active .training-speech { top:54px !important; }
#screenLessons .training-intro.writing-active:after { top:146px; }
#screenLessons .training-intro.writing-active { height:205px !important; }
#screenLessons .training-intro.writing-active:before { top:26px !important; height:174px !important; }
#screenLessons .training-intro.writing-active .training-speech { top:54px !important; }
@media(max-width:800px){#screenLessons > .neo-card{padding:12px!important;border-radius:18px!important}#screenLessons .training-mode-bar{grid-template-columns:repeat(2,1fr)}#screenLessons .training-intro{height:140px}#screenLessons .training-intro:before{width:150px;background-size:150px auto}#screenLessons .training-speech{left:165px;top:24px!important}#screenLessons .training-speech b{font-size:16px}#screenLessons .training-speech span{font-size:12px}#screenLessons #timerContainer{left:165px;top:125px}#screenLessons #quizCardContent{min-height:300px;padding:10px!important}}
@media(max-width:800px){#screenLessons .training-intro.writing-active{height:178px}#screenLessons .training-intro.writing-active:before{top:18px}#screenLessons .training-intro.writing-active .training-speech{top:42px!important}}
@media(max-width:800px){#screenLessons .training-intro.writing-active{height:178px!important}#screenLessons .training-intro.writing-active:before{top:18px!important;height:150px!important}}
#screenLessons #builderArea .nav-btn {
  border:1px solid color-mix(in srgb, var(--accent) 28%, var(--border)) !important;
  border-radius:11px !important;
  background:color-mix(in srgb, var(--panel) 88%, var(--accent-soft)) !important;
  color:var(--text) !important;
  box-shadow:0 5px 12px color-mix(in srgb, var(--accent) 10%, transparent) !important;
}
#screenLessons #builderResultBox .nav-btn {
  background:var(--accent) !important;
  color:#fff !important;
  border-color:var(--accent) !important;
}
.archive-word-row{grid-template-columns:minmax(70px,1fr) minmax(90px,1fr) minmax(180px,2.2fr) 35px 72px;min-height:48px}.archive-word-actions{display:flex;justify-content:flex-end;gap:5px}.archive-word-actions button{display:grid;place-items:center;width:30px;height:30px;padding:0!important;border:1px solid rgba(87,117,190,.42)!important;border-radius:8px;background:rgba(20,44,87,.72)!important;font-size:13px;font-weight:700}.archive-word-actions button:hover{border-color:#8b5cf6!important;color:#fff}.archive-word-row>span{color:#9eb5dc;font-size:9px}.archive-stroke-modal-card{width:min(760px,calc(100vw - 28px));text-align:center}.archive-stroke-modal-card .modal-header h3{margin:0;color:var(--text);font-size:20px}.archive-stroke-modal-card .modal-header p{margin:4px 0 0;color:var(--text-sub);font-size:12px}.archive-stroke-close{border:0;color:var(--text-sub);background:transparent;font-size:22px;cursor:pointer}.archive-stroke-writers{display:flex;justify-content:center;gap:14px;overflow-x:auto;padding:22px 4px 10px}.archive-stroke-cell{flex:0 0 166px;padding:8px;border:1px solid var(--border);border-radius:14px;background:var(--panel-2)}.archive-stroke-cell>div{width:150px;height:150px;margin:auto;background-image:linear-gradient(90deg,transparent 49.5%,color-mix(in srgb,var(--border) 70%,transparent) 50%,transparent 50.5%),linear-gradient(transparent 49.5%,color-mix(in srgb,var(--border) 70%,transparent) 50%,transparent 50.5%)}.archive-stroke-cell>span{display:block;margin-top:6px;color:var(--accent);font-size:20px;font-weight:800}.archive-stroke-status{min-height:20px;margin:10px;color:var(--text-sub);font-size:12px}.archive-stroke-actions{display:flex;justify-content:center;gap:10px}.archive-stroke-actions button{padding:10px 15px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border));border-radius:10px;color:#fff;background:var(--accent);font-weight:800;cursor:pointer}.archive-stroke-actions button+button{color:var(--text);background:var(--panel-2)}
@media(max-width:650px){.archive-word-row{grid-template-columns:54px 68px 1fr 62px}.archive-word-row small{display:none}.archive-word-actions{gap:2px}.archive-word-actions button{width:28px;height:28px}.archive-stroke-writers{justify-content:flex-start}}

/* Speaking practice */
#screenSpeaking{max-width:1120px;margin:0 auto}.speaking-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--panel)),var(--panel))}.speaking-kicker{color:var(--accent);font-size:11px;font-weight:900;letter-spacing:.15em}.speaking-hero h1{margin:8px 0 6px;font-size:clamp(25px,4vw,42px);color:var(--text)}.speaking-hero p{margin:0;color:var(--text-sub)}.speaking-quota{display:flex;flex:0 0 245px;flex-direction:column;padding:18px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--border));border-radius:18px;background:color-mix(in srgb,var(--panel-2) 82%,transparent)}.speaking-quota small{color:var(--text-sub);font-size:10px;font-weight:800}.speaking-quota strong{margin:4px 0;color:var(--accent);font-size:30px}.speaking-quota span{color:var(--text-sub);font-size:11px}.speaking-mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}.speaking-mode-card{position:relative;display:flex;min-height:156px;flex-direction:column;align-items:flex-start;padding:19px;border:1px solid var(--border);border-radius:18px;background:var(--panel);color:var(--text);text-align:left;cursor:pointer;transition:.2s ease}.speaking-mode-card:hover{transform:translateY(-2px);border-color:var(--accent)}.speaking-mode-card.active{border-color:var(--accent);background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 14%,var(--panel)),var(--panel));box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 14%,transparent)}.speaking-mode-card i{position:absolute;right:14px;top:12px;color:color-mix(in srgb,var(--accent) 55%,transparent);font-size:24px;font-style:normal;font-weight:900}.speaking-mode-card b{max-width:78%;font-size:16px}.speaking-mode-card span{margin-top:10px;color:var(--accent);font-size:11px;font-weight:800}.speaking-mode-card em{margin-top:10px;color:var(--text-sub);font-size:12px;font-style:normal;line-height:1.45}.speaking-workspace{padding:24px}.speaking-workspace>header{display:flex;align-items:center;justify-content:space-between;gap:15px}.speaking-workspace>header small{color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.12em}.speaking-workspace h2{margin:5px 0;color:var(--text);font-size:21px}.speaking-workspace>header>span{padding:7px 11px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:800}.speaking-prompt{display:flex;min-height:190px;flex-direction:column;align-items:center;justify-content:center;margin:18px 0;padding:24px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));border-radius:20px;background:color-mix(in srgb,var(--panel-2) 88%,transparent);text-align:center}.speaking-prompt strong{color:var(--text);font-size:clamp(27px,5vw,46px);font-weight:800}.speaking-prompt span{margin-top:9px;color:var(--accent);font-size:16px}.speaking-prompt p{margin:7px 0 0;color:var(--text-sub)}.speaking-controls{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:9px}.speaking-controls button,.speaking-subscription button{min-height:48px;padding:10px 16px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--border));border-radius:13px;background:var(--panel-2);color:var(--text);font-weight:800;cursor:pointer}.speaking-controls .record{border-color:transparent;background:linear-gradient(120deg,var(--accent),var(--accent-2));color:#fff}.speaking-controls .record.recording{background:#db4f68;animation:speakingPulse 1.2s infinite}.speaking-transcript{margin-top:14px;padding:15px 17px;border-radius:14px;background:color-mix(in srgb,var(--panel-2) 82%,transparent)}.speaking-transcript small{color:var(--text-sub);font-size:10px;font-weight:800;text-transform:uppercase}.speaking-transcript p{min-height:22px;margin:6px 0 0;color:var(--text)}.speaking-feedback{display:flex;align-items:flex-start;gap:15px;margin-top:12px;padding:17px;border:1px solid var(--border);border-radius:14px;color:var(--text);background:var(--panel-2)}.speaking-feedback.hidden{display:none}.speaking-feedback>strong{color:var(--accent);font-size:28px}.speaking-feedback p{margin:5px 0;color:var(--text-sub)}.speaking-feedback small{color:var(--accent)}.speaking-feedback ul{margin:8px 0 0;padding-left:18px;color:var(--text-sub)}.speaking-feedback.success{border-color:rgba(42,171,141,.55)}.speaking-feedback.warning{border-color:rgba(225,91,109,.5)}.speaking-correction{color:var(--text)!important;font-size:18px}.speaking-loader{width:22px;height:22px;border:3px solid var(--accent-soft);border-top-color:var(--accent);border-radius:50%;animation:speakingSpin .8s linear infinite}.speaking-subscription{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:16px;padding:18px 22px}.speaking-subscription b{color:var(--text)}.speaking-subscription p{margin:5px 0 0;color:var(--text-sub);font-size:12px}.speaking-subscription button{min-width:190px;background:var(--accent);color:#fff}@keyframes speakingPulse{50%{box-shadow:0 0 0 7px rgba(219,79,104,.16)}}@keyframes speakingSpin{to{transform:rotate(360deg)}}
@media(max-width:760px){.speaking-hero{align-items:stretch;flex-direction:column;padding:20px}.speaking-quota{flex-basis:auto}.speaking-mode-grid{grid-template-columns:1fr}.speaking-mode-card{min-height:128px}.speaking-workspace{padding:15px}.speaking-controls{grid-template-columns:1fr}.speaking-subscription{align-items:stretch;flex-direction:column}.speaking-subscription button{width:100%}.speaking-prompt{min-height:155px;padding:16px}}

/* Нефритовая (зелёная) Айми в светлой теме — все оставшиеся места с aimi-neon.png */
:root[data-theme="light"] .selfstudy-card {
  background-image:
    linear-gradient(100deg, rgba(72,35,175,.98) 0%, rgba(100,40,190,.88) 46%, rgba(4,20,46,.08) 72%),
    url('../assets/aimi-neon-jade.webp'),
    linear-gradient(130deg, #172b71, #0b1838);
}
:root[data-theme="light"] .profile-avatar { background-image: url('../assets/aimi-neon-jade.webp'); }
:root[data-theme="light"] #screenLessons .neo-card::before { background-image: url('../assets/aimi-neon-jade.webp'); }
:root[data-theme="light"] #screenProfile .neo-card::before { background-image: url('../assets/aimi-neon-jade.webp'); }
:root[data-theme="light"] .dictionary-mascot { background-image: url('../assets/aimi-neon-jade.webp'); }
:root[data-theme="light"] .profile-portrait { background-image: url('../assets/aimi-neon-jade.webp'); }

/* ===== HSK EXAM — выбор слов в письме ===== */

/* Строка с уже собранным предложением */
.exam-writing-selected {
    width: 100%;
    min-height: 58px;
    margin: 18px auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}

/* Само собранное предложение — строго по центру */
.exam-writing-selected-word {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 10px 22px;

    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: 12px;

    background: color-mix(in srgb, var(--accent) 10%, var(--panel));
    color: var(--text);

    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;

    white-space: nowrap;
    text-align: center;
    cursor: pointer;
}

/* Все доступные слова — отдельной строкой ниже */
.exam-writing-word-choices {
    width: 100%;
    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 10px;
}

/* Каждое отдельное слово */
.exam-writing-word-choice {
    min-height: 44px;
    padding: 8px 18px;

    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius: 12px;

    background: color-mix(in srgb, var(--panel) 85%, var(--accent) 5%);
    color: var(--text);

    font-size: 18px;
    font-weight: 700;

    cursor: pointer;
}

/* Нажатие */
.exam-writing-word-choice:active {
    transform: scale(.96);
}

/* Уже использованное слово */
.exam-writing-word-choice:disabled {
    opacity: .28;
    cursor: default;
}

/* Сбросить порядок */
.exam-writing-question .exam-order-reset {
    display: block;
    margin: 4px auto 18px;
}