/* helo.cy — единый дизайн-фундамент (UI/UX Pro Max: Data-Dense Dashboard)
   Fira Sans (текст) + Fira Code (данные/код). Токены, компоненты, полировка. */

/* ---------- Шрифты (самохостинг) ---------- */
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/fira-sans-latin-400-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/fira-sans-cyrillic-400-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/fira-sans-latin-600-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/fira-sans-cyrillic-600-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/fira-sans-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/fira-sans-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:'Fira Code';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/fira-code-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Fira Code';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/fira-code-latin-500-normal.woff2') format('woff2');}

/* ---------- Токены ---------- */
:root{
  --font-sans:'Fira Sans',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'Fira Code',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --bg:#f6f8fb; --card:#ffffff; --surface-2:#f1f5f9;
  --text:#0f172a; --muted:#64748b; --border:#e6ebf2;
  --indigo:#4338ca; --cyan:#06b6d4; --emerald:#10b981; --emerald-l:#34d399;
  --amber:#f59e0b; --red:#ef4444; --slate:#94a3b8;

  --grad:linear-gradient(100deg,var(--indigo),var(--cyan));
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-xl:20px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --shadow:0 10px 30px -12px rgba(15,23,42,.18);
  --shadow-lg:0 24px 60px -20px rgba(15,23,42,.28);
  --ring:0 0 0 4px color-mix(in srgb,var(--indigo) 22%,transparent);
  --dur:.18s; --ease:cubic-bezier(.4,0,.2,1);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0b1120; --card:#0f172a; --surface-2:#111a2e;
    --text:#e2e8f0; --muted:#94a3b8; --border:#1e293b;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 10px 30px -12px rgba(0,0,0,.5);
    --shadow-lg:0 24px 60px -20px rgba(0,0,0,.6);
  }
}

/* ---------- База ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em;line-height:1.2}
a{color:inherit;text-decoration:none;transition:color var(--dur) var(--ease)}
code,kbd,pre,.mono{font-family:var(--font-mono)}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:4px}
button,[role=button],a,summary,label[for]{cursor:pointer}
::selection{background:color-mix(in srgb,var(--indigo) 22%,transparent)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------- Карточки / поверхности ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.card--float{box-shadow:var(--shadow)}
.card--pad{padding:22px}
.muted{color:var(--muted)}
.mono{font-family:var(--font-mono)}

/* ---------- Кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  padding:12px 20px;border-radius:var(--radius);font-family:inherit;font-size:15px;font-weight:600;color:#fff;
  background:var(--grad);transition:filter var(--dur) var(--ease),transform .06s var(--ease),box-shadow var(--dur) var(--ease);
  box-shadow:0 4px 14px -6px color-mix(in srgb,var(--indigo) 60%,transparent)}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:none;color:var(--text);border:1px solid var(--border);box-shadow:none}
.btn.ghost:hover{background:var(--surface-2);filter:none}
.btn.sm{padding:8px 12px;font-size:13px}

/* ---------- Поля ---------- */
label{display:block;font-size:13px;color:var(--muted);margin:0 0 6px;font-weight:500}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=search],select,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--card);color:var(--text);font-family:inherit;font-size:15px;outline:none;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
input:focus,select:focus,textarea:focus{border-color:var(--indigo);box-shadow:var(--ring)}
input::placeholder{color:var(--slate)}

/* ---------- Бейджи / пилюли / точки ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.4}
.b-green{background:color-mix(in srgb,var(--emerald) 15%,transparent);color:var(--emerald)}
.b-amber{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}
.b-red{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)}
.b-gray{background:color-mix(in srgb,var(--slate) 18%,transparent);color:var(--slate)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--border);background:var(--card)}
.pill .dot,.dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot.pass{background:var(--emerald)} .dot.warn{background:var(--amber)} .dot.fail{background:var(--red)}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.score-badge{display:inline-block;min-width:40px;text-align:center;padding:4px 9px;border-radius:var(--radius-sm);font-weight:700;font-size:13px;color:#fff;font-family:var(--font-mono)}

/* ---------- Таблицы ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:12px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tr.row{transition:background var(--dur) var(--ease)}
tr.row:hover{background:color-mix(in srgb,var(--indigo) 5%,transparent)}
.dom{font-weight:600}
.dom a{color:var(--text)} .dom a:hover{color:var(--indigo)}

/* компактные icon-кнопки действий */
.icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid var(--border);border-radius:9px;
  background:var(--card);color:var(--muted);cursor:pointer;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.icon-btn:hover{color:var(--indigo);border-color:var(--indigo);background:color-mix(in srgb,var(--indigo) 7%,transparent)}
.icon-btn.danger:hover{color:var(--red);border-color:var(--red);background:color-mix(in srgb,var(--red) 7%,transparent)}
.icon-btn svg{width:16px;height:16px}
.row-actions{display:flex;gap:6px}

/* ---------- «i» тултип аббревиатур ---------- */
.info-i{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;
  border:1px solid var(--slate);color:var(--muted);font-size:10px;font-style:italic;font-weight:700;line-height:1;
  vertical-align:middle;user-select:none;cursor:help;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.info-i:hover,.info-i:focus{border-color:var(--indigo);color:var(--indigo);outline:none}

/* ---------- KPI / статы ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:26px}
@media(min-width:640px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm)}
.stat .n{font-size:26px;font-weight:700;font-family:var(--font-mono);letter-spacing:-.02em}
.stat .l{color:var(--muted);font-size:13px;margin-top:2px}

/* ---------- Тулбар: поиск слева + чипы справа ---------- */
.toolbar{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 18px}
.searchbox{position:relative;display:inline-flex;align-items:center;width:260px;max-width:100%;flex:none}
.searchbox svg{position:absolute;left:13px;width:16px;height:16px;color:var(--muted);pointer-events:none}
.searchbox input{width:100%;padding-left:38px;margin:0}

/* ---------- Модалка (нативный dialog) ---------- */
dialog{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);color:var(--text);
  box-shadow:var(--shadow-lg);padding:0;max-width:480px;width:calc(100% - 40px);font-family:var(--font-sans)}
dialog::backdrop{background:rgba(15,23,42,.45);backdrop-filter:blur(2px)}
dialog[open]{animation:dlg-in .18s var(--ease)}
@keyframes dlg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){dialog[open]{animation:none}}
.dialog-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border)}
.dialog-head h3{margin:0;font-size:17px}
.dialog-x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:22px;line-height:1;padding:2px 6px;border-radius:8px;transition:background var(--dur) var(--ease)}
.dialog-x:hover{background:var(--surface-2);color:var(--text)}
.dialog-body{padding:22px}

/* ---------- Чипы-фильтры ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--border);color:var(--muted);background:var(--card);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease)}
.chip:hover{background:var(--surface-2)}
.chip.active{border-color:var(--indigo);color:var(--indigo);font-weight:600;background:color-mix(in srgb,var(--indigo) 8%,transparent)}

/* ---------- Сегмент-переключатель ---------- */
.seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.seg label{margin:0} .seg input{display:none}
.seg span{display:block;padding:10px 16px;cursor:pointer;font-size:14px;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.seg input:checked + span{background:var(--grad);color:#fff}

/* ---------- Key-value таблица ---------- */
.kv{width:100%;border-collapse:collapse;font-size:14px}
.kv td{padding:8px 0;border-bottom:1px solid var(--border);vertical-align:top}
.kv td:first-child{color:var(--muted);white-space:nowrap;padding-right:16px;width:135px}
.kv tr:last-child td{border-bottom:0}
.kv .v{font-family:var(--font-mono);word-break:break-word}
.kv-h{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 12px}

/* ---------- Тултип (кастомный, через helo.js) ---------- */
.helo-tip{position:absolute;z-index:9999;max-width:280px;background:var(--text);color:var(--bg);
  padding:8px 11px;border-radius:9px;font-size:12.5px;line-height:1.45;box-shadow:var(--shadow-lg);
  pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity .12s var(--ease),transform .12s var(--ease)}
.helo-tip.in{opacity:1;transform:none}

/* ---------- Утилиты ---------- */
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}