:root{
  --gc-blue:#1456a0;--gc-blue-dark:#0c376c;--gc-orange:#f28c28;
  --bg:#f4f7fb;--surface:#fff;--text:#172033;--muted:#6e7b90;--line:#e7edf5;
  --ok:#149b68;--ok-bg:#eaf8f2;--warn:#e99016;--warn-bg:#fff5e5;
  --critical:#d94646;--critical-bg:#fff0f0;--shadow:0 10px 35px rgba(25,55,95,.08)
}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);background:linear-gradient(180deg,#fff 0,#f5f8fc 320px,#f4f7fb 100%)}
.app-shell{min-height:100vh}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:auto;padding:0 24px;border-bottom:1px solid rgba(231,237,245,.8)}
.brand{display:flex;gap:12px;align-items:center}.brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--gc-blue),var(--gc-blue-dark));color:#fff;font-weight:800;letter-spacing:-1px;box-shadow:0 6px 18px rgba(20,86,160,.25)}.brand-name{font-weight:800;font-size:16px}.brand-sub{font-size:11px;color:var(--muted);margin-top:2px}.live{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:var(--ok);letter-spacing:.08em}.live-dot{width:8px;height:8px;background:var(--ok);border-radius:50%;box-shadow:0 0 0 5px rgba(20,155,104,.1)}
.dashboard{max-width:1180px;margin:auto;padding:28px 24px 40px}.hero{background:linear-gradient(120deg,#fff,#f7fbff);border:1px solid var(--line);border-radius:22px;padding:24px 26px;display:flex;justify-content:space-between;gap:24px;box-shadow:var(--shadow);border-left:5px solid var(--ok)}.hero.warning{border-left-color:var(--warn)}.hero.critical{border-left-color:var(--critical)}.hero-main{display:flex;align-items:center;gap:17px}.status-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--ok-bg);color:var(--ok);font-size:28px;font-weight:800}.warning .status-icon{background:var(--warn-bg);color:var(--warn)}.critical .status-icon{background:var(--critical-bg);color:var(--critical)}.eyebrow{font-size:10px;letter-spacing:.12em;font-weight:800;color:var(--gc-blue);text-transform:uppercase}.hero h1{margin:5px 0 5px;font-size:25px;letter-spacing:-.03em}.hero p{margin:0;color:var(--muted);font-size:13px}.hero-meta{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));gap:12px;align-items:center}.hero-meta div{padding-left:15px;border-left:1px solid var(--line)}.hero-meta span{display:block;font-size:10px;color:var(--muted);margin-bottom:5px}.hero-meta strong{display:block;font-size:12px;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attention{margin-top:16px;border:1px solid #ffd9a6;background:#fffaf2;border-radius:17px;padding:16px 18px;display:flex;gap:13px;align-items:center}.attention.critical{border-color:#ffc9c9;background:#fff6f6}.attention-icon{width:36px;height:36px;flex:0 0 36px;border-radius:11px;background:var(--warn-bg);color:var(--warn);display:grid;place-items:center;font-weight:800}.attention.critical .attention-icon{background:var(--critical-bg);color:var(--critical)}.attention-copy{min-width:0}.attention-label{display:block;font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--warn)}.attention.critical .attention-label{color:var(--critical)}.attention-copy strong{display:block;margin:3px 0;font-size:14px}.attention-copy p{margin:0;color:var(--muted);font-size:12px}.hidden{display:none!important}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}.metric-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:17px;box-shadow:0 5px 18px rgba(25,55,95,.04)}.metric-card.warning{border-color:#ffd9a6;background:#fffdf9}.metric-card.critical{border-color:#ffcaca;background:#fffafa}.metric-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700}.metric-icon{color:var(--gc-blue);font-size:16px}.badge{margin-left:auto;font-size:9px;padding:4px 7px;border-radius:99px;background:var(--ok-bg);color:var(--ok);font-weight:800}.warning .badge{background:var(--warn-bg);color:var(--warn)}.critical .badge{background:var(--critical-bg);color:var(--critical)}.metric-value{margin:18px 0 5px;display:flex;align-items:flex-end;gap:4px}.metric-value strong{font-size:32px;line-height:1;letter-spacing:-.05em}.metric-value small{font-size:13px;color:var(--muted);font-weight:700;margin-bottom:3px}.metric-note{font-size:10px;color:var(--muted);height:14px}.progress{height:5px;border-radius:99px;background:#edf2f7;margin-top:14px;overflow:hidden}.progress span{display:block;height:100%;width:0;background:var(--gc-blue);border-radius:99px;transition:width .5s}.warning .progress span{background:var(--warn)}.critical .progress span{background:var(--critical)}
.internet-panel,.health-panel,.disk-panel{background:#fff;border:1px solid var(--line);border-radius:20px;margin-top:16px;padding:20px 22px;box-shadow:0 5px 18px rgba(25,55,95,.04)}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-title h2{font-size:17px;margin:4px 0 0}.summary-pill{font-size:10px;padding:6px 9px;border-radius:99px;background:var(--ok-bg);color:var(--ok);font-weight:800}.summary-pill.warning{background:var(--warn-bg);color:var(--warn)}.summary-pill.critical{background:var(--critical-bg);color:var(--critical)}
.internet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.internet-card{border:1px solid var(--line);border-radius:16px;padding:15px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fbfdff}.internet-card.ok{border-color:#cfeee1;background:#fbfffd}.internet-card.critical{border-color:#ffcaca;background:#fffafa}.internet-card-main{display:flex;align-items:center;gap:12px;min-width:0}.internet-dot{width:13px;height:13px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 5px rgba(20,155,104,.10);flex:0 0 13px}.internet-card.critical .internet-dot{background:var(--critical);box-shadow:0 0 0 5px rgba(217,70,70,.10)}.internet-card strong{display:block;font-size:13px}.internet-card small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.internet-card-status{font-size:10px;font-weight:800;padding:6px 9px;border-radius:999px;color:var(--ok);background:var(--ok-bg)}.internet-card.critical .internet-card-status{color:var(--critical);background:var(--critical-bg)}
.health-list{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.health-row{padding:16px 14px;border-right:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px}.health-row:last-child{border-right:0}.health-name{display:flex;align-items:center;gap:9px;min-width:0}.health-symbol{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#f0f5fb;color:var(--gc-blue);font-weight:800}.health-name strong{display:block;font-size:11px}.health-name small{display:block;color:var(--muted);font-size:9px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:135px}.state{font-size:9px;font-weight:800;color:var(--ok);background:var(--ok-bg);padding:5px 7px;border-radius:99px}.state.warning{color:var(--warn);background:var(--warn-bg)}.state.critical{color:var(--critical);background:var(--critical-bg)}
.disk-panel{padding-bottom:16px}.section-title.compact{margin-bottom:12px}.physical-disks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.physical-disk{border:1px solid var(--line);border-radius:13px;padding:12px 14px;display:flex;justify-content:space-between;gap:12px;align-items:center}.physical-disk strong{font-size:11px}.physical-disk small{display:block;font-size:9px;color:var(--muted);margin-top:3px}.disk-status{font-size:9px;font-weight:800;color:var(--ok)}
footer{display:flex;justify-content:space-between;align-items:center;padding:20px 3px 0;color:var(--muted);font-size:10px}#refreshBtn{border:1px solid var(--line);background:#fff;color:var(--gc-blue);font-weight:700;font-size:10px;padding:8px 11px;border-radius:9px;cursor:pointer}#refreshBtn:disabled{opacity:.6;cursor:default}
@media(max-width:900px){.hero{display:block}.hero-meta{margin-top:20px}.quick-grid{grid-template-columns:repeat(2,1fr)}.health-list{grid-template-columns:repeat(2,1fr)}.health-row{border-right:0;border-bottom:1px solid var(--line)}.health-row:last-child{border-bottom:0}}
@media(max-width:560px){body{background:#f5f8fc}.topbar{height:66px;padding:0 16px}.brand-sub{display:none}.dashboard{padding:14px 12px 28px}.hero{padding:17px;border-radius:18px}.status-icon{width:46px;height:46px;border-radius:14px;font-size:23px}.hero h1{font-size:20px}.hero p{font-size:11px}.hero-meta{grid-template-columns:1fr 1fr 1fr;gap:5px;margin-top:16px}.hero-meta div{padding-left:8px}.hero-meta strong{font-size:9px}.quick-grid{gap:9px;margin-top:10px}.metric-card{padding:13px;border-radius:15px}.metric-head{font-size:10px}.metric-value{margin:14px 0 5px}.metric-value strong{font-size:28px}.internet-panel,.health-panel,.disk-panel{margin-top:10px;padding:15px;border-radius:16px}.internet-grid{grid-template-columns:1fr;gap:8px}.internet-card{padding:13px}.health-list{grid-template-columns:1fr 1fr}.health-row{padding:12px 7px}.health-name small{max-width:85px}.physical-disks{grid-template-columns:1fr}.attention{margin-top:10px;padding:13px}.section-title h2{font-size:15px}.disk-panel{display:none}footer{padding-top:15px}.live span:last-child{display:none}}