/* =========================================================================
   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);

  /* --- движение --- */
  --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);
}

/* Самохостинг 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(--ink); 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; }

@media (max-width: 640px) {
  .masthead__inner { flex-wrap: wrap; gap: 10px var(--s4); padding: 10px 0; }
  .header-tools { width: 100%; justify-content: flex-start; }
}

/* ---------- 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(168px, 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; }
}

/* ---------- Footer ---------- */
.site-footer { margin-top: var(--s10); background: var(--surface); color: var(--muted); border-top: 1px solid var(--line); }
.site-footer .container { padding-top: var(--s6); padding-bottom: var(--s6); }
.site-footer__inner { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; font-size: var(--fs-sm); }
.site-footer b { color: var(--ink); font-weight: 650; }

/* ---------- 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 { 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; }