/* ── Dark Theme ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* backgrounds */
  --bg: #252534;
  --surface: #323242;
  --surface2: #3c3c4c;
  --border: #4a4a5a;

  /* accent (indigo) */
  --accent: #818cf8;
  --accent-hover: #6366f1;
  --accent-light: rgba(99,102,241,.12);
  --accent-glow: rgba(129,140,248,.2);
  --grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);

  /* text */
  --text: #e4e4ee;
  --text-muted: #a0a0b6;

  /* status: ok */
  --ok: #34d399;
  --ok-bg: rgba(5,150,105,.12);
  --ok-border: rgba(52,211,153,.25);
  --ok-grad: linear-gradient(135deg, #059669, #10b981);

  /* status: ng */
  --ng: #f87171;
  --ng-bg: rgba(220,38,38,.12);
  --ng-border: rgba(248,113,113,.25);

  /* search-specific */
  --user-bubble: linear-gradient(135deg, #6366f1, #8b5cf6);
  --ai-bubble: #363646;
  --err: #f87171;
  --source-bg: #363646;

  /* action (primary CTA / buttons) */
  --action: #e53935;
  --action-dark: #c62828;
  --action-grad: linear-gradient(135deg, #e53935, #c62828);
  --action-shadow: rgba(229,57,53,.35);
  --action-shadow-hover: rgba(229,57,53,.45);

  /* utility */
  --scrollbar-thumb: #58586c;
  --placeholder: #8686a0;
  --overlay: rgba(10,10,18,.7);
  --input-focus-bg: var(--surface2);
  --btn-text: #fff;

  /* streak / life */
  --streak-color: #fb923c;
  --streak-bg: rgba(251,146,60,.12);
  --streak-border: rgba(251,146,60,.25);
  --life-color: #38bdf8;
  --life-bg: rgba(56,189,248,.12);
  --life-border: rgba(56,189,248,.25);

  /* completion */
  --complete-grad: linear-gradient(135deg, #f59e0b, #fbbf24, #fcd34d);
  --complete-border: rgba(251,191,36,.4);
  --complete-shadow: 0 0 0 1px rgba(251,191,36,.08), 0 6px 18px rgba(245,158,11,.14);
  --complete-text: #fcd34d;

  /* review card */
  --review-bg: rgba(232,216,138,.08);
  --review-border: rgba(232,216,138,.2);

  /* locked state */
  --locked-text: #767688;
  --locked-bg: #363644;
  --locked-fill: #424254;
}

:root[data-theme="light"] {
  /* backgrounds */
  --bg: #f4f4fb;
  --surface: #ffffff;
  --surface2: #ececf6;
  --border: #d7d7e5;

  /* accent */
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-light: rgba(99,102,241,.10);
  --accent-glow: rgba(99,102,241,.16);
  --grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);

  /* text */
  --text: #1f2333;
  --text-muted: #666b82;
  --text-heading: #171b2b;

  /* status: ok */
  --ok: #059669;
  --ok-bg: rgba(5,150,105,.10);
  --ok-border: rgba(5,150,105,.20);
  --ok-grad: linear-gradient(135deg, #059669, #10b981);

  /* status: ng */
  --ng: #dc2626;
  --ng-bg: rgba(220,38,38,.08);
  --ng-border: rgba(220,38,38,.18);

  /* search-specific */
  --user-bubble: linear-gradient(135deg, #4f46e5, #8b5cf6);
  --ai-bubble: #f0f1f8;
  --err: #dc2626;
  --source-bg: #f3f4fb;

  /* utility */
  --scrollbar-thumb: #b7bad0;
  --placeholder: #8a8faa;
  --overlay: rgba(244,244,251,.7);
  --input-focus-bg: #ffffff;
  --btn-text: #fff;

  /* streak / life */
  --streak-color: #ea580c;
  --streak-bg: rgba(234,88,12,.10);
  --streak-border: rgba(234,88,12,.18);
  --life-color: #0284c7;
  --life-bg: rgba(2,132,199,.10);
  --life-border: rgba(2,132,199,.18);

  /* completion */
  --complete-grad: linear-gradient(135deg, #f59e0b, #fbbf24, #fde68a);
  --complete-border: rgba(245,158,11,.32);
  --complete-shadow: 0 0 0 1px rgba(245,158,11,.08), 0 6px 18px rgba(245,158,11,.12);
  --complete-text: #b45309;

  /* review card */
  --review-bg: rgba(232,216,138,.12);
  --review-border: rgba(202,138,4,.18);

  /* locked state */
  --locked-text: #8a8ea5;
  --locked-bg: #e8e9f3;
  --locked-fill: #d9dbe8;
}