/* Визуальный ряд GEN. Токены из claude.design, проект «GEN», версия брендбука 2.
   Направление «Точное совпадение»: оцениваем соответствие вакансии, а не человека.
   Биологических метафор нет: ни генома, ни ДНК, ни лаборатории. Фирменная графика — пересечение
   двух точечных полей (требования вакансии и опыт кандидата), бирюза только в линзе.
   Без эмодзи и восклицательных знаков, обращение «вы», предложения с точкой. */
@import url("https://fonts.googleapis.com/css2?family=Geologica:wght@300;400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&family=Noto+Serif+Display:ital,wght@1,300;1,400&family=Onest:wght@600&display=swap");
@import url("https://unpkg.com/lucide-static@0.460.0/font/lucide.css");

:root {
  --ink-0:#FFFFFF; --ink-25:#FAFBFC; --ink-50:#F4F6F8; --ink-100:#EBEEF2; --ink-200:#DCE0E6;
  --ink-300:#BCC3CD; --ink-400:#8F98A6; --ink-500:#687181; --ink-600:#4A5260; --ink-700:#2E3440;
  --ink-800:#1C212A; --ink-900:#12161C; --ink-950:#0A0D12;
  /* Молоко — тёплая бумага для светлых страниц */
  --milk-50:#F8F7F3; --milk-100:#F3F1EC; --milk-200:#E7E4DC; --milk-300:#D6D2C7;
  --deep-950:#050B16; --deep-900:#0A1628; --deep-800:#0F2240; --deep-700:#17325C;
  /* Бирюза — совпадение и одно решающее действие на экран */
  --helix-50:#E8FBF7; --helix-100:#C6F4EA; --helix-200:#94EAD8; --helix-300:#55DCC2;
  --helix-400:#1FCFB2; --helix-500:#00BFA3; --helix-600:#009E88; --helix-700:#007D6C;
  /* Данные — только в разборах и графиках, никогда в интерфейсе */
  --data-teal:#00BFA3; --data-coral:#FF5B38; --data-blue:#2F5BFF; --data-amber:#FFB020;
  --success:#009E88; --warning:#D98E00; --danger:#E5484D; --info:#2F5BFF;
  --match-high:var(--helix-500); --match-mid:var(--data-amber); --match-low:var(--ink-400);

  --font-sans:"Manrope",-apple-system,"Segoe UI",sans-serif;
  --font-display:"Geologica","Manrope",sans-serif;
  --font-serif:"Noto Serif Display","Times New Roman",serif;
  --font-mono:"IBM Plex Mono","SF Mono",ui-monospace,monospace;
  --font-logo:"Onest",-apple-system,sans-serif;

  --radius-xs:1px; --radius-sm:2px; --radius-md:3px; --radius-lg:4px; --radius-xl:6px;
  --control-h:38px; --sidebar-w:248px; --container-max:1200px;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:160ms; --dur-base:240ms;
}

/* Приложение тёмное по умолчанию; светлое остаётся страницам кандидата и документам. */
:root {
  color-scheme: dark;
  --bg-page:var(--deep-950); --bg-sunken:#030811; --surface-card:#0C1627; --surface-raised:#112036;
  --surface-glass:rgba(10,22,40,.72);
  --fg-1:#F2F5F8; --fg-2:#A9B3C2; --fg-3:#7C8797; --fg-disabled:#3A4658; --fg-inverse:var(--ink-950);
  --fg-accent:var(--helix-300);
  --border-1:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.06); --border-strong:rgba(255,255,255,.18);
  --action-primary:var(--ink-0); --action-primary-hover:var(--ink-100); --action-primary-fg:var(--ink-950);
  --action-accent:var(--helix-500); --action-accent-hover:var(--helix-600); --action-accent-fg:var(--ink-950);
  --action-secondary:rgba(255,255,255,.08); --action-secondary-hover:rgba(255,255,255,.14);
  --action-secondary-fg:#F2F5F8;
  --success-soft:rgba(0,191,163,.12); --warning-soft:rgba(255,176,32,.12);
  --danger-soft:rgba(229,72,77,.14); --info-soft:rgba(47,91,255,.16);
  --success-ink:#55DCC2; --warning-ink:#FFC857; --danger-ink:#FF8A8D; --info-ink:#8FA8FF;
  --row-hover:rgba(255,255,255,.03);
  --hairline:inset 0 0 0 1px var(--border-1);
  --shadow-md:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --focus-ring:0 0 0 3px rgba(0,191,163,.28);
  --dot-ink:rgba(255,255,255,.30);
}

/* Светлая тема для внешних страниц: молочная бумага, белые карточки, чернильный текст. */
.theme-light {
  color-scheme: light;
  --bg-page:var(--milk-100); --bg-sunken:var(--ink-50); --surface-card:var(--ink-0);
  --surface-raised:var(--ink-0); --surface-glass:rgba(255,255,255,.72);
  --fg-1:var(--ink-950); --fg-2:var(--ink-600); --fg-3:var(--ink-500); --fg-disabled:var(--ink-300);
  --fg-accent:var(--helix-700);
  --border-1:#E3E6EA; --border-2:#EEF0F3; --border-strong:#C4CAD3;
  --action-primary:var(--ink-950); --action-primary-hover:var(--ink-800); --action-primary-fg:var(--ink-0);
  --action-secondary:var(--ink-100); --action-secondary-hover:var(--ink-200); --action-secondary-fg:var(--ink-950);
  --success-soft:#E0F8F3; --warning-soft:#FFF4DC; --danger-soft:#FDECEC; --info-soft:#E6ECFF;
  --success-ink:var(--helix-700); --warning-ink:#8A5A00; --danger-ink:#B3272B; --info-ink:#1F3FBF;
  --row-hover:var(--ink-25);
  --shadow-md:0 1px 2px rgba(10,13,18,.04),0 6px 18px rgba(10,13,18,.06);
  --dot-ink:rgba(10,13,18,.30);
}

*,*::before,*::after { box-sizing:border-box }
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
body { margin:0; background:var(--bg-page); color:var(--fg-1); font:400 14px/1.55 var(--font-sans) }

/* ---------- шапка ---------- */
.gen-header {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:24px;
  height:60px; padding:0 24px; background:var(--surface-glass);
  backdrop-filter:saturate(180%) blur(20px); box-shadow:inset 0 -1px 0 var(--border-1);
}
.gen-wordmark { font:600 19px/1 var(--font-logo); letter-spacing:-.01em; color:var(--fg-1); text-decoration:none }
.gen-wordmark .dot { color:var(--helix-500) }
.gen-wordmark .suffix { font:400 10px/1 var(--font-mono); letter-spacing:.12em; color:var(--fg-3); margin-left:6px }
.gen-nav { display:flex; gap:20px }
.gen-nav a { color:var(--fg-2); text-decoration:none; font-size:13px; transition:color var(--dur-fast) var(--ease-out) }
.gen-nav a:hover { color:var(--fg-1) }
.gen-header .gen-meta { margin-left:auto }

main { max-width:var(--container-max); margin:0 auto; padding:32px 24px 80px }

/* ---------- типографика ---------- */
h1 { font:600 32px/1.15 var(--font-display); letter-spacing:-.03em; margin:0 0 8px }
h2 { font:600 21px/1.3 var(--font-display); letter-spacing:-.02em; margin:0 0 12px }
h3 { font:500 16px/1.35 var(--font-sans); margin:20px 0 8px }
p { margin:0 0 10px }
a { color:var(--fg-1); text-decoration:underline; text-decoration-color:var(--border-strong);
    text-underline-offset:3px; transition:text-decoration-color var(--dur-fast) var(--ease-out) }
a:hover { text-decoration-color:var(--helix-500) }
::selection { background:var(--helix-200); color:var(--ink-950) }
.muted { color:var(--fg-3) }
.eyebrow, .gen-eyebrow {
  font:400 10px/1.2 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3);
}
.mono, .num { font-family:var(--font-mono); font-variant-numeric:tabular-nums }
/* Засечки только для цитат клиентов и кандидатов. */
.quote { font:300 italic 19px/1.5 var(--font-serif); color:var(--fg-1) }

/* ---------- карточки ---------- */
.card {
  background:var(--surface-card); border-radius:var(--radius-lg); padding:24px; margin-bottom:16px;
  box-shadow:var(--hairline); transition:box-shadow var(--dur-base) var(--ease-out);
}
.card:hover { box-shadow:inset 0 0 0 1px var(--border-strong), var(--shadow-md) }
.card > h2:first-child, .card > h1:first-child { margin-top:0 }
.row { display:flex; gap:16px; flex-wrap:wrap }
.row > * { flex:1; min-width:280px }

.frame { position:relative; padding:24px; box-shadow:var(--hairline); border-radius:var(--radius-md) }
.frame::before, .frame::after { content:""; position:absolute; width:8px; height:8px; border:1px solid var(--border-strong) }
.frame::before { top:6px; left:6px; border-right:0; border-bottom:0 }
.frame::after { bottom:6px; right:6px; border-left:0; border-top:0 }
.frame .cap { font:400 10px/1.2 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3) }

/* ---------- формы ---------- */
label { display:block; font:500 13px/1.25 var(--font-sans); margin-top:16px; color:var(--fg-1) }
small.hint, .hint { display:block; font:400 12px/1.45 var(--font-sans); color:var(--fg-3); font-weight:400; margin-top:2px }
input[type=text], input[type=number], input[type=date], input[type=password], textarea, select {
  width:100%; margin-top:6px; padding:9px 12px; min-height:var(--control-h);
  background:var(--bg-sunken); color:var(--fg-1); border:1px solid var(--border-1);
  border-radius:var(--radius-sm); font:inherit;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
textarea { min-height:76px; resize:vertical }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--helix-500); box-shadow:var(--focus-ring) }
input::placeholder, textarea::placeholder { color:var(--fg-disabled) }
input[type=checkbox], input[type=radio] { accent-color:var(--helix-500); width:auto; margin-right:6px }

/* ---------- кнопки: 1–2 пикселя, без пилюль ---------- */
button, .btn {
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  min-height:var(--control-h); padding:0 16px; border:0; border-radius:var(--radius-sm);
  background:var(--action-primary); color:var(--action-primary-fg);
  font:600 13px/1 var(--font-sans); cursor:pointer; text-decoration:none;
  transition:background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
button:hover, .btn:hover { background:var(--action-primary-hover) }
button:active, .btn:active { transform:translateY(.5px) }
button:focus-visible { outline:none; box-shadow:var(--focus-ring) }
button.accent { background:var(--action-accent); color:var(--action-accent-fg) }
button.accent:hover { background:var(--action-accent-hover) }
button.secondary { background:var(--action-secondary); color:var(--action-secondary-fg) }
button.secondary:hover { background:var(--action-secondary-hover) }
button.danger { background:transparent; color:var(--danger-ink); box-shadow:inset 0 0 0 1px var(--border-strong) }
button.danger:hover { background:var(--danger-soft) }
button[disabled] { color:var(--fg-disabled); background:var(--action-secondary); cursor:not-allowed }
form { margin:0 }

/* ---------- таблицы ---------- */
table { width:100%; border-collapse:collapse; margin-top:8px }
th {
  font:400 10px/1.2 var(--font-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-3); text-align:left; padding:8px 12px 8px 0; border-bottom:1px solid var(--border-1);
}
td { padding:10px 12px 10px 0; border-bottom:1px solid var(--border-2); vertical-align:top }
table tr:hover td { background:var(--row-hover) }

/* ---------- уровни соответствия ---------- */
.badge {
  display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:var(--radius-xs);
  font:500 11.5px/1.4 var(--font-sans); color:var(--fg-2); background:var(--action-secondary);
}
.badge.high, .badge.ok { color:var(--success-ink); background:var(--success-soft) }
.badge.mid { color:var(--warning-ink); background:var(--warning-soft) }
.badge.low { color:var(--fg-3) }
.badge.bad { color:var(--danger-ink); background:var(--danger-soft) }

/* Шкала делениями: сколько пунктов подтверждено, без вида ложной точности. */
.ruler { display:flex; gap:2px; margin-top:6px }
.ruler i { display:block; height:6px; flex:1; background:var(--border-1) }
.ruler i.on { background:var(--helix-500) }
.ruler i.mid { background:var(--data-amber) }

/* ---------- фирменная графика: пересечение ----------
   Два точечных поля, бирюза только в линзе, точка логотипа в центре.
   Один раз на экран, никогда за текстом. */
.venn { position:relative; width:220px; height:132px; flex:none }
.venn i {
  position:absolute; top:0; width:132px; height:132px; border-radius:50%;
  background:radial-gradient(circle, var(--dot-ink) 1.1px, transparent 1.7px) 0 0/8px 8px;
  box-shadow:inset 0 0 0 1px var(--border-1);
}
.venn i:first-child { left:0 }
.venn i:nth-child(2) { left:88px }
.venn .lens {
  position:absolute; left:88px; top:0; width:44px; height:132px; overflow:hidden; border-radius:0;
  background:radial-gradient(circle, var(--helix-500) 1.6px, transparent 2.2px) 0 0/8px 8px;
  mask-image:radial-gradient(circle 66px at -44px 66px, #000 99%, transparent 100%);
}
.venn .core {
  position:absolute; left:104px; top:56px; width:16px; height:16px; border-radius:50%;
  background:var(--helix-500); box-shadow:0 0 0 6px var(--bg-page);
}
.venn-labels { display:flex; justify-content:space-between; width:220px; margin-top:10px }
.venn-labels span { font:400 10px/1.2 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3) }

.msg {
  padding:10px 12px; border-radius:var(--radius-md); margin:8px 0; white-space:pre-wrap;
  box-shadow:var(--hairline); background:var(--bg-sunken); font-size:13.5px;
}
.msg.out { background:var(--surface-raised) }
.msg.escalated { background:var(--warning-soft); color:var(--warning-ink) }
.msg.kb { background:var(--success-soft); color:var(--success-ink) }
.note { padding:10px 12px; border-radius:var(--radius-md); margin:8px 0; background:var(--warning-soft); color:var(--warning-ink) }

pre {
  white-space:pre-wrap; background:var(--bg-sunken); color:var(--fg-2);
  padding:16px; border-radius:var(--radius-md); box-shadow:var(--hairline);
  font:400 12.5px/1.5 var(--font-mono);
}
hr { border:0; border-top:1px solid var(--border-1); margin:24px 0 }
ul { margin:8px 0 8px 20px; padding:0 }
li { margin:4px 0 }

.ladder { display:flex; align-items:center; gap:12px; margin:24px 0 12px }
.ladder::after {
  content:""; flex:1; height:1px; background:var(--border-1);
}
[class^="icon-"], [class*=" icon-"] { line-height:1; display:inline-flex; font-size:16px }

@media (max-width:720px) {
  .gen-header { gap:12px; padding:0 14px }
  .gen-nav { gap:12px } .gen-header .gen-meta { display:none }
  main { padding:20px 14px 60px }
  h1 { font-size:26px }
}

/* ------------------------------------------------------------------ */
/* Публичный сайт продукта. Тот же набор токенов, что и в кабинете:    */
/* тёмная бумага, бирюза только на одном действии, рамки вместо теней. */
/* ------------------------------------------------------------------ */
.site-header {
  display:flex; align-items:center; gap:28px; padding:18px 32px;
  border-bottom:1px solid var(--border-2); position:sticky; top:0; z-index:10;
  background:var(--surface-glass); backdrop-filter:saturate(140%) blur(8px);
}
.site-nav { display:flex; gap:22px; margin-right:auto }
.site-nav a { color:var(--fg-2); text-decoration:none; font-size:14px }
.site-nav a:hover { color:var(--fg-1) }
.site-actions { display:flex; gap:10px }
.site-main { max-width:var(--container-max); margin:0 auto; padding:0 32px }

.site-hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px;
  align-items:center; padding:88px 0 72px }
.site-h1 { font:600 clamp(34px,5vw,58px)/1.04 var(--font-display); letter-spacing:-.02em; margin:12px 0 20px }
.site-lead { font-size:17px; line-height:1.6; color:var(--fg-2); max-width:56ch }
.site-cta { display:flex; gap:12px; margin-top:26px; flex-wrap:wrap }
.site-hero-art { display:flex; flex-direction:column; align-items:flex-start }

.site-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--border-2); border-top:1px solid var(--border-2); border-bottom:1px solid var(--border-2) }
.site-strip > div { background:var(--bg-page); padding:26px 22px }
.site-strip .num { font:500 30px/1 var(--font-mono); color:var(--fg-1) }
.site-strip p { margin:8px 0 0; color:var(--fg-3); font-size:13px; line-height:1.5 }

.site-section { padding:76px 0 }
.site-section-alt { border-top:1px solid var(--border-2) }
.site-section h2 { font:600 clamp(24px,3vw,34px)/1.15 var(--font-display); letter-spacing:-.015em; margin:10px 0 28px }
.site-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.site-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.site-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; align-items:start }
.site-steps h3, .site-grid h3 { font:600 17px/1.25 var(--font-display); margin:10px 0 8px }
.site-steps .cap, .site-grid .cap { font:400 10px/1.2 var(--font-mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-3) }

.site-footer { display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:36px 0 56px; border-top:1px solid var(--border-2) }

@media (max-width:980px) {
  .site-hero, .site-two { grid-template-columns:1fr; gap:36px }
  .site-steps, .site-grid, .site-strip { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .site-nav { display:none }
}
@media (max-width:560px) {
  .site-main { padding:0 18px }
  .site-header { padding:14px 18px }
  .site-steps, .site-grid, .site-strip { grid-template-columns:1fr }
}