:root{
  --bg:#0b1220;
  --card:#0f1a2d;
  --muted:#9fb0c9;
  --text:#e8f0ff;
  --acc:#4da3ff;
  --line:rgba(255,255,255,.08);
  --bad:#ff5a6a;
  --good:#66ffa8;
}

:root[data-theme="light"]{
  --bg:#f4f7fb;
  --card:#ffffff;
  --muted:#5a6b86;
  --text:#0b1220;
  --acc:#2563eb;
  --line:rgba(10,20,40,.12);
  --bad:#dc2626;
  --good:#16a34a;
}
:root[data-theme="light"] body{
  background:linear-gradient(180deg,#eef3fb,#eef3fb 60%,#e7eef9);
}
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea{
  background:#f6f9ff;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg, var(--bg), var(--bg) 60%, var(--bg));
  color:var(--text);
}
a{color:var(--acc);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:22px}
.topbar{
  display:flex;gap:16px;align-items:center;justify-content:space-between;
  padding:14px 18px;border:1px solid var(--line);border-radius:14px;
  background:rgba(15,26,45,.7);backdrop-filter: blur(10px);
}
.logo{width:38px}
.heading{display:flex;justify-content:center;align-items:center;gap:10px}
.nav a{margin-right:12px;color:var(--text);opacity:.9}
.nav a.active{color:var(--acc);opacity:1}

.card{
  margin-top:16px;
  border:1px solid var(--line);
  background:rgba(15,26,45,.7);
  border-radius:14px;
  padding:16px;
}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}

h1,h2{margin:0 0 10px 0}
.small{color:var(--muted);font-size:13px}
hr{border:none;border-top:1px solid var(--line);margin:14px 0}

input,select,textarea{
  width:100%;
  background:#0b162b;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  color:var(--text);
}
label{display:block;margin:10px 0 6px;color:var(--muted);font-size:13px}
button{
  border:none;border-radius:10px;
  padding:10px 12px;
  background:var(--acc);
  color:#06101f;
  font-weight:700;
  cursor:pointer;
}
.btn{
	display: inline-block;
  text-align: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--acc);
  color: #06101f;
  font-weight: 700;
}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
button.danger{background:var(--bad);color:#1a0608}
input{margin:4px 0}
.row{display:flex;gap:10px;align-items:center}
.row > *{flex:1}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid var(--line);color:var(--muted)}
.badge.on{color:var(--good);border-color:rgba(102,255,168,.25)}
.badge.off{color:var(--bad);border-color:rgba(255,90,106,.25)}
.code{
  background:#071024;border:1px solid var(--line);
  border-radius:12px;padding:12px;overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:12px;line-height:1.45;
}
.msg{padding:10px 12px;border-radius:12px;border:1px solid var(--line);margin:10px 0}
.msg.ok{border-color:rgba(102,255,168,.25);color:var(--good)}
.msg.err{border-color:rgba(255,90,106,.25);color:var(--bad)}

.kpi-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-bottom:16px;
}

.kpi{
  border:1px solid var(--line);
  background:rgba(15,26,45,.7);
  border-radius:14px;
  padding:18px;
}

.kpi .label{
  font-size:13px;
  color:var(--muted);
}

.kpi .value{
  font-size:28px;
  font-weight:700;
  margin-top:6px;
}

.kpi .sub{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}

/* Light theme override */
/* Apply variables to actual surfaces (your CSS uses fixed colors in a few places) */
.topbar,
.card,
.kpi{
  background: rgba(255,255,255,.04); /* dark fallback look */
}

/* When light theme, make surfaces solid (looks cleaner) */
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .card,
:root[data-theme="light"] .kpi{
  background: var(--card);
  backdrop-filter: none;
}

/* Inputs in light theme */
:root[data-theme="light"] .code,
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea{
  background: #f1f5ff;
  color: var(--text);
}

/* Buttons */
:root[data-theme="light"] .btn,
:root[data-theme="light"] button{
  color:#fff;
}

/* Optional: make ghost buttons readable in light */
:root[data-theme="light"] button.ghost{
  background: transparent;
  color: var(--text);
}