/* Premium appearance themes — org tier premium only */

html[data-appearance="premium-light"] {
    color-scheme: light;
    --premium-stroke: linear-gradient(135deg, #22d3ee 0%, #38bdf8 16%, #3b82f6 38%, #6366f1 56%, #a855f7 74%, #d946ef 92%, #ec4899 100%);
    --premium-surface-light: linear-gradient(158deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 250, 252, 0.9) 48%, rgba(241, 245, 249, 0.88) 100%);
    --premium-surface-glass: linear-gradient(155deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.84));
    --premium-glow: 0 12px 42px rgba(59, 130, 246, 0.14), 0 0 28px rgba(34, 211, 238, 0.1);
    --premium-btn-light: linear-gradient(135deg, #22d3ee 0%, #3b82f6 38%, #6366f1 62%, #a855f7 88%, #d946ef 100%);
    --premium-btn-light-shadow: 0 10px 26px rgba(59, 130, 246, 0.28), 0 0 16px rgba(168, 85, 247, 0.14);
    --app-page-bg: #f8fafc;
    --app-chrome-text: #0f172a;
    --app-chrome-muted: #64748b;
}

html[data-appearance="premium-dark"] {
    --premium-stroke: linear-gradient(135deg, #fcd34d 0%, #d4af37 12%, #a78bfa 28%, #6366f1 46%, #4c1d95 64%, #312e81 78%, #d4af37 92%, #fde68a 100%);
    --premium-surface-dark: linear-gradient(165deg, rgba(28, 16, 48, 0.97) 0%, rgba(12, 6, 24, 0.96) 52%, rgba(8, 4, 18, 0.98) 100%);
    --premium-glow: 0 14px 48px rgba(0, 0, 0, 0.55), 0 0 36px rgba(99, 102, 241, 0.22), 0 0 24px rgba(212, 175, 55, 0.12);
    --premium-btn-dark: linear-gradient(135deg, #6366f1 0%, #4c1d95 42%, #7c3aed 58%, #b8860b 82%, #d4af37 100%);
    --premium-btn-dark-shadow: 0 10px 28px rgba(76, 29, 149, 0.42), 0 0 18px rgba(212, 175, 55, 0.22);
    --app-page-bg: #07060d;
    --app-chrome-bg: rgba(18, 12, 32, 0.9);
    --app-chrome-bg-strong: rgba(24, 16, 42, 0.96);
    --app-chrome-text: #f5f3ff;
    --app-chrome-muted: #c4b5fd;
    --app-chrome-border: rgba(167, 139, 250, 0.22);
    --app-field-bg: rgba(12, 8, 24, 0.72);
    --app-dialog-surface: linear-gradient(145deg, rgba(24, 16, 42, 0.98), rgba(10, 8, 20, 0.99));
}

/* Gradient stroke shell — sidebar, top bar, legend */
html[data-appearance="premium-light"] #sidebar,
html[data-appearance="premium-light"] #top-menu,
html[data-appearance="premium-light"] .map-legend,
html[data-appearance="premium-light"] #color-legend.map-legend,
html[data-appearance="premium-dark"] #sidebar,
html[data-appearance="premium-dark"] #top-menu,
html[data-appearance="premium-dark"] .map-legend,
html[data-appearance="premium-dark"] #color-legend.map-legend {
    border: 1.5px solid transparent !important;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
}

html[data-appearance="premium-light"] #sidebar,
html[data-appearance="premium-light"] #top-menu,
html[data-appearance="premium-light"] .map-legend,
html[data-appearance="premium-light"] #color-legend.map-legend {
    background-color: transparent !important;
    background-image: var(--premium-surface-light), var(--premium-stroke) !important;
    box-shadow: var(--premium-glow), 0 0 0 1px rgba(255, 255, 255, 0.72) inset !important;
    color: #0f172a !important;
}

html[data-appearance="premium-dark"] #sidebar,
html[data-appearance="premium-dark"] #top-menu,
html[data-appearance="premium-dark"] .map-legend,
html[data-appearance="premium-dark"] #color-legend.map-legend {
    background-image: var(--premium-surface-dark), var(--premium-stroke) !important;
    box-shadow: var(--premium-glow) !important;
    color: #f5f3ff !important;
}

html[data-appearance="premium-light"] #sidebar h1,
html[data-appearance="premium-light"] #sidebar h1 strong,
html[data-appearance="premium-light"] #sidebar label,
html[data-appearance="premium-light"] #sidebar .sidebar-section-title,
html[data-appearance="premium-light"] #sidebar p,
html[data-appearance="premium-light"] #sidebar span,
html[data-appearance="premium-light"] #sidebar div,
html[data-appearance="premium-light"] #sidebar strong,
html[data-appearance="premium-light"] #feed-me-data-text,
html[data-appearance="premium-light"] #sidebar .unit-suffix,
html[data-appearance="premium-light"] #sidebar input:not([type="range"]),
html[data-appearance="premium-light"] #sidebar select {
    color: #0f172a !important;
}

html[data-appearance="premium-dark"] #sidebar h1,
html[data-appearance="premium-dark"] #sidebar h1 strong,
html[data-appearance="premium-dark"] #sidebar label,
html[data-appearance="premium-dark"] #sidebar .sidebar-section-title,
html[data-appearance="premium-dark"] #sidebar p,
html[data-appearance="premium-dark"] #sidebar span,
html[data-appearance="premium-dark"] #sidebar div,
html[data-appearance="premium-dark"] #sidebar strong,
html[data-appearance="premium-dark"] #feed-me-data-text,
html[data-appearance="premium-dark"] #sidebar .unit-suffix,
html[data-appearance="premium-dark"] #stroke-width-value {
    color: #f8fafc !important;
}

html[data-appearance="premium-light"] #top-menu .button-group button,
html[data-appearance="premium-light"] #top-menu .button-group button span,
html[data-appearance="premium-light"] #top-menu .import-dropdown-btn,
html[data-appearance="premium-light"] #top-menu .download-dropdown-btn {
    color: #0f172a !important;
}

html[data-appearance="premium-dark"] #top-menu .button-group button,
html[data-appearance="premium-dark"] #top-menu .button-group button span,
html[data-appearance="premium-dark"] #top-menu .button-group button:hover,
html[data-appearance="premium-dark"] #top-menu .button-group button:hover span,
html[data-appearance="premium-dark"] #top-menu .import-dropdown-btn,
html[data-appearance="premium-dark"] #top-menu .download-dropdown-btn {
    color: #f8fafc !important;
}

html[data-appearance="premium-light"] #top-menu button,
html[data-appearance="premium-light"] .hamburger-menu-btn {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    color: #0f172a !important;
}

html[data-appearance="premium-light"] #top-menu button:hover,
html[data-appearance="premium-light"] .hamburger-menu-btn:hover {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}

html[data-appearance="premium-dark"] #top-menu button,
html[data-appearance="premium-dark"] .hamburger-menu-btn {
    background: rgba(18, 12, 32, 0.72) !important;
    border-color: rgba(167, 139, 250, 0.22) !important;
    color: #f5f3ff !important;
}

html[data-appearance="premium-dark"] #top-menu button:hover,
html[data-appearance="premium-dark"] .hamburger-menu-btn:hover {
    background: rgba(36, 24, 58, 0.82) !important;
    border-color: rgba(129, 140, 248, 0.45) !important;
}

html[data-appearance="premium-light"] .hamburger-menu-btn,
html[data-appearance="premium-dark"] .hamburger-menu-btn {
    border: 1.5px solid transparent !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
}

html[data-appearance="premium-light"] .hamburger-menu-btn {
    background-image: var(--premium-surface-glass), var(--premium-stroke) !important;
}

html[data-appearance="premium-dark"] .hamburger-menu-btn {
    background-image: var(--premium-surface-dark), var(--premium-stroke) !important;
}

html[data-appearance="premium-light"] .user-profile-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1.5px solid transparent !important;
    background-image: var(--premium-surface-glass), var(--premium-stroke) !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
    color: #0f172a !important;
    box-shadow: var(--premium-glow) !important;
}

html[data-appearance="premium-dark"] .user-profile-btn {
    background-image: var(--premium-surface-dark), var(--premium-stroke) !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
    border: 1.5px solid transparent !important;
    color: #f5f3ff !important;
    box-shadow: var(--premium-glow) !important;
}

html[data-appearance="premium-light"] .extraction-progress {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.22);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
    color: #0f172a;
}

html[data-appearance="premium-light"] #extraction-progress-percent {
    color: #2563eb;
}

html[data-appearance="premium-light"] .map-legend-title,
html[data-appearance="premium-light"] .map-legend-content,
html[data-appearance="premium-light"] .legend-item {
    color: #334155 !important;
}

html[data-appearance="premium-dark"] .map-legend-title,
html[data-appearance="premium-dark"] .map-legend-content,
html[data-appearance="premium-dark"] .legend-item {
    color: #e9d5ff !important;
}

html[data-appearance="premium-light"] body {
    background-color: var(--app-page-bg);
    background-image:
        radial-gradient(48rem 48rem at 0% -10%, rgba(34, 211, 238, 0.1), transparent 58%),
        radial-gradient(42rem 42rem at 100% 0%, rgba(168, 85, 247, 0.08), transparent 55%),
        radial-gradient(40rem 40rem at 80% 110%, rgba(59, 130, 246, 0.08), transparent 60%);
}

html[data-appearance="premium-dark"] body {
    background-color: var(--app-page-bg);
    background-image:
        radial-gradient(52rem 52rem at 6% -12%, rgba(99, 102, 241, 0.22), transparent 58%),
        radial-gradient(44rem 44rem at 102% 2%, rgba(34, 211, 238, 0.12), transparent 55%),
        radial-gradient(48rem 48rem at 72% 108%, rgba(217, 70, 239, 0.14), transparent 60%);
}

html[data-appearance="premium-dark"] #map {
    background-color: var(--app-page-bg);
}

html[data-appearance="premium-light"] body.glass-body {
    --bg: #f8fafc;
    --text: #0f172a;
    --text-muted: #64748b;
    --hairline: rgba(59, 130, 246, 0.18);
    --hairline-soft: rgba(34, 211, 238, 0.12);
    --glass: rgba(255, 255, 255, 0.72);
    --glass-strong: rgba(255, 255, 255, 0.88);
    --glass-inset: rgba(248, 250, 252, 0.82);
    --shadow: 0 10px 30px rgba(59, 130, 246, 0.1), 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 20px 50px rgba(99, 102, 241, 0.14), 0 4px 12px rgba(15, 23, 42, 0.08);
    background-color: var(--bg);
    background-image:
        radial-gradient(42rem 42rem at 8% -8%, rgba(34, 211, 238, 0.12), transparent 60%),
        radial-gradient(38rem 38rem at 102% 4%, rgba(168, 85, 247, 0.1), transparent 60%),
        radial-gradient(46rem 46rem at 78% 108%, rgba(59, 130, 246, 0.1), transparent 60%);
}

html[data-appearance="premium-dark"] body.glass-body {
    --bg: #07060d;
    --text: #f5f3ff;
    --text-muted: #c4b5fd;
    --hairline: rgba(167, 139, 250, 0.2);
    --hairline-soft: rgba(99, 102, 241, 0.12);
    --glass: rgba(24, 16, 42, 0.68);
    --glass-strong: rgba(30, 20, 52, 0.84);
    --glass-inset: rgba(12, 8, 24, 0.62);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(99, 102, 241, 0.12);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(168, 85, 247, 0.14);
    background-color: var(--bg);
    background-image:
        radial-gradient(42rem 42rem at 8% -8%, rgba(99, 102, 241, 0.2), transparent 60%),
        radial-gradient(38rem 38rem at 102% 4%, rgba(34, 211, 238, 0.12), transparent 60%),
        radial-gradient(46rem 46rem at 78% 108%, rgba(217, 70, 239, 0.14), transparent 60%);
}

html[data-appearance="premium-light"] body.glass-body .glass-panel,
html[data-appearance="premium-dark"] body.glass-body .glass-panel {
    border: 1.5px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
}

html[data-appearance="premium-light"] body.glass-body .glass-panel {
    background-image: var(--premium-surface-glass), var(--premium-stroke);
    box-shadow: var(--premium-glow);
}

html[data-appearance="premium-dark"] body.glass-body .glass-panel {
    background-image: var(--premium-surface-dark), var(--premium-stroke);
    box-shadow: var(--premium-glow);
}

/* Settings picker — premium options */
.appearance-premium-tag {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1a1408;
    background: linear-gradient(135deg, #ffe9a8, #d4af37 50%, #b8860b);
    vertical-align: middle;
}

.settings-radio-option.is-premium-locked {
    opacity: 0.72;
}

.settings-radio-option.is-premium-locked .settings-option-description::after {
    content: ' · Premium plan required';
    color: #b45309;
    font-weight: 600;
}

html[data-appearance="dark"] .settings-radio-option.is-premium-locked .settings-option-description::after,
html[data-appearance="dark-blue"] .settings-radio-option.is-premium-locked .settings-option-description::after,
html[data-appearance="premium-dark"] .settings-radio-option.is-premium-locked .settings-option-description::after {
    color: #fcd34d;
}

.appearance-picker .settings-radio-option:has(input[value="premium-light"]:checked),
.appearance-picker .settings-radio-option:has(input[value="premium-dark"]:checked) {
    border-color: rgba(168, 85, 247, 0.55) !important;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(168, 85, 247, 0.1)) !important;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.12);
}

html[data-appearance="premium-light"] .appearance-picker .settings-option-title,
html[data-appearance="premium-dark"] .appearance-picker .settings-option-title {
    color: inherit !important;
}

/* Login — premium dark (indigo + gold) */
html[data-appearance="premium-dark"] body.glass-body:has(.auth-shell--premium-dark) {
    color: #f5f3ff;
    background-color: #07060d;
    background-image:
        radial-gradient(52rem 52rem at 8% -10%, rgba(99, 102, 241, 0.26), transparent 58%),
        radial-gradient(44rem 44rem at 96% 4%, rgba(212, 175, 55, 0.14), transparent 55%),
        radial-gradient(48rem 48rem at 50% 108%, rgba(76, 29, 149, 0.2), transparent 60%);
}

html[data-appearance="premium-dark"] .auth-shell--premium-dark .auth-card--premium {
    border: 1.5px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: var(--premium-surface-dark), var(--premium-stroke);
    box-shadow: var(--premium-glow);
}

html[data-appearance="premium-dark"] .auth-shell--premium-dark .auth-mascot {
    background: radial-gradient(circle at 50% 42%, rgba(99, 102, 241, 0.18), rgba(12, 6, 24, 0.15) 68%);
    box-shadow: 0 0 44px rgba(167, 139, 250, 0.22), 0 0 28px rgba(212, 175, 55, 0.12);
}

html[data-appearance="premium-dark"] .auth-shell--premium-dark .auth-title {
    color: #faf5ff;
}

html[data-appearance="premium-dark"] .auth-shell--premium-dark .auth-subtitle {
    color: rgba(196, 181, 253, 0.82);
}

html[data-appearance="premium-dark"] .auth-shell--premium-dark .field label {
    color: rgba(196, 181, 253, 0.78);
}

html[data-appearance="premium-dark"] .auth-shell--premium-dark .field input {
    background: rgba(12, 8, 24, 0.72);
    border-color: rgba(167, 139, 250, 0.22);
    color: #f5f3ff;
}

html[data-appearance="premium-dark"] .auth-shell--premium-dark .field input:focus {
    border-color: rgba(212, 175, 55, 0.55);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.28);
    background: rgba(18, 12, 32, 0.82);
}

html[data-appearance="premium-dark"] .auth-shell--premium-dark .btn-premium {
    background: var(--premium-btn-dark);
    box-shadow: var(--premium-btn-dark-shadow);
    color: #fffbeb;
}

html[data-appearance="premium-dark"] .auth-shell--premium-dark .btn-premium:hover {
    box-shadow: 0 12px 32px rgba(76, 29, 149, 0.48), 0 0 22px rgba(212, 175, 55, 0.28);
}

html[data-appearance="premium-dark"] .auth-shell--premium-dark .auth-footer--links a {
    color: rgba(196, 181, 253, 0.92);
}

html[data-appearance="premium-dark"] .auth-shell--premium-dark .auth-footer--links a:hover {
    color: #fde68a;
}

/* Login — premium light (gradient strokes + premium buttons) */
html[data-appearance="premium-light"] body.glass-body:has(.auth-shell--premium-light) {
    background-color: #f8fafc;
    background-image:
        radial-gradient(42rem 42rem at 8% -8%, rgba(34, 211, 238, 0.12), transparent 60%),
        radial-gradient(38rem 38rem at 102% 4%, rgba(168, 85, 247, 0.1), transparent 60%),
        radial-gradient(46rem 46rem at 78% 108%, rgba(59, 130, 246, 0.1), transparent 60%);
}

html[data-appearance="premium-light"] .auth-shell--premium-light .auth-card--premium {
    border: 1.5px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: var(--premium-surface-light), var(--premium-stroke);
    box-shadow: var(--premium-glow), 0 0 0 1px rgba(255, 255, 255, 0.72) inset;
}

html[data-appearance="premium-light"] .auth-shell--premium-light .auth-mascot {
    background: radial-gradient(circle at 50% 42%, rgba(59, 130, 246, 0.1), rgba(248, 250, 252, 0.4) 68%);
    box-shadow: 0 0 32px rgba(59, 130, 246, 0.14);
}

html[data-appearance="premium-light"] .auth-shell--premium-light .auth-title {
    color: #0f172a;
}

html[data-appearance="premium-light"] .auth-shell--premium-light .auth-subtitle {
    color: #64748b;
}

html[data-appearance="premium-light"] .auth-shell--premium-light .field input {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.28);
}

html[data-appearance="premium-light"] .auth-shell--premium-light .field input:focus {
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18);
}

html[data-appearance="premium-light"] .auth-shell--premium-light .btn-premium {
    border: 1.5px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: var(--premium-btn-light), var(--premium-stroke);
    box-shadow: var(--premium-btn-light-shadow);
    color: #fff;
}

html[data-appearance="premium-light"] .auth-shell--premium-light .btn-premium:hover {
    box-shadow: 0 12px 30px rgba(99, 102, 241, 0.32), 0 0 18px rgba(34, 211, 238, 0.16);
    transform: translateY(-1px);
}

html[data-appearance="premium-light"] .auth-shell--premium-light .auth-footer--links a {
    color: #4f46e5;
}

/* Map page — premium themes (canvas + chrome) */
html[data-appearance="premium-dark"] {
    color-scheme: dark;
}

html[data-appearance="premium-dark"] body,
html[data-appearance="premium-dark"] #map,
html[data-appearance="premium-dark"] #map > div,
html[data-appearance="premium-dark"] .deck-widget-container {
    background-color: var(--app-page-bg) !important;
}

html[data-appearance="premium-light"] #map,
html[data-appearance="premium-light"] #map > div,
html[data-appearance="premium-light"] .deck-widget-container {
    background-color: var(--app-page-bg) !important;
}

html[data-appearance="premium-dark"] #sidebar,
html[data-appearance="premium-dark"] #top-menu,
html[data-appearance="premium-dark"] .map-legend,
html[data-appearance="premium-dark"] #color-legend.map-legend,
html[data-appearance="premium-light"] #sidebar,
html[data-appearance="premium-light"] #top-menu,
html[data-appearance="premium-light"] .map-legend,
html[data-appearance="premium-light"] #color-legend.map-legend {
    border: 1.5px solid transparent !important;
    background-color: transparent !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
    background-image: var(--premium-surface-light), var(--premium-stroke) !important;
}

/* Toolbar buttons — flat inside the gradient shell (no per-button gradient stroke) */
html[data-appearance="premium-light"] #top-menu button:not(.user-profile-btn),
html[data-appearance="premium-light"] #top-menu .button-group button,
html[data-appearance="premium-light"] #top-menu .import-dropdown-btn,
html[data-appearance="premium-light"] #top-menu .download-dropdown-btn {
    background: rgba(255, 255, 255, 0.55) !important;
    background-image: none !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    box-shadow: none !important;
    color: #0f172a !important;
}

html[data-appearance="premium-light"] #top-menu button:not(.user-profile-btn):hover,
html[data-appearance="premium-light"] #top-menu .button-group button:hover,
html[data-appearance="premium-light"] #top-menu .import-dropdown-btn:hover,
html[data-appearance="premium-light"] #top-menu .download-dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}

html[data-appearance="premium-dark"] #top-menu button:not(.user-profile-btn),
html[data-appearance="premium-dark"] #top-menu .button-group button,
html[data-appearance="premium-dark"] #top-menu .import-dropdown-btn,
html[data-appearance="premium-dark"] #top-menu .download-dropdown-btn {
    background: rgba(18, 12, 32, 0.55) !important;
    background-image: none !important;
    border: 1px solid rgba(167, 139, 250, 0.2) !important;
    box-shadow: none !important;
    color: #f5f3ff !important;
}

html[data-appearance="premium-dark"] #top-menu button:not(.user-profile-btn):hover,
html[data-appearance="premium-dark"] #top-menu .button-group button:hover,
html[data-appearance="premium-dark"] #top-menu .import-dropdown-btn:hover,
html[data-appearance="premium-dark"] #top-menu .download-dropdown-btn:hover {
    background: rgba(36, 24, 58, 0.78) !important;
    border-color: rgba(167, 139, 250, 0.4) !important;
}

html[data-appearance="premium-light"] .hamburger-menu-btn,
html[data-appearance="premium-light"] .user-profile-btn {
    border: 1.5px solid transparent !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
}

html[data-appearance="premium-light"] .oph-btn-primary,
html[data-appearance="premium-light"] .settings-primary-button,
html[data-appearance="premium-light"] .primary-button,
html[data-appearance="premium-light"] .btn-primary {
    border: 1.5px solid transparent !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
    background-image: var(--premium-btn-light), var(--premium-stroke) !important;
    box-shadow: var(--premium-btn-light-shadow) !important;
    color: #fff !important;
}

html[data-appearance="premium-dark"] .oph-btn-primary,
html[data-appearance="premium-dark"] .settings-primary-button,
html[data-appearance="premium-dark"] .primary-button,
html[data-appearance="premium-dark"] .btn-primary {
    background: var(--premium-btn-dark) !important;
    box-shadow: var(--premium-btn-dark-shadow) !important;
    color: #fffbeb !important;
    border: none !important;
}

html[data-appearance="premium-light"] [id$="-dialog"] .dialog-card,
html[data-appearance="premium-light"] .cloud-project-dialog-card,
html[data-appearance="premium-dark"] [id$="-dialog"] .dialog-card,
html[data-appearance="premium-dark"] .cloud-project-dialog-card {
    border: 1.5px solid transparent !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
}

html[data-appearance="premium-light"] [id$="-dialog"] .dialog-card,
html[data-appearance="premium-light"] .cloud-project-dialog-card {
    background-image: var(--premium-surface-light), var(--premium-stroke) !important;
    box-shadow: var(--premium-glow) !important;
}

html[data-appearance="premium-dark"] [id$="-dialog"] .dialog-card,
html[data-appearance="premium-dark"] .cloud-project-dialog-card {
    background-image: var(--premium-surface-dark), var(--premium-stroke) !important;
    box-shadow: var(--premium-glow) !important;
    color: #f5f3ff !important;
}

/* Map floating controls — solid pills (readable over the basemap) */
html[data-appearance="premium-light"] #geocoder-toggle-btn,
html[data-appearance="premium-light"] #toggle-measuring-tool {
    background: rgba(255, 255, 255, 0.96) !important;
    background-image: none !important;
    border: 1px solid rgba(100, 116, 139, 0.4) !important;
    color: #0f172a !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

html[data-appearance="premium-dark"] #geocoder-toggle-btn,
html[data-appearance="premium-dark"] #toggle-measuring-tool {
    background: rgba(18, 12, 32, 0.96) !important;
    background-image: none !important;
    border: 1px solid rgba(167, 139, 250, 0.42) !important;
    color: #f5f3ff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html[data-appearance="premium-light"] #geocoder-toggle-btn:hover,
html[data-appearance="premium-light"] #toggle-measuring-tool:hover {
    background: #ffffff !important;
    border-color: rgba(59, 130, 246, 0.45) !important;
}

html[data-appearance="premium-dark"] #geocoder-toggle-btn:hover,
html[data-appearance="premium-dark"] #toggle-measuring-tool:hover {
    background: rgba(36, 24, 58, 0.98) !important;
    border-color: rgba(212, 175, 55, 0.45) !important;
}

html[data-appearance="premium-light"] #geocoder-toggle-btn svg,
html[data-appearance="premium-light"] #toggle-measuring-tool svg,
html[data-appearance="premium-dark"] #geocoder-toggle-btn svg,
html[data-appearance="premium-dark"] #toggle-measuring-tool svg {
    stroke: currentColor !important;
    fill: none !important;
}

html[data-appearance="premium-light"] #geocoder-results,
html[data-appearance="premium-dark"] #geocoder-results {
    background: var(--app-chrome-bg-strong) !important;
    border-color: var(--app-chrome-border) !important;
    color: var(--app-chrome-text) !important;
}

/* Cloud Projects catalog — premium gradient shell */
html[data-appearance="premium-light"] .cloud-catalog-shell,
html[data-appearance="premium-dark"] .cloud-catalog-shell {
    border: 1.5px solid transparent !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
}

html[data-appearance="premium-light"] .cloud-catalog-shell {
    background-image: var(--premium-surface-light), var(--premium-stroke) !important;
    box-shadow: var(--premium-glow) !important;
}

html[data-appearance="premium-dark"] .cloud-catalog-shell {
    background-image: var(--premium-surface-dark), var(--premium-stroke) !important;
    box-shadow: var(--premium-glow) !important;
}