:root{
  --bg-900:#0f1116;
  --bg-800:#151a22;
  --bg-700:#1b2230;
  --card-rgba:rgba(22,28,38,.45);
  --card: #161c26;
  --border:#2a3342;
  --text:#e9eef6;
  --muted:#9aa5b5;
  --accent:#f6cf5b;
  --ok:#3ecf8e;
  --bad:#ff6b6b;

  --radius:16px;
  --shadow:0 10px 40px rgba(0,0,0,.35);
  --blur:14px;

  --fs-14:0.94rem;
  --fs-16:1rem;
  --fs-18:1.125rem;
  --fs-22:1.375rem;
  --fs-28:1.75rem;

  --container-max:1400px;
  --container-pad:24px;

  --focus:0 0 0 3px rgba(246,207,91,.35), 0 0 24px rgba(246,207,91,.3);
}

/* Light theme */
:root[data-theme="light"]{
  --bg-900:#f7f8fb;
  --bg-800:#ffffff;
  --bg-700:#f1f4f9;
  --card: #ffffff;
  --card-rgba:rgba(255,255,255,.7);
  --border:#d9e0ea;
  --text:#0c1220;
  --muted:#5a6475;
  --accent:#3b7cff;
  --ok:#0aa776;
  --bad:#d94141;

  --shadow:0 10px 40px rgba(16,22,40,.10);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:
    radial-gradient(1200px 800px at 10% -10%,rgba(246,207,91,.06),transparent 60%),
    radial-gradient(1200px 800px at 110% 10%,rgba(97,132,255,.06),transparent 60%),
    linear-gradient(180deg,var(--bg-900),var(--bg-800) 60%,var(--bg-700));
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  line-height:1.55;
  display:flex; flex-direction:column;
}

/* Container */
.container{
  max-width:var(--container-max);
  width:100%;
  margin:24px auto;
  padding:0 var(--container-pad);
  flex:1;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg,rgba(0,0,0,.24),rgba(0,0,0,.14));
  border-bottom:1px solid var(--border);
}
:root[data-theme="light"] .topbar{
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.55));
}
.topbar-inner{
  max-width:var(--container-max);
  margin:0 auto;
  padding:12px var(--container-pad);
  display:grid; gap:14px;
  grid-template-columns:1fr auto auto;
  align-items:center;
}
.brand{font-weight:800; letter-spacing:.2px; font-size:var(--fs-22)}
.brand small{opacity:.7; font-weight:600; margin-left:8px; font-size:var(--fs-14)}
.nav{display:flex; gap:10px; flex-wrap:wrap}
.userbar{display:flex; gap:10px; align-items:center; justify-content:flex-end}

/* Links & Buttons */
.navlink,.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; font-weight:650;
  background:var(--card-rgba);
  border:1px solid var(--border);
  text-decoration:none; color:var(--text);
  transition:transform .15s ease, box-shadow .15s ease, outline-color .15s ease;
  backdrop-filter:blur(var(--blur));
}
.navlink:hover,.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 2px rgba(246,207,91,.4), 0 6px 24px rgba(0,0,0,.25);
}
.navlink.active{
  box-shadow:0 0 0 2px rgba(246,207,91,.6),0 0 36px rgba(246,207,91,.25);
}
.btn.primary{
  background:linear-gradient(180deg, rgba(246,207,91,.25), rgba(246,207,91,.15));
  border-color:rgba(246,207,91,.6);
}
:root[data-theme="light"] .btn.primary{
  background:linear-gradient(180deg, rgba(59,124,255,.18), rgba(59,124,255,.10));
  border-color:rgba(59,124,255,.55);
}

/* Cards (Glass) */
.card{
  background:var(--card-rgba);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(var(--blur)) saturate(140%);
  margin:16px 0;
}
.card .title{font-size:var(--fs-22); font-weight:800; margin:0 0 12px}
.card .subtitle{color:var(--muted); margin-top:-2px; margin-bottom:18px}

/* Grid Utils */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.grid-auto{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
@media (max-width:1100px){ .grid-3{grid-template-columns:1fr 1fr} }
@media (max-width:860px){ .grid-2,.grid-3{grid-template-columns:1fr} }

/* Stat / Badges */
.stat{
  display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.02));
  backdrop-filter:blur(8px);
}
.badge{
  padding:4px 10px; border-radius:999px;
  border:1px solid var(--border); background:var(--card-rgba);
  font-size:.88rem;
}
.success{color:var(--ok)} .error{color:var(--bad)} .muted{color:var(--muted)}
.right{text-align:right} .flex{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* Key-Value rows */
.kv{display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px dashed var(--border)}
.kv:last-child{border-bottom:0}

/* Tables */
.tablewrap{overflow:auto}
table{width:100%; border-collapse:collapse; margin-top:10px}
th,td{padding:12px 10px; border-bottom:1px solid var(--border)}
th{color:var(--accent); text-align:left; font-weight:700; letter-spacing:.2px}
tr:hover td{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.02))}

/* Forms */
form .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:860px){ form .row{grid-template-columns:1fr} }
label{display:block; margin:10px 0 6px; color:var(--muted)}
input,select,textarea{
  width:100%; padding:12px 14px; font-size:var(--fs-16);
  color:var(--text);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.05));
  border-radius:12px; outline:none;
  transition:box-shadow .15s ease, border-color .15s ease;
  backdrop-filter:blur(6px);
}
input:focus,select:focus,textarea:focus{ box-shadow:var(--focus); border-color:transparent }
button{
  padding:12px 16px; border-radius:12px; border:1px solid var(--border);
  background:var(--card-rgba); color:var(--text); cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease; backdrop-filter:blur(var(--blur));
}
button:hover{ transform:translateY(-1px); box-shadow:0 0 0 2px rgba(246,207,91,.45), 0 10px 28px rgba(0,0,0,.25) }
button.primary{ background:linear-gradient(180deg, rgba(246,207,91,.25), rgba(246,207,91,.10)); border-color:rgba(246,207,91,.55) }
:root[data-theme="light"] button.primary{ background:linear-gradient(180deg, rgba(59,124,255,.18), rgba(59,124,255,.08)); border-color:rgba(59,124,255,.55) }

/* Footer */
.footer{ text-align:center; padding:18px 0 26px; color:var(--muted); font-size:var(--fs-14); margin-top:auto }

/* Mobile header stack */
@media (max-width:900px){
  .topbar .topbar-inner{ grid-template-columns:1fr; text-align:center }
  .nav{ justify-content:center }
  .userbar{ justify-content:center }
  .brand{ justify-self:center }
}

/* Toggle Switch (theme) */
.toggle{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--muted);
  padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:var(--card-rgba);
}
.switch{
  width:46px; height:26px; border-radius:999px; position:relative; border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.08)); cursor:pointer;
}
.switch::after{
  content:""; position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, #ddd);
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:left .18s ease;
}
:root[data-theme="light"] .switch::after{ left:22px }

/* Helpers */
.hidden{display:none}
.hr{height:1px; background:linear-gradient(90deg, transparent, var(--border), transparent); border:0; margin:18px 0}
pre{white-space:pre-wrap; word-wrap:break-word}

/* Strong accent glow on hover (global) */
a:hover, button:hover, .navlink:hover{
  text-shadow:0 0 18px rgba(246,207,91,.55);
}
:root[data-theme="light"] a:hover, :root[data-theme="light"] button:hover, :root[data-theme="light"] .navlink:hover{
  text-shadow:0 0 18px rgba(59,124,255,.45);
}