:root{color-scheme:dark;--bg:#070a0f;--card:#101620;--line:#202b3a;--muted:#8492a6;--text:#eef5ff;--cyan:#34d5ff;--green:#4ae6a0;--red:#ff657a;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 75% 0,#11243a 0,transparent 34%),var(--bg);color:var(--text)}main{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:42px 0 80px}header,.panel-head{display:flex;align-items:center;justify-content:space-between;gap:20px}h1{font-size:clamp(28px,5vw,48px);margin:4px 0 26px;letter-spacing:-.04em}h2{margin:0 0 8px}.eyebrow{color:var(--cyan);font:700 12px ui-monospace,monospace;letter-spacing:.18em}.pill{padding:9px 13px;border-radius:999px;font:700 12px ui-monospace,monospace}.online{background:#103427;color:var(--green)}.offline{background:#351720;color:var(--red)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metrics article,.panel{background:linear-gradient(145deg,#111925,#0c1119);border:1px solid var(--line);border-radius:16px}.metrics article{padding:18px}.metrics span,.hint{color:var(--muted);font-size:13px}.metrics strong{display:block;margin-top:9px;font-size:20px}nav{display:flex;gap:4px;margin:28px 0 12px;border-bottom:1px solid var(--line)}button{border:0;border-radius:9px;background:#172232;color:var(--text);padding:10px 14px;font-weight:700;cursor:pointer}.tab{background:transparent;color:var(--muted);border-radius:0}.tab.active{color:var(--cyan);box-shadow:inset 0 -2px var(--cyan)}.panel{display:none;padding:24px}.panel.active{display:block}.panel p{color:var(--muted);margin:0}.primary{margin-top:16px;background:var(--cyan);color:#00151c}.mapping,.event{display:grid;gap:10px;align-items:center;border-bottom:1px solid var(--line);padding:13px 0}.mapping{grid-template-columns:1fr 1fr 90px 44px}.event{grid-template-columns:150px 1fr 120px}.mapping input{width:100%;padding:10px;background:#080d13;border:1px solid var(--line);border-radius:8px;color:var(--text)}.toggle{display:flex;gap:10px;margin-top:20px}code{color:var(--cyan)}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#172232;border:1px solid var(--line);padding:10px 16px;border-radius:9px;display:none}@media(max-width:720px){.metrics{grid-template-columns:1fr 1fr}.mapping{grid-template-columns:1fr}.event{grid-template-columns:1fr}.panel-head{align-items:flex-start;flex-direction:column}}