/* Кабинет Тест PRO — стили (разметка: app/index.html, код: cabinet.js). Цвета — токены :root; тема одна — светлая (владелец 13.10: «убрать тёмную тему»). */
/* Каркас: вход → смена одноразового пароля → кабинет (меню слева, на телефоне — снизу). Разделы пустые до PRO.md §5. */
:root { color-scheme:light; --bg:#F7F8F6; --surface:#fff; --ink:#1B2530; --ink-2:#556270; --ink-3:#8A949D; --line:#DDE2DF; --accent:#2C6E9E; --accent-ink:#fff; --accent-soft:#E3EEF6; --autumn:#B26B00; --autumn-bg:#FFF1DB; --winter:#2C6E9E; --winter-bg:#E3EEF6; --spring:#2F7D4F; --spring-bg:#E2F1E8; --summer:#9A7400; --summer-bg:#FFF5CC; --warn:#B26B00; --err:#B3261E; --ok:#2F7D4F; }
* { box-sizing:border-box; }
html, body { height:100%; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; -webkit-tap-highlight-color:transparent; overflow-wrap:anywhere; }
[hidden] { display:none !important; }
button { font:inherit; font-weight:600; border:0; border-radius:8px; padding:10px 14px; background:var(--accent); color:var(--accent-ink); cursor:pointer; }
button.ghost { background:transparent; color:var(--ink-2); border:1px solid var(--line); font-weight:500; padding:6px 12px; }
button:disabled { opacity:.5; cursor:default; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
input { font:inherit; padding:10px 11px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); width:100%; }
label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--ink-2); }
.err { color:var(--err); font-size:13px; min-height:1.2em; margin:0; }
.ok { color:var(--ok); font-size:13px; margin:0; }

/* Экраны входа: только колонка полей, без карточки и украшений */
.auth { min-height:100%; min-height:100dvh; display:flex; flex-direction:column; align-items:center; gap:24px;
        padding:max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.auth form { width:100%; max-width:320px; margin:auto 0; display:flex; flex-direction:column; gap:16px; }
.mark { font-weight:700; letter-spacing:.02em; color:var(--ink-3); font-size:13px; align-self:center; margin-bottom:8px; }
.auth h1 { font-size:24px; line-height:1.2; margin:0 0 4px; }
.field small { color:var(--ink-3); font-size:13px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field > span { font-size:13px; color:var(--ink-2); }
input::placeholder { color:var(--ink-3); opacity:1; }
.auth input, dialog input { height:48px; font-size:16px; background:var(--surface); }
.auth button[type=submit] { height:48px; font-size:16px; margin-top:4px; }
.pw { position:relative; }
.pw input { padding-right:48px; }
.eye { position:absolute; top:0; right:0; width:48px; height:100%; padding:0; background:transparent; color:var(--ink-3); border-radius:0 8px 8px 0; display:grid; place-items:center; }
.eye svg { width:20px; height:20px; }
.eye[aria-pressed="true"] { color:var(--ink); }
.link { background:transparent; color:var(--ink-3); font-weight:500; padding:0 16px; min-height:44px; align-self:center; font-size:14px; }
.langs { display:flex; gap:8px; }
.langs button { background:transparent; padding:0 8px; min-height:44px; font-size:13px; font-weight:500; color:var(--ink-3); }
.langs button[aria-pressed="true"] { color:var(--ink); }
.err:empty { display:none; }
/* Новый пароль: полоса надёжности + одна строка состояния (правило / уровень / Caps Lock) */
.meter { display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; margin-top:2px; }
.meter i { height:4px; border-radius:2px; background:var(--line); transition:background .15s; }
.meter { --c:var(--line); }
.meter[data-tone="err"] { --c:var(--err); } .meter[data-tone="warn"] { --c:var(--warn); } .meter[data-tone="ok"] { --c:var(--ok); }
.meter[data-l="1"] i:nth-child(-n+1), .meter[data-l="2"] i:nth-child(-n+2), .meter[data-l="3"] i:nth-child(-n+3), .meter[data-l="4"] i { background:var(--c); }
.status { font-size:13px; color:var(--ink-3); min-height:1.45em; }
.status[data-tone="err"] { color:var(--err); } .status[data-tone="warn"] { color:var(--warn); } .status[data-tone="ok"] { color:var(--ok); }
.caps { font-size:13px; color:var(--warn); }
.caps:empty { display:none; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.auth .lead { text-align:center; color:var(--ink-2); margin:0 0 4px; font-size:15px; text-wrap:balance; }
/* Адаптив входа: маленький телефон · альбомная ориентация · планшет и компьютер */
@media (max-width: 359px) { .auth h1 { font-size:22px; } .auth form { gap:14px; } }
@media (max-height: 560px) and (orientation: landscape) {
  .auth { gap:4px; padding-top:max(8px, env(safe-area-inset-top)); padding-bottom:max(4px, env(safe-area-inset-bottom)); }
  .auth form { gap:10px; } .auth h1 { font-size:20px; margin:0; }
  .auth input, .auth button[type=submit] { height:44px; }
  .mark { margin-bottom:0; } .auth .lead { font-size:14px; line-height:1.3; margin:0; }
  .auth button[type=submit] { margin-top:0; } .link, .langs button { min-height:36px; }
  .status { min-height:0; }
}
/* очень узкие (складные, 280 px) */
@media (max-width: 300px) { .auth { padding-left:12px; padding-right:12px; } .auth .lead { font-size:14px; } }
@media (min-width: 768px) and (min-height: 561px) { .auth form { max-width:360px; gap:18px; } .auth h1 { font-size:28px; } }

#app { --side:232px; height:100%; height:100dvh; display:grid; grid-template-columns:var(--side) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); transition:grid-template-columns .2s ease; }
#app.collapsed { --side:64px; }
header.top { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; border-bottom:1px solid var(--line); background:var(--surface);
            padding:max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); }
/* Шапка: название · язык (список) · профиль (иконка). Больше ничего. */
header.top .mark { margin:0 0 0 -8px; padding:0 8px; min-height:40px; display:inline-flex; align-items:center; border-radius:8px; font-size:14px; color:var(--ink); white-space:nowrap; text-decoration:none; }   /* название = путь в «Тесты» (на телефоне нижней панели нет) */
.tools { flex:none; }
.tools { display:flex; align-items:center; gap:4px; }
.lang-sel { font:inherit; font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--ink-2); background:transparent; border:0; border-radius:8px; height:40px; padding:0 24px 0 10px; cursor:pointer;
            appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A949D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat:no-repeat; background-position:right 6px center; background-size:16px; }
.lang-sel option { color:var(--ink); background:var(--surface); }
.tools-sep { width:1px; height:20px; background:var(--line); margin:0 4px; }
.icon-btn { width:40px; height:40px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; background:transparent; color:var(--ink-2); text-decoration:none; cursor:pointer; }
.icon-btn svg { width:22px; height:22px; }
.icon-btn[aria-current="page"] { background:var(--accent-soft); color:var(--ink); }
/* Профиль: страница настроек — без карточек; секции на общем фоне, разделены линией; заголовок слева, поля справа */
.profile { max-width:820px; container-type:inline-size; }   /* раскладка — по ширине самого профиля, а не экрана (меню сбоку съедает место) */
.who-row { display:flex; align-items:center; gap:16px; padding-bottom:28px; }
.avatar { width:56px; height:56px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:20px; letter-spacing:.02em; }
.who-row h2 { margin:0; font-size:22px; line-height:1.25; }
.who-meta { display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px; margin-top:4px; color:var(--ink-3); font-size:14px; }
.id-chip { display:inline-flex; align-items:center; gap:4px; color:var(--ink-2); font-weight:600; font-variant-numeric:tabular-nums; }
.id-chip button { width:36px; height:36px; padding:0; border:0; border-radius:8px; display:grid; place-items:center; background:transparent; color:var(--ink-3); }
.id-chip button svg { width:16px; height:16px; }
.id-chip button[data-done] { color:var(--ok); }
.sec { display:grid; grid-template-columns:200px minmax(0,1fr); gap:12px 32px; padding:28px 0; border-top:1px solid var(--line); }
.sec h3 { margin:0; font-size:15px; font-weight:600; }
.sec-body { display:flex; flex-direction:column; gap:16px; min-width:0; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pf .field > span { display:flex; gap:6px; align-items:baseline; font-size:13px; color:var(--ink-2); }
.pf .field > span i { font-style:normal; color:var(--ink-3); font-size:12px; }
.pf input { height:44px; background:var(--surface); }
.pf input[aria-invalid="true"] { border-color:var(--err); }
.ferr { color:var(--err); font-size:12px; }
.ferr:empty { display:none; }
.sec-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.sec-actions .err, .sec-actions .ok { margin-right:auto; }
.sec-actions button { min-height:44px; padding:0 20px; }
.pw-line { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; }
.pw-dots { letter-spacing:.2em; color:var(--ink-3); }
.pw-line button { min-height:44px; padding:0 16px; }
@container (max-width: 620px) { .sec { grid-template-columns:minmax(0,1fr); padding:24px 0; } }
@container (max-width: 440px) { .grid2 { grid-template-columns:minmax(0,1fr); } .sec-actions button { flex:1; } }
@media (max-width: 640px) {
  .who-row { gap:12px; padding-bottom:24px; } .avatar { width:48px; height:48px; font-size:17px; } .who-row h2 { font-size:20px; }
}
@media (hover: hover) { .id-chip button:hover { background:var(--bg); color:var(--ink); } }

nav.side { border-right:1px solid var(--line); background:var(--surface); padding:12px 8px max(12px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); display:flex; flex-direction:column; gap:2px; min-height:0; overflow-y:auto; }
nav.side a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; color:var(--ink-2); text-decoration:none; font-weight:500; }
nav.side a[aria-current="page"] { background:var(--accent-soft); color:var(--ink); font-weight:600; }
nav.side svg { width:18px; height:18px; flex:none; }
nav.side a span { white-space:nowrap; }
/* Свёрнутое меню: только иконки; название — во всплывающей подсказке и для экранного диктора */
#app.collapsed nav.side a { justify-content:center; padding:9px 0; }
#app.collapsed nav.side a span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.side-toggle { margin-top:auto; align-self:flex-end; width:40px; height:40px; padding:0; border:0; border-radius:8px; display:grid; place-items:center; background:transparent; color:var(--ink-3); cursor:pointer; }
.side-toggle svg { width:18px; height:18px; transition:transform .2s ease; }
#app.collapsed .side-toggle { align-self:center; }
#app.collapsed .side-toggle svg { transform:rotate(180deg); }
@media (hover: hover) {
  .lang-sel:hover, .icon-btn:hover, nav.side a:hover, header.top .mark:hover { background-color:var(--bg); }
  .side-toggle:hover { background:var(--bg); color:var(--ink); }
}
@media (prefers-reduced-motion: reduce) { #app, .side-toggle svg { transition:none; } }
main { overflow:auto; min-width:0; overscroll-behavior:contain; padding:24px max(24px, env(safe-area-inset-right), calc((100% - 1200px) / 2)) max(24px, env(safe-area-inset-bottom)); }
main h2 { margin:0 0 16px; font-size:22px; }
/* Заголовок раздела с фильтром справа; на узком — фильтр под заголовком во всю ширину */
.page-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px; margin:0 0 16px; }
.page-head h2 { margin:0; }
.select { font:inherit; font-size:15px; color:var(--ink); background-color:var(--surface); border:1px solid var(--line); border-radius:8px; height:44px;
          padding:0 40px 0 12px; min-width:0; width:min(100%, 360px); cursor:pointer; appearance:none; -webkit-appearance:none;
          background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A949D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
          background-repeat:no-repeat; background-position:right 12px center; background-size:18px; text-overflow:ellipsis; }
.select option { color:var(--ink); background:var(--surface); }
@media (max-width: 560px) { .page-head .select { width:100%; } }
/* Витрина сборников: 10 месяцев учебного года, у каждого — товар «сборник из 10 тестов» с ценой и покупкой */
#tests-list { container-type:inline-size; }
.store { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }   /* всегда ровно: 5×2 / 2×5 / колонка */
@container (min-width: 1040px) { .store { grid-template-columns:repeat(5, minmax(0, 1fr)); } }
.item { --c:var(--accent); --cb:var(--accent-soft); display:flex; flex-direction:column; gap:12px; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); min-width:0; transition:border-color .15s, box-shadow .15s; }
.item.autumn { --c:var(--autumn); --cb:var(--autumn-bg); } .item.winter { --c:var(--winter); --cb:var(--winter-bg); }
.item.spring { --c:var(--spring); --cb:var(--spring-bg); } .item.summer { --c:var(--summer); --cb:var(--summer-bg); }
.item.now { border-color:var(--c); box-shadow:inset 0 0 0 1px var(--c); }
@media (hover: hover) { .item:not(.soon):hover { box-shadow:0 8px 24px rgba(27,37,48,.07); } }
.item-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.item-ico { width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center; background:var(--cb); color:var(--c); }
.item-ico svg { width:20px; height:20px; }
.badge { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:999px; white-space:nowrap; }
.badge.new { background:var(--c); color:var(--surface); }
.item-txt { display:flex; flex-direction:column; gap:3px; min-width:0; }
.item h3 { margin:0; font-size:18px; line-height:1.2; letter-spacing:-.01em; }
.item .meta { margin:0; font-size:13px; line-height:1.4; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* одна строка — один смысл */
.item.bought .meta { color:var(--ink-2); } .item.bought .meta.lang { color:var(--ink-3); }
.item-buy { margin-top:auto; display:flex; flex-direction:column; gap:10px; }
.price { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.item.soon .price { color:var(--ink-3); font-weight:600; font-size:18px; }
.item-buy button { min-height:44px; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.item-buy .lock { width:15px; height:15px; flex:none; }
.item-buy button:disabled { background:var(--bg); color:var(--ink-3); border:1px solid var(--line); opacity:1; }
/* купленный сборник: «Сатып алынды», комбинация · язык, прогресс, кнопка следующего шага */
.badge.owned { display:inline-flex; align-items:center; gap:4px; background:var(--spring-bg); color:var(--ok); text-transform:none; letter-spacing:0; font-size:12px; }
.badge.owned svg { width:13px; height:13px; }
.combo-line { margin:4px 0 0; font-size:13px; color:var(--ink-2); font-weight:500; }
.progress { display:flex; flex-direction:column; gap:7px; }
.progress-row { display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.progress-row b { color:var(--ink); font-size:15px; }
.bar { height:6px; border-radius:3px; background:var(--bg); overflow:hidden; }
.bar i { display:block; height:100%; border-radius:3px; background:var(--c); }
.item.bought .item-buy button { background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.item.bought .item-buy button.go { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
@media (hover: hover) { .item.bought .item-buy button:not(.go):hover { border-color:var(--c); } }
/* узко — карточка строкой: иконка | текст; ниже прогресс; цена и кнопка в ряд */
@container (max-width: 520px) {
  .store { grid-template-columns:minmax(0, 1fr); gap:10px; }
  .item { display:grid; grid-template-columns:40px minmax(0, 1fr); grid-template-areas:"ico txt" "buy buy"; gap:12px; padding:14px 16px; }
  .item-top { grid-area:ico; } .item-top .badge { display:none; } .item-txt { grid-area:txt; align-self:center; }
  .item.bought { grid-template-areas:"ico txt" "prog prog" "buy buy"; }
  .item .progress { grid-area:prog; }
  .item.bought .item-buy button { flex:1; }
  .item-buy { grid-area:buy; flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }
  .item-buy button { width:auto; padding:0 20px; }
  .item-txt .badge { display:inline-block; margin-left:6px; vertical-align:2px; }
}
@container (min-width: 521px) { .item-txt .badge { display:none; } }
/* «Тесттер»: вкладки «Барлық тесттер» / «Менің тесттерім», витрина, мои тесты */
a.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 18px; border-radius:8px; background:var(--accent); color:var(--accent-ink); font-weight:600; text-decoration:none; white-space:nowrap; }
a.btn.ghost { background:var(--surface); color:var(--ink); border:1px solid var(--line); }
a.btn svg { width:15px; height:15px; }
.tabs { display:flex; gap:4px; margin:0 0 16px; border-bottom:1px solid var(--line); }
.tabs a { position:relative; padding:10px 14px; min-height:44px; display:inline-flex; align-items:center; color:var(--ink-2); font-weight:600; text-decoration:none; }
.tabs a[aria-current] { color:var(--ink); } .tabs a[aria-current]::after { content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; border-radius:2px; background:var(--accent); }
@media (hover: hover) { .tabs a:not([aria-current]):hover { color:var(--ink); } }
.shop-bar { display:flex; justify-content:flex-end; margin:0 0 14px; }
.shop-bar .select { width:min(100%, 360px); }
.order-wait { margin:0 0 12px; padding:10px 14px; border-radius:10px; background:var(--autumn-bg); color:var(--autumn); font-size:14px; font-weight:600; }
.empty-box { display:flex; flex-direction:column; align-items:center; gap:12px; padding:40px 16px; border:1px dashed var(--line); border-radius:16px; text-align:center; color:var(--ink-2); }
.empty-box p { margin:0; } .empty-box.ok { border-style:solid; }
.item-buy a.btn { width:100%; } .item.bought .item-buy button.ghost { background:var(--surface); color:var(--ink); border:1px solid var(--line); }
/* страница сборника */
.back { display:inline-flex; align-items:center; gap:4px; min-height:40px; padding:0 12px 0 6px; margin:0 0 8px -6px; border:0; border-radius:8px; background:transparent; color:var(--ink-2); font-weight:500; }
.back svg { width:18px; height:18px; }
@media (hover: hover) { .back:hover { background:var(--bg); color:var(--ink); } }
.coll-head { display:flex; align-items:center; gap:14px; margin:0 0 20px; }
.coll-head.autumn { --c:var(--autumn); --cb:var(--autumn-bg); } .coll-head.winter { --c:var(--winter); --cb:var(--winter-bg); }
.coll-head.spring { --c:var(--spring); --cb:var(--spring-bg); } .coll-head.summer { --c:var(--summer); --cb:var(--summer-bg); }
.coll-head .item-ico { width:48px; height:48px; background:var(--cb); color:var(--c); }
.coll-head h2 { margin:0; outline:none; }
/* сводка сборника и список вариантов — строки, не карточки */
.coll-top { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 32px; margin:0 0 20px; }   /* заголовок слева, сводка справа; узко — сводка под заголовком */
.coll-top .coll-head { margin:0; }
.coll-stats { display:flex; flex-wrap:wrap; gap:8px 28px; }
.coll-stats div { display:flex; flex-direction:column; gap:2px; }
.coll-stats span { font-size:12px; color:var(--ink-3); }
.coll-stats b { font-size:20px; font-variant-numeric:tabular-nums; }
.tests { list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; container-type:inline-size; }
.test { display:grid; grid-template-columns:40px minmax(0, 1fr) auto auto; align-items:center; gap:4px 16px; padding:14px 16px; }
.test + .test { border-top:1px solid var(--line); }
.test .n { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; background:var(--bg); color:var(--ink-2); }
.test.done .n { background:var(--spring-bg); color:var(--ok); }
.test.done .n svg { width:16px; height:16px; }
.test.going .n { background:var(--accent-soft); color:var(--accent); }
.test.restart .n { background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn); }
.test.locked .n { color:var(--ink-3); } .test.locked .n svg { width:16px; height:16px; } .test.locked .test-main b { color:var(--ink-3); }
.test-act button:disabled { opacity:.45; cursor:not-allowed; }
.test-main { min-width:0; }
.test-main b { display:block; font-size:15px; font-weight:600; }
.test-main span { font-size:13px; color:var(--ink-3); }
.test-main .bar { margin-top:8px; max-width:420px; --c:var(--accent); }
.score { display:flex; align-items:baseline; gap:6px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.score b { font-size:18px; } .score span { font-size:13px; color:var(--ink-3); }
.score i { width:8px; height:8px; border-radius:50%; align-self:center; background:var(--z); }
.test-act button { min-height:40px; min-width:148px; padding:0 16px; white-space:nowrap; }   /* одна ширина — ровный правый столбец */
.test-act button.ghost { background:var(--surface); color:var(--ink); border:1px solid var(--line); font-weight:600; padding:0 16px; }
@media (hover: hover) { .test:hover { background:color-mix(in srgb, var(--bg) 60%, transparent); } .test-act button.ghost:hover { border-color:var(--accent); } }
@container (max-width: 560px) {   /* телефон: кнопка справа в строке, балл под названием */
  .test { grid-template-columns:36px minmax(0, 1fr) auto; grid-template-areas:"n main act"; gap:4px 12px; padding:12px 14px; }
  .test.done { grid-template-areas:"n main act" "n score act"; }
  .test .n { grid-area:n; align-self:start; } .test-main { grid-area:main; } .score { grid-area:score; } .test-act { grid-area:act; }
  .test > span:empty { display:none; }
  .score b { font-size:16px; }
  .test-act button { min-width:0; min-height:44px; padding:0 14px; }
}
@container (max-width: 340px) {   /* самые узкие: кнопка под текстом во всю ширину */
  .test, .test.done { grid-template-columns:36px minmax(0, 1fr); grid-template-areas:"n main" "n score" "n act"; }
  .test:not(.done) { grid-template-areas:"n main" "n act"; }
  .test-act button { width:100%; }
}
/* окно покупки */
dialog.buy { border:1px solid var(--line); border-radius:18px; padding:0; background:var(--surface); color:var(--ink); width:min(520px, calc(100% - 32px)); max-height:calc(100dvh - 32px); }
dialog.buy::backdrop { background:rgba(10,15,20,.45); }
dialog.buy form { padding:24px; display:flex; flex-direction:column; gap:18px; }
.buy-head { display:flex; align-items:center; gap:12px; }
.buy-head > div:nth-child(2) { flex:1; min-width:0; }
.buy-head h2 { margin:0; font-size:20px; line-height:1.2; } .buy-head p { margin:3px 0 0; font-size:13px; color:var(--ink-3); }
.buy-x { flex:none; width:40px; height:40px; min-height:0; padding:0; border-radius:10px; background:transparent; color:var(--ink-3); border:0; display:grid; place-items:center; }
.buy-x svg { width:18px; height:18px; } @media (hover:hover) { .buy-x:hover { background:var(--bg); color:var(--ink); } }
.buy-facts { margin:0; display:grid; grid-template-columns:repeat(3, 1fr); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.buy-facts div { padding:12px 8px; text-align:center; border-right:1px solid var(--line); } .buy-facts div:last-child { border-right:0; }
.buy-facts dd { margin:0; font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; } .buy-facts dt { font-size:12px; color:var(--ink-3); margin-top:2px; }
.buy-lang { border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; min-width:0; }
.buy-lang legend { padding:0; margin-bottom:8px; font-size:13px; font-weight:600; color:var(--ink-2); }
.seg { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
dialog.buy .field, dialog.buy .select { width:100%; max-width:none; }
dialog.buy .seg label { display:flex; flex-direction:row; justify-content:flex-start; text-align:left; color:var(--ink); align-items:center; gap:10px; min-height:48px; padding:0 14px; border:1px solid var(--line); border-radius:12px; cursor:pointer; font-size:15px; font-weight:600; }
dialog.buy .seg input { flex:none; accent-color:var(--accent); width:18px; height:18px; margin:0; }
.seg label:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.seg label:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.buy-total { display:flex; justify-content:space-between; align-items:baseline; padding-top:16px; border-top:1px solid var(--line); }
.buy-total span { font-size:14px; color:var(--ink-2); } .buy-total b { font-size:26px; font-variant-numeric:tabular-nums; }
.buy-actions { display:grid; grid-template-columns:1fr 2fr; gap:10px; }
.buy-actions button { min-height:50px; }
@media (max-width:420px) { .buy-actions { grid-template-columns:1fr; } .buy-actions #buy-pay { order:-1; } dialog.buy form { padding:18px; gap:16px; } }
.buy-note { font-size:13px; color:var(--ink-3); text-align:center; min-height:1.3em; margin:-6px 0 0; }
.empty { border:1px dashed var(--line); border-radius:12px; padding:40px 16px; text-align:center; color:var(--ink-3); background:var(--surface); }

dialog { max-height:calc(100dvh - 32px); overflow:auto; }
dialog.expired { border:1px solid var(--line); border-radius:12px; padding:0; background:var(--surface); color:var(--ink); width:min(420px, calc(100% - 32px)); }
dialog.expired::backdrop { background:rgba(10,15,20,.55); }
dialog.expired form { padding:24px; display:flex; flex-direction:column; gap:14px; }
dialog.expired h1 { font-size:18px; margin:0; }
dialog.expired .actions, dialog.confirm .actions { display:flex; gap:8px; justify-content:flex-end; }
dialog.confirm { border:1px solid var(--line); border-radius:12px; padding:0; background:var(--surface); color:var(--ink); width:min(320px, calc(100% - 32px)); }
dialog.confirm::backdrop { background:rgba(10,15,20,.45); }
dialog.confirm form { padding:20px; display:flex; flex-direction:column; gap:20px; }
dialog.confirm p { margin:0; font-size:16px; font-weight:600; }
dialog.confirm button { min-height:44px; flex:1; }

@media (max-width: 760px) {
  #app { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; }
  header.top { padding:8px 12px; }
  nav.side { grid-row:3; flex-direction:row; justify-content:space-around; border-right:0; border-top:1px solid var(--line); gap:0; overflow:visible;
             padding:4px max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); }
  nav.side a { flex-direction:column; justify-content:center; gap:2px; padding:6px 2px; min-height:52px; font-size:11px; flex:1 1 0; min-width:0; text-align:center; }
  nav.side a span { max-width:100%; white-space:normal; line-height:1.15; overflow-wrap:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }   /* перенос только по пробелу, до двух строк */
  .side-toggle { display:none; }
  nav.side:has(> a:only-of-type) { display:none; }   /* один раздел — нижняя панель не нужна */
  #app.collapsed nav.side a { flex-direction:column; padding:6px 2px; }
  #app.collapsed nav.side a span { position:static; width:auto; height:auto; clip:auto; }
  main { padding:16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)); }
  main h2 { font-size:20px; }
}
@media (max-width: 340px) {   /* 280–340 px: шапка плотнее */
  header.top { gap:8px; padding-left:max(12px, env(safe-area-inset-left)); padding-right:max(8px, env(safe-area-inset-right)); }
  .tools { gap:0; } .tools-sep { margin:0 2px; } nav.side a { font-size:10px; padding:6px 0; } nav.side { padding-left:2px; padding-right:2px; }
}
/* Телефон в альбомной (любая ширина): полоса иконок слева вместо меню 232 px или нижней панели — высота экрана дороже */
@media (orientation: landscape) and (max-height: 500px) {
  #app, #app.collapsed { --side:64px; grid-template-columns:var(--side) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
  nav.side { grid-row:auto; flex-direction:column; justify-content:flex-start; gap:2px; overflow-y:auto; border-top:0; border-right:1px solid var(--line);
             padding:8px 8px max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  nav.side a, #app.collapsed nav.side a { flex:none; flex-direction:row; justify-content:center; padding:0; min-height:44px; font-size:inherit; }
  nav.side a span, #app.collapsed nav.side a span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .side-toggle { display:none; }
  header.top { padding-top:max(6px, env(safe-area-inset-top)); padding-bottom:6px; }
  main { padding:16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  /* один раздел — полосы нет, содержимое на всю ширину (иначе оно уезжает в пустую колонку 64 px) */
  nav.side:has(> a:only-of-type) { display:none; }
  #app:has(> nav.side > a:only-of-type), #app.collapsed:has(> nav.side > a:only-of-type) { grid-template-columns:minmax(0,1fr); }
}

/* Техподдержка: круглая кнопка в углу и окно чата. Компьютер — карточка над кнопкой; телефон — на весь экран. */
.help-fab { position:fixed; right:max(20px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom)); z-index:20; width:56px; height:56px; padding:0; border-radius:50%;
            display:grid; place-items:center; box-shadow:0 6px 20px rgba(16,30,45,.22); transition:transform .15s ease; }
.help-fab svg { width:26px; height:26px; }
.help-fab[aria-expanded="true"] { transform:scale(.92); }
.help-dot { position:absolute; top:3px; right:3px; width:12px; height:12px; border-radius:50%; background:var(--err); border:2px solid var(--surface); }
.help { position:fixed; right:max(20px, env(safe-area-inset-right)); bottom:calc(max(20px, env(safe-area-inset-bottom)) + 68px); z-index:21; width:380px; height:min(580px, calc(100dvh - 120px));
        display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 16px 48px rgba(16,30,45,.22); overflow:hidden; }
.help-head { display:flex; align-items:center; gap:12px; padding:14px 10px 14px 16px; border-bottom:1px solid var(--line); }
.help-head > div { flex:1; min-width:0; }
.help-head h2 { margin:0; font-size:16px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.help-head p { margin:2px 0 0; font-size:12px; color:var(--ink-3); display:flex; align-items:center; gap:6px; }
.help-on { width:7px; height:7px; border-radius:50%; background:var(--ok); }
.help-ava { width:38px; height:38px; flex:none; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; }
.help-ava svg { width:20px; height:20px; }
.help-x { width:40px; height:40px; padding:0; flex:none; background:transparent; color:var(--ink-3); display:grid; place-items:center; }
.help-x svg { width:20px; height:20px; }
.help-log { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:16px; display:flex; flex-direction:column; gap:8px; background:var(--bg); }
.msg { max-width:85%; display:flex; flex-direction:column; gap:2px; }
.msg p { margin:0; padding:9px 13px; border-radius:16px; white-space:pre-wrap; font-size:14.5px; line-height:1.4; }
.msg time { font-size:11px; color:var(--ink-3); padding:0 6px; }
.msg.them { align-self:flex-start; }
.msg.them p { background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:6px; }
.msg.me { align-self:flex-end; align-items:flex-end; }
.msg.me p { background:var(--accent); color:var(--accent-ink); border-bottom-right-radius:6px; }
.typing p { display:flex; gap:4px; padding:13px 14px; }
.typing i { width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:help-dot 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay:.15s; } .typing i:nth-child(3) { animation-delay:.3s; }
@keyframes help-dot { 0%, 60%, 100% { opacity:.3; transform:none; } 30% { opacity:1; transform:translateY(-3px); } }
.help-err { padding:6px 16px 0; }
.help-form { display:flex; align-items:flex-end; gap:8px; padding:10px 10px max(10px, env(safe-area-inset-bottom)) 14px; border-top:1px solid var(--line); background:var(--surface); }
.help-form textarea { flex:1; min-width:0; resize:none; font:inherit; font-size:16px; line-height:1.35; padding:10px 12px; max-height:120px; border:1px solid var(--line); border-radius:20px; background:var(--bg); color:var(--ink); }
.help-form textarea::placeholder { color:var(--ink-3); }
.help-form button { width:42px; height:42px; flex:none; padding:0; border-radius:50%; display:grid; place-items:center; }
.help-form button svg { width:20px; height:20px; }
@media (hover: hover) { .help-x:hover { background:var(--bg); color:var(--ink); } .help-fab:hover { transform:translateY(-1px); } }
@media (prefers-reduced-motion: reduce) { .help-fab, .typing i { transition:none; animation:none; } }
/* телефон: кнопка над нижней панелью меню; чат — на весь экран, кнопка под ним не нужна */
@media (max-width: 760px) {
  .help-fab { right:max(16px, env(safe-area-inset-right)); bottom:calc(max(16px, env(safe-area-inset-bottom)) + 4px); width:52px; height:52px; }
  #app:has(> nav.side > a:nth-of-type(2)) .help-fab { bottom:calc(max(4px, env(safe-area-inset-bottom)) + 72px); }
  .help { inset:0; width:auto; height:auto; border-radius:0; border:0; padding-top:env(safe-area-inset-top); }
  #app.help-open .help-fab { display:none; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .help { inset:0; width:auto; height:auto; border-radius:0; border:0; }
  #app.help-open .help-fab { display:none; }
}
#view::after { content:""; display:block; height:64px; }   /* место под кнопкой поддержки: она не закрывает последние кнопки страницы */

/* Адаптивность (13.10): узкие телефоны, планшеты, альбомная, сенсорные экраны */
.combo-line.lang { margin-top:2px; color:var(--ink-3); }
.tabs a { white-space:nowrap; }
@media (max-width: 380px) {
  .tabs { gap:0; } .tabs a { flex:1 1 0; justify-content:center; padding:10px 6px; font-size:14px; }
  .tabs a[aria-current]::after { left:6px; right:6px; }
  dialog.buy .seg { grid-template-columns:1fr; }   /* язык теста — строками, без переноса подписи */
}
@media (pointer: coarse) { .id-chip button { width:44px; height:44px; } }
/* планшет: один раздел — боковое меню 232 px не нужно, содержимое на всю ширину */
@media (min-width: 761px) and (max-width: 1024px) {
  nav.side:has(> a:only-of-type) { display:none; }
  #app:has(> nav.side > a:only-of-type), #app.collapsed:has(> nav.side > a:only-of-type) { grid-template-columns:minmax(0,1fr); }
}
/* телефон в альбомной: окно покупки в две колонки — всё видно без прокрутки */
@media (orientation: landscape) and (max-height: 500px) {
  dialog.buy { width:min(720px, calc(100% - 24px)); max-height:calc(100dvh - 16px); }
  dialog.buy form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 20px; padding:16px 20px; align-content:start; }
  dialog.buy .buy-head, dialog.buy .buy-facts { grid-column:1; }
  dialog.buy form > .field, dialog.buy .buy-lang, dialog.buy .buy-total, dialog.buy .buy-actions, dialog.buy .buy-note { grid-column:2; }
  dialog.buy .buy-head { grid-row:1; } dialog.buy .buy-facts { grid-row:2 / span 3; align-self:start; }
  dialog.buy form > .field { grid-row:1; } dialog.buy .buy-lang { grid-row:2; } dialog.buy .buy-total { grid-row:3; } dialog.buy .buy-actions { grid-row:4; } dialog.buy .buy-note { grid-row:5; }
  .help-fab { width:48px; height:48px; bottom:max(12px, env(safe-area-inset-bottom)); right:max(12px, env(safe-area-inset-right)); }
}
.nw { white-space:nowrap; }
button, .seg label, .tabs a { overflow-wrap:normal; }   /* подпись кнопки не рвётся посреди слова (у body — anywhere для длинных строк) */
@media (orientation: landscape) and (max-height: 500px) {
  dialog.buy form { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
  dialog.buy .seg label, dialog.buy .buy-actions button { white-space:nowrap; }
}