/* ВЕКТОР·45 — космический мостик. Тёмная тема (фиксированная). */
:root{
  --bg:#070b14; --surface:#0e1526; --surface2:#121c33; --panel:rgba(14,21,38,.82);
  --line:#1e2a44; --line2:#2b3a5e;
  --ink:#eef2fa; --ink2:#9fb0cd; --muted:#64748f;
  --s1:#3987e5; --s2:#199e70; --s3:#c98500; --s4:#9085e9; --s5:#e66767;
  --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --crit:#d03b3b;
  --glow:0 0 24px rgba(57,135,229,.25);
  --grid:#1c2740; --axis:#2b3a5e;
  --r:14px;
  font-size:15px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overflow-x:hidden;
}
#stars{position:fixed; inset:0; z-index:0; pointer-events:none}
#app,.login-wrap{position:relative; z-index:1}

/* ---------- каркас ---------- */
header.top{
  display:flex; align-items:center; gap:18px; padding:14px 26px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(10,15,28,.92), rgba(10,15,28,.75));
  backdrop-filter:blur(8px); position:sticky; top:0; z-index:5;
}
.brand{display:flex; align-items:center; gap:12px; cursor:pointer; user-select:none}
.brand svg{width:34px;height:34px;filter:drop-shadow(0 0 8px rgba(57,135,229,.6))}
.brand .t1{font-weight:800; letter-spacing:.16em; font-size:19px}
.brand .t1 em{color:var(--s1); font-style:normal}
.brand .t2{font-size:11px; color:var(--ink2); letter-spacing:.05em}
.spacer{flex:1}
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px;
  border:1px solid var(--line2); background:rgba(18,28,51,.6); color:var(--ink2); font-size:12px;
  white-space:nowrap;
}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.chip.ok .dot{background:var(--good); box-shadow:0 0 8px var(--good)}
.chip.bad .dot{background:var(--crit); box-shadow:0 0 8px var(--crit)}
.userbox{display:flex;align-items:center;gap:10px;color:var(--ink2);font-size:13px}
button, .btn{
  font:inherit; cursor:pointer; border-radius:10px; border:1px solid var(--line2);
  background:linear-gradient(180deg,#16223d,#101a30); color:var(--ink); padding:9px 16px;
  transition:.15s; letter-spacing:.02em;
}
button:hover,.btn:hover{border-color:var(--s1); box-shadow:var(--glow)}
button.primary{background:linear-gradient(180deg,#2d6fc4,#1c4f96); border-color:#3d7fd4; font-weight:600}
button.ghost{background:transparent}
button:disabled{opacity:.45; cursor:default; box-shadow:none}
main{max-width:1240px; margin:0 auto; padding:26px 26px 80px}

/* ---------- панели ---------- */
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; backdrop-filter:blur(6px);
}
.panel h3{margin:0 0 12px; font-size:13px; letter-spacing:.14em; color:var(--ink2); text-transform:uppercase}
.grid{display:grid; gap:16px}

/* ---------- мостик (главная) ---------- */
.hero-search{
  margin:34px auto 26px; max-width:760px; text-align:center;
}
.hero-search h1{font-size:30px; margin:0 0 6px; letter-spacing:.04em}
.hero-search h1 em{color:var(--s1); font-style:normal}
.hero-search p{color:var(--ink2); margin:0 0 22px}
.innrow{display:flex; gap:10px; justify-content:center}
.innrow input{
  font:inherit; font-size:19px; letter-spacing:.2em; text-align:center; width:340px;
  background:rgba(10,16,30,.85); color:var(--ink); border:1px solid var(--line2);
  border-radius:12px; padding:13px 16px; outline:none;
}
.innrow input:focus{border-color:var(--s1); box-shadow:var(--glow)}
.demo-chips{margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.demo-chips .chip{cursor:pointer}
.demo-chips .chip:hover{border-color:var(--s1); color:var(--ink)}
.cases{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px; margin-top:10px}
.case-card{
  position:relative; border:1px solid var(--line); border-radius:var(--r); padding:16px 16px 14px;
  background:linear-gradient(160deg, rgba(19,28,51,.9), rgba(12,18,34,.9)); cursor:pointer; transition:.15s;
}
.case-card:hover{transform:translateY(-2px); border-color:var(--s1); box-shadow:var(--glow)}
.case-card .nm{font-weight:650; margin:2px 0 6px; line-height:1.25}
.case-card .meta{font-size:12px; color:var(--muted)}
.case-card .st{font-size:12px; color:var(--ink2); margin-top:8px}

/* классы готовности: буква + подпись (не только цвет) */
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:3px 10px; border-radius:8px;
  font-weight:700; font-size:13px; border:1px solid;
}
.badge small{font-weight:500; font-size:11px; opacity:.9}
.cls-A{color:#41d341; border-color:#0ca30c; background:rgba(12,163,12,.12)}
.cls-B{color:#71aef0; border-color:#3987e5; background:rgba(57,135,229,.12)}
.cls-C{color:#fab219; border-color:#fab219; background:rgba(250,178,25,.10)}
.cls-D{color:#ff7b7b; border-color:#d03b3b; background:rgba(208,59,59,.12)}
.cls-live{color:var(--ink2); border-color:var(--line2); background:rgba(30,42,68,.4)}

/* ---------- дело ---------- */
.case-hero{display:flex; gap:22px; align-items:stretch; flex-wrap:wrap}
.case-hero .info{flex:1 1 380px}
.case-hero .info h2{margin:0 0 4px; font-size:24px}
.case-hero .info .sub{color:var(--ink2); font-size:13px; line-height:1.7}
.verdict-tile{
  min-width:240px; display:flex; align-items:center; gap:16px; padding:16px 20px;
  border-radius:var(--r); border:1px solid var(--line);
  background:radial-gradient(120% 140% at 20% 0%, rgba(57,135,229,.14), rgba(12,18,34,.6));
}
.verdict-ring{position:relative; width:92px; height:92px; flex:none}
.verdict-ring svg{width:100%;height:100%}
.verdict-ring .letter{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:38px; font-weight:800;
}
.verdict-lbl{font-size:13px; color:var(--ink2); line-height:1.5; max-width:260px}
.verdict-lbl b{color:var(--ink)}

.tabs{display:flex; gap:6px; margin:22px 0 14px; flex-wrap:wrap}
.tabs .tab{
  padding:8px 16px; border-radius:10px 10px 0 0; border:1px solid var(--line); border-bottom:none;
  color:var(--ink2); cursor:pointer; background:rgba(14,21,38,.5); font-size:13.5px; letter-spacing:.03em;
}
.tabs .tab.on{color:var(--ink); background:var(--surface2); border-color:var(--line2); font-weight:600}
.tabbody{border:1px solid var(--line2); border-radius:0 var(--r) var(--r) var(--r); background:var(--panel); padding:20px}

/* телеметрия сбора */
.telemetry{
  font-family:ui-monospace,Consolas,monospace; font-size:12.5px; background:#0a101f;
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; max-height:340px; overflow:auto;
}
.telemetry .row{padding:2px 0; color:var(--ink2)}
.telemetry .row.stage{color:var(--s1); font-weight:600}
.telemetry .row.err{color:var(--serious)}
.pulse{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--s1);
  animation:pulse 1.2s infinite; margin-right:8px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(57,135,229,.7)}70%{box-shadow:0 0 0 9px rgba(57,135,229,0)}100%{box-shadow:0 0 0 0 rgba(57,135,229,0)}}

/* матрица */
.matrix{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px}
.el-tile{border:1px solid var(--line); border-radius:12px; padding:14px; background:rgba(12,19,36,.75)}
.el-tile .hd{display:flex; align-items:center; gap:9px; margin-bottom:8px}
.el-tile .hd .ic{font-size:15px}
.el-tile .hd .nm{font-weight:650; font-size:13.5px; flex:1}
.el-tile .sum{font-size:12.8px; color:var(--ink2); line-height:1.55}
.el-tile .gap{font-size:12px; color:var(--warn); margin-top:7px}
.el-tile .claims{margin-top:8px; font-size:12px; color:var(--muted); line-height:1.5}
.st-CLOSED{border-left:3px solid var(--good)} .st-PARTIAL{border-left:3px solid var(--warn)}
.st-UNKNOWN{border-left:3px solid var(--muted)} .st-REFUTED{border-left:3px solid var(--crit)}
.caps{margin-top:14px; font-size:13px; color:var(--serious); line-height:1.7}
.llm-note{margin-top:16px; border-top:1px dashed var(--line2); padding-top:14px; color:var(--ink2); font-size:13.5px; line-height:1.65}

/* вектор-карта */
.vmap{width:100%; overflow-x:auto}
.vmap svg{min-width:720px; width:100%}

/* чарты */
.charts{display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:16px}
.chart{border:1px solid var(--line); border-radius:12px; padding:14px; background:rgba(12,19,36,.7)}
.chart h4{margin:0 0 4px; font-size:13px; color:var(--ink2); font-weight:600; letter-spacing:.05em}
.chart .note{font-size:11.5px; color:var(--muted); margin-bottom:6px}
.tooltip{
  position:fixed; z-index:50; pointer-events:none; background:#0c1425; border:1px solid var(--line2);
  border-radius:8px; padding:7px 10px; font-size:12px; color:var(--ink); box-shadow:0 6px 24px rgba(0,0,0,.5);
  display:none; line-height:1.5;
}
table.data{width:100%; border-collapse:collapse; font-size:12.8px}
table.data th{color:var(--muted); text-align:left; font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line2)}
table.data td{padding:6px 8px; border-bottom:1px solid var(--line); color:var(--ink2)}
table.data tr:hover td{background:rgba(57,135,229,.06)}
.tbl-wrap{overflow-x:auto}

/* документы */
.doc-actions{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.doc-view{
  background:#0c1322; border:1px solid var(--line); border-radius:12px; padding:26px 30px;
  line-height:1.65; font-size:14.5px; max-width:900px;
}
.doc-view h1{font-size:21px; line-height:1.35} .doc-view h2{font-size:17px; margin-top:26px}
.doc-view h3{font-size:15px} .doc-view blockquote{border-left:3px solid var(--warn); margin:12px 0; padding:8px 14px; background:rgba(250,178,25,.06); border-radius:6px}
.doc-view table{border-collapse:collapse; font-size:12.5px; margin:10px 0}
.doc-view td,.doc-view th{border:1px solid var(--line2); padding:4px 8px}
.doc-view code{background:#111b30; padding:1px 5px; border-radius:4px; font-size:12.5px}
.doc-list{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}

/* чат */
.chat-log{display:flex; flex-direction:column; gap:12px; max-height:520px; overflow-y:auto; padding:4px}
.msg{max-width:82%; padding:11px 15px; border-radius:14px; line-height:1.6; font-size:14px; white-space:pre-wrap; word-break:break-word}
.msg.user{align-self:flex-end; background:linear-gradient(180deg,#1d3f74,#16345f); border:1px solid #2b5698}
.msg.assistant{align-self:flex-start; background:#101a30; border:1px solid var(--line2)}
.msg .prov{font-size:11.5px; color:var(--muted); border-top:1px dashed var(--line2); margin-top:8px; padding-top:6px}
.sqlchip{display:block; font-family:ui-monospace,Consolas,monospace; font-size:11.5px; color:var(--s2);
  background:rgba(25,158,112,.07); border:1px solid rgba(25,158,112,.3); border-radius:8px; padding:6px 9px; margin:6px 0}
.chat-input{display:flex; gap:10px; margin-top:14px}
.chat-input textarea{
  flex:1; font:inherit; font-size:14px; background:rgba(10,16,30,.85); color:var(--ink);
  border:1px solid var(--line2); border-radius:12px; padding:11px 14px; resize:vertical; min-height:48px; outline:none;
}
.chat-input textarea:focus{border-color:var(--s1)}
.hint{font-size:12px; color:var(--muted); margin-top:8px}

/* логин */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center}
.login-card{
  width:400px; padding:38px 36px; border-radius:18px; border:1px solid var(--line2);
  background:linear-gradient(165deg, rgba(19,28,51,.95), rgba(10,16,30,.95));
  box-shadow:0 20px 60px rgba(0,0,0,.6), var(--glow); text-align:center;
}
.login-card .brand{justify-content:center; margin-bottom:8px}
.login-card h1{font-size:21px; letter-spacing:.14em; margin:8px 0 2px}
.login-card h1 em{color:var(--s1); font-style:normal}
.login-card p{color:var(--ink2); font-size:12.5px; margin:0 0 24px; line-height:1.6}
.login-card input{
  width:100%; font:inherit; font-size:15px; margin-bottom:12px; background:rgba(7,11,20,.9);
  color:var(--ink); border:1px solid var(--line2); border-radius:10px; padding:12px 14px; outline:none;
}
.login-card input:focus{border-color:var(--s1)}
.login-card button{width:100%; margin-top:6px; padding:12px}
.login-err{color:var(--serious); font-size:13px; min-height:18px; margin-top:10px}
.footnote{margin-top:26px; font-size:11px; color:var(--muted); line-height:1.6}
.muted{color:var(--muted)} .small{font-size:12px}
a{color:var(--s1)}