:root{--glass-bg: rgba(255, 255, 255, .72);--glass-bg-dark: rgba(30, 30, 30, .72);--glass-blur: blur(20px);--glass-saturate: saturate(180%);--border-radius: 16px;--border-radius-sm: 10px;--border-color: rgba(0, 0, 0, .08);--border-color-dark: rgba(255, 255, 255, .1);--shadow: 0 8px 32px rgba(0, 0, 0, .08);--shadow-hover: 0 12px 40px rgba(0, 0, 0, .12);--status-up: #34c759;--status-down: #ff3b30;--status-degraded: #ffcc00;--status-unknown: #8e8e93;--text-primary: #1d1d1f;--text-secondary: #86868b;--text-tertiary: #aeaeb2;--bg-primary: #f5f5f7;--bg-secondary: #ffffff;--font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background:url(/bg.png) center / cover fixed no-repeat;color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:1200px;margin:0 auto;padding:40px 24px}.header-wrapper{text-align:center;margin-bottom:48px}.header{display:inline-block;text-align:center}.header.glass-card:hover{transform:none}.header h1{font-size:34px;font-weight:700;letter-spacing:-.5px;margin-bottom:8px}.header p{font-size:17px;color:var(--text-secondary)}.providers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(600px,1fr));gap:20px}.glass-card{background:var(--glass-bg);backdrop-filter:var(--glass-blur) var(--glass-saturate);-webkit-backdrop-filter:var(--glass-blur) var(--glass-saturate);border-radius:var(--border-radius);border:1px dashed var(--border-color);box-shadow:var(--shadow);padding:24px;transition:all .3s cubic-bezier(.25,.1,.25,1)}.glass-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.provider-card{position:relative}.provider-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.provider-info{display:flex;align-items:center;gap:12px}.provider-name{font-size:20px;font-weight:600;letter-spacing:-.3px}.provider-type{font-size:13px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px}.status-dot{width:12px;height:12px;border-radius:50%;position:relative}.status-dot:after{content:"";position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border-radius:50%;animation:pulse 2s ease-in-out infinite}.status-dot.up{background:var(--status-up)}.status-dot.up:after{background:var(--status-up);opacity:.3}.status-dot.down{background:var(--status-down)}.status-dot.down:after{background:var(--status-down);opacity:.3}.status-dot.degraded{background:var(--status-degraded)}.status-dot.degraded:after{background:var(--status-degraded);opacity:.3}.status-dot.unknown{background:var(--status-unknown)}.status-dot.unknown:after{background:var(--status-unknown);opacity:.3}@keyframes pulse{0%,to{transform:scale(1);opacity:.3}50%{transform:scale(1.2);opacity:0}}.stats-row{display:flex;gap:24px;margin-bottom:20px}.stat-item{flex:1}.stat-label{font-size:12px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.stat-value{font-size:24px;font-weight:600;letter-spacing:-.5px}.stat-value.uptime{color:var(--status-up)}.stat-value.latency{color:var(--text-primary)}.history-chart{height:60px;display:flex;align-items:flex-end;gap:2px;padding:8px 0;border-top:1px dashed var(--border-color)}.history-bar{flex:1;min-width:4px;max-width:16px;border-radius:2px;transition:all .2s ease;cursor:pointer}.history-bar:hover{opacity:.8;transform:scaleY(1.1)}.history-bar.up{background:var(--status-up)}.history-bar.down{background:var(--status-down)}.history-bar.degraded{background:var(--status-degraded)}.history-bar.unknown{background:var(--status-unknown)}.last-checked{font-size:12px;color:var(--text-tertiary);text-align:right;margin-top:12px}.refresh-btn{background:transparent;border:1px dashed var(--border-color);border-radius:var(--border-radius-sm);padding:8px 16px;font-size:13px;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.refresh-btn:hover{background:#0000000a;color:var(--text-primary)}.refresh-btn:active{transform:scale(.98)}.loading{display:flex;align-items:center;justify-content:center;min-height:200px;color:var(--text-secondary)}.spinner{width:24px;height:24px;border:2px solid var(--border-color);border-top-color:var(--text-secondary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){.container{padding:24px 16px}.header h1{font-size:28px}.providers-grid{grid-template-columns:1fr}.stats-row{gap:16px}.stat-value{font-size:20px}}