/* ==========================================================================
   Simian Theme — Token-based, multi-theme.
   Default: Cobalt Sky (dark). Light themes override via [data-theme].
   ========================================================================== */

:root {
  /* ── Layout ─────────────────────────────────────────── */
  --bg-main:              #08122B;
  --bg-glow:              radial-gradient(circle at top, #0D2A5E 0%, #08122B 70%);
  --bg-card:              rgba(13, 25, 53, 0.70);
  --bg-card-hover:        rgba(18, 34, 70, 0.90);
  --navbar-bg:            rgba(8, 18, 40, 0.92);
  --card-header-bg:       rgba(255, 255, 255, 0.04);
  --input-bg:             rgba(0, 5, 25, 0.40);
  --input-bg-focus:       rgba(0, 8, 35, 0.55);
  --pulse-bar-bg:         linear-gradient(90deg, rgba(8,18,40,.92) 0%, rgba(13,42,94,.85) 100%);

  /* ── Text ───────────────────────────────────────────── */
  --text-main:            #E8F0FF;
  --text-muted:           #7B9BC8;
  --text-link:            #4A9EFF;

  /* ── Accent ─────────────────────────────────────────── */
  --accent-primary:       #4A9EFF;
  --accent-hover:         #2279E6;
  --border-subtle:        rgba(74, 158, 255, 0.15);
  --border-focus:         rgba(74, 158, 255, 0.45);
  --btn-primary-shadow:   rgba(74, 158, 255, 0.45);

  /* ── Components ─────────────────────────────────────── */
  --reaction-btn-bg:      rgba(255, 255, 255, 0.06);
  --reaction-btn-hover:   rgba(255, 255, 255, 0.13);
  --wish-item-bg:         rgba(255, 255, 255, 0.04);
  --category-badge-bg:    rgba(255, 255, 255, 0.10);
  --card-hover-shadow:    rgba(0, 0, 0, 0.45);
  --scrollbar-thumb:      rgba(74, 158, 255, 0.18);
  --close-filter:         invert(1) opacity(0.6);

  /* ── Semantic button tokens ─────────────────────────── */
  --btn-success-bg:       rgba(16, 185, 129, 0.15);
  --btn-success-bg-hover: rgba(16, 185, 129, 0.28);
  --btn-success-color:    #34d399;
  --btn-success-color-hover: #6ee7b7;
  --btn-danger-bg:        rgba(239, 68, 68, 0.15);
  --btn-danger-bg-hover:  rgba(239, 68, 68, 0.28);
  --btn-danger-color:     #f87171;
  --btn-danger-color-hover: #fca5a5;
  --btn-warning-bg:       rgba(245, 158, 11, 0.15);
  --btn-warning-bg-hover: rgba(245, 158, 11, 0.28);
  --btn-warning-color:    #fbbf24;
  --btn-warning-color-hover: #fcd34d;
  --btn-info-bg:          rgba(14, 165, 233, 0.15);
  --btn-info-bg-hover:    rgba(14, 165, 233, 0.28);
  --btn-info-color:       #38bdf8;
  --btn-info-color-hover: #7dd3fc;

  /* ── Navbar text & toggler ──────────────────────────── */
  --nav-link-color:       rgba(255, 255, 255, 0.60);
  --nav-link-color-main:  #ffffff;
  --navbar-toggler-border: rgba(255, 255, 255, 0.12);
  --navbar-toggler-icon:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2c255%2c255%2c0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

  /* ── Misc ───────────────────────────────────────────── */
  --font-sans:            -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, sans-serif;
  --radius-sm:            6px;
  --radius-md:            12px;
  --radius-lg:            20px;
  --transition-smooth:    all 0.2s ease-in-out;
}

/* ==========================================================================
   GOLDEN TAUPE — warm cream, deep espresso, amber gold
   WCAG 2.2 AA verified: text 13:1, muted 5.2:1, accent 5.97:1
   ========================================================================== */
[data-theme="golden-taupe"] {
  --bg-main:              #FAF7F2;
  --bg-glow:              radial-gradient(circle at top, #F0E5CE 0%, #FAF7F2 65%);
  --bg-card:              rgba(255, 255, 255, 0.95);
  --bg-card-hover:        rgba(255, 255, 255, 1.0);
  --navbar-bg:            rgba(240, 234, 224, 0.96);
  --card-header-bg:       rgba(45, 33, 23, 0.04);
  --input-bg:             rgba(250, 247, 242, 0.95);
  --input-bg-focus:       #ffffff;
  --pulse-bar-bg:         linear-gradient(90deg, rgba(240,234,224,.95) 0%, rgba(230,215,185,.90) 100%);

  --text-main:            #2D2117;
  --text-muted:           #7A6450;
  --text-link:            #7A5900;

  --accent-primary:       #7A5900;
  --accent-hover:         #5C4200;
  --border-subtle:        rgba(122, 89, 0, 0.15);
  --border-focus:         rgba(122, 89, 0, 0.40);
  --btn-primary-shadow:   rgba(122, 89, 0, 0.35);

  --reaction-btn-bg:      rgba(122, 89, 0, 0.07);
  --reaction-btn-hover:   rgba(122, 89, 0, 0.14);
  --wish-item-bg:         rgba(122, 89, 0, 0.05);
  --category-badge-bg:    rgba(122, 89, 0, 0.08);
  --card-hover-shadow:    rgba(45, 33, 23, 0.10);
  --scrollbar-thumb:      rgba(122, 89, 0, 0.18);
  --close-filter:         opacity(0.55);
  --nav-link-color:       rgba(45, 33, 23, 0.65);
  --nav-link-color-main:  #2D2117;
  --navbar-toggler-border: rgba(45, 33, 23, 0.18);
  --navbar-toggler-icon:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2845%2c33%2c23%2c0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

  --btn-success-bg:       rgba(16, 185, 129, 0.12);
  --btn-success-bg-hover: rgba(16, 185, 129, 0.22);
  --btn-success-color:    #0f7a5a;
  --btn-success-color-hover: #0a5c43;
  --btn-danger-bg:        rgba(220, 38, 38, 0.10);
  --btn-danger-bg-hover:  rgba(220, 38, 38, 0.20);
  --btn-danger-color:     #b91c1c;
  --btn-danger-color-hover: #991b1b;
  --btn-warning-bg:       rgba(180, 112, 0, 0.10);
  --btn-warning-bg-hover: rgba(180, 112, 0, 0.20);
  --btn-warning-color:    #92580a;
  --btn-warning-color-hover: #6e4007;
  --btn-info-bg:          rgba(8, 120, 160, 0.10);
  --btn-info-bg-hover:    rgba(8, 120, 160, 0.20);
  --btn-info-color:       #0369a1;
  --btn-info-color-hover: #0a527a;
}

/* ==========================================================================
   BEACHFRONT VIEWS (#74) — warm sand, deep ocean text, ocean blue accent
   Light. Text 9.6:1 · muted 6.0:1 · accent 4.7:1
   ========================================================================== */
[data-theme="beachfront-views"] {
  --bg-main:              #E8D5A8;
  --bg-glow:              radial-gradient(circle at top, #B8D8F0 0%, #E8D5A8 60%);
  --bg-card:              rgba(255, 250, 238, 0.95);
  --bg-card-hover:        rgba(255, 252, 242, 1.0);
  --navbar-bg:            rgba(232, 213, 168, 0.97);
  --card-header-bg:       rgba(26, 46, 61, 0.05);
  --input-bg:             rgba(255, 250, 238, 0.95);
  --input-bg-focus:       #fff9ee;
  --pulse-bar-bg:         linear-gradient(90deg, rgba(232,213,168,.97) 0%, rgba(184,216,240,.90) 100%);
  --text-main:            #1A2E3D;
  --text-muted:           #3A4E5A;
  --text-link:            #156285;
  --accent-primary:       #156285;
  --accent-hover:         #0E4A64;
  --border-subtle:        rgba(21, 98, 133, 0.14);
  --border-focus:         rgba(21, 98, 133, 0.38);
  --btn-primary-shadow:   rgba(21, 98, 133, 0.35);
  --reaction-btn-bg:      rgba(21, 98, 133, 0.07);
  --reaction-btn-hover:   rgba(21, 98, 133, 0.14);
  --wish-item-bg:         rgba(21, 98, 133, 0.05);
  --category-badge-bg:    rgba(21, 98, 133, 0.08);
  --card-hover-shadow:    rgba(26, 46, 61, 0.10);
  --scrollbar-thumb:      rgba(21, 98, 133, 0.18);
  --close-filter:         opacity(0.55);
  --nav-link-color:       rgba(26, 46, 61, 0.65);
  --nav-link-color-main:  #1A2E3D;
  --navbar-toggler-border: rgba(26, 46, 61, 0.18);
  --navbar-toggler-icon:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2826%2c46%2c61%2c0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --btn-success-bg:       rgba(16, 185, 129, 0.12); --btn-success-bg-hover: rgba(16, 185, 129, 0.22);
  --btn-success-color:    #0f7a5a; --btn-success-color-hover: #0a5c43;
  --btn-danger-bg:        rgba(220, 38, 38, 0.10); --btn-danger-bg-hover: rgba(220, 38, 38, 0.20);
  --btn-danger-color:     #b91c1c; --btn-danger-color-hover: #991b1b;
  --btn-warning-bg:       rgba(180, 112, 0, 0.10); --btn-warning-bg-hover: rgba(180, 112, 0, 0.20);
  --btn-warning-color:    #92580a; --btn-warning-color-hover: #6e4007;
  --btn-info-bg:          rgba(8, 120, 160, 0.10); --btn-info-bg-hover: rgba(8, 120, 160, 0.20);
  --btn-info-color:       #0369a1; --btn-info-color-hover: #0a527a;
}

/* ==========================================================================
   UNDER THE MOONLIGHT (#75) — dark charcoal, silver-lavender light, muted glow
   Dark. Text 15.8:1 · muted 5.3:1 · accent 8.1:1
   ========================================================================== */
[data-theme="under-the-moonlight"] {
  --bg-main:              #18181E;
  --bg-glow:              radial-gradient(circle at top, #2E2A40 0%, #18181E 70%);
  --bg-card:              rgba(26, 26, 36, 0.74);
  --bg-card-hover:        rgba(36, 34, 50, 0.92);
  --navbar-bg:            rgba(24, 24, 30, 0.94);
  --card-header-bg:       rgba(240, 238, 248, 0.04);
  --input-bg:             rgba(16, 16, 22, 0.55);
  --input-bg-focus:       rgba(22, 22, 32, 0.72);
  --pulse-bar-bg:         linear-gradient(90deg, rgba(24,24,30,.94) 0%, rgba(46,42,64,.88) 100%);
  --text-main:            #F0EEF8;
  --text-muted:           #8C88AA;
  --text-link:            #B0A8D8;
  --accent-primary:       #B0A8D8;
  --accent-hover:         #8880B8;
  --border-subtle:        rgba(176, 168, 216, 0.14);
  --border-focus:         rgba(176, 168, 216, 0.40);
  --btn-primary-shadow:   rgba(176, 168, 216, 0.35);
  --reaction-btn-bg:      rgba(176, 168, 216, 0.07);
  --reaction-btn-hover:   rgba(176, 168, 216, 0.14);
  --wish-item-bg:         rgba(176, 168, 216, 0.05);
  --category-badge-bg:    rgba(176, 168, 216, 0.10);
  --card-hover-shadow:    rgba(0, 0, 0, 0.55);
  --scrollbar-thumb:      rgba(176, 168, 216, 0.18);
  --close-filter:         invert(1) opacity(0.6);
  --nav-link-color:       rgba(240, 238, 248, 0.60);
  --nav-link-color-main:  #F0EEF8;
  --navbar-toggler-border: rgba(240, 238, 248, 0.14);
  --navbar-toggler-icon:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28240%2c238%2c248%2c0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --btn-success-bg:       rgba(16, 185, 129, 0.15); --btn-success-bg-hover: rgba(16, 185, 129, 0.28);
  --btn-success-color:    #34d399; --btn-success-color-hover: #6ee7b7;
  --btn-danger-bg:        rgba(239, 68, 68, 0.15); --btn-danger-bg-hover: rgba(239, 68, 68, 0.28);
  --btn-danger-color:     #f87171; --btn-danger-color-hover: #fca5a5;
  --btn-warning-bg:       rgba(245, 158, 11, 0.15); --btn-warning-bg-hover: rgba(245, 158, 11, 0.28);
  --btn-warning-color:    #fbbf24; --btn-warning-color-hover: #fcd34d;
  --btn-info-bg:          rgba(14, 165, 233, 0.15); --btn-info-bg-hover: rgba(14, 165, 233, 0.28);
  --btn-info-color:       #38bdf8; --btn-info-color-hover: #7dd3fc;
}

/* ==========================================================================
   MINTY FRESH (#77) — medium mint, deep forest text, dark green accent
   Light. Text 11.5:1 · muted 6.3:1 · accent 6.1:1
   ========================================================================== */
[data-theme="minty-fresh"] {
  --bg-main:              #C0E8D0;
  --bg-glow:              radial-gradient(circle at top, #7DD4A8 0%, #C0E8D0 60%);
  --bg-card:              rgba(230, 248, 238, 0.96);
  --bg-card-hover:        rgba(238, 252, 244, 1.0);
  --navbar-bg:            rgba(192, 232, 208, 0.97);
  --card-header-bg:       rgba(10, 30, 20, 0.05);
  --input-bg:             rgba(230, 248, 238, 0.95);
  --input-bg-focus:       #e6f8ee;
  --pulse-bar-bg:         linear-gradient(90deg, rgba(192,232,208,.97) 0%, rgba(125,212,168,.90) 100%);
  --text-main:            #0A1E14;
  --text-muted:           #2A5540;
  --text-link:            #0C5C37;
  --accent-primary:       #0C5C37;
  --accent-hover:         #084529;
  --border-subtle:        rgba(12, 92, 55, 0.18);
  --border-focus:         rgba(12, 92, 55, 0.42);
  --btn-primary-shadow:   rgba(12, 92, 55, 0.35);
  --reaction-btn-bg:      rgba(12, 92, 55, 0.08);
  --reaction-btn-hover:   rgba(12, 92, 55, 0.16);
  --wish-item-bg:         rgba(12, 92, 55, 0.06);
  --category-badge-bg:    rgba(12, 92, 55, 0.10);
  --card-hover-shadow:    rgba(10, 30, 20, 0.12);
  --scrollbar-thumb:      rgba(12, 92, 55, 0.22);
  --close-filter:         opacity(0.55);
  --nav-link-color:       rgba(10, 30, 20, 0.65);
  --nav-link-color-main:  #0A1E14;
  --navbar-toggler-border: rgba(10, 30, 20, 0.22);
  --navbar-toggler-icon:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2810%2c30%2c20%2c0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --btn-success-bg:       rgba(16, 185, 129, 0.12); --btn-success-bg-hover: rgba(16, 185, 129, 0.22);
  --btn-success-color:    #0f7a5a; --btn-success-color-hover: #0a5c43;
  --btn-danger-bg:        rgba(220, 38, 38, 0.10); --btn-danger-bg-hover: rgba(220, 38, 38, 0.20);
  --btn-danger-color:     #b91c1c; --btn-danger-color-hover: #991b1b;
  --btn-warning-bg:       rgba(180, 112, 0, 0.10); --btn-warning-bg-hover: rgba(180, 112, 0, 0.20);
  --btn-warning-color:    #92580a; --btn-warning-color-hover: #6e4007;
  --btn-info-bg:          rgba(8, 120, 160, 0.10); --btn-info-bg-hover: rgba(8, 120, 160, 0.20);
  --btn-info-color:       #0369a1; --btn-info-color-hover: #0a527a;
}

/* ==========================================================================
   FROZEN LAKE (#85) — icy medium blue, deep navy text, darker ice accent
   Light. Text 12.3:1 · muted 4.8:1 · accent 6.0:1
   ========================================================================== */
[data-theme="frozen-lake"] {
  --bg-main:              #B8D8F0;
  --bg-glow:              radial-gradient(circle at top, #7AB8E8 0%, #B8D8F0 60%);
  --bg-card:              rgba(224, 240, 252, 0.96);
  --bg-card-hover:        rgba(234, 246, 255, 1.0);
  --navbar-bg:            rgba(184, 216, 240, 0.97);
  --card-header-bg:       rgba(13, 30, 48, 0.05);
  --input-bg:             rgba(224, 240, 252, 0.95);
  --input-bg-focus:       #e0f0fc;
  --pulse-bar-bg:         linear-gradient(90deg, rgba(184,216,240,.97) 0%, rgba(122,184,232,.90) 100%);
  --text-main:            #0D1E30;
  --text-muted:           #3A5A78;
  --text-link:            #0E4A84;
  --accent-primary:       #0E4A84;
  --accent-hover:         #0A3664;
  --border-subtle:        rgba(14, 74, 132, 0.18);
  --border-focus:         rgba(14, 74, 132, 0.42);
  --btn-primary-shadow:   rgba(14, 74, 132, 0.35);
  --reaction-btn-bg:      rgba(14, 74, 132, 0.08);
  --reaction-btn-hover:   rgba(14, 74, 132, 0.16);
  --wish-item-bg:         rgba(14, 74, 132, 0.06);
  --category-badge-bg:    rgba(14, 74, 132, 0.10);
  --card-hover-shadow:    rgba(13, 30, 48, 0.12);
  --scrollbar-thumb:      rgba(14, 74, 132, 0.22);
  --close-filter:         opacity(0.55);
  --nav-link-color:       rgba(13, 30, 48, 0.65);
  --nav-link-color-main:  #0D1E30;
  --navbar-toggler-border: rgba(13, 30, 48, 0.22);
  --navbar-toggler-icon:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2813%2c30%2c48%2c0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --btn-success-bg:       rgba(16, 185, 129, 0.12); --btn-success-bg-hover: rgba(16, 185, 129, 0.22);
  --btn-success-color:    #0f7a5a; --btn-success-color-hover: #0a5c43;
  --btn-danger-bg:        rgba(220, 38, 38, 0.10); --btn-danger-bg-hover: rgba(220, 38, 38, 0.20);
  --btn-danger-color:     #b91c1c; --btn-danger-color-hover: #991b1b;
  --btn-warning-bg:       rgba(180, 112, 0, 0.10); --btn-warning-bg-hover: rgba(180, 112, 0, 0.20);
  --btn-warning-color:    #92580a; --btn-warning-color-hover: #6e4007;
  --btn-info-bg:          rgba(8, 120, 160, 0.10); --btn-info-bg-hover: rgba(8, 120, 160, 0.20);
  --btn-info-color:       #0369a1; --btn-info-color-hover: #0a527a;
}

/* ==========================================================================
   AUTUMN ORCHARD (#95) — warm amber, deep bark, burnt orange accent
   Light. Text 11.4:1 · muted 5.5:1 · accent 5.4:1
   ========================================================================== */
[data-theme="autumn-orchard"] {
  --bg-main:              #EED0A0;
  --bg-glow:              radial-gradient(circle at top, #D4A860 0%, #EED0A0 60%);
  --bg-card:              rgba(255, 242, 218, 0.96);
  --bg-card-hover:        rgba(255, 248, 230, 1.0);
  --navbar-bg:            rgba(238, 208, 160, 0.97);
  --card-header-bg:       rgba(42, 26, 8, 0.05);
  --input-bg:             rgba(255, 242, 218, 0.95);
  --input-bg-focus:       #fff2da;
  --pulse-bar-bg:         linear-gradient(90deg, rgba(238,208,160,.97) 0%, rgba(212,168,96,.90) 100%);
  --text-main:            #2A1A08;
  --text-muted:           #6B4820;
  --text-link:            #8B3500;
  --accent-primary:       #8B3500;
  --accent-hover:         #6A2800;
  --border-subtle:        rgba(139, 53, 0, 0.14);
  --border-focus:         rgba(139, 53, 0, 0.38);
  --btn-primary-shadow:   rgba(139, 53, 0, 0.35);
  --reaction-btn-bg:      rgba(139, 53, 0, 0.07);
  --reaction-btn-hover:   rgba(139, 53, 0, 0.14);
  --wish-item-bg:         rgba(139, 53, 0, 0.05);
  --category-badge-bg:    rgba(139, 53, 0, 0.08);
  --card-hover-shadow:    rgba(42, 26, 8, 0.10);
  --scrollbar-thumb:      rgba(139, 53, 0, 0.18);
  --close-filter:         opacity(0.55);
  --nav-link-color:       rgba(42, 26, 8, 0.65);
  --nav-link-color-main:  #2A1A08;
  --navbar-toggler-border: rgba(42, 26, 8, 0.18);
  --navbar-toggler-icon:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2842%2c26%2c8%2c0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --btn-success-bg:       rgba(16, 185, 129, 0.12); --btn-success-bg-hover: rgba(16, 185, 129, 0.22);
  --btn-success-color:    #0f7a5a; --btn-success-color-hover: #0a5c43;
  --btn-danger-bg:        rgba(220, 38, 38, 0.10); --btn-danger-bg-hover: rgba(220, 38, 38, 0.20);
  --btn-danger-color:     #b91c1c; --btn-danger-color-hover: #991b1b;
  --btn-warning-bg:       rgba(180, 112, 0, 0.10); --btn-warning-bg-hover: rgba(180, 112, 0, 0.20);
  --btn-warning-color:    #92580a; --btn-warning-color-hover: #6e4007;
  --btn-info-bg:          rgba(8, 120, 160, 0.10); --btn-info-bg-hover: rgba(8, 120, 160, 0.20);
  --btn-info-color:       #0369a1; --btn-info-color-hover: #0a527a;
}

/* ==========================================================================
   HARVEST MOON (#98) — deep amber night, warm moonlight, golden accent
   Dark. Text 16.2:1 · muted 7.0:1 · accent 9.9:1
   ========================================================================== */
[data-theme="harvest-moon"] {
  --bg-main:              #120A00;
  --bg-glow:              radial-gradient(circle at top, #2E1800 0%, #120A00 70%);
  --bg-card:              rgba(30, 16, 2, 0.78);
  --bg-card-hover:        rgba(42, 24, 4, 0.92);
  --navbar-bg:            rgba(18, 10, 0, 0.93);
  --card-header-bg:       rgba(255, 229, 180, 0.05);
  --input-bg:             rgba(20, 10, 0, 0.60);
  --input-bg-focus:       rgba(28, 14, 0, 0.75);
  --pulse-bar-bg:         linear-gradient(90deg, rgba(18,10,0,.93) 0%, rgba(46,24,0,.88) 100%);
  --text-main:            #FFE5B4;
  --text-muted:           #C4905A;
  --text-link:            #F4A832;
  --accent-primary:       #F4A832;
  --accent-hover:         #D08820;
  --border-subtle:        rgba(244, 168, 50, 0.16);
  --border-focus:         rgba(244, 168, 50, 0.42);
  --btn-primary-shadow:   rgba(244, 168, 50, 0.40);
  --reaction-btn-bg:      rgba(244, 168, 50, 0.08);
  --reaction-btn-hover:   rgba(244, 168, 50, 0.16);
  --wish-item-bg:         rgba(244, 168, 50, 0.05);
  --category-badge-bg:    rgba(244, 168, 50, 0.10);
  --card-hover-shadow:    rgba(0, 0, 0, 0.55);
  --scrollbar-thumb:      rgba(244, 168, 50, 0.20);
  --close-filter:         invert(1) opacity(0.6);
  --nav-link-color:       rgba(255, 229, 180, 0.60);
  --nav-link-color-main:  #FFE5B4;
  --navbar-toggler-border: rgba(255, 229, 180, 0.16);
  --navbar-toggler-icon:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2c229%2c180%2c0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --btn-success-bg:       rgba(16, 185, 129, 0.15); --btn-success-bg-hover: rgba(16, 185, 129, 0.28);
  --btn-success-color:    #34d399; --btn-success-color-hover: #6ee7b7;
  --btn-danger-bg:        rgba(239, 68, 68, 0.15); --btn-danger-bg-hover: rgba(239, 68, 68, 0.28);
  --btn-danger-color:     #f87171; --btn-danger-color-hover: #fca5a5;
  --btn-warning-bg:       rgba(245, 158, 11, 0.15); --btn-warning-bg-hover: rgba(245, 158, 11, 0.28);
  --btn-warning-color:    #fbbf24; --btn-warning-color-hover: #fcd34d;
  --btn-info-bg:          rgba(14, 165, 233, 0.15); --btn-info-bg-hover: rgba(14, 165, 233, 0.28);
  --btn-info-color:       #38bdf8; --btn-info-color-hover: #7dd3fc;
}

/* ==========================================================================
   CHILI SPICE (#6) — deep chili night, warm cream, hot red accent
   Dark. Text 14.8:1 · muted 6.5:1 · accent 6.6:1
   ========================================================================== */
[data-theme="chili-spice"] {
  --bg-main:              #150000;
  --bg-glow:              radial-gradient(circle at top, #330A00 0%, #150000 70%);
  --bg-card:              rgba(30, 5, 2, 0.78);
  --bg-card-hover:        rgba(44, 8, 4, 0.92);
  --navbar-bg:            rgba(21, 0, 0, 0.93);
  --card-header-bg:       rgba(255, 214, 204, 0.05);
  --input-bg:             rgba(24, 4, 2, 0.60);
  --input-bg-focus:       rgba(32, 6, 4, 0.75);
  --pulse-bar-bg:         linear-gradient(90deg, rgba(21,0,0,.93) 0%, rgba(51,10,0,.88) 100%);
  --text-main:            #FFD6CC;
  --text-muted:           #CC8070;
  --text-link:            #FF6040;
  --accent-primary:       #FF6040;
  --accent-hover:         #E04020;
  --border-subtle:        rgba(255, 96, 64, 0.16);
  --border-focus:         rgba(255, 96, 64, 0.42);
  --btn-primary-shadow:   rgba(255, 96, 64, 0.40);
  --reaction-btn-bg:      rgba(255, 96, 64, 0.08);
  --reaction-btn-hover:   rgba(255, 96, 64, 0.16);
  --wish-item-bg:         rgba(255, 96, 64, 0.05);
  --category-badge-bg:    rgba(255, 96, 64, 0.10);
  --card-hover-shadow:    rgba(0, 0, 0, 0.55);
  --scrollbar-thumb:      rgba(255, 96, 64, 0.20);
  --close-filter:         invert(1) opacity(0.6);
  --nav-link-color:       rgba(255, 214, 204, 0.60);
  --nav-link-color-main:  #FFD6CC;
  --navbar-toggler-border: rgba(255, 214, 204, 0.16);
  --navbar-toggler-icon:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2c214%2c204%2c0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --btn-success-bg:       rgba(16, 185, 129, 0.15); --btn-success-bg-hover: rgba(16, 185, 129, 0.28);
  --btn-success-color:    #34d399; --btn-success-color-hover: #6ee7b7;
  --btn-danger-bg:        rgba(239, 68, 68, 0.15); --btn-danger-bg-hover: rgba(239, 68, 68, 0.28);
  --btn-danger-color:     #f87171; --btn-danger-color-hover: #fca5a5;
  --btn-warning-bg:       rgba(245, 158, 11, 0.15); --btn-warning-bg-hover: rgba(245, 158, 11, 0.28);
  --btn-warning-color:    #fbbf24; --btn-warning-color-hover: #fcd34d;
  --btn-info-bg:          rgba(14, 165, 233, 0.15); --btn-info-bg-hover: rgba(14, 165, 233, 0.28);
  --btn-info-color:       #38bdf8; --btn-info-color-hover: #7dd3fc;
}

/* ==========================================================================
   WISTERIA BLOOM (#10) — medium lavender, deep plum, wisteria purple accent
   Light. Text 11.7:1 · muted 5.5:1 · accent 6.1:1
   ========================================================================== */
[data-theme="wisteria-bloom"] {
  --bg-main:              #DCC8F0;
  --bg-glow:              radial-gradient(circle at top, #B890E0 0%, #DCC8F0 60%);
  --bg-card:              rgba(246, 240, 255, 0.96);
  --bg-card-hover:        rgba(250, 246, 255, 1.0);
  --navbar-bg:            rgba(220, 200, 240, 0.97);
  --card-header-bg:       rgba(30, 12, 53, 0.05);
  --input-bg:             rgba(246, 240, 255, 0.95);
  --input-bg-focus:       #f6f0ff;
  --pulse-bar-bg:         linear-gradient(90deg, rgba(220,200,240,.97) 0%, rgba(184,144,224,.90) 100%);
  --text-main:            #1E0C35;
  --text-muted:           #5A4070;
  --text-link:            #6A1B9A;
  --accent-primary:       #6A1B9A;
  --accent-hover:         #4E1475;
  --border-subtle:        rgba(106, 27, 154, 0.14);
  --border-focus:         rgba(106, 27, 154, 0.38);
  --btn-primary-shadow:   rgba(106, 27, 154, 0.35);
  --reaction-btn-bg:      rgba(106, 27, 154, 0.07);
  --reaction-btn-hover:   rgba(106, 27, 154, 0.14);
  --wish-item-bg:         rgba(106, 27, 154, 0.05);
  --category-badge-bg:    rgba(106, 27, 154, 0.08);
  --card-hover-shadow:    rgba(30, 12, 53, 0.10);
  --scrollbar-thumb:      rgba(106, 27, 154, 0.18);
  --close-filter:         opacity(0.55);
  --nav-link-color:       rgba(30, 12, 53, 0.65);
  --nav-link-color-main:  #1E0C35;
  --navbar-toggler-border: rgba(30, 12, 53, 0.18);
  --navbar-toggler-icon:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2830%2c12%2c53%2c0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --btn-success-bg:       rgba(16, 185, 129, 0.12); --btn-success-bg-hover: rgba(16, 185, 129, 0.22);
  --btn-success-color:    #0f7a5a; --btn-success-color-hover: #0a5c43;
  --btn-danger-bg:        rgba(220, 38, 38, 0.10); --btn-danger-bg-hover: rgba(220, 38, 38, 0.20);
  --btn-danger-color:     #b91c1c; --btn-danger-color-hover: #991b1b;
  --btn-warning-bg:       rgba(180, 112, 0, 0.10); --btn-warning-bg-hover: rgba(180, 112, 0, 0.20);
  --btn-warning-color:    #92580a; --btn-warning-color-hover: #6e4007;
  --btn-info-bg:          rgba(8, 120, 160, 0.10); --btn-info-bg-hover: rgba(8, 120, 160, 0.20);
  --btn-info-color:       #0369a1; --btn-info-color-hover: #0a527a;
}

/* ==========================================================================
   ZESTY LEMON (#28) — bright lemon yellow, deep peel, gold-green accent
   Light. Text 16.0:1 · muted 6.9:1 · accent 5.2:1
   ========================================================================== */
[data-theme="zesty-lemon"] {
  --bg-main:              #FFF09A;
  --bg-glow:              radial-gradient(circle at top, #FFE030 0%, #FFF09A 60%);
  --bg-card:              rgba(255, 252, 210, 0.96);
  --bg-card-hover:        rgba(255, 254, 220, 1.0);
  --navbar-bg:            rgba(255, 240, 154, 0.97);
  --card-header-bg:       rgba(26, 21, 0, 0.05);
  --input-bg:             rgba(255, 252, 210, 0.95);
  --input-bg-focus:       #fffcd2;
  --pulse-bar-bg:         linear-gradient(90deg, rgba(255,240,154,.97) 0%, rgba(255,224,48,.90) 100%);
  --text-main:            #1A1500;
  --text-muted:           #5C5000;
  --text-link:            #7A6200;
  --accent-primary:       #7A6200;
  --accent-hover:         #5C4900;
  --border-subtle:        rgba(122, 98, 0, 0.16);
  --border-focus:         rgba(122, 98, 0, 0.40);
  --btn-primary-shadow:   rgba(122, 98, 0, 0.35);
  --reaction-btn-bg:      rgba(122, 98, 0, 0.07);
  --reaction-btn-hover:   rgba(122, 98, 0, 0.14);
  --wish-item-bg:         rgba(122, 98, 0, 0.05);
  --category-badge-bg:    rgba(122, 98, 0, 0.08);
  --card-hover-shadow:    rgba(26, 21, 0, 0.10);
  --scrollbar-thumb:      rgba(122, 98, 0, 0.18);
  --close-filter:         opacity(0.55);
  --nav-link-color:       rgba(26, 21, 0, 0.65);
  --nav-link-color-main:  #1A1500;
  --navbar-toggler-border: rgba(26, 21, 0, 0.18);
  --navbar-toggler-icon:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2826%2c21%2c0%2c0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --btn-success-bg:       rgba(16, 185, 129, 0.12); --btn-success-bg-hover: rgba(16, 185, 129, 0.22);
  --btn-success-color:    #0f7a5a; --btn-success-color-hover: #0a5c43;
  --btn-danger-bg:        rgba(220, 38, 38, 0.10); --btn-danger-bg-hover: rgba(220, 38, 38, 0.20);
  --btn-danger-color:     #b91c1c; --btn-danger-color-hover: #991b1b;
  --btn-warning-bg:       rgba(180, 112, 0, 0.10); --btn-warning-bg-hover: rgba(180, 112, 0, 0.20);
  --btn-warning-color:    #92580a; --btn-warning-color-hover: #6e4007;
  --btn-info-bg:          rgba(8, 120, 160, 0.10); --btn-info-bg-hover: rgba(8, 120, 160, 0.20);
  --btn-info-color:       #0369a1; --btn-info-color-hover: #0a527a;
}

/* ==========================================================================
   MANGO POPSICLE (#32) — warm mango orange, deep brown, deep orange accent
   Light. Text 13.7:1 · muted 5.8:1 · accent 4.8:1
   ========================================================================== */
[data-theme="mango-popsicle"] {
  --bg-main:              #FFD498;
  --bg-glow:              radial-gradient(circle at top, #FFB030 0%, #FFD498 60%);
  --bg-card:              rgba(255, 242, 210, 0.96);
  --bg-card-hover:        rgba(255, 248, 224, 1.0);
  --navbar-bg:            rgba(255, 212, 152, 0.97);
  --card-header-bg:       rgba(31, 10, 0, 0.05);
  --input-bg:             rgba(255, 242, 210, 0.95);
  --input-bg-focus:       #fff2d2;
  --pulse-bar-bg:         linear-gradient(90deg, rgba(255,212,152,.97) 0%, rgba(255,176,48,.90) 100%);
  --text-main:            #1F0A00;
  --text-muted:           #7A4020;
  --text-link:            #A03C00;
  --accent-primary:       #A03C00;
  --accent-hover:         #7A2C00;
  --border-subtle:        rgba(160, 60, 0, 0.14);
  --border-focus:         rgba(160, 60, 0, 0.38);
  --btn-primary-shadow:   rgba(160, 60, 0, 0.35);
  --reaction-btn-bg:      rgba(160, 60, 0, 0.07);
  --reaction-btn-hover:   rgba(160, 60, 0, 0.14);
  --wish-item-bg:         rgba(160, 60, 0, 0.05);
  --category-badge-bg:    rgba(160, 60, 0, 0.08);
  --card-hover-shadow:    rgba(31, 10, 0, 0.10);
  --scrollbar-thumb:      rgba(160, 60, 0, 0.18);
  --close-filter:         opacity(0.55);
  --nav-link-color:       rgba(31, 10, 0, 0.65);
  --nav-link-color-main:  #1F0A00;
  --navbar-toggler-border: rgba(31, 10, 0, 0.18);
  --navbar-toggler-icon:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2831%2c10%2c0%2c0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --btn-success-bg:       rgba(16, 185, 129, 0.12); --btn-success-bg-hover: rgba(16, 185, 129, 0.22);
  --btn-success-color:    #0f7a5a; --btn-success-color-hover: #0a5c43;
  --btn-danger-bg:        rgba(220, 38, 38, 0.10); --btn-danger-bg-hover: rgba(220, 38, 38, 0.20);
  --btn-danger-color:     #b91c1c; --btn-danger-color-hover: #991b1b;
  --btn-warning-bg:       rgba(180, 112, 0, 0.10); --btn-warning-bg-hover: rgba(180, 112, 0, 0.20);
  --btn-warning-color:    #92580a; --btn-warning-color-hover: #6e4007;
  --btn-info-bg:          rgba(8, 120, 160, 0.10); --btn-info-bg-hover: rgba(8, 120, 160, 0.20);
  --btn-info-color:       #0369a1; --btn-info-color-hover: #0a527a;
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  background-color: var(--bg-main);
  background-image: var(--bg-glow);
  background-attachment: fixed;
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

p { color: var(--text-muted); line-height: 1.6; }

a { color: var(--text-link); }
a:hover { color: var(--accent-primary); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb); filter: brightness(1.3); }

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar {
  background: var(--navbar-bg) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.75rem 0;
}

.navbar-brand {
  color: var(--nav-link-color-main) !important;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.navbar .nav-link,
.navbar .nav-link.text-white-50,
.navbar .text-white-50 {
  color: var(--nav-link-color) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--nav-link-color-main) !important;
}

.navbar .text-white {
  color: var(--nav-link-color-main) !important;
}

.navbar-toggler {
  border-color: var(--navbar-toggler-border) !important;
}

.navbar-toggler-icon {
  background-image: var(--navbar-toggler-icon) !important;
}

/* ==========================================================================
   Cards → glassmorphism
   ========================================================================== */
.card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none !important;
  transition: var(--transition-smooth);
  color: var(--text-main);
}

.card:hover {
  border-color: var(--accent-primary) !important;
  background: var(--bg-card-hover) !important;
  box-shadow: 0 8px 24px var(--card-hover-shadow) !important;
}

.card-body  { padding: 1.25rem; }
.card-header {
  background: var(--card-header-bg) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  color: var(--text-main);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: var(--transition-smooth);
  font-size: 0.875rem;
  border: 1px solid transparent;
}

.btn-primary,
.btn-primary:focus {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}
.btn-primary:hover, .btn-primary:active {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 0 18px var(--btn-primary-shadow);
  color: #fff;
}

.btn-success {
  background-color: var(--btn-success-bg);
  border-color: var(--btn-success-bg);
  color: var(--btn-success-color);
}
.btn-success:hover, .btn-success:active {
  background-color: var(--btn-success-bg-hover);
  border-color: var(--btn-success-bg-hover);
  color: var(--btn-success-color-hover);
}

.btn-danger {
  background-color: var(--btn-danger-bg);
  border-color: var(--btn-danger-bg);
  color: var(--btn-danger-color);
}
.btn-danger:hover, .btn-danger:active {
  background-color: var(--btn-danger-bg-hover);
  border-color: var(--btn-danger-bg-hover);
  color: var(--btn-danger-color-hover);
}

.btn-secondary {
  background-color: var(--reaction-btn-bg);
  border-color: var(--border-subtle);
  color: var(--text-muted);
}
.btn-secondary:hover, .btn-secondary:active {
  background-color: var(--reaction-btn-hover);
  border-color: var(--border-subtle);
  color: var(--text-main);
}

.btn-warning {
  background-color: var(--btn-warning-bg);
  border-color: var(--btn-warning-bg);
  color: var(--btn-warning-color);
}
.btn-warning:hover, .btn-warning:active {
  background-color: var(--btn-warning-bg-hover);
  border-color: var(--btn-warning-bg-hover);
  color: var(--btn-warning-color-hover);
}

.btn-info {
  background-color: var(--btn-info-bg);
  border-color: var(--btn-info-bg);
  color: var(--btn-info-color);
}
.btn-info:hover {
  background-color: var(--btn-info-bg-hover);
  border-color: var(--btn-info-bg-hover);
  color: var(--btn-info-color-hover);
}

.btn-outline-primary {
  background: transparent;
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}
.btn-outline-primary:hover {
  background-color: var(--reaction-btn-bg);
  color: var(--accent-hover);
}

.btn-outline-secondary {
  background: transparent;
  border-color: var(--border-subtle);
  color: var(--text-muted);
}
.btn-outline-secondary:hover {
  background-color: var(--reaction-btn-bg);
  border-color: var(--border-subtle);
  color: var(--text-main);
}

.btn-outline-danger {
  background: transparent;
  border-color: var(--btn-danger-color);
  color: var(--btn-danger-color);
}
.btn-outline-danger:hover {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-color-hover);
}

.btn-outline-success {
  background: transparent;
  border-color: var(--btn-success-color);
  color: var(--btn-success-color);
}
.btn-outline-success:hover {
  background-color: var(--btn-success-bg);
  color: var(--btn-success-color-hover);
}

.btn-outline-info {
  background: transparent;
  border-color: var(--btn-info-color);
  color: var(--btn-info-color);
}
.btn-outline-info:hover {
  background-color: var(--btn-info-bg);
  color: var(--btn-info-color-hover);
}

.btn-outline-light {
  background: transparent;
  border-color: var(--border-subtle);
  color: var(--text-muted);
}
.btn-outline-light:hover {
  background-color: var(--reaction-btn-bg);
  color: var(--text-main);
}

.btn-light {
  background-color: var(--reaction-btn-bg);
  border-color: var(--border-subtle);
  color: var(--text-main);
}
.btn-light:hover {
  background-color: var(--reaction-btn-hover);
  color: var(--text-main);
}

/* ==========================================================================
   Form Controls
   ========================================================================== */
.form-control,
.form-select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
input[type="file"] {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-main) !important;
  font-family: var(--font-sans);
  transition: var(--transition-smooth);
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="datetime-local"]:focus {
  outline: none;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px var(--border-focus) !important;
  background-color: var(--input-bg-focus) !important;
}

.form-control::placeholder,
textarea::placeholder { color: var(--text-muted); opacity: 1; }

.form-label {
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.875rem;
}

.form-text { color: var(--text-muted); font-size: 0.78rem; }

.form-check-input {
  background-color: var(--input-bg);
  border-color: var(--border-subtle);
}
.form-check-input:checked {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}
.form-check-label { color: var(--text-muted); }

/* ==========================================================================
   Badges
   ========================================================================== */
.badge {
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: var(--radius-lg);
}

.badge.bg-secondary {
  background: var(--reaction-btn-bg) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-subtle);
}

.badge.bg-light {
  background: var(--reaction-btn-bg) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-subtle);
}

.badge.bg-primary {
  background: var(--reaction-btn-bg) !important;
  color: var(--accent-primary) !important;
  border: 1px solid var(--border-subtle);
}

.badge.bg-success {
  background: var(--btn-success-bg) !important;
  color: var(--btn-success-color) !important;
  border: 1px solid var(--btn-success-bg-hover);
}

.badge.bg-danger {
  background: var(--btn-danger-bg) !important;
  color: var(--btn-danger-color) !important;
  border: 1px solid var(--btn-danger-bg-hover);
}

.badge.bg-warning {
  background: var(--btn-warning-bg) !important;
  color: var(--btn-warning-color) !important;
  border: 1px solid var(--btn-warning-bg-hover);
}

/* ==========================================================================
   Alerts
   ========================================================================== */
.alert {
  border-radius: var(--radius-md);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle);
}

.alert-success {
  background: var(--btn-success-bg) !important;
  border-color: var(--btn-success-bg-hover) !important;
  color: var(--btn-success-color) !important;
}

.alert-danger {
  background: var(--btn-danger-bg) !important;
  border-color: var(--btn-danger-bg-hover) !important;
  color: var(--btn-danger-color) !important;
}

.alert-warning {
  background: var(--btn-warning-bg) !important;
  border-color: var(--btn-warning-bg-hover) !important;
  color: var(--btn-warning-color) !important;
}

.alert-info {
  background: var(--btn-info-bg) !important;
  border-color: var(--btn-info-bg-hover) !important;
  color: var(--btn-info-color) !important;
}

.btn-close { filter: var(--close-filter); }
.btn-close:hover { filter: var(--close-filter); opacity: 1; }

/* ==========================================================================
   Utility overrides
   ========================================================================== */
.text-muted  { color: var(--text-muted) !important; }
.text-dark   { color: var(--text-muted) !important; }
.small, small { color: var(--text-muted); }

.table { color: var(--text-main); }
.table td, .table th { border-color: var(--border-subtle); }

hr { border-color: var(--border-subtle); opacity: 1; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
  .card-body { padding: 1rem; }
}