:root {
  /* Base Backgrounds */
  --bg-main: #09090b;
  --bg-panel: rgb(9, 13, 22);
  --bg-container: rgb(5, 7, 13);
  --bg-header: rgba(15, 17, 26, 0.6);
  --bg-modal: rgba(20, 20, 30, 0.95);
  --bg-overlay: rgba(0, 0, 0, 0.75);

  /* Glass & UI Elements */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-bg-hover: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-strong: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

  /* Primary Accents (Premium Indigo) */
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-glass: rgba(99, 102, 241, 0.15);
  --accent-glass-strong: rgba(99, 102, 241, 0.3);
  --accent-glow: rgba(99, 102, 241, 0.2);

  /* Button & Chat Gradients */
  --btn-primary-bg: linear-gradient(135deg, var(--accent), var(--accent-hover));
  --btn-primary-hover: linear-gradient(
    135deg,
    var(--accent-hover),
    var(--accent)
  );
  --btn-text: #ffffff;
  --msg-bubble-bg: rgba(255, 255, 255, 0.05);
  --msg-own-bg: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.3),
    rgba(79, 70, 229, 0.1)
  );

  /* Status Colors */
  --success: #14b8a6;
  --success-glass: rgba(20, 184, 166, 0.1);
  --error: #f43f5e;
  --error-glass: rgba(244, 63, 94, 0.15);
  --error-border: rgba(244, 63, 94, 0.3);
  --warning: #f59e0b;

  /* Typography */
  --text-bright: #ffffff;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --text-inverse: #000000;

  /* Form & Interactive */
  --input-bg: rgba(0, 0, 0, 0.2);
  --input-focus: rgba(0, 0, 0, 0.4);
  --skeleton-bg: rgba(255, 255, 255, 0.05);
  --skeleton-grad: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.05) 75%
  );
  --qr-bg: #ffffff;

  /* Brand Colors */
  --brand-nix: #ffffff;
  --brand-void: #94a3b8;
  --brand-whatsapp: #25d366;
  --brand-whatsapp-glass: rgba(37, 211, 102, 0.15);
  --brand-telegram: #0088cc;
  --brand-telegram-glass: rgba(0, 136, 204, 0.15);

  /* Sidebar & Navigation */
  --sidebar-bg: rgba(15, 17, 26, 0.88);
  --sidebar-bg-light: rgba(15, 17, 26, 0.7);
  --btn-toggle-bg: rgba(15, 17, 26, 0.7);
  --nav-backdrop: rgba(0, 0, 0, 0.2);
  --link-hover-bg: rgba(255, 255, 255, 0.05);
  --link-text: #cbd5e1;
  --shadow-sm: rgba(0, 0, 0, 0.2);
  --shadow-md: rgba(0, 0, 0, 0.4);
  --shadow-lg: rgba(0, 0, 0, 0.5);

  --radius-xlg: 75px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --transition: all 0.3s ease;
}

body.theme-midnight {
  /* Base Backgrounds */
  --bg-main: #020617;
  --bg-panel: rgba(15, 23, 42, 0.95);
  --bg-container: #020617;
  --bg-header: rgba(15, 23, 42, 0.85);
  --bg-modal: rgba(15, 23, 42, 0.98);
  --bg-overlay: rgba(2, 6, 23, 0.8);

  /* Glass & UI Elements */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-bg-hover: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(139, 92, 246, 0.1);
  --glass-border-strong: rgba(139, 92, 246, 0.25);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

  /* Primary Accents (Premium Midnight Purple) */
  --accent: #8b5cf6;
  --accent-hover: #7c3aed;
  --accent-glass: rgba(139, 92, 246, 0.15);
  --accent-glass-strong: rgba(139, 92, 246, 0.3);
  --accent-glow: rgba(139, 92, 246, 0.2);

  /* Button & Chat Gradients */
  --btn-primary-bg: linear-gradient(135deg, var(--accent), var(--accent-hover));
  --btn-primary-hover: linear-gradient(
    135deg,
    var(--accent-hover),
    var(--accent)
  );
  --btn-text: #ffffff;
  --msg-bubble-bg: rgba(255, 255, 255, 0.05);
  --msg-own-bg: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.3),
    rgba(124, 58, 237, 0.1)
  );

  /* Status Colors */
  --success: #10b981;
  --success-glass: rgba(16, 185, 129, 0.1);
  --error: #f43f5e;
  --error-glass: rgba(244, 63, 94, 0.15);
  --error-border: rgba(244, 63, 94, 0.3);
  --warning: #f59e0b;

  /* Typography */
  --text-bright: #ffffff;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --text-inverse: #020617;

  /* Form & Interactive */
  --input-bg: rgba(0, 0, 0, 0.25);
  --input-focus: rgba(139, 92, 246, 0.15);
  --skeleton-bg: rgba(255, 255, 255, 0.05);
  --skeleton-grad: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.05) 75%
  );
  --qr-bg: #ffffff;

  /* Brand Colors */
  --brand-nix: #ffffff;
  --brand-void: #8b5cf6;
  --brand-whatsapp: #25d366;
  --brand-whatsapp-glass: rgba(37, 211, 102, 0.15);
  --brand-telegram: #0088cc;
  --brand-telegram-glass: rgba(0, 136, 204, 0.15);

  /* Sidebar & Navigation */
  --sidebar-bg: rgba(15, 23, 42, 0.88);
  --sidebar-bg-light: rgba(15, 23, 42, 0.7);
  --btn-toggle-bg: rgba(15, 23, 42, 0.7);
  --nav-backdrop: rgba(0, 0, 0, 0.2);
  --link-hover-bg: rgba(139, 92, 246, 0.1);
  --link-text: #cbd5e1;
  --shadow-sm: rgba(0, 0, 0, 0.2);
  --shadow-md: rgba(0, 0, 0, 0.4);
  --shadow-lg: rgba(0, 0, 0, 0.5);
}

body.theme-onyx {
  /* Base Backgrounds */
  --bg-main: #0c0a09;
  --bg-panel: rgba(23, 23, 23, 0.95);
  --bg-container: #0c0a09;
  --bg-header: rgba(23, 23, 23, 0.85);
  --bg-modal: rgba(23, 23, 23, 0.98);
  --bg-overlay: rgba(12, 10, 9, 0.85);

  /* Glass & UI Elements */
  --glass-bg: rgba(217, 119, 6, 0.03);
  --glass-bg-hover: rgba(217, 119, 6, 0.08);
  --glass-border: rgba(217, 119, 6, 0.15);
  --glass-border-strong: rgba(217, 119, 6, 0.3);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);

  /* Rich Gold/Amber Accent */
  --accent: #d97706;
  --accent-hover: #b45309;
  --accent-glass: rgba(217, 119, 6, 0.15);
  --accent-glass-strong: rgba(217, 119, 6, 0.3);
  --accent-glow: rgba(217, 119, 6, 0.2);

  /* Button & Chat Gradients */
  --btn-primary-bg: linear-gradient(135deg, var(--accent), var(--accent-hover));
  --btn-primary-hover: linear-gradient(
    135deg,
    var(--accent-hover),
    var(--accent)
  );
  --btn-text: #ffffff;
  --msg-bubble-bg: rgba(255, 255, 255, 0.04);
  --msg-own-bg: linear-gradient(
    135deg,
    rgba(217, 119, 6, 0.3),
    rgba(180, 83, 9, 0.1)
  );

  /* Status Colors */
  --success: #14b8a6;
  --success-glass: rgba(20, 184, 166, 0.1);
  --error: #ef4444;
  --error-glass: rgba(239, 68, 68, 0.15);
  --error-border: rgba(239, 68, 68, 0.3);
  --warning: #f59e0b;

  /* Typography */
  --text-bright: #ffffff;
  --text-main: #f5f5f5;
  --text-muted: #a3a3a3;
  --text-dim: #737373;
  --text-inverse: #0c0a09;

  /* Form & Interactive */
  --input-bg: rgba(0, 0, 0, 0.3);
  --input-focus: rgba(217, 119, 6, 0.2);
  --skeleton-bg: rgba(255, 255, 255, 0.05);
  --skeleton-grad: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.05) 75%
  );
  --qr-bg: #ffffff;

  /* Brand Colors */
  --brand-nix: #ffffff;
  --brand-void: #d97706;
  --brand-whatsapp: #25d366;
  --brand-whatsapp-glass: rgba(37, 211, 102, 0.15);
  --brand-telegram: #0088cc;
  --brand-telegram-glass: rgba(0, 136, 204, 0.15);

  /* Consistency Elements */
  --sidebar-bg: rgba(23, 23, 23, 0.9);
  --sidebar-bg-light: rgba(23, 23, 23, 0.7);
  --btn-toggle-bg: rgba(23, 23, 23, 0.7);
  --nav-backdrop: rgba(0, 0, 0, 0.3);
  --link-hover-bg: rgba(217, 119, 6, 0.1);
  --link-text: #d4d4d8;
  --shadow-sm: rgba(0, 0, 0, 0.3);
  --shadow-md: rgba(0, 0, 0, 0.5);
  --shadow-lg: rgba(0, 0, 0, 0.7);
}

body.theme-light {
  /* Base Backgrounds */
  --bg-main: #f8fafc;
  --bg-panel: #ffffff;
  --bg-container: #ffffff;
  --bg-header: rgba(255, 255, 255, 0.85);
  --bg-modal: rgba(255, 255, 255, 0.98);
  --bg-overlay: rgba(15, 23, 42, 0.4);

  /* Glass & UI Elements */
  --glass-bg: rgba(15, 23, 42, 0.03);
  --glass-bg-hover: rgba(15, 23, 42, 0.06);
  --glass-border: rgba(15, 23, 42, 0.08);
  --glass-border-strong: rgba(15, 23, 42, 0.15);
  --glass-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.08);

  /* Primary Accents (Premium Indigo) */
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-glass: rgba(79, 70, 229, 0.1);
  --accent-glass-strong: rgba(79, 70, 229, 0.2);
  --accent-glow: rgba(79, 70, 229, 0.15);

  /* Button & Chat Gradients */
  --btn-primary-bg: linear-gradient(135deg, #4f46e5, #6366f1);
  --btn-primary-hover: linear-gradient(
    135deg,
    #4338ca,
    #4f46e5
  );
  --btn-text: #ffffff;
  --msg-bubble-bg: rgba(15, 23, 42, 0.04);
  --msg-own-bg: linear-gradient(
    135deg,
    rgba(79, 70, 229, 0.15),
    rgba(99, 102, 241, 0.05)
  );

  /* Status Colors */
  --success: #059669;
  --success-glass: rgba(5, 150, 105, 0.15);
  --error: #e11d48;
  --error-glass: rgba(225, 29, 72, 0.15);
  --error-border: rgba(225, 29, 72, 0.3);
  --warning: #d97706;

  /* Typography */
  --text-bright: #020617;
  --text-main: #334155;
  --text-muted: #64748b;
  --text-dim: #94a3b8;
  --text-inverse: #ffffff;

  /* Form & Interactive */
  --input-bg: rgba(15, 23, 42, 0.04);
  --input-focus: rgba(79, 70, 229, 0.08);
  --skeleton-bg: rgba(15, 23, 42, 0.05);
  --skeleton-grad: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.03) 25%,
    rgba(15, 23, 42, 0.08) 50%,
    rgba(15, 23, 42, 0.03) 75%
  );
  --qr-bg: #ffffff;

  /* Brand Colors */
  --brand-nix: #020617;
  --brand-void: #4f46e5;
  --brand-whatsapp: #16a34a;
  --brand-whatsapp-glass: rgba(22, 163, 74, 0.15);
  --brand-telegram: #0284c7;
  --brand-telegram-glass: rgba(2, 132, 199, 0.15);

  /* Sidebar & Navigation */
  --sidebar-bg: rgba(255, 255, 255, 0.95);
  --sidebar-bg-light: rgba(255, 255, 255, 0.8);
  --btn-toggle-bg: rgba(15, 23, 42, 0.05);
  --nav-backdrop: rgba(15, 23, 42, 0.1);
  --link-hover-bg: rgba(79, 70, 229, 0.08);
  --link-text: #475569;
  --shadow-sm: rgba(15, 23, 42, 0.05);
  --shadow-md: rgba(15, 23, 42, 0.08);
  --shadow-lg: rgba(15, 23, 42, 0.12);
}

body.theme-oled {
  /* Base Backgrounds (100% Pure Black for OLED Battery Saving) */
  --bg-main: #000000;
  --bg-panel: #000000;
  --bg-container: #000000;
  --bg-header: #000000;
  --bg-modal: #000000;
  --bg-overlay: rgba(0, 0, 0, 0.9);

  /* Glass & UI Elements */
  --glass-bg: transparent;
  --glass-bg-hover: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-border-strong: rgba(255, 255, 255, 0.3);
  --glass-shadow: none;

  /* Primary Accents — Pure White */
  --accent: #ffffff;
  --accent-hover: #cccccc;
  --accent-glass: rgba(255, 255, 255, 0.1);
  --accent-glass-strong: rgba(255, 255, 255, 0.2);
  --accent-glow: transparent;

  /* Button & Chat Gradients */
  --btn-primary-bg: #ffffff;
  --btn-primary-hover: #e5e5e5;
  --btn-text: #000000;
  --msg-bubble-bg: transparent;
  --msg-own-bg: rgba(255, 255, 255, 0.15);

  /* Status Colors — Only error uses red (muted to blend in OLED) */
  --success: #ffffff;
  --success-glass: rgba(255, 255, 255, 0.1);
  --error: #b91c1c; /* Deep, muted red */
  --error-glass: rgba(185, 28, 28, 0.15);
  --error-border: rgba(185, 28, 28, 0.3);
  --warning: #ffffff;

  /* Typography — High Contrast B&W */
  --text-bright: #ffffff;
  --text-main: #e5e5e5;
  --text-muted: #a3a3a3;
  --text-dim: #737373;
  --text-inverse: #000000;

  /* Form & Interactive */
  --input-bg: #000000;
  --input-focus: rgba(255, 255, 255, 0.1);
  --skeleton-bg: #000000;
  --skeleton-grad: linear-gradient(
    90deg,
    #000000 25%,
    #1a1a1a 50%,
    #000000 75%
  );
  --qr-bg: #ffffff;

  /* Brand Colors — Pure B&W */
  --brand-nix: #ffffff;
  --brand-void: #ffffff;
  --brand-whatsapp: #ffffff;
  --brand-whatsapp-glass: rgba(255, 255, 255, 0.1);
  --brand-telegram: #ffffff;
  --brand-telegram-glass: rgba(255, 255, 255, 0.1);

  /* Sidebar & Navigation */
  --sidebar-bg: #000000;
  --sidebar-bg-light: #000000;
  --btn-toggle-bg: #000000;
  --nav-backdrop: rgba(0, 0, 0, 0.8);
  --link-hover-bg: rgba(255, 255, 255, 0.1);
  --link-text: #ffffff;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}