/* =====================================================================
   ArmGrade — стили всех страниц
   Темы: data-accent (6 цветовых тем, выбор — в админке) × data-mode (light / dark).
   ===================================================================== */

/* ---------- Шрифты: на нашем сервере, woff2, только 400 / 600 / 700 ---------- */
@font-face { font-family: 'Noto Sans Armenian'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/noto-sans-armenian-400.woff2) format('woff2'); unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17; }
@font-face { font-family: 'Noto Sans Armenian'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/noto-sans-armenian-600.woff2) format('woff2'); unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17; }
@font-face { font-family: 'Noto Sans Armenian'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/noto-sans-armenian-700.woff2) format('woff2'); unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17; }
@font-face { font-family: 'Noto Serif Armenian'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/noto-serif-armenian-700.woff) format('woff'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/inter-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    --sidebar-w: 348px;
    --rightbar-w: 320px;
    --toolbar-h: 62px;
    --radius: 16px;
    --radius-lg: 22px;
    --font: 'Inter', 'Noto Sans Armenian', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Цветовые темы ----------
   Спокойная «академическая» гамма: приглушённый основной цвет, тёплый акцент
   (прогресс, важные числа), мягкий фон (слоновая кость / шалфей).
   Каждая тема задаёт полный набор цветов для светлого и тёмного режима.
   Контраст текста и основного цвета с фоном ≥ 4.5:1 (WCAG AA) во всех темах. */
/* Тёмный основной цвет (боковая панель, первый экран) + яркий акцент (кнопки, активные пункты).
   --deep / --deep2 — фон тёмных блоков, --on-a2 — текст на акцентной кнопке. */
html[data-accent="ink"], html:not([data-accent]) { /* Մելան և ոսկի (Ink & Gold) — по умолчанию, дизайн 2026-10 */
    --p-l: #1F3C73; --a2-l: #E3A132; --on-a2-l: #1B1405; --deep-l: #0F1A30; --deep2-l: #182A4A;
    --n-bg: #F2F4F8; --n-sb: #0F1A30; --n-surface: #FFFFFF; --n-text: #131B2C; --n-muted: #576075;
    --p-d: #A3BCEB; --a2-d: #F0B955; --d-bg: #0A0E16; --d-sb: #070A10; --d-surface: #121926; }
html[data-accent="navy"] { /* Կապույտ և մարջան (Navy & Coral) */
    --p-l: #1F3B63; --a2-l: #D2593F; --on-a2-l: #FFFFFF; --deep-l: #162A47; --deep2-l: #1F3A5E;
    --n-bg: #EDF0F5; --n-sb: #162A47; --n-surface: #FFFFFF; --n-text: #1B2433; --n-muted: #5A6474;
    --p-d: #8FB4E3; --a2-d: #F0937F; --d-bg: #0D1118; --d-sb: #0A0E14; --d-surface: #161C26; }
html[data-accent="emerald"] { /* Զմրուխտ և ոսկի (Emerald & Gold) */
    --p-l: #0F5A48; --a2-l: #D29A33; --on-a2-l: #1A1405; --deep-l: #0F3A32; --deep2-l: #16503F;
    --n-bg: #ECF1EF; --n-sb: #0F3A32; --n-surface: #FFFFFF; --n-text: #17261F; --n-muted: #55625A;
    --p-d: #74CDB0; --a2-d: #E5B65A; --d-bg: #0C1311; --d-sb: #08100D; --d-surface: #141E1B; }
html[data-accent="indigo"] { /* Ինդիգո և վարդ (Indigo & Rose) */
    --p-l: #3A3480; --a2-l: #C64A82; --on-a2-l: #FFFFFF; --deep-l: #241F4B; --deep2-l: #332B68;
    --n-bg: #EFEEF5; --n-sb: #241F4B; --n-surface: #FFFFFF; --n-text: #1F1B36; --n-muted: #5B5872;
    --p-d: #ABA5F0; --a2-d: #EE8DB9; --d-bg: #0F0E17; --d-sb: #0B0A12; --d-surface: #191726; }
html[data-accent="teal"] { /* Ծովային (Ocean Teal) */
    --p-l: #0E5566; --a2-l: #EF8F62; --on-a2-l: #1F0E05; --deep-l: #0D3944; --deep2-l: #124B59;
    --n-bg: #EBF1F3; --n-sb: #0D3944; --n-surface: #FFFFFF; --n-text: #15282D; --n-muted: #52646A;
    --p-d: #6FC6D6; --a2-d: #F4A47E; --d-bg: #0B1315; --d-sb: #070E10; --d-surface: #132023; }
html[data-accent="graphite"] { /* Գրաֆիտ և սաթ (Graphite & Amber) */
    --p-l: #2E333D; --a2-l: #E9A21E; --on-a2-l: #1C1402; --deep-l: #22252C; --deep2-l: #30343D;
    --n-bg: #EEEFF1; --n-sb: #22252C; --n-surface: #FFFFFF; --n-text: #1C1F25; --n-muted: #5B606A;
    --p-d: #B6BDC9; --a2-d: #F2B640; --d-bg: #0E0F11; --d-sb: #08090A; --d-surface: #18191C; }
html[data-accent="burgundy"] { /* Բորդո (Burgundy & Rose) */
    --p-l: #6E2440; --a2-l: #E59A7F; --on-a2-l: #2A0E08; --deep-l: #47192A; --deep2-l: #5C2236;
    --n-bg: #F3EEF0; --n-sb: #47192A; --n-surface: #FFFFFF; --n-text: #2A1A1F; --n-muted: #665459;
    --p-d: #E79AB4; --a2-d: #F0AF97; --d-bg: #130D0F; --d-sb: #0D0809; --d-surface: #1E1518; }

html[data-mode="light"] {
    color-scheme: light;
    --primary: var(--p-l);
    --accent2: var(--a2-l);
    --on-a2: var(--on-a2-l);
    --deep: var(--deep-l); --deep2: var(--deep2-l);
    --on-primary: #FFFFFF;
    --bg:        var(--n-bg);
    --sidebar-bg:var(--n-sb);
    --surface:   var(--n-surface);
    --surface-2: color-mix(in oklab, var(--deep) 4%, var(--n-bg));
    --border:    color-mix(in oklab, var(--deep) 11%, #E3E6EB);
    --border-strong: color-mix(in oklab, var(--deep) 18%, #C9CED6);
    --text:      var(--n-text);
    --text-muted:var(--n-muted);
    --ok: #2F7D5B; --ok-soft: #E4F0E8; --ok-text: #1F5C42;
    --bad: #B5473E; --bad-soft: #F8E6E2; --bad-text: #8A322B;
    --warn: #B07A1E; --warn-soft: #F6ECD8; --warn-text: #6E4C12;
    --mark: #F6E2A8; --overlay: rgba(25, 30, 35, .36);
    --shadow: 0 1px 2px rgba(40, 45, 50, .05), 0 8px 24px -10px rgba(40, 45, 50, .14);
    --shadow-lg: 0 24px 60px -14px rgba(40, 45, 50, .26);
    --glow: color-mix(in srgb, var(--primary) 22%, transparent);
}

html[data-mode="dark"] {
    color-scheme: dark;
    --primary: var(--p-d);
    --accent2: var(--a2-d);
    --on-a2: #10141A;
    --deep: var(--d-sb); --deep2: color-mix(in srgb, var(--d-sb) 70%, var(--d-surface));
    --on-primary: #10141A;
    --bg:        var(--d-bg);
    --sidebar-bg:var(--d-sb);
    --surface:   var(--d-surface);
    --surface-2: color-mix(in oklab, var(--primary) 6%, var(--d-surface));
    --border:    color-mix(in oklab, var(--primary) 10%, #2C3238);
    --border-strong: color-mix(in oklab, var(--primary) 16%, #3B434B);
    --text: #E4E8EC; --text-muted: #A3ADB7;
    --ok: #6CC49A; --ok-soft: #18302A; --ok-text: #9AD9B9;
    --bad: #E88E84; --bad-soft: #3A2224; --bad-text: #F2B2AA;
    --warn: #E2B567; --warn-soft: #312818; --warn-text: #EDCB8E;
    --mark: #4A4430; --overlay: rgba(4, 6, 8, .6);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -10px rgba(0, 0, 0, .5);
    --shadow-lg: 0 24px 60px -14px rgba(0, 0, 0, .65);
    --glow: color-mix(in srgb, var(--primary) 26%, transparent);
}

html {
    --primary-soft:  color-mix(in srgb, var(--primary) 14%, var(--surface));
    --primary-faint: color-mix(in srgb, var(--primary) 7%,  var(--surface));
    --primary-line:  color-mix(in srgb, var(--primary) 40%, var(--surface));
    --primary-text:  color-mix(in srgb, var(--primary) 84%, var(--text));
    --a2-soft:  color-mix(in srgb, var(--accent2) 12%, var(--surface));
    --a2-line:  color-mix(in srgb, var(--accent2) 32%, var(--surface));
    --a2-text:  color-mix(in srgb, var(--accent2) 80%, var(--text));
    --sky: var(--accent2); --sky-soft: var(--a2-soft); --sky-line: var(--a2-line); --sky-text: var(--a2-text);
    --info: var(--accent2); --info-soft: var(--a2-soft); --info-text: var(--a2-text);
    --hover-bg:  color-mix(in srgb, var(--primary) 6%,  var(--sidebar-bg));
    --active-bg: color-mix(in srgb, var(--primary) 13%, var(--sidebar-bg));
    --grad: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklab, var(--primary) 72%, var(--accent2)) 100%);
    --accent-warm: var(--accent2);   /* тёплый акцент: прогресс, важные числа */
}

html[data-size="s"]  { font-size: 15px; }
html[data-size="m"]  { font-size: 16px; }
html[data-size="l"]  { font-size: 17.5px; }
html[data-size="xl"] { font-size: 19px; }

/* Цвета глав и книг — приглушённые, в одной гамме */
.hue-0 { --accent: #4E6E8E; } .hue-1 { --accent: #3E7B6A; } .hue-2 { --accent: #7A6390; }
.hue-3 { --accent: #A0583F; } .hue-4 { --accent: #5B5F96; } .hue-5 { --accent: #3E7598; }
html[data-mode="dark"] .hue-0 { --accent: #93B0CC; } html[data-mode="dark"] .hue-1 { --accent: #8CC4B1; }
html[data-mode="dark"] .hue-2 { --accent: #BCA6D2; } html[data-mode="dark"] .hue-3 { --accent: #E3A288; }
html[data-mode="dark"] .hue-4 { --accent: #A9ACDE; } html[data-mode="dark"] .hue-5 { --accent: #8FBBD9; }
.hue-0, .hue-1, .hue-2, .hue-3, .hue-4, .hue-5, .th {
    --accent-soft:  color-mix(in srgb, var(--accent) 13%, var(--surface));
    --accent-faint: color-mix(in srgb, var(--accent) 6%,  var(--surface));
    --accent-text:  color-mix(in srgb, var(--accent) 85%, var(--text));
}

/* Цвета тем справочника — та же приглушённая гамма */
.th-0 { --accent: #4E6E8E; } .th-1 { --accent: #7A6390; } .th-2 { --accent: #3E7598; } .th-3 { --accent: #9A4E62; }
.th-4 { --accent: #94702B; } .th-5 { --accent: #3E7B6A; } .th-6 { --accent: #5B5F96; } .th-7 { --accent: #A0583F; }
.th-8 { --accent: #3F7A82; } .th-9 { --accent: #4F6A9A; } .th-10 { --accent: #8A5578; }
html[data-mode="dark"] .th-0 { --accent: #93B0CC; } html[data-mode="dark"] .th-1 { --accent: #BCA6D2; }
html[data-mode="dark"] .th-2 { --accent: #8FBBD9; } html[data-mode="dark"] .th-3 { --accent: #DDA0B2; }
html[data-mode="dark"] .th-4 { --accent: #DCBC7E; } html[data-mode="dark"] .th-5 { --accent: #8CC4B1; }
html[data-mode="dark"] .th-6 { --accent: #A9ACDE; } html[data-mode="dark"] .th-7 { --accent: #E3A288; }
html[data-mode="dark"] .th-8 { --accent: #8CC3C9; } html[data-mode="dark"] .th-9 { --accent: #A3B8DE; }
html[data-mode="dark"] .th-10 { --accent: #D2A2C3; }

/* ===================== БАЗА ===================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: calc(var(--vh) * 100);
    font-family: var(--font);
    color: var(--text);
    line-height: 1.6;
    background:
        radial-gradient(1100px 520px at 105% -8%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 70%),
        radial-gradient(900px 480px at -8% 108%, color-mix(in srgb, var(--accent2) 8%, transparent), transparent 70%),
        var(--bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    transition: background-color .2s, color .2s;
}
body.resizing { cursor: col-resize; user-select: none; }
body.resizing * { transition: none !important; }

::selection { background: color-mix(in srgb, var(--primary) 24%, transparent); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary-text); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ic { flex-shrink: 0; }
code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .88em; padding: 1px 5px; border-radius: 6px; background: var(--surface-2); }

/* ---------- Кнопки и поля ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px;
    font-weight: 650; line-height: 1.3; text-decoration: none; white-space: nowrap;
    border: 0; border-radius: 12px;
    cursor: pointer;
    transition: filter .15s, transform .12s var(--ease), box-shadow .2s, background .15s, opacity .15s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary {
    color: var(--on-primary);
    background: var(--primary);
    box-shadow: 0 6px 16px -6px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 10px 22px -8px var(--glow); }
.btn-grad { color: #fff; background: var(--grad); box-shadow: 0 8px 22px -8px var(--glow); }
html[data-mode="dark"] .btn-grad { color: #14121C; }
.btn-grad:hover { filter: brightness(1.06); }
.btn-soft { color: var(--primary-text); background: var(--primary-soft); }
.btn-soft:hover { background: color-mix(in srgb, var(--primary) 20%, var(--surface)); }
.btn-ghost { color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { color: #fff; background: var(--bad); }
.btn-ok { color: #fff; background: var(--ok); }
.btn-sm { padding: 7px 13px; font-size: .86rem; border-radius: 10px; }
.btn-lg { padding: 14px 24px; font-size: 1.04rem; border-radius: 14px; }
.btn-block { width: 100%; }

.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label, .field > span.lbl { font-size: .85rem; font-weight: 650; color: var(--text-muted); }
.input, select.input, textarea.input {
    width: 100%;
    padding: 11px 14px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
textarea.input { resize: vertical; min-height: 90px; line-height: 1.55; }
textarea.code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .86rem; }
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); }
.hint { font-size: .8rem; color: var(--text-muted); }
.muted { color: var(--text-muted); }

.alert { padding: 12px 15px; margin-bottom: 14px; border-radius: 13px; font-size: .92rem; border: 1px solid transparent; }
.alert-bad  { color: var(--bad-text); background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 22%, transparent); }
.alert-ok   { color: var(--ok-text);  background: var(--ok-soft);  border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.alert-info { color: var(--a2-text);  background: var(--a2-soft);  border-color: var(--a2-line); }
.alert-warn { color: var(--warn-text); background: var(--warn-soft); }

.icon-btn {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: inline-grid; place-items: center;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover { background: var(--surface); color: var(--text); border-color: var(--border); }
.icon-btn[aria-expanded="true"] { color: var(--primary-text); background: var(--primary-faint); border-color: var(--primary-line); }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); font-size: 1.28rem; font-weight: 800; letter-spacing: -.02em; }
.brand b { font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-logo {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 12px;
    color: #fff;
    background: var(--grad);
    box-shadow: 0 8px 18px -6px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.avatar {
    width: 30px; height: 30px;
    display: inline-grid; place-items: center; flex-shrink: 0;
    font-size: .85rem; font-weight: 800;
    color: #fff;
    background: var(--grad);
    border-radius: 50%;
}
.pro-badge {
    padding: 1px 7px;
    font-size: .64rem; font-weight: 800; letter-spacing: .08em;
    color: #fff;
    background: var(--grad);
    border-radius: 999px;
}

.toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 200;
    max-width: min(92vw, 520px);
    padding: 12px 18px;
    font-size: .92rem; font-weight: 550;
    color: var(--surface); background: var(--text);
    border-radius: 13px;
    box-shadow: var(--shadow-lg);
    transform: translate(-50%, 20px); opacity: 0;
    transition: opacity .2s, transform .25s var(--ease);
    pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.badge { display: inline-block; padding: 2px 9px; font-size: .74rem; font-weight: 700; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); white-space: nowrap; }
.badge-ok { background: var(--ok-soft); color: var(--ok-text); }
.badge-bad { background: var(--bad-soft); color: var(--bad-text); }
.badge-wait { background: var(--primary-soft); color: var(--primary-text); }
.badge-warn { background: var(--warn-soft); color: var(--warn-text); }
.badge-info { background: var(--a2-soft); color: var(--a2-text); }

/* ---------- Меню и панель вида ---------- */
.menu-wrap { position: relative; flex-shrink: 0; }
.menu-panel {
    position: absolute; right: 0; top: calc(100% + 10px);
    width: 300px; max-height: calc(calc(var(--vh) * 100) - 90px); overflow-y: auto;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    z-index: 80;
    animation: pop .18s var(--ease);
}
.settings-panel { width: 318px; }
.set-label { margin: 0 0 9px; font-size: .74rem; font-weight: 750; color: var(--text-muted); letter-spacing: .03em; text-transform: uppercase; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; margin-bottom: 18px; background: var(--surface-2); border-radius: 12px; }
.seg:last-child { margin-bottom: 0; }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 7px 4px; font-size: .78rem; font-weight: 650; line-height: 1.2; color: var(--text-muted); background: transparent; border: 0; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }

.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 2px 6px; background: transparent; border: 1.5px solid transparent; border-radius: 13px; cursor: pointer; transition: background .15s, border-color .15s; }
.swatch:hover { background: var(--surface-2); }
.sw-dot {
    width: 32px; height: 32px; display: grid; place-items: center;
    color: transparent;
    background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--sw) 55%, #fff), var(--sw) 70%);
    border-radius: 50%;
    box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--sw) 60%, transparent), inset 0 0 0 2px rgba(255, 255, 255, .35);
    transition: transform .15s var(--ease);
}
.swatch:hover .sw-dot { transform: scale(1.08); }
.swatch[aria-pressed="true"] { border-color: var(--primary-line); background: var(--primary-faint); }
.swatch[aria-pressed="true"] .sw-dot { color: #fff; }
.sw-name { font-size: .7rem; font-weight: 650; color: var(--text-muted); }

/* ===================== ПРОСТЫЕ СТРАНИЦЫ ===================== */
.site-top {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 14px;
    padding: 12px 28px;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--border);
}
.site-nav { display: flex; align-items: center; gap: 4px; margin-left: 18px; flex-wrap: wrap; }
.site-nav > a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 12px;
    font-size: .9rem; font-weight: 650;
    color: var(--text-muted); text-decoration: none;
    border-radius: 11px;
    transition: background .15s, color .15s;
}
.site-nav > a:hover { color: var(--text); background: var(--surface-2); }
.site-nav > a.on { color: var(--primary-text); background: var(--primary-soft); }
.site-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.site-user { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; font-size: .88rem; font-weight: 650; color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
.site-user:hover, .site-user.on { border-color: var(--primary-line); }

.page { max-width: 1080px; margin: 0 auto; padding: 36px 24px 80px; }
.page-narrow { max-width: 470px; }
.page h1 { margin: 0 0 8px; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.page .lead { margin: 0 0 28px; color: var(--text-muted); font-size: 1.05rem; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.card {
    padding: 24px;
    margin-bottom: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.card h2 { margin: 0 0 14px; font-size: 1.15rem; font-weight: 750; }
.card-muted { background: var(--surface-2); box-shadow: none; }
.card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head h2 { margin: 0; }
.card-head .spacer { flex: 1; }

.auth-card { padding: 32px; position: relative; overflow: hidden; }
.auth-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); }
.auth-card h1 { font-size: 1.65rem; text-align: center; }
.auth-card .lead { text-align: center; font-size: .95rem; margin-bottom: 22px; }
.auth-switch { margin-top: 18px; text-align: center; font-size: .92rem; color: var(--text-muted); }

/* Герой страниц (тарифы, справочник) */
.page-hero {
    position: relative;
    padding: 34px 32px;
    margin-bottom: 26px;
    overflow: hidden;
    background:
        radial-gradient(600px 240px at 90% 0%, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 70%),
        radial-gradient(500px 260px at 0% 100%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%),
        var(--surface);
    border: 1px solid var(--border);
    border-radius: 26px;
    box-shadow: var(--shadow);
}
.page-hero h1 { margin: 0 0 8px; font-size: 2.1rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.page-hero .lead { margin: 0; max-width: 640px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 4px 12px; font-size: .78rem; font-weight: 750; color: var(--primary-text); background: var(--primary-soft); border-radius: 999px; }

/* Тарифы */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 10px 0 26px; }
.plan {
    position: relative;
    display: flex; flex-direction: column; gap: 6px;
    padding: 28px 24px 24px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow);
    transition: transform .2s var(--ease), box-shadow .2s, border-color .2s;
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.plan.featured {
    border-color: transparent;
    background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box;
    border: 2px solid transparent;
    box-shadow: 0 18px 44px -14px var(--glow);
}
.plan-tag {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    padding: 4px 13px;
    font-size: .74rem; font-weight: 750; white-space: nowrap;
    color: #fff; background: var(--grad);
    border-radius: 999px;
    box-shadow: 0 6px 14px -6px var(--glow);
}
.plan-name { font-size: 1.05rem; font-weight: 750; color: var(--a2-text); }
.plan-price { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; }
.plan-per { font-size: .88rem; color: var(--text-muted); }
.plan-save { align-self: flex-start; padding: 2px 10px; font-size: .78rem; font-weight: 750; color: var(--ok-text); background: var(--ok-soft); border-radius: 999px; }
.plan-next { font-size: .8rem; line-height: 1.35; color: var(--a2-text); }
.plan ul { margin: 12px 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .92rem; }
.plan li { display: flex; gap: 8px; align-items: flex-start; }
.plan li .ic { color: var(--ok); margin-top: 3px; }
.plan form { margin-top: auto; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature { padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; }
.feature b { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.feature b .ic { color: var(--primary-text); }
.feature span { font-size: .9rem; color: var(--text-muted); }

.pay-methods-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 24px; }
.pay-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; font-size: .82rem; font-weight: 650; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
.pay-chip .ic { color: var(--primary-text); }

/* Оформление оплаты */
.checkout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.method-list { display: grid; gap: 10px; }
.method {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.method:hover { border-color: var(--primary-line); }
.method input { position: absolute; opacity: 0; pointer-events: none; }
.method:has(input:checked) { border-color: var(--primary); background: var(--primary-faint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }
.method:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.method-icon { width: 46px; height: 46px; display: grid; place-items: center; flex-shrink: 0; border-radius: 13px; color: var(--primary-text); background: var(--primary-soft); }
.method-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.method-text b { font-size: 1rem; }
.method-text small { color: var(--text-muted); font-size: .84rem; }
.method-check { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; border: 2px solid var(--border-strong); border-radius: 50%; color: transparent; }
.method:has(input:checked) .method-check { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.summary-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.summary-row:last-of-type { border-bottom: 0; }
.summary-total { font-size: 1.4rem; font-weight: 800; }
.secure-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .8rem; color: var(--text-muted); }

/* Аккаунт */
.status-box { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.status-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 17px; background: var(--a2-soft); color: var(--a2-text); }
.status-box.active .status-icon { background: var(--grad); color: #fff; box-shadow: 0 10px 24px -10px var(--glow); }
.status-box b { font-size: 1.1rem; }
.pay-box { padding: 18px 20px; background: var(--a2-soft); border: 1px dashed var(--a2-line); border-radius: 15px; }
.pay-box ul { margin: 6px 0; }
.pay-code { font-family: ui-monospace, Menlo, monospace; font-weight: 700; color: var(--primary-text); }

/* Таблицы */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th, .tbl td { padding: 10px 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl th { font-size: .74rem; font-weight: 750; color: var(--text-muted); white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--primary) 3%, transparent); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl form { display: inline; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.stat { position: relative; padding: 16px 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.stat::after { content: ''; position: absolute; right: -20px; top: -20px; width: 80px; height: 80px; border-radius: 50%; background: var(--primary-faint); }
.stat span { position: relative; z-index: 1; display: block; font-size: .78rem; font-weight: 650; color: var(--text-muted); }
.stat b { position: relative; z-index: 1; font-size: 1.6rem; font-weight: 800; }

.tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font-weight: 650; font-size: .9rem; color: var(--text-muted); text-decoration: none; border-radius: 11px; }
.tabs a:hover { color: var(--text); background: var(--surface); }
.tabs a.on { color: var(--primary-text); background: var(--primary-soft); }
.inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inline-form .input { width: auto; padding: 7px 10px; font-size: .86rem; border-radius: 9px; }

/* ===================== ГЛАВНАЯ: БОКОВОЕ МЕНЮ ===================== */
.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    display: flex; flex-direction: column;
    background: color-mix(in srgb, var(--sidebar-bg) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-right: 1px solid var(--border);
    z-index: 40;
    transition: transform .25s var(--ease), background-color .2s;
}
html.sidebar-hidden .sidebar { transform: translateX(-100%); }

.sidebar-resizer { position: absolute; top: 0; right: -4px; bottom: 0; width: 8px; cursor: col-resize; z-index: 2; }
.sidebar-resizer::after { content: ''; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background .15s; }
.sidebar-resizer:hover::after, body.resizing .sidebar-resizer::after { background: var(--primary-line); }

.sidebar-head { padding: 18px 18px 14px; border-bottom: 1px solid var(--border); }
.brand-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.sidebar-close { display: none; margin-left: auto; }

.side-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.side-link { display: flex; align-items: center; gap: 8px; padding: 9px 11px; font-size: .86rem; font-weight: 650; color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; transition: border-color .15s, background .15s; }
.side-link .ic { color: var(--primary-text); }
.side-link:hover { border-color: var(--primary-line); background: var(--primary-faint); }

.search-box { position: relative; }
.search-box .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.search-input {
    width: 100%;
    padding: 10px 12px 10px 38px;
    font-size: .92rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent); }

.sidebar-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 11px; font-size: .8rem; color: var(--text-muted); }
.sidebar-meta b { color: var(--ok-text); font-weight: 750; }
.link-btn { padding: 0; border: none; background: none; color: var(--primary-text); font-size: .8rem; font-weight: 650; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

.upsell {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 12px; padding: 11px 12px;
    font-size: .82rem; line-height: 1.45;
    color: var(--a2-text); background: var(--a2-soft);
    border: 1px solid var(--a2-line); border-radius: 13px;
}
.upsell a { font-weight: 750; color: var(--a2-text); }

.sidebar-nav {
    position: relative; flex: 1; overflow-y: auto;
    padding: 12px 12px 32px;
    scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.nav-empty { display: none; padding: 16px 12px; color: var(--text-muted); font-size: .9rem; }

.sidebar summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 11px; border-radius: 12px; user-select: none; transition: background .15s, color .15s; }
.sidebar summary::-webkit-details-marker { display: none; }
.sidebar summary::after {
    content: ''; flex-shrink: 0;
    margin: 9px 4px 0 auto;
    width: 7px; height: 7px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .2s ease; opacity: .45;
}
.sidebar details[open] > summary::after { transform: rotate(45deg); }
.sidebar summary:hover { background: var(--hover-bg); }

.nav-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.nav-title small { font-size: .7rem; font-weight: 650; color: var(--text-muted); }

.nav-book { margin-bottom: 6px; }
.nav-book > summary { padding: 9px 10px; font-weight: 750; font-size: 1rem; }
.nav-book > summary .nav-title { padding-top: 1px; }
.nav-book.is-current > summary .nav-title > span { color: var(--accent-text); }
.book-icon { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent-text); }
.nav-book-body { margin: 4px 0 10px 26px; padding-left: 8px; border-left: 1px solid var(--border); }

.nav-chapter { margin-bottom: 2px; }
.nav-chapter > summary { padding: 9px 10px; }
.chap-badge { flex-shrink: 0; width: 28px; height: 28px; margin-top: 1px; display: grid; place-items: center; font-size: .8rem; font-weight: 750; color: var(--accent-text); background: var(--accent-soft); border-radius: 9px; }
.nav-chapter .nav-title > span { font-size: .9rem; font-weight: 650; color: var(--text); }
.nav-chapter .nav-title small { color: var(--accent-text); text-transform: uppercase; letter-spacing: .05em; font-weight: 750; }
.nav-count { flex-shrink: 0; margin-top: 5px; padding: 1px 8px; font-size: .7rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
.nav-count.has-done { background: var(--primary-soft); color: var(--primary-text); border-color: transparent; }
.nav-count.all-done { background: var(--ok-soft); color: var(--ok-text); border-color: transparent; }

.nav-sections { list-style: none; margin: 2px 0 10px; padding: 0 0 0 12px; }
.nav-item {
    position: relative;
    display: flex; align-items: flex-start; gap: 11px;
    margin: 1px 0; padding: 8px 10px;
    font-size: .89rem; line-height: 1.45;
    color: var(--text-muted); text-decoration: none;
    border-radius: 11px;
    transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--hover-bg); color: var(--text); }
.nav-item.active { background: var(--active-bg); color: var(--primary-text); font-weight: 650; }
.nav-item.active::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--primary); }
.nav-label { flex: 1; min-width: 0; padding-top: 2px; }
.nav-item mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 1px; }
.nav-lock { margin-top: 4px; color: var(--text-muted); opacity: .55; }
.nav-free { flex-shrink: 0; margin-top: 3px; padding: 1px 7px; font-size: .66rem; font-weight: 750; color: var(--ok-text); background: var(--ok-soft); border-radius: 999px; }

.nav-num {
    --inner: var(--sidebar-bg);
    flex-shrink: 0;
    width: 27px; height: 27px;
    display: grid; place-items: center;
    font-size: .72rem; font-weight: 750; font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    border-radius: 50%;
    background:
        radial-gradient(closest-side, var(--inner) calc(100% - 2.5px), transparent calc(100% - 2px)),
        conic-gradient(var(--primary) calc(var(--p, 0) * 1%), var(--border-strong) 0);
    transition: background .2s, color .2s;
}
.nav-item:hover .nav-num { --inner: var(--hover-bg); }
.nav-item.active .nav-num { --inner: var(--active-bg); color: var(--primary-text); }
.nav-num.done    { background: var(--primary); color: var(--on-primary) !important; }
.nav-num.perfect { background: var(--ok);      color: #fff !important; }
.nav-id { opacity: .55; font-size: .8em; }

.overlay { display: none; position: fixed; inset: 0; background: var(--overlay); z-index: 38; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
body.nav-open .overlay, body.tools-open .overlay { display: block; }

/* ===================== ГЛАВНАЯ: ВЕРХНЯЯ ПАНЕЛЬ ===================== */
.main { margin-left: var(--sidebar-w); min-height: calc(var(--vh) * 100); transition: margin-left .28s var(--ease); }
html.sidebar-hidden .main { margin-left: 0; }

.toolbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 8px;
    height: var(--toolbar-h);
    padding: 0 20px;
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}
.toolbar.scrolled { border-bottom-color: var(--border); }

.toolbar-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; pointer-events: none; }
.toolbar-title.show { opacity: 1; transform: none; }
.toolbar-title small, .toolbar-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toolbar-title small { font-size: .74rem; font-weight: 650; color: var(--accent-text); }
.toolbar-title strong { font-size: .95rem; font-weight: 650; }

.progress-pill {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 13px;
    font-size: .82rem; font-weight: 650; font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.progress-pill:hover { border-color: var(--primary-line); color: var(--text); }
.pp-track { display: flex; width: 110px; height: 6px; overflow: hidden; background: var(--border); border-radius: 999px; }
.pp-ok, .pp-bad, .pp-unk { width: 0; height: 100%; transition: width .35s ease; }
.pp-ok { background: var(--ok); } .pp-bad { background: var(--bad); } .pp-unk { background: var(--text-muted); }

.settings-btn { font-weight: 800; font-size: 1rem; letter-spacing: -.02em; }

.acct-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 4px;
    font-size: .88rem; font-weight: 650;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
}
.acct-btn:hover { border-color: var(--primary-line); }
.acct-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.acct-head .avatar { width: 40px; height: 40px; font-size: 1rem; }
.acct-head small { display: block; color: var(--text-muted); font-size: .8rem; }
.menu-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; font-size: .92rem; font-weight: 550; color: var(--text); text-decoration: none; border-radius: 11px; }
.menu-link:hover { background: var(--surface-2); }
.menu-link .ic { color: var(--text-muted); }
.guest-links { display: flex; gap: 6px; flex-shrink: 0; }

/* ===================== ГЛАВНАЯ: КОНТЕНТ ===================== */
.workspace { display: flex; align-items: flex-start; }
.content { flex: 1; min-width: 0; padding: 18px 36px 90px; }
.content-inner { max-width: 1000px; margin: 0 auto; }

.notice-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 11px 16px; font-size: .92rem; border-radius: 13px; color: var(--bad-text); background: var(--bad-soft); }

/* Шапка раздела */
.hero {
    position: relative;
    margin-bottom: 22px;
    padding: 26px 30px 0;
    overflow: hidden;
    background:
        radial-gradient(520px 220px at 100% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
        radial-gradient(420px 200px at 0% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 70%),
        var(--surface);
    border: 1px solid var(--border);
    border-radius: 26px;
    box-shadow: var(--shadow);
}
.hero::after {
    content: ''; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px;
    border-radius: 50%;
    border: 28px solid color-mix(in srgb, var(--accent) 9%, transparent);
    pointer-events: none;
}
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; font-size: .84rem; color: var(--text-muted); }
.crumb-sep { opacity: .5; }
.crumb-chapter { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; font-weight: 650; color: var(--accent-text); background: var(--accent-soft); border-radius: 999px; }
.crumb-chapter::before { content: ''; width: 8px; height: 8px; border-radius: 3px; background: var(--accent); }

.page-kicker { margin-bottom: 4px; font-size: .78rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-text); }
.page-title { position: relative; z-index: 1; margin: 0 0 14px; font-size: 2rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }

.section-meta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: .8rem; font-weight: 550; font-variant-numeric: tabular-nums; color: var(--text-muted); background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: 999px; }
.chip-free { color: var(--ok-text); background: var(--ok-soft); border-color: transparent; font-weight: 650; }
.chip-lock { color: var(--a2-text); background: var(--a2-soft); border-color: transparent; font-weight: 650; }

/* Вкладки раздела: Задания / Справочник */
.sec-tabs { position: relative; z-index: 1; display: flex; gap: 4px; margin: 0 -8px; overflow-x: auto; scrollbar-width: none; }
.sec-tabs::-webkit-scrollbar { display: none; }
.sec-tab { flex-shrink: 0; white-space: nowrap; }
.sec-tab {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 16px 14px;
    font-size: .95rem; font-weight: 700;
    color: var(--text-muted);
    background: none; border: 0;
    cursor: pointer;
    transition: color .15s;
}
.sec-tab .ic { opacity: .8; }
.sec-tab:hover { color: var(--text); }
.sec-tab[aria-selected="true"] { color: var(--primary-text); }
.sec-tab[aria-selected="true"]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--grad); }
.sec-tab .count { padding: 0 8px; font-size: .72rem; font-weight: 750; line-height: 1.6; color: var(--text-muted); background: var(--surface-2); border-radius: 999px; }
.sec-tab[aria-selected="true"] .count { color: var(--primary-text); background: var(--primary-soft); }
.sec-tab .new-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 25%, transparent); }

/* Инструкция главы */
.note { margin-bottom: 22px; background: var(--a2-soft); border: 1px solid var(--a2-line); border-radius: var(--radius); }
.note summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 13px 20px; font-weight: 650; color: var(--a2-text); cursor: pointer; user-select: none; }
.note summary::-webkit-details-marker { display: none; }
.note summary::after { content: ''; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s; opacity: .6; }
.note[open] summary::after { transform: rotate(45deg); }
.note-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--a2-text); background: color-mix(in srgb, var(--accent2) 18%, transparent); }
.note-body { padding: 0 22px 18px 58px; line-height: 1.75; overflow-x: auto; }

.filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 10px 16px; font-size: .9rem; color: var(--a2-text); background: var(--a2-soft); border: 1px solid var(--a2-line); border-radius: 13px; }
.filter-bar button { margin-left: auto; }

.block-card { margin-bottom: 24px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); scroll-margin-top: calc(var(--toolbar-h) + 14px); }
.block-head { padding: 16px 26px; font-weight: 650; line-height: 1.65; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface)); border-bottom: 1px solid var(--border); border-left: 4px solid var(--accent); }
.block-body { padding: 2px 26px 6px; }
.debug-id { color: var(--text-muted); font-size: .8rem; font-weight: 400; margin-right: 8px; }
.debug-ans { display: inline-block; margin-left: 6px; padding: 0 6px; font-size: .75rem; border-radius: 5px; background: var(--warn-soft); color: var(--warn-text); }

.question { position: relative; padding: 22px 0; border-top: 1px solid var(--border); scroll-margin-top: calc(var(--toolbar-h) + 14px); }
.question.is-first { border-top: 0; }
.question.filtered-out { display: none; }
.question::before { content: ''; position: absolute; left: -26px; top: 22px; bottom: 22px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; transition: background .2s; }
.question.is-right::before   { background: var(--ok); }
.question.is-wrong::before   { background: var(--bad); }
.question.is-unknown::before { background: var(--text-muted); }

.q-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.q-num { flex-shrink: 0; min-width: 36px; height: 36px; padding: 0 8px; display: grid; place-items: center; font-size: .9rem; font-weight: 750; color: var(--accent-text); background: var(--accent-soft); border-radius: 11px; transition: background .2s, color .2s; }
.question.is-right .q-num   { background: var(--ok);  color: #fff; }
.question.is-wrong .q-num   { background: var(--bad); color: #fff; }
.question.is-unknown .q-num { background: var(--text-muted); color: var(--surface); }
.question.flash .q-num { animation: pulse .9s ease 2; }
.question.is-right.just .q-num { animation: pop .45s var(--ease); }

.q-text { flex: 1; min-width: 0; padding-top: 5px; font-size: 1.06rem; line-height: 1.75; overflow-x: auto; }
.q-flag { flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center; color: var(--border-strong); background: transparent; border: 0; border-radius: 11px; cursor: pointer; transition: color .15s, background .15s; }
.q-flag:hover { color: var(--warn); background: var(--warn-soft); }
.q-flag[aria-pressed="true"] { color: var(--warn); }
.q-flag[aria-pressed="true"] svg { fill: currentColor; }
.q-body { padding-left: 50px; }

.q-text > :first-child, .solution-body > :first-child, .note-body > :first-child { margin-top: 0; }
.q-text > :last-child,  .solution-body > :last-child,  .note-body > :last-child  { margin-bottom: 0; }
:is(.q-text, .opt-text, .solution-body, .note-body, .block-head, .hb-content, .preview-box) :is(svg, img) { max-width: 100%; height: auto; vertical-align: middle; }
:is(.q-text, .solution-body, .note-body, .preview-box) table { border-collapse: collapse; margin: .5em 0; }
:is(.q-text, .solution-body, .note-body, .preview-box) :is(td, th) { border: 1px solid var(--border-strong); padding: 4px 10px; }
html[data-mode="dark"] :is(.q-text, .opt-text, .solution-body, .note-body, .block-head, .preview-box) :is(svg, img) { background: #ECE9F6; border-radius: 8px; padding: 4px; }

/* Защита от копирования: текст заданий нельзя выделить мышью */
.protect .q-text, .protect .opt-text, .protect .solution-body, .protect .block-head { -webkit-user-select: none; user-select: none; }

.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.option { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s, opacity .2s, transform .12s var(--ease), box-shadow .15s; }
.option:hover { border-color: var(--primary-line); background: var(--primary-faint); transform: translateY(-1px); box-shadow: 0 6px 14px -10px var(--glow); }
.option:active { transform: scale(.99); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.opt-key { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; font-size: .85rem; font-weight: 750; color: var(--text-muted); background: var(--surface-2); border-radius: 9px; transition: background .15s, color .15s; }
.option:hover .opt-key { color: var(--primary-text); background: var(--primary-soft); }
.opt-text { flex: 1; min-width: 0; overflow-x: auto; }
.question.answered .option, .question.busy .option { cursor: default; pointer-events: none; }
.option.correct   { border-color: var(--ok);  background: var(--ok-soft);  color: var(--ok-text); font-weight: 550; }
.option.incorrect { border-color: var(--bad); background: var(--bad-soft); color: var(--bad-text); }
.option.chosen    { border-color: var(--primary); background: var(--primary-soft); }
.option.correct .opt-key   { background: var(--ok);  color: #fff; }
.option.incorrect .opt-key { background: var(--bad); color: #fff; }
.option.chosen .opt-key    { background: var(--primary); color: var(--on-primary); }
.option.dim { opacity: .5; }
.question.busy .q-body { opacity: .6; }

.short-row { display: flex; gap: 10px; max-width: 460px; }
.short-input { flex: 1; min-width: 0; padding: 11px 14px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 13px; outline: none; transition: border-color .15s, box-shadow .15s; }
.short-input::placeholder { color: var(--text-muted); }
.short-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent); }
.short-input.correct   { border-color: var(--ok);  background: var(--ok-soft);  color: var(--ok-text);  font-weight: 650; }
.short-input.incorrect { border-color: var(--bad); background: var(--bad-soft); color: var(--bad-text); font-weight: 650; }
.short-input.unknown   { border-color: var(--border-strong); background: var(--surface-2); font-weight: 650; }
.short-input.shake { animation: shake .35s ease; border-color: var(--bad); }
.question.answered .check-btn { display: none; }

.answer-note { display: inline-flex; margin-top: 10px; padding: 7px 12px; font-size: .9rem; font-weight: 650; border-radius: 11px; }
.answer-note.correct-answer { color: var(--ok-text); background: var(--ok-soft); }
.answer-note.no-answer { color: var(--a2-text); background: var(--a2-soft); font-weight: 550; }

.tf { display: flex; gap: 10px; }
.tf-btn { min-width: 140px; padding: 10px 20px; font-weight: 650; background: var(--surface); border: 1.5px solid var(--border); border-radius: 13px; cursor: pointer; transition: border-color .15s, background .15s, opacity .2s; }
.tf-btn:hover:not(:disabled) { border-color: var(--primary-line); background: var(--primary-faint); color: var(--primary-text); }
.tf-btn:disabled { cursor: default; }
.tf-btn.correct   { border-color: var(--ok);  background: var(--ok-soft);  color: var(--ok-text); }
.tf-btn.incorrect { border-color: var(--bad); background: var(--bad-soft); color: var(--bad-text); }
.tf-btn.chosen    { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-text); }
.tf-btn.dim { opacity: .5; }

.q-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.q-actions:not(:has(> :not([hidden]))) { display: none; }
.ghost-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; font-size: .85rem; font-weight: 650; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; text-decoration: none; }
.ghost-btn:hover { color: var(--text); background: var(--surface-2); }
.sol-btn { color: var(--a2-text); border-color: var(--a2-line); }
.sol-btn:hover, .sol-btn[aria-expanded="true"] { color: var(--a2-text); background: var(--a2-soft); }
.sol-btn.loading { opacity: .6; pointer-events: none; }

.solution { margin-top: 12px; padding: 16px 20px; line-height: 1.8; overflow-x: auto; background: var(--a2-soft); border-left: 4px solid var(--accent2); border-radius: 4px 14px 14px 4px; animation: fadeUp .25s var(--ease); }
.solution h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .92rem; color: var(--a2-text); }
.solution h4 .sol-hint { margin-left: auto; font-size: .74rem; font-weight: 550; color: var(--text-muted); }

.final-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1.5px dashed var(--a2-line); }
.ans-label { font-size: .85rem; font-weight: 650; color: var(--a2-text); }
.ans-value { padding: 5px 14px; font-size: 1.05rem; font-weight: 750; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; }

/* Замок под первым вопросом */
.locked-list { padding: 4px 0 8px; }
.locked-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); color: var(--text-muted); }
.locked-row .q-num { background: var(--surface-2); color: var(--text-muted); }
.locked-lines { flex: 1; display: grid; gap: 7px; }
.locked-lines i { display: block; height: 9px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--border) 60%, var(--surface-2)); }
.locked-lines i:nth-child(2) { width: 62%; }

.lock-card {
    position: relative;
    margin: 0 0 24px; padding: 32px 26px 28px;
    text-align: center;
    background: radial-gradient(circle at 50% 0%, var(--primary-soft), transparent 65%), var(--surface);
    border: 1.5px solid var(--primary-line);
    border-radius: 24px;
    box-shadow: var(--shadow);
}
.lock-badge { width: 68px; height: 68px; margin: 0 auto 14px; display: grid; place-items: center; color: #fff; background: var(--grad); border-radius: 22px; box-shadow: 0 12px 28px -10px var(--glow); }
.lock-card h3 { margin: 0 0 6px; font-size: 1.25rem; }
.lock-card p { margin: 0 auto 18px; max-width: 520px; color: var(--text-muted); }
.lock-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.lock-price { margin-top: 12px; font-size: .86rem; color: var(--text-muted); }

/* Итог */
.result { display: flex; align-items: center; gap: 18px; margin: 6px 0 16px; padding: 18px 22px; border-radius: 18px; border: 1px solid transparent; animation: fadeUp .2s var(--ease); }
.result.good { --c: var(--ok);   background: var(--ok-soft);   border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.result.mid  { --c: var(--primary); background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 25%, transparent); }
.result.low  { --c: var(--bad);  background: var(--bad-soft);  border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
.ring { flex-shrink: 0; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--c, var(--primary)) calc(var(--p, 0) * 1%), var(--border) 0); }
.ring span { width: 46px; height: 46px; display: grid; place-items: center; font-size: .82rem; font-weight: 750; background: var(--surface); border-radius: 50%; }
.result-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.result-text strong { font-size: 1.02rem; }
.result-text small { color: var(--text-muted); font-size: .86rem; }

.check-pill.remember { margin: 2px 0 14px; }

/* Ошибки форм — прямо под полем */
.field-error { display: block; margin-top: 5px; font-size: .84rem; font-weight: 600; color: var(--bad-text); }
.field.has-error .input { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 14%, transparent); }

/* Прогресс раздела (шапка) */
.sec-progress { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 14px 0 4px; }
.sp-bar { flex: 1 1 180px; max-width: 360px; height: 8px; border-radius: 99px; background: var(--surface-2); display: flex; overflow: hidden; }
.sp-bar span { height: 100%; transition: width .25s var(--ease); }
.sp-ok { background: var(--ok); } .sp-bad { background: var(--bad); }
.sp-text { font-size: .88rem; color: var(--text-muted); font-weight: 600; }
.sp-reset { display: inline-flex; align-items: center; gap: 5px; font-size: .85rem; }
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.pager a { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; transition: border-color .15s, background .15s, transform .15s var(--ease); }
.pager a:hover { border-color: var(--primary-line); background: var(--primary-faint); transform: translateY(-2px); }
.pager small { font-size: .78rem; font-weight: 650; color: var(--primary-text); }
.pager strong { font-size: .93rem; font-weight: 650; }
.pager .next { grid-column: 2; text-align: right; }

.empty-state { padding: 36px; text-align: center; color: var(--text-muted); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); }

/* ===================== ПРАВАЯ ПАНЕЛЬ ===================== */
.rightbar { flex-shrink: 0; width: var(--rightbar-w); position: sticky; top: var(--toolbar-h); height: calc(calc(var(--vh) * 100) - var(--toolbar-h)); overflow-y: auto; padding: 18px 22px 40px 0; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
html.rightbar-hidden .rightbar { display: none; }
.rb-head { display: none; align-items: center; justify-content: space-between; margin-bottom: 12px; font-weight: 750; }
.rb-card { margin-bottom: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.rb-card.promo { background: radial-gradient(260px 140px at 100% 0%, color-mix(in srgb, var(--accent2) 16%, transparent), transparent 70%), var(--surface); border-color: var(--primary-line); }
.rb-card.promo p { margin: 0 0 12px; font-size: .88rem; color: var(--text-muted); }
.rb-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; font-size: .76rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }

.rb-stats { display: flex; align-items: center; gap: 16px; }
.rb-stats .ring { width: 74px; height: 74px; }
.rb-stats .ring span { width: 60px; height: 60px; font-size: 1rem; }
.stat-list { flex: 1; display: grid; gap: 5px; font-size: .86rem; }
.stat-list div { display: flex; align-items: center; gap: 8px; }
.stat-list b { margin-left: auto; font-variant-numeric: tabular-nums; }
.dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.dot.ok { background: var(--ok); } .dot.bad { background: var(--bad); }
.dot.unk { background: var(--text-muted); } .dot.todo { background: var(--border-strong); }

.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; font-size: .8rem; font-weight: 650; color: var(--text-muted); background: var(--surface-2); border: 1px solid transparent; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.filters button:hover { color: var(--text); }
.filters button span { min-width: 20px; padding: 0 5px; font-size: .72rem; text-align: center; font-variant-numeric: tabular-nums; background: var(--surface); border-radius: 999px; }
.filters button[aria-pressed="true"] { color: var(--primary-text); background: var(--primary-soft); border-color: var(--primary-line); }

.qmap-group + .qmap-group { margin-top: 12px; }
.qmap-title { display: block; width: 100%; margin-bottom: 6px; padding: 0; overflow: hidden; font-size: .78rem; font-weight: 650; text-align: left; white-space: nowrap; text-overflow: ellipsis; color: var(--accent-text); background: none; border: 0; cursor: pointer; }
.qmap-title:hover { text-decoration: underline; }
.qmap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 5px; }
.qm { position: relative; height: 32px; padding: 0; font-size: .76rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; cursor: pointer; transition: background .15s, color .15s, border-color .15s, opacity .15s; }
.qm:hover { border-color: var(--primary-line); color: var(--text); }
.qm.right   { background: var(--ok);  border-color: var(--ok);  color: #fff; }
.qm.wrong   { background: var(--bad); border-color: var(--bad); color: #fff; }
.qm.unknown { background: var(--text-muted); border-color: var(--text-muted); color: var(--surface); }
.qm.flag::after { content: ''; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px var(--surface); }
.qm.current { outline: 2px solid var(--primary); outline-offset: 1px; }
.qm.dimmed { opacity: .3; }
.qm.locked { display: grid; place-items: center; color: var(--text-muted); opacity: .55; background: transparent; border-style: dashed; }
.qmap-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; font-size: .74rem; color: var(--text-muted); }
.qmap-legend span { display: inline-flex; align-items: center; gap: 5px; }

.rb-actions { display: grid; gap: 6px; }
.rb-actions .ghost-btn { justify-content: flex-start; width: 100%; padding: 8px 12px; }

.timer { display: flex; align-items: center; gap: 8px; }
.timer-time { flex: 1; font-size: 1.5rem; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.timer.running .timer-time { color: var(--primary-text); }

.rb-terms { display: flex; flex-wrap: wrap; gap: 6px; }
.rb-terms button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 10px; font-size: .8rem; font-weight: 600; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.rb-terms button:hover { border-color: var(--primary-line); color: var(--primary-text); background: var(--primary-faint); }

/* ===================== СПРАВОЧНИК ===================== */
.hb-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.hb-toolbar .search-box { flex: 1; min-width: 220px; }
.hb-intro { display: flex; gap: 14px; align-items: center; padding: 16px 18px; margin-bottom: 18px; background: var(--primary-faint); border: 1px solid var(--primary-line); border-radius: 18px; font-size: .92rem; }
.hb-intro .ic { color: var(--primary-text); }
.hb-intro b { display: block; }

.hb-topic { margin-bottom: 26px; }
.hb-topic-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.topic-icon { flex-shrink: 0; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff)); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
html[data-mode="dark"] .topic-icon { color: #16141E; }
.hb-topic-head h2 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.hb-topic-head small { display: block; font-size: .82rem; font-weight: 500; color: var(--text-muted); }
.hb-group-title { margin: 18px 0 10px; font-size: .76rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }

.hb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.hb-card {
    position: relative;
    display: flex; flex-direction: column; gap: 6px;
    min-height: 104px;
    padding: 15px 16px 14px;
    text-align: left;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    cursor: pointer;
    overflow: hidden;
    transition: transform .18s var(--ease), box-shadow .18s, border-color .18s;
}
.hb-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent, var(--primary)); opacity: .8; }
.hb-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent, var(--primary)) 45%, var(--surface)); box-shadow: 0 16px 30px -16px color-mix(in srgb, var(--accent, var(--primary)) 55%, transparent); }
.hb-card b { font-size: .98rem; font-weight: 750; line-height: 1.35; }
.hb-card .hb-short { font-size: .86rem; color: var(--text-muted); line-height: 1.55; overflow: hidden; }
.hb-card .hb-open { position: absolute; right: 12px; top: 12px; color: var(--text-muted); opacity: 0; transition: opacity .15s, transform .15s; }
.hb-card:hover .hb-open { opacity: 1; transform: translateX(2px); }
.hb-empty { padding: 24px; text-align: center; color: var(--text-muted); }

.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-bottom: 30px; }
.topic-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); transition: transform .18s var(--ease), box-shadow .18s, border-color .18s; }
.topic-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--surface)); box-shadow: 0 16px 30px -16px color-mix(in srgb, var(--accent) 55%, transparent); }
.topic-card b { display: block; font-size: 1.04rem; font-weight: 750; line-height: 1.3; }
.topic-card div > span { display: block; margin-top: 4px; font-size: .85rem; color: var(--text-muted); line-height: 1.45; }
.topic-card .cnt { display: inline-block; margin-top: 8px; padding: 2px 9px; font-size: .74rem; font-weight: 750; color: var(--accent-text); background: var(--accent-soft); border-radius: 999px; }
.topic-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.topic-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: .84rem; font-weight: 650; color: var(--text-muted); text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
.topic-chip:hover { color: var(--text); border-color: var(--accent); }
.topic-chip.on { color: #fff; background: var(--accent); border-color: var(--accent); }
html[data-mode="dark"] .topic-chip.on { color: #16141E; }

/* Содержимое статьи */
.hb-content { line-height: 1.8; }
.hb-content p { margin: 0 0 12px; }
.hb-content h4 { display: flex; align-items: center; gap: 8px; margin: 20px 0 8px; font-size: 1rem; font-weight: 750; color: var(--primary-text); }
.hb-content h4::before { content: ''; width: 6px; height: 16px; border-radius: 3px; background: var(--grad); }
.hb-content ul, .hb-content ol { margin: 0 0 12px; padding-left: 22px; }
.hb-content li { margin-bottom: 4px; }
.hb-content li::marker { color: var(--primary-text); }
.hb-key { position: relative; margin: 12px 0; padding: 14px 18px; line-height: 2.05; overflow-x: auto; background: var(--primary-faint); border: 1px solid var(--primary-line); border-radius: 14px; }
.hb-warn { margin: 12px 0; padding: 12px 16px; font-size: .95rem; color: var(--warn-text); background: var(--warn-soft); border-radius: 14px; overflow-x: auto; }
.hb-warn > b:first-child { display: block; margin-bottom: 2px; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.hb-example { margin: 12px 0; padding: 12px 16px; background: var(--a2-soft); border-left: 3px solid var(--accent2); border-radius: 4px 14px 14px 4px; overflow-x: auto; }
.hb-math { margin: 10px 0; text-align: center; overflow-x: auto; }
.hb-table { margin: 12px 0; overflow-x: auto; }
.hb-table table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.hb-table th { font-weight: 750; text-align: left; background: var(--surface-2); }
.hb-table th, .hb-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.hb-table tr:last-child td { border-bottom: 0; }
.hb-table td + td, .hb-table th + th { border-left: 1px solid var(--border); }
.term-link { color: var(--primary-text); font-weight: 650; text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1.5px; cursor: pointer; }

/* Подсвеченные термины в решениях */
.term {
    color: inherit;
    text-decoration: underline dotted color-mix(in srgb, var(--primary) 70%, transparent);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    border-radius: 5px;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}
.term:hover, .term:focus-visible { color: var(--primary-text); background: var(--primary-soft); box-shadow: 0 0 0 3px var(--primary-soft); outline: none; }
.term-math { display: inline-block; padding: 0 2px; border-bottom: 1.5px dotted color-mix(in srgb, var(--primary) 70%, transparent); text-decoration: none; }
html.terms-off .term { text-decoration: none; cursor: auto; }
html.terms-off .term-math { border-bottom: 0; }
html.terms-off .term:hover { background: none; box-shadow: none; color: inherit; }

.term-pop {
    position: fixed; z-index: 150;
    max-width: 340px;
    padding: 12px 14px;
    font-size: .88rem; line-height: 1.55;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    animation: pop .15s var(--ease);
}
.term-pop b { display: block; margin-bottom: 4px; font-size: .92rem; color: var(--primary-text); }
.term-pop .tp-hint { display: block; margin-top: 6px; font-size: .74rem; color: var(--text-muted); }

/* Окно */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; }
.modal-backdrop { position: absolute; inset: 0; background: var(--overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .2s; }
.modal-card {
    position: relative;
    outline: none;
    width: min(760px, 100%);
    max-height: min(calc(var(--vh) * 86), 900px);
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 26px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modalIn .28s var(--ease);
}
.modal-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); }
.modal-head { display: flex; align-items: flex-start; gap: 10px; padding: 22px 20px 14px 26px; border-bottom: 1px solid var(--border); background: radial-gradient(400px 160px at 100% 0%, color-mix(in srgb, var(--accent2) 12%, transparent), transparent 70%); }
.modal-titles { flex: 1; min-width: 0; }
.modal-head h2 { margin: 2px 0 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.modal-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.modal-topics span { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; font-size: .72rem; font-weight: 750; color: var(--accent-text); background: var(--accent-soft); border-radius: 999px; }
.modal-back { margin-left: -8px; }
.modal-body { flex: 1; overflow-y: auto; padding: 18px 26px 22px; overscroll-behavior: contain; }
.term-short { margin-bottom: 14px; padding: 12px 16px; font-size: 1.02rem; line-height: 1.9; text-align: center; background: var(--surface-2); border-radius: 14px; overflow-x: auto; }
.term-short:empty { display: none; }
.term-loading { display: grid; gap: 10px; }
.term-loading i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--border), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.term-loading i:nth-child(2) { width: 80%; } .term-loading i:nth-child(3) { width: 60%; }
/* Скелетон (серые полосы) пока грузится текст */
.skeleton-lines { display: grid; gap: 10px; padding: 4px 0; }
.skeleton-lines i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--border), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.skeleton-lines i:nth-child(2) { width: 85%; } .skeleton-lines i:nth-child(3) { width: 55%; }
.modal-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 20px 16px 26px; border-top: 1px solid var(--border); background: var(--surface-2); }
.term-related { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.term-related::-webkit-scrollbar { display: none; }
.term-related button { flex-shrink: 0; white-space: nowrap; }
.term-related:not(:empty)::before { content: 'Տես նաև՝'; flex-shrink: 0; margin-right: 4px; font-size: .8rem; font-weight: 650; color: var(--text-muted); }
.term-related button { padding: 5px 11px; font-size: .8rem; font-weight: 650; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.term-related button:hover { color: var(--primary-text); border-color: var(--primary-line); }
.term-lock { padding: 18px; text-align: center; background: var(--primary-faint); border: 1px dashed var(--primary-line); border-radius: 16px; }
body.modal-open { overflow: hidden; }

/* ===================== АДМИНКА ===================== */
.admin-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; max-width: 1320px; margin: 0 auto; padding: 26px 24px 80px; }
.admin-nav { position: sticky; top: 86px; align-self: start; display: grid; gap: 3px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); }
.admin-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: .9rem; font-weight: 650; color: var(--text-muted); text-decoration: none; border-radius: 12px; }
.admin-nav a:hover { color: var(--text); background: var(--surface-2); }
.admin-nav a.on { color: var(--primary-text); background: var(--primary-soft); }
.admin-nav a .badge { margin-left: auto; }
.admin-nav .sep { height: 1px; margin: 6px 4px; background: var(--border); }
.admin-main h1 { margin: 0 0 6px; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
.admin-main > .lead { margin: 0 0 22px; color: var(--text-muted); }
.crumbs-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; font-size: .86rem; color: var(--text-muted); }
.crumbs-admin a { color: var(--text-muted); text-decoration: none; font-weight: 600; }
.crumbs-admin a:hover { color: var(--primary-text); }

.tree { display: grid; gap: 10px; }
.tree-book { padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; }
.tree-book > header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tree-book > header b { font-size: 1.05rem; }
.tree-chapter { margin: 8px 0 0 6px; padding: 10px 0 4px 14px; border-left: 2px solid var(--border); }
.tree-chapter > header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 650; }
.tree-sections { display: grid; gap: 4px; margin: 8px 0 4px; padding: 0; list-style: none; }
.tree-sections a.sec { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--text); text-decoration: none; border-radius: 11px; background: var(--surface-2); border: 1px solid transparent; font-size: .9rem; }
.tree-sections a.sec:hover { border-color: var(--primary-line); background: var(--primary-faint); }
.tree-sections .sec small { margin-left: auto; color: var(--text-muted); white-space: nowrap; }
.row-actions { display: inline-flex; gap: 4px; margin-left: auto; }
.row-actions .icon-btn { width: 32px; height: 32px; border-radius: 9px; }

.q-list { display: grid; gap: 8px; }
.q-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.q-row:hover { border-color: var(--primary-line); }
.q-row .q-num { min-width: 40px; }
.q-row .q-excerpt { font-size: .92rem; line-height: 1.6; overflow: hidden; max-height: 5.2em; }
.q-row .q-info { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.block-admin { margin-bottom: 18px; padding: 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; }
.block-admin > header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.block-admin > header .block-title { flex: 1; min-width: 200px; font-weight: 650; }

.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.editor-grid .preview-col { position: sticky; top: 86px; }
.preview-box { min-height: 120px; padding: 16px 18px; line-height: 1.75; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow-x: auto; }
.preview-box .pv-label { display: block; margin: 14px 0 6px; font-size: .72rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.preview-box .pv-label:first-child { margin-top: 0; }
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt-grid .field { margin-bottom: 0; }
.opt-grid label.correct-pick { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.form-actions .spacer { flex: 1; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px; }
.check-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; font-size: .86rem; font-weight: 600; background: var(--surface); border: 1.5px solid var(--border); border-radius: 999px; cursor: pointer; }
.check-pill:has(input:checked) { color: var(--primary-text); border-color: var(--primary); background: var(--primary-faint); }
.check-pill input { accent-color: var(--primary); }
.syntax-help { font-size: .82rem; color: var(--text-muted); line-height: 1.7; }
.syntax-help code { font-size: .8rem; }
.kv { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px 16px; align-items: center; }
.kv > label { font-weight: 650; font-size: .9rem; }
.url-copy { display: flex; gap: 6px; align-items: center; }
.url-copy code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 7px 10px; }

@keyframes pulse { 50% { transform: scale(1.12); box-shadow: 0 0 0 6px var(--accent-soft); } }
@keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ===================== АДАПТИВНОСТЬ ===================== */
@media (max-width: 1399px) {
    .rightbar, html.rightbar-hidden .rightbar {
        display: block;
        position: fixed; top: 0; right: 0; bottom: 0;
        height: auto;
        width: min(92vw, 360px);
        padding: 16px;
        background: var(--sidebar-bg);
        border-left: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        transform: translateX(105%);
        visibility: hidden;
        transition: transform .28s var(--ease), visibility 0s linear .28s;
        z-index: 45;
    }
    body.tools-open .rightbar { transform: none; visibility: visible; transition: transform .28s var(--ease); }
    .rb-head { display: flex; }
}

@media (max-width: 1100px) {
    .acct-name { display: none; }
    .admin-shell { grid-template-columns: minmax(0, 1fr); }
    .admin-nav { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
    .admin-nav .sep { display: none; }
    .editor-grid { grid-template-columns: 1fr; }
    .editor-grid .preview-col { position: static; }
    .checkout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .sidebar { width: min(88vw, 380px); transform: translateX(-100%); visibility: hidden; box-shadow: var(--shadow-lg); background: var(--sidebar-bg); transition: transform .28s var(--ease), visibility 0s linear .28s; }
    html body.nav-open .sidebar { transform: none; visibility: visible; transition: transform .28s var(--ease); }
    body.nav-open, body.tools-open { overflow: hidden; }
    .sidebar-close { display: inline-grid; }
    .sidebar-resizer { display: none; }

    .main, html.sidebar-hidden .main { margin-left: 0; }
    .toolbar { padding: 0 10px; gap: 4px; }
    .pp-track { width: 46px; }
    .menu-panel { position: fixed; top: 64px; right: 10px; width: min(330px, calc(100vw - 20px)); }
    .guest-links .btn-ghost { display: none; }

    .content { padding: 12px 14px 60px; }
    .hero { padding: 20px 18px 0; border-radius: 22px; }
    .page-title { font-size: 1.5rem; }
    .sec-tab { padding: 10px 10px 12px; font-size: .9rem; }
    .block-head { padding: 14px 16px; }
    .block-body { padding: 2px 16px 6px; }
    .question::before { left: -16px; }
    .q-body { padding-left: 0; }
    .options { grid-template-columns: 1fr; }
    .tf-btn { flex: 1; min-width: 0; }
    .note-body { padding: 0 18px 16px; }
    .result { flex-wrap: wrap; }
    .result .btn { width: 100%; }
    .pager { grid-template-columns: 1fr; }
    .pager .next { grid-column: auto; }

    .site-top { padding: 10px 14px; gap: 8px; }
    .site-nav { margin-left: 4px; }
    .site-nav > a span { display: none; }
    .site-nav > a { padding: 8px 10px; }
    .page { padding: 22px 14px 60px; }
    .page-hero { padding: 24px 20px; border-radius: 22px; }
    .page-hero h1, .page h1 { font-size: 1.6rem; }
    .plans, .features, .stats { grid-template-columns: 1fr; }
    .auth-card { padding: 24px; }
    .admin-shell { padding: 16px 12px 60px; }
    .kv { grid-template-columns: 1fr; }
    .opt-grid { grid-template-columns: 1fr; }
    .q-row { grid-template-columns: 44px minmax(0, 1fr); }
    .q-row .row-actions { grid-column: 1 / -1; margin-left: 0; }

    .modal { padding: 0; align-items: end; }
    .modal-card { width: 100%; max-height: calc(var(--vh) * 92); border-radius: 24px 24px 0 0; animation: sheetIn .25s var(--ease); }
    .modal-head { padding: 18px 14px 12px 18px; }
    .modal-body { padding: 14px 18px 18px; }
    .modal-foot { padding: 12px 14px 14px 18px; }
    .modal-foot .term-related { flex-basis: 100%; }
    .modal-foot .btn { margin-left: auto; }
    .sec-tab .count { display: none; }
    .term-pop { display: none !important; }
}
@keyframes sheetIn { from { transform: translateY(40px); opacity: .5; } }

@media (max-width: 600px) {
    .toolbar-title, .pp-track { display: none; }
    .toolbar { justify-content: flex-end; }
    .toolbar #menuBtn { margin-right: auto; }
    .brand span:last-child { display: none; }
    .site-top .brand span:last-child { display: none; }
    .hb-grid, .topic-grid { grid-template-columns: 1fr; }
    .swatches { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}
.tbl .pay-code, .tbl .num { white-space: nowrap; }

/* Формулы (KaTeX): размер как у текста, длинные — с прокруткой, без выхода за экран */
.katex { font-size: 1.08em; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }

/* =====================================================================
   ТЕСТЫ (tests.php, test.php, test_result.php)
   ===================================================================== */
.test-cards { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-bottom: 8px; }
.test-card { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.test-card h2 { margin: 0; }
.test-card.featured { border-color: var(--primary-line); background: linear-gradient(160deg, var(--primary-faint), var(--surface) 55%); }
.tc-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; background: var(--grad); color: var(--on-primary); }
.tc-lock, .tc-status { display: flex; align-items: center; gap: 7px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: .9rem; font-weight: 600; }
.tc-history { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.tc-history a { display: grid; grid-template-columns: 90px auto 1fr; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.tc-history a:hover { background: var(--surface-2); }
.tc-history span { color: var(--text-muted); font-size: .85rem; }
.mini-bar { display: block; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.mini-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--grad); }
.empty-state.small { padding: 18px; }
.empty-state b { display: block; color: var(--text); margin: 6px 0 2px; }
.empty-state span { display: block; font-size: .9rem; }
.tbl.board tr.me td { background: var(--primary-faint); font-weight: 650; }

/* ---------- Режим теста: все задания одной лентой, навигация справа ---------- */
body.test-mode { background: var(--bg); }
.test-shell { min-height: calc(var(--vh) * 100); display: flex; flex-direction: column; }
.test-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 8px 18px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.t-back { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; font-size: .84rem; font-weight: 600; color: var(--text-muted); text-decoration: none; border: 1px solid var(--border); border-radius: 10px; }
.t-back:hover { color: var(--text); background: var(--surface-2); }
.t-saved { flex: 1; min-width: 0; font-size: .78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-saved.ok { color: var(--ok-text); } .t-saved.bad { color: var(--bad-text); }
.t-timer { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; border-radius: 12px; background: var(--surface-2); }
.t-time { display: inline-flex; align-items: center; gap: 6px; font-weight: 750; font-variant-numeric: tabular-nums; }
.t-timer.paused .t-time { color: var(--text-muted); }
.t-timer.low { background: var(--bad-soft); } .t-timer.low .t-time { color: var(--bad-text); }
.t-timer.t-hidden { padding-left: 4px; } .t-timer.t-hidden .t-time, .t-timer.t-hidden #tTimerBtn { display: none; }
.t-eye { width: 34px; height: 34px; }
.t-count { font-variant-numeric: tabular-nums; font-weight: 750; }
.test-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; width: 100%; max-width: 860px; margin: 0 auto; padding: 22px 18px 60px; }
body.tnav-open .test-body { max-width: 1160px; grid-template-columns: minmax(0, 1fr) 280px; }
.test-nav { display: none; position: sticky; top: 72px; align-self: start; max-height: calc(calc(var(--vh) * 100) - 92px); overflow-y: auto; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
body.tnav-open .test-nav { display: block; }
.tn-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tn-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.tn-level { grid-column: 1 / -1; margin: 6px 0 0; font-size: .74rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.tn-btn { position: relative; min-height: 34px; padding: 0; font-size: .84rem; font-weight: 650; color: var(--text); background: var(--surface-2); border: 1.5px solid transparent; border-radius: 9px; cursor: pointer; transition: background .15s, border-color .15s; }
.tn-btn:hover { border-color: var(--primary-line); }
.tn-btn.filled { background: var(--ok); color: #fff; }
.tn-btn.part { background: var(--ok-soft); color: var(--ok-text); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.tn-btn.flag::after { content: ''; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px var(--surface); }
.tn-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 12px 0; font-size: .78rem; color: var(--text-muted); }
.tn-dot { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); }
.tn-dot.filled { background: var(--ok); border-color: var(--ok); } .tn-dot.part { background: var(--ok-soft); }
.tn-dot.flag { background: var(--warn); border-radius: 50%; border-color: var(--warn); }
.test-main { display: grid; gap: 14px; align-content: start; }
.t-level-sep { margin: 8px 0 0; font-size: 1.05rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.t-group { padding: 12px 16px; font-weight: 600; background: var(--primary-faint); border: 1px solid var(--primary-line); border-radius: var(--radius); }
.t-range { font-weight: 800; color: var(--primary-text); }
.t-card { margin: 0; padding: 18px 20px; scroll-margin-top: 76px; }
.t-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.t-pos { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; font-weight: 800; color: var(--on-primary); background: var(--grad); border-radius: 11px; }
.t-flag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; font: inherit; font-size: .78rem; font-weight: 600; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; }
.t-flag:hover { color: var(--text); background: var(--surface-2); }
.t-flag.on { background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn); }
.t-cond { margin: 0 0 12px; padding: 10px 14px; background: var(--primary-faint); border-left: 3px solid var(--primary-line); border-radius: 10px; }
.t-q + .t-q { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.t-text { font-size: 1.04rem; line-height: 1.65; margin-bottom: 10px; overflow-x: auto; }
.t-stmts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.t-stmt { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.t-stmt + .t-stmt { margin: 0; border: 0; padding-top: 10px; }
.t-stmt-text { display: flex; gap: 8px; }
.t-stmt .t-text { margin-bottom: 8px; }
.t-sub { flex-shrink: 0; font-weight: 750; line-height: 1.65; color: var(--text-muted); }
.t-options .option { min-height: 50px; }
.t-options .option.chosen { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px var(--glow); }
/* Три варианта ответа на утверждение — разные цвета, удобно нажимать на телефоне */
.t-tf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tf3 { min-height: 44px; padding: 8px 10px; font: inherit; font-weight: 650; color: var(--text); background: var(--surface); border: 1.5px solid var(--border); border-radius: 11px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.tf3-yes:hover { border-color: var(--ok); } .tf3-no:hover { border-color: var(--bad); } .tf3-skip:hover { border-color: var(--text-muted); }
.tf3-yes.chosen  { background: var(--ok);  border-color: var(--ok);  color: #fff; }
.tf3-no.chosen   { background: var(--bad); border-color: var(--bad); color: #fff; }
.tf3-skip.chosen { background: var(--text-muted); border-color: var(--text-muted); color: var(--surface); }
.t-end { margin: 6px 0 0; padding: 22px; text-align: center; scroll-margin-top: 76px; }
.t-end h2 { margin: 0 0 6px; }
.t-confirm { max-width: 460px; }
.t-confirm h2 { margin-top: 0; }
@media (max-width: 1099px) {
    body.tnav-open .test-body { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
    .test-nav { display: block; position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(300px, 86vw); max-height: none; border-radius: 0; border-width: 0 0 0 1px; box-shadow: -8px 0 30px rgba(0,0,0,.18); transform: translateX(105%); transition: transform .2s var(--ease); }
}
@media (max-width: 640px) {
    .test-bar { gap: 6px; padding: 6px 10px; }
    .t-back span, .t-nav-toggle > span, .t-saved { display: none; }
    .t-back { padding: 7px 8px; }
    .t-timer { margin-left: auto; padding-left: 8px; }
    #tTimerBtn span { display: none; }
    .test-body { padding: 12px 10px 40px; }
    .t-card { padding: 14px 12px; }
    .t-flag span { display: none; }
    .tf3 { min-height: 48px; padding: 8px 4px; font-size: .9rem; }
}

/* ---------- Результат ---------- */
.result-hero { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.result-hero.good { --c: var(--ok); } .result-hero.mid { --c: var(--primary); } .result-hero.low { --c: var(--bad); }
.ring.big { width: 112px; height: 112px; }
.ring.big span { width: 90px; height: 90px; font-size: 1.5rem; }
.rh-text { flex: 1; min-width: 220px; }
.rh-text small { color: var(--text-muted); }
.rh-text h1 { margin: 4px 0 12px; font-size: 2.2rem; }
.rh-text h1 span { font-size: 1rem; font-weight: 600; color: var(--text-muted); }
.rh-levels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 460px; }
.rh-levels div { display: grid; gap: 4px; }
.rh-levels span { font-size: .82rem; color: var(--text-muted); }
.tr-list { display: grid; gap: 8px; }
.tr-item { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.tr-item > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.tr-item > summary::-webkit-details-marker { display: none; }
.tr-item .t-pos { min-width: 34px; height: 34px; font-size: .9rem; }
.tr-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.tr-item.ok .tr-mark { background: var(--ok-soft); color: var(--ok-text); }
.tr-item.bad .tr-mark, .tr-item.empty .tr-mark { background: var(--bad-soft); color: var(--bad-text); }
.tr-item.empty .tr-mark { opacity: .6; }
.tr-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: .92rem; }
.tr-lv { font-size: .78rem; font-weight: 700; color: var(--text-muted); }
.tr-body { padding: 4px 16px 16px; }
.tr-q + .tr-q { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.tr-answers { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 6px; }
.tr-answers > div { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; padding: 6px 11px; border-radius: 10px; border: 1px solid var(--border); line-height: 1.5; }
.tr-answers small { font-weight: 650; color: var(--text-muted); }
.tr-opt { font-weight: 800; }
.tr-pts { font-weight: 750; font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: .9rem; }
.tr-item.ok .tr-pts { color: var(--ok-text); }
.tr-bunch td { vertical-align: top; }
.tr-bunch tr.ok td:last-child { color: var(--ok-text); } .tr-bunch tr.bad td:last-child { color: var(--bad-text); }
.tr-bunch tr.ok td:nth-child(2) { color: var(--ok-text); font-weight: 600; } .tr-bunch tr.bad td:nth-child(2) { color: var(--bad-text); font-weight: 600; }
.tr-bunch .tr-total td { background: var(--surface-2); font-weight: 650; }
.tr-solbtn { margin-top: 4px; font-size: .8rem; }
.tr-bunch .solution { margin-top: 8px; }
.tr-solbtn { display: inline-flex; white-space: nowrap; }
@media (max-width: 640px) {
    .tr-bunch, .tr-bunch tbody { display: block; }
    .tr-bunch tr:first-child { display: none; }
    .tr-bunch tr { display: grid; grid-template-columns: 1fr 1fr auto; gap: 4px 10px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
    .tr-bunch td { display: block; padding: 0; border: 0; background: none; text-align: left; }
    .tr-bunch td:first-child { grid-column: 1 / -1; }
    .tr-bunch td[data-l]::before { content: attr(data-l); display: block; font-size: .72rem; font-weight: 650; color: var(--text-muted); }
    .tr-bunch .tr-total { grid-template-columns: 1fr auto; padding: 10px; border-radius: 10px; background: var(--surface-2); }
    .tr-bunch .tr-total td:first-child { grid-column: auto; }
}
.tr-answers .ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.tr-answers .bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }

@media (max-width: 900px) {
    .test-cards { grid-template-columns: 1fr; }
    body.tnav-open .test-nav { transform: none; }
    .options.t-options { grid-template-columns: 1fr; }
    .ts-n { display: none; }
}

/* Динамика баллов (личный кабинет) — простые CSS-столбики */
.score-chart { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 10px 4px 22px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.score-chart a { position: relative; flex: 1; max-width: 46px; height: 100%; display: flex; align-items: flex-end; text-decoration: none; }
.score-chart i { display: block; width: 100%; border-radius: 8px 8px 3px 3px; background: var(--grad); transition: opacity .15s; }
.score-chart a:hover i { opacity: .8; }
.score-chart span { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: .72rem; color: var(--text-muted); }

/* ---------- Админка: тесты ---------- */
.slot-list { display: grid; gap: 10px; margin-bottom: 14px; }
.slot { margin: 0; padding: 0; }
.slot > summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.slot > summary::-webkit-details-marker { display: none; }
.slot[open] > summary { border-bottom: 1px solid var(--border); }
.slot > :not(summary) { margin-left: 16px; margin-right: 16px; }
.slot > form { padding-bottom: 14px; }
.slot.slot-bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }
.slot-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.slot-title small { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-fields { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.slot-fields label { display: grid; gap: 4px; font-size: .82rem; font-weight: 650; color: var(--text-muted); }
.sec-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.sp-book { padding: 10px 12px; background: var(--surface-2); border-radius: 12px; }
.sp-chap { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sp-chap small { width: 100%; color: var(--text-muted); font-weight: 700; }
.comp-list { display: grid; gap: 6px; }
.comp-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.comp-row + .comp-row { margin-top: 6px; }
.comp-main { flex: 1; min-width: 220px; }

/* =====================================================================
   ДИЗАЙН-СИСТЕМА: шкалы отступов, радиусов, теней, длительностей.
   Цвета — из тем (data-accent × data-mode) выше.
   ===================================================================== */
:root {
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;
    --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-full: 999px;
    --dur-fast: 150ms; --dur: 200ms; --dur-slow: 250ms;
    --fs-xs: .78rem; --fs-sm: .88rem; --fs-md: 1rem; --fs-lg: 1.15rem; --fs-xl: 1.5rem; --fs-2xl: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
    --lh-tight: 1.15; --lh: 1.6;
}
html[data-mode="light"] { --shadow-sm: 0 1px 2px rgba(40, 36, 80, .06); --shadow-md: 0 6px 20px -6px rgba(40, 36, 80, .14); --shadow-hover: 0 14px 34px -12px rgba(40, 36, 80, .26); }
html[data-mode="dark"]  { --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow-md: 0 6px 20px -6px rgba(0, 0, 0, .5); --shadow-hover: 0 14px 34px -12px rgba(0, 0, 0, .7); }
body { line-height: var(--lh); }

/* Заметное, но аккуратное кольцо фокуса (клавиатура) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2.5px solid var(--primary); outline-offset: 2px; border-radius: 8px; }

/* Крупнее зоны нажатия на телефоне */
.option { min-height: 52px; }
@media (max-width: 900px) { .tf-btn { min-height: 48px; } .btn { min-height: 42px; } }

/* Боковые ссылки меню разделов — в одну строку */
.side-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.side-link { justify-content: center; padding-left: 6px; padding-right: 6px; }

/* =====================================================================
   ГЛАВНАЯ
   ===================================================================== */
.home { max-width: 1160px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-8); }
.hero-home { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-6); align-items: center;
    padding: var(--sp-7) var(--sp-6); border-radius: var(--r-xl); background:
    radial-gradient(1200px 400px at 0% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 60%),
    radial-gradient(700px 360px at 100% 100%, color-mix(in srgb, var(--accent2) 16%, transparent), transparent 60%), var(--surface);
    border: 1px solid var(--border); box-shadow: var(--shadow-md); overflow: hidden; }
.hero-home h1 { margin: var(--sp-3) 0 var(--sp-3); font-size: var(--fs-2xl); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -.03em; }
.hero-home .lead { margin: 0 0 var(--sp-5); font-size: var(--fs-lg); color: var(--text-muted); max-width: 560px; }
.hh-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hh-price { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.hh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.stat-tile { padding: var(--sp-4) var(--sp-4); background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.stat-tile b { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stat-tile span { font-size: var(--fs-sm); color: var(--text-muted); }

.continue-card { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-5) 0 0; padding: var(--sp-4) var(--sp-5); color: inherit; text-decoration: none;
    background: var(--surface); border: 1px solid var(--primary-line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform var(--dur), box-shadow var(--dur); }
.continue-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.cc-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--primary-soft); color: var(--primary-text); }
.cc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cc-text small { color: var(--text-muted); }
.cc-progress { width: 160px; display: grid; gap: 4px; text-align: right; color: var(--text-muted); font-size: var(--fs-xs); }

.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin: var(--sp-6) 0; }
.benefit { padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.benefit b { display: block; margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-lg); }
.benefit p { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.b-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--grad); color: var(--on-primary); }

.section-head { margin: var(--sp-7) 0 var(--sp-4); }
.section-head h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em; }
.section-head .lead { margin: 0; color: var(--text-muted); }

.lib-book { margin-bottom: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.lib-book > summary { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); cursor: pointer; list-style: none; }
.lib-book > summary::-webkit-details-marker { display: none; }
.lib-book > summary b { font-size: var(--fs-lg); }
.lib-book > summary small { flex: 1; color: var(--text-muted); }
.lib-book > summary .ic:last-child { transition: transform var(--dur); color: var(--text-muted); }
.lib-book[open] > summary .ic:last-child { transform: rotate(180deg); }
.lib-book .book-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft, var(--primary-soft)); color: var(--accent-text, var(--primary-text)); }
.lib-book > :not(summary) { margin-left: var(--sp-5); margin-right: var(--sp-5); }
.lib-book > :last-child { margin-bottom: var(--sp-5); }
.lib-chapter { margin: var(--sp-3) 0 var(--sp-3); font-size: var(--fs-sm); font-weight: 750; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.sec-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-3); }
.sec-card { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-4); color: inherit; text-decoration: none; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); transition: transform var(--dur), box-shadow var(--dur), border-color var(--dur); }
.sec-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--primary-line); }
.sc-top { display: flex; align-items: center; justify-content: space-between; }
.sc-num { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; font-size: var(--fs-sm); font-weight: 800; border-radius: 9px; background: var(--accent-soft, var(--primary-soft)); color: var(--accent-text, var(--primary-text)); }
.sc-lock { color: var(--text-muted); }
.sc-title { font-size: .98rem; line-height: 1.35; }
.sc-meta { font-size: var(--fs-xs); color: var(--text-muted); }
.sc-bar { height: 6px; margin-top: auto; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.sc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad); transition: width var(--dur-slow); }

.pricing .plans { margin-top: var(--sp-2); }
.home-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--fs-sm); }
.home-foot nav { display: flex; gap: var(--sp-4); }
.home-foot a { color: inherit; }

@media (max-width: 900px) {
    .home { padding: var(--sp-4) var(--sp-3) var(--sp-8); }
    .hero-home { grid-template-columns: 1fr; padding: var(--sp-6) var(--sp-5); gap: var(--sp-5); }
    .benefits { grid-template-columns: 1fr; }
    .cc-progress { display: none; }
    .lib-book > :not(summary) { margin-left: var(--sp-3); margin-right: var(--sp-3); }
    .lib-book > summary { padding: var(--sp-3) var(--sp-4); }
    .sec-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .sec-cards { grid-template-columns: 1fr; }
    .hh-cta .btn { flex: 1 1 100%; justify-content: center; }
    .stat-tile b { font-size: 1.5rem; }
}

/* =====================================================================
   ТЕЛЕФОН: навигация сайта — нижняя панель (как в приложениях)
   ===================================================================== */
@media (max-width: 700px) {
    .site-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 94%, transparent);
        -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--border); flex-wrap: nowrap; }
    .site-nav > a { flex-direction: column; gap: 3px; padding: 6px 2px; font-size: .68rem; border-radius: 10px; }
    .site-nav > a span { display: block !important; }
    body:has(.site-nav) { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
    /* backdrop-filter у шапки делает её «контейнером» для position: fixed — нижняя панель уехала бы наверх */
    .site-top { gap: 8px; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
}

/* Элементы сетки не растягиваются под широкое содержимое (таблицы, длинные строки) */
.tr-list > *, .slot-list > *, .admin-shell > *, .comp-list > *, .test-body > * { min-width: 0; }
.admin-nav { max-width: 100%; }
.admin-main .table-wrap, .admin-main .tree { max-width: 100%; overflow-x: auto; }
@media (max-width: 900px) {
    .admin-main .inline-form { flex-wrap: wrap; }
    .admin-main .inline-form .input { max-width: 100%; }
    .admin-main .input[style*="width"] { width: 100% !important; }
    .slot > summary { flex-wrap: wrap; }
    .sec-picker { grid-template-columns: 1fr; }
}
/* Длинные пути и адреса (code, URL) переносятся, а не растягивают страницу */
code, .hint, .url-copy, .tbl td { overflow-wrap: anywhere; }

/* =====================================================================
   Тёплый акцент (терракота / золото): важные числа и прогресс
   ===================================================================== */
.stat-tile b { background: none; color: var(--a2-text); -webkit-text-fill-color: currentColor; }
.sc-bar i, .mini-bar > i, .cc-progress .mini-bar > i { background: var(--accent2); }
.score-chart i { background: color-mix(in srgb, var(--accent2) 85%, var(--surface)); }
.cc-icon { background: var(--a2-soft); color: var(--a2-text); }
.b-icon, .tc-icon { background: var(--primary); }
.grad-text { background: none; -webkit-text-fill-color: currentColor; color: var(--primary-text); }
.hero-home { background:
    radial-gradient(900px 380px at 0% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 62%),
    radial-gradient(700px 360px at 100% 100%, color-mix(in srgb, var(--accent2) 9%, transparent), transparent 60%), var(--surface); }
/* Боковая панель — мягкий фон темы (шалфей у «Ակադեմիական»), без прозрачности */
.sidebar { background: var(--sidebar-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Кружок темы — два цвета: основной и тёплый акцент */
.sw-dot { background: linear-gradient(135deg, var(--sw) 0 56%, var(--sw2, var(--sw)) 56% 100%); box-shadow: 0 3px 8px -3px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .45); }
.sw-name { text-align: center; line-height: 1.15; }

/* =====================================================================
   Левая панель разделов: кнопки не выходят за край при любом размере шрифта
   ===================================================================== */
.side-links { grid-template-columns: repeat(auto-fit, minmax(min(100%, 104px), 1fr)); }
.side-link { min-width: 0; overflow: hidden; }
.side-link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-link .ic { flex-shrink: 0; }
.sidebar-head, .sidebar-nav { min-width: 0; }
.sidebar-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; }
.upsell { overflow-wrap: anywhere; }

/* Меню пользователя под именем */
button.site-user { cursor: pointer; font: inherit; font-size: .88rem; font-weight: 650; }
button.site-user .ic:last-child { color: var(--text-muted); transition: transform var(--dur-fast); }
button.site-user[aria-expanded="true"] .ic:last-child { transform: rotate(180deg); }
.account-menu { right: 0; left: auto; width: 270px; }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--border); }
/* Кнопки панели заполняют строку (одиночная кнопка во второй строке — на всю ширину) */
.side-links { display: flex; flex-wrap: wrap; }
.side-link { flex: 1 1 96px; }
/* Узкий экран: длинные подписи кнопок и тем переносятся */
.sw-name { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 600px) { .btn { white-space: normal; text-align: center; } }

/* ---------- Главная: общий прогресс, «Կապ մեզ հետ» ---------- */
.hero-home { grid-template-columns: minmax(0, 1fr); }
.hh-progress { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font-size: .82rem; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 99px; }
.hh-progress b { color: var(--primary-text); }
.hero-home .hh-text { max-width: 720px; }
.hero-home .lead { max-width: 680px; }
.contact-us { margin: var(--sp-6) 0; }
.cu-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.cu-grid > .card { margin: 0; }
.cu-about h3 { margin-top: 0; }
.cu-about p { margin: 0; color: var(--text-muted); }
.cu-links { display: grid; gap: 8px; align-content: start; }
.cu-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--text); text-decoration: none; font-weight: 600; border: 1px solid var(--border); border-radius: 12px; overflow-wrap: anywhere; }
.cu-link:hover { background: var(--surface-2); }
.cu-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; font-weight: 800; color: #fff; background: var(--primary); border-radius: 9px; }
.cu-wa .cu-ic { background: #1F8A4C; } .cu-tg .cu-ic { background: #1C78B5; }
@media (max-width: 760px) {
    .cu-grid { grid-template-columns: 1fr; }
    .hh-progress { position: static; justify-self: end; margin-bottom: 6px; }
}

/* =====================================================================
   ДИЗАЙН v3 (по макетам): тёмная боковая панель и шапка, тёмный первый
   экран, яркий акцент (кнопки, активные пункты), фон с тонкой сеткой.
   Цвета — только из переменных темы (6 тем × светлый / тёмный режим).
   ===================================================================== */
html {
    --grid-line: color-mix(in srgb, var(--primary) 5%, transparent);
    --a2-bright: color-mix(in srgb, var(--accent2) 72%, #fff);   /* акцент на тёмном фоне */
    /* Копии цветов страницы: всплывающие меню внутри тёмных зон возвращают их себе */
    --s-text: var(--text); --s-muted: var(--text-muted); --s-border: var(--border); --s-border-strong: var(--border-strong);
    --s-surface: var(--surface); --s-surface-2: var(--surface-2); --s-hover: var(--hover-bg); --s-active: var(--active-bg);
    --s-primary: var(--primary); --s-primary-text: var(--primary-text); --s-primary-soft: var(--primary-soft);
    --s-primary-faint: var(--primary-faint); --s-primary-line: var(--primary-line); --s-on-primary: var(--on-primary);
}
html[data-mode="light"] { --card-shadow: 0 1px 2px rgba(20, 28, 45, .05), 0 10px 30px -14px rgba(20, 28, 45, .18); }
html[data-mode="dark"]  { --card-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px -14px rgba(0, 0, 0, .7); }

/* Тёмные зоны: переопределяем цвета для всего содержимого */
.sidebar, .site-top, .hero-home, .site-foot, .test-bar {
    --text: #EEF2F7; --text-muted: rgba(232, 238, 246, .68);
    --border: rgba(255, 255, 255, .11); --border-strong: rgba(255, 255, 255, .24);
    --surface: rgba(255, 255, 255, .07); --surface-2: rgba(255, 255, 255, .09);
    --hover-bg: rgba(255, 255, 255, .07); --active-bg: rgba(255, 255, 255, .13); --sidebar-bg: var(--deep);
    --primary: var(--accent2); --primary-text: #FFFFFF; --on-primary: var(--on-a2);
    --primary-soft: rgba(255, 255, 255, .13); --primary-faint: rgba(255, 255, 255, .05);
    --primary-line: color-mix(in srgb, var(--accent2) 65%, transparent);
    --accent-text: var(--a2-bright); --accent-soft: rgba(255, 255, 255, .09);
    --ok-text: #8FE3B8; --ok-soft: rgba(90, 200, 140, .18); --mark: rgba(255, 220, 120, .3);
    color: var(--text);
}
:is(.sidebar, .site-top, .test-bar) :is(.menu-panel, .modal-card) {
    --text: var(--s-text); --text-muted: var(--s-muted); --border: var(--s-border); --border-strong: var(--s-border-strong);
    --surface: var(--s-surface); --surface-2: var(--s-surface-2); --hover-bg: var(--s-hover); --active-bg: var(--s-active);
    --primary: var(--s-primary); --primary-text: var(--s-primary-text); --primary-soft: var(--s-primary-soft);
    --primary-faint: var(--s-primary-faint); --primary-line: var(--s-primary-line); --on-primary: var(--s-on-primary);
    color: var(--text);
}

/* Логотип: акцентный квадрат */
.brand-logo { background: linear-gradient(135deg, var(--accent2), color-mix(in srgb, var(--accent2) 70%, #fff)) !important; color: var(--on-a2) !important; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent2) 70%, transparent); }

/* Кнопки */
.btn-accent { background: var(--accent2); color: var(--on-a2); border: 1px solid transparent; font-weight: 700;
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--accent2) 85%, transparent); }
.btn-accent:hover { background: color-mix(in srgb, var(--accent2) 88%, #000); color: var(--on-a2); }
.btn-glass { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .2); }
.btn-glass:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.btn-grad { background: var(--accent2); color: var(--on-a2); }

/* Карточки */
.card, .benefit, .plan, .continue-card, .lib-book, .tr-item, .sec-card { box-shadow: var(--card-shadow); }
.card { border-radius: 18px; }

/* ---------- Шапка сайта (тёмная) ---------- */
.site-top { background: linear-gradient(90deg, var(--deep), var(--deep2)); border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-top .brand { color: #fff; }
.site-top .site-nav > a.on { background: rgba(255, 255, 255, .12); color: #fff; }
.site-top .site-user { background: rgba(255, 255, 255, .07); }
.site-top .pro-badge, .sidebar .pro-badge { background: var(--accent2); color: var(--on-a2); }
@media (max-width: 700px) {
    .site-top { background: var(--deep); }
    .site-top .site-nav { background: var(--deep); border-top: 1px solid rgba(255, 255, 255, .1); }
}

/* ---------- Боковая панель разделов (тёмная) ---------- */
.sidebar { background: linear-gradient(180deg, var(--deep), var(--deep2)); border-right: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sidebar .brand { color: #fff; }
.sidebar .book-icon { background: rgba(255, 255, 255, .09); color: #fff; }
.sidebar .chap-badge { background: rgba(255, 255, 255, .09); color: #fff; }
.sidebar .nav-chapter.is-current > summary .chap-badge { background: var(--accent2); color: var(--on-a2); }
.sidebar .nav-chapter .nav-title small { color: var(--text-muted); }
.sidebar .nav-chapter.is-current .nav-title small { color: var(--a2-bright); }
.sidebar .nav-book.is-current > summary .nav-title > span { color: #fff; }
.sidebar .nav-item.active { background: rgba(255, 255, 255, .12); color: #fff; }
.sidebar .nav-item.active::before { background: var(--accent2); }
.sidebar .nav-item.active .nav-num { background: var(--accent2); color: var(--on-a2) !important; }
.sidebar .nav-count { background: rgba(255, 255, 255, .08); border-color: transparent; }
.sidebar .side-link { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); color: #fff; }
.sidebar .side-link .ic, .sidebar .side-link svg { color: #fff; }
.sidebar .side-link:hover { background: rgba(255, 255, 255, .13); }
.sidebar .input { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); color: #fff; }
.sidebar .input::placeholder { color: rgba(255, 255, 255, .55); }
.sidebar .sidebar-meta a, .sidebar .sidebar-meta button { color: var(--a2-bright); }

/* ---------- Раздел: заголовок, блоки ---------- */
.hue-0, .hue-1, .hue-2, .hue-3, .hue-4, .hue-5 { --accent: var(--accent2); }
.hero { background: linear-gradient(120deg, var(--surface) 40%, color-mix(in srgb, var(--accent2) 10%, var(--surface))); box-shadow: var(--card-shadow); }
.block-head { border-left-width: 4px; font-weight: 700; }
.note > summary { cursor: pointer; }

/* ---------- Главная ---------- */
.home { padding-top: var(--sp-6); }
.hero-home { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 34px; padding: 44px 44px 36px; border: 0; color: var(--text);
    background:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 34px 34px,
        radial-gradient(520px 320px at 92% 8%, color-mix(in srgb, var(--accent2) 30%, transparent), transparent 70%),
        linear-gradient(140deg, var(--deep), var(--deep2));
    box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--deep) 80%, transparent); }
.hero-home h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin: 14px 0 14px; }
.hh-accent { color: var(--a2-bright); }
.hero-home .lead { color: rgba(236, 241, 248, .78); max-width: 600px; }
.hh-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 99px; }
.hh-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 30%, transparent); }
.hh-price { color: rgba(236, 241, 248, .7); }
.hh-visual { position: relative; align-self: start; min-height: 300px; }

.continue-card { border-color: var(--border); }
.cc-text em { display: block; font-style: normal; font-size: .76rem; color: var(--text-muted); }
.cc-icon { background: color-mix(in srgb, var(--accent2) 15%, var(--surface)) !important; color: var(--accent2) !important; }

.my-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0 8px; }
.ms-tile { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--card-shadow); }
.ms-tile b { display: block; font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ms-tile small { color: var(--text-muted); font-size: .78rem; }
.ms-ic { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; }
.ms-ic.c1 { background: var(--primary-soft); color: var(--primary-text); }
.ms-ic.c2 { background: var(--ok-soft); color: var(--ok-text); }
.ms-ic.c3 { background: color-mix(in srgb, var(--accent2) 16%, var(--surface)); color: var(--a2-text); }
.ms-ic.c4 { background: var(--warn-soft); color: var(--warn-text); }

.section-head { margin: 38px 0 16px; }
.section-head h2 { margin: 2px 0 6px; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.eyebrow { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--a2-text); }
.lib-book { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; margin-bottom: 14px; padding: 4px 18px 10px; }
.lib-book > summary { display: flex; align-items: center; gap: 12px; padding: 14px 0; cursor: pointer; list-style: none; }
.lib-book > summary::-webkit-details-marker { display: none; }
.lib-book > summary > svg:last-child { margin-left: 8px; color: var(--text-muted); transition: transform .2s; }
.lib-book[open] > summary > svg:last-child { transform: rotate(180deg); }
.lib-book .book-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--deep); color: #fff; }
.lb-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lb-title b { font-size: 1.08rem; } .lb-title small { color: var(--text-muted); font-size: .8rem; }
.lb-ring { display: inline-flex; align-items: center; gap: 8px; }
.lb-ring i { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, var(--surface) 72%, transparent 74%), conic-gradient(var(--primary) calc(var(--p) * 1%), var(--border) 0); }
.lb-ring small { color: var(--text-muted); font-size: .76rem; line-height: 1.2; } .lb-ring b { display: block; color: var(--text); }
.lib-chapter { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; padding-top: 12px; border-top: 1px solid var(--border); font-size: .74rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.lc-count { padding: 1px 9px; font-size: .7rem; text-transform: none; letter-spacing: 0; color: var(--a2-text); background: color-mix(in srgb, var(--accent2) 14%, var(--surface)); border-radius: 99px; }
.sec-card { border-radius: 14px; }
.sec-card.is-last { border-color: color-mix(in srgb, var(--accent2) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 14%, transparent), var(--card-shadow); }
.sc-num { background: var(--primary-soft); color: var(--primary-text); }
.sec-card.is-last .sc-num { background: var(--accent2); color: var(--on-a2); }
.sc-meta { display: flex; justify-content: space-between; gap: 8px; font-size: .76rem; color: var(--text-muted); }
.sc-meta em { font-style: normal; font-weight: 650; } .sc-meta em.good { color: var(--ok-text); } .sc-meta em.mid { color: var(--warn-text); }
.sc-cur { color: var(--a2-text); } .sc-cur::before { content: '● '; }
.sc-bar i { background: linear-gradient(90deg, var(--primary), var(--accent2)); }

.benefit .b-icon { background: var(--deep) !important; color: #fff !important; }
.benefit .b-icon.accent { background: var(--accent2) !important; color: var(--on-a2) !important; }
.intro-card { margin-top: 16px; }
.intro-card h2 { font-size: 1.15rem; margin: 18px 0 6px; }
.intro-card p { margin: 0 0 10px; color: var(--text); line-height: 1.75; }
.intro-card ul { margin: 0 0 12px; padding-left: 20px; line-height: 1.75; }
.intro-more { animation: fadeUp .25s var(--ease); }
.intro-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.test-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px; margin: 36px 0; padding: 26px 30px; border-radius: 20px;
    background: linear-gradient(110deg, color-mix(in srgb, var(--accent2) 14%, var(--surface)), color-mix(in srgb, var(--primary) 8%, var(--surface)));
    border: 1px solid color-mix(in srgb, var(--accent2) 25%, var(--border)); }
.test-cta > div:first-child { flex: 1; min-width: 220px; }
.test-cta h2 { margin: 0 0 4px; font-size: 1.35rem; } .test-cta p { margin: 0; color: var(--text-muted); }
.tc-chips { display: flex; gap: 8px; }
.tc-chips span { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 8px 10px; font-size: .72rem; color: var(--text-muted); background: var(--surface); border-radius: 12px; box-shadow: var(--card-shadow); }
.tc-chips b { font-size: 1.2rem; color: var(--text); }
.link-more { display: inline-block; margin-top: 8px; font-weight: 650; }
.cu-ic { background: var(--deep); }
.cu-ic svg { color: #fff; }

/* ---------- Подвал сайта ---------- */
.site-foot { margin-top: 40px; background: linear-gradient(140deg, var(--deep), var(--deep2)); }
.sf-inner { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 26px; max-width: 1160px; margin: 0 auto; padding: 38px 24px 26px; }
.sf-brand p { margin: 10px 0; color: var(--text-muted); font-size: .9rem; max-width: 320px; }
.sf-brand .brand { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; }
.sf-phone { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 700; text-decoration: none; }
.sf-col { display: flex; flex-direction: column; gap: 7px; }
.sf-col b { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--a2-bright); margin-bottom: 4px; }
.sf-col a { color: var(--text-muted); text-decoration: none; font-size: .9rem; overflow-wrap: anywhere; }
.sf-col a:hover { color: #fff; }
.sf-bottom { max-width: 1160px; margin: 0 auto; padding: 14px 24px 22px; font-size: .8rem; color: var(--text-muted); border-top: 1px solid var(--border); }
.home-foot { display: none; }
@media (max-width: 760px) { .sf-inner { grid-template-columns: 1fr 1fr; } .sf-brand { grid-column: 1 / -1; } }
@media (max-width: 700px) { .site-foot { margin-bottom: calc(-66px - env(safe-area-inset-bottom)); padding-bottom: calc(66px + env(safe-area-inset-bottom)); } }

/* ---------- Информационные страницы ---------- */
.info-page { max-width: 980px; }
.info-hero { padding: 34px 32px; margin-bottom: 18px; border-radius: 20px; color: #fff; background: radial-gradient(400px 220px at 95% 0%, color-mix(in srgb, var(--accent2) 35%, transparent), transparent 70%), linear-gradient(140deg, var(--deep), var(--deep2)); }
.info-hero h1 { margin: 0; color: #fff; }
.info-grid { display: grid; gap: 18px; }
.info-grid.with-side { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.info-grid > .card { margin: 0; }
.info-body { font-size: 1.04rem; line-height: 1.8; }
.info-body h2 { font-size: 1.25rem; margin: 20px 0 6px; } .info-body p { margin: 0 0 12px; }
.info-side h2 { margin-top: 0; font-size: 1.1rem; }
@media (max-width: 760px) { .info-grid.with-side { grid-template-columns: 1fr; } .info-hero { padding: 26px 20px; } }

/* ---------- Результат теста: крупный балл из 20 ---------- */
.result-hero { gap: 26px; }
.rh-score { display: flex; flex-direction: column; gap: 6px; min-width: 190px; padding: 18px 22px; border-radius: 18px; color: #fff;
    background: radial-gradient(260px 160px at 100% 0%, color-mix(in srgb, var(--accent2) 40%, transparent), transparent 70%), linear-gradient(140deg, var(--deep), var(--deep2)); }
.rh-score small { color: rgba(255, 255, 255, .72); font-weight: 600; }
.rh-big { display: flex; align-items: baseline; gap: 6px; }
.rh-big b { font-size: 3.4rem; line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rh-big span { font-size: 1.4rem; font-weight: 700; color: rgba(255, 255, 255, .7); }
.rh-bar { display: block; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.rh-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent2); }
.rh-text .rh-levels { margin-top: 10px; }
.acc-scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.acc-score { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); }
.acc-score small { display: block; color: var(--text-muted); font-size: .8rem; }
.acc-score b { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.acc-score b span { font-size: 1rem; color: var(--text-muted); font-weight: 650; }
.acc-score.best { color: #fff; background: linear-gradient(140deg, var(--deep), var(--deep2)); } .acc-score.best small, .acc-score.best b span { color: rgba(255, 255, 255, .7); }

/* ---------- Режим теста: понятнее и контрастнее ---------- */
.test-bar { background: linear-gradient(90deg, var(--deep), var(--deep2)); border-bottom: 0; }
.test-bar .t-back { color: #fff; border-color: rgba(255, 255, 255, .2); }
.test-bar .t-back:hover { background: rgba(255, 255, 255, .1); }
.test-bar .t-timer { background: rgba(255, 255, 255, .1); }
.test-bar .t-timer.low { background: color-mix(in srgb, #E5484D 35%, transparent); }
.test-bar .t-time { color: #fff; } .test-bar .t-timer.paused .t-time { color: rgba(255, 255, 255, .6); }
.test-bar .t-nav-toggle { background: rgba(255, 255, 255, .1); color: #fff; border-color: transparent; }
.test-bar .t-saved.ok { color: #8FE3B8; } .test-bar .t-saved.bad { color: #FFB4A8; }
.t-level-sep { display: flex; align-items: center; gap: 10px; margin: 14px 0 2px; padding: 12px 18px; font-size: 1rem; letter-spacing: .04em; color: #fff; border-radius: 14px;
    background: linear-gradient(90deg, var(--deep), var(--deep2)); }
.t-level-sep::after { content: attr(data-range); margin-left: auto; font-size: .8rem; color: rgba(255, 255, 255, .7); letter-spacing: 0; text-transform: none; }
.t-card { padding: 0; overflow: hidden; border-radius: 18px; }
.t-card > .t-head { margin: 0; padding: 12px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.t-card > :not(.t-head) { margin-left: 20px; margin-right: 20px; }
.t-card > :last-child { margin-bottom: 18px; }
.t-card > .t-q:first-of-type, .t-card > .t-cond, .t-card > .t-stmts { margin-top: 16px; }
.t-pos { min-width: 40px; height: 40px; font-size: 1.05rem; background: var(--deep); color: #fff; }
.t-card.done .t-pos { background: var(--ok); }
.t-text { font-size: 1.1rem; font-weight: 500; color: var(--text); }
/* Общее условие нескольких заданий и условие пункта — заметная плашка с акцентной полосой */
.t-group, .t-cond { padding: 14px 18px; font-size: 1.06rem; font-weight: 700; line-height: 1.6; color: var(--text);
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent2) 12%, var(--surface)), var(--surface));
    border: 1px solid var(--border); border-left: 5px solid var(--accent2); border-radius: 14px; }
.t-group { margin-top: 6px; box-shadow: var(--card-shadow); }
.t-range { display: inline-block; margin-right: 6px; padding: 1px 9px; font-size: .85rem; color: var(--on-a2); background: var(--accent2); border-radius: 8px; }
.t-stmt { background: var(--surface); border: 1px solid var(--border); }
.t-sub { color: var(--a2-text); font-size: 1rem; }
.t-options .option { background: var(--surface); }
.t-end { border: 2px dashed color-mix(in srgb, var(--accent2) 45%, var(--border)); }
.t-end #tFinish { background: var(--accent2); color: var(--on-a2); border-color: transparent; }
.tn-btn.filled { background: var(--ok); }

/* ---------- Телефон ---------- */
@media (max-width: 900px) {
    .hero-home { grid-template-columns: 1fr; padding: 30px 22px 26px; }
    .hh-visual { min-height: 0; max-width: 420px; }
    .my-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .hh-visual { display: none; }
    .test-cta { padding: 22px 18px; } .test-cta .btn { width: 100%; justify-content: center; }
    .acc-scores { grid-template-columns: 1fr 1fr; } .acc-score.best { grid-column: auto; }
    .rh-score { width: 100%; }
    .t-card > :not(.t-head) { margin-left: 12px; margin-right: 12px; }
    .t-card > .t-head { padding: 10px 12px; }
    .lb-ring small { display: none; }
}
.sidebar .brand b, .site-top .brand b, .site-foot .brand b { color: var(--a2-bright); -webkit-text-fill-color: currentColor; background: none; }
.t-card > .t-head + * { margin-top: 16px; }
.t-stmts .t-stmt, .t-stmts .t-stmt + .t-stmt { margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-top: 1px solid var(--border); }
.sidebar .upsell { background: rgba(255, 255, 255, .07); border-color: color-mix(in srgb, var(--accent2) 45%, transparent); color: var(--text); }
.sidebar .upsell a { color: var(--a2-bright); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Термины в решениях (ag_glossary): подчёркнуты, объяснение во всплывающем окне ---------- */
.gl { color: var(--primary-text); font-weight: 600; text-decoration: underline dotted color-mix(in srgb, var(--accent2) 70%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: help; border-radius: 4px; }
.gl:hover, .gl:focus-visible { background: color-mix(in srgb, var(--accent2) 12%, transparent); outline: none; }
html.terms-off .gl { color: inherit; font-weight: inherit; text-decoration: none; cursor: inherit; }
.gl-pop { position: fixed; z-index: 90; padding: 12px 14px; font-size: .92rem; line-height: 1.6; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent2); border-radius: 14px; box-shadow: var(--shadow-lg); }
.gl-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.gl-head b { flex: 1; color: var(--primary-text); }
.gl-x { flex-shrink: 0; width: 26px; height: 26px; margin: -4px -6px 0 0; font-size: 1.2rem; line-height: 1; color: var(--text-muted); background: none; border: 0; border-radius: 8px; cursor: pointer; }
.gl-x:hover { background: var(--surface-2); }
.gl-body { overflow-x: auto; }
.gl-more { margin-top: 8px; padding: 5px 10px; font: inherit; font-size: .82rem; font-weight: 650; color: var(--a2-text); background: color-mix(in srgb, var(--accent2) 10%, var(--surface)); border: 0; border-radius: 9px; cursor: pointer; }

/* =====================================================================
   Режим теста v3: «Առաջադրանքներ» — выпадающий список в шапке, таймер —
   вкладка у правого края, номер задания — перед текстом вопроса.
   Ответ «пользователь отметил» — синий, «отмечено звёздочкой» — оранжевый;
   выбранный вариант (в т. ч. Ճիշտ է / Սխալ է / Չգիտեմ) — одним цветом, без подсказки.
   ===================================================================== */
html { --t-ans: #2F6FDB; --t-ans-soft: #E3ECFC; --t-flag: #E8850C; }
html[data-mode="dark"] { --t-ans: #6EA2FF; --t-ans-soft: #1B2A45; --t-flag: #F5A33B; }
.test-body, body.tnav-open .test-body { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.tn-wrap { position: relative; margin-left: auto; }
.test-bar .t-nav-toggle { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .18); }
.test-bar .t-nav-toggle.on { background: rgba(255, 255, 255, .2); }
.test-bar .t-nav-toggle svg:last-child { transition: transform .2s; }
.test-bar .t-nav-toggle.on svg:last-child { transform: rotate(180deg); }
.test-nav, body.tnav-open .test-nav {
    display: block; position: absolute; top: calc(100% + 8px); right: 0; left: auto; bottom: auto; z-index: 60;
    width: min(340px, calc(100vw - 20px)); max-height: min(calc(var(--vh) * 70), 560px); overflow-y: auto; padding: 14px;
    transform: none; border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-lg);
    --text: var(--s-text); --text-muted: var(--s-muted); --border: var(--s-border); --surface: var(--s-surface); --surface-2: var(--s-surface-2);
    color: var(--text); background: var(--surface);
}
.test-nav[hidden] { display: none; }
.tn-btn.filled { background: var(--t-ans); color: #fff; border-color: var(--t-ans); }
.tn-btn.part { background: var(--t-ans-soft); color: var(--t-ans); border-color: color-mix(in srgb, var(--t-ans) 45%, transparent); }
.tn-btn.flag { border-color: var(--t-flag); box-shadow: inset 0 0 0 1px var(--t-flag); }
.tn-btn.flag::after { background: var(--t-flag); }
.tn-dot.filled { background: var(--t-ans); border-color: var(--t-ans); } .tn-dot.part { background: var(--t-ans-soft); border-color: var(--t-ans); }
.tn-dot.flag { background: var(--t-flag); border-color: var(--t-flag); }

/* Таймер у правого края экрана */
.test-shell .t-timer { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 45; display: flex; align-items: center; gap: 0;
    padding: 0; background: var(--surface); border: 1px solid var(--border); border-right: 0; border-radius: 14px 0 0 14px; box-shadow: var(--shadow-lg); }
.t-timer-tab { display: grid; place-items: center; width: 46px; height: 52px; color: var(--primary-text); background: none; border: 0; cursor: pointer; border-radius: 14px 0 0 14px; }
.t-timer.open .t-timer-tab { color: var(--a2-text); }
.t-timer:not(.paused) .t-timer-tab { color: var(--ok-text); }
.t-timer-body { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 14px 12px 2px; min-width: 120px; }
.t-timer-body[hidden] { display: none; }
.t-timer-body small { color: var(--text-muted); font-size: .76rem; }
.test-shell .t-time { font-size: 1.35rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.t-timer.paused .t-time { color: var(--text-muted); }
.t-timer.low .t-time { color: var(--bad-text); }

/* Задания */
.test-main { gap: 0; }
.t-block { display: grid; gap: 12px; margin-top: 26px; }
.t-level-sep { justify-content: center; text-align: center; margin: 22px 0 0; }
.t-level-sep::after { content: none; }
.t-card, .t-card > :not(.t-head) { margin: 0; }
.t-card { padding: 18px 20px; border-radius: 16px; overflow: visible; }
.t-card.done .t-pos { background: inherit; }
.t-line { display: flex; align-items: flex-start; gap: 10px; }
.t-line .t-text { flex: 1; min-width: 0; margin-bottom: 10px; }
.t-num { flex-shrink: 0; min-width: 30px; font-size: 1.1rem; font-weight: 800; line-height: 1.65; color: var(--primary-text); }
.t-cond-inline { font-weight: 600; }
.t-card > .t-cond { margin-bottom: 12px; }
.t-q + .t-q { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.t-flag, .t-card .t-flag { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: 10px; }
.t-flag svg { width: 18px; height: 18px; }
.t-flag:hover { color: var(--t-flag); border-color: var(--t-flag); }
.t-flag.on, .t-card .t-flag.on { color: #fff; background: var(--t-flag); border-color: var(--t-flag); }
.t-flag.on svg { fill: currentColor; }
.t-flag span { display: none; }
/* Выбранный ответ на утверждение — тем же цветом, что и выбранный вариант в других вопросах */
.tf3-yes.chosen, .tf3-no.chosen, .tf3-skip.chosen, .tf3.chosen { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-text); box-shadow: 0 0 0 3px var(--glow); }
.tf3-yes:hover, .tf3-no:hover, .tf3-skip:hover { border-color: var(--primary-line); }
@media (max-width: 640px) {
    .t-card { padding: 14px 12px; }
    .t-timer-tab { width: 40px; height: 46px; }
    .tn-wrap .t-nav-toggle > span { display: none; }
}
.test-bar { z-index: 50; }


/* Главная: карточки разделов — цвет и математический значок по теме, процент выполнения */
.sec-card { position: relative; overflow: hidden; --tc: var(--primary);
    background: linear-gradient(150deg, color-mix(in srgb, var(--tc) 9%, var(--surface)) 0%, var(--surface) 62%);
    border-color: color-mix(in srgb, var(--tc) 18%, var(--border)); }
.sec-card > *:not(.sc-deco) { position: relative; z-index: 1; }
.sec-card.tp-arith  { --tc: #D2593F; } .sec-card.tp-expr { --tc: #7A4FB0; } .sec-card.tp-eq { --tc: #1F6FB8; }
.sec-card.tp-ineq   { --tc: #0E8A86; } .sec-card.tp-eqin { --tc: #2C7FA8; } .sec-card.tp-word { --tc: #B9781B; }
.sec-card.tp-prog   { --tc: #2F8A4E; } .sec-card.tp-func { --tc: #C2416B; } .sec-card.tp-plani { --tc: #3D5BC4; }
.sec-card.tp-stereo { --tc: #6B4FB8; } .sec-card.tp-vec  { --tc: #0F7C95; } .sec-card.tp-comb { --tc: #A8551F; } .sec-card.tp-gen { --tc: var(--primary); }
html[data-mode="dark"] .sec-card { --tc-mix: 20%; background: linear-gradient(150deg, color-mix(in srgb, var(--tc) 18%, var(--surface)) 0%, var(--surface) 65%); }
.sc-deco { position: absolute; right: 8px; top: 2px; z-index: 0; font: italic 700 2.1rem/1 'Times New Roman', Georgia, serif; color: var(--tc); opacity: .2; pointer-events: none; white-space: nowrap; }
.sc-deco sub, .sc-deco sup { font-size: .55em; }
.sc-deco svg { width: 46px; height: 46px; margin-top: 4px; }
.sec-card:hover .sc-deco { opacity: .32; }
.sec-card .sc-num { background: color-mix(in srgb, var(--tc) 14%, var(--surface)); color: color-mix(in srgb, var(--tc) 80%, var(--text)); }
.sec-card .sc-bar i { background: var(--tc); }
.sc-meta { align-items: center; }
.sc-pct { font-size: .9rem; font-weight: 800; color: color-mix(in srgb, var(--tc) 75%, var(--text)); font-variant-numeric: tabular-nums; }

/* =====================================================================
   v4: звёздочка «отмечено» — жёлтая; цвета теста и карточек — из темы;
   лёгкие математические рисунки на фоне страниц.
   ===================================================================== */
html { --star: #EDB10A; --star-soft: #FFF6D6; }
html[data-mode="dark"] { --star: #FFCC3D; --star-soft: #3A3115; }
/* Отмеченные звёздочкой — одним жёлтым цветом везде */
.q-flag:hover { color: var(--star); background: var(--star-soft); }
.q-flag[aria-pressed="true"] { color: var(--star); }
.qm.flag::after, .tn-btn.flag::after { background: var(--star); }
.tn-dot.flag { background: var(--star); border-color: var(--star); }
.filter-chip[data-filter="flagged"] svg, .chip-flag svg { color: var(--star); }

/* Главная: карточки разделов — один цвет темы для всех, значок в углу остаётся */
.sec-card[class*="tp-"] { --tc: var(--accent2); }

/* Раздел: верхний блок — в цвете темы */
.hero {
    --text: #EEF2F7; --text-muted: rgba(232, 238, 246, .72); --border: rgba(255, 255, 255, .14); --surface: rgba(255, 255, 255, .08); --surface-2: rgba(255, 255, 255, .1);
    --primary: var(--accent2); --primary-text: #fff; --primary-soft: rgba(255, 255, 255, .14); --primary-line: color-mix(in srgb, var(--accent2) 65%, transparent);
    --accent-text: var(--a2-bright); --accent-soft: rgba(255, 255, 255, .1);
    color: var(--text); border: 0;
    background: radial-gradient(520px 260px at 95% 0%, color-mix(in srgb, var(--accent2) 30%, transparent), transparent 70%), linear-gradient(140deg, var(--deep), var(--deep2)) !important;
}
.hero h1, .hero .page-title { color: #fff; }
.hero::before, .hero::after { opacity: .25; }

/* Шапка раздела на телефоне: логотип — ссылка на главную */
.tb-home { display: none; align-items: center; gap: 8px; text-decoration: none; color: var(--text); font-weight: 700; }
.tb-home .brand-logo { width: 32px; height: 32px; }
@media (max-width: 900px) { .tb-home { display: inline-flex; } .tb-home > span:last-child { display: none; } }
@media (max-width: 700px) {
    .site-top .brand span:last-child { display: inline; font-size: 1rem; }
    .site-top .brand { gap: 7px; }
}

/* ---------- Тест: цвета из темы, звёздочка, раскрывающийся список без прокрутки ---------- */
html, html[data-mode="dark"] { --t-ans: var(--primary); --t-ans-soft: var(--primary-soft); --t-flag: var(--star); }
.test-nav, body.tnav-open .test-nav { width: min(470px, calc(100vw - 20px)); max-height: none; overflow: visible; padding: 16px; }
.test-nav .tn-grid { grid-template-columns: repeat(10, 1fr); gap: 5px; }
.test-nav .tn-btn { min-height: 34px; font-size: .82rem; }
.tn-btn.filled { color: var(--on-primary); }
.tn-btn.flag { border-color: transparent; box-shadow: none; }
.tn-btn.flag::after { content: '★'; width: auto; height: auto; top: -7px; right: -4px; font-size: 13px; line-height: 1; color: var(--star); background: none; box-shadow: none; }
#tToEnd { margin-top: 4px; }
/* Звёздочка — просто звезда, без квадратной рамки (как в разделах) */
.t-flag, .t-card .t-flag { width: 36px; height: 36px; color: var(--border-strong); background: transparent; border: 0; border-radius: 10px; }
.t-flag:hover { color: var(--star); background: var(--star-soft); border: 0; }
.t-flag.on, .t-card .t-flag.on { color: var(--star); background: transparent; border: 0; }
.t-flag svg { width: 22px; height: 22px; }
/* Таймер крупнее */
.t-timer-tab { width: 56px; height: 64px; }
.t-timer-tab svg { width: 26px; height: 26px; }
.t-timer-body { min-width: 170px; padding: 16px 18px 16px 4px; gap: 8px; }
.t-timer-body small { font-size: .85rem; }
.test-shell .t-time { font-size: 1.9rem; }
.t-timer-body .btn { min-width: 120px; justify-content: center; }
/* Заголовки уровней и карточки теста */
.test-main .t-level-sep { font-size: 1.15rem; padding: 14px 18px; }
.test-main .t-card { border: 1px solid var(--border); box-shadow: var(--card-shadow); }
.test-main .t-card:hover { border-color: var(--primary-line); }
.t-num { color: var(--a2-text); }
.t-end { background: linear-gradient(140deg, color-mix(in srgb, var(--accent2) 8%, var(--surface)), var(--surface)); }
@media (max-width: 640px) {
    .test-nav .tn-grid { grid-template-columns: repeat(7, 1fr); }
    .t-timer-tab { width: 46px; height: 54px; }
    .test-shell .t-time { font-size: 1.5rem; }
}

/* ---------- «Թեստեր» էջ ---------- */
.tests-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .9fr); gap: 30px; align-items: center; margin-bottom: 22px; padding: 40px 40px;
    border-radius: 24px; color: #fff;
    background:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 34px 34px,
        radial-gradient(480px 300px at 95% 0%, color-mix(in srgb, var(--accent2) 32%, transparent), transparent 70%),
        linear-gradient(140deg, var(--deep), var(--deep2));
    box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--deep) 80%, transparent); }
.tests-hero h1 { margin: 14px 0 12px; color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.15; }
.tests-hero .lead { color: rgba(236, 241, 248, .78); margin: 0 0 18px; }
.th-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.th-chips span { display: flex; flex-direction: column; min-width: 86px; padding: 10px 14px; font-size: .76rem; color: rgba(236, 241, 248, .7);
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); border-radius: 14px; }
.th-chips b { font-size: 1.35rem; color: #fff; }
.th-start { margin: 0; padding: 24px; color: var(--text); }
.th-start h2 { margin: 10px 0 4px; }
.th-start .tc-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: var(--accent2); color: var(--on-a2); }
.th-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 22px; }
.th-step { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 16px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--card-shadow); }
.th-step span { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; font-weight: 800; color: #fff; background: linear-gradient(140deg, var(--deep), var(--deep2)); border-radius: 10px; }
.th-step small { color: var(--text-muted); line-height: 1.5; }
.th-results h2 { display: flex; align-items: center; gap: 8px; }
.th-results .tc-history { margin-top: 12px; }
@media (max-width: 900px) { .tests-hero { grid-template-columns: 1fr; padding: 28px 20px; } .th-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .th-steps { grid-template-columns: 1fr; } }
.cookie-note { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; display: flex; align-items: center; gap: 14px; max-width: 760px; margin: 0 auto; padding: 12px 14px 12px 16px;
    font-size: .88rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); }
.cookie-note span { flex: 1; display: flex; gap: 8px; align-items: flex-start; }
@media (max-width: 700px) { .cookie-note { bottom: calc(76px + env(safe-area-inset-bottom)); } }
.q-edit { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; color: var(--text-muted); border-radius: 9px; }
.q-edit:hover { color: var(--primary-text); background: var(--surface-2); }

/* ---------- Փորձնական թեստ (demo.php) ---------- */
.demo-note { display: grid; gap: 12px; }
.demo-note h1 { margin: 0; font-size: 1.55rem; line-height: 1.25; }
.demo-note .lead { margin: 0; }
.demo-kicker { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: var(--primary); background: var(--surface-2); }
.demo-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.demo-compare > div { padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.demo-compare > div.pro { border-color: var(--primary); background: var(--surface); }
.demo-compare b { display: block; margin-bottom: 8px; }
.demo-compare ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: .9rem; line-height: 1.4; }
.demo-compare li { position: relative; padding-left: 24px; }
.demo-compare li::before { position: absolute; left: 0; top: 0; width: 18px; text-align: center; font-weight: 800; }
.demo-compare li.yes::before { content: "✓"; color: var(--ok-text); }
.demo-compare li.no::before { content: "–"; color: var(--text-muted); }
.demo-compare li.no { color: var(--text-muted); }
.demo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.demo-cta { border: 2px solid var(--primary); }
.demo-cta h2 { margin-top: 0; }
.demo-cta .form-actions { justify-content: flex-start; flex-wrap: wrap; }
@media (max-width: 640px) { .demo-compare { grid-template-columns: 1fr; } .demo-note h1 { font-size: 1.3rem; } }
.th-demo { margin-top: 10px; white-space: normal; text-align: center; gap: 8px; }
.th-demo-hint { text-align: center; margin: 6px 0 0; font-size: .82rem; }
.user-deleted { border: 2px solid var(--bad); background: var(--bad-soft); }
.user-deleted .inline-form { flex-wrap: wrap; }
/* Լայն բանաձևը փոքր էկրանին չպետք է լայնացնի էջը */
.test-main > *, .t-block > *, .t-q, .t-text { min-width: 0; }
.t-text { overflow-wrap: anywhere; }
.t-text .katex { max-width: 100%; overflow-x: auto; overflow-y: hidden; vertical-align: middle; }

/* =====================================================================
   Գտնել առաջադրանքը համարով (find.php, գլխավոր էջ, կողային ցանկ)
   ===================================================================== */
.find-form { display: flex; flex-wrap: wrap; gap: 8px; }
.find-form select { flex: 1 1 210px; min-width: 0; }
.find-form input { flex: 1 1 130px; min-width: 0; }
.find-form .btn { flex: 0 0 auto; }
.find-page { max-width: 760px; }
.find-list { display: grid; gap: 8px; }
.find-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--text); text-decoration: none; border: 1px solid var(--border); border-radius: 14px; }
.find-item:hover { border-color: var(--primary-line); background: var(--surface-2); }
.find-item > span:nth-child(2) { flex: 1; min-width: 0; }
.find-item small { display: block; color: var(--text-muted); font-size: .8rem; }
.hh-find { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; padding: 12px 16px; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); border-radius: 16px; transition: background .15s; }
.hh-find:hover { background: rgba(255, 255, 255, .14); }
.hh-find span { display: flex; flex-direction: column; }
.hh-find small { font-size: .78rem; color: rgba(236, 241, 248, .7); }
.nav-find { display: flex; align-items: center; gap: 8px; margin: 0 14px 10px; padding: 9px 12px; font-size: .88rem; font-weight: 650; color: var(--primary-text); text-decoration: none; background: var(--primary-soft); border-radius: 12px; }
.btn-login { gap: 6px; }
.tb-login-m { display: none; }

/* =====================================================================
   ՀԵՌԱԽՈՍ. վերնագիծը չի մեծանում տառաչափի կարգավորումից (S–XL),
   և ոչինչ դուրս չի գալիս էկրանից
   ===================================================================== */
@media (max-width: 600px) {
    .site-top, .toolbar { padding-left: 10px; padding-right: 10px; gap: 4px; }
    .site-top .site-actions { gap: 4px; }
    .site-top .icon-btn, .toolbar .icon-btn { width: 36px; height: 36px; border-radius: 11px; }
    .site-top .brand, .toolbar .tb-home { font-size: 18px; gap: 8px; }
    .site-top .brand-logo, .toolbar .tb-home .brand-logo { width: 34px; height: 34px; border-radius: 11px; }
    .site-top .brand span:last-child, .toolbar .tb-home > span:last-child { display: inline; white-space: nowrap; }
    .site-top .btn-sm, .toolbar .btn-sm { height: 36px; padding: 0 12px; font-size: 14px; }
    .btn-login { width: 36px; padding: 0 !important; justify-content: center; }
    .btn-login span { display: none; }
    .site-top .site-user { padding: 3px; font-size: 14px; }
    .site-top .site-user .acct-name, .site-top .site-user > .ic { display: none; }
    /* բաժնի էջ. ցանկ + լոգո ձախում, գործիքները աջում */
    .toolbar { justify-content: flex-start; }
    .toolbar #menuBtn { margin-right: 0; }
    .toolbar .tb-home { display: inline-flex; margin-right: auto; }
    .toolbar .tb-find { display: none; }              /* որոնումը՝ ցանկում (≡) */
    .toolbar .progress-pill { padding: 0 11px; height: 36px; font-size: 13px; }
    .toolbar .acct-btn { padding: 3px; font-size: 14px; }
    .toolbar .acct-btn .acct-name { display: none; }
    .toolbar .tb-home > span:last-child { display: none; }   /* բաժնի էջում տեղ քիչ է՝ միայն լոգոն */
    .toolbar .guest-links .btn-ghost { display: none; }
    .toolbar .guest-links .tb-register { display: none; }
    .toolbar .guest-links .tb-login-m { display: inline-flex; padding: 0 14px; }
    /* վերնագրեր */
    .hero-home h1, .tests-hero h1 { font-size: clamp(1.45rem, 7.4vw, 2.2rem); overflow-wrap: break-word; }
    .hero-home, .tests-hero { padding-left: 18px; padding-right: 18px; }
    .hh-kicker { white-space: normal; max-width: 100%; }
    .sec-tabs { margin: 0; }
    .sec-tab { flex: 1 1 0; justify-content: center; padding: 10px 6px 12px; font-size: 14px; }
    .ms-tile { min-width: 0; padding: 12px; gap: 10px; }
    .ms-tile > span:last-child { min-width: 0; overflow-wrap: anywhere; }
    .find-form select, .find-form input { flex-basis: 100%; }
    .find-form .btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 350px) {
    .site-top .brand span:last-child, .toolbar .tb-home > span:last-child { display: none; }
}
@media (max-width: 600px) {
    .cookie-note { left: 10px; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); padding: 10px 12px; gap: 10px; font-size: 13px; line-height: 1.4; }
}
.site-foot .sf-brand .brand span:last-child { display: inline !important; }

/* Գտնել առաջադրանքը՝ քայլերով */
.find-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.05rem; }
.find-locked { display: flex; gap: 16px; align-items: flex-start; }
.find-locked b { font-size: 1.1rem; }
.find-locked .hint { margin: 6px 0 14px; }
.find-steps { display: grid; gap: 18px; }
.fs-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .82rem; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; color: var(--text-muted); }
.fs-label span { display: inline-grid; place-items: center; width: 22px; height: 22px; font-size: .75rem; color: var(--on-primary); background: var(--primary); border-radius: 50%; }
.fs-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; font: inherit; text-align: left; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.fs-opt:hover { border-color: var(--primary-line); }
.fs-opt[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.fs-opt small { font-size: .74rem; font-weight: 700; color: var(--accent-text, var(--text-muted)); }
.fs-opt b { font-size: .95rem; font-weight: 650; line-height: 1.3; }
.fs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.fs-step.done .fs-opt[aria-pressed="false"] { display: none; }
.fs-step.done .fs-opt[aria-pressed="true"]::after { content: "Փոխել"; margin-top: 4px; font-size: .74rem; font-weight: 650; color: var(--primary-text); text-decoration: underline; }
.fs-step.done .fs-list { grid-template-columns: 1fr; }
.fs-row i { font-style: normal; font-size: .76rem; color: var(--text-muted); }
.fs-tasks { display: grid; gap: 12px; }
.fs-block { padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; }
.fs-bhead { margin-bottom: 8px; font-size: .88rem; color: var(--text-muted); }
.fs-bhead b { color: var(--text); }
.fs-nums { display: flex; flex-wrap: wrap; gap: 6px; }
.fs-num { display: inline-grid; place-items: center; min-width: 44px; height: 38px; padding: 0 10px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--primary-text); text-decoration: none; background: var(--primary-soft); border-radius: 10px; }
.fs-num:hover { background: var(--primary); color: var(--on-primary); }
@media (max-width: 600px) {
    .fs-opts > .fs-opt { flex: 1 1 100%; }
    .fs-list { grid-template-columns: 1fr; }
    .find-locked { flex-direction: column; }
}

/* =====================================================================
   v5 (2026-10): հանգիստ ֆոն՝ թեմայի մուգ գույնի երանգով (առանց նկարների),
   բաց գույները՝ մուգից ածանցված (ոչ թե վարդագույն/դեղնավուն),
   բաժնի էջ՝ քիչ տեքստ, որոնումը վերևում, աջ բլոկները՝ բացվող/փակվող։
   ===================================================================== */
body, html[data-mode="dark"] body { background: var(--bg); background-image: none; }
html[data-mode="light"] {
    /* «Մեղմ» ֆոնները՝ թեմայի մուգ գույնից, ոչ թե վառ ակցենտից */
    --a2-soft: color-mix(in srgb, var(--deep) 7%, var(--surface));
    --a2-line: color-mix(in srgb, var(--deep) 16%, var(--surface));
    --a2-text: color-mix(in srgb, var(--accent2) 62%, var(--deep));
    --primary-soft: color-mix(in srgb, var(--deep) 9%, var(--surface));
    --primary-faint: color-mix(in srgb, var(--deep) 4%, var(--surface));
    --warn: #A07A2C; --warn-soft: #F1ECDF; --warn-text: #6B5320;
}
/* Աստղիկը՝ փոքր և մեղմ */
html { --star: #C2A04A; --star-soft: color-mix(in srgb, #C2A04A 14%, var(--surface)); }
html[data-mode="dark"] { --star: #CDB36A; --star-soft: color-mix(in srgb, #CDB36A 16%, var(--surface)); }
.q-flag svg { width: 15px; height: 15px; }
.t-flag svg { width: 18px; height: 18px; }

/* Մուգ բլոկներ՝ առանց ցանցի */
.hero-home, .tests-hero { background: radial-gradient(520px 320px at 95% 0%, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 70%), linear-gradient(140deg, var(--deep), var(--deep2)); }
.hero { background: linear-gradient(140deg, var(--deep), var(--deep2)) !important; }
.hero::before, .hero::after { display: none; }

/* ---------- Բաժնի էջ. վերևի գիծ ---------- */
.toolbar { gap: 10px; background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid var(--border); }
.tb-spacer { flex: 1; }
.tb-links { display: flex; gap: 2px; }
.tb-links a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; font-size: .9rem; font-weight: 650; color: var(--text-muted); text-decoration: none; border-radius: 11px; }
.tb-links a:hover { color: var(--text); background: var(--surface); }
.find-wrap { position: relative; }
.find-trigger { display: inline-flex; align-items: center; gap: 9px; width: 300px; max-width: 34vw; height: 40px; padding: 0 14px; font-size: .9rem; color: var(--text-muted); text-align: left;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.find-trigger span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.find-trigger:hover, .find-trigger[aria-expanded="true"] { border-color: var(--primary-line); color: var(--text); }
.find-trigger[aria-expanded="true"] { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }
.find-panel { position: fixed; top: 70px; left: max(16px, calc(50% - 450px)); right: auto; width: min(900px, calc(100vw - 32px)); max-height: min(calc(var(--vh) * 76), 680px); padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.find-panel[hidden] { display: none; }
.fp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 10px 18px; border-bottom: 1px solid var(--border); }
.fp-head b { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; }
.find-panel .finder { flex: 1; min-height: 0; padding: 14px 18px 18px; overflow-y: auto; }
/* Վերնագծում (մուգ) կոճակը */
.site-top .find-trigger { width: 40px; max-width: none; padding: 0; justify-content: center; color: var(--text-muted); background: transparent; border-color: transparent; }
.site-top .find-trigger span { display: none; }
.site-top .find-trigger:hover, .site-top .find-trigger[aria-expanded="true"] { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: none; }

/* ---------- Գտնել առաջադրանքը (ընդհանուր բաղադրիչ) ---------- */
.finder { display: grid; gap: 12px; }
.fd-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fd-row[hidden] { display: none; }
.fd-tab { padding: 8px 16px; font: inherit; font-size: .9rem; font-weight: 700; color: var(--text-muted); background: var(--surface-2); border: 0; border-radius: 10px; cursor: pointer; }
.fd-tab[aria-pressed="true"] { color: #fff; background: var(--deep); }
.fd-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; max-width: 260px; padding: 8px 12px; font: inherit; text-align: left; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.fd-chip b { font-size: .8rem; font-weight: 750; color: var(--text-muted); }
.fd-chip small { font-size: .84rem; font-weight: 600; line-height: 1.3; }
.fd-chip:hover { border-color: var(--primary-line); }
.fd-chip[aria-pressed="true"] { border-color: var(--deep); box-shadow: inset 0 0 0 1px var(--deep); background: var(--primary-faint); }
.fd-chip[aria-pressed="true"] b { color: var(--primary-text); }
html[data-mode="dark"] .fd-tab[aria-pressed="true"] { color: var(--on-primary); background: var(--primary); }
html[data-mode="dark"] .fd-chip[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.fd-body { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 14px; align-items: start; }
.fd-col { min-width: 0; }
.fd-sections { display: grid; gap: 2px; padding: 6px; background: var(--surface-2); border-radius: 14px; }
.fd-sec { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; font: inherit; font-size: .9rem; line-height: 1.35; text-align: left; color: var(--text); text-decoration: none; background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.fd-sec:hover { background: var(--surface); }
.fd-sec[aria-pressed="true"], .fd-sec[aria-current] { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); font-weight: 650; }
.fd-n { flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; font-size: .72rem; font-weight: 750; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 50%; }
.fd-sec[aria-pressed="true"] .fd-n, .fd-sec[aria-current] .fd-n { color: #fff; background: var(--deep); border-color: var(--deep); }
html[data-mode="dark"] .fd-sec[aria-pressed="true"] .fd-n { color: var(--on-primary); background: var(--primary); border-color: var(--primary); }
.fd-t { padding-top: 2px; }
.fd-tasks { display: grid; gap: 10px; }
.fd-thead { display: flex; align-items: center; gap: 10px; }
.fd-back { display: none; padding: 6px 10px; font: inherit; font-size: .84rem; font-weight: 650; color: var(--primary-text); background: var(--primary-soft); border: 0; border-radius: 9px; cursor: pointer; }
.fd-open { font-weight: 700; color: var(--text); text-decoration: none; }
.fd-open:hover { color: var(--primary-text); text-decoration: underline; }
.fd-block { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.fd-bt { margin-bottom: 8px; font-size: .86rem; line-height: 1.45; color: var(--text-muted); overflow-wrap: anywhere; }
.fd-bt b { color: var(--text); }
.fd-nums { display: flex; flex-wrap: wrap; gap: 6px; }
.fd-num { display: inline-grid; place-items: center; min-width: 40px; height: 36px; padding: 0 10px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--primary-text); text-decoration: none; background: var(--primary-soft); border-radius: 9px; }
.fd-num:hover { color: #fff; background: var(--deep); }
html[data-mode="dark"] .fd-num:hover { color: var(--on-primary); background: var(--primary); }
.fd-empty { display: grid; gap: 8px; justify-items: start; padding: 16px; font-size: .9rem; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: 14px; }
.fd-empty b { color: var(--text); }
.find-page { max-width: 1000px; }
.find-card { padding: 18px; }
@media (max-width: 700px) {
    .fd-body { grid-template-columns: 1fr; }
    .finder.show-tasks .fd-sections, .finder.show-tasks .fd-books, .finder.show-tasks .fd-chapters { display: none; }
    .finder:not(.show-tasks) .fd-tasks { display: none; }
    .finder:not(.show-tasks) .fd-tasks:has(.fd-empty:only-child) { display: grid; }
    .fd-back { display: inline-flex; }
    .fd-chip { max-width: none; flex: 1 1 100%; }
}

/* ---------- Բաժնի էջ. ձախ ցանկ ---------- */
.sidebar-head { padding: 18px 18px 12px; border-bottom: 0; }
.brand-row { margin-bottom: 4px; }
.side-mobile-links { display: none; }
.sidebar .upsell { margin-top: 8px; }
.sidebar-nav { padding-top: 4px; }

/* ---------- Բաժնի էջ. վերին մուգ բլոկ՝ համառոտ ---------- */
.hero { padding: 22px 28px 0; margin-bottom: 18px; }
.hero-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 6px; }
.hero .page-kicker { margin: 0; font-size: .76rem; letter-spacing: .05em; color: rgba(236, 241, 248, .7); }
.hero .chip-free { padding: 2px 10px; font-size: .74rem; }
.hero-edit { display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; color: rgba(255, 255, 255, .7); border-radius: 9px; }
.hero-edit:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.hero .page-title { margin: 0 0 10px; font-size: 1.85rem; }
.hero .sec-progress { margin: 4px 0 6px; }
.hero .sp-bar { flex: 1; max-width: 360px; }
.sec-tab { padding: 11px 14px 13px; }
/* Հրահանգներ՝ չեզոք (առանց վարդագույնի) */
.note { background: var(--surface); border-color: var(--border); }
.note summary { color: var(--text); }
.note-icon { background: var(--primary-soft) !important; color: var(--primary-text) !important; }

/* ---------- Աջ պանել. բացվող/փակվող բլոկներ ---------- */
.rightbar { padding-top: 14px; }
details.rb-card { padding: 0; }
details.rb-card > summary { list-style: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 16px; cursor: pointer; user-select: none; border-radius: 18px; }
details.rb-card > summary::-webkit-details-marker { display: none; }
details.rb-card > summary::after { content: ''; width: 7px; height: 7px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s; opacity: .55; }
details.rb-card[open] > summary::after { transform: rotate(45deg); }
details.rb-card > summary:hover { color: var(--text); }
details.rb-card[open] > summary { padding-bottom: 10px; }
details.rb-card > :not(summary) { margin-left: 16px; margin-right: 16px; }
details.rb-card > :last-child { margin-bottom: 16px; }
.rb-peek { margin-left: auto; padding: 1px 8px; font-size: .72rem; letter-spacing: 0; color: var(--primary-text); background: var(--primary-soft); border-radius: 99px; }
.rb-peek + ::after { margin-left: 0; }
details.rb-card > summary .rb-peek ~ * { margin-left: 0; }
.rb-more { display: inline-block; margin-top: 10px; }
details.rb-card .qmap-legend { margin-top: 12px; }

/* ---------- Հեռախոս. բաժնի էջ ---------- */
@media (max-width: 1180px) { .tb-links span { display: none; } .tb-links a { padding: 8px 10px; } }
@media (max-width: 900px) {
    .tb-links { display: none; }
    .side-mobile-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
    .side-mobile-links a { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; font-size: .88rem; font-weight: 650; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .08); border-radius: 11px; }
    .find-trigger { width: 40px; max-width: none; padding: 0; justify-content: center; }
    .find-trigger span { display: none; }
    .find-panel { left: 8px; right: 8px; top: 62px; width: auto; max-height: calc(100dvh - 76px); }
    .hero { padding: 18px 18px 0; }
    .hero .page-title { font-size: 1.45rem; }
}
@media (max-width: 600px) {
    .toolbar .find-wrap { margin-left: auto; }
    .toolbar .tb-home { margin-right: 0; }
    .toolbar .tb-spacer { display: none; }
}
/* Բաց ռեժիմում բլոկների «երանգը»՝ թեմայի մուգ գույնից (ոչ թե վառ ակցենտից) */
html[data-mode="light"] :is(.hue-0, .hue-1, .hue-2, .hue-3, .hue-4, .hue-5) { --accent: var(--deep); }
.block-head { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.sol-btn { color: var(--primary-text); border-color: var(--border-strong); }
.sol-btn:hover, .sol-btn[aria-expanded="true"] { color: var(--primary-text); background: var(--primary-soft); }
.toolbar .pp-track { width: 72px; }
.toolbar .find-trigger { width: clamp(170px, 20vw, 290px); }
@media (max-width: 1560px) { .toolbar > .btn-primary .acct-name { display: none; } .toolbar > .btn-primary { padding: 7px 10px; } }
.rb-card.promo { background: var(--surface); border-color: var(--primary-line); }
.fd-back { white-space: nowrap; flex-shrink: 0; }

/* ---------- Գլխավոր էջ. շտեմարանները՝ թեմայի հիմնական գույնով թեթևակի երանգավորված, սկզբում փակ ---------- */
html { --tint-1: color-mix(in srgb, var(--deep) 6%, var(--surface)); --tint-2: color-mix(in srgb, var(--deep) 10%, var(--surface)); --tint-3: color-mix(in srgb, var(--deep) 16%, var(--surface)); }
html[data-mode="dark"] { --tint-1: color-mix(in srgb, var(--primary) 7%, var(--surface)); --tint-2: color-mix(in srgb, var(--primary) 11%, var(--surface)); --tint-3: color-mix(in srgb, var(--primary) 18%, var(--surface)); }
.lib-book { padding: 0; margin-bottom: 12px; color: var(--text); background: var(--tint-1); border: 1px solid color-mix(in srgb, var(--deep) 14%, var(--border)); border-radius: 20px; overflow: hidden; box-shadow: var(--card-shadow); }
.lib-book > summary { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; }
.lib-book > summary::-webkit-details-marker, .lib-chap > summary::-webkit-details-marker { display: none; }
.lib-book > summary:hover { background: var(--tint-2); }
.lib-book .book-icon { width: 44px; height: 44px; border-radius: 13px; color: #fff; background: var(--deep); }
html[data-mode="dark"] .lib-book .book-icon { color: var(--on-primary); background: var(--primary); }
.lb-title b { font-size: 1.15rem; color: var(--text); }
.lb-chev { display: grid; place-items: center; width: 32px; height: 32px; margin-left: 4px; color: var(--text-muted); border-radius: 10px; background: var(--tint-2); transition: transform .2s; }
details[open] > summary > .lb-chev { transform: rotate(180deg); }
.lib-book .lb-ring { gap: 8px; font-size: .85rem; }
.lib-book .lb-ring i { background: radial-gradient(closest-side, var(--tint-1) 70%, transparent 73%), conic-gradient(var(--deep) calc(var(--p) * 1%), var(--tint-3) 0); }
html[data-mode="dark"] .lib-book .lb-ring i { background: radial-gradient(closest-side, var(--tint-1) 70%, transparent 73%), conic-gradient(var(--primary) calc(var(--p) * 1%), var(--tint-3) 0); }
.lib-book .lb-ring b { color: var(--text); }
.lib-body { display: grid; gap: 8px; padding: 0 14px 14px; }
.lib-chap { background: var(--surface); border: 1px solid var(--border); border-radius: 15px; }
.lib-chap > summary { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; cursor: pointer; list-style: none; border-radius: 15px; }
.lib-chap > summary:hover { background: var(--tint-1); }
.lc-label { flex-shrink: 0; padding: 3px 10px; font-size: .74rem; font-weight: 750; color: var(--primary-text); background: var(--tint-2); border-radius: 99px; }
.lc-title { flex: 1; min-width: 0; font-weight: 650; font-size: .95rem; }
.lib-chap .lb-chev { width: 28px; height: 28px; }
.lib-secs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px; padding: 2px 10px 12px; }
.lib-sec { display: flex; align-items: center; gap: 11px; padding: 9px 10px; color: var(--text); text-decoration: none; border-radius: 11px; transition: background .15s; }
.lib-sec:hover { background: var(--tint-1); }
.lib-sec.is-last { background: var(--tint-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--deep) 30%, transparent); }
.ls-num { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; font-size: .76rem; font-weight: 750; color: var(--primary-text); border-radius: 50%;
    background: radial-gradient(closest-side, var(--surface) calc(100% - 3px), transparent calc(100% - 2.5px)), conic-gradient(var(--deep) calc(var(--p, 0) * 1%), var(--tint-3) 0); }
html[data-mode="dark"] .ls-num { background: radial-gradient(closest-side, var(--surface) calc(100% - 3px), transparent calc(100% - 2.5px)), conic-gradient(var(--primary) calc(var(--p, 0) * 1%), var(--tint-3) 0); }
.lib-sec:hover .ls-num, .lib-sec.is-last .ls-num { background: radial-gradient(closest-side, var(--tint-2) calc(100% - 3px), transparent calc(100% - 2.5px)), conic-gradient(var(--deep) calc(var(--p, 0) * 1%), var(--tint-3) 0); }
.ls-title { flex: 1; min-width: 0; font-size: .9rem; line-height: 1.35; }
.ls-title small { display: block; font-size: .72rem; font-weight: 650; color: var(--primary-text); }
.ls-free { flex-shrink: 0; padding: 1px 8px; font-size: .68rem; font-weight: 750; color: var(--ok-text); background: var(--ok-soft); border-radius: 99px; }
.ls-lock { flex-shrink: 0; color: var(--text-muted); opacity: .7; }
.ls-pct { flex-shrink: 0; font-size: .76rem; font-weight: 700; color: var(--text-muted); }
@media (max-width: 600px) {
    .lib-book > summary { padding: 14px 14px; gap: 10px; }
    .lib-body { padding: 0 8px 8px; }
    .lib-secs { grid-template-columns: 1fr; padding: 0 4px 8px; }
    .lib-book .lb-ring b { display: none; }
}
.hh-find { font: inherit; text-align: left; cursor: pointer; }
.test-cta { background: var(--surface); border-color: var(--border); }
.ms-ic.c3 { background: var(--primary-soft); color: var(--primary-text); }
.sf-quiet { float: right; color: var(--text-muted); text-decoration: none; opacity: .75; } .sf-quiet:hover { color: #fff; opacity: 1; }

/* ---------- Առաջադրանքների ցանկ (problems) և մեկ առաջադրանք (problem) ---------- */
.problems-page, .problem-page { max-width: 900px; }
.problems-page h1 { font-size: 1.6rem; }
.pr-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 18px; }
.pr-pager a, .pr-pager b { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px; font-weight: 700; text-decoration: none; border-radius: 10px; }
.pr-pager a { color: var(--text); background: var(--surface); border: 1px solid var(--border); }
.pr-pager a:hover { border-color: var(--primary-line); }
.pr-pager b { color: #fff; background: var(--deep); }
html[data-mode="dark"] .pr-pager b { color: var(--on-primary); background: var(--primary); }
.pr-gap { color: var(--text-muted); }
.pr-list { display: grid; gap: 12px; }
.pr-sec { margin: 18px 0 2px; font-size: 1.15rem; }
.pr-sec a { color: var(--text); text-decoration: none; }
.pr-sec a:hover { color: var(--primary-text); text-decoration: underline; }
.pr-block { padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.pr-cond { font-weight: 650; line-height: 1.65; overflow-wrap: anywhere; }
.pr-qs { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.pr-qs a { color: var(--primary-text); text-decoration: none; line-height: 1.6; }
.pr-qs a:hover { text-decoration: underline; }
.pr-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; font-size: .86rem; color: var(--text-muted); }
.pr-crumbs a { color: var(--text-muted); }
.pr-card .pr-cond { color: var(--text-muted); font-weight: 600; }
.pr-q { margin: 10px 0 16px; font-size: 1.35rem; line-height: 1.5; }
.pr-opts { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pr-opts li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 12px; }
.pr-opts li.is-right { border-color: var(--ok); background: var(--ok-soft); }
.pr-opts li.is-right .opt-key { background: var(--ok); color: #fff; }
.pr-solution h2, .pr-locked h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1.15rem; }
.pr-solution .solution-body { line-height: 1.75; overflow-x: auto; }
.pr-detailed { margin-top: 12px; }
.pr-detailed summary { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; cursor: pointer; color: var(--primary-text); }
.pr-locked { display: flex; gap: 16px; align-items: flex-start; }
.pr-nav { display: flex; justify-content: space-between; margin-top: 8px; }
.pr-nav a { font-weight: 650; text-decoration: none; }
@media (max-width: 600px) { .pr-opts { grid-template-columns: 1fr; } .pr-q { font-size: 1.15rem; } .pr-locked { flex-direction: column; } .sf-quiet { float: none; display: block; margin-top: 6px; } }
html[data-mode="light"] :is(.t-group, .t-cond) { background: color-mix(in srgb, var(--deep) 5%, var(--surface)); border-left-color: var(--deep); }
html[data-mode="light"] .t-end { background: var(--surface); }
.tr-sol { margin-top: 14px; }
@media (max-width: 900px) { .toolbar .find-trigger { width: 40px; } }
@media (max-width: 600px) {
    .lib-chap > summary { flex-wrap: wrap; row-gap: 4px; }
    .lib-chap .lc-title { flex-basis: calc(100% - 44px); order: 2; }
    .lib-chap .lc-label { order: 1; }
    .lib-chap .lb-chev { order: 3; margin-left: auto; }
}
textarea.input[rows="1"] { min-height: 46px; }
/* Աջ բլոկներ. ներսի տեքստը միշտ բլոկի ներսում (պադինգ՝ details-ին, ոչ թե ամեն տարրին) */
details.rb-card { padding: 0 16px; overflow: hidden; }
details.rb-card[open] { padding-bottom: 16px; }
details.rb-card > summary { margin: 0 -16px; padding: 14px 16px; }
details.rb-card > :not(summary) { margin-left: 0; margin-right: 0; }
details.rb-card > :last-child { margin-bottom: 0; }
details.rb-card .hint { overflow-wrap: anywhere; }
/* Տեղեկատու՝ թեմայի հիմնական գույնով (թեմաների բազմագույն երանգների փոխարեն) */
html[data-mode="light"] :is(.th, [class*=" th-"], [class^="th-"]) { --accent: var(--deep); }
html[data-mode="dark"] :is(.th, [class*=" th-"], [class^="th-"]) { --accent: var(--primary); }
/* Տեղեկատու և պարզ էջերի գլխամաս՝ թեմայի գույնով թեթևակի երանգավորված */
.page-hero { background: var(--tint-1) !important; border-color: color-mix(in srgb, var(--deep) 14%, var(--border)) !important; }
.page-hero::before, .page-hero::after { display: none !important; }
.topic-card, .hb-card { background: var(--tint-1); border-color: color-mix(in srgb, var(--deep) 12%, var(--border)); }
.topic-card:hover, .hb-card:hover { background: var(--tint-2); }
.lib-book { --tint-1: color-mix(in srgb, var(--deep) 8%, var(--surface)); }
html[data-mode="dark"] .lib-book { --tint-1: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
/* Լուծումներ՝ կոմպակտ. առանձին տողի բանաձևից առաջ/հետո ավելորդ դատարկ տող չկա */
.solution-body .katex-display { margin: .35em 0; }
.solution-body .katex-display + br, .solution-body br:has(+ .katex-display) { display: none; }
.solution-body { line-height: 1.7; }
.solution-body .sol-fig { margin: 4px 0 8px; } .solution-body .sol-fig + br { display: none; } .solution-body .sol-fig svg { display: block; }
/* Լայն կոճակներում երկար տեքստը տեղափոխվում է նոր տող, դուրս չի գալիս */
.btn-block { white-space: normal; text-align: center; }
.btn-2l { padding-top: 9px; padding-bottom: 9px; }
.btn-2l > span { display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.btn-2l small { font-size: .78rem; font-weight: 600; opacity: .9; }
.th-start .tc-lock + .btn { margin-top: 10px; }

/* =====================================================================
   Լուծման բլոկ (ֆոնը՝ նախկինը). գծագիրը (SVG/նկար)՝ առանձին
   տողում, կենտրոնում, իսկ տեքստը սկսվում է նրա տակից՝ փոքր միջակայքով
   ===================================================================== */
.solution-body > svg, .solution-body > img, .solution-body > div > svg {
    display: block; width: auto; max-width: min(100%, 460px); height: auto;
    margin: 4px auto 12px; background: #fff; border: 1px solid color-mix(in srgb, var(--deep) 10%, var(--border)); border-radius: 12px;
}
.solution-body > svg + br, .solution-body > img + br { display: none; }
.solution-body .final-answer { margin-top: 14px; }
html[data-mode="dark"] .solution-body > svg, html[data-mode="dark"] .solution-body > img { background: #F1F3F7; padding: 0; }

/* =====================================================================
   ԴԻԶԱՅՆ v6 (2026-10) · «Մելան և ոսկի»
   Մաթեմատիկայի դասագրքի զգացողություն. մուգ մելանագույն վերնագիծ և
   բլոկներ, ոսկեգույն շեշտ, վերնագրերը՝ Noto Serif Armenian տառատեսակով,
   բանաձևերի (KaTeX) հետ նույն ոճով։ Ֆոնին՝ ոչ մի նկար կամ ցանց։
   Բոլոր գույները՝ թեմայի փոփոխականներից (բոլոր թեմաները աշխատում են)։
   ===================================================================== */
html {
    --font-head: 'Noto Serif Armenian', Georgia, 'Times New Roman', serif;
    --radius: 14px; --radius-lg: 18px;
    --gold: var(--accent2);
    --ink: var(--deep);
}
html[data-mode="light"] { --card-shadow: 0 1px 2px rgba(15, 26, 48, .05), 0 8px 24px -16px rgba(15, 26, 48, .22); }

/* ---------- Վերնագրեր՝ serif ---------- */
body:not(.admin) :is(h1, .page-title, .section-head h2, .page-hero h1, .info-hero h1, .test-cta h2, .pricing h2, .tests-hero h1, .pr-sec, .intro-card h2) {
    font-family: var(--font-head); font-weight: 700; letter-spacing: -.005em;
}
body:not(.admin) .page h1, .page-hero h1 { font-size: clamp(1.6rem, 3.2vw, 2.15rem); line-height: 1.22; }
.section-head h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.25; }
.page-title { font-weight: 700; }

/* «Eyebrow»՝ ոսկեգույն գծիկով */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .74rem; letter-spacing: .12em; color: var(--a2-text); }
.eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--accent2); }

/* ---------- Լոգո ---------- */
.brand { gap: 10px; font-family: var(--font-head); font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.brand-name { font-size: 1.32rem; line-height: 1; white-space: nowrap; }
.brand b, .brand .brand-name b { font-weight: 700; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--a2-text); }
:is(.site-top, .sidebar, .site-foot, .hero-home) .brand b, .brand-preview .brand:not(.on-light) b { color: var(--a2-bright); }
.brand-mark {
    flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center;
    color: var(--ink); border-radius: 11px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--accent2) 72%, #fff) 0%, var(--accent2) 62%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 14px -7px color-mix(in srgb, var(--accent2) 80%, transparent);
}
html[data-mode="dark"] .brand-mark { color: #10141C; }
.brand-mark svg { display: block; }
.brand-mark-glyph { font-family: Georgia, 'Times New Roman', serif; font-size: 1.3rem; font-weight: 700; line-height: 1; padding-bottom: 2px; }
.brand-logo { display: none !important; }   /* հին լոգոն */

/* ---------- Վերնագիծ (մուգ մելան) ---------- */
.site-top { padding-top: 10px; padding-bottom: 10px; background: var(--ink); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .07); }
.site-nav { margin-left: 22px; }
.site-top .site-nav > a { position: relative; padding: 9px 12px; color: rgba(232, 238, 246, .74); background: transparent; border-radius: 10px; }
.site-top .site-nav > a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.site-top .site-nav > a.on { color: #fff; background: rgba(255, 255, 255, .08); }
.site-top .site-nav > a.on .ic { color: var(--a2-bright); }
.nav-x { font-style: normal; }
@media (min-width: 701px) {
    .site-top .site-nav > a.on { background: transparent; }
    .site-top .site-nav > a.on::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -11px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent2); }
}
@media (max-width: 700px) {
    .site-top { background: var(--ink); }
    .site-top .site-nav { margin: 0; background: var(--ink); grid-auto-columns: minmax(0, 1fr); }
    .site-top .site-nav > a { padding: 6px 2px; border-radius: 10px; }
    .site-top .site-nav:has(> a:nth-child(6)) > a { font-size: .6rem; letter-spacing: -.01em; }
    .site-top .site-nav > a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nav-x { display: none; }
    .site-top .site-nav > a.on { color: var(--a2-bright); background: rgba(255, 255, 255, .07); }
}

/* ---------- Կոճակներ ---------- */
.btn { border-radius: 11px; }
.btn-sm { border-radius: 9px; }
.btn-lg { border-radius: 12px; }
.btn-primary { box-shadow: 0 6px 16px -8px var(--glow); }
.btn-accent { font-weight: 700; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--accent2) 90%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); }

/* ---------- Քարտեր ---------- */
.card { border-radius: var(--radius-lg); box-shadow: var(--card-shadow); }

/* =====================================================================
   ԳԼԽԱՎՈՐ ԷՋ
   ===================================================================== */
.hero-home {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 40px; align-items: center;
    padding: 52px 52px 48px; border-radius: 26px;
    background:
        radial-gradient(640px 360px at 100% 0%, color-mix(in srgb, var(--accent2) 16%, transparent), transparent 72%),
        linear-gradient(150deg, var(--ink) 0%, var(--deep2) 100%) !important;
}
.hero-home h1 { font-size: clamp(2.05rem, 4.2vw, 3.15rem); line-height: 1.14; margin: 16px 0 16px; }
.hh-accent { display: block; color: var(--a2-bright); }
.hero-home .lead { font-size: 1.08rem; line-height: 1.7; color: rgba(236, 241, 248, .8); }
.hh-kicker { padding: 5px 13px 5px 10px; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.hh-visual { min-height: 0; align-self: center; }

/* Լուծման նմուշ (աջ կողմում) */
.hh-sol { position: relative; max-width: 470px; margin-left: auto; padding: 20px 22px 18px; color: #182235; background: #FFFFFF; border-radius: 20px;
    box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); transform: rotate(-.6deg); }
html[data-mode="dark"] .hh-sol { color: #E4E8EE; background: #171F2C; box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08); }
.hs-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hs-num { display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 9px; font-family: var(--font-head); font-size: .85rem; color: #fff; background: var(--ink); border-radius: 9px; }
html[data-mode="dark"] .hs-num { color: #10141C; background: var(--primary); }
.hs-src { font-size: .78rem; font-weight: 650; letter-spacing: .02em; color: #5A6478; }
html[data-mode="dark"] .hs-src { color: #9AA6B8; }
.hs-q { margin: 0 0 12px; font-size: 1.02rem; font-weight: 600; line-height: 1.55; }
.hs-m { font-family: 'KaTeX_Main', 'Times New Roman', Georgia, serif; font-size: 1.08em; white-space: nowrap; }
.hs-m i { font-family: 'KaTeX_Math', 'Times New Roman', Georgia, serif; }
.hs-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.hs-opts span { padding: 6px 10px; font-size: .86rem; border: 1.5px solid #E1E5EC; border-radius: 10px; }
html[data-mode="dark"] .hs-opts span { border-color: #2C3646; }
.hs-opts .is-right { color: #1F5C42; background: #E6F2EA; border-color: #8CC5A4; font-weight: 650; }
html[data-mode="dark"] .hs-opts .is-right { color: #9AD9B9; background: #18302A; border-color: #3D7A5C; }
.hs-body { padding: 12px 14px 12px; background: color-mix(in srgb, var(--deep) 6%, #fff); border-left: 4px solid var(--accent2); border-radius: 4px 12px 12px 4px; }
html[data-mode="dark"] .hs-body { background: color-mix(in srgb, var(--primary) 8%, #171F2C); }
.hs-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 6px; font-size: .86rem; font-weight: 700; color: color-mix(in srgb, var(--accent2) 55%, var(--deep)); }
html[data-mode="dark"] .hs-title { color: var(--a2-bright); }
.hs-check { display: grid; place-items: center; width: 20px; height: 20px; color: #fff; background: var(--accent2); border-radius: 50%; }
html[data-mode="dark"] .hs-check { color: #10141C; }
.hs-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: .92rem; line-height: 1.6; }
.hs-steps li::marker { color: #8A94A6; font-size: .85em; }
.hs-ans { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 9px; border-top: 1.5px dashed color-mix(in srgb, var(--accent2) 45%, transparent); font-size: .88rem; }
.hs-ans span { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6A7487; }
.hs-graph { position: absolute; right: -18px; top: -26px; width: 116px; height: auto; padding: 8px; color: #182235; background: #fff; border-radius: 16px; box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .55); transform: rotate(3deg); }
html[data-mode="dark"] .hs-graph { color: #E4E8EE; background: #1C2533; }
.hs-curve { stroke: var(--accent2); }
.hs-graph circle { fill: var(--ink); }
html[data-mode="dark"] .hs-graph circle { fill: var(--primary); }
.hf-frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; font-size: .86em; line-height: 1.15; margin: 0 2px; }
.hf-frac > span:first-child { padding: 0 3px 1px; border-bottom: 1px solid currentColor; }

/* Շարունակել, վիճակագրություն */
.continue-card { border-radius: 18px; }
.ms-tile { border-radius: 16px; }
.ms-tile b { font-family: var(--font-head); font-weight: 700; }

/* Գրադարան (շտեմարաններ) */
.lib-book .book-icon { border-radius: 12px; }
.lb-title b { font-family: var(--font-head); font-weight: 700; font-size: 1.18rem; }
.ls-num { font-family: var(--font-head); font-weight: 700; }

/* Առավելություններ. առաջինը (մեր լուծումները)՝ ընդգծված */
.benefit { border-radius: 18px; }
.benefit .b-icon { border-radius: 12px; }
.benefits .benefit:first-child { background: linear-gradient(160deg, color-mix(in srgb, var(--accent2) 10%, var(--surface)), var(--surface) 60%); border-color: color-mix(in srgb, var(--accent2) 38%, var(--border)); }
.benefits .benefit:first-child .b-icon { background: var(--accent2) !important; color: var(--on-a2) !important; }
.benefit b { font-size: 1.04rem; }

/* Թեստի կոչ */
.test-cta { border-radius: 20px; border-left: 4px solid var(--accent2); }
.tc-chips b { font-family: var(--font-head); }

/* Փաթեթներ */
.plan { border-radius: 18px; }
.plan-price { font-family: var(--font-head); font-weight: 700; letter-spacing: -.01em; }
.plan.featured { border-color: color-mix(in srgb, var(--accent2) 55%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 16%, transparent), var(--card-shadow); }
.plan-tag { background: var(--accent2) !important; color: var(--on-a2) !important; }

/* ---------- Ներքևի մաս ---------- */
.site-foot { background: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.site-foot .brand-name { font-size: 1.22rem; }
.sf-own { margin-top: 0 !important; padding-left: 12px; font-size: .84rem !important; line-height: 1.55; color: rgba(232, 238, 246, .62) !important; border-left: 2px solid color-mix(in srgb, var(--accent2) 60%, transparent); }

/* =====================================================================
   ԲԱԺՆԻ ԷՋ
   ===================================================================== */
.sidebar { background: var(--ink) !important; }
.sidebar .brand-name { font-size: 1.28rem; }
.hero { border-radius: 20px; background:
        radial-gradient(520px 260px at 100% 0%, color-mix(in srgb, var(--accent2) 14%, transparent), transparent 72%),
        linear-gradient(150deg, var(--ink), var(--deep2)) !important; }
.hero .page-title { font-size: 1.9rem; letter-spacing: -.005em; }
.sec-tab[aria-selected="true"]::after { background: var(--accent2); }

/* Աղբյուրի փոխարկիչ (Շտեմարան / Մերը) */
.src-switch { display: inline-flex; gap: 2px; padding: 3px; margin-left: auto; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; }
.src-switch a { padding: 3px 11px; font-size: .78rem; font-weight: 700; color: rgba(236, 241, 248, .75); text-decoration: none; border-radius: 7px; }
.src-switch a:hover { color: #fff; }
.src-switch a.is-on { color: var(--on-a2); background: var(--accent2); }
.src-switch + .hero-edit { margin-left: 4px; }

/* Առաջադրանքի բլոկ և հարց */
.block-card { border-radius: 18px; box-shadow: var(--card-shadow); }
.block-head { border-left-color: var(--accent2); }
.q-num { font-family: var(--font-head); font-weight: 700; font-size: .95rem; border-radius: 50%; min-width: 36px; padding: 0; }
.question.is-right .q-num, .question.is-wrong .q-num, .question.is-unknown .q-num { border-radius: 50%; }
.option { border-radius: 12px; }
.opt-key { border-radius: 50%; font-family: var(--font-head); font-weight: 700; }
.option.chosen { border-color: var(--primary); }

.solution h4 { flex-wrap: wrap; }

/* ---------- Առաջադրանքների էջեր ---------- */
.pr-lead { margin: -2px 0 6px !important; font-size: .95rem !important; }
.pr-origin { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 14px; padding: 10px 14px; font-size: .86rem; line-height: 1.55; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent2); border-radius: 4px 12px 12px 4px; }
.pr-origin .ic { margin-top: 2px; color: var(--a2-text); }
.pr-q { font-family: var(--font); font-weight: 650; }

/* ---------- Պարզ էջերի գլխամաս ---------- */
.page-hero { border-radius: 22px !important; }
.hero-kicker { color: var(--a2-text); background: color-mix(in srgb, var(--accent2) 14%, var(--surface)); }
.auth-card::before { background: var(--accent2); }

/* =====================================================================
   ԱԴՄԻՆ. աղբյուրի կարգավորումներ, հավաքածուի փոխարկիչ, լոգո
   ===================================================================== */
.set-switch { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.set-switch a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: .88rem; font-weight: 650; color: var(--text-muted); text-decoration: none; border-radius: 9px; }
.set-switch a:hover { color: var(--text); }
.set-switch a.is-on { color: var(--text); background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.set-switch small { padding: 0 7px; font-size: .68rem; font-weight: 750; color: var(--ok-text); background: var(--ok-soft); border-radius: 99px; }
.cs-card .card-head { margin-bottom: 10px; }
.cs-card h2 { display: flex; align-items: center; gap: 8px; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 4px 22px; }
.cs-report { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; padding-top: 12px; font-size: .88rem; border-top: 1px solid var(--border); }
.cs-diff { margin-top: 10px; }
.cs-diff summary { cursor: pointer; font-size: .88rem; font-weight: 650; color: var(--warn-text); }
.block-admin.is-hidden-variant { opacity: .72; }
.block-admin.is-hidden-variant > header { background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--text) 3%, transparent) 10px 20px); }
.src-compare { margin-top: 14px; }
.src-compare > summary { cursor: pointer; }
.src-opts { margin: 8px 0; padding-left: 20px; }
.src-opts .is-right { color: var(--ok-text); font-weight: 650; }
.brand-edit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; }
.brand-preview { display: grid; gap: 10px; }
.brand-preview .brand { padding: 14px 18px; border-radius: 14px; --text: #fff; color: #fff; background: var(--ink); }
.brand-preview .brand.on-light { --text: var(--n-text, #131B2C); color: var(--n-text, #131B2C); background: var(--surface-2); border: 1px solid var(--border); }
@media (max-width: 760px) { .brand-edit { grid-template-columns: 1fr; } }

/* Մուգ ռեժիմ. KaTeX-ի ներքին նշանները (սլաք, արմատ) առանց սպիտակ ֆոնի — ֆոնը միայն գծագրերին */
html[data-mode="dark"] .katex svg { background: none !important; padding: 0 !important; border-radius: 0 !important; }

/* =====================================================================
   ՀԵՌԱԽՈՍ
   ===================================================================== */
@media (max-width: 900px) {
    .hero-home { grid-template-columns: 1fr; padding: 34px 26px 30px; gap: 28px; }
    .hh-visual { display: block; max-width: 470px; width: 100%; margin: 0 auto; }
    .hh-sol { margin: 0 auto; transform: none; }
    .hs-graph { right: -6px; top: -20px; width: 92px; }
}
@media (max-width: 600px) {
    .hero-home { padding: 26px 18px 22px; border-radius: 20px; }
    .hh-sol { padding: 16px 16px 14px; border-radius: 16px; }
    .hs-q { font-size: .95rem; }
    .hs-opts span { padding: 5px 8px; font-size: .8rem; }
    .hs-steps { font-size: .86rem; }
    .hs-graph { display: none; }
    .hs-title em { margin-left: 0; }
    .brand-name { font-size: 1.18rem; }
    .site-top .brand-mark, .toolbar .tb-home .brand-mark { width: 32px; height: 32px; border-radius: 10px; }
    .site-top .brand .brand-name { display: inline; }
    .hero .page-title { font-size: 1.45rem; }
    .src-switch { margin-left: 0; }
}
@media (max-width: 350px) { .site-top .brand .brand-name { display: none; } }

/* =====================================================================
   ՀԵՌԱԽՈՍՆԵՐ (320–480px), նաև տառաչափի L/XL կարգավորումով.
   ոչինչ դուրս չի գալիս էկրանից, ոչինչ չի կտրվում
   ===================================================================== */
/* Տառաչափը նեղ էկրանին՝ չափավոր (L/XL-ը մնում է ավելի մեծ, քան սովորականը) */
@media (max-width: 480px) {
    html[data-size="l"]  { font-size: 16.5px; }
    html[data-size="xl"] { font-size: 17.5px; }
}
@media (max-width: 360px) {
    html[data-size="m"]  { font-size: 15.5px; }
    html[data-size="l"]  { font-size: 16px; }
    html[data-size="xl"] { font-size: 16.5px; }
}
/* Ցանցի/flex-ի տարրերը կարող են նեղանալ (երկար բառը չի լայնացնում էջը) */
.hero-home > *, .tests-hero > *, .hh-text, .th-text, .hh-visual, .hh-sol, .hero > *, .content-inner, .block-card, .question, .q-text { min-width: 0; }
body:not(.admin) :is(h1, h2, .page-title) { overflow-wrap: break-word; }

@media (max-width: 900px) {
    .hero-home h1 { font-size: min(8.6vw, 2.6rem); overflow-wrap: anywhere; }
    .tests-hero h1 { font-size: min(8vw, 2.4rem); overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
    .hero-home .lead, .tests-hero .lead { font-size: 1rem; }
    .hh-cta .btn, .btn-block, .th-start .btn { white-space: normal; text-align: center; }
    .hh-find { max-width: 100%; }
    .hs-steps .hs-m { white-space: normal; }
    .hs-q .hs-m { white-space: nowrap; }   /* հավասարումը չի կտրվում, անցնում է նոր տող ամբողջությամբ */
    .hf-frac { white-space: nowrap; }
    .page { padding-left: 16px; padding-right: 16px; }
    /* Ներքևի նավիգացիա. տառերը կայուն չափով, որ 5 (ադմինին՝ 6) կետը միշտ տեղավորվեն */
    .site-top .site-nav > a { font-size: clamp(9.5px, 2.85vw, 11px) !important; letter-spacing: -.01em; }
    .site-top .site-nav > a .ic { width: 18px; height: 18px; }
    /* PRO-ն՝ ոսկեգույն օղակ ավատարի շուրջ (տեղ չի զբաղեցնում) */
    :is(.toolbar .acct-btn, .site-top .site-user) .pro-badge { display: none; }
    :is(.toolbar .acct-btn, .site-top .site-user):has(.pro-badge) .avatar { box-shadow: 0 0 0 2px var(--accent2); }
    /* Բաժնի էջի վերևի գիծը՝ առանց դուրս գալու */
    .toolbar { gap: 6px; }
    .toolbar .progress-pill { min-width: 0; }
    .sec-tabs { min-width: 0; }
    .sec-tab { min-width: 0; padding: 10px 4px 12px; gap: 6px; font-size: 14px; overflow: visible; }
}
@media (max-width: 380px) {
    .toolbar .icon-btn, .site-top .icon-btn { width: 34px; height: 34px; }
    .site-top .brand-name { font-size: 1.08rem; }
    .hero-home { padding-left: 16px; padding-right: 16px; }
    .hh-sol { padding: 14px 12px 12px; }
    .hs-opts { grid-template-columns: 1fr 1fr; gap: 5px; }
}
/* Տեղեկատուի քարտերը՝ միշտ էկրանի ներսում */
.topic-grid { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
.topic-card, .topic-card > * { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 420px) { .sec-tab { font-size: 13px; } .sec-tab .ic { width: 15px; height: 15px; } }
/* 1px կլորացումից հորիզոնական scroll չլինի (sticky վերնագիծը չի խանգարվում) */
@supports (overflow: clip) { body { overflow-x: clip; } }
@media (max-width: 360px) {
    .sec-tab .ic { display: none; }
    .toolbar .progress-pill { display: none; }   /* առաջընթացը երևում է բաժնի վերնագրի տակ */
    .toolbar .guest-links .tb-login-m { padding: 0 10px; }
}
/* Արմատի նշան՝ միայն polyline-ով (կեռիկ + վերևի գիծը արմատատակի վրա) */
.rad { position: relative; display: inline-block; width: 1.3em; height: 1.2em; padding: .14em 0 0 .64em; line-height: 1; vertical-align: -.12em; }
.rad svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rad polyline { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rad-in { display: inline-block; }

/* =====================================================================
   Հաստատման պատուհան (confirm()-ի փոխարեն) և «Կազմում ենք թեստը»
   ===================================================================== */
.agd { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; }
.agd-back { position: absolute; inset: 0; background: rgba(8, 12, 22, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .22s; }
.agd-card { position: relative; width: min(440px, 100%); padding: 28px 26px 22px; text-align: center; color: var(--text); background: var(--surface);
    border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
    opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .22s, transform .26s var(--ease); }
.agd-card::before { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent2); }
.agd-card.is-danger::before { background: var(--bad); }
.agd.is-open .agd-back { opacity: 1; }
.agd.is-open .agd-card { opacity: 1; transform: none; }
.agd-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 14px; color: var(--on-a2); background: var(--accent2); border-radius: 18px;
    box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent2) 90%, transparent); }
.agd-card.is-danger .agd-icon { color: #fff; background: var(--bad); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--bad) 80%, transparent); }
.agd-title { margin: 0 0 8px; font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; line-height: 1.25; }
.agd-text { margin: 0 auto 16px; max-width: 34ch; color: var(--text-muted); line-height: 1.6; }
.agd-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: -4px 0 18px; }
.agd-meta span { padding: 4px 11px; font-size: .8rem; font-weight: 650; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; }
.agd-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.agd-actions .btn { width: 100%; padding: 12px 14px; white-space: normal; }
@media (max-width: 600px) {
    .agd { place-items: end stretch; padding: 0; }
    .agd-card { width: 100%; padding: 26px 20px calc(18px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; transform: translateY(40px); }
    .agd-card::before { left: 50%; right: auto; width: 44px; margin-left: -22px; top: 8px; height: 4px; border-radius: 4px; background: var(--border-strong); }
    .agd-actions { grid-template-columns: 1fr; }
    .agd-actions [data-agd-yes] { order: -1; }
}

/* Կազմում ենք թեստը */
.agd-card.is-building { padding-top: 30px; padding-bottom: 26px; }
.agb-ring { position: relative; width: 150px; height: 150px; margin: 18px auto 34px; }
.agb-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.agb-track { fill: none; stroke: var(--surface-2); stroke-width: 8; }
.agb-fill { fill: none; stroke: var(--accent2); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; }
.agd-card.go .agb-fill { stroke-dashoffset: 0; transition: stroke-dashoffset var(--agb-t, 3000ms) cubic-bezier(.3, .1, .3, 1); }
.agb-count { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.agb-count b { font-family: var(--font-head); font-size: 2.3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.agb-count small { margin-top: 4px; font-size: .74rem; color: var(--text-muted); }
.agb-orbit { position: absolute; inset: -14px; animation: agbSpin 6s linear infinite; }
.agb-orbit i { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; display: grid; place-items: center;
    font-family: 'KaTeX_Main', 'Times New Roman', Georgia, serif; font-style: italic; font-size: 1rem; color: var(--primary-text);
    background: var(--surface); border: 1px solid var(--border); border-radius: 50%; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .35); opacity: 0; }
.agd-card.go .agb-orbit i { animation: agbPop .5s var(--ease) forwards; }
.agb-orbit i:nth-child(1) { transform: rotate(0deg) translateY(-89px) rotate(0deg); animation-delay: .05s !important; }
.agb-orbit i:nth-child(2) { transform: rotate(60deg) translateY(-89px) rotate(-60deg); animation-delay: .35s !important; }
.agb-orbit i:nth-child(3) { transform: rotate(120deg) translateY(-89px) rotate(-120deg); animation-delay: .65s !important; }
.agb-orbit i:nth-child(4) { transform: rotate(180deg) translateY(-89px) rotate(-180deg); animation-delay: .95s !important; }
.agb-orbit i:nth-child(5) { transform: rotate(240deg) translateY(-89px) rotate(-240deg); animation-delay: 1.25s !important; }
.agb-orbit i:nth-child(6) { transform: rotate(300deg) translateY(-89px) rotate(-300deg); animation-delay: 1.55s !important; }
.agb-orbit i b { display: block; font-weight: 400; animation: agbSpin 6s linear infinite reverse; }   /* նշանները մնում են ուղիղ */
@keyframes agbSpin { to { transform: rotate(360deg); } }
@keyframes agbPop { to { opacity: 1; } }
.agb-steps { list-style: none; display: grid; gap: 8px; width: fit-content; max-width: 100%; margin: 6px auto 0; padding: 0; text-align: left; }
.agb-steps li { position: relative; padding-left: 30px; font-size: .92rem; color: var(--text-muted); opacity: .55; transition: opacity .25s, color .25s; }
.agb-steps li::before { content: ''; position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 2px solid var(--border-strong); border-radius: 50%; box-sizing: border-box; }
.agb-steps li.is-on { opacity: 1; color: var(--text); font-weight: 650; }
.agb-steps li.is-on::before { border-color: var(--accent2); border-right-color: transparent; animation: agbSpin .8s linear infinite; }
.agb-steps li.is-done { opacity: 1; color: var(--text); }
.agb-steps li.is-done::before { border-color: var(--ok); background: var(--ok); }
.agb-steps li.is-done::after { content: ''; position: absolute; left: 6px; top: 50%; width: 4px; height: 8px; margin-top: -6px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .agb-orbit, .agb-orbit i b, .agb-steps li.is-on::before { animation: none; } }
.th-mine { margin-top: 10px; }
#myResults, #source { scroll-margin-top: 84px; }
@media (max-width: 600px) {
    .site-top .site-nav:has(> a:nth-child(6)) > a { font-size: 9.5px !important; letter-spacing: -.02em; padding-left: 1px; padding-right: 1px; }
    /* Ադմին՝ հեռախոսում դաշտերը մեկ սյունով */
    .admin .opt-grid { grid-template-columns: 1fr !important; }
    .admin h1, .admin .card-head > * { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 900px) {
    .admin .editor-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .admin .editor-grid > *, .admin .preview-col, .admin .preview-box { min-width: 0; }
}

/* Ադմին → Առաջադրանքների աղբյուրը */
.cs-intro { margin: 0 0 10px; color: var(--text-muted); line-height: 1.6; }
.cs-intro b { color: var(--text); }
.cs-now { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; padding: 8px 14px; font-size: .9rem; color: var(--ok-text); background: var(--ok-soft); border-radius: 12px; }
.cs-now b { color: var(--text); }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.cs-q { min-width: 0; margin: 0; padding: 14px 16px 6px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.cs-q legend { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-weight: 750; }
.cs-q legend span { display: inline-grid; place-items: center; width: 22px; height: 22px; font-size: .75rem; color: var(--on-a2); background: var(--accent2); border-radius: 50%; }
.cs-opt { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.cs-opt:hover { border-color: var(--primary-line); }
.cs-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-faint); }
.cs-opt input { margin-top: 3px; accent-color: var(--primary); }
.cs-opt span { display: flex; flex-direction: column; min-width: 0; }
.cs-opt small { color: var(--text-muted); font-size: .8rem; line-height: 1.4; }
.cs-q .hint { display: block; margin: 8px 2px 10px; line-height: 1.55; }

/* =====================================================================
   v7 · Մեծ մոնիտորներ, գլխավոր էջի վերևի բլոկ, փաթեթների կարգավիճակ
   ===================================================================== */

/* ---------- Մեծ մոնիտորներ. ամբողջ կայքը համաչափ մեծանում է (ինչպես զննարկիչի 110–200%) ----------
   vh-ը zoom-ի հետ բազմապատկվում է, ուստի բարձրությունները գրված են var(--vh)-ով։
   JS-ը (դիրքավորում, քաշում) բաժանում է zoom-ի գործակցով (app.js → zf())։ */
:root { --vh: 1vh; --z: 1; }
@media screen and (min-width: 1700px) { :root { --z: 1.08; } }
@media screen and (min-width: 1900px) { :root { --z: 1.2; } }
@media screen and (min-width: 2200px) { :root { --z: 1.3; } }
@media screen and (min-width: 2450px) { :root { --z: 1.45; } }
@media screen and (min-width: 2900px) { :root { --z: 1.7; } }
@media screen and (min-width: 3400px) { :root { --z: 2; } }
@media screen and (min-width: 1700px) { :root { zoom: var(--z); --vh: calc(1vh / var(--z)); } }

/* ---------- Փաթեթներ. արդեն ակտիվ փաթեթի փոխարեն գնի՝ կարգավիճակ ---------- */
.plan-status { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 6px 0 4px; padding: 8px 15px 8px 12px; font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; line-height: 1.2; border-radius: 12px; }
.plan-status.is-on { color: var(--ok-text); background: var(--ok-soft); }
.plan-status.is-off { color: var(--text-muted); background: var(--surface-2); }
.plan-per b { color: var(--text); }
.plan-blocked { margin: 0 0 10px; }
.acc-login { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -6px 0 16px; }
.acc-login b { color: var(--text); overflow-wrap: anywhere; }

/* ---------- Գլխավոր էջ. վերևի մուգ բլոկ ---------- */
.hero-home { isolation: isolate; overflow: hidden; }
/* նուրբ «վանդակավոր թուղթ» աջ կողմում՝ մաթեմատիկական տրամադրության համար */
.hero-home::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 30px 30px; background-position: -1px -1px;
    -webkit-mask-image: radial-gradient(70% 90% at 92% 30%, #000 0%, transparent 70%); mask-image: radial-gradient(70% 90% at 92% 30%, #000 0%, transparent 70%); }

/* Հիմնական կոճակ. ոսկե փայլ՝ մի քանի վայրկյանը մեկ — նկատելի է, բայց չի խանգարում */
.hh-cta .btn { transition: transform .2s var(--ease), box-shadow .2s, background .2s, border-color .2s; }
.hh-cta .btn:hover { transform: translateY(-2px); }
.hh-cta .btn:active { transform: translateY(0); }
.hh-main { position: relative; overflow: hidden; isolation: isolate; }
.hh-main::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: -70%; width: 45%; z-index: -1; pointer-events: none;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .6) 50%, transparent 100%); transform: skewX(-20deg); }
.hh-main > .ic:last-child { transition: transform .2s var(--ease); }
.hh-main:hover > .ic:last-child { transform: translateX(4px); }
.hh-main:hover { box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--accent2) 95%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); }
.hh-alt:hover { border-color: color-mix(in srgb, var(--accent2) 70%, transparent); background: rgba(255, 255, 255, .13); }
.hh-tests .ic path { transform-box: view-box; transform-origin: 12px 12px; }
@media (prefers-reduced-motion: no-preference) {
    /* միայն նուրբ փայլ՝ 7 վայրկյանը մեկ (առանց անընդհատ թարթելու), ժամացույցը պտտվում է միայն մկնիկի տակ */
    .hh-main::after { animation: hhSheen 7s ease-in-out 1.2s infinite; }
    .hh-tests:hover .ic path { animation: hhTick 1.8s linear infinite; }
    /* մուտքի անիմացիա՝ մեկ անգամ */
    .hero-home .hh-text > * { animation: hhUp .65s var(--ease) both; }
    .hero-home .hh-text > :nth-child(2) { animation-delay: .06s; }
    .hero-home .hh-text > :nth-child(3) { animation-delay: .12s; }
    .hero-home .hh-text > :nth-child(4) { animation-delay: .18s; }
    .hero-home .hh-text > :nth-child(n+5) { animation-delay: .24s; }
    .hero-home .hh-visual { animation: hhUp .6s var(--ease) .1s both; }
}
@keyframes hhSheen { 0% { left: -70%; } 18%, 100% { left: 135%; } }
@keyframes hhTick { to { transform: rotate(360deg); } }
@keyframes hhUp { from { opacity: 0; transform: translateY(14px); } }

/* «Գտնել առաջադրանքը»՝ նավիգացիոն գիծ (շտեմարան › գլուխ › բաժին › №) */
.hero-home .hh-find { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 500px; margin-top: 24px; padding: 10px 10px 10px 11px; color: #fff; text-align: left;
    background: linear-gradient(180deg, rgba(255, 255, 255, .095), rgba(255, 255, 255, .045)); border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 14px 30px -22px rgba(0, 0, 0, .8); transition: border-color .2s, background .2s, transform .2s var(--ease); }
.hero-home .hh-find:hover { border-color: color-mix(in srgb, var(--accent2) 65%, transparent); background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .07)); transform: translateY(-1px); }
.hero-home .hh-find:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent2) 70%, transparent); outline-offset: 3px; }
.hh-find .hf-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; color: var(--a2-bright); background: rgba(255, 255, 255, .06); border: 1px solid color-mix(in srgb, var(--accent2) 50%, transparent); border-radius: 13px; }
.hh-find .hf-txt { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; text-align: left; }
.hh-find .hf-txt b { font-size: 1.02rem; font-weight: 700; letter-spacing: .005em; }
.hh-find .hf-steps { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; row-gap: 4px; }
.hh-find .hf-steps i { position: relative; padding: 2px 9px; font-size: .74rem; font-style: normal; font-weight: 600; line-height: 1.5; color: rgba(236, 241, 248, .82); background: rgba(255, 255, 255, .07); border-radius: 99px; }
.hh-find .hf-steps i + i { margin-left: 16px; }
.hh-find .hf-steps i + i::before { content: "›"; position: absolute; left: -12px; top: 50%; transform: translateY(-54%); font-size: .95rem; color: color-mix(in srgb, var(--accent2) 80%, #fff); }
.hh-find .hf-steps i:last-child { color: var(--on-a2); background: color-mix(in srgb, var(--accent2) 85%, #fff); }
.hh-find .hf-go { display: grid; place-items: center; flex: none; width: 40px; height: 40px; color: #fff; background: rgba(255, 255, 255, .08); border-radius: 12px; transition: background .2s, color .2s, transform .2s var(--ease); }
.hero-home .hh-find:hover .hf-go { color: var(--on-a2); background: var(--accent2); transform: translateX(2px); }

/* ---------- Հեռախոս. վերևի բլոկը՝ կոմպակտ (ոչ ամբողջ էկրան) ---------- */
@media (max-width: 600px) {
    .home .hero-home { gap: 0; padding: 18px 16px 16px; border-radius: 18px; }
    .home .hero-home .hh-visual { display: none; }
    .hero-home .hh-kicker { padding: 4px 10px 4px 8px; font-size: .72rem; }
    .hero-home h1 { margin: 10px 0 8px; font-size: clamp(1.3rem, 6.3vw, 1.75rem); line-height: 1.2; overflow-wrap: break-word; }
    .hero-home .lead { margin: 0 0 14px; font-size: .88rem; line-height: 1.55; }
    .hero-home.is-user .lead { display: none; }
    .hh-cta { display: flex; flex-wrap: wrap; gap: 8px; }
    .hh-cta .btn { flex: 1 1 auto; min-height: 46px; padding: 10px 13px; font-size: .9rem; white-space: nowrap; border-radius: 12px; }
    .hh-cta .btn > .ic { display: none; }
    .hh-cta .btn.hh-tests > .ic { display: inline-block; }
    .hh-price { margin-top: 8px; font-size: .78rem; }
    .hero-home .hh-find { gap: 10px; max-width: none; margin-top: 12px; padding: 8px; border-radius: 14px; }
    .hh-find .hf-ic { width: 36px; height: 36px; border-radius: 10px; }
    .hh-find .hf-txt { gap: 4px; }
    .hh-find .hf-txt b { font-size: .92rem; }
    .hh-find .hf-steps i { padding: 1px 7px; font-size: .68rem; }
    .hh-find .hf-steps i + i { margin-left: 13px; }
    .hh-find .hf-steps i + i::before { left: -10px; }
    .hh-find .hf-go { width: 32px; height: 32px; border-radius: 10px; }
}
@media (max-width: 480px) { .hh-find .hf-steps i:nth-child(4) { display: none; } }
@media (max-width: 400px) {
    .hh-find .hf-go { display: none; }   /* ամբողջ գիծը սեղմվող է */
    .ms-tile { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ms-tile > span:last-child { overflow-wrap: normal; }
}
@media (max-width: 350px) {
    .hh-cta .btn { white-space: normal; }
    .hh-find .hf-steps i:nth-child(n+3) { display: none; }
}

/* ---------- Գլխավոր էջ. մնացած բաժինները՝ ավելի մաքուր ---------- */
.lib-book { background: var(--surface); }
.lib-book > summary:hover { background: var(--tint-1); }
.lib-book[open] { border-color: color-mix(in srgb, var(--accent2) 45%, var(--border)); }
.lib-book[open] > summary { box-shadow: inset 4px 0 0 var(--accent2); }
.ms-tile, .benefit, .continue-card { transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.ms-tile:hover, .benefit:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover, 0 14px 30px -18px rgba(14, 22, 40, .35)); }
.benefit:hover { border-color: color-mix(in srgb, var(--accent2) 40%, var(--border)); }
.section-head h2 { font-family: var(--font-head); }
@media (prefers-reduced-motion: reduce) {
    .hh-main, .hh-main::after, .hh-tests .ic path, .hero-home .hh-text > *, .hero-home .hh-visual { animation: none !important; }
    .hh-cta .btn:hover, .ms-tile:hover, .benefit:hover, .hero-home .hh-find:hover { transform: none; }
}
/* Հեռախոս, մեծ տառաչափ, հյուր. «Մուտք / Գրանցվել» կոճակները մի քիչ նեղ, որ գլխագիծը չանցնի էկրանից */
@media (max-width: 380px) {
    .site-top .site-actions .btn-sm { padding-left: 10px; padding-right: 10px; }
    .site-top .site-actions { min-width: 0; }
}

/* =====================================================================
   v8 · «Գտնել առաջադրանքը»՝ նոր պանել (որոնում անունով + քայլեր)
   ===================================================================== */
html.find-open body::before { content: ""; position: fixed; inset: 0; z-index: 85; background: rgba(8, 13, 24, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade .2s; }
html.find-open :is(.site-top, .toolbar) { z-index: 90; -webkit-backdrop-filter: none; backdrop-filter: none; }
.find-panel { top: 78px; left: max(24px, calc(50% - 530px)); width: min(1060px, calc(100vw - 48px)); max-height: min(calc(var(--vh) * 100 - 104px), 840px);
    color: var(--text); background: var(--bg); border: 0; border-radius: 24px; box-shadow: 0 44px 110px -34px rgba(4, 8, 18, .7), 0 0 0 1px rgba(255, 255, 255, .06); animation: fpIn .22s var(--ease); }
@keyframes fpIn { from { opacity: 0; transform: translateY(-8px) scale(.99); } }
.find-panel .fp-head { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 18px 8px 22px; color: #fff; border: 0;
    background: radial-gradient(300px 60px at 100% 0%, color-mix(in srgb, var(--accent2) 22%, transparent), transparent 80%), var(--ink); }
html[data-mode="dark"] .find-panel .fp-head, html[data-mode="dark"] .find-panel .fd-search { background-color: var(--d-sb, #0E131C); }
.fp-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; color: var(--a2-bright); background: rgba(255, 255, 255, .07); border: 1px solid color-mix(in srgb, var(--accent2) 50%, transparent); border-radius: 13px; }
.fp-title { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.fp-head .fp-title b { display: block; font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; line-height: 1.2; color: #fff; }
.fp-title small { font-size: .84rem; line-height: 1.4; color: rgba(236, 241, 248, .72); }
.fp-x { display: grid; place-items: center; flex: none; align-self: flex-start; width: 40px; height: 40px; color: #fff; background: rgba(255, 255, 255, .08); border: 0; border-radius: 12px; cursor: pointer; transition: background .15s; }
.fp-x:hover { background: rgba(255, 255, 255, .16); }
.find-panel .finder { gap: 12px; padding: 0 22px 24px; background: var(--bg); }

/* որոնման դաշտ */
.fd-search { position: relative; display: flex; align-items: center; }
.fd-search > .ic { position: absolute; left: 16px; color: var(--text-muted); pointer-events: none; }
.fd-q { width: 100%; height: 52px; padding: 0 50px 0 46px; font: inherit; font-size: 1rem; color: var(--text); background: var(--surface); border: 1.5px solid var(--border); border-radius: 15px; outline: none;
    -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s; }
.fd-q::-webkit-search-cancel-button, .fd-q::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.fd-q::placeholder { color: var(--text-muted); opacity: .85; }
.fd-q:focus { border-color: var(--accent2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent2) 22%, transparent); }
.fd-clear { position: absolute; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; color: var(--text-muted); background: var(--surface-2); border: 0; border-radius: 9px; cursor: pointer; }
.fd-clear[hidden] { display: none; }
.find-panel .fd-search { position: sticky; top: 0; z-index: 3; margin: 0 -22px 2px; padding: 10px 22px 18px; background: var(--ink); }
.find-panel .fd-search > .ic { left: 38px; }
.find-panel .fd-clear { right: 32px; }
.find-panel .fd-q { border-color: transparent; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8); }
.find-panel .fd-q:focus { border-color: var(--accent2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent2) 30%, transparent); }

/* քայլերի վերնագրեր (համարները՝ ինքնաշխատ, թաքցված քայլը չի հաշվվում) */
.fd-browse { display: grid; gap: 10px; counter-reset: fstep; }
.fd-browse[hidden], .fd-results[hidden], .fd-step[hidden] { display: none; }
.fd-step { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.fd-step span { display: inline-grid; place-items: center; width: 20px; height: 20px; font-size: .7rem; letter-spacing: 0; color: var(--on-a2); background: var(--accent2); border-radius: 50%; }
.fd-browse .fd-step { counter-increment: fstep; }
.fd-browse .fd-step span::before { content: counter(fstep); }

/* շտեմարաններ */
.finder .fd-tab { padding: 9px 18px; font-size: .92rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; transition: border-color .15s, background .15s; }
.finder .fd-tab:hover { border-color: var(--primary-line); }
.finder .fd-tab[aria-pressed="true"] { color: #fff; background: var(--ink); border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent2); }
/* գլուխներ */
.finder .fd-chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.finder .fd-chip { position: relative; gap: 3px; max-width: none; padding: 11px 14px 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.finder .fd-chip b { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--a2-text); }
.finder .fd-chip small { font-size: .88rem; font-weight: 650; line-height: 1.35; }
.finder .fd-chip:hover { border-color: color-mix(in srgb, var(--accent2) 55%, var(--border)); transform: translateY(-1px); }
.finder .fd-chip[aria-pressed="true"] { background: var(--surface); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), 0 10px 22px -16px rgba(14, 22, 40, .55); }
.finder .fd-chip[aria-pressed="true"]::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 4px; background: var(--accent2); border-radius: 0 4px 4px 0; }
html[data-mode="dark"] .finder .fd-chip[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

/* բաժիններ և առաջադրանքներ */
.finder .fd-body { grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: 18px; }
.finder .fd-col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.finder .fd-sections { gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.finder .fd-sec { align-items: center; gap: 11px; padding: 9px 10px; font-size: .92rem; border-radius: 11px; transition: background .12s; }
.finder .fd-sec > .ic { flex: none; margin-left: auto; color: var(--text-muted); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.finder .fd-sec:hover { background: var(--tint-1); }
.finder .fd-sec:hover > .ic { opacity: 1; transform: none; }
.finder .fd-n { width: 28px; height: 28px; font-size: .76rem; color: var(--text-muted); background: var(--surface-2); border: 0; border-radius: 9px; }
.finder .fd-t { padding-top: 0; line-height: 1.35; }
.finder .fd-sec[aria-pressed="true"], .finder .fd-sec[aria-current] { color: #fff; background: var(--ink); box-shadow: none; }
.finder .fd-sec[aria-pressed="true"] .fd-n, .finder .fd-sec[aria-current] .fd-n { color: var(--on-a2); background: var(--accent2); }
.finder .fd-sec[aria-pressed="true"] > .ic, .finder .fd-sec[aria-current] > .ic { opacity: 1; transform: none; color: var(--a2-bright); }
html[data-mode="dark"] .finder .fd-sec[aria-pressed="true"], html[data-mode="dark"] .finder .fd-sec[aria-current] { color: var(--text); background: color-mix(in srgb, var(--primary) 20%, var(--surface)); }
.finder .fd-tasks { gap: 10px; }
.finder .fd-thead { gap: 12px; padding: 12px 12px 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.fd-tt { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.fd-tt small { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--a2-text); }
.fd-tt b { font-family: var(--font-head); font-size: 1.08rem; line-height: 1.3; overflow-wrap: anywhere; }
.finder .fd-open { display: inline-flex; flex: none; align-items: center; gap: 3px; padding: 8px 10px 8px 13px; font-size: .86rem; font-weight: 700; color: var(--on-a2); text-decoration: none; background: var(--accent2); border-radius: 10px; transition: filter .15s; }
.finder .fd-open:hover { color: var(--on-a2); text-decoration: none; filter: brightness(1.06); }
.fd-tip { margin: 0; font-size: .82rem; color: var(--text-muted); }
.finder .fd-block { padding: 12px 14px 14px; border-radius: 14px; }
.finder .fd-bt { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: .9rem; line-height: 1.5; color: var(--text); }
.fd-bn { display: inline-grid; flex: none; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; font-size: .76rem; font-weight: 800; color: #fff; background: var(--ink); border-radius: 8px; }
html[data-mode="dark"] .fd-bn { color: var(--on-primary); background: var(--primary); }
.finder .fd-nums { gap: 6px; padding-left: 36px; }
.finder .fd-num { min-width: 42px; height: 38px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; transition: background .12s, color .12s, transform .12s; }
.finder .fd-num:hover { color: var(--on-a2); background: var(--accent2); border-color: var(--accent2); transform: translateY(-1px); }
/* դատարկ վիճակներ */
.finder .fd-empty { justify-items: center; gap: 6px; padding: 34px 22px; text-align: center; background: var(--surface); border: 1.5px dashed var(--border-strong); border-radius: 18px; }
.finder .fd-empty b { font-size: 1rem; }
.finder .fd-empty > span:not(.fd-empty-ic) { max-width: 380px; line-height: 1.55; }
.fd-empty-ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; color: var(--a2-text); background: color-mix(in srgb, var(--accent2) 15%, var(--surface)); border-radius: 16px; }
.finder .fd-empty .btn { margin-top: 6px; }
/* որոնման արդյունքներ */
.fd-results { display: grid; gap: 6px; }
.fd-res { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; font: inherit; text-align: left; color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s; }
.fd-res:hover, .fd-res:focus-visible { border-color: var(--accent2); box-shadow: 0 10px 24px -18px rgba(14, 22, 40, .55); transform: translateY(-1px); outline: none; }
.fd-res .fd-n { flex: none; }
.fd-rt { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.fd-rt b { font-weight: 650; line-height: 1.35; }
.fd-rt small { font-size: .8rem; color: var(--text-muted); }
.fd-res > .ic { flex: none; color: var(--text-muted); }
.fd-results mark { padding: 0; color: inherit; background: color-mix(in srgb, var(--accent2) 38%, transparent); border-radius: 4px; }
.fd-step-r { margin: 6px 0 2px; }

/* հեռախոս. պանելը՝ ամբողջ էկրանով */
@media (max-width: 900px) {
    html.find-open { overflow: hidden; }
    .find-panel { top: 8px; left: 8px; right: 8px; bottom: auto; width: auto; height: calc(100dvh - 16px); max-height: none; border-radius: 20px; }
    .find-panel .fp-head { gap: 12px; padding: 14px 12px 6px 16px; }
    .fp-ic { width: 38px; height: 38px; border-radius: 11px; }
    .fp-head .fp-title b { font-size: 1.12rem; }
    .fp-title small { display: none; }
    .find-panel .finder { padding: 0 14px 20px; }
    .find-panel .fd-search { margin: 0 -14px 2px; padding: 8px 14px 14px; }
    .find-panel .fd-search > .ic { left: 30px; }
    .find-panel .fd-clear { right: 24px; }
    .fd-q { height: 48px; font-size: 16px; }
    .finder .fd-body { grid-template-columns: 1fr; }
    .finder .fd-chapters { grid-template-columns: 1fr; }
    .finder.show-tasks :is(.fd-col-s, .fd-books, .fd-chapters, .fd-step-b, .fd-step-c) { display: none; }
    .finder:not(.show-tasks) .fd-col-t { display: none; }
    .finder:not(.show-tasks) .fd-col-t:has(.fd-locked) { display: grid; }
    .finder.show-tasks .fd-col-t > .fd-step { display: none; }
    .finder .fd-thead { flex-wrap: wrap; padding: 10px; }
    .fd-tt { flex-basis: calc(100% - 120px); }
    .finder .fd-nums { padding-left: 0; }
    .finder .fd-sec > .ic { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .find-panel, html.find-open body::before { animation: none; } }

/* =====================================================================
   v9 · Առաջադրանքների ցուցակ (problems) և առաջադրանքի էջ (Google)
   ===================================================================== */
.problems-page, .problem-page { max-width: 980px; }
.pr-hero { position: relative; isolation: isolate; overflow: hidden; margin: 6px 0 18px; padding: 34px 36px 30px; color: #fff; border-radius: 24px;
    background: radial-gradient(520px 260px at 100% 0%, color-mix(in srgb, var(--accent2) 16%, transparent), transparent 72%), linear-gradient(150deg, var(--ink) 0%, var(--deep2) 100%); }
.pr-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(60% 100% at 95% 20%, #000, transparent 70%); mask-image: radial-gradient(60% 100% at 95% 20%, #000, transparent 70%); }
body:not(.admin) .pr-hero h1 { margin: 14px 0 10px; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.18; color: #fff; }
.pr-hpage { font-size: .6em; color: var(--a2-bright); white-space: nowrap; }
.pr-hero .lead { max-width: 720px; margin: 0; font-size: 1rem; line-height: 1.65; color: rgba(236, 241, 248, .8); }
.pr-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pr-stats span { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 14px; font-size: .86rem; color: rgba(236, 241, 248, .82); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 99px; }
.pr-stats b { font-family: var(--font-head); font-size: 1.1rem; color: var(--a2-bright); }

.pr-topics { margin-bottom: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--card-shadow); }
.pr-topics > summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; list-style: none; }
.pr-topics > summary::-webkit-details-marker { display: none; }
.pr-topics > summary .hint { margin-left: auto; }
.pr-topics > summary > .ic:last-child { color: var(--text-muted); transition: transform .2s; }
.pr-topics[open] > summary > .ic:last-child { transform: rotate(180deg); }
.pr-topics > summary > .ic:first-child { color: var(--a2-text); }
.pr-topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 6px; padding: 0 12px 14px; }
.pr-topic { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: var(--text); text-decoration: none; border: 1px solid transparent; border-radius: 12px; transition: background .12s, border-color .12s; }
.pr-topic:hover { background: var(--tint-1); border-color: var(--border); }
.pr-topic.is-here { background: color-mix(in srgb, var(--accent2) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent2) 40%, var(--border)); }
.pr-topic > span { display: flex; flex: 1; flex-direction: column; min-width: 0; font-weight: 650; font-size: .92rem; line-height: 1.3; }
.pr-topic small { font-size: .76rem; font-weight: 500; color: var(--text-muted); }
.pr-topic em { flex: none; min-width: 34px; padding: 2px 8px; font-size: .78rem; font-style: normal; font-weight: 750; text-align: center; color: var(--text-muted); background: var(--surface-2); border-radius: 99px; }

/* էջերի համարներ */
.pr-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 18px; }
.pp-nums { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.pr-pager .pp-step { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; font-weight: 700; color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.pr-pager .pp-step:hover { border-color: var(--accent2); }
.pr-pager .pp-step.is-off { color: var(--text-muted); opacity: .45; }
.pr-pager .pp-nums a, .pr-pager .pp-nums b { min-width: 40px; height: 40px; border-radius: 12px; }
.pr-pager .pp-nums a:hover { border-color: var(--accent2); }
.pr-pager .pp-nums b { color: #fff; background: var(--ink); box-shadow: inset 0 -3px 0 var(--accent2); }
.pr-pageinfo { margin: -6px 0 10px; font-size: .84rem; text-align: center; color: var(--text-muted); }

/* ցուցակ */
.pr-list { gap: 12px; }
body:not(.admin) .pr-sec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 22px 0 2px; scroll-margin-top: 84px; font-family: var(--font-head); font-size: 1.35rem; }
.pr-sec::before { content: ""; align-self: center; width: 6px; height: 22px; background: var(--accent2); border-radius: 3px; }
.pr-sec small { flex-basis: 100%; padding-left: 18px; font-family: var(--font); font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.pr-block { padding: 16px 18px 12px; border-radius: 18px; box-shadow: var(--card-shadow); }
.pr-block .pr-cond { padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px dashed var(--border); }
.pr-qs { list-style: none; margin: 0; padding: 0; gap: 2px; }
.pr-qs li a { display: flex; align-items: flex-start; gap: 12px; padding: 9px 10px; color: var(--text); text-decoration: none; border-radius: 12px; transition: background .12s; }
.pr-qs li a:hover { background: var(--tint-1); text-decoration: none; }
.pr-qn { flex: none; display: inline-grid; place-items: center; min-width: 32px; height: 26px; padding: 0 7px; font-size: .78rem; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--text-muted); background: var(--surface-2); border-radius: 8px; }
.pr-qt { flex: 1; min-width: 0; line-height: 1.6; overflow-wrap: anywhere; }
.pr-go { flex: none; display: inline-flex; align-items: center; gap: 2px; margin-top: 2px; padding: 3px 10px; font-size: .78rem; font-weight: 700; color: var(--a2-text); background: color-mix(in srgb, var(--accent2) 12%, var(--surface)); border-radius: 99px; transition: background .12s, color .12s; }
.pr-qs li a:hover .pr-go { color: var(--on-a2); background: var(--accent2); }
.pr-qs li a:hover .pr-qn { color: #fff; background: var(--ink); }

/* առաջադրանքի էջ */
.pr-crumbs a { text-decoration: none; }
.pr-crumbs a:hover { color: var(--text); text-decoration: underline; }
.pr-card { border-top: 4px solid var(--accent2); }
.pr-det-lock { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 10px 14px; font-size: .88rem; color: var(--text-muted); background: var(--surface-2); border-radius: 12px; }
.pr-more { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding: 18px 22px; color: #fff; border-radius: 18px;
    background: radial-gradient(360px 180px at 100% 0%, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 72%), linear-gradient(150deg, var(--ink), var(--deep2)); }
.pr-more > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pr-more b { font-family: var(--font-head); font-size: 1.12rem; }
.pr-more span { font-size: .9rem; line-height: 1.5; color: rgba(236, 241, 248, .78); }
.pr-more .btn { flex: none; }
.pr-nav a { display: inline-flex; padding: 9px 14px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.pr-nav a:hover { border-color: var(--accent2); }

@media (max-width: 600px) {
    .pr-hero { margin-top: 0; padding: 22px 18px 20px; border-radius: 18px; }
    .pr-hero .lead { font-size: .9rem; }
    .pr-stats span { padding: 5px 11px; font-size: .8rem; }
    .pr-pager { justify-content: center; }
    .pr-pager .pp-step { order: 2; height: 38px; padding: 0 12px; font-size: .88rem; }
    .pp-nums { order: 1; flex-basis: 100%; }
    .pr-pager .pp-nums a, .pr-pager .pp-nums b { min-width: 36px; height: 36px; }
    .pr-block { padding: 14px 12px 8px; }
    .pr-qs li a { gap: 10px; padding: 9px 6px; flex-wrap: wrap; }
    .pr-go { margin-left: 42px; }
    .pr-qt { flex-basis: calc(100% - 44px); }
    .pr-more { flex-direction: column; align-items: stretch; padding: 16px; }
    body:not(.admin) .pr-sec { font-size: 1.15rem; }
}
body:not(.admin) .pr-card .pr-q { margin: 8px 0 16px; font-family: var(--font); font-size: 1.3rem; font-weight: 650; line-height: 1.5; letter-spacing: 0; }
@media (max-width: 600px) { body:not(.admin) .pr-card .pr-q { font-size: 1.12rem; } }

/* =====================================================================
   v11 · Նախորդ դիզայնը՝ ավելի խնամված (նույն ոճը, ավելի նուրբ մանրամասներ)
   ===================================================================== */
/* վերևի բլոկ. երկրորդ, կապտավուն լույս ներքևում՝ խորության համար */
.hero-home { box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--ink) 85%, transparent);
    background:
        radial-gradient(640px 360px at 100% 0%, color-mix(in srgb, var(--accent2) 15%, transparent), transparent 72%),
        radial-gradient(520px 320px at 0% 100%, color-mix(in srgb, #4C7BD9 16%, transparent), transparent 70%),
        linear-gradient(150deg, var(--ink) 0%, var(--deep2) 100%) !important; }
.hero-home .lead { max-width: 54ch; }
/* լուծման նմուշ՝ երկու «թերթ» իրար վրա */
.hh-visual { position: relative; }
.hh-sol { z-index: 1; }
.hh-sol::before { content: ""; position: absolute; inset: 10px -10px -12px 10px; z-index: -1; background: color-mix(in srgb, #fff 14%, transparent); border: 1px solid rgba(255, 255, 255, .14); border-radius: inherit; transform: rotate(2.2deg); }
html[data-mode="dark"] .hh-sol::before { background: rgba(255, 255, 255, .05); }

/* անձնական վիճակագրություն՝ մեկ քարտ, բաժանված գծերով */
.my-stats { gap: 0; margin: 18px 0 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--card-shadow); overflow: hidden; }
.my-stats .ms-tile { background: none; border: 0; border-radius: 0; box-shadow: none; }
.my-stats .ms-tile + .ms-tile { border-left: 1px solid var(--border); }
.ms-ic { border-radius: 50%; }
.ms-tile b { font-family: var(--font-head); font-weight: 700; }

/* բաժինների վերնագրեր և քարտեր */
.section-head { margin: 46px 0 18px; }
.benefit { transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.benefit:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px color-mix(in srgb, var(--ink) 55%, transparent); }
.benefit .b-icon { border-radius: 50%; }
.benefit b { font-family: var(--font-head); font-size: 1.08rem; }
.lib-book { transition: border-color .2s, box-shadow .2s; }
.lib-book:hover { border-color: color-mix(in srgb, var(--accent2) 40%, var(--border)); }
.lib-book .book-icon { border-radius: 12px; }

/* թեստի հրավեր՝ մուգ գոտի, ինչպես վերևի բլոկը */
.test-cta { position: relative; isolation: isolate; overflow: hidden; margin: 44px 0; padding: 30px 34px; color: #fff; border: 0; border-radius: 22px;
    background:
        radial-gradient(420px 220px at 100% 0%, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 72%),
        linear-gradient(150deg, var(--ink) 0%, var(--deep2) 100%); box-shadow: 0 24px 50px -34px color-mix(in srgb, var(--ink) 85%, transparent); }
body:not(.admin) .test-cta h2 { font-size: 1.45rem; color: #fff; }
.test-cta p { color: rgba(236, 241, 248, .78); }
.tc-chips span { color: rgba(236, 241, 248, .72); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); box-shadow: none; }
.tc-chips b { color: #fff; }
html[data-mode="dark"] .test-cta { background: radial-gradient(420px 220px at 100% 0%, color-mix(in srgb, var(--accent2) 14%, transparent), transparent 72%), var(--surface); border: 1px solid var(--border); }

/* փաթեթներ */
.plan { transition: transform .2s var(--ease), box-shadow .2s; }
.plan:hover { transform: translateY(-3px); }
.plan.featured { box-shadow: 0 22px 44px -28px color-mix(in srgb, var(--accent2) 80%, transparent); }

@media (max-width: 760px) {
    .my-stats { grid-template-columns: 1fr 1fr; }
    .my-stats .ms-tile:nth-child(3) { border-left: 0; }
    .my-stats .ms-tile:nth-child(n+3) { border-top: 1px solid var(--border); }
    .test-cta { margin: 34px 0; padding: 24px 20px; }
    .hh-sol::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .benefit:hover, .plan:hover { transform: none; } }
/* մուտքի անիմացիան հանված է (տեքստը երևում է միանգամից) */
.hero-home .hh-text > *, .hero-home .hh-visual { animation: none !important; }
@media (max-width: 760px) {
    .my-stats .ms-tile { flex-direction: row; align-items: center; gap: 10px; padding: 12px; }
    .my-stats .ms-ic { width: 34px; height: 34px; }
    .my-stats .ms-tile b { font-size: 1.2rem; }
}