:root{--bg:#0b0f17;--card:#171c26;--card2:#1d2430;--text:#f8fafc;--muted:#a8b0c2;--blue:#2563eb;--green:#16a34a;--red:#dc2626;--yellow:#f59e0b;--border:rgba(255,255,255,.08);--shadow:0 12px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;font-family:Arial,sans-serif;background:radial-gradient(circle at top left,rgba(37,99,235,.18),transparent 35%),radial-gradient(circle at bottom right,rgba(22,163,74,.10),transparent 35%),var(--bg);color:var(--text)}
body{padding-bottom:env(safe-area-inset-bottom)} header{position:sticky;top:0;z-index:10;background:rgba(11,15,23,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:calc(14px + env(safe-area-inset-top)) 16px 12px}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1100px;margin:0 auto}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#2563eb,#16a34a);display:flex;align-items:center;justify-content:center;font-size:21px;box-shadow:0 8px 20px rgba(37,99,235,.35);flex-shrink:0}h1{margin:0;font-size:22px;line-height:1.1;white-space:nowrap}.subtitle{margin-top:3px;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}.status-pill{padding:7px 10px;border-radius:999px;font-size:12px;font-weight:bold;white-space:nowrap;background:#374151;color:white}.status-online{background:rgba(22,163,74,.18);color:#86efac;border:1px solid rgba(134,239,172,.25)}.status-offline{background:rgba(220,38,38,.15);color:#fca5a5;border:1px solid rgba(252,165,165,.25)}
main{max-width:1100px;margin:0 auto;padding:14px 14px 24px}.status-card,.alerts-card{background:linear-gradient(135deg,rgba(29,36,48,.95),rgba(23,28,38,.95));border:1px solid var(--border);border-radius:18px;padding:14px;box-shadow:var(--shadow);margin-bottom:14px}.alerts-card{background:#fff7ed;color:#111827;border-color:#fed7aa}.alerts-card h2{margin:0 0 10px;color:#9a3412}.alert-item{padding:10px 12px;border-radius:12px;margin:8px 0;font-weight:700}.alert-warn{background:#fef3c7;color:#92400e}.alert-bad{background:#fee2e2;color:#991b1b}.hidden{display:none!important}
.status-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.stat{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:14px;padding:10px;min-height:64px}.stat-label{font-size:11px;color:var(--muted);margin-bottom:5px}.stat-value{font-size:15px;font-weight:bold;line-height:1.2;word-break:break-word}
.quick-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}.quick-btn{background:rgba(37,99,235,.18);border:1px solid rgba(37,99,235,.35);color:#bfdbfe;text-decoration:none;border-radius:14px;padding:12px 10px;text-align:center;font-size:13px;font-weight:bold}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.card{background:linear-gradient(135deg,var(--card2),var(--card));border:1px solid var(--border);border-radius:20px;padding:18px;min-height:135px;color:var(--text);text-decoration:none;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:space-between;-webkit-tap-highlight-color:transparent}.card:active{transform:scale(.98)}.card:hover{border-color:rgba(37,99,235,.5)}.card-top{display:flex;align-items:center;gap:13px}.icon-box{width:48px;height:48px;border-radius:16px;background:rgba(37,99,235,.16);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}.title{font-size:21px;font-weight:800;line-height:1.15}.desc{color:var(--muted);font-size:14px;line-height:1.35;margin-top:14px}.footer-note{color:var(--muted);font-size:12px;text-align:center;margin-top:18px;padding-bottom:10px}
@media(max-width:700px){header{padding:calc(11px + env(safe-area-inset-top)) 12px 10px}.brand-logo{width:34px;height:34px;border-radius:11px;font-size:19px}h1{font-size:19px}.subtitle{font-size:11px;max-width:180px}.status-pill{font-size:11px;padding:6px 8px}main{padding:10px 10px 18px}.status-card,.alerts-card{border-radius:16px;padding:10px;margin-bottom:10px}.status-grid{grid-template-columns:repeat(2,1fr);gap:8px}.stat{min-height:54px;padding:8px;border-radius:12px}.stat-label{font-size:10px}.stat-value{font-size:13px}.quick-row{grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.quick-btn{padding:10px 6px;border-radius:12px;font-size:12px}.cards{grid-template-columns:1fr;gap:10px}.card{min-height:104px;border-radius:17px;padding:14px}.icon-box{width:42px;height:42px;border-radius:14px}.title{font-size:19px}.desc{font-size:13px;margin-top:9px}}
@media(max-width:380px){.subtitle{display:none}.quick-btn{font-size:11px}.card{min-height:96px}}