/* Админка Neatype (SAY-59). Токены — дизайн-система v3 приложения (neat-v2.css): шрифт 6 ступеней, сетка 4 px,
   серый ≥4,5:1, две тени. Тема светлая. Цвета рядов графиков — проверенная палитра (dataviz), по порядку. */
@font-face { font-family: Geist; font-weight: 100 900; font-display: swap; src: url("fonts/Geist-normal-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Geist; font-weight: 100 900; font-display: swap; src: url("fonts/Geist-normal-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, U+20BD; }

:root {
  --sans: Geist, -apple-system, "Segoe UI", system-ui, sans-serif;
  --page: #F7F7F5; --card: #FFFFFF; --sunk: #F1F1EF;
  --line: rgba(22,22,24,.08); --line-2: rgba(22,22,24,.14);
  --ink: #161618; --ink-2: #3F3F44; --muted: #57575C; --faint: #6B6B70; --ph: #A1A1A6;
  --fs-cap: 11px; --fs-sm: 12px; --fs-body: 13px; --fs-h3: 15px; --fs-h2: 17px; --fs-h1: 26px; --fs-hero: 22px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --sh-1: 0 0 0 .5px rgba(22,22,24,.1), 0 1px 3px -1px rgba(22,22,24,.12);
  --sh-pop: 0 0 0 .5px rgba(22,22,24,.12), 0 16px 40px -12px rgba(12,12,13,.25);
  --signal: #FF4D1A; --signal-ink: #C2360C; --ok: #17A05A; --ok-ink: #0E7A43; --blue: #2F6FEB; --warn-ink: #9A6400;
  --hover: rgba(22,22,24,.045); --active: rgba(22,22,24,.07); --selected: rgba(47,111,235,.10);
  --r: 12px; --r-sm: 8px;
  /* ряды графиков: синий, оранжевый, бирюзовый, жёлтый, розовый, зелёный, фиолетовый, красный */
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300; --c7: #6250d6; --c8: #e34948;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--ink); font: var(--fs-body)/1.45 var(--sans); letter-spacing: -0.006em; font-feature-settings: "ss01", "cv11"; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.022em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.15; }
h2 { font-size: var(--fs-h3); }
h3 { font-size: var(--fs-body); }
p { margin: 0; text-wrap: pretty; }
a { color: var(--blue); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus { outline: none; }
html.kbd :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r-sm); }

/* ——— каркас ——— */
.app { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; padding: var(--s4) var(--s3); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s1); background: var(--page); }
.brand { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s1) var(--s2) var(--s4); }
.brand b { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.03em; }
.brand b i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-left: 2px; }
.brand span { color: var(--faint); font-size: var(--fs-sm); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: var(--s3); padding: 7px var(--s2); border-radius: var(--r-sm); color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.nav a svg { width: 16px; height: 16px; flex: none; color: var(--faint); }
.nav a:hover { background: var(--hover); }
.nav a.on { background: var(--card); box-shadow: var(--sh-1); color: var(--ink); }
.nav a.on svg { color: var(--ink); }
.side-foot { margin-top: auto; padding: var(--s2); color: var(--faint); font-size: var(--fs-sm); display: grid; gap: var(--s2); }
.side-foot .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main { min-width: 0; padding: var(--s5) var(--s6) var(--s7); max-width: 1440px; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.head .sub { color: var(--muted); margin-top: var(--s1); }
.tools { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }

/* ——— элементы ——— */
.seg { display: inline-flex; background: var(--sunk); border-radius: 10px; padding: 2px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 5px 10px; border-radius: var(--r-sm); color: var(--muted); font-weight: 500; cursor: pointer; white-space: nowrap; }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--sh-1); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 var(--s3); border-radius: 16px; border: 0; cursor: pointer; font-weight: 500; white-space: nowrap; background: var(--card); box-shadow: 0 0 0 .5px rgba(22,22,24,.17), 0 1px 2px rgba(22,22,24,.06); color: var(--ink); }
.btn:hover { background: #FBFBFA; }
.btn.ink { background: var(--ink); color: #fff; box-shadow: none; }
.btn.ink:hover { background: #2A2A2D; }
.btn.danger { color: var(--signal-ink); }
.btn.danger.ink { background: var(--signal-ink); color: #fff; }
.btn.sm { height: 28px; padding: 0 10px; font-size: var(--fs-sm); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn svg { width: 14px; height: 14px; }
.inp { height: 32px; border: 0; border-radius: var(--r-sm); background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); padding: 0 var(--s3); min-width: 0; }
.inp:focus { box-shadow: inset 0 0 0 1.5px var(--blue); }
textarea.inp { height: auto; padding: var(--s2) var(--s3); resize: vertical; line-height: 1.5; }
select.inp { padding-right: var(--s5); appearance: none; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2357575C' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center; }
.field { display: grid; gap: 6px; }
.field > span { color: var(--muted); font-size: var(--fs-sm); font-weight: 500; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s3); }

.card { background: var(--card); border-radius: var(--r); box-shadow: var(--sh-1); padding: var(--s4); min-width: 0; }
.card > header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.card > header .note { color: var(--faint); font-size: var(--fs-sm); text-align: right; }
.cards { display: grid; gap: var(--s4); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.mt { margin-top: var(--s4); }
.mt5 { margin-top: var(--s5); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.sm { font-size: var(--fs-sm); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.r { text-align: right; }
.nowrap { white-space: nowrap; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* плитки показателей */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); }
.kpi { background: var(--card); border-radius: var(--r); box-shadow: var(--sh-1); padding: var(--s3) var(--s4) var(--s4); min-width: 0; }
.kpi .k { color: var(--muted); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .v { font-size: var(--fs-hero); font-weight: 600; letter-spacing: -0.03em; margin-top: var(--s1); white-space: nowrap; }
.kpi .d { font-size: var(--fs-sm); margin-top: 2px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up { color: var(--ok-ink); }
.down { color: var(--signal-ink); }
.kpi .spark { display: block; width: 100%; height: 28px; margin-top: var(--s2); }

/* значки */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 10px; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; background: var(--sunk); color: var(--ink-2); }
.badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b-pro { background: rgba(23,160,90,.10); color: var(--ok-ink); }
.b-gift { background: rgba(98,80,214,.10); color: #4B3BB8; }
.b-test { background: rgba(237,161,0,.14); color: var(--warn-ink); }
.b-expired { background: rgba(194,54,12,.08); color: var(--signal-ink); }
.b-blocked { background: var(--ink); color: #fff; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* таблицы */
.tbl-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--s4)); padding: 0 var(--s4); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 500; color: var(--faint); font-size: var(--fs-sm); padding: 0 var(--s3) var(--s2) 0; white-space: nowrap; border-bottom: 1px solid var(--line); }
td { padding: 9px var(--s3) 9px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover td { background: var(--hover); }
tbody tr.sel td { background: var(--selected); }
.who-cell { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.ava { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: var(--fs-sm); color: #fff; flex: none; }
.who-cell > div b { font-weight: 500; display: block; }
.who-cell > div > span { color: var(--faint); font-size: var(--fs-sm); display: block; }
.empty { color: var(--faint); padding: var(--s5) 0; text-align: center; }

/* графики */
.chart { position: relative; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .ax { fill: var(--faint); font-size: 11px; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .base { stroke: var(--line-2); stroke-width: 1; }
.chart .cross { stroke: var(--ink); stroke-opacity: .25; stroke-width: 1; }
.legend { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 3px; border-radius: 2px; }
.tip { position: absolute; pointer-events: none; background: var(--card); box-shadow: var(--sh-pop); border-radius: var(--r-sm); padding: var(--s2) var(--s3); font-size: var(--fs-sm); white-space: nowrap; z-index: 5; transform: translate(-50%, calc(-100% - 10px)); }
.tip b { display: block; margin-bottom: 2px; }
.tip div { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.tip .v { margin-left: auto; padding-left: var(--s3); color: var(--ink); font-weight: 500; }

/* воронка */
.funnel { display: grid; gap: var(--s2); }
.fstep { display: grid; grid-template-columns: minmax(0, 1fr) 64px 92px; column-gap: var(--s3); row-gap: 4px; align-items: center; }
.fstep .bar { grid-column: 1 / -1; grid-row: 2; }
.fstep.fhead { color: var(--faint); font-size: var(--fs-sm); margin-bottom: -4px; }
.more-row { justify-content: center; }
.fstep .l { color: var(--ink-2); }
.fstep .bar { height: 10px; background: var(--sunk); border-radius: 4px; overflow: hidden; }
.fstep .bar i { display: block; height: 100%; background: var(--c1); border-radius: 0 4px 4px 0; min-width: 2px; }
.fstep .n { text-align: right; font-weight: 500; }
.fconv { font-size: var(--fs-sm); color: var(--faint); text-align: right; white-space: nowrap; }

/* полоски-доли */
.hbars { display: grid; gap: var(--s2); }
.hbar { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) 56px; gap: var(--s3); align-items: center; }
.hbar .bar { height: 8px; background: var(--sunk); border-radius: 4px; overflow: hidden; }
.hbar .bar i { display: block; height: 100%; border-radius: 4px; }

/* внимание */
.alerts { display: grid; gap: 2px; }
.alert { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: var(--s3); align-items: baseline; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.alert:last-child { border-bottom: 0; }
.alert .dot { transform: translateY(-1px); }
.alert p { color: var(--ink-2); }
.alert a { font-size: var(--fs-sm); white-space: nowrap; }
.banner { display: flex; gap: var(--s3); align-items: flex-start; background: rgba(237,161,0,.10); color: #5C3D00; border-radius: var(--r); padding: var(--s3) var(--s4); margin-bottom: var(--s4); }
.banner.info { background: rgba(47,111,235,.07); color: #1F3F80; }
.banner svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

/* клиенты */
.filters { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-bottom: var(--s3); }
.filters .inp.search { flex: 1 1 240px; max-width: 360px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.split.open { grid-template-columns: minmax(0, 1fr) 420px; }
.drawer { position: sticky; top: var(--s5); max-height: calc(100vh - 48px); overflow: auto; }
.drawer .x { margin-left: auto; }
.dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--s4); }
.dl dt { color: var(--faint); }
.dl dd { margin: 0; text-align: right; }
.acts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sect { margin-top: var(--s5); }
.sect > h3 { margin-bottom: var(--s2); }
.mini-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s4); }
.mini-kpis > div { background: var(--sunk); border-radius: var(--r-sm); padding: var(--s2) var(--s3); }
.mini-kpis b { display: block; font-size: var(--fs-h3); font-weight: 600; }
.mini-kpis span { color: var(--faint); font-size: var(--fs-sm); }

/* модалка */
.modal-bg { position: fixed; inset: 0; background: rgba(22,22,24,.28); display: grid; place-items: center; z-index: 50; padding: var(--s4); animation: fade .15s ease-out; }
.modal { background: var(--card); border-radius: 16px; box-shadow: var(--sh-pop); width: min(480px, 100%); padding: var(--s5); display: grid; gap: var(--s4); animation: pop .18s cubic-bezier(.2,.8,.2,1); max-height: calc(100vh - 32px); overflow: auto; }
.modal .foot { display: flex; justify-content: flex-end; gap: var(--s2); }
.modal .warn { background: rgba(194,54,12,.06); color: var(--signal-ink); border-radius: var(--r-sm); padding: var(--s2) var(--s3); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.97) translateY(4px); } }
.toast { position: fixed; left: 50%; bottom: var(--s5); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px var(--s4); border-radius: 20px; box-shadow: var(--sh-pop); z-index: 60; animation: pop .18s; max-width: calc(100vw - 32px); }

/* вход */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--s4); }
.login .card { width: min(380px, 100%); padding: var(--s6) var(--s5); display: grid; gap: var(--s4); }
.login .brand { padding: 0; }
.login .err { color: var(--signal-ink); min-height: 18px; }

.skeleton { color: var(--faint); padding: var(--s6) 0; }

/* ——— ширины ——— */
@media (max-width: 1280px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split.open { grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (max-width: 1100px) {
  .split.open { grid-template-columns: minmax(0, 1fr); }
  .split.open .drawer { position: fixed; inset: 0; z-index: 40; max-height: none; border-radius: 0; padding: var(--s4) var(--s4) var(--s7); }
  .g-main, .g3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: sticky; top: 0; z-index: 30; height: auto; flex-direction: row; align-items: center; padding: var(--s2) var(--s4); border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; gap: var(--s3); scrollbar-width: none; }
  .side::-webkit-scrollbar { display: none; }
  .brand { padding: 0; flex: none; }
  .brand span { display: none; }
  .nav { flex-direction: row; }
  .nav a { padding: 6px 10px; }
  .side-foot { display: none; }
  .main { padding: var(--s4) var(--s4) var(--s7); }
  .g2 { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: var(--fs-hero); }
  .hide-m { display: none; }
}
@media (max-width: 560px) {
  .card > header { flex-direction: column; align-items: flex-start; gap: 2px; }
  .card > header .note { text-align: left; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fstep { grid-template-columns: minmax(0, 1fr) 56px 80px; }
  .hide-s { display: none; }
  .mini-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}