/* ============================================================
   Dalter — админ-панель. Визуальная система (источник: DESIGN.md).
   Тема светлая, зафиксирована. Контраст верифицирован (body >=4.5:1).
   ============================================================ */
:root{
  color-scheme: light;
  /* surfaces */
  --bg:oklch(1 0 0); --surface:oklch(.985 .004 250); --surface-2:oklch(.972 .006 250);
  /* borders */
  --border:oklch(.900 .006 250); --border-strong:oklch(.840 .010 250); --border-input:oklch(.780 .013 253);
  /* text */
  --ink:oklch(.270 .021 250); --muted:oklch(.520 .021 250);
  /* accent (кобальт) */
  --accent:oklch(.515 .150 253); --accent-hover:oklch(.460 .150 253);
  --accent-weak:oklch(.960 .017 250); --ring:oklch(.580 .155 253);
  /* semantic */
  --danger:oklch(.520 .190 27); --danger-hover:oklch(.470 .190 27); --danger-weak:oklch(.958 .024 25);
  --success:oklch(.520 .125 150); --success-weak:oklch(.958 .028 150);
  --warn-text:oklch(.500 .100 70); --warn-weak:oklch(.950 .042 80);
  /* semantic border tokens (pair with the *-weak fills above) */
  --accent-bd:oklch(.86 .06 253); --success-bd:oklch(.82 .09 150); --danger-bd:oklch(.85 .10 27); --warn-bd:oklch(.86 .09 78);
  /* lead temperature */
  --hot-bg:oklch(.950 .038 33); --hot-text:oklch(.470 .160 30); --hot-bd:oklch(.85 .07 33);
  --warm-bg:oklch(.955 .042 78); --warm-text:oklch(.470 .095 70); --warm-bd:oklch(.86 .07 78);
  --cold-bg:oklch(.955 .012 250); --cold-text:oklch(.480 .030 250); --cold-bd:oklch(.88 .02 250);
  /* type */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","Segoe UI Mono",Consolas,monospace;
  --text-xs:.75rem; --text-sm:.8125rem; --text-base:.9375rem; --text-lg:1.125rem; --text-xl:1.375rem; --text-2xl:1.75rem;
  /* space / radius / shadow */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-8:48px;
  --radius-sm:6px; --radius:8px; --radius-lg:12px;
  --shadow-sm:0 1px 2px oklch(.5 .03 250 / .08);
  --shadow:0 6px 24px oklch(.4 .04 250 / .10);
}
*{box-sizing:border-box}
body{font-family:var(--font);font-size:var(--text-base);line-height:1.5;color:var(--ink);background:var(--bg);margin:0}

/* --- typography --- */
h1,h2,h3{line-height:1.25;text-wrap:balance;margin:0 0 var(--sp-3)}
h1{font-size:var(--text-xl);font-weight:600}
h2{font-size:var(--text-lg);font-weight:600;margin-top:var(--sp-5)}
h3{font-size:var(--text-base);font-weight:600;color:var(--muted);margin:var(--sp-5) 0 var(--sp-2)}
p{margin:0 0 var(--sp-3)}
a{color:var(--accent);text-underline-offset:2px}
a:hover{color:var(--accent-hover)}
.muted{color:var(--muted)}
.text-sm{font-size:var(--text-sm)}
.code,.key{font-family:var(--mono);font-size:.9em}
ul{margin:0 0 var(--sp-3);padding-left:var(--sp-5)}
li{margin:2px 0}

/* --- layout --- */
main{padding:var(--sp-5);max-width:1000px}
/* arbitrary admin/user strings (urls, keys, free-text) wrap instead of scrolling the page */
.step-card .flow,.tree-node,.card p,td,li{overflow-wrap:anywhere}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:2px}

/* --- nav --- */
.nav{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;padding:0 var(--sp-5);
  background:var(--surface);border-bottom:1px solid var(--border)}
.nav .brand{font-weight:700;letter-spacing:-.01em;padding:14px 0;margin-right:var(--sp-2);color:var(--ink)}
.nav a{color:var(--muted);text-decoration:none;font-weight:500;padding:14px 0;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s ease,border-color .15s ease}
.nav a:hover{color:var(--ink)}
.nav a.active{color:var(--accent);border-bottom-color:var(--accent)}
/* .right — крайняя справа группа шапки (статус + выход): один флекс-юнит, чтобы при
   переносе на узком экране пара переносилась ЦЕЛИКОМ, а не разъезжалась по разным
   строкам с разным выравниванием (impeccable, задача 5 — снимок на 375/480px). */
.nav .right{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--sp-2) var(--sp-4)}
.nav .health{font-size:var(--text-sm);color:var(--muted);padding:14px 0;display:inline-flex;
  align-items:flex-start;gap:6px;line-height:1.4}
/* Точка держится ПЕРВОЙ строки: при аварии на узком экране текст переносится на две,
   и по центру блока кружок повисал бы между строк (снимок 375px, все три пульса). */
.nav .health::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:currentColor;margin-top:calc((1.4em - 7px) / 2)}
/* Норма тиха, авария громка: в порядке говорит только зелёная точка, текст
   остаётся приглушённым и не спорит за внимание с содержимым страницы. */
.nav .health[data-state="ok"]{color:var(--muted)}
.nav .health[data-state="ok"]::before{background:var(--success)}
.nav .health[data-state="stale"]{color:var(--danger);font-weight:500}
.nav .health[data-state="unknown"]{color:var(--muted)}

/* --- buttons --- */
.btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:500;line-height:1;text-decoration:none;
  padding:9px 14px;border-radius:var(--radius);border:1px solid var(--border-strong);
  background:var(--bg);color:var(--ink);cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.btn:hover{background:var(--surface)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-danger{background:var(--bg);border-color:var(--danger);color:var(--danger)}
.btn-danger:hover{background:var(--danger-weak)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--accent);padding:9px 8px}
.btn-ghost:hover{background:var(--accent-weak)}
.btn-sm{padding:6px 10px;font-size:var(--text-sm)}
.btn:disabled{opacity:.5;cursor:not-allowed}
/* inline forms holding a single button shouldn't add layout gaps */
form.inline{display:inline}

/* --- tags & badges --- */
.tag{display:inline-flex;align-items:center;background:var(--surface-2);color:var(--muted);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px 8px;font-size:var(--text-xs);font-weight:500}
.tag--key{font-family:var(--mono);background:var(--surface);color:var(--ink);border-color:var(--border-strong)}
.tag--accent{background:var(--accent-weak);color:var(--accent);border-color:var(--accent-bd)}
.tag--hot{background:var(--hot-bg);color:var(--hot-text);border-color:var(--hot-bd)}
.tag--warm{background:var(--warm-bg);color:var(--warm-text);border-color:var(--warm-bd)}
.tag--cold{background:var(--cold-bg);color:var(--cold-text);border-color:var(--cold-bd)}
.tag--success{background:var(--success-weak);color:var(--success);border-color:var(--success-bd)}
.badge{display:inline-flex;align-items:center;font-size:var(--text-xs);font-weight:500;
  background:var(--surface-2);color:var(--muted);border-radius:var(--radius-sm);padding:2px 8px}
.badge--live{background:var(--success-weak);color:var(--success)}

/* --- alerts (+ legacy .flash/.error aliases) --- */
.alert,.flash,.error{border-radius:var(--radius);padding:10px 14px;margin:0 0 var(--sp-4);
  font-size:var(--text-sm);border:1px solid}
.alert--success,.flash{background:var(--success-weak);color:var(--success);border-color:var(--success-bd)}
.alert--error,.error{background:var(--danger-weak);color:var(--danger);border-color:var(--danger-bd)}
.alert--warning{background:var(--warn-weak);color:var(--warn-text);border-color:var(--warn-bd)}
.alert--info{background:var(--accent-weak);color:var(--accent);border-color:var(--accent-bd)}
.problem{color:var(--danger);font-size:var(--text-sm);margin:4px 0}

/* --- cards --- */
.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--sp-4);box-shadow:var(--shadow-sm)}
.step-card{margin:var(--sp-3) 0}
.step-card .head{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.step-card .flow{color:var(--muted);font-size:var(--text-sm);margin:2px 0 0 var(--sp-2)}
.step-card .actions{margin-top:var(--sp-3);display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}

/* --- tables --- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:var(--text-sm)}
thead th{text-align:left;font-weight:600;color:var(--muted);font-size:var(--text-xs);
  padding:9px 10px;background:var(--surface);border-bottom:1px solid var(--border);white-space:nowrap}
tbody td{padding:10px 10px;border-bottom:1px solid var(--border);vertical-align:top}
tbody tr:hover{background:var(--surface-2)}
td .req{display:block;max-width:38ch;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- forms --- */
.field{margin:0 0 var(--sp-4)}
.field label,label.field-label{display:block;font-size:var(--text-sm);font-weight:500;margin:0 0 var(--sp-1);color:var(--ink)}
.field .hint{color:var(--muted);font-size:var(--text-xs);margin:var(--sp-1) 0 0}
input,textarea,select{font:inherit;color:var(--ink);background:var(--bg);
  border:1px solid var(--border-input);border-radius:var(--radius-sm);padding:8px 10px;max-width:100%}
input[type=text],input[type=password],input:not([type]),textarea,select{width:100%}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--ring);outline-offset:1px;border-color:var(--accent)}
input[readonly]{background:var(--surface);color:var(--muted)}
.row{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.row .field{flex:1;min-width:160px}
.form-actions{display:flex;gap:var(--sp-3);align-items:center;margin-top:var(--sp-2);flex-wrap:wrap}
fieldset{border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-4);margin:0 0 var(--sp-4)}
legend{font-size:var(--text-sm);font-weight:600;color:var(--muted);padding:0 var(--sp-2)}
.empty{color:var(--muted);text-align:center;padding:var(--sp-6);
  border:1px dashed var(--border-strong);border-radius:var(--radius)}

/* --- funnel preview tree --- */
.tree-node{padding:2px 0 2px var(--sp-4);color:var(--ink)}

/* --- login page --- */
main.login{max-width:none;min-height:100vh;display:grid;place-items:center;padding:var(--sp-6) var(--sp-4)}
.login-card{width:100%;max-width:340px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:var(--sp-6)}
.login-card .mark{font-weight:700;font-size:var(--text-lg);letter-spacing:-.01em;margin:0 0 var(--sp-1)}
.login-card h1{font-size:var(--text-base);font-weight:500;color:var(--muted);margin:0 0 var(--sp-5)}

/* --- step form: progressive disclosure (JS-gated; no-JS shows all) --- */
html.js [data-types]:not(.step-active){display:none}
[hidden]{display:none !important}
.btn-rows{display:flex;flex-direction:column;gap:var(--sp-2)}
.btn-row{display:flex;gap:var(--sp-2);align-items:flex-start;flex-wrap:wrap}
.btn-row input,.btn-row select{padding:6px 8px;font-size:var(--text-sm)}
.btn-row .bl{flex:2;min-width:120px}.btn-row .bk{flex:0 0 auto;width:auto}
.btn-row .bv,.btn-row .bn{flex:1;min-width:90px}.btn-row .bu{flex:2;min-width:140px}
.btn-row .drop{color:var(--danger);background:none;border:none;cursor:pointer;padding:6px;font-size:var(--text-base);line-height:1}
.btn-row .drop:hover{color:var(--danger-hover)}

/* --- funnel graph (ЭТАП6) --- */
.graph{overflow-x:auto}
.gnode{position:relative}
.gnode.indented::before{content:"";position:absolute;left:-16px;top:0;bottom:0;
  border-left:2px solid var(--border);border-bottom-left-radius:8px}
.step-card h3.st{color:var(--ink);font-size:var(--text-base);font-weight:600;margin:0}
.step-card .flow a{font-family:var(--mono);font-size:.9em}
.backref{color:var(--warn-text)}
.orphan .step-card{border-color:var(--danger-bd);background:var(--danger-weak)}
:target .step-card{outline:2px solid var(--ring);outline-offset:2px}

/* --- motion --- */
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}