:root{
  --bg:#0f172a;
  --card:#1e293b;
  --text:#e2e8f0;
  --muted:#94a3b8;
  --border: rgba(148,163,184,.15);
  --shadow: 0 25px 50px -12px rgba(0,0,0,.5);
  --radius: 16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(900px 500px at 20% 0%, rgba(59,130,246,.20), transparent 55%),
              radial-gradient(900px 500px at 80% 10%, rgba(34,197,94,.12), transparent 60%),
              var(--bg);
  color: var(--text);
}

body[data-theme="light"]{
  --bg:#f1f5f9;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border: rgba(15,23,42,.12);
  background: radial-gradient(900px 500px at 20% 0%, rgba(59,130,246,.12), transparent 55%),
              radial-gradient(900px 500px at 80% 10%, rgba(34,197,94,.08), transparent 60%),
              var(--bg);
}

a{ color:inherit; }

.alert{
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.25);
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 800;
}

/* pills / buttons */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(2,6,23,.25);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}

body[data-theme="light"] .pill{
  background: rgba(255,255,255,.85);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(59,130,246,.92);
  color: white;
  font-weight: 950;
  cursor:pointer;
}

label{
  display:block;
  font-size:.82rem;
  font-weight: 900;
  color: var(--muted);
  margin-bottom:6px;
}

input, select{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(2,6,23,.25);
  color: var(--text);
  outline: none;
}
body[data-theme="light"] input, body[data-theme="light"] select{
  background: rgba(255,255,255,.92);
  color: var(--text);
}


/* ===== App scrolling: prevent page scroll; use sidebar scroll ===== */
body{ overflow: hidden; }
@media (max-width: 980px){ body{ overflow: auto; } }