:root{ --radius:16px; }

/* Dark (default) */
html[data-theme="dark"]{
  --bg:#070A0F; --panel:#0D1220; --panel2:#0A0F1C; --border:#1C2234;
  --text:#E7EAF1; --muted:#A6AEBF; --primary:#EDEFF5; --primaryText:#0B1020;
}

/* Light (basic) */
html[data-theme="light"]{
  --bg:#F6F7FB; --panel:#FFFFFF; --panel2:#F1F3F8; --border:#D7DCE8;
  --text:#0B1020; --muted:#51607A; --primary:#0B1020; --primaryText:#FFFFFF;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color: var(--text);
}
a{ color:inherit; text-decoration:none; }

.wrap{ max-width:980px; margin:0 auto; padding:18px 16px 60px; }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand{ display:flex; align-items:center; gap:12px; }
.logo{
  width:42px;height:42px; border-radius:14px;
  background: linear-gradient(135deg, #1C2744, #141A2E);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; letter-spacing:.5px;
}
.brand-title{ font-weight:700; font-size:16px; line-height:1.1; }
.brand-sub{ font-size:12px; color:var(--muted); margin-top:2px; }

.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 10px; border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  font-size:13px; min-width:44px;
}
.pill.active{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.14); }
html[data-theme="light"] .pill{ background: rgba(0,0,0,.03); }

.card{
  margin-top:16px;
  padding:16px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.h1{ margin:0; font-size:24px; letter-spacing:-.2px; }
.muted{ color:var(--muted); }

.grid{ display:grid; gap:10px; }
@media(min-width:640px){ .grid.cols2{ grid-template-columns: 1fr 1fr; } }

.input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  font-size:14px;
}

.btn{
  border-radius:14px;
  padding:12px 14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color:var(--text);
  font-weight:650;
  font-size:14px;
  cursor:pointer;
  text-align:center;
}
.btn.primary{ background: var(--primary); color: var(--primaryText); border-color: transparent; }

.btnrow{ display:flex; gap:10px; flex-wrap:wrap; }

.err{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,80,80,.35);
  background: rgba(255,80,80,.08);
  color: var(--text);
  font-size:13px;
}

.small{ font-size:12px; }