/**
 * rasathane.css — Modern Rasathane phase-1 reskin for the main map page.
 *
 * This file is loaded after the existing application styles and intentionally
 * preserves the JS-owned DOM contract. It maps the locked design tokens onto
 * the app's existing CSS variable names, then scopes visual overrides to the
 * index.php body class.
 */

:root {
    color-scheme: light;

    --font-ui: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --bg: #F0F4F8;
    --surface: #FFFFFF;
    --surface-hover: #E6EDF4;
    --rule: #D1DEEA;
    --text: #111F2D;
    --muted: #4A6075;
    --accent: #1870B8; /* azure — exact logo match */
    --accent-sec: #4A6075; /* cool secondary; keeps quiet status cool */
    --accent-comp: #D96A35; /* AA fix: 4.82:1 with midnight text (was #D3612C at 4.39) */
    --accent-comp-text: #111F2D;
    --mission: #B69762; /* aged brass — exclusive to Erken Uyarı Ağı */

    --hazard-micro: #82C255;
    --hazard-minor: #E5AC39;
    --hazard-mod: #F17F42;
    --hazard-moderate: var(--hazard-mod);
    --hazard-strong: #DE4A3B;
    --hazard-severe: #A82424;

    --text-3xl: 30px;
    --text-2xl: 24px;
    --text-xl: 20px;
    --text-lg: 18px;
    --text-base: 16px;
    --text-sm: 14px;
    --text-xs: 12px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;

    --shadow-float: 0 8px 32px -8px rgb(28 27 26 / 0.12);
    --shadow-panel: 0 16px 48px -24px rgb(28 27 26 / 0.22);
    --focus-color: var(--accent);
    --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-color);

    --primary: var(--accent);
    --primary-dark: var(--accent-comp);
    --secondary: var(--accent-sec);
    --success: var(--hazard-micro);
    --danger: var(--hazard-strong);
    --warning: var(--hazard-minor);
    --dark: var(--surface);
    --dark-panel: var(--surface);
    --body-bg: var(--bg);
    --panel-bg: var(--surface);
    --glass: color-mix(in srgb, var(--surface) 82%, transparent);
    --glass-border: var(--rule);
    --text-primary: var(--text);
    --text-secondary: var(--muted);
    --text-muted: var(--muted);
    --accent-primary: var(--accent);
    --input-bg: color-mix(in srgb, var(--bg) 68%, var(--surface));
    --input-border: var(--rule);
    --chip-bg: var(--surface);
    --chip-border: var(--rule);
    --chip-text: var(--text);
    --chip-hover-bg: var(--surface-hover);
    --chip-hover-border: var(--rule);
    --chip-hover-text: var(--text);
    --chip-active-bg: #E6F0F9;
    --chip-active-border: var(--accent);
    --chip-active-text: var(--text);
    --chip-active-hover-bg: #D6E6F5;
    --chip-active-hover-border: var(--accent);
    --chip-active-hover-text: var(--text);
    --list-item-bg: color-mix(in srgb, var(--bg) 54%, var(--surface));
    --list-item-hover: var(--surface-hover);
    --stat-card-bg: color-mix(in srgb, var(--bg) 60%, var(--surface));
    --overlay-bg: rgb(22 23 21 / 0.4);
    --toggle-icon-off: var(--muted);
    --toggle-icon-on: var(--accent-comp-text);
    --slider-thumb-border: var(--accent);
    --badge-border-primary: var(--rule);
    --badge-border-secondary: var(--rule);
    --item-hover-bg: var(--surface-hover);
    --item-hover-border: var(--accent);
}

:root:not([data-theme="light"]),
[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0B1117;
    --surface: #121C26;
    --surface-hover: #1A2735;
    --rule: #243545;
    --text: #E2E9F0;
    --muted: #9CAEBF;
    --accent: #3BA1ED; /* luminous azure */
    --accent-sec: #8B9DAF; /* cool secondary; keeps quiet status cool */
    --accent-comp: #F17F42;
    --accent-comp-text: #0B1117;
    --mission: #D4B681; /* polished brass */

    --hazard-micro: #82C255;
    --hazard-minor: #E5AC39;
    --hazard-mod: #F17F42;
    --hazard-moderate: var(--hazard-mod);
    --hazard-strong: #DE4A3B;
    --hazard-severe: #A82424;

    --shadow-float: 0 8px 32px -8px rgb(0 0 0 / 0.4);
    --shadow-panel: 0 16px 48px -18px rgb(0 0 0 / 0.42);
    --focus-color: var(--accent-comp);
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-color);

    --primary-dark: var(--accent-comp);
    --dark: var(--bg);
    --dark-panel: var(--surface);
    --glass: color-mix(in srgb, var(--surface) 82%, transparent);
    --input-bg: color-mix(in srgb, var(--bg) 48%, var(--surface));
    --list-item-bg: color-mix(in srgb, var(--bg) 56%, var(--surface));
    --list-item-hover: var(--surface-hover);
    --stat-card-bg: color-mix(in srgb, var(--bg) 54%, var(--surface));
    --chip-bg: transparent;
    --chip-border: #324759;
    --chip-text: var(--muted);
    --chip-hover-bg: var(--surface-hover);
    --chip-hover-border: #40586D;
    --chip-hover-text: var(--text);
    --chip-active-bg: #1A334B;
    --chip-active-border: var(--accent);
    --chip-active-text: #FFFFFF;
    --chip-active-hover-bg: #1F3E5E;
    --chip-active-hover-border: var(--accent);
    --chip-active-hover-text: #FFFFFF;
}

body.rasathane-map {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    line-height: 1.5;
    letter-spacing: 0;
    background: var(--bg);
    color: var(--text);
}

body.rasathane-map,
body.rasathane-map :where(button, input, select, textarea),
body.rasathane-map :where(.eq-popup, .fault-popup, .custom-tooltip, .inline-dialog, .graph-modal, .compare-modal, .ios-dialog, .compass-drawer) {
    font-family: var(--font-ui);
}

body.rasathane-map :where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

body.rasathane-map :where(.left-panel, .right-panel, .top-controls, .live-status-indicator, .legend-box, .replay-panel, .graph-modal, .compare-modal, .inline-dialog, .ios-dialog, .mobile-tools-sheet, .mobile-menu-sheet, .maplibregl-ctrl-attrib, .eq-popup, .fault-popup, .custom-tooltip) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.rasathane-map .app-container {
    background: var(--bg);
}

body.rasathane-map #map {
    background: var(--bg);
}

body.rasathane-map .left-panel,
body.rasathane-map .right-panel {
    background: var(--surface);
    color: var(--text);
    border-color: var(--rule);
    box-shadow: var(--shadow-panel);
}

body.rasathane-map .left-panel {
    border-right: 1px solid var(--rule);
}

body.rasathane-map .right-panel {
    border-left: 1px solid var(--rule);
}

body.rasathane-map .rasathane-brand {
    padding: var(--space-lg) var(--space-xl) !important;
    border-bottom: 1px solid var(--rule) !important;
    background: var(--surface);
}

body.rasathane-map .left-panel img#sismikLogo {
    max-width: 238px !important;
}

body.rasathane-map .panel-toggle {
    width: 28px;
    height: 56px;
    background: var(--surface);
    border-color: var(--rule);
    color: var(--muted);
    box-shadow: var(--shadow-float);
    transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;
}

body.rasathane-map .panel-toggle:hover {
    width: 28px;
    background: var(--accent-comp);
    border-color: var(--accent-comp);
    color: var(--accent-comp-text);
    box-shadow: var(--shadow-float);
}

body.rasathane-map .left-toggle {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

body.rasathane-map .right-toggle {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

body.rasathane-map .left-panel.collapsed .left-toggle {
    background: var(--surface);
    box-shadow: var(--shadow-float);
}

body.rasathane-map .right-panel.collapsed .right-toggle {
    background: var(--surface);
    box-shadow: var(--shadow-float);
}

body.rasathane-map .panel-header {
    padding: var(--space-xl) var(--space-lg) var(--space-md);
    gap: var(--space-md);
    border-bottom: 1px solid var(--rule);
    background: var(--surface);
}

body.rasathane-map .header-title {
    color: var(--text);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
}

body.rasathane-map .header-status {
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
}

body.rasathane-map .status-live,
body.rasathane-map .status-count,
body.rasathane-map #eqCount {
    color: var(--muted);
}

body.rasathane-map #eqCount,
body.rasathane-map .live-time {
    color: var(--text);
}

body.rasathane-map [data-freshness="live"] .live-dot,
body.rasathane-map .live-status-indicator .status-dot {
    background: var(--hazard-micro);
    color: var(--hazard-micro);
}

body.rasathane-map [data-freshness="delayed"] .live-dot {
    background: var(--hazard-minor);
    color: var(--hazard-minor);
}

body.rasathane-map [data-freshness="offline"] .live-dot {
    background: var(--muted);
    color: var(--muted);
}

body.rasathane-map .auth-icon,
body.rasathane-map .auth-btn-pill,
body.rasathane-map .auth-user-chip {
    border-radius: var(--radius-md);
    border-color: var(--rule);
    background: var(--surface);
    color: var(--text);
}

body.rasathane-map .auth-icon:hover,
body.rasathane-map .auth-btn-pill:hover,
body.rasathane-map .auth-user-chip:hover {
    background: var(--surface-hover);
    border-color: var(--rule);
}

body.rasathane-map .auth-user-chip .avatar,
body.rasathane-map .auth-btn-pill.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--surface);
}

body.rasathane-map .auth-btn-pill.primary:hover,
body.rasathane-map .auth-btn-pill.primary:focus-visible {
    background: var(--accent-comp);
    border-color: var(--accent-comp);
    color: var(--accent-comp-text);
}

body.rasathane-map .search-section {
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    border-bottom: 1px solid var(--rule);
}

body.rasathane-map .search-input,
body.rasathane-map .date-input,
body.rasathane-map select,
body.rasathane-map .compare-search,
body.rasathane-map textarea,
body.rasathane-map input[type="text"],
body.rasathane-map input[type="number"],
body.rasathane-map input[type="date"] {
    background: var(--input-bg);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.5;
    box-shadow: none;
}

body.rasathane-map .search-input {
    padding: 11px 40px 11px var(--space-md);
}

body.rasathane-map .search-input::placeholder,
body.rasathane-map .compare-search::placeholder {
    color: var(--muted);
}

body.rasathane-map .search-input:focus,
body.rasathane-map .date-input:focus,
body.rasathane-map select:focus,
body.rasathane-map .compare-search:focus,
body.rasathane-map textarea:focus,
body.rasathane-map input[type="text"]:focus,
body.rasathane-map input[type="number"]:focus,
body.rasathane-map input[type="date"]:focus {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: var(--focus-ring);
    outline: none;
}

body.rasathane-map .search-autocomplete {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-float);
}

body.rasathane-map .search-ac-item {
    color: var(--text);
}

body.rasathane-map .search-ac-item:hover,
body.rasathane-map .search-ac-item.active {
    background: var(--surface-hover);
}

body.rasathane-map .search-ac-item .ac-type {
    background: var(--bg);
    color: var(--muted);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
}

body.rasathane-map .accordion-area {
    background: var(--surface);
}

body.rasathane-map .accordion-section {
    border-bottom: 1px solid var(--rule);
}

body.rasathane-map .accordion-header {
    min-height: 48px;
    padding: var(--space-md) var(--space-lg);
    color: var(--text);
    transition: background-color 150ms ease-out, color 150ms ease-out;
}

body.rasathane-map .accordion-header:hover {
    background: var(--surface-hover);
}

body.rasathane-map .accordion-header-title {
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

body.rasathane-map .accordion-header-icon,
body.rasathane-map .accordion-header-chevron {
    color: var(--muted);
}

body.rasathane-map .accordion-section.open .accordion-header {
    background: var(--bg);
}

body.rasathane-map .accordion-body-inner {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
}

body.rasathane-map .filter-group {
    margin-bottom: var(--space-lg);
}

body.rasathane-map .filter-label,
body.rasathane-map .fault-ctrl-label,
body.rasathane-map .source-group-label {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
}

body.rasathane-map .preset-btn,
body.rasathane-map .chip,
body.rasathane-map .layer-chip,
body.rasathane-map .basemap-more-toggle,
body.rasathane-map .apply-btn,
body.rasathane-map .cancel-btn,
body.rasathane-map .inline-dialog-btn,
body.rasathane-map .eq-popup__btn,
body.rasathane-map .tools-sheet-btn,
body.rasathane-map .menu-sheet-link,
body.rasathane-map .menu-sheet-download,
body.rasathane-map .pwa-desktop-btn {
    border-radius: var(--radius-md);
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--text);
    box-shadow: none;
    font-weight: 500;
    letter-spacing: 0;
    transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
}

body.rasathane-map .preset-btn,
body.rasathane-map .chip {
    border-radius: var(--radius-pill);
}

body.rasathane-map .preset-btn,
body.rasathane-map .chip,
body.rasathane-map .layer-chip {
    background: var(--chip-bg);
    border-color: var(--chip-border);
    color: var(--chip-text);
}

body.rasathane-map .preset-btn:hover,
body.rasathane-map .chip:hover,
body.rasathane-map .layer-chip:hover,
body.rasathane-map .basemap-more-toggle:hover,
body.rasathane-map .tools-sheet-btn:hover,
body.rasathane-map .menu-sheet-link:hover {
    background: var(--surface-hover);
    border-color: var(--rule);
    color: var(--text);
    transform: none;
}

body.rasathane-map .preset-btn:hover,
body.rasathane-map .chip:hover,
body.rasathane-map .layer-chip:hover {
    background: var(--chip-hover-bg);
    border-color: var(--chip-hover-border);
    color: var(--chip-hover-text);
}

body.rasathane-map .preset-btn.active,
body.rasathane-map .chip.active,
body.rasathane-map .layer-chip.active {
    background: var(--chip-active-bg);
    border-color: var(--chip-active-border);
    color: var(--chip-active-text);
}

body.rasathane-map .preset-btn.active:hover,
body.rasathane-map .chip.active:hover,
body.rasathane-map .layer-chip.active:hover {
    background: var(--chip-active-hover-bg);
    border-color: var(--chip-active-hover-border);
    color: var(--chip-active-hover-text);
}

body.rasathane-map .apply-btn,
body.rasathane-map .inline-dialog-btn--primary,
body.rasathane-map .pwa-desktop-btn {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--surface);
}

body.rasathane-map .chip.active .chip-sub {
    color: var(--chip-active-text);
    opacity: 0.82;
}

body.rasathane-map .chip-sub {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 0;
}

body.rasathane-map .layer-chip i {
    color: currentColor;
}

body.rasathane-map .basemap-thumb {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--bg);
    box-shadow: none;
}

body.rasathane-map .basemap-thumb:hover {
    border-color: var(--accent);
}

body.rasathane-map .basemap-thumb.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

body.rasathane-map .basemap-thumb-label {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    color: var(--text);
    font-size: 10px;
    font-weight: 600;
}

body.rasathane-map .dual-slider-label {
    margin-bottom: var(--space-xs);
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 500;
}

body.rasathane-map .dual-slider-label span {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

body.rasathane-map .dual-slider-track {
    height: 28px;
    margin: var(--space-xs) 10px;
}

body.rasathane-map .dual-slider-track::before,
body.rasathane-map input[type="range"] {
    accent-color: var(--accent);
}

body.rasathane-map .dual-slider-track::before {
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--rule);
}

body.rasathane-map .dual-slider-fill {
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--accent);
}

body.rasathane-map .dual-slider-input::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    background: var(--surface);
    border: 2px solid var(--accent);
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.12);
}

body.rasathane-map .dual-slider-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--surface);
    border: 2px solid var(--accent);
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.12);
}

body.rasathane-map .dual-slider-input:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}

body.rasathane-map .dual-slider-input:active::-moz-range-thumb {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}

body.rasathane-map .toggle-switch {
    color: var(--text);
}

body.rasathane-map .toggle-slider {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--rule);
    border: none;
    position: relative;
    overflow: visible;
    box-shadow: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

body.rasathane-map .toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 2px;
    left: 2px;
    right: auto;
    border-radius: 50%;
    background: #FFFFFF;
    color: transparent;
    font-size: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

body.rasathane-map .toggle-slider::after,
body.rasathane-map .toggle-switch input[type="checkbox"]:checked + .toggle-slider::after {
    content: none;
    display: none;
}

body.rasathane-map .toggle-switch input[type="checkbox"]:checked + .toggle-slider {
    background: var(--accent);
    border: none;
}

body.rasathane-map .toggle-switch input[type="checkbox"]:checked + .toggle-slider::before {
    content: '';
    left: 18px;
    right: auto;
    color: transparent;
    transform: none;
}

body.rasathane-map .toggle-label {
    color: var(--text);
    font-size: var(--text-sm);
}

body.rasathane-map .stats-strip {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--rule);
    color: var(--muted);
    background: var(--surface);
}

body.rasathane-map .stats-strip:hover {
    background: var(--surface-hover);
}

body.rasathane-map .stats-section {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
}

body.rasathane-map .stat-card {
    background: var(--stat-card-bg);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
}

body.rasathane-map .stat-value {
    color: var(--accent);
    font-size: var(--text-xl);
    font-weight: 600;
}

body.rasathane-map .stat-label {
    color: var(--muted);
    font-size: var(--text-xs);
}

body.rasathane-map .panel-links {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    border-top: 1px solid var(--rule);
    background: var(--surface);
    gap: var(--space-sm);
}

body.rasathane-map .panel-link {
    border-radius: var(--radius-md);
    border: 1px solid var(--rule);
    background: var(--bg) !important;
    color: var(--text) !important;
}

body.rasathane-map .panel-link:hover {
    transform: none;
    background: var(--surface) !important;
    border-color: var(--accent);
}

body.rasathane-map .rasathane-ew-card,
body.rasathane-map .sismik-card {
    margin: var(--space-lg);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}

body.rasathane-map .sismik-card {
    padding: var(--space-lg);
    color: var(--text);
}

/* Status expressed as a thin top stripe — base.css's ::before is a 90px
   "aura" block; left at full height with a solid fill it becomes an
   illegible banner behind the card text. */
body.rasathane-map .sismik-card::before {
    height: 3px;
    opacity: 1;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--current-status-color, var(--accent));
}

/* Status palette remapped to Rasathane tokens (both themes inherit). */
body.rasathane-map .sismik-card {
    --status-normal: var(--hazard-micro);
    --status-elevated: var(--hazard-mod);
    --status-quiet: var(--accent-sec);
    --status-unknown: var(--muted);
}

body.rasathane-map .sismik-card:hover {
    background: var(--surface);
    border-color: var(--accent);
    transform: none;
}

body.rasathane-map .sismik-card .sc-title,
body.rasathane-map .sismik-card .sc-status-text {
    color: var(--text);
    letter-spacing: 0;
}

body.rasathane-map .sismik-card .sc-context,
body.rasathane-map .sismik-card .sc-affordance,
body.rasathane-map .sismik-card .sc-local {
    color: var(--muted);
}

body.rasathane-map .sismik-card .sc-active-badge {
    background: color-mix(in srgb, var(--hazard-minor) 16%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--hazard-minor) 40%, var(--rule));
    color: color-mix(in srgb, var(--hazard-minor) 72%, var(--text));
    border-radius: var(--radius-pill);
}

body.rasathane-map .sismik-card .sc-skeleton,
body.rasathane-map .loading-skeleton {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--rule) 42%, transparent),
        color-mix(in srgb, var(--surface) 74%, transparent),
        color-mix(in srgb, var(--rule) 42%, transparent)
    );
}

body.rasathane-map .rasathane-ew-card {
    padding: var(--space-lg);
}

body.rasathane-map .rasathane-ew-card__eyebrow {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
}

body.rasathane-map .rasathane-ew-card__title {
    margin: var(--space-sm) 0 0;
    color: var(--text);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
}

body.rasathane-map .rasathane-ew-card__copy {
    margin: var(--space-sm) 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

body.rasathane-map .rasathane-ew-card__footer {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-md);
}

body.rasathane-map .rasathane-ew-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-md);
    background: var(--mission);
    color: var(--accent-comp-text);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
}

body.rasathane-map .rasathane-ew-card__button:hover {
    background: var(--accent-comp);
    color: var(--accent-comp-text);
}

body.rasathane-map .rasathane-ew-card__stat {
    color: var(--muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

body.rasathane-map .top-controls {
    top: var(--space-md);
    gap: var(--space-xs);
    padding: calc(var(--safe-area-top) + var(--space-xs)) var(--space-xs) var(--space-xs);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-float);
}

body.rasathane-map .control-btn,
body.rasathane-map .pwa-desktop-btn {
    min-height: 34px;
    padding: 7px 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 500;
    box-shadow: none;
}

body.rasathane-map .control-btn:hover,
body.rasathane-map .pwa-desktop-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
}

body.rasathane-map .control-btn.active,
body.rasathane-map .control-btn.push-on,
body.rasathane-map .control-btn.locate-on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--surface);
}

body.rasathane-map .apply-btn:hover,
body.rasathane-map .inline-dialog-btn--primary:hover,
body.rasathane-map .pwa-desktop-btn:hover,
body.rasathane-map .control-btn.active:hover,
body.rasathane-map .control-btn.push-on:hover,
body.rasathane-map .control-btn.locate-on:hover,
body.rasathane-map .push-prompt-banner .ppb-btn-yes:hover,
body.rasathane-map .push-submit:hover,
body.rasathane-map .ob-btn-primary:hover {
    background: var(--accent-comp);
    border-color: var(--accent-comp);
    color: var(--accent-comp-text);
}

body.rasathane-map .deprem-oldu-btn,
body.rasathane-map .tools-sheet-btn[onclick*="openDepremOldu"] {
    background: color-mix(in srgb, var(--hazard-strong) 12%, var(--surface)) !important;
    border-color: color-mix(in srgb, var(--hazard-strong) 34%, var(--rule)) !important;
    color: var(--hazard-strong) !important;
}

body.rasathane-map .theme-toggle {
    gap: var(--space-sm);
    padding: var(--space-xs);
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: var(--surface);
}

body.rasathane-map .theme-toggle-switch {
    width: 40px;
    height: 22px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--rule);
    background: var(--rule);
}

body.rasathane-map .theme-toggle-switch.active {
    background: var(--accent-comp);
    border-color: var(--accent-comp);
}

body.rasathane-map .theme-toggle-slider {
    background: var(--surface);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
}

body.rasathane-map .theme-icon {
    color: var(--muted);
}

body.rasathane-map .theme-icon.active {
    color: var(--accent);
}

body.rasathane-map .live-status-indicator {
    bottom: calc(var(--safe-area-bottom) + var(--space-md));
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--muted);
    box-shadow: var(--shadow-float);
}

body.rasathane-map .live-status-indicator:hover {
    box-shadow: var(--shadow-float);
}

body.rasathane-map .live-status-indicator .source-tag,
body.rasathane-map .source-badge,
body.rasathane-map .eq-src,
body.rasathane-map .eq-src-more,
body.rasathane-map .eq-popup__sources .source-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    padding: 2px 6px !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--surface) !important;
    color: var(--muted) !important;
    font-family: var(--font-ui);
    font-size: 10px !important;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
}

body.rasathane-map .eq-src-more {
    background: var(--bg) !important;
    color: var(--text) !important;
}

:root:not([data-theme="light"]) body.rasathane-map .eq-popup__sources .source-badge,
[data-theme="dark"] body.rasathane-map .eq-popup__sources .source-badge {
    border: 1px solid #40586D !important;
    background: var(--surface-hover) !important;
    color: var(--text) !important;
    font-size: 11px !important;
    font-weight: 600;
    text-transform: none;
}

body.rasathane-map .maplibregl-ctrl-group {
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-float) !important;
}

body.rasathane-map .maplibregl-ctrl-group button {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--rule) !important;
}

body.rasathane-map .maplibregl-ctrl-group button:hover {
    background: var(--surface-hover) !important;
}

body.rasathane-map .maplibregl-ctrl-attrib {
    background: var(--surface) !important;
    color: var(--muted) !important;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm) 0 0 0 !important;
    box-shadow: none !important;
}

body.rasathane-map .maplibregl-ctrl-attrib a {
    color: var(--text) !important;
}

body.rasathane-map .legend-box {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-float);
    color: var(--text);
}

body.rasathane-map .legend-header,
body.rasathane-map .legend-section {
    border-color: var(--rule);
}

body.rasathane-map .legend-subtitle {
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

body.rasathane-map .legend-collapse-btn {
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-float);
}

body.rasathane-map .legend-collapse-btn:hover {
    background: var(--surface-hover);
}

body.rasathane-map .earthquake-list {
    position: relative;
    padding: var(--space-lg) var(--space-md) var(--space-xl) 36px;
    background: var(--surface);
}

body.rasathane-map .earthquake-list::before {
    content: '';
    position: absolute;
    top: var(--space-lg);
    bottom: var(--space-xl);
    left: 20px;
    width: 2px;
    border-radius: var(--radius-pill);
    background: var(--rule);
}

body.rasathane-map .eq-item {
    --eq-severity: var(--hazard-micro);
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-md);
    align-items: center;
    min-height: 70px;
    margin: 0 0 var(--space-sm);
    padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
    border: 1px solid var(--rule);
    border-left: 0;
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    box-shadow: none;
    overflow: visible;
    transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

/* Rail center: list padding-left 36px − rail left 20px − rail width 2px
   → rail center at −15px from the item edge; dot (8px) centers on it. */
body.rasathane-map .eq-item::before {
    content: '';
    position: absolute;
    left: -19px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--eq-severity);
    transform: translateY(-50%);
    box-shadow: 0 0 0 3px var(--surface);
    z-index: 1;
}

body.rasathane-map .eq-item::after {
    content: '';
    position: absolute;
    left: -15px;
    top: 50%;
    width: 15px;
    height: 1px;
    background: var(--rule);
    transform: translateY(-50%);
}

body.rasathane-map .eq-item:hover {
    background: var(--surface-hover);
    border-color: var(--rule);
}

body.rasathane-map .eq-mag-low {
    --eq-severity: var(--hazard-micro);
}

body.rasathane-map .eq-mag-medium {
    --eq-severity: var(--hazard-minor);
}

body.rasathane-map .eq-mag-high {
    --eq-severity: var(--hazard-strong);
}

body.rasathane-map .eq-mag {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--eq-severity) 15%, var(--surface));
    color: var(--eq-severity);
    border: 0;
    font-family: var(--font-ui);
    font-size: var(--text-lg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

body.rasathane-map .eq-mag-low .eq-mag {
    width: 34px;
    height: 34px;
    font-size: var(--text-sm);
}

body.rasathane-map .eq-mag-medium .eq-mag {
    width: 38px;
    height: 38px;
    font-size: var(--text-base);
}

body.rasathane-map .eq-mag-high .eq-mag {
    width: 44px;
    height: 44px;
    background: var(--eq-severity);
    color: var(--surface);
    font-size: var(--text-xl);
}

body.rasathane-map .eq-body {
    min-width: 0;
}

body.rasathane-map .eq-location {
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.35;
}

body.rasathane-map .eq-time,
body.rasathane-map .eq-meta,
body.rasathane-map .eq-felt-count {
    color: var(--muted);
    font-size: var(--text-xs);
}

body.rasathane-map .eq-row-top {
    gap: var(--space-sm);
}

body.rasathane-map .eq-row-bottom {
    gap: var(--space-sm);
}

body.rasathane-map .eq-sources {
    height: auto;
    min-height: 20px;
}

body.rasathane-map .eq-detail {
    min-height: 28px;
    padding: 0 var(--space-sm);
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--accent);
    font-size: var(--text-xs);
}

body.rasathane-map .eq-detail:hover {
    background: var(--surface-hover);
}

body.rasathane-map .eq-pager-dot {
    color: var(--surface);
    font-family: var(--font-ui);
    font-weight: 700;
}

body.rasathane-map .earthquake-popup .maplibregl-popup-content,
body.rasathane-map .maplibregl-popup-content {
    background: transparent !important;
}

body.rasathane-map .maplibregl-popup-close-button {
    top: 10px !important;
    right: 10px !important;
    color: var(--muted) !important;
}

body.rasathane-map .maplibregl-popup-close-button:hover {
    color: var(--text) !important;
}

body.rasathane-map .eq-popup,
body.rasathane-map .fault-popup {
    width: 300px;
    border: 1px solid var(--rule);
    border-top: 0;
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-float);
    overflow: hidden;
}

body.rasathane-map .eq-popup__header,
body.rasathane-map .fault-popup__header {
    padding: var(--space-md);
    border-bottom: 1px solid var(--rule);
    background: var(--surface);
}

body.rasathane-map .eq-popup__mag {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--eq-color, var(--hazard-strong));
    color: var(--surface);
    font-family: var(--font-ui);
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: 0;
}

body.rasathane-map .eq-popup__location,
body.rasathane-map .fault-popup__name {
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 600;
}

body.rasathane-map .eq-popup__subtitle,
body.rasathane-map .fault-popup__segment {
    color: var(--text);
    font-size: 13px;
    font-weight: 400;
}

body.rasathane-map .eq-popup__meta-row,
body.rasathane-map .fault-popup__meta-row {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

body.rasathane-map .eq-popup__meta,
body.rasathane-map .fault-popup__meta {
    padding: var(--space-md);
    gap: var(--space-sm);
}

body.rasathane-map .eq-popup__meta-row span,
body.rasathane-map .fault-popup__meta-row span {
    color: var(--text);
    font-weight: 600;
}

body.rasathane-map .eq-popup__coord:hover {
    background: var(--surface-hover);
}

body.rasathane-map .eq-popup__coord.copied,
body.rasathane-map .eq-popup__coord.copied span {
    background: color-mix(in srgb, var(--hazard-micro) 12%, var(--surface));
    color: var(--hazard-micro) !important;
}

body.rasathane-map .eq-popup__sources {
    padding: 0 var(--space-md) var(--space-md);
    border-bottom: 1px solid var(--rule);
}

body.rasathane-map .eq-popup__actions {
    padding: var(--space-md);
}

body.rasathane-map .eq-popup__btn--detail,
body.rasathane-map .eq-popup__btn--felt {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--surface) !important;
}

body.rasathane-map .eq-popup__btn--detail:hover,
body.rasathane-map .eq-popup__btn--felt:hover {
    background: var(--accent-comp);
    border-color: var(--accent-comp);
    color: var(--accent-comp-text) !important;
}

body.rasathane-map .eq-popup__btn--zoom,
body.rasathane-map .eq-popup__btn--compare,
body.rasathane-map .eq-popup__btn--shakemap,
body.rasathane-map .eq-popup__btn--coulomb {
    background: var(--surface) !important;
    border: 1px solid var(--rule) !important;
    color: var(--text) !important;
}

body.rasathane-map .eq-popup__btn--zoom:hover,
body.rasathane-map .eq-popup__btn--compare:hover,
body.rasathane-map .eq-popup__btn--shakemap:hover,
body.rasathane-map .eq-popup__btn--coulomb:hover {
    background: var(--surface-hover) !important;
}

:root:not([data-theme="light"]) body.rasathane-map .eq-popup__btn--zoom,
:root:not([data-theme="light"]) body.rasathane-map .eq-popup__btn--compare,
:root:not([data-theme="light"]) body.rasathane-map .eq-popup__btn--shakemap,
:root:not([data-theme="light"]) body.rasathane-map .eq-popup__btn--coulomb,
[data-theme="dark"] body.rasathane-map .eq-popup__btn--zoom,
[data-theme="dark"] body.rasathane-map .eq-popup__btn--compare,
[data-theme="dark"] body.rasathane-map .eq-popup__btn--shakemap,
[data-theme="dark"] body.rasathane-map .eq-popup__btn--coulomb {
    background: #243545 !important;
    border: 1px solid transparent !important;
    color: var(--text) !important;
}

:root:not([data-theme="light"]) body.rasathane-map .eq-popup__btn--zoom:hover,
:root:not([data-theme="light"]) body.rasathane-map .eq-popup__btn--compare:hover,
:root:not([data-theme="light"]) body.rasathane-map .eq-popup__btn--shakemap:hover,
:root:not([data-theme="light"]) body.rasathane-map .eq-popup__btn--coulomb:hover,
[data-theme="dark"] body.rasathane-map .eq-popup__btn--zoom:hover,
[data-theme="dark"] body.rasathane-map .eq-popup__btn--compare:hover,
[data-theme="dark"] body.rasathane-map .eq-popup__btn--shakemap:hover,
[data-theme="dark"] body.rasathane-map .eq-popup__btn--coulomb:hover {
    background: #324759 !important;
}

body.rasathane-map .eq-popup__indicator {
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--muted);
}

body.rasathane-map .eq-popup__indicator--tsunami,
body.rasathane-map .eq-popup__indicator--pager-red {
    color: var(--hazard-strong);
    background: color-mix(in srgb, var(--hazard-strong) 12%, var(--surface));
}

body.rasathane-map .eq-popup__indicator--pager-yellow {
    color: color-mix(in srgb, var(--hazard-minor) 72%, var(--text));
    background: color-mix(in srgb, var(--hazard-minor) 16%, var(--surface));
}

body.rasathane-map .eq-popup__indicator--pager-orange {
    color: var(--hazard-mod);
    background: color-mix(in srgb, var(--hazard-mod) 14%, var(--surface));
}

body.rasathane-map .eq-popup__indicator--pager-green {
    color: var(--hazard-micro);
    background: color-mix(in srgb, var(--hazard-micro) 14%, var(--surface));
}

body.rasathane-map .fault-popup__badge,
body.rasathane-map .fault-popup__paleo {
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule);
    background: var(--bg);
    color: var(--muted);
}

:root:not([data-theme="light"]) body.rasathane-map .fault-popup__badge,
[data-theme="dark"] body.rasathane-map .fault-popup__badge {
    border: 1px solid #324759;
    background: var(--surface-hover);
    color: var(--text);
    font-size: 12px;
    opacity: 1;
    text-transform: none;
}

body.rasathane-map .fault-popup__source {
    color: var(--muted);
    font-size: 11px;
    opacity: 1;
}

body.rasathane-map .fault-popup__eq-highlight {
    background: color-mix(in srgb, var(--hazard-strong) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--hazard-strong) 28%, var(--rule));
}

body.rasathane-map .replay-panel {
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-float);
}

body.rasathane-map .replay-btn,
body.rasathane-map .replay-speed-btn {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
}

body.rasathane-map .replay-speed-btn.active,
body.rasathane-map .replay-btn:hover {
    background: var(--accent-comp);
    border-color: var(--accent-comp);
    color: var(--accent-comp-text);
}

body.rasathane-map .segmented-control .segment input:checked + .segment-label,
body.rasathane-map .hissettim-chip[aria-checked="true"],
body.rasathane-map .ss-format-btn.active {
    background: var(--accent-comp);
    border-color: var(--accent-comp);
    color: var(--accent-comp-text);
}

body.rasathane-map .ss-toggle.active {
    background: var(--accent-comp);
    border-color: var(--accent-comp);
}

body.rasathane-map .ss-toggle.active::after {
    background: var(--accent-comp-text);
}

body.rasathane-map .ss-pos-dot.active {
    background: var(--accent-comp);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-comp) 36%, transparent);
}

body.rasathane-map .segmented-control .segment input:focus-visible + .segment-label,
body.rasathane-map .hissettim-chip:focus-visible,
body.rasathane-map .push-scroll-content:focus-visible,
body.rasathane-map .push-submit:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
    box-shadow: none;
}

body.rasathane-map .replay-slider {
    accent-color: var(--accent);
}

body.rasathane-map .compare-overlay,
body.rasathane-map .graph-modal-overlay,
body.rasathane-map .inline-dialog-backdrop,
body.rasathane-map .ios-overlay,
body.rasathane-map .push-overlay,
body.rasathane-map .felt-overlay,
body.rasathane-map .hissettim-overlay {
    background: var(--overlay-bg);
}

body.rasathane-map .compare-modal,
body.rasathane-map .graph-modal,
body.rasathane-map .inline-dialog,
body.rasathane-map .ios-dialog,
body.rasathane-map .push-dialog,
body.rasathane-map .hissettim-dialog {
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 16px 48px -12px rgb(0 0 0 / 0.22);
}

body.rasathane-map .compare-modal-header,
body.rasathane-map .graph-modal-header,
body.rasathane-map .ios-header {
    border-bottom: 1px solid var(--rule);
    background: var(--surface);
}

body.rasathane-map .compare-modal h2,
body.rasathane-map .graph-modal-title,
body.rasathane-map .ios-header h3,
body.rasathane-map .inline-dialog-title {
    color: var(--text);
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: 0;
}

body.rasathane-map .graph-modal-subtitle,
body.rasathane-map .inline-dialog-message,
body.rasathane-map .ios-body,
body.rasathane-map .ios-note {
    color: var(--muted);
}

body.rasathane-map .graph-modal-close,
body.rasathane-map .compare-modal-close,
body.rasathane-map .ios-close,
body.rasathane-map .tools-sheet-close {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--muted);
}

body.rasathane-map .graph-modal-close:hover,
body.rasathane-map .compare-modal-close:hover,
body.rasathane-map .ios-close:hover,
body.rasathane-map .tools-sheet-close:hover {
    background: var(--surface-hover);
    color: var(--text);
}

body.rasathane-map .custom-tooltip {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--text) 94%, transparent);
    color: var(--surface);
    box-shadow: var(--shadow-float);
}

body.rasathane-map .custom-tooltip::before {
    background: color-mix(in srgb, var(--text) 94%, transparent);
    border-color: var(--rule);
}

body.rasathane-map .measurement-tooltip,
body.rasathane-map .coord-cursor-box,
body.rasathane-map .map-ctx-menu,
body.rasathane-map #mapContextMenu,
body.rasathane-map #pinContextMenu {
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-float);
}

body.rasathane-map .measurement-tooltip {
    border-radius: var(--radius-pill);
    color: var(--text);
}

body.rasathane-map .measurement-dot,
body.rasathane-map .measurement-dot-snap {
    background: var(--surface);
    border: 2px solid var(--accent);
}

body.rasathane-map .coord-save-btn,
body.rasathane-map .coord-popup-wrapper button {
    border-radius: var(--radius-md);
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--text);
}

body.rasathane-map .push-prompt-banner,
body.rasathane-map .rotation-banner,
body.rasathane-map .ios-install-inline {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-float);
}

body.rasathane-map .rotation-banner-content {
    background: transparent;
}

body.rasathane-map .loading-overlay {
    background: var(--bg);
}

body.rasathane-map #loadingMessage {
    color: var(--text) !important;
}

body.rasathane-map #loadingSubMessage {
    color: var(--muted) !important;
}

body.rasathane-map #compassContainer {
    font-family: var(--font-ui);
}

body.rasathane-map .compass-station {
    filter: none;
}

/* The circular plate is drawn INSIDE the SVG (.cmp-plate) rather than by
   rounding the SVG element — border-radius on the svg clipped the corner
   pitch/zoom readouts, which live in the canvas corners. */
body.rasathane-map .compass-svg {
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

body.rasathane-map .cmp-plate {
    fill: var(--surface);
    stroke: var(--rule);
    stroke-width: 0.7;
}

body.rasathane-map .cmp-needle-n {
    fill: var(--hazard-strong);
}

body.rasathane-map .cmp-needle-s {
    fill: var(--muted);
}

body.rasathane-map .compass-drawer {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-float);
}

body.rasathane-map .compass-section-title,
body.rasathane-map .compass-label {
    color: var(--muted);
    font-family: var(--font-ui);
    letter-spacing: 0;
}

body.rasathane-map .compass-value,
body.rasathane-map #cmpBearing,
body.rasathane-map #cmpPitch,
body.rasathane-map #cmpZoom,
body.rasathane-map #cmpEpiBearing,
body.rasathane-map #cmpEpiDist,
body.rasathane-map #cmpStrike {
    color: var(--accent);
    font-family: var(--font-ui);
    text-shadow: none;
    letter-spacing: 0;
}

body.rasathane-map .bottom-nav-btn,
body.rasathane-map .mobile-fab-left,
body.rasathane-map .mobile-fab-right,
body.rasathane-map .mobile-legend-btn,
body.rasathane-map .mobile-fab-menu {
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--muted);
    box-shadow: var(--shadow-float);
}

body.rasathane-map .bottom-nav-btn.active,
body.rasathane-map .mobile-fab-left.active,
body.rasathane-map .mobile-fab-right.active,
body.rasathane-map .mobile-legend-btn.active,
body.rasathane-map .mobile-fab-menu.active {
    background: var(--surface);
    border-color: var(--rule);
    color: var(--accent);
}

body.rasathane-map .mobile-bottom-nav {
    height: calc(64px + var(--safe-area-bottom));
    padding-bottom: var(--safe-area-bottom);
    background: var(--surface);
    border-top: 1px solid var(--rule);
    box-shadow: none;
}

body.rasathane-map .mobile-bottom-nav .bottom-nav-btn {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 10px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

body.rasathane-map .mobile-bottom-nav .bottom-nav-btn i {
    font-size: 24px;
    line-height: 1;
}

body.rasathane-map .mobile-bottom-nav .bottom-nav-btn.active i {
    font-weight: 700;
}

body.rasathane-map .mobile-tools-sheet,
body.rasathane-map .mobile-menu-sheet {
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-panel);
}

body.rasathane-map .tools-sheet-header,
body.rasathane-map .menu-sheet-header {
    border-bottom: 1px solid var(--rule);
    color: var(--text);
}

body.rasathane-map .tools-sheet-grid,
body.rasathane-map .menu-sheet-links-grid {
    gap: var(--space-sm);
}

body.rasathane-map .menu-sheet-section-title {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

body.rasathane-map .panel-backdrop {
    background: var(--overlay-bg);
}

@media (prefers-reduced-motion: reduce) {
    body.rasathane-map *,
    body.rasathane-map *::before,
    body.rasathane-map *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

@media (max-width: 1024px) {
    body.rasathane-map .top-controls {
        border-radius: var(--radius-md);
    }

    body.rasathane-map .control-btn {
        min-width: 36px;
        min-height: 36px;
    }

    body.rasathane-map .left-panel,
    body.rasathane-map .right-panel {
        box-shadow: var(--shadow-panel);
    }
}

@media (max-width: 768px) and (orientation: portrait) {
    body.rasathane-map .map-container {
        background: var(--bg);
    }

    body.rasathane-map .left-panel.open,
    body.rasathane-map .right-panel.open {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border: 1px solid var(--rule);
        border-bottom: 0;
        box-shadow: var(--shadow-panel);
    }

    body.rasathane-map .right-panel.open::before {
        content: '';
        position: absolute;
        top: var(--space-sm);
        left: 50%;
        width: 32px;
        height: 4px;
        border-radius: var(--radius-pill);
        background: var(--rule);
        transform: translateX(-50%);
        z-index: 2;
    }

    body.rasathane-map .right-panel .panel-header {
        padding-top: var(--space-xl);
    }

    body.rasathane-map .earthquake-list {
        padding-left: 42px;
    }

    body.rasathane-map .earthquake-list::before {
        left: 24px;
    }

    body.rasathane-map .eq-item {
        min-height: 60px;
        padding-right: var(--space-sm);
    }

    /* padding 42 − rail left 24 − width 2 → center −17px from item edge */
    body.rasathane-map .eq-item::before {
        left: -21px;
    }

    body.rasathane-map .eq-item::after {
        left: -17px;
        width: 17px;
    }

    body.rasathane-map .eq-mag,
    body.rasathane-map .eq-mag-low .eq-mag,
    body.rasathane-map .eq-mag-medium .eq-mag,
    body.rasathane-map .eq-mag-high .eq-mag {
        width: 40px;
        height: 40px;
        font-size: var(--text-base);
    }

    body.rasathane-map .eq-row-top {
        grid-template-columns: 1fr;
    }

    body.rasathane-map .eq-time {
        white-space: normal;
    }

    body.rasathane-map .live-status-indicator {
        max-width: calc(100vw - 32px);
        bottom: calc(80px + var(--safe-area-bottom));
        padding: var(--space-sm) var(--space-md);
    }

    body.rasathane-map .live-status-indicator .status-sources {
        display: none;
    }

    body.rasathane-map .legend-box.mobile-visible {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
}

@media (max-width: 768px) and (orientation: landscape), (max-height: 500px) and (orientation: landscape) {
    body.rasathane-map .mobile-fab-left,
    body.rasathane-map .mobile-fab-right,
    body.rasathane-map .mobile-legend-btn,
    body.rasathane-map .mobile-fab-menu {
        width: 44px;
        min-height: 44px;
        border-radius: 50%;
    }

    body.rasathane-map .mobile-legend-btn {
        border-radius: var(--radius-pill);
    }

    body.rasathane-map .right-panel .panel-header {
        padding-top: var(--space-lg);
    }

    body.rasathane-map .earthquake-list {
        padding-left: 34px;
    }
}

/* ── Phase 2D: overlay flows ── */
body.rasathane-map {
    --phase2d-scrim: rgb(22 23 21 / 0.4);
    --phase2d-modal-shadow: 0 16px 48px -12px rgb(0 0 0 / 0.22);
    --phase2d-banner-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}

body.rasathane-map :where(
    #onboarding-overlay,
    .compare-overlay,
    .graph-modal-overlay,
    .inline-dialog-backdrop,
    .ios-overlay,
    .push-overlay,
    .felt-overlay,
    .hissettim-overlay,
    #screenshot-overlay,
    .coord-help-overlay,
    #pushCustomizeModal.push-prefs-overlay,
    #pushCustomizeModal.push-customize-overlay,
    #regionModal.region-modal-overlay
) {
    background: var(--phase2d-scrim);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.rasathane-map :where(#pushCustomizeModal.push-prefs-overlay, #regionModal.region-modal-overlay) {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
}

body.rasathane-map :where(#pushCustomizeModal.push-customize-overlay) {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
}

body.rasathane-map #pushCustomizeModal.push-customize-overlay .felt-overlay {
    pointer-events: auto;
}

body.rasathane-map #pushCustomizeModal.push-customize-overlay .felt-dialog {
    pointer-events: auto;
}

body.rasathane-map :where(
    .compare-modal,
    .graph-modal,
    .inline-dialog,
    .ios-dialog,
    .push-dialog,
    .push-prefs-panel,
    .felt-dialog,
    .hissettim-dialog,
    .ss-card,
    .coord-help-modal
) {
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--phase2d-modal-shadow);
    font-family: var(--font-ui);
    letter-spacing: 0;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.rasathane-map :where(.push-dialog, .push-prefs-panel, .felt-dialog, .hissettim-dialog, .ios-dialog, .inline-dialog) {
    max-width: 440px;
}

body.rasathane-map .push-prefs-panel {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    border-width: 1px;
    animation: phase2dModalIn 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.rasathane-map .felt-dialog.push-custom-dialog {
    width: min(420px, calc(100vw - 32px));
}

body.rasathane-map :where(
    .compare-modal-header,
    .graph-modal-header,
    .ios-header,
    .push-prefs-header,
    .felt-header,
    .hissettim-header,
    .ss-header
) {
    border-bottom: 1px solid var(--rule);
    background: var(--surface);
    padding: 20px;
}

body.rasathane-map :where(
    .compare-modal h2,
    .graph-modal-title,
    .ios-header h3,
    .push-prefs-header h3,
    .felt-header h3,
    .hissettim-title,
    .inline-dialog-title,
    .ss-title
) {
    color: var(--text);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}

body.rasathane-map :where(.push-prefs-body, .felt-body, .hissettim-body, .ios-body, .compare-modal-body) {
    background: var(--surface);
    color: var(--text);
}

body.rasathane-map :where(.push-prefs-footer, .felt-footer, .hissettim-footer, .push-footer, .inline-dialog-actions) {
    border-top: 1px solid var(--rule);
    padding: var(--space-lg) 20px;
    display: flex;
    flex-direction: row-reverse;
    gap: var(--space-sm);
    justify-content: flex-start;
    background: var(--surface);
}

body.rasathane-map :where(
    .felt-submit,
    .hissettim-submit,
    .hissettim-state-cta,
    .push-submit,
    .inline-dialog-btn--primary,
    .ss-btn-capture,
    .ob-btn-primary
) {
    min-height: 40px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--accent);
    color: #fff;
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: none;
}

body.rasathane-map :where(.felt-submit, .hissettim-submit, .push-submit, .inline-dialog-btn--primary, .ss-btn-capture, .ob-btn-primary):hover:not(:disabled) {
    opacity: 0.9;
    filter: none;
}

body.rasathane-map :where(.felt-cancel, .hissettim-cancel, .push-cancel, .inline-dialog-btn, .ios-close, .push-prefs-close, .graph-modal-close, .compare-modal-close, .ss-close, .tools-sheet-close) {
    min-height: 36px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text);
    font-family: var(--font-ui);
    box-shadow: none;
}

body.rasathane-map :where(.felt-cancel, .hissettim-cancel, .push-cancel, .inline-dialog-btn, .ios-close, .push-prefs-close, .graph-modal-close, .compare-modal-close, .ss-close, .tools-sheet-close):hover {
    background: var(--surface-hover);
    color: var(--text);
}

body.rasathane-map .felt-submit--quake {
    border-color: var(--hazard-strong);
    background: var(--hazard-strong);
    color: #fff;
}

body.rasathane-map .felt-header--quake {
    background: color-mix(in srgb, var(--hazard-strong) 9%, var(--surface));
    border-bottom-color: color-mix(in srgb, var(--hazard-strong) 28%, var(--rule));
}

body.rasathane-map .felt-header--quake h3 {
    color: var(--hazard-strong);
}

body.rasathane-map .felt-location,
body.rasathane-map :where(.graph-modal-subtitle, .inline-dialog-message, .ios-body, .ios-note, .hissettim-meta, .hissettim-state-msg, .section-desc, .tier-depth) {
    color: var(--muted);
}

body.rasathane-map .compare-overlay {
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
}

body.rasathane-map .compare-modal {
    width: min(760px, calc(100vw - 32px));
    max-width: 760px;
}

body.rasathane-map .compare-vs {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: lowercase;
}

body.rasathane-map .graph-modal {
    width: min(960px, calc(100vw - 32px));
    max-width: 1200px;
    height: min(85vh, 800px);
    padding: 24px;
}

body.rasathane-map .graph-modal-overlay {
    opacity: 1;
}

body.rasathane-map #screenshot-overlay {
    align-items: center;
    padding: var(--space-xl);
}

body.rasathane-map #screenshot-overlay.ss-visible .ss-card,
body.rasathane-map .ss-card {
    width: min(440px, calc(100vw - 32px));
    transform: none;
}

body.rasathane-map .ss-corner {
    display: none;
}

body.rasathane-map .ss-title i {
    color: var(--accent);
}

body.rasathane-map .ss-pos-dot.active {
    background: var(--accent);
}

body.rasathane-map .ss-group-label {
    color: var(--muted);
    font-size: var(--text-xs);
    text-transform: none;
    letter-spacing: 0;
}

body.rasathane-map .ss-btn-capture {
    background: var(--accent);
}

body.rasathane-map .ss-preview,
body.rasathane-map .ss-pos-picker,
body.rasathane-map .ss-format-bar {
    border: 1px solid var(--rule);
    background: var(--bg);
}

body.rasathane-map .ss-format-btn.active {
    background: var(--surface);
    color: var(--text);
}

body.rasathane-map #onboarding-overlay {
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    pointer-events: auto;
}

body.rasathane-map #onboarding-overlay .ob-card {
    width: min(440px, calc(100vw - 32px));
    max-width: 440px;
    min-height: 420px;
    padding: 28px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--phase2d-modal-shadow);
}

body.rasathane-map #onboarding-overlay .ob-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

body.rasathane-map #onboarding-overlay .ob-close:hover {
    background: var(--surface-hover);
    color: var(--text);
}

body.rasathane-map #onboarding-overlay .ob-dots {
    justify-content: center;
    gap: 8px;
    margin: 0 0 var(--space-xl);
}

body.rasathane-map #onboarding-overlay .ob-dot,
body.rasathane-map #onboarding-overlay .ob-dot.ob-dot-active {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rule);
    transition: background-color 150ms ease-out, transform 150ms ease-out;
}

body.rasathane-map #onboarding-overlay .ob-dot.ob-dot-active {
    background: var(--accent);
    transform: scale(1.18);
}

body.rasathane-map #onboarding-overlay .ob-screen {
    min-height: 280px;
    gap: var(--space-md);
}

body.rasathane-map #onboarding-overlay .ob-title {
    color: var(--text);
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: 0;
}

body.rasathane-map #onboarding-overlay .ob-text {
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.55;
}

body.rasathane-map #onboarding-overlay #ob-s0 .ob-icon-img {
    border: 1px solid color-mix(in srgb, var(--mission) 45%, var(--rule));
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--mission) 12%, transparent);
}

body.rasathane-map #onboarding-overlay :where(.ob-btn-secondary, .ob-skip) {
    color: var(--muted);
    text-decoration: none;
    letter-spacing: 0;
}

body.rasathane-map #onboarding-overlay .ob-btn-secondary {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: transparent;
}

body.rasathane-map .hissettim-dialog {
    overflow: hidden;
}

body.rasathane-map .hissettim-mag {
    border-radius: var(--radius-md);
    background: var(--hazard-strong);
}

body.rasathane-map .hissettim-preview,
body.rasathane-map .slider-panel,
body.rasathane-map .custom-panel {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--bg);
}

body.rasathane-map .hissettim-chip[role="radio"],
body.rasathane-map .felt-opt {
    min-height: 36px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text);
}

body.rasathane-map .felt-options {
    gap: var(--space-sm);
}

body.rasathane-map .felt-opt.selected {
    border-color: var(--hazard-strong);
    background: color-mix(in srgb, var(--hazard-strong) 11%, var(--surface));
    color: var(--text);
}

body.rasathane-map .hissettim-chip[role="radio"][aria-checked="true"] {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

body.rasathane-map .tier-list {
    gap: var(--space-sm);
}

body.rasathane-map .tier-list .tier-option {
    min-height: 52px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
}

body.rasathane-map .tier-option:not(.selected) .tier-indicator {
    filter: grayscale(1);
    opacity: 0.42;
}

body.rasathane-map .tier-indicator.tier-red { color: var(--hazard-strong); }
body.rasathane-map .tier-indicator.tier-orange { color: var(--hazard-mod); }
body.rasathane-map .tier-indicator.tier-yellow { color: var(--hazard-minor); }
body.rasathane-map .tier-indicator.tier-green { color: var(--hazard-micro); }
body.rasathane-map .tier-indicator.tier-neutral { color: var(--muted); }

body.rasathane-map .tier-option.selected {
    border-color: var(--text);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    box-shadow: 0 0 0 2px var(--text);
}

body.rasathane-map .tier-option.selected .tier-indicator {
    filter: none;
    opacity: 1;
}

body.rasathane-map .tier-option.selected .tier-radio {
    border-color: var(--accent);
    background: var(--accent);
}

body.rasathane-map .tier-option.selected .tier-mag,
body.rasathane-map .badge {
    border-color: var(--rule);
    border-radius: var(--radius-pill);
    background: var(--bg);
    color: var(--text);
}

body.rasathane-map .styled-slider,
body.rasathane-map :where(#regionRadiusSlider, #pushRadiusSlider) {
    accent-color: var(--accent);
}

body.rasathane-map .replay-panel {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    bottom: 24px;
    left: 50%;
    min-width: 0;
    max-width: min(720px, calc(100vw - 32px));
    padding: 8px 16px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--phase2d-banner-shadow);
}

body.rasathane-map .replay-header {
    margin: 0;
    gap: var(--space-sm);
}

body.rasathane-map .replay-title {
    color: var(--text);
    white-space: nowrap;
}

body.rasathane-map .replay-panel > div[style] {
    max-width: 180px;
    margin: 0 !important;
    color: var(--muted) !important;
    line-height: 1.25;
}

body.rasathane-map .replay-controls {
    flex: 1;
    min-width: 220px;
}

body.rasathane-map .replay-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
}

body.rasathane-map .replay-slider {
    min-width: 120px;
    accent-color: var(--accent);
}

body.rasathane-map .replay-time {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

body.rasathane-map .replay-speed {
    margin: 0;
    gap: 4px;
}

body.rasathane-map .replay-speed-btn {
    min-height: 28px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--muted);
}

body.rasathane-map .replay-speed-btn.active,
body.rasathane-map .replay-speed-btn:hover,
body.rasathane-map .replay-btn:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

body.rasathane-map :where(.map-ctx-menu, #mapContextMenu, #pinContextMenu, #measureDropdown) {
    width: 220px;
    min-width: 220px;
    padding: 4px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.12);
}

body.rasathane-map :where(.map-ctx-menu, #mapContextMenu, #pinContextMenu, #measureDropdown) button {
    min-height: 36px;
    width: 100%;
    padding: 8px 12px !important;
    border: 0 !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    color: var(--text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: var(--text-sm) !important;
    font-weight: 500 !important;
    text-align: left;
    cursor: default;
}

body.rasathane-map :where(.map-ctx-menu, #mapContextMenu, #pinContextMenu, #measureDropdown) button + button {
    border-top: 1px solid var(--rule) !important;
}

body.rasathane-map :where(.map-ctx-menu, #mapContextMenu, #pinContextMenu, #measureDropdown) button:hover {
    background: var(--bg) !important;
}

body.rasathane-map :where(.map-ctx-menu, #mapContextMenu, #pinContextMenu, #measureDropdown) i {
    color: var(--accent);
    font-size: 16px;
}

body.rasathane-map .rotation-overlay {
    background: var(--phase2d-scrim);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.rasathane-map .rotation-logo-bg,
body.rasathane-map .rotation-logo-bottom {
    display: none;
}

body.rasathane-map .rotation-content {
    width: min(440px, calc(100vw - 32px));
    max-width: 440px;
    padding: 28px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--phase2d-modal-shadow);
}

body.rasathane-map .rotation-overlay h2 {
    color: var(--text);
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-md);
}

body.rasathane-map .rotation-message,
body.rasathane-map .rotation-message strong {
    color: var(--muted);
}

body.rasathane-map .rotation-btn {
    min-height: 44px;
    border-radius: var(--radius-md);
    transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;
}

body.rasathane-map .rotation-btn-secondary {
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--text);
}

body.rasathane-map .rotation-banner {
    position: fixed;
    top: 16px;
    left: 16px;
    right: 16px;
    width: auto;
    max-width: 400px;
    margin: 0 auto;
    padding: 12px 16px;
    border: 1px solid var(--hazard-minor);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--hazard-minor) 15%, var(--surface));
    color: var(--text);
    box-shadow: var(--phase2d-banner-shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.rasathane-map .rotation-banner-content {
    gap: var(--space-sm);
}

body.rasathane-map .rotation-banner-icon,
body.rasathane-map .rotation-banner-close,
body.rasathane-map .ios-install-inline {
    border: 1px solid color-mix(in srgb, var(--hazard-minor) 32%, var(--rule));
    background: color-mix(in srgb, var(--hazard-minor) 12%, var(--surface));
    color: var(--text);
}

body.rasathane-map .rotation-banner-text {
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0;
}

body.rasathane-map .push-prompt-banner,
body.rasathane-map #ob-quake-confirm {
    position: fixed;
    top: 78px;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%) translateY(-16px);
    width: max-content;
    max-width: 400px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--phase2d-banner-shadow);
    animation: none;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

body.rasathane-map .push-prompt-banner.visible,
body.rasathane-map #ob-quake-confirm.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

body.rasathane-map #ob-quake-confirm {
    border-color: var(--mission);
    background: color-mix(in srgb, var(--mission) 16%, var(--surface));
    color: var(--text);
}

body.rasathane-map #ob-quake-confirm :where(p, small) {
    color: inherit;
}

@media (max-width: 768px) {
    body.rasathane-map .push-prompt-banner,
    body.rasathane-map #ob-quake-confirm {
        top: auto;
        bottom: 72px;
        left: 16px;
        right: 16px;
        width: auto;
        max-width: none;
        transform: translateY(16px);
        margin: 0;
    }

    body.rasathane-map .push-prompt-banner.visible,
    body.rasathane-map #ob-quake-confirm.visible {
        transform: translateY(0);
    }
}

body.rasathane-map :where(.mobile-tools-sheet, .mobile-menu-sheet) {
    border: 1px solid var(--rule);
    border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-panel);
    padding-top: 18px;
}

body.rasathane-map :where(.mobile-tools-sheet, .mobile-menu-sheet)::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 32px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--rule);
    transform: translateX(-50%);
}

body.rasathane-map :where(.tools-sheet-header, .menu-sheet-header) {
    min-height: 44px;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--rule);
}

body.rasathane-map :where(.tools-sheet-btn, .menu-sheet-link, .menu-sheet-download) {
    min-height: 44px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
}

body.rasathane-map :where(.tools-sheet-btn, .menu-sheet-link, .menu-sheet-download):active {
    background: var(--bg);
}

body.rasathane-map :where(.mobile-fab-left, .mobile-fab-right, .mobile-legend-btn, .mobile-fab-menu) {
    width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
}

body.rasathane-map :where(.mobile-fab-left, .mobile-fab-right, .mobile-legend-btn, .mobile-fab-menu).active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

body.rasathane-map .measurement-label,
body.rasathane-map .measurement-tooltip,
body.rasathane-map .measurement-total-inner {
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-pill) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    padding: 4px 8px !important;
    font-family: var(--font-ui) !important;
    font-size: var(--text-xs) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.05) !important;
}

body.rasathane-map .measurement-total-inner {
    border-radius: var(--radius-md) !important;
    padding: 8px 10px !important;
}

body.rasathane-map :where(.measure-popup-wrapper .maplibregl-popup-content, .coord-popup-wrapper .maplibregl-popup-content) {
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-md) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-float) !important;
}

body.rasathane-map :where(.measure-popup-wrapper .maplibregl-popup-tip, .coord-popup-wrapper .maplibregl-popup-tip) {
    border-top-color: var(--surface) !important;
    border-bottom-color: var(--surface) !important;
}

body.rasathane-map .measurement-dot,
body.rasathane-map .measurement-dot-snap {
    width: 20px !important;
    height: 20px !important;
    margin-left: -10px !important;
    margin-top: -10px !important;
    border: 2px solid var(--accent) !important;
    border-radius: 50% !important;
    background: var(--surface) !important;
    cursor: grab;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
}

body.rasathane-map .measurement-dot::after,
body.rasathane-map .measurement-dot-snap::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    transform: translate(-50%, -50%);
}

body.rasathane-map .measurement-dot-snap,
body.rasathane-map .measurement-dot:active {
    cursor: grabbing;
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.15);
    transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

body.rasathane-map .coord-cursor-box,
body.rasathane-map .coord-popup-body,
body.rasathane-map .coord-help-modal {
    background: var(--surface);
    color: var(--text);
    border-color: var(--rule);
}

body.rasathane-map :where(.coord-popup-hdr, .coord-help-title, .coord-help-label, .ccb-label, .cpt-lbl) {
    background: var(--surface);
    color: var(--accent);
    letter-spacing: 0;
}

body.rasathane-map :where(.cpt-val, .coord-help-desc, .coord-help-footer) {
    color: var(--text);
}

body.rasathane-map .coord-pin-inner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: var(--surface);
    color: var(--accent);
    transform: none;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
}

body.rasathane-map .coord-pin-num {
    transform: none;
    color: var(--accent);
}

body.rasathane-map .coord-pin:hover .coord-pin-inner {
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.15);
    transform: scale(1.1);
}

body.rasathane-map .saved-pin-inner {
    width: 24px;
    height: 24px;
    border: 1px solid var(--surface);
    background: var(--accent);
    color: #fff;
}

body.rasathane-map .saved-pin-inner i {
    color: #fff;
}

body.rasathane-map .graph-selection-rectangle {
    border: 1px dashed var(--accent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

body.rasathane-map .my-home-marker {
    background: transparent !important;
    border: 0 !important;
}

body.rasathane-map .user-location-marker {
    background: transparent !important;
    border: 0 !important;
}

body.rasathane-map .my-home-marker-inner,
body.rasathane-map .user-location-marker-inner {
    position: relative;
    width: 32px;
    height: 32px;
}

body.rasathane-map .my-home-marker-core,
body.rasathane-map .user-location-marker-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--surface);
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
}

body.rasathane-map .my-home-marker-pulse,
body.rasathane-map .user-location-marker-pulse {
    position: absolute;
    inset: 0;
    border: 2px solid var(--accent);
    border-radius: 50%;
    animation: phase2dHomePulse 2s ease-out infinite;
}

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

@keyframes phase2dHomePulse {
    from {
        opacity: 1;
        transform: scale(0.5);
    }
    to {
        opacity: 0;
        transform: scale(1.5);
    }
}

@media (max-width: 600px) {
    body.rasathane-map :where(#pushCustomizeModal.push-prefs-overlay, #regionModal.region-modal-overlay, #onboarding-overlay, .compare-overlay, #screenshot-overlay) {
        align-items: flex-end;
        padding: 0;
    }

    body.rasathane-map :where(.compare-modal, .inline-dialog, .ios-dialog, .push-dialog, .push-prefs-panel, .felt-dialog, .hissettim-dialog, .ss-card, #onboarding-overlay .ob-card) {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        max-width: none;
        max-height: calc(100dvh - 24px);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-bottom: 0;
        padding-bottom: max(0px, env(safe-area-inset-bottom));
        transform: none;
    }

    body.rasathane-map :where(.felt-dialog, .ios-dialog) {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
    }

    body.rasathane-map .graph-modal {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: min(82dvh, 720px);
        max-width: none;
        max-height: calc(100dvh - 24px);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-bottom: 0;
        transform: none;
    }

    body.rasathane-map #onboarding-overlay .ob-card {
        min-height: min(520px, calc(100dvh - 24px));
        padding: 28px 24px max(28px, env(safe-area-inset-bottom));
    }

    body.rasathane-map .replay-panel {
        left: 8px;
        right: 8px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        transform: none;
        flex-wrap: wrap;
        border-radius: var(--radius-lg);
    }

    body.rasathane-map .replay-controls {
        min-width: 100%;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    body.rasathane-map :where(.mobile-fab-left, .mobile-fab-right, .mobile-legend-btn, .mobile-fab-menu) {
        right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.rasathane-map :where(.push-prefs-panel, .ob-screen, .rotation-content, .rotation-banner, .my-home-marker-pulse, .user-location-marker-pulse) {
        animation: none !important;
    }

    body.rasathane-map :where(.ob-dot, .rotation-btn, .measurement-dot, .measurement-dot-snap) {
        transition: none !important;
    }
}