/* ==========================================================================
   SkyySchool — дизайн-система
   Небо как метафора: светлый воздух, мягкие облака, тёплые акценты.
   Каждый модуль имеет свой цвет, чтобы разделы различались с одного взгляда.
   ========================================================================== */

/* ---------- палитра ---------- */
:root{
  color-scheme: light;

  /* небо */
  --sky-50:#f2f8ff;  --sky-100:#e3f0ff; --sky-200:#c7e2ff;
  --sky-300:#9bccff; --sky-400:#63aeff; --sky-500:#2f8dfa;
  --sky-600:#1a6fd8; --sky-700:#1557a8;

  /* поверхности */
  --bg:#f6faff;
  --bg-2:#eef5ff;
  --panel:#ffffff;
  --panel-2:#f7fbff;
  --line:#dbe8f7;
  --line-2:#c6dcf2;

  /* текст */
  --ink:#0e1b2e;
  --ink-2:#26384f;
  --muted:#6b7f97;
  --faint:#93a5bb;

  /* смысловые */
  --accent:var(--sky-500);
  --accent-ink:#ffffff;
  /* марки графиков (analytics.html): проверено валидатором палитры
     против поверхности панели — светлая и тёмная тема отдельно */
  --chart:#2f8dfa;
  --ok:#16a34a;      --ok-soft:#e7f8ed;
  --no:#e11d48;      --no-soft:#ffeef2;
  --warn:#d97706;    --warn-soft:#fff5e6;

  /* цвета модулей — по ним разделы узнаются мгновенно */
  --m-learn:#2f8dfa;   --m-learn-soft:#e6f1ff;
  --m-kids:#ff7a3d;    --m-kids-soft:#fff0e8;
  --m-chess:#8b5cf6;   --m-chess-soft:#f2ecff;
  --m-life:#12b981;    --m-life-soft:#e4f8f1;
  --m-teach:#f43f5e;   --m-teach-soft:#ffecf0;
  --m-plan:#0ea5b7;    --m-plan-soft:#e3f7f9;
  --m-tools:#b45309;   --m-tools-soft:#fdf1e2;
  --m-class:#ca8a04;   --m-class-soft:#fdf6e0;
  --m-dean:#475569;    --m-dean-soft:#eef1f5;
  --m-pe:#65a30d;      --m-pe-soft:#f1f9e2;
  --m-psy:#0d9488;     --m-psy-soft:#e6f7f5;
  --m-track:#4f46e5;   --m-track-soft:#ecebfd;
  --m-body:#be185d;    --m-body-soft:#fdeaf2;

  /* доска */
  --board-light:#eaf2fc; --board-dark:#a9c3e0;

  /* форма */
  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:30px;
  --shadow-sm:0 1px 2px rgba(16,40,73,.06), 0 1px 3px rgba(16,40,73,.05);
  --shadow:0 4px 14px rgba(16,40,73,.07), 0 1px 3px rgba(16,40,73,.05);
  --shadow-lg:0 18px 40px rgba(16,40,73,.12), 0 4px 12px rgba(16,40,73,.06);
  --shadow-pop:0 10px 30px rgba(47,141,250,.28);

  --wrap:1120px;
  --header-h:66px;
}

:root[data-theme="dark"]{
  color-scheme: dark;

  --bg:#080f1c;
  --bg-2:#0c1524;
  --panel:#111c2f;
  --panel-2:#16233a;
  --line:#22344f;
  --line-2:#2d4364;

  --ink:#eef5ff;
  --ink-2:#c8d8ec;
  --muted:#8ba1bd;
  --faint:#63799a;

  --accent:#5ba7ff;
  --chart:#3f93f0;
  --accent-ink:#04162c;
  --ok:#34d399;      --ok-soft:#0e2b23;
  --no:#fb7185;      --no-soft:#331420;
  --warn:#fbbf24;    --warn-soft:#302209;

  --m-learn:#5ba7ff;  --m-learn-soft:#11253f;
  --m-kids:#ff9a63;   --m-kids-soft:#33200f;
  --m-chess:#a78bfa;  --m-chess-soft:#231a3c;
  --m-life:#34d399;   --m-life-soft:#0d2b24;
  --m-teach:#fb7185;  --m-teach-soft:#331520;
  --m-plan:#22d3ee;   --m-plan-soft:#0c2a31;
  --m-tools:#f0a94e;  --m-tools-soft:#33230f;
  --m-class:#eab308;  --m-class-soft:#332705;
  --m-dean:#94a3b8;   --m-dean-soft:#1e2733;
  --m-pe:#a3e635;     --m-pe-soft:#263305;
  --m-psy:#2dd4bf;    --m-psy-soft:#0b2e2b;
  --m-track:#818cf8;  --m-track-soft:#1b1b42;
  --m-body:#f472b6;   --m-body-soft:#3a1024;

  --board-light:#a9adcd; --board-dark:#6c7199;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:0 18px 44px rgba(0,0,0,.5);
  --shadow-pop:0 10px 30px rgba(91,167,255,.22);
}


/* Скрипт проставляет data-theme после загрузки, а до этого документ
   ничем не помечен. Без этого блока зритель с тёмной системой видит
   вспышку светлой темы. Условие :not([data-theme="light"]) нужно,
   чтобы явно выбранная светлая тема побеждала настройку системы. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  color-scheme: dark;

  --bg:#080f1c;
  --bg-2:#0c1524;
  --panel:#111c2f;
  --panel-2:#16233a;
  --line:#22344f;
  --line-2:#2d4364;

  --ink:#eef5ff;
  --ink-2:#c8d8ec;
  --muted:#8ba1bd;
  --faint:#63799a;

  --accent:#5ba7ff;
  --chart:#3f93f0;
  --accent-ink:#04162c;
  --ok:#34d399;      --ok-soft:#0e2b23;
  --no:#fb7185;      --no-soft:#331420;
  --warn:#fbbf24;    --warn-soft:#302209;

  --m-learn:#5ba7ff;  --m-learn-soft:#11253f;
  --m-kids:#ff9a63;   --m-kids-soft:#33200f;
  --m-chess:#a78bfa;  --m-chess-soft:#231a3c;
  --m-life:#34d399;   --m-life-soft:#0d2b24;
  --m-teach:#fb7185;  --m-teach-soft:#331520;
  --m-plan:#22d3ee;   --m-plan-soft:#0c2a31;
  --m-tools:#f0a94e;  --m-tools-soft:#33230f;
  --m-class:#eab308;  --m-class-soft:#332705;
  --m-dean:#94a3b8;   --m-dean-soft:#1e2733;
  --m-pe:#a3e635;     --m-pe-soft:#263305;
  --m-psy:#2dd4bf;    --m-psy-soft:#0b2e2b;
  --m-track:#818cf8;  --m-track-soft:#1b1b42;
  --m-body:#f472b6;   --m-body-soft:#3a1024;

  --board-light:#a9adcd; --board-dark:#6c7199;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:0 18px 44px rgba(0,0,0,.5);
  --shadow-pop:0 10px 30px rgba(91,167,255,.22);
}
}

/* ---------- сброс ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.6; font-weight:500;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  transition:background .25s, color .25s;
}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
[hidden],.hidden{display:none !important}
::selection{background:var(--sky-200);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:6px}

/* небо на фоне: очень мягкое, чтобы страница не была плоской */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(760px 380px at 12% -6%, var(--sky-100), transparent 65%),
    radial-gradient(620px 320px at 96% 2%, var(--m-chess-soft), transparent 60%);
  opacity:.85;
}
:root[data-theme="dark"] body::before{opacity:.5}

/* ---------- типографика ---------- */
h1{font-size:clamp(30px,4.4vw,44px);font-weight:900;letter-spacing:-.02em;line-height:1.12}
h2{font-size:20px;font-weight:800;letter-spacing:-.01em}
h3{font-size:16px;font-weight:800}
.lead{color:var(--muted);font-size:15.5px;max-width:66ch;font-weight:500}
.eyebrow{
  font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);
}
.count{font-size:40px;font-weight:900;letter-spacing:-.03em;line-height:1}
/* «Назад в меню» над заголовком страниц из «Ещё» */
.back-link{
  display:inline-flex;align-items:center;gap:6px;min-height:36px;margin:-6px 0 10px -10px;padding:6px 12px 6px 10px;
  border-radius:10px;color:var(--muted);font-size:13.5px;font-weight:800;text-decoration:none;transition:background .15s,color .15s;
}
.back-link::before{content:'←';font-size:16px;line-height:1;transition:transform .15s}
.back-link:hover{background:var(--panel-2);color:var(--ink)}
.back-link:hover::before{transform:translateX(-2px)}
.back-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ---------- каркас ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:30px 22px 90px}
.section{margin-top:40px}
.section-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.section-head h2{margin-right:auto}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row > *{flex:1 1 190px;min-width:0}
.spread{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.spread .grow{margin-left:auto}

/* ---------- шапка ---------- */
.appbar{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
/* ШАПКА ШИРЕ КОНТЕНТА — НАМЕРЕННО

   До этого шапка делила общий --wrap (1120px) с текстом страниц. При
   восьми пунктах меню им нужно 776px, а после логотипа (152) и
   инструментов (271) оставалось 615. То есть три пункта уезжали в
   «Ещё» ВСЕГДА, хоть на мониторе 1920. И человек постоянно сидел на
   границе, где любое движение окна перекидывает пункт туда-обратно —
   отсюда ощущение, что меню схлопывается от малейшего изменения.

   Меняем ширину только у шапки: строке меню нужно 776 + 152 + 271 +
   отступы, то есть около 1270. Ставим 1320 с небольшим запасом на
   английский язык, где подписи местами длиннее. Контент страниц
   остаётся на 1120 — его ширина подобрана под удобство чтения, и
   трогать её незачем. */
.appbar .inner{
  max-width:min(1320px, 100%);margin:0 auto;padding:0 22px;
  height:var(--header-h);display:flex;align-items:center;gap:12px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:17px;letter-spacing:-.02em;flex-shrink:0}
.brand .logo{width:36px;height:36px;flex-shrink:0}
.brand b{color:var(--sky-500)}
:root[data-theme="dark"] .brand b{color:var(--sky-400)}

.appnav{display:flex;gap:2px;margin-left:14px;overflow-x:auto;scrollbar-width:none}
.appnav::-webkit-scrollbar{display:none}
.appnav a{
  padding:8px 13px;border-radius:11px;font-size:13.5px;font-weight:800;
  color:var(--muted);white-space:nowrap;transition:.16s;
}
.appnav a:hover{color:var(--ink);background:var(--panel-2)}
.appnav a[aria-current="page"]{color:var(--accent);background:var(--m-learn-soft)}

.appbar .tools{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}

/* переключатель языка */
.seg{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:2px;gap:2px}
.seg button{
  padding:5px 11px;border-radius:8px;font-size:11.5px;font-weight:900;
  color:var(--muted);letter-spacing:.04em;transition:.15s;
}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}

.icon-btn{
  width:36px;height:36px;display:grid;place-items:center;border-radius:11px;
  border:1px solid var(--line);background:var(--panel-2);
  color:var(--muted);font-size:15px;transition:.16s;
}
.icon-btn:hover{color:var(--ink);border-color:var(--line-2);transform:translateY(-1px)}

/* аккаунт в шапке */
.me{display:flex;align-items:center;gap:9px;padding:4px 4px 4px 10px;border:1px solid var(--line);border-radius:99px;background:var(--panel-2);transition:.16s}
.me:hover{border-color:var(--line-2)}
.me .who{display:flex;flex-direction:column;line-height:1.15;text-align:right}
.me .who b{font-size:12.5px;font-weight:800}
.me .who span{font-size:10.5px;color:var(--muted);font-weight:700}

/* ---------- аватар ---------- */
.ava{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-weight:900;font-size:14px;
  color:#fff;letter-spacing:-.02em;
  box-shadow:inset 0 -2px 6px rgba(0,0,0,.12);
}
.ava.lg{width:60px;height:60px;font-size:23px}
.ava.xl{width:84px;height:84px;font-size:32px}
.ava.sm{width:26px;height:26px;font-size:11px}
/* палитра аватаров — стабильно по хешу имени */
.ava.c0{background:linear-gradient(135deg,#2f8dfa,#1557a8)}
.ava.c1{background:linear-gradient(135deg,#ff7a3d,#e0491a)}
.ava.c2{background:linear-gradient(135deg,#8b5cf6,#6234d4)}
.ava.c3{background:linear-gradient(135deg,#12b981,#06845c)}
.ava.c4{background:linear-gradient(135deg,#f43f5e,#c11840)}
.ava.c5{background:linear-gradient(135deg,#0ea5b7,#046d7c)}
.ava.c6{background:linear-gradient(135deg,#f59e0b,#c47407)}
.ava.c7{background:linear-gradient(135deg,#6366f1,#3f40c4)}

/* ---------- панель ---------- */
.panel{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px;
  box-shadow:var(--shadow-sm);
}
.panel.pad-sm{padding:16px}
.panel.flat{box-shadow:none}
.panel > h2{margin-bottom:6px}

/* ---------- плитки модулей ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.tile{
  position:relative;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px;
  box-shadow:var(--shadow-sm);
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s;
  display:block;
}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.tile .ico{
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  font-size:24px;margin-bottom:14px;
  background:var(--m-learn-soft);color:var(--m-learn);
}
.tile h3{margin-bottom:5px}
.tile p{font-size:13px;color:var(--muted);line-height:1.55}
.tile .foot{margin-top:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* цветовые варианты */
.tile.learn .ico{background:var(--m-learn-soft);color:var(--m-learn)}
.tile.kids  .ico{background:var(--m-kids-soft);color:var(--m-kids)}
.tile.chess .ico{background:var(--m-chess-soft);color:var(--m-chess)}
.tile.life  .ico{background:var(--m-life-soft);color:var(--m-life)}
.tile.teach .ico{background:var(--m-teach-soft);color:var(--m-teach)}
.tile.plan  .ico{background:var(--m-plan-soft);color:var(--m-plan)}
.tile.tools .ico{background:var(--m-tools-soft);color:var(--m-tools)}
.tile.class .ico{background:var(--m-class-soft);color:var(--m-class)}
.tile.dean  .ico{background:var(--m-dean-soft);color:var(--m-dean)}
.tile.pe    .ico{background:var(--m-pe-soft);color:var(--m-pe)}
.tile.learn:hover{border-color:var(--m-learn)}
.tile.kids:hover{border-color:var(--m-kids)}
.tile.chess:hover{border-color:var(--m-chess)}
.tile.life:hover{border-color:var(--m-life)}
.tile.teach:hover{border-color:var(--m-teach)}
.tile.plan:hover{border-color:var(--m-plan)}
.tile.tools:hover{border-color:var(--m-tools)}
.tile.class:hover{border-color:var(--m-class)}
.tile.dean:hover{border-color:var(--m-dean)}
.tile.pe:hover{border-color:var(--m-pe)}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 19px;border-radius:13px;
  background:var(--accent);color:var(--accent-ink);
  font-weight:800;font-size:14px;
  transition:transform .15s, box-shadow .18s, filter .15s;
  box-shadow:var(--shadow-sm);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:var(--panel-2);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow-sm)}
.btn.danger{background:var(--no);color:#fff}
.btn.ok{background:var(--ok);color:#fff}
.btn.small{padding:8px 14px;font-size:12.5px;border-radius:10px}
.btn.big{padding:15px 28px;font-size:15.5px;border-radius:15px}
.btn.full{width:100%}
.btn.kids{background:var(--m-kids)}
.btn.chess{background:var(--m-chess)}
.btn.life{background:var(--m-life)}
.btn.teach{background:var(--m-teach)}

/* ---------- метки ---------- */
.tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:99px;
  font-size:10.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  background:var(--m-learn-soft);color:var(--m-learn);
}
.tag.gray{background:var(--panel-2);color:var(--muted);border:1px solid var(--line)}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.no{background:var(--no-soft);color:var(--no)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.kids{background:var(--m-kids-soft);color:var(--m-kids)}
.tag.chess{background:var(--m-chess-soft);color:var(--m-chess)}
.tag.life{background:var(--m-life-soft);color:var(--m-life)}
.tag.teach{background:var(--m-teach-soft);color:var(--m-teach)}

/* ---------- поля ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  padding:11px 13px;border-radius:12px;
  border:1.5px solid var(--line);background:var(--panel);
  font-size:14.5px;font-weight:600;transition:.16s;width:100%;
}
.field textarea{resize:vertical;min-height:86px;line-height:1.6}
/* Своя стрелка у списков вместо серой браузерной: тот же шеврон, что
   в меню, и цвет берётся из темы — в тёмной не светится белым пятном. */
.field select:not([multiple]){
  appearance:none;-webkit-appearance:none;
  padding-right:38px;cursor:pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size:5px 5px;
  background-repeat:no-repeat;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--accent) 16%, transparent);
}
.field .help{font-size:11.5px;color:var(--faint);font-weight:600}

/* ---------- статистика ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:14px}
.stat{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow-sm);
}
.stat b{display:block;font-size:26px;font-weight:900;letter-spacing:-.02em;line-height:1.15}
.stat span{font-size:11.5px;color:var(--muted);font-weight:700}
.stat.accent b{color:var(--accent)}
.stat.ok b{color:var(--ok)}

/* ---------- прогресс ---------- */
.progress{height:9px;background:var(--panel-2);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.progress i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--sky-400),var(--sky-600));
  transition:width .5s cubic-bezier(.2,.8,.3,1);
}
.progress.kids i{background:linear-gradient(90deg,#ffa672,var(--m-kids))}
.progress.life i{background:linear-gradient(90deg,#5fdcb4,var(--m-life))}

/* кольцевой прогресс */
.ring{position:relative;width:96px;height:96px;flex-shrink:0}
.ring svg{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring .bg{stroke:var(--panel-2)}
.ring .fg{stroke:var(--accent);transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.3,1)}
.ring .mid{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:20px;font-weight:900;letter-spacing:-.02em;
}

/* ---------- список ---------- */
.list{display:flex;flex-direction:column;gap:9px}
.item{
  display:flex;align-items:center;gap:12px;
  padding:13px 15px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);
  transition:.16s;
}
.item:hover{border-color:var(--line-2)}
.item .txt{min-width:0;flex:1}
.item .txt b{display:block;font-size:14px;font-weight:800;line-height:1.35}
.item .txt span{font-size:12px;color:var(--muted);font-weight:600}
.item.done .txt b{text-decoration:line-through;color:var(--faint)}
.check{
  width:24px;height:24px;border-radius:8px;flex-shrink:0;
  border:2px solid var(--line-2);display:grid;place-items:center;
  color:#fff;font-size:13px;font-weight:900;transition:.16s;
}
.item.done .check{background:var(--ok);border-color:var(--ok)}

/* ---------- задание ---------- */
.question{font-size:17px;font-weight:700;line-height:1.55;margin:16px 0 18px;white-space:pre-wrap}
.meta{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:4px}
.options{display:flex;flex-direction:column;gap:10px}
.opt{
  display:flex;align-items:center;gap:13px;
  padding:14px 16px;border-radius:14px;
  border:2px solid var(--line);background:var(--panel);
  text-align:left;font-size:14.5px;font-weight:600;line-height:1.45;
  transition:.16s;width:100%;
}
.opt:hover:not(:disabled){border-color:var(--accent);transform:translateX(3px)}
.opt .k{
  width:27px;height:27px;border-radius:9px;flex-shrink:0;
  display:grid;place-items:center;
  background:var(--panel-2);border:1px solid var(--line);
  font-size:12px;font-weight:900;color:var(--muted);
}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--m-learn-soft)}
.opt[aria-pressed="true"] .k{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.right .k{background:var(--ok);color:#fff;border-color:var(--ok)}
.opt.wrong{border-color:var(--no);background:var(--no-soft)}
.opt.wrong .k{background:var(--no);color:#fff;border-color:var(--no)}
.opt:disabled{cursor:default}

.verdict{padding:12px 15px;border-radius:13px;font-weight:800;font-size:14px;margin-top:16px}
.verdict.ok{background:var(--ok-soft);color:var(--ok)}
.verdict.no{background:var(--no-soft);color:var(--no)}

.note{
  padding:13px 16px;border-radius:13px;
  background:var(--panel-2);border-left:3.5px solid var(--accent);
  font-size:13.5px;line-height:1.65;margin-top:14px;color:var(--ink-2);
}
.solution{
  padding:16px 18px;border-radius:14px;margin-top:14px;
  background:var(--panel-2);border:1px solid var(--line);
  font-size:13.5px;line-height:1.8;white-space:pre-wrap;color:var(--ink-2);
}
.ai{
  padding:16px 18px;border-radius:14px;margin-top:14px;
  background:var(--m-chess-soft);border:1px solid color-mix(in srgb, var(--m-chess) 25%, transparent);
  font-size:13.5px;line-height:1.75;white-space:pre-wrap;
}
.ai h4{
  font-size:10.5px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;
  color:var(--m-chess);margin-bottom:9px;
}
.actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}

/* ---------- доска ---------- */
.board-wrap{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:26px;align-items:start}
.board{
  display:grid;grid-template-columns:repeat(8,1fr);
  aspect-ratio:1; width:100%;
  border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:var(--shadow);
  user-select:none;
}
.sqr{
  position:relative;display:grid;place-items:center;
  font-size:min(6.4vw,40px);line-height:1;cursor:pointer;
  transition:background .12s;
}
/* Клетка, по которой сейчас летит фигура, поднимается над соседями,
   иначе фигура уезжает ПОД них и анимация выглядит сломанной. */
.sqr.flying{z-index:6}
.piece.moving{will-change:transform}
/* Съеденная фигура не исчезает мгновенно, а сжимается — так видно,
   что именно её только что забрали. */
.piece.taken{animation:takePiece .22s ease-in forwards;pointer-events:none}
@keyframes takePiece{to{transform:scale(.3);opacity:0}}
.sqr .dot{animation:dotIn .16s ease-out}
@keyframes dotIn{from{transform:scale(0);opacity:0}}
.sqr.light{background:var(--board-light)}
.sqr.dark{background:var(--board-dark)}
.sqr.sel{box-shadow:inset 0 0 0 3.5px var(--accent)}
.sqr.last{box-shadow:inset 0 0 0 3.5px color-mix(in srgb, var(--warn) 70%, transparent)}
.sqr.check{background:#ff5c6f !important}
.sqr .dot{
  position:absolute;width:26%;height:26%;border-radius:50%;
  background:rgba(20,45,80,.32);pointer-events:none;
  transform-origin:center;
}
.sqr.cap .dot{
  width:82%;height:82%;background:none;
  border:4px solid rgba(20,45,80,.3);border-radius:50%;
}
.sqr .co{position:absolute;font-size:9px;font-weight:900;color:#2a3d58;opacity:.6;pointer-events:none}
.sqr .co.f{bottom:2px;right:4px}
.sqr .co.r{top:2px;left:4px}
.piece{filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}

.movelist{
  font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.9;
  max-height:230px;overflow:auto;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;
}
.movelist b{color:var(--muted);margin-right:6px;font-weight:600}
.movelist span{display:inline-block;min-width:62px;font-weight:600}
.captured{font-size:19px;line-height:1.5;min-height:28px;letter-spacing:1px}

/* ---------- всплывающее сообщение ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,120%);
  background:var(--ink);color:var(--bg);
  padding:13px 22px;border-radius:14px;
  font-size:13.5px;font-weight:800;z-index:200;
  box-shadow:var(--shadow-lg);max-width:min(460px,90vw);text-align:center;
  transition:transform .35s cubic-bezier(.2,.9,.3,1);
}
.toast.show{transform:translate(-50%,0)}

/* ссылка-действие акцентным цветом (пустые состояния и т. п.) */
.link-accent{color:var(--accent);font-weight:800}
.link-accent:hover{text-decoration:underline}

/* «Забыли пароль?» в окне входа (assets/auth.js) */
.au-modal-forgot{display:block;margin-top:12px;text-align:center;font-size:13px;font-weight:800;color:var(--accent)}

/* ---------- окно «Тарифы» (SkyCheck.openTariffs) — общее для страниц ----------
   Ширину не навязываем: у модалки свои отступы, содержимое занимает
   её ширину, какой бы она ни была (на телефоне иначе вылезало за край). */
.pw{width:100%;min-width:0;max-width:560px;box-sizing:border-box}
.pw h2{margin:0 0 4px}
.pw-lead{margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.5}
.pw-reason{margin:6px 0 10px;padding:10px 12px;border-radius:12px;background:var(--m-learn-soft);color:var(--ink-2);font-size:13px;font-weight:700;line-height:1.5}
.pw-actions{margin-top:14px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.pw-actions .btn{flex:1 1 auto}
.tf-list{display:grid;gap:10px}
.tf-card{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:8px}
.tf-card.current{border-color:var(--ok)}
.tf-card.focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}
.tf-card.addon{margin-top:10px}
.tf-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tf-price{font-weight:900;font-size:17px;white-space:nowrap}
.tf-card ul{margin:0;padding-left:18px;font-size:12.5px;line-height:1.6}
.tf-card .btn,.tf-card .tag{justify-self:start}

/* кнопка «Тарифы» / счётчик лимита в шапке (photo-api.js, limits.js):
   на узком экране места нет — тот же счётчик есть на самой странице */
.tariffs-hdr{white-space:nowrap}
@media (max-width:760px){.tariffs-hdr{display:none}}

/* ---------- лимит проверок (assets/limits.js) ---------- */
.lm-chip,.lm-meter{--lm:var(--ok);--lm-soft:var(--ok-soft)}
.lm-chip.low,.lm-meter.low{--lm:var(--warn);--lm-soft:var(--warn-soft)}
.lm-chip.out,.lm-meter.out{--lm:var(--no);--lm-soft:var(--no-soft)}
.lm-chip{gap:7px;white-space:nowrap;font-variant-numeric:tabular-nums}
.lm-chip.out{border-color:color-mix(in srgb,var(--lm) 35%,var(--line));color:var(--lm)}
.lm-ring{
  flex:none;width:15px;height:15px;border-radius:50%;
  background:conic-gradient(var(--lm) calc(var(--p) * 1%), var(--line) 0);
  -webkit-mask:radial-gradient(circle,transparent 4px,#000 4.5px);mask:radial-gradient(circle,transparent 4px,#000 4.5px);
}
.lm-meter{
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:6px 11px;border-radius:99px;background:var(--lm-soft);
  font-size:12.5px;font-weight:800;color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.lm-meter[hidden]{display:none}
.lm-meter.out{color:var(--lm)}
.lm-more{font:inherit;font-size:12px;font-weight:900;color:var(--accent);background:none;border:0;padding:0;cursor:pointer}
.lm-more:hover{text-decoration:underline}

/* ---------- цветовые темы (акцент) — окно «Оформление», assets/theme.js ----------
   Меняют цвет кнопок, выделения и ссылок. Белый текст на кнопке в
   светлой теме — не хуже 4.5:1 у каждого цвета (у прежнего неба 3.3:1). */
:root[data-accent="violet"]{--accent:#7048e8;--m-learn-soft:#f0ebff;--shadow-pop:0 10px 30px rgba(112,72,232,.28)}
:root[data-accent="emerald"]{--accent:#0a7f58;--m-learn-soft:#e3f6ee;--shadow-pop:0 10px 30px rgba(10,127,88,.26)}
:root[data-accent="coral"]{--accent:#d23a47;--m-learn-soft:#ffebed;--shadow-pop:0 10px 30px rgba(210,58,71,.26)}
:root[data-accent="ocean"]{--accent:#0e7c9a;--m-learn-soft:#e0f4f8;--shadow-pop:0 10px 30px rgba(14,124,154,.26)}
:root[data-theme="dark"][data-accent="violet"]{--accent:#a78bfa;--accent-ink:#150a33;--m-learn-soft:#221a3d;--shadow-pop:0 10px 30px rgba(167,139,250,.22)}
:root[data-theme="dark"][data-accent="emerald"]{--accent:#34d399;--accent-ink:#03241a;--m-learn-soft:#0d2b24;--shadow-pop:0 10px 30px rgba(52,211,153,.2)}
:root[data-theme="dark"][data-accent="coral"]{--accent:#fb7185;--accent-ink:#2a0a10;--m-learn-soft:#331520;--shadow-pop:0 10px 30px rgba(251,113,133,.2)}
:root[data-theme="dark"][data-accent="ocean"]{--accent:#22d3ee;--accent-ink:#032630;--m-learn-soft:#0c2a31;--shadow-pop:0 10px 30px rgba(34,211,238,.2)}

/* окно «Оформление» */
.th-pop{
  position:fixed;z-index:220;width:280px;padding:14px;border-radius:18px;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(-6px);transition:opacity .16s, transform .2s cubic-bezier(.2,.9,.3,1);
}
.th-pop.in{opacity:1;transform:none}
.th-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.th-head b{font-size:15px}
.th-x{width:28px;height:28px;border:0;border-radius:8px;background:none;color:var(--faint);font-size:19px;cursor:pointer}
.th-x:hover{background:var(--panel-2);color:var(--ink)}
.th-lbl{font-size:10.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:10px 0 6px}
.th-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.th-modes button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border:1.5px solid var(--line);border-radius:12px;
  background:var(--panel-2);color:var(--ink-2);font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:.15s}
.th-modes button[aria-checked="true"]{border-color:var(--accent);background:var(--m-learn-soft);color:var(--ink)}
.th-accents{display:flex;gap:10px;flex-wrap:wrap}
.th-accents button{width:34px;height:34px;border-radius:50%;border:2px solid transparent;background:none;padding:3px;cursor:pointer}
.th-accents button span{display:block;width:100%;height:100%;border-radius:50%;background:var(--sw)}
.th-accents button[aria-checked="true"]{border-color:var(--ink)}
.th-pop button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:560px){
  .th-pop{left:16px !important;right:16px;top:auto !important;bottom:16px;width:auto;transform:translateY(10px)}
  .th-pop.in{transform:none}
}
@media (prefers-reduced-motion:reduce){ .th-pop{transition:none} }

/* ---------- «Доступно обновление» (assets/pwa.js) ---------- */
.pwa-bar{
  position:fixed;left:18px;bottom:18px;z-index:205;width:min(420px,calc(100vw - 32px));
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 12px;align-items:center;
  padding:12px 14px;border-radius:16px;background:var(--ink);color:var(--bg);box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(14px);transition:opacity .2s, transform .25s cubic-bezier(.2,.9,.3,1);
}
.pwa-bar.in{opacity:1;transform:none}
.pwa-ico{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 16%,transparent)}
.pwa-txt b{display:block;font-size:14px;font-weight:900}
.pwa-txt span{display:block;font-size:12.5px;font-weight:600;opacity:.8;line-height:1.4}
.pwa-acts{grid-column:1 / -1;display:flex;gap:8px;justify-content:flex-end}
.pwa-acts button{font:inherit;font-size:13px;font-weight:800;padding:8px 14px;border-radius:10px;border:0;cursor:pointer}
.pwa-go{background:var(--accent);color:var(--accent-ink)}
.pwa-later{background:transparent;color:inherit;opacity:.8}
.pwa-later:hover{opacity:1}
.pwa-go:disabled{opacity:.7;cursor:default}
@media (max-width:560px){ .pwa-bar{left:16px;right:16px;bottom:14px;width:auto} }
@media (prefers-reduced-motion:reduce){ .pwa-bar{transition:none} }

/* ---------- ошибки и уведомления с действием (assets/errors.js) ---------- */
.sx-stack{
  position:fixed;right:18px;bottom:18px;z-index:210;
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;
  width:min(400px,calc(100vw - 32px));pointer-events:none;
}
.sx{
  --tone:var(--no);--tone-soft:var(--no-soft);
  pointer-events:auto;width:100%;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:start;
  padding:13px 12px 13px 14px;border-radius:16px;
  background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--tone);
  box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(12px) scale(.98);
  transition:opacity .2s, transform .25s cubic-bezier(.2,.9,.3,1);
}
.sx.in{opacity:1;transform:none}
.sx-warn{--tone:var(--warn);--tone-soft:var(--warn-soft)}
.sx-accent{--tone:var(--accent);--tone-soft:var(--m-learn-soft)}
.sx-muted{--tone:var(--muted);--tone-soft:var(--panel-2)}
.sx-ok{--tone:var(--ok);--tone-soft:var(--ok-soft)}
.sx-ico{
  grid-row:span 2;width:36px;height:36px;border-radius:11px;
  display:grid;place-items:center;background:var(--tone-soft);color:var(--tone);
}
.sx-body{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:1px}
.sx-title{font-size:14px;font-weight:900;color:var(--ink);line-height:1.3}
.sx-text{font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.45}
.sx-acts{grid-column:2 / 4;display:flex;gap:8px;flex-wrap:wrap}
.sx-acts:empty{display:none}
.sx-btn{
  display:inline-flex;align-items:center;text-decoration:none;
  font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;
  padding:7px 13px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--ink);transition:.15s;
}
.sx-btn.primary{background:var(--tone);border-color:var(--tone);color:#fff}
.sx-btn:disabled{opacity:.45;cursor:default}
.sx-btn:not(:disabled):hover{filter:brightness(1.06)}
.sx-x{
  grid-column:3;grid-row:1;width:26px;height:26px;border:0;border-radius:8px;
  background:none;color:var(--faint);font-size:19px;line-height:1;cursor:pointer;
}
.sx-x:hover{background:var(--panel-2);color:var(--ink)}
@media (max-width:560px){
  .sx-stack{left:16px;right:16px;bottom:14px;width:auto;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){ .sx{transition:none} }

/* ---------- модальное окно ---------- */
.modal-bg{
  position:fixed;inset:0;z-index:150;
  background:rgba(8,18,34,.55);backdrop-filter:blur(5px);
  display:grid;place-items:center;padding:20px;
  animation:fade .2s;
}
.modal{
  background:var(--panel);border-radius:var(--r-xl);
  padding:28px;max-width:480px;width:100%;
  box-shadow:var(--shadow-lg);border:1px solid var(--line);
  max-height:88vh;overflow:auto;
  animation:pop .28s cubic-bezier(.2,.9,.3,1);
}
.modal h2{margin-bottom:8px}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.97)}}

/* ---------- индикатор загрузки ---------- */
.spin{
  display:inline-block;width:14px;height:14px;vertical-align:-2px;
  border:2.5px solid var(--line-2);border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- пустое состояние ---------- */
.empty{text-align:center;padding:44px 20px;color:var(--muted)}
.empty .big{font-size:44px;margin-bottom:12px;opacity:.65}
.empty b{display:block;font-size:15.5px;font-weight:800;color:var(--ink);margin-bottom:6px}
.empty p{font-size:13.5px;max-width:44ch;margin:0 auto;line-height:1.65}

/* ---------- подвал ---------- */
.appfoot{border-top:1px solid var(--line);margin-top:70px;background:var(--panel)}
.appfoot .inner{
  max-width:var(--wrap);margin:0 auto;padding:26px 22px;
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  font-size:12.5px;color:var(--muted);font-weight:600;
}
.appfoot a{color:var(--accent);font-weight:800}
.appfoot a:hover{text-decoration:underline}

/* ---------- появление ---------- */
.rise{animation:rise .45s cubic-bezier(.2,.8,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.rise:nth-child(2){animation-delay:.05s}
.rise:nth-child(3){animation-delay:.1s}
.rise:nth-child(4){animation-delay:.15s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- адаптив ---------- */
@media (max-width:900px){
  .board-wrap{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .wrap{padding:22px 15px 70px}
  .appbar .inner{padding:0 15px;gap:8px}
  .appnav{margin-left:6px}
  .appnav a{padding:7px 10px;font-size:12.5px}
  .brand span{display:none}
  .me .who{display:none}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .panel{padding:17px;border-radius:var(--r)}
  .tile{padding:18px}
  .section{margin-top:30px}
  .count{font-size:33px}
  .sqr{font-size:8.4vw}
}
@media (max-width:400px){
  .seg button{padding:5px 8px;font-size:11px}
}
/* 320 px: кнопки справа занимали всю шапку, меню доставалось 0 px —
   кнопка-гамбургер не помещалась, и страница листалась вбок. Ужимаем
   отступы, чтобы под меню осталось место на одну кнопку (36 px). */
@media (max-width:380px){
  .appbar .inner{padding:0 10px;gap:6px}
  .appbar .tools{gap:4px}
  .seg button{padding:5px 5px}
  .appbar .streak-badge{padding:5px 6px 5px 5px;margin-right:0}
  #btnSignIn{padding-left:10px;padding-right:10px}
}

/* ---------- итог партии ---------- */
.gameover{text-align:center;padding:6px 0 2px}
.gameover .mark{
  width:76px;height:76px;border-radius:50%;margin:0 auto 16px;
  display:grid;place-items:center;font-size:36px;
}
.gameover .mark.win{background:var(--ok-soft);color:var(--ok)}
.gameover .mark.lose{background:var(--no-soft);color:var(--no)}
.gameover .mark.draw{background:var(--panel-2);color:var(--muted)}
.gameover h2{font-size:23px;margin-bottom:7px}
.gameover .why{color:var(--muted);font-size:13.5px;line-height:1.65;max-width:38ch;margin:0 auto}
.gameover .facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 4px;
}
.gameover .facts div{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 8px}
.gameover .facts b{display:block;font-size:19px;font-weight:900}
.gameover .facts span{font-size:10.5px;color:var(--muted);font-weight:800}

/* ---------- разбор хода в шахматах ---------- */
.review{
  border:1.5px solid var(--line);border-left-width:4px;border-radius:var(--r);
  padding:11px 13px;margin-top:10px;background:var(--panel-2);
}
.review .rv-head{display:flex;align-items:center;gap:8px;font-size:13px}
.review .rv-icon{font-size:15px;line-height:1}
.review .rv-note{font-size:12.5px;line-height:1.55;color:var(--ink);margin-top:6px}
.review .rv-words{
  font-size:12.5px;line-height:1.6;margin-top:8px;padding-top:8px;
  border-top:1px dashed var(--line);color:var(--ink);
}
.review .rv-by{font-size:10.5px;color:var(--muted);font-weight:800;margin-top:7px}

.review.q-brilliant{border-left-color:#8b5cf6}
.review.q-brilliant .rv-icon,.review.q-brilliant .rv-head b{color:#8b5cf6}
.review.q-good{border-left-color:var(--ok)}
.review.q-good .rv-icon,.review.q-good .rv-head b{color:var(--ok)}
.review.q-inaccuracy{border-left-color:var(--warn)}
.review.q-inaccuracy .rv-icon,.review.q-inaccuracy .rv-head b{color:var(--warn)}
.review.q-mistake{border-left-color:#e07a3f}
.review.q-mistake .rv-icon,.review.q-mistake .rv-head b{color:#e07a3f}
.review.q-blunder{border-left-color:var(--no)}
.review.q-blunder .rv-icon,.review.q-blunder .rv-head b{color:var(--no)}

/* ---------- строка выбранного AI-учителя ---------- */
.teacher-bar .who{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:800;min-width:0}
.teacher-bar .ava{
  width:30px;height:30px;border-radius:10px;flex:none;display:grid;place-items:center;
  font-size:17px;background:var(--m-learn-soft);
}
.teacher-bar .who span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- встроенный Python-редактор (тренажёр → информатика) ---------- */
.pye-wrap{
  margin-top:16px;border:1.5px solid var(--line);border-radius:var(--r);
  padding:14px;background:var(--panel-2);
}
.pye-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.pye-head b{font-size:13.5px}
.pye-status{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}
.pye-status .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.pye-status.ready .dot{background:var(--ok)}
.pye-status.busy .dot{background:var(--warn);animation:pyePulse 1s infinite}
.pye-status.err .dot{background:var(--no)}
@keyframes pyePulse{0%,100%{opacity:1}50%{opacity:.35}}
.pye-editor{
  width:100%;min-height:140px;font-family:'JetBrains Mono',monospace;font-size:13px;
  border:1.5px solid var(--line);border-radius:calc(var(--r) - 4px);padding:12px;resize:vertical;
  background:var(--card);color:var(--ink);line-height:1.6;tab-size:4;
}
.pye-editor:focus{outline:none;border-color:var(--m-learn)}
.pye-console{
  background:var(--ink,#0e2540);color:#d7e6fa;border-radius:calc(var(--r) - 4px);padding:12px;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;min-height:60px;max-height:220px;
  overflow:auto;white-space:pre-wrap;word-break:break-word;margin-top:10px;
}
.pye-console .err{color:#ff9b9b}
.pye-console .muted{color:#8fa6c9}
.pye-run{margin-top:10px}

/* ==========================================================================
   Ролевые вкладки: classroom.html, headteacher.html, pe.html
   (общая логика — assets/roles.js)
   ========================================================================== */

/* ---------- выбор предметов чипами (чекбоксы-«таблетки») ---------- */
.chip-label{display:block;font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.chip-select{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip-opt{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px 8px 10px;border-radius:99px;
  border:1.5px solid var(--line);background:var(--panel);
  font-size:12.5px;font-weight:800;cursor:pointer;transition:.15s;color:var(--ink);
}
.chip-opt:hover{border-color:var(--line-2)}
.chip-opt.on{border-color:var(--accent);background:var(--m-learn-soft);color:var(--accent)}
.chip-opt .ic{font-size:15px}

/* ---------- карточка роли (задание / курс / рекомендация) ---------- */
.role-card{
  display:flex;align-items:flex-start;gap:12px;
  border:1.5px solid var(--line);border-radius:var(--r);padding:14px 16px;
  background:var(--panel);transition:.15s;
}
.role-card.link{text-decoration:none;color:inherit;cursor:pointer}
.role-card.link:hover{border-color:var(--line-2);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.role-card .ic{font-size:22px;flex:none;line-height:1.3}
.role-card .body{flex:1;min-width:0}
.role-card .body b{display:block;font-size:14px;font-weight:900}
.role-card .body span{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5}
.role-card .body .progress{margin-top:9px}
.role-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}

/* ---------- дедлайны ---------- */
.deadline-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.deadline-row:last-child{border-bottom:none}
.deadline-row .txt{flex:1;min-width:0;font-size:13px;font-weight:700}
.deadline-row .days{font-size:11.5px;font-weight:900;padding:3px 10px;border-radius:99px;flex:none}
.deadline-row .days.far{background:var(--panel-2);color:var(--muted)}
.deadline-row .days.soon{background:var(--warn-soft);color:var(--warn)}
.deadline-row .days.over{background:var(--no-soft);color:var(--no)}

/* ---------- завуч: пропуски ---------- */
.absence-item{display:flex;align-items:center;gap:12px}
.absence-item .ic{font-size:18px;flex:none}
.absence-item .info{flex:1;min-width:0}
.absence-item .info b{display:block;font-size:13.5px;font-weight:800}
.absence-item .info span{font-size:11.5px;color:var(--muted);font-weight:700}
.subj-stat-row{display:flex;align-items:center;gap:10px;padding:7px 0}
.subj-stat-row .ic{width:26px;text-align:center;flex:none}
.subj-stat-row .name{flex:1;font-size:13px;font-weight:700}
.subj-stat-row .bar{width:120px;flex:none}
.subj-stat-row .n{width:26px;text-align:right;font-size:12.5px;font-weight:900;color:var(--muted);flex:none}

/* ---------- физрук: нормативы, тренировки, медали ---------- */
.pe-standards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:14px}
.pe-std-card{border:1.5px solid var(--line);border-radius:var(--r);padding:14px;text-align:center;transition:.15s}
.pe-std-card.active{border-color:var(--m-pe);background:var(--m-pe-soft)}
.pe-std-card b{display:block;font-size:13px;font-weight:900;margin-bottom:8px}
.pe-std-card .row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);font-weight:700;margin-top:4px}
.pe-std-card .row b{display:inline;font-size:11.5px;color:var(--ink)}

.tip-box{
  display:flex;align-items:center;gap:12px;border-radius:var(--r);
  background:var(--m-pe-soft);border:1.5px solid transparent;padding:14px 16px;margin-top:14px;
}
.tip-box .ic{font-size:22px;flex:none}
.tip-box p{flex:1;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.5}

.medal-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.medal{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:88px;padding:12px 6px;border-radius:var(--r);
  border:1.5px solid var(--line);background:var(--panel);
  opacity:.4;filter:grayscale(1);transition:.25s;
}
.medal.unlocked{opacity:1;filter:none;border-color:var(--m-pe);background:var(--m-pe-soft)}
.medal .ic{font-size:30px;line-height:1}
.medal span{font-size:10px;font-weight:800;color:var(--muted);text-align:center;line-height:1.3}
.medal.unlocked span{color:var(--ink)}
.medal.pop{animation:medalPop .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes medalPop{
  0%{transform:scale(.4) rotate(-12deg);opacity:0}
  60%{transform:scale(1.15) rotate(6deg);opacity:1}
  100%{transform:scale(1) rotate(0)}
}
.pe-level{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:900;
  background:var(--m-pe-soft);color:var(--m-pe);padding:6px 14px;border-radius:99px;
}

@media (max-width:560px){
  .subj-stat-row .bar{width:70px}
  .medal{width:74px}
}

/* ==========================================================================
   Вкладка «Психолог»: psychologist.html
   (логика и тексты — assets/psychologist.js)

   Важно про цвет: здесь намеренно нет красного ни на результатах
   тестов, ни на уровнях. Красный на экране «у тебя высокий уровень
   тревоги» читается как тревога сама по себе. Высокий уровень
   помечен спокойным янтарным, а единственный красный на странице —
   кнопка экстренной помощи, чтобы её нельзя было ни с чем спутать.
   ========================================================================== */

/* ---------- плашка-дисклеймер (всегда на виду, не закрывается) ---------- */
.psy-disclaimer{
  display:flex;align-items:flex-start;gap:12px;
  border:1.5px solid var(--line);border-left:4px solid var(--m-psy);
  border-radius:var(--r);background:var(--m-psy-soft);
  padding:14px 16px;margin-bottom:22px;
}
.psy-disclaimer .ic{font-size:20px;flex:none;line-height:1.2}
.psy-disclaimer p{flex:1;font-size:13px;font-weight:700;color:var(--ink);line-height:1.55}
.psy-disclaimer a{color:var(--m-psy);font-weight:900;white-space:nowrap}

/* ---------- карточки тестов ---------- */
.psy-tests{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:16px}
.psy-test-card{
  border:1.5px solid var(--line);border-radius:var(--r);padding:16px;
  background:var(--panel);transition:.15s;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:8px;font:inherit;color:inherit;width:100%;
}
.psy-test-card:hover{border-color:var(--m-psy);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.psy-test-card .ic{font-size:26px;line-height:1}
.psy-test-card b{font-size:14.5px;font-weight:900}
.psy-test-card .based{font-size:11.5px;color:var(--muted);font-weight:700;line-height:1.45}
.psy-test-card .last{margin-top:auto;padding-top:8px;font-size:11.5px;font-weight:800;color:var(--muted)}

/* ---------- вопрос шкалы ---------- */
.psy-q{border:1.5px solid var(--line);border-radius:var(--r);padding:18px;background:var(--panel)}
.psy-q .qnum{font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--m-psy)}
.psy-q .qtext{font-size:16px;font-weight:800;line-height:1.45;margin-top:8px}
.psy-opts{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.psy-opt{
  display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--panel);cursor:pointer;transition:.13s;
  font-size:13.5px;font-weight:700;text-align:left;color:var(--ink);width:100%;font-family:inherit;
}
.psy-opt:hover{border-color:var(--line-2);background:var(--panel-2)}
.psy-opt.on{border-color:var(--m-psy);background:var(--m-psy-soft);color:var(--m-psy);font-weight:900}
.psy-opt .dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);flex:none;transition:.13s}
.psy-opt.on .dot{border-color:var(--m-psy);background:var(--m-psy);box-shadow:inset 0 0 0 3px var(--panel)}

/* ---------- отдельный блок проверки безопасности ----------
   Визуально не такой, как вопросы теста, — чтобы было видно, что это
   не очередной пункт со шкалой, а разговор. */
.psy-safety{
  border:1.5px solid var(--m-psy);border-radius:var(--r);
  background:var(--m-psy-soft);padding:18px;
}
.psy-safety .qtext{font-size:15.5px;font-weight:800;line-height:1.5}
.psy-safety .qnote{font-size:12px;color:var(--muted);font-weight:700;margin-top:8px;line-height:1.5}
.psy-safety .psy-opt{background:var(--panel)}

/* ---------- результат ---------- */
.psy-result{text-align:center;padding:8px 0 4px}
.psy-result .big-ic{font-size:46px;line-height:1}
.psy-level{
  display:inline-block;margin-top:12px;padding:7px 18px;border-radius:99px;
  font-size:13.5px;font-weight:900;
}
.psy-level.low{background:var(--ok-soft);color:var(--ok)}
.psy-level.mid{background:var(--m-psy-soft);color:var(--m-psy)}
.psy-level.high{background:var(--warn-soft);color:var(--warn)}
.psy-result .score{font-size:12.5px;color:var(--muted);font-weight:800;margin-top:10px}
.psy-result .band-text{font-size:14px;line-height:1.65;margin-top:14px;text-align:left;color:var(--ink);font-weight:600}

/* блок поддержки — показывается вместо сухого результата, когда
   человек отметил тяжёлые мысли */
.psy-support{
  border:2px solid var(--m-psy);border-radius:var(--r);
  background:var(--m-psy-soft);padding:20px;margin-bottom:18px;text-align:left;
}
.psy-support h3{font-size:16px;font-weight:900;margin-bottom:10px}
.psy-support p{font-size:13.5px;line-height:1.65;font-weight:600}

/* ---------- телефоны доверия ---------- */
.psy-lines{display:flex;flex-direction:column;gap:11px;margin-top:14px}
.psy-line{
  display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;
  border:1.5px solid var(--line);border-radius:var(--r);padding:14px 16px;
  background:var(--panel);transition:.15s;
}
.psy-line:hover{border-color:var(--m-psy);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.psy-line.primary{border-color:var(--m-psy);background:var(--m-psy-soft)}
.psy-line .ic{font-size:22px;flex:none}
.psy-line .body{flex:1;min-width:0}
.psy-line .num{display:block;font-size:17px;font-weight:900;letter-spacing:.01em;font-family:var(--mono,inherit)}
.psy-line .who{display:block;font-size:12.5px;font-weight:800;margin-top:2px}
.psy-line .note{display:block;font-size:11.5px;color:var(--muted);font-weight:700;margin-top:4px;line-height:1.45}

/* ---------- красная кнопка (единственный красный на странице) ---------- */
.psy-sos{
  position:fixed;right:18px;bottom:18px;z-index:60;
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 20px;border-radius:99px;border:none;cursor:pointer;
  background:var(--no);color:#fff;font-family:inherit;font-size:13.5px;font-weight:900;
  box-shadow:0 6px 20px rgba(225,29,72,.35);transition:.18s;
}
.psy-sos:hover{transform:translateY(-2px);box-shadow:0 9px 26px rgba(225,29,72,.45)}
.psy-sos .ic{font-size:16px}
@media (max-width:560px){
  .psy-sos{right:12px;bottom:12px;padding:12px 16px;font-size:12.5px}
}

/* ---------- дневник: шкалы 1–5 ---------- */
.psy-scale{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.psy-scale button{
  flex:1;min-width:58px;padding:11px 6px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--panel);cursor:pointer;
  font-family:inherit;transition:.13s;display:flex;flex-direction:column;align-items:center;gap:4px;
}
.psy-scale button:hover{border-color:var(--line-2)}
.psy-scale button.on{border-color:var(--m-psy);background:var(--m-psy-soft)}
.psy-scale button .face{font-size:21px;line-height:1}
.psy-scale button .lab{font-size:10px;font-weight:800;color:var(--muted)}
.psy-scale button.on .lab{color:var(--m-psy)}

/* ---------- график настроения за 30 дней ---------- */
.mood-chart{
  display:flex;align-items:flex-end;gap:3px;height:120px;margin-top:16px;
  padding:10px 0;border-bottom:1.5px solid var(--line);
}
.mood-chart .bar{flex:1;min-width:4px;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative}
.mood-chart .bar i{
  display:block;width:100%;border-radius:3px 3px 0 0;background:var(--m-psy);
  transition:height .3s;min-height:3px;
}
.mood-chart .bar.m1 i{background:#f59e0b}
.mood-chart .bar.m2 i{background:#fbbf24}
.mood-chart .bar.m3 i{background:var(--m-psy)}
.mood-chart .bar.m4 i{background:#14b8a6}
.mood-chart .bar.m5 i{background:var(--ok)}
.mood-chart .bar.empty i{background:var(--line);height:3px !important;opacity:.6}
.mood-chart .bar:hover i{filter:brightness(1.1)}
.mood-legend{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);font-weight:800;margin-top:6px}

/* ---------- найденные закономерности ---------- */
.psy-pattern{
  display:flex;align-items:flex-start;gap:12px;padding:13px 15px;
  border-radius:var(--r);background:var(--panel-2);border:1.5px solid var(--line);
}
.psy-pattern .ic{font-size:19px;flex:none;line-height:1.3}
.psy-pattern p{flex:1;font-size:13px;line-height:1.6;font-weight:600}

/* ---------- дыхательный круг ---------- */
.breath-stage{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:26px 0 10px;min-height:260px;
}
.breath-circle{
  width:130px;height:130px;border-radius:50%;
  background:var(--m-psy-soft);border:3px solid var(--m-psy);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:900;color:var(--m-psy);text-align:center;
  transform:scale(.55);transition:transform linear;
}
.breath-circle.grow{transform:scale(1)}
.breath-circle.shrink{transform:scale(.55)}
.breath-count{font-size:30px;font-weight:900;color:var(--m-psy);font-variant-numeric:tabular-nums}
.breath-phase{font-size:17px;font-weight:900}
.breath-round{font-size:12px;color:var(--muted);font-weight:800}
@media (prefers-reduced-motion:reduce){
  .breath-circle{transition:none}
}

/* ---------- шаги заземления ---------- */
.ground-step{
  display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:var(--r);
  border:1.5px solid var(--line);background:var(--panel);transition:.18s;
}
.ground-step.done{border-color:var(--m-psy);background:var(--m-psy-soft);opacity:.65}
.ground-step.current{border-color:var(--m-psy);box-shadow:var(--shadow-sm)}
.ground-step .n{
  width:34px;height:34px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--m-psy-soft);color:var(--m-psy);font-weight:900;font-size:15px;
}
.ground-step.done .n{background:var(--m-psy);color:#fff}
.ground-step p{flex:1;font-size:13.5px;font-weight:700;line-height:1.5}

/* ---------- медитация ---------- */
.medit-line{
  font-size:17px;font-weight:700;line-height:1.6;text-align:center;
  min-height:80px;display:flex;align-items:center;justify-content:center;
  padding:16px;color:var(--ink);
}
.medit-progress{display:flex;gap:4px;justify-content:center;margin-top:10px}
.medit-progress i{width:18px;height:4px;border-radius:2px;background:var(--line);transition:.25s}
.medit-progress i.on{background:var(--m-psy)}

/* ---------- запись мыслей (КПТ) ---------- */
.cbt-field{margin-top:14px}
.cbt-field label{display:block;font-size:12px;font-weight:900;letter-spacing:.04em;color:var(--ink)}
.cbt-field .hint{display:block;font-size:11.5px;color:var(--muted);font-weight:700;margin:4px 0 7px;line-height:1.5}
.cbt-field textarea{width:100%;min-height:62px;resize:vertical}
.cbt-rec{border:1.5px solid var(--line);border-radius:var(--r);padding:15px;background:var(--panel)}
.cbt-rec .date{font-size:11px;font-weight:900;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.cbt-rec .was{font-size:13.5px;font-weight:800;margin-top:8px;line-height:1.5}
.cbt-rec .now{font-size:13.5px;font-weight:700;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);color:var(--m-psy);line-height:1.5}
.cbt-delta{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:900;color:var(--muted);margin-top:9px}

/* ---------- вкладки внутри страницы ---------- */
.psy-seg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.psy-seg button{
  padding:9px 16px;border-radius:99px;border:1.5px solid var(--line);
  background:var(--panel);font-family:inherit;font-size:13px;font-weight:800;
  cursor:pointer;transition:.13s;color:var(--ink);
}
.psy-seg button:hover{border-color:var(--line-2)}
.psy-seg button.on{background:var(--m-psy);border-color:var(--m-psy);color:#fff}

/* ---------- карточка модуля на главной ---------- */
.tile.psy .ico{background:var(--m-psy-soft);color:var(--m-psy)}
.tile.psy:hover{border-color:var(--m-psy)}

/* ==========================================================================
   Топ учителей и доступ к премиум-учителям (teachers.html)
   Логика рейтинга — assets/ai-teachers.js
   ========================================================================== */

.top3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:14px}
.top-card{
  display:flex;align-items:center;gap:12px;
  border:1.5px solid var(--line);border-radius:var(--r);padding:14px 16px;
  background:var(--panel);transition:.15s;
}
.top-card.first{border-color:var(--m-teach,var(--accent));background:var(--m-teach-soft,var(--panel-2))}
.top-card .place{font-size:23px;flex:none;line-height:1}
.top-card .ava{
  width:38px;height:38px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  background:var(--panel-2);
}
.top-card .who{flex:1;min-width:0}
.top-card .who b{display:block;font-size:14px;font-weight:900}
.top-card .who span{display:block;font-size:11.5px;color:var(--muted);font-weight:700;margin-top:2px}
.top-card .stars-top{font-size:12px;letter-spacing:1px;color:#f59e0b;flex:none}

.premium-box{padding:18px 20px}
.premium-box h3{font-size:15px;font-weight:900;margin:0}
.premium-box .pct{font-size:14px;font-weight:900;color:var(--accent)}
.premium-box p{font-size:13px;color:var(--muted);font-weight:700;line-height:1.6;margin:10px 0 14px}
.premium-box .left{display:block;font-size:11.5px;font-weight:800;color:var(--muted);margin-top:8px}

.prem-badge{
  display:inline-block;font-size:9.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;
  padding:2px 7px;border-radius:99px;background:var(--warn-soft);color:var(--warn);vertical-align:middle;
}
.tcard.locked{opacity:.72}
.tcard.locked .ava{filter:grayscale(1)}

/* ==========================================================================
   Трекеры (trackers.html) и вкладка «Тело» (body.html)
   Логика — assets/trackers.js и assets/body.js

   Про цвет на этих страницах: оранжевым помечены короткие ночи и
   невыполненные потребности, но нигде нет красного. Красный на
   строчке «поел 1 раз из 3» читается как обвинение, а это дневник,
   а не проверка.
   ========================================================================== */

/* ---------- график сна за 30 дней ---------- */
.sleep-chart{
  display:flex;align-items:flex-end;gap:3px;height:120px;margin-top:16px;
  padding:10px 0;border-bottom:1.5px solid var(--line);
}
.sleep-chart .sbar{flex:1;min-width:4px;display:flex;align-items:flex-end;height:100%}
.sleep-chart .sbar i{display:block;width:100%;border-radius:3px 3px 0 0;min-height:3px;transition:height .3s}
.sleep-chart .sbar.ok    i{background:var(--m-track)}
.sleep-chart .sbar.short i{background:#f59e0b}
.sleep-chart .sbar.empty i{background:var(--line);opacity:.6}
.sleep-chart .sbar:hover i{filter:brightness(1.12)}

.verdict{
  display:inline-block;padding:8px 16px;border-radius:99px;
  font-size:13px;font-weight:900;margin-top:12px;
}
.verdict.ok{background:var(--ok-soft);color:var(--ok)}
.verdict.warn{background:var(--warn-soft);color:var(--warn)}

/* ---------- расписание блоками ---------- */
.daygrid{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.dayblock{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1.5px solid var(--line);border-left:5px solid var(--line-2);
  border-radius:var(--r);padding:12px 14px;background:var(--panel);transition:.15s;
}
.dayblock.done{opacity:.55}
.dayblock.done .what{text-decoration:line-through}
.dayblock .time{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:14px;font-weight:700;flex:none;color:var(--ink);
}
.dayblock .cat{
  font-size:11px;font-weight:900;padding:3px 10px;border-radius:99px;flex:none;
}
.dayblock .what{flex:1;min-width:120px;font-size:14px;font-weight:800}
.dayblock .mins{font-size:11.5px;font-weight:800;color:var(--muted);flex:none}
.dayblock-actions{display:flex;gap:7px;align-items:center;flex:none}
.dayblock .check{
  width:26px;height:26px;border-radius:8px;flex:none;cursor:pointer;
  border:1.8px solid var(--line-2);background:var(--panel);
  font-size:14px;font-weight:900;line-height:1;
}

/* сводка по категориям */
.cat-summary{margin-top:20px}
.cat-sum-title{font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.cat-bar{display:flex;height:12px;border-radius:99px;overflow:hidden;margin-top:9px;background:var(--panel-2)}
.cat-bar i{display:block;height:100%}
.cat-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.cat-legend span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--muted)}
.cat-legend i{width:10px;height:10px;border-radius:3px;flex:none}

/* ---------- питание ---------- */
.meal-card{
  border:1.5px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:12px 14px;transition:.15s;
}
.meal-card.on{border-color:var(--m-track);background:var(--m-track-soft)}
.meal-head{
  display:flex;align-items:center;gap:11px;width:100%;
  background:none;border:none;cursor:pointer;font-family:inherit;padding:0;color:var(--ink);
}
.meal-head .ic{font-size:20px;flex:none}
.meal-head .nm{flex:1;text-align:left;font-size:14px;font-weight:900}
.meal-head .check{
  width:24px;height:24px;border-radius:50%;flex:none;
  border:1.8px solid var(--line-2);display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;
}
.meal-card.on .meal-head .check{background:var(--m-track);border-color:var(--m-track);color:#fff}
.meal-note{
  width:100%;margin-top:10px;padding:8px 11px;font-size:13px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel-2);color:var(--ink);font-family:inherit;
}
.meal-note:focus{outline:none;border-color:var(--m-track)}

.water-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.glass{
  width:44px;height:52px;border-radius:8px 8px 14px 14px;cursor:pointer;
  border:2px solid var(--line-2);background:var(--panel);
  font-size:20px;line-height:1;transition:.15s;
}
.glass.on{border-color:var(--m-track);background:var(--m-track-soft)}
.glass.extra{border-style:dashed}
.glass:hover{transform:translateY(-2px)}

/* тон подсказок — общий с психологом, добавляем оттенки */
.psy-pattern.tone-ok{background:var(--ok-soft);border-color:transparent}
.psy-pattern.tone-warn{background:var(--warn-soft);border-color:transparent}
.psy-pattern.tone-info{background:var(--panel-2)}

/* ---------- курсы ---------- */
.course-card{
  border:1.5px solid var(--line);border-radius:var(--r);
  padding:16px;background:var(--panel);transition:.15s;
}
.course-card.full{border-color:var(--ok);background:var(--ok-soft)}
.course-card b{font-size:14.5px;font-weight:900;display:block}
.course-card .where{font-size:11.5px;color:var(--muted);font-weight:700}
.course-card .pct{font-size:13px;font-weight:900;color:var(--m-track);flex:none}
.course-card.full .pct{color:var(--ok)}
.course-meta{display:flex;gap:14px;margin-top:9px;font-size:11.5px;font-weight:800;color:var(--muted)}
.course-note{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:9px;line-height:1.5}
.course-actions{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}

/* ---------- вкладка «Тело» ---------- */
.body-note{border-left-color:var(--m-body);background:var(--m-body-soft)}
.body-note p{font-weight:700}

.need-pct{font-size:20px;font-weight:900;color:var(--m-body)}
.progress.big{height:12px}
.progress.big i{background:var(--m-body)}

.needs-list{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.need-row{
  display:flex;align-items:center;gap:13px;
  border:1.5px solid var(--line);border-radius:var(--r);
  padding:13px 15px;background:var(--panel);transition:.15s;
}
.need-row.ok{border-color:var(--m-body);background:var(--m-body-soft)}
.need-row .ic{font-size:20px;flex:none}
.need-row .txt{flex:1;min-width:0}
.need-row .txt b{display:block;font-size:13.5px;font-weight:900}
.need-row .txt span{display:block;font-size:11.5px;color:var(--muted);font-weight:800;margin-top:2px}
.need-check{
  width:30px;height:30px;border-radius:9px;flex:none;cursor:pointer;
  border:1.8px solid var(--line-2);background:var(--panel);
  font-size:15px;font-weight:900;color:var(--ink);transition:.15s;
}
.need-check.on{background:var(--m-body);border-color:var(--m-body);color:#fff}
.need-link{
  flex:none;width:30px;height:30px;border-radius:9px;text-decoration:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-weight:900;background:var(--panel-2);transition:.15s;
}
.need-link:hover{color:var(--m-body);background:var(--m-body-soft)}

/* график веса — след во времени, без нормы и без оценок */
.weight-chart{
  display:flex;align-items:flex-end;gap:6px;height:110px;margin-top:16px;
  padding-bottom:4px;border-bottom:1.5px solid var(--line);
}
.weight-chart .wbar{flex:1;min-width:16px;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:4px}
.weight-chart .wbar i{display:block;width:100%;border-radius:4px 4px 0 0;background:var(--m-body);opacity:.8}
.weight-chart .wbar span{font-size:9.5px;font-weight:800;color:var(--muted);text-align:center}

.cbt-field .hint,.field .hint{
  display:block;font-size:11.5px;color:var(--muted);font-weight:700;margin-top:6px;line-height:1.5;
}

/* ---------- плитки модулей ---------- */
.tile.track .ico{background:var(--m-track-soft);color:var(--m-track)}
.tile.track:hover{border-color:var(--m-track)}
.tile.body .ico{background:var(--m-body-soft);color:var(--m-body)}
.tile.body:hover{border-color:var(--m-body)}

@media (max-width:560px){
  .dayblock .what{min-width:100%;order:5}
  .glass{width:38px;height:46px}
}

/* ==========================================================================
   Ежедневный стрик (assets/streaks.js)
   Значок в шапке рядом с аккаунтом + окно с подробностями.
   ========================================================================== */
.streak-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px 6px 10px;margin-right:8px;
  border:1.5px solid var(--line);border-radius:99px;
  background:var(--panel);cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:900;color:var(--ink);
  transition:.15s;vertical-align:middle;
}
.streak-badge:hover{border-color:#f59e0b;background:var(--warn-soft)}
.streak-badge .fl{font-size:15px;line-height:1}
.streak-badge .fl.off{filter:grayscale(1);opacity:.45}
.streak-badge .n{color:#f59e0b;font-variant-numeric:tabular-nums}

.streak-modal{text-align:center;padding:4px 0}
.streak-big{font-size:46px;font-weight:900;line-height:1.1;color:#f59e0b}
.streak-sub{font-size:13.5px;font-weight:800;color:var(--muted);margin-top:6px}
.streak-stats{
  display:flex;gap:12px;margin-top:20px;
}
.streak-stats>div{
  flex:1;border:1.5px solid var(--line);border-radius:var(--r);
  padding:14px 10px;background:var(--panel-2);
}
.streak-stats b{display:block;font-size:20px;font-weight:900;line-height:1.2}
.streak-stats span{display:block;font-size:11px;font-weight:800;color:var(--muted);margin-top:5px}
.streak-note{
  font-size:13px;line-height:1.6;font-weight:600;color:var(--ink);
  margin-top:18px;text-align:left;
}

@media (max-width:560px){
  .streak-badge{padding:5px 9px 5px 8px;font-size:12px;margin-right:5px}
}

/* ---------- «К содержимому» для тех, кто ходит с клавиатуры ---------- */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:100;
  padding:10px 16px;border-radius:0 0 12px 12px;
  background:var(--accent);color:var(--accent-ink);
  font-weight:800;font-size:13px;transition:top .15s;
}
.skip-link:focus{top:0}