/* =============================================================================
   Sachin Deep Cleaning — App Design System (extracted from www/index.html inline <style> 120-1479)
   PREMIUM DESIGN SYSTEM v3.0 — World-Class Production UI
   This file is the externalized design tokens + component styles previously inline.
   Critical above-the-fold tokens remain inline in index.html for fast first paint.
   Load order: dist/tailwind.css → design-system.css → app.css → critical inline
   Duplicate safe-area :root block removed (was duplicated at original ~1137-1147).
   No duplicate tokens remain between app.css and design-system.css — overlapping
   --r-* and --border tokens are intentionally overridden by app.css (last wins).
   ============================================================================= */
    /* ══════════════════════════════════════════════════════════════
       PREMIUM DESIGN SYSTEM v3.0 — World-Class Production UI
       Project: Sachin Deep Cleaning | Firebase PWA
       Inspired by: Airbnb, Apple, Urban Company, Stripe
       ══════════════════════════════════════════════════════════════ */
    :root {
        /* ─── SURFACE COLORS (LIGHT THEME) ─── */
        --bg: #F5F9F7;
        --bg-card: #FFFFFF;
        --bg-surf: #EAF4EF;
        --bg-hover: #DDEBE4;
        --bg-elevated: #FFFFFF;

        /* ─── PRIMARY BRAND: Rich Emerald ─── */
        --sage: #0B7958;
        --sage-lt: #39D98A;
        --sage-dk: #075A43;
        --sage-dim: rgba(11, 121, 88, 0.08);
        --sage-glow: rgba(11, 121, 88, 0.18);
                --sage-subtle: rgba(11, 121, 88, 0.10);

        /* ─── BRAND MARK: constant emerald in every theme ───
           Decoupled from --sage/--sage-dk so dark mode can keep those white
           for buttons & active controls while brand marks stay rich emerald. */
        --brand-mark: #0B7958;
        --brand-mark-dk: #075A43;
        --brand-mark-glow: rgba(11, 121, 88, 0.18);

        /* ─── SECONDARY: Warm Gold ─── */
        --gold: #F59E0B;
        --gold-lt: #FBBF24;
        --gold-glow: rgba(245, 158, 11, 0.15);

        /* ─── TEXT HIERARCHY (LIGHT THEME) ─── */
        --text-primary: #10211B;
        --text-secondary: #557267;
        --text-tertiary: #7B948A;
        --text-muted: #A6BDB2;
        --cream: #10211B;
        --ink: #29473B;
        --muted: #7B948A;

        /* ─── BORDERS & DIVIDERS (LIGHT THEME) ─── */
        --border: #D5E6DD;
        --border-md: #BFD7CA;
        --border-strong: #9FBEAE;

        /* ─── RADIUS SYSTEM ─── */
        --r-xs: 6px;
        --r-sm: 10px;
        --r-md: 16px;
        --r-lg: 24px;
        --r-xl: 32px;
        --r-full: 9999px;

        /* ─── SPACING ─── */
        --sidebar: 260px;
        --hh: 64px;

        /* ─── SAFE AREA INSETS (notches, home indicator) ─── */
        --safe-top: env(safe-area-inset-top, 0);
        --safe-bottom: env(safe-area-inset-bottom, 0);
        --safe-left: env(safe-area-inset-left, 0);
        --safe-right: env(safe-area-inset-right, 0);

        /* ─── HEADER HEIGHT (includes safe area top) ─── */
        --header-h: calc(72px + var(--safe-top));
        --header-h-mobile: calc(64px + var(--safe-top));

        /* ─── BOTTOM NAV HEIGHT (includes safe area bottom) ─── */
        --bottom-nav-h: calc(56px + var(--safe-bottom));

        /* ─── TOUCH TARGETS (iOS HIG minimum 44×44) ─── */
        --touch-target: 44px;
        --touch-target-sm: 40px;

        /* ─── SHADOWS (Lighter for light theme) ─── */
        --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
        --sh-sm: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
        --sh: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
        --sh-lg: 0 20px 60px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.06);
        --sh-xl: 0 32px 80px rgba(0, 0, 0, 0.12), 0 12px 40px rgba(0, 0, 0, 0.06);
        --sh-glow-emerald: 0 0 40px rgba(16, 185, 129, 0.1), 0 0 80px rgba(16, 185, 129, 0.04);
        --sh-glow-gold: 0 0 40px rgba(245, 158, 11, 0.08);

        /* ─── TIMING FUNCTIONS ─── */
        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
        --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    }

    /* ══════════════════════════════════════════════════════════════
       DARK THEME — Full Override  (matches live sachincleaning.online dark)
       Black background, white text, Apple-dark surface stack.
       ══════════════════════════════════════════════════════════════ */
    [data-theme="dark"] {
        --bg:          #000000;
        --bg-card:     #1C1C1E;
        --bg-surf:     #2C2C2E;
        --bg-hover:    #3A3A3C;
        --bg-elevated: #2C2C2E;

        /* Action colour = white in dark mode; brand mark stays emerald via --brand-mark */
        --sage:        #F5F5F7;
        --sage-lt:     #FFFFFF;
        --sage-dk:     #D1D1D6;
        --sage-dim:    rgba(255, 255, 255, 0.12);
        --sage-glow:   rgba(255, 255, 255, 0.18);
        --sage-subtle: rgba(255, 255, 255, 0.10);

        --sh-glow-emerald: 0 0 40px rgba(255, 255, 255, 0.12), 0 0 80px rgba(255, 255, 255, 0.05);

        --text-primary:   #F5F5F7;
        --text-secondary: #C7C7CC;
        --text-tertiary:  #B0B0B5;
        --text-muted:     #98989D;
        --cream:          #F5F5F7;
        --ink:            #D1D1D6;
        --muted:          #98989D;

        --border:        #38383A;
        --border-md:     #545458;
        --border-strong: #636366;

        --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
        --sh-sm: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
        --sh:    0 8px 32px rgba(0, 0, 0, 0.4),  0 2px 8px rgba(0, 0, 0, 0.3);
        --sh-lg: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35);
        --sh-xl: 0 32px 80px rgba(0, 0, 0, 0.6), 0 12px 40px rgba(0, 0, 0, 0.4);
    }

    /* ═══ UNIFIED TOKENS: spacing, status, icon system ═══ */
    :root {
        --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
        --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
        --space-12: 48px; --space-16: 64px;
        --c-pending: #3B82F6; --c-progress: #F59E0B; --c-completed: #10B981;
        --c-cancelled: #EF4444; --c-info: #3B82F6;
    }
    [data-theme="dark"] {
        --c-pending: #60A5FA; --c-progress: #FBBF24; --c-completed: #34D399;
        --c-cancelled: #FB7185; --c-info: #60A5FA;
    }

    /* ─── Icon system (inline SVG via <use href="#i-...">) ─── */
    .icon {
        width: 1.25em; height: 1.25em; display: inline-block;
        vertical-align: -0.14em; flex-shrink: 0;
        fill: none; stroke: currentColor; stroke-width: 2;
        stroke-linecap: round; stroke-linejoin: round;
    }
    .icon--fill { fill: currentColor; stroke: none; }
    .icon--sm { width: 1em; height: 1em; }
    .icon--lg { width: 1.75em; height: 1.75em; }
    .brand-mark { width: 22px; height: 22px; }
    .brand-logo-ic { color: #fff; }
    .splash-logo .icon { width: 44px; height: 44px; color: var(--sage); }
    .hero-emoji .icon { width: 56px; height: 56px; stroke-width: 1.6; color: var(--sage); }

    /* ── Dark body & background ── */
    [data-theme="dark"] body {
        background: var(--bg) !important;
        color: var(--ink) !important;
    }
    [data-theme="dark"] body::before {
        background: radial-gradient(circle, rgba(48, 209, 88, 0.045) 0%, transparent 70%);
    }
    [data-theme="dark"] body::after {
        background: radial-gradient(circle, rgba(100, 210, 255, 0.025) 0%, transparent 70%);
    }

    /* ── Dark Tailwind overrides ── */
    [data-theme="dark"] .bg-white,
    [data-theme="dark"] .bg-white\/95,
    [data-theme="dark"] .bg-white\/90 { background: var(--bg-card) !important; }

    [data-theme="dark"] .bg-gray-50 { background: var(--bg) !important; }
    [data-theme="dark"] .bg-gray-100,
    [data-theme="dark"] .bg-gray-100\/80 { background: var(--bg-surf) !important; }
    [data-theme="dark"] .bg-gray-200 { background: var(--bg-hover) !important; }
    [data-theme="dark"] .bg-gray-800 { background: #0D1625 !important; }
    [data-theme="dark"] .bg-gray-900 { background: #070E1A !important; }

    [data-theme="dark"] .text-gray-900 { color: var(--text-primary) !important; }
    [data-theme="dark"] .text-gray-800 { color: #D1D9E6 !important; }
    [data-theme="dark"] .text-gray-700 { color: #A8B4C8 !important; }
    [data-theme="dark"] .text-gray-600 { color: var(--text-secondary) !important; }
    [data-theme="dark"] .text-gray-500 { color: var(--text-tertiary) !important; }
    [data-theme="dark"] .text-gray-400 { color: var(--text-muted) !important; }

    [data-theme="dark"] .border-gray-100 { border-color: rgba(255,255,255,0.06) !important; }
    [data-theme="dark"] .border-gray-200 { border-color: rgba(255,255,255,0.08) !important; }
    [data-theme="dark"] .border-gray-300 { border-color: rgba(255,255,255,0.1) !important; }
    [data-theme="dark"] .border-gray-400 { border-color: rgba(255,255,255,0.15) !important; }

    [data-theme="dark"] .divide-gray-100 > * + * { border-color: rgba(255,255,255,0.06) !important; }
    [data-theme="dark"] .divide-gray-200 > * + * { border-color: rgba(255,255,255,0.08) !important; }

    [data-theme="dark"] .shadow-lg,
    [data-theme="dark"] .shadow-xl,
    [data-theme="dark"] .shadow-2xl { box-shadow: var(--sh-lg) !important; }

    /* ── Dark glassmorphism ── */
    [data-theme="dark"] .glass-card {
        background: rgba(28, 28, 30, 0.78) !important;
        border-color: rgba(255,255,255,0.12) !important;
        box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.08) !important;
        backdrop-filter: saturate(140%) blur(18px) !important;
        -webkit-backdrop-filter: saturate(140%) blur(18px) !important;
    }
    [data-theme="dark"] .glass-card:hover {
        background: rgba(44, 44, 46, 0.84) !important;
        border-color: rgba(255,255,255,0.18) !important;
    }
    [data-theme="dark"] .btn-gradient-primary,
    [data-theme="dark"] .bg-emerald-500,
    [data-theme="dark"] .bg-emerald-600 { color: #000 !important; }
    [data-theme="dark"] main .from-emerald-500.text-white,
    [data-theme="dark"] main .from-emerald-600.text-white,
    [data-theme="dark"] main .btn-gradient-primary { color: #000 !important; }
    [data-theme="dark"] main .text-yellow-400,
    [data-theme="dark"] main .text-amber-400 { color: var(--text-primary) !important; }
    [data-theme="dark"] main .bg-yellow-400 { background-color: var(--text-primary) !important; }
    .hero-booking-cta {
        color: #fff;
        background: linear-gradient(135deg, var(--sage-dk), var(--sage));
    }
    [data-theme="dark"] .hero-booking-cta {
        color: #000;
        background: linear-gradient(135deg, #D1D1D6, #F5F5F7);
    }
    /* Ratings stay neutral in dark mode; amber remains reserved for warnings. */
    [data-theme="dark"] .rating-star.text-amber-400 { color: var(--text-primary) !important; }
    [data-theme="dark"] .glass-input {
        background: var(--bg-surf) !important;
        border-color: rgba(255,255,255,0.1) !important;
        color: var(--text-primary) !important;
    }
    [data-theme="dark"] .glass-input:focus {
        background: var(--bg-hover) !important;
        border-color: var(--sage) !important;
    }

    /* ── Dark Header ── */
    [data-theme="dark"] header {
        background: rgba(0, 0, 0, 0.78) !important;
        border-bottom-color: rgba(255,255,255,0.07) !important;
        backdrop-filter: blur(20px) !important;
    }

    /* ── Dark Sidebar ── */
    [data-theme="dark"] aside {
        background: var(--bg-card) !important;
        border-right-color: rgba(255,255,255,0.07) !important;
    }

    /* ── Dark Bottom Nav ── */
    [data-theme="dark"] nav > div.flex {
        background: rgba(0, 0, 0, 0.84) !important;
        border-top: 1px solid rgba(255,255,255,0.07) !important;
        backdrop-filter: blur(20px) !important;
    }

    /* ── Dark Mobile Menu Dropdown ── */
    [data-theme="dark"] .absolute.left-0.right-0.top-full.bg-white {
        background: var(--bg-card) !important;
        border-color: rgba(255,255,255,0.08) !important;
    }

    /* ── Dark Forms ── */
    [data-theme="dark"] input,
    [data-theme="dark"] textarea,
    [data-theme="dark"] select {
        background: var(--bg-surf) !important;
        border-color: rgba(255,255,255,0.1) !important;
        color: var(--text-primary) !important;
    }
    [data-theme="dark"] input::placeholder,
    [data-theme="dark"] textarea::placeholder { color: var(--text-tertiary) !important; }
    [data-theme="dark"] input:-webkit-autofill,
    [data-theme="dark"] input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 30px var(--bg-surf) inset !important;
        -webkit-text-fill-color: var(--text-primary) !important;
    }
    [data-theme="dark"] input:disabled { background: var(--bg-hover) !important; }

    /* ── Dark Cards / Panels ── */
    [data-theme="dark"] .rounded-2xl,
    [data-theme="dark"] .rounded-xl {
        border-color: rgba(255,255,255,0.14);
    }
    [data-theme="dark"] main .glass-card,
    [data-theme="dark"] main .app-card {
        border-color: rgba(255,255,255,0.14) !important;
        box-shadow: 0 8px 28px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.06) !important;
    }
    [data-theme="dark"] input::placeholder,
    [data-theme="dark"] textarea::placeholder { color: #A1A1A6 !important; opacity: 1; }
    [data-theme="dark"] .bg-blue-50 { background: rgba(59, 130, 246, 0.1) !important; }
    [data-theme="dark"] .bg-red-50 { background: rgba(239, 68, 68, 0.1) !important; }
    [data-theme="dark"] .bg-yellow-50 { background: rgba(245, 158, 11, 0.1) !important; }
    [data-theme="dark"] .bg-green-50 { background: rgba(16, 185, 129, 0.1) !important; }
    [data-theme="dark"] .hover\:bg-gray-100:hover { background: var(--bg-surf) !important; }
    [data-theme="dark"] .hover\:bg-red-50:hover { background: rgba(239, 68, 68, 0.15) !important; }

    /* ── Dark skeleton loader ── */
    [data-theme="dark"] .skeleton {
        background: linear-gradient(90deg, var(--bg-surf) 25%, var(--bg-hover) 50%, var(--bg-surf) 75%);
        background-size: 1000px 100%;
    }

    /* ── Dark Splash Screen ── */
    [data-theme="dark"] .splash-screen { background: #0B1120 !important; }

    /* ── Dark scrollbar ── */
    [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }
    [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

    /* ── Dark Login Card ── */
    [data-theme="dark"] .bg-gray-100.rounded-lg { background: var(--bg-surf) !important; }

    /* ── Dark step indicators ── */
    [data-theme="dark"] .bg-gray-200.text-gray-500 { background: var(--bg-surf) !important; }

    /* ══════════════════════════════════════════════════════════════
       YELLOW THEME — Dark canvas with Golden primary
       ══════════════════════════════════════════════════════════════ */
    [data-theme="yellow"] {
        --bg: #1A1400;
        --bg-card: #1F1A00;
        --bg-surf: #242000;
        --bg-hover: #2F2700;
        --bg-elevated: #242000;

        --sage: #FFC145;
        --sage-lt: #FFE6A3;
        --sage-dk: #D9A000;
        --sage-dim: rgba(255, 193, 69, 0.12);
        --sage-glow: rgba(255, 193, 69, 0.20);
        --sage-subtle: rgba(255, 193, 69, 0.10);

        --gold: #D9A000;
        --gold-lt: #FFDA73;
        --gold-glow: rgba(217, 160, 0, 0.15);

        --text-primary: #FFF1C7;
        --text-secondary: #C8B07A;
        --text-tertiary: #A8933A;
        --text-muted: #8A744A;
        --cream: #FFF1C7;
        --ink: #C8B07A;
        --muted: #A8933A;

        --border: #3A3000;
        --border-md: #554200;
        --border-strong: #6B5800;

        --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
        --sh-sm: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
        --sh: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
        --sh-lg: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35);
        --sh-xl: 0 32px 80px rgba(0, 0, 0, 0.6), 0 12px 40px rgba(0, 0, 0, 0.4);
        --sh-glow-emerald: 0 0 40px rgba(255, 193, 69, 0.08), 0 0 80px rgba(255, 193, 69, 0.04);
    }
    [data-theme="yellow"] body {
        background: var(--bg) !important;
        color: var(--ink) !important;
    }
    [data-theme="yellow"] .glass-card {
        background: rgba(36, 32, 0, 0.78) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
        box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: saturate(140%) blur(18px) !important;
        -webkit-backdrop-filter: saturate(140%) blur(18px) !important;
    }
    [data-theme="yellow"] header {
        background: rgba(26, 20, 0, 0.78) !important;
        border-bottom-color: rgba(255, 255, 255, 0.07) !important;
        backdrop-filter: blur(20px) !important;
    }
    [data-theme="yellow"] nav.fixed.bottom-0 {
        background: rgba(26, 20, 0, 0.84) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
        backdrop-filter: blur(20px) !important;
    }
    [data-theme="yellow"] aside {
        background: var(--bg-card) !important;
        border-right-color: rgba(255, 255, 255, 0.07) !important;
    }
    [data-theme="yellow"] .splash-screen {
        background: #1a1400 !important;
    }
    [data-theme="yellow"] .modal-content,
    [data-theme="yellow"] .product-card,
    [data-theme="yellow"] .glass-input {
        background: var(--bg-card) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        color: var(--text-primary) !important;
    }
    [data-theme="yellow"] .bg-white,
    [data-theme="yellow"] .bg-white\/95,
    [data-theme="yellow"] .bg-white\/90 { background: var(--bg-card) !important; }
    [data-theme="yellow"] .bg-gray-50 { background: var(--bg) !important; }
    [data-theme="yellow"] .bg-gray-100 { background: var(--bg-surf) !important; }
    [data-theme="yellow"] .bg-gray-200 { background: var(--bg-hover) !important; }
    [data-theme="yellow"] .text-gray-900 { color: var(--text-primary) !important; }
    [data-theme="yellow"] .text-gray-800 { color: #D9C07A !important; }
    [data-theme="yellow"] .text-gray-700 { color: #A8933A !important; }
    [data-theme="yellow"] .text-gray-600 { color: var(--text-secondary) !important; }
    [data-theme="yellow"] .text-gray-500 { color: var(--text-tertiary) !important; }
    [data-theme="yellow"] .text-gray-400 { color: var(--text-muted) !important; }
    [data-theme="yellow"] input,
    [data-theme="yellow"] textarea,
    [data-theme="yellow"] select {
        background: var(--bg-surf) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        color: var(--text-primary) !important;
    }

    /* ══════════════════════════════════════════════════════════════
       THEME TOGGLE BUTTON STYLES
       ══════════════════════════════════════════════════════════════ */
    .theme-toggle-wrap {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 6px 4px 4px;
        border-radius: 999px;
        border: 1.5px solid var(--border-md);
        background: var(--bg-surf);
        cursor: pointer;
        transition: all 0.3s var(--ease-smooth);
        user-select: none;
        flex-shrink: 0;
    }
    .theme-toggle-wrap:hover {
        border-color: var(--sage);
        box-shadow: 0 0 0 3px var(--sage-dim);
    }
    .theme-toggle-track {
        position: relative;
        width: 36px;
        height: 20px;
        background: #CBD5E1;
        border-radius: 999px;
        transition: background 0.35s ease;
        flex-shrink: 0;
    }
    [data-theme="dark"] .theme-toggle-track { background: var(--sage-dk); }
    .theme-toggle-thumb {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.2);
        transition: transform 0.35s var(--ease-spring);
    }
    [data-theme="dark"] .theme-toggle-thumb { transform: translateX(16px); }
    .theme-toggle-icon {
        font-size: 14px;
        line-height: 1;
        transition: all 0.3s ease;
    }
    .theme-toggle-label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--text-secondary);
        transition: color 0.3s ease;
        white-space: nowrap;
        font-family: 'Inter', sans-serif;
    }

    /* ── Dark Login / Signup Card (inline style override) ── */
    [data-theme="dark"] .max-w-md .relative.rounded-2xl.shadow-2xl.border {
        background: var(--bg-card) !important;
        border-color: rgba(255,255,255,0.1) !important;
    }
    /* OR divider white span */
    [data-theme="dark"] span.bg-white {
        background: var(--bg-card) !important;
        color: var(--text-secondary) !important;
    }
    /* Details/summary panels inside login */
    [data-theme="dark"] details summary {
        background: var(--bg-surf) !important;
        color: var(--text-secondary) !important;
    }
    [data-theme="dark"] details > div {
        background: var(--bg-surf) !important;
    }
    /* Tip banner in login */
    [data-theme="dark"] .bg-blue-50.border.border-blue-200.rounded-lg {
        background: rgba(59,130,246,0.08) !important;
        border-color: rgba(59,130,246,0.2) !important;
    }
    [data-theme="dark"] .bg-blue-50.border.border-blue-200.rounded-lg p {
        color: #93C5FD !important;
    }
    /* Google sign-in button */
    [data-theme="dark"] .bg-white.hover\:bg-slate-100 {
        background: var(--bg-surf) !important;
        color: var(--text-primary) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
    }
    [data-theme="dark"] .bg-white.hover\:bg-slate-100:hover {
        background: var(--bg-hover) !important;
    }
    /* Step progress connector lines */
    [data-theme="dark"] .h-0\.5.w-6.bg-gray-100 {
        background: rgba(255,255,255,0.08) !important;
    }
    /* Login card top border stays emerald */
    [data-theme="dark"] .max-w-md .relative.rounded-2xl.shadow-2xl.border {
        border-top: 2px solid var(--sage) !important;
    }
    /* "Continue as Guest" section text */
    [data-theme="dark"] .text-center.mt-6 > p.text-gray-500 {
        color: var(--text-secondary) !important;
    }

    /* ─── GLOBAL RESET & BASE ─── */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        padding: 0;
        background: var(--bg);
        color: var(--ink);
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
        font-size: 15px;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        font-feature-settings: 'cv11', 'ss01';
        overflow-x: hidden;
    }

    /* Ambient background effects — subtle for light theme */
    body::before {
        content: '';
        position: fixed;
        top: -40%;
        right: -20%;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(16, 185, 129, 0.03) 0%, transparent 70%);
        pointer-events: none;
        z-index: 0;
        animation: ambientFloat 25s ease-in-out infinite;
    }

    body::after {
        content: '';
        position: fixed;
        bottom: -30%;
        left: -15%;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(245, 158, 11, 0.02) 0%, transparent 70%);
        pointer-events: none;
        z-index: 0;
        animation: ambientFloat 30s ease-in-out infinite reverse;
    }

    @keyframes ambientFloat {

        0%,
        100% {
            transform: translate(0, 0) scale(1);
        }

        33% {
            transform: translate(30px, -20px) scale(1.05);
        }

        66% {
            transform: translate(-20px, 15px) scale(0.95);
        }
    }

    header h1,
    header p {
        margin: 0;
    }

    /* ─── TYPOGRAPHY ─── */
    h1,
    h2,
    h3,
    h4 {
        font-family: 'Sora', 'Inter', system-ui, sans-serif;
        font-weight: 600;
        line-height: 1.15;
        color: var(--text-primary);
        letter-spacing: -0.02em;
    }

    /* ─── SCROLLBAR STYLING ─── */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.12);
        border-radius: 100px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.2);
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* ════════════════════════════════════════
       SPLASH SCREEN
       ════════════════════════════════════════ */
    @keyframes spin-smooth {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes fade-out {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes bounce-logo {

        0%,
        100% {
            transform: translateY(0px) scale(1);
        }

        50% {
            transform: translateY(-16px) scale(1.03);
        }
    }

    @keyframes glow-pulse {

        0%,
        100% {
            box-shadow: 0 0 30px var(--sage-glow), 0 0 60px rgba(16, 185, 129, 0.08);
        }

        50% {
            box-shadow: 0 0 50px var(--sage-glow), 0 0 100px rgba(16, 185, 129, 0.12);
        }
    }

    .splash-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        gap: 32px;
    }

    .splash-screen::before {
        content: '';
        position: absolute;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(16, 185, 129, 0.10) 0%, transparent 70%);
        border-radius: 50%;
        filter: blur(60px);
        animation: glow-pulse 3s ease-in-out infinite;
    }

    .splash-logo-container {
        position: relative;
        width: 110px;
        height: 110px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .splash-logo {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, var(--sage-dk), var(--sage), var(--sage-lt));
        border-radius: var(--r-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 52px;
        animation: bounce-logo 2.5s ease-in-out infinite;
        box-shadow: var(--sh-glow-emerald);
    }

    .splash-spinner {
        position: absolute;
        width: 130px;
        height: 130px;
        border: 3px solid rgba(16, 185, 129, 0.15);
        border-top: 3px solid var(--sage);
        border-radius: 50%;
        animation: spin-smooth 1.5s linear infinite;
    }

    .splash-text {
        color: var(--text-secondary);
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        animation: pulse-gentle 2s ease-in-out infinite;
    }

    .splash-loading-bar {
        width: 180px;
        height: 3px;
        background: rgba(16, 185, 129, 0.15);
        border-radius: 100px;
        overflow: hidden;
    }

    .splash-loading-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--sage-dk), var(--sage), var(--sage-lt));
        border-radius: 100px;
        animation: loadingProgress 2s ease-in-out infinite;
    }

    @keyframes loadingProgress {
        0% {
            width: 0%;
        }

        50% {
            width: 70%;
        }

        100% {
            width: 100%;
        }
    }

    .splash-fade-out {
        animation: fade-out 0.5s ease-out forwards;
    }

    /* ════════════════════════════════════════
       GLOBAL ELEMENTS
       ════════════════════════════════════════ */
    img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    .modal-content {
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
    }

    .truncate-multiline {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    @keyframes pulse-gentle {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.6;
        }
    }

    .animate-pulse-gentle {
        animation: pulse-gentle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    /* ════════════════════════════════════════
       ANIMATIONS
       ════════════════════════════════════════ */
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(12px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeInScale {
        from {
            opacity: 0;
            transform: scale(0.96);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes shimmer {
        0% {
            background-position: -1000px 0;
        }

        100% {
            background-position: 1000px 0;
        }
    }

    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(20px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes scaleUp {
        from {
            opacity: 0;
            transform: scale(0.92);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes float-gentle {

        0%,
        100% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-6px);
        }
    }

    .animate-slideIn {
        animation: slideIn 0.4s var(--ease-out-expo);
    }

    .animate-fadeInScale {
        animation: fadeInScale 0.3s var(--ease-out-expo);
    }

    .animate-float {
        animation: float-gentle 5s ease-in-out infinite;
    }

    .skeleton {
        background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
        background-size: 1000px 100%;
        animation: shimmer 1.4s infinite linear;
        border-radius: var(--r-sm);
        position: relative;
        overflow: hidden;
    }
    .skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
        background-size: 400px 100%;
        animation: shimmer 1.4s infinite;
    }
    /* CLS fix: aspect utilities for Tailwind compat */
    .aspect-square { aspect-ratio: 1 / 1; }
    .aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
    .lazy-image {
        background: var(--surface-2, #F1F5F9);
        transition: opacity 0.35s ease;
    }
    .lazy-image:not(.img-loaded) { opacity: 0.85; }
    .lazy-image.img-loaded { opacity: 1; }

    /* ════════════════════════════════════════
       GLASSMORPHISM SYSTEM
       ════════════════════════════════════════ */
    .glass-card {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(20px) saturate(1.2);
        -webkit-backdrop-filter: blur(20px) saturate(1.2);
        border: 1px solid var(--border);
        box-shadow: var(--sh-sm);
        transition: all 0.4s var(--ease-out-expo);
    }

    .glass-card:hover {
        background: rgba(255, 255, 255, 1) !important;
        border-color: var(--border-md);
        box-shadow: var(--sh);
        transform: translateY(-2px);
    }

    .glass-input {
        background: #F8FAFC !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1.5px solid #E2E8F0 !important;
        color: var(--text-primary);
        border-radius: var(--r-sm) !important;
        transition: all 0.3s var(--ease-smooth);
    }

    .glass-input:focus {
        background: #FFFFFF !important;
        border-color: var(--sage) !important;
        box-shadow: 0 0 0 3px var(--sage-dim), 0 0 20px rgba(16, 185, 129, 0.06);
        transform: none;
    }

    /* ════════════════════════════════════════
       BUTTON SYSTEM
       ════════════════════════════════════════ */
    .btn-gradient-primary {
        background: linear-gradient(135deg, var(--sage-dk), var(--sage)) !important;
        box-shadow: 0 4px 14px var(--sage-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        color: white;
        font-weight: 600;
        letter-spacing: 0.01em;
        border-radius: var(--r-sm);
        transition: all 0.3s var(--ease-smooth);
    }

    .btn-gradient-primary:hover {
        background: linear-gradient(135deg, var(--sage), var(--sage-lt)) !important;
        box-shadow: 0 6px 20px var(--sage-glow), inset 0 1px 0 rgba(255, 255, 255, 0.15);
        transform: translateY(-1px);
    }

    .btn-gradient-accent {
        background: linear-gradient(135deg, #D97706, var(--gold)) !important;
        box-shadow: 0 4px 14px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        color: white;
        font-weight: 600;
        border-radius: var(--r-sm);
    }

    .btn-gradient-accent:hover {
        background: linear-gradient(135deg, var(--gold), var(--gold-lt)) !important;
        box-shadow: 0 6px 20px var(--gold-glow);
        transform: translateY(-1px);
    }

    /* Button ripple effect */
    button {
        transition: all 0.3s var(--ease-smooth);
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    button::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        transform: translate(-50%, -50%);
        transition: width 0.5s var(--ease-out-expo), height 0.5s var(--ease-out-expo);
    }

    button:hover::after {
        width: 300px;
        height: 300px;
    }

    /* Reset ripple when not hovered */
    button:not(:hover)::after {
        width: 0 !important;
        height: 0 !important;
        transition: width 0.2s ease, height 0.2s ease;
    }

    /* Disable ripple effect for theme toggle */
    .theme-toggle-wrap::after {
        display: none !important;
    }

    button:active:not(:disabled) {
        transform: scale(0.97);
    }

    button:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

    /* ════════════════════════════════════════
       INPUT SYSTEM
       ════════════════════════════════════════ */
    input,
    textarea,
    select {
        transition: all 0.3s var(--ease-smooth);
        font-family: 'Inter', sans-serif;
    }

    input:focus,
    textarea:focus,
    select:focus {
        box-shadow: 0 0 0 3px var(--sage-dim), 0 0 20px rgba(16, 185, 129, 0.04);
        transform: none;
        outline: none;
    }

    /* Autofill styling */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px #F8FAFC inset !important;
        -webkit-text-fill-color: var(--text-primary) !important;
        caret-color: var(--text-primary) !important;
        font-family: 'Inter', sans-serif !important;
    }

    /* ════════════════════════════════════════
       CARD HOVER EFFECTS
       ════════════════════════════════════════ */
    .card-hover {
        transition: all 0.4s var(--ease-out-expo);
        position: relative;
        overflow: hidden;
    }

    .card-hover:hover {
        transform: translateY(-4px);
        box-shadow: var(--sh-lg), var(--sh-glow-emerald);
    }

    .card-hover::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.04) 0%, transparent 50%);
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
        border-radius: inherit;
    }

    .card-hover:hover::before {
        opacity: 1;
    }

    /* ════════════════════════════════════════
       GRADIENT & VISUAL EFFECTS
       ════════════════════════════════════════ */
    .gradient-bg-premium {
        background: linear-gradient(135deg, var(--sage-dim) 0%, rgba(16, 185, 129, 0.02) 100%);
    }

    .border-gradient {
        border: 1.5px solid transparent;
        background-image: linear-gradient(var(--bg-card), var(--bg-card)), linear-gradient(135deg, var(--sage), var(--gold));
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }

    .text-gradient {
        background: linear-gradient(135deg, var(--sage-lt) 0%, var(--gold-lt) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .text-glow {
        color: var(--sage);
        text-shadow: 0 0 20px var(--sage-glow), 0 0 40px rgba(16, 185, 129, 0.1);
    }

    /* ════════════════════════════════════════
       HEADER
       ════════════════════════════════════════ */
    header {
        background: rgba(255, 255, 255, 0.92) !important;
        backdrop-filter: blur(12px) saturate(1.5);
        -webkit-backdrop-filter: blur(12px) saturate(1.5);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.06);
    }

    @media (max-width: 767px) {
        :root {
            --header-h: var(--header-h-mobile);
        }
    }

    /* ── Header height token ───────────────────────────────────────────────
       The glass header is position:fixed;top:0, so page content needs ONE
       top offset equal to the header height. We set it here (once) instead of
       padding every page section, which previously double-padded content and
       left a large empty gap between the header and the page. */
    main {
        padding-top: var(--header-h) !important;
        padding-bottom: var(--bottom-nav-h) !important;
    }

    @media (min-width: 768px) {
        main {
            padding-bottom: 0 !important;
        }
    }

    /* Minimum touch targets */
    .touch-target { min-height: var(--touch-target); min-width: var(--touch-target); }
    .touch-target-sm { min-height: var(--touch-target-sm); min-width: var(--touch-target-sm); }

    /* Prevent iOS input zoom - font-size >= 16px */
    input, textarea, select { font-size: 16px !important; }

    /* Smooth touch scrolling */
    .scroll-touch { -webkit-overflow-scrolling: touch; }

    /* Safe area utilities */
    .safe-top { padding-top: var(--safe-top); }
    .safe-bottom { padding-bottom: var(--safe-bottom); }
    .safe-left { padding-left: var(--safe-left); }
    .safe-right { padding-right: var(--safe-right); }
    .safe-all { padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }

    /* ════════════════════════════════════════
       MODAL
       ════════════════════════════════════════ */
    .modal-content {
        background: #FFFFFF;
        backdrop-filter: blur(30px) saturate(1.3);
        -webkit-backdrop-filter: blur(30px) saturate(1.3);
        border: 1px solid var(--border);
        box-shadow: var(--sh-xl);
    }
    [data-theme="dark"] .modal-content {
        background: var(--bg-card) !important;
        border-color: var(--border) !important;
    }

    /* ════════════════════════════════════════
       SMOOTH EXPERIENCE 
       ════════════════════════════════════════ */
    [x-cloak] {
        display: none !important;
    }

    html,
    body {
        scroll-behavior: smooth;
    }

    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    @media (min-width: 1024px) {
        header .mx-auto {
            max-width: 1280px;
        }
    }

    /* ════════════════════════════════════════
       PRODUCT CARDS — Fluid Responsive
       ════════════════════════════════════════ */
    .products-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
        gap: var(--space-3);
    }

    @media (min-width: 640px) {
        .products-grid {
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
        }
    }

    @media (min-width: 1024px) {
        .products-grid {
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
        }
    }

    @media (min-width: 1536px) {
        .products-grid {
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
            gap: var(--space-4);
        }
    }

    /* ── Service-detail sticky CTA: themed backdrop so scrolled content
       doesn't show through. (Was hardcoded md:bg-gray-50 = light bar in
       dark mode.) Tokens resolve per theme: white / black / navy. ── */
    @media (min-width: 768px) {
        .service-sticky-cta {
            background: var(--bg-card) !important;
        }
    }

    /* ── Desktop pointer polish: hover-capable wide screens only.
       Touch phones never match (hover:none), so mobile is untouched. ── */    @media (hover: hover) and (min-width: 1024px) {
        .product-card:hover {
            transform: translateY(-4px) !important;
            box-shadow: var(--sh-lg), 0 0 48px rgba(16, 185, 129, 0.08) !important;
            border-color: var(--sage) !important;
        }
        .product-card .lazy-image {
            transition: transform 0.45s var(--ease-out-expo);
        }
        .product-card:hover .lazy-image {
            transform: scale(1.06);
        }
        .btn-gradient-primary:hover {
            filter: brightness(1.07);
        }
        aside nav button:hover {
            transform: translateX(2px);
        }
    }

    .product-card {
        width: 100%;
        max-width: none;
        min-width: 0;
        border-radius: var(--r-md) !important;
        border: 1px solid #E2E8F0 !important;
        background: #FFFFFF !important;
        transition: all 0.35s var(--ease-out-expo) !important;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
    }

    .product-card:hover {
        border-color: #CBD5E1 !important;
        box-shadow: var(--sh), 0 0 40px rgba(16, 185, 129, 0.04) !important;
        transform: translateY(-3px) !important;
    }
    [data-theme="dark"] .product-card {
        background: var(--bg-card) !important;
        border-color: var(--border) !important;
    }
    [data-theme="dark"] .product-card:hover {
        border-color: var(--border-strong, #545458) !important;
    }

    .product-card:focus-within {
        border-color: var(--sage) !important;
        box-shadow: 0 0 0 3px var(--sage-dim), var(--sh) !important;
    }

    .product-card:active {
        transform: translateY(-1px) scale(0.995) !important;
        transition-duration: 0.12s !important;
    }

    .product-card>div.overflow-hidden {
        aspect-ratio: 1;
        max-height: none;
        min-height: 0;
        background: #F1F5F9;
    }

    @media (min-width: 768px) {
        .product-card>div.overflow-hidden {
            aspect-ratio: 4/3;
        }
    }
    /* Explicit aspect classes for CLS (used by product cards) */
    .product-card .aspect-square { aspect-ratio: 1 / 1; }
    .product-card .aspect-\[4\/3\] { aspect-ratio: 4 / 3; }

    .product-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s var(--ease-out-expo);
    }

    .product-card:hover img {
        transform: scale(1.08);
    }

    /* ════════════════════════════════════════
       BOTTOM NAVIGATION — Premium
       ════════════════════════════════════════ */
    nav.fixed.bottom-0 {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(12px) saturate(1.5) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.5) !important;
        border-top: 1px solid rgba(0,0,0,0.08) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06) !important;
    }

    /* ════════════════════════════════════════
       SIDEBAR — Premium Desktop
       ════════════════════════════════════════ */
    aside {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        border-right: 1px solid rgba(0,0,0,0.08) !important;
    }

    /* ════════════════════════════════════════
       ACTIVE NAV INDICATOR
       ════════════════════════════════════════ */
    .bg-emerald-500,
    .bg-emerald-600 {
        background: linear-gradient(135deg, var(--sage-dk), var(--sage)) !important;
        color: white !important;
    }

    /* Fix for all emerald-* color utilities used in the codebase */
    .text-emerald-400,
    .text-emerald-300,
    .text-emerald-500 {
        color: var(--sage) !important;
    }

    .hover\:text-emerald-400:hover,
    .hover\:text-emerald-300:hover {
        color: var(--sage-lt) !important;
    }

    .bg-emerald-500\/20 {
        background: var(--sage-dim) !important;
    }

    .bg-emerald-500\/10 {
        background: rgba(16, 185, 129, 0.06) !important;
    }

    .border-emerald-500,
    .border-emerald-500\/30 {
        border-color: rgba(16, 185, 129, 0.25) !important;
    }

    .ring-emerald-500,
    .focus\:ring-emerald-500:focus {
        --tw-ring-color: var(--sage) !important;
    }

    .bg-emerald-900\/20,
    .hover\:bg-emerald-900\/20:hover {
        background: rgba(16, 185, 129, 0.08) !important;
    }

    .hover\:bg-emerald-600:hover,
    .hover\:bg-emerald-700:hover {
        background: var(--sage-dk) !important;
    }

    .from-emerald-500,
    .from-emerald-600 {
        --tw-gradient-from: var(--sage) !important;
    }

    .to-emerald-600,
    .to-emerald-700 {
        --tw-gradient-to: var(--sage-dk) !important;
    }

    .hover\:from-emerald-600:hover {
        --tw-gradient-from: var(--sage-dk) !important;
    }

    .hover\:to-emerald-700:hover {
        --tw-gradient-to: var(--sage-dk) !important;
    }

    .border-t-emerald-500,
    .border-emerald-400 {
        border-color: rgba(16, 185, 129, 0.2) !important;
    }

    /* ════════════════════════════════════════
       CUSTOM FOCUS VISIBLE
       ════════════════════════════════════════ */
    *:focus-visible {
        outline: 2px solid var(--sage);
        outline-offset: 2px;
    }

    /* ════════════════════════════════════════
       SELECTION COLOR
       ════════════════════════════════════════ */
    ::selection {
        background: rgba(16, 185, 129, 0.20);
        color: #1E293B;
    }

    /* ════════════════════════════════════════
       LOADING OVERLAY PREMIUM
       ════════════════════════════════════════ */
    .animate-spin {
        animation: spin-smooth 0.8s linear infinite;
    }

    /* ════════════════════════════════════════
       RESPONSIVE CONTENT WIDTH — DESKTOP LAYOUT
       Customer www has NO sidebar (the old one was removed; the legacy
       md:ml-64 dead gutter was stripped from <main>). Center a capped
       content column instead of stretching edge-to-edge on wide screens.
       NOTE: the old selector `main .w-full.px-6` never matched the real
       container (`px-3 sm:px-4 md:px-6`), so cap by structure (#main > div).
       ════════════════════════════════════════ */
    @media (min-width: 768px) {
        #main > div {
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }
    }
    @media (min-width: 1536px) {
        #main > div {
            max-width: 1320px;
        }
    }

    /* Desktop dialogs: modals are phone-tuned (bottom sheets, 100vw-2rem)
       by default. On ≥640px render them as centered capped dialogs. */
    @media (min-width: 640px) {
        .modal-content {
            max-width: min(672px, calc(100vw - 4rem)) !important;
            max-height: calc(100vh - var(--header-h) - 4rem) !important;
            border-radius: var(--r-xl) !important;
        }
    }

    /* ══════════════════════════════════════════════════════════════
       PHONE SCREEN OPTIMIZATION (Phases 1-fix, 6, 7, 8)
       ══════════════════════════════════════════════════════════════ */

    /* Phase 1 fix: global tap targets + prevent double-tap zoom */
    * { -webkit-tap-highlight-color: transparent; }
    html, body { touch-action: manipulation; }
    button, [type="button"], [role="button"], .btn,
    input, select, textarea,
    a.btn, a.inline-flex, a.flex {
        min-height: var(--touch-target, 44px);
    }
    button, [type="button"], [role="button"], .btn, a.btn {
        min-width: var(--touch-target-sm, 40px);
    }

    /* Phase 8: fluid typography scale */
    :root {
        --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.78rem);
        --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
        --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1rem);
        --text-lg: clamp(1.05rem, 1rem + 0.25vw, 1.15rem);
        --text-xl: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
    }
    body { font-size: var(--text-base); line-height: 1.5; }

    /* Phase 6: safe-area-aware modal height + bottom sheet — PHONES ONLY.
       (Scoped to ≤639px so the ≥640px desktop dialog caps above are not
       overridden by this later unscoped !important rule.) */
    @media (max-width: 639px) {
        .modal-content {
            max-height: calc(100vh - var(--header-h) - var(--bottom-nav-h) - var(--safe-top) - var(--safe-bottom) - 2rem) !important;
            max-width: calc(100vw - 2rem) !important;
            margin: 0 !important;
            border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
        }
    }
    /* fixed overlays get notch/footer safe-area padding */
    .fixed.inset-0, [x-show].fixed.inset-0 {
        padding-top: var(--safe-top);
        padding-bottom: var(--safe-bottom);
    }
    /* toast repositioned just below the header */
    .toast-phone { top: calc(var(--header-h) + 12px) !important; }

    /* Phase 7: landscape handling for short viewports */
    @media (max-height: 500px) and (orientation: landscape) {
        :root {
            --header-h: calc(56px + var(--safe-top));
            --bottom-nav-h: calc(48px + var(--safe-bottom));
        }
        header { min-height: var(--header-h); }
        nav.fixed.bottom-0 { height: var(--bottom-nav-h); }
        .hero-slide { height: 60vh; min-height: 280px; }
        main { padding-top: var(--header-h); padding-bottom: var(--bottom-nav-h); }
        .modal-content { max-height: calc(100vh - var(--header-h) - var(--bottom-nav-h) - 1rem) !important; }
    }