:root{--bg: #020617;--bg-elevated: #050816;--bg-elevated-soft: #070b1d;--border-subtle: rgba(148, 163, 184, .26);--accent: #38bdf8;--accent-soft: rgba(56, 189, 248, .4);--accent-strong: #4df3ff;--danger: #fb7185;--warning: #facc15;--ok: #4ade80;--text-main: #e5e7eb;--text-muted: #9ca3af;--text-subtle: #6b7280;--shadow-soft: 0 18px 45px rgba(0, 0, 0, .65);--radius-lg: 16px;--radius-md: 12px;--radius-pill: 999px;--glass: linear-gradient( 135deg, rgba(15, 23, 42, .96), rgba(15, 23, 42, .88) )}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,sans-serif;background:radial-gradient(circle at top,#020617 0,#000 65%);color:var(--text-main);-webkit-font-smoothing:antialiased}body{min-height:100vh;display:flex;justify-content:center;padding:32px 16px}#app{width:100%;max-width:1200px}.header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.brand{display:flex;align-items:center;gap:12px}.brand-logo{width:40px;height:40px;border-radius:14px;background:conic-gradient(from 210deg,#38bdf8,#4df3ff,#38bdf8,#6366f1,#38bdf8);display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px #38bdf8b3;position:relative;overflow:hidden}.brand-logo:after{content:"";position:absolute;top:2px;right:2px;bottom:2px;left:2px;border-radius:12px;background:radial-gradient(circle at 30% 0%,#020617 0,#020617 50%)}.brand-logo span{position:relative;font-weight:700;font-size:18px;letter-spacing:.08em;color:var(--accent-strong);text-shadow:0 0 15px rgba(125,211,252,.9)}.brand-text h1{margin:0;font-size:22px;letter-spacing:.04em;display:flex;align-items:center;gap:8px}.brand-text h1 span{font-size:11px;font-weight:500;padding:2px 9px;border-radius:999px;background:#0f172ae6;border:1px solid rgba(148,163,184,.4);color:var(--text-subtle);text-transform:uppercase}.brand-text p{margin:4px 0 0;font-size:13px;color:var(--text-muted)}.header-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:12px;color:var(--text-subtle)}.pill{padding:4px 11px;border-radius:var(--radius-pill);border:1px solid rgba(55,65,81,.9);background:#0f172ae6;display:inline-flex;align-items:center;gap:6px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.status-dot{width:9px;height:9px;border-radius:999px;background:var(--ok);box-shadow:0 0 10px #22c55ee6}.status-dot.partial{background:var(--warning);box-shadow:0 0 10px #facc15e6}.status-dot.outage{background:var(--danger);box-shadow:0 0 10px #f87171e6}.top-row{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,2.2fr);gap:18px;margin-bottom:18px}.sections{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,2.2fr);gap:18px}@media(max-width:900px){.header{flex-direction:column;align-items:flex-start}.header-meta{align-items:flex-start}.top-row,.sections{grid-template-columns:minmax(0,1fr)}}.card,.summary,.topology{position:relative;border-radius:var(--radius-lg);background:var(--glass);border:1px solid var(--border-subtle);box-shadow:var(--shadow-soft);overflow:hidden}.card:before,.summary:before,.topology:before{content:"";position:absolute;top:-30%;right:-30%;bottom:-30%;left:-30%;background:radial-gradient(circle at 0 0,rgba(59,130,246,.23) 0,transparent 55%),radial-gradient(circle at 100% 100%,rgba(45,212,191,.18) 0,transparent 50%);opacity:.8;pointer-events:none;mix-blend-mode:screen}.summary-content,.topology-content,.card-body{position:relative;padding:14px 16px}.summary-title{font-size:13px;color:var(--text-subtle);text-transform:uppercase;letter-spacing:.16em;margin-bottom:6px}.summary-main{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:8px}.summary-main h2{margin:0;font-size:20px;font-weight:600}.summary-badge{padding:4px 10px;border-radius:var(--radius-pill);font-size:11px;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(52,211,153,.6);background:radial-gradient(circle at 0 0,rgba(16,185,129,.15),transparent 65%);color:var(--ok);text-transform:uppercase}.summary-badge-dot{width:7px;height:7px;border-radius:999px;background:var(--ok);box-shadow:0 0 10px #22c55ee6}.summary-badge-dot.partial{background:var(--warning);box-shadow:0 0 10px #facc15e6}.summary-badge-dot.outage{background:var(--danger);box-shadow:0 0 10px #f87171e6}.summary-metrics{display:flex;flex-wrap:wrap;gap:10px}.summary-metric{font-size:11px;padding:5px 10px;border-radius:var(--radius-pill);border:1px solid rgba(148,163,184,.3);background:#0f172ae6;color:var(--text-muted)}.summary-metric strong{color:var(--text-main);margin-right:4px}.topology-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}.topology-title{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-subtle);display:flex;align-items:center;gap:8px}.topology-title:before{content:"";width:8px;height:8px;border-radius:999px;border:1px solid rgba(148,163,184,.7);box-shadow:0 0 15px #94a3b880}.legend{display:flex;gap:8px;font-size:11px;color:var(--text-subtle)}.legend-item{display:inline-flex;align-items:center;gap:4px}.legend-dot{width:9px;height:9px;border-radius:999px}.legend-dot.client{background:#22c55e;box-shadow:0 0 14px #22c55ee6}.legend-dot.dns{background:#38bdf8;box-shadow:0 0 14px #38bdf8e6}.legend-dot.edge{background:#a855f7;box-shadow:0 0 14px #a855f7e6}.legend-dot.ctrl{background:#f97316;box-shadow:0 0 14px #f97316e6}.topology-body{margin-top:4px;border-radius:var(--radius-md);border:1px solid rgba(30,64,175,.8);background:radial-gradient(circle at 50% 0,#020617 0,#020617 65%);overflow:hidden;position:relative}.topology-body:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(30,64,175,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(30,64,175,.18) 1px,transparent 1px);background-size:18px 18px;mix-blend-mode:soft-light;opacity:.4}.topology-svg{display:block;width:100%;height:160px}.glow-orbit{animation:orbitPulse 5s ease-in-out infinite;transform-origin:50% 50%}@keyframes orbitPulse{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.03);opacity:1}}.pulse-dot{animation:pulseDot 1.7s ease-out infinite}@keyframes pulseDot{0%{r:2;opacity:1}to{r:6;opacity:0}}.traffic-line{stroke-dasharray:4 7;animation:dashMove 1.6s linear infinite}@keyframes dashMove{to{stroke-dashoffset:-45}}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.card-title{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-subtle);display:flex;align-items:center;gap:8px}.card-title span{width:18px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--accent-soft),transparent)}.card-subtitle{font-size:11px;color:var(--text-muted)}.services{display:grid;gap:8px}.service-row{display:grid;grid-template-columns:minmax(0,2.3fr) 90px 90px 90px;gap:8px;align-items:center;padding:7px 9px;border-radius:var(--radius-md);background:#0f172af2;border:1px solid rgba(31,41,55,.95)}.service-name{display:flex;flex-direction:column;gap:2px}.service-name strong{font-size:13px}.service-name span{font-size:11px;color:var(--text-subtle)}.service-metric{font-size:11px;color:var(--text-muted)}.service-status{justify-self:flex-end}.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:3px 9px;border-radius:var(--radius-pill)}.badge-dot{width:7px;height:7px;border-radius:999px;background:currentColor;box-shadow:0 0 8px currentColor}.badge.ok{background:#10b9811a;border:1px solid rgba(52,211,153,.8);color:var(--ok)}.badge.warn{background:#facc151a;border:1px solid rgba(250,204,21,.9);color:var(--warning)}.badge.err{background:#f871711a;border:1px solid rgba(248,113,113,.9);color:var(--danger)}.nodes-wrap{max-height:260px;overflow:auto}.nodes-table{width:100%;border-collapse:collapse;font-size:11px}.nodes-table thead{background:#0f172afa}.nodes-table th,.nodes-table td{padding:6px;white-space:nowrap;text-align:left}.nodes-table th{color:var(--text-subtle);font-weight:500;border-bottom:1px solid rgba(31,41,55,.9)}.nodes-table tbody tr:nth-child(2n){background:#0f172af2}.nodes-table tbody tr:nth-child(odd){background:#0f172ae6}.nodes-table tbody tr:hover{background:#1e40af66}.tag{display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;border:1px solid rgba(148,163,184,.35);color:var(--text-subtle);background:#0f172afa;font-size:10px;gap:4px}.tag-dot{width:6px;height:6px;border-radius:999px;background:#3b82f6}.status-pill{padding:2px 8px;border-radius:999px;font-size:11px;display:inline-flex;align-items:center;gap:4px;border:1px solid transparent}.status-pill span{width:6px;height:6px;border-radius:999px;background:currentColor;box-shadow:0 0 6px currentColor}.status-pill.ok{color:var(--ok);border-color:#34d399b3;background:#16a34a14}.status-pill.warn{color:var(--warning);border-color:#facc15d9;background:#facc1514}.status-pill.err{color:var(--danger);border-color:#f87171d9;background:#f8717114}.node-latency{font-variant-numeric:tabular-nums}.node-latency.good{color:var(--ok)}.node-latency.mid{color:var(--warning)}.node-latency.bad{color:var(--danger)}.footer{margin-top:14px;font-size:11px;color:var(--text-subtle);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}.footer a{color:var(--accent-strong);text-decoration:none}.footer a:hover{text-decoration:underline}.lang-switch{display:inline-flex;align-items:center;padding:2px;border-radius:999px;background:radial-gradient(circle at top left,#94a3b859,#0f172ae6);border:1px solid rgba(148,163,184,.7);box-shadow:0 0 0 1px #0f172ae6,0 12px 30px #0f172acc;gap:2px}.lang-btn{position:relative;border:none;outline:none;background:transparent;color:#d1d5dbbf;font-size:11px;padding:4px 10px;border-radius:999px;cursor:pointer;letter-spacing:.04em;text-transform:uppercase;display:inline-flex;align-items:center;gap:4px;transition:color .18s ease-out,background .18s ease-out,box-shadow .18s ease-out,transform .12s ease-out}.lang-btn:before{content:"";width:6px;height:6px;border-radius:999px;background:#94a3b899;box-shadow:0 0 0 1px #0f172ad9}.lang-btn:hover{color:#e5e7eb;background:radial-gradient(circle at top,#94a3b833,#0f172ae6);box-shadow:0 0 12px #94a3b859;transform:translateY(-.5px)}.lang-btn.active{color:#f9fafb;background:linear-gradient(135deg,#3b82f6f2,#93c5fde6);box-shadow:0 0 0 1px #0f172ae6,0 0 16px #3b82f6cc}.lang-btn.active:before{background:#22c55e;box-shadow:0 0 8px #22c55ecc,0 0 0 1px #0f172ae6}.lang-btn:focus-visible{box-shadow:0 0 0 2px #3b82f6e6,0 0 0 4px #0f172a}.header-right{display:flex;align-items:center;gap:.75rem}.last-updated{font-size:12px;color:var(--text-subtle);white-space:nowrap}