/* ═══ ui.css — tokens, reset, components ═══ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap');

:root {
  /* ── Base colors ── */
  --bg:    #f7f5f0;  --bg2: #f0ede6;  --bg3: #e8e4db;  --bg4: #ddd9cf;
  --white: #ffffff;
  --ink:   #0f0e0c;  --ink2:#3a3730;  --ink3:#6b6760;  --ink4:#9c9890;
  --border:#d4cfc6;  --border2:#c8c3b8;
  --success:#1a7a4a; --success-bg:#eafaf1;
  --error:  #b92d2d; --error-bg:  #fdf0f0;
  --warn:   #8a6000; --warn-bg:   #fef8ec;

  /* ── Accent palette (stat cards, icons) ── */
  --accent-blue:   #4f5eff; --accent-blue-bg:   #eef2ff;
  --accent-green:  #16a34a; --accent-green-bg:  #f0fdf4;
  --accent-orange: #ea6f00; --accent-orange-bg: #fff7ed;
  --accent-purple: #a21caf; --accent-purple-bg: #fdf4ff;
  --accent-sky:    #0369a1; --accent-sky-bg:    #f0f9ff;
  --accent-rose:   #be123c; --accent-rose-bg:   #fff1f2;
  --accent-slate:  #475569; --accent-slate-bg:  #f8fafc;
  --accent-amber:  #b45309; --accent-amber-bg:  #fefce8;
  --accent-violet: #7c3aed; --accent-violet-bg: #ede9fe;
  --accent-warn:   #d97706; --accent-warn-bg:   #fef9c3;
  --accent-warn-ink:#713f12;

  /* ── Radii ── */
  --r-xs:4px; --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;

  /* ── Shadows ── */
  --sh-xs:0 1px 2px rgba(0,0,0,.06);
  --sh-sm:0 1px 4px rgba(0,0,0,.07),0 2px 8px rgba(0,0,0,.04);
  --sh:   0 2px 8px rgba(0,0,0,.09),0 4px 16px rgba(0,0,0,.05);
  --sh-lg:0 8px 32px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.05);
  --sh-xl:0 16px 48px rgba(0,0,0,.16);

  /* ── Font ── */
  --font: 'Bricolage Grotesque', sans-serif;
  /* Font sizes — explicit px */
  --fs-10:12px; --fs-11:13px; --fs-12:14px; --fs-13:15px; --fs-14:16px;
  --fs-15:17px; --fs-16:18px; --fs-18:18px; --fs-20:20px; --fs-22:22px;
  --fs-24:24px; --fs-28:28px; --fs-32:32px;

  /* ── Layout ── */
  --sb-w:272px;
  --tb-h:56px;

  /* ── Motion ── */
  --ease:cubic-bezier(.4,0,.2,1); --t:.17s;

  /* ── Semantic shortcuts (used in app.css / pages.css) ── */
  --page-bg: var(--bg);
  --card-bg: var(--white);
  --on-ink:  var(--white);          /* text on dark/ink backgrounds */
  --on-accent-violet: var(--white); /* text on violet backgrounds   */
}

/* ════════════════════════
   DARK THEME
   ════════════════════════ */
[data-theme="dark"] {
  --bg:    #0f0e0c;  --bg2: #1a1916;  --bg3: #242220;  --bg4: #2e2c29;
  --white: #1e1c1a;
  --ink:   #f0ede6;  --ink2:#ccc8bf;  --ink3:#8a8680;  --ink4:#5a5752;
  --border:#2e2c29;  --border2:#3a3730;
  --success:#22c55e; --success-bg:#0a2e1a;
  --error:  #f87171; --error-bg:  #2e0a0a;
  --warn:   #fbbf24; --warn-bg:   #2e1f00;
  /* Darken accent bgs */
  --accent-blue-bg:   #1e2257; --accent-green-bg:  #0a2e18;
  --accent-orange-bg: #2e1800; --accent-purple-bg: #2a0a2e;
  --accent-sky-bg:    #0a1e2e; --accent-rose-bg:   #2e0a15;
  --accent-slate-bg:  #141618; --accent-amber-bg:  #2e1800;
  --accent-violet-bg: #1a0a36; --accent-warn-bg:   #2e2200;
  --accent-warn-ink:  #fbbf24;
  --sh-xs:0 1px 3px rgba(0,0,0,.35);
  --sh-sm:0 1px 4px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
  --sh:   0 2px 8px rgba(0,0,0,.45),0 4px 16px rgba(0,0,0,.35);
  --sh-lg:0 8px 32px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35);
  --sh-xl:0 16px 48px rgba(0,0,0,.65);
  --on-ink: var(--bg);
}

/* ════════════════════════
   COMPACT MODE
   ════════════════════════ */
[data-compact="true"] { --tb-h:44px; }
[data-compact="true"] .page-scroll { padding:14px; }
[data-compact="true"] .dash-stat-grid { gap:8px; }
[data-compact="true"] .dash-stat-card { padding:13px; }
[data-compact="true"] .pi { padding:16px; }

/* ════════════════════════
   RESET
   ════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; overflow:hidden; -webkit-font-smoothing:antialiased; }
body {
  font-family:var(--font); background:var(--bg); color:var(--ink);
  font-size:14px; line-height:1.5;
  transition:background .2s var(--ease), color .2s var(--ease);
}
button { font-family:var(--font); cursor:pointer; border:none; background:none; }
input, textarea, select { font-family:var(--font); }
a { color:inherit; text-decoration:none; }
ul, ol { list-style:none; }
img { display:block; max-width:100%; }

::-webkit-scrollbar       { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:var(--ink4); }

/* ════════════════════════
   BUTTONS
   ════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 16px; border-radius:var(--r-sm);
  font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
  border:1.5px solid transparent;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);
  font-family:var(--font); user-select:none;
}
.btn i { font-size:15px; flex-shrink:0; }
.btn-primary   { background:var(--ink);    color:var(--on-ink); border-color:var(--ink); }
.btn-primary:hover  { background:var(--ink2); border-color:var(--ink2); }
.btn-secondary { background:transparent;   color:var(--ink);    border-color:var(--border2); }
.btn-secondary:hover { background:var(--bg3); border-color:var(--ink3); }
.btn-ghost     { background:transparent;   color:var(--ink3); }
.btn-ghost:hover { background:var(--bg3); color:var(--ink); }
.btn-danger    { background:transparent;   color:var(--error); border-color:var(--error); }
.btn-danger:hover { background:var(--error-bg); }
.btn-sm  { padding:5px 11px;  font-size:12px; }
.btn-sm i  { font-size:13px; }
.btn-lg  { padding:11px 22px; font-size:14px; }
.btn-lg i  { font-size:16px; }
.btn:disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }
.btn:active:not(:disabled) { transform:scale(.97); }

/* Icon button */
.btn-icon {
  width:34px; height:34px; padding:0; border-radius:var(--r-sm);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:17px; color:var(--ink3); border:1.5px solid transparent;
  transition:all var(--t); flex-shrink:0;
}
.btn-icon:hover { background:var(--bg3); color:var(--ink); border-color:var(--border); }
.btn-icon.active { background:var(--ink); color:var(--on-ink); }

/* ════════════════════════
   TOGGLE SWITCH
   ════════════════════════ */
.toggle {
  position:relative; display:inline-flex; align-items:center;
  width:44px; height:24px; cursor:pointer; flex-shrink:0;
}
.toggle input { opacity:0; width:0; height:0; position:absolute; }
.toggle-track {
  position:absolute; inset:0; border-radius:99px;
  background:var(--bg4); transition:background var(--t);
}
.toggle input:checked + .toggle-track { background:var(--ink); }
.toggle-thumb {
  position:absolute; left:3px; top:3px;
  width:18px; height:18px; border-radius:50%;
  background:var(--white); box-shadow:var(--sh-xs);
  transition:transform var(--t); pointer-events:none;
}
.toggle input:checked ~ .toggle-thumb { transform:translateX(20px); }

/* ════════════════════════
   AVATAR
   ════════════════════════ */
.avatar {
  width:30px; height:30px; border-radius:20%;
  background:var(--ink); color:var(--on-ink);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; flex-shrink:0; letter-spacing:-.5px;
  cursor:pointer; transition:opacity var(--t); user-select:none;
}
.avatar:hover { opacity:.8; }
.avatar-lg { width:72px; height:72px; font-size:28px; }

/* ════════════════════════
   SPINNER
   ════════════════════════ */
.spinner { width:15px; height:15px; border:2px solid var(--border); border-top-color:var(--ink); border-radius:50%; animation:spin .65s linear infinite; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }
.spin { animation:spin .7s linear infinite; display:inline-block; }

/* ════════════════════════
   FORM
   ════════════════════════ */
.field      { display:flex; flex-direction:column; gap:5px; }
.field-lbl  { font-size:11px; font-weight:700; color:var(--ink3); letter-spacing:.06em; text-transform:uppercase; }
.field-hint { font-size:11px; color:var(--ink4); line-height:1.5; }
.input {
  width:100%; padding:9px 12px; border:1.5px solid var(--border); border-radius:var(--r-sm);
  font-size:14px; font-family:var(--font); background:var(--white); color:var(--ink);
  outline:none; transition:border-color var(--t), box-shadow var(--t);
}
.input:focus { border-color:var(--ink); box-shadow:0 0 0 3px rgba(15,14,12,.07); }
.input::placeholder { color:var(--ink4); }
textarea.input { resize:vertical; min-height:80px; line-height:1.6; }

/* ════════════════════════
   CUSTOM SELECT
   ════════════════════════ */
.custom-select { position:relative; }
.cs-trigger {
  width:100%; padding:9px 36px 9px 12px; border:1.5px solid var(--border);
  border-radius:var(--r-sm); font-size:14px; font-family:var(--font);
  background:var(--white); color:var(--ink); cursor:pointer;
  display:flex; align-items:center; user-select:none;
  transition:border-color var(--t), box-shadow var(--t);
}
.cs-trigger:hover { border-color:var(--border2); }
.cs-trigger.open  { border-color:var(--ink); box-shadow:0 0 0 3px rgba(15,14,12,.07); }
.cs-arrow { position:absolute; right:10px; font-size:18px; color:var(--ink4); pointer-events:none; transition:transform var(--t); }
.cs-trigger.open .cs-arrow { transform:rotate(180deg); }
.cs-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:400; background:var(--white); border:1.5px solid var(--border); border-radius:var(--r); box-shadow:var(--sh-lg); overflow:hidden; display:none; min-width:100%; }
.cs-dropdown.open { display:block; animation:scale-in .13s var(--ease) both; transform-origin:top; }
.cs-option { padding:9px 14px; font-size:14px; cursor:pointer; color:var(--ink2); display:flex; align-items:center; justify-content:space-between; transition:background var(--t); }
.cs-option:hover  { background:var(--bg2); }
.cs-option.active { font-weight:700; color:var(--ink); background:var(--bg3); }

/* ════════════════════════
   TAGS
   ════════════════════════ */
.ftag { display:inline-flex; align-items:center; padding:2px 8px; border-radius:5px; font-size:11px; font-weight:600; background:var(--bg3); color:var(--ink3); }
.tag  { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:99px; font-size:12px; font-weight:600; background:var(--bg3); color:var(--ink3); }

/* ════════════════════════
   EMPTY STATE
   ════════════════════════ */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:60px 24px; text-align:center; }
.empty-state i  { font-size:40px; color:var(--ink4); opacity:.3; }
.empty-state h4 { font-size:16px; font-weight:700; color:var(--ink2); }
.empty-state p  { font-size:13px; color:var(--ink3); max-width:280px; line-height:1.65; }

/* ════════════════════════
   ANIMATIONS
   ════════════════════════ */
@keyframes fade-in   { from{opacity:0}                            to{opacity:1}                         }
@keyframes slide-up  { from{opacity:0;transform:translateY(8px)}  to{opacity:1;transform:translateY(0)} }
@keyframes slide-dn  { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
@keyframes scale-in  { from{opacity:0;transform:scale(.95)}       to{opacity:1;transform:scale(1)}      }
@keyframes pulse-ring{ 0%,100%{box-shadow:0 0 0 0 rgba(15,14,12,.25)} 50%{box-shadow:0 0 0 12px rgba(15,14,12,0)} }

/* ════════════════════════
   MODE OPTIONS (quiz setup)
   ════════════════════════ */
.mode-opts { display:flex; gap:8px; flex-wrap:wrap; }
.mode-opt {
  flex:1; min-width:130px; padding:11px 14px;
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  font-size:13px; font-weight:600; color:var(--ink3);
  display:flex; align-items:center; gap:7px; cursor:pointer; transition:all var(--t);
}
.mode-opt i { font-size:15px; }
.mode-opt:hover  { border-color:var(--ink3); color:var(--ink); }
.mode-opt.active { border-color:var(--ink); color:var(--ink); background:var(--bg2); }

@media(max-width:680px){ :root{ --sb-w:270px; } }