/* ═══════════════════════════════════════════════════════════════
   CONTRAST FIXES v2.0 — Context-Aware Text Visibility
   ═══════════════════════════════════════════════════════════════
   Targeted fixes that DON'T break button colors, navbar links, 
   hero section colors, or gradient text. Uses specific selectors
   instead of blanket !important overrides.
*/

/* ─── FORM INPUT CONTRAST (All Pages) ───────────────────── */
.form-input,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
    color: #0F172A;
    opacity: 1;
}

input::placeholder,
textarea::placeholder {
    color: #94A3B8;
    opacity: 1;
}

option {
    color: #0F172A;
    background: #FFFFFF;
}

input:disabled,
textarea:disabled,
select:disabled {
    color: #94A3B8;
    background: #F1F5F9;
}
html.dark input:disabled, html.dark textarea:disabled, html.dark select:disabled,
body.dark-mode input:disabled, body.dark-mode textarea:disabled, body.dark-mode select:disabled {
    color: var(--dark-text-muted) !important;
    background: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
}

/* ─── TABLE CONTRAST ─────────────────────────────────────── */
table th {
    color: #0F172A;
    background: #F8FAFC;
}

table td {
    color: #475569;
}

/* ─── ALERT / STATUS BOXES ───────────────────────────────── */
.alert-info { color: #0284C7; background: #F0F9FF; }
.alert-success { color: #059669; background: #ECFDF5; }
.alert-error, .alert-danger { color: #DC2626; background: #FEF2F2; }
.alert-warning { color: #D97706; background: #FFF7ED; }

/* ─── STATUS TEXT CLASSES ────────────────────────────────── */
.text-success { color: #059669; }
.text-error, .text-danger { color: #DC2626; }
.text-warning { color: #D97706; }
.text-info { color: #0284C7; }
.text-muted { color: #64748B; }

/* ─── ADMIN STAT CARDS ───────────────────────────────────── */
.stat-card p { color: #64748B; }
.stat-card h3, .stat-card .stat-number { color: #0F172A; }

/* ─── SCHOOL ADMIN CONTENT CARDS ─────────────────────────── */
.content-card p, .content-card h3 { color: #0F172A; }

/* ═══════════════════════════════════════════════════════════════
   DARK THEME — Comprehensive Dark Mode Support
   ═══════════════════════════════════════════════════════════════
   Activated by: html.dark or body.dark-mode
   Covers: Landing page, Admin, School Admin, Payment pages
*/

/* ─── DARK: CSS VARIABLES ────────────────────────────────── */
html.dark,
body.dark-mode {
    --dark-bg-primary: #0F172A;
    --dark-bg-secondary: #1E293B;
    --dark-bg-tertiary: #334155;
    --dark-bg-card: #1E293B;
    --dark-bg-elevated: #283548;
    --dark-border: #334155;
    --dark-border-light: #475569;
    --dark-text-primary: #F1F5F9;
    --dark-text-secondary: #CBD5E1;
    --dark-text-tertiary: #94A3B8;
    --dark-text-muted: #64748B;
    --dark-primary: #818CF8;
    --dark-primary-hover: #A5B4FC;
    --dark-success: #34D399;
    --dark-warning: #FBBF24;
    --dark-danger: #F87171;
    --dark-info: #60A5FA;
}

/* ─── DARK: GLOBAL BASE ──────────────────────────────────── */
html.dark body,
body.dark-mode {
    background: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

html.dark h1, html.dark h2, html.dark h3,
html.dark h4, html.dark h5, html.dark h6,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: var(--dark-text-primary) !important;
}

html.dark p,
body.dark-mode p {
    color: var(--dark-text-secondary) !important;
}

/* ─── DARK: NAVBAR ───────────────────────────────────────── */
html.dark .navbar,
body.dark-mode .navbar {
    background: rgba(15, 23, 42, 0.92) !important;
    border-bottom-color: var(--dark-border) !important;
}
html.dark .navbar.scrolled,
body.dark-mode .navbar.scrolled {
    background: rgba(15, 23, 42, 0.98) !important;
    box-shadow: 0 1px 20px rgba(0,0,0,.3) !important;
}
html.dark .navbar-links a, body.dark-mode .navbar-links a { color: var(--dark-text-secondary) !important; }
html.dark .navbar-links a:hover, html.dark .navbar-links a.active,
body.dark-mode .navbar-links a:hover, body.dark-mode .navbar-links a.active {
    color: var(--dark-primary) !important;
    background: rgba(129, 140, 248, 0.1) !important;
}
html.dark .brand-text, body.dark-mode .brand-text { color: var(--dark-text-primary) !important; }
html.dark .mobile-nav, body.dark-mode .mobile-nav { background: rgba(15, 23, 42, 0.98) !important; }
html.dark .mobile-nav a, body.dark-mode .mobile-nav a { color: var(--dark-text-secondary) !important; }
html.dark .mobile-toggle span, body.dark-mode .mobile-toggle span { background: var(--dark-text-secondary) !important; }

/* ─── DARK: SECTIONS ─────────────────────────────────────── */
html.dark .section, body.dark-mode .section { background: var(--dark-bg-primary) !important; }
html.dark .section-alt, body.dark-mode .section-alt { background: var(--dark-bg-secondary) !important; }
html.dark .section-header p, body.dark-mode .section-header p { color: var(--dark-text-tertiary) !important; }
html.dark .section-label, body.dark-mode .section-label { background: rgba(129, 140, 248, 0.15) !important; color: var(--dark-primary) !important; }

/* ─── DARK: CARDS ────────────────────────────────────────── */
html.dark .card, html.dark .feat-card, html.dark .mode-card,
html.dark .test-card, html.dark .price-card, html.dark .reg-card,
body.dark-mode .card, body.dark-mode .feat-card, body.dark-mode .mode-card,
body.dark-mode .test-card, body.dark-mode .price-card, body.dark-mode .reg-card {
    background: var(--dark-bg-card) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}
html.dark .feat-card h4, html.dark .mode-card h3, html.dark .price-name,
body.dark-mode .feat-card h4, body.dark-mode .mode-card h3, body.dark-mode .price-name { color: var(--dark-text-primary) !important; }
html.dark .feat-card p, html.dark .mode-card > p, html.dark .price-desc,
html.dark .price-feat, html.dark .mode-feat,
body.dark-mode .feat-card p, body.dark-mode .mode-card > p, body.dark-mode .price-desc,
body.dark-mode .price-feat, body.dark-mode .mode-feat { color: var(--dark-text-tertiary) !important; }
html.dark .price-val, body.dark-mode .price-val { color: var(--dark-text-primary) !important; }
html.dark .price-curr, html.dark .price-period, html.dark .price-yearly,
body.dark-mode .price-curr, body.dark-mode .price-period, body.dark-mode .price-yearly { color: var(--dark-text-tertiary) !important; }
html.dark .price-divider, body.dark-mode .price-divider { background: var(--dark-border) !important; }
html.dark .price-card.featured, body.dark-mode .price-card.featured { border-color: var(--dark-primary) !important; background: linear-gradient(180deg, rgba(129, 140, 248, 0.08) 0%, var(--dark-bg-card) 30%) !important; }

/* ─── DARK: TRUST BAR ────────────────────────────────────── */
html.dark .trust-bar, body.dark-mode .trust-bar { background: var(--dark-bg-secondary) !important; border-bottom-color: var(--dark-border) !important; }
html.dark .trust-label, html.dark .trust-logo, body.dark-mode .trust-label, body.dark-mode .trust-logo { color: var(--dark-text-tertiary) !important; }

/* ─── DARK: DEMO ─────────────────────────────────────────── */
html.dark .demo-section, body.dark-mode .demo-section { background: linear-gradient(180deg, var(--dark-bg-secondary) 0%, var(--dark-bg-primary) 100%) !important; }
html.dark .demo-tabs, body.dark-mode .demo-tabs { background: var(--dark-bg-tertiary) !important; }
html.dark .demo-tab, body.dark-mode .demo-tab { color: var(--dark-text-tertiary) !important; }
html.dark .demo-tab.active, body.dark-mode .demo-tab.active { background: var(--dark-bg-card) !important; color: var(--dark-primary) !important; }
html.dark .demo-url-bar, body.dark-mode .demo-url-bar { border-color: var(--dark-border) !important; }
html.dark .demo-url-bar input, body.dark-mode .demo-url-bar input { background: var(--dark-bg-card) !important; color: var(--dark-text-primary) !important; }
html.dark .demo-frame, body.dark-mode .demo-frame { border-color: var(--dark-border) !important; }
html.dark .demo-frame-bar, body.dark-mode .demo-frame-bar { background: var(--dark-bg-tertiary) !important; }
html.dark .demo-frame-url, body.dark-mode .demo-frame-url { background: var(--dark-bg-card) !important; color: var(--dark-text-tertiary) !important; border-color: var(--dark-border) !important; }
html.dark .demo-cta p, body.dark-mode .demo-cta p { color: var(--dark-text-tertiary) !important; }
html.dark .demo-step-title, body.dark-mode .demo-step-title { color: var(--dark-text-primary) !important; }
html.dark .demo-step-desc, body.dark-mode .demo-step-desc { color: var(--dark-text-tertiary) !important; }
html.dark .demo-step-ic, body.dark-mode .demo-step-ic { background: var(--dark-bg-tertiary) !important; }
html.dark .demo-step-bar, body.dark-mode .demo-step-bar { background: var(--dark-bg-tertiary) !important; }

/* ─── DARK: TESTIMONIALS ─────────────────────────────────── */
html.dark .test-quote, body.dark-mode .test-quote { color: var(--dark-text-secondary) !important; }
html.dark .test-author p, body.dark-mode .test-author p { color: var(--dark-text-tertiary) !important; }
html.dark .test-dot, body.dark-mode .test-dot { background: var(--dark-bg-tertiary) !important; }
html.dark .test-dot.active, body.dark-mode .test-dot.active { background: var(--dark-primary) !important; }

/* ─── DARK: FORMS ────────────────────────────────────────── */
html.dark .form-input, html.dark .form-select,
html.dark .reg-card input, html.dark .reg-card select, html.dark .reg-card textarea,
body.dark-mode .form-input, body.dark-mode .form-select,
body.dark-mode .reg-card input, body.dark-mode .reg-card select, body.dark-mode .reg-card textarea {
    background: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}
html.dark .form-input:focus, html.dark .form-select:focus,
body.dark-mode .form-input:focus, body.dark-mode .form-select:focus { border-color: var(--dark-primary) !important; box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.15) !important; }
html.dark .form-label, body.dark-mode .form-label { color: var(--dark-text-secondary) !important; }
html.dark .form-hint, html.dark .form-note,
body.dark-mode .form-hint, body.dark-mode .form-note { color: var(--dark-text-muted) !important; }
html.dark .reg-card .reg-title, body.dark-mode .reg-card .reg-title { color: var(--dark-text-primary) !important; }
html.dark .reg-card .reg-subtitle, body.dark-mode .reg-card .reg-subtitle { color: var(--dark-text-tertiary) !important; }
html.dark .form-step-ind, body.dark-mode .form-step-ind { background: var(--dark-bg-tertiary) !important; }
html.dark .form-step-ind.active, body.dark-mode .form-step-ind.active { background: var(--dark-primary) !important; }
html.dark .form-step-ind.done, body.dark-mode .form-step-ind.done { background: var(--dark-success) !important; }
html.dark .billing-toggle, body.dark-mode .billing-toggle { background: var(--dark-bg-tertiary) !important; }
html.dark .theme-card, body.dark-mode .theme-card { border-color: var(--dark-border) !important; }
html.dark .theme-info, body.dark-mode .theme-info { background: var(--dark-bg-card) !important; }
html.dark .theme-info h5, body.dark-mode .theme-info h5 { color: var(--dark-text-primary) !important; }
html.dark .theme-info p, body.dark-mode .theme-info p { color: var(--dark-text-tertiary) !important; }

/* ─── DARK: FOOTER ───────────────────────────────────────── */
html.dark .footer, body.dark-mode .footer { background: #0B1120 !important; }
html.dark .footer-desc, body.dark-mode .footer-desc { color: var(--dark-text-tertiary) !important; }
html.dark .footer-col h5, body.dark-mode .footer-col h5 { color: var(--dark-text-primary) !important; }
html.dark .footer-col a, body.dark-mode .footer-col a { color: var(--dark-text-tertiary) !important; }
html.dark .footer-col a:hover, body.dark-mode .footer-col a:hover { color: var(--dark-primary) !important; }
html.dark .footer-brand span, body.dark-mode .footer-brand span { color: var(--dark-text-primary) !important; }
html.dark .footer-social a, body.dark-mode .footer-social a { color: var(--dark-text-tertiary) !important; }
html.dark .footer-social a:hover, body.dark-mode .footer-social a:hover { color: var(--dark-primary) !important; }
html.dark .footer-bot, body.dark-mode .footer-bot { border-top-color: var(--dark-border) !important; color: var(--dark-text-muted) !important; }
html.dark .footer-bot a, body.dark-mode .footer-bot a { color: var(--dark-text-tertiary) !important; }

/* ─── DARK: MODALS ───────────────────────────────────────── */
html.dark .modal, body.dark-mode .modal { background: var(--dark-bg-card) !important; color: var(--dark-text-primary) !important; }
html.dark .modal h3, body.dark-mode .modal h3 { color: var(--dark-text-primary) !important; }
html.dark .modal p, body.dark-mode .modal p { color: var(--dark-text-secondary) !important; }
html.dark .modal-bg, body.dark-mode .modal-bg { background: rgba(0, 0, 0, 0.7) !important; }

/* ─── DARK: PLAN CARDS & ORDER SUMMARY ───────────────────── */
html.dark .plan-card-option, body.dark-mode .plan-card-option { background: var(--dark-bg-card) !important; border-color: var(--dark-border) !important; }
html.dark .plan-card-option:hover, body.dark-mode .plan-card-option:hover { border-color: var(--dark-primary) !important; }
html.dark .plan-card-option.selected, body.dark-mode .plan-card-option.selected { border-color: var(--dark-primary) !important; background: linear-gradient(180deg, rgba(129,140,248,.1) 0%, var(--dark-bg-card) 40%) !important; }
html.dark .plan-card-name, body.dark-mode .plan-card-name { color: var(--dark-text-primary) !important; }
html.dark .plan-card-price, body.dark-mode .plan-card-price { color: var(--dark-primary) !important; }
html.dark .plan-card-period, body.dark-mode .plan-card-period { color: var(--dark-text-muted) !important; }
html.dark .plan-card-feats, body.dark-mode .plan-card-feats { color: var(--dark-text-secondary) !important; }
html.dark .order-summary, body.dark-mode .order-summary { background: var(--dark-bg-secondary) !important; border-color: var(--dark-border) !important; }
html.dark .order-summary-body, body.dark-mode .order-summary-body { color: var(--dark-text-primary) !important; }
html.dark .order-line, body.dark-mode .order-line { color: var(--dark-text-secondary) !important; }
html.dark .order-line-sub, body.dark-mode .order-line-sub { color: var(--dark-text-muted) !important; }
html.dark .order-total, body.dark-mode .order-total { color: var(--dark-primary) !important; }
html.dark .order-divider, body.dark-mode .order-divider { background: var(--dark-border) !important; }
html.dark .order-note, body.dark-mode .order-note { background: var(--dark-bg-tertiary) !important; color: var(--dark-text-tertiary) !important; }
html.dark #plan-features-list > div, body.dark-mode #plan-features-list > div { background: rgba(16,185,129,0.1) !important; color: var(--dark-text-primary) !important; }

/* ─── DARK: TOASTS ───────────────────────────────────────── */
html.dark .toast, body.dark-mode .toast { background: var(--dark-bg-card) !important; color: var(--dark-text-primary) !important; }

/* ─── DARK: REGISTRATION SLIDE-IN MODAL ──────────────────── */
html.dark .reg-modal-overlay, body.dark-mode .reg-modal-overlay { background: rgba(0,0,0,.7) !important; }
html.dark .reg-modal-panel, body.dark-mode .reg-modal-panel {
  background: var(--dark-bg-primary) !important;
  box-shadow: -16px 0 64px rgba(0,0,0,.5) !important;
}
html.dark .reg-modal-header, body.dark-mode .reg-modal-header { border-bottom-color: var(--dark-border) !important; }
html.dark .reg-modal-title, body.dark-mode .reg-modal-title { color: var(--dark-text-primary) !important; }
html.dark .reg-modal-subtitle, body.dark-mode .reg-modal-subtitle { color: var(--dark-text-tertiary) !important; }
html.dark .reg-modal-close, body.dark-mode .reg-modal-close {
  background: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-secondary) !important;
}
html.dark .reg-modal-close:hover, body.dark-mode .reg-modal-close:hover {
  background: var(--dark-border-light) !important;
  color: var(--dark-text-primary) !important;
}
html.dark .reg-modal-footer, body.dark-mode .reg-modal-footer {
  background: var(--dark-bg-secondary) !important;
  border-top-color: var(--dark-border) !important;
  color: var(--dark-text-tertiary) !important;
}
html.dark .reg-modal-summary .plan-name, body.dark-mode .reg-modal-summary .plan-name { color: var(--dark-text-primary) !important; }
html.dark .reg-modal-summary .plan-price, body.dark-mode .reg-modal-summary .plan-price { color: var(--dark-primary) !important; }

/* ─── DARK: MODAL FORM ELEMENTS ──────────────────────────── */
html.dark .reg-modal-body .form-input,
html.dark .reg-modal-body .form-select,
html.dark .reg-modal-body input[type="text"],
html.dark .reg-modal-body input[type="email"],
html.dark .reg-modal-body input[type="tel"],
html.dark .reg-modal-body input[type="url"],
html.dark .reg-modal-body input[type="number"],
html.dark .reg-modal-body input[type="color"],
html.dark .reg-modal-body textarea,
html.dark .reg-modal-body select,
body.dark-mode .reg-modal-body .form-input,
body.dark-mode .reg-modal-body .form-select,
body.dark-mode .reg-modal-body input[type="text"],
body.dark-mode .reg-modal-body input[type="email"],
body.dark-mode .reg-modal-body input[type="tel"],
body.dark-mode .reg-modal-body input[type="url"],
body.dark-mode .reg-modal-body input[type="number"],
body.dark-mode .reg-modal-body input[type="color"],
body.dark-mode .reg-modal-body textarea,
body.dark-mode .reg-modal-body select {
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}
html.dark .reg-modal-body .form-input:focus,
html.dark .reg-modal-body .form-select:focus,
body.dark-mode .reg-modal-body .form-input:focus,
body.dark-mode .reg-modal-body .form-select:focus {
  border-color: var(--dark-primary) !important;
  box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.15) !important;
}
html.dark .reg-modal-body .form-input::placeholder,
body.dark-mode .reg-modal-body .form-input::placeholder,
html.dark .reg-modal-body input::placeholder,
body.dark-mode .reg-modal-body input::placeholder {
  color: var(--dark-text-muted) !important;
}
html.dark .reg-modal-body .form-label,
body.dark-mode .reg-modal-body .form-label { color: var(--dark-text-secondary) !important; }
html.dark .reg-modal-body .form-hint,
body.dark-mode .reg-modal-body .form-hint { color: var(--dark-text-muted) !important; }
html.dark .reg-modal-body .form-note,
body.dark-mode .reg-modal-body .form-note { color: var(--dark-text-muted) !important; }
html.dark .reg-modal-body .form-note a,
body.dark-mode .reg-modal-body .form-note a { color: var(--dark-primary) !important; }
html.dark .reg-modal-body .char-count,
body.dark-mode .reg-modal-body .char-count { color: var(--dark-text-muted) !important; }
html.dark .reg-modal-body .req,
body.dark-mode .reg-modal-body .req { color: var(--dark-danger) !important; }

/* ─── DARK: PHONE PREFIX & GEO SELECTS ───────────────────── */
html.dark #phone-prefix, body.dark-mode #phone-prefix {
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-secondary) !important;
}
html.dark #geo-city-custom, body.dark-mode #geo-city-custom {
  background: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

/* ─── DARK: FORM VALIDATION STATES ───────────────────────── */
html.dark .form-input.err, body.dark-mode .form-input.err {
  border-color: #F87171 !important; box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.12) !important;
}
html.dark .form-input.ok, body.dark-mode .form-input.ok {
  border-color: var(--dark-success) !important;
}
html.dark .form-error, body.dark-mode .form-error {
  color: #F87171 !important;
}
html.dark .form-select.err, body.dark-mode .form-select.err {
  border-color: #F87171 !important; box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.12) !important;
}
html.dark .form-select.ok, body.dark-mode .form-select.ok {
  border-color: var(--dark-success) !important;
}
html.dark .toast.error, body.dark-mode .toast.error {
  background: rgba(127, 29, 29, 0.95) !important; color: #FCA5A5 !important;
  border-left-color: #F87171 !important;
}
html.dark .toast.success, body.dark-mode .toast.success {
  background: rgba(6, 78, 59, 0.95) !important; color: #6EE7B7 !important;
  border-left-color: var(--dark-success) !important;
}
html.dark .toast.info, body.dark-mode .toast.info {
  background: rgba(30, 58, 138, 0.95) !important; color: #93C5FD !important;
  border-left-color: #60A5FA !important;
}

/* ─── DARK: STEP INDICATORS IN MODAL ─────────────────────── */
html.dark .form-steps::before, body.dark-mode .form-steps::before { background: var(--dark-border) !important; }
html.dark .form-step-ind, body.dark-mode .form-step-ind {
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
}
html.dark .form-step-ind::before, body.dark-mode .form-step-ind::before { color: var(--dark-text-muted) !important; }
html.dark .form-step-label, body.dark-mode .form-step-label { color: var(--dark-text-muted) !important; }
html.dark .form-step-ind.active, body.dark-mode .form-step-ind.active {
  background: var(--dark-primary) !important;
  border-color: var(--dark-primary) !important;
}
html.dark .form-step-ind.active::before, body.dark-mode .form-step-ind.active::before { color: white !important; }
html.dark .form-step-wrap.active .form-step-label, body.dark-mode .form-step-wrap.active .form-step-label { color: var(--dark-primary) !important; }
html.dark .form-step-ind.done, body.dark-mode .form-step-ind.done {
  background: var(--dark-success) !important;
  border-color: var(--dark-success) !important;
}
html.dark .form-step-ind.done::before, body.dark-mode .form-step-ind.done::before { color: white !important; }
html.dark .form-step-wrap.done .form-step-label, body.dark-mode .form-step-wrap.done .form-step-label { color: var(--dark-success) !important; }

/* ─── DARK: MODE CARDS IN MODAL ──────────────────────────── */
html.dark .mode-card, body.dark-mode .mode-card {
  background: var(--dark-bg-card) !important;
  border-color: var(--dark-border) !important;
}
html.dark .mode-card:hover, body.dark-mode .mode-card:hover { border-color: var(--dark-border-light) !important; }
html.dark .mode-card.active, body.dark-mode .mode-card.active { border-color: var(--dark-primary) !important; background: linear-gradient(180deg, rgba(129,140,248,.1) 0%, var(--dark-bg-card) 40%) !important; }
html.dark .mode-label, body.dark-mode .mode-label { color: var(--dark-text-primary) !important; }
html.dark .mode-desc, body.dark-mode .mode-desc { color: var(--dark-text-tertiary) !important; }
html.dark .mode-icon, body.dark-mode .mode-icon { color: var(--dark-primary) !important; }

/* ─── DARK: PAY LATER BUTTON ─────────────────────────────── */
html.dark .btn-pay-later, body.dark-mode .btn-pay-later {
  color: var(--dark-text-secondary) !important;
  border-color: var(--dark-border) !important;
  background: transparent !important;
}
html.dark .btn-pay-later:hover, body.dark-mode .btn-pay-later:hover {
  border-color: var(--dark-primary) !important;
  color: var(--dark-primary) !important;
  background: rgba(129, 140, 248, 0.08) !important;
}

/* ─── DARK: MOBILE DRAG HANDLE ───────────────────────────── */
html.dark .reg-modal-drag-bar, body.dark-mode .reg-modal-drag-bar { background: var(--dark-border-light) !important; }

/* ─── DARK: COMPARISON TABLE ─────────────────────────────── */
html.dark .mode-compare-table table,
body.dark-mode .mode-compare-table table {
  background: var(--dark-bg-card) !important;
  border-color: var(--dark-border) !important;
}
html.dark .mode-compare-table th,
body.dark-mode .mode-compare-table th {
  background: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
  border-bottom-color: var(--dark-border) !important;
}
html.dark .mode-compare-table td,
body.dark-mode .mode-compare-table td {
  color: var(--dark-text-secondary) !important;
  border-bottom-color: var(--dark-border) !important;
}
html.dark .mode-compare-table td:first-child,
body.dark-mode .mode-compare-table td:first-child { color: var(--dark-text-primary) !important; }
html.dark .mode-compare-table tr:hover td,
body.dark-mode .mode-compare-table tr:hover td { background: var(--dark-bg-tertiary) !important; }

/* ─── DARK: WIDGET PLAYGROUND ────────────────────────────── */
html.dark .wp-tab, body.dark-mode .wp-tab {
  background: var(--dark-bg-card) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-secondary) !important;
}
html.dark .wp-tab:hover, body.dark-mode .wp-tab:hover { border-color: var(--dark-primary) !important; color: var(--dark-primary) !important; }
html.dark .wp-tab.active, body.dark-mode .wp-tab.active {
  background: var(--dark-primary) !important;
  color: white !important;
  border-color: var(--dark-primary) !important;
}
html.dark .wp-browser-body, body.dark-mode .wp-browser-body { background: var(--dark-bg-primary) !important; }
html.dark .wp-preview h4, body.dark-mode .wp-preview h4 { color: var(--dark-text-primary) !important; }
html.dark .wp-preview p, body.dark-mode .wp-preview p { color: var(--dark-text-tertiary) !important; }

/* Template Switcher Dark Mode */
html.dark .tpl-tab, body.dark-mode .tpl-tab { background: var(--dark-bg-secondary) !important; border-color: var(--dark-border) !important; color: var(--dark-text-secondary) !important; }
html.dark .tpl-tab:hover, body.dark-mode .tpl-tab:hover { border-color: var(--dark-text-muted) !important; }
html.dark .tpl-tab.active, body.dark-mode .tpl-tab.active { border-color: var(--dark-primary) !important; color: var(--dark-primary) !important; background: rgba(129,140,248,.1) !important; }
html.dark #tpl-info-name, body.dark-mode #tpl-info-name { color: var(--dark-text-primary) !important; }
html.dark #tpl-info-desc, body.dark-mode #tpl-info-desc { color: var(--dark-text-tertiary) !important; }
html.dark #demo-website-view .wp-browser::after, body.dark-mode #demo-website-view .wp-browser::after { background: linear-gradient(transparent, var(--dark-bg-primary)) !important; }
html.dark #tpl-preview-body::-webkit-scrollbar-thumb, body.dark-mode #tpl-preview-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15) !important; }

html.dark .wp-event-item, body.dark-mode .wp-event-item { background: var(--dark-bg-secondary) !important; }
html.dark .wp-event-info h5, body.dark-mode .wp-event-info h5 { color: var(--dark-text-primary) !important; }
html.dark .wp-event-info p, body.dark-mode .wp-event-info p { color: var(--dark-text-muted) !important; }
html.dark .wp-chatbot-demo, body.dark-mode .wp-chatbot-demo { background: var(--dark-bg-card) !important; border-color: var(--dark-border) !important; }
html.dark .wp-chat-msg.bot, body.dark-mode .wp-chat-msg.bot { background: var(--dark-bg-tertiary) !important; color: var(--dark-text-secondary) !important; }
html.dark .wp-chat-input, body.dark-mode .wp-chat-input { border-top-color: var(--dark-border) !important; }
html.dark .wp-chat-input input, body.dark-mode .wp-chat-input input { background: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; color: var(--dark-text-primary) !important; }
html.dark .wp-form-preview, body.dark-mode .wp-form-preview { background: var(--dark-bg-secondary) !important; }
html.dark .wp-form-row label, body.dark-mode .wp-form-row label { color: var(--dark-text-secondary) !important; }
html.dark .wp-form-row input, html.dark .wp-form-row select,
body.dark-mode .wp-form-row input, body.dark-mode .wp-form-row select { background: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; color: var(--dark-text-primary) !important; }
html.dark .wp-staff-card, body.dark-mode .wp-staff-card { background: var(--dark-bg-secondary) !important; }
html.dark .wp-staff-card:hover, body.dark-mode .wp-staff-card:hover { background: var(--dark-bg-card) !important; }
html.dark .wp-staff-card h5, body.dark-mode .wp-staff-card h5 { color: var(--dark-text-primary) !important; }
html.dark .wp-staff-card span, body.dark-mode .wp-staff-card span { color: var(--dark-text-muted) !important; }
html.dark .wp-review-card, body.dark-mode .wp-review-card { background: var(--dark-bg-secondary) !important; }
html.dark .wp-review-card blockquote, body.dark-mode .wp-review-card blockquote { color: var(--dark-text-secondary) !important; }
html.dark .wp-review-author strong, body.dark-mode .wp-review-author strong { color: var(--dark-text-primary) !important; }
html.dark .wp-review-author span, body.dark-mode .wp-review-author span { color: var(--dark-text-muted) !important; }
html.dark .wp-gallery-ph, body.dark-mode .wp-gallery-ph { background: var(--dark-bg-secondary) !important; }

/* ─── DARK: SKELETON LOADERS ─────────────────────────────── */
html.dark .skeleton, body.dark-mode .skeleton {
  background: linear-gradient(90deg, var(--dark-bg-tertiary) 25%, var(--dark-bg-elevated) 50%, var(--dark-bg-tertiary) 75%) !important;
  background-size: 200% 100% !important;
}
html.dark .skeleton-card, body.dark-mode .skeleton-card { background: var(--dark-bg-card) !important; border-color: var(--dark-border) !important; }
html.dark .pricing-skeleton .skel-card, body.dark-mode .pricing-skeleton .skel-card { background: var(--dark-bg-card) !important; border-color: var(--dark-border) !important; }

/* ─── DARK: REG SECTION CTA ─────────────────────────────── */
html.dark .reg-section, body.dark-mode .reg-section { background: linear-gradient(135deg, #0F172A, #1E1B4B) !important; }
html.dark .reg-section .btn-primary,
body.dark-mode .reg-section .btn-primary {
    color: #4F46E5 !important;
    background: #FFFFFF !important;
    border: 2px solid rgba(255,255,255,.3) !important;
    box-shadow: 0 4px 20px rgba(255,255,255,.15) !important;
}
html.dark .reg-section .btn-primary:hover,
body.dark-mode .reg-section .btn-primary:hover {
    color: #3730A3 !important;
    background: #F1F5F9 !important;
    box-shadow: 0 8px 30px rgba(255,255,255,.2) !important;
    transform: translateY(-2px);
}
html.dark .reg-section .btn-primary:focus,
body.dark-mode .reg-section .btn-primary:focus {
    color: #4F46E5 !important;
    background: #FFFFFF !important;
    outline: 2px solid rgba(129,140,248,.5) !important;
    outline-offset: 2px;
}

/* ─── DARK: DEMO SECTION CTA ────────────────────────────── */
html.dark .demo-cta p, body.dark-mode .demo-cta p { color: var(--dark-text-tertiary) !important; }
html.dark .demo-mode-toggle, body.dark-mode .demo-mode-toggle { background: var(--dark-bg-card) !important; border-color: var(--dark-border) !important; }
html.dark .dmt-opt, body.dark-mode .dmt-opt { color: var(--dark-text-secondary) !important; }
html.dark .dmt-opt.active, body.dark-mode .dmt-opt.active { background: var(--dark-primary) !important; color: white !important; }

/* ─── DARK: OTP INPUTS ──────────────────────────────────── */
html.dark .otp-digit, body.dark-mode .otp-digit {
  background: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}
html.dark .otp-digit:focus, html.dark .otp-digit.filled,
body.dark-mode .otp-digit:focus, body.dark-mode .otp-digit.filled {
  border-color: var(--dark-primary) !important;
  background: rgba(129, 140, 248, 0.08) !important;
}

/* ─── DARK: TOUR TOOLTIP ─────────────────────────────────── */
html.dark .tour-tooltip, body.dark-mode .tour-tooltip { background: var(--dark-bg-card) !important; }
html.dark .tour-tooltip h5, body.dark-mode .tour-tooltip h5 { color: var(--dark-text-primary) !important; }
html.dark .tour-tooltip p, body.dark-mode .tour-tooltip p { color: var(--dark-text-secondary) !important; }

/* ─── DARK: PLAN CARD TRIAL TAG ──────────────────────────── */
html.dark .plan-card-trial, body.dark-mode .plan-card-trial { color: var(--dark-text-muted) !important; }
html.dark .plan-card-free-tag, body.dark-mode .plan-card-free-tag { background: rgba(52, 211, 153, 0.1) !important; color: var(--dark-success) !important; }

/* ─── DARK: PRICING MODE BADGES ──────────────────────────── */
html.dark .price-mode-tag, body.dark-mode .price-mode-tag { background: rgba(129, 140, 248, 0.1) !important; color: var(--dark-primary) !important; border-color: rgba(129, 140, 248, 0.2) !important; }
html.dark .price-mode-tag.full, body.dark-mode .price-mode-tag.full { background: rgba(96, 165, 250, 0.1) !important; color: var(--dark-info) !important; border-color: rgba(96, 165, 250, 0.2) !important; }

/* ═══════════════════════════════════════════════════════════════
   DARK: ADMIN DASHBOARD (Tailwind-based pages)
   ═══════════════════════════════════════════════════════════════ */
html.dark aside, html.dark .sidebar, body.dark-mode aside, body.dark-mode .sidebar { background: var(--dark-bg-secondary) !important; border-color: var(--dark-border) !important; }
html.dark aside a, html.dark .sidebar a, body.dark-mode aside a, body.dark-mode .sidebar a { color: var(--dark-text-secondary) !important; }
html.dark aside a:hover, body.dark-mode aside a:hover { background: rgba(129, 140, 248, 0.1) !important; color: var(--dark-primary) !important; }
html.dark header, html.dark .topbar, body.dark-mode header, body.dark-mode .topbar { background: var(--dark-bg-secondary) !important; border-color: var(--dark-border) !important; }
html.dark main, html.dark .page-content, body.dark-mode main, body.dark-mode .page-content { background: var(--dark-bg-primary) !important; }
html.dark .bg-white, body.dark-mode .bg-white { background: var(--dark-bg-card) !important; }
html.dark .bg-gray-50, html.dark .bg-slate-50, body.dark-mode .bg-gray-50, body.dark-mode .bg-slate-50 { background: var(--dark-bg-secondary) !important; }
html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-slate-100, html.dark .border-slate-200,
body.dark-mode .border-gray-100, body.dark-mode .border-gray-200, body.dark-mode .border-slate-100, body.dark-mode .border-slate-200 { border-color: var(--dark-border) !important; }
html.dark .text-gray-900, html.dark .text-slate-900, body.dark-mode .text-gray-900, body.dark-mode .text-slate-900 { color: var(--dark-text-primary) !important; }
html.dark .text-gray-700, html.dark .text-slate-700, body.dark-mode .text-gray-700, body.dark-mode .text-slate-700 { color: var(--dark-text-secondary) !important; }
html.dark .text-gray-500, html.dark .text-gray-600, html.dark .text-slate-500, html.dark .text-slate-600,
body.dark-mode .text-gray-500, body.dark-mode .text-gray-600, body.dark-mode .text-slate-500, body.dark-mode .text-slate-600 { color: var(--dark-text-tertiary) !important; }
html.dark .text-gray-400, html.dark .text-slate-400, body.dark-mode .text-gray-400, body.dark-mode .text-slate-400 { color: var(--dark-text-muted) !important; }

/* Admin form inputs dark */
html.dark input[type="text"], html.dark input[type="email"], html.dark input[type="password"],
html.dark input[type="number"], html.dark input[type="tel"], html.dark input[type="url"],
html.dark input[type="search"], html.dark textarea, html.dark select,
body.dark-mode input[type="text"], body.dark-mode input[type="email"], body.dark-mode input[type="password"],
body.dark-mode input[type="number"], body.dark-mode input[type="tel"], body.dark-mode input[type="url"],
body.dark-mode input[type="search"], body.dark-mode textarea, body.dark-mode select {
    background: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}
html.dark input:focus, html.dark textarea:focus, html.dark select:focus,
body.dark-mode input:focus, body.dark-mode textarea:focus, body.dark-mode select:focus {
    border-color: var(--dark-primary) !important;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15) !important;
}

/* Admin tables dark */
html.dark table, body.dark-mode table { border-color: var(--dark-border) !important; }
html.dark th, body.dark-mode th { background: var(--dark-bg-tertiary) !important; color: var(--dark-text-primary) !important; border-color: var(--dark-border) !important; }
html.dark td, body.dark-mode td { color: var(--dark-text-secondary) !important; border-color: var(--dark-border) !important; }
html.dark tr:hover td, body.dark-mode tr:hover td { background: rgba(129, 140, 248, 0.05) !important; }

/* Admin footer dark */
html.dark footer.border-t, body.dark-mode footer.border-t { background: var(--dark-bg-secondary) !important; border-color: var(--dark-border) !important; }

/* Payment page dark */
html.dark .gradient-bg, body.dark-mode .gradient-bg { background: linear-gradient(135deg, #312E81 0%, #4C1D95 50%, #581C87 100%) !important; }

/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE CONTRAST — Visible text improvements
   ═══════════════════════════════════════════════════════════════ */

/* Mode card feature text - darker for readability */
.mode-feat { color: #1E293B; }
.mode-desc { color: #475569; }
.mode-stat-val { color: #4F46E5; font-weight: 800; }
.mode-proof-text strong { color: #059669; }

/* Feature cards - ensure text is readable */
.feat-card h4 { color: #0F172A; font-weight: 700; }
.feat-card p { color: #64748B; }

/* Pricing card text contrast */
.price-card .price-name { color: #0F172A; }
.price-card .price-desc { color: #64748B; }
.price-card .price-feat { color: #475569; }
.price-card .price-feat.off { color: #CBD5E1; }

/* Registration form text contrast */
.reg-card .form-label { color: #1E293B; font-weight: 700; }
.reg-card .form-input,
.reg-card .form-select { color: #0F172A; border-color: #CBD5E1; }
.reg-card .form-input:focus,
.reg-card .form-select:focus { border-color: #4F46E5; }

/* Section headers */
.section-header h2 { color: #0F172A; }
.section-header p { color: #64748B; }

/* Trust bar text */
.trust-label { color: #475569; font-weight: 700; }
.trust-logo { color: #475569; }

/* Demo section text */
.demo-step-title { color: #0F172A; }
.demo-step-desc { color: #94A3B8; }

/* Order summary text */
.order-summary .order-line { color: #1E293B; }
.order-summary .order-total { color: #4F46E5; }

/* Testimonial text */
.test-quote { color: #334155; }
.test-card h5 { color: #0F172A; }

/* ═══════════════════════════════════════════════════════════════
   DARK MODE: COLORED BADGE & PILL VISIBILITY FIXES
   ═══════════════════════════════════════════════════════════════
   Badges like bg-indigo-50 text-indigo-700, bg-emerald-50 text-emerald-700, etc.
   need darker backgrounds with lighter text in dark mode.
   Covers: SLC0002, SLC0004, SLC0005, SLC0009, SLC0011, SLC0012, SLC0015, SLC0016
*/

/* Colored backgrounds → darker variants */
html.dark .bg-indigo-50, body.dark-mode .bg-indigo-50 { background: rgba(99, 102, 241, 0.15) !important; }
html.dark .bg-indigo-100, body.dark-mode .bg-indigo-100 { background: rgba(99, 102, 241, 0.2) !important; }
html.dark .bg-purple-50, body.dark-mode .bg-purple-50 { background: rgba(139, 92, 246, 0.15) !important; }
html.dark .bg-purple-100, body.dark-mode .bg-purple-100 { background: rgba(139, 92, 246, 0.2) !important; }
html.dark .bg-emerald-50, body.dark-mode .bg-emerald-50 { background: rgba(16, 185, 129, 0.15) !important; }
html.dark .bg-emerald-100, body.dark-mode .bg-emerald-100 { background: rgba(16, 185, 129, 0.2) !important; }
html.dark .bg-green-50, body.dark-mode .bg-green-50 { background: rgba(34, 197, 94, 0.15) !important; }
html.dark .bg-green-100, body.dark-mode .bg-green-100 { background: rgba(34, 197, 94, 0.2) !important; }
html.dark .bg-amber-50, body.dark-mode .bg-amber-50 { background: rgba(245, 158, 11, 0.15) !important; }
html.dark .bg-amber-100, body.dark-mode .bg-amber-100 { background: rgba(245, 158, 11, 0.2) !important; }
html.dark .bg-yellow-50, body.dark-mode .bg-yellow-50 { background: rgba(234, 179, 8, 0.15) !important; }
html.dark .bg-yellow-100, body.dark-mode .bg-yellow-100 { background: rgba(234, 179, 8, 0.2) !important; }
html.dark .bg-red-50, body.dark-mode .bg-red-50 { background: rgba(239, 68, 68, 0.15) !important; }
html.dark .bg-red-100, body.dark-mode .bg-red-100 { background: rgba(239, 68, 68, 0.2) !important; }
html.dark .bg-orange-50, body.dark-mode .bg-orange-50 { background: rgba(249, 115, 22, 0.15) !important; }
html.dark .bg-orange-100, body.dark-mode .bg-orange-100 { background: rgba(249, 115, 22, 0.2) !important; }
html.dark .bg-blue-50, body.dark-mode .bg-blue-50 { background: rgba(59, 130, 246, 0.15) !important; }
html.dark .bg-blue-100, body.dark-mode .bg-blue-100 { background: rgba(59, 130, 246, 0.2) !important; }
html.dark .bg-cyan-50, body.dark-mode .bg-cyan-50 { background: rgba(6, 182, 212, 0.15) !important; }
html.dark .bg-cyan-100, body.dark-mode .bg-cyan-100 { background: rgba(6, 182, 212, 0.2) !important; }

/* Colored text → lighter in dark mode for visibility */
html.dark .text-indigo-600, body.dark-mode .text-indigo-600 { color: #A5B4FC !important; }
html.dark .text-indigo-700, body.dark-mode .text-indigo-700 { color: #A5B4FC !important; }
html.dark .text-purple-600, body.dark-mode .text-purple-600 { color: #C4B5FD !important; }
html.dark .text-purple-700, body.dark-mode .text-purple-700 { color: #C4B5FD !important; }
html.dark .text-emerald-600, body.dark-mode .text-emerald-600 { color: #6EE7B7 !important; }
html.dark .text-emerald-700, body.dark-mode .text-emerald-700 { color: #6EE7B7 !important; }
html.dark .text-green-600, body.dark-mode .text-green-600 { color: #86EFAC !important; }
html.dark .text-green-700, body.dark-mode .text-green-700 { color: #86EFAC !important; }
html.dark .text-amber-600, body.dark-mode .text-amber-600 { color: #FCD34D !important; }
html.dark .text-amber-700, body.dark-mode .text-amber-700 { color: #FCD34D !important; }
html.dark .text-yellow-600, body.dark-mode .text-yellow-600 { color: #FDE047 !important; }
html.dark .text-yellow-700, body.dark-mode .text-yellow-700 { color: #FDE047 !important; }
html.dark .text-red-600, body.dark-mode .text-red-600 { color: #FCA5A5 !important; }
html.dark .text-red-700, body.dark-mode .text-red-700 { color: #FCA5A5 !important; }
html.dark .text-orange-600, body.dark-mode .text-orange-600 { color: #FDBA74 !important; }
html.dark .text-orange-700, body.dark-mode .text-orange-700 { color: #FDBA74 !important; }
html.dark .text-blue-600, body.dark-mode .text-blue-600 { color: #93C5FD !important; }
html.dark .text-blue-700, body.dark-mode .text-blue-700 { color: #93C5FD !important; }

/* Preserve white text on colored backgrounds (buttons) — don't override */
html.dark .bg-indigo-600 .text-white, html.dark .bg-emerald-600 .text-white,
html.dark .bg-red-600 .text-white, html.dark .bg-green-600 .text-white,
body.dark-mode .bg-indigo-600 .text-white, body.dark-mode .bg-emerald-600 .text-white,
body.dark-mode .bg-red-600 .text-white, body.dark-mode .bg-green-600 .text-white { color: #FFFFFF !important; }
html.dark .bg-indigo-600, body.dark-mode .bg-indigo-600 { background-color: #4F46E5 !important; }

/* Dark mode action links hover */
html.dark a:hover .text-indigo-600, html.dark .hover\:text-indigo-600:hover,
body.dark-mode a:hover .text-indigo-600, body.dark-mode .hover\:text-indigo-600:hover { color: #C7D2FE !important; }

/* Dark mode hover backgrounds */
html.dark .hover\:bg-indigo-50:hover, body.dark-mode .hover\:bg-indigo-50:hover { background: rgba(99, 102, 241, 0.12) !important; }
html.dark .hover\:bg-red-50:hover, body.dark-mode .hover\:bg-red-50:hover { background: rgba(239, 68, 68, 0.12) !important; }
html.dark .hover\:bg-emerald-50:hover, body.dark-mode .hover\:bg-emerald-50:hover { background: rgba(16, 185, 129, 0.12) !important; }
html.dark .hover\:bg-amber-50:hover, body.dark-mode .hover\:bg-amber-50:hover { background: rgba(245, 158, 11, 0.12) !important; }
html.dark .hover\:bg-gray-50:hover, body.dark-mode .hover\:bg-gray-50:hover { background: rgba(255, 255, 255, 0.05) !important; }
html.dark .hover\:bg-gray-100:hover, body.dark-mode .hover\:bg-gray-100:hover { background: rgba(255, 255, 255, 0.08) !important; }
html.dark .hover\:bg-gray-200:hover, body.dark-mode .hover\:bg-gray-200:hover { background: rgba(255, 255, 255, 0.12) !important; }

/* Dark mode stat card icon containers */
html.dark .stat-card .bg-indigo-50, body.dark-mode .stat-card .bg-indigo-50 { background: rgba(99, 102, 241, 0.2) !important; }
html.dark .stat-card .bg-emerald-50, body.dark-mode .stat-card .bg-emerald-50 { background: rgba(16, 185, 129, 0.2) !important; }
html.dark .stat-card .bg-green-50, body.dark-mode .stat-card .bg-green-50 { background: rgba(34, 197, 94, 0.2) !important; }
html.dark .stat-card .bg-red-50, body.dark-mode .stat-card .bg-red-50 { background: rgba(239, 68, 68, 0.2) !important; }

/* Dark mode confirmation modal */
html.dark .confirm-modal,
body.dark-mode .confirm-modal {
    background: var(--dark-bg-card) !important;
    color: var(--dark-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE: DOMAIN PAGE BADGES
   SLC0015, SLC0016
   ═══════════════════════════════════════════════════════════════ */
html.dark .bg-sky-50, body.dark-mode .bg-sky-50 { background: rgba(14, 165, 233, 0.15) !important; }
html.dark .bg-sky-100, body.dark-mode .bg-sky-100 { background: rgba(14, 165, 233, 0.2) !important; }
html.dark .text-sky-600, body.dark-mode .text-sky-600 { color: #7DD3FC !important; }
html.dark .text-sky-700, body.dark-mode .text-sky-700 { color: #7DD3FC !important; }

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE: CONTRAST IMPROVEMENTS
   SLC0003, SLC0010, SLC0013, SLC0014, SLC0017
   ═══════════════════════════════════════════════════════════════ */

/* SLC0003: Global search results — ensure text is visible */
.search-result-title { color: #1E293B; }
.search-result-desc { color: #64748B; }

/* SLC0010: Subscription "New Subscription" button hover — white text stays white */
a.bg-indigo-600:hover,
a.bg-indigo-600:focus { color: #FFFFFF !important; }

/* SLC0013: Billing heading visibility */
h1.text-gray-900 { color: #0F172A; }

/* SLC0014: Export CSV button hover text */
a.bg-gray-100:hover { color: #1E293B; }

/* SLC0017: Notification text — darker for readability */
.text-slate-500 { color: #475569; }
.text-slate-400 { color: #64748B; }
.text-slate-900 { color: #0F172A; }

/* ─── ACCESSIBILITY ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

:focus-visible {
    outline: 2px solid #6366F1;
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL CREDENTIALS — Light & Dark Mode
   ═══════════════════════════════════════════════════════════════ */
.modal-credentials-box {
    background: #F8FAFC; border-radius: 12px; padding: 16px; margin: 16px 0; text-align: left;
}
.modal-cred-title {
    font-weight: 700; margin-bottom: 8px; color: #0F172A; font-size: .85rem;
}
.modal-cred-title i { color: var(--primary, #4F46E5); margin-right: 4px; }
.modal-cred-row {
    display: flex; justify-content: space-between; align-items: center; padding: 8px 0;
    border-bottom: 1px solid #E2E8F0;
}
.modal-cred-row > span { color: #475569; font-size: .8rem; }
.modal-cred-row > div { display: flex; align-items: center; gap: 6px; }
.modal-cred-row > div strong { font-size: .8rem; color: #0F172A; }
.cred-copy-btn { background: none; border: none; cursor: pointer; color: #475569; padding: 2px; transition: color .2s; }
.cred-copy-btn:hover { color: var(--primary, #4F46E5); }
.modal-cred-note {
    font-size: .7rem; color: #475569; margin-top: 8px; background: #EEF2FF; padding: 6px 10px; border-radius: 6px;
}
.modal-cred-note i { color: var(--primary, #4F46E5); }
.modal-redirect-box {
    color: #1E293B; font-size: .8rem; margin-bottom: 14px; padding: 10px 16px; background: #F0F9FF; border-radius: 8px;
}

/* Dark mode modal credentials */
html.dark .modal-credentials-box, body.dark-mode .modal-credentials-box {
    background: var(--dark-bg-tertiary) !important;
}
html.dark .modal-cred-title, body.dark-mode .modal-cred-title { color: var(--dark-text-primary) !important; }
html.dark .modal-cred-row, body.dark-mode .modal-cred-row { border-bottom-color: var(--dark-border) !important; }
html.dark .modal-cred-row > span, body.dark-mode .modal-cred-row > span { color: var(--dark-text-tertiary) !important; }
html.dark .modal-cred-row > div strong, body.dark-mode .modal-cred-row > div strong { color: var(--dark-text-primary) !important; }
html.dark .cred-copy-btn, body.dark-mode .cred-copy-btn { color: var(--dark-text-tertiary) !important; }
html.dark .cred-copy-btn:hover, body.dark-mode .cred-copy-btn:hover { color: var(--dark-primary) !important; }
html.dark .modal-cred-note, body.dark-mode .modal-cred-note {
    background: rgba(129, 140, 248, 0.1) !important; color: var(--dark-text-tertiary) !important;
}
html.dark .modal-redirect-box, body.dark-mode .modal-redirect-box {
    background: var(--dark-bg-tertiary) !important; color: var(--dark-text-secondary) !important;
}
html.dark .modal-ic, body.dark-mode .modal-ic { background: rgba(16, 185, 129, 0.15) !important; }

/* Dark mode onboard steps */
html.dark .ob-step-icon, body.dark-mode .ob-step-icon { background: var(--dark-bg-tertiary) !important; color: var(--dark-text-tertiary) !important; }
html.dark .ob-step-icon.pending, body.dark-mode .ob-step-icon.pending { background: var(--dark-bg-tertiary) !important; color: var(--dark-text-muted) !important; }
html.dark .ob-step-text span, body.dark-mode .ob-step-text span { color: var(--dark-text-muted) !important; }
html.dark .ob-step.active .ob-step-icon, body.dark-mode .ob-step.active .ob-step-icon { background: rgba(79,70,229,.2) !important; color: var(--dark-primary) !important; }

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIAL CARD — Overflow Fix
   ═══════════════════════════════════════════════════════════════ */
.test-slider { overflow: hidden; }
.test-card { overflow: hidden; }
.test-quote {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════
   PAYMENT PAGE — Dark Mode Support
   ═══════════════════════════════════════════════════════════════ */
html.dark .min-h-screen.bg-slate-50, body.dark-mode .min-h-screen.bg-slate-50 { background: var(--dark-bg-primary) !important; }
html.dark .plan-card, body.dark-mode .plan-card { background: var(--dark-bg-card) !important; border-color: var(--dark-border) !important; }
html.dark .plan-card.selected, body.dark-mode .plan-card.selected { border-color: var(--dark-primary) !important; box-shadow: 0 20px 40px -12px rgba(129,140,248,.2) !important; }
html.dark .plan-card h3, body.dark-mode .plan-card h3 { color: var(--dark-text-primary) !important; }
html.dark .plan-card p, body.dark-mode .plan-card p { color: var(--dark-text-tertiary) !important; }

/* Payment success/fail states dark mode */
html.dark .bg-gradient-to-br.from-emerald-50, body.dark-mode .bg-gradient-to-br.from-emerald-50 {
    background: linear-gradient(135deg, rgba(16,185,129,.1), rgba(5,150,105,.1)) !important;
    border-color: rgba(16,185,129,.3) !important;
}
html.dark .text-emerald-800, body.dark-mode .text-emerald-800 { color: var(--dark-success) !important; }
html.dark .text-emerald-600, body.dark-mode .text-emerald-600 { color: rgba(52,211,153,.9) !important; }
html.dark .bg-emerald-100, body.dark-mode .bg-emerald-100 { background: rgba(16,185,129,.15) !important; }
html.dark .text-emerald-700, body.dark-mode .text-emerald-700 { color: var(--dark-success) !important; }

html.dark .bg-red-50, body.dark-mode .bg-red-50 { background: rgba(239,68,68,.08) !important; border-color: rgba(239,68,68,.2) !important; }
html.dark .text-red-800, body.dark-mode .text-red-800 { color: var(--dark-danger) !important; }
html.dark .text-red-600, html.dark .text-red-500, body.dark-mode .text-red-600, body.dark-mode .text-red-500 { color: rgba(248,113,113,.9) !important; }
html.dark .bg-red-100, body.dark-mode .bg-red-100 { background: rgba(239,68,68,.12) !important; }
html.dark .text-red-700, body.dark-mode .text-red-700 { color: var(--dark-danger) !important; }

/* Payment footer dark */
html.dark .border-gray-100.text-gray-400 p, body.dark-mode .border-gray-100.text-gray-400 p { color: var(--dark-text-muted) !important; }

/* ═══════════════════════════════════════════════════════════════
   DARK: SCHOOL-ADMIN PAGES — Pastel Backgrounds & Badges
   ═══════════════════════════════════════════════════════════════ */

/* Pastel backgrounds → semi-transparent dark variants */
html.dark .bg-indigo-50, body.dark-mode .bg-indigo-50 { background-color: rgba(99,102,241,0.12) !important; }
html.dark .bg-indigo-100, body.dark-mode .bg-indigo-100 { background-color: rgba(99,102,241,0.2) !important; }
html.dark .bg-purple-50, body.dark-mode .bg-purple-50 { background-color: rgba(139,92,246,0.12) !important; }
html.dark .bg-purple-100, body.dark-mode .bg-purple-100 { background-color: rgba(139,92,246,0.2) !important; }
html.dark .bg-emerald-50, body.dark-mode .bg-emerald-50 { background-color: rgba(16,185,129,0.12) !important; }
html.dark .bg-emerald-100, body.dark-mode .bg-emerald-100 { background-color: rgba(16,185,129,0.2) !important; }
html.dark .bg-amber-50, body.dark-mode .bg-amber-50 { background-color: rgba(245,158,11,0.12) !important; }
html.dark .bg-amber-100, body.dark-mode .bg-amber-100 { background-color: rgba(245,158,11,0.2) !important; }
html.dark .bg-blue-50, body.dark-mode .bg-blue-50 { background-color: rgba(59,130,246,0.12) !important; }
html.dark .bg-blue-100, body.dark-mode .bg-blue-100 { background-color: rgba(59,130,246,0.2) !important; }
html.dark .bg-primary-50, body.dark-mode .bg-primary-50 { background-color: rgba(99,102,241,0.12) !important; }
html.dark .bg-primary-100, body.dark-mode .bg-primary-100 { background-color: rgba(99,102,241,0.2) !important; }
html.dark .bg-slate-100, body.dark-mode .bg-slate-100 { background-color: var(--dark-bg-tertiary) !important; }
html.dark .bg-slate-200, body.dark-mode .bg-slate-200 { background-color: var(--dark-border) !important; }

/* Pastel border colors */
html.dark .border-indigo-100, html.dark .border-indigo-200,
body.dark-mode .border-indigo-100, body.dark-mode .border-indigo-200 { border-color: rgba(99,102,241,0.25) !important; }
html.dark .border-emerald-100, html.dark .border-emerald-200,
body.dark-mode .border-emerald-100, body.dark-mode .border-emerald-200 { border-color: rgba(16,185,129,0.25) !important; }
html.dark .border-amber-100, html.dark .border-amber-200,
body.dark-mode .border-amber-100, body.dark-mode .border-amber-200 { border-color: rgba(245,158,11,0.25) !important; }
html.dark .border-purple-100, html.dark .border-purple-200,
body.dark-mode .border-purple-100, body.dark-mode .border-purple-200 { border-color: rgba(139,92,246,0.25) !important; }
html.dark .border-primary-200, html.dark .border-primary-600,
body.dark-mode .border-primary-200, body.dark-mode .border-primary-600 { border-color: rgba(99,102,241,0.4) !important; }

/* Dark text on colored-900 contexts (still need to be readable) */
html.dark .text-blue-900, body.dark-mode .text-blue-900 { color: #93c5fd !important; }
html.dark .text-purple-900, body.dark-mode .text-purple-900 { color: #c4b5fd !important; }
html.dark .text-emerald-900, body.dark-mode .text-emerald-900 { color: #6ee7b7 !important; }
html.dark .text-amber-900, body.dark-mode .text-amber-900 { color: #fcd34d !important; }
html.dark .text-indigo-900, body.dark-mode .text-indigo-900 { color: #a5b4fc !important; }

/* Hover states for dark mode */
html.dark .hover\:bg-slate-50:hover, body.dark-mode .hover\:bg-slate-50:hover { background-color: var(--dark-bg-tertiary) !important; }
html.dark .hover\:bg-indigo-50:hover, body.dark-mode .hover\:bg-indigo-50:hover { background-color: rgba(99,102,241,0.15) !important; }
html.dark .hover\:bg-indigo-100:hover, body.dark-mode .hover\:bg-indigo-100:hover { background-color: rgba(99,102,241,0.22) !important; }
html.dark .hover\:bg-slate-100:hover, body.dark-mode .hover\:bg-slate-100:hover { background-color: var(--dark-bg-tertiary) !important; }

/* Ring white on timeline dots → match dark card bg */
html.dark .ring-white, body.dark-mode .ring-white { --tw-ring-color: var(--dark-bg-card) !important; }

/* Inline style override for FAQ answer text */
html.dark p[style*="color: #334155"], html.dark p[style*="color:#334155"],
body.dark-mode p[style*="color: #334155"], body.dark-mode p[style*="color:#334155"] { color: var(--dark-text-secondary) !important; }

/* Gradient backgrounds in help/subscription sections */
html.dark [class*="from-slate-50"], body.dark-mode [class*="from-slate-50"] { background: var(--dark-bg-secondary) !important; }
html.dark [class*="from-indigo-50"], body.dark-mode [class*="from-indigo-50"] { background: rgba(99,102,241,0.08) !important; }

/* Primary-colored text */
html.dark .text-primary-700, body.dark-mode .text-primary-700 { color: var(--dark-primary) !important; }
html.dark .text-primary-900, body.dark-mode .text-primary-900 { color: var(--dark-primary-hover) !important; }
html.dark .text-primary-600, body.dark-mode .text-primary-600 { color: var(--dark-primary) !important; }

/* Active sidebar in dark mode */
html.dark .bg-primary-100, body.dark-mode .bg-primary-100 { background-color: rgba(99,102,241,0.18) !important; }
html.dark .shadow-primary-200\/50, body.dark-mode .shadow-primary-200\/50 { box-shadow: none !important; }

/* Code blocks */
html.dark code, body.dark-mode code { background: var(--dark-bg-tertiary) !important; color: var(--dark-text-secondary) !important; }

/* Topbar backdrop in dark mode */
html.dark .bg-white\/80, html.dark [class*="bg-white\\/80"],
body.dark-mode .bg-white\/80, body.dark-mode [class*="bg-white\\/80"] { background: rgba(30,41,59,0.85) !important; }

/* Payment button dark mode fix */
html.dark .bg-indigo-600, body.dark-mode .bg-indigo-600 { color: #fff !important; }
html.dark .bg-emerald-600, body.dark-mode .bg-emerald-600 { color: #fff !important; }

/* ═══════════════════════════════════════════════════════════════
   DARK: MISSING OVERRIDES v2 — Comprehensive Coverage
   ═══════════════════════════════════════════════════════════════ */

/* bg-gray-100/200 (non-slate) — badges, buttons, code tags */
html.dark .bg-gray-100, body.dark-mode .bg-gray-100 { background-color: var(--dark-bg-tertiary) !important; }
html.dark .bg-gray-200, body.dark-mode .bg-gray-200 { background-color: var(--dark-bg-elevated) !important; }

/* text-gray-800 / text-slate-800 — not covered by -900/-700 rules */
html.dark .text-gray-800, html.dark .text-slate-800,
body.dark-mode .text-gray-800, body.dark-mode .text-slate-800 { color: var(--dark-text-primary) !important; }

/* border-gray-300 / border-slate-300 — input borders, checkboxes */
html.dark .border-gray-300, html.dark .border-slate-300,
body.dark-mode .border-gray-300, body.dark-mode .border-slate-300 { border-color: var(--dark-border-light) !important; }

/* Dividers — divide-gray-50, divide-gray-100, divide-slate-100 */
html.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
body.dark-mode .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
body.dark-mode .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
body.dark-mode .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--dark-border) !important; }

/* Hover backgrounds — bright flashes in dark mode */
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover,
body.dark-mode .hover\:bg-gray-50:hover,
body.dark-mode .hover\:bg-gray-100:hover { background-color: rgba(129, 140, 248, 0.08) !important; }

html.dark .hover\:bg-gray-200:hover,
html.dark .hover\:bg-slate-200:hover,
body.dark-mode .hover\:bg-gray-200:hover,
body.dark-mode .hover\:bg-slate-200:hover { background-color: rgba(129, 140, 248, 0.12) !important; }

html.dark .hover\:text-gray-900:hover,
html.dark .hover\:text-slate-900:hover,
body.dark-mode .hover\:text-gray-900:hover,
body.dark-mode .hover\:text-slate-900:hover { color: var(--dark-text-primary) !important; }

html.dark .hover\:text-gray-600:hover,
body.dark-mode .hover\:text-gray-600:hover { color: var(--dark-text-secondary) !important; }

/* Semi-transparent hover states */
html.dark .hover\:bg-red-50:hover,
body.dark-mode .hover\:bg-red-50:hover { background-color: rgba(239,68,68,0.1) !important; }

html.dark .hover\:bg-emerald-50:hover,
body.dark-mode .hover\:bg-emerald-50:hover { background-color: rgba(16,185,129,0.1) !important; }

html.dark .hover\:bg-indigo-50:hover,
body.dark-mode .hover\:bg-indigo-50:hover { background-color: rgba(99,102,241,0.12) !important; }

/* Table-specific hover overrides */
html.dark tr:hover,
body.dark-mode tr:hover { background-color: rgba(129, 140, 248, 0.04) !important; }

/* Severity badges — bg-orange-100, bg-red-100, bg-amber-100, bg-blue-100 */
html.dark .bg-orange-50, body.dark-mode .bg-orange-50 { background-color: rgba(249,115,22,0.1) !important; }
html.dark .bg-orange-100, body.dark-mode .bg-orange-100 { background-color: rgba(249,115,22,0.18) !important; }
html.dark .text-orange-700, html.dark .text-orange-600,
body.dark-mode .text-orange-700, body.dark-mode .text-orange-600 { color: #fb923c !important; }

/* Gray shadow → invisible in dark */
html.dark .shadow-gray-200\/50, html.dark [class*="shadow-gray"],
body.dark-mode .shadow-gray-200\/50, body.dark-mode [class*="shadow-gray"] { box-shadow: none !important; }

/* Group hover: bg-gray-100 */
html.dark .group:hover .group-hover\:bg-gray-100,
body.dark-mode .group:hover .group-hover\:bg-gray-100 { background-color: rgba(129, 140, 248, 0.08) !important; }

/* bg-white/80 for non-Tailwind class syntax (already handled via \\/) */

/* Colored border variants used in forms */
html.dark .border-red-100, html.dark .border-red-200,
body.dark-mode .border-red-100, body.dark-mode .border-red-200 { border-color: rgba(239,68,68,0.25) !important; }
html.dark .border-blue-100, html.dark .border-blue-200,
body.dark-mode .border-blue-100, body.dark-mode .border-blue-200 { border-color: rgba(59,130,246,0.25) !important; }
html.dark .border-orange-100, html.dark .border-orange-200,
body.dark-mode .border-orange-100, body.dark-mode .border-orange-200 { border-color: rgba(249,115,22,0.25) !important; }

/* Pagination link hover in dark mode */
html.dark a.hover\:bg-gray-50:hover,
body.dark-mode a.hover\:bg-gray-50:hover { background-color: rgba(129, 140, 248, 0.08) !important; color: var(--dark-text-primary) !important; }

/* kbd / keyboard shortcut badges */
html.dark kbd, body.dark-mode kbd { background-color: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; color: var(--dark-text-muted) !important; }

/* ═══════════════════════════════════════════════════════════════
   BUTTON CONTRAST PROTECTION — Light & Dark Mode
   Ensures text always readable on colored/gradient backgrounds.
   ═══════════════════════════════════════════════════════════════ */

/* ─── CSS-Variable Buttons (admin.css / school-admin.css) ──── */
/* Force white text on primary/danger/success gradient buttons in BOTH modes */
/* Exception: hero-actions .btn-primary has white bg so needs dark text */
.btn-primary,
.btn-danger,
.btn-success {
    color: #FFFFFF !important;
}
.hero-actions .btn-primary,
.reg-section .btn-primary,
.reg-section .btn-primary.reg-cta-btn,
.hero-actions .btn-primary:hover,
.reg-section .btn-primary:hover,
.hero-actions .btn-primary:focus,
.reg-section .btn-primary:focus {
    color: #4F46E5 !important;
    background: #FFFFFF !important;
    font-weight: 700;
}
.hero-actions .btn-primary:hover,
.reg-section .btn-primary:hover {
    color: #4338CA !important;
    box-shadow: 0 8px 24px rgba(79,70,229,.18) !important;
    transform: translateY(-1px);
}
.btn-primary:hover,
.btn-danger:hover,
.btn-success:hover {
    color: #FFFFFF !important;
}

/* Ghost & secondary buttons: ensure readable text in dark mode */
html.dark .btn-ghost,
body.dark-mode .btn-ghost {
    color: var(--dark-text-secondary) !important;
    border-color: var(--dark-border) !important;
}
html.dark .btn-ghost:hover,
body.dark-mode .btn-ghost:hover {
    color: var(--dark-text-primary) !important;
    background: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border-light) !important;
}

html.dark .btn-secondary,
body.dark-mode .btn-secondary {
    color: var(--dark-primary) !important;
    border-color: var(--dark-primary) !important;
    background: transparent !important;
}
html.dark .btn-secondary:hover,
body.dark-mode .btn-secondary:hover {
    background: rgba(99,102,241,0.12) !important;
}

/* Landing page buttons — preserve gradient backgrounds in dark mode */
html.dark .price-card .btn-secondary,
html.dark .mode-card .btn-secondary,
html.dark .hero-actions .btn-secondary,
html.dark .demo-cta .btn-secondary,
body.dark-mode .price-card .btn-secondary,
body.dark-mode .mode-card .btn-secondary,
body.dark-mode .hero-actions .btn-secondary,
body.dark-mode .demo-cta .btn-secondary {
    background: linear-gradient(135deg, #7C3AED, #6D28D9) !important;
    color: white !important;
    border-color: transparent !important;
}

/* Dark mode billing toggle */
html.dark .billing-toggle, body.dark-mode .billing-toggle {
    background: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
}
html.dark .bt-opt, body.dark-mode .bt-opt {
    color: var(--dark-text-tertiary) !important;
}
html.dark .bt-opt.active, body.dark-mode .bt-opt.active {
    background: var(--dark-primary) !important;
    color: white !important;
}
html.dark .bt-opt:hover:not(.active), body.dark-mode .bt-opt:hover:not(.active) {
    color: var(--dark-text-primary) !important;
    background: rgba(255,255,255,.04) !important;
}
html.dark .save-badge, body.dark-mode .save-badge {
    color: var(--dark-success) !important;
}

/* Dark mode form step indicators (wrapper approach) */
html.dark .form-step-label, body.dark-mode .form-step-label {
    color: var(--dark-text-muted) !important;
}
html.dark .form-step-wrap.active .form-step-label, body.dark-mode .form-step-wrap.active .form-step-label {
    color: var(--dark-primary) !important;
}
html.dark .form-step-wrap.done .form-step-label, body.dark-mode .form-step-wrap.done .form-step-label {
    color: var(--dark-success) !important;
}

/* Dark mode pricing card gradient text */
html.dark .price-val, body.dark-mode .price-val {
    background: linear-gradient(135deg, var(--dark-text-primary) 30%, var(--dark-primary)) !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
}
html.dark .price-card.featured .price-val, body.dark-mode .price-card.featured .price-val {
    background: linear-gradient(135deg, var(--dark-primary), #C4B5FD) !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
}

/* Dark mode pricing card gradient stripe */
html.dark .price-card::before, body.dark-mode .price-card::before {
    background: linear-gradient(90deg, var(--dark-border), var(--dark-border-light)) !important;
}
html.dark .price-card:hover::before, body.dark-mode .price-card:hover::before {
    background: linear-gradient(90deg, var(--dark-primary), #C4B5FD) !important;
}
html.dark .price-card.featured::before, body.dark-mode .price-card.featured::before {
    background: linear-gradient(90deg, var(--dark-primary), #C4B5FD, #F9A8D4) !important;
}

/* Dark mode reg-card gradient stripe */
html.dark .reg-card::after, body.dark-mode .reg-card::after {
    background: linear-gradient(90deg, var(--dark-primary), #C4B5FD, #F9A8D4) !important;
}

/* Dark mode feature icons in pricing */
html.dark .price-feat i.fa-check, body.dark-mode .price-feat i.fa-check {
    background: rgba(52,211,153,.2) !important;
    color: var(--dark-success) !important;
    box-shadow: none !important;
}
html.dark .price-feat i.fa-times, body.dark-mode .price-feat i.fa-times {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-muted) !important;
}

/* ─── Tailwind Colored Buttons: Protect text-white ─────────── */
/* Prevent dark mode text-color overrides from leaking into solid-bg buttons */
html.dark .bg-indigo-600,
html.dark .bg-indigo-700,
html.dark .bg-emerald-600,
html.dark .bg-emerald-700,
html.dark .bg-red-600,
html.dark .bg-red-700,
html.dark .bg-blue-600,
html.dark .bg-blue-700,
html.dark .bg-purple-600,
html.dark .bg-purple-700,
html.dark .bg-amber-600,
body.dark-mode .bg-indigo-600,
body.dark-mode .bg-indigo-700,
body.dark-mode .bg-emerald-600,
body.dark-mode .bg-emerald-700,
body.dark-mode .bg-red-600,
body.dark-mode .bg-red-700,
body.dark-mode .bg-blue-600,
body.dark-mode .bg-blue-700,
body.dark-mode .bg-purple-600,
body.dark-mode .bg-purple-700,
body.dark-mode .bg-amber-600 {
    color: #FFFFFF !important;
}

/* ─── Inline-style buttons (e.g. background: #999) ────────── */
html.dark [style*="background"][class*="btn"],
body.dark-mode [style*="background"][class*="btn"] {
    color: #FFFFFF !important;
}

/* ─── Status badge text protection ─────────────────────────── */
html.dark .bg-green-100,
body.dark-mode .bg-green-100 { background-color: rgba(16,185,129,0.18) !important; }
html.dark .text-green-700, html.dark .text-green-800,
body.dark-mode .text-green-700, body.dark-mode .text-green-800 { color: #6ee7b7 !important; }