/* Общая оболочка сайта (см. app.js): нижнее меню, «Ещё», «Дальше» внизу, панель сессии, подсказка клавиш.
   Светлая тема — здесь же (tools/theme_light.py этот файл не трогает). */
:root{--ap-bg:#18151A;--ap-panel:#1d191f;--ap-line:rgba(255,255,255,.08);--ap-fg:#f7edef;--ap-mu:rgba(247,237,239,.62);--ap-acc:#ff3b46;--ap-ok:#4cd187;--ap-bad:#ff5a64}
html[data-theme="light"]{--ap-bg:#ffffff;--ap-panel:#ffffff;--ap-line:rgba(30,15,20,.1);--ap-fg:#1f1a1c;--ap-mu:rgba(31,26,28,.62);--ap-acc:#e0101d;--ap-ok:#16924d;--ap-bad:#d4202c}

/* ---------- нижнее меню (телефон) ---------- */
.app-tabbar{display:none}
@media (max-width:720px){
  .app-tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:var(--ap-bg);border-top:1px solid var(--ap-line)}
  .app-tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:6px 0 4px;border-radius:12px;text-decoration:none;color:var(--ap-mu);font:700 11px/1.15 var(--f-body,system-ui,sans-serif);-webkit-tap-highlight-color:transparent}
  .app-tabbar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .app-tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;flex:none}
  .app-tabbar a.on{color:var(--ap-fg)}.app-tabbar a.on svg{stroke:var(--ap-acc)}
  .app-tabbar a.tb-cab.on svg{fill:var(--ap-acc)}
  .app-tabbar a:focus-visible{outline:2px solid var(--ap-acc)}
  .app-tabbar a:active{transform:scale(.96)}
  .app-tabbar .tb-go{color:var(--ap-fg);padding-top:0}
  .app-tabbar .tb-go-c{width:52px;height:52px;margin-top:-22px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#ff6a73,var(--ap-acc));box-shadow:0 6px 18px rgba(255,59,70,.45),0 0 0 4px var(--ap-bg)}
  .app-tabbar .tb-go-c svg{width:24px;height:24px;fill:#fff;stroke:#fff;stroke-width:1.2;margin-left:3px}
  .app-tabbar .tb-go.on svg{stroke:#fff}
  body.has-tabbar{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
  body.has-tabbar .toast,body.has-tabbar #toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))!important}
  body.has-tabbar .ck{bottom:calc(86px + env(safe-area-inset-bottom,0px))!important}
  body.has-tabbar .th-float{bottom:calc(92px + env(safe-area-inset-bottom,0px))!important}
  body.has-tabbar.has-next .th-float{bottom:calc(158px + env(safe-area-inset-bottom,0px))!important}
  body.lesson .app-tabbar,body.sheet-open .app-tabbar{display:none}
}

/* ---------- «Дальше» внизу экрана (телефон) ---------- */
.app-next{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:39;min-height:52px;border:0;border-radius:999px;background:var(--ap-acc);color:#fff;font:800 16px/1.2 var(--f-body,system-ui,sans-serif);box-shadow:0 0 0 12px var(--ap-bg),0 -12px 0 12px var(--ap-bg),0 -14px 0 12px var(--ap-line);cursor:pointer;animation:apUp .22s cubic-bezier(.23,1,.32,1)}
.app-next[hidden]{display:none}
body.has-tabbar .app-next{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
body.has-next{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))!important}
.app-next:active{transform:scale(.98)}
@keyframes apUp{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}

/* ---------- крупные варианты ответа на телефоне ---------- */
@media (max-width:720px){
  .opts .opt,#opts .opt,.qz-opts .opt,#p-opts .opt{min-height:54px;padding-top:14px;padding-bottom:14px}
  #items .it{min-height:54px}
}

/* ---------- «потяни, чтобы обновить» (установленное приложение) ---------- */
.app-pull{position:fixed;left:50%;top:calc(8px + env(safe-area-inset-top,0px));z-index:60;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--ap-panel);color:var(--ap-fg);font:700 13px/1.2 var(--f-body,system-ui,sans-serif);box-shadow:0 6px 20px rgba(0,0,0,.3);transform:translate(-50%,0);opacity:0;pointer-events:none}
.app-pull i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ap-mu);border-top-color:var(--ap-acc)}
.app-pull.ready i{border-color:var(--ap-acc)}

/* ---------- меню «Ещё» ---------- */
.app-sheet{position:fixed;inset:0;z-index:70}
.app-sheet[hidden]{display:none}
.ms-bg{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .2s ease}
.ms-p{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;overscroll-behavior:contain;padding:8px 16px calc(18px + env(safe-area-inset-bottom,0px));border-radius:26px 26px 0 0;background:var(--ap-panel);color:var(--ap-fg);font-family:var(--f-body,system-ui,sans-serif);transform:translateY(100%);transition:transform .26s cubic-bezier(.23,1,.32,1)}
@media (min-width:721px){.ms-p{left:50%;right:auto;bottom:50%;width:min(560px,calc(100vw - 32px));border-radius:26px;transform:translate(-50%,60%);opacity:0;transition:transform .26s cubic-bezier(.23,1,.32,1),opacity .2s ease}}
.app-sheet.on .ms-bg{opacity:1}.app-sheet.on .ms-p{transform:none}
@media (min-width:721px){.app-sheet.on .ms-p{transform:translate(-50%,50%);opacity:1}}
.ms-grip{width:40px;height:5px;border-radius:3px;background:var(--ap-line);margin:4px auto 8px}
.ms-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ms-h b{font:700 20px/1.2 var(--f-display,var(--f-body,system-ui))}
.ms-x{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:var(--ap-line);color:var(--ap-fg)}
.ms-x:focus-visible{outline:2px solid var(--ap-acc)}
.ms-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ms-i{display:flex;flex-direction:column;gap:2px;min-width:0;padding:12px;border-radius:16px;background:var(--ap-line);color:inherit;text-decoration:none}
.ms-i b{font-size:14px;line-height:1.25}
.ms-i span{font-size:12px;line-height:1.3;color:var(--ap-mu)}
.ms-i:active{transform:scale(.98)}
.ms-set{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.ms-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:16px;background:var(--ap-line);cursor:pointer}
.ms-row[hidden]{display:none}
.ms-row span{display:flex;flex-direction:column;min-width:0}
.ms-row b{font-size:14px}.ms-row small{font-size:12px;color:var(--ap-mu);line-height:1.3}
.ms-row input{flex:none;width:44px;height:26px;margin:0;accent-color:var(--ap-acc);cursor:pointer}
.ms-btn{flex:none;border:0;border-radius:999px;padding:9px 14px;background:var(--ap-acc);color:#fff;font:800 13px/1 var(--f-body,system-ui);cursor:pointer}
body.sheet-open{overflow:hidden}

/* ---------- панель сессии справа (компьютер) ---------- */
.app-side{display:none}
@media (min-width:1200px){
  body.has-side{padding-right:300px!important}
  .app-side{display:flex;flex-direction:column;gap:14px;position:fixed;right:16px;top:96px;bottom:16px;width:268px;z-index:30;overflow:auto;padding:16px;border-radius:24px;background:var(--ap-panel);box-shadow:inset 0 0 0 1px var(--ap-line),0 10px 30px rgba(0,0,0,.25);color:var(--ap-fg);font-family:var(--f-body,system-ui,sans-serif)}
  .app-side[hidden]{display:none}
}
.as-h{display:flex;align-items:center;justify-content:space-between}
.as-h b{font-size:15px}
.as-x{all:unset;cursor:pointer;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--ap-mu);font-size:18px}
.as-x:hover{background:var(--ap-line)}
.as-score{display:flex;flex-direction:column;gap:2px}
.as-big{font:700 34px/1 var(--f-display,var(--f-body,system-ui));font-variant-numeric:tabular-nums}
.as-big small{font-size:15px;color:var(--ap-mu);font-weight:600}
.as-sub{font-size:13px;color:var(--ap-mu)}
.as-bar{height:8px;border-radius:4px;background:var(--ap-line);overflow:hidden}
.as-bar i{display:block;height:100%;border-radius:4px;background:var(--ap-ok);transition:width .3s ease}
.as-sec{display:flex;flex-direction:column;gap:6px}
.as-l{font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--ap-mu)}
.as-sec p{margin:0;font-size:13.5px;line-height:1.45}
.as-none{color:var(--ap-mu)}
.as-miss{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.as-miss li{display:flex;flex-direction:column;gap:3px;padding:9px 10px;border-radius:12px;background:var(--ap-line);font-size:13px;line-height:1.35}
.as-miss li span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.as-miss li b{color:var(--ap-ok);font-size:12.5px}

/* ---------- подсказка клавиш (компьютер) ---------- */
.app-keys{display:none}
@media (min-width:1200px){
  .app-keys{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:31;display:flex;align-items:center;gap:14px;padding:6px 8px 6px 14px;border-radius:999px;background:var(--ap-panel);box-shadow:inset 0 0 0 1px var(--ap-line),0 6px 18px rgba(0,0,0,.25);color:var(--ap-mu);font:600 12.5px/1 var(--f-body,system-ui,sans-serif)}
  .app-keys[hidden]{display:none}
  .app-keys kbd{display:inline-block;min-width:18px;padding:3px 5px;border-radius:6px;background:var(--ap-line);color:var(--ap-fg);font:700 11.5px/1 var(--f-body,system-ui);text-align:center}
  .app-keys button{all:unset;cursor:pointer;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:15px}
  .app-keys button:hover{background:var(--ap-line)}
  body:has(.app-keys:not([hidden])){padding-bottom:56px}
}
@media (prefers-reduced-motion:reduce){.app-next,.ms-p,.ms-bg{animation:none;transition:none}}

/* ---------- единый стиль Liquid Glass для карточек на всех страницах (как плитки главной) ---------- */
.glass:not(.nav){border:0!important;border-radius:28px;background:linear-gradient(160deg,rgba(255,236,240,.09),rgba(255,236,240,.05) 55%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,220,225,.13);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
html[data-theme="light"] .glass:not(.nav){background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(255,255,255,.5) 55%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(41,20,23,.1),0 6px 20px rgba(60,20,30,.06)}
/* «Смотри и подписывайся» */
.soc .soc-a{background:linear-gradient(160deg,rgba(255,236,240,.1),rgba(255,236,240,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,220,225,.12);border-radius:20px;font-weight:700}
.soc .soc-a:hover{background:linear-gradient(160deg,rgba(255,236,240,.16),rgba(255,236,240,.07))}
html[data-theme="light"] .soc .soc-a{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(41,20,23,.1)}
/* внутренние плитки (выбор экзамена, питомцы, игры) — тоже стекло, а не глухой тёмный фон */
:root:not([data-theme="light"]){--glass:rgba(255,236,240,.075)}
:root:not([data-theme="light"]){--glass-strong:rgba(255,236,240,.1);--surface-2:rgba(255,236,240,.055)}
:root:not([data-theme="light"]) .toast,:root:not([data-theme="light"]) #toast{background:rgba(42,38,44,.97)}
:root:not([data-theme="light"]) :is(.game,.word,.topbar,.prize,.seg,.exam:not(.on)){background:linear-gradient(160deg,rgba(255,236,240,.085),rgba(255,236,240,.04) 60%);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,220,225,.11);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}