/* ═══════════════════════════════════════════════════════════════════════
   AI-ОСНОВАТЕЛЬ · ДИЗАЙН-СИСТЕМА КАБИНЕТА
   «Apple в облаках»: тёплая бумага, беспощадная типографика, волосяные
   линии вместо рамок, материалы вместо декора. Один акцент на экран.

   Здесь только общее для всех страниц: токены, сброс, шапка, кнопки,
   микро-метки. Всё остальное живёт в файле своего экрана.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Токены · светлая тема ─────────────────────────────────────────── */
:root{
  --cream:#EFF5FE; --soft:#E4EEFC; --card:#FFFFFF; --ink:#071A35; --ink2:#3F5B79;
  --taupe:#60728B; --line:rgba(126,166,219,.26); --black:#071A35; --green:#1E9A5C;
  --track:#DDE8F7; --hair:rgba(126,166,219,.26); --ring:#CFE0F5; --shade:#EFF5FE;
  --ok-bg:rgba(30,154,92,.12); --ok-ink:#0A5C2E; --focus:#0A63D8;
  --blue:#0878EE; --blue-soft:rgba(8,120,238,.11); --glass-line:rgba(255,255,255,.84);
  /* Три плотности одного стекла. Иерархию держат они, а не тёмная заливка:
     чем важнее поверхность, тем плотнее стекло и глубже тень под ней. */
  --glass-1:linear-gradient(148deg,rgba(255,255,255,.90),rgba(226,239,255,.74));
  --glass-2:linear-gradient(148deg,rgba(255,255,255,.72),rgba(228,240,255,.50));
  --glass-3:linear-gradient(148deg,rgba(255,255,255,.52),rgba(228,240,255,.34));
  --page:radial-gradient(circle at 77% 6%,rgba(255,255,255,.95) 0 8%,transparent 30%),
         linear-gradient(150deg,#F7FBFF 2%,#E3F0FE 46%,#BFDBFC 100%);
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',system-ui,Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:72px;
  --r-s:10px; --r-m:12px; --r-l:16px; --r-xl:20px;
  --ease:cubic-bezier(.2,.7,.3,1); --dur:.18s; --bar-h:64px;
  /* Схлопывание шапки: длиннее обычного перехода — движение крупное,
     и на 180 мс оно читается как рывок. Цвет сросшейся капсулы плотнее
     любого из трёх стёкол: она матовая и несёт на себе всю шапку. */
  --warp:.75s; --hull:rgba(255,255,255,.74);
  --shadow:0 22px 52px -40px rgba(24,68,124,.5);
  --shadow-hero:0 40px 80px -46px rgba(24,68,124,.62),0 12px 28px -22px rgba(24,68,124,.4);
  --inset-light:inset 0 1px #fff,inset -1px -1px rgba(111,153,220,.12);
  --paper-shadow:0 10px 28px -16px rgba(10,50,110,.26);
  --sky:.5;
}

/* ── Токены · тёмная тема ──────────────────────────────────────────────
   Не инверсия, а та же бумага при другом свете: графит вместо белого.
   Чистый чёрный с кремовым текстом даёт звон по краям букв. */
:root[data-theme="dark"]{
  --cream:#0B1420; --soft:#111C2C; --card:#152234; --ink:#E8EEF7; --ink2:#B9C8DC;
  --taupe:#8598B1; --line:rgba(126,166,219,.20); --black:#E8EEF7; --green:#5FC98C;
  --track:#1B2B40; --hair:rgba(126,166,219,.20); --ring:#2A3D57; --shade:#0B1420;
  --ok-bg:rgba(95,201,140,.14); --ok-ink:#7FD3A2; --focus:#7CC0FF;
  --blue:#4EA1FF; --blue-soft:rgba(78,161,255,.16); --glass-line:rgba(255,255,255,.10);
  --glass-1:linear-gradient(148deg,rgba(32,52,80,.92),rgba(18,32,52,.78));
  --glass-2:linear-gradient(148deg,rgba(26,44,68,.72),rgba(16,28,46,.56));
  --glass-3:linear-gradient(148deg,rgba(22,38,60,.52),rgba(14,26,42,.40));
  --hull:rgba(19,33,52,.80);
  --glow:0;
  --page:linear-gradient(168deg,#04070D 0%,#071223 48%,#0A1B33 100%);
  --shadow:0 22px 52px -40px rgba(0,0,0,.7);
  --shadow-hero:0 40px 80px -46px rgba(0,0,0,.8),0 12px 28px -22px rgba(0,0,0,.55);
  --inset-light:inset 0 1px rgba(255,255,255,.14),inset -1px -1px rgba(0,0,0,.2); --paper-shadow:0 10px 28px -16px rgba(0,0,0,.5);
  --sky:.2;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --cream:#0B1420; --soft:#111C2C; --card:#152234; --ink:#E8EEF7; --ink2:#B9C8DC;
    --taupe:#8598B1; --line:rgba(126,166,219,.20); --black:#E8EEF7; --green:#5FC98C;
    --track:#1B2B40; --hair:rgba(126,166,219,.20); --ring:#2A3D57; --shade:#0B1420;
    --ok-bg:rgba(95,201,140,.14); --ok-ink:#7FD3A2; --focus:#7CC0FF;
    --blue:#4EA1FF; --blue-soft:rgba(78,161,255,.16); --glass-line:rgba(255,255,255,.10);
    --glass-1:linear-gradient(148deg,rgba(32,52,80,.92),rgba(18,32,52,.78));
    --glass-2:linear-gradient(148deg,rgba(26,44,68,.72),rgba(16,28,46,.56));
    --glass-3:linear-gradient(148deg,rgba(22,38,60,.52),rgba(14,26,42,.40));
    --glow:0; --hull:rgba(19,33,52,.80);
  --page:linear-gradient(168deg,#04070D 0%,#071223 48%,#0A1B33 100%);
  /* Ночное небо: тот же сюжет при другом свете, а не серый прямоугольник. */
  --glow:0;
  --page:linear-gradient(168deg,#04070D 0%,#071223 48%,#0A1B33 100%);
    --shadow:0 22px 52px -40px rgba(0,0,0,.7);
  --shadow-hero:0 40px 80px -46px rgba(0,0,0,.8),0 12px 28px -22px rgba(0,0,0,.55);
  --inset-light:inset 0 1px rgba(255,255,255,.14),inset -1px -1px rgba(0,0,0,.2); --paper-shadow:0 10px 28px -16px rgba(0,0,0,.5);
    --sky:.2;
  }
}

/* ── Сброс и основа ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;min-height:100svh;color:var(--ink);font-family:var(--font);
  /* Небо, а не ровная заливка: светлый прогал сверху справа и голубой уход
     к низу. На плоском фоне стеклянные поверхности не читаются вовсе. */
  background:var(--page);background-attachment:fixed;
  line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}

/* Облака — атмосфера, а не обои: лежат по нижнему краю и растворяются вверх.
   Синеву держим настоящей: гамма продукта голубая, и приглушать её незачем.
   Файл внешний — без сети экран останется целым. */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--sky);
  background:url('cloud-sky.webp') center bottom/cover no-repeat;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.5) 30%,transparent 62%);
          mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.5) 30%,transparent 62%)}

h1,h2,h3{margin:0;letter-spacing:-.022em;line-height:1.16;overflow-wrap:anywhere;min-width:0}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
svg{display:block;flex:none}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:is(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}

/* Поля НИКОГДА не обводим. Светится рамка короба вокруг поля. */
input:focus,textarea:focus,select:focus,
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;box-shadow:none}
.box{border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);
  transition:border-color var(--dur) var(--ease)}
.box:focus-within{border-color:var(--ink2)}

/* ── Каркас ─────────────────────────────────────────────────────────── */
.wrap{position:relative;z-index:1;width:100%;max-width:1760px;margin:0 auto;padding:0 clamp(16px,3.2vw,56px)}
.sp{margin-left:auto}
.hide{display:none !important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── Шапка ──────────────────────────────────────────────────────────── */
/* Селектор с тегом не случайно: класс .bar носит ещё и полоска прогресса
   внутри .k-prog. Без header она получала sticky, фон и рамку шапки. */
header.bar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--cream) 88%,transparent);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line)}
.bar-in{width:100%;max-width:1760px;margin:0 auto;padding:var(--s3) clamp(16px,3.2vw,56px);display:flex;align-items:center;
  gap:var(--s3);min-height:var(--bar-h)}

.brand{display:inline-flex;align-items:center;gap:10px;flex:none}
.mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--black);color:var(--cream)}
.mark svg{width:17px;height:17px}
.brand b{font-size:13px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}

.nav{display:flex;gap:2px;min-width:0}
.nav a{display:inline-flex;align-items:center;border-radius:999px;padding:0 var(--s3);min-height:36px;
  font-size:13.5px;font-weight:550;color:var(--taupe);white-space:nowrap;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.nav a:hover{background:var(--soft);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--card);color:var(--ink);font-weight:620;
  box-shadow:0 1px 2px rgba(28,27,24,.06)}
:root[data-theme="dark"] .nav a[aria-current="page"]{box-shadow:none;border:1px solid var(--line)}

.themes{display:flex;gap:2px;background:var(--soft);border:1px solid var(--line);border-radius:999px;
  padding:3px;flex:none}
.themes button{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;
  border-radius:999px;padding:8px;color:var(--taupe);min-height:34px;min-width:34px;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.themes button:hover{color:var(--ink)}
.themes button[aria-pressed="true"]{background:var(--card);color:var(--ink)}
.themes svg{width:16px;height:16px}

.me{display:inline-flex;align-items:center;gap:var(--s2);border:1px solid var(--line);background:transparent;
  border-radius:999px;padding:3px var(--s3) 3px 3px;min-height:40px;flex:none;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.me:hover{background:var(--soft);border-color:var(--hair)}
.ava{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--black);
  color:var(--cream);font-size:12.5px;font-weight:650}
.me .nm{font-size:13.5px;font-weight:600;color:var(--ink2)}

/* ── Возврат на шаг назад ───────────────────────────────────────────── */
.back{display:inline-flex;align-items:center;gap:var(--s2);border:1px solid var(--line);background:transparent;
  border-radius:var(--r-m);padding:0 var(--s4);min-height:42px;font-size:14px;font-weight:600;color:var(--ink2);
  white-space:nowrap;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.back:hover{background:var(--soft);color:var(--ink)}
.back svg{width:17px;height:17px}

/* ── Микро-метка раздела ────────────────────────────────────────────── */
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--taupe)}

/* ── Кнопки ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:46px;
  padding:0 var(--s5);border-radius:var(--r-m);border:1px solid transparent;font-size:14.5px;font-weight:600;
  white-space:nowrap;font-family:inherit;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),transform .1s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px}
.solid{background:var(--black);color:var(--cream)}
.solid:hover{background:var(--ink2)}
.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.ghost:hover{background:var(--soft);border-color:var(--hair)}
/* «Пройден» — уже не действие, а отметка: нажимать нечего. */
.btn.marked{background:var(--ok-bg);color:var(--ok-ink);border-color:transparent;cursor:default}
.btn.marked:active{transform:none}

/* ── Метки состояний ────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:999px;
  font-size:11.5px;font-weight:600;white-space:nowrap;color:var(--taupe);
  border:1px solid var(--line);background:transparent}
.chip svg{width:13px;height:13px}
.chip.done{color:var(--ok-ink);border-color:transparent;background:var(--ok-bg)}
.chip.now{color:var(--cream);border-color:transparent;background:var(--black)}
.chip:empty{display:none}

/* ── Узкие экраны ───────────────────────────────────────────────────────
   Разделы уезжают на свою строку и прокручиваются вбок: прятать их в
   «гамбургер» на учебном экране нельзя — человек теряет, где он. */
@media (max-width:900px){
  .bar-in{flex-wrap:wrap;padding-bottom:0}
  .nav{order:9;width:100%;overflow-x:auto;scrollbar-width:none;padding:var(--s2) 0;
    margin-top:var(--s2);border-top:1px solid var(--line)}
  .nav::-webkit-scrollbar{display:none}
}
@media (max-width:560px){
  .wrap{padding-left:var(--s4);padding-right:var(--s4)}
  .bar-in{padding:10px var(--s4) 0}
  .me{padding:3px}
  .me .nm{display:none}
}
/* На узком телефоне марка словами не влезает, и карточка человека уезжает
   на отдельную строку — шапка становится в три этажа. Оставляем знак. */
@media (max-width:430px){
  .brand b{display:none}
}

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

/* Главное действие — синее, а не чёрное: синий и есть акцент продукта. */
.btn-solid{border:0;background:linear-gradient(160deg,#2E90FF,var(--blue));color:#fff;
  box-shadow:0 16px 34px -18px rgba(8,120,238,.8),inset 0 1px rgba(255,255,255,.34)}
.btn-solid:hover{transform:translateY(-1px)}

/* ── Меню профиля ───────────────────────────────────────────────────────
   Выбор темы переехал сюда из шапки: три кнопки на виду весили столько же,
   сколько все разделы кабинета, хотя тему выбирают один раз. */
.ctl{position:relative;display:flex;align-items:center;gap:var(--s3)}
.me{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border:1px solid var(--glass-line);
  border-radius:999px;background:var(--glass-1);cursor:pointer;font:inherit;color:var(--ink);
  box-shadow:0 6px 16px -10px rgba(24,68,124,.45);transition:transform var(--dur) var(--ease)}
.me:hover{transform:translateY(-1px)}
.me .nm{font-size:13px;font-weight:620}
.me .chev{opacity:.5;transition:transform var(--dur) var(--ease)}
.me[aria-expanded="true"] .chev{transform:rotate(180deg)}

.me-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:232px;padding:var(--s2);
  border:1px solid var(--glass-line);border-radius:var(--r-m);background:var(--glass-1);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 26px 56px -30px rgba(24,68,124,.55)}
.mm-h{padding:8px 12px 6px;font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.mm-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;border-radius:10px;
  background:transparent;font:inherit;font-size:13.5px;font-weight:540;color:var(--ink2);text-align:left;
  cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.mm-item:hover{background:var(--blue-soft);color:var(--ink)}
.mm-item svg{opacity:.7;flex:none}
/* Текущая тема отмечена весом и цветом, а не галочкой: галочка в списке из
   трёх взаимоисключающих пунктов читается как «включено», а не «выбрано». */
.mm-item[aria-pressed="true"]{color:var(--blue);font-weight:660;background:var(--blue-soft)}
.mm-item[aria-pressed="true"] svg{opacity:1}
.mm-sep{height:1px;margin:var(--s2) 6px;background:var(--hair)}

/* ═══════════════════════════════════════════════════════════════════════
   НАСТОЯЩЕЕ СТЕКЛО
   У Apple материал собран из трёх слоёв, и все три здесь:
     · преломление — фон за панелью не только размыт, но и смещён у кромки
       (SVG-фильтр #lens, включается через .has-lens: не все браузеры умеют);
     · блик — светлое пятно, которое едет за курсором, плюс постоянная
       световая кромка сверху и тень-кромка снизу;
     · тень — мягкая и глубокая, она отделяет панель от неба под ней.
   Обычное размытие даёт только второй пункт наполовину, поэтому панели и
   выглядели «похожими на стекло», а не стеклом.
   ═══════════════════════════════════════════════════════════════════════ */
.liquid{position:relative;isolation:isolate;
  background:var(--glass-2);
  -webkit-backdrop-filter:blur(18px) saturate(180%) brightness(1.04);
  backdrop-filter:blur(18px) saturate(180%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),      /* световая кромка сверху */
    inset 0 -1px 0 rgba(24,68,124,.10),       /* тёмная кромка снизу */
    0 22px 52px -34px rgba(24,68,124,.55);    /* тень, отделяющая от фона */
}
.has-lens .liquid{
  -webkit-backdrop-filter:url(#lens) blur(18px) saturate(180%) brightness(1.04);
  backdrop-filter:url(#lens) blur(18px) saturate(180%) brightness(1.04);
}

/* Кромка рисуется маской по контуру, а не рамкой: у настоящего стекла грань
   ловит свет сверху и гаснет снизу, одноцветная рамка этого не показывает. */
.liquid::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,255,255,.35) 34%,
             rgba(255,255,255,.06) 62%,rgba(255,255,255,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}

/* Блик. Мягкое пятно идёт за курсором (--gx/--gy ставит glass.js) и лежит
   в режиме soft-light, чтобы осветлять поверхность, а не белить её. */
.liquid::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120px 90px at var(--gx,70%) var(--gy,0%),rgba(255,255,255,.55),transparent 70%);
  mix-blend-mode:soft-light;opacity:.9;transition:opacity var(--dur) var(--ease)}

:root[data-theme="dark"] .liquid,
.liquid.on-dark{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 24px 56px -34px rgba(0,0,0,.7)}
:root[data-theme="dark"] .liquid::before{
  background:linear-gradient(150deg,rgba(255,255,255,.34),rgba(255,255,255,.10) 40%,
             rgba(255,255,255,.02) 66%,rgba(255,255,255,.18))}

/* Шапка — самая заметная стеклянная поверхность: под ней проезжает контент,
   и именно на ней преломление читается лучше всего. */
.bar.liquid{background:var(--glass-1);border-bottom:1px solid var(--glass-line)}

@media (prefers-reduced-motion:reduce){.liquid::after{display:none}}

/* ═══════════════════════════════════════════════════════════════════════
   ШАПКА: ТРИ КАПСУЛЫ НАВЕРХУ, ОДНА ПРИ ПРОКРУТКЕ
   Наверху страницы шапка разложена: бренд слева, разделы по центру, профиль
   справа — три отдельные стеклянные капсулы. Стоит начать листать, они
   съезжаются к центру и срастаются в одну плотную матовую капсулу; у бренда
   остаётся только знак. Так шапка занимает ровно столько места, сколько
   нужно: наверху — размах, дальше — узкая пилюля, которая не спорит с
   содержимым.

   Съезжание сделано не отступами, а распорками .mgap: они меняют flex-grow,
   а это число — его браузер умеет плавно интерполировать, в отличие от
   margin:auto и justify-content, которые переключаются рывком.
   ═══════════════════════════════════════════════════════════════════════ */
.mast{position:sticky;top:0;z-index:60;background:none !important;border:0 !important;
  box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  padding:14px 0 var(--s5);transition:padding var(--warp) var(--ease)}
.mast::before,.mast::after{display:none !important}
.mast-in{display:flex;align-items:center;width:100%}
.mast-in.wrap{padding-bottom:0}

/* Внешние распорки держат сросшуюся капсулу по центру экрана. */
.mgap{flex:0 1 0;min-width:0;transition:flex-grow var(--warp) var(--ease)}

/* Боковые слоты. Именно слоты, а не распорки между капсулами: при распорках
   меню съезжает вбок, потому что бренд шире профиля и остаток делится
   поровну, а не по краям. Равные слоты ставят меню ровно по центру.

   Основание слота — ноль, а не содержимое: только так обе стороны получают
   равные доли остатка и меню встаёт в математический центр экрана. min-width
   намеренно не сбрасываем в ноль — значение auto по умолчанию не даёт слоту
   стать уже своей капсулы, и при схлопывании она не наезжает на соседнюю. */
.side{display:flex;align-items:center;flex:1 1 0;
  transition:flex-grow var(--warp) var(--ease)}
.side-l{justify-content:flex-start}
.side-r{justify-content:flex-end}

/* Обойма: в развёрнутом виде это просто невидимый ряд во всю ширину,
   в свёрнутом — сама капсула. */
.hull{display:flex;align-items:center;flex:1 1 auto;min-width:0;border-radius:999px;padding:0;
  transition:flex-grow var(--warp) var(--ease),padding var(--warp) var(--ease),
             background-color var(--warp) var(--ease),box-shadow var(--warp) var(--ease),
             backdrop-filter var(--warp) var(--ease)}
.mast:not(.is-stuck) .hull{background:none;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.mast:not(.is-stuck) .hull::before,.mast:not(.is-stuck) .hull::after{opacity:0}

/* Капсула. Радиус во всю высоту — та самая «пилюля». */
.pod{display:flex;align-items:center;gap:6px;border-radius:999px;padding:6px;min-height:56px;flex:none;
  transition:min-height var(--warp) var(--ease),padding var(--warp) var(--ease),
             background-color var(--warp) var(--ease),box-shadow var(--warp) var(--ease),
             backdrop-filter var(--warp) var(--ease)}
/* Знаку нужен воздух слева: без него кольцо упирается в кромку капсулы. */
.pod-brand{gap:var(--s3);padding-left:16px;padding-right:20px}
.pod-nav{padding:6px}
.pod-me{width:56px;justify-content:center;padding:0;position:relative;margin:0}
.ctl.pod-me{gap:0}

.pod-nav .nav{margin:0;gap:2px;flex-wrap:nowrap}
.pod-nav .nav a{padding:10px 16px;white-space:nowrap}

/* Кнопка разделов для телефона. На широком экране её нет вовсе. */
.pod-burger{display:none;width:56px;justify-content:center;padding:0;cursor:pointer;
  border:0;color:var(--ink2);font:inherit}

/* Профиль — именно кружок: имя и галочка убраны, остаётся аватар в стеклянной
   обойме. Имя человек и так знает, а капсула справа держит форму шапки. */
.pod-me .me{border:0 !important;background:none !important;box-shadow:none !important;
  padding:0;min-height:0;gap:0}
.pod-me .me .nm,.pod-me .me .chev{display:none}
.pod-me .me .ava{width:42px;height:42px;border-radius:50%;font-size:15px;font-weight:640;
  color:#fff;background:linear-gradient(145deg,#0a82f7,#0755c9);
  transition:width var(--warp) var(--ease),height var(--warp) var(--ease)}
.pod-me:hover .ava,.pod-me .me[aria-expanded="true"] .ava{filter:brightness(1.08)}

/* Знак бренда — стеклянное «О» с подчёркиванием. Синий квадрат-подложка
   больше не нужен: логотип сам стеклянный и живёт прямо на капсуле. При
   схлопывании шапки знак слегка ужимается вместе с ней. */
.pod-brand .mark{width:auto;height:auto;background:none !important;box-shadow:none !important;
  border-radius:0;padding:0 2px}
.pod-brand .mark .lg{display:block;height:40px;width:auto;
  filter:drop-shadow(0 4px 10px rgba(24,68,124,.28));
  transition:height var(--warp) var(--ease)}
:root[data-theme="dark"] .pod-brand .mark .lg{filter:drop-shadow(0 0 12px rgba(86,150,225,.45))}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pod-brand .mark .lg{filter:drop-shadow(0 0 12px rgba(86,150,225,.45))}
}
.mast.is-stuck .pod-brand .mark .lg{height:32px}

/* Шапка плавает над содержимым — значит у неё должно быть, над чем плавать:
   тень сильнее обычной панели, иначе капсулы слипаются с текстом, который
   под ними проезжает. */
.mast .pod,.mast .hull{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(24,68,124,.12),
  0 18px 40px -26px rgba(24,68,124,.6)}
/* Тень обоймы — ТОЛЬКО в свёрнутом виде. Селектор нарочно не сильнее правила
   «наверху обойма невидима»: одно общее правило на .pod и .hull перевешивало
   его, и ночью за разложенными капсулами проступала полоса во всю ширину. */
:root[data-theme="dark"] .mast .pod,
:root[data-theme="dark"] .mast.is-stuck .hull{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
  inset 0 -1px 0 rgba(0,0,0,.3),0 20px 44px -26px rgba(0,0,0,.7)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mast .pod,
  :root:not([data-theme="light"]) .mast.is-stuck .hull{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.3),0 20px 44px -26px rgba(0,0,0,.7)}
}

/* ── Свёрнутое состояние ─────────────────────────────────────────────── */
.mast.is-stuck{padding-top:10px}
.mast.is-stuck .hull{flex-grow:0;padding:5px;gap:6px}
.mast.is-stuck .side{flex-grow:0}
.mast.is-stuck .mgap.out{flex-grow:1}

/* Стекло переезжает с трёх капсул на одну: стекло в стекле мутит картинку
   вдвое и читается как грязь, а не как слой. */
.mast.is-stuck .pod{background:none !important;box-shadow:none !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;min-height:46px}
.mast.is-stuck .pod::before,.mast.is-stuck .pod::after{opacity:0}
.mast.is-stuck .hull{background:var(--hull);
  backdrop-filter:blur(30px) saturate(200%) brightness(1.05);
  -webkit-backdrop-filter:blur(30px) saturate(200%) brightness(1.05)}
.has-lens .mast.is-stuck .hull{backdrop-filter:url(#lens) blur(30px) saturate(200%) brightness(1.05)}
.mast.is-stuck .pod-me .me .ava{width:36px;height:36px}
.mast.is-stuck .pod-me{width:46px}
.mast.is-stuck .pod-nav .nav a{padding:8px 15px}

/* От бренда остаётся знак: слово схлопывается по ширине, а не исчезает
   рывком — иначе меню дёрнется в сторону. */
/* Потолок ширины нужен только ради анимации: схлопывать нечего, если предел
   не задан. Держим его с запасом на длинное имя — при коротком лишнего
   места он не занимает, ширину задаёт сам текст. */
.pod-brand :is(.wm,.brand b){max-width:460px;opacity:1;overflow:hidden;white-space:nowrap;
  transition:max-width var(--warp) var(--ease),opacity calc(var(--warp)*.6) var(--ease)}
.mast.is-stuck .pod-brand :is(.wm,.brand b){max-width:0;opacity:0}
.mast.is-stuck .pod-brand{padding-left:10px;padding-right:10px;gap:0}

/* Кому анимация мешает — переключаем состояния без движения. */
@media (prefers-reduced-motion:reduce){
  .mast,.mast *{transition:none !important}
}

/* Содержимое не должно нырять под закреплённую шапку при переходе по якорю. */
:target{scroll-margin-top:96px}

@media (max-width:900px){
  /* Телефон: одна строка — знак слева, разделы за кнопкой, профиль справа.
     Полоса вкладок второй строкой съедала четверть экрана и растягивала
     капсулы во всю ширину — на телефоне разделам место в выпадающем листе. */
  .mast{padding-bottom:var(--s4)}
  .mgap.out{display:none}
  .side{flex:0 1 auto}
  .side-l{flex:1 1 auto}
  .side-r{margin-left:auto;display:flex;align-items:center;gap:6px}
  .pod-brand :is(.wm,.brand b),.mast.is-stuck .pod-brand :is(.wm,.brand b){display:none}
  /* Без слова в капсуле остаётся один знак — держим её кружком, как профиль
     справа: пилюля с разными отступами вокруг знака читается овалом. */
  .pod-brand{width:56px;justify-content:center;padding:0;gap:0}
  .pod-brand .mark{padding:0}
  .pod-brand .mark .lg{height:34px}
  /* Свёрнутая шапка НЕ меняет размеры кружков. Ширина капсулы не умеет
     анимироваться синхронно с аватаром: капсула схлопывается мгновенно, а
     кружок доезжает 0.75 с — и всё это время торчит из неё. На телефоне
     компактно и так; пусть при прокрутке срастается только фон. */
  .mast.is-stuck .pod{min-height:56px}
  .mast.is-stuck .pod-brand{width:56px;padding:0}
  .mast.is-stuck .pod-brand .mark .lg{height:34px}
  .mast.is-stuck .pod-me{width:56px}
  .mast.is-stuck .pod-me .me .ava{width:42px;height:42px}
  .mast.is-stuck .pod-nav .nav a{padding:14px 18px}
  .pod-burger{display:flex}
  /* Профиль на телефоне живёт в листе разделов, а не отдельным кружком:
     две кнопки рядом в шапке — это выбор без разницы, а места на телефоне
     нет. Сам блок меню переносит внутрь листа shapka.js.
     Селектор с родителем не для красоты: у капсулы есть ещё класс .ctl,
     и правило для него в cabinet.css идёт позже — при равной силе оно
     возвращало display:flex. */
  .side-r .pod-me{display:none}

  /* Лист разделов. Та же плотная капсула, что у свёрнутой шапки: это её
     продолжение, а не новая сущность. Закрыт — прозрачен и не ловит клики. */
  .pod-nav{position:fixed;left:14px;right:14px;top:calc(env(safe-area-inset-top,0px) + 78px);
    z-index:70;margin:0;padding:10px;border-radius:26px;
    /* Непрозрачный: под листом лежит текст страницы, и даже на 6% просвета
       он читается сквозь пункты меню как каша из двух слоёв. Стеклянность
       тут проигрывает читаемости. */
    background:var(--cream) !important;
    backdrop-filter:blur(30px) saturate(200%) brightness(1.05);
    -webkit-backdrop-filter:blur(30px) saturate(200%) brightness(1.05);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 70px -30px rgba(0,0,0,.55);
    opacity:0;transform:translateY(-10px) scale(.98);pointer-events:none;
    transition:opacity .28s var(--ease),transform .28s var(--ease)}
  .nav-open .pod-nav{opacity:1;transform:none;pointer-events:auto}
  .pod-nav{flex-direction:column;align-items:stretch}
  /* Порядок задаём явно: у .nav с давних пор висит order из правил старой
     шапки, и переехавший профиль оказывался ВЫШЕ разделов. */
  .pod-nav .nav{order:0;flex-direction:column;width:100%;gap:2px}
  .pod-nav .me-menu{order:1}
  .pod-nav .nav a{width:100%;padding:14px 18px;font-size:15px;min-height:48px}

  /* Меню профиля внутри листа. Специфичность выше, чем у .hide, — поэтому
     переехавший блок остаётся видимым, даже когда его «закрывает» логика
     выпадающего меню с широкого экрана. */
  .pod-nav .me-menu{display:block !important;position:static;width:100%;min-width:0;
    margin:8px 0 0;padding:8px 0 0;border:0;border-top:1px solid var(--hair);
    border-radius:0;background:none !important;box-shadow:none !important;
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    opacity:1;transform:none}
  .pod-nav .me-menu::before,.pod-nav .me-menu::after{display:none}
  .pod-nav .mm-item{width:100%;padding:13px 18px;font-size:15px;min-height:48px;border-radius:14px}
  .pod-nav .mm-h{padding:12px 18px 4px}
  .pod-nav .mm-sep{display:none}
}

/* Стеклу нужен неоднородный фон: на ровной заливке преломление не увидеть
   вовсе — смещать нечего. Кладём под содержимое несколько мягких цветных
   пятен, они же дают небу глубину.
   Пятна плотные и разноцветные именно в верхней трети: там ездит шапка,
   и кромка капсул должна что-то ломать, а не размывать белое по белому. */
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(34vw 26vw at 6% -4%,rgba(56,132,232,.55),transparent 60%),
    radial-gradient(26vw 20vw at 34% 4%,rgba(126,196,255,.5),transparent 62%),
    radial-gradient(30vw 22vw at 68% -6%,rgba(24,68,124,.3),transparent 58%),
    radial-gradient(22vw 18vw at 92% 10%,rgba(140,205,255,.5),transparent 62%),
    radial-gradient(40vw 26vw at 52% 34%,rgba(255,255,255,.55),transparent 66%),
    radial-gradient(58% 40% at 12% 100%,rgba(255,255,255,.8),transparent 62%)}
/* Ночь. Один прожектор сверху, слабый ответный свет из угла и виньетка,
   собирающая взгляд к центру, — это и есть «премиальный» фон референсов:
   не цвет, а свет. Дыхание еле заметное: свет медленно набирает силу и
   отпускает, экран живёт, но не отвлекает. */
:root[data-theme="dark"] body::after{
  background:
    radial-gradient(64vw 46vh at 50% 4%,rgba(56,130,225,.33),transparent 64%),
    radial-gradient(50vw 38vh at 86% 94%,rgba(26,80,160,.22),transparent 62%),
    radial-gradient(150% 130% at 50% 42%,transparent 52%,rgba(1,3,8,.62) 100%);
  animation:nochnoe-dyhanie 13s ease-in-out infinite alternate}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body::after{
    background:
      radial-gradient(64vw 46vh at 50% 4%,rgba(56,130,225,.33),transparent 64%),
      radial-gradient(50vw 38vh at 86% 94%,rgba(26,80,160,.22),transparent 62%),
      radial-gradient(150% 130% at 50% 42%,transparent 52%,rgba(1,3,8,.62) 100%);
    animation:nochnoe-dyhanie 13s ease-in-out infinite alternate}
  /* Облака ночью — дым у пола, как в референсе, а не голубая вата. */
  :root:not([data-theme="light"]) body::before{filter:saturate(.45) brightness(.5)}
}
:root[data-theme="dark"] body::before{filter:saturate(.45) brightness(.5)}
@keyframes nochnoe-dyhanie{from{opacity:.7}to{opacity:1}}
@media (prefers-reduced-motion:reduce){body::after{animation:none !important}}