*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#05070c;--panel:#0b1018;--panel2:#0e141e;--line:#161f2e;--txt:#d7e2f0;
--dim:#5d6b82;--accent:#22d3ee;--ok:#34d399;--warn:#fbbf24;--err:#fb7185;--idle:#64748b}
body{background:var(--bg);color:var(--txt);min-height:100vh;
font:14px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
background-image:radial-gradient(900px 500px at 12% -8%,rgba(34,211,238,.07),transparent 60%),
radial-gradient(800px 460px at 88% 0%,rgba(129,140,248,.06),transparent 60%),
linear-gradient(rgba(148,163,184,.028) 1px,transparent 1px),
linear-gradient(90deg,rgba(148,163,184,.028) 1px,transparent 1px);
background-size:auto,auto,42px 42px,42px 42px;background-attachment:fixed}
.mono{font-family:ui-monospace,SFMono-Regular,'JetBrains Mono',Menlo,monospace}
.shell{display:flex;min-height:100vh}
aside{width:238px;flex:none;border-right:1px solid var(--line);position:sticky;top:0;height:100vh;
display:flex;flex-direction:column;padding:20px 14px;
background:linear-gradient(180deg,rgba(11,16,24,.97),rgba(5,7,12,.97))}
.brand{padding:4px 10px 18px;border-bottom:1px solid var(--line);margin-bottom:16px}
.brand b{display:block;font-size:15px;color:#fff;font-weight:700;letter-spacing:.2px}
.brand span{font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--accent);
font-weight:700;display:block;margin-top:4px}
nav{display:flex;flex-direction:column;gap:3px;flex:1}
.nav-i{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:var(--dim);
cursor:pointer;font-size:13.5px;font-weight:500;user-select:none;border:1px solid transparent;
transition:.18s;position:relative}
.nav-i svg{width:17px;height:17px;flex:none;opacity:.85}
.nav-i:hover{color:var(--txt);background:rgba(148,163,184,.05)}
.nav-i.on{color:#fff;border-color:rgba(34,211,238,.28);
background:linear-gradient(90deg,rgba(34,211,238,.14),rgba(34,211,238,.02))}
.nav-i.on::before{content:'';position:absolute;left:-14px;top:11px;bottom:11px;width:2px;
background:var(--accent);box-shadow:0 0 10px var(--accent)}
.nav-i .b{margin-left:auto;font-size:10.5px;padding:1px 7px;border-radius:20px;font-weight:700;
background:rgba(148,163,184,.12);color:var(--dim)}
.nav-i.on .b{background:rgba(34,211,238,.18);color:var(--accent)}
.side-foot{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
main{flex:1;padding:24px 28px 46px;min-width:0}
.top{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid var(--line)}
h1{font-size:20px;font-weight:650;color:#fff;letter-spacing:-.3px;display:flex;align-items:center;gap:11px}
.sync{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--dim)}
.btn{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:8px;
border:1px solid rgba(34,211,238,.32);background:rgba(34,211,238,.09);color:var(--accent);
font-size:12.5px;font-weight:600;cursor:pointer;transition:.18s;font-family:inherit}
.btn:hover{background:rgba(34,211,238,.17);box-shadow:0 0 18px rgba(34,211,238,.16)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn svg{width:14px;height:14px}
.btn.spin svg{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
section{display:none;animation:fade .3s ease}
section.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.grid{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));margin-bottom:13px}
.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
border-radius:12px;padding:16px 17px;position:relative;overflow:hidden}
.panel::after{content:'';position:absolute;top:0;left:0;height:1px;width:100%;opacity:.5;
background:linear-gradient(90deg,transparent,rgba(34,211,238,.35),transparent)}
.panel h2{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.3px;
color:var(--dim);margin-bottom:13px}
.kpi{font-size:29px;font-weight:650;color:#fff;letter-spacing:-.7px;line-height:1.1;
font-variant-numeric:tabular-nums}
.kpi small{font-size:12.5px;font-weight:400;color:var(--dim);margin-left:6px;letter-spacing:0}
.sub{font-size:11.5px;color:var(--dim);margin-top:6px;font-variant-numeric:tabular-nums}
.bar{height:5px;background:rgba(148,163,184,.11);border-radius:3px;overflow:hidden;margin-top:11px}
.bar i{display:block;height:100%;border-radius:3px}
.spark{display:flex;gap:3px;align-items:flex-end;height:40px;margin-top:12px}
.spark b{flex:1;border-radius:2px 2px 0 0;min-height:2px;
background:linear-gradient(180deg,var(--accent),rgba(34,211,238,.2));animation:rise .5s ease backwards}
@keyframes rise{from{height:0}}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--dim);
font-weight:700;padding:0 10px 9px 0;border-bottom:1px solid var(--line)}
td{padding:8px 10px 8px 0;border-bottom:1px solid rgba(22,31,46,.55);font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .15s}tbody tr:hover{background:rgba(148,163,184,.035)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;vertical-align:middle}
.ok{background:var(--ok);box-shadow:0 0 8px rgba(52,211,153,.6)}
.warn{background:var(--warn);box-shadow:0 0 8px rgba(251,191,36,.6)}
.err{background:var(--err);box-shadow:0 0 8px rgba(251,113,133,.6)}
.idle{background:var(--idle)}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;
font-variant-numeric:tabular-nums}
.p-ok{background:rgba(52,211,153,.13);color:var(--ok)}
.p-warn{background:rgba(251,191,36,.13);color:var(--warn)}
.p-err{background:rgba(251,113,133,.13);color:var(--err)}
.p-idle{background:rgba(100,116,139,.15);color:var(--idle)}
.t-dim{color:var(--dim)}
.empty{color:var(--dim);font-size:12.5px;padding:6px 0}
.logbox{background:#03050a;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
max-height:620px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.2px}
.logline{display:flex;gap:11px;padding:3px 0;white-space:nowrap;border-bottom:1px solid rgba(22,31,46,.35)}
.logline:last-child{border-bottom:none}
.logline .tm{color:#3f4c60;flex:none}
.logline .sv{flex:none;width:74px;overflow:hidden;text-overflow:ellipsis}
.logline .cd{flex:none;width:44px;font-weight:700}
.logline .ms{overflow:hidden;text-overflow:ellipsis;flex:1;color:#95a5bd}
.c-ok{color:var(--ok)}.c-warn{color:var(--warn)}.c-err{color:var(--err)}.c-idle{color:var(--idle)}
.sv-nginx{color:#c084fc}.sv-digimatur{color:#60a5fa}.sv-certbot{color:#22d3ee}
footer{margin-top:24px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;
color:#3f4c60;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(max-width:860px){.shell{flex-direction:column}
aside{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px;gap:8px}
.brand{border:none;padding:0 10px 0 4px;margin:0}
nav{flex-direction:row;flex-wrap:wrap;flex:1}
.nav-i{padding:7px 10px;font-size:12.5px}.nav-i.on::before{display:none}
.side-foot{display:none}main{padding:18px 14px 40px}}

.net{width:100%;height:auto;display:block}
.net .zone{fill:rgba(34,211,238,.028);stroke:#1b2a3d;stroke-width:1;stroke-dasharray:6 5;rx:14}
.net .zlbl{fill:#3f5063;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700}
.net .box{fill:#0c121b;stroke:#1c2636;stroke-width:1.2;rx:9}
.net .box.pub{stroke:rgba(34,211,238,.4)}
.net .t{fill:#e8f1fb;font-size:12.5px;font-weight:650}
.net .s{fill:#5d6b82;font-size:9.5px}
.net .lbl{fill:#46566b;font-size:8.8px;font-style:italic}
.net .link{fill:none;stroke:#20303f;stroke-width:1.5;stroke-dasharray:5 4;animation:dash 1.1s linear infinite}
.net .link.dim{stroke:#18222e;stroke-dasharray:2 5;animation-duration:2.6s}
@keyframes dash{to{stroke-dashoffset:-18}}
.net .pkt{fill:#22d3ee;filter:drop-shadow(0 0 5px rgba(34,211,238,.9))}
.net .pkt.g{fill:#34d399;filter:drop-shadow(0 0 5px rgba(52,211,153,.9))}
.net .pulse{animation:pulse 2.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;r:4.2}50%{opacity:.42;r:5.8}}
@media (prefers-reduced-motion:reduce){.net .link,.net .pulse,.spark b,section{animation:none}
.net .pkt{display:none}}

.gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
padding:24px;z-index:50;background:var(--bg);
background-image:radial-gradient(1000px 600px at 50% -10%,rgba(34,211,238,.10),transparent 62%),
linear-gradient(rgba(148,163,184,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(148,163,184,.03) 1px,transparent 1px);
background-size:auto,44px 44px,44px 44px}
.gate.hide{display:none}
.card{width:100%;max-width:328px;position:relative;border-radius:15px;padding:26px 26px 26px;
background:linear-gradient(180deg,rgba(14,20,30,.96),rgba(8,12,19,.96));
border:1px solid rgba(34,211,238,.16);
box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.02) inset;
animation:up .5s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.card::before{content:'';position:absolute;inset:-1px;border-radius:16px;padding:1px;pointer-events:none;
background:linear-gradient(130deg,rgba(34,211,238,.5),transparent 38%,transparent 62%,rgba(129,140,248,.45));
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;opacity:.65;
animation:shimmer 6s ease-in-out infinite}
@keyframes shimmer{0%,100%{opacity:.4}50%{opacity:.85}}
.orb{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin:0 auto 22px;
background:linear-gradient(145deg,rgba(34,211,238,.16),rgba(129,140,248,.10));
border:1px solid rgba(34,211,238,.28);position:relative}
.orb::after{content:'';position:absolute;inset:0;border-radius:15px;
box-shadow:0 0 26px rgba(34,211,238,.34);animation:glow 2.8s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.5}50%{opacity:1}}
.orb svg{width:20px;height:20px;stroke:var(--accent);position:relative;z-index:1}
.card{text-align:center}
.card h1{font-size:21px;font-weight:700;color:#fff;letter-spacing:-.3px;margin-bottom:26px}
.field{position:relative;margin-bottom:26px}
.field input{width:100%;padding:11px 14px 11px 38px;text-align:left;border-radius:10px;font-size:14px;
background:rgba(3,6,12,.85);border:1px solid var(--line);color:var(--txt);
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px;transition:.18s;outline:none}
.field input::placeholder{letter-spacing:0;font-family:inherit;color:#3d4a5c}
.field input:focus{border-color:rgba(34,211,238,.5);box-shadow:0 0 0 3px rgba(34,211,238,.09)}
.field svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;
stroke:#3d4a5c;pointer-events:none;transition:.18s}
.field input:focus~svg{stroke:var(--accent)}
.go{width:auto;min-width:132px;margin:0 auto;padding:8px 20px;border-radius:9px;border:1px solid rgba(34,211,238,.34);cursor:pointer;
background:linear-gradient(180deg,rgba(34,211,238,.20),rgba(34,211,238,.09));color:#bff5ff;
font-size:12.5px;font-weight:600;letter-spacing:.3px;font-family:inherit;transition:.18s;
display:flex;align-items:center;justify-content:center;gap:8px}
.go:hover{background:linear-gradient(180deg,rgba(34,211,238,.3),rgba(34,211,238,.14));
box-shadow:0 0 26px rgba(34,211,238,.22)}
.go:active{transform:translateY(1px)}
.go:disabled{opacity:.6;cursor:wait}
.go .sp{width:15px;height:15px;border:2px solid rgba(191,245,255,.28);border-top-color:#bff5ff;
border-radius:50%;animation:spin .7s linear infinite;display:none}
.go.busy .sp{display:block}.go.busy .tx{opacity:.75}
.msg{font-size:12.5px;color:var(--err);text-align:center;opacity:0;height:0;margin:0;
overflow:hidden;transition:opacity .2s,height .2s,margin .2s}
.msg.on{opacity:1;height:18px;margin-top:16px}
.shake{animation:shake .42s}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:10.5px;
color:#3a465a;line-height:1.6;text-align:center}
.foot b{color:var(--dim);font-weight:600}
.hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;
overflow:hidden;pointer-events:none}
.shell{display:none}.shell.on{display:flex}
@media (prefers-reduced-motion:reduce){.card,.card::before,.orb::after{animation:none}}