@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* ===== DARK THEME (default) ===== */
:root {
  --bg: #0a0a0f;
  --bg-card: #12121a;
  --bg-hover: #1a1a26;
  --bg-el: #1e1e2e;
  --brd: #2a2a3a;
  --brd2: #3a3a5a;
  --t1: #e8e8f0;
  --t2: #8888a8;
  --t3: #555570;
  --green: #00e676;
  --green-d: rgba(0,230,118,0.15);
  --red: #ff3d5a;
  --red-d: rgba(255,61,90,0.15);
  --yellow: #ffc107;
  --yellow-d: rgba(255,193,7,0.15);
  --blue: #448aff;
  --blue-d: rgba(68,138,255,0.15);
  --purple: #b388ff;
  --purple-d: rgba(179,136,255,0.15);
  --cyan: #18ffff;
  --cyan-d: rgba(24,255,255,0.12);
  --orange: #ff9100;
  --r: 16px;
  --rs: 10px;
  --rx: 6px;
  --ff: 'Manrope', sans-serif;
  --fm: 'JetBrains Mono', monospace;
  --bar-text: #0a0a0f;
  --header-bg: rgba(10,10,15,.92);
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
  --bg: #f0f1f5;
  --bg-card: #ffffff;
  --bg-hover: #f5f6fa;
  --bg-el: #e8e9f0;
  --brd: #d4d5de;
  --brd2: #b8b9c8;
  --t1: #1a1a2e;
  --t2: #555570;
  --t3: #8888a0;
  --green: #00b862;
  --green-d: rgba(0,184,98,0.12);
  --red: #e63350;
  --red-d: rgba(230,51,80,0.1);
  --yellow: #d4a007;
  --yellow-d: rgba(212,160,7,0.1);
  --blue: #2c6fdb;
  --blue-d: rgba(44,111,219,0.1);
  --purple: #8855cc;
  --purple-d: rgba(136,85,204,0.1);
  --cyan: #0097a7;
  --cyan-d: rgba(0,151,167,0.1);
  --orange: #e07800;
  --bar-text: #ffffff;
  --header-bg: rgba(240,241,245,.92);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--ff);background:var(--bg);color:var(--t1);min-height:100vh;overflow-x:hidden}

/* LOADING */
#loading{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;transition:opacity .5s,visibility .5s}
#loading.hidden{opacity:0;visibility:hidden;pointer-events:none}
#loading .spinner{width:48px;height:48px;border:3px solid var(--brd);border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loading p{color:var(--t2);font-size:14px;font-family:var(--fm)}

/* HEADER */
header{padding:28px 40px 20px;border-bottom:1px solid var(--brd);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;background:var(--header-bg);backdrop-filter:blur(20px)}
.logo{display:flex;align-items:center;gap:14px}
.logo-icon{width:42px;height:42px;background:linear-gradient(135deg,var(--green),var(--cyan));border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:var(--bg)}
.logo h1{font-size:22px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,var(--t1),var(--t2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.logo span{font-size:11px;color:var(--t3);font-family:var(--fm);display:block;margin-top:2px}
.header-meta{display:flex;align-items:center;gap:24px}
.header-stat{text-align:right}
.header-stat .val{font-family:var(--fm);font-size:15px;font-weight:600;color:var(--t1)}
.header-stat .lbl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.8px;margin-top:2px}

/* NAV */
nav{padding:0 40px;border-bottom:1px solid var(--brd);display:flex;gap:0;overflow-x:auto}
nav button{background:none;border:none;color:var(--t3);font-family:var(--ff);font-size:13px;font-weight:600;padding:14px 20px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all .2s}
nav button:hover{color:var(--t2)}
nav button.active{color:var(--green);border-bottom-color:var(--green)}

/* MAIN */
main{padding:32px 40px 60px;max-width:1440px;margin:0 auto}
.page{display:none;animation:fadeIn .3s ease}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* HEALTH HERO */
.health-hero{display:flex;gap:32px;margin-bottom:36px}
.score-ring{width:220px;height:220px;position:relative;flex-shrink:0}
.score-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.score-ring .track{fill:none;stroke:var(--brd);stroke-width:8}
.score-ring .fill{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1.5s ease}
.score-ring .score-value{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.score-ring .num{font-size:56px;font-weight:800;font-family:var(--fm);letter-spacing:-3px;line-height:1}
.score-ring .score-label{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:1.5px;margin-top:6px}

.health-details{flex:1;display:flex;flex-direction:column;gap:16px;justify-content:center}
.metric-bar{background:var(--bg-card);border:1px solid var(--brd);border-radius:var(--rs);padding:16px 20px;display:flex;align-items:center;gap:16px}
.metric-bar .icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.metric-bar .info{flex:1}
.metric-bar .info .label{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.8px}
.metric-bar .info .value{font-size:18px;font-weight:700;margin-top:2px;font-family:var(--fm)}
.metric-bar .detail{font-size:13px;color:var(--t2)}
.metric-bar .badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}

/* SUMMARY STRIP */
.summary-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:36px}
.stat-card{background:var(--bg-card);border:1px solid var(--brd);border-radius:var(--rs);padding:18px 20px;transition:border-color .2s,transform .15s}
.stat-card:hover{border-color:var(--brd2);transform:translateY(-1px)}
.stat-card .val{font-family:var(--fm);font-size:22px;font-weight:700;letter-spacing:-.5px}
.stat-card .unit{font-size:12px;color:var(--t3);font-weight:400;margin-left:2px}
.stat-card .lbl{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.8px;margin-top:6px}

/* GRIDS */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-bottom:28px}

/* CARDS */
.card{background:var(--bg-card);border:1px solid var(--brd);border-radius:var(--r);padding:24px;transition:border-color .2s}
.card:hover{border-color:var(--brd2)}
.card-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--t3);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.card-title .dot{width:6px;height:6px;border-radius:50%}

/* BAR CHART */
.bar-chart{display:flex;flex-direction:column;gap:10px}
.bar-row{display:flex;align-items:center;gap:12px}
.bar-row .name{width:160px;font-size:12px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}
.bar-row .track{flex:1;height:24px;background:var(--bg-el);border-radius:6px;overflow:hidden;position:relative}
.bar-row .fill{height:100%;border-radius:6px;transition:width .8s cubic-bezier(.25,.46,.45,.94);display:flex;align-items:center;padding-left:8px;font-size:11px;font-family:var(--fm);font-weight:600;color:var(--bg);min-width:30px}
.bar-row .val{font-size:12px;font-family:var(--fm);font-weight:600;width:70px;text-align:right;flex-shrink:0;color:var(--t2)}

/* TABLE */
.data-table{width:100%;border-collapse:collapse}
.data-table th{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--t3);font-weight:700;padding:10px 12px;text-align:left;border-bottom:1px solid var(--brd)}
.data-table td{padding:10px 12px;font-size:13px;border-bottom:1px solid rgba(42,42,58,.5);color:var(--t2)}
.data-table tr:hover td{color:var(--t1);background:rgba(30,30,46,.3)}
.data-table .mono{font-family:var(--fm);font-size:12px;font-weight:500}
.data-table .green{color:var(--green)}
.data-table .red{color:var(--red)}

/* DONUT */
.donut-container{display:flex;align-items:center;gap:24px}
.donut-svg{width:140px;height:140px;flex-shrink:0}
.donut-legend{display:flex;flex-direction:column;gap:8px}
.legend-item{display:flex;align-items:center;gap:8px;font-size:12px}
.legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.legend-val{font-family:var(--fm);font-weight:600;margin-left:auto;padding-left:12px}

/* SPARKLINE */
.spark-wrap{display:flex;align-items:flex-end;gap:3px;height:100px;padding-top:8px}
.spark-bar{border-radius:3px 3px 0 0;min-width:8px;flex:1;transition:all .3s;position:relative;cursor:default}
.spark-bar:hover{opacity:.8}
.spark-bar .tip{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--bg-el);border:1px solid var(--brd2);border-radius:6px;padding:6px 10px;font-size:10px;font-family:var(--fm);white-space:nowrap;z-index:10;color:var(--t1)}
.spark-bar:hover .tip{display:block}

/* ALERTS */
.alert-item{padding:12px 16px;border-radius:var(--rx);margin-bottom:8px;display:flex;align-items:center;gap:12px;font-size:13px}
.alert-item.critical{background:var(--red-d);border-left:3px solid var(--red)}
.alert-item.warning{background:var(--yellow-d);border-left:3px solid var(--yellow)}
.alert-item.info{background:var(--blue-d);border-left:3px solid var(--blue)}
.alert-type{font-size:10px;font-weight:700;text-transform:uppercase;font-family:var(--fm);letter-spacing:.5px;flex-shrink:0;width:130px}
.alert-msg{flex:1;color:var(--t2)}
.alert-entity{font-size:11px;font-family:var(--fm);color:var(--t3)}

/* SECTION */
.section-title{font-size:15px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.section-title::before{content:'';display:block;width:4px;height:20px;border-radius:2px;background:var(--green)}

/* RESPONSIVE */
@media(max-width:1024px){
  .health-hero{flex-direction:column;align-items:center}
  .grid-2,.grid-3{grid-template-columns:1fr}
  header{padding:20px 20px 16px}main{padding:24px 20px 60px}nav{padding:0 20px}
}
@media(max-width:640px){.summary-strip{grid-template-columns:1fr 1fr}.bar-row .name{width:100px}}

/* REFRESH BUTTON */
.refresh-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--brd2);background:var(--bg-el);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;flex-shrink:0;color:var(--t2);padding:0}
.refresh-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-d)}
.refresh-btn:active{transform:scale(.92)}
.refresh-btn.loading{pointer-events:none;border-color:var(--green);color:var(--green)}
.refresh-btn.loading .refresh-icon{animation:spin .8s linear infinite}
.refresh-btn.success{border-color:var(--green);color:var(--green);background:var(--green-d)}
.refresh-btn.error{border-color:var(--red);color:var(--red);background:var(--red-d)}
.refresh-icon{width:18px;height:18px}

/* THEME TOGGLE */
.theme-toggle{width:44px;height:24px;border-radius:12px;border:1px solid var(--brd2);background:var(--bg-el);cursor:pointer;position:relative;transition:all .3s;flex-shrink:0}
.theme-toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--t3);transition:all .3s}
[data-theme="light"] .theme-toggle::after{left:22px;background:var(--yellow)}
.theme-toggle:hover{border-color:var(--green)}
.theme-icon{font-size:14px;margin-right:4px}

/* CLICKABLE ROWS */
.data-table tr.clickable{cursor:pointer;transition:all .15s}
.data-table tr.clickable:hover td{background:var(--bg-hover);color:var(--t1)}
.data-table tr.clickable td:first-child{position:relative;padding-left:20px}
.data-table tr.clickable td:first-child::before{content:'\203A';position:absolute;left:6px;color:var(--green);font-weight:700;font-size:16px;opacity:0;transition:opacity .15s}
.data-table tr.clickable:hover td:first-child::before{opacity:1}

/* DETAIL PAGE */
.detail-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--t2);cursor:pointer;padding:8px 14px;border-radius:var(--rx);border:1px solid var(--brd);background:none;font-family:var(--ff);font-weight:600;margin-bottom:20px;transition:all .2s}
.detail-back:hover{color:var(--t1);border-color:var(--green);background:var(--green-d)}
.detail-header{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.detail-header h2{font-size:20px;font-weight:800}
.detail-header .tag{font-size:11px;font-family:var(--fm);padding:4px 10px;border-radius:20px;background:var(--green-d);color:var(--green)}

/* MINI STAT ROW */
.mini-stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.mini-stat{background:var(--bg-card);border:1px solid var(--brd);border-radius:var(--rs);padding:14px 18px;min-width:140px;flex:1}
.mini-stat .val{font-family:var(--fm);font-size:18px;font-weight:700}
.mini-stat .lbl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.8px;margin-top:4px}