:root {
  --bg: #f4f5f2;
  --panel: #ffffff;
  --ink: #17201b;
  --muted: #66706a;
  --line: #e2e5df;
  --accent: #0f6b4f;
  --accent-ink: #ffffff;
  --accent-soft: #e3f1ea;
  --warn: #a15c00;
  --warn-soft: #fff1dc;
  --danger: #b3261e;
  --danger-soft: #fbe9e7;
  --top: #0f6b4f; --good: #3d8b5f; --mid: #b07a12; --low: #9aa29d;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 30, 25, .06), 0 4px 16px rgba(20, 30, 25, .04);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111513; --panel: #181d1a; --ink: #e8ece9; --muted: #98a29c; --line: #2a312d;
    --accent: #3fbf8f; --accent-ink: #08130e; --accent-soft: #17302a;
    --warn: #e6a64a; --warn-soft: #2e2416; --danger: #f08a80; --danger-soft: #331b19;
    --top: #3fbf8f; --good: #6fae86; --mid: #d4a03f; --low: #5d6761;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
    --bg: #111513; --panel: #181d1a; --ink: #e8ece9; --muted: #98a29c; --line: #2a312d;
    --accent: #3fbf8f; --accent-ink: #08130e; --accent-soft: #17302a;
    --warn: #e6a64a; --warn-soft: #2e2416; --danger: #f08a80; --danger-soft: #331b19;
    --top: #3fbf8f; --good: #6fae86; --mid: #d4a03f; --low: #5d6761;
    --shadow: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 32px; letter-spacing: -.01em; margin: 0; }
h2 { font-size: 19px; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 0 0 8px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.mono { font-family: var(--mono); font-size: 14px; }

/* top bar */
.top {
  background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.top-in { max-width: none; margin: 0; padding: 0 40px; height: 68px; display: flex; align-items: center; gap: 24px; }
.brand { font-weight: 700; font-size: 18px; color: var(--ink); display: flex; align-items: center; gap: 9px; letter-spacing: -.01em; }
.brand-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 14px; }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a { color: var(--muted); padding: 9px 16px; border-radius: 9px; font-weight: 500; font-size: 16px; }
.nav a:hover { color: var(--ink); background: var(--bg); text-decoration: none; }
.nav a.on { color: var(--accent); background: var(--accent-soft); }
.who { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--muted); }
.who form { margin: 0; }

.wrap { max-width: none; margin: 0; padding: 32px 40px 80px; }
.head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.head p { margin: 4px 0 0; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.panel + .panel { margin-top: 16px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 2fr 1fr; }
.grid-form { grid-template-columns: minmax(0, 1fr) 440px; }
@media (max-width: 1000px) { .grid-2, .grid-form { grid-template-columns: 1fr; } }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  padding: 10px 18px; border-radius: 10px; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: var(--muted); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.danger { color: var(--danger); }
.btn.sm { padding: 7px 14px; font-size: 15px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* kpis */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 700px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; }
.kpi b { display: block; font-size: 38px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--muted); font-size: 15px; }
.kpi.hl b { color: var(--accent); }

/* tables */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 10px; border-bottom: 1px solid var(--line); }
td { padding: 14px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.pos-title { font-weight: 600; color: var(--ink); }
.table-wrap { overflow-x: auto; }

/* badges */
.badge { display: inline-block; font-size: 14px; padding: 2px 8px; border-radius: 99px; background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.badge.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.err { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* score */
.score { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; font-size: 26px; font-variant-numeric: tabular-nums; color: #fff; flex-shrink: 0; }
.score.s-top { background: var(--top); } .score.s-good { background: var(--good); }
.score.s-mid { background: var(--mid); } .score.s-low { background: var(--low); }
.score.lg { width: 76px; height: 76px; font-size: 32px; border-radius: 14px; }

/* candidate list */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: -4px 0 4px; flex-wrap: wrap; align-items: center; }
.tabs a { padding: 10px 16px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 16px; }
.tabs a.on { color: var(--ink); border-color: var(--accent); font-weight: 600; }
.tabs a:hover { text-decoration: none; color: var(--ink); }
.tabs .count { font-size: 14px; color: var(--muted); margin-left: 4px; }
.tabs .spacer { flex: 1; }
.tabs select { font: inherit; font-size: 15px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }

.cand { display: flex; gap: 16px; padding: 18px 20px 18px 16px; margin-bottom: 12px; background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--low); border-radius: var(--radius); }
.cand.s-top { border-left-color: var(--top); } .cand.s-good { border-left-color: var(--good); } .cand.s-mid { border-left-color: var(--mid); }
.cand.on { box-shadow: 0 0 0 2px var(--accent); }
.cand-main { flex: 1; min-width: 0; }
.cand-title { font-weight: 600; font-size: 19px; color: var(--ink); }
.cand-meta { color: var(--muted); font-size: 15px; display: flex; gap: 6px 14px; flex-wrap: wrap; margin: 2px 0 6px; }
.verdict { margin: 0 0 8px; font-size: 16.5px; }
.pc { display: flex; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.pc span { padding: 2px 8px; border-radius: 6px; }
.pc .pro { background: var(--accent-soft); color: var(--accent); }
.pc .con { background: var(--warn-soft); color: var(--warn); }
.cand-side { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 160px; }
.moved { padding: 14px 8px; color: var(--muted); font-size: 15px; border-bottom: 1px solid var(--line); }
.empty { padding: 40px 10px; text-align: center; color: var(--muted); }

/* forms */
label { display: block; font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.field { margin-bottom: 16px; }
.field .hint { font-size: 14px; color: var(--muted); margin-top: 4px; font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px;
}
textarea { min-height: 260px; resize: vertical; }
textarea.query { min-height: 70px; font-family: var(--mono); font-size: 13px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
@media (max-width: 700px) { .cols { grid-template-columns: 1fr; } }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 16px; margin-bottom: 10px; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.suggest-box { border: 1px dashed var(--line); border-radius: var(--radius); padding: 14px; background: var(--bg); }
.suggest-note { font-size: 15px; color: var(--muted); margin-top: 8px; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

.alert { padding: 12px 16px; border-radius: 9px; margin-bottom: 16px; font-size: 16px; }
.alert.err { background: var(--danger-soft); color: var(--danger); }
.alert.ok { background: var(--accent-soft); color: var(--accent); }
.alert.warn { background: var(--warn-soft); color: var(--warn); }
.saved { color: var(--accent); font-size: 15px; }

/* auth */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.auth .panel { width: 100%; max-width: 380px; }
.auth .brand { margin-bottom: 18px; font-size: 18px; }

/* detail */
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px 14px; font-size: 16px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.list { margin: 0; padding-left: 18px; }
.list li { margin-bottom: 4px; }
.status-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.status-buttons .btn.current { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.job { padding: 10px 0; border-bottom: 1px solid var(--line); }
.job:last-child { border-bottom: 0; }
.job-desc { white-space: pre-line; font-size: 15px; color: var(--muted); margin-top: 4px; }
.skills { display: flex; flex-wrap: wrap; gap: 6px; }
.skills span { background: var(--bg); border: 1px solid var(--line); padding: 3px 10px; border-radius: 6px; font-size: 15px; }
.runstatus { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---- баннер hh ---- */
.banner { background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid var(--line); text-align: center; padding: 8px 20px; font-size: 15px; }
.banner a { color: inherit; font-weight: 600; text-decoration: underline; }

/* ---- главная-лендинг ---- */
.hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; padding: 36px 0 56px; }
@media (max-width: 1100px) { .hero { grid-template-columns: 1fr; } }
h1.hl { font-size: 56px; line-height: 1.1; letter-spacing: -.03em; margin: 18px 0; }
@media (max-width: 700px) { h1.hl { font-size: 38px; } }
.lead { font-size: 21px; color: var(--muted); max-width: 660px; margin: 0 0 28px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn.big { padding: 16px 28px; font-size: 18px; border-radius: 12px; }
.trust { display: flex; gap: 10px 24px; flex-wrap: wrap; margin-top: 26px; color: var(--muted); font-size: 15.5px; }
.hero-card { background: var(--accent-soft); border-radius: 24px; padding: 28px; display: grid; gap: 14px; }
.hero-card .cand { margin: 0; align-items: center; }
.sec { font-size: 28px; letter-spacing: -.02em; margin: 24px 0 18px; }
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 40px; }
@media (max-width: 1000px) { .feat { grid-template-columns: 1fr; } }
.feat > div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.feat b { display: block; font-size: 19px; margin: 10px 0 6px; }
.feat p { margin: 0; color: var(--muted); }
.feat .ic { font-size: 30px; }
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 40px; }
@media (max-width: 1000px) { .flow { grid-template-columns: 1fr 1fr; } }
.flow i { font-style: normal; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; margin-bottom: 12px; }
.flow b { font-size: 19px; display: block; }
.flow p { margin: 4px 0 0; color: var(--muted); }
.cont { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-color: var(--accent); background: var(--accent-soft); }
.cont b { font-size: 19px; }

/* ---- обучение ---- */
.learn { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
@media (max-width: 1000px) { .learn { grid-template-columns: 1fr; } }
.toc { position: sticky; top: 90px; display: grid; gap: 2px; padding: 12px; }
.toc a { padding: 10px 14px; border-radius: 9px; color: var(--ink); font-size: 16px; }
.toc a:hover { background: var(--bg); text-decoration: none; }
.steps { display: grid; gap: 12px; margin-top: 16px; }
.step { display: flex; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.step .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--bg); color: var(--muted); flex-shrink: 0; }
.step.done .n { background: var(--accent); color: var(--accent-ink); }
.step.now { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.step b { display: block; font-size: 18px; }
.step p { margin: 2px 0 10px; color: var(--muted); }
.legend { display: flex; gap: 10px 22px; flex-wrap: wrap; font-size: 15.5px; color: var(--muted); }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; }
.faq { border-top: 1px solid var(--line); padding: 14px 0; }
.faq summary { font-size: 17px; font-weight: 600; cursor: pointer; }
.faq p { margin: 8px 0 0 18px; color: var(--muted); }

/* ---- позиция: список + карточка справа ---- */
.split { display: block; }
.detail .sec { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.detail .job { margin-bottom: 14px; }
/* карточка кандидата выезжает снизу поверх списка */
.sheet-bd { position: fixed; inset: 0; background: rgba(15, 20, 35, .45); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50; }
.sheet-bd.open { opacity: 1; pointer-events: auto; }
.detail { position: fixed; left: 0; right: 0; top: 64px; bottom: 0; margin: 0 auto; width: min(1100px, 100%); box-sizing: border-box; z-index: 51; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); border-radius: 24px 24px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .25); padding: 14px 18px 32px; transform: translateY(110%); transition: transform .35s cubic-bezier(.22,.8,.3,1); scrollbar-width: thin; }
.detail.open { transform: translateY(0); }
.sheet-x { position: sticky; top: 0; z-index: 5; display: block; margin: 0 0 8px auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--panel); color: var(--ink); font-size: 16px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.sheet-x:hover { background: var(--accent-soft); }
.cand { cursor: pointer; }
@media (max-width: 700px) { .detail { top: 24px; padding: 10px 10px 28px; } }
.detail h2 { font-size: 22px; margin: 0 0 4px; }
.cand-title { cursor: pointer; }
.cand-title:hover { color: var(--accent); text-decoration: none; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg label { flex: 1; margin: 0; text-align: center; padding: 10px; font-weight: 500; color: var(--muted); cursor: pointer; border-right: 1px solid var(--line); }
.seg label:last-child { border-right: 0; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.adv > summary { font-weight: 600; cursor: pointer; padding: 2px 0; }
.adv[open] > summary { margin-bottom: 14px; }
.ai-box { border: 1px dashed var(--accent); background: var(--accent-soft); }
.stepno { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 13px; margin-right: 8px; }
.pos-grid { display: grid; gap: 12px; }
.pcard { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 22px 26px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.pcard h2 a { color: var(--ink); }
.pcard .meta { display: flex; gap: 6px 18px; flex-wrap: wrap; color: var(--muted); margin-top: 4px; }
.pnum { display: flex; gap: 22px; text-align: center; align-items: center; }
.pnum b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; }
.pnum span { font-size: 14px; color: var(--muted); }
@media (max-width: 800px) { .pcard { grid-template-columns: 1fr; } }

/* масштаб по ширине окна задаёт скрипт в layout.html (плавно, на лету) */
.theme-btn { border: 1px solid var(--line); background: var(--panel); color: var(--ink); width: 40px; height: 40px; border-radius: 10px; cursor: pointer; font-size: 18px; line-height: 1; }
.theme-btn:hover { border-color: var(--muted); }

/* ---- чат с кандидатом ---- */
.panel.inner { box-shadow: none; background: var(--bg); }
.chatlog { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; padding: 4px 2px; }
.msg { display: flex; flex-direction: column; max-width: 88%; }
.msg.out { align-self: flex-end; align-items: flex-end; }
.msg.in { align-self: flex-start; }
.bub { padding: 9px 13px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); white-space: pre-line; }
.msg.out .bub { background: var(--accent-soft); border-color: transparent; }
.ins { font-size: 16px; padding: 10px 14px; border-radius: 10px; background: var(--panel); margin: 8px 0; border-left: 4px solid var(--accent); }

/* ---- аналитика ---- */
.ag { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ag .wide { grid-column: 1 / -1; }
@media (max-width: 1100px) { .ag { grid-template-columns: 1fr; } }
.bar { display: grid; grid-template-columns: 190px 1fr 60px; gap: 12px; align-items: center; margin: 12px 0; font-size: 16px; }
.bar .t { height: 16px; background: var(--bg); border-radius: 99px; overflow: hidden; }
.bar .t i { display: block; height: 100%; background: var(--accent); border-radius: 99px; min-width: 2px; }
.bar .v { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.src { font-size: 14.5px; color: var(--muted); margin-top: 12px; }

.funnel-card { box-shadow: none; }
.funnel-card .bar { grid-template-columns: 170px 1fr 50px; }

.today h2 { margin-bottom: 14px; }
.today h3 { margin: 18px 0 6px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--bg); }
.tile:hover { text-decoration: none; border-color: var(--accent); }
.tile b { display: block; font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile span { font-size: 14px; color: var(--muted); }
.tile.hot { background: var(--warn-soft); border-color: transparent; }
.tile.hot b { color: var(--warn); }
.toprow { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); color: var(--ink); }
.toprow:last-child { border-bottom: 0; }
.toprow:hover { text-decoration: none; background: var(--bg); }
.toprow .score { width: 48px; height: 48px; font-size: 20px; border-radius: 12px; }

.versus h2 { margin-bottom: 14px; }
.vs2 { display: grid; grid-template-columns: 1fr 34px 1fr; gap: 8px; align-items: stretch; margin-bottom: 10px;
  animation: vsIn .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 110ms); }
.vs2-head { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin-bottom: 8px; animation: none; }
.vs2 .was, .vs2 .now { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 16px; line-height: 1.4; transition: transform .35s, box-shadow .35s, background .35s; }
.vs2 .was { background: var(--danger-soft); color: var(--ink); }
.vs2 .now { background: var(--accent-soft); color: var(--ink); font-weight: 500; }
.vs2 i { font-style: normal; font-weight: 700; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; margin-top: 1px; }
.vs2 .was i { background: var(--danger); color: var(--panel); }
.vs2 .now i { background: var(--accent); color: var(--accent-ink); }
.vs2 .arrow { display: grid; place-items: center; color: var(--muted); font-size: 22px; transition: color .35s, transform .35s; }
.vs2.hot .now { transform: translateX(4px) scale(1.015); box-shadow: 0 6px 22px rgba(15, 107, 79, .22); }
.vs2.hot .was { transform: translateX(-2px); }
.vs2.hot .arrow { color: var(--accent); transform: translateX(4px); }
@keyframes vsIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vs2 { animation: none; } }
@media (max-width: 700px) { .vs2 { grid-template-columns: 1fr; } .vs2 .arrow { transform: rotate(90deg); height: 20px; } .vs2-head { display: none; } }


/* =====================================================================
   Оформление в стиле onhires: шрифт Manrope, плоские светло-серые плитки,
   чёрные кнопки, салатовый акцент (#e0f6a9), крупные скругления.
   ===================================================================== */
@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap; src: url(/static/fonts/manrope-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap; src: url(/static/fonts/manrope-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap; src: url(/static/fonts/manrope-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap; src: url(/static/fonts/manrope-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #ffffff; --panel: #f2f3f7; --ink: #131313; --muted: #727272; --line: #e4e5ea; --input: #ffffff;
  --accent: #131313; --accent-ink: #ffffff; --accent-soft: #e0f6a9; --lime: #e0f6a9;
  --top: #84d66f; --good: #e0f6a9; --mid: #f6de9d; --low: #e7e7e7;
  --warn: #8a5a00; --warn-soft: #fbeccb; --danger: #c62828; --danger-soft: #fdecea;
  --radius: 22px; --shadow: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0e0e; --panel: #1a1a1a; --ink: #f3f3f3; --muted: #9b9b9b; --line: #2b2b2b; --input: #0e0e0e;
    --accent: #e0f6a9; --accent-ink: #131313; --accent-soft: #2b3321; --lime: #e0f6a9;
    --top: #84d66f; --good: #b8d98a; --mid: #d9bf6a; --low: #4a4a4a;
    --warn: #f0c36b; --warn-soft: #33290f; --danger: #ff8a80; --danger-soft: #3a1c1a;
  }
}
:root[data-theme="dark"] {
  --bg: #0e0e0e; --panel: #1a1a1a; --ink: #f3f3f3; --muted: #9b9b9b; --line: #2b2b2b; --input: #0e0e0e;
  --accent: #e0f6a9; --accent-ink: #131313; --accent-soft: #2b3321; --lime: #e0f6a9;
  --top: #84d66f; --good: #b8d98a; --mid: #d9bf6a; --low: #4a4a4a;
  --warn: #f0c36b; --warn-soft: #33290f; --danger: #ff8a80; --danger-soft: #3a1c1a;
}
body { font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
h1, h2, h3 { font-family: inherit; }
h1 { font-weight: 800; letter-spacing: -.025em; }
h2 { font-weight: 800; letter-spacing: -.015em; }
a { color: var(--ink); }
.muted a, .small a, .alert a, td a, .head a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* шапка */
.top { background: var(--bg); border-bottom: 1px solid var(--line); }
.brand-mark { background: var(--accent); color: var(--accent-ink); border-radius: 9px; }
.nav a { font-weight: 700; border-radius: 99px; padding: 9px 18px; }
.nav a.on { background: var(--lime); color: #131313; }
.nav a:hover { background: var(--panel); }
.nav a.on:hover { background: var(--lime); }

/* кнопки */
.btn { border-radius: 12px; font-weight: 800; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.btn:hover { border-color: var(--ink); text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: none; opacity: .88; }
.btn.lime { background: var(--lime); color: #131313; border-color: var(--lime); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.danger { color: var(--danger); }
.btn.big { border-radius: 14px; }

/* плитки и карточки: плоские, без рамок и теней */
.panel, .kpi, .step, .pcard, .feat > div, .tile { background: var(--panel); border: 0; box-shadow: none; border-radius: var(--radius); }
.panel.inner { background: var(--bg); border: 1px solid var(--line); }
.panel.versus, .panel.funnel-card { background: var(--bg); }
.cont { background: var(--lime); color: #131313; border: 0; }
.cont .muted { color: #3c3c3c; }
.cont .btn.primary { background: #131313; color: #fff; border-color: #131313; }
.hero-card { background: var(--lime); border-radius: 32px; padding: 28px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-card { background: #20281a; } }
:root[data-theme="dark"] .hero-card { background: #20281a; }
.kpi b { font-weight: 800; letter-spacing: -.03em; }
.kpi.hl b { color: var(--ink); }
.kpi.hl { background: var(--lime); }
.kpi.hl span { color: #3c3c3c; }
.kpi.hl b { color: #131313; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kpi.hl { background: #2b3321; } :root:not([data-theme="light"]) .kpi.hl b { color: var(--lime); } :root:not([data-theme="light"]) .kpi.hl span { color: var(--muted); } }
:root[data-theme="dark"] .kpi.hl { background: #2b3321; }
:root[data-theme="dark"] .kpi.hl b { color: var(--lime); }
:root[data-theme="dark"] .kpi.hl span { color: var(--muted); }

/* поля */
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea { background: var(--input); border: 1px solid var(--line); border-radius: 12px; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--lime); border-color: var(--ink); }
.suggest-box.ai-box { background: var(--lime); border: 0; }
.suggest-box.ai-box label, .suggest-box.ai-box .hint, .suggest-box.ai-box .suggest-note, .suggest-box.ai-box .hint { color: #131313; }
.suggest-box.ai-box textarea, .suggest-box.ai-box select { background: #fff; color: #131313; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .suggest-box.ai-box { background: #20281a; } :root:not([data-theme="light"]) .suggest-box.ai-box label, :root:not([data-theme="light"]) .suggest-box.ai-box .hint { color: var(--ink); } :root:not([data-theme="light"]) .suggest-box.ai-box textarea, :root:not([data-theme="light"]) .suggest-box.ai-box select { background: var(--input); color: var(--ink); } }
:root[data-theme="dark"] .suggest-box.ai-box { background: #20281a; }
:root[data-theme="dark"] .suggest-box.ai-box label, :root[data-theme="dark"] .suggest-box.ai-box .hint { color: var(--ink); }
:root[data-theme="dark"] .suggest-box.ai-box textarea, :root[data-theme="dark"] .suggest-box.ai-box select { background: var(--input); color: var(--ink); }

/* бейджи, статусы, вкладки */
.badge { border-radius: 99px; font-weight: 700; background: var(--bg); }
.badge.on { background: var(--lime); color: #131313; }
.tabs a { border-radius: 99px; border-bottom: 0; margin: 0; font-weight: 700; padding: 9px 18px; }
.tabs { border-bottom: 0; gap: 6px; }
.tabs a.on { background: var(--ink); color: var(--bg); }
.tabs a:hover { background: var(--panel); color: var(--ink); }
.tabs a.on:hover { background: var(--ink); color: var(--bg); }
.seg label:has(input:checked) { background: var(--lime); color: #131313; }

/* оценка: салатовая шкала вместо тёмно-зелёной */
.score { color: #131313; font-weight: 800; }
.score.s-low { color: var(--muted); }
.cand { background: var(--panel); border: 0; border-left: 6px solid var(--low); }
.cand.s-top { border-left-color: var(--top); }
.cand.s-good { border-left-color: #b6e08a; }
.cand.s-mid { border-left-color: var(--mid); }
.cand.on { box-shadow: 0 0 0 2px var(--ink); }
.pc .pro { background: var(--lime); color: #131313; }
.msg.out .bub { background: var(--lime); color: #131313; }
.bub { background: var(--bg); border: 1px solid var(--line); }
.status-buttons .btn.current { background: var(--lime); color: #131313; border-color: var(--lime); }

/* лендинг */
h1.hl { font-weight: 800; letter-spacing: -.035em; line-height: 1.05; font-size: clamp(36px, 3.5vw, 58px); }
h1.hl em { font-style: normal; background: linear-gradient(transparent 58%, var(--lime) 58%); padding: 0 .08em; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) h1.hl em { background: linear-gradient(transparent 58%, #3d4a2a 58%); } }
:root[data-theme="dark"] h1.hl em { background: linear-gradient(transparent 58%, #3d4a2a 58%); }
.lead { font-weight: 500; }
.trust span { background: var(--panel); border-radius: 99px; padding: 6px 14px; font-weight: 600; }
.sec { font-weight: 800; letter-spacing: -.025em; font-size: clamp(26px, 2.6vw, 40px); }
.feat .ic { display: grid; place-items: center; width: 58px; height: 58px; background: var(--lime); border-radius: 18px; font-size: 26px; margin-bottom: 4px; }
.feat b { font-weight: 800; }
.flow i { background: var(--ink); color: var(--bg); }
.vs2 .was { background: var(--danger-soft); }
.vs2 .now { background: var(--lime); color: #131313; }
.vs2 .now i { background: #131313; color: var(--lime); }
.vs2.hot .now { box-shadow: 0 8px 24px rgba(132, 214, 111, .45); }
.cta-band { background: #131313; color: #fff; border-radius: 32px; padding: 56px 32px; text-align: center; margin: 12px 0 0; }
.cta-band h2 { font-size: clamp(26px, 3vw, 44px); letter-spacing: -.025em; margin: 0 0 10px; color: #fff; }
.cta-band p { color: #bdbdbd; margin: 0 0 24px; font-size: 18px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cta-band { border: 1px solid var(--line); } }
:root[data-theme="dark"] .cta-band { border: 1px solid var(--line); }
.bar .t i { background: var(--ink); }
:root[data-theme="dark"] .bar .t i { background: var(--lime); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bar .t i { background: var(--lime); } }
.bar .t { background: var(--line); }
.banner { border-radius: 0; font-weight: 600; }

/* ---- публичная страница ---- */
html { scroll-behavior: smooth; }
.pub-top { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.pub-in { max-width: 1280px; margin: 0 auto; padding: 0 32px; height: 72px; display: flex; align-items: center; gap: 28px; }
.pub-nav { display: flex; gap: 4px; flex: 1; }
.pub-nav a { padding: 9px 16px; border-radius: 99px; color: var(--muted); font-weight: 700; }
.pub-nav a:hover { background: var(--panel); color: var(--ink); text-decoration: none; }
.pub-actions { display: flex; gap: 10px; align-items: center; }
.pub { max-width: 1280px; margin: 0 auto; padding: 0 32px 60px; }
.pub-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 64px 0 72px; }
@media (max-width: 1000px) { .pub-hero { grid-template-columns: 1fr; padding-top: 32px; } .pub-nav { display: none; } }
.pub-sec { padding: 28px 0 24px; }
.faq-box { background: var(--panel); border-radius: var(--radius); padding: 8px 28px; }
.faq-box .faq { border-top: 1px solid var(--line); }
.faq-box .faq:first-child { border-top: 0; }
.demo-sec { margin-top: 28px; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; background: var(--lime); color: #131313; border-radius: 32px; padding: 48px; }
.demo-grid .sec, .demo-grid .lead { color: #131313; }
.demo-grid .lead { margin-bottom: 24px; }
.demo-form { background: var(--bg); color: var(--ink); border-radius: 24px; padding: 28px; }
.demo-form .field { margin-bottom: 14px; }
.demo-form .alert { margin-bottom: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 900px) { .demo-grid { grid-template-columns: 1fr; padding: 28px; } .pub-in { padding: 0 16px; gap: 12px; } .pub { padding: 0 16px 40px; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .demo-grid { background: #20281a; color: var(--ink); } :root:not([data-theme="light"]) .demo-grid .sec, :root:not([data-theme="light"]) .demo-grid .lead { color: var(--ink); } }
:root[data-theme="dark"] .demo-grid { background: #20281a; color: var(--ink); }
:root[data-theme="dark"] .demo-grid .sec, :root[data-theme="dark"] .demo-grid .lead { color: var(--ink); }
.pub-foot { border-top: 1px solid var(--line); }
.pub-foot .pub-in { height: 80px; }

/* ---- живой фон публичной страницы ---- */
.bg-fx { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background-image: radial-gradient(var(--line) 1px, transparent 1.2px); background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; background: var(--lime); will-change: transform; }
.b1 { width: 520px; height: 520px; top: -140px; left: -120px; animation: drift1 26s ease-in-out infinite alternate; }
.b2 { width: 460px; height: 460px; top: 140px; right: -140px; background: #bfe9a0; animation: drift2 32s ease-in-out infinite alternate; }
.b3 { width: 420px; height: 420px; bottom: -160px; left: 32%; background: #f6e7b4; opacity: .45; animation: drift3 38s ease-in-out infinite alternate; }
.chip { position: absolute; width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; font-weight: 800; font-size: 22px; color: #131313; opacity: .8; animation: float 9s ease-in-out infinite; }
.c1 { top: 18%; left: 5%; background: #84d66f; animation-delay: 0s; }
.c2 { top: 62%; left: 3%; background: #e0f6a9; animation-delay: -3s; transform: scale(.85); }
.c3 { top: 12%; right: 6%; background: #f6de9d; animation-delay: -5s; transform: scale(.8); }
.c4 { top: 74%; right: 4%; background: #84d66f; animation-delay: -7s; }
.c5 { top: 44%; right: 2%; background: #e0f6a9; animation-delay: -2s; transform: scale(.7); }
@keyframes drift1 { to { transform: translate(180px, 120px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-200px, 140px) scale(.9); } }
@keyframes drift3 { to { transform: translate(160px, -120px) scale(1.2); } }
@keyframes float { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -22px; rotate: 5deg; } }
.pub-top, .pub, .pub-foot { position: relative; z-index: 1; }
.pub-top { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); position: sticky; }
@media (max-width: 900px) { .chip { display: none; } .blob { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .blob, .chip { animation: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .blob { opacity: .16; } :root:not([data-theme="light"]) .chip { opacity: .55; } }
:root[data-theme="dark"] .blob { opacity: .16; }
:root[data-theme="dark"] .chip { opacity: .55; }

/* ---- «окна» интерфейса на публичной странице ---- */
.shot-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.shot-tabs button { border: 0; background: var(--panel); color: var(--muted); font: inherit; font-weight: 700; padding: 10px 18px; border-radius: 99px; cursor: pointer; }
.shot-tabs button.on { background: var(--ink); color: var(--bg); }
.shots { position: relative; }
.shot { display: none; }
.shot.on { display: block; animation: shotIn .5s cubic-bezier(.2,.7,.2,1); }
@keyframes shotIn { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }
.browser { background: var(--bg); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(19, 19, 19, .14); }
.bar-top { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.bar-top i { width: 11px; height: 11px; border-radius: 50%; background: #d4d4d8; display: inline-block; }
.bar-top i:nth-child(1) { background: #ff6b63; } .bar-top i:nth-child(2) { background: #ffc43d; } .bar-top i:nth-child(3) { background: #3ecf5a; }
.bar-top span { margin-left: 10px; }
.shot-body { padding: 22px; }
.shot-body.two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 800px) { .shot-body.two { grid-template-columns: 1fr; } }
.mini-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.mini-tabs b { padding: 7px 14px; border-radius: 99px; color: var(--muted); font-size: 15px; }
.mini-tabs b em { font-style: normal; opacity: .65; margin-left: 4px; }
.mini-tabs b.on { background: var(--ink); color: var(--bg); }
.cand.mini { margin-bottom: 10px; }
.cand.mini .cand-title { cursor: default; }
.demo-chat { max-height: none; }
.shot-side { background: var(--panel); border-radius: 16px; padding: 18px; }
.browser .bar { grid-template-columns: 150px 1fr 44px; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .shot.on { animation: none; } }
:root[data-theme="dark"] .browser { box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }

/* ---- иллюстрации шагов ---- */
.art-flow .art { background: var(--panel); border-radius: 24px; padding: 14px; margin-bottom: 14px; }
.art-flow .art svg { width: 100%; height: auto; display: block; }
.art-flow b { font-size: 19px; }
.spark { transform-origin: 124px 32px; animation: spin 7s linear infinite; }
.scan { animation: scan 4.5s ease-in-out infinite alternate; }
.dots circle { animation: dot 1.2s ease-in-out infinite; }
.dots circle:nth-child(2) { animation-delay: .2s; } .dots circle:nth-child(3) { animation-delay: .4s; }
.pop { transform-origin: 122px 30px; animation: pop 3.2s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes scan { from { transform: translate(-40px, 8px); } to { transform: translate(6px, 28px); } }
@keyframes dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }

/* ---- цифровой помощник ---- */
.assistant { position: fixed; right: 24px; bottom: 20px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: min(340px, calc(100vw - 32px)); }
.assistant[hidden] { display: none; }
.as-bubble { position: relative; background: var(--ink); color: var(--bg); border-radius: 20px 20px 6px 20px; padding: 14px 16px 12px; font-weight: 600; font-size: 15.5px; line-height: 1.4; box-shadow: 0 16px 40px rgba(0, 0, 0, .22); animation: asIn .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: 1.2s; }
.as-bubble #asText { display: block; transition: opacity .25s, transform .25s; }
.as-bubble #asText.out { opacity: 0; transform: translateY(6px); }
.as-links { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.as-links a { background: var(--lime); color: #131313; padding: 5px 12px; border-radius: 99px; font-size: 13.5px; font-weight: 800; }
.as-links a:hover { text-decoration: none; filter: brightness(.96); }
.as-close { position: absolute; right: 6px; top: -10px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--panel); color: var(--ink); cursor: pointer; font-size: 16px; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); z-index: 2; }
.as-avatar { width: 96px; height: 104px; overflow: visible; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .18)); }
.as-float { animation: asFloat 4.5s ease-in-out infinite; }
.as-eyes { transform-origin: 60px 52px; animation: blink 5s infinite; }
.as-ant { animation: ant 1.6s ease-in-out infinite; }
.as-wave { transform-origin: 98px 92px; animation: wave 2.4s ease-in-out infinite; }
@keyframes asFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes blink { 0%, 44%, 48%, 100% { transform: scaleY(1); } 46% { transform: scaleY(.08); } }
@keyframes ant { 0%, 100% { fill: #84d66f; } 50% { fill: #e0f6a9; } }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-24deg); } 80% { transform: rotate(8deg); } 90% { transform: rotate(-20deg); } }
@keyframes asIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .assistant { right: 12px; bottom: 12px; } .as-avatar { width: 72px; height: 78px; } .as-bubble { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .spark, .scan, .dots circle, .pop, .as-float, .as-eyes, .as-ant, .as-wave, .as-bubble { animation: none; } }

/* ---- наведение: лёгкий подъём и салатовая подсветка вместо белого фона ---- */
:root { --hover: color-mix(in srgb, var(--lime) 58%, var(--bg)); --hover-shadow: 0 8px 20px rgba(19, 19, 19, .10); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hover: #2b3321; --hover-shadow: 0 8px 20px rgba(0, 0, 0, .4); } }
:root[data-theme="dark"] { --hover: #2b3321; --hover-shadow: 0 8px 20px rgba(0, 0, 0, .4); }

.nav a, .pub-nav a, .tabs a, .shot-tabs button, .mini-tabs b, .theme-btn, .btn, .seg label, .toprow, .tile,
.feat > div, .pcard, .flow > div, .toc a {
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.nav a:hover, .pub-nav a:hover, .tabs a:hover, .shot-tabs button:hover, .theme-btn:hover, .toc a:hover {
  background: var(--hover); color: var(--ink); transform: translateY(-2px); text-decoration: none;
}
.nav a.on:hover { background: var(--lime); color: #131313; }
.tabs a.on:hover, .shot-tabs button.on:hover { background: var(--ink); color: var(--bg); }

.btn:hover { background: var(--hover); border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--hover-shadow); text-decoration: none; }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); opacity: 1; transform: translateY(-2px); box-shadow: var(--hover-shadow); }
.btn.lime:hover { background: var(--lime); border-color: var(--lime); filter: brightness(.97); }
.btn.ghost:hover { background: var(--hover); border-color: transparent; }
.btn:active, .nav a:active, .pub-nav a:active { transform: translateY(0); box-shadow: none; }

.feat > div:hover, .pcard:hover, .flow .art:hover { transform: translateY(-4px); box-shadow: var(--hover-shadow); }
.pcard:hover { background: var(--hover); }
.tile:hover { background: var(--hover); transform: translateY(-3px); }
.toprow:hover { background: var(--hover); border-radius: 12px; }
.cand:hover { box-shadow: var(--hover-shadow); }

/* выпадающие списки: читаемый фон опций в обеих темах */
option { background: var(--panel); color: var(--ink); }
select:hover { border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .nav a:hover, .pub-nav a:hover, .btn:hover, .feat > div:hover, .pcard:hover, .tile:hover { transform: none; } }

/* ---- направления найма ---- */
.roles { display: grid; gap: 10px; }
.role { display: grid; grid-template-columns: 1.1fr 1.5fr auto; gap: 28px; align-items: center; padding: 26px 30px; border-radius: 24px;
  background: var(--panel); color: var(--ink); border: 1px solid transparent;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, border-color .2s ease; }
.role:hover { background: var(--hover); transform: translateY(-4px); box-shadow: var(--hover-shadow); border-color: var(--lime); text-decoration: none; }
.role-main b { font-size: clamp(22px, 2vw, 30px); font-weight: 800; letter-spacing: -.02em; }
.role-main p { margin: 6px 0 0; color: var(--muted); font-size: 16px; max-width: 34em; }
.role-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.role-tags span { background: var(--bg); border: 1px solid var(--line); border-radius: 99px; padding: 7px 15px; font-weight: 600; font-size: 15px; transition: background-color .2s, border-color .2s; }
.role:hover .role-tags span { background: var(--bg); border-color: var(--ink); }
.role-go { font-weight: 800; color: var(--ink); white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
.role-go i { font-style: normal; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--bg); transition: transform .2s; }
.role:hover .role-go i { transform: translateX(5px); background: var(--lime); color: #131313; }
@media (max-width: 900px) { .role { grid-template-columns: 1fr; gap: 14px; padding: 20px; } }

/* шапка публичной страницы: без переносов, сжимается на средних экранах */
.pub-in .brand, .pub-nav a, .pub-actions .btn { white-space: nowrap; }
.pub-nav { gap: 0; }
.pub-nav a { padding: 9px 12px; }
@media (max-width: 1240px) { .pub-nav a { padding: 8px 9px; font-size: 15px; } .pub-in { gap: 14px; } }
@media (max-width: 1100px) { .pub-nav { display: none; } .pub-in { justify-content: space-between; } .pub-actions { margin-left: auto; } }

/* ---- направления: строки на цветном фоне, при наведении яркая заливка и подъём ---- */
.roles-wrap { background: linear-gradient(115deg, #dfe8ff 0%, #eef2e4 38%, #fbeed2 72%, #d8f1ea 100%); border-radius: 32px; padding: 14px 18px; }
:root[data-theme="dark"] .roles-wrap { background: linear-gradient(115deg, #1b2236 0%, #1b1f1a 40%, #2a2418 74%, #16282a 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .roles-wrap { background: linear-gradient(115deg, #1b2236 0%, #1b1f1a 40%, #2a2418 74%, #16282a 100%); } }
.roles { display: block; }
.role { background: transparent; border: 0; border-top: 1px solid rgba(19, 19, 19, .14); border-radius: 0; padding: 30px 22px; box-shadow: none; }
.role:first-child { border-top: 0; }
.role:hover { background: linear-gradient(100deg, #d5f28f 0%, #ecf8b8 55%, #fbe7a6 100%); border-radius: 22px; border-color: transparent;
  transform: translateY(-4px) scale(1.005); box-shadow: 0 14px 34px rgba(19, 19, 19, .14); position: relative; z-index: 1; }
.role:hover + .role, .role:has(+ .role:hover) { border-top-color: transparent; }
.role:hover .role-main b, .role:hover .role-main p, .role:hover .role-go { color: #131313; }
.role:hover .role-main p { color: #3c3c3c; }
.role:hover .role-tags span { background: #ffffffcc; border-color: #131313; }
:root[data-theme="dark"] .role { border-top-color: #ffffff1f; }
:root[data-theme="dark"] .role:hover { background: linear-gradient(100deg, #3b4a22 0%, #2f3b25 55%, #4a3e1c 100%); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .role:hover .role-main b, :root[data-theme="dark"] .role:hover .role-go { color: #f3f3f3; }
:root[data-theme="dark"] .role:hover .role-main p { color: #cfd2c4; }
:root[data-theme="dark"] .role:hover .role-tags span { background: #ffffff14; border-color: #e0f6a9; color: #f3f3f3; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .role { border-top-color: #ffffff1f; }
  :root:not([data-theme="light"]) .role:hover { background: linear-gradient(100deg, #3b4a22 0%, #2f3b25 55%, #4a3e1c 100%); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
  :root:not([data-theme="light"]) .role:hover .role-main b, :root:not([data-theme="light"]) .role:hover .role-go { color: #f3f3f3; }
  :root:not([data-theme="light"]) .role:hover .role-main p { color: #cfd2c4; }
  :root:not([data-theme="light"]) .role:hover .role-tags span { background: #ffffff14; border-color: #e0f6a9; color: #f3f3f3; }
}
@media (max-width: 900px) { .roles-wrap { padding: 8px; border-radius: 22px; } }

/* ---- шапка: свой фон, отличается от страницы ---- */
:root { --head-bg: linear-gradient(90deg, #eaf5cf 0%, #f3f6ea 38%, #eef1fb 100%); --head-solid: #f1f5e6; }
:root[data-theme="dark"] { --head-bg: linear-gradient(90deg, #1c2417 0%, #181b17 40%, #171b24 100%); --head-solid: #171b15; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --head-bg: linear-gradient(90deg, #1c2417 0%, #181b17 40%, #171b24 100%); --head-solid: #171b15; } }
.pub-top, .top { background: var(--head-bg); border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.pub-top { backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); transition: box-shadow .25s ease; }
.pub-top.scrolled, .top.scrolled { box-shadow: 0 10px 30px rgba(19, 19, 19, .10); }
:root[data-theme="dark"] .pub-top.scrolled, :root[data-theme="dark"] .top.scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.pub-nav a:hover, .nav a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.nav a.on:hover { background: var(--lime); }
.pub-top .btn:not(.primary), .top .theme-btn { background: color-mix(in srgb, var(--bg) 70%, transparent); }

.as-bubble[hidden] { display: none; }
.as-avatar { cursor: pointer; }
.assistant.quiet .as-avatar { width: 78px; height: 84px; }
.as-avatar:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; border-radius: 16px; }

.as-avatar { width: 112px; height: 122px; }
.assistant.quiet .as-avatar { width: 88px; height: 96px; }
@media (max-width: 700px) { .as-avatar { width: 80px; height: 88px; } }

/* ---- блок «Правильные совпадения» ---- */
.match-band { background: #131313; color: #fff; border-radius: 32px; padding: 52px 48px; }
.match-band .sec { color: #fff; margin-top: 0; }
.match-band .lead { color: #c9c9c9; }
.match-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.match-grid > div { border-top: 2px solid var(--lime); padding-top: 14px; }
.match-grid b { font-size: 19px; display: block; margin-bottom: 6px; }
.match-grid p { margin: 0; color: #bdbdbd; }
@media (max-width: 900px) { .match-band { padding: 30px 22px; } .match-grid { grid-template-columns: 1fr; } }
:root[data-theme="dark"] .match-band { border: 1px solid var(--line); background: #151515; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .match-band { border: 1px solid var(--line); background: #151515; } }

/* ---- карточка кандидата (боковая панель) ---- */
.dp { background: var(--panel); border-radius: 22px; padding: 22px 22px 24px; }
.dp-head { display: flex; gap: 18px; align-items: flex-start; }
.dp-score { width: 84px; flex-shrink: 0; border-radius: 18px; padding: 10px 0 8px; text-align: center; background: var(--low); color: #fff; line-height: 1; }
.dp-score b { display: block; font-size: 40px; font-weight: 800; }
.dp-score span { font-size: 12px; opacity: .8; letter-spacing: .04em; text-transform: uppercase; }
.dp-score.s-top { background: var(--top); } .dp-score.s-good { background: var(--good); } .dp-score.s-mid { background: var(--mid); }
.dp-id { min-width: 0; }
.dp-id h2 { font-size: 24px; line-height: 1.2; margin: 0 0 4px; letter-spacing: -.01em; }
.dp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dp-chips span { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: 14px; }
.dp-rec { margin: 18px 0 14px; padding: 10px 16px; border-radius: 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; background: var(--bg); border-left: 5px solid var(--low); }
.dp-rec.s-top { border-left-color: var(--top); } .dp-rec.s-good { border-left-color: var(--good); } .dp-rec.s-mid { border-left-color: var(--mid); }
.dp-prev { font-size: 14px; color: var(--muted); }
.dp-actions { margin-bottom: 16px; }
.dp-actions .status-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; }
.dp-actions .status-buttons .btn { justify-content: center; padding: 10px 6px; font-weight: 600; }
.dp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; position: sticky; top: 0; background: var(--panel); z-index: 2; }
.dp-tab { background: none; border: 0; padding: 10px 14px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.dp-tab:hover { color: var(--ink); }
.dp-tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.dp-pane[hidden] { display: none; }
.dp-verdict { font-size: 18px; line-height: 1.5; margin: 0 0 18px; }
.dp-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 1500px) { .dp-pc { grid-template-columns: 1fr; } }
.dp-card { border-radius: 14px; padding: 14px 16px; background: var(--bg); }
.dp-card h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.dp-card ul { margin: 0; padding-left: 18px; font-size: 15.5px; }
.dp-card li { margin-bottom: 5px; }
.dp-card.pro h4 { color: var(--accent); } .dp-card.con h4 { color: var(--warn); }
.dp-card.pro { background: var(--accent-soft); } .dp-card.con { background: var(--warn-soft); }
.dp-card.q { border: 1px dashed var(--line); background: transparent; margin-bottom: 14px; }
.dp-contacts { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--accent-soft); margin-bottom: 8px; }
.dp-contacts div { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dp-contacts b { font-size: 17px; }
.dp .sec { margin: 20px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

.split { scroll-margin-top: 84px; }
.cand-name { margin-left: 10px; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); font-weight: 600; font-size: 15px; white-space: nowrap; }
.dp-score, .dp-score.s-top, .dp-score.s-good, .dp-score.s-mid, .dp-score.s-low { color: #131313; }
.dp-score span { opacity: .65; }

.cand:has(.cand-title[hx-get]) { cursor: pointer; }
.cand:has(.cand-title[hx-get]) details, .cand:has(.cand-title[hx-get]) summary { cursor: default; }

.fresh-badge { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--lime, var(--accent-soft)); color: #131313; font-size: 12px; font-weight: 800; letter-spacing: .05em; vertical-align: 2px; }
.tabs a.fresh-tab:not(.on) .count { background: var(--lime, var(--accent-soft)); color: #131313; }

.topsearch { margin: 0; }
.topsearch input { width: 200px; padding: 8px 14px; border-radius: 999px; font-size: 15px; }
@media (max-width: 1200px) { .topsearch input { width: 130px; } }

/* ---- мастер позиции ---- */
.wz-nav { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.wz-nav button { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.wz-nav button b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); margin-right: 6px; font-size: 13px; }
.wz-nav button.on { color: #131313; background: var(--lime, var(--accent-soft)); border-color: transparent; }
.wz-nav button.on b { background: #131313; color: #fff; }
.wz-step[hidden] { display: none; }
.wz-step { max-width: 900px; }
.wz-actions { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 18px; }
.an-meta { background: var(--accent-soft); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }

.rj { border: 0; border-radius: 18px; padding: 22px; max-width: 460px; width: calc(100% - 32px); background: var(--panel); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.rj::backdrop { background: rgba(0,0,0,.45); }
.rj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rj-chips button { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink); }
.rj-chips button:hover { border-color: var(--accent); }

/* ---- бренд JS Scout (как у JS Match): два круга и пересечение ---- */
@font-face { font-family: "Unbounded"; font-weight: 700; font-style: normal; font-display: swap; src: url(/static/fonts/unbounded-cyrillic-ext-700-normal.woff2) format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Unbounded"; font-weight: 700; font-style: normal; font-display: swap; src: url(/static/fonts/unbounded-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Unbounded"; font-weight: 700; font-style: normal; font-display: swap; src: url(/static/fonts/unbounded-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Unbounded"; font-weight: 700; font-style: normal; font-display: swap; src: url(/static/fonts/unbounded-latin-700-normal.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-svg { width: 38px; height: 27px; flex-shrink: 0; }
.brand-ink { fill: #0F1B33; }
.brand-word { font: 700 19px/1 "Unbounded", "Arial Black", sans-serif; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-ink { fill: #ffffff; } }
:root[data-theme="dark"] .brand-ink { fill: #ffffff; }
.auth .brand { font-size: 18px; }
@media (max-width: 640px) { .brand-word { font-size: 16px; } .brand-svg { width: 32px; height: 23px; } }

/* резюме в формате hh */
.hhcv-title{font-size:20px;margin:4px 0 2px}
.hhcv-sum{color:var(--muted,#6b7280);margin-bottom:8px}
.hhcv-roles{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.hhcv-roles span{background:var(--chip,#eef2f0);border-radius:999px;padding:2px 10px;font-size:13px}
.hhjob{display:grid;grid-template-columns:170px 1fr;gap:16px;margin:14px 0}
.hhjob-when{font-size:13px;color:var(--muted,#6b7280)}
.hhjob-when span{display:block;margin-top:2px}
.hhjob-pos{margin:2px 0 6px}
@media (max-width:640px){.hhjob{grid-template-columns:1fr;gap:4px}}

.dp-pdf { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dp-pdf .btn { white-space: nowrap; flex: 0 0 auto; }

/* ---------- доска позиции ---------- */
.viewbar { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }
.viewbar .spacer { flex: 1; }
.seg-view { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 3px; }
.seg-view a { padding: 7px 16px; border-radius: 99px; font-weight: 700; font-size: 15px; color: var(--muted); }
.seg-view a:hover { text-decoration: none; color: var(--ink); }
.seg-view a.on { background: var(--ink); color: var(--bg); }

.board-wrap { margin: 0 -4px; }
.board { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 16px; align-items: flex-start; scroll-snap-type: x proximity; }
.bcol { flex: 0 0 304px; background: color-mix(in srgb, var(--ink) 4%, var(--bg)); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 210px); min-height: 140px; scroll-snap-align: start; transition: border-color .15s, background .15s; }
.bcol.over { border-color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, var(--accent)) 12%, var(--bg)); }
.bcol-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px; position: sticky; top: 0; }
.bcol-h i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--muted)); flex: none; }
.bcol-h b { font-size: 15px; flex: 1; }
.bcol-h .count { font-size: 13px; font-weight: 700; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 1px 9px; }
.bcol-body { padding: 0 10px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 8px; }
.bcol-empty { display: none; margin: 0; padding: 18px 14px 22px; color: var(--muted); font-size: 14px; text-align: center; }
.bcol.is-empty .bcol-empty { display: block; }
.bcol-more { padding: 4px 14px 14px; font-size: 14px; font-weight: 600; }

.bcard { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 10px 11px 11px; cursor: grab; box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s, border-color .12s; }
.bcard:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); transform: translateY(-1px); }
.bcard.drag { opacity: .45; cursor: grabbing; }
.bc-top { display: flex; gap: 9px; align-items: flex-start; }
.bc-top .score { flex: none; width: 30px; height: 30px; font-size: 15px; border-radius: 9px; }
.bc-title { font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.bc-title:hover { text-decoration: underline; }
.bc-sub { margin: 5px 0 0 39px; font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.bc-meta { display: flex; flex-wrap: wrap; gap: 3px 10px; margin: 7px 0 0 39px; font-size: 13px; color: var(--muted); }
.bc-verdict { margin: 7px 0 0 39px; font-size: 13.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bcard .badge { margin: 8px 0 0 39px; }
.bc-rej { margin: 7px 0 0 39px; font-size: 13px; color: var(--danger); }
@media (max-width: 700px) { .bcol { flex-basis: 84vw; } }

/* ---------- страница «Этапы» ---------- */
.stage-list { padding: 8px 18px; }
.stage-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.stage-row:last-child { border-bottom: 0; }
.stage-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.stage-row input[type=color], .stage-new input[type=color] { width: 38px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; }
.stage-name { flex: 1; min-width: 160px; }
.stage-input { flex: 1; min-width: 180px; }
.stage-n { min-width: 34px; text-align: right; font-weight: 700; color: var(--muted); }
.stage-act { display: flex; gap: 6px; }
.stage-new { margin-top: 16px; }
.stage-new-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.stage-new-row input[type=text] { flex: 1; min-width: 220px; }
.status-buttons .btn[style*="--c"] { border-color: var(--c); }
.status-buttons .btn.current[style*="--c"] { background: var(--c); color: #fff; }



/* перенос «нажал, двигай, нажал» */
.stage-grip, .bc-grip { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 20px; line-height: 1; padding: 4px 6px; border-radius: 8px; }
.stage-grip:hover, .bc-grip:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
.stage-row { position: relative; }
.stage-row.picked { opacity: .45; }
.stage-row.drop-before::before, .stage-row.drop-after::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--accent); }
.stage-row.drop-before::before { top: -2px; } .stage-row.drop-after::after { bottom: -2px; }
.stage-ghost, .bc-ghost { position: fixed; z-index: 1000; pointer-events: none; background: var(--panel); color: var(--ink); border: 1px solid var(--accent); border-radius: 10px; padding: 8px 14px; font-weight: 700; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); max-width: 280px; }
body.moving, body.moving * { cursor: grabbing !important; }
.stage-saved { font-size: 13px; color: var(--accent); min-width: 90px; text-align: right; }
.bc-grip { position: absolute; top: 6px; right: 6px; opacity: 0; font-size: 17px; }
.bcard { position: relative; }
.bcard:hover .bc-grip, .bcard.picked .bc-grip, body.moving .bc-grip { opacity: 1; }
.bcard.picked { opacity: .45; }
@media (hover: none) { .bc-grip { opacity: 1; } }
body.moving .bcol { cursor: grabbing; }
.stage-grip.off { width: 28px; display: inline-block; }

/* =====================================================================
   Оформление приложения: фон страницы, глубина карточек, читаемый текст
   ===================================================================== */
:root {
  --muted: #565a63;
  --page-bg:
    radial-gradient(1100px 560px at -5% -8%, #e6f5c4 0%, transparent 62%),
    radial-gradient(1000px 620px at 105% -4%, #e4defb 0%, transparent 62%),
    radial-gradient(900px 520px at 55% 112%, #d9eef6 0%, transparent 62%),
    #f6f7fb;
  --card: #ffffff;
  --card-line: rgba(30, 32, 60, .10);
  --card-shadow: 0 1px 2px rgba(30, 32, 60, .06), 0 6px 18px rgba(30, 32, 60, .07);
  --card-shadow-hover: 0 2px 4px rgba(30, 32, 60, .08), 0 14px 30px rgba(30, 32, 60, .13);
  --glass: rgba(255, 255, 255, .72);
  --ink-2: #3b3e46;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --muted: #b0b3ba;
    --page-bg:
      radial-gradient(1100px 560px at -5% -8%, #1e2a14 0%, transparent 62%),
      radial-gradient(1000px 620px at 105% -4%, #221b3d 0%, transparent 62%),
      radial-gradient(900px 520px at 55% 112%, #10262e 0%, transparent 62%),
      #0d0e12;
    --card: #1c1d23; --card-line: rgba(255, 255, 255, .09);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 22px rgba(0, 0, 0, .35);
    --card-shadow-hover: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 34px rgba(0, 0, 0, .5);
    --glass: rgba(28, 29, 35, .72); --ink-2: #d6d8de;
  }
}
:root[data-theme="dark"] {
  --muted: #b0b3ba;
  --page-bg:
    radial-gradient(1100px 560px at -5% -8%, #1e2a14 0%, transparent 62%),
    radial-gradient(1000px 620px at 105% -4%, #221b3d 0%, transparent 62%),
    radial-gradient(900px 520px at 55% 112%, #10262e 0%, transparent 62%),
    #0d0e12;
  --card: #1c1d23; --card-line: rgba(255, 255, 255, .09);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 22px rgba(0, 0, 0, .35);
  --card-shadow-hover: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 34px rgba(0, 0, 0, .5);
  --glass: rgba(28, 29, 35, .72); --ink-2: #d6d8de;
}
body { background: var(--page-bg); background-attachment: fixed; }

/* панели: «стекло» с мягкой тенью вместо плоских серых плит */
.panel, .kpi, .pcard, .tile { background: var(--glass); backdrop-filter: blur(8px) saturate(1.15); -webkit-backdrop-filter: blur(8px) saturate(1.15); box-shadow: var(--card-shadow); border: 1px solid var(--card-line); }
.panel.inner, .panel.versus, .panel.funnel-card { background: var(--card); }
.kpi.hl { border-color: transparent; }

/* шапка позиции компактнее */
.query { margin: 4px 0 2px; }
.query summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--muted); list-style: none; display: inline-flex; gap: 6px; align-items: center; }
.query summary::before { content: "▸"; transition: transform .15s; }
.query[open] summary::before { transform: rotate(90deg); }
.query p { margin: 6px 0 0; }

/* панель переключения вида: прилипает при прокрутке */
.viewbar { position: sticky; top: 68px; z-index: 6; margin: 0 -40px 14px; padding: 10px 40px; background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--card-line); }
.seg-view { background: var(--card); border-color: var(--card-line); box-shadow: var(--card-shadow); }
.seg-view a { color: var(--ink-2); }
.seg-view a.on { background: var(--ink); color: var(--bg); }

/* колонки доски: тон этапа, цветная полоска, читаемый заголовок */
.board { padding: 6px 40px 28px; margin: 0 -40px; gap: 16px; scroll-padding-left: 40px; }
.bcol { flex: 0 0 316px; max-height: calc(100vh - 160px); background: color-mix(in srgb, var(--c) 10%, color-mix(in srgb, var(--card) 55%, transparent)); border: 1px solid color-mix(in srgb, var(--c) 28%, var(--card-line)); border-radius: 18px; box-shadow: inset 0 3px 0 var(--c); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bcol.over { background: color-mix(in srgb, var(--c) 20%, var(--card)); border-color: var(--c); box-shadow: inset 0 3px 0 var(--c), 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.bcol-h { padding: 16px 16px 12px; }
.bcol-h i { width: 11px; height: 11px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.bcol-h b { font-size: 15.5px; letter-spacing: -.01em; color: var(--ink); }
.bcol-h .count { color: var(--ink); background: color-mix(in srgb, var(--c) 18%, var(--card)); border-color: color-mix(in srgb, var(--c) 35%, transparent); font-size: 13px; }
.bcol-body { padding: 0 12px 12px; gap: 10px; scrollbar-width: thin; }
.bcol-empty { color: var(--muted); font-size: 14px; border: 2px dashed color-mix(in srgb, var(--c) 35%, transparent); border-radius: 12px; margin: 0 12px 14px; padding: 20px 12px; }

/* карточка кандидата */
.bcard { --sc: #c8cad3; background: var(--card); border: 1px solid var(--card-line); border-radius: 14px; padding: 12px 14px 12px 16px; box-shadow: var(--card-shadow), inset 4px 0 0 var(--sc); }
.bcard.s-top { --sc: #4fc24a; } .bcard.s-good { --sc: #a6d94a; } .bcard.s-mid { --sc: #f2bf3f; } .bcard.s-low { --sc: #c8cad3; }
.bcard:hover { border-color: var(--card-line); box-shadow: var(--card-shadow-hover), inset 4px 0 0 var(--sc); transform: translateY(-2px); }
.bc-top { gap: 10px; align-items: flex-start; }
.bc-top .score { width: 34px; height: 34px; font-size: 16px; border-radius: 11px; font-weight: 800; }
.bc-id { min-width: 0; flex: 1; padding-right: 18px; }
.bc-title { font-size: 15.5px; font-weight: 800; line-height: 1.28; color: var(--ink); display: block; letter-spacing: -.005em; }
.bc-sub { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-2); font-weight: 600; display: flex; gap: 6px; align-items: center; }
.bc-job { margin: 9px 0 0; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; }
.bc-chips span { font-size: 12.5px; font-weight: 700; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.bc-chips .pay { background: color-mix(in srgb, #4fc24a 20%, transparent); color: var(--ink); }
.bc-verdict { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink); -webkit-line-clamp: 3; }
.bc-foot { margin-top: 10px; }
.bc-foot .badge, .bcard .badge { margin: 0; }
.bc-rej { margin: 8px 0 0; font-size: 13px; color: var(--danger); font-weight: 600; }
.bc-grip { top: 8px; right: 6px; color: var(--ink-2); }
.fresh-badge { font-size: 11px; font-weight: 800; letter-spacing: .04em; background: #131313; color: #e0f6a9; border-radius: 99px; padding: 2px 8px; }
:root[data-theme="dark"] .fresh-badge { background: #e0f6a9; color: #131313; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fresh-badge { background: #e0f6a9; color: #131313; } }

/* вторичный текст по всему приложению темнее */
.cand-meta, .cand .verdict, .small.muted, .muted { color: var(--muted); }
.cand-meta span, .meta span { color: var(--ink-2); }
@media (max-width: 700px) { .viewbar { margin: 0 -16px 12px; padding: 8px 16px; top: 60px; } .board { padding: 6px 16px 24px; margin: 0 -16px; } .bcol { flex-basis: 86vw; } }

/* сетки и строки: правки по первому просмотру */
.kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 700px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stage-row { flex-wrap: nowrap; gap: 12px; }
.stage-row .stage-input { width: auto; flex: 1 1 220px; min-width: 120px; }
.stage-row select { width: auto; flex: 0 0 190px; }
.stage-row .badge { flex: none; }
.stage-row .stage-n { flex: none; }
.stage-row .stage-act { flex: none; min-width: 190px; justify-content: flex-end; align-items: center; }
.stage-row .stage-name { flex: 1 1 220px; }
.stage-new-row select { width: auto; }
.stage-new-row input[type=text] { width: auto; flex: 1 1 260px; }
@media (max-width: 900px) { .stage-row { flex-wrap: wrap; } .stage-row select { flex: 1 1 160px; } }

/* ---------- список позиций: карточки по рекрутерам ---------- */
.av { --h: var(--hue, 250); display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 800; font-size: 13px; letter-spacing: .02em; flex: none;
  background: hsl(var(--h) 70% 88%); color: hsl(var(--h) 55% 24%); box-shadow: inset 0 0 0 2px hsl(var(--h) 60% 72%); }
:root[data-theme="dark"] .av { background: hsl(var(--h) 38% 24%); color: hsl(var(--h) 80% 86%); box-shadow: inset 0 0 0 2px hsl(var(--h) 45% 40%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .av { background: hsl(var(--h) 38% 24%); color: hsl(var(--h) 80% 86%); box-shadow: inset 0 0 0 2px hsl(var(--h) 45% 40%); } }

.who-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.who-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 99px; background: var(--card); border: 1px solid var(--card-line); box-shadow: var(--card-shadow); color: var(--ink); font-weight: 700; font-size: 15px; transition: transform .12s, box-shadow .12s; }
.who-chip:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--card-shadow-hover); }
.who-chip .av { width: 30px; height: 30px; font-size: 12px; }
.who-chip .who-all { padding-left: 10px; }
.who-chip em { font-style: normal; font-size: 13px; color: var(--muted); background: color-mix(in srgb, var(--ink) 7%, transparent); border-radius: 99px; padding: 1px 8px; }
.who-chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.who-chip.on em { background: color-mix(in srgb, var(--bg) 22%, transparent); color: var(--bg); }

.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 18px; }
.pos-card { --h: var(--hue, 250); position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 14px; border-radius: 22px; background: var(--card); border: 1px solid var(--card-line); box-shadow: var(--card-shadow), inset 0 4px 0 hsl(var(--h) 65% 62%); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.pos-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 160px at 100% 0%, hsl(var(--h) 80% 80% / .30), transparent 70%); }
.pos-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover), inset 0 4px 0 hsl(var(--h) 65% 62%); }
.pos-card.paused { opacity: .72; }
.pos-card.running { box-shadow: var(--card-shadow), inset 0 4px 0 hsl(var(--h) 65% 62%), 0 0 0 2px color-mix(in srgb, #4fc24a 55%, transparent); }
.pc-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pc-link:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.pc-top { display: flex; align-items: center; gap: 11px; position: relative; }
.pc-who { flex: 1; min-width: 0; line-height: 1.25; }
.pc-who b { display: block; font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-who small { font-size: 13px; color: var(--muted); }
.pc-title { margin: 0; font-size: 21px; line-height: 1.22; letter-spacing: -.015em; color: var(--ink); position: relative; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.44em; }
.pc-bar { height: 10px; border-radius: 99px; overflow: hidden; display: flex; gap: 2px; background: color-mix(in srgb, var(--ink) 8%, transparent); position: relative; }
.pc-bar i { display: block; min-width: 0; }
.pc-bar .b-new { background: #6b7cff; } .pc-bar .b-short { background: #f0a52b; } .pc-bar .b-con { background: #2aa6e0; } .pc-bar .b-int { background: #2fb67c; } .pc-bar .b-oth { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.pc-nums { display: flex; gap: 6px; position: relative; }
.pc-nums > div { flex: 1; padding: 8px 4px; border-radius: 12px; text-align: center; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.pc-nums b { display: block; font-size: 21px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); }
.pc-nums span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pc-nums .fresh { background: #e0f6a9; }
.pc-nums .fresh b, .pc-nums .fresh span { color: #1b3a0a; }
.pc-foot { display: flex; align-items: center; gap: 10px; position: relative; padding-top: 10px; border-top: 1px solid var(--card-line); }
.pc-q { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-edit { position: relative; z-index: 2; font-size: 13.5px; font-weight: 700; color: var(--ink-2); padding: 5px 12px; border-radius: 99px; border: 1px solid var(--card-line); background: var(--card); }
.pc-edit:hover { text-decoration: none; border-color: var(--ink); color: var(--ink); }
@media (max-width: 520px) { .pc-grid { grid-template-columns: minmax(0, 1fr); } .pc-nums b { font-size: 18px; } }
.pos-card { min-width: 0; }
.pc-grid { grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); }
.pc-top .av { border-radius: 50%; }
.pc-nums > div { min-width: 0; }
.pos-card { cursor: pointer; }

/* =====================================================================
   Навигация: тонкая светлая рейка слева, раскрывается при наведении
   ===================================================================== */
.shell { min-height: 100vh; }
.shell-main { margin-left: 106px; min-width: 0; }
.rail { position: fixed; z-index: 45; left: 14px; top: 14px; bottom: 14px; width: 76px; display: flex; flex-direction: column; gap: 6px; padding: 14px 10px; border-radius: 28px; overflow: hidden;
  background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid var(--card-line); box-shadow: 0 10px 34px rgba(30, 32, 60, .12), 0 1px 0 rgba(255, 255, 255, .6) inset; transition: width .22s cubic-bezier(.22, .8, .3, 1), box-shadow .22s; }
.rail:hover, .rail:focus-within { width: 222px; box-shadow: 0 18px 50px rgba(30, 32, 60, .22); }
.rail-brand { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 9px; margin-bottom: 8px; color: var(--ink); white-space: nowrap; }
.rail-brand:hover { text-decoration: none; }
.rail-brand .rl { font: 700 18px/1 "Unbounded", "Arial Black", sans-serif; letter-spacing: -.03em; }
.rail-nav { display: flex; flex-direction: column; gap: 4px; }
.rail-nav a { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 15px; border-radius: 17px; color: var(--ink-2); font-weight: 700; font-size: 15.5px; white-space: nowrap; transition: background .14s, color .14s; }
.rail-nav a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rail-nav a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); text-decoration: none; }
.rail-nav a.on { background: var(--lime); color: #131313; box-shadow: 0 4px 12px rgba(160, 200, 70, .35); }
.rail .rl { opacity: 0; transition: opacity .15s; }
.rail:hover .rl, .rail:focus-within .rl { opacity: 1; transition-delay: .06s; }
.rail-brand .brand-svg { flex: none; }

.topbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 16px 40px 0; }
.topbar .topsearch input { width: 300px; background: var(--card); border: 1px solid var(--card-line); box-shadow: var(--card-shadow); }
.topbar .av { width: 38px; height: 38px; }
.topbar .theme-btn { width: 38px; height: 38px; border-radius: 12px; background: var(--card); border-color: var(--card-line); }
.shell .banner { margin: 12px 40px 0; border-radius: 14px; }
.shell .wrap { padding-top: 14px; }
.viewbar { top: 0; }
.detail { top: 28px; }

@media (max-width: 900px) {
  .shell-main { margin-left: 0; padding-bottom: 84px; }
  .rail { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; height: 66px; flex-direction: row; padding: 6px 8px; border-radius: 22px; }
  .rail:hover, .rail:focus-within { width: auto; box-shadow: 0 10px 34px rgba(30, 32, 60, .12); }
  .rail-brand { display: none; }
  .rail-nav { flex-direction: row; flex: 1; justify-content: space-between; gap: 2px; }
  .rail-nav a { flex: 1; flex-direction: column; justify-content: center; gap: 3px; height: 100%; padding: 0 2px; border-radius: 16px; font-size: 11px; }
  .rail .rl { opacity: 1; }
  .topbar { padding: 12px 16px 0; flex-wrap: wrap; }
  .topbar .topsearch { flex: 1 1 100%; order: 9; } .topbar .topsearch input { width: 100%; }
  .topbar .btn { margin-right: auto; }
  .shell .wrap { padding: 12px 16px 40px; }
  .shell .banner { margin: 10px 16px 0; }
}

/* ---------- «Сводка»: позиции по рекрутерам таблицей ---------- */
.today { background: var(--glass); backdrop-filter: blur(8px); border: 1px solid var(--card-line); border-radius: 22px; box-shadow: var(--card-shadow); overflow: hidden; }
.today-head, .today-row { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(6, 86px) 130px; gap: 8px; align-items: center; padding: 0 22px; }
.today-head { padding-top: 14px; padding-bottom: 10px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--card-line); }
.today .n { text-align: right; font-variant-numeric: tabular-nums; }
.today-grp header { display: flex; align-items: center; gap: 12px; padding: 12px 22px; background: color-mix(in srgb, hsl(var(--hue) 70% 60%) 13%, transparent); border-top: 1px solid var(--card-line); }
.today-grp:first-of-type header { border-top: 0; }
.today-grp header b { font-size: 16px; }
.today-grp header small { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.today-grp header small em { font-style: normal; color: var(--ink); background: #e0f6a9; color: #1b3a0a; border-radius: 99px; padding: 1px 8px; font-weight: 800; }
.today-grp .av { --h: var(--hue); width: 32px; height: 32px; font-size: 12px; }
.today-row { padding-top: 13px; padding-bottom: 13px; color: var(--ink); border-top: 1px solid var(--card-line); font-size: 15px; transition: background .12s; }
.today-row:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); text-decoration: none; }
.today-row.paused { opacity: .6; }
.today-row .t b { display: block; font-size: 16px; line-height: 1.3; }
.today-row .t small { color: var(--muted); font-size: 13px; font-weight: 600; }
.today-row .n { font-weight: 700; font-size: 16px; }
.today-row .n.hot { color: #1b3a0a; background: #e0f6a9; border-radius: 99px; padding: 2px 10px; justify-self: end; font-weight: 800; }
.today-row .when { color: var(--muted); font-size: 13.5px; }
@media (max-width: 1100px) { .today-head { display: none; } .today-row { grid-template-columns: 1fr repeat(3, 62px); } .today-row > :nth-child(2), .today-row > :nth-child(5), .today-row > :nth-child(6), .today-row .when { display: none; } }
.seg-view a { text-decoration: none; }
.today .when { padding-left: 16px; }
.today-head > span:last-child { padding-left: 16px; }

.seg-view a, .seg-view a:hover { text-decoration: none !important; }

/* =====================================================================
   Тёмная тема: мягкий сине-графитовый тон вместо почти чёрного
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171a26; --panel: #1e2231; --ink: #eef0f7; --muted: #a6acbf; --line: #2e3348; --input: #171a26;
    --card: #1f2334; --card-line: rgba(255, 255, 255, .09); --glass: rgba(31, 35, 52, .74); --ink-2: #d6dae8;
    --card-shadow: 0 1px 2px rgba(5, 7, 16, .35), 0 8px 22px rgba(5, 7, 16, .28);
    --card-shadow-hover: 0 2px 4px rgba(5, 7, 16, .45), 0 16px 34px rgba(5, 7, 16, .42);
    --page-bg: radial-gradient(900px 520px at 0% -10%, rgba(224, 246, 169, .07), transparent 65%), radial-gradient(1000px 600px at 100% -6%, rgba(124, 108, 255, .17), transparent 65%), radial-gradient(900px 520px at 50% 112%, rgba(60, 140, 190, .10), transparent 65%), #11141f;
  }
}
:root[data-theme="dark"] {
  --bg: #171a26; --panel: #1e2231; --ink: #eef0f7; --muted: #a6acbf; --line: #2e3348; --input: #171a26;
  --card: #1f2334; --card-line: rgba(255, 255, 255, .09); --glass: rgba(31, 35, 52, .74); --ink-2: #d6dae8;
  --card-shadow: 0 1px 2px rgba(5, 7, 16, .35), 0 8px 22px rgba(5, 7, 16, .28);
  --card-shadow-hover: 0 2px 4px rgba(5, 7, 16, .45), 0 16px 34px rgba(5, 7, 16, .42);
  --page-bg: radial-gradient(900px 520px at 0% -10%, rgba(224, 246, 169, .07), transparent 65%), radial-gradient(1000px 600px at 100% -6%, rgba(124, 108, 255, .17), transparent 65%), radial-gradient(900px 520px at 50% 112%, rgba(60, 140, 190, .10), transparent 65%), #11141f;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pos-card::before { opacity: .45; } :root:not([data-theme="light"]) .rail { box-shadow: 0 10px 34px rgba(5, 7, 16, .4); } }
:root[data-theme="dark"] .pos-card::before { opacity: .45; }
:root[data-theme="dark"] .rail { box-shadow: 0 10px 34px rgba(5, 7, 16, .4); }
.pos-card .pc-nums span { white-space: nowrap; font-size: 12px; }
.pos-card .pc-nums > div { padding: 8px 2px; }

/* карточка позиции: короче */
.head-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pos-card .pc-edit { position: relative; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--ink-2); background: var(--card); border: 1px solid var(--card-line); font-size: 15px; opacity: 0; transition: opacity .15s; flex: none; }
.pos-card:hover .pc-edit, .pos-card .pc-edit:focus-visible { opacity: 1; }
.pos-card .pc-edit:hover { text-decoration: none; border-color: var(--ink); color: var(--ink); }
@media (hover: none) { .pos-card .pc-edit { opacity: 1; } }
.pos-card { gap: 16px; padding: 18px 20px 20px; }
.pos-card .pc-title { min-height: 2.44em; }

/* тёмная тема: светлее */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #232839; --panel: #2c3248; --ink: #f1f3fa; --muted: #b8bed0; --line: #3b4260; --input: #232839;
    --card: #2d3350; --card-line: rgba(255, 255, 255, .13); --glass: rgba(45, 51, 80, .72); --ink-2: #dde1ee;
    --page-bg: radial-gradient(900px 520px at 0% -10%, rgba(224, 246, 169, .09), transparent 65%), radial-gradient(1000px 600px at 100% -6%, rgba(140, 124, 255, .24), transparent 65%), radial-gradient(900px 520px at 50% 112%, rgba(70, 160, 210, .14), transparent 65%), #1b2030;
  }
}
:root[data-theme="dark"] {
  --bg: #232839; --panel: #2c3248; --ink: #f1f3fa; --muted: #b8bed0; --line: #3b4260; --input: #232839;
  --card: #2d3350; --card-line: rgba(255, 255, 255, .13); --glass: rgba(45, 51, 80, .72); --ink-2: #dde1ee;
  --page-bg: radial-gradient(900px 520px at 0% -10%, rgba(224, 246, 169, .09), transparent 65%), radial-gradient(1000px 600px at 100% -6%, rgba(140, 124, 255, .24), transparent 65%), radial-gradient(900px 520px at 50% 112%, rgba(70, 160, 210, .14), transparent 65%), #1b2030;
}


/* =====================================================================
   Фон приложения: северное сияние, сетка точек, знак бренда и «оценки»
   ===================================================================== */
:root {
  --page-bg: linear-gradient(180deg, #f7f8fc 0%, #f1f3fa 100%);
  --dots: rgba(40, 44, 90, .16);
}
.shell { position: relative; z-index: 1; }
.app-fx { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.app-fx::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--dots) 1.1px, transparent 1.4px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 10%, #000 20%, transparent 85%); mask-image: radial-gradient(120% 90% at 70% 10%, #000 20%, transparent 85%); }
.ab { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; }
.a1 { width: 620px; height: 620px; top: -200px; left: 4%; background: #d3f08a; opacity: .62; animation: drift1 30s ease-in-out infinite alternate; }
.a2 { width: 560px; height: 560px; top: -120px; right: -120px; background: #c9bdfc; opacity: .6; animation: drift2 36s ease-in-out infinite alternate; }
.a3 { width: 540px; height: 540px; bottom: -220px; left: 18%; background: #9fdcf2; opacity: .5; animation: drift3 40s ease-in-out infinite alternate; }
.a4 { width: 460px; height: 460px; bottom: -100px; right: 4%; background: #fbcfae; opacity: .45; animation: drift1 44s ease-in-out infinite alternate-reverse; }
.a-mark { position: absolute; fill: none; stroke: rgba(70, 60, 190, .22); stroke-width: 1.4; }
.a-mark.m1 { width: 520px; right: -90px; bottom: 6%; transform: rotate(-14deg); }
.a-mark.m2 { width: 260px; left: 150px; top: 58%; transform: rotate(18deg); stroke: rgba(80, 150, 30, .28); }
@media (max-width: 900px) { .a-mark.m2 { display: none; } .ab { filter: blur(60px); opacity: .45; } .a-mark.m1 { width: 340px; } }
@media (prefers-reduced-motion: reduce) { .ab { animation: none; } }
/* карточки и панели светлой темы чуть прозрачнее: сияние просвечивает */
.panel, .kpi, .tile { background: rgba(255, 255, 255, .78); }

/* тёмная тема: тёплый графит + яркое сияние, стеклянные карточки */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1f1c29; --panel: #292536; --ink: #f3f1fa; --muted: #bab5cb; --line: #3c3752; --input: #1f1c29;
    --card: #2a2638; --card-line: rgba(255, 255, 255, .12); --glass: rgba(42, 38, 56, .62); --ink-2: #ded9ec;
    --page-bg: linear-gradient(180deg, #19161f 0%, #14121a 100%); --dots: rgba(255, 255, 255, .11);
  }
  :root:not([data-theme="light"]) .a1 { background: #a8d84a; opacity: .11; }
  :root:not([data-theme="light"]) .a2 { background: #8b5cf6; opacity: .30; }
  :root:not([data-theme="light"]) .a3 { background: #14b8c4; opacity: .22; }
  :root:not([data-theme="light"]) .a4 { background: #f472b6; opacity: .20; }
  :root:not([data-theme="light"]) .a-mark { stroke: rgba(190, 170, 255, .26); }
  :root:not([data-theme="light"]) .panel, :root:not([data-theme="light"]) .kpi, :root:not([data-theme="light"]) .tile { background: rgba(42, 38, 56, .66); }
}
:root[data-theme="dark"] {
  --bg: #1f1c29; --panel: #292536; --ink: #f3f1fa; --muted: #bab5cb; --line: #3c3752; --input: #1f1c29;
  --card: #2a2638; --card-line: rgba(255, 255, 255, .12); --glass: rgba(42, 38, 56, .62); --ink-2: #ded9ec;
  --page-bg: linear-gradient(180deg, #19161f 0%, #14121a 100%); --dots: rgba(255, 255, 255, .11);
}
:root[data-theme="dark"] .a1 { background: #a8d84a; opacity: .11; }
:root[data-theme="dark"] .a2 { background: #8b5cf6; opacity: .30; }
:root[data-theme="dark"] .a3 { background: #14b8c4; opacity: .22; }
:root[data-theme="dark"] .a4 { background: #f472b6; opacity: .20; }
:root[data-theme="dark"] .a-mark { stroke: rgba(190, 170, 255, .26); }
:root[data-theme="dark"] .panel, :root[data-theme="dark"] .kpi, :root[data-theme="dark"] .tile { background: rgba(42, 38, 56, .66); }

/* ---- панель поиска позиции: одна строка, остальное под «⋯» ---- */
.runbar { margin: 0 0 14px; }
.rs2 { gap: 12px; }
.rs2 .runform { margin: 0; }
.rs-fresh { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 12px; font-weight: 800; font-size: 14.5px; background: #e0f6a9; color: #1b3a0a; box-shadow: 0 2px 8px rgba(120, 170, 30, .22); }
.rs-fresh:hover { text-decoration: none; filter: brightness(.97); }
.rs-last { font-size: 14px; color: var(--muted); font-weight: 600; }
.rs-warn { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; color: var(--warn); background: var(--warn-soft); cursor: help; }
.rs-more { position: relative; }
.rs-more summary { list-style: none; cursor: pointer; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-size: 20px; line-height: 1; color: var(--ink-2); background: var(--card); border: 1px solid var(--card-line); box-shadow: var(--card-shadow); }
.rs-more summary::-webkit-details-marker { display: none; }
.rs-more summary:hover { border-color: var(--ink); }
.rs-menu { position: absolute; z-index: 20; top: 46px; left: 0; width: 330px; padding: 8px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-line); box-shadow: var(--card-shadow-hover); display: flex; flex-direction: column; gap: 2px; }
.rs-menu form { margin: 0; }
.rs-item { width: 100%; text-align: left; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.rs-item:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.rs-info { font-size: 13px; line-height: 1.45; color: var(--muted); padding: 6px 12px; border-top: 1px solid var(--card-line); }
.rs-info.warn { color: var(--warn); }

/* ---- список кандидатов: плотные карточки, не сливаются с фоном ---- */
.cand { background: var(--card); border: 1px solid var(--card-line); border-left: 6px solid var(--low); box-shadow: var(--card-shadow); }
.cand.s-top { border-left-color: var(--top); } .cand.s-good { border-left-color: #a6d94a; } .cand.s-mid { border-left-color: var(--mid); }
.cand:hover { box-shadow: var(--card-shadow-hover); }
.cand.on { box-shadow: 0 0 0 2px var(--ink), var(--card-shadow); }
.tabs { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--card-line); border-radius: 18px; padding: 6px 8px; box-shadow: var(--card-shadow); margin: 0 0 14px; gap: 2px; }
.tabs a { margin: 0; color: var(--ink-2); }
.tabs a.on { background: var(--ink); color: var(--bg); border-color: transparent; }
.tabs a.on .count { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.tabs .count { color: var(--muted); }
.tabs select { background: var(--card); border-color: var(--card-line); }
.empty { background: var(--card); border-radius: 16px; }

.is-public { background: var(--bg); }

/* показать/скрыть пароль */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:44px;width:100%}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border:0;background:transparent;color:var(--muted);border-radius:8px;cursor:pointer}
.pw-eye:hover{color:var(--ink);background:rgba(127,127,127,.14)}

/* настройки: разделы слева */
.set-wrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;align-items:start}
.set-nav{position:sticky;top:84px;display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:18px;background:var(--glass);border:1px solid var(--card-line);backdrop-filter:blur(14px)}
.set-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--ink-2);font-weight:600;text-decoration:none}
.set-nav a i{font-style:normal;width:22px;text-align:center}
.set-nav a:hover{background:rgba(127,127,127,.12)}
.set-nav a.on{background:var(--ink);color:var(--bg)}
.set-tab[hidden]{display:none}
.set-body{max-width:860px}
@media(max-width:900px){
  .set-wrap{grid-template-columns:1fr;gap:14px}
  .set-nav{position:static;flex-direction:row;overflow-x:auto;padding:6px}
  .set-nav a{white-space:nowrap;flex:0 0 auto}
}

/* Telegram-аккаунты: свернутые карточки */
details.tgacc{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:var(--card)}
details.tgacc>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer}
details.tgacc>summary::-webkit-details-marker{display:none}
details.tgacc .tg-main{flex:1;min-width:0;display:flex;flex-direction:column}
details.tgacc .tg-main small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
details.tgacc .tg-chev{color:var(--muted);transition:transform .15s}
details.tgacc[open] .tg-chev{transform:rotate(180deg)}
details.tgacc .tg-more{padding:0 14px 14px;border-top:1px solid var(--line);padding-top:12px}

/* история кандидата */
.hist{margin:14px 0}
.hist h3{margin:0 0 6px;display:flex;align-items:center;gap:8px}
.hist-n{font-size:12px;background:var(--ink);color:var(--bg);border-radius:99px;padding:1px 8px}
.hist-row{display:block;padding:10px 12px;margin-bottom:8px;border:1px solid var(--card-line);border-left:4px solid var(--muted);border-radius:12px;background:var(--card);color:inherit;text-decoration:none}
.hist-row:hover{border-color:var(--ink-2)}
.hist-row.rejected{border-left-color:#e0564a}.hist-row.interview{border-left-color:#2fb67c}.hist-row.shortlist{border-left-color:#f0a52b}.hist-row.contacted{border-left-color:#2aa6e0}.hist-row.clarify{border-left-color:#a96bff}
.hist-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.hist-why{margin-top:6px;padding:6px 10px;border-radius:8px;background:rgba(224,86,74,.12);color:#b4372c;font-size:13px}
.hist-note{margin-top:4px;color:var(--ink-2)}
.hist-chip{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:99px;font-size:12px;font-weight:600;background:rgba(169,107,255,.16);color:#6b3fc4}
:root[data-theme="dark"] .hist-chip{color:#cdb4ff}:root[data-theme="dark"] .hist-why{color:#ff9d93}

/* объединение резюме */
.merge{padding:6px 18px}
.mg-row{display:grid;grid-template-columns:200px 1fr 1fr 28px;gap:14px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.mg-row:last-child{border-bottom:0}
.mg-head{align-items:end}
.mg-pick{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:2px solid var(--card-line);border-radius:12px;cursor:pointer;background:var(--card)}
.mg-pick input{margin-right:6px}
.mg-pick:has(input:checked){border-color:#2fb67c;background:rgba(47,182,124,.10)}
.mg-pick small{color:var(--muted)}
.mg-l{color:var(--muted);font-size:13px;padding-top:2px}
.mg-v{overflow-wrap:anywhere}
.mg-row.same .mg-v{color:var(--ink-2)}
.mg-row.diff .mg-v{background:rgba(240,165,43,.14);border-radius:8px;padding:4px 8px}
.mg-mark{font-style:normal;font-weight:700;text-align:center}
.mg-row.same .mg-mark{color:#2fb67c}.mg-row.diff .mg-mark{color:#d98a12}
@media(max-width:700px){.mg-row{grid-template-columns:1fr 1fr}.mg-l{grid-column:1/-1}.mg-mark{display:none}}

/* боковое меню всегда развёрнуто (на компьютере), не наезжает на содержимое */
@media (min-width: 901px) {
  .shell-main { margin-left: 256px; }
  .rail, .rail:hover, .rail:focus-within { width: 222px; box-shadow: 0 10px 34px rgba(30, 32, 60, .12); }
  .rail .rl { opacity: 1; }
}

/* насыщеннее фон: цветной градиент вместо белого и сияние в середине экрана */
:root:not([data-theme="dark"]) { --page-bg: linear-gradient(135deg, #eaf3d6 0%, #eef0fb 38%, #e4dcfb 70%, #fbe6d6 100%); }
.a1 { opacity: .8; } .a2 { opacity: .78; } .a3 { opacity: .66; } .a4 { opacity: .6; }
.a5 { width: 520px; height: 520px; top: 38%; left: 34%; background: #f6b7d6; opacity: .38; animation: drift2 48s ease-in-out infinite alternate; }
.a6 { width: 480px; height: 480px; top: 18%; left: 56%; background: #a7e8d0; opacity: .42; animation: drift3 52s ease-in-out infinite alternate-reverse; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page-bg: linear-gradient(180deg, #19161f 0%, #14121a 100%); }
  :root:not([data-theme="light"]) .a5 { background: #ec4899; opacity: .16; }
  :root:not([data-theme="light"]) .a6 { background: #10b981; opacity: .13; }
}
:root[data-theme="dark"] .a5 { background: #ec4899; opacity: .16; }
:root[data-theme="dark"] .a6 { background: #10b981; opacity: .13; }
:root[data-theme="dark"] { --page-bg: linear-gradient(180deg, #19161f 0%, #14121a 100%); }
@media (max-width: 900px) { .a5, .a6 { display: none; } }

/* фон темнее, чтобы белые карточки и панели чётко от него отделялись */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --page-bg: linear-gradient(135deg, #b9cfa0 0%, #b7c0e2 40%, #beaedd 72%, #e0b9a0 100%); --dots: rgba(30, 32, 80, .22); }
  :root:not([data-theme="dark"]) .a1 { background: #a6d05a; opacity: .7; }
  :root:not([data-theme="dark"]) .a2 { background: #9a86f2; opacity: .7; }
  :root:not([data-theme="dark"]) .a3 { background: #5fb8dc; opacity: .6; }
  :root:not([data-theme="dark"]) .a4 { background: #f2a574; opacity: .55; }
  :root:not([data-theme="dark"]) .a5 { background: #e98fc0; opacity: .38; }
  :root:not([data-theme="dark"]) .a6 { background: #62d0aa; opacity: .4; }
  :root:not([data-theme="dark"]) .panel, :root:not([data-theme="dark"]) .kpi, :root:not([data-theme="dark"]) .tile { background: rgba(255, 255, 255, .94); box-shadow: 0 6px 22px rgba(30, 32, 70, .12); }
  :root:not([data-theme="dark"]) .rail { background: rgba(255, 255, 255, .92); }
}
:root[data-theme="light"] { --page-bg: linear-gradient(135deg, #b9cfa0 0%, #b7c0e2 40%, #beaedd 72%, #e0b9a0 100%); --dots: rgba(30, 32, 80, .22); }
:root[data-theme="light"] .a1 { background: #a6d05a; opacity: .7; }
:root[data-theme="light"] .a2 { background: #9a86f2; opacity: .7; }
:root[data-theme="light"] .a3 { background: #5fb8dc; opacity: .6; }
:root[data-theme="light"] .a4 { background: #f2a574; opacity: .55; }
:root[data-theme="light"] .a5 { background: #e98fc0; opacity: .38; }
:root[data-theme="light"] .a6 { background: #62d0aa; opacity: .4; }
:root[data-theme="light"] .panel, :root[data-theme="light"] .kpi, :root[data-theme="light"] .tile { background: rgba(255, 255, 255, .94); box-shadow: 0 6px 22px rgba(30, 32, 70, .12); }
:root[data-theme="light"] .rail { background: rgba(255, 255, 255, .92); }

/* боковое меню: спокойный мятно-голубой градиент, темнее белых панелей */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .rail { background: linear-gradient(175deg, #cfe9c4 0%, #b4dccf 55%, #a6cfe0 100%); border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 12px 32px rgba(40, 70, 90, .22); }
  :root:not([data-theme="dark"]) .rail-brand, :root:not([data-theme="dark"]) .rail-brand .rl { color: #1b2b2f; }
  :root:not([data-theme="dark"]) .rail-brand .brand-svg { background: transparent; padding: 0; }
  :root:not([data-theme="dark"]) .rail-nav a { color: #27403f; }
  :root:not([data-theme="dark"]) .rail-nav a:hover { background: rgba(255, 255, 255, .5); color: #11201f; }
  :root:not([data-theme="dark"]) .rail-nav a.on { background: #fff; color: #101a1a; box-shadow: 0 6px 16px rgba(40, 70, 90, .22); }
}
:root[data-theme="light"] .rail { background: linear-gradient(175deg, #cfe9c4 0%, #b4dccf 55%, #a6cfe0 100%); border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 12px 32px rgba(40, 70, 90, .22); }
:root[data-theme="light"] .rail-brand, :root[data-theme="light"] .rail-brand .rl { color: #1b2b2f; }
:root[data-theme="light"] .rail-brand .brand-svg { background: transparent; padding: 0; }
:root[data-theme="light"] .rail-nav a { color: #27403f; }
:root[data-theme="light"] .rail-nav a:hover { background: rgba(255, 255, 255, .5); color: #11201f; }
:root[data-theme="light"] .rail-nav a.on { background: #fff; color: #101a1a; box-shadow: 0 6px 16px rgba(40, 70, 90, .22); }

/* диалоги: карточки по группам, переписка открывается сбоку */
.dl-bar{margin:0 0 14px}.dl-find{width:100%;max-width:420px}
.dl-grp{margin-bottom:22px}.dl-grp[hidden],.dl-card[hidden]{display:none}
.dl-gh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dl-gh b{font-size:18px}.dl-gh span{font-size:12px;font-weight:700;background:var(--ink);color:var(--bg);border-radius:99px;padding:1px 9px}
.dl-gh small{color:var(--ink-2);opacity:.8}
.dl-gh.attn b::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:#f0a52b;margin-right:8px}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.dl-card{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:18px;background:var(--card);border:1px solid var(--card-line);box-shadow:0 6px 22px rgba(30,32,70,.12);cursor:pointer;transition:transform .12s,box-shadow .12s;min-width:0}
.dl-card:hover,.dl-card:focus-visible{transform:translateY(-2px);box-shadow:0 12px 30px rgba(30,32,70,.2);outline:0}
.dl-card header{display:flex;gap:12px;align-items:center}
.dl-av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--lime);color:#131313}
.dl-id{min-width:0;display:flex;flex-direction:column}.dl-id b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dl-id small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-last{margin:0;font-size:13.5px;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dl-card footer{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}.dl-card footer small{color:var(--muted)}
.dl-card.handoff,.dl-card.failed,.dl-card.approval{border-top:4px solid #f0a52b}
.dl-card.done{border-top:4px solid #2fb67c}.dl-card.active,.dl-card.queued{border-top:4px solid #2aa6e0}
.dl-phead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px;padding-right:44px}
.dl-phead h2{margin:0}
#detail-body .panel.inner{box-shadow:none;border:0;padding:0;background:transparent}#detail-body .panel.inner>h3{display:none}

/* вкладки-группы диалогов */
.dl-bar{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.dl-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:5px;border-radius:16px;background:var(--glass);border:1px solid var(--card-line);backdrop-filter:blur(10px)}
.dl-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:0;border-radius:12px;background:transparent;color:var(--ink-2);font:inherit;font-weight:700;cursor:pointer}
.dl-tab em{font-style:normal;font-size:12px;padding:1px 8px;border-radius:99px;background:rgba(127,127,127,.18)}
.dl-tab:hover{background:rgba(127,127,127,.12)}
.dl-tab.on{background:var(--ink);color:var(--bg)}.dl-tab.on em{background:rgba(255,255,255,.25)}
.dl-tab.attn:not(.on) em{background:#f0a52b;color:#2a1d00}
.dl-gh[hidden]{display:none}

/* диалоги: сначала только темы-карточки */
.dl-topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:6px}
.dl-topics[hidden],.dl-bar[hidden]{display:none}
.dl-topic{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:22px 22px 20px;border:0;border-radius:24px;text-align:left;font:inherit;color:var(--ink);cursor:pointer;background:var(--card);box-shadow:0 8px 26px rgba(30,32,70,.14);border-top:6px solid var(--muted);transition:transform .14s,box-shadow .14s}
.dl-topic:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(30,32,70,.22)}
.dl-topic.attn{border-top-color:#f0a52b}.dl-topic.live{border-top-color:#2aa6e0}.dl-topic.done{border-top-color:#2fb67c}.dl-topic.stop{border-top-color:#8c8c9a}
.dl-tn{font:800 54px/1 "Unbounded","Manrope",sans-serif;letter-spacing:-.03em}
.dl-topic b{font-size:19px}.dl-topic small{color:var(--muted);font-size:13.5px;min-height:2.6em}
.dl-who{display:flex;align-items:center;margin-top:8px}
.dl-who i{font-style:normal;width:32px;height:32px;margin-right:-8px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--lime);color:#131313;border:2px solid var(--card)}
.dl-who em{font-style:normal;margin-left:16px;color:var(--muted);font-weight:700}
.dl-bar{align-items:center}

/* выбор этапа: выпадающий список + комментарий (как в Huntflow) */
.stagepick{position:relative;margin:4px 0 12px}
.sp-cur{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:2px solid var(--c,#999);border-radius:14px;background:color-mix(in srgb,var(--c,#999) 16%,var(--card));color:var(--ink);font:inherit;font-weight:800;cursor:pointer}
.sp-cur i{width:11px;height:11px;border-radius:50%;background:var(--c,#999)}
.sp-cur em{font-style:normal;font-weight:600;font-size:13px;opacity:.65;margin-left:6px}
.sp-menu{position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:280px;max-height:340px;overflow:auto;padding:6px;border-radius:14px;background:var(--card);color:var(--ink);border:1px solid var(--card-line);box-shadow:0 18px 44px rgba(20,24,60,.28)}
.sp-menu[hidden],.sp-form[hidden]{display:none}
.sp-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:inherit;font:inherit;font-weight:600;text-align:left;cursor:pointer}
.sp-item i{width:10px;height:10px;border-radius:50%;background:var(--c,#999);flex:none}
.sp-item b{margin-left:auto;color:#2fb67c}
.sp-item:hover{background:rgba(127,127,127,.14)}.sp-item.on{background:color-mix(in srgb,var(--c,#999) 18%,var(--card))}
.sp-form{margin-top:10px;padding:14px;border-radius:14px;background:var(--glass);border:1px solid var(--card-line)}
.sp-to{margin-bottom:8px}.sp-form textarea{width:100%;min-height:90px}
.sp-btns{display:flex;gap:8px;margin-top:8px}
.dp-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
/* лента действий */
.ev-form textarea{width:100%;min-height:80px;margin-bottom:8px}
.ev-list{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.ev{display:flex;gap:10px;padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--card-line)}
.ev>i{font-style:normal;flex:none}
.ev-h{display:flex;gap:8px;align-items:baseline}
.ev-t{margin-top:4px;white-space:pre-line}
.ev.stage{border-left:4px solid #2aa6e0}.ev.comment{border-left:4px solid #f0a52b}

/* текущий этап + заметная кнопка «Сменить этап» */
.sp-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sp-label{color:var(--muted);font-size:13px;font-weight:600}
.sp-now{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;border:2px solid var(--c,#999);background:color-mix(in srgb,var(--c,#999) 18%,var(--card));color:var(--ink);font-weight:800}
.sp-now i{width:10px;height:10px;border-radius:50%;background:var(--c,#999)}
.sp-change{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:0;border-radius:12px;background:var(--ink);color:var(--bg);font:inherit;font-weight:800;cursor:pointer;box-shadow:0 6px 16px rgba(20,24,60,.25)}
.sp-change:hover{transform:translateY(-1px)}
.sp-menu{top:calc(100% + 4px)}

/* рабочая область кандидата: список слева, карточка справа (как в Хантфлоу), без выезда снизу */
.detail.ws{left:256px;right:14px;top:14px;bottom:14px;width:auto;margin:0;padding:0;border-radius:22px;overflow:hidden;display:grid;grid-template-columns:340px minmax(0,1fr);transform:none;opacity:0;pointer-events:none;transition:opacity .18s;box-shadow:0 24px 70px rgba(10,14,40,.4);background:var(--bg)}
.detail.ws.open{opacity:1;pointer-events:auto;transform:none}
.ws-list{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--card-line);background:var(--panel)}
.ws-back{margin:12px 12px 6px;padding:9px 12px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-weight:700;text-align:left;cursor:pointer}
.ws-back:hover{background:rgba(127,127,127,.14)}
.ws-tabs{display:flex;gap:6px;overflow-x:auto;padding:4px 12px 10px;scrollbar-width:thin}
.ws-tabs button{flex:none;display:inline-flex;gap:6px;align-items:center;padding:6px 11px;border:1px solid var(--card-line);border-radius:99px;background:var(--card);color:var(--ink-2);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.ws-tabs button em{font-style:normal;font-size:11px;padding:0 6px;border-radius:99px;background:rgba(127,127,127,.2)}
.ws-tabs button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.ws-items{flex:1;overflow-y:auto;padding:0 8px 12px;min-height:0}
.ws-item[hidden]{display:none}
.ws-item{display:flex;gap:10px;align-items:center;padding:10px;margin-bottom:4px;border-radius:12px;color:inherit;text-decoration:none}
.ws-item:hover{background:rgba(127,127,127,.12)}
.ws-item.on{background:var(--card);box-shadow:0 2px 10px rgba(20,24,60,.14);outline:2px solid #2fb67c}
.ws-item .score{flex:none;width:34px;height:34px;font-size:15px}
.ws-t{display:flex;flex-direction:column;min-width:0}.ws-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ws-t small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-main{overflow-y:auto;padding:14px 20px 32px;min-height:0;position:relative}
.ws .sheet-bd,.sheet-bd.open{background:rgba(15,20,35,.35)}
@media (max-width:900px){.detail.ws{left:8px;right:8px;top:8px;bottom:8px;grid-template-columns:1fr}.ws-list{display:none}}

/* карточка кандидата: слева содержимое, справа этап, PDF и комментарии (всегда на виду) */
.dp-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.dp-side{position:sticky;top:0;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 60px);overflow-y:auto}
.dp-sidebox{padding:14px 16px;border-radius:16px;background:var(--card);border:1px solid var(--card-line)}
.dp-sidebox h4{margin:0 0 10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dp-sidebox .stagepick{margin:0}
.dp-sidebox .sp-row{flex-direction:column;align-items:stretch;gap:8px}
.dp-sidebox .sp-label{display:none}
.dp-sidebox .sp-now{justify-content:center}
.dp-sidebox .sp-change{justify-content:center}
.dp-sidebox .sp-menu{left:0;right:0;min-width:0}
.dp-sidebox .dp-pdf{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.dp-sidebox .dp-pdf .btn{justify-content:center}
.dp-sidebox .ev-list{max-height:320px;overflow-y:auto}
.ws .dp{background:transparent;padding:0;border-radius:0}
.detail.ws{background:var(--panel)}
.ws-main{background:var(--bg)}
@media (max-width:1250px){.dp-cols{grid-template-columns:1fr}.dp-side{position:static;max-height:none;order:-1}}

/* единая карточка кандидата: разделы подряд, без вкладок */
.dp-sec{margin:0 0 26px}
.dp-sh{margin:0 0 12px;padding-bottom:8px;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.dp-pane[hidden]{display:none}

/* панель этапа в полосе рекомендации: всегда под рукой при прокрутке */
.dp-bar{position:sticky;top:0;z-index:25;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 18px;padding:10px 14px;border-radius:14px;background:var(--card);border:1px solid var(--card-line);box-shadow:0 8px 20px rgba(20,24,60,.12)}
.dp-rec-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.dp-bar .stagepick{margin:0;position:relative}
.dp-bar .sp-row{flex-direction:row;align-items:center;gap:10px}
.dp-bar .sp-label{display:none}
.dp-bar .sp-now{padding:7px 14px}
.dp-bar .sp-change{padding:9px 16px}
.dp-bar .sp-menu{left:auto;right:0;min-width:260px}
.dp-bar .sp-form{position:absolute;right:0;top:calc(100% + 8px);width:min(360px,86vw);z-index:31;background:var(--card);box-shadow:0 18px 44px rgba(20,24,60,.3)}
.dp-bar .sp-form[hidden]{display:none}
/* меню «Скачать» */
.dl-menu{position:relative;display:inline-block}
.dl-menu summary{list-style:none;cursor:pointer}.dl-menu summary::-webkit-details-marker{display:none}
.dl-pop{position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:270px;padding:6px;border-radius:14px;background:var(--card);color:var(--ink);border:1px solid var(--card-line);box-shadow:0 18px 44px rgba(20,24,60,.28)}
.dl-pop a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;color:inherit;text-decoration:none;font-weight:600}
.dl-pop a:hover{background:rgba(127,127,127,.14)}.dl-pop small{color:var(--muted);font-weight:400}
.dp-links button[disabled]{opacity:.55;cursor:not-allowed}
.dp-side{max-height:none}
@media (max-width:1250px){.dp-side{order:0}}
.ws-filter{margin:2px 12px 8px;width:calc(100% - 24px)}
.ws-title{margin:0 12px 6px;font-weight:800;display:flex;gap:8px;align-items:center}
.ws-title em{font-style:normal;font-size:12px;padding:1px 8px;border-radius:99px;background:rgba(127,127,127,.2)}
.ws-main{padding-top:0}.ws .dp{padding-top:14px}
.ws-filter{padding:9px 12px;border:1px solid var(--card-line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit}
.dp-bar{border-radius:0 0 14px 14px;margin-top:-2px}

/* этапы плитками: счётчик и три лучших кандидата, список открывается по клику */
.board-wrap[data-mode="funnel"] .board{display:none}
.board-wrap[data-mode="board"] .stage-tiles{display:none}
.stage-tiles{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 14px;align-items:stretch;scrollbar-width:thin}
.stile{flex:1 1 230px;min-width:210px;max-width:320px;display:flex;flex-direction:column;gap:10px;padding:16px 16px 14px;border-radius:20px;background:var(--card);border:1px solid var(--card-line);border-top:5px solid var(--c,#999);color:var(--ink);cursor:pointer;box-shadow:0 8px 24px rgba(30,32,70,.12);transition:transform .14s,box-shadow .14s}
.stile:hover,.stile:focus-visible{transform:translateY(-3px);box-shadow:0 16px 36px rgba(30,32,70,.2);outline:0}
.st-h{display:flex;align-items:center;gap:8px;font-size:15px}
.st-h i{width:10px;height:10px;border-radius:50%;background:var(--c,#999)}
.stile .st-n{font:800 44px/1 "Unbounded","Manrope",sans-serif;letter-spacing:-.03em}
.st-list{display:flex;flex-direction:column;gap:4px;flex:1}
.st-cand{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:10px;background:rgba(127,127,127,.09);min-width:0}
.st-cand:hover{background:rgba(127,127,127,.2)}
.st-cand .score{flex:none;width:24px;height:24px;font-size:12px}
.st-ct{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.st-more{color:var(--muted);font-size:13px;font-weight:600}
.stile.is-empty{flex:0 0 150px;min-width:150px;background:transparent;box-shadow:none;border-style:dashed;border-top-style:solid;cursor:default}
.stile.is-empty:hover{transform:none}
.stile.is-empty .st-n{color:var(--muted)}
.stile.is-rej{flex:0 0 200px;min-width:200px;margin-left:auto}
.runs-d{margin-top:18px}.runs-d>summary{cursor:pointer;font-weight:800;font-size:17px;list-style:none}
.runs-d>summary::-webkit-details-marker{display:none}.runs-d>summary::before{content:"▸ ";color:var(--muted)}.runs-d[open]>summary::before{content:"▾ "}
/* карточка кандидата: полоса этапов сверху остаётся видна */
.detail.ws{grid-template-rows:auto minmax(0,1fr)}
.ws-strip{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--card-line);background:var(--panel)}
.ws-strip .ws-back{margin:0;flex:none;padding:8px 12px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.ws-strip .ws-back:hover{background:rgba(127,127,127,.14)}
.ws-stages{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding:2px 0;min-width:0}
.ws-stages button{flex:none;display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--card-line);border-radius:99px;background:var(--card);color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.ws-stages button i{width:9px;height:9px;border-radius:50%;background:var(--c,#999)}
.ws-stages button em{font-style:normal;font-size:12px;padding:0 7px;border-radius:99px;background:rgba(127,127,127,.2)}
.ws-stages button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}.ws-stages button.on em{background:rgba(255,255,255,.25)}
.ws-main .sheet-x{margin-top:10px}
.dp-bar{margin-top:10px}
.stile{flex:1 1 200px;min-width:190px}
.stile.is-empty{flex:0 0 128px;min-width:128px;padding:14px 12px}
.stile.is-empty .st-h{font-size:13.5px}.stile.is-empty .st-n{font-size:34px}
.stile.is-rej{flex:0 0 176px;min-width:176px}

.stile{flex:1 1 176px;min-width:164px;padding:14px 14px 12px}
.stile.is-empty{flex:0 0 116px;min-width:116px;padding:12px 10px}
.stile.is-rej{flex:0 0 150px;min-width:150px}
.stile .st-n{font-size:40px}

/* карточка кандидата: шапка и этап неподвижны, прокручивается только содержимое */
.ws-main{display:flex;flex-direction:column;overflow:hidden;padding:0;position:relative}
.ws-main .sheet-x{position:absolute;top:10px;right:14px;margin:0;z-index:40}
.ws #detail-body{flex:1;min-height:0;display:flex;flex-direction:column}
.ws .dp{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 22px 0}
.ws .dp-head{flex:none;display:flex;align-items:center;gap:14px;padding-right:48px;margin:0}
.ws .dp-score{flex:none;width:60px;height:60px}.ws .dp-score b{font-size:26px}.ws .dp-score span{font-size:10px}
.ws .dp-id{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center}
.ws .dp-id>*{grid-column:1}
.ws .dp-id h2{font-size:22px;margin:0}
.ws .dp-id .dp-links{grid-column:2;grid-row:1/4;margin:0;justify-content:flex-end;align-self:center}
.ws .dp-chips{margin-top:4px}
.ws .dp-bar{flex:none;position:static;margin:12px 0 0;border-radius:14px;box-shadow:0 2px 10px rgba(20,24,60,.1)}
.ws .dp-scroll{flex:1;min-height:0;overflow-y:auto;padding:16px 4px 40px 0;margin-right:-4px}
.ws .dp-side{max-height:none}
@media (max-width:1500px){.ws .dp-cols{grid-template-columns:minmax(0,1fr) 300px;gap:16px}}
@media (max-width:1250px){.ws .dp-cols{grid-template-columns:1fr}.ws .dp-id{grid-template-columns:1fr}.ws .dp-id .dp-links{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:8px}}
.ws .dp-id .muted{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws .dp-head{align-items:center}.ws .dp-score{margin:0;align-self:center}
.ws .dp-chips{display:flex;flex-wrap:wrap;gap:6px}

.ev-sec:empty{display:none}
.ws .dp-cols{grid-template-columns:minmax(0,1fr)}
.ev.system{border-left:4px solid #8c8c9a}

/* отказ кандидату в Telegram: подтверждение текста */
.rj-fb { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; }
.rj-fb input { margin-top: 3px; }
.rj-fb small { color: var(--muted); font-weight: 400; }
.rjd { border: 1.5px solid var(--accent); border-radius: 14px; padding: 14px; margin-bottom: 14px; background: var(--card, var(--bg)); }
.rjd h4 { margin: 0 0 6px; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.rjd textarea { width: 100%; min-height: 120px; }
.rjd-btns { margin-top: 8px; }
.rjd-redo { display: flex; gap: 8px; margin: 10px 0 8px; }
.rjd-redo input { flex: 1; min-width: 0; }
.rj-fb[hidden] { display: none; }
.panel:has(.stagepick){position:relative;z-index:20;overflow:visible}

/* полоска диалога с ботом вверху карточки */
.dp-dlg { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft, var(--bg)); }
.dlg-go { border: 0; background: none; padding: 0; font-weight: 700; color: var(--ink); cursor: pointer; }
.dlg-go:hover { text-decoration: underline; }
.dlg-alert { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 4px 10px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 14px; }

/* шапка позиции в две строки и переключатель позиций по наведению на название */
.ph { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; position: relative; margin: 0 0 10px; }
.ph-sp { flex: 1; }
.ph .runbar { margin: 0; }
.pick { position: relative; }
.pick-b { border: 0; background: none; padding: 2px 6px; margin-left: -6px; border-radius: 12px; display: flex; gap: 10px; align-items: center; font: inherit; font-weight: 800; font-size: 26px; letter-spacing: -.01em; color: var(--ink); cursor: pointer; text-align: left; }
.pick-b i { font-style: normal; font-size: 13px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 1px 8px; }
.pick:hover .pick-b, .pick.open .pick-b { background: color-mix(in srgb, var(--card) 70%, transparent); }
.fly { position: absolute; left: 0; top: 100%; padding-top: 6px; z-index: 60; display: none; width: min(460px, 92vw); }
.pick:hover .fly, .pick.open .fly { display: block; }
.fly-h, .fly-l, .fly-f { background: var(--card); color: var(--ink); box-shadow: 0 18px 44px rgba(20, 24, 60, .28); }
.fly-h { border-radius: 16px 16px 0 0; padding: 12px 16px 4px; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.fly-l { padding: 4px 8px; max-height: 360px; overflow: auto; }
.fl { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.fl:hover { background: var(--soft, var(--bg)); text-decoration: none; }
.fl.cur { background: color-mix(in srgb, var(--accent) 14%, var(--card)); }
.fl.off { opacity: .55; }
.fl .own { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: hsl(var(--h) 60% 85%); color: hsl(var(--h) 50% 25%); font-size: 11px; font-weight: 800; }
.fl b { display: block; font-size: 14px; line-height: 1.25; }
.fl small { color: var(--muted); }
.fl .n { display: flex; gap: 8px; align-items: center; }
.fl .n em { font-style: normal; background: color-mix(in srgb, var(--ok, #2bb57c) 22%, var(--card)); border-radius: 8px; padding: 1px 8px; font-size: 12px; font-weight: 800; }
.fl .n span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.fly-f { border-radius: 0 0 16px 16px; padding: 8px 16px 12px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); }
.fly-f a { font-weight: 700; font-size: 13px; text-decoration: none; }
.chip2 { font-size: 12px; background: color-mix(in srgb, var(--card) 62%, transparent); border-radius: 999px; padding: 3px 10px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.qpop { position: relative; }
.qpop summary { cursor: pointer; list-style: none; }
.qpop summary::-webkit-details-marker { display: none; }
.qpop-b { position: absolute; z-index: 50; top: 100%; left: 0; margin-top: 6px; width: min(520px, 88vw); background: var(--card); color: var(--ink); border-radius: 14px; box-shadow: 0 18px 44px rgba(20, 24, 60, .28); padding: 12px 14px; word-break: break-word; }
.tb2 { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; flex-wrap: wrap; }
.at2 { display: inline-flex; gap: 8px; align-items: center; background: var(--card); color: var(--ink); border-radius: 12px; padding: 6px 12px; font-size: 13px; box-shadow: var(--shadow, none); border: 1.5px solid transparent; text-decoration: none; }
.at2:hover { border-color: var(--accent); text-decoration: none; }
.at2 b { font-size: 17px; }
.at2.hot b { color: var(--accent); }
.at2 em { font-style: normal; background: var(--accent); color: #fff; border-radius: 8px; padding: 2px 9px; font-size: 12px; font-weight: 800; }

.ph { flex-direction: column; align-items: stretch; gap: 6px; }
.ph-top, .ph-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ph .rs-fresh { display: none; }
.chip2.lnk { text-decoration: none; }
.chip2.lnk:hover { background: var(--card); }

.at2 em { color: var(--accent-ink); }