/* ALKOR OS — прототип. Внешних зависимостей нет: шрифты системные,
   графики рисуются inline-SVG. Работает на сервере без интернета. */

:root{
  --bg:#0e1012; --bg2:#14171a; --panel:#191d21; --panel2:#1f242a;
  --line:#2a3138; --line2:#39424b;
  --txt:#e6e9ec; --txt2:#9aa5ae; --txt3:#6b767f;
  --aramid:#8f9c6b; --aramid-dim:#5f6a47;
  --signal:#e0a13c; --alarm:#d3624a; --ok:#6f9d7a; --info:#6d8ba8;
  --rail:230px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono","Consolas","SF Mono","DejaVu Sans Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--txt);font-family:var(--font);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
.mono,code{font-family:var(--mono)}
button{font-family:inherit;cursor:pointer}
a{color:var(--info)}

/* ── LOGIN ────────────────────────────────────────────── */
#login{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 0%,#1a1f23 0%,var(--bg) 65%);z-index:100;
}
.lbox{width:360px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:34px 32px}
.lbox .brand{font-size:11px;letter-spacing:.24em;color:var(--aramid);font-family:var(--mono);text-transform:uppercase}
.lbox h1{font-size:26px;font-weight:600;letter-spacing:-.02em;margin:12px 0 6px}
.lbox .sub{color:var(--txt3);font-size:13px;margin-bottom:26px}
.lbox label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt3);font-family:var(--mono);margin:0 0 6px}
.lbox input{
  width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:3px;
  color:var(--txt);padding:10px 12px;font-size:14px;font-family:inherit;margin-bottom:16px;
}
.lbox input:focus{outline:none;border-color:var(--aramid-dim)}
.lbox button{
  width:100%;background:var(--aramid-dim);border:none;border-radius:3px;color:#12150f;
  font-weight:600;font-size:14px;padding:11px;letter-spacing:.02em;
}
.lbox button:hover{background:var(--aramid)}
.lerr{color:var(--alarm);font-size:13px;margin-bottom:14px;min-height:18px}

/* ── SHELL ────────────────────────────────────────────── */
#shell{display:none;min-height:100vh}
#shell.on{display:block}
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);background:#101315;
  border-right:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto;
}
.rail .logo{padding:20px 20px 16px;border-bottom:1px solid var(--line)}
.rail .logo .b{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--aramid);text-transform:uppercase}
.rail .logo .n{font-size:19px;font-weight:600;letter-spacing:-.01em;margin-top:4px}
.rail .logo .c{font-size:11.5px;color:var(--txt3);margin-top:2px}
.navgrp{padding:16px 0 6px}
.navgrp .t{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt3);padding:0 20px 8px}
.nav{
  display:flex;align-items:center;gap:10px;padding:9px 20px;font-size:13.5px;
  color:var(--txt2);border-left:2px solid transparent;
}
.nav:hover{background:#161a1d;color:var(--txt)}
.nav.on{background:#171c1a;color:var(--txt);border-left-color:var(--aramid)}
.nav .lt{width:7px;height:7px;border-radius:50%;flex:none;background:var(--line2)}
.nav .cnt{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--txt3)}
.rail .foot{margin-top:auto;padding:16px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--txt3)}
.rail .foot b{display:block;color:var(--txt2);font-size:13px;font-weight:500}
.nav .cnt b{font-weight:600}
.rail .foot button{background:none;border:1px solid var(--line2);color:var(--txt3);border-radius:3px;padding:4px 10px;font-size:11.5px;margin-top:10px}
.rail .foot button:hover{color:var(--txt);border-color:var(--txt3)}

main{margin-left:var(--rail);padding:26px 30px 70px;max-width:1560px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.head h1{font-size:25px;font-weight:600;letter-spacing:-.02em}
.head .s{color:var(--txt3);font-size:13px;margin-top:4px}
.head .r{font-family:var(--mono);font-size:11px;color:var(--txt3);letter-spacing:.06em;text-align:right}

/* ── CARDS / KPI ──────────────────────────────────────── */
.sect{margin-bottom:30px}
.sect>h2{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt3);font-weight:500;margin-bottom:13px;display:flex;align-items:center;gap:10px;
}
.sect>h2 .hint{text-transform:none;letter-spacing:0;font-family:var(--font);font-size:12px;color:var(--txt3)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:11px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:15px 16px 12px;position:relative;overflow:hidden}
.kpi.crit{border-color:#5a3229}.kpi.warn{border-color:#5a4522}
.kpi .k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);display:flex;align-items:center;gap:7px;min-height:26px}
.kpi .v{font-size:25px;font-weight:600;letter-spacing:-.025em;margin-top:6px;line-height:1.1}
.kpi .v small{font-size:12px;color:var(--txt3);font-weight:400;margin-left:3px}
.kpi .v.nd{font-size:15px;color:var(--txt3);font-weight:400;padding:6px 0 5px}
.kpi .d{font-family:var(--mono);font-size:11px;margin-top:5px;display:flex;gap:12px;flex-wrap:wrap}
.kpi .d .flat{max-width:100%}
.kpi .spark{margin-top:9px;height:30px}
.up{color:var(--ok)}.down{color:var(--alarm)}.flat{color:var(--txt3)}
.dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}
.s-ok{background:var(--ok)}.s-warn{background:var(--signal)}.s-crit{background:var(--alarm)}.s-nodata{background:var(--line2)}

.grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start}
.card{background:var(--panel);border:1px solid var(--line);border-radius:3px}
.card>.ch{padding:14px 18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt3);display:flex;justify-content:space-between;align-items:center}
.card>.cb{padding:16px 18px}

/* ── EVENTS ───────────────────────────────────────────── */
.evt{display:grid;grid-template-columns:16px 1fr;gap:12px;padding:13px 0;border-top:1px solid var(--line)}
.evt:first-child{border-top:none;padding-top:2px}
.evt .dot{margin-top:6px}
.evt .t{font-size:14px;font-weight:600;color:var(--txt)}
.evt .dsc{font-size:13px;color:var(--txt2);margin-top:4px}
.evt .act{font-size:12px;color:var(--aramid);margin-top:6px;font-family:var(--mono)}
.evt .mtag{display:inline-block;font-family:var(--mono);font-size:10px;color:var(--txt3);border:1px solid var(--line2);border-radius:2px;padding:1px 6px;margin-left:8px;vertical-align:1px}

/* ── LIGHTS ───────────────────────────────────────────── */
.lights{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px}
.light{background:var(--bg2);border:1px solid var(--line);border-radius:3px;padding:12px 12px 11px;text-align:left}
.light{text-decoration:none;display:block}
.light:hover{border-color:var(--line2)}
.light .bar{height:3px;border-radius:2px;margin-bottom:10px}
.light .n{font-size:13px;color:var(--txt)}
.light .m{font-family:var(--mono);font-size:10.5px;color:var(--txt3);margin-top:3px}

/* ── TABLES ───────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{
  text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--txt3);font-weight:500;white-space:nowrap;
  padding:0 14px 9px 0;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);
}
td{padding:9px 14px 9px 0;border-bottom:1px solid var(--line);color:var(--txt2);vertical-align:top}
tr:hover td{background:#1c2126}
td.num{font-family:var(--mono);text-align:right;padding-right:18px;white-space:nowrap}
th.num{text-align:right;padding-right:18px}
td b{color:var(--txt);font-weight:600}
.pill{display:inline-block;font-size:11px;padding:2px 8px;border-radius:2px;border:1px solid var(--line2);color:var(--txt2);white-space:nowrap}
.pill.ok{border-color:#3c5a45;color:var(--ok)}
.pill.warn{border-color:#5a4522;color:var(--signal)}
.pill.crit{border-color:#5a3229;color:var(--alarm)}
.pill.info{border-color:#33485a;color:var(--info)}

/* ── BAR LIST ─────────────────────────────────────────── */
.blist .row{display:grid;grid-template-columns:1fr 78px;gap:12px;align-items:center;padding:7px 0}
.blist .nm{font-size:13px;color:var(--txt2)}
.blist .track{height:6px;background:var(--bg2);border-radius:2px;overflow:hidden;margin-top:5px}
.blist .fill{height:100%;background:var(--aramid-dim);border-radius:2px}
.blist .val{font-family:var(--mono);font-size:12.5px;text-align:right;color:var(--txt)}
.blist .sub{font-family:var(--mono);font-size:10.5px;text-align:right;color:var(--txt3)}

/* ── REGISTRY ─────────────────────────────────────────── */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.filters button, .filters input{
  background:var(--panel);border:1px solid var(--line2);color:var(--txt2);
  border-radius:3px;padding:6px 12px;font-size:12.5px;font-family:inherit;
}
.filters button.on{background:#1e2419;border-color:var(--aramid-dim);color:var(--aramid)}
.filters input{min-width:220px}
.filters input:focus{outline:none;border-color:var(--aramid-dim)}
.formula{font-family:var(--mono);font-size:11.5px;color:var(--txt2);line-height:1.45}
.note{font-size:11.5px;color:var(--signal);margin-top:4px}
.note.crit{color:var(--alarm)}

/* ── DETAIL PANEL ─────────────────────────────────────── */
.mcard{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:16px 18px}
.mcard.crit{border-left:2px solid var(--alarm)}
.mcard.warn{border-left:2px solid var(--signal)}
.mcard.ok{border-left:2px solid var(--ok)}
.mcard.nodata{border-left:2px solid var(--line2)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.mcard .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.mcard .nm{font-size:14.5px;font-weight:600}
.mcard .vv{font-family:var(--mono);font-size:19px;font-weight:600;white-space:nowrap}
.mcard .meta{font-family:var(--mono);font-size:10.5px;color:var(--txt3);margin-top:3px;letter-spacing:.04em}
.mcard .chart{margin-top:10px}

.empty{color:var(--txt3);font-size:13px;padding:22px 0;text-align:center}
.loading{color:var(--txt3);font-size:13px;padding:40px 0;text-align:center;font-family:var(--mono);letter-spacing:.1em}

@media(max-width:1100px){.grid2{grid-template-columns:1fr}}
@media(max-width:760px){
  :root{--rail:0px}
  .rail{position:static;width:auto;flex-direction:column;border-right:none;border-bottom:1px solid var(--line)}
  main{margin-left:0;padding:18px 16px 60px}
}


/* ── ГОЛОСОВОЕ УПРАВЛЕНИЕ ─────────────────────────────── */
#vdock{position:fixed;right:26px;bottom:24px;z-index:60;display:flex;
  flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
#vdock > *{pointer-events:auto}

.vmic{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--aramid-dim);
  background:var(--panel);color:var(--aramid);display:flex;align-items:center;
  justify-content:center;position:relative;
  box-shadow:0 6px 22px rgba(0,0,0,.45);transition:transform .12s,background .15s;
}
.vmic:hover{background:var(--panel2);transform:translateY(-1px)}
.vmic.off{color:var(--txt3);border-color:var(--line2)}
.vmic.live{background:var(--aramid);color:#12150f;border-color:var(--aramid)}
.vmic.live::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1px solid var(--aramid);opacity:.55;animation:vping 1.4s ease-out infinite;
}
@keyframes vping{0%{transform:scale(.92);opacity:.6}100%{transform:scale(1.28);opacity:0}}
.vwave{position:absolute;bottom:9px;display:none;gap:2px;align-items:flex-end;height:9px}
.vmic.live .vwave{display:flex}
.vmic.live svg{opacity:.25}
.vwave i{width:2px;background:#12150f;border-radius:1px;animation:vbar .9s ease-in-out infinite}
.vwave i:nth-child(1){height:4px;animation-delay:0s}
.vwave i:nth-child(2){height:9px;animation-delay:.12s}
.vwave i:nth-child(3){height:6px;animation-delay:.24s}
.vwave i:nth-child(4){height:8px;animation-delay:.36s}
@keyframes vbar{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

.vpanel{
  width:380px;max-width:calc(100vw - 52px);background:var(--panel);
  border:1px solid var(--line2);border-radius:4px;padding:14px 15px 12px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);display:none;
  max-height:min(72vh,620px);flex-direction:column;
}
#vdock.on .vpanel{display:flex}
.vp-list{overflow-y:auto;flex:1 1 auto;min-height:0}
.vp-form,.vp-hint,.vp-heard,.vp-say,.vp-head{flex:0 0 auto}
.vp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.vp-t{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--aramid)}
.vp-x{background:none;border:none;color:var(--txt3);font-size:13px;line-height:1;padding:2px 4px}
.vp-x:hover{color:var(--txt)}
.vp-heard{font-size:15px;font-weight:500;letter-spacing:-.01em;min-height:20px;margin-bottom:8px}
.vh-live{color:var(--txt3);font-weight:400;font-style:italic}
.vp-say{font-size:13px;color:var(--txt2);line-height:1.5;min-height:18px}
.vp-say .vs-warn{color:var(--signal)}
.vp-say .vs-err{color:var(--alarm)}
.vp-say .vs-wait{color:var(--txt3);font-style:italic}
.vp-say .vs-src{font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  color:var(--info);border:1px solid var(--line2);border-radius:2px;padding:1px 4px;margin-left:7px;
  vertical-align:middle}
.vp-list{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.vex-t{width:100%;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt3);margin-bottom:2px}
.vchip{
  font-size:12px;color:var(--txt2);background:var(--bg2);border:1px solid var(--line);
  border-radius:12px;padding:3px 10px;cursor:pointer;text-decoration:none;
}
.vchip:hover{border-color:var(--aramid-dim);color:var(--txt)}
.vitem{
  width:100%;display:grid;grid-template-columns:1fr auto;gap:2px 10px;
  padding:7px 9px;background:var(--bg2);border:1px solid var(--line);
  border-left-width:2px;border-radius:2px;cursor:pointer;text-decoration:none;color:inherit;
}
.vitem:hover{background:var(--panel2)}
.vitem.crit{border-left-color:var(--alarm)}
.vitem.warn{border-left-color:var(--signal)}
.vi-d{grid-column:1/2;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt3)}
.vi-n{grid-column:1/2;font-size:12.5px;color:var(--txt)}
.vi-v{grid-column:2/3;grid-row:1/3;align-self:center;font-size:14px;font-weight:600;
  font-family:var(--mono);white-space:nowrap}
.vi-v small{font-size:10px;color:var(--txt3);font-weight:400}
.vp-form{display:flex;gap:6px;margin-top:11px}
.vp-form input{
  flex:1;background:var(--bg2);border:1px solid var(--line2);border-radius:3px;
  color:var(--txt);padding:7px 10px;font-size:13px;font-family:inherit;
}
.vp-form input:focus{outline:none;border-color:var(--aramid-dim)}
.vp-form button{
  background:var(--aramid-dim);border:none;border-radius:3px;color:#12150f;
  font-weight:700;padding:0 12px;font-size:14px;
}
.vp-form button:hover{background:var(--aramid)}
.vp-hint{font-size:11px;color:var(--txt3);line-height:1.45;margin-top:9px}
.vp-hint b{color:var(--signal);font-weight:600}

.kpi.vflash{animation:vflash 1.9s ease-out}
@keyframes vflash{
  0%{box-shadow:0 0 0 0 rgba(143,156,107,.75);border-color:var(--aramid)}
  100%{box-shadow:0 0 0 16px rgba(143,156,107,0)}
}

@media(max-width:720px){
  #vdock{right:14px;bottom:14px}
  .vpanel{width:calc(100vw - 28px)}
}


/* приветствие и переключатель звука */
.vsound{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);
  background:var(--panel);color:var(--aramid);display:flex;align-items:center;
  justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.vsound:hover{background:var(--panel2)}
.vsound.off{color:var(--txt3)}
.vgreet{font-weight:500;letter-spacing:-.01em;line-height:1.4;display:block}


/* ── СТРАНИЦА ВЫБОРА ГОЛОСА ───────────────────────────── */
body.vpage{padding:36px 20px}
.vwrap{max-width:760px;margin:0 auto}
.vhead .brand{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--aramid);text-transform:uppercase}
.vhead h1{font-size:25px;font-weight:600;letter-spacing:-.02em;margin:8px 0 8px}
.vhead .sub{color:var(--txt2);font-size:13.5px;line-height:1.6;margin-bottom:24px}
.vctl{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;
  background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:14px 16px;margin-bottom:18px}
.vctl label{flex:1 1 100%;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt3);display:block}
.vctl label.narrow{flex:0 0 190px;display:flex;align-items:center;gap:8px}
.vctl input[type=text],.vctl input:not([type]){width:100%;margin-top:6px;background:var(--bg2);
  border:1px solid var(--line2);border-radius:3px;color:var(--txt);padding:8px 10px;
  font-size:13px;font-family:inherit}
.vctl input[type=range]{flex:1;accent-color:var(--aramid)}
.vctl .mono{color:var(--txt2);font-size:11px;min-width:34px}
.vlist2{display:flex;flex-direction:column;gap:8px}
.vrow{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:12px 14px}
.vrow .vn b{font-size:14px;font-weight:600}
.vrow .vl{font-size:10.5px;color:var(--txt3);margin-top:2px}
.vrow button{background:var(--aramid-dim);border:none;border-radius:3px;color:#12150f;
  font-weight:600;font-size:13px;padding:8px 16px;white-space:nowrap}
.vrow button:hover{background:var(--aramid)}
.tag{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  border-radius:2px;padding:2px 6px;margin-left:8px;vertical-align:middle}
.tag.best{background:var(--aramid-dim);color:#12150f}
.tag.good{border:1px solid var(--ok);color:var(--ok)}
.tag.bad{border:1px solid var(--alarm);color:var(--alarm)}
.vempty,.vother{background:var(--panel);border:1px solid var(--line);border-radius:3px;
  padding:16px;color:var(--txt2);font-size:13px;line-height:1.6}
.vother{margin-top:10px;color:var(--txt3);font-size:12px}
.vfoot{margin-top:20px;color:var(--txt2);font-size:13px;line-height:1.6}
.vfoot pre{background:var(--bg2);border:1px solid var(--line);border-radius:3px;
  padding:12px 14px;margin:10px 0;font-family:var(--mono);font-size:12.5px;color:var(--txt);overflow-x:auto}