/* ── System Monitor Dashboard — dark theme ─────────────────── */
:root{
  --bg:#0b1120; --bg2:#0f172a;
  --card:#131c31; --card2:#0f1828;
  --line:#1e2c47;
  --txt:#e6edf7; --mut:#8aa0c2; --mut2:#5d7299;
  --acc:#3b82f6; --acc2:#8b5cf6; --grn:#22c55e; --org:#f59e0b; --red:#ef4444; --cy:#06b6d4; --pk:#ec4899;
  --radius:16px; --shadow:0 10px 30px -12px rgba(0,0,0,.6);
  --transition-speed: 0.35s;
}

/* ── Light Green Theme ──────────────────────────────────────── */
[data-theme="green"]{
  --bg:#e8f5e9; --bg2:#f1f8e9;
  --card:#ffffff; --card2:#f0faf0;
  --line:#b2dfb2;
  --txt:#1b3a1f; --mut:#4a7c59; --mut2:#7aaa80;
  --acc:#16a34a; --acc2:#15803d; --grn:#22c55e; --org:#f59e0b; --red:#ef4444; --cy:#0891b2; --pk:#db2777;
  --radius:16px; --shadow:0 10px 30px -12px rgba(22,163,74,.18);
}
[data-theme="green"] body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(34,197,94,.12), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(16,185,129,.10), transparent 55%),
    var(--bg);
  color:var(--txt);
}
[data-theme="green"] .range input { color-scheme: light; }

/* ── Default Light Theme ────────────────────────────────────── */
[data-theme="light"]{
  --bg:#f1f5f9; --bg2:#e2e8f0;
  --card:#ffffff; --card2:#f8fafc;
  --line:#cbd5e1;
  --txt:#0f172a; --mut:#64748b; --mut2:#94a3b8;
  --acc:#3b82f6; --acc2:#8b5cf6; --grn:#22c55e; --org:#f59e0b; --red:#ef4444; --cy:#06b6d4; --pk:#ec4899;
  --radius:16px; --shadow:0 10px 30px -12px rgba(0,0,0,.12);
}
[data-theme="light"] body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(139,92,246,.07), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(59,130,246,.07), transparent 55%),
    var(--bg);
  color:var(--txt);
}
[data-theme="light"] .range input { color-scheme: light; }
*{box-sizing:border-box; transition: background var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(139,92,246,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(59,130,246,.10), transparent 55%),
    var(--bg);
  color:var(--txt); min-height:100vh; -webkit-font-smoothing:antialiased;
}
.app{max-width:1480px; margin:0 auto; padding:22px 22px 40px}

/* topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:nowrap;
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:10px 14px; box-shadow:var(--shadow);
  margin-bottom:18px; overflow-x:auto; overflow-y:hidden; white-space:nowrap;
}
.brand{display:flex; align-items:center; gap:10px; flex:none;}
.brand-logo{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#fff; box-shadow:0 4px 12px -4px rgba(59,130,246,.6)}
.brand-logo svg{width:18px;height:18px;}
.brand h1{font-size:15px;margin:0;font-weight:700;letter-spacing:.2px}
.brand-sub{font-size:10px;color:var(--mut);text-transform:uppercase;letter-spacing:1px}

.filters{display:flex;align-items:center;gap:10px;flex-wrap:nowrap; flex:1; justify-content:flex-end;}
.presets{display:flex;gap:4px;background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:3px;flex:none}
.presets button{background:transparent;border:0;color:var(--mut);font:600 11px/1 'Inter';
  padding:6px 9px;border-radius:6px;cursor:pointer;transition:.15s}
.presets button:hover{color:var(--txt)}
.presets button.active{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff}
.range{display:flex;align-items:center;gap:6px;flex:none}
.range input{background:var(--card2);border:1px solid var(--line);color:black;
  border-radius:7px;padding:6px 8px;font:500 11.5px 'Inter';color-scheme:dark;width:155px;}
.range input:focus{outline:0;border-color:var(--acc)}
.range .sep{color:var(--mut2)}
.apply{background:linear-gradient(135deg,var(--acc),var(--acc2));border:0;color:#fff;
  font:600 12px 'Inter';padding:7px 12px;border-radius:7px;cursor:pointer;transition:.15s;flex:none}
.apply:hover{filter:brightness(1.08);transform:translateY(-1px)}
.status{display:flex;align-items:center;gap:6px;font:600 11px 'Inter';color:var(--mut);
  background:var(--card2);border:1px solid var(--line);padding:6px 10px;border-radius:20px;flex:none}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--org);box-shadow:0 0 0 0 rgba(245,158,11,.6);animation:pulse 1.4s infinite}
.status.ok .dot{background:var(--grn);animation:none}
.status.err .dot{background:var(--red);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(245,158,11,.5)}70%{box-shadow:0 0 0 7px rgba(245,158,11,0)}100%{box-shadow:0 0 0 0 rgba(245,158,11,0)}}

/* stat cards */
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.stat{display:flex;align-items:center;gap:13px;padding:16px 16px;position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--acc)}
.stat[data-key="mem"]::after{background:var(--cy)}
.stat[data-key="disk"]::after{background:var(--org)}
.stat[data-key="net"]::after{background:var(--grn)}
.stat[data-key="load"]::after{background:var(--pk)}
.stat[data-key="swap"]::after{background:var(--acc2)}
.stat-ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  font:800 12px 'Inter';letter-spacing:.4px;color:#fff;flex:none}
.stat-ico.cpu{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.stat-ico.mem{background:linear-gradient(135deg,#06b6d4,#0891b2)}
.stat-ico.disk{background:linear-gradient(135deg,#f59e0b,#d97706)}
.stat-ico.net{background:linear-gradient(135deg,#22c55e,#16a34a)}
.stat-ico.load{background:linear-gradient(135deg,#ec4899,#db2777)}
.stat-ico.swap{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
.stat-body{display:flex;flex-direction:column;min-width:0}
.stat-label{font:600 11px 'Inter';color:var(--mut);text-transform:uppercase;letter-spacing:.6px}
.stat-val{font:800 24px/1.1 'Inter';margin-top:2px}
.stat-foot{font:500 11.5px 'Inter';color:var(--mut2);margin-top:2px}

/* grid + charts */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.chart-card.span-2{grid-column:span 2}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.card-head h3{margin:0;font:700 14px 'Inter';letter-spacing:.2px}
.badge{font:600 11px 'Inter';color:var(--mut);background:var(--card2);border:1px solid var(--line);padding:4px 10px;border-radius:20px}
.chart{padding:6px 6px 4px;height:300px}
.chart-card.span-2 .chart{height:320px}

/* panels */
.panels{grid-template-columns:repeat(3,1fr)}
.panel .kv{padding:8px 16px 16px}
.kv .row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font:500 12.5px 'Inter';}
.kv .row:last-child{border-bottom:0}
.kv .k{color:var(--mut);text-transform:capitalize}
.kv .v{color:var(--txt);font-weight:600;text-align:right;word-break:break-word}
.kv .muted{color:var(--mut2);font:500 12.5px 'Inter';padding:6px 0}
.kv .pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700}
.pill.warn{background:rgba(245,158,11,.15);color:var(--org)}
.pill.crit{background:rgba(239,68,68,.15);color:var(--red)}
.pill.ok{background:rgba(34,197,94,.15);color:var(--grn)}

.foot{text-align:center;color:var(--mut2);font:500 12px 'Inter';margin-top:6px}

/* responsive */
@media(max-width:1180px){.stats{grid-template-columns:repeat(3,1fr)}.grid,.panels{grid-template-columns:repeat(2,1fr)}.chart-card.span-2{grid-column:span 2}}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}.grid,.panels{grid-template-columns:1fr}.chart-card.span-2{grid-column:span 1}.chart,.chart-card.span-2 .chart{height:240px}}

/* skeleton shimmer */
.shimmer{position:relative;overflow:hidden}
.shimmer::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:sh 1.4s infinite}
@keyframes sh{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
/* setup notice */
.setup-notice{position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(10px);z-index:100;display:grid;place-items:center;padding:20px}
.notice-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px;max-width:500px;text-align:center;box-shadow:var(--shadow)}
.notice-card h3{color:var(--red);margin-bottom:15px;font-size:22px}
.notice-card code{background:var(--card2);padding:2px 6px;border-radius:4px;color:var(--cy)}

.developer-links{margin-top:14px;opacity:0.7;transition:0.2s}
.developer-links:hover{opacity:1}

/* ── Theme Toggle Button ────────────────────────────────────── */
.theme-toggle-wrap{
  display:flex; align-items:center; gap:6px;
  background:var(--card2); border:1px solid var(--line);
  border-radius:30px; padding:4px 10px 4px 6px;
  cursor:pointer; user-select:none; transition:all .3s; flex:none;
}
.theme-toggle-wrap:hover{ border-color:var(--acc); box-shadow:0 0 0 3px rgba(22,163,74,.12);}
.theme-track{
  position:relative; width:44px; height:24px;
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  border-radius:12px; flex:none; transition:background .35s;
}
.theme-thumb{
  position:absolute; top:3px; left:3px;
  width:18px; height:18px; background:#fff;
  border-radius:50%; transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
[data-theme="green"] .theme-track{ background:linear-gradient(135deg,#16a34a,#15803d);}
[data-theme="green"] .theme-thumb{ transform:translateX(20px);}
[data-theme="light"] .theme-track{ background:linear-gradient(135deg,#3b82f6,#8b5cf6);}
[data-theme="light"] .theme-thumb{ transform:translateX(0px);}
.theme-label{ font:600 12px 'Inter'; color:var(--mut); white-space:nowrap; transition:color .3s;}
.theme-icon{ font-size:16px; line-height:1;}