:root{
  --brand:#1a4b78;
  --brand-2:#5aa2ff;

  --bg-light:#f6f8fb;
  --text-light:#0b1420;
  --card-light:#ffffff;

  --bg-dark:#0d1117;
  --text-dark:#e6edf3;
  --card-dark:#161b22;

  --ok:#22c55e;
  --warn:#f59e0b;
  --down:#ef4444;

  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.06);
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

html[data-theme="light"]{--bg:var(--bg-light);--text:var(--text-light);--card:var(--card-light)}
html[data-theme="dark"]{--bg:var(--bg-dark);--text:var(--text-dark);--card:var(--card-dark)}

*{box-sizing:border-box}
body{margin:0; padding:32px; background:var(--bg); color:var(--text); font-family:var(--font)}

.cf-header{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin:0 auto 24px; max-width:1100px;
}
.brand{display:flex; align-items:center; gap:16px}
.logo{height:48px; width:auto}
h1{font-size:1.6rem; margin:0}
.subtitle{margin:3px 0 0; color:#8a94a6; font-size:.95rem}
.actions{display:flex; align-items:center; gap:10px}

.theme-switch-wrapper{display:flex; align-items:center; gap:8px}
.theme-switch{position:relative;width:50px;height:24px;display:inline-block}
.theme-switch input{display:none}
.theme-switch .slider{position:absolute;inset:0;border-radius:34px;background:#c7c7c7;transition:.25s}
.theme-switch .slider::before{content:"";position:absolute;left:4px;bottom:4px;width:16px;height:16px;background:#fff;border-radius:50%;transition:.25s}
.theme-switch input:checked + .slider{background:var(--brand)}
.theme-switch input:checked + .slider::before{transform:translateX(26px)}

.summary-card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px; margin:0 auto 18px; max-width:1100px;
}
.summary-left{display:flex; align-items:center; gap:12px}
.overall-label{font-weight:700; font-size:1.05rem}
.muted{color:#8a94a6; font-size:.92rem}
.summary-right{text-align:right}

.components{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:8px; margin:0 auto; max-width:1100px;
}
.component-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 12px; border-radius:12px;
}
.component-row:not(:last-child){border-bottom:1px solid rgba(128,128,128,.12)}
.component-row:hover{background:rgba(0,0,0,.03)}
html[data-theme="dark"] .component-row:hover{background:rgba(255,255,255,.03)}

.left{display:flex; align-items:center; gap:10px}
.name{font-weight:600}
.right{display:flex; align-items:center; gap:10px}

.badge{padding:6px 10px; border-radius:999px; font-size:.85rem; font-weight:700}
.badge.ok{background:rgba(34,197,94,.12); color:var(--ok)}
.badge.warn{background:rgba(245,158,11,.12); color:var(--warn)}
.badge.down{background:rgba(239,68,68,.12); color:var(--down)}

.dot{width:14px;height:14px;border-radius:50%;display:inline-block;flex:0 0 14px;background:#a8b0be}
.ok{background:var(--ok)}
.warn{background:var(--warn); animation:pulse 1.6s infinite}
.down{background:var(--down); animation:pulse 1.2s infinite}
@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.55}100%{transform:scale(1);opacity:1}}

.cf-footer{max-width:1100px; margin:20px auto 0; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.btn{display:inline-block; background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff; text-decoration:none; padding:10px 16px; border-radius:10px; font-weight:700}
.powered{color:#8a94a6}