/* ==========================================================
   WhatsApp Bot Dashboard - Unified Theme System (Dark / Light)
   ========================================================== */

   :root,
   [data-theme="dark"] {
     color-scheme: dark;
     --bg: #07090e;
     --surface: #0b111e;
     --card: #0f172a;
     --card-bg: rgba(15, 23, 42, 0.85);
     --card-border: rgba(148, 163, 184, 0.14);
     --card-hover: rgba(30, 41, 59, 0.65);
     --text: #f8fafc;
     --text-muted: #94a3b8;
     --muted: #94a3b8;
     --heading: #ffffff;
     --accent: #38bdf8;
     --accent-glow: rgba(56, 189, 248, 0.28);
     --accent-gradient: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
     --input-bg: rgba(7, 11, 22, 0.8);
     --input-border: rgba(148, 163, 184, 0.2);
     --input-focus-border: #38bdf8;
     --input-focus-bg: rgba(10, 16, 32, 0.95);
     --code-bg: #050811;
     --table-head-bg: rgba(15, 23, 42, 0.9);
     --table-row-even: rgba(15, 23, 42, 0.35);
     --table-row-hover: rgba(56, 189, 248, 0.07);
     --modal-overlay: rgba(3, 7, 18, 0.85);
     --modal-bg: #0f172a;
     --tab-bg: rgba(3, 7, 18, 0.85);
     --tab-hover: rgba(255, 255, 255, 0.05);
     --tab-active-bg: rgba(56, 189, 248, 0.14);
     --tab-active-border: rgba(56, 189, 248, 0.35);
     --item-bg: rgba(7, 11, 22, 0.6);
     --item-hover-bg: rgba(10, 16, 32, 0.85);
     --green: #10b981;
     --green-glow: rgba(16, 185, 129, 0.25);
     --red: #f43f5e;
     --amber: #f59e0b;
     --purple: #a855f7;
     --purple-glow: rgba(168, 85, 247, 0.3);
     --gold: #fbbf24;
     --gold-glow: rgba(251, 191, 36, 0.25);
     --gold-gradient: linear-gradient(135deg, #fde047 0%, #d97706 100%);
     --shadow-card: 0 20px 45px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
     --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
     --body-gradient: radial-gradient(ellipse 65% 55% at 50% -10%, rgba(56, 189, 248, 0.12) 0%, transparent 60%),
                       radial-gradient(ellipse 50% 40% at 85% 90%, rgba(14, 165, 233, 0.07) 0%, transparent 50%),
                       radial-gradient(ellipse 45% 35% at 15% 85%, rgba(99, 102, 241, 0.05) 0%, transparent 50%);
   }
   
   html[data-theme="light"],
   [data-theme="light"] {
     color-scheme: light !important;
     --bg: #f8fafc !important;
     --surface: #ffffff !important;
     --card: #ffffff !important;
     --card-bg: #ffffff !important;
     --card-border: #e2e8f0 !important;
     --card-hover: #f1f5f9 !important;
     --text: #0f172a !important;
     --text-muted: #64748b !important;
     --muted: #64748b !important;
     --heading: #0f172a !important;
     --accent: #0284c7 !important;
     --accent-glow: rgba(2, 132, 199, 0.2) !important;
     --accent-gradient: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
     --input-bg: #ffffff !important;
     --input-border: #cbd5e1 !important;
     --input-focus-border: #0284c7 !important;
     --input-focus-bg: #ffffff !important;
     --code-bg: #f8fafc !important;
     --table-head-bg: #f8fafc !important;
     --table-row-even: #f8fafc !important;
     --table-row-hover: rgba(2, 132, 199, 0.06) !important;
     --modal-overlay: rgba(15, 23, 42, 0.5) !important;
     --modal-bg: #ffffff !important;
     --tab-bg: #f1f5f9 !important;
     --tab-hover: #e2e8f0 !important;
     --tab-active-bg: #ffffff !important;
     --tab-active-border: #0284c7 !important;
     --item-bg: #f8fafc !important;
     --item-hover-bg: #f1f5f9 !important;
     --green: #059669 !important;
     --green-glow: rgba(5, 150, 105, 0.2) !important;
     --red: #e11d48 !important;
     --amber: #d97706 !important;
     --purple: #9333ea !important;
     --purple-glow: rgba(147, 51, 234, 0.2) !important;
     --gold: #d97706 !important;
     --gold-glow: rgba(217, 119, 6, 0.2) !important;
     --gold-gradient: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
     --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
     --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
     --body-gradient: radial-gradient(ellipse 70% 50% at 50% -10%, rgba(14, 165, 233, 0.08) 0%, transparent 60%),
                       radial-gradient(ellipse 50% 50% at 90% 90%, rgba(99, 102, 241, 0.04) 0%, transparent 50%) !important;
   }
   
   /* ==========================================================
      Smooth Theme Transitions
      ========================================================== */
   body {
     transition: background-color 0.2s ease, color 0.2s ease;
     background-color: var(--bg);
     background-image: var(--body-gradient);
   }
   
   .sidebar, .side, .card, .user-info, .side-foot, input, select, textarea, .tab, .status-bar, .api-item, .user-row, .modal, .instructions, .info-item, .rule-box {
     transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
   }
   
   /* ==========================================================
      COMPLETE & OVERALL LIGHT MODE OVERRIDES
      ========================================================== */
   
   [data-theme="light"] body {
     background-color: #f8fafc !important;
     color: #0f172a !important;
     background-image: radial-gradient(ellipse 70% 50% at 50% -10%, rgba(14, 165, 233, 0.08) 0%, transparent 65%),
                       radial-gradient(ellipse 50% 50% at 100% 100%, rgba(16, 185, 129, 0.04) 0%, transparent 50%) !important;
   }
   
   /* Typography & Text in Light Mode - High Contrast & Optimal Readability */
   [data-theme="light"] h1,
   [data-theme="light"] h2,
   [data-theme="light"] h3,
   [data-theme="light"] h4,
   [data-theme="light"] .brand h1,
   [data-theme="light"] .brand-name,
   [data-theme="light"] .page-title h1,
   [data-theme="light"] .page-head h1,
   [data-theme="light"] .user-name,
   [data-theme="light"] .api-name,
   [data-theme="light"] .card h2,
   [data-theme="light"] .card-title,
   [data-theme="light"] .coin-value,
   [data-theme="light"] .rule-title,
   [data-theme="light"] .info-item .val,
   [data-theme="light"] .instructions strong,
   [data-theme="light"] .modal h2,
   [data-theme="light"] #chatThreadTitle {
     color: #0f172a !important;
     font-weight: 700;
   }
   
   [data-theme="light"] label,
   [data-theme="light"] .form-group label,
   [data-theme="light"] .field-group label {
     color: #1e293b !important;
     font-weight: 600 !important;
     font-size: 0.88rem !important;
   }
   
   [data-theme="light"] p,
   [data-theme="light"] .brand p,
   [data-theme="light"] .brand-sub,
   [data-theme="light"] .sub,
   [data-theme="light"] .page-title p,
   [data-theme="light"] .page-head p,
   [data-theme="light"] .hint,
   [data-theme="light"] p.hint,
   [data-theme="light"] .user-meta,
   [data-theme="light"] .user-meta span,
   [data-theme="light"] .api-meta,
   [data-theme="light"] .api-meta span,
   [data-theme="light"] .cmd-desc,
   [data-theme="light"] .rule-text,
   [data-theme="light"] .info-item .label,
   [data-theme="light"] .instructions ol,
   [data-theme="light"] .instructions li,
   [data-theme="light"] .user-label,
   [data-theme="light"] .code-label,
   [data-theme="light"] .coin-label,
   [data-theme="light"] .theme-name,
   [data-theme="light"] .theme-label-text {
     color: #475569 !important;
   }
   
   [data-theme="light"] a,
   [data-theme="light"] .links a {
     color: #0284c7 !important;
     font-weight: 600 !important;
     text-decoration: underline;
   }
   
   [data-theme="light"] a:hover,
   [data-theme="light"] .links a:hover {
     color: #0369a1 !important;
   }
   
   [data-theme="light"] .api-url {
     background: #f1f5f9 !important;
     color: #0369a1 !important;
     border: 1px solid #e2e8f0 !important;
     border-radius: 8px !important;
     padding: 8px 12px !important;
     font-family: 'JetBrains Mono', monospace !important;
     font-size: 0.82rem !important;
     font-weight: 600 !important;
   }
   
   [data-theme="light"] .input-icon,
   [data-theme="light"] .password-toggle svg {
     stroke: #64748b !important;
   }
   
   [data-theme="light"] .password-toggle:hover svg {
     stroke: #0f172a !important;
   }
   
   /* Badge styling in both modes */
   .badge.heading-badge {
     background: rgba(56, 189, 248, 0.15);
     color: #38bdf8;
     border: 1px solid rgba(56, 189, 248, 0.3);
   }
   
   [data-theme="light"] .badge.heading-badge {
     background: #e0f2fe !important;
     color: #0284c7 !important;
     border-color: #bae6fd !important;
     font-weight: 700 !important;
   }
   
   /* Status in Light Mode */
   [data-theme="light"] .status.wait {
     background: #fffbeb !important;
     color: #b45309 !important;
     border: 1px solid #fde68a !important;
   }
   
   [data-theme="light"] .status.ok {
     background: #f0fdf4 !important;
     color: #15803d !important;
     border: 1px solid #bbf7d0 !important;
   }
   
   [data-theme="light"] .status.err {
     background: #fef2f2 !important;
     color: #b91c1c !important;
     border: 1px solid #fecaca !important;
   }
   
   [data-theme="light"] .need-link {
     background: #fff7ed !important;
     border-color: #fed7aa !important;
     color: #c2410c !important;
   }
   
   [data-theme="light"] .need-link a {
     color: #ea580c !important;
     font-weight: 700 !important;
   }
   
   [data-theme="light"] #adminPairCodeBox {
     background: #f0f9ff !important;
     border: 1px solid #bae6fd !important;
     color: #0284c7 !important;
     box-shadow: 0 2px 10px rgba(2, 132, 199, 0.08) inset !important;
   }
   
   [data-theme="light"] #chatList {
     background: #ffffff !important;
     border-color: #e2e8f0 !important;
   }
   
   /* Sidebar & Navigation in Light Mode */
   [data-theme="light"] .sidebar,
   [data-theme="light"] .side {
     background: #ffffff !important;
     border-color: #e2e8f0 !important;
     box-shadow: 2px 0 16px rgba(0, 0, 0, 0.04) !important;
   }
   
   [data-theme="light"] .brand {
     border-bottom-color: #e2e8f0 !important;
   }
   
   [data-theme="light"] .brand-icon svg {
     stroke: #ffffff !important;
   }
   
   [data-theme="light"] .brand-ico {
     color: #ffffff !important;
   }
   
   [data-theme="light"] .logo-badge svg {
     stroke: #ffffff !important;
   }
   
   [data-theme="light"] .nav a {
     color: #475569 !important;
   }
   
   [data-theme="light"] .nav a:hover {
     background: #f1f5f9 !important;
     color: #0f172a !important;
     border-color: #e2e8f0 !important;
   }
   
   [data-theme="light"] .nav a.active {
     background: #e0f2fe !important;
     color: #0284c7 !important;
     border-color: #bae6fd !important;
     box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12) !important;
   }
   
   [data-theme="light"] .nav a.active svg {
     stroke: #0284c7 !important;
     opacity: 1 !important;
   }
   
   [data-theme="light"] .user-info {
     background: #f8fafc !important;
     border-color: #e2e8f0 !important;
   }
   
   [data-theme="light"] .user-avatar {
     background: #e0f2fe !important;
     color: #0284c7 !important;
   }
   
   [data-theme="light"] .side-foot {
     border-top-color: #e2e8f0 !important;
   }
   
   /* Cards & Containers in Light Mode */
   [data-theme="light"] .card {
     background: #ffffff !important;
     border-color: #e2e8f0 !important;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
   }
   
   [data-theme="light"] .card-head,
   [data-theme="light"] .card-header-taftishi {
     border-bottom-color: #f1f5f9 !important;
   }
   
   [data-theme="light"] .status-bar,
   [data-theme="light"] .instructions,
   [data-theme="light"] .info-item,
   [data-theme="light"] .cooldown,
   [data-theme="light"] .rule-box {
     background: #f8fafc !important;
     border-color: #e2e8f0 !important;
   }
   
   [data-theme="light"] .cmd-item,
   [data-theme="light"] .api-item,
   [data-theme="light"] .user-row {
     background: #f8fafc !important;
     border-color: #e2e8f0 !important;
   }
   
   [data-theme="light"] .api-item:hover,
   [data-theme="light"] .user-row:hover {
     background: #f1f5f9 !important;
     border-color: #cbd5e1 !important;
   }
   
   [data-theme="light"] .user-avatar-badge {
     background: #e0f2fe !important;
     border-color: #bae6fd !important;
     color: #0284c7 !important;
   }
   
   /* Form Controls in Light Mode */
   [data-theme="light"] input,
   [data-theme="light"] select,
   [data-theme="light"] textarea {
     background: #ffffff !important;
     color: #0f172a !important;
     border-color: #cbd5e1 !important;
   }
   
   [data-theme="light"] input::placeholder,
   [data-theme="light"] textarea::placeholder {
     color: #94a3b8 !important;
   }
   
   [data-theme="light"] input:focus,
   [data-theme="light"] select:focus,
   [data-theme="light"] textarea:focus {
     background: #ffffff !important;
     border-color: #0284c7 !important;
     box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.16) !important;
   }
   
   /* Tabs & Switchers in Light Mode */
   [data-theme="light"] .tabs,
   [data-theme="light"] .mode-switch {
     background: #f1f5f9 !important;
     border-color: #e2e8f0 !important;
   }
   
   [data-theme="light"] .tab {
     color: #64748b !important;
   }
   
   [data-theme="light"] .tab:hover {
     background: #e2e8f0 !important;
     color: #0f172a !important;
   }
   
   [data-theme="light"] .tab.active {
     background: #ffffff !important;
     color: #0284c7 !important;
     border-color: #cbd5e1 !important;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
   }
   
   /* Buttons in Light Mode */
   [data-theme="light"] button.btn,
   [data-theme="light"] button.primary,
   [data-theme="light"] button.btn-login,
   [data-theme="light"] button[type="submit"]:not(.secondary):not(.danger):not(.ghost) {
     color: #ffffff !important;
   }
   
   [data-theme="light"] button.btn.blue {
     color: #ffffff !important;
   }
   
   [data-theme="light"] button.secondary {
     background: #f1f5f9 !important;
     color: #1e293b !important;
     border: 1px solid #cbd5e1 !important;
     box-shadow: none !important;
   }
   
   [data-theme="light"] button.secondary:hover {
     background: #e2e8f0 !important;
     color: #0f172a !important;
     border-color: #94a3b8 !important;
   }
   
   [data-theme="light"] button.ghost {
     background: transparent !important;
     color: #1e293b !important;
     border-color: #cbd5e1 !important;
   }
   
   [data-theme="light"] button.ghost:hover {
     background: #f1f5f9 !important;
   }
   
   /* Tables in Light Mode */
   [data-theme="light"] .contacts-table-wrap {
     background: #ffffff !important;
     border-color: #e2e8f0 !important;
   }
   
   [data-theme="light"] table.data-table th {
     background: #f8fafc !important;
     color: #475569 !important;
     border-bottom-color: #e2e8f0 !important;
   }
   
   [data-theme="light"] table.data-table td {
     border-bottom-color: #f1f5f9 !important;
     color: #0f172a !important;
   }
   
   [data-theme="light"] table.data-table tr:hover td {
     background: #f8fafc !important;
   }
   
   [data-theme="light"] .chat-item-row {
     border-bottom-color: #f1f5f9 !important;
   }
   
   [data-theme="light"] .chat-item-row:hover {
     background: #f8fafc !important;
   }
   
   /* Chat Bubbles in Light Mode */
   [data-theme="light"] .chat-bubble-stream {
     background: #f8fafc !important;
     border-color: #e2e8f0 !important;
   }
   
   [data-theme="light"] .chat-bubble.in {
     background: #ffffff !important;
     border-color: #e2e8f0 !important;
     color: #0f172a !important;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
   }
   
   [data-theme="light"] .chat-bubble.out {
     background: var(--accent-gradient) !important;
     color: #ffffff !important;
   }
   
   [data-theme="light"] .chat-bubble.out .chat-time {
     color: rgba(255, 255, 255, 0.85) !important;
   }
   
   /* Response Grouping & Advanced Options in Light Mode */
   [data-theme="light"] details.advanced {
     background: #f8fafc !important;
     border: 1px solid #e2e8f0 !important;
     border-radius: 12px !important;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
   }
   
   [data-theme="light"] details.advanced summary {
     color: #0284c7 !important;
     font-weight: 700 !important;
     font-size: 0.9rem !important;
   }
   
   [data-theme="light"] details.advanced summary:hover {
     color: #0369a1 !important;
   }
   
   [data-theme="light"] details.advanced[open] summary {
     border-bottom: 1px solid #e2e8f0 !important;
     margin-bottom: 14px !important;
     padding-bottom: 8px !important;
   }
   
   [data-theme="light"] .personal-info-box {
     background: #f0f9ff !important;
     border: 1px solid #bae6fd !important;
     border-radius: 12px !important;
     box-shadow: 0 2px 8px rgba(2, 132, 199, 0.06) !important;
   }
   
   [data-theme="light"] .personal-info-box label {
     color: #0f172a !important;
     font-weight: 700 !important;
   }
   
   [data-theme="light"] .personal-info-box .sub {
     color: #475569 !important;
   }
   
   [data-theme="light"] .personal-info-box input {
     background: #ffffff !important;
     border: 1px solid #cbd5e1 !important;
     color: #0f172a !important;
   }
   
   /* Phrases & Filter List in Light Mode */
   [data-theme="light"] .phrase-item {
     background: #ffffff !important;
     border: 1px solid #e2e8f0 !important;
     border-radius: 10px !important;
     color: #0f172a !important;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
   }
   
   [data-theme="light"] .phrase-item:hover {
     background: #f8fafc !important;
     border-color: #cbd5e1 !important;
   }
   
   [data-theme="light"] .phrase-item span {
     color: #0f172a !important;
     font-weight: 600 !important;
   }
   
   [data-theme="light"] .phrase-item button.danger {
     background: #fff1f2 !important;
     color: #e11d48 !important;
     border: 1px solid #fecdd3 !important;
   }
   
   [data-theme="light"] .phrase-item button.danger:hover {
     background: #ffe4e6 !important;
     border-color: #fda4af !important;
     color: #be123c !important;
   }
   
   [data-theme="light"] #phraseList .hint {
     color: #64748b !important;
   }
   
   /* Test outputs and preview areas in Light Mode */
   [data-theme="light"] .test-out {
     background: #f8fafc !important;
     border-color: #e2e8f0 !important;
     color: #0f172a !important;
   }
   
   [data-theme="light"] #testWhatsAppPreview {
     background: #f0fdf4 !important;
     border-color: #86efac !important;
     color: #15803d !important;
   }
   
   [data-theme="light"] #testScreenshotSection > div,
   [data-theme="light"] #editTestScreenshotSection > div {
     background: #f8fafc !important;
     border-color: #e2e8f0 !important;
   }
   
   /* Modals & Dialogs in Light Mode */
   [data-theme="light"] .modal-bg {
     background: rgba(15, 23, 42, 0.5) !important;
   }
   
   [data-theme="light"] .modal,
   [data-theme="light"] .modal-card {
     background: #ffffff !important;
     border-color: #e2e8f0 !important;
     color: #0f172a !important;
     box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12) !important;
   }
   
   [data-theme="light"] .toast {
     background: #ffffff !important;
     border-color: #e2e8f0 !important;
     color: #0f172a !important;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
   }
   
   /* Coin Card in Light Mode */
   [data-theme="light"] .coin-hero {
     background: #fffbeb !important;
     border-color: #fde68a !important;
     box-shadow: 0 2px 10px rgba(251, 191, 36, 0.1) !important;
   }
   
   [data-theme="light"] .coin-value {
     color: #92400e !important;
   }
   
   /* QR Code & Pairing Display */
   [data-theme="light"] .code-display-box {
     background: #f0fdf4 !important;
     border-color: #86efac !important;
     box-shadow: none !important;
   }
   
   [data-theme="light"] .code-value {
     color: #15803d !important;
     text-shadow: none !important;
   }
   
   [data-theme="light"] .qr-frame {
     background: #ffffff !important;
     border: 1px solid #e2e8f0 !important;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 0 0 4px rgba(2, 132, 199, 0.15) !important;
   }
   
   /* Status Badges & Pills */
   [data-theme="light"] .status-pill {
     background: #f1f5f9 !important;
     border-color: #cbd5e1 !important;
     color: #334155 !important;
     font-weight: 600 !important;
   }
   
   [data-theme="light"] .status-pill.ok {
     background: #dcfce7 !important;
     color: #15803d !important;
     border-color: #86efac !important;
     font-weight: 700 !important;
   }
   
   [data-theme="light"] .status-pill.warn {
     background: #fef3c7 !important;
     color: #b45309 !important;
     border-color: #fde68a !important;
     font-weight: 700 !important;
   }
   
   [data-theme="light"] .status-pill.err {
     background: #fee2e2 !important;
     color: #b91c1c !important;
     border-color: #fca5a5 !important;
     font-weight: 700 !important;
   }
   
   [data-theme="light"] .badge.method {
     background: #e0f2fe !important;
     color: #0284c7 !important;
     border-color: #bae6fd !important;
   }
   
   [data-theme="light"] .badge.on {
     background: #dcfce7 !important;
     color: #15803d !important;
     border-color: #86efac !important;
   }
   
   [data-theme="light"] .badge.off {
     background: #fee2e2 !important;
     color: #b91c1c !important;
     border-color: #fca5a5 !important;
   }
   
   [data-theme="light"] .taftishi-badge {
     background: #e0f2fe !important;
     border-color: #bae6fd !important;
     color: #0284c7 !important;
   }
   
   [data-theme="light"] .cmd-name {
     background: #e0f2fe !important;
     color: #0284c7 !important;
   }
   
   [data-theme="light"] .divider {
     color: #94a3b8 !important;
   }
   
   [data-theme="light"] .divider::before,
   [data-theme="light"] .divider::after {
     background: #e2e8f0 !important;
   }
   
   [data-theme="light"] pre,
   [data-theme="light"] code {
     background: #f1f5f9 !important;
     color: #0f172a !important;
   }
   
   /* ==========================================================
      Universal Theme Toggle Components
      ========================================================== */
   
   /* Floating top-right toggle (for Auth pages) */
   .theme-toggle-floating {
     position: fixed;
     top: 18px;
     right: 20px;
     z-index: 999;
   }
   
   .theme-toggle-pill {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 14px;
     background: var(--surface);
     border: 1px solid var(--card-border);
     border-radius: 999px;
     color: var(--text);
     font-family: inherit;
     font-size: 0.82rem;
     font-weight: 600;
     cursor: pointer;
     box-shadow: var(--shadow-sm);
     transition: all 0.2s ease;
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     user-select: none;
   }
   
   .theme-toggle-pill:hover {
     border-color: var(--accent);
     transform: translateY(-1px);
     box-shadow: 0 4px 14px var(--accent-glow);
   }
   
   .theme-toggle-pill:active {
     transform: translateY(0);
   }
   
   /* Sidebar Theme Toggle Button */
   .theme-toggle-sidebar {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 9px 12px;
     background: rgba(148, 163, 184, 0.06);
     border: 1px solid var(--card-border);
     border-radius: 10px;
     color: var(--text);
     font-family: inherit;
     font-size: 0.82rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s ease;
     user-select: none;
   }
   
   .theme-toggle-sidebar:hover {
     background: rgba(56, 189, 248, 0.08);
     border-color: var(--accent);
     color: var(--accent);
   }
   
   [data-theme="light"] .theme-toggle-sidebar {
     background: #f1f5f9 !important;
     border-color: #cbd5e1 !important;
     color: #334155 !important;
   }
   
   [data-theme="light"] .theme-toggle-sidebar:hover {
     background: #e0f2fe !important;
     border-color: #0284c7 !important;
     color: #0284c7 !important;
   }
   
   /* Toggle Switch Visual Track */
   .theme-switch-track {
     position: relative;
     width: 38px;
     height: 20px;
     background: rgba(148, 163, 184, 0.35);
     border-radius: 999px;
     transition: background 0.25s ease;
     display: flex;
     align-items: center;
     padding: 2px;
     flex-shrink: 0;
   }
   
   [data-theme="light"] .theme-switch-track {
     background: #0284c7 !important;
   }
   
   .theme-switch-thumb {
     width: 16px;
     height: 16px;
     border-radius: 50%;
     background: #ffffff;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
     transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     align-items: center;
     justify-content: center;
     transform: translateX(0);
   }
   
   [data-theme="light"] .theme-switch-thumb {
     transform: translateX(18px) !important;
   }
   
   .theme-switch-thumb svg {
     width: 10px;
     height: 10px;
   }
   
   .theme-toggle-icon {
     display: flex;
     align-items: center;
     gap: 6px;
   }
   
   .theme-icon-sun {
     display: none;
   }
   
   .theme-icon-moon {
     display: block;
   }
   
   [data-theme="light"] .theme-icon-sun {
     display: block !important;
     color: #d97706 !important;
   }
   
   [data-theme="light"] .theme-icon-moon {
     display: none !important;
   }
   
   /* ==========================================================
      Login & Primary Action Button Pulse Animations
      ========================================================== */
   #loginBtn,
   button.primary,
   button.btn-login {
     position: relative;
     transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                 box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                 filter 0.2s ease,
                 background-color 0.2s ease;
   }
   
   #loginBtn:hover,
   #loginBtn:focus-visible,
   #loginBtn:focus,
   button.btn-login:hover,
   button.btn-login:focus-visible,
   button.btn-login:focus {
     animation: btn-theme-pulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
     outline: none;
   }
   
   #loginBtn:active,
   button.btn-login:active {
     transform: scale(0.985) translateY(1px);
     animation: none !important;
   }
   
   #loginBtn:disabled,
   button.btn-login:disabled {
     animation: none !important;
     transform: none !important;
   }
   
   @keyframes btn-theme-pulse {
     0% {
       transform: scale(1);
       box-shadow: 0 4px 16px var(--accent-glow, rgba(56, 189, 248, 0.25)), 0 0 0 0 rgba(56, 189, 248, 0);
     }
     50% {
       transform: scale(1.018);
       box-shadow: 0 8px 26px var(--accent-glow, rgba(56, 189, 248, 0.45)), 0 0 14px var(--accent-glow, rgba(56, 189, 248, 0.3)), 0 0 0 3px rgba(56, 189, 248, 0.18);
     }
     100% {
       transform: scale(1);
       box-shadow: 0 4px 16px var(--accent-glow, rgba(56, 189, 248, 0.25)), 0 0 0 0 rgba(56, 189, 248, 0);
     }
   }
   
   [data-theme="light"] #loginBtn:hover,
   [data-theme="light"] #loginBtn:focus-visible,
   [data-theme="light"] #loginBtn:focus {
     animation: btn-theme-pulse-light 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
   }
   
   @keyframes btn-theme-pulse-light {
     0% {
       transform: scale(1);
       box-shadow: 0 4px 16px rgba(2, 132, 199, 0.25), 0 0 0 0 rgba(2, 132, 199, 0);
     }
     50% {
       transform: scale(1.018);
       box-shadow: 0 8px 24px rgba(2, 132, 199, 0.35), 0 0 12px rgba(2, 132, 199, 0.25), 0 0 0 3px rgba(2, 132, 199, 0.2);
     }
     100% {
       transform: scale(1);
       box-shadow: 0 4px 16px rgba(2, 132, 199, 0.25), 0 0 0 0 rgba(2, 132, 199, 0);
     }
   }