:root {
  --bg: #0f172a;
  --surface: #1e293b;
  --surface-2: #273449;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --accent: #f59e0b;
  --accent-text: #0f172a;
  --border: rgba(148, 163, 184, 0.25);
  --shadow: rgba(0, 0, 0, 0.45);
}

[data-theme="dark-modern"] {
  --bg: #0f172a;
  --surface: #1e293b;
  --surface-2: #273449;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --accent: #f59e0b;
  --accent-text: #0f172a;
  --border: rgba(148, 163, 184, 0.25);
  --shadow: rgba(0, 0, 0, 0.45);
}

[data-theme="light-minimal"] {
  --bg: #ffffff;
  --surface: #f8fafc;
  --surface-2: #f1f5f9;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #111827;
  --accent-text: #ffffff;
  --border: rgba(15, 23, 42, 0.12);
  --shadow: rgba(15, 23, 42, 0.12);
}

[data-theme="warm-amber"] {
  --bg: #fffaf0;
  --surface: #ffffff;
  --surface-2: #fef3c7;
  --text: #451a03;
  --muted: #92400e;
  --accent: #d97706;
  --accent-text: #ffffff;
  --border: rgba(217, 119, 6, 0.25);
  --shadow: rgba(120, 53, 15, 0.18);
}

[data-theme="ocean-blue"] {
  --bg: #0b1220;
  --surface: #12233d;
  --surface-2: #17324f;
  --text: #e2e8f0;
  --muted: #7dd3fc;
  --accent: #38bdf8;
  --accent-text: #052e3e;
  --border: rgba(56, 189, 248, 0.25);
  --shadow: rgba(0, 0, 0, 0.45);
}

[data-theme="emerald-bar"] {
  --bg: #03251c;
  --surface: #064e3b;
  --surface-2: #065f46;
  --text: #ecfdf5;
  --muted: #6ee7b7;
  --accent: #10b981;
  --accent-text: #022c22;
  --border: rgba(16, 185, 129, 0.3);
  --shadow: rgba(0, 0, 0, 0.4);
}

[data-theme="midnight-purple"] {
  --bg: #14061f;
  --surface: #241035;
  --surface-2: #331a49;
  --text: #efe6ff;
  --muted: #b9a3d6;
  --accent: #a855f7;
  --accent-text: #ffffff;
  --border: rgba(168, 85, 247, 0.25);
  --shadow: rgba(0, 0, 0, 0.5);
}

[data-theme="rose-quartz"] {
  --bg: #fff5f7;
  --surface: #ffffff;
  --surface-2: #ffe4ea;
  --text: #4c0519;
  --muted: #9f5b6b;
  --accent: #e11d48;
  --accent-text: #ffffff;
  --border: rgba(225, 29, 72, 0.2);
  --shadow: rgba(120, 20, 40, 0.15);
}

[data-theme="forest-green"] {
  --bg: #052e22;
  --surface: #0a3d2e;
  --surface-2: #0f4d3a;
  --text: #e6fff6;
  --muted: #8fd6bd;
  --accent: #22c55e;
  --accent-text: #04231a;
  --border: rgba(34, 197, 94, 0.25);
  --shadow: rgba(0, 0, 0, 0.45);
}

[data-theme="sunset-orange"] {
  --bg: #2a1206;
  --surface: #3b1b09;
  --surface-2: #4d2410;
  --text: #ffe9d6;
  --muted: #e0a878;
  --accent: #f97316;
  --accent-text: #2a1206;
  --border: rgba(249, 115, 22, 0.25);
  --shadow: rgba(0, 0, 0, 0.45);
}

[data-theme="slate-gray"] {
  --bg: #f1f5f9;
  --surface: #ffffff;
  --surface-2: #e2e8f0;
  --text: #1e293b;
  --muted: #64748b;
  --accent: #475569;
  --accent-text: #ffffff;
  --border: rgba(71, 85, 105, 0.2);
  --shadow: rgba(15, 23, 42, 0.12);
}

[data-theme="coffee-house"] {
  --bg: #2b1d16;
  --surface: #3a281e;
  --surface-2: #4a3427;
  --text: #f5e6d8;
  --muted: #c9a889;
  --accent: #c08457;
  --accent-text: #2b1d16;
  --border: rgba(192, 132, 87, 0.3);
  --shadow: rgba(0, 0, 0, 0.45);
}

[data-theme="neon-night"] {
  --bg: #050014;
  --surface: #0d0326;
  --surface-2: #150636;
  --text: #e9faff;
  --muted: #7dd3fc;
  --accent: #22d3ee;
  --accent-text: #03151a;
  --border: rgba(34, 211, 238, 0.3);
  --shadow: rgba(0, 0, 0, 0.6);
}

[data-theme="pastel-pink"] {
  --bg: #fff7fb;
  --surface: #ffffff;
  --surface-2: #ffe6f3;
  --text: #500724;
  --muted: #b35c86;
  --accent: #ec4899;
  --accent-text: #ffffff;
  --border: rgba(236, 72, 153, 0.2);
  --shadow: rgba(120, 20, 70, 0.12);
}

[data-theme="royal-gold"] {
  --bg: #1a1405;
  --surface: #2a2008;
  --surface-2: #3a2c0b;
  --text: #fff7db;
  --muted: #d9bf7a;
  --accent: #eab308;
  --accent-text: #1a1405;
  --border: rgba(234, 179, 8, 0.3);
  --shadow: rgba(0, 0, 0, 0.5);
}

[data-theme="arctic-ice"] {
  --bg: #f0f9ff;
  --surface: #ffffff;
  --surface-2: #e0f2fe;
  --text: #0c4a6e;
  --muted: #4b83a3;
  --accent: #0ea5e9;
  --accent-text: #ffffff;
  --border: rgba(14, 165, 233, 0.2);
  --shadow: rgba(12, 74, 110, 0.12);
}

[data-theme="burgundy-wine"] {
  --bg: #1f0509;
  --surface: #2e0a10;
  --surface-2: #3f1018;
  --text: #ffe6ea;
  --muted: #d99aa6;
  --accent: #9f1239;
  --accent-text: #ffffff;
  --border: rgba(159, 18, 57, 0.35);
  --shadow: rgba(0, 0, 0, 0.5);
}

[data-theme="lavender-dream"] {
  --bg: #f5f3ff;
  --surface: #ffffff;
  --surface-2: #ede9fe;
  --text: #2e1065;
  --muted: #7c6bb0;
  --accent: #7c3aed;
  --accent-text: #ffffff;
  --border: rgba(124, 58, 237, 0.2);
  --shadow: rgba(46, 16, 101, 0.12);
}

[data-theme="tropical-teal"] {
  --bg: #032d2b;
  --surface: #064a45;
  --surface-2: #0a5f59;
  --text: #e0fffb;
  --muted: #7fd8cd;
  --accent: #14b8a6;
  --accent-text: #02201e;
  --border: rgba(20, 184, 166, 0.3);
  --shadow: rgba(0, 0, 0, 0.45);
}

[data-theme="carbon-black"] {
  --bg: #0a0a0a;
  --surface: #161616;
  --surface-2: #222222;
  --text: #f5f5f5;
  --muted: #a3a3a3;
  --accent: #ffffff;
  --accent-text: #0a0a0a;
  --border: rgba(255, 255, 255, 0.15);
  --shadow: rgba(0, 0, 0, 0.6);
}

[data-theme="cream-sand"] {
  --bg: #fdf8f0;
  --surface: #ffffff;
  --surface-2: #f5ead6;
  --text: #3f3217;
  --muted: #8a7850;
  --accent: #b45309;
  --accent-text: #ffffff;
  --border: rgba(180, 83, 9, 0.2);
  --shadow: rgba(63, 50, 23, 0.12);
}

[data-theme="cherry-red"] {
  --bg: #1a0505;
  --surface: #2b0a0a;
  --surface-2: #3d1010;
  --text: #ffe5e5;
  --muted: #e08a8a;
  --accent: #ef4444;
  --accent-text: #ffffff;
  --border: rgba(239, 68, 68, 0.3);
  --shadow: rgba(0, 0, 0, 0.5);
}

[data-theme="sapphire-night"] {
  --bg: #041028;
  --surface: #08203f;
  --surface-2: #0c2c57;
  --text: #e0efff;
  --muted: #7fa8d6;
  --accent: #2563eb;
  --accent-text: #ffffff;
  --border: rgba(37, 99, 235, 0.35);
  --shadow: rgba(0, 0, 0, 0.5);
}

[data-theme="mint-fresh"] {
  --bg: #f0fdf9;
  --surface: #ffffff;
  --surface-2: #ccfbf1;
  --text: #064e3b;
  --muted: #4b8f7f;
  --accent: #10b981;
  --accent-text: #ffffff;
  --border: rgba(16, 185, 129, 0.2);
  --shadow: rgba(6, 78, 59, 0.12);
}

[data-theme="copper-rust"] {
  --bg: #21140d;
  --surface: #32200f;
  --surface-2: #452c15;
  --text: #ffecdc;
  --muted: #d69a6c;
  --accent: #ea580c;
  --accent-text: #ffffff;
  --border: rgba(234, 88, 12, 0.3);
  --shadow: rgba(0, 0, 0, 0.45);
}

[data-theme="mono-white"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --text: #18181b;
  --muted: #71717a;
  --accent: #18181b;
  --accent-text: #ffffff;
  --border: rgba(24, 24, 27, 0.16);
  --shadow: rgba(24, 24, 27, 0.1);
}

.themed-app {
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.themed-surface {
  background-color: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px var(--shadow);
}

.themed-surface-2 {
  background-color: var(--surface-2);
}

.themed-text-muted {
  color: var(--muted);
}

.themed-accent {
  background-color: var(--accent);
  color: var(--accent-text);
}

.themed-accent-text {
  color: var(--accent);
}

.themed-border {
  border-color: var(--border);
}

.category-chip {
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}

.category-chip.active {
  background-color: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

.fade-in {
  animation: fadeIn 0.25s ease-in;
}

/* Scrollable but without a visible scrollbar. */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}