:root{
  --bg:#050E26;--bg2:#0A1B4D;--panel:rgba(13,29,78,.66);--panel2:rgba(26,48,112,.55);--line:rgba(110,150,255,.18);
  --text:#EAF0FF;--muted:#8FA3D6;--accent:#FF9A1F;--accent2:#FFC24D;--blue:#3E6EF0;
  --ok:#2EE59D;--warn:#FFC24D;--bad:#FF5468;--info:#6C97FF;
  /* logo palette (dark-theme variant) */
  --m1:#1E43B8;--m2:#2F5BE0;--m3:#3E6EF0;--m4:#6C97FF;--o1:#FF9A1F;--o2:#FFC24D;--o3:#F2680A;--wm:#EAF0FF;--nose:#0E2A8A;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:radial-gradient(1200px 700px at 80% -10%,#10296e 0%,transparent 60%),radial-gradient(900px 600px at -10% 110%,#3a1f05 0%,transparent 55%),var(--bg);
  color:var(--text);font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh}
[hidden]{display:none!important}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9}
#app,#auth,#splash{position:relative;z-index:1}
button,select,input,textarea{font:inherit;color:inherit}
button{background:linear-gradient(135deg,var(--accent),#ff7a00);color:#1b1000;font-weight:700;border:0;border-radius:8px;padding:8px 14px;cursor:pointer;transition:transform .15s,box-shadow .2s,filter .2s}
button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,154,31,.35)}
button:active:not(:disabled){transform:translateY(0)}
button.ghost{background:rgba(255,255,255,.04);color:var(--text);font-weight:500;border:1px solid var(--line)}
button.ghost:hover:not(:disabled){box-shadow:0 0 0 1px var(--accent) inset;background:rgba(255,154,31,.08)}
button.danger{background:rgba(255,84,104,.15);color:var(--bad);border:1px solid rgba(255,84,104,.4)}
button:disabled{opacity:.4;cursor:not-allowed}
select,input,textarea{background:rgba(5,14,38,.7);border:1px solid var(--line);border-radius:8px;padding:7px 10px;transition:border-color .2s,box-shadow .2s}
select:focus,input:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,154,31,.2)}
textarea{width:100%;min-height:120px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.muted{color:var(--muted)}
a{color:var(--accent)}

/* logo parts */
.c1{fill:var(--m1)}.c2{fill:var(--m2)}.c3{fill:var(--m3)}.c4{fill:var(--m4)}
.o1{fill:var(--o1)}.o2{fill:var(--o2)}.o3{fill:var(--o3)}.nose{fill:var(--nose)}
.eye{fill:#fff}.zig{stroke:#fff}.ltr{stroke:var(--wm)}
svg .ear,svg .head,svg .jaw,svg .eye,svg .zig,svg .nose,svg .ltr{transform-box:fill-box}
.earL{transform-origin:50% 100%}.earR{transform-origin:50% 100%}

/* splash */
#splash{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:radial-gradient(800px 500px at 50% 40%,#0d2a78 0%,#050E26 70%);transition:opacity .6s,visibility .6s}
#splash.out{opacity:0;visibility:hidden}
.logo-splash{width:min(560px,86vw);height:auto;overflow:visible;filter:drop-shadow(0 0 36px rgba(62,110,240,.45))}
.logo-splash .earL{animation:dropL .8s cubic-bezier(.2,.9,.2,1) both}
.logo-splash .earR{animation:dropR .8s .1s cubic-bezier(.2,.9,.2,1) both}
.logo-splash .head{animation:rise .7s .3s both}
.logo-splash .jaw{animation:rise .7s .5s both}
.logo-splash .zig{stroke-dasharray:140;animation:draw .8s .7s both}
.logo-splash .nose{animation:pop .5s .9s both}
.logo-splash .eye{animation:eyes 1.6s 1s both}
.logo-splash .ltr{stroke-dasharray:240;animation:draw 1s both}
.logo-splash .ltr:nth-child(1){animation-delay:1.0s}.logo-splash .ltr:nth-child(2){animation-delay:1.08s}
.logo-splash .ltr:nth-child(3){animation-delay:1.16s}.logo-splash .ltr:nth-child(4){animation-delay:1.24s}
.logo-splash .ltr:nth-child(5){animation-delay:1.32s}.logo-splash .ltr:nth-child(6){animation-delay:1.40s}
.logo-splash .ltr:nth-child(7){animation-delay:1.48s}.logo-splash .ltr:nth-child(8){animation-delay:1.56s}
.scanline{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 22px var(--accent);animation:scan 1.8s .4s ease-in-out both;top:20%}
.tagline{letter-spacing:.5em;font-size:12px;color:var(--muted);animation:fade 1s 1.6s both}
.loadbar{width:220px;height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;animation:fade .6s 1.4s both}
.loadbar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--accent));animation:load 1.3s 1.5s ease-out both}
@keyframes dropL{from{transform:translateY(-60px) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes dropR{from{transform:translateY(-60px) rotate(8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{from{transform:translateY(24px) scale(.96);opacity:0}to{transform:none;opacity:1}}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes draw{from{stroke-dashoffset:240;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@keyframes eyes{0%{opacity:0}25%{opacity:1;filter:drop-shadow(0 0 6px #fff)}45%{opacity:.2}70%{opacity:1;fill:var(--accent2);filter:drop-shadow(0 0 8px var(--accent))}100%{opacity:1;fill:#fff}}
@keyframes scan{0%{top:12%;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:82%;opacity:0}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes load{from{width:0}to{width:100%}}

/* auth */
#auth{min-height:100vh;display:grid;place-items:center;padding:20px}
.auth-card{width:min(380px,100%);background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:16px;padding:28px;display:grid;gap:12px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.45);animation:rise .6s both}
.auth-card h1{margin:0;letter-spacing:.3em;font-size:18px}
.logo-auth{width:70px;margin:0 auto;filter:drop-shadow(0 0 18px rgba(62,110,240,.6))}
.logo-auth .eye{animation:blink 5s infinite}

/* header */
.top{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:10px 20px;background:linear-gradient(180deg,rgba(8,20,58,.92),rgba(8,20,58,.7));backdrop-filter:blur(14px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{height:38px;width:auto;overflow:visible;filter:drop-shadow(0 0 10px rgba(62,110,240,.55))}
.logo-word{height:15px;width:auto}
.logo-mark .eye{animation:blink 5s infinite}
.brand:hover .earL{animation:twitchL .5s}.brand:hover .earR{animation:twitchR .5s}
@keyframes blink{0%,92%,100%{opacity:1}94%,98%{opacity:.1}}
@keyframes twitchL{40%{transform:rotate(-12deg)}}
@keyframes twitchR{40%{transform:rotate(12deg)}}
nav{display:flex;gap:2px;flex:1;flex-wrap:wrap}
nav button{background:transparent;color:var(--muted);font-weight:600;padding:7px 13px;position:relative;box-shadow:none}
nav button:hover:not(:disabled){color:var(--text);transform:none;box-shadow:none}
nav button.active{color:var(--text)}
nav button.active::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));animation:grow .3s}
nav .cnt{margin-left:6px;font-size:11px;padding:1px 6px;border-radius:999px;background:rgba(255,84,104,.2);color:var(--bad)}
.right{display:flex;gap:10px;align-items:center}
.badge{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.06em}
.badge.demo{background:rgba(255,194,77,.14);color:var(--warn)}
.badge.live{background:rgba(46,229,157,.14);color:var(--ok)}
.engine{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.engine i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:beat 1s infinite}
.engine.off i{background:var(--bad);animation:none}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(46,229,157,.7)}70%{box-shadow:0 0 0 8px rgba(46,229,157,0)}100%{box-shadow:0 0 0 0 rgba(46,229,157,0)}}
#refresh.spin{animation:spin .6s}
@keyframes spin{to{transform:rotate(360deg)}}
.filters{display:flex;gap:16px;padding:12px 20px;flex-wrap:wrap}
.filters label{display:flex;gap:8px;align-items:center;color:var(--muted)}
main{padding:0 20px 60px}
.view-in{animation:viewIn .4s cubic-bezier(.2,.8,.2,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* cards */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.card{background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:14px;transition:transform .2s,border-color .2s,box-shadow .2s}
.kpi{cursor:default;position:relative;overflow:hidden;animation:rise .5s both}
.kpi.click{cursor:pointer}
.kpi.click:hover{transform:translateY(-3px);border-color:rgba(255,154,31,.6);box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 1px rgba(255,154,31,.25)}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line)}
.kpi.k-ok::before{background:var(--ok)}.kpi.k-warn::before{background:var(--warn)}.kpi.k-bad::before{background:var(--bad)}
.kpi .l{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.kpi .v{font-size:30px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi .s{font-size:12px;color:var(--muted)}
.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}.info{color:var(--info)}
.cols{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));margin-top:12px}
h2{font-size:15px;margin:0 0 10px;letter-spacing:.02em}
.sub{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px;flex-wrap:wrap}
.sub h2{margin:0}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;cursor:pointer;white-space:nowrap;user-select:none}
th:hover{color:var(--accent)}
tbody tr{animation:rise .35s both}
tbody tr.click{cursor:pointer}
tbody tr.click:hover{background:rgba(62,110,240,.14)}
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel);backdrop-filter:blur(10px)}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.pill.ok{background:rgba(46,229,157,.14);color:var(--ok)}.pill.warn{background:rgba(255,194,77,.15);color:var(--warn)}
.pill.bad{background:rgba(255,84,104,.16);color:var(--bad)}.pill.info{background:rgba(108,151,255,.16);color:var(--info)}
.pill.na{background:rgba(255,255,255,.06);color:var(--muted)}
.bar{height:8px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden;display:flex;min-width:90px}
.bar i{display:block;height:100%;transform-origin:left;animation:grow .9s cubic-bezier(.2,.8,.2,1) both}
.bar .g{background:linear-gradient(90deg,#1fbf80,var(--ok))}.bar .r{background:var(--bad)}.bar .y{background:var(--warn)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 12px}
.chip{background:rgba(255,255,255,.05);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-weight:600;font-size:12px;box-shadow:none}
.chip:hover:not(:disabled){transform:none;box-shadow:none;color:var(--text);border-color:var(--accent)}
.chip.on{background:rgba(255,154,31,.16);color:var(--accent2);border-color:var(--accent)}

/* alarms */
.alarm{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);animation:slideIn .45s both}
.alarm:last-child{border:0}
.alarm:nth-child(2){animation-delay:.05s}.alarm:nth-child(3){animation-delay:.1s}.alarm:nth-child(4){animation-delay:.15s}
.alarm:nth-child(5){animation-delay:.2s}.alarm:nth-child(6){animation-delay:.25s}.alarm:nth-child(7){animation-delay:.3s}.alarm:nth-child(8){animation-delay:.35s}
@keyframes slideIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.sev{width:4px;border-radius:2px;flex:none}
.sev.critical{background:var(--bad);box-shadow:0 0 10px var(--bad);animation:glow 1.6s infinite}
.sev.major{background:var(--warn)}.sev.minor{background:var(--info)}
@keyframes glow{50%{box-shadow:0 0 2px var(--bad)}}
.alarm .t{font-weight:700}.alarm .m{color:var(--muted);font-size:12px}
.empty{padding:26px;text-align:center;color:var(--muted)}
.notice{background:rgba(255,194,77,.1);border:1px solid rgba(255,194,77,.5);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.notice.bad{background:rgba(255,84,104,.1);border-color:rgba(255,84,104,.5)}

/* gauges */
.gauges{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-around}
.gauge{text-align:center;width:130px}
.gauge svg{width:112px;height:112px;transform:rotate(-90deg)}
.gauge .trk{fill:none;stroke:rgba(255,255,255,.08);stroke-width:10}
.gauge .val{fill:none;stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1)}
.gauge .pct-wrap{margin-top:-112px;height:112px;display:grid;place-items:center}
.gauge .pct{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.gauge .gl{color:var(--muted);font-size:12px;margin-top:4px}

/* site cards */
.sitegrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.site{display:flex;gap:12px;align-items:center;cursor:pointer;animation:rise .45s both;position:relative}
.site:hover{transform:translateY(-4px);border-color:rgba(255,154,31,.6);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.site.down{border-color:rgba(255,84,104,.6);animation:rise .45s both,alertPulse 2s infinite}
@keyframes alertPulse{50%{box-shadow:0 0 0 4px rgba(255,84,104,.18)}}
.site .ring{width:62px;height:62px;flex:none}
.site .ring svg{width:62px;height:62px;transform:rotate(-90deg)}
.site h3{margin:0;font-size:14px}
.site .meta{color:var(--muted);font-size:12px}
.site .counts{margin-top:4px;font-size:12px}

/* live network */
.stripe{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.tiles{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.tile{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:10px;padding:8px 10px;cursor:pointer;position:relative;overflow:hidden;transition:transform .15s,border-color .3s,background .3s}
.tile:hover{transform:translateY(-2px)}
.tile .n{font-weight:700;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .ip{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.tile .rt{font-size:11px;font-variant-numeric:tabular-nums;color:var(--ok)}
.tile.rec{border-left-color:var(--info)}
.tile.down{border-left-color:var(--bad);background:rgba(255,84,104,.12);animation:downPulse 1.2s infinite}
.tile.down .rt{color:var(--bad);font-weight:700}
.tile.stale{opacity:.45}
.tile.blip::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12px 50%,rgba(46,229,157,.5),transparent 60%);animation:blip .7s both}
.tile.flip{animation:flip .8s}
@keyframes blip{from{opacity:1}to{opacity:0}}
@keyframes downPulse{50%{background:rgba(255,84,104,.24)}}
@keyframes flip{0%{transform:scale(1.08);box-shadow:0 0 0 0 rgba(255,194,77,.8)}100%{transform:none;box-shadow:0 0 0 14px rgba(255,194,77,0)}}
.log .row{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);animation:slideIn .4s both}
.log .row:last-child{border:0}
.log .dur{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700}
.log .dur.open{color:var(--bad)}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot.bad{background:var(--bad);animation:beat2 1s infinite}.dot.ok{background:var(--ok)}
@keyframes beat2{0%{box-shadow:0 0 0 0 rgba(255,84,104,.7)}70%{box-shadow:0 0 0 7px rgba(255,84,104,0)}}

/* drawer */
#backdrop{position:fixed;inset:0;background:rgba(2,6,20,.6);backdrop-filter:blur(2px);z-index:30;animation:fade .25s}
#drawer{position:fixed;right:0;top:0;bottom:0;width:min(580px,100%);background:linear-gradient(180deg,#0b1f58,#071235);border-left:1px solid var(--line);padding:16px;overflow:auto;z-index:40;transform:translateX(105%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility .35s}
#drawer.open{transform:none;visibility:visible;box-shadow:-20px 0 60px rgba(0,0,0,.5)}
#drawer h2{font-size:19px;margin-top:12px}

/* admin */
.form{display:grid;gap:8px}
.row2{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.keybox{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:rgba(5,14,38,.85);border:1px dashed var(--accent);border-radius:10px;padding:10px;white-space:pre-wrap;word-break:break-all;margin:8px 0}
.cfg{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cfg .card{opacity:.7}

/* toasts */
#toasts{position:fixed;right:16px;bottom:16px;display:grid;gap:8px;z-index:60;width:min(360px,calc(100% - 32px))}
.toast{background:rgba(10,24,66,.96);border:1px solid var(--line);border-left:4px solid var(--info);border-radius:10px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.45);animation:toastIn .4s both}
.toast.bad{border-left-color:var(--bad)}.toast.ok{border-left-color:var(--ok)}.toast.out{animation:toastOut .4s both}
.toast b{display:block}.toast span{color:var(--muted);font-size:12px}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(40px)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media (max-width:700px){nav{flex-basis:100%;order:3}.top{padding:8px 12px}main{padding:0 12px 60px}.filters{padding:10px 12px}}