/* 00security console. One typeface (Be Vietnam Pro, bundled, full Vietnamese),
   a dark navigation rail, quiet surfaces, and one ordinal red ramp for alert
   severity (validated light→dark; dark mode steps run the other way). */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-display:swap;font-weight:400;src:url(fonts/be-vietnam-pro-vietnamese-400-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-display:swap;font-weight:400;src:url(fonts/be-vietnam-pro-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-display:swap;font-weight:600;src:url(fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-display:swap;font-weight:600;src:url(fonts/be-vietnam-pro-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-display:swap;font-weight:700;src:url(fonts/be-vietnam-pro-vietnamese-700-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-display:swap;font-weight:700;src:url(fonts/be-vietnam-pro-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{color-scheme:light;
--page:#edf0f3;--surface:#ffffff;--sunken:#f5f7f9;--line:#dce2e8;--gl:#e7ebef;--base:#c3cbd4;
--ink:#132030;--ink2:#4a596a;--mut:#748293;
--rail:#0f1e30;--rail2:#1a2c42;--railink:#aebccc;--railon:#ffffff;
--acc:#1b5cc0;--accink:#ffffff;--accsoft:#e3ecfa;--focus:#1b5cc0;
--plot:#2a78d6;--plotfill:rgba(42,120,214,.12);
--s-low:#eb9c74;--s-medium:#d9693f;--s-high:#b8402a;--s-critical:#86201a;
--quiet:#e4e9ee;--off:#c5ccd4;
--good:#0e7a0e;--warn:#9a6200;--crit:#b3261e;--goodbg:#e2f3e2;--warnbg:#fbf0d9;--critbg:#fbe5e3;
--cmdbg:#0f1e30;--cmdink:#dce6f2;
--r:6px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
--page:#09111b;--surface:#101b28;--sunken:#0c1621;--line:#1f2d3c;--gl:#182634;--base:#2c3d4f;
--ink:#e3eaf1;--ink2:#a7b4c2;--mut:#7c8a9a;
--rail:#060d16;--rail2:#122033;--railink:#93a3b6;--railon:#ffffff;
--acc:#5b9cf0;--accink:#06101c;--accsoft:#13263d;--focus:#7fb3f5;
--plot:#3987e5;--plotfill:rgba(57,135,229,.18);
--s-low:#953a26;--s-medium:#c4553a;--s-high:#e98258;--s-critical:#f9bd98;
--quiet:#16222f;--off:#2a3847;
--good:#4cc44c;--warn:#f0b544;--crit:#f2867c;--goodbg:#10291a;--warnbg:#2c2210;--critbg:#34151a;
--cmdbg:#050b13;--cmdink:#cfdcea}}
:root[data-theme="dark"]{color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:14px/1.55 "Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;font-feature-settings:"tnum" 0}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px}
.mono,code,pre{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}
.mono{font-size:12px;word-break:break-all}
.mut{color:var(--mut)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* shell: rail + content */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.rail{background:var(--rail);color:var(--railink);display:flex;flex-direction:column;padding:18px 12px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;color:var(--railon);font-weight:700;font-size:16px;padding:2px 8px 18px;letter-spacing:-.01em}
.brand svg{width:26px;height:26px;flex:none}
.rail nav{display:flex;flex-direction:column;gap:2px}
.rail nav a{display:flex;align-items:center;gap:10px;color:var(--railink);padding:7px 10px;border-radius:var(--r);font-size:13.5px}
.rail nav a:hover{background:var(--rail2);color:var(--railon);text-decoration:none}
.rail nav a.on{background:var(--rail2);color:var(--railon);font-weight:600;box-shadow:inset 3px 0 0 var(--acc)}
.rail nav .sep{height:1px;background:var(--rail2);margin:10px 6px}
.rail nav svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.who{margin-top:auto;padding:14px 8px 0;border-top:1px solid var(--rail2);font-size:13px}
.who a{color:var(--railon);font-weight:600}.who .role{color:var(--railink);margin-left:4px}
.who form{margin-top:8px}.who button{background:transparent;border:1px solid var(--rail2);color:var(--railink);padding:4px 10px;font-size:12.5px}
.who button:hover{color:var(--railon);border-color:var(--railink)}
main{padding:28px 32px 48px;max-width:1440px;width:100%}
main.bare{max-width:none;padding:0}

@media (max-width:900px){
.shell{grid-template-columns:1fr}
.rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px 12px;gap:6px}
.brand{padding:0 8px 0 2px}
.rail nav{flex-direction:row;overflow-x:auto;flex-wrap:nowrap;order:3;width:100%;scrollbar-width:none}
.rail nav a{white-space:nowrap;padding:6px 10px}.rail nav a.on{box-shadow:inset 0 -2px 0 var(--acc)}
.rail nav .sep{display:none}
.who{margin:0 0 0 auto;padding:0;border:0;display:flex;align-items:center;gap:8px}.who form{margin:0}
main{padding:18px 16px 40px}}

/* type */
h1{font-size:24px;line-height:1.25;margin:0 0 4px;font-weight:700;letter-spacing:-.015em}
h2{font-size:15px;margin:28px 0 10px;font-weight:600}
h3{font-size:13.5px;margin:0;font-weight:600}
.sub{color:var(--ink2);margin:0 0 20px}
.pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;margin-bottom:20px}
.pagehead>div:first-child{flex:1;min-width:260px}
.pagehead .sub{margin:0}

/* surfaces */
.card,.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:16px}
.panel{padding:16px 18px 14px;margin:0;min-width:0}
.panel header{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.panel header h3{flex:1}.panel header .mut{font-size:12.5px}
.tbl{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%}
th,td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:12px;color:var(--mut);font-weight:600;white-space:nowrap;background:var(--sunken)}
tr:last-child td{border-bottom:0}
tbody tr:hover td,table tr:hover td{background:var(--sunken)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}dt{color:var(--mut)}dd{margin:0}
pre{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;overflow:auto;font-size:12px;max-height:360px}
pre.cmd{white-space:pre-wrap;word-break:break-all;background:var(--cmdbg);color:var(--cmdink);border:0;padding:12px 14px;font-size:12.5px;user-select:all}
.pre{white-space:pre-wrap}
details.card summary{cursor:pointer;font-weight:600}

/* severity: colored mark + ink text (color never alone) */
.sev{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--ink)}
.sev::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--s-low);flex:none}
.sev-critical::before{background:var(--s-critical)}.sev-high::before{background:var(--s-high)}
.sev-medium::before{background:var(--s-medium)}.sev-low::before,.sev-info::before{background:var(--s-low)}
.sev-critical{color:var(--crit)}
.st-online{color:var(--good)}.st-off{color:var(--crit);font-weight:600}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;background:var(--off)}
.dot.online{background:var(--good)}.dot.off{background:var(--crit)}

/* controls */
form.inline{display:inline}
button,.btn{display:inline-flex;align-items:center;gap:6px;background:var(--acc);color:var(--accink);border:1px solid transparent;border-radius:var(--r);padding:7px 14px;font:inherit;font-weight:600;font-size:13.5px;cursor:pointer;text-decoration:none}
button:hover,.btn:hover{filter:brightness(1.08);text-decoration:none}
button.sec,.btn.sec{background:var(--surface);color:var(--ink);border-color:var(--line)}
button.sec:hover,.btn.sec:hover{border-color:var(--mut);filter:none}
button.danger{background:var(--crit);color:#fff}
a.btn{margin:0}
input,select,textarea{font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--focus);outline-offset:-1px;border-color:transparent}
label{display:block;margin:10px 0 4px;color:var(--ink2);font-size:12.5px;font-weight:600}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.row>div{min-width:140px}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:14px}
.wide{width:100%}.grow{flex:1;min-width:220px}.narrow{max-width:440px}
.err,.msg{padding:10px 14px;border-radius:var(--r);margin-bottom:14px;border:1px solid}
.err{background:var(--critbg);color:var(--crit);border-color:color-mix(in srgb,var(--crit) 30%,transparent)}
.msg{background:var(--goodbg);color:var(--good);border-color:color-mix(in srgb,var(--good) 30%,transparent)}

/* small stat tiles (soar page etc.) */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.stat b{display:block;font-size:24px;font-weight:700;letter-spacing:-.02em}.stat span{color:var(--mut);font-size:12.5px}

/* overview: situation line */
.situation{display:grid;grid-template-columns:6px 1fr;gap:0 18px;margin:0 0 22px}
.situation::before{content:"";grid-row:1/3;border-radius:3px;background:var(--good)}
.situation.warn::before{background:var(--s-medium)}.situation.crit::before{background:var(--s-critical)}.situation.idle::before{background:var(--off)}
.situation h1{font-size:26px;max-width:46ch}
.situation p{margin:6px 0 0;color:var(--ink2);font-size:13px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}

/* KPI strip: one bordered band, cells split by hairlines */
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px}
.kpi{padding:14px 16px;border-left:1px solid var(--line);color:inherit;min-width:0}
.kpi:first-child{border-left:0}
a.kpi:hover{background:var(--sunken);text-decoration:none}
.kpi .v{display:block;font-size:28px;line-height:1.1;font-weight:700;letter-spacing:-.02em}
.kpi .v small{font-size:15px;font-weight:600;color:var(--mut);letter-spacing:0}
.kpi .l{display:block;font-size:12.5px;color:var(--ink2);margin-top:4px}
.kpi.bad .v{color:var(--crit)}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.kpi:nth-child(4){border-left:0}.kpi:nth-child(n+4){border-top:1px solid var(--line)}}
@media (max-width:560px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi:nth-child(odd){border-left:0}.kpi:nth-child(4){border-left:1px solid var(--line)}.kpi:nth-child(n+3){border-top:1px solid var(--line)}}

.board{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.board.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:1100px){.board,.board.even{grid-template-columns:minmax(0,1fr)}}

/* chart chrome */
.plot{display:block;width:100%;overflow:visible}
.plot .gl{stroke:var(--gl);stroke-width:1;vector-effect:non-scaling-stroke}
.plot .base{stroke:var(--base);stroke-width:1;vector-effect:non-scaling-stroke}
.plot .line{fill:none;stroke:var(--plot);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.plot .area{fill:var(--plotfill);stroke:none}
.plot .hit{fill:transparent}.plot .hit:hover{fill:color-mix(in srgb,var(--ink) 6%,transparent)}
.plot .seg{stroke:var(--surface);stroke-width:1.5;vector-effect:non-scaling-stroke}
.s-low{fill:var(--s-low)}.s-medium{fill:var(--s-medium)}.s-high{fill:var(--s-high)}.s-critical{fill:var(--s-critical)}
.chartbox{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 8px}
.chartbox .yl{display:flex;flex-direction:column;justify-content:space-between;font-size:11px;color:var(--mut);text-align:right;font-variant-numeric:tabular-nums;padding-bottom:20px;min-width:24px}
.chartbox .xl{display:flex;justify-content:space-between;font-size:11px;color:var(--mut);margin-top:6px;font-variant-numeric:tabular-nums}
.chartbox .xl.days span{flex:1 1 0;text-align:center;white-space:nowrap;min-width:0}
.days-plot .plot{height:170px}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-size:12.5px;color:var(--ink2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.legend i.s-low{background:var(--s-low)}.legend i.s-medium{background:var(--s-medium)}.legend i.s-high{background:var(--s-high)}.legend i.s-critical{background:var(--s-critical)}
.legend i.c-quiet{background:var(--quiet);border:1px solid var(--line)}.legend i.c-off{background:transparent;border:1px dashed var(--off)}
.legend b{color:var(--ink);font-weight:600}
.nodata{display:grid;place-items:center;height:100%;min-height:80px;color:var(--mut);font-size:12.5px;background:var(--sunken);border-radius:4px}

/* fleet pulse: server × 24 h */
.pulsegrid{display:grid;grid-template-columns:minmax(90px,max-content) minmax(0,1fr);gap:5px 12px;align-items:center}
.pulsegrid .name{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px;color:var(--ink)}
.pulsegrid .name.off{color:var(--crit)}
.pulse{display:block;width:100%;height:18px}
.pulse .c-quiet{fill:var(--quiet)}
.pulse .c-off{fill:transparent;stroke:var(--off);stroke-width:1;stroke-dasharray:2 2;vector-effect:non-scaling-stroke}
.pulse rect:hover{stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.pulsegrid .xl{grid-column:2;display:flex;justify-content:space-between;font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums}
.pulsegrid .more{grid-column:1/3;font-size:12.5px}

/* horizontal bars */
.bars{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:baseline}
.bars .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.bars .lbl a{color:var(--ink);font-weight:600}.bars .lbl .mut{margin-left:6px}
.bars .n{font-weight:700;font-variant-numeric:tabular-nums}
.bars svg{grid-column:1/3;display:block;width:100%;height:8px;border-radius:2px;background:var(--sunken)}

/* table helpers: sparkline and meters */
.spark svg.plot{width:120px;height:28px}
.spark .area{display:none}
.meter{display:inline-grid;grid-template-columns:64px auto;gap:8px;align-items:center;font-variant-numeric:tabular-nums}
.meter svg{width:64px;height:6px;display:block;border-radius:3px;overflow:hidden}
.meter .track{fill:var(--quiet)}.meter .fill{fill:var(--plot)}
.meter.m-warn .fill{fill:var(--s-medium)}.meter.m-crit .fill{fill:var(--s-critical)}
.meter b{font-weight:600;font-size:12.5px;min-width:3.2ch}
.meter.m-crit b{color:var(--crit)}
.srv{min-width:900px}.srv td{vertical-align:middle}.srv td:nth-child(2){white-space:nowrap}
.srv .nm a{font-weight:600;color:var(--ink)}.srv .nm .mono{color:var(--mut)}

/* server page charts */
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:8px}
@media (max-width:900px){.charts{grid-template-columns:minmax(0,1fr)}}
.chart .plot{height:130px}
.chart header .now{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.facts{display:flex;flex-wrap:wrap;gap:8px 28px;margin:4px 0 22px;color:var(--ink2);font-size:13px}
.facts b{color:var(--ink);font-weight:600}

/* login */
.gate{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,440px)}
.gate .side{background:var(--rail);color:var(--railink);padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.gate .side .brand{font-size:18px;padding:0}
.gate .side p{max-width:34ch;font-size:15px;line-height:1.6;color:var(--railink)}
.gate .form{display:flex;flex-direction:column;justify-content:center;padding:48px 40px;background:var(--surface)}
.gate .form h1{margin-bottom:6px}.gate .form input{width:100%}.gate .form button{width:100%;justify-content:center;margin-top:18px;padding:10px}
@media (max-width:760px){.gate{grid-template-columns:1fr}.gate .side{padding:24px 20px}.gate .side p{display:none}.gate .form{padding:28px 20px}}
.login{max-width:380px}
.todo td{vertical-align:middle}
.todo .what a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.todo .what .mut{font-size:12px}
.alerts td{white-space:nowrap}.alerts td:nth-child(6){white-space:normal;min-width:260px;width:100%}
.card>h2:first-child,.card>h3:first-child,.card>:first-child>h2:first-child{margin-top:0}
.manage td{vertical-align:middle}.manage td.act{white-space:nowrap;text-align:right}
details.danger-zone{display:inline-block;text-align:left;vertical-align:middle}
details.danger-zone summary{cursor:pointer;color:var(--crit);font-weight:600;font-size:13px;list-style:none;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
details.danger-zone summary::-webkit-details-marker{display:none}
details.danger-zone[open] summary{border-color:var(--crit)}
details.danger-zone form{width:min(340px,calc(100vw - 48px));margin-top:8px;padding:14px;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r);white-space:normal;text-align:left}
label.check{display:flex;gap:8px;align-items:flex-start;font-weight:400;color:var(--ink);margin:10px 0 0}
label.check input{margin-top:3px}
details.danger-zone button{margin-top:12px}