/**
 * MyGuwahati Main Stylesheet
 * Single Unified Delivery (Zero @import, Zero FOUC, 100% Stable)
 * Source of Truth: Homepage UI Permanent Design Reference
 */

/* ==========================================================================
   1. DESIGN TOKENS & CSS CUSTOM PROPERTIES
   ========================================================================== */
:root {
    /* Color Palette - Light Theme */
    --color-primary: #d43f0a;
    --color-primary-container: #ffe9dc;
    --color-primary-fixed: #ffe0cf;
    --color-primary-fixed-dim: #ffb596;
    --color-on-primary: #ffffff;
    --color-on-primary-container: #5c1a00;
    --color-on-primary-fixed: #3a0f00;
    --color-on-primary-fixed-variant: #8a2a06;
    --color-inverse-primary: #ffb596;
    --color-primary-hover: #bf3808;

    --color-secondary: #0d1b3e;
    --color-secondary-container: #e1e7f7;
    --color-secondary-fixed: #e1e7f7;
    --color-secondary-fixed-dim: #b7c4e8;
    --color-on-secondary: #ffffff;
    --color-on-secondary-container: #0d1b3e;
    --color-on-secondary-fixed: #0d1b3e;
    --color-on-secondary-fixed-variant: #1b2f66;

    --color-tertiary: #1b6b2f;
    --color-tertiary-container: #c9f2c8;
    --color-tertiary-fixed: #c9f2c8;
    --color-tertiary-fixed-dim: #8fd993;
    --color-on-tertiary: #ffffff;
    --color-on-tertiary-container: #00210a;
    --color-on-tertiary-fixed: #00210a;
    --color-on-tertiary-fixed-variant: #0d5221;

    --color-background: #fff9f3;
    --color-on-background: #0d1b3e;
    --color-surface: #fff9f3;
    --color-on-surface: #0d1b3e;
    --color-surface-dim: #eadfd4;
    --color-surface-bright: #fff9f3;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #fdf4ec;
    --color-surface-container: #f9eee4;
    --color-surface-container-high: #f4e7da;
    --color-surface-container-highest: #eedfd0;
    --color-surface-variant: #f3e8dc;
    --color-on-surface-variant: #4a5068;
    --color-outline: #7b8194;
    --color-outline-variant: #e6dcd1;
    --color-surface-tint: #d43f0a;
    --color-inverse-surface: #0d1b3e;
    --color-inverse-on-surface: #fff9f3;

    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;

    /* MyGuwahati brand colours (sampled from logo.jpeg) — decorative use; text/CTAs use the tokens above */
    --color-brand-orange: #e2470f;
    --color-brand-navy: #0d1b3e;
    --color-brand-green: #5db32a;

    /* Typography */
    --font-family-body: 'Be Vietnam Pro', 'Hind Siliguri', 'Noto Sans Bengali', 'Nirmala UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-headline: 'Plus Jakarta Sans', 'Hind Siliguri', 'Noto Sans Bengali', 'Nirmala UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-base: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-gutter: 16px;
    --spacing-container: 20px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* Border Radius */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-DEFAULT: 8px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-bottom-nav: 0 -4px 12px rgba(0, 0, 0, 0.05);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout Max Width */
    --container-max-width: 1280px;
}

/* Dark Theme Tokens */
html.dark,
body.dark,
[data-theme="dark"] {
    --color-background: #0e1320;
    --color-on-background: #e8ecf4;
    --color-surface: #0e1320;
    --color-on-surface: #e8ecf4;
    --color-surface-dim: #090d17;
    --color-surface-bright: #2a3142;
    --color-surface-container-lowest: #090d17;
    --color-surface-container-low: #151b2a;
    --color-surface-container: #1a2131;
    --color-surface-container-high: #232b3d;
    --color-surface-container-highest: #2e3649;
    --color-surface-variant: #232b3d;
    --color-on-surface-variant: #c0c7d4;
    --color-outline: #8a93a5;
    --color-outline-variant: #3b4457;
    --color-inverse-surface: #e8ecf4;
    --color-inverse-on-surface: #141a24;

    --color-primary: #ff8a47;
    --color-primary-container: #7a2a08;
    --color-on-primary: #3a0f00;
    --color-on-primary-container: #ffe0cf;
    --color-inverse-primary: #d43f0a;
    --color-primary-hover: #ffa672;

    --color-secondary: #b7c4e8;
    --color-secondary-container: #1b2f66;
    --color-on-secondary: #0d1b3e;
    --color-on-secondary-container: #e1e7f7;

    --color-tertiary: #8fd993;
    --color-tertiary-container: #0d5221;
    --color-on-tertiary: #003910;
    --color-on-tertiary-container: #c9f2c8;

    --color-error: #ffb4ab;
    --color-error-container: #93000a;
    --color-on-error: #690005;
    --color-on-error-container: #ffdad6;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.6);
    --shadow-bottom-nav: 0 -4px 16px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    min-height: 100vh;
    line-height: 1.5;
    background-color: var(--color-background);
    color: var(--color-on-background);
    font-family: var(--font-family-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}


/* Fast Touch Performance & Zero Tap Delay */
html,
body,
a,
button,
input,
select,
textarea,
.category-item,
.service-card,
.property-card,
.job-card,
.matrimony-card,
.trending-card,
.story-card,
.icon-btn,
.header-auth-btn,
.bnav-item {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a:active,
button:active,
.category-item:active,
.service-card:active,
.property-card:active,
.job-card:active,
.matrimony-card:active,
.trending-card:active,
.bnav-item:active {
    opacity: 0.82;
    transform: scale(0.97);
    transition: transform 50ms ease, opacity 50ms ease;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
    background: transparent;
    border: none;
    outline: none;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Responsive Visibility Helpers */
@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.font-headline {
    font-family: var(--font-family-headline);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--color-on-surface);
}

.headline-xl {
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 1.2;
}

.headline-lg {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
}

.headline-md {
    font-size: 1.125rem;
    font-weight: 700;
}

.headline-sm {
    font-size: 1rem;
    font-weight: 600;
}

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.font-normal { font-weight: 400; }

.text-muted { color: var(--color-on-surface-variant); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-tertiary { color: var(--color-tertiary); }
.text-center { text-align: center; }
.text-right { text-align: right; }

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    overflow: hidden;
    vertical-align: middle;
}

.material-symbols-outlined.fill {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.icon-sm { font-size: 18px; }
.icon-md { font-size: 24px; }
.icon-lg { font-size: 32px; }

/* ==========================================================================
   4. LAYOUT ARCHITECTURE
   ========================================================================== */
.app-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-background);
}
body.page-is-other .app-wrapper {
    padding-bottom: 80px;
}
body.page-is-homepage .app-wrapper {
    min-height: 100vh;
    padding-bottom: 64px !important;
    box-sizing: border-box !important;
}

.app-container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 var(--spacing-gutter);
    position: relative;
}

@media (min-width: 768px) {
    .app-wrapper {
        padding-bottom: 0;
    }
    .app-container {
        max-width: 720px;
    }
}

@media (min-width: 1024px) {
    .app-container {
        max-width: 1080px;
        padding: 0 var(--spacing-container);
    }
}

@media (min-width: 1280px) {
    .app-container {
        max-width: var(--container-max-width);
    }
}

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }

.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 768px) {
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

.section-wrapper {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-on-surface);
}

.section-action {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.scroll-horizontal {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    scrollbar-width: none;
}

.scroll-horizontal::-webkit-scrollbar {
    display: none;
}

.scroll-horizontal > * {
    width: 180px !important;
    min-width: 180px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start;
}

.scroll-item {
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* ==========================================================================
   5. COMPONENTS & INTERFACES
   ========================================================================== */

/* Top Header — Rich Sunset Orange Design */
.top-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: linear-gradient(180deg, #d43f0a 0%, #bf3808 100%);
    color: #ffffff;
    padding: max(10px, env(safe-area-inset-top)) 0 10px 0;
    box-shadow: 0 4px 20px rgba(212, 63, 10, 0.25);
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

.top-header.scrolled {
    background: #d43f0a;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
}

.header-logo-link,
.dash-topbar-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 12px;
}

.header-logo-img,
.footer-logo-img {
    height: 75px !important;
    width: auto !important;
    max-height: 75px !important;
    object-fit: contain;
}

/* logo.png has a white ground (it is cropped from logo.jpeg): show it as a rounded white badge. */
.header-logo-img {
    height: 64px !important;
    max-height: 64px !important;
    background: #ffffff;
    border-radius: 14px;
    padding: 4px 10px;
    box-shadow: 0 2px 10px rgba(0, 26, 69, 0.18);
}
.footer-logo-img {
    background: #ffffff;
    border-radius: 14px;
    padding: 4px 10px;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 12px;
}

.desktop-nav-link {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 6px 12px !important;
    border-radius: var(--radius-full) !important;
    transition: all var(--transition-fast) !important;
    white-space: nowrap !important;
}

.desktop-nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.18) !important;
}

.desktop-nav-link.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.25) !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

@media (max-width: 768px) {
    .header-logo-link {
        display: none !important;
    }

    .top-header {
        padding-top: max(8px, env(safe-area-inset-top));
        padding-bottom: 8px;
    }

    .header-row {
        gap: 4px !important;
        width: 100% !important;
        justify-content: space-between !important;
    }

    .header-actions {
        width: 100% !important;
        justify-content: space-between !important;
        gap: 4px !important;
        margin-left: 0 !important;
    }

    .header-location-pill {
        max-width: 110px !important;
        font-size: 0.72rem !important;
        padding: 4px 8px !important;
        flex-shrink: 1 !important;
    }

    .header-lang-btn {
        min-width: 48px !important;
        padding: 0 8px !important;
        font-size: 0.75rem !important;
        flex-shrink: 0 !important;
    }

    .header-theme-btn {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    .header-user-btn {
        padding: 4px 8px !important;
        max-width: 110px !important;
        flex-shrink: 0 !important;
    }

    .header-auth-btn {
        padding: 4px 8px !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* ==========================================================================
       MOBILE HEADER & PAGE BACKGROUND SYSTEM
       - Homepage Mobile: Orange top header background
       - All Other Mobile Pages: Clean White (Light) or Dark (Dark) background
       ========================================================================== */

    /* HOMEPAGE MOBILE TOP HEADER (MyGuwahati brand orange) */
    body.page-is-homepage, body.is-homepage {
        background-color: #ffffff !important; /* Make background white as requested */
    }

    body.page-is-homepage .top-header,
    body.is-homepage .top-header {
        background: linear-gradient(120deg, #d43f0a 0%, #d43f0a 60%, #e2470f 100%) !important; /* brand orange */
        color: #ffffff !important;
        box-shadow: none !important;
        border-bottom: none !important;
        padding-bottom: 48px !important; /* Extend behind trust badges */
        border-radius: 0 0 36px 36px !important; /* Curved bottom edge */
        position: relative;
        z-index: 40 !important; /* Normal z-index so trust badges card sits visibly on top */
    }

    body.page-is-homepage .top-header:has(.search-input-group:focus-within),
    body.is-homepage .top-header:has(.search-input-group:focus-within),
    body.search-active .top-header,
    body.page-is-homepage .top-header.user-menu-open,
    body.is-homepage .top-header.user-menu-open,
    .top-header.user-menu-open,
    .top-header:has(#header-user-dropdown[style*="block"]) {
        z-index: 999999 !important; /* Elevate header over trust badges when search or user menu is active */
    }

    /* ENFORCE NO HERO BANNER OR ORANGE BG ON MOBILE HOMEPAGE */
    body.page-is-homepage .hero-banner {
        display: none !important;
    }
    
    body.page-is-homepage .app-wrapper,
    body.is-homepage .app-wrapper {
        background-color: var(--color-background) !important;
    }

    /* HEADER ROW FLEX FOR MOBILE HOMEPAGE */
    body.page-is-homepage .header-row {
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 !important;
    }

    body.page-is-homepage .header-logo-link {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 0 0 -22px !important; /* Shift logo slightly to the left */
        z-index: 10 !important;
    }

    body.page-is-homepage .header-logo-img {
        height: 46px !important;
        width: auto !important;
        max-height: 46px !important;
        /* The logo artwork has a white ground: present it as a rounded badge on the orange header. */
        background: #ffffff;
        border-radius: 12px;
        padding: 3px 8px;
        box-shadow: 0 2px 8px rgba(0, 26, 69, 0.18);
    }

    body.page-is-homepage .header-actions {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        pointer-events: none !important;
    }

    body.page-is-homepage .header-actions > * {
        pointer-events: auto !important;
    }

    body.page-is-homepage .header-location-pill {
        position: absolute !important;
        left: 4px !important;
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        border-radius: 50px !important;
        padding: 4px 10px !important;
        max-width: 100px !important;
        margin: 0 !important;
    }

    /* CIRCULAR ICONS WITH WHITE BORDERS FOR MOBILE HOMEPAGE */
    body.page-is-homepage .header-theme-btn,
    body.page-is-homepage .header-lang-btn,
    body.page-is-homepage .header-user-btn,
    body.page-is-homepage .header-notif-btn {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        border-radius: 50px !important;
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        color: #ffffff !important;
    }

    body.page-is-homepage .header-user-avatar {
        width: 100% !important;
        height: 100% !important;
        border-radius: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        font-weight: bold !important;
        background: transparent !important;
        color: #ffffff !important;
    }

    body.page-is-homepage .header-theme-btn span,
    body.page-is-homepage .header-lang-btn span,
    body.page-is-homepage .header-user-btn span,
    body.page-is-homepage .header-notif-btn span {
        font-size: 18px !important;
        color: #ffffff !important;
    }

    /* SEARCH BAR ADJUSTMENTS FOR MOBILE HOMEPAGE */
    body.page-is-homepage .search-wrapper {
        margin-top: 16px !important;
        padding: 0 4px !important;
    }

    body.page-is-homepage .search-input-group {
        border-radius: 50px !important;
        background: #ffffff !important;
        border: none !important;
        padding: 8px 16px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    }

    body.page-is-homepage .search-input {
        font-size: 0.95rem !important;
        color: #333 !important;
    }
    
    body.page-is-homepage .search-input::placeholder {
        color: #888 !important;
    }

    body.page-is-homepage .search-input-group .search-icon,
    body.page-is-homepage .search-input-group .icon-btn span {
        color: #333 !important;
    }

    /* TRUST BADGES MOBILE OVERLAP */
    body.page-is-homepage .trust-badges-bar {
        position: relative !important;
        margin-top: -38px !important; /* Overlap the header prominently */
        z-index: 50 !important; /* Higher than normal top-header z-index (40) so it sits on top */
        background: #ffffff !important;
        border-radius: 18px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.06) !important;
        padding: 14px 8px !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
        border: 1px solid rgba(0,0,0,0.03) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
    }

    body.page-is-homepage .trust-badge-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        flex: 1 !important;
        gap: 6px !important;
    }

    body.page-is-homepage .trust-badge-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.page-is-homepage .trust-badge-text-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
    }

    body.page-is-homepage .trust-badge-title {
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        color: #111 !important;
        line-height: 1.1 !important;
    }

    body.page-is-homepage .trust-badge-sub {
        font-size: 0.6rem !important;
        color: #666 !important;
        line-height: 1.1 !important;
    }

    body.page-is-homepage .trust-badge-divider {
        width: 1px !important;
        height: 32px !important;
        background-color: #e5e7eb !important;
        align-self: center !important;
        margin: 0 !important;
    }

    /* SERVICES CATEGORY GRID - CLONE STYLE */
    body.page-is-homepage .category-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 12px 8px !important;
        padding: 0 !important;
    }

    body.page-is-homepage .category-item.clone-style {
        background-color: var(--cat-bg) !important;
        border-radius: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 4px !important;
        text-align: center !important;
        text-decoration: none !important;
        border: 1px solid rgba(0,0,0,0.02) !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    }

    body.page-is-homepage .category-item.clone-style .category-icon-box {
        background: transparent !important;
        width: auto !important;
        height: auto !important;
        margin-bottom: 8px !important;
        color: var(--cat-icon) !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.page-is-homepage .category-item.clone-style .category-icon-img {
        width: 50px !important;
        height: 50px !important;
        max-width: 100% !important;
        object-fit: contain !important;
        transition: transform 0.2s ease !important;
    }

    body.page-is-homepage .category-item.clone-style:hover .category-icon-img {
        transform: scale(1.1) !important;
    }

    body.page-is-homepage .category-item.clone-style .material-symbols-outlined {
        font-size: 38px !important;
    }

    body.page-is-homepage .category-label-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
    }

    body.page-is-homepage .category-label-en {
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        color: #111 !important;
        line-height: 1.1 !important;
    }

    body.page-is-homepage .category-label-bn {
        font-size: 0.6rem !important;
        color: #555 !important;
        line-height: 1.1 !important;
    }


    /* ALL NON-HOMEPAGE PAGES MOBILE TOP HEADER & TOPBAR (LIGHT / DARK THEME SURFACE) */
    body:not(.page-is-homepage) .top-header,
    body.page-is-other .top-header,
    body:not(.page-is-homepage) .dash-mobile-topbar,
    body.page-is-other .dash-mobile-topbar {
        background: #ffffff !important;
        color: #1d1b20 !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }

    [data-theme="dark"] body:not(.page-is-homepage) .top-header,
    [data-theme="dark"] body.page-is-other .top-header,
    [data-theme="dark"] body:not(.page-is-homepage) .dash-mobile-topbar,
    [data-theme="dark"] body.page-is-other .dash-mobile-topbar,
    html.dark body:not(.page-is-homepage) .top-header,
    html.dark body.page-is-other .top-header {
        background: #141218 !important;
        color: #e6e1e5 !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
        border-bottom: 1px solid #2b2930 !important;
    }

    /* Non-Homepage Header Buttons & Controls (Light Mode) */
    body:not(.page-is-homepage) .top-header .header-location-pill,
    body.page-is-other .top-header .header-location-pill,
    body:not(.page-is-homepage) .top-header .header-lang-btn,
    body.page-is-other .top-header .header-lang-btn,
    body:not(.page-is-homepage) .top-header .header-theme-btn,
    body.page-is-other .top-header .header-theme-btn {
        background: #f3f4f6 !important;
        color: #1f2937 !important;
        border: 1px solid #e5e7eb !important;
    }

    body:not(.page-is-homepage) .top-header .header-location-pill span,
    body.page-is-other .top-header .header-location-pill span,
    body:not(.page-is-homepage) .top-header .header-lang-btn span,
    body.page-is-other .top-header .header-lang-btn span,
    body:not(.page-is-homepage) .top-header .header-theme-btn span,
    body.page-is-other .top-header .header-theme-btn span,
    body:not(.page-is-homepage) .top-header .header-user-btn,
    body.page-is-other .top-header .header-user-btn {
        color: #1f2937 !important;
    }

    /* Non-Homepage Header Buttons & Controls (Dark Mode) */
    [data-theme="dark"] body:not(.page-is-homepage) .top-header .header-location-pill,
    [data-theme="dark"] body.page-is-other .top-header .header-location-pill,
    [data-theme="dark"] body:not(.page-is-homepage) .top-header .header-lang-btn,
    [data-theme="dark"] body.page-is-other .top-header .header-lang-btn,
    [data-theme="dark"] body:not(.page-is-homepage) .top-header .header-theme-btn,
    [data-theme="dark"] body.page-is-other .top-header .header-theme-btn,
    html.dark body:not(.page-is-homepage) .top-header .header-location-pill,
    html.dark body.page-is-other .top-header .header-location-pill,
    html.dark body:not(.page-is-homepage) .top-header .header-lang-btn,
    html.dark body.page-is-other .top-header .header-lang-btn,
    html.dark body:not(.page-is-homepage) .top-header .header-theme-btn,
    html.dark body.page-is-other .top-header .header-theme-btn {
        background: #2b2930 !important;
        color: #e6e1e5 !important;
        border: 1px solid #36343b !important;
    }

    [data-theme="dark"] body:not(.page-is-homepage) .top-header .header-location-pill span,
    [data-theme="dark"] body.page-is-other .top-header .header-location-pill span,
    [data-theme="dark"] body:not(.page-is-homepage) .top-header .header-lang-btn span,
    [data-theme="dark"] body.page-is-other .top-header .header-lang-btn span,
    [data-theme="dark"] body:not(.page-is-homepage) .top-header .header-theme-btn span,
    [data-theme="dark"] body.page-is-other .top-header .header-theme-btn span,
    [data-theme="dark"] body:not(.page-is-homepage) .top-header .header-user-btn,
    [data-theme="dark"] body.page-is-other .top-header .header-user-btn,
    html.dark body:not(.page-is-homepage) .top-header .header-user-btn,
    html.dark body.page-is-other .top-header .header-user-btn {
        color: #e6e1e5 !important;
    }

    /* Non-Homepage Login & Register Buttons (Mobile) */
    body:not(.page-is-homepage) .top-header .header-btn-login,
    body.page-is-other .top-header .header-btn-login {
        background: #f3f4f6 !important;
        color: #1f2937 !important;
        border: 1px solid #e5e7eb !important;
    }

    [data-theme="dark"] body:not(.page-is-homepage) .top-header .header-btn-login,
    [data-theme="dark"] body.page-is-other .top-header .header-btn-login,
    html.dark body:not(.page-is-homepage) .top-header .header-btn-login,
    html.dark body.page-is-other .top-header .header-btn-login {
        background: #2b2930 !important;
        color: #e6e1e5 !important;
        border: 1px solid #36343b !important;
    }

    body:not(.page-is-homepage) .top-header .header-btn-register,
    body.page-is-other .top-header .header-btn-register {
        background: #bf3808 !important;
        color: #ffffff !important;
    }

    /* ALL NON-HOMEPAGE MOBILE PAGE BACKGROUNDS (LIGHT / DARK) */
    body:not(.page-is-homepage),
    body.page-is-other,
    body.page-is-other .app-wrapper,
    body.page-is-other .main-content,
    body.page-is-other .dash-shell,
    body.page-is-other .dash-right {
        background: #ffffff !important;
        color: #1d1b20 !important;
    }

    [data-theme="dark"] body:not(.page-is-homepage),
    [data-theme="dark"] body.page-is-other,
    [data-theme="dark"] body.page-is-other .app-wrapper,
    [data-theme="dark"] body.page-is-other .main-content,
    [data-theme="dark"] body.page-is-other .dash-shell,
    [data-theme="dark"] body.page-is-other .dash-right,
    html.dark body:not(.page-is-homepage),
    html.dark body.page-is-other,
    html.dark body.page-is-other .app-wrapper,
    html.dark body.page-is-other .main-content,
    html.dark body.page-is-other .dash-shell,
    html.dark body.page-is-other .dash-right {
        background: #141218 !important;
        color: #e6e1e5 !important;
    }

    /* Non-Homepage Mobile Hero Cards & Section Overrides */
    body.page-is-other .cat-hero-card {
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        color: #1d1b20 !important;
    }

    [data-theme="dark"] body.page-is-other .cat-hero-card,
    html.dark body.page-is-other .cat-hero-card {
        background: #1e1b24 !important;
        border: 1px solid #2b2930 !important;
        color: #e6e1e5 !important;
    }
}

.header-auth-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 16px;
    border-radius: 50px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.18s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.btn-login-pill {
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #ffffff !important;
}

.btn-login-pill:hover {
    background: rgba(255, 255, 255, 0.3);
}

.btn-register-pill {
    background: #ffffff !important;
    border: 1.5px solid #ffffff;
    color: #bf3808 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.btn-register-pill:hover {
    background: #f0fdf4 !important;
    color: #0d1b3e !important;
}

.header-lang-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    min-width: 58px !important;
    padding: 0 12px !important;
    border-radius: var(--radius-full) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: background-color var(--transition-fast), border-color var(--transition-fast) !important;
}

.header-lang-btn:hover {
    background-color: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}

.header-theme-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--radius-full) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background-color var(--transition-fast) !important;
}

.header-theme-btn:hover {
    background-color: rgba(255, 255, 255, 0.28) !important;
}

.top-header .header-auth-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    border-radius: var(--radius-full) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all var(--transition-fast) !important;
}

.top-header .header-btn-login {
    padding: 6px 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.top-header .header-btn-login:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

.top-header .header-btn-register {
    padding: 6px 18px !important;
    background-color: #ffffff !important;
    color: #bf3808 !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.top-header .header-btn-register:hover {
    background-color: #f0fdf4 !important;
    color: #0d1b3e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
}

.icon-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-on-surface);
    background-color: var(--color-surface-container-low);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.icon-btn:hover {
    background-color: var(--color-surface-container-high);
    transform: translateY(-1px);
}

/* Search Bar */
.search-wrapper {
    margin-top: var(--spacing-sm);
    position: relative;
}

.search-input-group {
    display: flex;
    align-items: center;
    background-color: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-full);
    padding: 6px 14px;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-input-group:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(134, 38, 6, 0.12);
}

.search-input-group .search-icon {
    color: var(--color-on-surface-variant);
    margin-right: 8px;
}

.search-input {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--color-on-surface);
    padding: 6px 0;
}

.search-input::placeholder {
    color: var(--color-on-surface-variant);
    opacity: 0.7;
}

/* Hero Banner — Warm Sunset Orange Design matching reference */
.hero-banner {
    position: relative;
    border-radius: 20px;
    background: linear-gradient(135deg, #d43f0a 0%, #bf3808 50%, #0d1b3e 100%);
    color: #ffffff;
    padding: 24px 20px 28px 20px;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(212, 63, 10, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hero-banner-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center right;
    opacity: 0.42;
    mix-blend-mode: overlay;
    transition: transform var(--transition-slow);
}

.hero-banner:hover .hero-banner-bg {
    transform: scale(1.03);
}

.hero-banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(160, 46, 11, 0.95) 0%, rgba(212, 63, 10, 0.65) 55%, transparent 100%);
    pointer-events: none;
}

[data-theme="dark"] .hero-banner {
    background: linear-gradient(135deg, #5c1806 0%, #85260c 50%, #9a3412 100%);
    border-color: rgba(254, 147, 44, 0.3);
}

[data-theme="dark"] .hero-banner-overlay {
    background: linear-gradient(to top, rgba(92, 24, 6, 0.95) 0%, rgba(92, 24, 6, 0.6) 60%, transparent 100%);
}

.hero-banner-content {
    position: relative;
    z-index: 3;
    max-width: 95%;
}

.hero-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.18;
    color: #ffffff;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.hero-highlight {
    color: #fde047;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    font-size: 0.875rem;
    color: #ffedd5;
    opacity: 0.95;
    max-width: 320px;
    line-height: 1.4;
    font-weight: 400;
    margin-bottom: 16px;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #ffffff;
    color: #d43f0a;
    font-size: 0.875rem;
    font-weight: 800;
    padding: 10px 22px;
    border-radius: 50px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.hero-cta:hover {
    transform: translateY(-2px);
    background-color: #ffefe6;
    color: #8a2a06;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.hero-banner-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 4;
}

.hero-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
}

.hero-dot.active {
    width: 24px;
    height: 6px;
    background: #ffffff;
}

@media (min-width: 768px) {
    .hero-banner {
        padding: 36px 40px 44px 40px;
        min-height: 260px;
    }
    .hero-banner-content {
        max-width: 65%;
    }
    .hero-title {
        font-size: 2.25rem;
    }
    .hero-subtitle {
        font-size: 1.0625rem;
        max-width: 360px;
    }
}

/* Trust Badges Bar Section */
.trust-badges-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-surface-container-lowest, #ffffff);
    border-radius: 20px;
    padding: 16px 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--color-outline-variant, #e2d7c7);
    margin-top: 16px;
    margin-bottom: 20px;
}

.trust-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    gap: 4px;
    min-width: 0;
}

.trust-badge-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.trust-badge-icon.bg-error-light {
    background-color: var(--color-error-container, #ffdad6);
    color: var(--color-error, #ba1a1a);
}

.trust-badge-icon.bg-amber-light {
    background-color: #fef3c7;
    color: #d97706;
}

.trust-badge-icon.bg-olive-light {
    background-color: #ecfccb;
    color: #4d6b38;
}

.trust-badge-icon.bg-blue-light {
    background-color: #e0f2fe;
    color: #0284c7;
}

.trust-badge-text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    min-width: 0;
}

.trust-badge-title {
    font-family: var(--font-family-label);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-on-surface, #1c1b1f);
    line-height: 1.2;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
}

.trust-badge-sub {
    font-family: var(--font-family-label);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-on-surface-variant, #79747e);
    line-height: 1.2;
    display: block;
    white-space: normal;
    text-align: center;
    word-break: break-word;
    margin-top: 2px;
}

.trust-badge-divider {
    width: 1px;
    height: 32px;
    background-color: var(--color-outline-variant, #e2d7c7);
    opacity: 0.4;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .trust-badges-bar {
        padding: 14px 6px;
    }
    .trust-badge-divider {
        display: none;
    }
    .trust-badge-sub {
        display: none;
    }
    .trust-badge-icon {
        width: 38px;
        height: 38px;
        margin-bottom: 2px;
    }
    .trust-badge-title {
        font-size: 0.75rem;
    }
}

/* Category Grid & Cards */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg) var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

@media (min-width: 768px) {
    .category-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: var(--spacing-lg) var(--spacing-md);
    }
}

@media (min-width: 1024px) {
    .category-grid {
        grid-template-columns: repeat(9, 1fr);
    }
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--transition-fast);
}

.category-item:hover {
    transform: translateY(-3px);
}

.category-icon-box {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast);
}

.category-icon-box span {
    font-size: 28px;
}

.category-item:hover .category-icon-box {
    transform: scale(1.05);
}

.cat-color-amber {
    background-color: #f59e0b !important;
    color: #ffffff !important;
}

.cat-color-olive {
    background-color: #4d6b38 !important;
    color: #ffffff !important;
}

.cat-color-terracotta {
    background-color: #d43f0a !important;
    color: #ffffff !important;
}

.cat-color-brown {
    background-color: #4a2e2b !important;
    color: #ffffff !important;
}

.cat-color-crimson {
    background-color: #c0392b !important;
    color: #ffffff !important;
}

.cat-color-emerald {
    background-color: #16a34a !important;
    color: #ffffff !important;
}

.cat-color-yellow {
    background-color: #eab308 !important;
    color: #ffffff !important;
}

.cat-color-orange {
    background-color: #ea580c !important;
    color: #ffffff !important;
}

.cat-color-walnut {
    background-color: #795548;
    color: #ffffff;
}

.cat-color-neutral {
    background-color: var(--color-surface-container-high);
    border: 1px solid var(--color-outline-variant);
    color: var(--color-on-surface-variant);
}

.category-label {
    font-family: var(--font-family-label);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-on-surface);
    text-align: center;
    line-height: 1.25;
}

.category-icon-box.bg-primary {
    background-color: var(--color-surface-container-high);
    color: var(--color-primary);
}

.category-icon-box.bg-secondary {
    background-color: var(--color-secondary-fixed);
    color: var(--color-on-secondary-fixed-variant);
}

.category-icon-box.bg-tertiary {
    background-color: var(--color-tertiary-fixed);
    color: var(--color-on-tertiary-fixed-variant);
}

.category-icon-box.bg-outline {
    background-color: var(--color-surface-container-low);
    color: var(--color-on-surface-variant);
    border: 1px dashed var(--color-outline-variant);
}

/* Service Card (Horizontal & Vertical) */
.service-card {
    background-color: var(--color-surface-container-lowest);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-outline-variant);
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.service-card.scroll-item {
    width: 180px;
    min-width: 180px;
    flex-shrink: 0;
}

.service-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.service-card-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    background-color: var(--color-surface-container);
}

.service-card-body {
    padding: 10px 12px;
}

.service-card-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-on-surface);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.service-card-price {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-top: 4px;
}

/* Trending Card */
.trending-card {
    background-color: var(--color-surface-container-lowest);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-outline-variant);
    overflow: hidden;
    width: 200px;
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    flex-shrink: 0;
}

.trending-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.trending-card-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    background-color: var(--color-surface-container);
}

.trending-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-top-rated {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.badge-best-value {
    background-color: var(--color-secondary);
    color: var(--color-on-secondary);
}

.trending-card-body {
    padding: 10px;
}

.trending-card-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-on-surface);
}

.trending-card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin-top: 4px;
}

.trending-card-rating .star {
    color: #ffba20;
    font-size: 14px;
}

/* Featured Job Card */
.job-card {
    background-color: var(--color-surface-container-lowest);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-outline-variant);
    padding: 14px;
    margin-bottom: var(--spacing-sm);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.job-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary);
}

.job-logo {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.job-info {
    flex: 1;
    min-width: 0;
}

.job-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-company {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin-top: 1px;
}

.job-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.job-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-container);
    color: var(--color-on-surface-variant);
}

.job-salary {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* Customer Story Card */
.story-card {
    background-color: var(--color-surface-container-lowest);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-outline-variant);
    padding: 14px;
    box-shadow: var(--shadow-sm);
    width: 260px;
    flex-shrink: 0;
}

.story-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.story-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--color-primary);
    background-color: var(--color-primary-fixed);
}

.story-user {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-on-surface);
}

.story-stars {
    display: flex;
    color: #ffba20;
    font-size: 13px;
}

.story-text {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    line-height: 1.4;
    font-style: italic;
}

/* Bottom Navigation Bar (Mobile) */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-outline-variant);
    box-shadow: var(--shadow-bottom-nav);
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 60px;
    height: auto;
    padding: 4px 4px max(6px, env(safe-area-inset-bottom, 0px));
    transition: background-color var(--transition-base), border-color var(--transition-base);
}

@media (min-width: 768px) {
    .bottom-nav {
        display: none;
    }
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    color: var(--color-outline);
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 4px 2px;
    text-decoration: none;
    text-align: center;
    transition: color var(--transition-fast);
}

.nav-item.active {
    color: var(--color-primary);
    font-weight: 700;
}

.nav-item:hover {
    color: var(--color-primary);
}

.nav-item .nav-icon {
    font-size: 22px;
    display: block;
    line-height: 1;
}

.nav-item .nav-label {
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
    letter-spacing: -0.2px;
    display: block;
}

/* Desktop Navigation Header */
.desktop-nav {
    display: none;
}

@media (min-width: 768px) {
    .desktop-nav {
        display: flex;
        align-items: center;
        gap: var(--spacing-lg);
    }
    .desktop-nav-link {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--color-on-surface-variant);
        transition: color var(--transition-fast);
    }
    .desktop-nav-link:hover,
    .desktop-nav-link.active {
        color: var(--color-primary);
    }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    border-radius: var(--radius-md);
    padding: 10px 20px;
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    box-shadow: var(--shadow-sm);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-on-secondary);
}

.btn-outline {
    border: 1px solid var(--color-outline);
    color: var(--color-on-surface);
}

.btn-outline:hover {
    background-color: var(--color-surface-container);
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    padding: 6px 0;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 0.875rem;
    color: var(--color-on-surface);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.dropdown-item:hover {
    background-color: var(--color-surface-container);
    color: var(--color-primary);
}

.dropdown-divider {
    height: 1px;
    background-color: var(--color-outline-variant);
    margin: 4px 0;
}

/* ==========================================================================
   6. UTILITIES
   ========================================================================== */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }

.m-0 { margin: 0; }
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.p-0 { padding: 0; }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }

.w-full { width: 100%; }
.h-full { height: 100%; }
.rounded-full { border-radius: var(--radius-full); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transition {
    transition: all var(--transition-base);
}

.cursor-pointer {
    cursor: pointer;
}

/* ==========================================================================
   7. LIVE SEARCH & AUTOCOMPLETE DROPDOWN
   ========================================================================== */
.search-wrapper {
    position: relative;
}

.search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    max-height: 420px;
    overflow-y: auto;
    z-index: 1000;
    padding: 8px 0;
}

.search-section-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-outline);
    padding: 8px 16px 4px;
}

.search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--color-on-surface);
    transition: background-color var(--transition-fast);
    cursor: pointer;
}

.search-item:hover,
.search-item.active {
    background-color: var(--color-surface-container);
}

.search-item-thumb {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
}

.search-item-icon {
    font-size: 20px;
    color: var(--color-primary);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-container-high);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.search-item-info {
    flex: 1;
    min-width: 0;
}

.search-item-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-item-meta {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin-top: 2px;
}

.search-item-arrow {
    font-size: 18px;
    color: var(--color-outline);
    margin-left: auto;
    flex-shrink: 0;
}

.search-highlight {
    background: #ffea79;
    color: #1c1b1b;
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 700;
}

.dark .search-highlight {
    background: #b58900;
    color: #ffffff;
}

.search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 16px;
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
}

.search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 16px;
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    text-align: center;
}

.search-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 16px 12px;
}

.search-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--color-surface-container-high);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-on-surface);
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.search-tag:hover {
    background: var(--color-primary-fixed);
    color: var(--color-on-primary-fixed);
}

.search-view-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--color-outline-variant);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    margin-top: 4px;
}

.search-view-all:hover {
    background-color: var(--color-surface-container);
}

.spin {
    animation: spin 1s linear infinite;
    display: inline-block;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   8. PROPERTY & MATRIMONY SECTION CARDS
   ========================================================================== */
.property-card {
    width: 240px;
    min-width: 240px;
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
}

.property-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.property-card-img-wrap {
    position: relative;
    width: 100%;
    height: 140px;
    overflow: hidden;
}

.property-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.property-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.badge-rent {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.badge-sale {
    background: var(--color-secondary);
    color: var(--color-on-secondary);
}

.property-tag-featured {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    backdrop-filter: blur(4px);
}

.property-card-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.property-price {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--color-primary);
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.property-price .currency {
    font-size: 0.875rem;
    font-weight: 700;
}

.property-price .period {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-on-surface-variant);
}

.property-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.property-specs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    font-weight: 500;
    margin-top: 2px;
}

.spec-dot {
    color: var(--color-outline);
    font-size: 0.625rem;
}

.property-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--color-outline);
    margin-top: 4px;
}

.property-location .loc-pin {
    font-size: 14px;
    color: var(--color-primary);
}

/* Matrimony Cards */
.matrimony-card {
    width: 260px;
    min-width: 260px;
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.matrimony-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.matrimony-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.matrimony-avatar-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.matrimony-avatar {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.avatar-female {
    background: #ffe4e8;
    color: #d81b60;
}

.avatar-male {
    background: #e0f2fe;
    color: #0284c7;
}

.dark .avatar-female {
    background: rgba(216, 27, 96, 0.25);
    color: #ff80ab;
}

.dark .avatar-male {
    background: rgba(2, 132, 199, 0.25);
    color: #7dd3fc;
}

.matrimony-verified {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    background: var(--color-surface);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.matrimony-verified .material-symbols-outlined {
    font-size: 14px;
}

.matrimony-meta {
    flex: 1;
    min-width: 0;
}

.matrimony-id {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-outline);
    letter-spacing: 0.5px;
}

.matrimony-profession {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 2px 0 0;
}

.matrimony-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.matrimony-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.matrimony-tag {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-container-high);
    color: var(--color-on-surface-variant);
}

.matrimony-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--color-outline);
}

.matrimony-location .loc-pin {
    font-size: 15px;
    color: var(--color-primary);
}

.matrimony-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    background: rgba(212, 63, 10, 0.08);
    color: var(--color-primary);
    border: 1px solid rgba(212, 63, 10, 0.16);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: all var(--transition-fast);
    margin-top: 4px;
}

.matrimony-btn:hover {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

.dark .matrimony-btn {
    background: rgba(140, 250, 198, 0.12);
    color: #b1c5ff;
    border: 1px solid rgba(140, 250, 198, 0.25);
}

.dark .matrimony-btn:hover {
    background: #b1c5ff;
    color: #081229;
    border-color: #b1c5ff;
}

/* ==========================================================================
   Authentication & User Management Styles (v0.3.0)
   ========================================================================== */

.auth-page-container {
    min-height: calc(100vh - 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 20px;
    background: radial-gradient(circle at 50% 10%, rgba(212, 63, 10, 0.05) 0%, transparent 65%);
}

.auth-card {
    width: 100%;
    max-width: 480px;
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: 24px;
    padding: 40px 36px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.09);
    animation: authFadeIn 0.3s ease-out;
}

.auth-card-wide {
    max-width: 620px;
    padding: 44px 40px;
}

@keyframes authFadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-header {
    text-align: center;
    margin-bottom: 28px;
}

.auth-logo-badge {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: rgba(212, 63, 10, 0.1);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.dark .auth-logo-badge {
    background: rgba(140, 250, 198, 0.15);
    color: #b1c5ff;
}

.auth-title {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--color-on-surface);
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.auth-subtitle {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    margin: 0;
    line-height: 1.5;
}

/* Alerts */
.auth-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 24px;
    line-height: 1.4;
}

.auth-alert-danger {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.dark .auth-alert-danger {
    background: rgba(187, 0, 39, 0.15);
    color: #fca5a5;
    border-color: rgba(187, 0, 39, 0.3);
}

.auth-alert-success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.dark .auth-alert-success {
    background: rgba(212, 63, 10, 0.2);
    color: #86efac;
    border-color: rgba(212, 63, 10, 0.4);
}

.auth-alert .alert-icon {
    font-size: 22px;
    flex-shrink: 0;
}

/* Role Selector Tabs */
.auth-role-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: var(--color-surface-container);
    padding: 6px;
    border-radius: var(--radius-xl);
    margin-bottom: 24px;
}

.auth-role-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: var(--color-on-surface-variant);
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition-base);
    word-break: break-word;
}

.auth-role-tab .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
}

.auth-role-tab.active {
    background: var(--color-surface);
    color: var(--color-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.dark .auth-role-tab.active {
    background: var(--color-surface-container-high);
    color: #b1c5ff;
}

@media (max-width: 480px) {
    .auth-role-tabs {
        padding: 4px;
        gap: 4px;
    }
    .auth-role-tab {
        padding: 8px 4px;
        font-size: 0.75rem;
        gap: 4px;
    }
    .auth-role-tab .material-symbols-outlined {
        font-size: 16px;
    }
}

/* Custom Select Component */
.custom-select-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 14px;
    background: var(--color-surface);
    border: 1.5px solid var(--color-outline-variant);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-on-surface);
    cursor: pointer;
    transition: var(--transition-base);
    box-sizing: border-box;
    min-height: 46px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.input-with-icon .custom-select-trigger {
    padding-left: 44px;
}

.custom-select-trigger:hover,
.custom-select-trigger:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-surface);
    outline: none;
}

.custom-select-wrapper.open .custom-select-trigger {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(191, 56, 8, 0.14);
}

.custom-select-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 8px;
    flex: 1;
    text-align: left;
}

.custom-select-arrow {
    font-size: 20px;
    color: var(--color-on-surface-variant);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.custom-select-wrapper.open .custom-select-arrow {
    transform: rotate(180deg);
    color: var(--color-primary);
}

.custom-select-options {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1.5px solid var(--color-outline-variant);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
    z-index: 99999 !important;
    max-height: min(280px, 48vh);
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    display: none;
    padding: 6px;
    box-sizing: border-box;
    animation: authFadeIn 0.15s ease-out;
}

.custom-select-wrapper.drop-up .custom-select-options {
    top: auto;
    bottom: calc(100% + 6px);
    box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.2);
}

.custom-select-wrapper.open .custom-select-options {
    display: block;
}

/* Custom Scrollbar for Smooth Touch & Desktop Scrolling */
.custom-select-options::-webkit-scrollbar {
    width: 6px;
}
.custom-select-options::-webkit-scrollbar-track {
    background: transparent;
}
.custom-select-options::-webkit-scrollbar-thumb {
    background: var(--color-outline-variant, #ccc);
    border-radius: 6px;
}
.custom-select-options::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary, #bf3808);
}

.custom-select-search {
    padding: 6px 4px 8px 4px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--color-outline-variant);
    position: sticky;
    top: 0;
    background: var(--color-surface);
    z-index: 2;
}

.custom-select-search input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--color-outline-variant);
    border-radius: 10px;
    font-size: 0.875rem;
    color: var(--color-on-surface);
    background: var(--color-surface-container-low, #fcf9f8);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.18s ease;
}

.custom-select-search input:focus {
    border-color: var(--color-primary);
    background: var(--color-surface);
}

.custom-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-on-surface);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    box-sizing: border-box;
    min-height: 42px;
    -webkit-tap-highlight-color: transparent;
}

.custom-select-option:hover,
.custom-select-option:active {
    background: var(--color-surface-container-high, #f2e9dd);
    color: var(--color-primary, #d43f0a);
}

.custom-select-option.selected {
    background: rgba(191, 56, 8, 0.12);
    color: var(--color-primary);
    font-weight: 700;
}

.custom-select-option.selected::after {
    content: '✓';
    font-weight: 800;
    color: var(--color-primary);
    margin-left: 8px;
    font-size: 0.9375rem;
}

.dark .custom-select-option.selected {
    background: rgba(140, 250, 198, 0.18);
    color: #b1c5ff;
}
.dark .custom-select-option.selected::after {
    color: #b1c5ff;
}

/* Ensure Parent Cards Don't Clip Dropdowns */
.dash-section-card:has(.custom-select-wrapper.open),
.dash-form-group:has(.custom-select-wrapper.open),
.dash-form-grid:has(.custom-select-wrapper.open),
.form-group:has(.custom-select-wrapper.open) {
    overflow: visible !important;
}


/* Google Button */
.auth-btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-full);
    color: var(--color-on-surface);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.auth-btn-google:hover {
    background: var(--color-surface-container);
    border-color: var(--color-outline);
    transform: translateY(-1px);
}

/* Auth Divider */
.auth-divider {
    position: relative;
    text-align: center;
    margin: 28px 0;
}

.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-outline-variant);
}

.auth-divider span {
    position: relative;
    background: var(--color-surface);
    padding: 0 16px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-on-surface-variant);
}

/* Form Styles */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 576px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .auth-card-wide {
        padding: 32px 24px;
    }
    .auth-card {
        padding: 32px 24px;
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 2px;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-on-surface);
    margin-bottom: 2px;
}

.form-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-link-subtle {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.form-link-subtle:hover {
    text-decoration: underline;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.input-with-icon .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: var(--color-on-surface-variant);
    pointer-events: none;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--color-surface-container);
    border: 1px solid var(--color-outline-variant);
    border-radius: 12px;
    font-size: 0.9375rem;
    color: var(--color-on-surface);
    font-family: inherit;
    transition: var(--transition-base);
    box-sizing: border-box;
}

.input-with-icon .form-input,
.input-with-icon input,
.input-with-icon select,
.input-with-icon textarea {
    padding-left: 46px !important;
}

.input-with-icon input[type="password"],
.input-with-icon .form-input:has(~ .btn-pwd-toggle),
.input-with-icon:has(.btn-pwd-toggle) .form-input,
.input-with-icon:has(.btn-pwd-toggle) input {
    padding-right: 46px !important;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(212, 63, 10, 0.12);
}

.btn-pwd-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    z-index: 3;
    line-height: 1;
}

.btn-pwd-toggle:hover {
    color: var(--color-on-surface);
}

/* 6-Digit OTP Inputs */
.otp-inputs-grid {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 24px 0;
}

.otp-digit-input {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-primary);
    background: var(--color-surface-container);
    border: 2px solid var(--color-outline-variant);
    border-radius: 14px;
    transition: var(--transition-base);
    box-sizing: border-box;
}

.otp-digit-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 4px rgba(212, 63, 10, 0.15);
    transform: translateY(-2px);
}

.dark .otp-digit-input {
    color: #b1c5ff;
}

@media (max-width: 480px) {
    .otp-inputs-grid {
        gap: 6px;
    }
    .otp-digit-input {
        width: 40px;
        height: 48px;
        font-size: 1.25rem;
        border-radius: 10px;
    }
}

.auth-btn-subtle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-full);
    background: var(--color-surface-container-high);
    color: var(--color-on-surface);
    border: 1px solid var(--color-outline-variant);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-base);
}

.auth-btn-subtle:hover {
    background: var(--color-surface-container);
    border-color: var(--color-primary);
    color: var(--color-primary);
}


/* Custom Checkbox */
.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.84375rem;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-box {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--color-outline);
    background: var(--color-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-base);
    flex-shrink: 0;
}

.custom-checkbox input:checked ~ .checkbox-box {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.custom-checkbox input:checked ~ .checkbox-box::after {
    content: '✓';
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
}

.auth-inline-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.auth-inline-link:hover {
    text-decoration: underline;
}

/* Submit Button */
.auth-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 24px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #081229 100%);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-full);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: 0 4px 16px rgba(212, 63, 10, 0.25);
    margin-top: 6px;
}

.auth-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(212, 63, 10, 0.35);
}

.dark .auth-submit-btn {
    background: linear-gradient(135deg, #d43f0a 0%, #1b2f66 100%);
}

.auth-footer {
    text-align: center;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--color-outline-variant);
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
}

.auth-link-bold {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
}

.auth-link-bold:hover {
    text-decoration: underline;
}


/* Header Auth Buttons & User Dropdown */
.header-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition-base);
}

.header-btn-login {
    color: var(--color-primary);
    background: transparent;
    border: 1px solid var(--color-outline-variant);
}

.header-btn-login:hover {
    background: var(--color-surface-container);
    border-color: var(--color-primary);
}

.header-btn-register {
    background: var(--color-primary);
    color: #ffffff;
    border: 1px solid var(--color-primary);
}

.header-btn-register:hover {
    background: #081229;
    border-color: #081229;
}

.header-user-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 10px 4px 4px;
    background: var(--color-surface-container);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-base);
    color: var(--color-on-surface);
}

.header-user-btn:hover {
    background: var(--color-surface-container-high);
}

.header-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-user-name {
    font-size: 0.8125rem;
    font-weight: 600;
}

.header-user-menu-wrap {
    position: relative;
    z-index: 999999;
}

.header-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 250px;
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    padding: 8px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
    z-index: 999999 !important;
    animation: authFadeIn 0.2s ease-out;
}

.user-dropdown-header {
    padding: 8px 12px 10px 12px;
}

.user-dropdown-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.user-dropdown-email {
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
}

.user-dropdown-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: rgba(212, 63, 10, 0.12);
    color: var(--color-primary);
    font-size: 0.6875rem;
    font-weight: 800;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.dark .user-dropdown-badge {
    background: rgba(140, 250, 198, 0.18);
    color: #b1c5ff;
}

.user-dropdown-divider {
    height: 1px;
    background: var(--color-outline-variant);
    margin: 6px 0;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: var(--transition-base);
    box-sizing: border-box;
}

.user-dropdown-item .material-symbols-outlined {
    font-size: 20px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.user-dropdown-item:hover {
    background: var(--color-surface-container);
}

.user-dropdown-logout {
    color: var(--color-secondary);
}

.dark .user-dropdown-logout {
    color: #fca5a5;
}

.user-dropdown-logout:hover {
    background: rgba(187, 0, 39, 0.08);
}

/* ============================================================
   CUSTOMER DASHBOARD STYLES (v0.5.0) — Full Rebuild
   ============================================================ */

/* ---- Full-Height Dashboard Shell ---- */
.dash-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--color-background);
}

/* ---- Desktop Sidebar ---- */
.dash-sidebar {
    display: none;
    flex-direction: column;
    width: 260px;
    min-width: 260px;
    height: 100vh;
    overflow-y: auto;
    background: var(--color-surface);
    border-right: 1px solid var(--color-outline-variant);
    padding: var(--spacing-lg) var(--spacing-md);
    flex-shrink: 0;
}

.dash-sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    padding: 0 var(--spacing-sm);
}

.dash-sidebar-brand .brand-icon {
    font-size: 32px;
    color: var(--color-primary);
    font-variation-settings: 'FILL' 1;
}

.dash-sidebar-brand h1 {
    font-family: var(--font-family-headline);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.dash-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
}

.dash-nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    font-family: var(--font-family-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    text-decoration: none;
    transition: all var(--transition-fast);
    position: relative;
}

.dash-nav-link .nav-icon {
    font-size: 22px;
}

.dash-nav-link:hover {
    background: var(--color-surface-container-high);
    color: var(--color-on-surface);
}

.dash-nav-link.active {
    background: var(--color-primary-fixed);
    color: var(--color-on-primary-fixed);
    font-weight: 700;
    transform: scale(0.97);
}

.dash-nav-link .nav-badge {
    margin-left: auto;
    background: var(--color-secondary);
    color: var(--color-on-secondary);
    font-size: 0.6875rem;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-nav-divider {
    border: 0;
    border-top: 1px solid var(--color-outline-variant);
    margin: var(--spacing-sm) 0;
}

.dash-nav-link.logout-link {
    color: var(--color-secondary);
    margin-top: var(--spacing-sm);
}

.dash-nav-link.logout-link:hover {
    background: var(--color-error-container);
}

/* Sidebar Help Card */
.dash-sidebar-help {
    margin-top: auto;
    padding-top: var(--spacing-lg);
}

.dash-help-card {
    background: rgba(191, 56, 8, 0.08);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .dash-help-card {
    background: rgba(255, 180, 107, 0.08);
}

.dash-help-card h3 {
    font-family: var(--font-family-headline);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}

.dash-help-card p {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
}

.dash-help-card .help-btn {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.875rem;
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    transition: opacity var(--transition-fast);
    text-decoration: none;
}

.dash-help-card .help-btn:hover {
    opacity: 0.9;
}

.dash-help-card .help-watermark {
    position: absolute;
    bottom: -16px;
    right: -16px;
    font-size: 100px;
    color: var(--color-primary);
    opacity: 0.08;
}

/* ---- Right Column (Topbar + Content) ---- */
.dash-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    min-width: 0;
}

/* ---- Dashboard Topbar (Desktop) ---- */
.dash-topbar {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-outline-variant);
    height: 72px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 50;
}

.dash-topbar-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.dash-topbar-location {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    color: var(--color-on-surface);
    transition: color var(--transition-fast);
}

.dash-topbar-location:hover {
    color: var(--color-primary);
}

.dash-topbar-location .loc-icon {
    color: var(--color-error);
}

.dash-topbar-location .loc-text {
    font-weight: 700;
    font-size: 0.875rem;
}

.dash-topbar-search {
    flex: 1;
    max-width: 600px;
    margin: 0 var(--spacing-lg);
    position: relative;
}

.dash-topbar-search input {
    width: 100%;
    background: var(--color-surface-container-low);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-full);
    padding: var(--spacing-sm) var(--spacing-xl);
    font-size: 0.875rem;
    font-family: var(--font-family-body);
    color: var(--color-on-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.dash-topbar-search input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(212, 63, 10, 0.15);
}

.dash-topbar-search .search-icon-left {
    position: absolute;
    left: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-on-surface-variant);
    font-size: 22px;
}

.dash-topbar-search .search-icon-right {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-on-surface-variant);
    cursor: pointer;
    font-size: 22px;
}

.dash-topbar-search .search-icon-right:hover {
    color: var(--color-primary);
}

.dash-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.dash-topbar-actions .icon-btn {
    position: relative;
    color: var(--color-on-surface-variant);
    padding: var(--spacing-xs);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-topbar-actions .icon-btn:hover {
    color: var(--color-primary);
    background: var(--color-surface-container-high);
}

.dash-topbar-actions .notif-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color-secondary);
    color: var(--color-on-secondary);
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 2px solid var(--color-surface);
}

.dash-topbar-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--radius-lg);
    transition: background var(--transition-fast);
}

.dash-topbar-user:hover {
    background: var(--color-surface-container-high);
}

.dash-topbar-user img {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 1px solid var(--color-outline-variant);
}

.dash-topbar-user .user-initials {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.dash-topbar-user-name {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-on-surface);
}

/* ---- Mobile Top App Bar ---- */
.dash-mobile-topbar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-surface, #ffffff);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-outline-variant, #e5e7eb);
    padding: max(10px, env(safe-area-inset-top, 0px)) 12px 10px 12px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .dash-mobile-topbar {
    background: rgba(28, 27, 27, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.dash-mobile-topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.dash-mobile-topbar-left .back-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border-radius: var(--radius-full);
    background: transparent;
    border: none;
    color: var(--color-on-surface);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
    flex-shrink: 0;
}

.dash-mobile-topbar-left .back-btn:hover,
.dash-mobile-topbar-left .back-btn:active {
    background: var(--color-surface-container);
}

.dash-mobile-topbar-left h1 {
    font-family: var(--font-family-headline);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.dash-mobile-topbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.dash-mobile-topbar-right .icon-btn {
    position: relative;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--radius-full);
    background: transparent;
    border: none;
    color: var(--color-on-surface);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
    flex-shrink: 0;
}

.dash-mobile-topbar-right .icon-btn:hover,
.dash-mobile-topbar-right .icon-btn:active {
    background: var(--color-surface-container);
}

.dash-mobile-topbar-right .notif-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: #ef4444;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--color-surface);
    line-height: 1;
}

/* ---- Scrollable Content Area ---- */
.dash-content {
    flex: 1;
    overflow-y: auto;
    background: var(--color-surface-container-lowest);
    padding: var(--spacing-container);
}

.dash-content-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* ---- Profile Hero Card ---- */
.dash-profile-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-outline-variant);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-lg);
    position: relative;
    overflow: hidden;
}

.dash-profile-card-inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.dash-profile-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.dash-profile-main {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    z-index: 1;
    position: relative;
}

.dash-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.dash-avatar-wrap img {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 4px solid var(--color-surface-container-lowest);
    box-shadow: var(--shadow-sm);
}

.dash-avatar-wrap .avatar-initials-lg {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    border: 4px solid var(--color-surface-container-lowest);
    box-shadow: var(--shadow-sm);
}

.dash-avatar-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    border: 2px solid var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition-fast);
}

.dash-avatar-edit:hover {
    background: var(--color-primary-hover);
}

.dash-profile-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.dash-profile-name-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.dash-profile-name-row h2 {
    font-family: var(--font-family-headline);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.dash-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(212, 63, 10, 0.1);
    color: var(--color-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[data-theme="dark"] .dash-verified-badge {
    background: rgba(255, 180, 107, 0.12);
}

.dash-verified-badge .material-symbols-outlined {
    font-size: 14px;
    font-variation-settings: 'FILL' 1;
}

.dash-profile-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px var(--spacing-lg);
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
}

.dash-profile-details .detail-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dash-profile-details .detail-item .material-symbols-outlined {
    font-size: 18px;
}

.dash-edit-profile-btn {
    z-index: 1;
    position: relative;
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-surface-container);
    border: 1px solid var(--color-outline-variant);
    color: var(--color-on-surface);
    font-size: 0.875rem;
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.dash-edit-profile-btn:hover {
    background: var(--color-surface-container-high);
}

.dash-edit-profile-btn .material-symbols-outlined {
    font-size: 18px;
}

.dash-profile-deco {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    width: 33%;
    opacity: 0.25;
    pointer-events: none;
}

/* Mobile Profile Card Decorative Element */
.dash-profile-deco-mobile {
    position: absolute;
    top: 0;
    right: 0;
    width: 128px;
    height: 128px;
    border-bottom-left-radius: 50%;
    opacity: 0.5;
    background: rgba(191, 56, 8, 0.08);
    pointer-events: none;
}

[data-theme="dark"] .dash-profile-deco-mobile {
    background: rgba(255, 180, 107, 0.06);
}

/* Mobile Profile Stats Inline */
.dash-profile-stats-inline {
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--color-surface-container);
    text-align: center;
}

.dash-stat-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dash-stat-inline:not(:first-child) {
    border-left: 1px solid var(--color-surface-container);
}

.dash-stat-inline .stat-icon-sm {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    font-size: 1.125rem;
}

.dash-stat-inline .stat-icon-sm.red { background: #fef2f2; color: #f87171; }
.dash-stat-inline .stat-icon-sm.blue { background: #eff6ff; color: #3b82f6; }
.dash-stat-inline .stat-icon-sm.yellow { background: #fefce8; color: #eab308; }
.dash-stat-inline .stat-icon-sm.purple { background: #faf5ff; color: #a855f7; }

[data-theme="dark"] .dash-stat-inline .stat-icon-sm.red { background: rgba(248, 113, 113, 0.12); }
[data-theme="dark"] .dash-stat-inline .stat-icon-sm.blue { background: rgba(59, 130, 246, 0.12); }
[data-theme="dark"] .dash-stat-inline .stat-icon-sm.yellow { background: rgba(234, 179, 8, 0.12); }
[data-theme="dark"] .dash-stat-inline .stat-icon-sm.purple { background: rgba(168, 85, 247, 0.12); }

.dash-stat-inline .stat-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-on-surface);
    line-height: 1.2;
}

.dash-stat-inline .stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-on-surface-variant);
}

/* ---- Desktop Stats Grid ---- */
.dash-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.dash-stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    cursor: pointer;
    transition: box-shadow var(--transition-base);
    text-decoration: none;
    color: inherit;
}

.dash-stat-card:hover {
    box-shadow: var(--shadow-md);
}

.dash-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 24px;
}

.dash-stat-icon.green { background: rgba(212, 63, 10, 0.1); color: var(--color-primary); }
.dash-stat-icon.purple { background: rgba(168, 85, 247, 0.1); color: #7c3aed; }
.dash-stat-icon.orange { background: rgba(249, 115, 22, 0.1); color: #ea580c; }
.dash-stat-icon.red { background: rgba(239, 68, 68, 0.1); color: var(--color-error); }

[data-theme="dark"] .dash-stat-icon.green { background: rgba(255, 180, 107, 0.12); }
[data-theme="dark"] .dash-stat-icon.purple { background: rgba(168, 85, 247, 0.12); }
[data-theme="dark"] .dash-stat-icon.orange { background: rgba(249, 115, 22, 0.12); }
[data-theme="dark"] .dash-stat-icon.red { background: rgba(239, 68, 68, 0.12); }

.dash-stat-value {
    font-family: var(--font-family-headline);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-on-surface);
    line-height: 1;
}

.dash-stat-label {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
}

/* ---- Content Grid (2-column desktop) ---- */
.dash-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-lg);
}

.dash-grid-left {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.dash-grid-right {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* ---- Section Card ---- */
.dash-section-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.dash-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.dash-section-header h3 {
    font-family: var(--font-family-headline);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-on-surface);
    margin: 0;
}

.dash-section-header .view-all-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: text-decoration var(--transition-fast);
}

.dash-section-header .view-all-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.dash-section-header .view-all-link .material-symbols-outlined {
    font-size: 16px;
}

/* ---- Enquiry Cards ---- */
.dash-enquiry-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.dash-enquiry-card {
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    padding: var(--spacing-sm);
    display: flex;
    gap: var(--spacing-md);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition-base);
}

.dash-enquiry-card:hover {
    box-shadow: var(--shadow-md);
}

.dash-enquiry-card .accent-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    transition: width var(--transition-base);
}

.dash-enquiry-card:hover .accent-bar {
    width: 6px;
}

.dash-enquiry-card .accent-bar.green { background: var(--color-primary); }
.dash-enquiry-card .accent-bar.blue { background: #3b82f6; }

.dash-enquiry-thumb {
    width: 128px;
    height: 96px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    flex-shrink: 0;
}

.dash-enquiry-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) 0;
}

.dash-enquiry-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.dash-enquiry-title {
    font-family: var(--font-family-headline);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-on-surface);
    margin: 0;
    line-height: 1.3;
}

.dash-enquiry-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin-top: 4px;
}

.dash-enquiry-meta .dot {
    width: 4px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-outline-variant);
}

.dash-status-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-md);
    white-space: nowrap;
}

.dash-status-badge.responded {
    background: rgba(212, 63, 10, 0.1);
    color: var(--color-primary);
}

.dash-status-badge.pending {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.dash-status-badge.closed {
    background: var(--color-surface-container-high);
    color: var(--color-on-surface-variant);
}

[data-theme="dark"] .dash-status-badge.responded {
    background: rgba(255, 180, 107, 0.12);
}

[data-theme="dark"] .dash-status-badge.pending {
    background: rgba(59, 130, 246, 0.12);
}

.dash-enquiry-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dash-enquiry-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
}

.dash-enquiry-location .material-symbols-outlined {
    font-size: 16px;
}

.dash-view-details-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--color-outline-variant);
    background: transparent;
    color: var(--color-on-surface);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.dash-view-details-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.dash-view-details-btn .material-symbols-outlined {
    font-size: 16px;
}

.dash-new-enquiry-btn {
    width: 100%;
    border: 2px dashed var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 600;
    padding: var(--spacing-sm);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--spacing-xs);
}

.dash-new-enquiry-btn:hover {
    background: rgba(212, 63, 10, 0.04);
}

[data-theme="dark"] .dash-new-enquiry-btn:hover {
    background: rgba(255, 180, 107, 0.06);
}

.dash-new-enquiry-btn .material-symbols-outlined {
    font-size: 18px;
}

/* ---- Mobile Enquiry Card (with stepper) ---- */
.dash-mobile-enquiry {
    background: var(--color-surface-container-lowest);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-surface-container);
}

.dash-mobile-enquiry-top {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.dash-mobile-enquiry-top img {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-xl);
    object-fit: cover;
}

.dash-mobile-enquiry-info h4 {
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0 0 4px 0;
}

.dash-mobile-enquiry-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    margin-bottom: 4px;
}

.dash-mobile-enquiry-loc {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
}

.dash-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--color-on-surface);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.dash-chat-btn:hover {
    background: var(--color-surface-container);
}

/* Stepper Progress */
.dash-stepper {
    position: relative;
    padding: 24px 8px 0;
}

.dash-stepper-line {
    position: absolute;
    top: 42px;
    left: 32px;
    right: 32px;
    height: 2px;
    background: var(--color-outline-variant);
    border-top: 2px dashed var(--color-outline-variant);
}

.dash-stepper-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.dash-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.dash-step-dot {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.dash-step-dot.done {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.dash-step-dot.pending {
    background: var(--color-surface-container);
    border: 2px solid var(--color-outline-variant);
}

.dash-step-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-on-surface);
}

.dash-step.future .dash-step-label {
    font-weight: 500;
    color: var(--color-on-surface-variant);
}

/* ---- Mobile Favourites Scroll ---- */
.dash-mobile-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.dash-mobile-section-header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
}

.dash-mobile-section-header a {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dash-favourites-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
}

.dash-favourites-scroll::-webkit-scrollbar { display: none; }

.dash-fav-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-surface-container-lowest);
    padding: 10px;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-surface-container);
    min-width: 150px;
    flex-shrink: 0;
}

.dash-fav-chip .fav-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.dash-fav-chip .fav-icon.red { background: #fef2f2; color: #f87171; }
.dash-fav-chip .fav-icon.green { background: #f0fdf4; color: var(--color-primary); }
.dash-fav-chip .fav-icon.orange { background: #fff7ed; color: #f97316; }
.dash-fav-chip .fav-icon.purple { background: #faf5ff; color: #a855f7; }

[data-theme="dark"] .dash-fav-chip .fav-icon.red { background: rgba(248, 113, 113, 0.1); }
[data-theme="dark"] .dash-fav-chip .fav-icon.green { background: rgba(255, 180, 107, 0.1); }
[data-theme="dark"] .dash-fav-chip .fav-icon.orange { background: rgba(249, 115, 22, 0.1); }
[data-theme="dark"] .dash-fav-chip .fav-icon.purple { background: rgba(168, 85, 247, 0.1); }

.dash-fav-chip .fav-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-on-surface);
    line-height: 1.3;
}

.dash-fav-chip .fav-count {
    font-size: 10px;
    color: var(--color-on-surface-variant);
    margin-top: 2px;
}

/* ---- Activity Summary Grid ---- */
.dash-activity-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.dash-activity-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.dash-activity-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-activity-icon.green { background: #f0fdf4; color: #15803d; }
.dash-activity-icon.purple { background: #faf5ff; color: #7c3aed; }
.dash-activity-icon.orange { background: #fff7ed; color: #ea580c; }
.dash-activity-icon.red { background: #fef2f2; color: #dc2626; }

[data-theme="dark"] .dash-activity-icon.green { background: rgba(21, 128, 61, 0.12); }
[data-theme="dark"] .dash-activity-icon.purple { background: rgba(124, 58, 237, 0.12); }
[data-theme="dark"] .dash-activity-icon.orange { background: rgba(234, 88, 12, 0.12); }
[data-theme="dark"] .dash-activity-icon.red { background: rgba(220, 38, 38, 0.12); }

.dash-activity-val {
    font-family: var(--font-family-headline);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

.dash-activity-lbl {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-on-surface-variant);
}

/* ---- Recently Viewed List ---- */
.dash-recent-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.dash-recent-item {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    padding: var(--spacing-sm);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.dash-recent-item:hover {
    border-color: var(--color-outline-variant);
    box-shadow: var(--shadow-sm);
}

.dash-recent-item img {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    object-fit: cover;
}

.dash-recent-item .recent-info {
    flex: 1;
}

.dash-recent-item .recent-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface);
    transition: color var(--transition-fast);
}

.dash-recent-item:hover .recent-name {
    color: var(--color-primary);
}

.dash-recent-item .recent-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
}

.dash-recent-item .recent-rating .star-icon {
    color: #f59e0b;
    font-size: 14px;
    font-variation-settings: 'FILL' 1;
}

.dash-recent-item .recent-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.dash-recent-item .fav-btn {
    background: transparent;
    border: none;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    padding: 0;
    font-size: 18px;
    transition: color var(--transition-fast);
}

.dash-recent-item .fav-btn:hover {
    color: var(--color-error);
}

.dash-recent-item .recent-price {
    font-family: var(--font-family-headline);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
}

.dash-recent-divider {
    height: 1px;
    background: var(--color-outline-variant);
    opacity: 0.3;
}

/* Mobile Recently Viewed Scroll */
.dash-recent-scroll {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    padding-bottom: var(--spacing-md);
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    scrollbar-width: none;
}

.dash-recent-scroll::-webkit-scrollbar { display: none; }

.dash-recent-scroll-card {
    background: var(--color-surface-container-lowest);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-surface-container);
    overflow: hidden;
    min-width: 160px;
    flex-shrink: 0;
}

.dash-recent-scroll-card img {
    width: 100%;
    height: 96px;
    object-fit: cover;
}

.dash-recent-scroll-card .card-body {
    padding: 12px;
}

.dash-recent-scroll-card .card-name {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-on-surface);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-recent-scroll-card .card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin-bottom: 8px;
}

.dash-recent-scroll-card .card-rating .star-icon {
    color: #f59e0b;
    font-size: 14px;
    font-variation-settings: 'FILL' 1;
}

.dash-recent-scroll-card .card-price {
    font-weight: 700;
    color: var(--color-primary);
}

/* ---- Explore CTA Card ---- */
.dash-explore-cta {
    background: var(--color-surface-container);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 192px;
    border: 1px solid var(--color-outline-variant);
}

.dash-explore-cta .cta-content {
    position: relative;
    z-index: 1;
    width: 66%;
}

.dash-explore-cta h3 {
    font-family: var(--font-family-headline);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-on-surface);
    margin: 0 0 var(--spacing-xs) 0;
}

.dash-explore-cta p {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
}

.dash-explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.dash-explore-btn:hover {
    opacity: 0.9;
}

.dash-explore-btn .material-symbols-outlined {
    font-size: 16px;
}

/* ---- Mobile Account/Settings List ---- */
.dash-settings-list {
    background: var(--color-surface-container-lowest);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-surface-container);
    overflow: hidden;
}

.dash-settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    text-decoration: none;
    color: var(--color-on-surface);
    transition: background var(--transition-fast);
}

.dash-settings-item:not(:last-child) {
    border-bottom: 1px solid var(--color-surface-container);
}

.dash-settings-item:hover {
    background: var(--color-surface-container-low);
}

.dash-settings-item .item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-settings-item .item-icon {
    color: var(--color-primary);
    font-size: 1.125rem;
    width: 24px;
    text-align: center;
}

.dash-settings-item .item-label {
    font-weight: 500;
}

.dash-settings-item .item-arrow {
    color: var(--color-outline-variant);
    font-size: 0.875rem;
}

/* ---- Mobile Bottom Nav (Dashboard Specific) ---- */
.dash-mobile-bottomnav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-surface-container-lowest);
    border-top: 1px solid var(--color-surface-container);
    box-shadow: 0 -4px 20px -2px rgba(0, 0, 0, 0.05);
    padding: 8px 24px;
    border-radius: 24px 24px 0 0;
    z-index: 50;
}

[data-theme="dark"] .dash-mobile-bottomnav {
    box-shadow: 0 -4px 20px -2px rgba(0, 0, 0, 0.3);
}

.dash-mobile-bottomnav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dash-bnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    color: var(--color-outline);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.dash-bnav-item:hover,
.dash-bnav-item.active {
    color: var(--color-primary);
}

.dash-bnav-item .bnav-icon {
    font-size: 1.25rem;
    margin-bottom: 4px;
}

.dash-bnav-item .bnav-label {
    font-size: 10px;
    font-weight: 500;
}

.dash-bnav-item.active .bnav-label {
    font-weight: 700;
}

.dash-bnav-fab {
    position: relative;
    top: -20px;
}

.dash-bnav-fab button {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    border: 4px solid var(--color-surface-container-lowest);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.dash-bnav-fab button:hover {
    opacity: 0.9;
}

/* ---- Dashboard Footer ---- */
.dash-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-outline-variant);
    background: var(--color-surface-container-low);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.dash-footer p {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin: 0;
}

.dash-footer-links {
    display: flex;
    gap: var(--spacing-md);
    font-size: 0.6875rem;
    font-weight: 600;
}

.dash-footer-links a {
    color: var(--color-on-surface-variant);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.dash-footer-links a:hover {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---- Customer Dashboard Subpages Unified CSS ---- */
.dash-subnav-tabs {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: var(--spacing-md);
    scrollbar-width: none;
}
.dash-subnav-tabs::-webkit-scrollbar { display: none; }

.dash-subtab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.dash-subtab:hover {
    background: var(--color-surface-container-high);
    color: var(--color-on-surface);
}

.dash-subtab.active {
    background: var(--color-primary-fixed);
    color: var(--color-on-primary-fixed);
    border-color: var(--color-primary);
    font-weight: 700;
}

.dash-subtab .badge-count {
    background: var(--color-surface-container);
    color: var(--color-on-surface);
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.dash-subtab.active .badge-count {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

/* Subpage Form Grid */
.dash-form-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--spacing-md);
}
@media (min-width: 640px) {
    .dash-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dash-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dash-form-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

.dash-form-input,
.dash-form-select,
.dash-form-textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-family: var(--font-family-body);
    color: var(--color-on-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.dash-form-input:focus,
.dash-form-select:focus,
.dash-form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(212, 63, 10, 0.15);
}

.dash-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 600;
    font-size: 0.875rem;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}
.dash-btn-primary:hover { opacity: 0.92; }

.dash-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: var(--color-on-surface);
    font-weight: 600;
    font-size: 0.875rem;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-outline-variant);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast);
}
.dash-btn-outline:hover { background: var(--color-surface-container); }

.dash-btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #25d366;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}
.dash-btn-whatsapp:hover { opacity: 0.9; }

.dash-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
    font-weight: 600;
    font-size: 0.875rem;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(220, 38, 38, 0.2);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast);
}
.dash-btn-danger:hover { background: rgba(220, 38, 38, 0.2); }

/* Table System */
.dash-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-outline-variant);
}

.dash-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.875rem;
}

.dash-table th {
    background: var(--color-surface-container-low);
    color: var(--color-on-surface);
    font-weight: 700;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-outline-variant);
}

.dash-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-outline-variant);
    color: var(--color-on-surface-variant);
    vertical-align: middle;
}

.dash-table tr:last-child td {
    border-bottom: none;
}

/* Empty State Card */
.dash-empty-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.dash-empty-icon {
    font-size: 48px;
    color: var(--color-on-surface-variant);
    opacity: 0.6;
}

.dash-empty-card h4 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
}

.dash-empty-card p {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    margin: 0;
    max-width: 400px;
}

/* ---- Desktop-only / Mobile-only Utility ---- */
.dash-desktop-only { display: none; }
.dash-mobile-only { display: block; }

/* ============================================================
   RESPONSIVE: DESKTOP (md+)
   ============================================================ */
@media (min-width: 769px) {
    .dash-sidebar { display: flex; }
    .dash-topbar { display: flex; }
    .dash-mobile-topbar { display: none; }
    .dash-mobile-bottomnav { display: none; }
    .dash-desktop-only { display: block; }
    .dash-mobile-only { display: none !important; }

    .dash-content {
        padding: var(--spacing-lg);
    }

    .dash-avatar-wrap img,
    .dash-avatar-wrap .avatar-initials-lg {
        width: 128px;
        height: 128px;
        font-size: 2.5rem;
    }

    .dash-profile-name-row h2 {
        font-size: 2rem;
    }

    .dash-profile-stats-inline {
        display: none !important;
    }
}

/* ============================================================
   RESPONSIVE: MOBILE (below 769px)
   ============================================================ */
@media (max-width: 768px) {
    .dash-shell {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .dash-right {
        height: auto;
        overflow: visible;
    }

    .dash-content {
        overflow: visible;
        padding: var(--spacing-md);
        padding-bottom: 96px;
    }

    .dash-stats-grid { display: none; }

    .dash-profile-stats-inline { display: grid; }

    .dash-profile-details {
        grid-template-columns: 1fr;
    }

    .dash-profile-top {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .dash-profile-deco { display: none; }

    .dash-grid {
        grid-template-columns: 1fr;
    }

    .dash-grid-right {
        display: none;
    }

    .dash-mobile-bottomnav {
        display: block;
    }

    .dash-enquiry-card {
        flex-direction: column;
    }

    .dash-enquiry-thumb {
        width: 100%;
        height: 120px;
    }

    .dash-activity-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dash-edit-profile-btn {
        font-size: 0.75rem;
        padding: 6px 12px;
        border-radius: var(--radius-full);
    }
}

@media (max-width: 480px) {
    .dash-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dashboard-container {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-xxl);
    min-height: calc(100vh - 140px);
}

/* Desktop Sidebar */
.dashboard-sidebar {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    height: fit-content;
    position: sticky;
    top: 90px;
}

.sidebar-user-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-outline-variant);
}

.sidebar-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-primary-container);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-user-avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-on-primary-container);
}

.sidebar-user-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
    line-height: 1.2;
}

.sidebar-user-role {
    font-size: 0.75rem;
    color: var(--color-muted);
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-muted);
    margin: var(--spacing-sm) 0 4px var(--spacing-sm);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    text-decoration: none;
    transition: var(--transition-base);
}

.sidebar-link .icon {
    font-size: 20px;
    color: var(--color-muted);
    transition: var(--transition-base);
}

.sidebar-link:hover, .sidebar-link.active {
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
}

.sidebar-link:hover .icon, .sidebar-link.active .icon {
    color: var(--color-primary);
}

.sidebar-link .badge {
    margin-left: auto;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
}

.logout-link {
    color: var(--color-secondary);
}

.logout-link .icon {
    color: var(--color-secondary);
}

/* Dashboard Main Content */
.dashboard-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.dashboard-header-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.dashboard-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-on-surface);
    margin: 0;
}

.dashboard-subtitle {
    font-size: 0.875rem;
    color: var(--color-muted);
    margin: 4px 0 0 0;
}

/* Metrics Cards */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.metric-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    text-decoration: none;
    color: inherit;
    transition: var(--transition-base);
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.metric-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-icon.primary { background: rgba(212, 63, 10, 0.1); color: var(--color-primary); }
.metric-icon.secondary { background: rgba(187, 0, 39, 0.1); color: var(--color-secondary); }
.metric-icon.tertiary { background: rgba(2, 132, 199, 0.1); color: #0284c7; }
.metric-icon.warning { background: rgba(217, 119, 6, 0.1); color: #d97706; }
.metric-icon.success { background: rgba(16, 185, 129, 0.1); color: #10b981; }

.metric-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-on-surface);
    line-height: 1.1;
}

.metric-label {
    font-size: 0.8125rem;
    color: var(--color-muted);
    font-weight: 500;
}

/* Completion Card */
.dashboard-completion-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    padding: var(--spacing-lg);
}

.completion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.completion-score {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-primary);
}

.progress-bar-bg {
    width: 100%;
    height: 8px;
    background: var(--color-surface-container);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-tertiary));
    border-radius: 4px;
    transition: width 0.4s ease;
}

.completion-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
}

/* Grid Layouts */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--spacing-lg);
}

.dashboard-col { grid-column: span 6; }
.col-small { grid-column: span 4; }
.col-large { grid-column: span 8; }
.col-half { grid-column: span 6; }

/* Tabs Component */
.dashboard-tabs {
    display: flex;
    gap: var(--spacing-sm);
    border-bottom: 1px solid var(--color-outline-variant);
    margin-bottom: var(--spacing-md);
    overflow-x: auto;
}

.tab-btn {
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-base);
}

.tab-btn:hover, .tab-btn.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tab-btn.danger.active {
    color: var(--color-secondary);
    border-bottom-color: var(--color-secondary);
}

/* Data Table */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th, .data-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--color-outline-variant);
}

.data-table th {
    font-weight: 700;
    color: var(--color-muted);
    background: var(--color-surface-container);
}

/* WhatsApp Brand Button */
.btn-whatsapp {
    background: #25D366;
    color: #ffffff !important;
    border: 1px solid #20ba5a;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-base);
}

.btn-whatsapp:hover {
    background: #1ebc57;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.35);
}

/* Subnav Filter Tabs */
.dashboard-subnav-tabs {
    display: flex;
    gap: var(--spacing-sm);
    border-bottom: 1px solid var(--color-outline-variant);
    overflow-x: auto;
    padding-bottom: 4px;
}

.subnav-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-muted);
    text-decoration: none;
    transition: var(--transition-base);
}

.subnav-tab:hover {
    background: var(--color-surface-container);
    color: var(--color-on-surface);
}

.subnav-tab.active {
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
}

.subnav-count {
    background: rgba(0, 0, 0, 0.08);
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 10px;
}

.dark .subnav-count {
    background: rgba(255, 255, 255, 0.12);
}

/* Inquiries Components */
.inquiry-cards-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.inquiry-card {
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: var(--spacing-lg);
    transition: var(--transition-base);
}

.inquiry-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.inquiry-title-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.inquiry-icon-box {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inquiry-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
}

.inquiry-date {
    font-size: 0.75rem;
    color: var(--color-muted);
}

.inquiry-body-text {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    line-height: 1.5;
}

.inquiry-listing-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--color-surface-container);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary);
    font-size: 0.875rem;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.inquiry-listing-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.inquiry-listing-label {
    color: var(--color-muted);
}

.inquiry-listing-link {
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.inquiry-listing-link:hover {
    text-decoration: underline;
}

.inquiry-listing-price {
    font-weight: 700;
    color: var(--color-secondary);
}

.inquiry-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-outline-variant);
}

.inquiry-action-buttons {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Manage Listings & Favorites Grid */
.dashboard-listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--spacing-lg);
}

.listing-manage-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition-base);
}

.listing-manage-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.manage-card-thumb {
    position: relative;
    height: 160px;
    background: var(--color-surface-container);
    overflow: hidden;
}

.manage-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn-fav-toggle, .btn-card-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    color: var(--color-muted);
    transition: var(--transition-base);
}

.dark .btn-fav-toggle, .dark .btn-card-remove {
    background: rgba(30, 30, 30, 0.9);
    color: var(--color-on-surface);
}

.btn-fav-toggle.active {
    color: var(--color-secondary);
}

.btn-fav-toggle.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

.manage-card-body {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.manage-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: 6px;
}

.category-pill {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-container);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.price-tag {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--color-secondary);
}

.manage-card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px 0;
}

.manage-card-title a {
    color: var(--color-on-surface);
    text-decoration: none;
}

.manage-card-title a:hover {
    color: var(--color-primary);
}

.manage-card-address {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--color-muted);
    margin: 0;
}

.card-direct-actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.viewed-time-stamp {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    color: var(--color-muted);
}

/* Reviews Styling */
.reviews-list-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.review-item-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.review-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.review-item-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.review-listing-thumb {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    object-fit: cover;
    background: var(--color-surface-container);
}

.review-listing-title {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.review-listing-title a {
    color: var(--color-on-surface);
    text-decoration: none;
}

.review-listing-title a:hover {
    color: var(--color-primary);
}

.review-comment-text {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    font-style: italic;
    line-height: 1.5;
}

.review-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    border-top: 1px solid var(--color-outline-variant);
    padding-top: var(--spacing-md);
}

/* Notifications List */
.notifications-list-card {
    overflow: hidden;
}

.notification-item {
    transition: var(--transition-base);
}

.notification-item.unread {
    background: rgba(212, 63, 10, 0.04);
}

.dark .notification-item.unread {
    background: rgba(212, 63, 10, 0.15);
}

.notif-icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-surface-container);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Mobile Dashboard Bar and Drawer */
.dashboard-mobile-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-outline-variant);
    position: sticky;
    top: 60px;
    z-index: 40;
}

.dashboard-drawer-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    backdrop-filter: blur(2px);
    transition: opacity 0.3s ease;
}

.dashboard-drawer-backdrop.open {
    display: block;
}

/* Responsive Dashboard Queries */
@media (max-width: 991px) {
    .dashboard-mobile-bar {
        display: flex;
    }

    .dashboard-container {
        grid-template-columns: 1fr;
        padding-top: var(--spacing-md);
    }
    
    .dashboard-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 999;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        border-radius: 0;
        box-shadow: var(--shadow-lg);
    }

    .dashboard-sidebar.open {
        transform: translateX(0);
    }

    .dashboard-col {
        grid-column: span 12;
    }
}

@media (max-width: 640px) {
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-listings-grid {
        grid-template-columns: 1fr;
    }

    .inquiry-header-row, .review-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   Mobile Navigation Drawer System (v0.6.3)
   ============================================================ */
.dash-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 998;
}

.dash-mobile-overlay.open {
    opacity: 1;
    visibility: visible;
}

.dash-mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 290px;
    max-width: 85vw;
    background: var(--color-surface);
    box-shadow: var(--shadow-xl);
    z-index: 999;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.dash-mobile-drawer.open {
    transform: translateX(0);
}

.dash-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--color-outline-variant);
}

.dash-drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.dash-drawer-brand .dash-brand-logo {
    height: 32px;
    width: auto;
}

.dash-drawer-brand .dash-drawer-title {
    font-family: var(--font-family-headline);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-primary);
}

.dash-drawer-close {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--color-surface-container-low);
    color: var(--color-on-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s ease;
}

.dash-drawer-close:hover {
    background: var(--color-surface-container);
}

.dash-drawer-user-card {
    margin: 12px 16px 4px 16px;
    padding: 12px;
    background: var(--color-surface-container-low);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-drawer-user-card .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.dash-drawer-user-card .user-info {
    overflow: hidden;
}

.dash-drawer-user-card .user-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-drawer-nav {
    padding: 12px 16px 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Mobile Responsive Adjustments for Provider Pages */
@media (max-width: 768px) {
    .dash-form-row {
        flex-direction: column !important;
        gap: var(--spacing-md) !important;
    }

    .dash-form-group {
        width: 100% !important;
    }

    .dash-section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .dash-section-header .dash-btn-primary,
    .dash-section-header .dash-btn-outline {
        width: 100% !important;
        justify-content: center !important;
    }

    .dash-subnav-tabs {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        margin-bottom: var(--spacing-md) !important;
    }

    .dash-subtab {
        flex-shrink: 0;
    }

    .dash-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .dash-profile-top {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .dash-profile-main {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .dash-profile-details {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .dash-profile-stats-inline {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .dash-btn-primary, .dash-btn-outline {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .dash-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-lg);
    }
}

/* ============================================================
   LISTING DETAIL ENGINE STYLES (v0.7.0)
   Category-Specific Dynamic Layout System
   ============================================================ */

.ld-container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}

/* Breadcrumb */
.ld-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.ld-breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.ld-breadcrumb a:hover {
    text-decoration: underline;
}

.ld-breadcrumb .material-symbols-outlined {
    font-size: 16px;
    color: var(--color-outline);
}

.ld-breadcrumb-current {
    color: var(--color-on-surface);
    font-weight: 600;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Main Layout Grid */
.ld-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 16px;
}

@media (min-width: 1024px) {
    .ld-grid {
        grid-template-columns: 1fr 340px;
        align-items: start;
    }
}

.ld-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* Gallery Component */
.ld-gallery {
    width: 100%;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--color-surface-container-low);
    border: 1px solid var(--color-outline-variant);
    position: relative;
}

.ld-gallery-main {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    background: #111;
}

@media (min-width: 640px) {
    .ld-gallery-main { height: 380px; }
}

@media (min-width: 1024px) {
    .ld-gallery-main { height: 440px; }
}

.ld-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}

.ld-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background 0.2s;
}

.ld-gallery-nav:hover {
    background: rgba(0, 0, 0, 0.85);
}

.ld-gallery-prev { left: 12px; }
.ld-gallery-next { right: 12px; }

.ld-gallery-counter {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 5;
}

.ld-gallery-fullscreen-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.ld-gallery-thumbs {
    display: flex;
    gap: 8px;
    padding: 10px;
    overflow-x: auto;
    background: var(--color-surface);
    scrollbar-width: thin;
}

.ld-gallery-thumb {
    width: 70px;
    height: 52px;
    object-fit: cover;
    border-radius: var(--radius-md);
    cursor: pointer;
    opacity: 0.6;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ld-gallery-thumb:hover,
.ld-gallery-thumb.active {
    opacity: 1;
    border-color: var(--color-primary);
}

/* Lightbox */
.ld-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ld-lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
}

.ld-lightbox-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    position: relative;
    z-index: 10;
    border-radius: var(--radius-md);
}

.ld-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.ld-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.ld-lightbox-prev { left: 20px; }
.ld-lightbox-next { right: 20px; }

.ld-lightbox-counter {
    position: absolute;
    bottom: 20px;
    color: #fff;
    font-weight: 600;
    z-index: 20;
}

/* Title Bar */
.ld-title-bar {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 16px;
    border: 1px solid var(--color-outline-variant);
}

.ld-title-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.ld-category-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ld-category-label .material-symbols-outlined { font-size: 16px; }

.ld-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-full);
}

.ld-badge .material-symbols-outlined { font-size: 14px; }

.ld-badge-featured { background: #fff3cd; color: #856404; }
.ld-badge-verified,
.ld-badge-verified-inline { background: #d4edda; color: #155724; }
.ld-badge-trending { background: #cce5ff; color: #004085; }
.ld-badge-custom { background: var(--color-surface-container-high); color: var(--color-on-surface); }

.ld-title {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-on-surface);
    margin: 0 0 10px 0;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .ld-title { font-size: 1.625rem; }
}

.ld-title-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
    flex-wrap: wrap;
}

.ld-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ld-meta-item .material-symbols-outlined { font-size: 16px; }
.ld-meta-rating .material-symbols-outlined { color: #ffb400; }

.ld-meta-divider { color: var(--color-outline); }

/* Price Banner */
.ld-price-banner {
    background: linear-gradient(135deg, #d43f0a 0%, #bf3808 100%);
    color: #ffffff !important;
    border-radius: var(--radius-xl);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 14px rgba(212, 63, 10, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.ld-price-main {
    display: flex;
    flex-direction: column;
}

.ld-price-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.9) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.ld-price-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff !important;
    letter-spacing: -0.5px;
}

@media (min-width: 768px) {
    .ld-price-value { font-size: 1.875rem; }
}

.ld-price-badge {
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
}

/* Common Section Container */
.ld-section {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 20px;
    border: 1px solid var(--color-outline-variant);
}

.ld-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-outline-variant);
}

.ld-section-title .material-symbols-outlined {
    color: var(--color-primary);
    font-size: 22px;
}

/* Key Details Grid */
.ld-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 640px) {
    .ld-details-grid { grid-template-columns: repeat(2, 1fr); }
}

.ld-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
}

.ld-detail-icon {
    font-size: 22px;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.ld-detail-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ld-detail-label {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    font-weight: 500;
}

.ld-detail-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-on-surface);
    word-break: break-word;
}

.ld-detail-badge {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* Services Offered */
.ld-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 640px) {
    .ld-services-grid { grid-template-columns: repeat(2, 1fr); }
}

.ld-service-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

.ld-service-check {
    font-size: 20px;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Pricing Table */
.ld-pricing-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .ld-pricing-cards { grid-template-columns: repeat(2, 1fr); }
}

.ld-pricing-card {
    padding: 20px;
    border-radius: var(--radius-xl);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    position: relative;
    display: flex;
    flex-direction: column;
}

.ld-pricing-featured {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(212, 63, 10, 0.12);
}

.ld-pricing-popular {
    position: absolute;
    top: -12px;
    right: 16px;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
}

.ld-pricing-name {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 6px 0;
}

.ld-pricing-price {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.ld-pricing-desc {
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
    margin-bottom: 14px;
}

.ld-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ld-pricing-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--color-on-surface);
}

.ld-pricing-features .material-symbols-outlined {
    font-size: 16px;
    color: var(--color-primary);
}

/* Portfolio Gallery */
.ld-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 640px) {
    .ld-portfolio-grid { grid-template-columns: repeat(3, 1fr); }
}

.ld-portfolio-item {
    position: relative;
    height: 140px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    background: var(--color-surface-container-low);
}

.ld-portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ld-portfolio-item:hover img {
    transform: scale(1.05);
}

.ld-portfolio-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Amenities Grid */
.ld-amenity-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ld-amenity-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

.ld-amenity-pill .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-primary);
}

/* Floor Plan Grid */
.ld-floor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 640px) {
    .ld-floor-grid { grid-template-columns: repeat(3, 1fr); }
}

.ld-floor-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    text-align: center;
}

.ld-floor-item .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.ld-floor-value {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-on-surface);
}

.ld-floor-label {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    font-weight: 500;
}

/* Job Requirements */
.ld-req-block {
    margin-bottom: 16px;
}

.ld-req-block:last-child { margin-bottom: 0; }

.ld-req-subtitle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0 0 8px 0;
}

.ld-req-subtitle .material-symbols-outlined { font-size: 18px; color: var(--color-primary); }

.ld-req-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ld-req-tag {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
    font-size: 0.75rem;
    font-weight: 600;
}

.ld-req-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ld-req-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--color-on-surface);
}

.ld-req-list .material-symbols-outlined {
    font-size: 16px;
    color: var(--color-primary);
    margin-top: 2px;
}

/* Matrimony Personal Details */
.ld-personal-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 640px) {
    .ld-personal-cards { grid-template-columns: repeat(2, 1fr); }
}

.ld-personal-card {
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
}

.ld-personal-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-outline-variant);
}

.ld-personal-card-title .material-symbols-outlined { font-size: 18px; color: var(--color-primary); }

.ld-personal-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ld-personal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
}

.ld-personal-label { color: var(--color-on-surface-variant); font-weight: 500; }
.ld-personal-value { color: var(--color-on-surface); font-weight: 700; text-align: right; }

/* Availability */
.ld-avail-badge-24x7 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: #d4edda;
    color: #155724;
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: 14px;
}

.ld-avail-schedule {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ld-avail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    background: var(--color-surface-container-lowest);
    font-size: 0.8125rem;
}

.ld-avail-day { font-weight: 600; color: var(--color-on-surface); }
.ld-avail-hours { color: var(--color-on-surface-variant); }

.ld-avail-days {
    display: flex;
    gap: 6px;
    margin-top: 12px;
}

.ld-avail-day-pill {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--color-surface-container-low);
    color: var(--color-on-surface-variant);
}

.ld-avail-day-pill.active {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

/* Vehicle Info */
.ld-vehicle-card {
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
}

.ld-vehicle-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.ld-vehicle-spec {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ld-vehicle-spec .material-symbols-outlined { font-size: 24px; color: var(--color-primary); }

.ld-spec-label { display: block; font-size: 0.75rem; color: var(--color-on-surface-variant); }
.ld-spec-value { font-size: 0.875rem; font-weight: 700; color: var(--color-on-surface); }

.ld-vehicle-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-outline-variant);
}

/* Description Component */
.ld-description-content {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-on-surface);
}

.ld-description-truncated {
    max-height: 120px;
    overflow: hidden;
    position: relative;
}

.ld-description-truncated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(transparent, var(--color-surface));
}

.ld-read-more-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    background: none;
    border: none;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0;
}

/* Reviews Component */
.ld-rating-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    margin-bottom: 16px;
}

.ld-rating-big {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--color-on-surface);
    line-height: 1;
}

.ld-rating-stars {
    display: flex;
    flex-direction: column;
}

.ld-star { color: var(--color-outline); font-size: 18px; }
.ld-star.filled { color: #ffb400; }

.ld-rating-count {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin-top: 2px;
}

.ld-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ld-review-card {
    padding: 14px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
}

.ld-review-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.ld-review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.ld-review-meta {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ld-review-name { font-weight: 700; font-size: 0.875rem; color: var(--color-on-surface); }
.ld-review-date { font-size: 0.75rem; color: var(--color-on-surface-variant); }

.ld-review-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--color-on-surface);
}

.ld-review-rating .material-symbols-outlined { font-size: 16px; color: #ffb400; }
.ld-review-text { font-size: 0.875rem; color: var(--color-on-surface); margin: 0; line-height: 1.5; }

/* Related Scroll */
.ld-related-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
}

.ld-related-scroll > * {
    flex: 0 0 240px;
    max-width: 240px;
}

@media (min-width: 640px) {
    .ld-related-scroll > * {
        flex: 0 0 260px;
        max-width: 260px;
    }
}

/* Provider Sidebar */
.ld-sidebar {
    position: relative;
}

@media (min-width: 1024px) {
    .ld-sidebar {
        position: sticky;
        top: 80px;
    }
}

.ld-sidebar-inner {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 20px;
    border: 1px solid var(--color-outline-variant);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ld-sidebar-divider {
    height: 1px;
    background: var(--color-outline-variant);
}

.ld-provider-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ld-provider-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ld-provider-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.ld-provider-avatar-initial {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.25rem;
}

.ld-provider-info {
    display: flex;
    flex-direction: column;
}

.ld-provider-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
}

.ld-provider-since {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    margin-top: 2px;
}

.ld-provider-about {
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
    margin: 0;
    line-height: 1.4;
}

/* Sidebar CTAs */
.ld-cta-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ld-cta-btn {
    width: 100%;
    min-height: 46px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.ld-cta-btn:active {
    transform: scale(0.98);
}

.ld-cta-primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.ld-cta-whatsapp {
    background: #25d366;
    color: #fff;
}

.ld-cta-tertiary {
    background: var(--color-surface-container-high);
    color: var(--color-on-surface);
}

.ld-action-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.ld-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--color-on-surface-variant);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 6px;
}

.ld-action-btn .material-symbols-outlined { font-size: 20px; }
.ld-action-report { color: var(--color-error, #ba1a1a); }

/* Mobile Sticky Bottom Contact Bar */
.ld-contact-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-outline-variant);
    padding: 10px 16px;
    display: flex;
    gap: 10px;
    z-index: 999;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

@media (min-width: 1024px) {
    .ld-contact-bar { display: none; }
}

.ld-contact-bar-btn {
    flex: 1;
    min-height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.ld-contact-call { background: var(--color-primary); color: var(--color-on-primary); }
.ld-contact-whatsapp { background: #25d366; color: #fff; }
.ld-contact-enquiry { background: var(--color-primary); color: var(--color-on-primary); }

/* Empty state */
.ld-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 16px;
    text-align: center;
    color: var(--color-on-surface-variant);
}

.ld-empty-state .material-symbols-outlined {
    font-size: 40px;
    margin-bottom: 8px;
    opacity: 0.6;
}

.ld-empty-state p { margin: 0; font-size: 0.875rem; }

/* Custom Modal & Toast Design System Components */
.myg-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
    animation: mygFadeIn 0.2s ease-out;
}

.myg-modal-card {
    background: var(--color-surface);
    color: var(--color-on-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl, 16px);
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    animation: mygSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.myg-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-outline-variant);
}

.myg-modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.0625rem;
    font-weight: 700;
}

.myg-modal-close {
    background: transparent;
    border: none;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 50%;
}
.myg-modal-close:hover {
    background: var(--color-surface-container-high);
}

.myg-modal-body {
    padding: 20px;
}

.myg-radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-surface-container-low);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
}
.myg-radio-label:hover {
    border-color: var(--color-primary);
}
.myg-radio-label input[type="radio"] {
    accent-color: var(--color-primary);
    width: 16px;
    height: 16px;
}

.myg-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 20px;
    background: var(--color-surface-container-lowest);
    border-top: 1px solid var(--color-outline-variant);
}

.btn-modal-cancel {
    padding: 8px 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-outline);
    background: transparent;
    color: var(--color-on-surface);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
}
.btn-modal-submit {
    padding: 8px 20px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
}
.btn-modal-submit:hover {
    opacity: 0.9;
}

/* Custom Toast Notification */
.myg-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #1e293b;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    z-index: 11000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.myg-toast.active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.myg-toast-success .toast-icon { color: #34d399; }
.myg-toast-error .toast-icon { color: #f87171; }
.myg-toast-warning .toast-icon { color: #fbbf24; }
.myg-toast-info .toast-icon { color: #60a5fa; }

@keyframes mygFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mygSlideUp { from { transform: translateY(20px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

/* ============================================================
   Real-Time Enquiry & Messaging Engine Styles (v0.8.0)
   Strictly follows MASTER.md (Design Tokens, Dark/Light Mode)
   ============================================================ */
.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 9999 !important; /* Extremely high z-index to overlap trust badges */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    display: flex;
}

.app-wrapper {
    background-color: var(--color-surface);
}

.msg-portal-container {
    display: grid;
    grid-template-columns: 340px 1fr;
    height: calc(100vh - 190px);
    max-height: calc(100vh - 190px);
    min-height: 480px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-outline-variant);
    overflow: hidden;
    margin-bottom: 0;
}
.msg-sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-outline-variant);
    background: var(--color-surface-variant);
    overflow: hidden;
}
.msg-sidebar-header {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-outline-variant);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.msg-sidebar-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.msg-sidebar-title h2 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-on-surface);
}
.msg-total-badge {
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
}
.msg-filter-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 2px;
}
.msg-tab {
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    text-decoration: none;
    white-space: nowrap;
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    transition: all 0.2s ease;
}
.msg-tab.active, .msg-tab:hover {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}
.msg-sidebar-list {
    flex: 1;
    overflow-y: auto;
}
.msg-conv-item {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-outline-variant);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
    position: relative;
}
.msg-conv-item:hover, .msg-conv-item.active {
    background: var(--color-surface);
}
.msg-conv-item.unread {
    background: rgba(212, 63, 10, 0.05);
}
.msg-avatar-wrapper {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}
.msg-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.msg-avatar-initials {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--color-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
}
.msg-online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    border: 2px solid var(--color-surface);
}
.msg-conv-info {
    flex: 1;
    min-width: 0;
}
.msg-conv-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2px;
}
.msg-partner-name {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-time {
    font-size: 0.6875rem;
    color: var(--color-on-surface-variant);
}
.msg-listing-tag {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 4px;
}
.msg-listing-tag span {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-conv-snippet {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.msg-conv-snippet p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-unread-badge {
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 6px;
}

/* Chat Window */
.msg-chat-window {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    position: relative;
    height: 100%;
}
.msg-chat-window.provider-chat-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
.msg-chat-main-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}
.msg-chat-header {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-outline-variant);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-surface-variant);
}
.msg-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.msg-back-btn {
    display: none;
    color: var(--color-on-surface);
    text-decoration: none;
}
.msg-header-details h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-on-surface);
}
.msg-header-sub {
    display: flex;
    align-items: center;
    gap: 8px;
}
.msg-listing-link {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.75rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}
.msg-status-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    background: rgba(0,0,0,0.06);
}
.msg-status-badge.status-new { background: #dbeafe; color: #1e40af; }
.msg-status-badge.status-active { background: #dcfce7; color: #166534; }
.msg-status-badge.status-completed { background: #fef9c3; color: #854d0e; }
.msg-status-badge.status-closed { background: #f3f4f6; color: #4b5563; }

.msg-header-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}
.msg-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    z-index: 50;
    min-width: 200px;
    padding: 6px 0;
}
.msg-dropdown-menu.active { display: block; }
.msg-dropdown-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--color-on-surface);
    font-size: 0.875rem;
    cursor: pointer;
    text-align: left;
}
.msg-dropdown-menu button:hover {
    background: var(--color-surface-variant);
}

/* Chat Body */
.msg-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
    background: rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
}
.msg-thread-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.msg-date-divider {
    text-align: center;
    margin: var(--spacing-md) 0;
    position: relative;
}
.msg-date-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-outline-variant);
    z-index: 1;
}
.msg-date-divider span {
    position: relative;
    z-index: 2;
    background: var(--color-surface-variant);
    color: var(--color-on-surface-variant);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
}

/* System Message Card */
.msg-bubble-system {
    display: flex;
    justify-content: center;
    margin: var(--spacing-sm) 0;
}
.msg-system-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    max-width: 480px;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.msg-system-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary);
    font-size: 0.9375rem;
    border-bottom: 1px dashed var(--color-outline-variant);
    padding-bottom: 6px;
    margin-bottom: 8px;
}
.msg-field-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    padding: 3px 0;
}
.msg-field-row .field-label {
    font-weight: 600;
    color: var(--color-on-surface-variant);
}
.msg-field-row .field-val {
    color: var(--color-on-surface);
    font-weight: 500;
}

/* Chat Bubbles */
.msg-bubble-row {
    display: flex;
    margin-bottom: 4px;
}
.msg-bubble-row.mine { justify-content: flex-end; }
.msg-bubble-row.partner { justify-content: flex-start; }

.msg-bubble {
    max-width: 70%;
    padding: 8px 12px;
    border-radius: 16px;
    font-size: 0.875rem;
    line-height: 1.4;
    position: relative;
    word-break: break-word;
}
.msg-bubble-row.mine .msg-bubble {
    background: #d43f0a;
    color: #ffffff;
    border-bottom-right-radius: 2px;
}
.msg-bubble-row.partner .msg-bubble {
    background: var(--color-surface-variant);
    color: var(--color-on-surface);
    border-bottom-left-radius: 2px;
}
.msg-text { margin: 0; }
.msg-bubble-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.6875rem;
    opacity: 0.8;
}
.msg-bubble-row.mine .read-icon { font-size: 14px; }
.msg-bubble-row.mine .read-icon.read { color: #60a5fa; }

/* Sticky Message Input Footer */
.msg-chat-footer {
    position: relative;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface);
    border-top: 1px solid var(--color-outline-variant);
}
.msg-input-form {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.msg-input-field {
    flex: 1;
    background: var(--color-surface-variant);
    border: 1px solid var(--color-outline-variant);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.875rem;
    color: var(--color-on-surface);
    outline: none;
}
.msg-input-field:focus {
    border-color: var(--color-primary);
}
.msg-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.msg-send-btn:active { transform: scale(0.95); }

/* Attachment Sheet */
.msg-attachment-sheet {
    position: absolute;
    bottom: 100%;
    left: 16px;
    margin-bottom: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    z-index: 40;
}
.sheet-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    color: var(--color-on-surface);
    cursor: pointer;
    border: none;
    background: transparent;
}
.sheet-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Provider Details Side Panel */
.msg-provider-details-panel {
    border-left: 1px solid var(--color-outline-variant);
    background: var(--color-surface-variant);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    overflow-y: auto;
    height: 100%;
    min-height: 0;
}
.panel-header h4 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-on-surface);
}
.panel-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.panel-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-on-surface-variant);
    text-transform: uppercase;
}
.panel-contact-box {
    background: var(--color-surface);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-outline-variant);
}
.panel-contact-box .contact-name { font-weight: 700; font-size: 0.875rem; }
.panel-contact-box .contact-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary);
    font-size: 0.8125rem;
    text-decoration: none;
    margin-top: 4px;
}

/* Dashboard Mobile Bottom Navigation */
.dash-mobile-bottomnav {
    display: none;
}

/* Mobile UX Media Queries */
@media (max-width: 768px) {
    .dash-mobile-bottomnav {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        background: var(--color-surface, #ffffff) !important;
        border-top: 1px solid var(--color-outline-variant, #e5e7eb) !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
        z-index: 1000 !important;
    }

    [data-theme="dark"] .dash-mobile-bottomnav {
        background: rgba(28, 27, 27, 0.98) !important;
        border-top-color: rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35) !important;
    }

    .dash-mobile-bottomnav-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        height: 62px !important;
        position: relative !important;
        padding: 0 4px !important;
        max-width: 100% !important;
    }

    .dash-bnav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        color: var(--color-on-surface-variant, #6b7280) !important;
        text-decoration: none !important;
        font-size: 0.65rem !important;
        font-weight: 500 !important;
        flex: 1 1 0px !important;
        min-width: 0 !important;
        padding: 4px 2px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
    }

    .dash-bnav-item.active,
    .dash-bnav-item:hover {
        color: var(--color-primary, #d43f0a) !important;
    }

    [data-theme="dark"] .dash-bnav-item.active,
    [data-theme="dark"] .dash-bnav-item:hover {
        color: var(--color-primary, #83d7b4) !important;
    }

    .dash-bnav-item .bnav-icon {
        font-size: 1.15rem !important;
        line-height: 1 !important;
    }

    .dash-bnav-item .bnav-label {
        font-size: 0.625rem !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .dash-bnav-item.active .bnav-label {
        font-weight: 700 !important;
    }

    .dash-bnav-fab {
        flex: 1 1 0px !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        top: -14px !important;
        flex-shrink: 0 !important;
    }

    .dash-bnav-fab button {
        width: 46px !important;
        height: 46px !important;
        border-radius: 50% !important;
        background: var(--color-primary, #d43f0a) !important;
        color: #ffffff !important;
        border: 3px solid var(--color-surface, #ffffff) !important;
        box-shadow: 0 4px 12px rgba(212, 63, 10, 0.35) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.2rem !important;
        cursor: pointer !important;
        transition: transform 0.15s ease, background 0.15s ease !important;
    }

    .dash-bnav-fab button:active {
        transform: scale(0.92) !important;
    }

    body.msg-portal-page .dash-content-inner,
    body.msg-portal-page .dash-content {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    body.msg-portal-page .dash-shell {
        padding: 0 !important;
        padding-bottom: 65px !important;
    }
    .msg-portal-container {
        grid-template-columns: 1fr !important;
        height: calc(100vh - 130px) !important;
        min-height: calc(100vh - 130px) !important;
        border-radius: 0 !important;
        border: none !important;
        margin: 0 !important;
    }
    .msg-sidebar {
        width: 100% !important;
        height: 100% !important;
    }
    .msg-chat-window {
        width: 100% !important;
        height: calc(100vh - 130px) !important;
        position: relative !important;
    }
    .msg-chat-window.provider-chat-layout {
        grid-template-columns: 1fr !important;
    }
    .msg-provider-details-panel {
        display: none !important;
    }
    .msg-chat-body {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 12px !important;
        padding-bottom: 20px !important;
    }
    .msg-chat-footer {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 50 !important;
        background: var(--color-surface) !important;
        border-top: 1px solid var(--color-outline-variant) !important;
        padding: 10px 12px !important;
        margin-bottom: 0 !important;
    }
    .msg-chat-header {
        padding: 8px 12px !important;
        gap: 8px !important;
    }
    .msg-header-left {
        min-width: 0 !important;
        flex: 1 !important;
        gap: 8px !important;
    }
    .msg-header-details {
        min-width: 0 !important;
        flex: 1 !important;
    }
    .msg-header-details h3 {
        font-size: 0.875rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .msg-header-sub {
        flex-wrap: nowrap !important;
        gap: 4px !important;
        min-width: 0 !important;
    }
    .msg-listing-link {
        font-size: 0.75rem !important;
        max-width: 140px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .dash-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .dash-table {
        min-width: 580px !important;
    }
    .msg-sidebar-mobile-hide { display: none !important; }
    .msg-chat-mobile-hide { display: none !important; }
    .msg-back-btn { display: flex !important; }
    .msg-bubble { max-width: 85%; }
    .msg-attachment-sheet {
        position: fixed !important;
        bottom: 130px !important;
        left: 12px !important;
        right: 12px !important;
        margin: 0 !important;
        justify-content: space-around !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
        z-index: 100 !important;
    }
}

/* ==========================================================================
   Category Service Page Hero Section (Customer vs Provider Role Differentiation)
   ========================================================================== */
.cat-hero-card {
    background: var(--color-surface-container-low, #faf6f0);
    border: 1px solid var(--color-outline-variant, #e2d7c7);
    color: var(--color-on-surface, #1c1b1f);
    padding: var(--spacing-2xl, 40px) var(--spacing-container, 24px);
    border-radius: var(--radius-2xl, 24px);
    margin-bottom: var(--spacing-xl, 24px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.04));
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cat-hero-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cat-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: rgba(191, 56, 8, 0.08);
    border: 1.5px solid rgba(191, 56, 8, 0.22);
    color: #bf3808;
    border-radius: 50px;
    font-size: 0.8125rem;
    font-weight: 700;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cat-hero-headline {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 900;
    font-family: var(--font-family-headline, sans-serif);
    margin: 0 0 16px 0;
    color: var(--color-on-surface, #1c1b1f);
    line-height: 1.18;
    letter-spacing: -0.5px;
}

.cat-highlight {
    color: #bf3808;
    display: inline-block;
    position: relative;
}

.cat-hero-subtitle {
    font-size: 1rem;
    color: var(--color-on-surface-variant, #49454f);
    margin: 0 0 28px 0;
    line-height: 1.6;
    max-width: 680px;
}

.cat-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
}

.cat-btn-primary-pill {
    padding: 14px 28px;
    border-radius: 50px;
    background: #bf3808;
    color: #ffffff !important;
    font-weight: 800;
    font-size: 0.9375rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(191, 56, 8, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.cat-btn-primary-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(191, 56, 8, 0.35);
    background: #0d1b3e;
}

.cat-btn-outline-pill {
    padding: 14px 28px;
    border-radius: 50px;
    background: var(--color-surface, #ffffff);
    color: var(--color-on-surface, #1c1b1f) !important;
    font-weight: 700;
    font-size: 0.9375rem;
    border: 1.5px solid var(--color-outline-variant, #e2d7c7);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.cat-btn-outline-pill:hover {
    background: var(--color-surface-container-high, #f5efe8);
    border-color: #bf3808;
}

@media (max-width: 600px) {
    .cat-hero-card {
        padding: 24px 16px !important;
        border-radius: var(--radius-xl, 16px) !important;
    }
    .cat-hero-headline {
        font-size: 1.5rem !important;
    }
    .cat-hero-subtitle {
        font-size: 0.875rem !important;
        margin-bottom: 20px !important;
    }
    .cat-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
.cat-btn-primary-pill, .cat-btn-outline-pill {
        justify-content: center;
        width: 100%;
        padding: 12px 20px;
    }
}

/* ============================================================
   MOBILE FIT-TO-SCREEN & FOOTER HIDING UTILITIES
   ============================================================ */
@media (max-width: 767px) {
    footer {
        display: none !important;
    }

    body {
        /* Default padding for mobile with bottom nav */
    }
    
    body.page-is-homepage {
        padding-bottom: 0px !important; /* Zero padding on body prevents artificial scrolling */
        overflow-x: hidden !important;
    }

    .app-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .trust-badges-bar {
        margin-top: 6px !important;
        margin-bottom: 8px !important;
        padding: 8px 4px !important;
        border-radius: 16px !important;
    }

    .trust-badge-icon {
        width: 34px !important;
        height: 34px !important;
        margin-bottom: 2px !important;
    }

    .trust-badge-icon span {
        font-size: 18px !important;
    }

    .trust-badge-title {
        font-size: 0.6875rem !important;
    }

    .section-wrapper {
        margin-top: 0 !important;
        margin-bottom: 4px !important;
    }

    .section-header {
        margin-top: 12px !important;
        margin-bottom: 10px !important;
    }

    .section-title {
        font-size: 1.1rem !important;
        font-weight: 800 !important;
    }

    .section-action {
        font-size: 0.8125rem !important;
        font-weight: 700 !important;
    }

    .category-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px 10px !important;
        margin-top: 10px !important;
        padding-bottom: 0px !important;
    }

    .category-icon-box {
        width: 58px !important;
        height: 58px !important;
        border-radius: 16px !important;
    }

    .category-icon-box span {
        font-size: 28px !important;
    }

    .category-label {
        font-size: 0.725rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }
}



/* ==========================================================================
   Legal & Utility Pages (Privacy, Terms, Contact, Help)
   ========================================================================== */

.legal-page-wrapper {
    background-color: var(--color-background);
    min-height: 80vh;
}

.legal-hero {
    background: linear-gradient(135deg, #0d1b3e 0%, #1b2f66 100%);
    color: #ffffff;
    padding: var(--spacing-2xl) 0 var(--spacing-xl);
    position: relative;
    overflow: hidden;
}

.legal-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.legal-hero-content {
    max-width: 800px;
}

.legal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.legal-hero-title {
    font-family: var(--font-family-headline);
    font-size: 2.25rem;
    font-weight: 800;
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.25;
    color: #ffffff;
}

.legal-hero-desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0;
}

/* Legal Layout & TOC */
.legal-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.legal-toc-nav {
    position: sticky;
    top: 80px;
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
}

.legal-toc-scroll {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.legal-toc-link {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    color: var(--color-on-surface-variant);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.legal-toc-link:hover,
.legal-toc-link.active {
    background: var(--color-surface-container-high);
    color: var(--color-primary);
    font-weight: 700;
}

.legal-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.legal-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    scroll-margin-top: 100px;
}

.legal-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-outline-variant);
    padding-bottom: var(--spacing-sm);
}

.legal-card-icon {
    color: var(--color-primary);
    font-size: 28px;
}

.legal-card-header h2 {
    font-family: var(--font-family-headline);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
}

.legal-card p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-on-surface-variant);
    margin-bottom: var(--spacing-md);
}

.legal-card ul {
    margin: 0 0 var(--spacing-md) 0;
    padding-left: 20px;
}

.legal-card ul li {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-on-surface-variant);
    margin-bottom: 8px;
}

.legal-sub-box {
    background: var(--color-surface-container-low);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    border-left: 4px solid var(--color-primary);
}

.legal-sub-box h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0 0 var(--spacing-xs) 0;
}

/* Permission Grid */
.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.permission-item {
    display: flex;
    gap: var(--spacing-md);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline-variant);
    padding: var(--spacing-md);
    border-radius: var(--radius-xl);
}

.permission-item .perm-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: var(--color-primary-fixed);
    color: var(--color-on-primary-fixed);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.permission-item h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0 0 4px 0;
    word-break: break-all;
}

.permission-item p {
    font-size: 0.8125rem;
    margin: 0;
    line-height: 1.4;
}

.highlight-callout {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    background: rgba(187, 0, 39, 0.08);
    border: 1px solid var(--color-secondary-fixed);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md);
    color: var(--color-on-surface);
}

.highlight-callout span {
    font-size: 32px;
    color: var(--color-secondary);
}

.contact-pill-list {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
}

.contact-pill-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface-container-high);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

/* Contact Page Styles */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--spacing-2xl);
    align-items: start;
}

.contact-section-title {
    font-family: var(--font-family-headline);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-on-surface);
    margin: 0 0 var(--spacing-md) 0;
}

.contact-info-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.contact-channel-card {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.contact-channel-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 24px;
}

.bg-primary-light { background: var(--color-primary-fixed); color: var(--color-on-primary-fixed); }
.bg-secondary-light { background: var(--color-secondary-fixed); color: var(--color-on-secondary-fixed); }
.bg-tertiary-light { background: var(--color-tertiary-fixed); color: var(--color-on-tertiary-fixed); }

.contact-channel-text h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0 0 4px 0;
}

.contact-channel-text .contact-val {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 4px 0;
}

.contact-channel-text .contact-val a {
    color: inherit;
    text-decoration: none;
}

.contact-channel-text .contact-val a:hover {
    text-decoration: underline;
}

.contact-subtext {
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
}

.contact-form-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-md);
}

.contact-form-subtitle {
    font-size: 0.9375rem;
    color: var(--color-on-surface-variant);
    margin: -8px 0 var(--spacing-lg) 0;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

.form-label .required {
    color: var(--color-error);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    background: var(--color-surface-container-lowest);
    color: var(--color-on-surface);
    font-family: inherit;
    font-size: 0.9375rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(212, 63, 10, 0.15);
}

/* Help Center FAQs */
.help-hero {
    text-align: center;
}

.help-hero .legal-hero-content {
    margin: 0 auto;
}

.faq-search-box {
    position: relative;
    max-width: 640px;
    margin: var(--spacing-lg) auto 0;
}

.faq-search-box .search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-outline);
    font-size: 24px;
}

.faq-search-input {
    width: 100%;
    padding: 16px 48px 16px 54px;
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background: #ffffff;
    color: var(--color-on-surface);
    font-size: 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    outline: none;
}

.faq-search-input:focus {
    border-color: var(--color-primary-fixed);
}

.search-clear-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-surface-container-high);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-on-surface);
}

.faq-cat-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: var(--spacing-xl);
}

.faq-cat-pill {
    padding: 8px 20px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-outline-variant);
    background: var(--color-surface);
    color: var(--color-on-surface-variant);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.faq-cat-pill:hover,
.faq-cat-pill.active {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    max-width: 900px;
    margin: 0 auto;
}

.faq-cat-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-family-headline);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 var(--spacing-md) 0;
    border-bottom: 2px solid var(--color-primary-fixed);
    padding-bottom: var(--spacing-xs);
}

.faq-accordion-item {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
}

.faq-accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
    border: none;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-on-surface);
    cursor: pointer;
}

.faq-accordion-header .icon-toggle {
    transition: transform var(--transition-base);
    color: var(--color-outline);
}

.faq-accordion-item.active .faq-accordion-header .icon-toggle {
    transform: rotate(180deg);
    color: var(--color-primary);
}

.faq-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow) ease-out, padding var(--transition-base);
    padding: 0 var(--spacing-lg);
}

.faq-accordion-item.active .faq-accordion-content {
    max-height: 500px;
    padding: 0 var(--spacing-lg) var(--spacing-lg);
}

.faq-accordion-content p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-on-surface-variant);
}

.faq-no-results {
    text-align: center;
    padding: var(--spacing-2xl);
    background: var(--color-surface);
    border-radius: var(--radius-2xl);
    border: 1px dashed var(--color-outline-variant);
    max-width: 600px;
    margin: 0 auto;
}

.faq-no-results h3 {
    margin: var(--spacing-md) 0 var(--spacing-xs) 0;
    color: var(--color-on-surface);
}

.help-cta-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-surface-container-low) 0%, var(--color-surface-container-high) 100%);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.help-cta-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.help-cta-icon {
    font-size: 40px;
    color: var(--color-primary);
}

.help-cta-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--color-on-surface);
}

.help-cta-content p {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    margin: 0;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .legal-layout {
        grid-template-columns: 1fr;
    }

    .legal-toc-nav {
        position: static;
        overflow-x: auto;
        padding: 8px;
    }

    .legal-toc-scroll {
        flex-direction: row;
        white-space: nowrap;
    }

    .legal-card {
        padding: var(--spacing-md);
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-form-card {
        padding: var(--spacing-lg);
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .help-cta-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   AGENT PORTAL & UTILITY CLASSES
   ========================================================================== */

/* Max Width Containers */
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.mx-auto   { margin-left: auto; margin-right: auto; }

/* Spacing Helpers */
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.space-x-1 > * + * { margin-left: 0.25rem; }
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-3 > * + * { margin-left: 0.75rem; }
.space-x-4 > * + * { margin-left: 1rem; }

/* Grid Columns */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-12 { grid-column: span 12 / span 12; }

/* Flexbox & Alignment */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.min-w-0 { min-width: 0; }

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* Colors & Tokens */
.text-primary { color: var(--color-primary, #bf3808); }
.text-on-surface { color: var(--color-on-surface, #1e293b); }
.text-on-surface-variant { color: var(--color-on-surface-variant, #64748b); }
.text-emerald-500 { color: #10b981; }
.text-emerald-600 { color: #059669; }
.text-emerald-700 { color: #047857; }
.text-amber-500 { color: #f59e0b; }
.text-amber-600 { color: #d97706; }
.text-amber-700 { color: #b45309; }
.text-amber-800 { color: #92400e; }
.text-red-500 { color: #ef4444; }
.text-red-600 { color: #dc2626; }
.text-red-700 { color: #b91c1c; }
.text-blue-500 { color: #3b82f6; }
.text-blue-600 { color: #2563eb; }
.text-slate-950 { color: #020617; }
.text-white { color: #ffffff !important; }

.bg-primary { background-color: var(--color-primary, #bf3808); }
.bg-primary\/10 { background-color: rgba(191, 56, 8, 0.1); }
.bg-primary\/20 { background-color: rgba(191, 56, 8, 0.2); }
.bg-surface { background-color: var(--color-surface, #ffffff); }
.bg-surface-dim { background-color: var(--color-surface-dim, #f8f9fa); }
.bg-surface-variant { background-color: var(--color-surface-container, #f1f5f9); }
.bg-surface-container { background-color: var(--color-surface-container, #f8fafc); }
.bg-surface-container-high { background-color: var(--color-surface-container-high, #e2e8f0); }
.bg-emerald-50 { background-color: #ecfdf5; }
.bg-emerald-100 { background-color: #d1fae5; }
.bg-emerald-600 { background-color: #059669; }
.bg-amber-100 { background-color: #fef3c7; }
.bg-amber-400 { background-color: #fbbf24; }
.bg-amber-500 { background-color: #f59e0b; }
.bg-red-50 { background-color: #fef2f2; }
.bg-red-100 { background-color: #fee2e2; }
.bg-white { background-color: #ffffff; }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); }
.bg-black\/20 { background-color: rgba(0, 0, 0, 0.2); }
.bg-black\/25 { background-color: rgba(0, 0, 0, 0.25); }

.border-outline { border-color: var(--color-outline, #cbd5e1); }
.border-outline-variant { border-color: var(--color-outline-variant, #e2e8f0); }
.border-primary { border-color: var(--color-primary, #bf3808); }
.border-emerald-200 { border-color: #a7f3d0; }
.border-emerald-800 { border-color: #065f46; }
.border-red-200 { border-color: #fecaca; }
.border-red-800 { border-color: #991b1b; }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }

/* Typography */
.text-\[10px\] { font-size: 10px; line-height: 14px; }
.text-\[11px\] { font-size: 11px; line-height: 15px; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }

/* Responsive Breakpoints */
@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm\:col-span-1 { grid-column: span 1 / span 1; }
    .sm\:col-span-2 { grid-column: span 2 / span 2; }
    .sm\:flex-row { flex-direction: row; }
    .sm\:flex-col { flex-direction: column; }
    .sm\:items-center { align-items: center; }
    .sm\:items-end { align-items: flex-end; }
    .sm\:justify-between { justify-content: space-between; }
    .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
    .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .sm\:p-6 { padding: 1.5rem; }
    .sm\:pt-0 { padding-top: 0; }
    .sm\:border-t-0 { border-top-width: 0; }
}

@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
    .md\:col-span-3 { grid-column: span 3 / span 3; }
    .md\:flex-row { flex-direction: row; }
    .md\:items-center { align-items: center; }
    .md\:justify-between { justify-content: space-between; }
    .md\:block { display: block; }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:col-span-1 { grid-column: span 1 / span 1; }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
    .lg\:col-span-4 { grid-column: span 4 / span 4; }
    .lg\:hidden { display: none; }
    .lg\:p-8 { padding: 2rem; }
}

/* Specific Agent Portal Card Classes */
.auth-card {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-outline-variant, #e5e7eb);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.auth-card-wide {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-outline-variant, #e5e7eb);
    border-radius: 24px;
    padding: 2.25rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.dash-card {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-outline-variant, #e5e7eb);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
}

.stat-card {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-outline-variant, #e5e7eb);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-on-surface, #1e293b);
}

.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--color-outline, #cbd5e1);
    background: var(--color-surface, #ffffff);
    color: var(--color-on-surface, #1e293b);
    font-size: 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--color-primary, #d43f0a);
    box-shadow: 0 0 0 3px rgba(212, 63, 10, 0.15);
}

/* Positioning & Layers */
.fixed { position: fixed; }
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }

.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

.opacity-40 { opacity: 0.4; }
.opacity-60 { opacity: 0.6; }
.opacity-80 { opacity: 0.8; }

.divide-y > * + * { border-top: 1px solid var(--color-outline-variant, #e5e7eb); }
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* ============================================================
   GLOBAL INPUT WITH ICON STYLES (IMMUNE TO OVERRIDES)
   ============================================================ */
.input-with-icon {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.input-with-icon .input-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    color: var(--color-on-surface-variant, #64748b) !important;
    pointer-events: none !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.input-with-icon .form-input,
.input-with-icon input,
.input-with-icon select,
.input-with-icon textarea {
    width: 100% !important;
    padding-left: 46px !important;
    box-sizing: border-box !important;
}

.input-with-icon .btn-pwd-toggle {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    color: var(--color-on-surface-variant, #64748b) !important;
    cursor: pointer !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    line-height: 1 !important;
    border-radius: var(--radius-sm, 6px) !important;
}

.input-with-icon input[type="password"],
.input-with-icon .form-input:has(~ .btn-pwd-toggle),
.input-with-icon:has(.btn-pwd-toggle) .form-input,
.input-with-icon:has(.btn-pwd-toggle) input {
    padding-right: 46px !important;
}

/* ==========================================================================
   UNIVERSAL ACCOUNT & 5-TAB NAVIGATION ECOSYSTEM (v2.3.0)
   ========================================================================== */

/* Bottom Nav FAB Center Post Button */
.bottom-nav .nav-item-post {
    position: relative;
    top: -12px;
}

.bottom-nav-fab {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e2470f 0%, #d43f0a 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(191, 56, 8, 0.4);
    margin: 0 auto 2px;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.nav-item-post:hover .bottom-nav-fab,
.nav-item-post.active .bottom-nav-fab {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(191, 56, 8, 0.55);
}

.bottom-nav-fab .material-symbols-outlined {
    font-size: 26px;
    font-weight: 700;
}

/* Account Layout Grid */
.account-layout {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 20px 80px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: flex-start;
}

@media (max-width: 960px) {
    .account-layout {
        grid-template-columns: 1fr;
        padding: 16px 16px 90px;
        gap: 20px;
    }
}

/* Account Sidebar */
.account-sidebar {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 90px;
}

.account-user-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-outline-variant);
    margin-bottom: 20px;
}

.account-avatar-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.account-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-primary);
}

.account-verified-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--color-primary);
    color: #ffffff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-surface);
}

.account-user-meta {
    flex: 1;
    min-width: 0;
}

.account-user-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-on-surface);
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-user-email {
    font-size: 0.8rem;
    color: var(--color-on-surface-variant);
    margin: 0 0 6px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-role-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 50px;
    background: rgba(191, 56, 8, 0.12);
    color: var(--color-primary);
}

.account-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-nav-group-label {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.75px;
    color: var(--color-on-surface-variant);
    padding: 12px 12px 6px;
    text-transform: uppercase;
}

.account-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    color: var(--color-on-surface-variant);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.account-nav-item:hover {
    background: var(--color-surface-container);
    color: var(--color-primary);
}

.account-nav-item.active {
    background: rgba(191, 56, 8, 0.12);
    color: var(--color-primary);
    font-weight: 700;
}

.account-nav-item .material-symbols-outlined {
    font-size: 20px;
}

.account-badge-pro {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 800;
    background: linear-gradient(135deg, #bf3808, #1b2f66);
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 4px;
}

.account-nav-logout {
    color: #dc2626 !important;
    margin-top: 12px;
    border-top: 1px solid var(--color-outline-variant);
    padding-top: 14px;
}

.account-nav-logout:hover {
    background: rgba(220, 38, 38, 0.08) !important;
}

/* Account Main Content */
.account-main-content {
    min-width: 0;
}

.account-welcome-banner {
    background: linear-gradient(135deg, #bf3808 0%, #0d1b3e 100%);
    border-radius: var(--radius-xl);
    padding: 32px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
    box-shadow: var(--shadow-md);
}

@media (max-width: 640px) {
    .account-welcome-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 20px;
    }
}

.account-welcome-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    padding: 3px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.account-welcome-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 6px 0;
}

.account-welcome-sub {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
    max-width: 580px;
    line-height: 1.5;
}

/* Stats Grid */
.account-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

@media (max-width: 860px) {
    .account-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .account-stats-grid {
        grid-template-columns: 1fr;
    }
}

.account-stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.account-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.account-stat-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.account-stat-icon-wrapper .material-symbols-outlined {
    font-size: 24px;
}

.account-stat-info {
    flex: 1;
    min-width: 0;
}

.account-stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-on-surface);
    line-height: 1.2;
}

.account-stat-label {
    font-size: 0.8rem;
    color: var(--color-on-surface-variant);
    font-weight: 600;
}

.account-stat-arrow {
    color: var(--color-outline);
}

/* Section Header */
.account-card-section {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    padding: 28px;
    margin-bottom: 28px;
    box-shadow: var(--shadow-sm);
}

.account-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.account-section-header-wrap {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.account-section-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-on-surface);
    margin: 0 0 4px 0;
}

.account-section-desc {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    margin: 0;
}

.account-section-link {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
}

/* Category Profiles Grid */
.account-cat-profiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 860px) {
    .account-cat-profiles-grid {
        grid-template-columns: 1fr;
    }
}

.account-cat-card {
    background: var(--color-surface-container-low, var(--color-surface));
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.account-cat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.account-cat-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-status-pill {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 50px;
}

.account-status-pill.active {
    background: rgba(191, 56, 8, 0.12);
    color: #bf3808;
}

.account-status-pill.pending {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}

.account-cat-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0 0 6px 0;
}

.account-cat-summary {
    font-size: 0.825rem;
    color: var(--color-on-surface-variant);
    margin: 0 0 16px 0;
    line-height: 1.45;
}

.account-cat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    border-radius: 50px;
    border: 1px solid var(--color-outline-variant);
    background: var(--color-surface);
    color: var(--color-on-surface);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.account-cat-btn:hover {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

/* Quick Hub Grid */
.account-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 640px) {
    .account-hub-grid {
        grid-template-columns: 1fr;
    }
}

.account-hub-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-container);
    border: 1px solid var(--color-outline-variant);
    text-decoration: none;
    color: var(--color-on-surface);
    transition: transform var(--transition-base), background var(--transition-base);
}

.account-hub-item:hover {
    transform: translateX(4px);
    background: rgba(191, 56, 8, 0.06);
}

.account-hub-item .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
}

.account-hub-item h4 {
    margin: 0 0 2px 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.account-hub-item p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-on-surface-variant);
}

/* Memberships Catalog Grid */
.account-membership-catalog {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.account-membership-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: var(--shadow-sm);
}

.account-membership-card.is-active-sub {
    border-color: #bf3808;
    box-shadow: 0 4px 20px rgba(191, 56, 8, 0.12);
}

.account-membership-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-outline-variant);
}

.account-membership-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.account-membership-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(191, 56, 8, 0.12);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-membership-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 4px 0;
}

.account-membership-current-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-on-surface-variant);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot-active {
    background: #bf3808;
    box-shadow: 0 0 6px #bf3808;
}

.dot-free {
    background: var(--color-outline);
}

.account-active-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(191, 56, 8, 0.12);
    color: #bf3808;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
}

.account-membership-plans-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 720px) {
    .account-membership-plans-grid {
        grid-template-columns: 1fr;
    }
}

.account-plan-box {
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.account-plan-box.premium-box {
    border-color: #bf3808;
    background: var(--color-surface-container-low, var(--color-surface));
}

.plan-popular-ribbon {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #bf3808;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.account-plan-name {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.account-plan-price {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--color-primary);
    margin-bottom: 16px;
}

.account-plan-price span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-on-surface-variant);
}

.account-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.85rem;
}

.account-plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-plan-features .check-icon {
    font-size: 18px;
    color: var(--color-primary);
}

/* Post Hub Grid */
.account-post-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 640px) {
    .account-post-hub-grid {
        grid-template-columns: 1fr;
    }
}

.post-hub-option-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    color: var(--color-on-surface);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.post-hub-option-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.post-hub-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.post-hub-card-icon .material-symbols-outlined {
    font-size: 32px;
}

.post-hub-card-text {
    flex: 1;
}

.post-hub-card-text h3 {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.post-hub-card-text p {
    margin: 0;
    font-size: 0.825rem;
    color: var(--color-on-surface-variant);
    line-height: 1.4;
}

.post-hub-arrow {
    color: var(--color-outline);
    transition: transform var(--transition-fast);
}

.post-hub-option-card:hover .post-hub-arrow {
    transform: translateX(4px);
    color: var(--color-primary);
}

/* Verification Cards */
.account-verification-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 720px) {
    .account-verification-grid {
        grid-template-columns: 1fr;
    }
}

.account-verif-card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    padding: 24px;
    display: flex;
    gap: 18px;
}

.account-verif-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.account-verif-icon-wrap .material-symbols-outlined {
    font-size: 26px;
}

.account-verif-content {
    flex: 1;
}

.account-verif-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 10px;
    flex-wrap: wrap;
}

.account-verif-top h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.account-verif-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 50px;
}

.account-verif-badge.badge-verified {
    background: rgba(191, 56, 8, 0.12);
    color: #bf3808;
}

.account-verif-badge.badge-pending {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}

.account-verif-content p {
    margin: 0;
    font-size: 0.825rem;
    color: var(--color-on-surface-variant);
    line-height: 1.45;
}

/* Button & General Utilities */
.account-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 50px;
    background: var(--color-primary);
    color: #ffffff !important;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(191, 56, 8, 0.25);
    transition: all var(--transition-fast);
}

.account-btn-primary:hover {
    background: #0d1b3e;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(191, 56, 8, 0.35);
}

.account-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 50px;
    background: var(--color-surface-container);
    color: var(--color-on-surface);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--color-outline-variant);
    transition: all var(--transition-fast);
}

.account-btn-secondary:hover {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

.account-empty-state {
    text-align: center;
    padding: 48px 24px;
    background: var(--color-surface);
    border: 1px dashed var(--color-outline);
    border-radius: var(--radius-xl);
}

.account-empty-state .empty-icon {
    font-size: 48px;
    color: var(--color-outline);
    margin-bottom: 12px;
}

.account-empty-state h3 {
    margin: 0 0 6px 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.account-empty-state p {
    margin: 0 auto;
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    max-width: 440px;
}

/* ==========================================================================
   FLIGHT BOOKING ENGINE STYLES (Trip Designer API Integration)
   ========================================================================== */
.flight-radio-chip {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.flight-radio-chip input[type="radio"] {
    display: none;
}

.flight-radio-chip .chip-label {
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-on-surface, #333);
    background: var(--color-surface-container-low, #f0f4f1);
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.flight-radio-chip input[type="radio"]:checked + .chip-label {
    background: #d43f0a;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(212, 63, 10, 0.25);
}

.airport-picker-box:hover {
    border-color: #d43f0a !important;
    box-shadow: 0 4px 12px rgba(212, 63, 10, 0.08);
}

.flight-swap-btn:hover {
    background: #d43f0a !important;
    color: #ffffff !important;
}

.pax-counter-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #d43f0a;
    background: #ffffff;
    color: #d43f0a;
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pax-counter-btn:hover {
    background: #d43f0a;
    color: #ffffff;
}

.popular-route-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
    border-color: #d43f0a !important;
}

.flight-card:hover {
    border-color: #d43f0a !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

.sort-tab-btn {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #d9dfdb;
    background: #ffffff;
    color: #555;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sort-tab-btn.active {
    background: #d43f0a;
    color: #ffffff;
    border-color: #d43f0a;
}

.spin {
    animation: flight-spin 1s linear infinite;
}

@keyframes flight-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width: 992px) {
    .flight-search-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .flight-swap-btn {
        display: none !important;
    }
    .flight-results-layout {
        grid-template-columns: 1fr !important;
    }
    .flight-filters-sidebar {
        position: static !important;
    }
    .flight-card-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .flight-card-grid > div:last-child {
        border-left: none !important;
        padding-left: 0 !important;
        border-top: 1px solid #f0f0f0;
        padding-top: 14px;
        align-items: flex-start !important;
    }
    .flight-review-grid, .flight-checkout-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    .flight-search-grid {
        grid-template-columns: 1fr !important;
    }
}











/* ── Chat: admin pause banner & report dialog (admin Phase 4) ── */
.msg-admin-paused { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; font-size: 12px; font-weight: 700; text-align: center; background: rgba(217, 119, 6, 0.12); color: #92400e; border-top: 1px solid rgba(217, 119, 6, 0.3); }
.msg-admin-paused .material-symbols-outlined { font-size: 18px; }
[data-theme="dark"] .msg-admin-paused { color: #fcd34d; }
.msg-report-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.45); }
.msg-report-modal[hidden] { display: none; }
.msg-report-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 16px; background: var(--color-surface, #fff); color: var(--color-on-surface); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); }
.msg-report-card h3 { margin: 0; font-size: 1.05rem; }
.msg-report-help { margin: 0 0 4px; font-size: 0.8125rem; color: var(--color-on-surface-variant); }
.msg-report-card label { font-size: 0.8125rem; font-weight: 600; }
.msg-report-card select, .msg-report-card textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--color-outline-variant); border-radius: 10px; background: var(--color-surface, #fff); color: var(--color-on-surface); font: inherit; font-size: 0.875rem; }
.msg-report-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.msg-system-notice { align-self: center; max-width: 90%; margin: 8px auto; padding: 6px 12px; border-radius: 12px; background: var(--color-surface-container-low, #f3efe8); color: var(--color-on-surface-variant); font-size: 12px; text-align: center; overflow-wrap: anywhere; }
.msg-system-notice .msg-meta-time { margin-left: 6px; opacity: 0.7; font-size: 11px; }

/* ── Homepage promo cards (Admin → Marketing → Promotions) ───────────── */
.promo-strip { margin-top: 16px; }
.promo-strip-row { gap: 12px; }
.promo-card { --promo-bg: #d43f0a; flex: 0 0 min(86%, 360px); min-height: 120px; display: flex; align-items: stretch; gap: 12px; padding: 16px; border-radius: 18px;
  background: linear-gradient(135deg, var(--promo-bg) 0%, color-mix(in srgb, var(--promo-bg) 78%, #000) 100%); color: #fff; text-decoration: none; overflow: hidden; position: relative; }
.promo-card:hover, .promo-card:focus-visible { filter: brightness(1.05); }
.promo-card:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.promo-card-text { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; z-index: 1; }
.promo-card-title { font-size: 1.05rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.promo-card-sub { font-size: .8125rem; opacity: .9; line-height: 1.35; overflow-wrap: anywhere; }
.promo-card-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; font-weight: 700; }
.promo-card-cta .material-symbols-outlined { font-size: 16px; }
.promo-card-img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; align-self: center; flex-shrink: 0; }
@media (min-width: 900px) { .promo-card { flex-basis: 360px; } }

/* ==========================================================================
   Flight checkout — UPI payment (MyGuwahati). Uses design tokens only, so it follows light / dark themes.
   ========================================================================== */
.fl-mode {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--color-outline-variant);
    border-radius: 14px;
    background: var(--color-surface-container-lowest);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}
.fl-mode input[type="radio"] { margin-top: 3px; accent-color: var(--color-primary); width: 18px; height: 18px; flex-shrink: 0; }
.fl-mode:hover { border-color: var(--color-primary); }
.fl-mode.is-active { border-color: var(--color-primary); background: var(--color-primary-container); box-shadow: 0 2px 10px rgba(212, 63, 10, 0.12); }
.fl-mode.is-disabled { cursor: not-allowed; opacity: 0.7; }
.fl-mode.is-disabled:hover { border-color: var(--color-outline-variant); }
.fl-mode-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--color-on-surface); font-size: 0.95rem; }
.fl-mode-text { display: block; margin-top: 4px; font-size: 0.82rem; line-height: 1.5; color: var(--color-on-surface-variant); }
.fl-chip {
    display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-full);
    font-size: 0.72rem; font-weight: 700; background: var(--color-secondary-container); color: var(--color-on-secondary-container);
}
.fl-chip-muted { background: var(--color-surface-container-high); color: var(--color-on-surface-variant); }
.fl-pay-panel { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.fl-upi-box {
    padding: 14px 16px; border-radius: 14px; font-size: 0.85rem; line-height: 1.5;
    background: var(--color-surface-container-low); border: 1px dashed var(--color-primary); color: var(--color-on-surface);
}
.fl-upi-box a { color: var(--color-primary); font-weight: 700; }
.fl-upi-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.fl-upi-row > span { color: var(--color-on-surface-variant); font-size: 0.8rem; }
.fl-upi-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; color: var(--color-primary); word-break: break-all; user-select: all; }
.fl-upi-steps { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; color: var(--color-on-surface-variant); }
.fl-upi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fl-upi-fields label { display: block; margin-bottom: 4px; font-size: 0.82rem; font-weight: 700; color: var(--color-on-surface); }
.fl-upi-fields .req { color: var(--color-error); }
.fl-upi-fields input {
    width: 100%; height: 44px; padding: 0 12px; border-radius: 10px; font-size: 0.9rem;
    border: 1.5px solid var(--color-outline-variant); background: var(--color-surface-container-lowest); color: var(--color-on-surface);
}
.fl-upi-fields input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(212, 63, 10, 0.15); }
.fl-submit-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px;
    padding: 12px 20px; border: none; border-radius: 14px; cursor: pointer; font-size: 1rem; font-weight: 800;
    background: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 6px 16px rgba(212, 63, 10, 0.25);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.fl-submit-btn:hover:not(:disabled) { background: var(--color-primary-hover); transform: translateY(-1px); }
.fl-submit-btn:disabled { cursor: not-allowed; opacity: 0.55; box-shadow: none; }
@media (max-width: 600px) {
    .fl-upi-fields { grid-template-columns: 1fr; }
}

/* Listing detail — provider video */
.ld-video { max-width: var(--container-max-width); margin: var(--spacing-md) auto 0; padding: 0 var(--spacing-container); }
.ld-video video { display: block; width: 100%; max-height: 70vh; border-radius: var(--radius-xl); background: #000; }

/* ==========================================================================
   Bottom navigation — MyGuwahati reference design (rounded sheet, orange active
   state with dot, raised Explore action). Shared by every page on phones.
   ========================================================================== */
.bottom-nav {
    min-height: 62px;
    padding: 8px 6px max(6px, env(safe-area-inset-bottom, 0px));
    background-color: var(--color-surface-container-lowest);
    border-top: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 26px rgba(13, 27, 62, 0.10);
    align-items: flex-end;
}
.nav-item { position: relative; gap: 3px; padding: 4px 2px 8px; color: #27314d; }
.nav-item .nav-icon { font-size: 25px; }
.nav-item .nav-label { font-size: 0.71875rem; font-weight: 500; letter-spacing: 0; }
.nav-item.active, .nav-item:hover { color: #e2470f; }
.nav-item.active .nav-label { font-weight: 700; }
.nav-item.active:not(.nav-item-post)::after {
    content: ''; position: absolute; bottom: 0; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #e2470f;
}
.bottom-nav .nav-item-post { top: 0; margin-top: -26px; color: #27314d; }
.bottom-nav .nav-item-post.active { color: #27314d; }
.bottom-nav-fab {
    width: 54px; height: 54px; margin-bottom: 4px;
    background: #e2470f;
    box-shadow: 0 0 0 5px var(--color-surface-container-lowest), 0 8px 18px rgba(226, 71, 15, 0.38);
}
.nav-item-post:hover .bottom-nav-fab, .nav-item-post.active .bottom-nav-fab { box-shadow: 0 0 0 5px var(--color-surface-container-lowest), 0 10px 22px rgba(226, 71, 15, 0.5); }
[data-theme="dark"] .bottom-nav { box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.45); }
[data-theme="dark"] .nav-item, [data-theme="dark"] .bottom-nav .nav-item-post { color: #c0c7d4; }
[data-theme="dark"] .nav-item.active, [data-theme="dark"] .nav-item:hover { color: #ff8a47; }
[data-theme="dark"] .nav-item.active:not(.nav-item-post)::after { background: #ff8a47; }


/* ==========================================================================
   MyGuwahati theme v2 — the homepage design language on every page:
   cream surfaces, deep-navy ink, vivid orange actions, Fraunces headings,
   white rounded cards with soft shadows, pill buttons.
   (Design tokens are set at the top of this file; this block restyles the
   shared components that were drawn for the older look.)
   ========================================================================== */
body { background-color: var(--color-background); color: var(--color-on-surface); }

/* Headings */
h1, h2, .section-title, .auth-title, .cat-hero-headline, .legal-hero-title, .ld-section-title, .account-section-title,
.contact-section-title, .faq-cat-title, .adm-h2, .empty-title, .myg-modal-title, .dash-drawer-title {
    font-family: 'Fraunces', 'Hind Siliguri', 'Noto Serif Bengali', Georgia, serif;
    letter-spacing: -0.01em;
}
.section-title { position: relative; padding-bottom: 8px; font-weight: 800; color: var(--color-on-surface); }
.section-title::after { content: ''; position: absolute; left: 2px; bottom: 0; width: 28px; height: 3px; border-radius: 3px; background: #e2470f; transform: rotate(-4deg); }
.section-action { color: #e2470f; font-weight: 700; }

/* Primary actions: solid orange pills */
.btn-primary, .dash-btn-primary, .auth-submit-btn, .cat-btn-primary-pill, .adm-btn-primary {
    background: var(--color-primary) !important; background-image: none !important; color: #ffffff !important;
    border-radius: 999px !important; border: 0; box-shadow: 0 8px 18px rgba(212, 63, 10, 0.26);
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.btn-primary:hover, .dash-btn-primary:hover, .auth-submit-btn:hover, .cat-btn-primary-pill:hover, .adm-btn-primary:hover {
    background: var(--color-primary-hover) !important; box-shadow: 0 10px 22px rgba(212, 63, 10, 0.34); transform: translateY(-1px);
}
.btn-primary:disabled, .dash-btn-primary:disabled, .auth-submit-btn:disabled { opacity: 0.55; box-shadow: none; transform: none; cursor: not-allowed; }
.btn-secondary { border-radius: 999px; }
.dash-btn-outline, .cat-btn-outline-pill, .btn-outline, .auth-btn-google, .auth-btn-subtle {
    background: var(--color-surface-container-lowest) !important; color: var(--color-on-surface) !important;
    border: 1px solid rgba(13, 27, 62, 0.14) !important; border-radius: 999px !important; box-shadow: none;
}
.dash-btn-outline:hover, .cat-btn-outline-pill:hover, .btn-outline:hover, .auth-btn-google:hover, .auth-btn-subtle:hover {
    border-color: var(--color-primary) !important; color: var(--color-primary) !important; background: #ffefe6 !important;
}

/* Cards and panels: white on cream, soft shadow */
.dash-section-card, .auth-card, .legal-card, .card, .stat-card, .dash-stat-card, .dash-card, .dash-empty-card, .dash-profile-card, .dash-help-card,
.contact-channel-card, .cat-hero-card, .service-card, .trending-card, .metric-card, .passenger-card, .post-hub-option-card, .studio-card,
.account-stat-card, .account-cat-card, .account-cat-detail-card, .account-verif-card, .account-listing-card, .adm-form-card, .adm-auth-card, .myg-modal-card {
    background-color: var(--color-surface-container-lowest);
    border: 1px solid rgba(13, 27, 62, 0.06);
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(13, 27, 62, 0.06);
}
.service-card, .trending-card, .account-listing-card, .post-hub-option-card { transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.service-card:hover, .trending-card:hover, .account-listing-card:hover, .post-hub-option-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(13, 27, 62, 0.12); }

/* Form fields */
.form-input, .dash-form-input, .form-select, .dash-form-select, .adm-select, textarea.form-input, textarea.dash-form-input {
    background-color: var(--color-surface-container-lowest);
    border: 1.5px solid var(--color-outline-variant);
    border-radius: 14px;
    color: var(--color-on-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input:focus, .dash-form-input:focus, .form-select:focus, .dash-form-select:focus, .adm-select:focus {
    outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(212, 63, 10, 0.12);
}
.form-input::placeholder, .dash-form-input::placeholder { color: #8a90a2; }

/* Small accents */
.cat-hero-badge, .account-status-pill, .tag-pill, .faq-cat-pill { border-radius: 999px; }
a { text-underline-offset: 3px; }
::selection { background: rgba(226, 71, 15, 0.22); }

/* Legal / help heroes: deep navy with the brand glow */
.legal-hero { background: radial-gradient(90% 120% at 100% 0%, rgba(226, 71, 15, 0.28) 0%, rgba(226, 71, 15, 0) 55%), linear-gradient(135deg, #0d1b3e 0%, #1b2f66 100%) !important; }

/* Footer */
.myg-footer { margin-top: 48px; padding: 36px 0 28px; background: #0d1b3e; color: #e8ecf6; }
.myg-footer-brand { display: flex; align-items: center; gap: 12px; }
.myg-footer-logo { height: 54px; width: auto; background: #ffffff; border-radius: 14px; padding: 4px 10px; }
.myg-footer-tagline { font-family: 'Fraunces', 'Hind Siliguri', Georgia, serif; font-weight: 700; font-size: 1.125rem; color: #ffffff; line-height: 1.2; }
.myg-footer-about { margin: 16px 0 0; max-width: 520px; font-size: 0.875rem; line-height: 1.6; color: #c2c9db; }
.myg-footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: 0.875rem; font-weight: 600; }
.myg-footer-links a { color: #ffb596; text-decoration: none; }
.myg-footer-links a:hover { color: #ffffff; text-decoration: underline; }
.myg-footer-copy { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.75rem; color: #9aa3ba; }
@media (max-width: 767px) { .myg-footer { padding-bottom: 96px; } }

/* Dark theme */
[data-theme="dark"] .dash-section-card, [data-theme="dark"] .auth-card, [data-theme="dark"] .legal-card, [data-theme="dark"] .card, [data-theme="dark"] .stat-card,
[data-theme="dark"] .dash-stat-card, [data-theme="dark"] .dash-card, [data-theme="dark"] .dash-empty-card, [data-theme="dark"] .dash-profile-card, [data-theme="dark"] .dash-help-card,
[data-theme="dark"] .contact-channel-card, [data-theme="dark"] .cat-hero-card, [data-theme="dark"] .service-card, [data-theme="dark"] .trending-card, [data-theme="dark"] .metric-card,
[data-theme="dark"] .passenger-card, [data-theme="dark"] .post-hub-option-card, [data-theme="dark"] .studio-card, [data-theme="dark"] .account-stat-card, [data-theme="dark"] .account-cat-card,
[data-theme="dark"] .account-cat-detail-card, [data-theme="dark"] .account-verif-card, [data-theme="dark"] .account-listing-card, [data-theme="dark"] .adm-form-card,
[data-theme="dark"] .adm-auth-card, [data-theme="dark"] .myg-modal-card {
    background-color: var(--color-surface-container); border-color: rgba(255, 255, 255, 0.07); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .form-input, [data-theme="dark"] .dash-form-input, [data-theme="dark"] .form-select, [data-theme="dark"] .dash-form-select, [data-theme="dark"] .adm-select {
    background-color: var(--color-surface-container-low);
}
[data-theme="dark"] .dash-btn-outline, [data-theme="dark"] .cat-btn-outline-pill, [data-theme="dark"] .btn-outline, [data-theme="dark"] .auth-btn-google, [data-theme="dark"] .auth-btn-subtle {
    background: var(--color-surface-container) !important; border-color: rgba(255, 255, 255, 0.16) !important;
}
[data-theme="dark"] .dash-btn-outline:hover, [data-theme="dark"] .cat-btn-outline-pill:hover, [data-theme="dark"] .btn-outline:hover { background: rgba(255, 138, 71, 0.14) !important; }
[data-theme="dark"] .btn-primary, [data-theme="dark"] .dash-btn-primary, [data-theme="dark"] .auth-submit-btn, [data-theme="dark"] .cat-btn-primary-pill { background: #d43f0a !important; }
[data-theme="dark"] .section-title::after { background: #ff8a47; }

/* Theme v2 — dashboards: logo without the old white badge, calmer sidebar brand */
.header-logo-img { height: 48px !important; max-height: 48px !important; background: transparent; box-shadow: none; padding: 0; border-radius: 0; mix-blend-mode: multiply; }
.dash-brand-logo { height: auto !important; max-height: 76px; width: auto; max-width: 100%; mix-blend-mode: multiply; }
[data-theme="dark"] .header-logo-img, [data-theme="dark"] .dash-brand-logo { mix-blend-mode: normal; background: #ffffff; border-radius: 12px; padding: 3px 8px; }
.dash-nav-link.active, .sidebar-link.active { background: #ffe9dc; color: #8a2a06; font-weight: 700; }
[data-theme="dark"] .dash-nav-link.active, [data-theme="dark"] .sidebar-link.active { background: rgba(255, 138, 71, 0.16); color: #ffb596; }
.dash-stat-value { font-family: 'Fraunces', 'Hind Siliguri', Georgia, serif; font-weight: 800; }

/* Theme v2 — account area on phones/tablets: the long side menu becomes one swipeable row of pills */
@media (max-width: 960px) {
    .account-sidebar { position: static; padding: 14px 14px 10px; border-radius: 18px; background: #ffffff; min-width: 0; }
    .account-user-card { margin-bottom: 10px; padding-bottom: 10px; }
    .account-nav-menu { display: flex; flex-direction: row; gap: 8px; overflow-x: auto; margin: 0 -14px; padding: 2px 14px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
    .account-nav-menu::-webkit-scrollbar { display: none; }
    .account-nav-group-label, .account-nav-menu > hr, .account-nav-menu > .account-nav-divider { display: none; }
    .account-nav-item { flex: 0 0 auto; width: auto; margin: 0; padding: 8px 14px; border: 1px solid var(--color-outline-variant); border-radius: 999px; background: var(--color-background); font-size: 0.8125rem; white-space: nowrap; scroll-snap-align: start; }
    .account-nav-item.active { background: #d43f0a; border-color: #d43f0a; color: #ffffff; }
    .account-nav-item.active .material-symbols-outlined { color: #ffffff; }
    .account-nav-item .material-symbols-outlined { font-size: 18px; }
    .account-nav-logout { margin-top: 0; border-top: 1px solid var(--color-outline-variant); }
    .account-main-content { min-width: 0; }
    [data-theme="dark"] .account-sidebar { background: var(--color-surface-container); }
}

/* Theme v2 — messages portal and search results */
body.msg-portal-page, body.msg-portal-page .dash-shell, body.msg-portal-page .dash-content { background: var(--color-background); }
.msg-sidebar { background: var(--color-background); }
.msg-conv-item:hover, .msg-conv-item.active { background: #ffffff; }
[data-theme="dark"] .msg-conv-item:hover, [data-theme="dark"] .msg-conv-item.active { background: var(--color-surface-container); }
.main-content > .app-container:first-child { padding-top: 18px; }

/* Theme v2 — flight search form: swap button anchored to the form, Search button kept inside the card */
.flight-search-grid { position: relative; }
@media (min-width: 993px) {
    .flight-search-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr) auto !important; }
    .flight-search-grid > * { min-width: 0; }
}

/* Theme v2 — dashboards on tablets: the side menu leaves less room, so cards stack instead of squeezing */
@media (min-width: 769px) and (max-width: 1100px) {
    .dash-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .dash-profile-details { grid-template-columns: 1fr !important; }
    .dash-profile-top { flex-wrap: wrap; gap: 14px; }
    /* the side menu already shows the logo; give the room to the search box */
    .dash-topbar .header-logo-img { display: none; }
    .dash-topbar-search { min-width: 110px; }
    .dash-topbar { gap: 10px; }
    .dash-topbar .dash-topbar-user-name, .dash-topbar-user .dash-topbar-user-name + * { display: none; }
    .dash-topbar .dash-btn-primary { padding-inline: 12px; font-size: 0.75rem; line-height: 1.15; }
    .dash-topbar .icon-btn { margin-inline: -3px; }
}

/* Bottom nav: a centre button that only shows "+" (reels empty state, creator profile); label kept for screen readers */
.nav-item-fab-only .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }