/* =========================================================================
   SkillBridge — дизайн-система.
   Решение 2026-06-21: современный SaaS уровня Linear / Notion.
   Спокойная нейтральная палитра, один уверенный акцент (индиго),
   тонкие границы вместо тяжёлых теней, аккуратная типографика Inter,
   небольшие скругления, плотная сетка. Без градиентных героев,
   без крупных скруглений, без «бутстраповского» вида, без CDN.
   Один акцент меняется переменной --accent.
   Шрифт самохостить: Inter (variable, латиница + кириллица + казахский).
   ========================================================================= */

:root {
  /* --- нейтральная база --- */
  --bg: #f7f8fa;             /* фон страницы (прохладный светлый) */
  --surface: #ffffff;        /* карточки / панели */
  --surface-2: #f3f4f6;      /* мягкая альтернативная поверхность / hover */
  --surface-3: #e9ebef;      /* чуть глубже (треки, заливки) */

  /* --- текст --- */
  --ink: #16181d;            /* заголовки / сильный текст */
  --text: #2c2f36;           /* основной текст */
  --muted: #656b76;          /* вторичный (AA на surface) */
  --faint: #8a909c;          /* подписи / технические лейблы */
  --on-accent: #ffffff;      /* текст на акценте */

  /* --- линии (тонкая иерархия) --- */
  --line: #e8eaee;           /* основная граница */
  --line-2: #dde0e6;         /* заметнее */
  --line-3: #ccd0d8;         /* плотная */

  /* --- один уверенный акцент (индиго в духе Linear) --- */
  --accent: #5b5fd6;         /* основной акцент */
  --accent-hover: #4c50c4;   /* hover/active */
  --accent-press: #4145b0;
  --accent-tint: #eef0fc;    /* бледная подложка */
  --accent-tint-2: #e3e6fa;
  --accent-border: #c8ccf2;  /* граница на подложке */

  /* --- семантика статусов --- */
  --ok: #15803d;     --ok-line: #b7e2c6;  --ok-bg: #ecf7f0;
  --warn: #9a6207;   --warn-line: #f0dca6; --warn-bg: #fdf6e7;
  --no: #c0362c;     --no-line: #f3c6c1;  --no-bg: #fcefed;

  /* --- типографика --- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, "Consolas", monospace;

  /* шкала размеров текста */
  --fs-xs: 11.5px; --fs-sm: 13px; --fs-base: 14.5px; --fs-md: 15.5px;
  --fs-lg: 17px;   --fs-xl: 20px;

  /* --- скругления (небольшие, без «крупных») --- */
  --r-xs: 4px; --r-sm: 6px; --r: 8px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  /* --- единая шкала отступов (сетка 4px) --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px; --s11: 96px;

  --maxw: 1180px;

  /* --- сдержанные тени (только мягкая глубина, не «тяжёлые») --- */
  --shadow-xs: 0 1px 2px rgba(18,22,31,.05);
  --shadow-sm: 0 1px 2px rgba(18,22,31,.06), 0 1px 3px rgba(18,22,31,.05);
  --shadow-md: 0 4px 12px rgba(18,22,31,.08), 0 1px 3px rgba(18,22,31,.05);
  --ring: 0 0 0 3px var(--accent-tint-2);

  /* всегда тёмная поверхность (подвал, финальный блок, плашки-логотипы) — в обеих темах */
  --night: #16181d;
  color-scheme: light;

  /* --- движение --- */
  --t: 140ms cubic-bezier(.2,.6,.2,1);
  --t-slow: 240ms cubic-bezier(.2,.6,.2,1);
  --ease-out: cubic-bezier(.16,.84,.36,1);
}

/* ---------- Тёмная тема: те же токены, другие значения.
   data-theme ставит скрипт в <head> до отрисовки (выбор пользователя или тема системы). ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0e13;  --surface: #14171f;  --surface-2: #1a1e28;  --surface-3: #232836;
  --ink: #eef0f6; --text: #c8ccd7;     --muted: #9298a6;      --faint: #6c7282;
  --line: #232835; --line-2: #2c3241;  --line-3: #3a4152;
  --accent: #7d81f2; --accent-hover: #9195f6; --accent-press: #6b6fe6;
  --accent-tint: #1b1d3a; --accent-tint-2: #262a52; --accent-border: #3a3e78;
  --ok: #4ade80;   --ok-line: #1f5236;   --ok-bg: #0e2619;
  --warn: #fbbf24; --warn-line: #5b4513; --warn-bg: #261d0b;
  --no: #f87171;   --no-line: #5e2525;   --no-bg: #2a1212;
  --night: #07080c;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);
}
/* в тёмной теме финальный блок и левая колонка входа отделяются от фона рамкой */
:root[data-theme="dark"] .cta-band, :root[data-theme="dark"] .auth-split__art { box-shadow: inset 0 0 0 1px var(--line-2); }
/* мягкая смена темы, без «прыжка» */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, fill .35s ease !important; }

/* Самохостинг Inter (variable, static/fonts, без CDN).
   Один variable-файл на диапазон Unicode покрывает все начертания 100–900.
   Кириллица + cyrillic-ext дают полное покрытие казахского (Ә Ғ Қ Ң Ө Ұ Ү Һ І). */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/Inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/Inter-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/Inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  font-feature-settings: "cv02","cv03","cv04","cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Типографика ---------- */
h1, h2, h3, h4 { font-family: var(--font-sans); color: var(--ink); font-weight: 680; line-height: 1.18; letter-spacing: -.018em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 720; letter-spacing: -.028em; }
h2 { font-size: clamp(19px, 2vw, 24px); }
h3 { font-size: var(--fs-md); font-weight: 640; letter-spacing: -.01em; }
p { margin: 0 0 1rem; text-wrap: pretty; }
strong, b { font-weight: 650; color: var(--ink); }
small { font-size: var(--fs-sm); }

a { color: var(--accent); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--accent-hover); }
::selection { background: var(--accent-tint-2); color: var(--ink); }

/* ---------- Доступность: фокус и skip-link ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
.skip-link {
  position: absolute; left: 12px; top: -56px; z-index: 200;
  background: var(--night); color: #fff; border-radius: var(--r);
  padding: 10px 16px; font: 600 13px/1 var(--font-sans);
  letter-spacing: .01em; transition: top var(--t); box-shadow: var(--shadow-md);
}
.skip-link:focus { top: 12px; }

/* --- кикеры / технические подписи (капс-лейбл) --- */
.kicker, .eyebrow {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 var(--s4); display: inline-flex; align-items: center; gap: 8px;
}
.kicker--light { color: var(--accent); }

/* ---------- Layout ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s6); }
@media (max-width: 560px) { .container { padding: 0 var(--s4); } }

/* ---------- Header / masthead ---------- */
.site-header { position: relative; z-index: 50; }

.topbar { background: var(--bg); color: var(--muted); border-bottom: 1px solid var(--line); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 34px; flex-wrap: wrap; }
.topbar__meta { font-size: 11.5px; font-weight: 500; letter-spacing: .01em; color: var(--muted); }
.topbar__meta b { color: var(--ink); font-weight: 650; }

.lang { display: inline-flex; align-items: center; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px; }
.lang button { font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--muted); background: transparent; border: 0; padding: 3px 11px; cursor: pointer; border-radius: var(--r-pill); transition: color var(--t), background var(--t); }
.lang button:hover { color: var(--ink); }
.lang button.is-active { color: var(--accent); background: var(--surface); box-shadow: var(--shadow-xs); }

.masthead { position: sticky; top: 0; z-index: 49; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow var(--t), border-color var(--t); }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding: var(--s3) 0; }
.site-header.is-scrolled .masthead { border-bottom-color: transparent; box-shadow: var(--shadow-sm); }

.brand { display: flex; align-items: center; gap: 10px; }
.brand__mark { display: inline-grid; place-items: center; width: 32px; height: 32px; color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: -.02em; background: var(--accent); border-radius: var(--r); transition: background var(--t), transform var(--t); }
.brand:hover .brand__mark { background: var(--accent-hover); }
.brand__name { font-family: var(--font-sans); font-weight: 700; color: var(--ink); font-size: var(--fs-lg); letter-spacing: -.02em; }
.brand__name:hover { color: var(--ink); }
.header-tools { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; justify-content: flex-end; }
.usermenu { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-sm); color: var(--text); flex-wrap: wrap; }
.usermenu__role { color: var(--faint); font-weight: 500; }

/* шапка: логотип · навигация · инструменты; на мобильных — бургер и выезжающее меню */
.mainnav { display: flex; gap: 2px; padding: 3px; margin: 0 auto 0 var(--s5); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent); border: 1px solid var(--line); }
.mainnav a { padding: 6px 14px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
  transition: color var(--t), background var(--t); white-space: nowrap; }
.mainnav a:hover { color: var(--ink); }
.mainnav a.is-active { color: var(--accent); background: var(--surface); box-shadow: var(--shadow-xs); }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0; cursor: pointer;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  box-shadow: var(--shadow-xs); transition: background var(--t), border-color var(--t), transform var(--t); }
.icon-btn:hover { border-color: var(--line-3); background: var(--surface-2); }
.icon-btn svg { width: 18px; height: 18px; }
/* в светлой теме показываем луну (переключить на тёмную), в тёмной — солнце */
.icon-sun, :root[data-theme="dark"] .icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun { display: block; animation: spinIn .5s var(--ease-spring) both; }
:root:not([data-theme="dark"]) .icon-moon { animation: spinIn .5s var(--ease-spring) both; }
@keyframes spinIn { from { transform: rotate(-90deg) scale(.5); opacity: 0; } }
/* бургер → крестик */
.burger { gap: 4px; align-content: center; }
.burger span { display: block; width: 16px; height: 1.8px; border-radius: 2px; background: currentColor;
  transition: transform .3s var(--ease-out), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }
.mob-only { display: none; }
.mobile-menu { border-top: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-md);
  max-height: calc(100dvh - 60px); overflow-y: auto; animation: menuIn .28s var(--ease-out) both; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } }
.mobile-menu__inner { display: flex; flex-direction: column; gap: var(--s4); padding-top: var(--s5); padding-bottom: var(--s6); }
.mobile-menu__user { display: flex; align-items: center; gap: 12px; padding: var(--s3); border-radius: var(--r-md);
  background: var(--accent-tint); color: var(--ink); }
.mobile-menu__user small { display: block; color: var(--accent); font-weight: 600; }
.mobile-menu__label { margin: 0; font-size: var(--fs-xs); font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.mobile-menu__links { display: flex; flex-direction: column; margin-top: calc(var(--s2) * -1); }
.mobile-menu__links a { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px;
  border-bottom: 1px solid var(--line); font-size: var(--fs-lg); font-weight: 600; color: var(--ink); }
.mobile-menu__links a span { color: var(--faint); transition: transform var(--t), color var(--t); }
.mobile-menu__links a:hover span, .mobile-menu__links a.is-active span { color: var(--accent); transform: translateX(3px); }
.mobile-menu__links a.is-active { color: var(--accent); }
.mobile-menu__row { display: flex; justify-content: space-between; align-items: center; }
.mobile-menu__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.mobile-menu__actions form { grid-column: 1 / -1; }
body.menu-open { overflow: hidden; }
/* ≤1080: навигация уходит в бургер; ≤860: туда же язык и вход — в шапке остаются логотип, тема и бургер */
@media (max-width: 1080px) { .mainnav { display: none; } .mob-only { display: inline-grid; } }
@media (max-width: 860px) {
  .desk-only { display: none !important; }
  .masthead__inner { min-height: 56px; padding: 8px 0; }
}
@media (min-width: 1081px) { .mobile-menu { display: none; } }
@media (min-width: 861px) { .mobile-menu__row, .mobile-menu__actions, .mobile-menu__user { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; letter-spacing: -.005em;
  line-height: 1; padding: 10px 16px; color: var(--on-accent); background: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--r); cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn:active { background: var(--accent-press); border-color: var(--accent-press); transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* акцентные алиасы остаются основной кнопкой */
.btn--accent, .btn--burgundy { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover, .btn--burgundy:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

/* вторичная (нейтральная, с тонкой границей) */
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-xs); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-3); }
.btn--ghost:active { background: var(--surface-3); }

.btn--sm { padding: 7px 12px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn--lg { padding: 13px 22px; font-size: 14.5px; }
.btn .ic { width: 15px; height: 15px; flex: none; }

/* ---------- Section heading ---------- */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); border-bottom: 1px solid var(--line); padding-bottom: var(--s4); margin-bottom: var(--s6); flex-wrap: wrap; }
.sec-head h1, .sec-head h2 { margin: 0; }
.sec-head__meta { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }

/* ---------- Cover / hero (чистый, без тёмного героя/градиента) ---------- */
.cover { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s9); align-items: center; padding: clamp(40px, 6vw, 88px) 0 clamp(36px, 4vw, 64px); }
.cover__main h1 { margin-bottom: .3em; }
.cover__lede { font-size: clamp(15.5px, 1.4vw, 18px); color: var(--muted); max-width: 560px; line-height: 1.6; }
.cover__cta { display: flex; gap: 10px; margin-top: var(--s7); flex-wrap: wrap; }
.cover__side { display: flex; align-items: stretch; }
@media (max-width: 880px) {
  .cover { grid-template-columns: 1fr; gap: var(--s7); padding-top: clamp(32px, 8vw, 56px); }
}

/* информационная панель показателей — светлая карточка */
.datapanel { flex: 1; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6) var(--s6) var(--s2); box-shadow: var(--shadow-sm); }
.datapanel .kicker, .datapanel .kicker--light { color: var(--faint); }
.datapanel__list { list-style: none; margin: 0; padding: 0; }
.datapanel__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--line); }
.datapanel__row:first-child { border-top: 0; }
.datapanel__num { font-family: var(--font-sans); font-size: 30px; font-weight: 720; color: var(--ink); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.datapanel__lab { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--muted); text-align: right; font-weight: 500; }

/* ---------- Stats — карточки-плитки ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, calc(50% - 8px)), 1fr)); gap: var(--s4); }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s5); transition: border-color var(--t), box-shadow var(--t); }
.stat:hover { border-color: var(--line-3); box-shadow: var(--shadow-sm); }
.stat__num { font-family: var(--font-sans); font-size: 30px; font-weight: 720; line-height: 1; color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat__label { color: var(--muted); font-size: var(--fs-sm); margin-top: 8px; font-weight: 500; }

/* ---------- Audience — карточки преимуществ ---------- */
.audience { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s5); margin: var(--s8) 0; }
.audience .card { padding: var(--s6); }
.audience .card__no { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: .04em; margin-bottom: var(--s4); display: block; font-weight: 600; }
.audience .card__ic { color: var(--accent); margin-bottom: var(--s3); display: inline-grid; place-items: center; width: 40px; height: 40px; background: var(--accent-tint); border-radius: var(--r-md); }
.audience .card__ic svg { width: 22px; height: 22px; display: block; }

/* ---------- Cards / panels ---------- */
.panel, .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.panel { padding: var(--s6); margin-bottom: var(--s5); box-shadow: var(--shadow-xs); }
.panel__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s5); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.panel__head h2 { margin: 0; font-size: var(--fs-lg); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: var(--s4); }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s4) var(--s5); }

.card { padding: var(--s5); border-radius: var(--r-md); position: relative; transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.card h3 { margin-bottom: 6px; font-size: var(--fs-md); }
.card__meta { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--s2); font-family: var(--font-sans); }

/* интерактивные карточки — тонкий «лифт» */
.card-grid .card { display: flex; flex-direction: column; }
@media (prefers-reduced-motion: no-preference) {
  .card-grid .card:hover { transform: translateY(-2px); }
}
.card-grid .card:hover { border-color: var(--line-3); box-shadow: var(--shadow-md); }
.card-grid .card .btn { margin-top: auto; }

/* ---------- Tables ---------- */
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
table.data th, table.data td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data thead th { color: var(--muted); font-family: var(--font-sans); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; border-bottom: 1px solid var(--line-2); background: var(--surface-2); position: sticky; top: 0; }
table.data thead th:first-child { border-top-left-radius: var(--r-sm); }
table.data thead th:last-child { border-top-right-radius: var(--r-sm); }
table.data tbody tr { transition: background var(--t); }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.right, table.data th.right { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Badges / теги ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 12px; font-weight: 550; letter-spacing: 0; padding: 3px 10px; border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--muted); background: var(--surface-2); }
.badge--ok { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); }
.badge--warn { color: var(--warn); border-color: var(--warn-line); background: var(--warn-bg); }
.badge--no { color: var(--no); border-color: var(--no-line); background: var(--no-bg); }
/* статусные плашки получают точку-индикатор */
.badge--ok::before, .badge--warn::before, .badge--no::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- Alerts / callouts ---------- */
.alert { border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: var(--r); padding: var(--s4) var(--s5); margin-bottom: var(--s5); background: var(--surface); color: var(--text); }
.alert strong { display: inline; color: var(--ink); }
.alert--info { border-left-color: var(--accent); background: var(--accent-tint); border-color: var(--accent-border); }
.alert--gate { border-left-color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.alert--warn { border-left-color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }

/* ---------- Forms ---------- */
.form-row { margin-bottom: var(--s5); }
.form-row label { display: block; font-family: var(--font-sans); font-weight: 600; margin-bottom: 7px; color: var(--ink); font-size: var(--fs-sm); letter-spacing: 0; }
.form-row input[type=text], .form-row input[type=email], .form-row input[type=password],
.form-row input[type=number], .form-row input[type=url], .form-row input[type=tel],
.form-row input[type=date], .form-row input[type=datetime-local], .form-row input[type=search],
.form-row select, .form-row textarea, .form-control {
  width: 100%; font-family: var(--font-sans); font-size: var(--fs-base); color: var(--ink); line-height: 1.5;
  padding: 9px 12px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.form-row input::placeholder, .form-control::placeholder, textarea::placeholder { color: var(--faint); }
.form-row input:hover, .form-row select:hover, .form-row textarea:hover, .form-control:hover { border-color: var(--line-3); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus, .form-control:focus { outline: 0; border-color: var(--accent); box-shadow: var(--ring); }
.form-row textarea { min-height: 116px; resize: vertical; }
.form-row input[type=file] { padding: 8px 10px; background: var(--surface-2); cursor: pointer; }
.form-row input[type=file]::file-selector-button { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 6px 12px; margin-right: 12px; cursor: pointer; transition: background var(--t), border-color var(--t); }
.form-row input[type=file]::file-selector-button:hover { background: var(--surface-2); border-color: var(--line-3); }
.helptext { display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: 6px; line-height: 1.5; }
.form-narrow { max-width: 460px; }
.auth-center { display: flex; align-items: center; justify-content: center; min-height: 68vh; }
.auth-center .panel { width: 100%; margin-bottom: 0; }
.radio-card { display: flex; align-items: center; gap: 11px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); transition: border-color var(--t), background var(--t), box-shadow var(--t); }
.radio-card:hover { border-color: var(--line-3); background: var(--surface-2); }
.radio-card input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; flex: none; cursor: pointer; }
.errorlist { color: var(--no); list-style: none; padding: 0; margin: 7px 0 0; font-size: var(--fs-sm); font-weight: 500; }
.errorlist li { padding-left: 18px; position: relative; }
.errorlist li::before { content: "!"; position: absolute; left: 0; top: 1px; width: 14px; height: 14px; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; background: var(--no); border-radius: 50%; }

/* ---------- Центрированная авторизация / регистрация ---------- */
.auth-wrap { min-height: calc(100vh - 220px); display: grid; place-items: center; padding: var(--s9) 0; }
.auth-card { width: 100%; max-width: 480px; margin: 0; padding: var(--s7); box-shadow: var(--shadow-md); }
.auth-card h1 { font-size: clamp(24px, 3vw, 30px); }

/* выбор роли — плашки в ряд */
.role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.role-grid .radio-card { margin-bottom: 0; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }
@media (max-width: 520px) { .role-grid { grid-template-columns: 1fr; } .role-grid .radio-card { flex-direction: row; align-items: center; } }

/* выбранная плашка роли — акцентная рамка + подложка */
.radio-card:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-tint); }

/* разные формы под роль */
.role-forms { margin-bottom: var(--s5); }
.role-form { display: none; border: 0; margin: 0; padding: var(--s3) 0 2px; }
.role-form.is-active { display: block; }
.role-form__head { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s4); }
@media (prefers-reduced-motion: no-preference) {
  .role-form.is-active { animation: roleFormIn .3s var(--ease-out) both; }
}
@keyframes roleFormIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* строка с чекбоксом согласия */
.form-check .check-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--fs-base); color: var(--text); line-height: 1.5; }
.form-check .check-row input[type=checkbox] { flex: none; width: 17px; height: 17px; margin-top: 1px; accent-color: var(--accent); cursor: pointer; }

/* ---------- App shell + сайдбар ---------- */
.shell { display: grid; grid-template-columns: 232px 1fr; gap: var(--s7); padding: var(--s7) 0; }
.sidenav { align-self: start; position: sticky; top: 78px; }
.sidenav__head { padding: var(--s2) var(--s3) var(--s4); margin-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.sidenav__role { font-family: var(--font-sans); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--faint); font-weight: 600; margin-bottom: 3px; }
.sidenav__title { font-family: var(--font-sans); font-weight: 650; color: var(--ink); font-size: var(--fs-md); line-height: 1.3; }
.sidenav__list { display: flex; flex-direction: column; gap: 2px; }
.sidenav a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--muted); font-family: var(--font-sans); font-size: 13.5px; font-weight: 550; border-radius: var(--r); transition: background var(--t), color var(--t); }
.sidenav a:hover { background: var(--surface-2); color: var(--ink); }
.sidenav a.is-active { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.sidenav a .ic { width: 17px; height: 17px; flex: none; color: var(--faint); transition: color var(--t); }
.sidenav a:hover .ic { color: var(--muted); }
.sidenav a.is-active .ic { color: var(--accent); }
.content { min-width: 0; }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; gap: var(--s5); padding: var(--s5) 0; }
  /* сайдбар → горизонтальная лента (min-width:0 обязателен, иначе лента распирает грид) */
  .sidenav { position: static; border-bottom: 1px solid var(--line); padding-bottom: 4px; min-width: 0; }
  .sidenav__head { display: none; }
  .sidenav__list { flex-direction: row; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sidenav__list::-webkit-scrollbar { display: none; }
  .sidenav a { white-space: nowrap; }
  .sidenav a.is-active { background: var(--accent-tint); }
}

/* ---------- Messages ---------- */
.messages { margin: var(--s5) 0; display: flex; flex-direction: column; gap: 10px; }
.messages .alert { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .messages .alert { animation: roleFormIn .35s var(--ease-out) both; }
}


/* ---------- Charts (без JS и CDN) ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
@media (max-width: 780px) { .grid-2 { grid-template-columns: 1fr; } }

.chart-cols { display: flex; align-items: flex-end; gap: 8px; height: 200px; padding-top: 8px; border-bottom: 1px solid var(--line-2); }
.chart-cols .col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.chart-cols .col__bar { width: 100%; max-width: 34px; background: var(--accent); border-radius: var(--r-sm) var(--r-sm) 0 0; min-height: 3px; transition: background var(--t); }
.chart-cols .col:hover .col__bar { background: var(--accent-hover); }
.chart-cols .col__val { font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.chart-xlabels { display: flex; gap: 8px; margin-top: 8px; }
.chart-xlabels span { flex: 1; min-width: 0; text-align: center; font-family: var(--font-sans); font-size: 10.5px; letter-spacing: .01em; color: var(--muted); }

.hbars { display: flex; flex-direction: column; gap: 13px; }
.hbar { display: grid; grid-template-columns: 164px 1fr 48px; align-items: center; gap: 13px; }
.hbar__name { font-family: var(--font-sans); font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar__track { background: var(--surface-3); border-radius: var(--r-pill); height: 16px; overflow: hidden; }
.hbar__fill { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); min-width: 3px; transition: width var(--t-slow) var(--ease-out); }
.hbar__fill--accent { background: var(--accent); }
.hbar__val { font-family: var(--font-sans); font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .hbar { grid-template-columns: 112px 1fr 42px; } }

/* ---------- Utilities ---------- */
.muted { color: var(--muted); }
.right { text-align: right; }
.mb-0 { margin-bottom: 0; }
.section { padding: var(--s9) 0; }
.ic { display: inline-block; vertical-align: middle; }
.rule { height: 0; border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }

/* =========================================================================
   Анимации — сдержанные
   ========================================================================= */
/* Важно: анимации заканчиваются на transform:none, а не translateY(0).
   Любой ненулевой transform делает элемент containing block для position:fixed —
   и модалки внутри .panel/.card позиционировались бы относительно панели, а не экрана. */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.anim-up { opacity: 0; animation: fadeUp .55s var(--ease-out) forwards; }
.anim-up.d1 { animation-delay: .06s; } .anim-up.d2 { animation-delay: .12s; } .anim-up.d3 { animation-delay: .18s; }
[data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
[data-reveal].is-visible { opacity: 1; transform: none; }
/* подстраховка: пока открыта модалка, у предков не должно быть transform */
body.modal-open [data-reveal], body.modal-open .anim-up { transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .anim-up { opacity: 1; animation: none; }
  .masthead { backdrop-filter: none; background: var(--bg); }
}

/* =========================================================================
   Печать отчётов — чистый лист без интерфейсного «хрома»
   ========================================================================= */
.print-only { display: none; }
@media print {
  .site-header, .sidenav, .site-footer, .messages, .alert,
  .no-print { display: none !important; }

  body { background: #fff; color: #000; }
  main.container, .container { max-width: none; margin: 0; padding: 0; }
  .shell { display: block; padding: 0; gap: 0; }
  .content { min-width: 0; }

  .print-only { display: block; }
  .print-head { margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1.5px solid #000; }
  .print-head__brand { font-family: var(--font-sans); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #333; font-weight: 600; }
  .print-head__title { font-family: var(--font-sans); font-size: 22px; font-weight: 700; margin: 5px 0 3px; letter-spacing: -.02em; }
  .print-head__meta { font-family: var(--font-sans); font-size: 11px; color: #444; }

  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .anim-up { opacity: 1 !important; animation: none !important; }

  .panel, .card, .stat, .badge { box-shadow: none !important; }
  .col__bar, .hbar__track, .hbar__fill, .badge, .panel__head, .stat {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  .panel, .stat, .hbar, .col, table, tr { break-inside: avoid; page-break-inside: avoid; }
  .panel { margin-top: 16px !important; border-color: #bbb; }
  .grid-2 { display: block; }
  .grid-2 > .panel:first-child { margin-top: 0 !important; }
  a { color: #000; text-decoration: none; }

  @page { margin: 14mm; }
}

/* ============================================================================
   Справочники, теги навыков, мэтчинг и верификация (правки от 2026-07-25)
   ============================================================================ */

/* обязательное поле шаблона */
.req { color: var(--no); font-weight: 700; margin-left: 2px; }

/* единый inline-чекбокс (формы и фильтры) */
.check-row { display: inline-flex; align-items: center; gap: 9px; margin: 0;
  font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-base);
  letter-spacing: 0; text-transform: none; color: var(--text); cursor: pointer; }
.check-row input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; flex: none; cursor: pointer; margin: 0; }
.form-row--check { display: flex; flex-direction: column; gap: 6px; }

/* ---- выбор навыков: кнопка + превью тегов + модальное окно со списком ---- */
.skill-picker { margin-top: var(--s3); }
.skill-field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.skill-field__preview { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.skill-field__preview:empty::before { content: attr(data-empty); color: var(--muted); font-size: var(--fs-sm); }

/* выбранный навык — удаляемый тег */
.skill-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 11px;
  border-radius: var(--r-pill); background: var(--accent-tint); border: 1px solid var(--accent-border);
  color: var(--accent); font-size: var(--fs-sm); font-weight: 550; }
.skill-tag__x { display: inline-grid; place-items: center; width: 17px; height: 17px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; }
.skill-tag__x:hover { background: var(--accent-tint-2); }

/* поле поиска (переиспользуется в модалке) */
.skill-picker__filter { width: 100%; max-width: 360px;
  font-family: var(--font-sans); font-size: var(--fs-base); color: var(--ink); line-height: 1.5;
  padding: 10px 14px 10px 38px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23656b76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E") no-repeat 13px center;
  transition: border-color var(--t), box-shadow var(--t); }
.skill-picker__filter::placeholder { color: var(--faint); }
.skill-picker__filter:hover { border-color: var(--line-3); }
.skill-picker__filter:focus { outline: 0; border-color: var(--accent); box-shadow: var(--ring); }
.skill-picker__count { font-size: var(--fs-sm); color: var(--muted); }
.skill-picker__count b { color: var(--ink); font-weight: 640; font-variant-numeric: tabular-nums; }

/* модальное окно */
.skill-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: clamp(12px, 4vh, 40px); animation: skillFade .16s ease-out; }
.skill-modal[hidden] { display: none; }
.skill-modal__backdrop { position: absolute; inset: 0; background: rgba(18,22,31,.45); }
@supports (backdrop-filter: blur(2px)) { .skill-modal__backdrop { backdrop-filter: blur(2px); } }
/* крупное модальное окно: почти во весь экран, но с видимой подложкой по краям */
.skill-modal__dialog { --modal-pad: var(--s6);
  position: relative; width: 100%; max-width: 1100px; height: 100%; max-height: 860px;
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; animation: skillPop .18s ease-out; }
.skill-modal__head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--s5) var(--modal-pad) var(--s4); border-bottom: 1px solid var(--line); }
.skill-modal__head h3 { margin: 0; font-size: var(--fs-lg); }
.skill-modal__x { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--muted);
  cursor: pointer; width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; }
.skill-modal__x:hover { background: var(--surface-2); color: var(--ink); }
.skill-modal__search { padding: var(--s4) var(--modal-pad) 0; }
.skill-modal__search .skill-picker__filter { max-width: none; }
.skill-modal__list { flex: 1; min-height: 0; padding: var(--s4) var(--modal-pad) var(--s5); overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px 10px; align-content: start; }
.skill-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border-radius: var(--r); cursor: pointer; transition: background var(--t); }
.skill-opt:hover { background: var(--surface-2); }
.skill-opt:has(input:checked) { background: var(--accent-tint); }
.skill-opt input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.skill-opt__box { flex: none; width: 18px; height: 18px; border: 1.5px solid var(--line-3);
  border-radius: 6px; display: grid; place-items: center; transition: border-color var(--t), background var(--t); }
.skill-opt:hover .skill-opt__box { border-color: var(--accent); }
.skill-opt:has(input:checked) .skill-opt__box { background: var(--accent); border-color: var(--accent); }
.skill-opt__box::after { content: "\2713"; font-size: 12px; font-weight: 700; color: #fff; opacity: 0; transform: scale(.6); transition: opacity var(--t), transform var(--t); }
.skill-opt:has(input:checked) .skill-opt__box::after { opacity: 1; transform: scale(1); }
.skill-opt__name { font-size: var(--fs-base); color: var(--text); }
.skill-opt:has(input:checked) .skill-opt__name { color: var(--ink); font-weight: 550; }
.skill-opt:focus-within { box-shadow: var(--ring); }
.skill-opt.is-hidden { display: none; }
.skill-modal__empty { grid-column: 1 / -1; padding: var(--s5); text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.skill-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) var(--modal-pad); border-top: 1px solid var(--line); background: var(--surface-2); }
.skill-modal__foot-actions { display: flex; gap: 8px; }
.skill-modal__foot-actions [hidden] { display: none; }
body.modal-open { overflow: hidden; }
@keyframes skillFade { from { opacity: 0; } }
@keyframes skillPop { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .skill-modal, .skill-modal__dialog { animation: none; } }

/* зелёная подсветка совпавшего навыка (мэтчинг) */
.badge--match { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); font-weight: 600; }
.badge--miss { color: var(--muted); border-style: dashed; }

/* балл совпадения */
.match { display: inline-flex; align-items: center; gap: 8px; }
.match__score { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm);
  padding: 2px 9px; border-radius: var(--r-pill); border: 1px solid var(--ok-line);
  color: var(--ok); background: var(--ok-bg); white-space: nowrap; }
.match__score--mid { color: var(--warn); border-color: var(--warn-line); background: var(--warn-bg); }
.match__score--low { color: var(--muted); border-color: var(--line-2); background: var(--surface-2); }
.match__bar { position: relative; width: 96px; height: 6px; border-radius: var(--r-pill);
  background: var(--surface-2); overflow: hidden; flex: none; }
.match__bar > i { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: var(--r-pill); background: var(--ok); }

/* значок «Образование подтверждено ВУЗом» — используем badge--ok с галочкой */
.verified-badge::before { content: "✓"; font-weight: 800; }

/* toggle-кнопка верификации студента у ВУЗа */
.toggle-btn { cursor: pointer; }

/* адаптивный видео-эмбед (16:9) для раздела «Обучение» */
.video-embed { position: relative; width: 100%; padding-top: 56.25%; margin-top: 12px;
  border-radius: var(--r); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line-2); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================================================================
   Справочник навыков в админ-панели (/control/skills/)
   Страница = плитки-счётчики + вертикальная форма добавления.
   Весь список живёт в полноэкранной модалке: правка, вкл/выкл, удаление.
   ============================================================================ */

/* ---- добавление списком: раскрывающийся блок под формой ---- */
.bulkadd { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.bulkadd > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }
.bulkadd > summary::-webkit-details-marker { display: none; }
.bulkadd > summary::before { content: ""; flex: none; width: 0; height: 0;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform var(--t); }
.bulkadd[open] > summary::before { transform: rotate(90deg); }
.bulkadd > summary:hover { color: var(--accent-hover); }
.bulkadd__body { padding-top: var(--s4); }
.bulkadd textarea { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; min-height: 120px; }

/* ---- плитка-кнопка: открывает менеджер справочника ---- */
.stat--action { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  position: relative; padding-right: var(--s7); }
.stat--action:hover { border-color: var(--accent-border); box-shadow: var(--shadow-sm); }
.stat--action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stat--action::after { content: ""; position: absolute; top: var(--s5); right: var(--s5);
  width: 7px; height: 7px; border-right: 1.6px solid var(--line-3); border-top: 1.6px solid var(--line-3);
  transform: rotate(45deg); transition: border-color var(--t), transform var(--t); }
.stat--action:hover::after { border-color: var(--accent); transform: rotate(45deg) translate(2px, -2px); }
.stat--action .stat__num, .stat--action .stat__label { display: block; }
.stat--action .stat__hint { display: block; margin-top: 6px; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .01em; color: var(--accent); }

/* ---- менеджер справочника: полноэкранная модалка ---- */
.skill-modal__dialog--full { max-width: none; max-height: none; }
.refm__head-sub { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.refm__filters { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s4) var(--modal-pad, var(--s6)); border-bottom: 1px solid var(--line); }
.refm__filters .skill-picker__filter { flex: 1 1 220px; max-width: 300px; }
.refm__select { flex: 0 1 190px; width: auto; border-radius: var(--r-pill); padding-left: var(--s4); }

/* переключатели состояния */
.chips { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-pill); }
.chip { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--muted);
  background: transparent; border: 0; padding: 5px 13px; border-radius: var(--r-pill); cursor: pointer;
  transition: color var(--t), background var(--t); }
.chip:hover { color: var(--ink); }
.chip.is-active { color: var(--accent); background: var(--surface); box-shadow: var(--shadow-xs); }

/* два режима одного окна: список навыков и справочник категорий */
.skill-modal[data-mode="cats"] [data-ref-pane="skills"] { display: none; }
.skill-modal:not([data-mode="cats"]) [data-ref-pane="cats"] { display: none; }

/* добавление категории — шапка панели категорий */
.catadd { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap;
  padding-bottom: var(--s5); margin-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.catadd__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); flex: 1 1 340px; min-width: 0; }
.catadd .form-row { margin-bottom: 0; min-width: 0; }
.catadd .btn { min-height: 42px; }
@media (max-width: 560px) {
  .catadd__fields { grid-template-columns: 1fr; }
  .catadd .btn { width: 100%; }
}

/* список: одна колонка, заголовки категорий */
.refm__list { display: block; }
.refm__group { display: flex; align-items: center; gap: var(--s3); padding: var(--s5) 0 var(--s2); }
.refm__group:first-of-type { padding-top: 0; }
.refm__group-name { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.refm__group-n { font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 1px 8px; font-variant-numeric: tabular-nums; }
.refm__group-line { flex: 1; height: 1px; background: var(--line); }

/* строка: галочка + поля правки + использование + действия */
.refm__row { display: flex; align-items: center; gap: var(--s3); padding: 6px 10px;
  border-radius: var(--r); transition: background var(--t); }
.refm__row:hover { background: var(--surface-2); }
.refm__row + .refm__row { box-shadow: inset 0 1px 0 var(--line); }
.refm__row[hidden] { display: none; }
.refm__box { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.refm__fields { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; flex: 1; min-width: 0; }
.refm__use { flex: none; min-width: 46px; text-align: right; font-family: var(--font-sans);
  font-size: var(--fs-xs); color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.refm__actions { display: flex; align-items: center; gap: 6px; flex: none; }
.refm__empty { padding: var(--s7); text-align: center; color: var(--muted); font-size: var(--fs-sm); }

/* поле правки в строке */
.cell-input { width: 100%; min-width: 0; font-family: var(--font-sans); font-size: var(--fs-sm);
  line-height: 1.5; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 6px 9px; text-overflow: ellipsis;
  transition: border-color var(--t), box-shadow var(--t); }
.cell-input:hover { border-color: var(--line-3); }
.cell-input:focus { outline: 0; border-color: var(--accent); box-shadow: var(--ring); }
.cell-input--name { font-size: var(--fs-base); font-weight: 550; }
.refm__row.is-off .cell-input { color: var(--muted); background: var(--surface-2); }

/* недоступное действие (удаление используемого навыка) */
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn:disabled:hover { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn--del:hover { color: var(--no); background: var(--no-bg); border-color: var(--no-line); }

@media (max-width: 900px) {
  .refm__row { flex-wrap: wrap; }
  .refm__fields { grid-template-columns: 1fr 1fr; flex: 1 1 100%; }
  .refm__actions { margin-left: auto; }
}
@media (max-width: 560px) {
  .refm__fields { grid-template-columns: 1fr; }
}

/* ============================================================================
   Studio layer (2026-10-21): выразительный лендинг, микро-взаимодействия,
   плавные переходы между страницами. Чистый CSS, без CDN.
   Всё движение отключается через prefers-reduced-motion (внизу блока).
   ============================================================================ */
:root {
  --accent-2: #8b5cf6;                    /* второй тон — только для свечений и градиентного текста */
  --grad: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}
html, body { overflow-x: clip; }
body { background: radial-gradient(1100px 520px at 50% -260px, var(--accent-tint), transparent 70%) no-repeat, var(--bg); }

/* --- анимированный фон всего сайта: три мягких цветовых пятна медленно плывут.
   Один fixed-слой, анимируется только transform — работает на компоновщике,
   без перерисовок; на слабом VPS-клиенте не грузит CPU. --- */
.bg-anim { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.bg-anim i { position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%; will-change: transform;
  animation: blobA 22s ease-in-out infinite alternate; }
.bg-anim i:nth-child(1) { left: -15vmax; top: -20vmax;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 34%, transparent), transparent); }
.bg-anim i:nth-child(2) { right: -18vmax; top: 10vh; animation-name: blobB; animation-duration: 26s;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent); }
.bg-anim i:nth-child(3) { left: 25vw; bottom: -30vmax; animation-name: blobC; animation-duration: 18s;
  background: radial-gradient(closest-side, color-mix(in srgb, #38bdf8 26%, transparent), transparent); }
@keyframes blobA { 50% { transform: translate(28vw, 18vh) scale(1.15); } 100% { transform: translate(10vw, 40vh) scale(.9); } }
@keyframes blobB { 50% { transform: translate(-30vw, 25vh) scale(.85); } 100% { transform: translate(-12vw, -12vh) scale(1.2); } }
@keyframes blobC { 50% { transform: translate(-22vw, -30vh) scale(1.2); } 100% { transform: translate(20vw, -18vh) scale(1); } }
/* тонкая точечная сетка поверх пятен, гаснет к краям */
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--line-3) 70%, transparent) 1px, transparent 0);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 70%); }
@media print { .bg-anim, body::after { display: none; } }

/* --- переходы между страницами (View Transitions, Chromium; остальные просто игнорируют) --- */
@view-transition { navigation: auto; }
.masthead { view-transition-name: masthead; }
.sidenav { view-transition-name: sidenav; }
::view-transition-old(root) { animation: vtOut .16s ease-in both; }
::view-transition-new(root) { animation: vtIn .32s var(--ease-out) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(8px); } }

/* --- бренд --- */
.brand__mark { background: var(--grad); box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent) 60%, transparent); transition: transform .5s var(--ease-spring); }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); background: var(--grad); }

/* --- кнопки: мягкое свечение, блик при наведении, стрелка --- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn:not(.btn--ghost):not(.btn--light) { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(18,22,31,.1), 0 6px 16px -8px var(--accent); }
.btn:not(.btn--ghost)::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .75s var(--ease-out); }
.btn:not(.btn--ghost):hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn .ic--arrow { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
.btn:hover .ic--arrow { transform: translateX(3px); }
.btn--light { background: #fff; color: #16181d; border-color: #fff; }
.btn--light:hover { background: #fff; color: var(--accent); border-color: #fff; }

/* --- «прожектор» за курсором на карточках и плитках (--mx/--my ставит app.js) --- */
.stat { position: relative; }
.card::before, .stat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 9%, transparent), transparent 65%);
  opacity: 0; transition: opacity .3s; }
.card:hover::before, .stat:hover::before { opacity: 1; }
.card:hover, .stat:hover { border-color: var(--accent-border); }

/* --- сайдбар: акцентная полоска активного пункта --- */
.sidenav a { position: relative; }
.sidenav a .ic { transition: color var(--t), transform .3s var(--ease-spring); }
.sidenav a:hover .ic { transform: scale(1.12); }
@media (min-width: 861px) {
  .sidenav a.is-active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px;
    border-radius: 3px; background: var(--grad); animation: growY .4s var(--ease-out) both; }
}

/* --- статус «на рассмотрении» мягко пульсирует --- */
.badge--warn::before { animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 5px transparent; } }

/* --- заголовок раздела и графики появляются с движением --- */
.content > h1 { animation: fadeUp .5s var(--ease-out) both; }
.is-visible .col__bar { transform-origin: bottom; animation: growY .9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
.is-visible .hbar__fill { transform-origin: left; animation: growX 1s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes growY { from { transform: scaleY(0); } }
@keyframes growX { from { transform: scaleX(0); } }

/* ---------- Лендинг: герой ---------- */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 9px; margin: 0 0 var(--s5);
  font-size: 12.5px; font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); box-shadow: var(--shadow-xs); backdrop-filter: blur(6px); }
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); color: var(--ok); animation: pulse 2.2s ease-out infinite; }
.pill--dark { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }

.hero { position: relative; display: grid; grid-template-columns: 1.08fr 1fr; gap: var(--s8); align-items: center;
  min-height: min(760px, calc(100vh - 110px)); padding: var(--s9) 0 var(--s8); }
.hero__bg { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; overflow: hidden; pointer-events: none; }
.hero__grid { position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--line-3) 1px, transparent 0); background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 65% at 60% 45%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 60% 45%, #000 20%, transparent 75%); opacity: .7; }
.hero__blob { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(80px); opacity: .45; animation: drift 18s ease-in-out infinite alternate; }
.hero__blob--a { background: var(--accent); top: -120px; right: 4%; }
.hero__blob--b { background: var(--accent-2); bottom: -180px; right: 30%; opacity: .3; animation-duration: 24s; animation-direction: alternate-reverse; }
@keyframes drift { to { translate: -80px 60px; scale: 1.15; } }

.hero__title { font-size: clamp(34px, 5.6vw, 74px); line-height: 1.02; letter-spacing: -.045em; font-weight: 750; margin-bottom: var(--s5); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.anim-line { display: inline-block; transform: translateY(110%); animation: lineUp .95s var(--ease-out) forwards; }
.anim-line.d1 { animation-delay: .1s; } .anim-line.d2 { animation-delay: .2s; }
@keyframes lineUp { to { transform: none; } }
.hl { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lede { font-size: clamp(16px, 1.35vw, 19px); color: var(--muted); max-width: 540px; line-height: 1.6; }

/* превью продукта (--px/--py — параллакс от курсора, ставит app.js) */
.hero__visual { position: relative; height: 460px;
  transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -14px), 0); transition: transform .4s var(--ease-out); }
.float-card { position: absolute; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 24px 60px -24px rgba(30,32,80,.28), var(--shadow-sm);
  padding: var(--s5); animation: cardIn 1s var(--ease-out) both, bob 7s ease-in-out infinite; }
.float-card--main { top: 90px; left: 0; width: 340px; z-index: 2; animation-delay: .35s, var(--d); }
.float-card--status { bottom: 20px; right: 0; z-index: 3; animation-delay: .6s, var(--d); }
.float-card--stat { top: 0; right: 0; width: 180px; z-index: 1; animation-delay: .8s, var(--d); }
@keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(.96); } }
@keyframes bob { 50% { translate: 0 -10px; } }
.fc__top { display: flex; gap: 12px; align-items: center; padding-right: 64px; }
.fc__logo { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r); background: var(--night); color: #fff; font-weight: 700; font-size: 13px; }
.fc__title { font-weight: 650; color: var(--ink); }
.fc__meta { font-size: 12.5px; color: var(--muted); }
.fc__ring { --p: 0; position: absolute; top: 16px; right: 16px; width: 54px; height: 54px; border-radius: 50%;
  background: conic-gradient(var(--ok) calc(var(--p) * 1%), var(--surface-3) 0); display: grid; place-items: center;
  animation: ring 1.6s 1s var(--ease-out) both; }
.fc__ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
.fc__ring span { position: relative; font-size: 13px; font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes ring { from { --p: 0; } }
.fc__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s5) 0 var(--s4); }
.fc__btn { text-align: center; padding: 10px; border-radius: var(--r); background: var(--grad); color: #fff; font-weight: 600; font-size: 13.5px; }
.fc__steps { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; flex-wrap: wrap; }
.fc__steps span { padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.fc__steps span.is-done { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); }
.fc__steps span.is-done::before { content: "✓ "; }
.fc__steps span.is-now { color: #fff; background: var(--grad); border-color: transparent; animation: glow 2.4s ease-in-out infinite; }
.fc__steps i { width: 18px; height: 1.5px; background: var(--line-3); flex: none; }
@keyframes glow { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent); } }
.fc__steps--dark span { border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.75); }
.fc__steps--dark span.is-done { background: rgba(255,255,255,.08); color: #9ff0bc; border-color: rgba(159,240,188,.35); }
.fc__steps--dark i { background: rgba(255,255,255,.25); }
.fc__num { font-size: 34px; font-weight: 750; letter-spacing: -.04em; color: var(--ink); line-height: 1; }
.fc__spark { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin-top: 12px; }
.fc__spark i { flex: 1; height: calc(var(--h) * 1%); border-radius: 3px 3px 0 0; background: var(--grad); opacity: .85;
  transform-origin: bottom; animation: growY .9s 1.1s var(--ease-out) both; }

/* узкие экраны: карточки превью — обычной стопкой, без абсолютных координат (иначе наезжают друг на друга) */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: var(--s8); }
  .hero__visual { height: auto; max-width: 520px; width: 100%; transform: none;
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s4); }
  .float-card { position: relative; inset: auto; }
  .float-card--main { flex: 1 1 300px; width: auto; max-width: 320px; }
  .float-card--stat { flex: 0 1 180px; width: auto; }
  .float-card--status { flex: 0 1 auto; max-width: 100%; }
}
@media (max-width: 560px) {
  .float-card--main { max-width: none; }
  .float-card--stat { display: none; }
  /* статусы в одну строку: без соединительных чёрточек, чипы компактнее */
  .float-card--status { padding: var(--s3) var(--s4); }
  .fc__steps { gap: 6px; flex-wrap: nowrap; }
  .fc__steps i { display: none; }
  .fc__steps span { padding: 4px 8px; font-size: 11.5px; }
}

/* бегущая строка навыков */
.marquee { position: relative; overflow: hidden; padding: var(--s4) 0; border-block: 1px solid var(--line);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; gap: var(--s7); width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { font-size: 15px; font-weight: 600; color: var(--faint); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s7); }
.marquee__item::after { content: "✦"; color: var(--accent-border); font-size: 11px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* секции лендинга */
.sec-intro { max-width: 640px; margin-bottom: var(--s7); }
.display { font-size: clamp(28px, 3.6vw, 46px); letter-spacing: -.035em; font-weight: 720; line-height: 1.08; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); position: relative; }
.steps::before { content: ""; position: absolute; top: 19px; left: 20px; right: 20px; height: 2px; background: var(--grad);
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-out) .2s; }
.steps.is-visible::before { transform: none; }
.step { position: relative; }
.step__no { position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--s4);
  border-radius: 50%; background: var(--surface); border: 1.5px solid var(--accent-border); color: var(--accent);
  font: 700 13px/1 var(--font-mono); box-shadow: 0 0 0 6px var(--bg); }
.steps.is-visible .step { animation: fadeUp .6s var(--ease-out) both; }
.steps.is-visible .step:nth-child(2) { animation-delay: .25s; }
.steps.is-visible .step:nth-child(3) { animation-delay: .5s; }
.steps.is-visible .step:nth-child(4) { animation-delay: .75s; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr 1fr; row-gap: var(--s7); }
  .steps::before { display: none; }
}
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

.bigstats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: hidden; }
.bigstat { padding: var(--s7) var(--s6); border-left: 1px solid var(--line); }
.bigstat:first-child { border-left: 0; }
.bigstat__num { display: block; font-size: clamp(36px, 4.4vw, 56px); font-weight: 750; letter-spacing: -.045em; line-height: 1;
  font-variant-numeric: tabular-nums; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bigstat__lab { display: block; margin-top: var(--s3); color: var(--muted); font-size: var(--fs-sm); font-weight: 550; }
@media (max-width: 760px) {
  .bigstats { grid-template-columns: 1fr 1fr; }
  .bigstat:nth-child(3) { border-left: 0; }
  .bigstat:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.audience { margin-top: 0; }
.audience .card { padding: var(--s7) var(--s6); }
.audience .card__ic { transition: transform .4s var(--ease-spring); }
.audience .card:hover .card__ic { transform: translateY(-3px) rotate(-6deg); }

.cta-band { position: relative; overflow: hidden; isolation: isolate; text-align: center; margin: var(--s9) 0 0;
  padding: clamp(48px, 7vw, 88px) var(--s6); background: var(--night); color: rgba(255,255,255,.75); border-radius: var(--r-lg); }
.cta-band::before { content: ""; position: absolute; inset: -40%; z-index: -1;
  background: radial-gradient(closest-side at 30% 40%, color-mix(in srgb, var(--accent) 55%, transparent), transparent),
              radial-gradient(closest-side at 72% 65%, color-mix(in srgb, var(--accent-2) 45%, transparent), transparent);
  animation: drift 16s ease-in-out infinite alternate; }
.cta-band h2 { color: #fff; font-size: clamp(26px, 3.4vw, 42px); letter-spacing: -.035em; }
.cta-band p { max-width: 520px; margin: 0 auto var(--s6); }

/* ---------- Вход: две колонки ---------- */
.auth-split { display: grid; grid-template-columns: 1fr 1fr; margin: var(--s7) 0; min-height: 600px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.auth-split__art { position: relative; overflow: hidden; isolation: isolate; background: var(--night); display: flex; align-items: flex-end; padding: var(--s8); }
.auth-split__art .hero__blob { z-index: -1; width: 380px; height: 380px; opacity: .55; }
.auth-split__art .hero__blob--a { top: -80px; right: -60px; }
.auth-split__art .hero__blob--b { bottom: -120px; left: -60px; right: auto; }
.auth-split__copy h2 { color: #fff; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.03em; margin-bottom: var(--s6); }
.auth-split__form { padding: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; max-width: 520px; width: 100%; margin: 0 auto; }
@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; min-height: 0; }
  .auth-split__art { display: none; }
}

/* ============================================================================
   Единая система интерфейса (2026-10-21): одни компоненты на всех экранах —
   шапка страницы, сайдбар с профилем, карточки, пустые состояния, формы.
   Inline-стили в шаблонах заменены этими классами.
   ============================================================================ */

/* --- шапка сайта: язык и профиль в одной строке --- */
.masthead__inner { min-height: 60px; }
.header-tools { gap: var(--s3); }
.userchip { display: inline-flex; align-items: center; gap: 10px; padding: 3px 12px 3px 3px; border: 1px solid var(--line);
  border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-sm); color: var(--ink); font-weight: 600; }
.userchip__role { color: var(--faint); font-weight: 500; }
@media (max-width: 640px) { .userchip__role { display: none; } }

/* аватар с инициалом */
.avatar { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--grad); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0; text-transform: uppercase; }
.avatar--lg { width: 44px; height: 44px; font-size: 17px; border-radius: var(--r-md); }
.avatar--sq { border-radius: var(--r); background: var(--night); }

/* --- сайдбар: карточка профиля сверху --- */
.sidenav { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3); box-shadow: var(--shadow-xs); }
.sidenav__head { display: flex; align-items: center; gap: 12px; padding: var(--s2) var(--s2) var(--s4); margin-bottom: var(--s3); }
.sidenav__who { min-width: 0; }
.sidenav__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidenav__status { margin-top: 4px; }
.sidenav__status .badge { font-size: 11px; padding: 1px 8px; }
.sidenav__sep { height: 1px; background: var(--line); margin: var(--s3) var(--s2); }
@media (min-width: 861px) { .sidenav a.is-active::before { left: -13px; } }
@media (max-width: 860px) {
  .sidenav { padding: 6px; border-radius: var(--r-md); }
  .sidenav__sep { display: none; }
}

/* --- шапка страницы: заголовок + подзаголовок + действия --- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4) var(--s6); flex-wrap: wrap;
  margin-bottom: var(--s6); animation: fadeUp .5s var(--ease-out) both; }
.page-head__text { min-width: 0; max-width: 720px; }
.page-head h1 { font-size: clamp(24px, 2.6vw, 32px); margin: 0; }
.page-head .kicker { margin-bottom: var(--s2); }
.page-head__sub { color: var(--muted); margin: 8px 0 0; }
.page-head__actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); margin-bottom: var(--s4); }
.back-link:hover { color: var(--accent); }
.back-link::before { content: "←"; transition: transform var(--t); }
.back-link:hover::before { transform: translateX(-3px); }

/* --- раскладка без inline-стилей --- */
.row { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--top { align-items: flex-start; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--s5); }
.form-grid--3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.form-grid .form-row--wide { grid-column: 1 / -1; }
.filter-grid .form-row { margin-bottom: 0; }
.stack > * + * { border-top: 1px solid var(--line); padding-top: var(--s5); margin-top: var(--s5); }
.prose { white-space: pre-line; }
.mt-2 { margin-top: var(--s2); } .mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); } .mt-6 { margin-top: var(--s6); }
.small { font-size: var(--fs-sm); }
.nowrap { white-space: nowrap; }
.inline-form { display: inline; margin: 0; }
.stat-row + .stat-row { margin-top: var(--s4); }
.stat-row + .panel, .stat-row + .grid-2, .stat-row + .alert, .grid-2 + .panel { margin-top: var(--s5); }

/* миниатюры: фото, логотипы */
.thumb { flex: none; width: 48px; height: 48px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.thumb--logo { object-fit: contain; padding: 4px; }
.thumb--md { width: 72px; height: 72px; border-radius: var(--r-md); }
.thumb--lg { width: 104px; height: 104px; border-radius: var(--r-lg); }
/* Обрезка фото студента (app.js): превью-квадрат тянется мышью/пальцем, ползунок — масштаб */
.photo-crop { cursor: grab; touch-action: none; }
.photo-crop:active { cursor: grabbing; }
.photo-crop__zoom:not([hidden]) { display: flex; align-items: center; gap: var(--s3); margin: var(--s2) 0; }
.photo-crop__zoom input[type=range] { flex: 1; max-width: 240px; accent-color: var(--accent); }

/* таблица в панели — горизонтальная прокрутка на узких экранах */
.table-wrap { overflow-x: auto; margin: 0 calc(var(--s6) * -1); padding: 0 var(--s6); }
.table-wrap table.data { min-width: 560px; }
.panel > .table-wrap:last-child { margin-bottom: calc(var(--s2) * -1); }

/* пустое состояние */
.empty { text-align: center; padding: var(--s8) var(--s5); color: var(--muted); }
.empty::before { content: ""; display: block; width: 44px; height: 44px; margin: 0 auto var(--s3); border-radius: var(--r-md);
  background: var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%235b5fd6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13h4l2 3h4l2-3h4'/%3E%3Cpath d='M5.5 6.5 4 13v5h16v-5l-1.5-6.5A2 2 0 0 0 16.6 5H7.4a2 2 0 0 0-1.9 1.5z'/%3E%3C/svg%3E") no-repeat center; }
.empty a { font-weight: 600; }
td.empty { padding: var(--s7) var(--s5); }
.card-grid > .empty { grid-column: 1 / -1; background: var(--surface); border: 1px dashed var(--line-3); border-radius: var(--r-lg); }

/* --- плитки показателей: акцентная полоска сверху --- */
.stat { overflow: hidden; }
.stat::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--grad);
  transform: scaleX(.18); transform-origin: left; transition: transform .5s var(--ease-out); }
.stat:hover::after { transform: none; }
.stat--action::after { all: unset; content: ""; position: absolute; top: var(--s5); right: var(--s5); width: 7px; height: 7px;
  border-right: 1.6px solid var(--line-3); border-top: 1.6px solid var(--line-3); transform: rotate(45deg); transition: border-color var(--t), transform var(--t); }
.stat--action:hover::after { border-color: var(--accent); transform: rotate(45deg) translate(2px, -2px); }

/* --- карточки: шапка и подвал --- */
.card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); }
.card__title { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.card-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.card__title h3 { margin: 0; }
.card__title .card__meta { margin: 2px 0 0; }
.card__body { margin-top: var(--s3); display: flex; flex-direction: column; gap: var(--s3); }
.card__foot { margin-top: auto; padding-top: var(--s4); display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.card-grid .card .card__foot .btn { margin-top: 0; }
.card__salary { font-weight: 650; color: var(--ink); }
.card h3 a { color: inherit; } .card h3 a:hover { color: var(--accent); }
.panel__head h2 .count { color: var(--faint); font-weight: 600; margin-left: 4px; }
.panel__head .kicker { margin: 0; }

/* --- формы: липкая панель сохранения для длинных анкет --- */
.form-actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-top: var(--s2); }
.form-actions--sticky { position: sticky; bottom: var(--s4); z-index: 20; padding: var(--s3) var(--s4);
  background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.form-actions__hint { color: var(--muted); font-size: var(--fs-sm); margin-left: auto; }
.form-row select { appearance: none; padding-right: 36px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23656b76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
select.form-control { appearance: none; padding-right: 34px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23656b76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }
.form-row select[multiple] { background-image: none; padding-right: 12px; }
.del-row { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); font-weight: 500; cursor: pointer; }
.del-row input { accent-color: var(--no); }
/* запись образования/опыта в анкете — отдельная карточка, чтобы строки не сливались */
.entry-form { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.entry-form .form-row--check { margin-bottom: 0; }

/* --- уведомления по типу сообщения --- */
.alert { box-shadow: var(--shadow-xs); }
.alert--toast { display: flex; gap: 10px; align-items: flex-start; }
.alert--success { border-left-color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.alert--error { border-left-color: var(--no); background: var(--no-bg); border-color: var(--no-line); }
.alert__text { flex: 1; }
.alert__x { flex: none; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; border-radius: var(--r-xs); }
.alert__x:hover { color: var(--ink); }
.alert.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; }

/* --- шкала прогресса --- */
.progress { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: inherit; background: var(--grad); transform-origin: left; }
.is-visible .progress > i { animation: growX 1.1s var(--ease-out) both; }

/* --- шапка детальной страницы (вакансия, организация, резюме) --- */
.detail-head { display: flex; gap: var(--s5); align-items: flex-start; }
.detail-head__main { min-width: 0; flex: 1; }
.detail-head h1 { font-size: clamp(24px, 2.8vw, 34px); margin: 4px 0 8px; }
.meta-line { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: var(--fs-sm); }
.meta-line > span { display: inline-flex; align-items: center; gap: 6px; }
.meta-line > span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--line-3); margin-right: 8px; }
.section-label { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 0 0 var(--s3); }
.page-narrow { max-width: 860px; margin: var(--s7) auto 0; }
@media (max-width: 560px) { .detail-head { flex-direction: column; } }

/* --- маленькие таймлайн-элементы (образование, опыт, события) --- */
.entry__top { display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline; flex-wrap: wrap; }
.entry__title { font-weight: 650; color: var(--ink); }
.entry__when { color: var(--faint); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* --- мелкие модификаторы вместо inline-стилей --- */
.avatar--xl { width: 72px; height: 72px; font-size: 28px; border-radius: var(--r-lg); }
.thumb--lg + .detail-head__main, .avatar--xl + .detail-head__main { padding-top: 2px; }
.grow { flex: 1; min-width: 220px; }
.self-start { align-self: start; }
.btn--block { width: 100%; }
.form-control--auto { width: auto; }
.form-actions--center { justify-content: center; }
.fc__ring--static { position: relative; top: auto; right: auto; width: 72px; height: 72px; flex: none; }
.fc__ring--static::before { inset: 6px; }
.fc__ring--static span { font-size: 15px; }
.grid-2--detail { grid-template-columns: 1.6fr 1fr; align-items: start; }
.grid-2--detail aside > .panel:last-child { margin-bottom: 0; }
@media (max-width: 780px) { .grid-2--detail { grid-template-columns: 1fr; } }
a.stat { display: block; color: inherit; }
a.stat:hover { color: inherit; }
.auth-split__alt { text-align: center; margin-top: var(--s5); }
.chips a.chip { display: inline-flex; gap: 6px; align-items: center; }

/* --- auth: общая карточка + регистрация в две колонки --- */
.auth-card { position: relative; overflow: hidden; }
.auth-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); }
.auth-split--tall { min-height: 0; }
.auth-split--tall .auth-split__art { align-items: flex-start; }
.auth-split--tall .auth-split__copy { position: sticky; top: 120px; }
.auth-split__list { list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; gap: var(--s3); color: rgba(255,255,255,.8); }
.auth-split__list li { display: flex; gap: 10px; align-items: flex-start; }
.auth-split__list li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(159,240,188,.15); color: #9ff0bc; font-size: 11px; font-weight: 700; margin-top: 2px; }

/* --- меню «ещё действия» в строке таблицы (details/summary, без JS) --- */
.row--end { justify-content: flex-end; flex-wrap: nowrap; }
.badge { white-space: nowrap; }
td .row { flex-wrap: nowrap; }
/* кнопка «Сохранить» в строке справочника — акцентная, только если строку правили */
.refm__row:not(.is-dirty) .btn[value="edit"] { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-xs); }
.refm__row:not(.is-dirty) .btn[value="edit"]::after { display: none; }
.menu { position: relative; }
.menu > summary { list-style: none; letter-spacing: .1em; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 250px; padding: 6px;
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-md); animation: fadeUp .18s var(--ease-out) both; }
.menu__list button { text-align: left; font: 500 var(--fs-sm)/1.3 var(--font-sans); color: var(--text); background: none;
  border: 0; border-radius: var(--r-sm); padding: 9px 10px; cursor: pointer; }
.menu__list button:hover { background: var(--surface-2); color: var(--ink); }
.menu__list button:disabled { opacity: .45; cursor: not-allowed; background: none; }
.menu__list button.is-danger { color: var(--no); }
.menu__list button.is-danger:hover { background: var(--no-bg); }
.chip__alert { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--warn); color: #fff; font-size: 11px; font-weight: 700; }
/* таблица с выпадающим меню не должна его обрезать */
.table-wrap:has(details[open]) { overflow: visible; }

/* --- справочник ВУЗов: читаемая таблица, добавление и правка в модальном окне --- */
.faint { color: var(--faint); }
.uni-name { font-weight: 600; color: var(--ink); }
.uni-table tr.is-off .uni-name { color: var(--muted); }
.uni-table th:nth-child(2) { width: 120px; }
.uni-table th:nth-child(3) { width: 210px; }
.uni-table th:last-child { width: 140px; }
/* ============================================================================
   Подвал: всегда прижат к низу страницы (body — колонка на всю высоту окна),
   одинаков на всех экранах. Тёмный, со свечением и контурным оттиском логотипа.
   ============================================================================ */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
.site-footer { position: relative; overflow: hidden; isolation: isolate; flex: none;
  margin-top: var(--s10); background: var(--night); color: rgba(255,255,255,.62); border-top: 0;
  padding-bottom: clamp(100px, 16vw, 250px); }  /* место под оттиск */
/* мягкое свечение сверху */
.site-footer::before { content: ""; position: absolute; inset: -40% -10% auto; height: 80%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side at 25% 60%, color-mix(in srgb, var(--accent) 40%, transparent), transparent),
              radial-gradient(closest-side at 80% 50%, color-mix(in srgb, var(--accent-2) 28%, transparent), transparent); }
/* тонкая светящаяся кромка по верхнему краю подвала */
.site-footer { background:
  linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-2) 70%, transparent) 50%, transparent) top / 100% 1px no-repeat,
  var(--night); }
/* оттиск логотипа — «тиснение»: буквы во всю ширину, внутри точечная фактура и градиент,
   светлая кромка сверху и тень снизу дают вдавленный объём; низ уходит за край */
.site-footer::after { content: attr(data-brand); position: absolute; left: 50%; bottom: 0; z-index: -1; pointer-events: none;
  transform: translate(-50%, 18%); white-space: nowrap;
  mask-image: linear-gradient(180deg, #000 35%, transparent 92%);
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 92%); font: 900 clamp(64px, 18.5vw, 300px)/.9 var(--font-sans); letter-spacing: -.07em;
  color: transparent;
  background:
    linear-gradient(105deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%) -150% 0 / 60% 100% no-repeat,  /* блик */
    radial-gradient(circle at center, rgba(255,255,255,.16) .9px, transparent 1.4px) 0 0 / 7px 7px,                     /* фактура */
    linear-gradient(180deg, rgba(167,139,250,.42) 0%, rgba(91,95,214,.16) 42%, rgba(91,95,214,0) 78%);                  /* заливка */
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 1px rgba(196,181,253,.16);
  filter: drop-shadow(0 -1px 0 rgba(255,255,255,.14)) drop-shadow(0 3px 10px rgba(0,0,0,.55)); }
.site-footer:hover::after { animation: imprintShine 2.8s var(--ease-out) both; }
@keyframes imprintShine { to { background-position: 250% 0, 0 0, 0 0; } }
.site-footer .container { padding-top: var(--s9); padding-bottom: 0; }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s7); }
.site-footer__brand p { max-width: 380px; margin: var(--s4) 0 0; font-size: var(--fs-sm); line-height: 1.65; }
.site-footer .brand__name { color: #fff; }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-sm); }
.site-footer__title { margin: 0 0 4px; font-size: var(--fs-xs); font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.site-footer a { color: rgba(255,255,255,.75); transition: color var(--t), transform var(--t); }
.site-footer__col a:hover { color: #fff; transform: translateX(3px); }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap;
  margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,.1); font-size: var(--fs-sm); }
.site-footer__top { display: inline-flex; gap: 6px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-pill); }
.site-footer__top:hover { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
@media (max-width: 760px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* ============================================================================
   Инструкции для ролей (/guide/<роль>/)
   ============================================================================ */
.guide-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: var(--s7) 0 0; padding: 4px; width: fit-content; max-width: 100%;
  background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--line); border-radius: var(--r-pill);
  backdrop-filter: blur(8px); box-shadow: var(--shadow-xs); }
.guide-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted); transition: color var(--t), background var(--t); }
.guide-tab svg { width: 17px; height: 17px; }
.guide-tab:hover { color: var(--ink); background: var(--surface-2); }
.guide-tab.is-active { color: #fff; background: var(--grad); box-shadow: 0 6px 16px -8px var(--accent); }

.guide-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; gap: var(--s7); align-items: center;
  margin: var(--s5) 0 var(--s8); padding: clamp(28px, 5vw, 56px); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.guide-hero::before { content: ""; position: absolute; inset: -50% -20% auto auto; width: 520px; height: 520px; z-index: -1;
  border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent); }
.guide-hero__ic { flex: none; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 28px;
  background: var(--grad); color: #fff; box-shadow: 0 20px 40px -18px var(--accent); transform: rotate(-6deg);
  animation: pop .7s var(--ease-spring) both; }
.guide-hero__ic svg { width: 54px; height: 54px; }
.guide-hero h1 { font-size: clamp(28px, 3.6vw, 46px); letter-spacing: -.035em; margin-bottom: var(--s3); }
.guide-hero__lede { color: var(--muted); font-size: var(--fs-md); max-width: 620px; }
@keyframes pop { from { transform: scale(.4) rotate(-30deg); opacity: 0; } }
@media (max-width: 640px) { .guide-hero { flex-direction: column; align-items: flex-start; } .guide-hero__ic { width: 76px; height: 76px; border-radius: 20px; } .guide-hero__ic svg { width: 38px; height: 38px; } }

/* шаги: номер в круге на вертикальной линии + карточка */
.guide-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 880px; position: relative; }
.guide-steps::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2) 60%, color-mix(in srgb, var(--accent-2) 10%, transparent)); }
.guide-step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--s5); padding-bottom: var(--s5); }
.guide-step__no { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent); color: var(--accent); font: 700 17px/1 var(--font-sans);
  box-shadow: 0 0 0 6px var(--bg); transition: background var(--t), color var(--t); }
.guide-step:hover .guide-step__no { background: var(--grad); color: #fff; border-color: transparent; }
.guide-step__card { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s5) var(--s6); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.guide-step:hover .guide-step__card { border-color: var(--accent-border); box-shadow: var(--shadow-md); transform: translateX(4px); }
.guide-step__ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--accent-tint); color: var(--accent); }
.guide-step__ic svg { width: 22px; height: 22px; }
.guide-step h2 { font-size: var(--fs-lg); margin: 2px 0 6px; }
.guide-step p { color: var(--text); margin: 0; }
.guide-where { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s3); padding: 4px 11px 4px 9px;
  font-size: 12.5px; font-weight: 600; color: var(--accent); background: var(--accent-tint); border: 1px solid var(--accent-border);
  border-radius: var(--r-pill); }
.guide-where svg { width: 14px; height: 14px; }
@media (max-width: 560px) {
  .guide-steps::before { left: 17px; }
  .guide-step { grid-template-columns: 36px 1fr; gap: var(--s3); }
  .guide-step__no { width: 36px; height: 36px; font-size: 14px; }
  .guide-step__card { flex-direction: column; padding: var(--s4); }
}

/* советы и вопросы */
.guide-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--s4); }
.guide-tip { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s5); }
.guide-tip__ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--warn-bg); color: var(--warn); }
.guide-tip__ic svg { width: 19px; height: 19px; }
.guide-faq-wrap { padding-top: 0; }
.card__more { display: inline-block; margin-top: var(--s4); font-size: var(--fs-sm); font-weight: 600; }
.card__more:hover { text-decoration: underline; }
.guide-faq { max-width: 880px; display: grid; gap: var(--s3); }
.faq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color var(--t), box-shadow var(--t); }
.faq[open] { border-color: var(--accent-border); box-shadow: var(--shadow-sm); }
.faq > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5);
  cursor: pointer; list-style: none; font-weight: 650; color: var(--ink); }
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-2); color: var(--accent); font-size: 18px; font-weight: 500; transition: transform .3s var(--ease-spring), background var(--t); }
.faq[open] > summary::after { transform: rotate(45deg); background: var(--accent-tint); }
.faq > p { margin: 0; padding: 0 var(--s5) var(--s5); color: var(--muted); animation: fadeUp .3s var(--ease-out) both; }

/* компактное модальное окно с формой (добавление / правка) */
.skill-modal__dialog--sm { max-width: 580px; height: auto; max-height: min(90vh, 680px); }
.skill-modal__dialog--md { max-width: 680px; max-height: 90vh; }
.learn-table th:first-child { width: 48px; }
.learn-table tr.is-off .uni-name { color: var(--muted); }
.modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s5) var(--modal-pad) var(--s2); }
[data-modal-root]:not([data-mode="add"]) [data-mode-show="add"],
[data-modal-root]:not([data-mode="edit"]) [data-mode-show="edit"] { display: none; }
/* растущее поле: весь текст виден, без ручки ресайза и полос прокрутки */
.form-row textarea[data-autogrow] { min-height: 0; height: auto; resize: none; overflow: hidden; line-height: 1.5; }
tr[id^="ref-"] { scroll-margin-top: 90px; }

/* --- регистрация: выбор роли карточками (иконка + название + подсказка) --- */
.role-pick { border: 0; padding: 0; min-width: 0; }
.role-pick legend { padding: 0; margin-bottom: 7px; font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.role-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.role-pick .role-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: var(--s5) var(--s3) var(--s4); cursor: pointer; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-md); transition: border-color var(--t), background var(--t), box-shadow var(--t), transform var(--t); }
.role-pick .role-card:hover { border-color: var(--accent-border); transform: translateY(-1px); }
.role-pick .role-card input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.role-pick .role-card__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--surface-2); color: var(--muted); transition: background var(--t), color var(--t); }
.role-pick .role-card__ic svg { width: 21px; height: 21px; }
.role-pick .role-card__name { font-weight: 650; color: var(--ink); font-size: var(--fs-base); line-height: 1.25; overflow-wrap: break-word; }
.role-pick .role-card__hint { font-size: 12px; color: var(--muted); line-height: 1.35; }
/* выбранная карточка: акцентная рамка, подложка и галочка в углу */
.role-pick .role-card:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.role-pick .role-card:has(input:checked) .role-card__ic { background: var(--grad); color: #fff; }
.role-pick .role-card::after { content: "✓"; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--accent);
  opacity: 0; transform: scale(.5); transition: opacity var(--t), transform .25s var(--ease-spring); }
.role-pick .role-card:has(input:checked)::after { opacity: 1; transform: none; }
.role-pick .role-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 520px) {
  .role-grid { grid-template-columns: 1fr; }
  /* иконка слева на две строки, справа название и подсказка — слова не рвутся */
  .role-pick .role-card { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; row-gap: 1px;
    align-items: center; text-align: left; padding: var(--s3) var(--s7) var(--s3) var(--s4); }
  .role-pick .role-card__ic { grid-row: span 2; }
}

/* ---------- Без движения для тех, кто его отключил (общее правило выше гасит анимации) ---------- */
@media (prefers-reduced-motion: reduce) {
  .anim-line, .steps::before, .hero__visual { transform: none; }
}
@media print { .anim-line { transform: none !important; } .hero__bg, .marquee { display: none; } }