/* css/main.css */
:root {
  --navy: #0F1F3D; --navy-mid: #1D3A6E; --accent: #4ECDC4;
  --accent-dim: rgba(78,205,196,.13);
  --surface: #F7F8FC; --surface2: #EEF1F8;
  --border: rgba(15,31,61,.08);
  --text: #0F1F3D; --muted: #6B7A99; --light: #A0AABF;
  --green: #22C55E; --green-dim: rgba(34,197,94,.1);
  --amber: #F59E0B; --amber-dim: rgba(245,158,11,.1);
  --red: #EF4444; --red-dim: rgba(239,68,68,.1);
  --radius: 16px; --pill: 100px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Sora', sans-serif; background: var(--surface); color: var(--text); }
a { text-decoration: none; color: inherit; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px; border-radius: var(--pill);
  font-size: 13px; font-weight: 500; font-family: 'Sora', sans-serif;
  cursor: pointer; border: none; transition: opacity .15s;
}
.btn:hover { opacity: .88; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-ghost   { background: none; border: 1px solid var(--border); color: var(--muted); }
.btn-ghost:hover { background: var(--surface2); }
.btn-danger  { background: var(--red); color: #fff; }
.btn:disabled { opacity: .35; cursor: default; }

.badge { border-radius: var(--pill); padding: 5px 11px; font-size: 11px; font-weight: 500; }
.badge-xp { background: var(--amber-dim); color: #92400E; }
.badge-streak { background: var(--amber-dim); color: #92400E; }

.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }

input, select {
  width: 100%; padding: 11px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px); font-family: 'Sora', sans-serif;
  font-size: 13px; color: var(--text); outline: none;
  transition: border-color .15s;
}
input:focus, select:focus { border-color: var(--accent); }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--navy); color: #fff; padding: 10px 20px;
  border-radius: var(--pill); font-size: 13px; z-index: 9999;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.toast.show { opacity: 1; }