/*
 * BandoBDS Theme System
 * Shared theme presets for map UI and admin surfaces.
 */

:root {
    color-scheme: light;
    --bb-bg: #f6f8fb;
    --bb-bg-2: #eef3f8;
    --bb-surface: rgba(255, 255, 255, 0.96);
    --bb-surface-2: #f8fafc;
    --bb-elevated: #ffffff;
    --bb-text: #0f172a;
    --bb-muted: #64748b;
    --bb-border: rgba(15, 23, 42, 0.1);
    --bb-primary: #0f766e;
    --bb-primary-2: #0891b2;
    --bb-accent: #f59e0b;
    --bb-accent-2: #f97316;
    --bb-success: #16a34a;
    --bb-danger: #ef4444;
    --bb-warning: #f59e0b;
    --bb-shadow: 0 18px 50px rgba(15, 23, 42, 0.14);
    --bb-shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.08);
    --bb-radius: 10px;

    --admin-bg: var(--bb-bg);
    --admin-surface: var(--bb-surface);
    --admin-surface-strong: var(--bb-elevated);
    --admin-ink: var(--bb-text);
    --admin-muted: var(--bb-muted);
    --admin-primary: var(--bb-primary);
    --admin-primary-2: var(--bb-primary-2);
    --admin-accent: var(--bb-accent);
    --admin-danger: var(--bb-danger);
    --admin-border: var(--bb-border);
    --admin-soft-border: var(--bb-border);
    --admin-shadow-soft: var(--bb-shadow-soft);
    --admin-radius: var(--bb-radius);
    --admin-radius-sm: 8px;

    --fmp-ink: var(--bb-text);
    --fmp-muted: var(--bb-muted);
    --fmp-night: #08111f;
    --fmp-night-2: #111827;
    --fmp-glass-dark: rgba(8, 17, 31, 0.82);
    --fmp-soft: var(--bb-surface);
    --fmp-surface: var(--bb-surface);
    --fmp-border: var(--bb-border);
    --fmp-shadow: var(--bb-shadow);
    --fmp-green: var(--bb-primary);
    --fmp-green-2: var(--bb-primary-2);
    --fmp-orange: var(--bb-accent-2);
    --fmp-orange-2: var(--bb-accent);
    --fmp-cyan: var(--bb-primary-2);
    --fmp-blue: #2563eb;
    --fmp-danger: var(--bb-danger);
}

html.theme-future-dark,
body.theme-future-dark {
    color-scheme: dark;
    --bb-bg: #08111f;
    --bb-bg-2: #0d1b2f;
    --bb-surface: rgba(13, 27, 47, 0.92);
    --bb-surface-2: rgba(20, 35, 58, 0.92);
    --bb-elevated: rgba(15, 30, 52, 0.96);
    --bb-text: #eef6ff;
    --bb-muted: #9fb3c8;
    --bb-border: rgba(148, 163, 184, 0.22);
    --bb-primary: #22c55e;
    --bb-primary-2: #06b6d4;
    --bb-accent: #f59e0b;
    --bb-accent-2: #fb7185;
    --bb-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
    --bb-shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.26);
    --fmp-night: #06111f;
    --fmp-night-2: #0f1d32;
    --fmp-glass-dark: rgba(6, 17, 31, 0.86);
}

html.theme-clean-light,
body.theme-clean-light {
    color-scheme: light;
    --bb-bg: #f6f8fb;
    --bb-bg-2: #eef3f8;
    --bb-surface: rgba(255, 255, 255, 0.96);
    --bb-surface-2: #f8fafc;
    --bb-elevated: #ffffff;
    --bb-text: #0f172a;
    --bb-muted: #64748b;
    --bb-border: rgba(15, 23, 42, 0.1);
    --bb-primary: #0f766e;
    --bb-primary-2: #0891b2;
    --bb-accent: #f59e0b;
    --bb-accent-2: #f97316;
}

html.theme-real-estate,
body.theme-real-estate {
    color-scheme: light;
    --bb-bg: #f3f8f2;
    --bb-bg-2: #e8f3e6;
    --bb-surface: rgba(255, 255, 255, 0.97);
    --bb-surface-2: #f7fbf5;
    --bb-elevated: #ffffff;
    --bb-text: #102016;
    --bb-muted: #5f7164;
    --bb-border: rgba(22, 101, 52, 0.15);
    --bb-primary: #166534;
    --bb-primary-2: #16a34a;
    --bb-accent: #d6a21f;
    --bb-accent-2: #f59e0b;
}

html.theme-luxury-gold,
body.theme-luxury-gold {
    color-scheme: dark;
    --bb-bg: #11100d;
    --bb-bg-2: #1b1812;
    --bb-surface: rgba(30, 27, 20, 0.94);
    --bb-surface-2: rgba(43, 38, 27, 0.94);
    --bb-elevated: rgba(35, 31, 22, 0.98);
    --bb-text: #fff7e6;
    --bb-muted: #cdbf9d;
    --bb-border: rgba(245, 158, 11, 0.22);
    --bb-primary: #d4a017;
    --bb-primary-2: #f59e0b;
    --bb-accent: #facc15;
    --bb-accent-2: #b7791f;
    --bb-shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
    --bb-shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.28);
}

html.theme-ocean-blue,
body.theme-ocean-blue {
    color-scheme: light;
    --bb-bg: #eef8fb;
    --bb-bg-2: #dff4f8;
    --bb-surface: rgba(255, 255, 255, 0.96);
    --bb-surface-2: #f4fbfd;
    --bb-elevated: #ffffff;
    --bb-text: #092033;
    --bb-muted: #5d7483;
    --bb-border: rgba(14, 116, 144, 0.16);
    --bb-primary: #0369a1;
    --bb-primary-2: #06b6d4;
    --bb-accent: #10b981;
    --bb-accent-2: #38bdf8;
}

html.theme-macos-tahoe,
body.theme-macos-tahoe {
    color-scheme: light;
    --bb-bg: #eaf6ff;
    --bb-bg-2: #f8fbff;
    --bb-surface: rgba(255, 255, 255, 0.58);
    --bb-surface-2: rgba(240, 248, 255, 0.48);
    --bb-elevated: rgba(255, 255, 255, 0.7);
    --bb-text: #071827;
    --bb-muted: #52677c;
    --bb-border: rgba(255, 255, 255, 0.58);
    --bb-primary: #0ea5e9;
    --bb-primary-2: #8b5cf6;
    --bb-accent: #22d3ee;
    --bb-accent-2: #38bdf8;
    --bb-shadow: 0 24px 80px rgba(14, 116, 144, 0.22);
    --bb-shadow-soft: 0 12px 34px rgba(14, 116, 144, 0.14);
}

html.theme-win11-mica,
body.theme-win11-mica {
    color-scheme: light;
    --bb-bg: #eef3fb;
    --bb-bg-2: #f7f9fd;
    --bb-surface: rgba(248, 250, 255, 0.72);
    --bb-surface-2: rgba(239, 244, 252, 0.68);
    --bb-elevated: rgba(255, 255, 255, 0.82);
    --bb-text: #111827;
    --bb-muted: #5d6b82;
    --bb-border: rgba(99, 102, 241, 0.16);
    --bb-primary: #2563eb;
    --bb-primary-2: #7c3aed;
    --bb-accent: #06b6d4;
    --bb-accent-2: #60a5fa;
    --bb-shadow: 0 24px 70px rgba(30, 64, 175, 0.18);
    --bb-shadow-soft: 0 12px 34px rgba(30, 64, 175, 0.1);
}

body.theme-future-dark,
body.theme-luxury-gold,
body.theme-clean-light,
body.theme-real-estate,
body.theme-ocean-blue,
body.theme-macos-tahoe,
body.theme-win11-mica {
    background: radial-gradient(circle at top left, color-mix(in srgb, var(--bb-primary) 16%, transparent), transparent 36%),
        linear-gradient(135deg, var(--bb-bg), var(--bb-bg-2)) !important;
    color: var(--bb-text);
}

body.theme-macos-tahoe,
body.theme-win11-mica {
    background:
        radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--bb-primary) 24%, transparent), transparent 34%),
        radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--bb-primary-2) 20%, transparent), transparent 32%),
        linear-gradient(135deg, var(--bb-bg), var(--bb-bg-2)) !important;
}

body.theme-future-dark .leaflet-container,
body.theme-luxury-gold .leaflet-container {
    background: #0b1220;
}

.bb-theme-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bb-theme-panel {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(2, 6, 23, 0.48);
    backdrop-filter: blur(14px);
}

.bb-theme-panel.is-open {
    display: flex;
}

.bb-theme-dialog {
    width: min(760px, 100%);
    max-height: min(780px, calc(100vh - 36px));
    overflow: auto;
    border: 1px solid var(--bb-border);
    border-radius: 14px;
    background: var(--bb-elevated);
    color: var(--bb-text);
    box-shadow: 0 24px 80px rgba(2, 6, 23, 0.32);
}

.bb-theme-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 18px 12px;
    border-bottom: 1px solid var(--bb-border);
}

.bb-theme-head h2 {
    margin: 0;
    color: var(--bb-text);
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.bb-theme-head p {
    margin: 5px 0 0;
    color: var(--bb-muted);
    font-size: 0.92rem;
}

.bb-theme-close {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid var(--bb-border);
    border-radius: 10px;
    background: var(--bb-surface-2);
    color: var(--bb-text);
}

.bb-theme-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 18px 18px;
}

.bb-theme-option {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    min-height: 96px;
    padding: 12px;
    border: 1px solid var(--bb-border);
    border-radius: 12px;
    background: var(--bb-surface);
    color: var(--bb-text);
    text-align: left;
    box-shadow: var(--bb-shadow-soft);
}

.bb-theme-option.is-active {
    border-color: color-mix(in srgb, var(--bb-primary) 70%, var(--bb-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-primary) 16%, transparent), var(--bb-shadow-soft);
}

.bb-theme-preview {
    min-height: 72px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    overflow: hidden;
    background: var(--p-bg);
}

.bb-theme-preview::before,
.bb-theme-preview::after {
    content: "";
    display: block;
    margin: 9px;
    border-radius: 8px;
}

.bb-theme-preview::before {
    height: 24px;
    background: linear-gradient(90deg, var(--p-primary), var(--p-accent));
}

.bb-theme-preview::after {
    height: 28px;
    background: var(--p-surface);
}

.bb-theme-copy strong {
    display: block;
    margin-bottom: 3px;
    color: var(--bb-text);
    font-size: 0.98rem;
}

.bb-theme-copy span {
    display: block;
    color: var(--bb-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.bb-theme-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: var(--bb-primary);
    font-size: 0.78rem;
    font-weight: 800;
}

.bb-theme-float {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 10050;
    width: 46px;
    height: 46px;
    border: 1px solid var(--bb-border);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2));
    color: #fff;
    box-shadow: var(--bb-shadow);
}

body.future-map-pro .bb-theme-float {
    display: none;
}

.bb-theme-floating-disabled .bb-theme-float {
    display: none;
}

body.theme-macos-tahoe .bb-theme-dialog,
body.theme-macos-tahoe .bb-theme-option,
body.theme-macos-tahoe .bb-theme-close,
body.theme-macos-tahoe .modern-sidebar,
body.theme-macos-tahoe .admin-card,
body.theme-macos-tahoe .card,
body.theme-macos-tahoe .table-card,
body.theme-macos-tahoe .stat-card,
body.theme-macos-tahoe #custom-layer-menu .layer-group.search-box-container,
body.theme-macos-tahoe .fmp-desktop-rail,
body.theme-macos-tahoe .fmp-rail-more,
body.theme-macos-tahoe .fmp-tool-sheet,
body.theme-macos-tahoe #regionSelectorCard,
body.theme-macos-tahoe #accountModal .account-modal-content,
body.theme-macos-tahoe .modal-content,
body.theme-win11-mica .bb-theme-dialog,
body.theme-win11-mica .bb-theme-option,
body.theme-win11-mica .bb-theme-close,
body.theme-win11-mica .modern-sidebar,
body.theme-win11-mica .admin-card,
body.theme-win11-mica .card,
body.theme-win11-mica .table-card,
body.theme-win11-mica .stat-card,
body.theme-win11-mica #custom-layer-menu .layer-group.search-box-container,
body.theme-win11-mica .fmp-desktop-rail,
body.theme-win11-mica .fmp-rail-more,
body.theme-win11-mica .fmp-tool-sheet,
body.theme-win11-mica #regionSelectorCard,
body.theme-win11-mica #accountModal .account-modal-content,
body.theme-win11-mica .modal-content {
    backdrop-filter: blur(24px) saturate(1.45) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.45) !important;
}

body.theme-macos-tahoe .bb-theme-dialog,
body.theme-macos-tahoe .bb-theme-option,
body.theme-macos-tahoe .modern-sidebar,
body.theme-macos-tahoe .admin-card,
body.theme-macos-tahoe .card,
body.theme-macos-tahoe .table-card,
body.theme-macos-tahoe .stat-card,
body.theme-macos-tahoe .fmp-desktop-rail,
body.theme-macos-tahoe .fmp-rail-more,
body.theme-macos-tahoe .fmp-tool-sheet {
    border-color: rgba(255, 255, 255, 0.62) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), var(--bb-shadow) !important;
}

body.theme-win11-mica .bb-theme-dialog,
body.theme-win11-mica .bb-theme-option,
body.theme-win11-mica .modern-sidebar,
body.theme-win11-mica .admin-card,
body.theme-win11-mica .card,
body.theme-win11-mica .table-card,
body.theme-win11-mica .stat-card,
body.theme-win11-mica .fmp-desktop-rail,
body.theme-win11-mica .fmp-rail-more,
body.theme-win11-mica .fmp-tool-sheet {
    border-color: rgba(99, 102, 241, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), var(--bb-shadow) !important;
}

/* Shared admin surfaces */
.modern-sidebar,
body:not(.future-map-pro) .modern-sidebar {
    background: linear-gradient(180deg, var(--bb-elevated), var(--bb-surface-2)) !important;
    border-right: 1px solid var(--bb-border) !important;
    color: var(--bb-text) !important;
}

.modern-sidebar .sidebar-brand,
.modern-sidebar .sidebar-user,
.modern-sidebar .sidebar-footer {
    border-color: var(--bb-border) !important;
}

.modern-sidebar .brand-text,
.modern-sidebar .user-name,
.modern-sidebar .menu-text {
    color: var(--bb-text) !important;
}

.modern-sidebar .user-role,
.modern-sidebar .user-email {
    color: var(--bb-muted) !important;
}

.modern-sidebar .menu-item,
.modern-sidebar .logout-btn,
.modern-sidebar .admin-theme-btn {
    color: var(--bb-muted) !important;
    background: transparent !important;
}

.modern-sidebar .menu-item:hover,
.modern-sidebar .menu-item.active,
.modern-sidebar .admin-theme-btn:hover {
    color: var(--bb-text) !important;
    background: color-mix(in srgb, var(--bb-primary) 12%, transparent) !important;
}

.modern-sidebar .menu-icon,
.modern-sidebar .brand-logo i {
    color: var(--bb-primary) !important;
}

.modern-sidebar .admin-theme-btn {
    width: 100%;
    border: 0;
    text-align: left;
}

body:not(.future-map-pro) .card,
body:not(.future-map-pro) .glass-card,
body:not(.future-map-pro) .stats-card,
body:not(.future-map-pro) .stat-card,
body:not(.future-map-pro) .table-card,
body:not(.future-map-pro) .content-header,
body:not(.future-map-pro) .top-navbar,
body:not(.future-map-pro) .page-header,
body:not(.future-map-pro) .modal-content {
    background: var(--bb-elevated) !important;
    border-color: var(--bb-border) !important;
    color: var(--bb-text) !important;
    box-shadow: var(--bb-shadow-soft) !important;
}

body:not(.future-map-pro) .card-header,
body:not(.future-map-pro) .modal-header,
body:not(.future-map-pro) .table thead th {
    background: var(--bb-surface-2) !important;
    color: var(--bb-text) !important;
    border-color: var(--bb-border) !important;
}

body:not(.future-map-pro) .form-control,
body:not(.future-map-pro) .form-select,
body:not(.future-map-pro) textarea,
body:not(.future-map-pro) select,
body:not(.future-map-pro) input {
    background: var(--bb-surface) !important;
    border-color: var(--bb-border) !important;
    color: var(--bb-text) !important;
}

body:not(.future-map-pro) .form-control::placeholder,
body:not(.future-map-pro) input::placeholder {
    color: var(--bb-muted) !important;
}

body.theme-future-dark:not(.future-map-pro) .text-dark,
body.theme-luxury-gold:not(.future-map-pro) .text-dark,
body.theme-future-dark:not(.future-map-pro) label,
body.theme-luxury-gold:not(.future-map-pro) label,
body.theme-future-dark:not(.future-map-pro) .form-label,
body.theme-luxury-gold:not(.future-map-pro) .form-label,
body.theme-future-dark:not(.future-map-pro) .form-check-label,
body.theme-luxury-gold:not(.future-map-pro) .form-check-label {
    color: var(--bb-text) !important;
}

body.theme-future-dark:not(.future-map-pro) .text-muted,
body.theme-luxury-gold:not(.future-map-pro) .text-muted,
body.theme-future-dark:not(.future-map-pro) small,
body.theme-luxury-gold:not(.future-map-pro) small {
    color: var(--bb-muted) !important;
}

body:not(.future-map-pro) .btn-primary,
body:not(.future-map-pro) .btn-modern.btn-primary,
body:not(.future-map-pro) .btn-glass,
body:not(.future-map-pro) .refresh-btn {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2)) !important;
    border-color: transparent !important;
    color: #fff !important;
}

body:not(.future-map-pro) .nav-pills .nav-link.active,
body:not(.future-map-pro) .nav-tabs .nav-link.active {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2)) !important;
    border-color: transparent !important;
    color: #fff !important;
}

body:not(.future-map-pro) .badge.bg-success,
body:not(.future-map-pro) .badge-success {
    background: var(--bb-success) !important;
}

/* Map app surfaces */
body.future-map-pro #custom-layer-menu .layer-group.search-box-container,
body.future-map-pro .fmp-desktop-rail,
body.future-map-pro .fmp-rail-more,
body.future-map-pro .fmp-bottom-nav,
body.future-map-pro .fmp-tool-sheet,
body.future-map-pro .base-layer-toggle,
body.future-map-pro .base-layer-dropdown,
body.future-map-pro #overlayLayerListContainer,
body.future-map-pro #accountModal .modal-content,
body.future-map-pro .admin-modal-container {
    background: color-mix(in srgb, var(--bb-elevated) 88%, transparent) !important;
    border-color: var(--bb-border) !important;
    color: var(--bb-text) !important;
    box-shadow: var(--bb-shadow) !important;
}

body.future-map-pro .fmp-rail-btn,
body.future-map-pro .fmp-nav-item,
body.future-map-pro .fmp-tool-tile,
body.future-map-pro .fmp-tool-center,
body.future-map-pro .fmp-admin-chip,
body.future-map-pro .fmp-sheet-close,
body.future-map-pro .base-layer-item,
body.future-map-pro .close-dropdown {
    background: var(--bb-surface) !important;
    border-color: var(--bb-border) !important;
    color: var(--bb-text) !important;
}

body.future-map-pro .fmp-rail-btn:hover,
body.future-map-pro .fmp-rail-btn.is-active,
body.future-map-pro .fmp-nav-item.is-active,
body.future-map-pro .fmp-tool-tile:hover,
body.future-map-pro .fmp-tool-center,
body.future-map-pro .fmp-admin-chip:hover,
body.future-map-pro .base-layer-item:hover,
body.future-map-pro .base-layer-item.active {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2)) !important;
    color: #fff !important;
}

body.future-map-pro .base-layer-item:hover .layer-title,
body.future-map-pro .base-layer-item:hover .layer-description,
body.future-map-pro .base-layer-item.active .layer-title,
body.future-map-pro .base-layer-item.active .layer-description,
body.future-map-pro .base-layer-item.active .fa-check {
    color: #fff !important;
}

body.future-map-pro .base-layer-item .layer-icon,
body.future-map-pro .base-layer-toggle:hover {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2)) !important;
}

body.future-map-pro #searchBarRegionBtn,
body.future-map-pro #btnShowAllOverlay,
body.future-map-pro #searchBarLocateBtn,
body.future-map-pro .fmp-mobile-fab {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2)) !important;
    color: #fff !important;
}

body.future-map-pro .opacity-slider-wrapper {
    opacity: 0.96;
}

body.future-map-pro .opacity-slider-wrapper .opacity-label {
    background: var(--bb-elevated) !important;
    border: 1px solid var(--bb-border) !important;
    color: var(--bb-text) !important;
    box-shadow: var(--bb-shadow-soft) !important;
}

body.future-map-pro #congcuOpacityRange {
    --opacity-slider-fill: var(--bb-primary);
    --opacity-slider-fill-2: var(--bb-primary-2);
    --opacity-slider-track: color-mix(in srgb, var(--bb-muted) 22%, var(--bb-surface));
    --opacity-slider-thumb-border: var(--bb-elevated);
    --opacity-slider-shadow: 0 8px 20px color-mix(in srgb, var(--bb-primary) 24%, transparent);
    background: transparent !important;
}

body.future-map-pro #congcuOpacityRange::-webkit-slider-thumb {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2)) !important;
    border-color: var(--bb-elevated) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--bb-primary) 24%, transparent) !important;
}

body.future-map-pro #congcuOpacityRange::-webkit-slider-runnable-track {
    background: linear-gradient(to top,
            var(--bb-primary) 0%,
            var(--bb-primary-2) var(--p, 100%),
            color-mix(in srgb, var(--bb-muted) 22%, var(--bb-surface)) var(--p, 100%),
            color-mix(in srgb, var(--bb-muted) 22%, var(--bb-surface)) 100%) !important;
}

body.future-map-pro #congcuOpacityRange::-moz-range-thumb {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2)) !important;
    border-color: var(--bb-elevated) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--bb-primary) 24%, transparent) !important;
}

body.future-map-pro #congcuOpacityRange::-moz-range-track {
    background: linear-gradient(to top,
            var(--bb-primary) 0%,
            var(--bb-primary-2) var(--p, 100%),
            color-mix(in srgb, var(--bb-muted) 22%, var(--bb-surface)) var(--p, 100%),
            color-mix(in srgb, var(--bb-muted) 22%, var(--bb-surface)) 100%) !important;
}

body.future-map-pro .fmp-tool-tile.fmp-accent-orange,
body.future-map-pro .fmp-tool-tile.fmp-accent-orange i {
    color: var(--bb-accent) !important;
}

body.future-map-pro .fmp-eyebrow,
body.future-map-pro .fmp-tool-section > span,
body.future-map-pro .fmp-sheet-header h2,
body.future-map-pro .dropdown-header span,
body.future-map-pro .base-layer-item .layer-title {
    color: var(--bb-text) !important;
}

body.future-map-pro .fmp-eyebrow,
body.future-map-pro .base-layer-item .layer-description {
    color: var(--bb-muted) !important;
}

body.future-map-pro #overlayLayerSearch,
body.future-map-pro #overlayLayerSearch::placeholder {
    color: var(--bb-text) !important;
}

/* Legacy map panels and account surfaces that predate the theme system. */
body.future-map-pro #regionSelectorCard,
body.future-map-pro #accountModal .account-modal-content,
body.future-map-pro #sourceMembersModal,
body.future-map-pro #formlodat-modal .modal-content,
body.future-map-pro #favorites-popup-modal > div,
body.future-map-pro #marketing-tool-modal,
body.future-map-pro #banghang-modal .bh-shell,
body.future-map-pro #coordinateSearchModal .modal-content,
body.future-map-pro .modal-fullscreen-panel,
body.future-map-pro .modal-content {
    background: var(--bb-elevated) !important;
    border: 1px solid var(--bb-border) !important;
    color: var(--bb-text) !important;
    box-shadow: var(--bb-shadow) !important;
}

body.future-map-pro #regionSelectorContainer,
body.future-map-pro #accountModal,
body.future-map-pro #banghang-modal,
body.future-map-pro #favorites-popup-modal,
body.future-map-pro #formlodat-modal,
body.future-map-pro #sourceMembersModal,
body.future-map-pro #marketing-tool-modal {
    color: var(--bb-text) !important;
}

body.future-map-pro .region-selector-header,
body.future-map-pro #accountModal .account-modal-content > div:first-of-type,
body.future-map-pro #banghang-modal .bh-header,
body.future-map-pro .modal-header {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2)) !important;
    color: #fff !important;
    border-color: var(--bb-border) !important;
}

body.future-map-pro .region-selector-close,
body.future-map-pro #accountModal button[onclick="closeAccountModal()"],
body.future-map-pro #banghang-modal .bh-close,
body.future-map-pro .modal-fullscreen-panel .close-btn {
    background: color-mix(in srgb, var(--bb-danger) 86%, #000) !important;
    color: #fff !important;
}

body.future-map-pro .region-selector-body,
body.future-map-pro #accountModal .account-modal-content > div:not(:first-of-type),
body.future-map-pro #accountModal #profileEditForm,
body.future-map-pro #accountModal #passwordEditForm,
body.future-map-pro #accountModal [style*="background:#f8f9fa"],
body.future-map-pro #accountModal [style*="background: #f8f9fa"],
body.future-map-pro #banghang-modal .bh-body,
body.future-map-pro #banghang-modal .bh-table-shell,
body.future-map-pro #banghang-modal .bh-toolbar,
body.future-map-pro .modal-body,
body.future-map-pro .panel-content {
    background: var(--bb-surface) !important;
    color: var(--bb-text) !important;
    border-color: var(--bb-border) !important;
}

body.future-map-pro .region-field label,
body.future-map-pro .region-search-item,
body.future-map-pro #accountModal label,
body.future-map-pro #accountModal h5,
body.future-map-pro #accountModal h4,
body.future-map-pro #accountModal [style*="color:#333"],
body.future-map-pro #accountModal [style*="color: #333"],
body.future-map-pro #accountModal [style*="color:#666"],
body.future-map-pro #accountModal [style*="color: #666"],
body.future-map-pro #accountModal [style*="color:#888"],
body.future-map-pro #accountModal [style*="color: #888"],
body.future-map-pro #banghang-modal .bh-title,
body.future-map-pro #banghang-modal .bh-table,
body.future-map-pro .modal-body,
body.future-map-pro .modal-body label {
    color: var(--bb-text) !important;
}

body.future-map-pro .region-search-path,
body.future-map-pro #accountModal small,
body.future-map-pro #accountModal [style*="color:#999"],
body.future-map-pro #accountModal [style*="color: #999"],
body.future-map-pro #banghang-modal .bh-subtitle,
body.future-map-pro #banghang-modal .bh-meta {
    color: var(--bb-muted) !important;
}

body.future-map-pro .region-mode-btn,
body.future-map-pro .region-secondary-btn,
body.future-map-pro .region-field select,
body.future-map-pro #regionProvinceInput,
body.future-map-pro .region-search-results,
body.future-map-pro #accountModal input,
body.future-map-pro #accountModal select,
body.future-map-pro #accountModal textarea,
body.future-map-pro #banghang-modal input,
body.future-map-pro #banghang-modal select,
body.future-map-pro .modal-body input,
body.future-map-pro .modal-body select,
body.future-map-pro .modal-body textarea {
    background: var(--bb-elevated) !important;
    border-color: var(--bb-border) !important;
    color: var(--bb-text) !important;
}

body.future-map-pro .region-mode-btn,
body.future-map-pro .region-secondary-btn,
body.future-map-pro #accountModal .account-menu-item {
    background: var(--bb-surface-2) !important;
    border: 1px solid var(--bb-border) !important;
    color: var(--bb-text) !important;
}

body.future-map-pro .region-mode-btn.active,
body.future-map-pro .region-primary-btn,
body.future-map-pro #accountModal button[type="submit"],
body.future-map-pro #accountModal button[onclick*="showTopupPopup"],
body.future-map-pro #accountModal button[onclick*="showTransactionHistory"],
body.future-map-pro #accountModal button[onclick*="showVerificationPopup"],
body.future-map-pro #banghang-modal .bh-chip,
body.future-map-pro .modal-body .btn-primary {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2)) !important;
    border-color: transparent !important;
    color: #fff !important;
}

body.future-map-pro .region-search-item:hover,
body.future-map-pro #accountModal .account-menu-item:hover,
body.future-map-pro #banghang-modal .bh-table tbody tr:hover {
    background: color-mix(in srgb, var(--bb-primary) 12%, transparent) !important;
}

body.future-map-pro #accountModal a[href^="/u/"] {
    background: color-mix(in srgb, #fff 16%, transparent) !important;
    color: #fff !important;
    border-color: color-mix(in srgb, #fff 34%, transparent) !important;
}

body.future-map-pro #accountModal [style*="rgba(102,126,234"],
body.future-map-pro #accountModal [style*="rgba(102, 126, 234"] {
    background: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-surface)) !important;
    border: 1px solid var(--bb-border) !important;
}

body.future-map-pro #accountModal [style*="border-top:1px solid #eee"] {
    border-top-color: var(--bb-border) !important;
}

body.future-map-pro #quick-action-fabs .tool-btn {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2)) !important;
    color: #fff !important;
    border: 1px solid color-mix(in srgb, #fff 18%, transparent) !important;
}

/* Add/Edit land form: theme-aware sheet optimized for phone entry. */
body.future-map-pro #formlodat-modal {
    padding: clamp(10px, 2vw, 24px) !important;
    background: rgba(2, 6, 23, 0.34) !important;
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
}

body.future-map-pro #formlodat {
    width: min(620px, calc(100vw - 28px)) !important;
    max-width: 620px !important;
    min-width: 0 !important;
    max-height: min(96dvh, 760px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bb-elevated) 94%, transparent), var(--bb-surface)) !important;
    border: 1px solid var(--bb-border) !important;
    border-radius: 22px !important;
    color: var(--bb-text) !important;
    box-shadow: var(--bb-shadow) !important;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0;
    scrollbar-color: color-mix(in srgb, var(--bb-primary) 55%, transparent) transparent;
}

body.future-map-pro #formlodat h4 {
    position: sticky;
    top: 0;
    z-index: 4;
    margin: 0 0 6px !important;
    padding: 12px 16px 10px !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--bb-primary) 96%, #000), color-mix(in srgb, var(--bb-primary-2) 92%, #000)) !important;
    color: #fff !important;
    font-size: clamp(0.98rem, 1.7vw, 1.18rem) !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 12px 28px color-mix(in srgb, #000 16%, transparent);
}

body.future-map-pro #formlodat #formLodatLayerName,
body.future-map-pro #formlodat #formLodatLayerName span {
    color: color-mix(in srgb, #fff 86%, var(--bb-accent)) !important;
}

body.future-map-pro #formlodat > .row,
body.future-map-pro #formlodat > .mb-2,
body.future-map-pro #formlodat > input[type="hidden"] + .d-flex {
    margin-left: 14px !important;
    margin-right: 14px !important;
}

body.future-map-pro #formlodat .form-label {
    margin-bottom: 3px !important;
    color: var(--bb-text) !important;
    font-weight: 750 !important;
    font-size: 0.78rem !important;
}

body.future-map-pro #formlodat .form-label i,
body.future-map-pro #formlodat .media-info-icon i {
    color: var(--bb-primary) !important;
}

body.future-map-pro #formlodat .form-control,
body.future-map-pro #formlodat .form-select,
body.future-map-pro #formlodat textarea,
body.future-map-pro #formlodat input[type="text"] {
    width: 100% !important;
    min-height: 34px;
    background: color-mix(in srgb, var(--bb-elevated) 88%, transparent) !important;
    border: 1px solid var(--bb-border) !important;
    border-radius: 10px !important;
    color: var(--bb-text) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent) !important;
}

body.future-map-pro #formlodat .form-control,
body.future-map-pro #formlodat .form-select {
    min-height: 34px;
    height: 34px;
    padding: 5px 9px !important;
    border-radius: 10px !important;
}

body.future-map-pro #formlodat .form-label {
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
}

body.future-map-pro #formLodatPrice[readonly] {
    cursor: default !important;
    pointer-events: none !important;
    user-select: none;
    background: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-elevated)) !important;
    color: var(--bb-muted) !important;
}

body.future-map-pro #sourceSearchResults {
    display: none !important;
}

body.future-map-pro #formlodat .land-identity-grid,
body.future-map-pro #formlodat .land-basic-grid,
body.future-map-pro #formlodat .land-finance-grid,
body.future-map-pro #formlodat .land-status-source-grid {
    display: grid !important;
    align-items: end;
}

body.future-map-pro #formlodat .land-identity-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(120px, 0.8fr);
}

body.future-map-pro #formlodat .land-basic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.future-map-pro #formlodat .land-status-source-grid {
    align-items: start;
    grid-template-columns: minmax(92px, 0.68fr) minmax(170px, 1.35fr) minmax(168px, 1.12fr);
    column-gap: 0.6rem;
}

body.future-map-pro #formlodat .land-status-source-grid > [class*="col-"] {
    display: grid;
    grid-template-rows: minmax(1.75em, auto) auto;
    align-items: start;
}

body.future-map-pro #formlodat .land-finance-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    column-gap: 0.6rem;
    row-gap: 0.2rem;
}

body.future-map-pro #formlodat .land-finance-grid > [class*="col-"] {
    display: grid;
    grid-template-rows: minmax(1.9em, auto) auto minmax(1.12em, auto);
    align-items: start;
}

body.future-map-pro #formlodat .land-finance-grid .form-control {
    width: min(100%, 150px) !important;
    justify-self: start;
}

body.future-map-pro #formlodat #formLodatPrice {
    width: min(100%, 190px) !important;
    font-size: 0.9rem;
}

body.future-map-pro #formlodat .land-finance-grid [id$="Hint"] {
    min-height: 1.12em;
    margin-top: 0.18rem !important;
    line-height: 1.05;
}

body.future-map-pro #formlodat .land-identity-grid > [class*="col-"],
body.future-map-pro #formlodat .land-basic-grid > [class*="col-"],
body.future-map-pro #formlodat .land-finance-grid > [class*="col-"],
body.future-map-pro #formlodat .land-status-source-grid > [class*="col-"] {
    width: auto !important;
    flex: none !important;
    max-width: none !important;
    min-width: 0;
}

body.future-map-pro #formlodat .land-mobile-full,
body.future-map-pro #formlodat .land-calculated-row {
    grid-column: 1 / -1;
}

body.future-map-pro #formlodat .land-calculated-row,
body.future-map-pro #formlodat .land-note-row {
    display: flex !important;
    justify-content: center;
}

body.future-map-pro #formlodat .land-media-block {
    margin-bottom: 0.35rem !important;
}

body.future-map-pro #formlodat #formLodatLibraryPreview {
    min-height: 42px !important;
    max-height: 86px !important;
    padding: 6px !important;
    margin-top: 4px !important;
    gap: 6px !important;
    overflow: hidden !important;
}

body.future-map-pro #formlodat #formLodatLibraryPreview img,
body.future-map-pro #formlodat #formLodatLibraryPreview video {
    max-width: 86px !important;
    max-height: 64px !important;
}

body.future-map-pro .source-selected-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 5px 8px;
    background: color-mix(in srgb, var(--bb-success) 12%, var(--bb-surface)) !important;
    border: 1px solid color-mix(in srgb, var(--bb-success) 28%, var(--bb-border)) !important;
    border-radius: 999px;
    color: var(--bb-text) !important;
}

body.future-map-pro #selectedSourceDisplay.source-selected-chip {
    display: none !important;
}

body.future-map-pro #formlodat .source-picker-control-row {
    max-width: 100%;
    width: 100%;
}

body.future-map-pro .source-picker-open-btn {
    flex: 1 1 100%;
    min-width: 0;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid var(--bb-border);
    border-radius: 11px;
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2));
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1.1;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--bb-primary) 22%, transparent);
}

body.future-map-pro #formlodat .land-note-control,
body.future-map-pro #formlodat #btnSetAppointment {
    width: 100%;
}

body.future-map-pro #formlodat #btnSetAppointment {
    justify-content: center;
}

body.future-map-pro #formlodat #btnOpenUserMediaLibrary,
body.future-map-pro #formlodat #btnSetAppointment,
body.future-map-pro #formlodat .source-picker-open-btn {
    min-height: 34px !important;
    height: 34px !important;
    padding: 5px 9px !important;
    border-radius: 10px !important;
}

body.future-map-pro #formlodat #formLodatLaiRong,
body.future-map-pro #formlodat #formLodatCalculatedPrice {
    margin-top: 0.2rem !important;
    padding: 3px 8px !important;
    font-size: 0.72rem !important;
}

body.future-map-pro #formlodat #formLodatActions {
    margin-top: 0.55rem !important;
    padding-bottom: 12px !important;
}

body.future-map-pro #formlodat #formLodatActions .btn {
    min-height: 36px !important;
    height: 36px !important;
    padding: 6px 12px !important;
}

body.future-map-pro #formlodat #btnSetAppointmentText,
body.future-map-pro #formlodat .source-picker-open-empty,
body.future-map-pro #formlodat .source-picker-open-btn strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.future-map-pro #formlodat #noteAppointmentDisplay {
    min-width: 0 !important;
}

@media (min-width: 768px) and (max-height: 820px) {
    body.future-map-pro #formlodat {
        width: min(580px, calc(100vw - 24px)) !important;
        max-width: 580px !important;
        max-height: calc(100dvh - 18px) !important;
    }

    body.future-map-pro #formlodat h4 {
        padding: 9px 14px 8px !important;
        margin-bottom: 4px !important;
        font-size: 1rem !important;
    }

    body.future-map-pro #formlodat > .row,
    body.future-map-pro #formlodat > .mb-2,
    body.future-map-pro #formlodat > input[type="hidden"] + .d-flex {
        margin-left: 12px !important;
        margin-right: 12px !important;
        margin-bottom: 0.35rem !important;
    }

    body.future-map-pro #formlodat .form-control,
    body.future-map-pro #formlodat .form-select,
    body.future-map-pro #formlodat input[type="text"] {
        min-height: 31px !important;
        height: 31px !important;
        padding: 4px 8px !important;
        font-size: 0.88rem !important;
    }

    body.future-map-pro #formlodat .form-label {
        min-height: 1.35em !important;
        margin-bottom: 2px !important;
        font-size: 0.72rem !important;
    }

    body.future-map-pro #formlodat #formLodatLibraryPreview {
        min-height: 34px !important;
        max-height: 58px !important;
        padding: 4px !important;
    }

    body.future-map-pro #formlodat #formLodatLibraryPreview img,
    body.future-map-pro #formlodat #formLodatLibraryPreview video {
        max-width: 72px !important;
        max-height: 48px !important;
    }

    body.future-map-pro #formlodat .land-finance-grid > [class*="col-"] {
        grid-template-rows: minmax(1.55em, auto) auto minmax(1em, auto);
    }

    body.future-map-pro #formlodat .land-status-source-grid > [class*="col-"] {
        grid-template-rows: minmax(1.45em, auto) auto;
    }

    body.future-map-pro #formlodat [id$="Hint"],
    body.future-map-pro #formlodat [style*="color:#888"] {
        font-size: 0.66rem !important;
    }
}

body.future-map-pro .source-picker-open-btn.has-source {
    justify-content: flex-start;
    background: color-mix(in srgb, var(--bb-success) 12%, var(--bb-surface));
    color: var(--bb-text);
    box-shadow: none;
}

body.future-map-pro #formlodat .land-status-field .form-select {
    width: min(100%, 118px) !important;
}

body.future-map-pro #formlodat .source-picker-open-btn.has-source {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    justify-items: start;
}

body.future-map-pro .source-picker-open-btn img {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 auto;
}

body.future-map-pro .source-picker-open-btn strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.future-map-pro .source-picker-open-btn.has-source span {
    max-width: 48px;
    text-align: left;
    line-height: 1;
}

body.future-map-pro .source-picker-open-btn span {
    color: inherit;
    opacity: 0.88;
}

body.future-map-pro .source-selected-chip img {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    object-fit: cover;
}

body.future-map-pro .source-selected-chip strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.future-map-pro .source-selected-chip span {
    color: var(--bb-muted);
}

body.future-map-pro #formLodatSourcePickerModal,
body.future-map-pro #appointmentPickerModal {
    position: fixed;
    inset: 0;
    z-index: 10000030;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: rgba(2, 6, 23, 0.46);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}

body.future-map-pro #formLodatSourcePickerModal.is-open {
    display: flex;
}

body.future-map-pro .source-picker-shell,
body.future-map-pro #appointmentPickerModal .appointment-picker-shell {
    width: min(560px, calc(100vw - 28px)) !important;
    max-height: min(82dvh, 720px) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bb-elevated) !important;
    border: 1px solid var(--bb-border) !important;
    border-radius: 22px !important;
    color: var(--bb-text) !important;
    box-shadow: var(--bb-shadow) !important;
}

body.future-map-pro #appointmentPickerModal .appointment-picker-shell {
    overflow-y: auto;
    padding: 0 !important;
}

body.future-map-pro .source-picker-head,
body.future-map-pro #appointmentPickerModal h5 {
    margin: 0 !important;
    padding: 14px 16px !important;
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2)) !important;
    color: #fff !important;
}

body.future-map-pro .source-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.future-map-pro .source-picker-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

body.future-map-pro .source-picker-head strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
}

body.future-map-pro .source-picker-head span {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    opacity: 0.82;
}

body.future-map-pro .source-picker-head button {
    width: 36px;
    height: 36px;
    border: 1px solid color-mix(in srgb, #fff 28%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, #fff 16%, transparent);
    color: #fff;
}

body.future-map-pro .source-picker-head .source-picker-add-btn {
    width: auto;
    min-width: 96px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-weight: 900;
}

body.future-map-pro .source-picker-search {
    margin: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid var(--bb-border);
    border-radius: 14px;
    background: var(--bb-surface);
}

body.future-map-pro .source-picker-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--bb-text);
    font-size: 16px;
}

body.future-map-pro .source-picker-list {
    padding: 0 12px 12px;
    overflow: auto;
}

body.future-map-pro .source-picker-item {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 9px;
    border: 1px solid var(--bb-border);
    border-radius: 14px;
    background: var(--bb-surface);
    color: var(--bb-text);
    text-align: left;
}

body.future-map-pro .source-picker-item.is-active,
body.future-map-pro .source-picker-item:hover {
    background: color-mix(in srgb, var(--bb-primary) 12%, var(--bb-surface));
    border-color: color-mix(in srgb, var(--bb-primary) 34%, var(--bb-border));
}

body.future-map-pro .source-picker-item img {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    object-fit: cover;
}

body.future-map-pro .source-picker-item strong,
body.future-map-pro .source-picker-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.future-map-pro .source-picker-item small,
body.future-map-pro .source-picker-item > span,
body.future-map-pro .source-picker-empty {
    color: var(--bb-muted);
}

body.future-map-pro .source-picker-empty {
    padding: 24px;
    text-align: center;
}

body.future-map-pro #formLodatActions {
    border-radius: 18px !important;
    margin: 14px 18px 0 !important;
    overflow: hidden;
}

body.future-map-pro #userMediaLibraryUploadInput + *,
body.future-map-pro label[for="userMediaLibraryUploadInput"] {
    min-height: 54px !important;
    padding: 14px 22px !important;
    border-radius: 16px !important;
    font-size: 1.05rem !important;
    font-weight: 850 !important;
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--bb-primary) 26%, transparent) !important;
}

body.future-map-pro #userMediaLibraryModal > div > div:first-child label[for="userMediaLibraryUploadInput"] {
    display: none !important;
}

body.future-map-pro .media-upload-dropzone {
    padding: 14px 16px !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--bb-primary) 9%, var(--bb-surface)), color-mix(in srgb, var(--bb-primary-2) 8%, var(--bb-surface))) !important;
    border-bottom: 1px solid var(--bb-border) !important;
}

body.future-map-pro .media-upload-primary {
    min-height: 96px !important;
    width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 18px !important;
    border: 2px dashed color-mix(in srgb, var(--bb-primary) 54%, var(--bb-border)) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--bb-primary) 16%, var(--bb-elevated)) !important;
    color: var(--bb-text) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 24%, transparent),
        0 14px 34px color-mix(in srgb, var(--bb-primary) 16%, transparent) !important;
    cursor: pointer;
}

body.future-map-pro .media-upload-primary i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2));
    color: #fff;
    font-size: 1.25rem;
}

body.future-map-pro .media-upload-primary span {
    font-weight: 900;
    font-size: 1.05rem;
}

body.future-map-pro .media-upload-primary small {
    color: var(--bb-muted) !important;
    font-size: 0.82rem;
    text-align: center;
}

body.future-map-pro #userMediaLibraryInfo {
    color: var(--bb-muted) !important;
}

body.future-map-pro #userMediaLibraryInfo strong {
    color: var(--bb-text) !important;
}

body.future-map-pro .media-library-info-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    line-height: 1.5;
}

body.future-map-pro .media-r2-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--bb-border);
    background: color-mix(in srgb, var(--bb-elevated) 82%, transparent);
    color: var(--bb-text);
    font-size: 0.76rem;
    font-weight: 850;
    white-space: nowrap;
}

body.future-map-pro .media-r2-pill.is-r2 {
    border-color: color-mix(in srgb, #38bdf8 44%, var(--bb-border));
    background: color-mix(in srgb, #38bdf8 16%, var(--bb-elevated));
    color: color-mix(in srgb, #0ea5e9 78%, var(--bb-text));
}

body.future-map-pro .media-r2-pill.is-local {
    border-color: color-mix(in srgb, #94a3b8 38%, var(--bb-border));
    background: color-mix(in srgb, #94a3b8 12%, var(--bb-elevated));
}

body.future-map-pro .media-cloud-usage {
    width: min(100%, 720px);
    padding: 10px 12px;
    border: 1px solid var(--bb-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bb-primary) 7%, var(--bb-elevated));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent);
}

body.future-map-pro .media-cloud-usage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--bb-text);
    font-size: 0.86rem;
    font-weight: 900;
}

body.future-map-pro .media-cloud-usage-head span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

body.future-map-pro .media-cloud-usage-head i {
    color: var(--bb-primary);
}

body.future-map-pro .media-cloud-usage-track {
    height: 9px;
    margin: 8px 0 7px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--bb-muted) 18%, var(--bb-surface));
}

body.future-map-pro .media-cloud-usage-track span {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e, var(--bb-primary), var(--bb-primary-2));
}

body.future-map-pro .media-cloud-usage.is-warning .media-cloud-usage-track span {
    background: linear-gradient(90deg, #f59e0b, #f97316);
}

body.future-map-pro .media-cloud-usage.is-danger .media-cloud-usage-track span {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

body.future-map-pro .media-cloud-usage-meta,
body.future-map-pro .media-cloud-usage-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    color: var(--bb-muted);
    font-size: 0.76rem;
    line-height: 1.4;
}

body.future-map-pro .media-cloud-usage-meta strong {
    color: var(--bb-text) !important;
}

body.future-map-pro .media-cloud-usage-sub {
    margin-top: 5px;
    font-size: 0.72rem;
}

body.future-map-pro .media-library-card-footer {
    padding: 8px 9px;
    background: var(--bb-elevated);
    color: var(--bb-text);
    border-top: 1px solid var(--bb-border);
}

body.future-map-pro .media-library-card-title {
    font-size: 0.75rem;
    font-weight: 850;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 6px;
}

body.future-map-pro .media-library-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    color: var(--bb-muted);
    font-size: 0.7rem;
    line-height: 1.3;
}

body.future-map-pro #btnApplyUserMediaSelection {
    min-height: 44px !important;
    padding: 10px 18px !important;
    border-radius: 14px !important;
    font-weight: 850 !important;
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2)) !important;
    border-color: transparent !important;
    color: #fff !important;
}

body.future-map-pro #btnClearUserMediaSelection {
    display: none !important;
}

body.future-map-pro #userMediaTypeFilter {
    display: none !important;
}

body.future-map-pro #appointmentPickerModal .appointment-picker-shell > div:not(:first-child),
body.future-map-pro #appointmentPickerModal .appointment-picker-shell > div:not(:first-child) label,
body.future-map-pro #appointmentPickerModal .appointment-picker-shell small {
    color: var(--bb-text) !important;
}

body.future-map-pro #appointmentPickerModal .appointment-picker-shell > div:not(:first-child) {
    padding-left: 16px;
    padding-right: 16px;
}

body.future-map-pro #appointmentPickerModal textarea,
body.future-map-pro #appointmentPickerModal input {
    background: var(--bb-elevated) !important;
    border-color: var(--bb-border) !important;
    color: var(--bb-text) !important;
}

body.future-map-pro #appointmentPickerModal textarea {
    min-height: 96px;
    font-size: 1rem !important;
}

body.future-map-pro #appointmentDateTimeInput {
    min-height: 56px !important;
    font-size: 1.18rem !important;
}

body.future-map-pro #formlodat .form-control::placeholder {
    color: var(--bb-muted) !important;
    opacity: 0.82;
}

body.future-map-pro #formlodat .form-control:focus,
body.future-map-pro #formlodat .form-select:focus,
body.future-map-pro #formlodat textarea:focus {
    border-color: color-mix(in srgb, var(--bb-primary) 64%, var(--bb-border)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bb-primary) 16%, transparent) !important;
}

body.future-map-pro #formLodatLibraryPreview,
body.future-map-pro #sourceSearchResults,
body.future-map-pro #noteAppointmentDisplay,
body.future-map-pro #formLodatCalculatedPrice,
body.future-map-pro #formLodatLaiRong {
    background: color-mix(in srgb, var(--bb-primary) 8%, var(--bb-surface)) !important;
    border: 1px solid var(--bb-border) !important;
    color: var(--bb-text) !important;
    border-radius: 14px !important;
}

body.future-map-pro #formLodatLibraryPreview {
    min-height: 82px !important;
    padding: 10px !important;
    border-style: dashed !important;
}

body.future-map-pro #formlodat [id$="Hint"],
body.future-map-pro #formlodat [style*="color:#888"],
body.future-map-pro #selectedSourceDisplay,
body.future-map-pro #formLodatLibraryPreview [style*="color:#999"] {
    color: var(--bb-muted) !important;
}

body.future-map-pro #formLodatCalculatedPriceValue,
body.future-map-pro #formLodatLaiRongValue,
body.future-map-pro #formLodatLaiRong i {
    color: var(--bb-primary) !important;
}

body.future-map-pro #formlodat .btn {
    min-height: 40px;
    border-radius: 12px !important;
    font-weight: 780 !important;
}

body.future-map-pro #formlodat .btn-primary,
body.future-map-pro #formlodat .btn-success {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--bb-primary) 24%, transparent) !important;
}

body.future-map-pro #formlodat .btn-secondary,
body.future-map-pro #formlodat .btn-outline-primary,
body.future-map-pro #formlodat .btn-outline-secondary {
    background: var(--bb-surface-2) !important;
    border: 1px solid var(--bb-border) !important;
    color: var(--bb-text) !important;
}

body.future-map-pro #formLodatActions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 3;
    margin: 14px 0 0 !important;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bb-elevated) 82%, transparent), var(--bb-elevated)) !important;
    border-top: 1px solid var(--bb-border) !important;
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
}

body.future-map-pro #formLodatActions .btn {
    flex: 1 1 0;
}

body.future-map-pro #userMediaLibraryModal {
    background: rgba(2, 6, 23, 0.46) !important;
}

body.future-map-pro #userMediaLibraryModal > div {
    background: var(--bb-elevated) !important;
    border: 1px solid var(--bb-border) !important;
    color: var(--bb-text) !important;
    box-shadow: var(--bb-shadow) !important;
}

body.future-map-pro #userMediaLibraryModal [style*="background:#fff"],
body.future-map-pro #userMediaLibraryModal [style*="background: #fff"],
body.future-map-pro #userMediaLibraryModal [style*="background:#f8f9fa"],
body.future-map-pro #userMediaLibraryModal [style*="background:linear-gradient(to right"],
body.future-map-pro #userMediaLibraryModal [style*="background:#fff3cd"] {
    background: var(--bb-surface) !important;
}

body.future-map-pro #userMediaLibraryModal [style*="color:#212529"],
body.future-map-pro #userMediaLibraryModal [style*="color:#856404"],
body.future-map-pro #userMediaLibraryModal [style*="color:#0d6efd"] {
    color: var(--bb-text) !important;
}

body.future-map-pro #userMediaLibraryModal [style*="color:#6c757d"],
body.future-map-pro #userMediaLibraryModal [style*="color:#666"],
body.future-map-pro #userMediaLibraryModal [style*="color:#888"] {
    color: var(--bb-muted) !important;
}

body.future-map-pro #userMediaLibraryModal [style*="border-bottom:1px solid"],
body.future-map-pro #userMediaLibraryModal [style*="border:1px solid"] {
    border-color: var(--bb-border) !important;
}

body.future-map-pro #sourceMembersModal,
body.future-map-pro #addSourceMemberModal,
body.future-map-pro #userMediaLibraryModal {
    background: rgba(2, 6, 23, 0.42) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

body.future-map-pro #sourceMembersModal > div,
body.future-map-pro #addSourceMemberModal > div,
body.future-map-pro #userMediaLibraryModal > div {
    background: var(--bb-elevated) !important;
    border: 1px solid var(--bb-border) !important;
    color: var(--bb-text) !important;
    box-shadow: var(--bb-shadow) !important;
}

body.future-map-pro #sourceMembersModal > div > div:first-child,
body.future-map-pro #userMediaLibraryModal > div > div:first-child,
body.future-map-pro #addSourceMemberModal > div > div:first-child {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2)) !important;
    color: #fff !important;
    border-bottom: 1px solid color-mix(in srgb, #fff 22%, transparent) !important;
}

body.future-map-pro #sourceMembersFrame {
    background: var(--bb-surface) !important;
}

body.future-map-pro #sourceMembersReloadBtn,
body.future-map-pro #btnCloseUserMediaLibrary,
body.future-map-pro #btnToggleSelectedPreview,
body.future-map-pro #closeAddSourceMemberModal {
    background: color-mix(in srgb, #fff 16%, transparent) !important;
    border: 1px solid color-mix(in srgb, #fff 28%, transparent) !important;
    color: #fff !important;
    border-radius: 12px !important;
}

body.future-map-pro #userMediaTypeFilter,
body.future-map-pro #addSourceMemberModal input,
body.future-map-pro #addSourceMemberModal select {
    background: var(--bb-elevated) !important;
    border-color: var(--bb-border) !important;
    color: var(--bb-text) !important;
}

body.future-map-pro #addSourceMemberModal form,
body.future-map-pro #addSourceMemberModal .card,
body.future-map-pro #addSourceSelectedTypeInfo .alert {
    background: var(--bb-surface) !important;
    border-color: var(--bb-border) !important;
    color: var(--bb-text) !important;
}

@media (max-width: 767px) {
    body.future-map-pro #formlodat-modal {
        align-items: center !important;
        padding: 8px !important;
    }

    body.future-map-pro #formlodat {
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
        height: auto !important;
        max-height: calc(100dvh - 28px) !important;
        border-radius: 24px !important;
        margin-top: 0 !important;
        transform: translateY(-3.5dvh);
    }

    body.future-map-pro #formlodat h4 {
        padding: 12px 14px 10px !important;
        font-size: 1rem !important;
        text-align: center !important;
    }

    body.future-map-pro #formlodat #formLodatLayerName {
        margin-left: 4px !important;
    }

    body.future-map-pro #formlodat > .row,
    body.future-map-pro #formlodat > .mb-2 {
        margin-left: 14px !important;
        margin-right: 14px !important;
    }

    body.future-map-pro #formlodat .row {
        --bs-gutter-x: 0.7rem;
        --bs-gutter-y: 0.5rem;
    }

    body.future-map-pro #formlodat .row > [class*="col-"] {
        min-width: 0;
    }

    body.future-map-pro #formlodat .land-identity-grid,
    body.future-map-pro #formlodat .land-basic-grid,
    body.future-map-pro #formlodat .land-finance-grid,
    body.future-map-pro #formlodat .land-status-source-grid {
        display: grid !important;
        align-items: end;
    }

    body.future-map-pro #formlodat .land-identity-grid {
        grid-template-columns: minmax(0, 1.12fr) minmax(92px, 0.88fr);
        column-gap: 0.7rem;
    }

    body.future-map-pro #formlodat .land-basic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0.7rem;
    }

    body.future-map-pro #formlodat .land-status-source-grid {
        align-items: start;
        grid-template-columns: minmax(92px, 0.64fr) minmax(142px, 1.28fr) minmax(138px, 1.08fr);
        column-gap: 0.55rem;
    }

    body.future-map-pro #formlodat .land-status-source-grid > [class*="col-"] {
        display: grid;
        grid-template-rows: minmax(1.9em, auto) auto;
        align-items: start;
    }

    body.future-map-pro #formlodat .land-finance-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
        column-gap: 0.42rem;
        row-gap: 0.35rem;
    }

    body.future-map-pro #formlodat .land-finance-grid > [class*="col-"] {
        display: grid;
        grid-template-rows: minmax(2.1em, auto) auto minmax(1.35em, auto);
        align-items: start;
    }

    body.future-map-pro #formlodat .land-finance-grid .form-control {
        width: min(100%, 128px) !important;
        justify-self: start;
    }

    body.future-map-pro #formlodat #formLodatPrice {
        width: min(100%, 152px) !important;
        font-size: 0.84rem !important;
    }

    body.future-map-pro #formlodat .land-finance-grid [id$="Hint"] {
        min-height: 1.35em;
        margin-top: 0.28rem !important;
        line-height: 1.08;
    }

    body.future-map-pro #formlodat .land-identity-grid > [class*="col-"],
    body.future-map-pro #formlodat .land-basic-grid > [class*="col-"],
    body.future-map-pro #formlodat .land-finance-grid > [class*="col-"],
    body.future-map-pro #formlodat .land-status-source-grid > [class*="col-"] {
        width: auto !important;
        flex: none !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 0 !important;
    }

    body.future-map-pro #formlodat .land-field-name {
        width: auto !important;
        flex: none !important;
        max-width: none !important;
    }

    body.future-map-pro #formlodat .land-field-area {
        width: auto !important;
        flex: none !important;
        max-width: none !important;
    }

    body.future-map-pro #formlodat .land-mobile-half,
    body.future-map-pro #formlodat .land-mobile-finance {
        width: auto !important;
        flex: none !important;
        max-width: none !important;
    }

    body.future-map-pro #formlodat .land-mobile-full {
        width: 100% !important;
        flex: none !important;
        max-width: none !important;
        grid-column: 1 / -1;
    }

    body.future-map-pro #formlodat .land-calculated-row {
        display: flex !important;
        justify-content: center;
        margin-top: -1px !important;
    }

    body.future-map-pro #formlodat .land-finance-grid {
        --bs-gutter-x: 0.42rem;
    }

    body.future-map-pro #formlodat .form-label {
        min-height: 1.82em;
        display: flex !important;
        align-items: flex-end;
        gap: 4px;
        margin-bottom: 4px !important;
        font-size: 0.72rem !important;
        line-height: 1.02 !important;
    }

    body.future-map-pro #formlodat .form-label i {
        font-size: 0.82em !important;
        margin-right: 2px !important;
    }

    body.future-map-pro #formlodat .form-control,
    body.future-map-pro #formlodat .form-select {
        min-height: 36px;
        height: 36px;
        padding: 5px 9px !important;
        border-radius: 10px !important;
        font-size: 16px !important;
    }

    body.future-map-pro #formlodat .form-select {
        padding-right: 22px !important;
    }

    body.future-map-pro #formLodatLibraryPreview {
        min-height: 54px !important;
        padding: 7px !important;
        margin-top: 6px !important;
        align-items: center;
        justify-content: center;
    }

    body.future-map-pro #formLodatCalculatedPrice {
        width: min(100%, 360px);
        margin: 3px auto 0 !important;
        padding: 4px 10px !important;
        font-size: 0.68rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }

    body.future-map-pro #formLodatLaiRong {
        padding: 0.34rem 0 !important;
        font-size: 0.78rem !important;
    }

    body.future-map-pro #sourceSearchInput {
        min-width: 0;
    }

    body.future-map-pro .source-picker-open-btn {
        min-height: 36px;
        height: 36px;
        padding: 5px 7px;
        font-size: 0.76rem;
        border-radius: 10px;
        flex-basis: 100%;
        gap: 4px;
    }

    body.future-map-pro .source-picker-open-btn img {
        width: 20px;
        height: 20px;
    }

    body.future-map-pro .source-picker-open-btn strong,
    body.future-map-pro #btnSetAppointmentText {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.future-map-pro #formlodat .land-status-source-grid .form-label {
        min-height: 1.2em;
        align-items: center;
    }

    body.future-map-pro #formlodat .land-source-field > div[style*="display:flex"] {
        display: flex !important;
        max-width: 100%;
        gap: 4px !important;
        align-items: center;
    }

    body.future-map-pro #formlodat .source-picker-open-empty {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        max-width: 100%;
    }

    body.future-map-pro #formlodat .land-note-control {
        display: flex !important;
        width: 100%;
    }

    body.future-map-pro #selectedSourceDisplay {
        min-height: 18px !important;
        margin-top: 4px !important;
        font-size: 0.74rem !important;
        line-height: 1.15 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.future-map-pro #sourceDropdownToggle,
    body.future-map-pro #btnAddNewSource,
    body.future-map-pro #btnOpenUserMediaLibrary,
    body.future-map-pro #btnSetAppointment {
        min-height: 36px !important;
        height: 36px !important;
        padding: 5px 9px !important;
        font-size: 0.82rem !important;
        border-radius: 10px !important;
    }

    body.future-map-pro #formlodat label[style*="justify-content:space-between"] {
        align-items: center !important;
        justify-content: center !important;
        flex-direction: row !important;
        gap: 8px !important;
        text-align: center;
    }

    body.future-map-pro #btnOpenUserMediaLibrary,
    body.future-map-pro #btnSetAppointment {
        justify-content: center;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    body.future-map-pro #formLodatActions {
        gap: 8px !important;
        margin: 10px 12px 0 !important;
        padding: 9px 12px calc(9px + env(safe-area-inset-bottom)) !important;
        border-radius: 16px 16px 0 0 !important;
    }

    body.future-map-pro #formLodatActions .btn {
        min-height: 38px;
        height: 38px;
        font-size: 0.9rem !important;
    }

    body.future-map-pro #formlodat .land-note-row {
        display: flex !important;
        justify-content: center;
        margin-top: 0 !important;
    }

    body.future-map-pro #formlodat .land-note-row > .land-mobile-full {
        width: auto !important;
        flex: 0 1 auto !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.future-map-pro #formlodat .land-note-row > .land-mobile-full > div {
        justify-content: center !important;
    }

    body.future-map-pro #noteAppointmentDisplay {
        width: min(100%, 320px);
        flex: 0 1 320px !important;
        text-align: center;
    }

    body.future-map-pro #userMediaLibraryModal {
        align-items: center !important;
        padding: 8px !important;
    }

    body.future-map-pro #sourceMembersModal,
    body.future-map-pro #addSourceMemberModal {
        align-items: center !important;
        padding: 8px !important;
    }

    body.future-map-pro #sourceMembersModal > div {
        width: calc(100vw - 16px) !important;
        height: min(78dvh, 720px) !important;
        border-radius: 22px !important;
    }

    body.future-map-pro #userMediaLibraryModal > div {
        width: calc(100vw - 16px) !important;
        max-height: min(82dvh, 720px) !important;
        border-radius: 22px !important;
    }

    body.future-map-pro #addSourceMemberModal > div {
        width: calc(100vw - 16px) !important;
        max-height: min(84dvh, 640px) !important;
        border-radius: 22px !important;
    }

    body.future-map-pro #userMediaLibraryModal > div > div:first-child,
    body.future-map-pro #sourceMembersModal > div > div:first-child {
        padding: 10px 12px !important;
    }

    body.future-map-pro #userMediaLibraryModal > div > div:first-child {
        flex-wrap: wrap;
    }

    body.future-map-pro #userMediaLibraryModal > div > div:first-child > div:first-child {
        width: 100%;
        text-align: center;
        font-size: 0.95rem !important;
    }

    body.future-map-pro #userMediaLibraryModal > div > div:first-child > div:last-child {
        width: 100%;
        justify-content: center;
        gap: 6px !important;
    }

    body.future-map-pro #userMediaLibraryModal > div > div:nth-child(2) {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px !important;
        padding: 10px 12px !important;
        text-align: center;
    }

    body.future-map-pro #userMediaLibraryModal > div > div:nth-child(2) > div:last-child {
        justify-content: center;
    }

    body.future-map-pro #userMediaLibraryBody {
        padding: 10px 12px !important;
    }

    body.future-map-pro #userMediaLibraryGrid {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important;
        gap: 8px !important;
    }
}

@media (min-width: 430px) and (max-width: 767px) {
    body.future-map-pro #formlodat .land-mobile-finance {
        width: auto !important;
        flex: none !important;
        max-width: none !important;
    }

    body.future-map-pro #formlodat .land-finance-grid {
        --bs-gutter-x: 0.46rem;
    }
}

@media (max-width: 360px) {
    body.future-map-pro #formlodat .land-identity-grid,
    body.future-map-pro #formlodat .land-basic-grid {
        grid-template-columns: 1fr;
    }

    body.future-map-pro #formlodat .form-label {
        min-height: 0;
    }
}

@media (min-width: 768px) {
    body.future-map-pro #formlodat .col-6 {
        width: 50% !important;
    }
}

@media (orientation: landscape) and (max-height: 560px) {
    body.future-map-pro #formlodat-modal {
        align-items: center !important;
        padding: 6px !important;
    }

    body.future-map-pro #formlodat {
        max-height: calc(100dvh - 12px) !important;
        border-radius: 18px !important;
        transform: none;
    }

    body.future-map-pro #formlodat h4 {
        padding: 11px 16px !important;
        font-size: 1rem !important;
    }
}

/* Login and registration surfaces share the same theme tokens as admin/map. */
body.auth-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--bb-primary) 22%, transparent), transparent 34%),
        radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--bb-accent) 16%, transparent), transparent 30%),
        linear-gradient(135deg, var(--bb-bg), var(--bb-bg-2)) !important;
    color: var(--bb-text) !important;
}

body.auth-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(color-mix(in srgb, var(--bb-border) 42%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--bb-border) 42%, transparent) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.52), transparent 72%);
    opacity: 0.42;
}

body.auth-page .login-container {
    position: relative;
    z-index: 1;
}

body.auth-page .login-card {
    background: var(--bb-elevated) !important;
    color: var(--bb-text) !important;
    border: 1px solid var(--bb-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--bb-shadow) !important;
}

body.auth-page .login-icon {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2)) !important;
    color: #fff !important;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--bb-primary) 34%, transparent) !important;
}

body.auth-page .login-title,
body.auth-page .form-label,
body.auth-page .terms-check .form-check-label,
body.auth-page .role-info h6,
body.auth-page .modal-body h5,
body.auth-page .modal-body [style*="color: #2c3e50"],
body.auth-page .modal-body [style*="color:#2c3e50"] {
    color: var(--bb-text) !important;
}

body.auth-page .login-subtitle,
body.auth-page .form-text,
body.auth-page .role-info p,
body.auth-page .modal-body p,
body.auth-page .modal-body [style*="color: #666"],
body.auth-page .modal-body [style*="color:#666"] {
    color: var(--bb-muted) !important;
}

body.auth-page .tab-navigation,
body.auth-page .role-info,
body.auth-page .terms-check,
body.auth-page .register-link {
    background: color-mix(in srgb, var(--bb-primary) 9%, var(--bb-surface)) !important;
    border-color: var(--bb-border) !important;
}

body.auth-page .register-link {
    border-top: 1px solid var(--bb-border) !important;
}

body.auth-page .tab-btn,
body.auth-page .input-group-text,
body.auth-page .password-toggle-btn {
    color: var(--bb-muted) !important;
}

body.auth-page .tab-btn:hover,
body.auth-page .back-to-map a,
body.auth-page .register-btn,
body.auth-page .terms-link,
body.auth-page .password-toggle-btn:hover {
    color: var(--bb-primary) !important;
}

body.auth-page .tab-btn.active {
    background: var(--bb-elevated) !important;
    color: var(--bb-primary) !important;
    box-shadow: var(--bb-shadow-soft) !important;
}

body.auth-page .form-control,
body.auth-page .input-group-text {
    background: var(--bb-surface) !important;
    border-color: var(--bb-border) !important;
    color: var(--bb-text) !important;
}

body.auth-page .input-group .form-control {
    border-left-color: transparent !important;
}

body.auth-page .form-control::placeholder {
    color: var(--bb-muted) !important;
}

body.auth-page .form-control:focus {
    background: var(--bb-elevated) !important;
    border-color: var(--bb-primary) !important;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--bb-primary) 22%, transparent) !important;
    color: var(--bb-text) !important;
}

body.auth-page .btn-login,
body.auth-page .btn-register,
body.auth-page .modal-footer .btn-primary {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--bb-primary) 24%, transparent) !important;
}

body.auth-page .btn-login:hover,
body.auth-page .btn-register:hover,
body.auth-page .modal-footer .btn-primary:hover {
    color: #fff !important;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--bb-primary) 30%, transparent) !important;
}

body.auth-page .register-btn,
body.auth-page .btn-outline-warning {
    background: transparent !important;
    border-color: var(--bb-primary) !important;
    color: var(--bb-primary) !important;
}

body.auth-page .register-btn:hover,
body.auth-page .btn-outline-warning:hover {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2)) !important;
    color: #fff !important;
}

body.auth-page .alert {
    background: color-mix(in srgb, var(--bb-elevated) 88%, var(--bb-primary)) !important;
    border: 1px solid var(--bb-border) !important;
    color: var(--bb-text) !important;
}

body.auth-page .alert-success {
    background: color-mix(in srgb, var(--bb-success) 14%, var(--bb-elevated)) !important;
    color: var(--bb-text) !important;
}

body.auth-page .alert-danger,
body.auth-page .error-message,
body.auth-page .form-control.error {
    border-color: color-mix(in srgb, var(--bb-danger) 70%, var(--bb-border)) !important;
}

body.auth-page .error-message {
    background: color-mix(in srgb, var(--bb-danger) 13%, var(--bb-elevated)) !important;
    color: var(--bb-danger) !important;
}

body.auth-page .modal-content {
    background: var(--bb-elevated) !important;
    border: 1px solid var(--bb-border) !important;
    color: var(--bb-text) !important;
    box-shadow: var(--bb-shadow) !important;
}

body.auth-page .modal-header {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-2)) !important;
}

body.auth-page .modal-body,
body.auth-page .modal-footer {
    background: var(--bb-elevated) !important;
    border-color: var(--bb-border) !important;
}

@media (max-width: 640px) {
    body.auth-page {
        align-items: flex-start !important;
        padding-top: 14px;
        padding-bottom: 96px;
    }

    body.auth-page .login-container {
        padding: 12px;
    }

    body.auth-page .login-card {
        border-radius: 16px !important;
        padding: 26px 18px !important;
    }

    .bb-theme-panel {
        align-items: flex-end;
        padding: 10px;
    }

    .bb-theme-dialog {
        max-height: min(760px, calc(100vh - 20px));
        border-radius: 16px 16px 12px 12px;
    }

    .bb-theme-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
    }

    .bb-theme-option {
        grid-template-columns: 68px minmax(0, 1fr);
        min-height: 86px;
    }
}