/* ==========================================================
   AMMAN BOARD — Design System 2026
   Professional blue palette. Loaded after inline styles.
   ========================================================== */

/* ---- Accent variables ---- */
:root {
  --ab-accent:       #2563EB;
  --ab-accent-2:     #1D4ED8;
  --ab-accent-3:     #3B82F6;
  --ab-glow:         rgba(37, 99, 235, 0.20);
  --ab-grad:         linear-gradient(135deg, #1E40AF 0%, #2563EB 50%, #3B82F6 100%);
  --ab-grad-soft:    linear-gradient(135deg, rgba(37,99,235,0.09), rgba(37,99,235,0.04));
  --ab-glass-bg:     rgba(255,255,255,0.030);
  --ab-glass-border: rgba(255,255,255,0.075);
  --ab-light:        #93C5FD;
  --ab-lighter:      #BFDBFE;
  /* Messenger */
  --msg-bg:                 #0e1117;
  --msg-sidebar-bg:         #131720;
  --msg-border:             rgba(255,255,255,0.07);
  --msg-text-primary:       #e2e8f0;
  --msg-text-secondary:     #64748b;
  --msg-text-time:          #475569;
  --msg-input-bg:           rgba(255,255,255,0.05);
  --msg-input-border:       rgba(255,255,255,0.08);
  --msg-convo-hover:        rgba(255,255,255,0.04);
  --msg-convo-active:       rgba(99,102,241,0.10);
  --msg-bubble-sent-bg:     #1e3264;
  --msg-bubble-sent-text:   #c8d7ff;
  --msg-bubble-recv-bg:     #1a2030;
  --msg-bubble-recv-text:   #c8d1e0;
  --msg-bubble-recv-border: rgba(255,255,255,0.07);
  --msg-dots-menu-bg:       #1a2035;
  --msg-dots-menu-border:   rgba(255,255,255,0.10);
  --msg-date-sep-bg:        rgba(255,255,255,0.04);
  --msg-date-sep-border:    rgba(255,255,255,0.07);
  --msg-disclaimer-bg:      #131720;
  --msg-disclaimer-text:    #334155;
  --msg-online-dot-border:  #131720;
}

/* ==========================================
   BACKGROUND
   ========================================== */
html {
  background: #09090E;
  overscroll-behavior: none;
}
html[data-theme="light"] { background: #F8F8F6; }
html[data-theme="cappuccino"] { background: #F5EBD5; }

body {
  overflow-x: hidden;
  background: radial-gradient(125% 125% at 50% 0%, #09090E 55%, rgba(37,99,235,0.06) 100%) !important;
}

body::before,
body::after { display: none !important; }

/* ==========================================
   NAVBAR
   ========================================== */
.navbar {
  background: rgba(4,8,20,0.75) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
}

.navbar-logo {
  background: linear-gradient(120deg, #fff 10%, var(--ab-lighter) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 4px !important;
}

.navbar-links a:hover { color: var(--ab-light) !important; }

.navbar-actions .btn-primary {
  background: var(--ab-grad) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 12px var(--ab-glow) !important;
  border-radius: 6px !important;
}
.navbar-actions .btn-primary:hover {
  box-shadow: 0 4px 20px rgba(37,99,235,0.4) !important;
  transform: translateY(-1px);
}

/* ==========================================
   HERO
   ========================================== */
.hero-overlay {
  background:
    radial-gradient(ellipse 75% 55% at 15% 35%, rgba(30,64,175,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 85% 65%, rgba(37,99,235,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 80%),
    linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(4,8,20,0.92) 100%) !important;
}

/* Gradient text on hero headline */
.hero h1 {
  background: linear-gradient(160deg, #ffffff 0%, rgba(255,255,255,0.92) 55%, var(--ab-lighter) 85%, var(--ab-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none !important;
}

/* Hero eyebrow pill */
.hero-eyebrow {
  opacity: 1 !important;
  background: rgba(37,99,235,0.10);
  border: 1px solid rgba(59,130,246,0.30);
  border-radius: 999px;
  padding: 6px 20px;
  color: var(--ab-light) !important;
  letter-spacing: 4px !important;
  text-shadow: none !important;
  font-weight: 600 !important;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  background: rgba(147,197,253,0.4) !important;
}

/* Hero primary CTA */
.hero-buttons .btn-primary {
  background: var(--ab-grad) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 22px var(--ab-glow) !important;
  letter-spacing: -0.01em !important;
}
.hero-buttons .btn-primary:hover {
  box-shadow: 0 6px 32px rgba(37,99,235,0.45) !important;
  transform: translateY(-2px) !important;
}

/* Hero secondary CTA */
.hero-buttons .btn-secondary {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  backdrop-filter: blur(12px) !important;
}
.hero-buttons .btn-secondary:hover {
  background: rgba(37,99,235,0.12) !important;
  border-color: rgba(147,197,253,0.40) !important;
}

/* ==========================================
   GLOBAL BUTTONS
   ========================================== */
.btn-primary:not(.hero-buttons .btn-primary):not(.navbar-actions .btn-primary) {
  background: var(--ab-grad) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 3px 16px var(--ab-glow) !important;
  transition: all 0.2s ease !important;
}
.btn-primary:not(.hero-buttons .btn-primary):not(.navbar-actions .btn-primary):hover {
  box-shadow: 0 6px 28px rgba(37,99,235,0.50) !important;
  transform: translateY(-1px);
}

.btn-secondary,
.btn-outline {
  border-color: rgba(37,99,235,0.32) !important;
  transition: all 0.2s ease !important;
}
.btn-secondary:hover,
.btn-outline:hover {
  border-color: rgba(147,197,253,0.60) !important;
  background: rgba(37,99,235,0.07) !important;
  box-shadow: 0 0 20px rgba(37,99,235,0.14) !important;
}

/* ==========================================
   SECTION LABELS
   ========================================== */
.section-label {
  background: var(--ab-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
}

/* Section title refinement */
.section-title {
  letter-spacing: -0.045em !important;
  line-height: 1.08 !important;
}

/* ==========================================
   VALUE STRIP
   ========================================== */
.value-strip {
  background: rgba(255,255,255,0.015) !important;
  border-top: 1px solid rgba(255,255,255,0.055) !important;
  border-bottom: 1px solid rgba(255,255,255,0.055) !important;
}
.value-icon {
  background: linear-gradient(135deg, rgba(37,99,235,0.13), rgba(30,64,175,0.08)) !important;
  border: 1px solid rgba(37,99,235,0.18) !important;
  border-radius: 10px !important;
}
.value-icon svg { color: var(--ab-light) !important; }

.value-item { transition: transform 0.22s ease; }
.value-item:hover { transform: translateY(-2px); }

/* ==========================================
   AI FINDER
   ========================================== */
.ai-finder { background: transparent !important; }

.ai-finder-input:focus {
  border-color: var(--ab-accent) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.14) !important;
}
.ai-finder-btn {
  background: var(--ab-grad) !important;
  color: #fff !important;
  box-shadow: 0 3px 16px var(--ab-glow) !important;
  border-radius: 8px !important;
}
.ai-finder-btn:hover:not(:disabled) {
  box-shadow: 0 5px 26px rgba(37,99,235,0.48) !important;
  transform: translateY(-1px);
}
.ai-finder-result {
  background: rgba(255,255,255,0.025) !important;
  border-color: rgba(37,99,235,0.15) !important;
  backdrop-filter: blur(14px) !important;
}

/* ==========================================
   CATEGORY CARDS
   ========================================== */
.category-card {
  background: rgba(255,255,255,0.022) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.22s ease !important;
  border-radius: 14px !important;
}
.category-card:hover {
  background: rgba(37,99,235,0.055) !important;
  border-color: rgba(37,99,235,0.38) !important;
  box-shadow: 0 8px 40px rgba(37,99,235,0.12), 0 0 0 1px rgba(37,99,235,0.12) !important;
  transform: translateY(-3px) !important;
}
.category-icon {
  background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(30,64,175,0.08)) !important;
  border: 1px solid rgba(37,99,235,0.20) !important;
  border-radius: 10px !important;
}
.category-icon svg { color: var(--ab-light) !important; }

/* ==========================================
   HOW IT WORKS
   ========================================== */
.how-it-works { background: rgba(255,255,255,0.012) !important; }

.step-number {
  background: var(--ab-grad) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px var(--ab-glow) !important;
  border: none !important;
  font-size: 1.1rem !important;
}
.step-connector {
  background: linear-gradient(90deg, rgba(37,99,235,0.40), transparent) !important;
}
.step:hover .step-number {
  box-shadow: 0 6px 28px rgba(37,99,235,0.55) !important;
  transform: scale(1.06);
  transition: all 0.22s ease;
}

/* ==========================================
   FEATURED / LISTING CARDS
   ========================================== */
.featured-card {
  background: rgba(255,255,255,0.022) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.22s ease !important;
  border-radius: 14px !important;
}
.featured-card:hover {
  border-color: rgba(37,99,235,0.35) !important;
  box-shadow: 0 8px 40px rgba(37,99,235,0.11) !important;
  transform: translateY(-2px) !important;
}
.featured-card-tag {
  background: rgba(37,99,235,0.10) !important;
  color: var(--ab-light) !important;
  border: 1px solid rgba(37,99,235,0.18) !important;
  border-radius: 6px !important;
}

/* ==========================================
   FOR BUSINESSES / BENEFIT CARDS
   ========================================== */
.benefit-card {
  background: rgba(255,255,255,0.022) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.22s ease !important;
  border-radius: 14px !important;
}
.benefit-card:hover {
  background: rgba(37,99,235,0.045) !important;
  border-color: rgba(37,99,235,0.35) !important;
  box-shadow: 0 8px 40px rgba(37,99,235,0.11) !important;
  transform: translateY(-3px) !important;
}
.benefit-icon {
  background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(30,64,175,0.08)) !important;
  border: 1px solid rgba(37,99,235,0.20) !important;
  border-radius: 10px !important;
}
.benefit-icon svg { color: var(--ab-light) !important; }

/* ==========================================
   BROWSER CARDS
   ========================================== */
.browser-card {
  background: rgba(255,255,255,0.022) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.22s ease !important;
  border-radius: 14px !important;
}
.browser-card:hover {
  border-color: rgba(37,99,235,0.35) !important;
  box-shadow: 0 6px 30px rgba(37,99,235,0.11) !important;
  transform: translateY(-2px) !important;
}

.browsers-list .check {
  background: linear-gradient(135deg, rgba(37,99,235,0.16), rgba(30,64,175,0.10)) !important;
  border: 1px solid rgba(37,99,235,0.22) !important;
}
.browsers-list .check svg { color: var(--ab-light) !important; }

/* ==========================================
   STATS / NUMBERS
   ========================================== */
.stat-value,
.stats-num {
  background: var(--ab-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==========================================
   FINAL CTA
   ========================================== */
.final-cta-inner {
  background: var(--ab-grad-soft) !important;
  border: 1px solid rgba(37,99,235,0.20) !important;
  position: relative;
  overflow: hidden;
  border-radius: 20px !important;
}
.final-cta-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(37,99,235,0.055) 0%, transparent 65%);
  pointer-events: none;
}

/* ==========================================
   FOOTER
   ========================================== */
.footer {
  border-top-color: rgba(255,255,255,0.055) !important;
  background: rgba(2,5,14,0.7) !important;
  backdrop-filter: blur(14px) !important;
}
.footer-col a:hover { color: var(--ab-light) !important; }

/* ==========================================
   LOGIN / SIGNUP / FORMS
   ========================================== */
.login-card {
  background: rgba(255,255,255,0.028) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(28px) !important;
  box-shadow: 0 24px 80px rgba(37,99,235,0.10), 0 0 0 1px rgba(37,99,235,0.06) !important;
}

.form-input:focus {
  border-color: var(--ab-accent) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.14) !important;
}
.form-submit {
  background: var(--ab-grad) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px var(--ab-glow) !important;
  transition: all 0.2s ease !important;
}
.form-submit:hover:not(:disabled) {
  box-shadow: 0 6px 28px rgba(37,99,235,0.50) !important;
  transform: translateY(-1px);
}
.form-footer a:hover { color: var(--ab-light) !important; }
.form-footer a.emphasis { color: var(--ab-light) !important; }

/* ==========================================
   DASHBOARD
   ========================================== */
.dash-card {
  background: rgba(255,255,255,0.024) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(14px) !important;
}

.stat-card {
  background: rgba(255,255,255,0.024) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.2s ease !important;
}
.stat-card:hover {
  border-color: rgba(37,99,235,0.28) !important;
  box-shadow: 0 4px 24px rgba(37,99,235,0.09) !important;
}

.dash-tabs {
  background: rgba(255,255,255,0.020) !important;
  border-color: rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(12px) !important;
}
.dash-tab.active {
  background: linear-gradient(135deg, rgba(37,99,235,0.20), rgba(30,64,175,0.13)) !important;
  color: var(--ab-light) !important;
  box-shadow: 0 0 0 1px rgba(37,99,235,0.18) inset !important;
}
.dash-tab:hover:not(.active) { color: rgba(255,255,255,0.9) !important; }

.listing-cat {
  background: rgba(37,99,235,0.10) !important;
  color: var(--ab-light) !important;
}

.status-approved {
  background: rgba(74,222,128,0.10) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74,222,128,0.20) !important;
}
.status-pending {
  background: rgba(251,191,36,0.10) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251,191,36,0.20) !important;
}
.status-rejected {
  background: rgba(239,68,68,0.10) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239,68,68,0.20) !important;
}

.btn-success {
  background: rgba(74,222,128,0.10) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74,222,128,0.22) !important;
}
.btn-success:hover { background: rgba(74,222,128,0.18) !important; }
.btn-danger {
  background: rgba(239,68,68,0.10) !important;
  border: 1px solid rgba(239,68,68,0.22) !important;
  color: #f87171 !important;
}
.btn-danger:hover { background: rgba(239,68,68,0.18) !important; }

.notif-badge {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

/* ==========================================
   MOBILE MENU
   ========================================== */
.mobile-menu {
  background: rgba(4,8,20,0.97) !important;
  backdrop-filter: blur(32px) !important;
  border-bottom-color: rgba(37,99,235,0.18) !important;
}

/* ==========================================
   SCROLL ANIMATIONS
   ========================================== */
.animate-on-scroll {
  transition:
    opacity 0.70s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.70s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Stagger grid children */
.categories-grid .category-card:nth-child(1) { transition-delay: 0.00s; }
.categories-grid .category-card:nth-child(2) { transition-delay: 0.07s; }
.categories-grid .category-card:nth-child(3) { transition-delay: 0.14s; }
.categories-grid .category-card:nth-child(4) { transition-delay: 0.21s; }
.categories-grid .category-card:nth-child(5) { transition-delay: 0.28s; }
.categories-grid .category-card:nth-child(6) { transition-delay: 0.35s; }
.benefits-grid .benefit-card:nth-child(1)    { transition-delay: 0.00s; }
.benefits-grid .benefit-card:nth-child(2)    { transition-delay: 0.08s; }
.benefits-grid .benefit-card:nth-child(3)    { transition-delay: 0.16s; }
.browsers-visual .browser-card:nth-child(1)  { transition-delay: 0.00s; }
.browsers-visual .browser-card:nth-child(2)  { transition-delay: 0.08s; }
.browsers-visual .browser-card:nth-child(3)  { transition-delay: 0.16s; }
.browsers-visual .browser-card:nth-child(4)  { transition-delay: 0.24s; }

/* ==========================================
   CUSTOM SCROLLBAR
   ========================================== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10);
  border-radius: 99px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.06);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.18);
}

/* ==========================================
   LISTING / BUSINESS DETAIL PAGES
   ========================================== */
.listing-page, .business-page { background: transparent; }
.listing-card, .business-card, .sidebar-card, .contact-card {
  background: rgba(255,255,255,0.024) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(14px) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.listing-card:hover, .business-card:hover {
  border-color: rgba(37,99,235,0.28) !important;
  box-shadow: 0 6px 30px rgba(37,99,235,0.09) !important;
}

/* ==========================================
   POST / FORM CARDS
   ========================================== */
.post-card, .form-card {
  background: rgba(255,255,255,0.024) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45) !important;
}

/* ==========================================
   PRICING PAGE
   ========================================== */
.pricing-card {
  background: rgba(255,255,255,0.022) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(12px) !important;
  transition: all 0.25s ease !important;
  border-radius: 16px !important;
}
.pricing-card:hover,
.pricing-card.featured {
  border-color: rgba(37,99,235,0.38) !important;
  box-shadow: 0 10px 50px rgba(37,99,235,0.13) !important;
}
.pricing-card.featured {
  background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(30,64,175,0.06)) !important;
}
.pricing-badge {
  background: var(--ab-grad) !important;
  color: #fff !important;
}
.pricing-cta {
  background: var(--ab-grad) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px var(--ab-glow) !important;
}
.pricing-cta:hover { box-shadow: 0 6px 28px rgba(37,99,235,0.48) !important; transform: translateY(-1px); }

/* ==========================================
   404 PAGE
   ========================================== */
.error-page h1 {
  background: var(--ab-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==========================================
   MESSAGING — prevent outer page scroll
   ========================================== */
body.msg-fullpage {
  overflow: hidden !important;
}

/* ==========================================
   SELECTION COLOR
   ========================================== */
::selection {
  background: rgba(37,99,235,0.32);
  color: #fff;
}

/* ==========================================
   THEME TOGGLE BUTTON
   ========================================== */
.theme-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  transition: border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.theme-btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.20); }

/* ==========================================
   LIGHT THEME
   ========================================== */
html[data-theme="light"] {
  --bg:          #F8F8F6;
  --bg-2:        #F2F2EF;
  --bg-3:        #EBEBЕ8;
  --bg-4:        #E3E3DF;
  --bg-card:     #FFFFFF;
  --bg-secondary:#F5F5F2;
  --bg-elevated: #EEEEEB;
  --border:      #E0DFD9;
  --border-2:    #CECDC6;
  --border-hover:#A8A7A0;
  --text:        #1A1A18;
  --text-2:      #4A4A48;
  --text-muted:  #6E6E6B;
  --text-3:      #8E8E8B;
  --accent:      #3D5FFF;
  --accent-2:    #5575FF;
  --accent-dim:  rgba(61,95,255,0.08);
  --accent-bdr:  rgba(61,95,255,0.18);
  --green:       #16A34A;
  --green-dim:   rgba(22,163,74,0.08);
  --amber:       #D97706;
  --red:         #DC2626;
  /* AB design tokens */
  --ab-accent:       #3D5FFF;
  --ab-accent-2:     #2D4FEF;
  --ab-accent-3:     #5575FF;
  --ab-glow:         rgba(61,95,255,0.15);
  --ab-light:        #3D5FFF;
  --ab-lighter:      #6680FF;
  /* Messenger */
  --msg-bg:                 #FFFFFF;
  --msg-sidebar-bg:         #F5F5F2;
  --msg-border:             rgba(0,0,0,0.08);
  --msg-text-primary:       #1A1A18;
  --msg-text-secondary:     #6E6E6B;
  --msg-text-time:          #8E8E8B;
  --msg-input-bg:           rgba(0,0,0,0.03);
  --msg-input-border:       rgba(0,0,0,0.10);
  --msg-convo-hover:        rgba(0,0,0,0.03);
  --msg-convo-active:       rgba(61,95,255,0.08);
  --msg-bubble-sent-bg:     #3D5FFF;
  --msg-bubble-sent-text:   #FFFFFF;
  --msg-bubble-recv-bg:     #EEEEEB;
  --msg-bubble-recv-text:   #1A1A18;
  --msg-bubble-recv-border: rgba(0,0,0,0.08);
  --msg-dots-menu-bg:       #FFFFFF;
  --msg-dots-menu-border:   rgba(0,0,0,0.10);
  --msg-date-sep-bg:        rgba(0,0,0,0.04);
  --msg-date-sep-border:    rgba(0,0,0,0.08);
  --msg-disclaimer-bg:      #F5F5F2;
  --msg-disclaimer-text:    #8E8E8B;
  --msg-online-dot-border:  #F5F5F2;
}
html[data-theme="light"] body {
  background: #F8F8F6 !important;
  color: #1A1A18 !important;
}
html[data-theme="light"] body,
html[data-theme="light"] .nav,
html[data-theme="light"] .navbar {
  background: rgba(248,248,246,0.90) !important;
  border-bottom-color: #E0DFD9 !important;
}
html[data-theme="light"] body { background: #F8F8F6 !important; }
html[data-theme="light"] .nav-logo { color: #1A1A18 !important; -webkit-text-fill-color: #1A1A18 !important; }
html[data-theme="light"] .navbar-logo { -webkit-text-fill-color: #1A1A18 !important; background: none !important; color: #1A1A18 !important; letter-spacing: 4px !important; }
html[data-theme="light"] .nav-links a,
html[data-theme="light"] .navbar-links a { color: #4A4A48 !important; }
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .navbar-links a:hover { color: #1A1A18 !important; }
html[data-theme="light"] .btn-nav,
html[data-theme="light"] .btn-primary { background: linear-gradient(135deg,#3D5FFF,#5575FF) !important; color: #fff !important; }
html[data-theme="light"] .btn-ghost-nav,
html[data-theme="light"] .btn-ghost { color: #4A4A48 !important; }
html[data-theme="light"] .mobile-toggle span { background: #1A1A18 !important; }
html[data-theme="light"] .mobile-menu { background: rgba(248,248,246,0.98) !important; border-color: #E0DFD9 !important; }
html[data-theme="light"] .section-title { color: #1A1A18 !important; }
html[data-theme="light"] .featured-card,
html[data-theme="light"] .category-card,
html[data-theme="light"] .benefit-card,
html[data-theme="light"] .browser-card,
html[data-theme="light"] .dash-card,
html[data-theme="light"] .login-card,
html[data-theme="light"] .post-card,
html[data-theme="light"] .form-card,
html[data-theme="light"] .pricing-card { background: #FFFFFF !important; border-color: #E0DFD9 !important; }
html[data-theme="light"] .footer { background: #F0F0ED !important; border-top-color: #E0DFD9 !important; }
html[data-theme="light"] .announce-bar { background: linear-gradient(90deg,#3D5FFF,#6080FF) !important; }
html[data-theme="light"] ::selection { background: rgba(61,95,255,0.25); color: #1A1A18; }
html[data-theme="light"] .theme-btn { border-color: rgba(0,0,0,0.12); color: #4A4A48; }
html[data-theme="light"] .theme-btn:hover { background: rgba(0,0,0,0.04); }
/* Fix: hero title is white gradient text — invisible on white bg */
html[data-theme="light"] .hero h1,
html[data-theme="light"] .hero-title {
  background: none !important;
  -webkit-text-fill-color: #1A1A18 !important;
  color: #1A1A18 !important;
  text-shadow: none !important;
}
html[data-theme="light"] .hero-title em { color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; }
html[data-theme="light"] .hero-sub,
html[data-theme="light"] .hero-subtitle { color: var(--text-2) !important; }
html[data-theme="light"] .hero-badge { background: rgba(61,95,255,0.07) !important; border-color: rgba(61,95,255,0.18) !important; color: #4A4A48 !important; }
html[data-theme="light"] .hero-badge-pill { background: rgba(61,95,255,0.10) !important; border-color: rgba(61,95,255,0.22) !important; color: #3D5FFF !important; }
html[data-theme="light"] .hero-trust-item { color: #6E6E6B !important; }

/* ==========================================
   CAPPUCCINO THEME
   Palette: warm cream base · caramel accent · espresso text
   Philosophy: a high-end third-wave coffee shop — clean, warm,
   sophisticated. Accent = caramel amber (not muddy dark brown).
   ========================================== */
html[data-theme="cappuccino"] {
  --bg:          #FAF6EF;
  --bg-2:        #F2E9D8;
  --bg-3:        #EAD9C4;
  --bg-4:        #DFC9AF;
  --bg-card:     #F7F1E6;
  --bg-secondary:#EDE0CA;
  --bg-elevated: #E8D6BF;
  --border:      #D8C4A8;
  --border-2:    #C9B090;
  --border-hover:#B09070;
  --text:        #1C1208;
  --text-2:      #5A3E28;
  --text-muted:  #9B7E62;
  --text-3:      #B09070;
  --accent:      #B5702A;
  --accent-2:    #C87E34;
  --accent-dim:  rgba(181,112,42,0.10);
  --accent-bdr:  rgba(181,112,42,0.22);
  --green:       #4A7C3F;
  --green-dim:   rgba(74,124,63,0.10);
  --amber:       #C07828;
  --red:         #B04030;
  /* AB tokens */
  --ab-accent:       #B5702A;
  --ab-accent-2:     #985C1E;
  --ab-accent-3:     #C87E34;
  --ab-glow:         rgba(181,112,42,0.18);
  --ab-grad:         linear-gradient(135deg,#985C1E,#B5702A,#D08A3C);
  --ab-grad-soft:    linear-gradient(135deg,rgba(181,112,42,0.08),rgba(181,112,42,0.03));
  --ab-glass-bg:     rgba(181,112,42,0.04);
  --ab-glass-border: rgba(181,112,42,0.12);
  --ab-light:        #C89060;
  --ab-lighter:      #DDB080;
  /* Messenger */
  --msg-bg:                 #F7F1E6;
  --msg-sidebar-bg:         #F0E6D4;
  --msg-border:             rgba(181,112,42,0.12);
  --msg-text-primary:       #1C1208;
  --msg-text-secondary:     #6B5040;
  --msg-text-time:          #9B7E62;
  --msg-input-bg:           rgba(181,112,42,0.04);
  --msg-input-border:       rgba(181,112,42,0.14);
  --msg-convo-hover:        rgba(181,112,42,0.05);
  --msg-convo-active:       rgba(181,112,42,0.10);
  --msg-bubble-sent-bg:     #B5702A;
  --msg-bubble-sent-text:   #FDF8F0;
  --msg-bubble-recv-bg:     #EAD9C4;
  --msg-bubble-recv-text:   #1C1208;
  --msg-bubble-recv-border: rgba(181,112,42,0.12);
  --msg-dots-menu-bg:       #F7F1E6;
  --msg-dots-menu-border:   rgba(181,112,42,0.15);
  --msg-date-sep-bg:        rgba(181,112,42,0.05);
  --msg-date-sep-border:    rgba(181,112,42,0.12);
  --msg-disclaimer-bg:      #F0E6D4;
  --msg-disclaimer-text:    #9B7E62;
  --msg-online-dot-border:  #FAF6EF;
}

/* ---- Base ---- */
html[data-theme="cappuccino"] body {
  background: #FAF6EF !important;
  color: #1C1208 !important;
}

/* ---- Navbar ---- */
html[data-theme="cappuccino"] .nav,
html[data-theme="cappuccino"] .navbar {
  background: rgba(250,246,239,0.94) !important;
  border-bottom: 1px solid #D8C4A8 !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
}
html[data-theme="cappuccino"] .nav-logo { color: #1C1208 !important; -webkit-text-fill-color: #1C1208 !important; }
html[data-theme="cappuccino"] .nav-logo span { color: #B5702A !important; -webkit-text-fill-color: #B5702A !important; }
html[data-theme="cappuccino"] .navbar-logo { -webkit-text-fill-color: #1C1208 !important; background: none !important; color: #1C1208 !important; }
html[data-theme="cappuccino"] .nav-links a,
html[data-theme="cappuccino"] .navbar-links a { color: #5A3E28 !important; }
html[data-theme="cappuccino"] .nav-links a:hover,
html[data-theme="cappuccino"] .navbar-links a:hover { color: #1C1208 !important; }
html[data-theme="cappuccino"] .btn-nav { background: linear-gradient(135deg,#985C1E,#B5702A) !important; color: #FDF8F0 !important; box-shadow: 0 2px 12px rgba(181,112,42,0.22) !important; }
html[data-theme="cappuccino"] .btn-nav:hover { background: linear-gradient(135deg,#7A4818,#985C1E) !important; box-shadow: 0 4px 20px rgba(181,112,42,0.32) !important; }
html[data-theme="cappuccino"] .btn-ghost-nav,
html[data-theme="cappuccino"] .btn-ghost { color: #5A3E28 !important; }
html[data-theme="cappuccino"] .btn-ghost-nav:hover { background: rgba(181,112,42,0.06) !important; color: #1C1208 !important; }
html[data-theme="cappuccino"] .mobile-toggle span { background: #1C1208 !important; }
html[data-theme="cappuccino"] .mobile-menu { background: rgba(250,246,239,0.98) !important; border-color: #D8C4A8 !important; }

/* ---- Hero — remove dark bleed, fix gradient text ---- */
html[data-theme="cappuccino"] .hero-overlay { background: none !important; display: none !important; }
html[data-theme="cappuccino"] .hero h1,
html[data-theme="cappuccino"] .hero-title {
  background: none !important;
  -webkit-text-fill-color: #1C1208 !important;
  color: #1C1208 !important;
  text-shadow: none !important;
}
html[data-theme="cappuccino"] .hero-title em { color: #B5702A !important; -webkit-text-fill-color: #B5702A !important; }
html[data-theme="cappuccino"] .hero-sub,
html[data-theme="cappuccino"] .hero-subtitle { color: #5A3E28 !important; }
html[data-theme="cappuccino"] .hero-eyebrow,
html[data-theme="cappuccino"] .hero-badge {
  background: rgba(181,112,42,0.08) !important;
  border-color: rgba(181,112,42,0.22) !important;
  color: #985C1E !important;
}
html[data-theme="cappuccino"] .hero-badge-pill {
  background: rgba(181,112,42,0.12) !important;
  border-color: rgba(181,112,42,0.25) !important;
  color: #985C1E !important;
}
html[data-theme="cappuccino"] .hero-eyebrow::before,
html[data-theme="cappuccino"] .hero-eyebrow::after { background: rgba(181,112,42,0.3) !important; }
html[data-theme="cappuccino"] .hero-buttons .btn-primary,
html[data-theme="cappuccino"] .navbar-actions .btn-primary { background: linear-gradient(135deg,#985C1E,#B5702A) !important; color: #FDF8F0 !important; box-shadow: 0 4px 20px rgba(181,112,42,0.28) !important; border: none !important; }
html[data-theme="cappuccino"] .hero-buttons .btn-secondary { background: rgba(181,112,42,0.06) !important; border: 1px solid rgba(181,112,42,0.22) !important; color: #5A3E28 !important; }
html[data-theme="cappuccino"] .hero-buttons .btn-secondary:hover { background: rgba(181,112,42,0.10) !important; color: #1C1208 !important; }
html[data-theme="cappuccino"] .hero-stats-label { color: #9B7E62 !important; }
html[data-theme="cappuccino"] .hero-stats-num { color: #1C1208 !important; }

/* ---- Sections ---- */
html[data-theme="cappuccino"] .section-title { color: #1C1208 !important; }
html[data-theme="cappuccino"] .section-sub { color: #5A3E28 !important; }
html[data-theme="cappuccino"] .section-label {
  background: linear-gradient(135deg,#985C1E,#B5702A) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
html[data-theme="cappuccino"] .step-number { background: linear-gradient(135deg,#985C1E,#B5702A) !important; }
html[data-theme="cappuccino"] .announce-bar { background: linear-gradient(90deg,#7A4818,#B5702A) !important; }

/* ---- Cards ---- */
html[data-theme="cappuccino"] .featured-card,
html[data-theme="cappuccino"] .category-card,
html[data-theme="cappuccino"] .benefit-card,
html[data-theme="cappuccino"] .browser-card,
html[data-theme="cappuccino"] .dash-card,
html[data-theme="cappuccino"] .login-card,
html[data-theme="cappuccino"] .post-card,
html[data-theme="cappuccino"] .form-card,
html[data-theme="cappuccino"] .pricing-card {
  background: #F7F1E6 !important;
  border-color: #D8C4A8 !important;
}
html[data-theme="cappuccino"] .featured-card:hover,
html[data-theme="cappuccino"] .category-card:hover { border-color: #B5702A !important; }

/* ---- Footer ---- */
html[data-theme="cappuccino"] .footer { background: #EDE0CA !important; border-top-color: #D8C4A8 !important; }
html[data-theme="cappuccino"] .footer * { color: #5A3E28 !important; }

/* ---- Misc UI ---- */
html[data-theme="cappuccino"] ::selection { background: rgba(181,112,42,0.20); color: #1C1208; }
html[data-theme="cappuccino"] .theme-btn { border-color: rgba(181,112,42,0.22); color: #5A3E28; }
html[data-theme="cappuccino"] .theme-btn:hover { background: rgba(181,112,42,0.06); }
html[data-theme="cappuccino"] .settings-btn { border-color: rgba(181,112,42,0.20); color: #7A5C40; }
html[data-theme="cappuccino"] .settings-btn:hover { background: rgba(181,112,42,0.07); color: #1C1208; }
html[data-theme="cappuccino"] #abSettingsDrawer { box-shadow: -8px 0 40px rgba(181,112,42,0.12); }

/* ==========================================
   SETTINGS PANEL v2 — ChatGPT-style
   ========================================== */

/* Cog trigger button */
.settings-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 7px 9px;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.settings-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.20);
  color: var(--text);
}
html[data-theme="light"] .settings-btn { border-color: rgba(0,0,0,0.12); color: #6E6E6B; }
html[data-theme="light"] .settings-btn:hover { background: rgba(0,0,0,0.04); color: #1A1A18; }

/* Panel shell */
#abSettingsPanel {
  position: fixed; inset: 0;
  z-index: 9800;
  pointer-events: none;
  visibility: hidden;
}
#abSettingsPanel.open {
  pointer-events: auto;
  visibility: visible;
}

/* Backdrop */
#abSettingsBackdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background 0.28s ease, backdrop-filter 0.28s ease;
}
#abSettingsPanel.open #abSettingsBackdrop {
  background: rgba(0,0,0,0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#abSettingsPanel.closing #abSettingsBackdrop {
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

/* Drawer */
#abSettingsDrawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 400px; max-width: 95vw;
  background: var(--bg-2);
  border-left: 1px solid var(--border);
  z-index: 1;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: -20px 0 60px rgba(0,0,0,0.40);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.32,0.72,0,1);
}
#abSettingsPanel.open #abSettingsDrawer {
  transform: translateX(0);
}
#abSettingsPanel.closing #abSettingsDrawer {
  transform: translateX(100%);
}
html[data-theme="light"] #abSettingsDrawer {
  background: #FFFFFF;
  box-shadow: -20px 0 60px rgba(0,0,0,0.10);
}
html[data-theme="cappuccino"] #abSettingsDrawer {
  background: #F7F1E6;
  box-shadow: -20px 0 60px rgba(181,112,42,0.10);
}

/* Header */
.abs-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.abs-title {
  font-size: 0.95rem; font-weight: 600;
  color: var(--text); letter-spacing: -0.01em;
}
.abs-close {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); border: none;
  border-radius: 50%; color: var(--text-muted);
  cursor: pointer; transition: background 0.18s, color 0.18s;
  flex-shrink: 0;
}
.abs-close:hover { background: var(--border); color: var(--text); }

/* Scrollable body */
.abs-body { flex: 1; overflow-y: auto; }
.abs-body::-webkit-scrollbar { width: 3px; }
.abs-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Section */
.abs-section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.abs-section:last-child { border-bottom: none; }
.abs-section-title {
  font-size: 0.62rem; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.12em; margin-bottom: 14px;
}
.abs-group-label {
  font-size: 0.78rem; font-weight: 500;
  color: var(--text-2); margin-bottom: 6px;
}
.abs-group-sub {
  font-size: 0.7rem; font-weight: 400;
  color: var(--text-muted); margin-left: 4px;
}

/* Option rows (themes + fonts) */
.abs-option-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.abs-option-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.abs-option-row:last-child { border-bottom: none; }
.abs-option-row:hover { background: var(--bg-elevated); }
.abs-option-row.active { background: var(--accent-dim); }
.abs-option-icon {
  font-size: 1rem; line-height: 1; width: 20px; text-align: center;
  color: var(--text-2); flex-shrink: 0;
}
.abs-option-label {
  flex: 1; font-size: 0.85rem; font-weight: 500; color: var(--text-2);
}
.abs-option-row.active .abs-option-label { color: var(--accent); font-weight: 600; }
.abs-option-check {
  font-size: 0.75rem; color: var(--accent);
  opacity: 0; transition: opacity 0.15s;
  flex-shrink: 0;
}
.abs-option-row.active .abs-option-check { opacity: 1; }

/* Font rows — render label in that font */
.abs-font-row .abs-option-label { font-size: 0.9rem; }

/* Accent swatches */
.abs-accents { display: flex; gap: 10px; flex-wrap: wrap; padding: 6px 0 2px; }
.abs-accent-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: none; cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s;
  outline: none;
}
.abs-accent-swatch:hover { transform: scale(1.18); }
.abs-accent-swatch.active {
  transform: scale(1.08);
  box-shadow: 0 0 0 2.5px var(--bg-2), 0 0 0 4.5px var(--text);
}

/* Toggle rows */
.abs-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; gap: 16px;
}
.abs-toggle-row + .abs-toggle-row { border-top: 1px solid var(--border); }
.abs-toggle-info { flex: 1; }
.abs-toggle-name {
  font-size: 0.84rem; font-weight: 500;
  color: var(--text); display: block; margin-bottom: 2px;
}
.abs-toggle-sub {
  font-size: 0.72rem; color: var(--text-muted); display: block;
}
.abs-toggle {
  position: relative; display: inline-block;
  width: 42px; height: 24px; flex-shrink: 0; cursor: pointer;
}
.abs-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.abs-toggle span {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--border-2); border-radius: 24px;
  transition: background 0.22s;
}
.abs-toggle span::before {
  content: ''; position: absolute;
  width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.22);
}
.abs-toggle input:checked + span { background: var(--accent); }
.abs-toggle input:checked + span::before { transform: translateX(18px); }

/* Account nav links */
.abs-nav-links { display: flex; flex-direction: column; margin-bottom: 14px; }
.abs-nav-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 12px; border-radius: 8px;
  font-size: 0.84rem; font-weight: 500;
  color: var(--text-2); text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.abs-nav-link:hover { background: var(--bg-elevated); color: var(--text); }
.abs-chevron { color: var(--text-muted); flex-shrink: 0; }

/* Sign out */
.abs-logout {
  width: 100%; padding: 10px 14px; border-radius: 8px;
  background: none; border: 1px solid rgba(220,38,38,0.25);
  color: var(--red); font-size: 0.83rem; font-weight: 500;
  font-family: inherit; cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  text-align: left;
}
.abs-logout:hover {
  background: rgba(220,38,38,0.06);
  border-color: rgba(220,38,38,0.45);
}

/* Footer */
.abs-panel-footer {
  text-align: center; padding: 14px 24px 6px;
  font-size: 0.68rem; color: var(--text-muted);
  opacity: 0.6;
}

/* ==========================================
   FORM INPUTS — THEME COVERAGE
   ========================================== */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: #FFFFFF !important;
  border-color: #E0DFD9 !important;
  color: #1A1A18 !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #8E8E8B !important; }
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus { border-color: rgba(61,95,255,0.4) !important; }
html[data-theme="cappuccino"] input,
html[data-theme="cappuccino"] textarea,
html[data-theme="cappuccino"] select {
  background: #F5EBD8 !important;
  border-color: #C8B494 !important;
  color: #1E0E05 !important;
}
html[data-theme="cappuccino"] input::placeholder,
html[data-theme="cappuccino"] textarea::placeholder { color: #A07850 !important; }
html[data-theme="cappuccino"] input:focus,
html[data-theme="cappuccino"] textarea:focus,
html[data-theme="cappuccino"] select:focus { border-color: rgba(124,74,34,0.4) !important; }

/* ==========================================
   MODALS / POPUPS — THEME COVERAGE
   ========================================== */
html[data-theme="light"] .tv-popup {
  background: #FFFFFF !important;
  border-color: rgba(61,95,255,0.3) !important;
  color: #1A1A18 !important;
}
html[data-theme="light"] .tv-popup-title { color: #1A1A18 !important; }
html[data-theme="light"] .tv-popup-body { color: #6E6E6B !important; }
html[data-theme="cappuccino"] .tv-popup {
  background: #F5EBD8 !important;
  border-color: rgba(124,74,34,0.3) !important;
}
html[data-theme="cappuccino"] .tv-popup-title { color: #1E0E05 !important; }
html[data-theme="cappuccino"] .tv-popup-body { color: #7D5535 !important; }

/* ==========================================
   STATUS BADGES — THEME COVERAGE
   ========================================== */
html[data-theme="light"] .badge-gray { background: rgba(0,0,0,0.06) !important; color: #6E6E6B !important; }
html[data-theme="light"] .badge-yellow { background: rgba(217,119,6,0.10) !important; color: #92400E !important; }
html[data-theme="light"] .badge-green { background: rgba(22,163,74,0.10) !important; color: #15803D !important; }
html[data-theme="light"] .badge-red { background: rgba(220,38,38,0.10) !important; color: #B91C1C !important; }
html[data-theme="light"] .status-pending { background: rgba(0,0,0,0.08) !important; color: #6E6E6B !important; }
html[data-theme="light"] .status-approved { background: rgba(22,163,74,0.10) !important; color: #15803D !important; }
html[data-theme="light"] .status-rejected { background: rgba(220,38,38,0.10) !important; color: #B91C1C !important; }
html[data-theme="cappuccino"] .badge-gray { background: rgba(124,74,34,0.08) !important; color: #7D5535 !important; }
html[data-theme="cappuccino"] .badge-green { background: rgba(74,124,63,0.10) !important; color: #2E5E28 !important; }
html[data-theme="cappuccino"] .badge-red { background: rgba(176,64,48,0.10) !important; color: #7A2818 !important; }
html[data-theme="cappuccino"] .status-approved { background: rgba(74,124,63,0.10) !important; color: #2E5E28 !important; }
html[data-theme="cappuccino"] .status-rejected { background: rgba(176,64,48,0.10) !important; color: #7A2818 !important; }

/* ==========================================
   DASHBOARD PAGE — FULL THEME COVERAGE
   ========================================== */
/* Dashboard body backgrounds */
html[data-theme="light"] .dashboard-page,
html[data-theme="light"] .profile-page { background: transparent; }
html[data-theme="cappuccino"] .dashboard-page,
html[data-theme="cappuccino"] .profile-page { background: transparent; }

/* Tabs */
html[data-theme="light"] .dash-tabs { background: #FFFFFF !important; border-color: #E0DFD9 !important; }
html[data-theme="light"] .dash-tab { color: #6E6E6B !important; }
html[data-theme="light"] .dash-tab:hover,
html[data-theme="light"] .dash-tab.active { color: #1A1A18 !important; background: #F0F0ED !important; }
html[data-theme="cappuccino"] .dash-tabs { background: #F5EBD8 !important; border-color: #C8B494 !important; }
html[data-theme="cappuccino"] .dash-tab { color: #7D5535 !important; }
html[data-theme="cappuccino"] .dash-tab:hover,
html[data-theme="cappuccino"] .dash-tab.active { color: #1E0E05 !important; background: #E4D5B8 !important; }


/* Stat cards */
html[data-theme="light"] .stat-card { background: #F5F5F2 !important; border-color: #E0DFD9 !important; }
html[data-theme="cappuccino"] .stat-card { background: #E8D9C2 !important; border-color: #C8B494 !important; }

/* Profile modal theming */
html[data-theme="light"] .tv-popup { background: #FFFFFF !important; border-color: rgba(61,95,255,0.25) !important; }
html[data-theme="light"] #pmName,
html[data-theme="light"] #pmRole,
html[data-theme="light"] #pmBio { color: #1A1A18 !important; }
html[data-theme="cappuccino"] #pmName { color: #1E0E05 !important; }
html[data-theme="cappuccino"] #pmRole,
html[data-theme="cappuccino"] #pmBio { color: #7D5535 !important; }

/* ==========================================
   CHAT EMPTY STATE — THEME
   ========================================== */
.chat-empty-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(79,70,229,0.10);
  border: 1px solid rgba(79,70,229,0.22);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-empty-label {
  color: #818cf8; font-size: 0.88rem; font-weight: 500; text-align: center; line-height: 1.6;
}
.chat-empty-label small { font-size: 0.75rem; color: #475569; font-weight: 400; display: block; }

html[data-theme="light"] .chat-empty-icon {
  background: linear-gradient(135deg, #eff6ff, #ecfdf5) !important;
  border-color: rgba(61,95,255,0.18) !important;
}
html[data-theme="light"] .chat-empty-icon svg { stroke: #3D5FFF !important; }
html[data-theme="light"] .chat-empty-label { color: #3D5FFF !important; }
html[data-theme="light"] .chat-empty-label small { color: #6E6E6B !important; }

html[data-theme="cappuccino"] .chat-empty-icon {
  background: linear-gradient(135deg, #EDE0CA, #DCCFB0) !important;
  border-color: rgba(124,74,34,0.18) !important;
}
html[data-theme="cappuccino"] .chat-empty-icon svg { stroke: #7C4A22 !important; }
html[data-theme="cappuccino"] .chat-empty-label { color: #7C4A22 !important; }
html[data-theme="cappuccino"] .chat-empty-label small { color: #7D5535 !important; }

/* ==========================================
   PROFILE PICTURE AVATAR
   ========================================== */
.profile-avatar-img {
  width: 80px; height: 80px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}
.avatar-upload-btn {
  position: absolute; bottom: 0; right: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 2px solid var(--bg-card);
  transition: filter 0.15s;
}
.avatar-upload-btn:hover { filter: brightness(1.12); }
.dash-avatar-wrap {
  position: relative; width: 72px; height: 72px; flex-shrink: 0;
}
.dash-avatar-inner {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700; color: var(--text);
  overflow: hidden;
}
.dash-avatar-inner img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}

/* ==========================================
   MOBILE — MESSENGER + TABS FIXES
   ========================================== */
@media (max-width: 768px) {
  /* Hide "Messages" text in 64px sidebar on mobile */
  .messenger-sidebar-header span { display: none; }
  .messenger-sidebar-header { justify-content: center; padding: 12px 8px; }

  /* Ensure tabs scroll properly on iOS */
  .dash-tabs {
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .dash-tabs::-webkit-scrollbar { display: none; }
  .dash-tab { flex-shrink: 0; }
}

/* ==========================================
   ARABIC / RTL MODE
   ========================================== */
html[lang="ar"],
html[lang="ar"] body {
  font-family: 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Arial Unicode MS', Arial, sans-serif !important;
}

/* Settings drawer slides from left in RTL */
html[lang="ar"] #abSettingsDrawer {
  right: auto !important;
  left: 0 !important;
  border-left: none !important;
  border-right: 1px solid var(--border) !important;
  transform: translateX(-100%) !important;
}
html[lang="ar"] #abSettingsPanel.open #abSettingsDrawer {
  transform: translateX(0) !important;
}
html[lang="ar"] #abSettingsPanel.closing #abSettingsDrawer {
  transform: translateX(-100%) !important;
}
html[lang="ar"] .abs-chevron {
  transform: scaleX(-1);
}
html[lang="ar"] .abs-header,
html[lang="ar"] .abs-section,
html[lang="ar"] .abs-option-row,
html[lang="ar"] .abs-toggle-row,
html[lang="ar"] .abs-nav-link,
html[lang="ar"] .abs-nav-links {
  direction: rtl;
}

/* Navbar RTL adjustments */
html[lang="ar"] .nav .container,
html[lang="ar"] .navbar .container {
  direction: rtl;
}
html[lang="ar"] .nav-right { margin-left: 0 !important; margin-right: auto !important; }
html[lang="ar"] .nav-links { direction: rtl; }
html[lang="ar"] .hero-text,
html[lang="ar"] .hero-actions,
html[lang="ar"] .hero-trust,
html[lang="ar"] .hero-badge { direction: rtl; }
html[lang="ar"] .section-label,
html[lang="ar"] .section-title,
html[lang="ar"] .section-sub { text-align: right; }
html[lang="ar"] .footer-grid,
html[lang="ar"] .footer-top { direction: rtl; }
html[lang="ar"] .footer-bottom { direction: rtl; }
html[lang="ar"] .pricing-features,
html[lang="ar"] .pricing-features li { direction: rtl; text-align: right; }
html[lang="ar"] .boosts-section { direction: rtl; }
html[lang="ar"] .early-banner-top { direction: rtl; }
html[lang="ar"] .about-layout,
html[lang="ar"] .about-right { direction: rtl; text-align: right; }