:root{color-scheme:light;--bg: #eef2f4;--bg-deep: #e2e9ee;--card: #ffffff;--text: #152028;--muted: #5f7180;--line: #d0dae3;--up: #0f8a5f;--up-soft: #e6f6ef;--down: #c0392b;--down-soft: #fceceb;--accent: #1a6f9a;--accent-hover: #155a7d;--warn: #b7791f;--mono: "IBM Plex Mono", ui-monospace, monospace;--sans: "IBM Plex Sans", "Segoe UI", sans-serif;font-family:var(--sans);line-height:1.45;color:var(--text);background:radial-gradient(900px 420px at 8% -10%,#d9e8f0 0%,transparent 55%),radial-gradient(700px 380px at 100% 0%,#dfe8e4 0%,transparent 50%),linear-gradient(180deg,#f5f8fa 0%,var(--bg) 40%,var(--bg-deep) 100%);background-attachment:fixed}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input{font:inherit}.page{max-width:1180px;margin:0 auto;padding:28px 20px 56px}.page.center{min-height:100vh;display:grid;place-items:center}.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent)}.brand-kicker{margin:0 0 4px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}.topbar h1,.card h1,.stream-panel h2,.snapshots h2{margin:0;font-weight:600;letter-spacing:-.02em}.topbar h1{font-size:1.75rem}.stat-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.stat{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--card) 88%,transparent);font-size:.84rem;color:var(--muted)}.stat strong{color:var(--text);font-variant-numeric:tabular-nums}.stat.up{background:var(--up-soft);border-color:color-mix(in srgb,var(--up) 25%,var(--line));color:var(--up)}.stat.down{background:var(--down-soft);border-color:color-mix(in srgb,var(--down) 25%,var(--line));color:var(--down)}.muted{color:var(--muted);margin:0}.actions{display:flex;align-items:center;gap:8px}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px;width:min(400px,100%);display:grid;gap:14px;box-shadow:0 18px 40px #1520280f}.card label{display:grid;gap:6px;font-size:.9rem}.card input{padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:#fbfcfd}.card input:focus{outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent);border-color:var(--accent)}button{border:0;border-radius:8px;padding:10px 14px;background:var(--accent);color:#fff;cursor:pointer;transition:background .15s ease,transform .1s ease}button:hover:not(:disabled){background:var(--accent-hover)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.55;cursor:default}button.ghost{background:color-mix(in srgb,var(--card) 70%,transparent);color:var(--text);border:1px solid var(--line)}button.ghost:hover:not(:disabled){background:#fff}button.block{width:100%}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:22px}.server{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:10px;transition:border-color .15s ease,box-shadow .15s ease}.server:hover{box-shadow:0 10px 28px #1520280f}.server.up{border-color:color-mix(in srgb,var(--up) 40%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--up-soft) 55%,#fff),#fff 42%)}.server.down{border-color:color-mix(in srgb,var(--down) 35%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--down-soft) 50%,#fff),#fff 42%)}.server .row{display:flex;align-items:center;justify-content:space-between;gap:10px}.server .title{display:flex;align-items:center;gap:8px;min-width:0}.server .title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--down);box-shadow:0 0 0 3px color-mix(in srgb,var(--down) 18%,transparent)}.dot.up{background:var(--up);box-shadow:0 0 0 3px color-mix(in srgb,var(--up) 18%,transparent)}.status-label{font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:6px}.status-label.up{color:var(--up);background:var(--up-soft)}.status-label.down{color:var(--down);background:var(--down-soft)}.host{margin:0;font-family:var(--mono);font-size:.8rem;color:var(--muted)}.meta{margin:0;font-size:.85rem;color:var(--muted);min-height:1.2em;font-variant-numeric:tabular-nums}.latency{display:flex;align-items:center;gap:8px}.latency-bar{flex:1;height:4px;border-radius:4px;background:#e7eef3;overflow:hidden}.latency-bar>span{display:block;height:100%;background:var(--up);border-radius:4px}.error{color:var(--down)}.badge{display:inline-block;background:#e8f3f8;color:var(--accent);border-radius:6px;padding:6px 10px;margin:0;font-size:.88rem}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:36px;margin-bottom:12px}.section-head h2{font-size:1.1rem}.snapshots ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}.snapshots li{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.92rem}.snapshots .snap-meta{color:var(--muted);font-size:.84rem;font-family:var(--mono)}.stream-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#101c2485;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px;z-index:20;animation:fade-in .16s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.stream-panel{width:min(1040px,100%);height:min(84vh,780px);background:var(--card);border-radius:16px;border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 24px 60px #0a141c38;animation:panel-in .18s ease}.stream-panel-tall{width:min(1100px,100%);height:min(92vh,920px)}.log-stack{min-height:0;flex:1;display:grid;gap:10px}.log-stack.http-closed{grid-template-rows:auto 1.6fr .9fr}.log-stack.http-open{grid-template-rows:.7fr 1.4fr .8fr}.log-wrap.collapsed{flex:0 0 auto}.log-label{display:flex;align-items:center;gap:6px;border:0;background:transparent;padding:0;margin:0;font:inherit;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left}.log-label-toggle{cursor:pointer}.log-label-toggle:hover{color:var(--text)}.log-chevron{display:inline-block;width:.9em;font-size:.7rem}.tag-empty{margin:0;font-size:.88rem}.tag-group{color:var(--accent)!important;font-weight:500}@keyframes panel-in{0%{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}.stream-panel header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.stream-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.udp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#f7fafb}.udp-bar strong{display:block;margin-bottom:2px}.tag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;max-height:160px;overflow:auto;padding-right:2px}.tag-card{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#f7fafb;display:grid;gap:4px}.tag-card strong{font-size:.9rem}.tag-card span{font-family:var(--mono);font-size:.75rem;color:var(--muted)}.log-wrap{min-height:0;flex:1;display:grid;grid-template-rows:auto minmax(0,1fr);gap:6px}.log{margin:0;overflow:auto;background:#12202a;color:#c9d7e2;border-radius:10px;padding:12px 14px;font-family:var(--mono);font-size:11.5px;line-height:1.45;white-space:pre-wrap;word-break:break-word}.log .log-info{color:#7eb6d6}.log .log-error{color:#f0a8a0}.log .log-udp{color:#9ad7b0}@media(max-width:640px){.topbar{flex-direction:column;align-items:stretch}.stream-panel{height:min(92vh,900px);padding:12px}}