/* DEXOS — кабинет клиента.
   Визуальный язык взят из PRIME PERSONA V3 один в один:
     · серый холст, белые карточки — слои отделяет РАЗНИЦА ФОНА;
     · ни одной обводки и ни одной тени (--sh и --sh2 = none, вернуть можно одним токеном);
     · крупные радиусы, много воздуха, Onest;
     · цвет точечный — одна лаймовая плашка и одна барвинковая на экран;
     · иконка = тонкий глиф в светлом кружке (.icw), не цветная плашка.
   Тема живёт ТОЛЬКО на токенах, компоненты про неё не знают.
   ⚠️ Медиазапросы держать В КОНЦЕ файла: при равной специфичности выигрывает последнее
   правило, и блок, стоящий выше базовых, молча не работает. */
:root{
  --bg:#f2f2f2; --card:#ffffff; --tile:#f0f1f4; --tile2:#e6e8ec;
  --ink:#101114; --mut:#666d79; --hint:#5e6472;
  --acc:#2b5cff; --lime:#e2fb4f; --peri:#6d8cf7; --good:#17824f; --bad:#cf4444; --warn:#96690c;
  --chip:#101114; --onchip:#fff; --hcap:#2b5cff;
  --r:34px; --rs:24px; --rx:18px;
  --edge:1px solid color-mix(in srgb,var(--ink) 7%,transparent);
  --sh:none; --sh2:none;
  --font:'Onest',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'JetBrains Mono',Consolas,monospace;
}
:root[data-theme="dark"]{
  --bg:#0b0b0b; --card:#141313; --tile:#1e1d1d; --tile2:#272626;
  --ink:#f0f2f6; --mut:#a7afbc; --hint:#828c9e;
  --acc:#5b81ff; --lime:#e2fb4f; --peri:#8ea6ff; --good:#39c184; --bad:#f06a6a; --warn:#e8b13c;
  --chip:#f0f2f6; --onchip:#101114; --hcap:#e2fb4f;
  --edge:1px solid color-mix(in srgb,var(--ink) 9%,transparent);
  --sh:none; --sh2:none;
}
*{box-sizing:border-box}
html{scrollbar-gutter:stable}
html,body{margin:0;padding:0;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--font);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit;border:0;outline:0;background:none}
h1,h2,h3{margin:0;font-weight:600;line-height:1.18;letter-spacing:-.02em}
h1{font-size:26px} h2{font-size:19px} h3{font-size:15.5px}
p{margin:0 0 10px}
a{color:var(--acc)}
.mut{color:var(--mut)} .hint{color:var(--hint);font-size:12.5px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
svg.g{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.icw{width:40px;height:40px;border-radius:999px;background:var(--tile);display:grid;place-items:center;flex:0 0 auto;color:var(--ink)}
.icw.sm{width:32px;height:32px} .icw.sm svg.g{width:16px;height:16px}
.icw.lime{background:var(--lime);color:#101114}
.icw.peri{background:#8ea6ff;color:#101114}
.icw.dark{background:var(--chip);color:var(--onchip)}

/* ---------- вход ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login .card{max-width:440px;width:100%;padding:34px}
.login .brandbig{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.login .brandbig i{width:46px;height:46px;border-radius:999px;background:var(--lime);color:#101114;
  display:grid;place-items:center;font-style:normal;font-weight:700;font-size:17px}
.login .brandbig b{font-size:22px;letter-spacing:-.03em}
.login .lead{color:var(--mut);margin:0 0 22px}
.tabsw{display:flex;gap:6px;background:var(--tile);border-radius:999px;padding:5px;margin-bottom:18px}
.tabsw button{flex:1;height:36px;border-radius:999px;color:var(--mut);cursor:pointer;font-size:14px}
.tabsw button.on{background:var(--card);color:var(--ink);font-weight:500}

/* ---------- каркас ---------- */
.lay{display:grid;grid-template-columns:262px 1fr;gap:14px;padding:14px;min-height:100vh;max-width:1860px;margin:0 auto}
.side{background:var(--card);border-radius:var(--r);padding:16px 12px;display:flex;flex-direction:column;gap:3px;
  position:sticky;top:14px;height:calc(100vh - 28px);overflow-y:auto;box-shadow:var(--sh)}
.side .brand{display:flex;align-items:center;gap:11px;padding:6px 10px 18px;font-weight:700;letter-spacing:-.02em}
.side .brand i{width:40px;height:40px;border-radius:999px;background:var(--lime);color:#101114;display:grid;place-items:center;
  font-style:normal;font-size:15px;flex:0 0 auto}
.side .brand small{display:block;font-size:10.5px;font-weight:500;color:var(--hint);letter-spacing:.14em;text-transform:uppercase}
.side .gr{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--hint);padding:16px 12px 6px}
.nv{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:999px;background:transparent;color:var(--mut);
  cursor:pointer;text-align:left;width:100%;font-size:14.5px;transition:.15s}
.nv:hover{background:var(--tile);color:var(--ink)}
.nv.on{background:var(--chip);color:var(--onchip)}
.nv .bdg{margin-left:auto;background:var(--tile);color:var(--mut);border-radius:999px;padding:2px 9px;font-size:11.5px}
.nv.on .bdg{background:color-mix(in srgb,var(--onchip) 20%,var(--chip));color:var(--onchip)}
.side .bot{margin-top:auto;display:flex;flex-direction:column;gap:3px;padding-top:14px}
.main{min-width:0;display:flex;flex-direction:column;gap:14px}
.top{background:var(--card);border-radius:var(--r);padding:18px 24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;box-shadow:var(--sh)}
.top .sub{color:var(--hint);font-size:12.5px;margin-top:2px}
.spacer{flex:1}
.cont{flex:1;display:flex;flex-direction:column;gap:14px}

/* ---------- элементы ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;
  background:var(--tile);color:var(--ink);cursor:pointer;font-weight:500;transition:.15s;white-space:nowrap}
.btn:hover{background:var(--tile2)}
.btn.pri{background:var(--chip);color:var(--onchip)}
.btn.pri:hover{opacity:.86;background:var(--chip)}
.btn.lime{background:var(--lime);color:#101114}
.btn.gh{background:transparent;color:var(--mut)}
.btn.gh:hover{background:var(--tile);color:var(--ink)}
.btn.sm{height:34px;padding:0 14px;font-size:13.5px}
.btn.ic{width:40px;padding:0} .btn.ic.sm{width:34px}
.btn.danger{color:var(--bad)}
.btn:disabled{opacity:.4;cursor:default}
.btn:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 32%,transparent)}
.card{background:var(--card);border-radius:var(--r);padding:22px;box-shadow:var(--sh)}
.card.pad0{padding:0;overflow:hidden}
.inp{width:100%;height:44px;padding:0 16px;border-radius:var(--rs);background:var(--tile);transition:.15s}
.inp::placeholder{color:var(--hint)}
.inp:focus{background:var(--tile2);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
textarea.inp{height:auto;min-height:92px;padding:12px 16px;resize:vertical;line-height:1.5}
select.inp{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 20px) 19px,calc(100% - 15px) 19px;background-size:6px 6px;background-repeat:no-repeat}
.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;color:var(--mut);margin:0 0 5px 14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))}
.kpi{background:var(--card);border-radius:var(--r);padding:20px 22px;box-shadow:var(--sh)}
.kpi b{display:block;font-size:32px;font-weight:600;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:6px}
.kpi span{font-size:12.5px;color:var(--mut)}
.kpi.acc{background:var(--lime);color:#101114}
.kpi.acc span{color:#3d4a12}
.tag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;background:var(--tile);
  color:var(--mut);font-size:12.5px;white-space:nowrap}
.tag.good{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}
.tag.bad{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}
.tag.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.tag.dark{background:var(--chip);color:var(--onchip)}
.tag.lime{background:var(--lime);color:#101114}
.empty{padding:44px 24px;text-align:center;color:var(--mut)}
.empty .icw{margin:0 auto 14px;width:56px;height:56px}
.sep{height:1px;background:color-mix(in srgb,var(--ink) 7%,transparent);margin:16px 0;border-radius:1px}

/* строки-списки: отделяются зазором и заливкой, не линиями */
.rows{display:flex;flex-direction:column;gap:8px}
.rw{display:flex;align-items:center;gap:14px;background:var(--tile);border-radius:var(--rs);padding:13px 18px;cursor:pointer;transition:.15s}
.rw:hover{background:var(--tile2)}
.rw .tt{min-width:0;flex:1}
.rw .tt b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw .tt span{display:block;color:var(--hint);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- подключения ---------- */
.gsec{margin-bottom:6px}
.gsec h2{margin-bottom:2px}
.conn{background:var(--card);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:12px;
  cursor:pointer;transition:.15s;box-shadow:var(--sh)}
.conn:hover{background:var(--tile)}
.conn .ch{display:flex;align-items:flex-start;gap:12px}
.conn .ch b{font-weight:600;letter-spacing:-.01em;display:block}
.conn .ch p{margin:3px 0 0;color:var(--mut);font-size:13px;line-height:1.45}
.conn .cf{display:flex;align-items:center;gap:8px;margin-top:auto;flex-wrap:wrap}
.dot{width:8px;height:8px;border-radius:999px;background:var(--hint);flex:0 0 auto}
.dot.live{background:var(--good)} .dot.wait{background:var(--warn)} .dot.error{background:var(--bad)}

/* окно подключения */
.mask{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 42%,transparent);backdrop-filter:blur(6px);
  z-index:90;display:grid;place-items:center;padding:18px;overflow-y:auto}
.modal{background:var(--bg);border-radius:var(--r);width:min(760px,100%);max-height:92vh;overflow-y:auto;padding:26px}
.modal .mh{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.modal .mh h2{letter-spacing:-.025em}
.modal .mh p{margin:4px 0 0;color:var(--mut);font-size:13.5px}
.ways{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));margin-bottom:20px}
.way{background:var(--card);border-radius:var(--rs);padding:15px 17px;cursor:pointer;transition:.15s}
.way:hover{background:var(--tile)}
.way.on{background:var(--chip);color:var(--onchip)}
.way b{display:block;font-weight:600;font-size:14.5px;margin-bottom:3px}
.way span{font-size:12.5px;color:var(--mut);line-height:1.4;display:block}
.way.on span{color:color-mix(in srgb,var(--onchip) 72%,transparent)}
.steps{counter-reset:s;display:flex;flex-direction:column;gap:9px;margin:0 0 18px;padding:0;list-style:none}
.steps li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;background:var(--card);border-radius:var(--rs);padding:12px 16px;font-size:14px;line-height:1.5}
.steps li::before{content:counter(s);flex:0 0 auto;width:24px;height:24px;border-radius:999px;background:var(--tile);
  display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--mut);margin-top:1px}
.warnbox{background:color-mix(in srgb,var(--warn) 13%,transparent);border-radius:var(--rs);padding:14px 17px;
  font-size:13.5px;line-height:1.5;margin-bottom:16px;color:var(--ink)}
.warnbox b{color:var(--warn)}
.safebox{background:var(--card);border-radius:var(--rs);padding:16px 18px;margin-bottom:16px;font-size:13.5px;line-height:1.5}
.safebox ul{margin:8px 0 0;padding-left:18px} .safebox li{margin-bottom:4px}

/* ---------- графики ---------- */
.bars{display:flex;align-items:flex-end;gap:3px;height:120px;margin-top:14px}
.bars i{flex:1;background:var(--tile2);border-radius:4px 4px 2px 2px;min-height:2px;transition:.2s}
.bars i.hot{background:var(--acc)}
.spark{display:flex;align-items:flex-end;gap:2px;height:40px}
.spark i{flex:1;background:var(--tile2);border-radius:2px;min-height:2px}

/* ---------- чат ассистента ---------- */
.chat{display:flex;flex-direction:column;gap:12px;max-height:52vh;overflow-y:auto;padding-right:4px}
.bub{max-width:80%;padding:13px 17px;border-radius:var(--rs);line-height:1.55;white-space:pre-wrap;word-break:break-word}
.bub.me{align-self:flex-end;background:var(--chip);color:var(--onchip)}
.bub.ai{align-self:flex-start;background:var(--tile)}
/* разметка внутри ответа ИИ — поднимается функцией md() в app.js */
.bub .mdh{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em;margin:14px 0 6px}
.bub .mdh:first-child{margin-top:0}
.bub .mdli{display:block;padding-left:18px;position:relative;margin:3px 0}
.bub .mdli::before{content:'';position:absolute;left:5px;top:.62em;width:4px;height:4px;border-radius:999px;background:currentColor;opacity:.45}
.bub .mdli i{font-style:normal;position:absolute;left:0;opacity:.55}

.bub .mdli:has(i)::before{display:none}
.bub .mdhr{display:block;height:1px;background:currentColor;opacity:.14;margin:14px 0;border-radius:1px}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--chip);color:var(--onchip);
  padding:12px 22px;border-radius:999px;z-index:200;font-size:14px;max-width:90vw;text-align:center}

/* ---------- адаптив (ДЕРЖАТЬ В КОНЦЕ ФАЙЛА) ---------- */
@media(max-width:980px){
  .lay{grid-template-columns:1fr;padding:10px;gap:10px}
  .side{position:static;height:auto;flex-direction:row;overflow-x:auto;border-radius:var(--rs);padding:10px}
  .side .brand,.side .gr{display:none}
  .side .bot{margin-top:0;flex-direction:row;padding-top:0}
  .nv{width:auto;flex:0 0 auto}
  .nv .bdg{margin-left:6px}
  .modal{padding:20px;border-radius:var(--rs)}
  .top{padding:16px 18px;border-radius:var(--rs)}
  .card,.kpi{border-radius:var(--rs)}
}