@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:700;font-display:swap;src:url(/ibmplexmono.woff2) format("woff2")}:root{--bg: #000000;--surface: #0d0d0f;--surface-2: #141416;--border: #232326;--text: #ffffff;--muted: #8e8e93;--dim: #5a5a60;--ok: #34c759;--ok-soft: rgba(52, 199, 89, .14);--warn: #ff9f0a;--warn-soft: rgba(255, 159, 10, .14);--down: #ff453a;--down-soft: rgba(255, 69, 58, .14);--radius: 16px;--radius-sm: 12px;--mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#root{min-height:100dvh}.page{min-height:100dvh;padding:clamp(16px,5vw,40px) clamp(14px,4vw,24px);padding-top:calc(clamp(16px,5vw,40px) + env(safe-area-inset-top));padding-bottom:calc(clamp(24px,6vw,56px) + env(safe-area-inset-bottom));background:radial-gradient(120% 60% at 50% -10%,rgba(52,199,89,.06),transparent 60%),var(--bg)}.container{width:100%;max-width:720px;margin:0 auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:clamp(20px,5vw,32px)}.header{display:flex;align-items:center;gap:14px;min-width:0}.brand-logo{width:clamp(48px,13vw,64px);height:clamp(48px,13vw,64px);border-radius:16px;object-fit:contain;flex:0 0 auto;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.brand-text{display:flex;flex-direction:column;min-width:0}.brand-name{font-family:var(--mono);font-weight:700;font-size:clamp(20px,5.5vw,26px);letter-spacing:-.02em;line-height:1.1}.brand-sub{font-size:clamp(13px,3.4vw,15px);color:var(--muted);margin-top:2px}.btn-refresh{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);color:var(--text);cursor:pointer;transition:transform .12s ease,background .15s ease,opacity .15s ease}.btn-refresh:active{transform:scale(.94);background:#1c1c1f}.btn-refresh:disabled{opacity:.55;cursor:default}.btn-refresh.is-spinning svg{animation:xc-spin .8s linear infinite}.hero{display:flex;align-items:center;gap:16px;padding:clamp(18px,4.5vw,24px);border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);margin-bottom:clamp(14px,3.5vw,18px)}.hero-ok{border-color:#34c7594d;background:linear-gradient(180deg,var(--ok-soft),transparent 90%),var(--surface)}.hero-warn{border-color:#ff9f0a4d;background:linear-gradient(180deg,var(--warn-soft),transparent 90%),var(--surface)}.hero-down{border-color:#ff453a4d;background:linear-gradient(180deg,var(--down-soft),transparent 90%),var(--surface)}.hero-dot{position:relative;flex:0 0 auto;width:16px;height:16px}.hero-dot-core,.hero-dot-ring{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%}.hero-dot-core{top:3px;right:3px;bottom:3px;left:3px}.hero-ok .hero-dot-core{background:var(--ok)}.hero-warn .hero-dot-core{background:var(--warn)}.hero-down .hero-dot-core{background:var(--down)}.hero-dot-ring{animation:pulse-ring 2s cubic-bezier(.4,0,.6,1) infinite}.hero-ok .hero-dot-ring{background:var(--ok)}.hero-warn .hero-dot-ring{background:var(--warn)}.hero-down .hero-dot-ring{background:var(--down)}.hero-body{min-width:0}.hero-title{margin:0;font-size:clamp(18px,5vw,23px);font-weight:700;letter-spacing:-.01em;line-height:1.2}.hero-meta{margin:4px 0 0;font-size:clamp(12px,3.2vw,13px);color:var(--muted);font-variant-numeric:tabular-nums}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,2.4vw,12px);margin-bottom:clamp(24px,6vw,36px)}.stat-card{display:flex;flex-direction:column;gap:6px;padding:clamp(14px,3.6vw,18px) clamp(10px,3vw,14px);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface)}.stat-value{font-family:var(--mono);font-weight:700;font-size:clamp(20px,6vw,28px);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}.stat-total,.stat-unit{color:var(--dim);font-size:.62em;font-weight:700}.stat-label{font-size:clamp(11px,3vw,13px);color:var(--muted);line-height:1.3}.section-title{margin:0 0 12px;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.srv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.srv{padding:clamp(13px,3.4vw,16px);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface)}.srv-main{display:flex;align-items:center;gap:12px}.srv-flag{font-size:clamp(22px,6vw,26px);line-height:1;flex:0 0 auto}.srv-id{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}.srv-name{display:flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere;font-weight:600;font-size:clamp(15px,4vw,16px);line-height:1.15}.srv-type{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:999px;border:1px solid var(--border);color:var(--muted);background:var(--surface-2);text-transform:uppercase}.srv-country{font-size:clamp(12px,3.2vw,13px);color:var(--muted);overflow-wrap:anywhere}.srv-metrics{display:flex;align-items:center;gap:10px;flex:0 0 auto}.srv-ping{font-family:var(--mono);font-size:clamp(13px,3.6vw,15px);font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}.srv-dot{position:relative;width:12px;height:12px;flex:0 0 auto}.srv-dot-core{position:absolute;top:1px;right:1px;bottom:1px;left:1px;border-radius:50%}.srv-dot-ok .srv-dot-core{background:var(--ok)}.srv-dot-ok .srv-dot-core:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;border:1px solid var(--ok);transform:scale(.6);opacity:.7;animation:pulse-scale 2s ease-out infinite;will-change:transform,opacity}.srv-dot-warn .srv-dot-core{background:var(--warn)}.srv-dot-down .srv-dot-core{background:var(--down)}.srv-uptime{display:flex;align-items:center;gap:10px;margin-top:12px}.uptime-track{position:relative;flex:1 1 auto;height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}.uptime-fill{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left center;border-radius:999px;transition:transform .6s cubic-bezier(.22,1,.36,1)}.uptime-ok{background:var(--ok)}.uptime-warn{background:var(--warn)}.uptime-down{background:var(--down)}.uptime-val{flex:0 0 auto;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;min-width:52px;text-align:right}.empty{padding:clamp(32px,9vw,44px) clamp(14px,4vw,24px);text-align:center;border:1px dashed var(--border);border-radius:var(--radius)}.empty-text{margin:0;color:var(--muted);font-size:15px}.error-state{text-align:center;padding:clamp(32px,9vw,56px) clamp(14px,4vw,24px);border:1px solid rgba(255,69,58,.28);background:linear-gradient(180deg,var(--down-soft),transparent 80%),var(--surface);border-radius:var(--radius)}.error-icon{width:56px;height:56px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:var(--down-soft);color:var(--down)}.error-title{margin:0 0 8px;font-size:clamp(18px,5vw,21px);font-weight:700}.error-text{margin:0 auto 22px;max-width:340px;font-size:14px;line-height:1.5;color:var(--muted)}.btn-retry{min-height:44px;padding:0 28px;border:none;border-radius:var(--radius-sm);background:#fff;color:#000;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:transform .12s ease,opacity .15s ease}.btn-retry:active{transform:scale(.97);opacity:.9}.foot{margin-top:clamp(32px,8vw,48px);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--dim)}.foot-dot{color:var(--border)}.sk{position:relative;overflow:hidden;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border)}.sk:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:shimmer 1.4s infinite}.sk-hero{height:88px;border-radius:var(--radius);margin-bottom:16px}.sk-card{height:84px}.sk-line{height:16px;width:120px;margin:24px 0 14px}.sk-row{height:78px}@keyframes xc-spin{to{transform:rotate(360deg)}}@keyframes pulse-ring{0%{transform:scale(.6);opacity:.55}80%,to{transform:scale(1.9);opacity:0}}@keyframes pulse-scale{0%{transform:scale(.6);opacity:.7}to{transform:scale(1.5);opacity:0}}@keyframes shimmer{to{transform:translate(100%)}}.enter{opacity:0;transform:translateY(12px);animation:xc-enter .5s cubic-bezier(.22,1,.36,1) forwards}.enter-d1{animation-delay:.06s}.enter-d2{animation-delay:.12s}.enter-d3{animation-delay:.18s}@keyframes xc-enter{to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.enter{animation:none;opacity:1;transform:none}.hero-dot-ring,.sk:after,.btn-refresh.is-spinning svg{animation:none}.srv-dot-ok .srv-dot-core:after{display:none}.uptime-fill,.btn-refresh,.btn-retry{transition:none}}@media (max-width: 360px){.stat-label{font-size:10.5px}}
