/* ═══════════════════════════════════════════════════════════════
   DRAWEST THEME SYSTEM — Centralized Theme Definitions
   
   Themes: light | dark | red | colorful | aero
   
   YENI TEMA EKLEMEK ICIN:
   1. Asagidakiornek bolumunu kopyala
   2. [data-theme="YENI_TEMA"] { ... } olarak yeniden adlandir
   3. Gerekli degiskenleri doldur
   4. theme-switcher.js'deki THEMES dizisine ekle
   5. header.php'deki theme-icon span'ina ekle
   
   Degiskenler (zorunlu):
   --bg, --bg-elevated, --text, --muted, --border, --hover,
   --drawest-accent, --badge-bg, --card-bg, --hover-shadow
   
   Opsiyonel degiskenler:
   --manga-bg, --manga-card-bg, --manga-hover-bg, --manga-text,
   --manga-text-muted, --manga-border, --dw-glass, --dw-glass-border,
   --dw-shadow, --dw-shadow-hover
   ═══════════════════════════════════════════════════════════════ */

/* ─── THEME TRANSITION ─── */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 0.4s ease, color 0.4s ease,
    border-color 0.4s ease, box-shadow 0.4s ease,
    background 0.4s ease, fill 0.4s ease, filter 0.4s ease !important;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME (Aydınlık Mod) — Default
   ═══════════════════════════════════════════════════════════════ */
:root {
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --text: #000000;
  --muted: #6b7280;
  --border: #e5e7eb;
  --hover: rgba(0, 0, 0, .05);
  --drawest-accent: #0d6efd;
  --badge-bg: #e9ecef;
  --card-bg: linear-gradient(145deg, #ffffff 0%, #e9ecef 100%);
  --hover-shadow: 0 4px 15px rgba(0, 0, 0, .1);

  /* Manga variables */
  --manga-bg: #f7f8fa;
  --manga-card-bg: #ffffff;
  --manga-hover-bg: #f0f2f5;
  --manga-text: #111827;
  --manga-text-muted: #6b7280;
  --manga-border: #e5e7eb;

  /* Glass variables */
  --dw-glass: rgba(255, 255, 255, 0.85);
  --dw-glass-border: rgba(255, 255, 255, 0.5);
  --dw-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  --dw-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ═══════════════════════════════════════════════════════════════
   DARK THEME (Karanlık Mod)
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg: #0b0f19;
  --bg-elevated: #111827;
  --text: #f3f4f6;
  --muted: #9ca3af;
  --border: #1f2937;
  --hover: rgba(255, 255, 255, 0.05);
  --drawest-accent: #3b82f6;
  --badge-bg: #374151;
  --card-bg: linear-gradient(145deg, #1f2937 0%, #111827 100%);
  --hover-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);

  --manga-bg: #0b0f19;
  --manga-card-bg: #111827;
  --manga-hover-bg: #1a2332;
  --manga-text: #f3f4f6;
  --manga-text-muted: #9ca3af;
  --manga-border: #1f2937;

  --dw-glass: rgba(17, 24, 39, 0.85);
  --dw-glass-border: rgba(31, 41, 55, 0.5);
  --dw-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  --dw-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   RED THEME (Kırmızı Mod) — Turkish Identity
   ═══════════════════════════════════════════════════════════════ */
[data-theme="red"] {
  --bg: #fefafa;
  --bg-elevated: #ffffff;
  --text: #1f1215;
  --muted: #6b4f4f;
  --border: #f0d0cc;
  --hover: rgba(200, 30, 30, 0.04);
  --drawest-accent: #d42020;
  --badge-bg: #fde0dc;
  --card-bg: #ffffff;
  --hover-shadow: 0 4px 20px rgba(180, 30, 30, 0.08);

  --manga-bg: #f9f2f1;
  --manga-card-bg: #ffffff;
  --manga-hover-bg: #fff8f7;
  --manga-text: #1f1215;
  --manga-text-muted: #6b4f4f;
  --manga-border: #f0d0cc;

  --dw-glass: #ffffff;
  --dw-glass-border: #f0d0cc;
  --dw-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  --dw-shadow-hover: 0 4px 20px rgba(180, 30, 30, 0.08);
}

/* ═══════════════════════════════════════════════════════════════
   COLORFUL THEME (Renkli Mod) — Frutiger Aero Blue
   ═══════════════════════════════════════════════════════════════ */
[data-theme="colorful"] {
  --bg: #f2faff;
  --bg-elevated: #ffffff;
  --text: #004a7c;
  --muted: #5a8fb2;
  --border: #bde4ff;
  --hover: rgba(0, 153, 255, 0.1);
  --drawest-accent: #009dff;
  --badge-bg: #e1f5fe;
  --card-bg: linear-gradient(180deg, #ffffff 0%, #ebf8ff 100%);
  --hover-shadow: 0 10px 30px rgba(0, 157, 255, 0.2);

  --manga-bg: #f0f9ff;
  --manga-card-bg: #ffffff;
  --manga-hover-bg: #e8f6ff;
  --manga-text: #004a7c;
  --manga-text-muted: #5a8fb2;
  --manga-border: #bde4ff;

  --dw-glass: rgba(255, 255, 255, 0.9);
  --dw-glass-border: rgba(189, 228, 255, 0.6);
  --dw-shadow: 0 2px 8px rgba(0, 157, 255, 0.08);
  --dw-shadow-hover: 0 8px 30px rgba(0, 157, 255, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   AERO THEME — Windows XP/7, Apple Aqua, Glassmorphism
   ═══════════════════════════════════════════════════════════════ */
[data-theme="aero"] {
  --bg: #e8f0fe;
  --bg-elevated: rgba(255, 255, 255, 0.88);
  --text: #1a1a2e;
  --muted: #5c6370;
  --border: rgba(200, 210, 230, 0.6);
  --hover: rgba(100, 140, 220, 0.1);
  --drawest-accent: #4a90d9;
  --badge-bg: rgba(220, 235, 255, 0.7);
  --card-bg: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(232,240,254,0.85) 100%);
  --hover-shadow: 0 8px 32px rgba(74, 144, 217, 0.18);

  --manga-bg: #eaf2fd;
  --manga-card-bg: rgba(255, 255, 255, 0.9);
  --manga-hover-bg: rgba(220, 235, 255, 0.6);
  --manga-text: #1a1a2e;
  --manga-text-muted: #5c6370;
  --manga-border: rgba(180, 200, 230, 0.5);

  --dw-glass: rgba(255, 255, 255, 0.72);
  --dw-glass-border: rgba(255, 255, 255, 0.5);
  --dw-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  --dw-shadow-hover: 0 8px 32px rgba(74, 144, 217, 0.18);
}

/* AERO: Body — Gradient sky background */
[data-theme="aero"] body {
  background: linear-gradient(180deg, #dce8fb 0%, #e8f0fe 30%, #f0f6ff 60%, #e4ecfa 100%);
  background-attachment: fixed;
}

/* AERO: Navbar — Glassmorphism with blue tint */
[data-theme="aero"] .space-navbar {
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(220,235,255,0.85) 100%) !important;
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 2px solid rgba(74, 144, 217, 0.25) !important;
  box-shadow: 0 2px 20px rgba(74, 144, 217, 0.12);
}

/* AERO: Nav links — Glossy pill buttons */
[data-theme="aero"] .space-nav-link {
  color: #2c3e6b !important;
  border-radius: 20px;
  transition: all 0.25s ease;
}

[data-theme="aero"] .space-nav-link:hover,
[data-theme="aero"] .space-nav-link.active {
  background: linear-gradient(180deg, #5ba3e6 0%, #3a7cc8 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(74, 144, 217, 0.35);
  transform: translateY(-1px);
}

/* AERO: Logo glow */
[data-theme="aero"] .space-logodrawestust {
  filter: drop-shadow(0 0 6px rgba(74, 144, 217, 0.3));
}

/* AERO: Cards — Glass with soft shadow */
[data-theme="aero"] .dw-section,
[data-theme="aero"] .dw-widget {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(200, 215, 240, 0.5);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
}

[data-theme="aero"] .dw-section:hover,
[data-theme="aero"] .dw-widget:hover {
  box-shadow: 0 8px 30px rgba(74, 144, 217, 0.12);
  border-color: rgba(74, 144, 217, 0.25);
}

[data-theme="aero"] .dw-card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(200, 215, 240, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

[data-theme="aero"] .dw-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(74, 144, 217, 0.15);
  border-color: rgba(74, 144, 217, 0.3);
}

/* AERO: Section headers — Gradient blue */
[data-theme="aero"] .dw-section-header {
  background: linear-gradient(135deg, #4a90d9 0%, #3570b8 100%);
  border-bottom: 3px solid #4a90d9;
  border-radius: 12px 12px 0 0;
}

[data-theme="aero"] .dw-section-title {
  color: #ffffff;
}

[data-theme="aero"] .dw-view-all {
  background: rgba(255, 255, 255, 0.92);
  color: #3a7cc8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: none;
}

[data-theme="aero"] .dw-view-all:hover {
  background: #ffffff;
  color: #2a5ea0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

/* AERO: Buttons — Glossy Aqua style */
[data-theme="aero"] .btn-primary {
  background: linear-gradient(180deg, #6aaae8 0%, #4a90d9 50%, #3a7cc8 100%);
  border-color: #3a7cc8;
  box-shadow: 0 2px 8px rgba(74, 144, 217, 0.25), inset 0 1px 0 rgba(255,255,255,0.3);
  border-radius: 20px;
}

[data-theme="aero"] .btn-primary:hover {
  background: linear-gradient(180deg, #5a9ade 0%, #3a7cc8 50%, #2a6ab8 100%);
  box-shadow: 0 4px 14px rgba(74, 144, 217, 0.35), inset 0 1px 0 rgba(255,255,255,0.3);
  transform: translateY(-1px);
}

/* AERO: Icons — Blue tint */
[data-theme="aero"] .bi,
[data-theme="aero"] .fas,
[data-theme="aero"] .fa {
  color: #4a90d9;
}

[data-theme="aero"] .space-navbar .bi,
[data-theme="aero"] .space-navbar .fas,
[data-theme="aero"] .btn-primary .bi,
[data-theme="aero"] .btn-primary .fas {
  color: inherit;
}

/* AERO: Stat cards — Frosted glass */
[data-theme="aero"] .dw-stat-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(200, 215, 240, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 14px;
}

[data-theme="aero"] .dw-stat-card:hover {
  box-shadow: 0 8px 28px rgba(74, 144, 217, 0.12);
}

/* AERO: Hero banner */
[data-theme="aero"] .dw-hero-banner {
  background: linear-gradient(135deg, rgba(74,144,217,0.08) 0%, rgba(100,180,240,0.05) 100%);
}

/* AERO: Dropdowns */
[data-theme="aero"] .space-dropdown-menu {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(200, 215, 240, 0.5);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  border-radius: 14px;
}

[data-theme="aero"] .space-dropdown-item:hover {
  background: rgba(74, 144, 217, 0.08);
  color: #3a7cc8;
}

/* AERO: Modals */
[data-theme="aero"] .modal-content {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(200, 215, 240, 0.5);
  backdrop-filter: blur(20px);
}

/* AERO: Forms */
[data-theme="aero"] .form-control,
[data-theme="aero"] .form-select {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(200, 215, 240, 0.6);
  border-radius: 10px;
}

[data-theme="aero"] .form-control:focus,
[data-theme="aero"] .form-select:focus {
  border-color: #4a90d9;
  box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.12);
}

/* AERO: Badge bg */
[data-theme="aero"] .badge.bg-light {
  background: rgba(220, 235, 255, 0.7) !important;
  color: #2c3e6b;
  border: 1px solid rgba(180, 200, 230, 0.4);
}

/* AERO: Pagination */
[data-theme="aero"] .page-link {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(200, 215, 240, 0.5);
  color: #4a90d9;
  border-radius: 10px;
  margin: 0 2px;
}

[data-theme="aero"] .page-item.active .page-link {
  background: linear-gradient(180deg, #6aaae8 0%, #4a90d9 100%);
  border-color: #4a90d9;
  box-shadow: 0 2px 8px rgba(74, 144, 217, 0.25);
}

/* AERO: Tables */
[data-theme="aero"] .table {
  --bs-table-bg: transparent;
}

[data-theme="aero"] .table > :not(caption) > * > * {
  background: transparent;
}

/* AERO: Scrollbar — Glossy blue */
[data-theme="aero"] ::-webkit-scrollbar { width: 10px; }
[data-theme="aero"] ::-webkit-scrollbar-track { background: rgba(220,235,255,0.5); }
[data-theme="aero"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7ab4ea 0%, #4a90d9 100%);
  border-radius: 10px;
  border: 2px solid rgba(220,235,255,0.5);
}
[data-theme="aero"] ::-webkit-scrollbar-thumb:hover { background: #3a7cc8; }

/* AERO: Forum components */
[data-theme="aero"] .f-search input {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(200, 215, 240, 0.6);
  border-radius: 10px;
}

[data-theme="aero"] .f-search input:focus {
  border-color: #4a90d9;
  box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.1);
}

[data-theme="aero"] .f-btn-new {
  background: linear-gradient(180deg, #6aaae8 0%, #4a90d9 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
}

[data-theme="aero"] .f-btn-new:hover {
  background: linear-gradient(180deg, #5a9ade 0%, #3a7cc8 100%);
}

[data-theme="aero"] .f-card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(200, 215, 240, 0.5);
  border-radius: 12px;
}

[data-theme="aero"] .f-card:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(74, 144, 217, 0.25);
}

/* AERO: Announcement box */
[data-theme="aero"] .space-ann-box {
  background: linear-gradient(135deg, rgba(255,243,205,0.9) 0%, rgba(255,248,225,0.8) 100%);
  border: 1px solid rgba(255,220,130,0.4);
  border-radius: 12px;
}

/* AERO: Security alert */
[data-theme="aero"] .security-alert-banner {
  background: linear-gradient(135deg, rgba(254,226,226,0.9) 0%, rgba(254,202,202,0.8) 100%);
  border: 1px solid rgba(248,113,113,0.3);
}

/* ═══════════════════════════════════════════════════════════════
   SHARED: All non-light themes — Bootstrap class overrides
   ═══════════════════════════════════════════════════════════════ */

/* Cards */
[data-theme="dark"] .card, [data-theme="red"] .card, [data-theme="colorful"] .card, [data-theme="aero"] .card {
  background-color: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text);
}

/* Modals */
[data-theme="dark"] .modal-content, [data-theme="red"] .modal-content,
[data-theme="colorful"] .modal-content, [data-theme="aero"] .modal-content {
  background-color: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer,
[data-theme="red"] .modal-header, [data-theme="red"] .modal-footer,
[data-theme="colorful"] .modal-header, [data-theme="colorful"] .modal-footer,
[data-theme="aero"] .modal-header, [data-theme="aero"] .modal-footer {
  border-color: var(--border);
}

/* Forms */
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select,
[data-theme="red"] .form-control, [data-theme="red"] .form-select,
[data-theme="colorful"] .form-control, [data-theme="colorful"] .form-select,
[data-theme="aero"] .form-control, [data-theme="aero"] .form-select {
  background-color: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus,
[data-theme="red"] .form-control:focus, [data-theme="red"] .form-select:focus,
[data-theme="colorful"] .form-control:focus, [data-theme="colorful"] .form-select:focus,
[data-theme="aero"] .form-control:focus, [data-theme="aero"] .form-select:focus {
  background-color: var(--bg-elevated);
  color: var(--text);
}

/* List groups */
[data-theme="dark"] .list-group-item, [data-theme="red"] .list-group-item,
[data-theme="colorful"] .list-group-item, [data-theme="aero"] .list-group-item {
  background-color: transparent;
  border-color: var(--border);
  color: var(--text);
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu, [data-theme="red"] .dropdown-menu,
[data-theme="colorful"] .dropdown-menu, [data-theme="aero"] .dropdown-menu {
  background-color: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] .dropdown-item, [data-theme="red"] .dropdown-item,
[data-theme="colorful"] .dropdown-item, [data-theme="aero"] .dropdown-item {
  color: var(--text);
}

[data-theme="dark"] .dropdown-item:hover, [data-theme="red"] .dropdown-item:hover,
[data-theme="colorful"] .dropdown-item:hover, [data-theme="aero"] .dropdown-item:hover {
  background-color: var(--hover);
  color: var(--drawest-accent);
}

/* Text utility overrides */
html:not([data-theme="light"]) .text-dark,
html:not([data-theme="light"]) .text-black,
html:not([data-theme="light"]) .text-body {
  color: var(--text) !important;
}

html:not([data-theme="light"]) .bg-white,
html:not([data-theme="light"]) .bg-light {
  background-color: var(--bg-elevated) !important;
  color: var(--text) !important;
}

/* Tables */
[data-theme="dark"] .table, [data-theme="red"] .table,
[data-theme="colorful"] .table, [data-theme="aero"] .table {
  color: var(--text);
  border-color: var(--border);
  --bs-table-bg: transparent;
}

/* HR */
[data-theme="dark"] hr, [data-theme="red"] hr,
[data-theme="colorful"] hr, [data-theme="aero"] hr {
  border-top-color: var(--border);
  opacity: 1;
}

/* Buttons */
[data-theme="dark"] .btn-light, [data-theme="red"] .btn-light,
[data-theme="colorful"] .btn-light, [data-theme="aero"] .btn-light {
  background-color: var(--badge-bg);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] .btn-outline-dark, [data-theme="red"] .btn-outline-dark,
[data-theme="colorful"] .btn-outline-dark, [data-theme="aero"] .btn-outline-dark {
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] .btn-outline-dark:hover, [data-theme="red"] .btn-outline-dark:hover,
[data-theme="colorful"] .btn-outline-dark:hover, [data-theme="aero"] .btn-outline-dark:hover {
  background-color: var(--text);
  color: var(--bg);
}

/* Close button */
[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Placeholders */
::placeholder {
  color: var(--muted) !important;
}

/* Body defaults */
body {
  background: var(--bg);
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════
   COLORFUL THEME — Extended Component Overrides
   ═══════════════════════════════════════════════════════════════ */
[data-theme="colorful"] body {
  background-color: #f0f9ff;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(0, 157, 255, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(75, 192, 0, 0.05) 0%, transparent 40%);
  background-attachment: fixed;
}

[data-theme="colorful"] .space-navbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 249, 255, 0.85) 100%) !important;
  backdrop-filter: blur(15px) saturate(180%);
  border-bottom: 3px solid #009dff !important;
  box-shadow: 0 4px 20px rgba(0, 157, 255, 0.15);
}

[data-theme="colorful"] .space-nav-link:hover,
[data-theme="colorful"] .space-nav-link.active {
  background: linear-gradient(180deg, #00c3ff 0%, #0084ff 100%) !important;
  color: #ffffff !important;
  border-radius: 25px;
  box-shadow: 0 5px 15px rgba(1, 157, 255, 0.4);
  transform: translateY(-1px) scale(1.05);
}

[data-theme="colorful"] .bi,
[data-theme="colorful"] .fas,
[data-theme="colorful"] .fa {
  color: #009dff;
}

[data-theme="colorful"] .space-navbar .bi,
[data-theme="colorful"] .space-navbar .fas,
[data-theme="colorful"] .btn-primary .bi,
[data-theme="colorful"] .btn-primary .fas {
  color: inherit;
}

[data-theme="colorful"] .space-logodrawestust {
  filter: drop-shadow(0 0 8px rgba(0, 157, 255, 0.3));
}

[data-theme="colorful"] .dw-section-header {
  background: linear-gradient(135deg, #009dff 0%, #0074cc 100%);
  border-bottom: 3px solid #009dff;
  border-radius: 12px 12px 0 0;
}

[data-theme="colorful"] .dw-section-title {
  color: #ffffff;
}

[data-theme="colorful"] .dw-view-all {
  background: rgba(255, 255, 255, 0.92);
  color: #0084ff;
}

[data-theme="colorful"] .btn-primary {
  background: linear-gradient(180deg, #33b5ff 0%, #009dff 100%);
  border-color: #009dff;
  box-shadow: 0 3px 12px rgba(0, 157, 255, 0.3);
}

[data-theme="colorful"] .btn-primary:hover {
  background: linear-gradient(180deg, #00b4ff 0%, #0088ee 100%);
  box-shadow: 0 5px 18px rgba(0, 157, 255, 0.4);
}

[data-theme="colorful"] .page-link {
  background: rgba(0, 157, 255, 0.06);
  border-color: #bde4ff;
  color: #009dff;
}

[data-theme="colorful"] .page-item.active .page-link {
  background: linear-gradient(180deg, #33b5ff 0%, #009dff 100%);
  border-color: #009dff;
}

[data-theme="colorful"] ::-webkit-scrollbar { width: 10px; }
[data-theme="colorful"] ::-webkit-scrollbar-track { background: #e1f5fe; }
[data-theme="colorful"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4dc4ff 0%, #009dff 100%);
  border-radius: 10px;
  border: 2px solid #e1f5fe;
}
[data-theme="colorful"] ::-webkit-scrollbar-thumb:hover { background: #0088ee; }

[data-theme="colorful"] .space-ann-box {
  background: linear-gradient(135deg, rgba(255,243,205,0.95) 0%, rgba(255,248,225,0.9) 100%);
}

[data-theme="colorful"] .security-alert-banner {
  background: linear-gradient(135deg, rgba(254,226,226,0.95) 0%, rgba(254,202,202,0.9) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   RED THEME — Extended Component Overrides
   ═══════════════════════════════════════════════════════════════ */
[data-theme="red"] body {
  background: #f9f2f1;
  color: #1f1215;
}

[data-theme="red"] .space-navbar {
  background: linear-gradient(135deg, #c41919 0%, #a81515 100%) !important;
  border-bottom: none;
  box-shadow: 0 2px 20px rgba(180, 20, 20, 0.2);
}

[data-theme="red"] .space-nav-link {
  color: rgba(255, 255, 255, 0.92) !important;
}

[data-theme="red"] .space-nav-link:hover,
[data-theme="red"] .space-nav-link.active {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff !important;
  border-radius: 10px;
}

[data-theme="red"] .navbar-brand {
  color: #e30a17 !important;
  font-weight: 800;
}

[data-theme="red"] .space-navbar {
  border-bottom: 2px solid #e30a17;
}

[data-theme="red"] .text-muted {
  color: #8c4242 !important;
}

[data-theme="red"] .dropdown-item:hover {
  background: #ffebeb;
  color: #e30a17;
}

[data-theme="red"] .btn-primary {
  background-color: #e30a17;
  border-color: #e30a17;
}

[data-theme="red"] .btn-primary:hover {
  background-color: #b20000;
  border-color: #b20000;
}

[data-theme="red"] .badge.bg-danger {
  background-color: #e30a17 !important;
}

[data-theme="red"] .dw-section-header {
  border-bottom: 3px solid #d42020;
  background: linear-gradient(135deg, #d42020 0%, #b81818 100%);
  border-radius: 8px 8px 0 0;
  padding: 10px 15px;
  margin: -1px -1px 15px -1px;
}

[data-theme="red"] .dw-section-title {
  color: #ffffff;
}

[data-theme="red"] .dw-view-all {
  background: rgba(255, 255, 255, 0.92);
  color: #c41919;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  border: none;
}

[data-theme="red"] .dw-view-all:hover {
  background: #ffffff;
  color: #a81515;
}

[data-theme="red"] .dw-section,
[data-theme="red"] .dw-widget {
  background: #ffffff;
  border: 1px solid #f0d0cc;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

[data-theme="red"] .dw-card {
  background: #ffffff;
  border: 1px solid #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .dw-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(180, 30, 30, 0.1);
  border-color: #e0a8a3;
}

[data-theme="red"] .dw-stat-card {
  background: #ffffff;
  border: 1px solid #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .space-dropdown-menu {
  background: #ffffff;
  border: 1px solid #f0d0cc;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  border-radius: 14px;
}

[data-theme="red"] .space-dropdown-item:hover {
  background: #fff0ee;
  color: #c41919;
}

[data-theme="red"] .f-search input {
  background: #fff;
  border-color: #e0b8b3;
  color: #1f1215;
}

[data-theme="red"] .f-search input:focus {
  border-color: #d42020;
  box-shadow: 0 0 0 3px rgba(212, 32, 32, 0.08);
}

[data-theme="red"] .f-btn-new {
  background: #d42020;
  color: #fff;
  border: none;
}

[data-theme="red"] .f-btn-new:hover {
  background: #b81818;
}

[data-theme="red"] .f-card {
  background: #fff;
  border: 1px solid #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .f-card:hover {
  background: #fff8f7;
  border-color: #e0a8a3;
}

[data-theme="red"] .page-link {
  background: rgba(212, 32, 32, 0.06);
  border-color: #fecaca;
  color: #d42020;
}

[data-theme="red"] .page-item.active .page-link {
  background: #d42020;
  border-color: #d42020;
  color: #fff;
}

[data-theme="red"] ::-webkit-scrollbar { width: 10px; }
[data-theme="red"] ::-webkit-scrollbar-track { background: #fef2f2; }
[data-theme="red"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ef6b6b 0%, #d42020 100%);
  border-radius: 10px;
  border: 2px solid #fef2f2;
}
[data-theme="red"] ::-webkit-scrollbar-thumb:hover { background: #b81818; }

[data-theme="red"] .space-ann-box {
  background: linear-gradient(135deg, #fff4d6 0%, #fff8e8 100%);
  color: #1f2937;
}

[data-theme="red"] .security-alert-banner {
  background: #fee2e2;
  color: #991b1b;
}

/* RED: Offcanvas / Mobile Menu */
[data-theme="red"] .space-offcanvas-menu { background: #ffffff !important; }
[data-theme="red"] .space-offcanvas-menu .offcanvas-header {
  border-bottom: 3px solid #d42020; color: #ffffff;
  background: linear-gradient(135deg, #c41919 0%, #a81515 100%);
}
[data-theme="red"] .space-offcanvas-menu .offcanvas-header .btn-close { filter: invert(1) brightness(2); }
[data-theme="red"] .space-menu-list .list-group-item { color: #1f1215; border-color: #f0d0cc; }
[data-theme="red"] .space-menu-list .list-group-item:hover { background: #fff0ee; color: #c41919; }
[data-theme="red"] .space-offcanvas-bottom.space-sheet { background: #ffffff; color: #1f1215; }

/* RED: Accordion */
[data-theme="red"] .accordion-button { color: #1f1215; background: #ffffff; }
[data-theme="red"] .accordion-button:not(.collapsed) { background: #fff0ee; color: #c41919; }

/* RED: Form extras */
[data-theme="red"] .form-label { color: #1f1215; }

/* RED: Text Colors */
[data-theme="red"] h1, [data-theme="red"] h2, [data-theme="red"] h3,
[data-theme="red"] h4, [data-theme="red"] h5, [data-theme="red"] h6 { color: #1f1215; }
[data-theme="red"] p { color: #2a1a1a; }
[data-theme="red"] label { color: #1f1215; }
[data-theme="red"] small { color: #6b4f4f; }
[data-theme="red"] a { color: #c41919; }
[data-theme="red"] a:hover { color: #a81515; }
[data-theme="red"] .text-body { color: #1f1215 !important; }
[data-theme="red"] .text-dark { color: #1f1215 !important; }

/* RED: Badges */
[data-theme="red"] .badge.bg-primary { background: #d42020 !important; color: #fff !important; }
[data-theme="red"] .badge.bg-success { background: #16a34a !important; color: #fff !important; }
[data-theme="red"] .badge.bg-warning { background: #d97706 !important; color: #fff !important; }
[data-theme="red"] .badge.bg-info { background: #0284c7 !important; color: #fff !important; }
[data-theme="red"] .badge.bg-secondary { background: #fde0dc !important; color: #b81818 !important; }
[data-theme="red"] .badge.bg-dark { background: #991b1b !important; color: #fff !important; }
[data-theme="red"] .badge.bg-light { background: #fff0ee !important; color: #b81818 !important; }

/* RED: Tags */
[data-theme="red"] .space-tag { background: #fff0ee; color: #b81818; border: 1px solid #f0d0cc; }

/* RED: Glass */
[data-theme="red"] .glass-card { background: #fff; border: 1px solid #f0d0cc; color: #1f1215; }

/* RED: Alerts */
[data-theme="red"] .alert-warning { background: #fffbea; border: 1px solid #fde68a; color: #92400e; }
[data-theme="red"] .alert-info { background: #eff6ff; border: 1px solid #93c5fd; color: #1e40af; }
[data-theme="red"] .alert-success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
[data-theme="red"] .alert-danger { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }

/* RED: Selection */
[data-theme="red"] ::selection { background: rgba(212, 32, 32, 0.15); color: #1f1215; }

/* RED: Nav Pills/Tabs */
[data-theme="red"] .nav-link { color: #4a3030; }
[data-theme="red"] .nav-pills .nav-link.active { background: #d42020; color: #fff; }
[data-theme="red"] .nav-tabs .nav-link.active { border-color: #d42020; color: #d42020; background: #fff; }

/* RED: Progress & Breadcrumb */
[data-theme="red"] .progress { background: #fde0dc; }
[data-theme="red"] .progress-bar { background: #d42020; }
[data-theme="red"] .breadcrumb-item { color: #4a3030; }
[data-theme="red"] .breadcrumb-item a { color: #d42020; }
[data-theme="red"] .breadcrumb-item.active { color: #6b4f4f; }

/* RED: Auth / Comments */
[data-theme="red"] .auth-card, [data-theme="red"] .login-card, [data-theme="red"] .register-card {
  background: #fff; border: 1px solid #f0d0cc; color: #1f1215;
}
[data-theme="red"] .comment-box, [data-theme="red"] .comment-item {
  background: #fff; border-color: #f0d0cc; color: #1f1215;
}
[data-theme="red"] .comment-item:hover { background: #fff8f7; }
[data-theme="red"] .comment-author { color: #c41919; }
[data-theme="red"] .comment-date { color: #a08080; }
[data-theme="red"] .comment-content { color: #2a1a1a; }

/* RED: Series / Manga */
[data-theme="red"] .series-header, [data-theme="red"] .manga-header {
  background: linear-gradient(135deg, #c41919 0%, #a81515 100%); color: #fff;
}
[data-theme="red"] .chapter-list-item { background: #fff; border-color: #f0d0cc; color: #1f1215; }
[data-theme="red"] .chapter-list-item:hover { background: #fff8f7; border-color: #e0a8a3; }

/* RED: Component Cards */
[data-theme="red"] .profile-card, [data-theme="red"] .user-card,
[data-theme="red"] .playlist-card, [data-theme="red"] .game-card,
[data-theme="red"] .team-card, [data-theme="red"] .rank-card,
[data-theme="red"] .ranking-card, [data-theme="red"] .panel-card,
[data-theme="red"] .admin-card {
  background: #fff; border: 1px solid #f0d0cc; color: #1f1215;
}
[data-theme="red"] .playlist-card:hover, [data-theme="red"] .game-card:hover,
[data-theme="red"] .team-card:hover {
  border-color: #e0a8a3; box-shadow: 0 4px 20px rgba(180, 30, 30, 0.06);
}

/* RED: Shop / Payment */
[data-theme="red"] .shop-card, [data-theme="red"] .payment-card, [data-theme="red"] .coin-card {
  background: #fff; border: 1px solid #f0d0cc; color: #1f1215;
}
[data-theme="red"] .shop-card:hover, [data-theme="red"] .coin-card:hover { border-color: #e0a8a3; }

/* RED: Messages */
[data-theme="red"] .drawverse-card { background: #fff; border: 1px solid #f0d0cc; color: #1f1215; }
[data-theme="red"] .message-card, [data-theme="red"] .thread-card {
  background: #fff; border-color: #f0d0cc; color: #1f1215;
}
[data-theme="red"] .message-bubble { background: #fff0ee; border: 1px solid #f0d0cc; color: #1f1215; }
[data-theme="red"] .message-bubble.own { background: #d42020; color: #fff; border-color: #b81818; }

/* RED: Video / Tooltip / Toast */
[data-theme="red"] .video-card, [data-theme="red"] .animation-card {
  background: #fff; border: 1px solid #f0d0cc; color: #1f1215;
}
[data-theme="red"] .video-card:hover, [data-theme="red"] .animation-card:hover { border-color: #e0a8a3; }
[data-theme="red"] .tooltip-inner { background: #7f1d1d; color: #fecaca; }
[data-theme="red"] .popover { background: #fff; border-color: #f0d0cc; color: #1f1215; }
[data-theme="red"] .toast { background: #fff; border-color: #f0d0cc; color: #1f1215; }

/* RED: Quick Access */
[data-theme="red"] .dw-quick-card { background: #fff; border-color: #f0d0cc; color: #1f1215; }
[data-theme="red"] .dw-quick-card:hover { border-color: #e0a8a3; }
[data-theme="red"] .dw-quick-title { color: #1f1215; }
[data-theme="red"] .dw-quick-desc { color: #4a3030; }

/* RED: Updates/Ranking Tabs */
[data-theme="red"] .dw-updates-tabs, [data-theme="red"] .dw-ranking-tabs {
  background: linear-gradient(135deg, #d42020 0%, #b81818 100%); border-radius: 8px;
}
[data-theme="red"] .dw-updates-tab, [data-theme="red"] .dw-ranking-tab { color: rgba(255,255,255,0.7); }
[data-theme="red"] .dw-updates-tab:hover, [data-theme="red"] .dw-ranking-tab:hover {
  color: #fff; background: rgba(255,255,255,0.12);
}
[data-theme="red"] .dw-updates-tab.active, [data-theme="red"] .dw-ranking-tab.active {
  background: #fff; color: #d42020; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* RED: Text helpers */
[data-theme="red"] .text-secondary { color: #6b4f4f !important; }
[data-theme="red"] .text-primary { color: #d42020 !important; }
[data-theme="red"] .text-success { color: #16a34a !important; }
[data-theme="red"] .text-danger { color: #dc2626 !important; }
[data-theme="red"] .text-warning { color: #d97706 !important; }
[data-theme="red"] .text-info { color: #0284c7 !important; }

/* RED: Global Catch-All */
[data-theme="red"] .card-subtitle, [data-theme="red"] .card-footer,
[data-theme="red"] figcaption, [data-theme="red"] .caption,
[data-theme="red"] .meta, [data-theme="red"] .date,
[data-theme="red"] .time-ago, [data-theme="red"] .post-meta { color: #6b4f4f; }

[data-theme="red"] .container, [data-theme="red"] .container-fluid,
[data-theme="red"] .row, [data-theme="red"] .col,
[data-theme="red"] main, [data-theme="red"] section, [data-theme="red"] article { color: #1f1215; }

[data-theme="red"] .watch-card, [data-theme="red"] .rank-item,
[data-theme="red"] .playlist-item, [data-theme="red"] .series-card,
[data-theme="red"] .ep-card, [data-theme="red"] .match-container,
[data-theme="red"] .product-card, [data-theme="red"] .card-box {
  background: #fff; border-color: #f0d0cc; color: #1f1215;
}

[data-theme="red"] .msg-hub, [data-theme="red"] .ct-header,
[data-theme="red"] .ct-footer, [data-theme="red"] .ct-body {
  background: #fff; color: #1f1215; border-color: #f0d0cc;
}
[data-theme="red"] .msg-textarea { background: #fff8f7; color: #1f1215; border-color: #e0b8b3; }
[data-theme="red"] .msg-row.other .msg-bubble { background: #fff0ee; color: #1f1215; }
[data-theme="red"] .thr.active { background: #fff0ee; }
[data-theme="red"] .search-box { background: #fff; border-color: #e0b8b3; color: #1f1215; }
[data-theme="red"] .ctx-menu { background: #fff; border-color: #f0d0cc; color: #1f1215; }
[data-theme="red"] .ctx-item:hover { background: #fff0ee; color: #c41919; }
[data-theme="red"] .drop-zone { background: #fff8f7; border-color: #e0b8b3; color: #1f1215; }
[data-theme="red"] .drop-zone:hover { background: #fff0ee; }
[data-theme="red"] .tool-btn { background: #fff0ee; color: #4a2020; }
[data-theme="red"] .tool-btn:hover { background: #fde0dc; }
[data-theme="red"] .tag-ongoing { background: #f0fdf4; color: #166534; }
[data-theme="red"] .tag-completed { background: #eff6ff; color: #1e40af; }
[data-theme="red"] .tag-cancelled { background: #fef2f2; color: #991b1b; }
[data-theme="red"] .input-group-text { background: #fff0ee; border-color: #e0b8b3; color: #4a3030; }
[data-theme="red"] .reader-container, [data-theme="red"] .reader-controls { background: #fefafa; color: #1f1215; }

/* RED: Shots / Photography */
[data-theme="red"] .photo-card { background: #fff; border-color: #f0d0cc; color: #1f1215; }
[data-theme="red"] .photo-card:hover { box-shadow: 0 4px 20px rgba(180,30,30,0.06); }
[data-theme="red"] .photo-title { color: #1f1215; }
[data-theme="red"] .photo-meta { color: #6b4f4f; }
[data-theme="red"] .action-bar { background: #fff8f7; border-color: #f0d0cc; color: #1f1215; }
[data-theme="red"] .ref-card { background: #fff; border-color: #f0d0cc; color: #1f1215; }
[data-theme="red"] .ref-card:hover { border-color: #e0a8a3; }
[data-theme="red"] .search-input { background: #fff; border-color: #e0b8b3; color: #1f1215; }
[data-theme="red"] .search-input::placeholder { color: #a08080; }
[data-theme="red"] .search-icon { color: #a08080; }
[data-theme="red"] .filter-pill { background: #fff; border-color: #e0b8b3; color: #2a1a1a; }
[data-theme="red"] .filter-pill:hover { background: #fff0ee; color: #c41919; border-color: #e0a8a3; }
[data-theme="red"] .filter-pill.active { background: #d42020; border-color: #d42020; color: #fff; }

/* RED: Forum extras */
[data-theme="red"] .f-search input::placeholder { color: #a08080; }
[data-theme="red"] .f-search i { color: #a08080; }
[data-theme="red"] .f-tabs { border-bottom-color: #f0d0cc; }
[data-theme="red"] .f-tab { color: #6b4f4f; }
[data-theme="red"] .f-tab:hover { color: #d42020; }
[data-theme="red"] .f-tab.active { color: #d42020; border-bottom-color: #d42020; }
[data-theme="red"] .f-card-title { color: #1f1215; }
[data-theme="red"] .f-card-snippet { color: #4a3030; }
[data-theme="red"] .f-card-meta { color: #6b4f4f; }
[data-theme="red"] .f-card-thumb { background: #fff0ee; }
[data-theme="red"] .f-card-thumb-placeholder { background: #fff0ee; color: #d42020; }
[data-theme="red"] .f-card-cat { background: #fff0ee; color: #b81818; }
[data-theme="red"] .f-card-mp { background: #d42020; color: #fff; }
[data-theme="red"] .f-cat-dropdown .dropdown-toggle { background: #fff; border-color: #e0b8b3; color: #1f1215; }
[data-theme="red"] .f-cat-dropdown .dropdown-menu { background: #fff; border-color: #e0b8b3; }
[data-theme="red"] .f-cat-dropdown .dropdown-item { color: #1f1215; }
[data-theme="red"] .f-cat-dropdown .dropdown-item:hover { background: #fff0ee; color: #c41919; }
[data-theme="red"] .f-mp-card { background: #fff; border: 1px solid #f0d0cc; color: #1f1215; }
[data-theme="red"] .f-mp-card:hover { border-color: #e0a8a3; }
[data-theme="red"] .f-mp-body h6 { color: #1f1215; }
[data-theme="red"] .f-mp-price { color: #d42020; }
[data-theme="red"] .f-mp-seller { color: #6b4f4f; }
[data-theme="red"] .f-mp-img { background: #fff0ee; }
[data-theme="red"] .f-pagination .page-link { background: #fff; border-color: #f0d0cc; color: #c41919; }
[data-theme="red"] .f-pagination .page-item.active .page-link { background: #d42020; border-color: #d42020; color: #fff; }
[data-theme="red"] .f-mobile-menu { background: #fff; border-top: 2px solid #d42020; }
[data-theme="red"] .f-mobile-item { color: #6b4f4f; }
[data-theme="red"] .f-mobile-item.active { color: #d42020; }
[data-theme="red"] .f-empty { color: #6b4f4f; }
[data-theme="red"] .f-top-left h2 { color: #1f1215; }
[data-theme="red"] .f-top-stats { color: #4a3030; }

/* RED: Footer */
[data-theme="red"] .site-footer {
  background: linear-gradient(180deg, #7f1d1d 0%, #450a0a 100%) !important;
  border-top: 3px solid #d42020; color: #fecaca;
}
[data-theme="red"] .site-footer::before {
  background: linear-gradient(90deg, transparent, rgba(252,165,165,0.4) 25%, rgba(254,202,202,0.6) 50%, rgba(252,165,165,0.4) 75%, transparent);
  height: 3px;
}
[data-theme="red"] .brand-name {
  background: linear-gradient(135deg, #fecaca 0%, #ffffff 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
[data-theme="red"] .social-link { background: rgba(255,255,255,0.1); color: #fecaca; }
[data-theme="red"] .social-link:hover { background: rgba(255,255,255,0.2); color: #fff; }
[data-theme="red"] .section-title { color: #fecaca; }
[data-theme="red"] .section-title::after { background: linear-gradient(90deg, #fca5a5, transparent); }
[data-theme="red"] .footer-nav .nav-link { color: rgba(254,202,202,0.8); }
[data-theme="red"] .footer-nav .nav-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
[data-theme="red"] .copyright, [data-theme="red"] .made-with, [data-theme="red"] .footer-text { color: rgba(254,202,202,0.6); }
[data-theme="red"] .copyright strong { color: #fecaca; }
[data-theme="red"] .brand-tagline { color: rgba(254,202,202,0.7); }
[data-theme="red"] .btn-reset { border-color: rgba(252,165,165,0.3); color: rgba(254,202,202,0.7); }
[data-theme="red"] .btn-reset:hover { background: rgba(255,255,255,0.1); color: #fff; }
[data-theme="red"] .footer-content { border-bottom-color: rgba(252,165,165,0.15); }

/* ═══════════════════════════════════════════════════════════════
   DARK THEME — Extended Component Overrides
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] body {
  background: #0b0f19;
  color: #f3f4f6;
}

[data-theme="dark"] .space-navbar {
  background: linear-gradient(180deg, #111827 0%, #0b0f19 100%) !important;
  border-bottom: 1px solid #1f2937;
}

[data-theme="dark"] .space-nav-link {
  color: #d1d5db !important;
}

[data-theme="dark"] .space-nav-link:hover,
[data-theme="dark"] .space-nav-link.active {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa !important;
  border-radius: 10px;
}

[data-theme="dark"] .navbar-brand {
  color: #60a5fa !important;
}

[data-theme="dark"] .text-muted {
  color: #9ca3af !important;
}

[data-theme="dark"] .dw-section,
[data-theme="dark"] .dw-widget {
  background: #111827;
  border: 1px solid #1f2937;
}

[data-theme="dark"] .dw-card {
  background: #111827;
  border: 1px solid #1f2937;
  color: #f3f4f6;
}

[data-theme="dark"] .dw-card:hover {
  border-color: #374151;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .dw-section-header {
  background: linear-gradient(135deg, #1e3a5f 0%, #1a2744 100%);
  border-bottom: 3px solid #3b82f6;
}

[data-theme="dark"] .dw-section-title {
  color: #f3f4f6;
}

[data-theme="dark"] .dw-view-all {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

[data-theme="dark"] .dw-stat-card {
  background: #111827;
  border: 1px solid #1f2937;
  color: #f3f4f6;
}

[data-theme="dark"] .btn-primary {
  background: #3b82f6;
  border-color: #3b82f6;
}

[data-theme="dark"] .btn-primary:hover {
  background: #2563eb;
  border-color: #2563eb;
}

[data-theme="dark"] .page-link {
  background: rgba(59, 130, 246, 0.1);
  border-color: #1f2937;
  color: #60a5fa;
}

[data-theme="dark"] .page-item.active .page-link {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

[data-theme="dark"] ::-webkit-scrollbar { width: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: #0b0f19; }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4b5563 0%, #374151 100%);
  border-radius: 10px;
  border: 2px solid #0b0f19;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4b5563; }

[data-theme="dark"] .f-card {
  background: #111827;
  border: 1px solid #1f2937;
  color: #f3f4f6;
}

[data-theme="dark"] .f-card:hover {
  background: #1a2332;
  border-color: #374151;
}

[data-theme="dark"] .f-search input {
  background: #1f2937;
  border-color: #374151;
  color: #f3f4f6;
}

[data-theme="dark"] .f-btn-new {
  background: #3b82f6;
  color: #fff;
}

[data-theme="dark"] .space-ann-box {
  background: linear-gradient(135deg, rgba(255,243,205,0.1) 0%, rgba(255,248,225,0.05) 100%);
  color: #fbbf24;
}

[data-theme="dark"] .security-alert-banner {
  background: rgba(254,226,226,0.1);
  color: #fca5a5;
}

/* ═══════════════════════════════════════════════════════════════
   ICON CONTRAST FIX — All themes (Context-aware)
   ═══════════════════════════════════════════════════════════════ */

/* RED: Default icons in body areas */
[data-theme="red"] .bi, [data-theme="red"] .fas, [data-theme="red"] .fab,
[data-theme="red"] .far, [data-theme="red"] .fa { color: #d42020; }

/* RED: Icons inside colored backgrounds must be white */
[data-theme="red"] .space-navbar .bi, [data-theme="red"] .space-navbar .fas,
[data-theme="red"] .space-navbar .fab, [data-theme="red"] .space-navbar .far,
[data-theme="red"] .space-navbar .fa,
[data-theme="red"] .dw-section-header .bi, [data-theme="red"] .dw-section-header .fas,
[data-theme="red"] .dw-section-header .far, [data-theme="red"] .dw-section-header .fab,
[data-theme="red"] .dw-section-header .fa,
[data-theme="red"] .dw-updates-tabs .bi, [data-theme="red"] .dw-updates-tabs .fas,
[data-theme="red"] .dw-updates-tabs .far, [data-theme="red"] .dw-updates-tabs .fa,
[data-theme="red"] .dw-ranking-tabs .bi, [data-theme="red"] .dw-ranking-tabs .fas,
[data-theme="red"] .dw-ranking-tabs .far, [data-theme="red"] .dw-ranking-tabs .fa,
[data-theme="red"] .dw-updates-tab .bi, [data-theme="red"] .dw-updates-tab .fas,
[data-theme="red"] .dw-updates-tab .far, [data-theme="red"] .dw-updates-tab .fa,
[data-theme="red"] .dw-ranking-tab .bi, [data-theme="red"] .dw-ranking-tab .fas,
[data-theme="red"] .dw-ranking-tab .far, [data-theme="red"] .dw-ranking-tab .fa,
[data-theme="red"] .btn-primary .bi, [data-theme="red"] .btn-primary .fas,
[data-theme="red"] .btn-primary .far, [data-theme="red"] .btn-primary .fab,
[data-theme="red"] .btn-primary .fa,
[data-theme="red"] .btn-danger .bi, [data-theme="red"] .btn-danger .fas,
[data-theme="red"] .btn-danger .far, [data-theme="red"] .btn-danger .fa,
[data-theme="red"] .dw-hero-slide-info .bi, [data-theme="red"] .dw-hero-slide-info .fas,
[data-theme="red"] .dw-hero-slide-info .far, [data-theme="red"] .dw-hero-slide-info .fa,
[data-theme="red"] .space-nav-link .bi, [data-theme="red"] .space-nav-link .fas,
[data-theme="red"] .space-nav-link .far, [data-theme="red"] .space-nav-link .fa,
[data-theme="red"] .dw-category-card .bi, [data-theme="red"] .dw-category-card .fas,
[data-theme="red"] .dw-category-card .far, [data-theme="red"] .dw-category-card .fa,
[data-theme="red"] .badge .bi, [data-theme="red"] .badge .fas,
[data-theme="red"] .badge .far, [data-theme="red"] .badge .fa,
[data-theme="red"] .space-offcanvas-menu .offcanvas-header .bi,
[data-theme="red"] .space-offcanvas-menu .offcanvas-header .fas,
[data-theme="red"] .space-offcanvas-menu .offcanvas-header .far,
[data-theme="red"] .space-offcanvas-menu .offcanvas-header .fa { color: #ffffff !important; }

/* RED: Active tab icon stays red on white bg */
[data-theme="red"] .dw-updates-tab.active .fas, [data-theme="red"] .dw-updates-tab.active .bi,
[data-theme="red"] .dw-ranking-tab.active .fas, [data-theme="red"] .dw-ranking-tab.active .bi { color: #d42020 !important; }

/* RED: Navbar text */
[data-theme="red"] .space-nav-link,
[data-theme="red"] .space-nav-link:hover,
[data-theme="red"] .space-nav-link.active { color: #ffffff !important; }

/* RED: Section header text white */
[data-theme="red"] .dw-section-title, [data-theme="red"] .dw-section-subtitle { color: #ffffff !important; }

/* RED: Category card text white */
[data-theme="red"] .dw-category-card, [data-theme="red"] .dw-category-card span { color: #ffffff !important; }

/* RED: Badges */
[data-theme="red"] .badge { color: #fff !important; }

/* DARK: Default icons visible on dark bg */
[data-theme="dark"] .bi, [data-theme="dark"] .fas, [data-theme="dark"] .fab,
[data-theme="dark"] .far, [data-theme="dark"] .fa { color: #e5e7eb; }

[data-theme="dark"] .space-navbar .fas, [data-theme="dark"] .space-navbar .bi,
[data-theme="dark"] .space-nav-link .fas, [data-theme="dark"] .space-nav-link .bi,
[data-theme="dark"] .btn-primary .fas, [data-theme="dark"] .btn-primary .bi,
[data-theme="dark"] .btn-danger .fas, [data-theme="dark"] .btn-danger .bi,
[data-theme="dark"] .badge .fas, [data-theme="dark"] .badge .bi,
[data-theme="dark"] .dw-section-header .fas, [data-theme="dark"] .dw-section-header .bi,
[data-theme="dark"] .dw-hero-slide-info .fas, [data-theme="dark"] .dw-hero-slide-info .bi { color: #ffffff !important; }

/* COLORFUL: Default icons in body areas */
[data-theme="colorful"] .bi, [data-theme="colorful"] .fas, [data-theme="colorful"] .fab,
[data-theme="colorful"] .far, [data-theme="colorful"] .fa { color: #7c3aed; }

/* COLORFUL: Icons inside colored backgrounds must be white */
[data-theme="colorful"] .space-navbar .bi, [data-theme="colorful"] .space-navbar .fas,
[data-theme="colorful"] .space-navbar .fab, [data-theme="colorful"] .space-navbar .far,
[data-theme="colorful"] .space-navbar .fa,
[data-theme="colorful"] .dw-section-header .bi, [data-theme="colorful"] .dw-section-header .fas,
[data-theme="colorful"] .dw-section-header .far, [data-theme="colorful"] .dw-section-header .fab,
[data-theme="colorful"] .dw-section-header .fa,
[data-theme="colorful"] .btn-primary .bi, [data-theme="colorful"] .btn-primary .fas,
[data-theme="colorful"] .btn-primary .far, [data-theme="colorful"] .btn-primary .fab,
[data-theme="colorful"] .btn-primary .fa,
[data-theme="colorful"] .btn-danger .bi, [data-theme="colorful"] .btn-danger .fas,
[data-theme="colorful"] .btn-danger .far, [data-theme="colorful"] .btn-danger .fa,
[data-theme="colorful"] .dw-hero-slide-info .bi, [data-theme="colorful"] .dw-hero-slide-info .fas,
[data-theme="colorful"] .dw-hero-slide-info .far, [data-theme="colorful"] .dw-hero-slide-info .fa,
[data-theme="colorful"] .space-nav-link .bi, [data-theme="colorful"] .space-nav-link .fas,
[data-theme="colorful"] .space-nav-link .far, [data-theme="colorful"] .space-nav-link .fa,
[data-theme="colorful"] .dw-updates-tab.active .fas, [data-theme="colorful"] .dw-updates-tab.active .bi,
[data-theme="colorful"] .dw-ranking-tab.active .fas, [data-theme="colorful"] .dw-ranking-tab.active .bi,
[data-theme="colorful"] .badge .bi, [data-theme="colorful"] .badge .fas,
[data-theme="colorful"] .badge .far, [data-theme="colorful"] .badge .fa { color: #ffffff !important; }

/* COLORFUL: Category cards inherit their background color */
[data-theme="colorful"] .dw-category-card .fas,
[data-theme="colorful"] .dw-category-card .bi { color: inherit !important; }

/* COLORFUL: Section header text white */
[data-theme="colorful"] .dw-section-title, [data-theme="colorful"] .dw-section-subtitle { color: #ffffff !important; }

/* COLORFUL: Widget title */
[data-theme="colorful"] .dw-widget-title { color: #1e1030 !important; }
[data-theme="colorful"] .dw-widget-title .fas, [data-theme="colorful"] .dw-widget-title .bi { color: #8b5cf6 !important; }

/* COLORFUL: Badges */
[data-theme="colorful"] .badge { color: #fff !important; }

/* ═══════════════════════════════════════════════════════════════
   LEGACY COMPAT — app.css & other files using --bg, --muted, etc.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --card: var(--bg-elevated);
  --fg: var(--text);
  --line: var(--border);
  --line-2: var(--border);
  --primary: var(--drawest-accent);
  --primary-600: var(--drawest-accent);
  --shadow: var(--hover-shadow);
}