:root {
    /* ── Dark theme (default) — Linear-inspired ── */
    --bg:      #0f0f0f;
    --bg2:     #161616;
    --panel:   rgba(22, 22, 22, 0.96);
    --accent:  #5e6ad2;
    --accent2: #26d0a8;
    --warm:    #f97316;
    --text:    #f1f0ee;
    /* --text2 is the "secondary" text colour used on labels, hints, subtitles…
       Was #8a8a8a — almost invisible against the dark bg. Bumped to a clearly
       readable light grey so labels and hints still feel secondary but never
       fade out. */
    --text2:   #c8c6cc;
    --muted:   #3a3a3a;
    --border:  rgba(255, 255, 255, 0.08);
    --border2: rgba(255, 255, 255, 0.14);
    --radius:  6px;
    /* One single UI font across the whole app (Inter). The ONLY exception is the
       AI assistant's answers, which use --serif. */
    --font:    'Inter', system-ui, -apple-system, sans-serif;
    --display: 'Inter', system-ui, -apple-system, sans-serif;
    --label-font: 'Inter', system-ui, -apple-system, sans-serif;
    /* Serif for the AI assistant's answers — the same warm, readable serif family
       Claude's chat uses (Source Serif 4, loaded as a webfont). */
    --serif:   'Source Serif 4', 'Anthropic Serif', 'Tiempos Text', Georgia, 'Times New Roman', serif;
}

/* ── Light theme ── */
[data-theme="light"] {
    --bg:      #f5f5f5;
    --bg2:     #ffffff;
    --panel:   rgba(255, 255, 255, 0.97);
    --accent:  #5e6ad2;
    --accent2: #059669;
    --warm:    #ea580c;
    --text:    #111111;
    /* Was #6b6b6b — washed out on white. Darkened to near-black-grey so
       secondary text always reads clearly on the light theme. */
    --text2:   #2d2d33;
    --muted:   #d4d4d4;
    --border:  rgba(0, 0, 0, 0.08);
    --border2: rgba(0, 0, 0, 0.15);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

/* Loading */
#loading-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

#loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-content {
    text-align: center;
}

.loading-globe {
    width: 90px;
    height: 90px;
    margin: 0 auto 28px;
    position: relative;
}

.globe-ring {
    position: absolute;
    inset: 0;
    border: 2px solid var(--accent);
    border-radius: 50%;
    animation: spin 3s linear infinite;
    opacity: 0.7;
}

.ring-2 {
    border-color: var(--accent2);
    opacity: 0.5;
    animation: spin2 4s linear infinite reverse;
}

.ring-3 {
    border-color: var(--warm);
    opacity: 0.4;
    animation: spin3 5s linear infinite;
}

@keyframes spin {
    from {
        transform: rotateY(0)
    }

    to {
        transform: rotateY(360deg)
    }
}

@keyframes spin2 {
    from {
        transform: rotateX(60deg) rotateY(0)
    }

    to {
        transform: rotateX(60deg) rotateY(-360deg)
    }
}

@keyframes spin3 {
    from {
        transform: rotateY(60deg) rotateZ(0)
    }

    to {
        transform: rotateY(60deg) rotateZ(360deg)
    }
}

.loading-title {
    font-family: var(--display);
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: 0.35em;
    color: var(--accent);
    text-shadow: 0 0 40px rgba(0, 229, 255, 0.4);
    margin-bottom: 8px;
}

.loading-sub {
    font-size: 0.75rem;
    color: var(--text2);
    letter-spacing: 0.1em;
    margin-bottom: 24px;
}

.loading-bar {
    width: 220px;
    height: 2px;
    background: var(--bg2);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto;
}

.loading-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    animation: fill 2.2s ease-in-out forwards;
}

@keyframes fill {
    0% {
        width: 0
    }

    60% {
        width: 75%
    }

    100% {
        width: 100%
    }
}

/* Top Bar */
#top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    height: 50px;
    background: var(--panel);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
}

.tb-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-diamond {
    color: var(--accent);
    font-size: 1rem;
}

.logo-text {
    font-family: var(--display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tb-sep {
    width: 1px;
    height: 22px;
    background: var(--border2);
}

.coord-display {
    display: flex;
    align-items: center;
    gap: 10px;
}

.coord-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.coord-lbl {
    font-size: 0.6rem;
    color: var(--text2);
    letter-spacing: 0.12em;
}

.coord-val {
    font-size: 0.78rem;
    color: var(--accent);
    min-width: 72px;
    font-weight: 500;
}

.coord-dot {
    color: var(--text2);
    font-size: 1.2rem;
    line-height: 1;
}

.tb-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Skorpene profile chip (top-right) ── */
.profile-chip { position: relative; }
.profile-chip[hidden] { display: none; }
.profile-chip-btn {
    display: flex; align-items: center; gap: 9px;
    padding: 5px 12px 5px 6px; border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(139,92,246,0.28);
    color: #f4f2fb; cursor: pointer; font-family: var(--font);
    transition: background .15s, border-color .15s;
}
.profile-chip-btn:hover { background: rgba(139,92,246,0.16); border-color: rgba(139,92,246,0.5); }
.profile-avatar {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}
.profile-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.profile-name { font-size: 12.5px; font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-plan {
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: #b9a8f0;
}
.profile-plan.is-free { color: #f0a8a8; }
.profile-plan.is-choose {
    color: #fff; background: linear-gradient(135deg,#8b5cf6,#6d28d9);
    padding: 1px 7px; border-radius: 999px; margin-top: 1px;
}
.profile-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
    min-width: 180px; padding: 6px;
    background: rgba(24,18,42,0.97); border: 1px solid rgba(139,92,246,0.3);
    border-radius: 12px; box-shadow: 0 16px 44px rgba(0,0,0,0.5);
    display: flex; flex-direction: column; gap: 2px;
}
.profile-menu[hidden] { display: none; }
.profile-menu-item {
    text-align: left; border: 0; background: transparent; cursor: pointer;
    color: #e9e4fb; font-family: var(--font); font-size: 13px; font-weight: 500;
    padding: 9px 11px; border-radius: 8px; transition: background .12s;
}
.profile-menu-item:hover { background: rgba(139,92,246,0.2); }
.profile-menu-logout { color: #f0a8a8; }

.zoom-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 255, 136, 0.08);
    border: 1px solid rgba(0, 255, 136, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
}

.zoom-lbl {
    font-size: 0.6rem;
    color: var(--muted);
    letter-spacing: 0.1em;
}

.zoom-val {
    font-size: 0.9rem;
    color: var(--accent2);
    font-weight: 600;
    min-width: 22px;
    text-align: center;
}

.top-select {
    background: rgba(0, 0, 0, 0.5);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 26px 5px 10px;
    font-family: var(--font);
    font-size: 0.75rem;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%2300e5ff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.2s;
}

.top-select:hover {
    border-color: var(--accent);
}

.top-select option {
    background: var(--bg2);
}

/* Map */
#map-wrapper {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

#map {
    position: absolute;
    inset: 0;
    background: var(--bg);
}

/* ── Free-plan map lock ──
   Blurs the live map and shows an upgrade card. Only visible while the body
   carries .plan-locked (set by applyPlanGating() for Free accounts). Pro/Team
   never see it. It sits over the map but BELOW the top bar and the Feed panel,
   so those stay usable on Free. */
.map-lock {
    position: absolute; inset: 0; z-index: 600;
    display: none;
    align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(10, 8, 20, 0.55);
    backdrop-filter: blur(14px) saturate(0.8);
    -webkit-backdrop-filter: blur(14px) saturate(0.8);
}
body.plan-locked .map-lock { display: flex; }
.map-lock-card {
    max-width: 420px; width: 100%;
    text-align: center;
    background: rgba(24, 18, 42, 0.82);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 18px;
    padding: 30px 28px 26px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.map-lock-icon { font-size: 30px; margin-bottom: 12px; }
.map-lock-title {
    font-size: 20px; font-weight: 700; color: #f4f2fb; margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.map-lock-body {
    font-size: 13.5px; line-height: 1.55; color: #cbc5e0; margin-bottom: 20px;
}
.map-lock-cta {
    display: inline-block; border: 0; cursor: pointer;
    font-family: var(--font); font-size: 14px; font-weight: 600; color: #fff;
    padding: 12px 30px; border-radius: 11px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    box-shadow: 0 8px 24px rgba(109, 40, 217, 0.45);
    transition: transform .15s, box-shadow .15s;
}
.map-lock-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(109, 40, 217, 0.6); }

/* #12 — Force pointer/default cursor on the map. Never show the zoom cursor. */
.leaflet-container {
    cursor: default !important;
}

.leaflet-container.leaflet-grab {
    cursor: grab !important;
}

.leaflet-container.leaflet-grab:active,
.leaflet-container.leaflet-dragging {
    cursor: grabbing !important;
}

.leaflet-interactive {
    cursor: pointer !important;
}

/* Tile rendering — only a GPU compositing hint. No filters, no width
   overrides, no image-rendering changes — those degrade satellite quality
   and shift colours. Seam handling is done in JS via tile-layer options. */
.leaflet-tile {
    will-change: transform;
}

/* Tile-pane background: while tiles for a new zoom level are still loading,
   the gaps would otherwise flash pure black. Painting the pane with the dark
   navy base colour makes those momentary gaps blend into the imagery instead
   of showing as jarring black squares. */
.leaflet-tile-pane,
.leaflet-google-mutant {
    background: var(--bg);
}

/* Leaflet — hide attribution/logo */
.leaflet-control-attribution {
    display: none !important;
}

/* Scale bar — minimalist, auto color */
.leaflet-control-scale {
    line-height: 1;
    margin: 0 !important;
}

.leaflet-control-scale-line {
    background: transparent !important;
    color: var(--scale-text, #fff) !important;
    font-family: var(--font) !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    padding: 2px 6px 4px !important;
    border: none !important;
    border-bottom: 2px solid var(--scale-text, #fff) !important;
    border-left: 2px solid var(--scale-text, #fff) !important;
    border-right: 2px solid var(--scale-text, #fff) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-shadow: var(--scale-shadow, 0 0 3px rgba(0, 0, 0, 0.7)) !important;
}

.leaflet-control-scale-line+.leaflet-control-scale-line {
    display: none !important;
}

.leaflet-bottom.leaflet-left {
    bottom: 18px;
    left: 16px;
}

/* Scale bar dark theme (used on light base layer) */
body.scale-dark {
    --scale-text: #111;
    --scale-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}

body.scale-light {
    --scale-text: #fff;
    --scale-shadow: 0 0 3px rgba(0, 0, 0, 0.85);
}

/* News Panel (Right) */
#news-panel {
    position: fixed;
    top: 66px;
    right: 14px;
    z-index: 1500;
    width: 340px;
    max-height: calc(100vh - 100px);
    background: var(--panel);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

.news-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.news-icon {
    color: var(--accent);
    font-size: 1rem;
}

.news-title {
    font-family: var(--display);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--text2);
    flex: 1;
}

.news-toggle {
    background: none;
    border: 1px solid var(--border);
    color: var(--text2);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.news-toggle:hover {
    background: rgba(0, 229, 255, 0.1);
    color: var(--accent);
    border-color: var(--accent);
}

.news-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.news-body.collapsed {
    display: none;
}

/* Collapsed panel: hide EVERYTHING under the header (tabs, news body, sources
   panel) so only the "Live News" header bar remains — on every tab. */
#news-panel.collapsed .news-src-tabs,
#news-panel.collapsed .news-body,
#news-panel.collapsed .user-src-panel {
    display: none !important;
}

.news-status {
    font-size: 0.7rem;
    color: var(--muted);
    text-align: center;
    padding: 12px 8px;
    font-style: italic;
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-item {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 0.74rem;
    color: var(--text);
    line-height: 1.5;
    transition: border-color 0.15s, background 0.15s;
}

.news-item:hover {
    background: var(--bg2);
    border-color: var(--border2);
}

.news-item-time {
    font-size: 0.58rem;
    color: var(--muted);
    margin-bottom: 6px;
    letter-spacing: 0.05em;
}

.news-item-text {
    color: var(--text);
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    /* preserve newlines from Telegram messages */
}

/* Expand/collapse UX for long messages. Collapsed state clamps height and
   fades the bottom; expanded state releases it and shows a "Show less" link. */
.news-item-text.collapsible {
    position: relative;
    max-height: 7.5em;
    /* ~5 lines at line-height 1.45 */
    overflow: hidden;
}

.news-item-text.collapsible::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.4em;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 0%, var(--bg2) 95%);
}

.news-item-text.expanded {
    max-height: none;
}

.news-item-text.expanded::after {
    display: none;
}

.news-expand-btn {
    margin-top: 4px;
    background: none;
    border: none;
    padding: 2px 0;
    color: var(--accent, #00e5ff);
    font: 600 0.68rem/1.2 var(--font, inherit);
    letter-spacing: 0.04em;
    cursor: pointer;
    text-transform: uppercase;
}

.news-expand-btn:hover {
    text-decoration: underline;
}

/* Multi-media gallery — horizontal strip when 2+ items share a post */
.news-media-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 4px;
    margin: 4px 0 8px;
}

.news-media-gallery.count-1 {
    grid-template-columns: 1fr;
}

.news-media-gallery.count-2 {
    grid-template-columns: 1fr 1fr;
}

.news-media-gallery.count-3 {
    grid-template-columns: 1fr 1fr;
}

.news-media-gallery.count-3>.news-media-wrap:first-child {
    grid-column: 1 / -1;
}

.news-media-gallery.count-4 {
    grid-template-columns: 1fr 1fr;
}

.news-media-gallery .news-media-wrap {
    margin: 0;
}

.news-media-gallery .news-media {
    max-height: 200px;
}

.news-media-gallery.count-1 .news-media {
    max-height: 360px;
}

/* Overflow chip — click the +N thumb to see the rest in the lightbox */
.news-media-more {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font: 700 1.1rem/1 var(--display, sans-serif);
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.04em;
    pointer-events: none;
    /* the wrap handles clicks */
    backdrop-filter: blur(2px);
}

.news-media {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 4px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

video.news-media {
    object-fit: contain;
}

/* Wrapper enables a tappable overlay (click anywhere → lightbox). For videos
   it also hosts the play-icon badge so the native controls are hidden in the
   thumbnail and a single click always expands to the full-screen viewer. */
.news-media-wrap {
    position: relative;
    display: block;
    margin: 4px 0 8px;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
    /* hand cursor — clear clickability affordance */
    transition: filter 0.2s, transform 0.2s;
}

.news-media-wrap:hover {
    filter: brightness(1.08);
}

.news-media-wrap .news-media {
    margin: 0;
    border: none;
    border-radius: 0;
    pointer-events: none;
    /* let the wrap catch the click uniformly */
}

/* Photos: small corner zoom indicator that only appears on hover */
.news-media-wrap:not(.is-video)::after {
    content: '⤢';
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.45);
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.2s, transform 0.2s;
    backdrop-filter: blur(6px);
}

.news-media-wrap:not(.is-video):hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* Videos: triangular play badge always visible — corner, small */
.news-media-wrap.is-video::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.58);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    backdrop-filter: blur(5px);
    transition: transform 0.2s, background 0.2s;
}

.news-media-wrap.is-video::before {
    /* Crisp CSS-drawn triangle — no font rendering, always sharp */
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 14px;
    border-color: transparent transparent transparent #fff;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
    transition: transform 0.2s;
}

.news-media-wrap.is-video:hover::after {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(0, 0, 0, 0.75);
}

.news-media-wrap.is-video:hover::before {
    transform: translate(-40%, -50%) scale(1.15);
}

/* Left Panel */
#left-panel {
    position: fixed;
    top: 66px;
    left: 14px;
    z-index: 1500;
    width: 232px;
    background: var(--panel);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    display: none;                /* hidden by default — toggled by #layers-fab */
    transform-origin: top left;
    animation: layerPanelIn 0.18s ease-out;
}
#left-panel.is-open { display: block; }
@keyframes layerPanelIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Top-bar trigger: opens / closes the layers panel */
.layers-fab {
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 10px; margin-left: 8px;
    background: transparent;
    border: 1px solid var(--border); border-radius: var(--radius);
    color: var(--text2); cursor: pointer; transition: all 0.15s ease;
    font-family: var(--font); font-size: 0.7rem; font-weight: 500;
    letter-spacing: 0.04em;
}
.layers-fab:hover { color: var(--text); border-color: var(--border2); }
.layers-fab.is-active {
    color: var(--text); border-color: var(--accent);
    background: rgba(94, 106, 210, 0.12);
}
.layers-fab-ico { color: var(--accent); font-size: 0.85rem; }
.layers-fab-caret { font-size: 0.6rem; opacity: 0.7; transition: transform 0.15s ease; }
.layers-fab.is-active .layers-fab-caret { transform: rotate(180deg); }

/* Settings button (top-bar, right side) + dropdown panel */
.settings-fab {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: transparent;
    border: 1px solid var(--border); border-radius: var(--radius);
    color: var(--text2); cursor: pointer; transition: all 0.15s ease;
}
.settings-fab:hover { color: var(--text); border-color: var(--border2); }
.settings-fab.is-active {
    color: var(--text); border-color: var(--accent);
    background: rgba(94, 106, 210, 0.12);
}
.settings-fab svg { display: block; }

#settings-panel {
    position: fixed;
    top: 66px;
    right: 14px;
    z-index: 99000;
    width: 240px;
    background: var(--panel);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    display: none;
    transform-origin: top right;
    animation: settingsPanelIn 0.18s ease-out;
}
#settings-panel.is-open { display: block; }
@keyframes settingsPanelIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Custom dropdown (replaces native <select> in settings) ──
   Native selects open a system popup that overlaps the trigger and hides the
   chevron, so we roll our own: the menu opens below the trigger and the
   chevron rotates in place so the user can always see how to collapse it. */
.cs-dropdown { position: relative; width: 100%; font-family: var(--font); }
.cs-trigger {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    transition: border-color 0.15s;
}
.cs-trigger:hover { border-color: var(--border2); }
.cs-dropdown.is-open .cs-trigger { border-color: var(--accent); }
.cs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-chevron {
    width: 10px; height: 10px;
    margin-left: 8px; flex-shrink: 0;
    color: var(--text2);
    transition: transform 0.18s;
}
.cs-dropdown.is-open .cs-chevron { transform: rotate(180deg); color: var(--accent); }
.cs-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    list-style: none;
    margin: 0; padding: 4px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.cs-menu[hidden] { display: none; }
.cs-option {
    padding: 7px 10px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.78rem;
    color: var(--text);
    transition: background 0.1s;
}
.cs-option:hover { background: var(--bg); }
.cs-option.sel { background: rgba(94, 106, 210, 0.14); color: var(--accent); }

/* AI master switch — gates every call to /api/claude. ON = full features (chat,
   news geolocation, emoji curation). OFF = no AI calls, saving API credits. */
.ai-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    height: 28px; padding: 0 10px; margin-right: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border); border-radius: 7px;
    color: var(--text2); cursor: pointer; transition: all 0.15s ease;
    font-family: var(--display); font-size: 0.65rem; letter-spacing: 0.12em;
}
.ai-toggle:hover { color: #fff; }
.ai-toggle-ico { font-size: 0.95rem; line-height: 1; }
.ai-toggle-lbl { font-weight: 600; }
.ai-toggle-switch {
    position: relative; width: 28px; height: 14px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 7px;
    transition: background 0.18s ease;
}
.ai-toggle-knob {
    position: absolute; top: 1px; left: 1px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #fff;
    transition: transform 0.18s ease;
}
.ai-toggle.is-on {
    color: var(--accent); border-color: rgba(0, 229, 255, 0.4);
}
.ai-toggle.is-on .ai-toggle-switch { background: var(--accent); }
.ai-toggle.is-on .ai-toggle-knob { transform: translateX(14px); }
.ai-toggle.is-off { opacity: 0.65; }
.ai-toggle.is-off .ai-toggle-ico { filter: grayscale(1); }

.panel-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.panel-icon {
    color: var(--accent);
    font-size: 0.95rem;
}

.panel-title {
    font-family: var(--display);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--text2);
    flex: 1;
}

.panel-toggle {
    background: none;
    border: 1px solid var(--border);
    color: var(--text2);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.panel-toggle:hover {
    background: rgba(0, 229, 255, 0.1);
    color: var(--accent);
    border-color: var(--accent);
}

.panel-body {
    padding: 12px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
}

.panel-body.collapsed {
    display: none;
}

.p-section {
    margin-bottom: 16px;
}

.p-section:last-child {
    margin-bottom: 4px;
}

.p-section-title {
    font-size: 0.58rem;
    color: var(--text2);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.mode-row {
    display: flex;
    gap: 6px;
}

.mode-btn {
    flex: 1;
    padding: 7px 4px;
    border-radius: 6px;
    font-family: var(--font);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text2);
}

.mode-btn.active {
    background: rgba(0, 229, 255, 0.12);
    color: var(--accent);
    border-color: var(--accent);
}

.mode-btn:hover:not(.active) {
    border-color: var(--border2);
    color: var(--text);
}

.radio-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 2px;
    font-size: 0.77rem;
    color: var(--text);
}

.radio-opt:hover {
    background: rgba(0, 229, 255, 0.07);
}

.radio-opt.active {
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.2);
}

.r-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid var(--muted);
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s;
}

.radio-opt.active .r-dot {
    border-color: var(--accent);
}

.radio-opt.active .r-dot::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent);
}

.chk-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 2px;
    font-size: 0.77rem;
    color: var(--text);
}

.chk-opt:hover {
    background: rgba(0, 229, 255, 0.07);
}

.chk {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    border: 2px solid var(--muted);
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s;
}

.chk.on {
    border-color: var(--accent2);
    background: rgba(0, 255, 136, 0.12);
}

.chk.on::after {
    content: '✓';
    position: absolute;
    top: -2px;
    left: 1px;
    font-size: 0.6rem;
    color: var(--accent2);
    font-weight: 700;
}

.tool-btn {
    display: block;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 4px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text2);
    font-family: var(--font);
    font-size: 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}

.tool-btn:hover {
    background: rgba(0, 229, 255, 0.08);
    color: var(--accent);
    border-color: var(--accent);
}

.tool-btn.active {
    background: rgba(0, 229, 255, 0.12);
    color: var(--accent);
    border-color: var(--accent);
}

.tool-btn.danger:hover {
    background: rgba(255, 80, 80, 0.1);
    color: #ff5050;
    border-color: #ff5050;
}

/* Context Menu */
#context-menu {
    position: fixed;
    z-index: 4000;
    min-width: 200px;
    display: none;
    background: var(--panel);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    padding: 6px 0;
    animation: popIn 0.15s ease;
}

.cm-header {
    font-size: 0.55rem;
    color: var(--muted);
    letter-spacing: 0.2em;
    padding: 8px 16px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.78rem;
    padding: 9px 16px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
}

.cm-item:hover {
    background: rgba(0, 229, 255, 0.1);
    color: var(--accent);
}

.cm-icon {
    width: 18px;
    text-align: center;
    color: var(--text2);
}

.cm-item:hover .cm-icon {
    color: var(--accent);
}

.cm-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* Measure Panel */
#measure-panel {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    min-width: 280px;
    background: var(--panel);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    display: none;
}

.mp-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    font-family: var(--display);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: var(--text2);
}

.mp-hdr span:first-child {
    color: var(--accent);
}

.mp-hdr span:nth-child(2) {
    flex: 1;
}

.mp-hdr button {
    background: none;
    border: 1px solid var(--border);
    color: var(--text2);
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mp-hdr button:hover {
    background: rgba(255, 80, 80, 0.12);
    color: #ff5050;
    border-color: #ff5050;
}

#mp-info {
    padding: 12px 14px;
    font-size: 0.78rem;
    min-height: 48px;
}

.mp-hint {
    color: var(--text2);
    font-style: italic;
}

.mp-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
}

.mp-lbl {
    font-size: 0.62rem;
    color: var(--muted);
    letter-spacing: 0.08em;
}

.mp-val {
    color: var(--accent);
    font-weight: 600;
}

.mp-actions {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
}

.mp-btn {
    flex: 1;
    padding: 7px;
    border-radius: 6px;
    font-family: var(--font);
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text2);
}

.mp-btn.primary {
    background: rgba(0, 229, 255, 0.1);
    color: var(--accent);
    border-color: var(--accent);
}

.mp-btn.primary:hover {
    background: rgba(0, 229, 255, 0.2);
}

.mp-btn:not(.primary):hover {
    background: rgba(255, 80, 80, 0.08);
    color: #ff5050;
    border-color: #ff5050;
}

/* Location Popup */
#loc-popup {
    position: fixed;
    z-index: 3000;
    min-width: 240px;
    max-width: 300px;
    background: var(--panel);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    display: none;
    animation: popIn 0.18s ease;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.95)
    }

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

.lp-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.lp-flag {
    width: 28px;
    height: 20px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.lp-flag.visible {
    display: block;
}

.lp-names {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lp-name {
    font-family: var(--display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-name-sub {
    font-family: var(--label-font);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text2);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none;
}

.lp-name-sub.visible {
    display: block;
}

.lp-close {
    background: none;
    border: 1px solid var(--border);
    color: var(--text2);
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.lp-close:hover {
    background: rgba(255, 80, 80, 0.12);
    color: #ff5050;
    border-color: #ff5050;
}

.lp-body {
    padding: 10px 14px;
}

.lp-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.lp-row:last-child {
    border-bottom: none;
}

.lp-lbl {
    font-size: 0.62rem;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lp-val {
    font-size: 0.78rem;
    color: var(--text);
    font-weight: 500;
    text-align: right;
    max-width: 170px;
}

/* Popup footer / clear button */
.lp-footer {
    padding: 8px 14px 10px;
    border-top: 1px solid var(--border);
}

.lp-clear-btn {
    width: 100%;
    padding: 7px;
    border-radius: 6px;
    font-family: var(--font);
    font-size: 0.73rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid rgba(255, 80, 80, 0.3);
    background: rgba(255, 80, 80, 0.08);
    color: #ff6060;
    letter-spacing: 0.05em;
}

.lp-clear-btn:hover {
    background: rgba(255, 80, 80, 0.18);
    border-color: #ff5050;
    color: #ff5050;
}

/* Measure Drawing Styles — precise vertex alignment.
   Vertices use the SAME zoom-driven scale variable as labels so they grow
   when the user zooms in and remain readable when zoomed out. */
.measure-vertex-wrap {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.measure-vertex {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00e5ff;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 229, 255, 0.55);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.12s ease;
    box-sizing: border-box;
    transform: scale(var(--vertex-scale, 1));
}

.measure-vertex:active {
    cursor: grabbing;
}

.measure-vertex:hover {
    transform: scale(calc(var(--vertex-scale, 1) * 1.35));
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 12px rgba(0, 229, 255, 0.85);
}

.measure-vertex.first-point {
    background: #00ff88;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 255, 136, 0.75);
}

.measure-vertex.first-point.close-hint {
    animation: closePulse 0.9s ease-in-out infinite;
    transform: scale(calc(var(--vertex-scale, 1) * 1.5));
}

.measure-vertex.snap-target {
    transform: scale(calc(var(--vertex-scale, 1) * 1.5));
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(255, 255, 255, 0.45), 0 2px 14px rgba(0, 229, 255, 0.95);
}

@keyframes closePulse {

    0%,
    100% {
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 8px rgba(0, 255, 136, 0.8)
    }

    50% {
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 16px rgba(0, 255, 136, 1), 0 0 0 6px rgba(0, 255, 136, 0.3)
    }
}

/* Smooth, anti-aliased measurement lines via SVG path tweaks */
.leaflet-overlay-pane svg path.measure-stroke {
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.55));
}

.leaflet-overlay-pane svg path.measure-stroke-preview {
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.7;
}

/* Disabled checkbox option */
.chk-opt.disabled {
    opacity: 0.35;
    pointer-events: none;
    filter: grayscale(0.8);
}

#borders-section.hidden {
    display: none;
}

/* ──────────────────────────────────────────────────────────────
   Custom geographic labels — bilingual architecture
   ──────────────────────────────────────────────────────────────
   Structure:
     <div class="geo-marker">                         ← 0×0 Leaflet anchor
       <span class="geo-inner geo-TYPE geo-theme-X">  ← centred over anchor
         <span class="geo-bi-tr">Translated Name</span>  ← primary (larger)
         <span class="geo-bi-nat">Native Name</span>     ← secondary (smaller)
       </span>
     </div>

   .geo-bi-nat is omitted when translated == native (e.g. English mode).
   Each text child carries its own -webkit-text-stroke so the paint-order
   technique (stroke under fill = Google-Maps halo, not glow) works correctly
   on sub-elements.
   ────────────────────────────────────────────────────────────── */
.geo-marker {
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Outer container: positions and scales, no direct text */
.geo-inner {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%) scale(var(--label-scale, 1));
    transform-origin: center;
    transition: transform 0.15s ease;
    will-change: transform;
    user-select: none;
    pointer-events: none;
    text-align: center;
    font-family: var(--label-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* column layout for primary + secondary text lines */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    row-gap: 0.5px;
}

/* ── Primary translated text ────────────────────────── */
.geo-bi-tr {
    display: block;
    white-space: nowrap;
    line-height: 1.2;
    paint-order: stroke fill;
    font-style: normal;
}

/* ── Secondary native/English reference text ─────────── */
.geo-bi-nat {
    display: block;
    white-space: nowrap;
    line-height: 1.1;
    font-size: 0.76em;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.01em;
    opacity: 0.78;
    paint-order: stroke fill;
    margin-top: 0.5px;
}

/* ── Country labels ──────────────────────────────────── */
.geo-country .geo-bi-tr {
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.geo-country .geo-bi-nat {
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Countries with an info record get a subtle underline + pointer cursor so
   users discover the click affordance. */
.geo-country.has-info {
    cursor: pointer;
    pointer-events: auto;
}

.geo-country.has-info .geo-bi-tr {
    transition: transform 0.18s ease;
    transform-origin: center center;
    display: inline-block;
}

/* Hover: SCALE ONLY — no color change, no glow. Subtle "this is clickable" hint. */
.geo-country.has-info:hover .geo-bi-tr {
    transform: scale(1.10);
}
.geo-country.has-info:hover .geo-bi-nat {
    transform: scale(1.08);
    display: inline-block;
}

/* City labels become clickable too — scale-only hover. */
.geo-city {
    cursor: pointer;
    pointer-events: auto;
}
.geo-city .geo-bi-tr,
.geo-city .geo-bi-nat {
    transition: transform 0.18s ease;
    display: inline-block;
}
.geo-city:hover .geo-bi-tr {
    transform: scale(1.10);
}
.geo-city:hover .geo-bi-nat {
    transform: scale(1.08);
}

/* Water labels — scale-only hover */
.water-label {
    cursor: pointer;
    pointer-events: auto;
}
.water-label .geo-bi-tr,
.water-label .geo-bi-nat {
    transition: transform 0.18s ease;
    display: inline-block;
}
.water-label:hover .geo-bi-tr {
    transform: scale(1.10);
}
.water-label:hover .geo-bi-nat {
    transform: scale(1.08);
}

/* ── City labels ─────────────────────────────────────── */
.geo-city .geo-bi-tr {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    font-size: 0.74rem;
    letter-spacing: 0.01em;
}

.geo-city-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
    font-style: normal;
}

/* ── Water body labels (italic = cartographic tradition) ─ */
.water-label .geo-bi-tr {
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.water-label .geo-bi-nat {
    font-style: italic;
}

.water-label-sea .geo-bi-tr {
    font-size: 0.92rem;
    font-weight: 600;
}

.water-label-gulf .geo-bi-tr {
    font-size: 0.82rem;
}

.water-label-strait .geo-bi-tr {
    font-size: 0.74rem;
    letter-spacing: 0.05em;
}

/* ── Stroke outline per theme ────────────────────────────
   Applied directly to each text-rendering child so paint-order
   works correctly. Stroke weights are deliberately subtle —
   Google Maps style: visible halo without looking painted-over. */
.geo-theme-dark .geo-bi-tr {
    color: #111416;
    -webkit-text-stroke: 1.7px rgba(255, 255, 255, 0.92);
}

.geo-theme-dark .geo-bi-nat {
    color: #111416;
    -webkit-text-stroke: 1.1px rgba(255, 255, 255, 0.78);
}

.geo-theme-light .geo-bi-tr {
    color: #f0f4f8;
    -webkit-text-stroke: 1.7px rgba(0, 0, 0, 0.84);
}

.geo-theme-light .geo-bi-nat {
    color: #f0f4f8;
    -webkit-text-stroke: 1.1px rgba(0, 0, 0, 0.68);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 3px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--border2);
    border-radius: 3px;
}

/* ──────────────────────────────────────────────────────────────
   Media Lightbox — full-screen viewer for news photos and videos
   Click thumbnail → backdrop appears with media centred and resizable.
   Native video controls give play/pause/mute/volume/fullscreen.
   ────────────────────────────────────────────────────────────── */
.mv-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.94);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    animation: mvFade 0.18s ease;
}

.mv-backdrop.open {
    display: flex;
}

@keyframes mvFade {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.mv-stage {
    max-width: 96vw;
    max-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mv-stage img,
.mv-stage video {
    max-width: 96vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    background: #000;
}

.mv-stage video {
    min-width: 320px;
}

.mv-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
    z-index: 2;
}

/* Gallery navigation inside the lightbox */
.mv-nav {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
    z-index: 3;
    transform: translateY(-50%);
    user-select: none;
}

.mv-nav:hover {
    background: rgba(0, 229, 255, 0.25);
    border-color: var(--accent);
    transform: translateY(-50%) scale(1.08);
}

.mv-prev {
    left: 20px;
}

.mv-next {
    right: 20px;
}

.mv-counter {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font: 600 0.72rem/1 'JetBrains Mono', monospace;
    letter-spacing: 0.08em;
    z-index: 3;
}

.mv-close:hover {
    background: rgba(255, 80, 80, 0.85);
    border-color: #ff5050;
    transform: scale(1.06);
}

/* The thumbnail click affordance lives on .news-media-wrap; leave bare
   .news-media untouched so inline usage (no wrap) still renders normally. */

/* ──────────────────────────────────────────────────────────────
   Search Bar (top bar, Nominatim-powered)
   ────────────────────────────────────────────────────────────── */
.search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 10px;
    color: var(--muted);
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 1;
    line-height: 1;
}

.search-input {
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 20px;
    padding: 5px 12px 5px 30px;
    font-family: var(--font);
    font-size: 0.73rem;
    outline: none;
    width: 190px;
    transition: width 0.25s ease, border-color 0.2s, background 0.2s;
    cursor: text;
}

.search-input:focus {
    border-color: var(--accent);
    width: 260px;
    background: rgba(0, 0, 0, 0.65);
}

.search-input::placeholder {
    color: var(--muted);
}

.search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 320px;
    max-height: 290px;
    overflow-y: auto;
    background: var(--panel);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    display: none;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.65);
    z-index: 9000;
    animation: popIn 0.14s ease;
}

.sr-item {
    padding: 9px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.14s;
}

.sr-item:last-child {
    border-bottom: none;
}

.sr-item:hover {
    background: rgba(0, 229, 255, 0.1);
}

.sr-name {
    font-size: 0.77rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 290px;
}

.sr-item:hover .sr-name {
    color: var(--accent);
}

.sr-type {
    font-size: 0.59rem;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
}

@media (max-width:768px) {
    #left-panel {
        width: 200px;
        left: 8px;
    }

    .coord-display {
        display: none;
    }

    .tb-sep {
        display: none;
    }

    .search-input {
        width: 140px;
    }

    .search-input:focus {
        width: 180px;
    }
}

/* ──────────────────────────────────────────────
   EVENT ICONS — Apple-system-style SVG pins
────────────────────────────────────────────── */
/* NB: Leaflet writes its own inline `transform` onto `.ev-divicon`
   (the root marker element) for positioning. Do NOT add CSS transforms
   there — put all scaling on the inner `.ev-pin`. */
.ev-divicon {
    background: transparent;
    border: 0;
    /* iOS-quality fade transition — opacity-only so it never causes a
       layout reflow. will-change promotes the layer to the GPU
       compositor so transforms and opacity transitions run at 60fps
       without repainting the underlying tile. */
    transition: opacity 0.3s ease;
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);   /* force own compositor layer */
}

/* Smooth fade-in on first paint — iOS pop: opacity 0→1 + scale 0.8→1
   together using Apple's signature spring curve. Layout never reflows
   (only transform + opacity animate). The animation runs exactly once
   because the .ev-fade-in class is only present on initial render. */
.ev-divicon.ev-fade-in .ev-pin {
    animation: ev-pin-ios-pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes ev-pin-ios-pop {
    0%   { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

/* Near-expiry: icons within 1 hour of their TTL boundary. Kept fully opaque
   (icons must never look transparent); imminent removal is signalled by a
   subtle warm ring on the pin instead of dimming the whole marker. */
.ev-divicon.ev-near-expiry {
    opacity: 1;
}
.ev-divicon.ev-near-expiry .ev-pin {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(255, 170, 90, 0.55);
}

/* Fade-out before removal — used by fadeRemoveMarker(). Animation length
   must match the 500 ms timeout that actually deletes the marker. */
@keyframes ev-fade-out-anim {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.7); }
}
.ev-divicon.ev-fade-out .ev-pin {
    animation: ev-fade-out-anim 0.5s cubic-bezier(0.4, 0, 1, 1) forwards;
    pointer-events: none;
}

/* Icon scaling on zoom uses width/height (driven by --event-size on :root)
   instead of CSS transforms. Some unknown rule in the cascade nullifies any
   transform on .ev-pin (even !important inline styles), so size-based scaling
   is the only reliable path. The element is centered on its anchor point via
   absolute positioning + negative margins computed from --event-size, so the
   geo position stays exact as the pin grows or shrinks. */
.ev-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--event-size, 32px);
    height: var(--event-size, 32px);
    margin-left: calc(var(--event-size, 32px) / -2);
    margin-top: calc(var(--event-size, 32px) / -2);
    border-radius: 50%;
    background: rgba(17, 20, 24, 0.94);
    /* Accent color comes from the canonical type — set as --accent inline
       on the .ev-pin element. Falls back to neutral if unset. */
    border: 2.5px solid var(--accent, rgba(255, 255, 255, 0.9));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    /* iOS spring curve — cubic-bezier(0.34, 1.56, 0.64, 1) overshoots
       slightly then settles, matching the system spring animation.
       transform + box-shadow only → no layout reflow, runs on GPU. */
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.18s ease;
    transform-origin: center;
    /* GPU compositor layer — keeps icon transforms off the main thread */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Apple HIG: tap target is always ≥ 44×44 even when the visible icon
   is smaller. The invisible ::before pseudo-element extends the
   pointer-events area without altering the icon's visible footprint
   or layout. Critical for accuracy on touch devices. */
.ev-pin::before {
    content: '';
    position: absolute;
    /* Always at least 44×44, scales up if the visible pin is larger */
    width: max(44px, 100%);
    height: max(44px, 100%);
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    /* Transparent — purely a hit-test extender. */
    background: transparent;
    border-radius: 50%;
    z-index: -1;
    pointer-events: auto;
}

.ev-pin:active { cursor: grabbing; }

/* Minimalist central anchor — no halo, just a crisp pinpoint */
.ev-center-dot {
    opacity: 0.9;
    filter: drop-shadow(0 0 3px rgba(0, 229, 255, 0.55));
}


.ev-pin:hover {
    /* Apple-quality interaction: 1.15× pop with a soft accent ring */
    transform: scale(1.15);
    box-shadow:
        0 4px 14px color-mix(in srgb, var(--accent, #00e5ff) 60%, transparent),
        0 0 0 1px color-mix(in srgb, var(--accent, #00e5ff) 70%, transparent);
    z-index: 10;
}

/* SVG holder (replaces the old emoji span). Always centered.
   The emoji font stack guarantees consistent rendering across platforms
   even when the icon is an emoji rather than an SVG. */
.ev-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    text-align: center;
    line-height: 1;
}

/* Emoji markers (ev.event_icon) — sized as a fraction of the pin, like the SVGs were */
.ev-icon-emoji {
    font-size: calc(var(--event-size, 32px) * 0.6);
}

/* SVG itself — single-color via currentColor, sized as a fraction of
   the pin so it stays crisp at any zoom level. No drop-shadow filter
   (kept the pin shadow instead — drop-shadow on SVGs is expensive). */
.ev-svg {
    width: calc(var(--event-size, 32px) * 0.62);
    height: calc(var(--event-size, 32px) * 0.62);
    color: var(--accent, #fff);
    display: block;
    /* shape-rendering kept off so circles stay smooth at small sizes */
}

/* Legacy emoji fallback — kept hidden so old cached HTML doesn't double-render */
.ev-emoji { display: none; }

/* Count badge — sits on the upper-right of the pin, accent-tinted. */
.ev-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--accent, #00e5ff);
    color: #0a0f14;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 0.68rem/1 'JetBrains Mono', monospace;
    border: 1.5px solid rgba(17, 20, 24, 0.95);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    z-index: 2;
    pointer-events: none;
    box-sizing: border-box;
}

/* Spiderfy expand/collapse: event icons slide between the centre and their
   ring positions via a GPU transform transition (added only while animating);
   the connector legs fade in. Smooth, compositor-driven, no layout reflow. */
.leaflet-event-pane.ev-spider-anim .leaflet-marker-icon {
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.ev-leg {
    animation: ev-leg-in 0.34s ease-out both;
}
@keyframes ev-leg-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Cluster marker: aggregates many nearby events under a single chip.
   Color = accent of the dominant canonical type in the cluster. */
.ev-cluster {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--cluster-size, 40px);
    height: var(--cluster-size, 40px);
    margin-left: calc(var(--cluster-size, 40px) / -2);
    margin-top: calc(var(--cluster-size, 40px) / -2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 20, 24, 0.94);
    border: 2.5px solid var(--accent, #00e5ff);
    color: #fff;
    font: 700 0.85rem/1 'JetBrains Mono', monospace;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.55),
        0 0 0 5px color-mix(in srgb, var(--accent, #00e5ff) 22%, transparent);
    cursor: pointer;
    /* iOS spring + GPU layer (matches .ev-pin treatment) */
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease,
                background 0.25s ease,
                border-color 0.25s ease;
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/* Spiderfy beacon — central dot a fanned-out cluster collapses to. */
.ev-beacon-wrap { background: transparent; border: none; }
.ev-beacon {
    width: 14px;
    height: 14px;
    margin: 2px;
    border-radius: 50%;
    background: var(--accent, #00e5ff);
    border: 2px solid #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #00e5ff) 35%, transparent),
                0 0 10px var(--accent, #00e5ff);
    cursor: pointer;
    animation: ev-beacon-pulse 1.6s ease-in-out infinite;
}
@keyframes ev-beacon-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

.ev-cluster:hover {
    transform: scale(1.12);
    box-shadow:
        0 4px 14px color-mix(in srgb, var(--accent, #00e5ff) 55%, transparent),
        0 0 0 7px color-mix(in srgb, var(--accent, #00e5ff) 30%, transparent);
}
/* Cluster chip wraps a marker div — extend the tap target the same way */
.leaflet-marker-icon.ev-clusterIcon::before {
    content: '';
    position: absolute;
    width: max(44px, 100%);
    height: max(44px, 100%);
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: auto;
}
.ev-cluster-count {
    pointer-events: none;
    /* Smooth count transition when cluster composition changes */
    transition: color 0.2s ease;
}
/* iOS-style entry animation for a freshly-spawned cluster chip */
.leaflet-marker-icon.ev-clusterIcon .ev-cluster {
    animation: ev-pin-ios-pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ─── iOS-style popup / tooltip entry animation ─── */
/* Leaflet tooltips for event markers (.evt-tooltip-wrap) should pop in like an
   iOS context menu. IMPORTANT: the pop animation must NOT touch `transform` on
   the .leaflet-tooltip element itself — Leaflet positions the tooltip via
   transform:translate3d() there, so animating transform:scale() would override
   it and snap the tooltip to the map's top-left corner. So we only fade the
   container and run the scale-pop on the inner .evt-tooltip instead. */
@keyframes evt-tooltip-ios-pop {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
.evt-tooltip-wrap .evt-tooltip {
    transform-origin: center bottom;
    animation: evt-tooltip-ios-pop 0.2s cubic-bezier(0.32, 0.72, 0, 1) both;
    will-change: opacity, transform;
}

/* Pulse animation on newly arrived events */
@keyframes ev-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.75);
    }

    70% {
        box-shadow: 0 0 0 16px rgba(0, 229, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 229, 255, 0);
    }
}

.ev-divicon.ev-pulse .ev-pin {
    animation: ev-pulse 1.6s ease-out 1;
}

/* Tooltip */
.evt-tooltip-wrap.leaflet-tooltip {
    background: rgba(14, 18, 22, 0.97);
    color: #e6f4ff;
    border: 1px solid rgba(0, 229, 255, 0.45);
    border-radius: 6px;
    padding: 0;
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: 0.72rem;
    line-height: 1.35;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}

.evt-tooltip-wrap.leaflet-tooltip::before {
    display: none;
}

.evt-tooltip {
    padding: 8px 10px;
    min-width: 180px;
    max-width: 280px;
    max-height: 60vh;
    /* stay inside the viewport on any map size */
    overflow-y: auto;
    /* scroll long content instead of clipping */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: rgba(0, 229, 255, 0.4) transparent;
}

.evt-tooltip::-webkit-scrollbar {
    width: 6px;
}

.evt-tooltip::-webkit-scrollbar-thumb {
    background: rgba(0, 229, 255, 0.4);
    border-radius: 3px;
}

.evt-tooltip::-webkit-scrollbar-track {
    background: transparent;
}

.evt-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.2);
}

.evt-ico {
    font-size: 15px;
    /* Consistent emoji rendering across platforms (notably Windows). */
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
}

/* One-line tooltip ("💥 Airstrike — short news summary"). Dark bg, light
   text, sharp corners, NO drop shadow — military aesthetic. Capped width
   so a long news summary doesn't push the tooltip off-viewport. */
.evt-tooltip-line {
    display: block;
    max-width: 360px;
    color: #e7eef5;
    font: 500 0.74rem/1.4 'Roboto', system-ui, sans-serif;
    letter-spacing: 0.01em;
    white-space: normal;
}
.evt-tooltip-line .evt-ico { margin-right: 4px; }
.evt-tooltip-line .evt-label {
    color: #ffffff;
    font-weight: 700;
}
.evt-tooltip-line .evt-dash {
    color: #6b8294;
    margin: 0 2px;
}
.evt-tooltip-line .evt-summary {
    color: #d0dae5;
}
.evt-tooltip-line .evt-loc-inline {
    color: #8da5ba;
    font-size: 0.68rem;
    margin-left: 4px;
}
/* Tooltip wrapper override: kill rounded corners + drop shadows. */
.leaflet-tooltip.evt-tooltip-wrap {
    border-radius: 0 !important;
    box-shadow: none !important;
    background: rgba(8, 12, 16, 0.96) !important;
    border: 1px solid rgba(0, 229, 255, 0.28) !important;
    padding: 7px 10px !important;
    max-width: 380px;
}
.leaflet-tooltip.evt-tooltip-wrap.leaflet-tooltip-top::before,
.leaflet-tooltip.evt-tooltip-wrap.leaflet-tooltip-bottom::before {
    border-top-color: rgba(0, 229, 255, 0.28);
}


.evt-label {
    color: #fff;
}

.evt-line {
    font-size: 0.68rem;
    color: #bcd;
}

.evt-loc {
    color: #fff;
    font-weight: 500;
}

.evt-cred {
    color: var(--accent2, #00ff88);
    font-weight: 500;
}

.evt-meta {
    opacity: 0.75;
    font-size: 0.64rem;
}

/* News items: event header, channel tag, credibility, highlight */
.news-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.news-channel {
    font-size: 0.6rem;
    color: var(--accent, #00e5ff);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

.news-item-time {
    font-size: 0.58rem;
    color: var(--muted);
    margin: 0;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.news-item.has-event {
    cursor: pointer;
    border-left: 3px solid var(--accent, #00e5ff);
}

.news-item.has-event:hover {
    background: rgba(0, 229, 255, 0.15);
}

.news-event-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    margin: 0 0 6px;
    border-radius: 4px;
    background: rgba(0, 229, 255, 0.14);
    border: 1px solid rgba(0, 229, 255, 0.35);
    font-size: 0.66rem;
    font-weight: 500;
    color: #cfeaff;
}

.news-event-tag .ev-ico {
    font-size: 13px;
    line-height: 1;
}

.news-event-tag .ev-lbl {
    letter-spacing: 0.02em;
}

.news-event-tag .ev-loc {
    opacity: 0.85;
    font-style: italic;
}

.loc-approx {
    opacity: 0.55;
    font-size: 0.9em;
    font-style: normal;
}

.loc-native {
    opacity: 0.55;
    font-size: 0.82em;
    font-style: italic;
    margin-left: 3px;
}

.news-cred {
    display: inline-block;
    margin: 0 0 6px 6px;
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(0, 255, 136, 0.14);
    border: 1px solid rgba(0, 255, 136, 0.4);
    color: var(--accent2, #00ff88);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

@keyframes news-flash {
    0% {
        box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.85);
        background: rgba(0, 229, 255, 0.28);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 229, 255, 0);
        background: rgba(0, 229, 255, 0.08);
    }
}

.news-item.highlighted {
    animation: news-flash 3.2s ease-out 1;
    border-color: var(--accent, #00e5ff);
}

/* ── Country info markers + popup ─────────────────────── */
.ci-marker {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    background: rgba(14, 18, 22, 0.78);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}

.ci-marker:hover {
    transform: scale(1.18);
    box-shadow: 0 4px 12px rgba(0, 229, 255, 0.35);
}

.ci-popup .leaflet-popup-content-wrapper {
    background: rgba(14, 18, 22, 0.97);
    border: 1px solid rgba(0, 229, 255, 0.22);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    color: #e6f4ff;
}

.ci-popup .leaflet-popup-tip-container {
    display: none;
}

.ci-popup .leaflet-popup-close-button {
    color: #7fa8cc;
}

.ci-popup .leaflet-popup-close-button:hover {
    color: #00e5ff;
}

.ci-popup-inner {
    padding: 4px 2px;
    font-family: 'JetBrains Mono', monospace;
}

.ci-head {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.ci-row {
    display: flex;
    gap: 6px;
    margin: 3px 0;
    font-size: 0.68rem;
    line-height: 1.4;
}

.ci-key {
    color: #7fa8cc;
    min-width: 80px;
    flex-shrink: 0;
    text-transform: uppercase;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    padding-top: 1px;
}

.ci-val {
    color: #c8dff0;
    flex: 1;
}

/* ── Arsenal Panel ─────────────────────────────────────── */
.p-action-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 7px 12px;
    border-radius: 6px;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.3);
    color: var(--accent, #00e5ff);
    font: 600 0.72rem/1 'JetBrains Mono', monospace;
    letter-spacing: 0.06em;
    text-align: left;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.p-action-btn:hover {
    background: rgba(0, 229, 255, 0.2);
    border-color: rgba(0, 229, 255, 0.6);
}

/* Arsenal panel — mirrors #left-panel position so it REPLACES the layers panel
   at the same spot. Single column, with a back-arrow to return to layers. */
.arsenal-panel {
    position: fixed;
    top: 66px;
    left: 14px;
    z-index: 1600;
    width: 280px;
    max-height: calc(100vh - 130px);
    background: var(--panel);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    transform: translateX(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
}

.arsenal-panel.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* When arsenal panel is open, layers panel is hidden (single column) */
body.arsenal-open #left-panel {
    display: none;
}

/* Back button restored in arsenal header */
.ars-back {
    background: none;
    border: 1px solid var(--border);
    color: var(--text2);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    margin-right: 4px;
}

.ars-back:hover {
    background: rgba(0, 229, 255, 0.1);
    color: var(--accent);
    border-color: var(--accent);
}

.ars-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.12);
    flex-shrink: 0;
}

.ars-icon {
    font-size: 15px;
}

.ars-title {
    font: 700 0.75rem/1 'Orbitron', monospace;
    color: var(--accent, #00e5ff);
    letter-spacing: 0.1em;
    flex: 1;
}

.ars-close {
    background: none;
    border: none;
    color: #7fa8cc;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color .15s;
}

.ars-close:hover {
    color: #ff6060;
}

.ars-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

.ars-selectors {
    padding: 10px 14px 6px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ars-country-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.ars-country-flag {
    font-size: 20px;
}

.ars-select {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e6f4ff;
    padding: 5px 8px;
    border-radius: 5px;
    font: 500 0.72rem/1 'JetBrains Mono', monospace;
    cursor: pointer;
}

.ars-cats {
    display: flex;
    gap: 6px;
}

.ars-cat {
    flex: 1;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #8ab4cc;
    font: 600 0.68rem/1 'JetBrains Mono', monospace;
    cursor: pointer;
    transition: all .15s;
}

.ars-cat.active {
    background: rgba(0, 229, 255, 0.15);
    border-color: rgba(0, 229, 255, 0.4);
    color: var(--accent, #00e5ff);
}

.ars-cat:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08);
    color: #c0d8e8;
}

.ars-list {
    overflow-y: auto;
    flex: 1;
    padding: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 229, 255, 0.2) transparent;
}

.ars-list::-webkit-scrollbar {
    width: 4px;
}

.ars-list::-webkit-scrollbar-thumb {
    background: rgba(0, 229, 255, 0.2);
    border-radius: 2px;
}

.ars-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    padding: 9px 10px;
    margin-bottom: 6px;
    transition: border-color .15s;
}

.ars-item:hover {
    border-color: rgba(0, 229, 255, 0.22);
}

.ars-item.selected {
    border-color: rgba(255, 68, 68, 0.5);
    background: rgba(255, 68, 68, 0.05);
}

.ars-item-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.ars-item-name {
    font: 700 0.78rem/1 'JetBrains Mono', monospace;
    color: #e6f4ff;
}

.ars-item-type {
    font: 400 0.65rem/1 'JetBrains Mono', monospace;
    color: #7fa8cc;
}

.ars-item-type-full {
    font: 400 0.62rem/1.3 'JetBrains Mono', monospace;
    color: #7fa8cc;
    margin-bottom: 6px;
    opacity: 0.85;
}

.ars-group-hdr {
    font: 700 0.62rem/1 'Orbitron', monospace;
    letter-spacing: 0.14em;
    padding: 10px 4px 4px;
    text-transform: uppercase;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 6px;
}

.ars-group-hdr:first-child {
    border-top: none;
    padding-top: 4px;
    margin-top: 0;
}

/* Active ranges section in arsenal panel */
.ars-active-ranges {
    padding: 8px 4px 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 68, 68, 0.2);
    background: rgba(255, 68, 68, 0.04);
}

.ars-active-hdr {
    font: 700 0.62rem/1 'Orbitron', monospace;
    color: #ff8888;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 4px 6px;
    margin-bottom: 4px;
}

.ars-active-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 6px 8px;
    margin-bottom: 3px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    border-left: 3px solid;
    font: 500 0.65rem/1 'JetBrains Mono', monospace;
}

.ars-active-name {
    color: #e6f4ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.ars-active-remove {
    background: none;
    border: 1px solid rgba(255, 68, 68, 0.4);
    color: #ff8888;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    cursor: pointer;
    font: 600 0.7rem/1 'JetBrains Mono', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.12s;
}

.ars-active-remove:hover {
    background: rgba(255, 68, 68, 0.2);
    border-color: rgba(255, 68, 68, 0.6);
    color: #ffaaaa;
}

.ars-item.just-added {
    animation: ars-flash 0.45s ease;
}

@keyframes ars-flash {
    0%   { background: rgba(0, 229, 255, 0.25); }
    100% { background: rgba(255, 255, 255, 0.04); }
}

.ars-item-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px 8px;
    margin-bottom: 7px;
}

.ars-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ars-stat-k {
    font: 400 0.58rem/1 'JetBrains Mono', monospace;
    color: #5a7a99;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ars-stat-v {
    font: 500 0.66rem/1 'JetBrains Mono', monospace;
    color: #b0ccdf;
}

.ars-range-btn {
    display: block;
    width: 100%;
    padding: 5px 8px;
    border-radius: 5px;
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.25);
    color: #ff8888;
    font: 600 0.65rem/1 'JetBrains Mono', monospace;
    cursor: pointer;
    transition: all .15s;
    text-align: left;
}

.ars-range-btn:hover {
    background: rgba(255, 68, 68, 0.2);
    border-color: rgba(255, 68, 68, 0.5);
    color: #ffaaaa;
}

.ars-range-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-top: 1px solid rgba(255, 68, 68, 0.2);
    background: rgba(255, 68, 68, 0.06);
    flex-shrink: 0;
}

.ars-range-label {
    font: 600 0.68rem/1 'JetBrains Mono', monospace;
    color: #ff9999;
    flex: 1;
}

.ars-range-clear {
    background: none;
    border: 1px solid rgba(255, 68, 68, 0.3);
    color: #ff8888;
    padding: 4px 8px;
    border-radius: 4px;
    font: 600 0.63rem/1 'JetBrains Mono', monospace;
    cursor: pointer;
    transition: all .15s;
}

.ars-range-clear:hover {
    background: rgba(255, 68, 68, 0.2);
    color: #ffaaaa;
}

/* Draggable origin marker — minimalist circular dot (no star, no glow-abuse).
   The wrap holds the dot, an inline ✕ delete button (visible on hover), and a
   small text tag with the weapon name. The ✕ removes only that one range —
   there is intentionally no bulk-clear path. */
.ars-origin-wrap {
    position: relative;
    width: 16px;
    height: 16px;
}

.ars-origin-marker {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--weapon-color, #ff5a36);
    box-shadow:
        0 0 0 2px rgba(10, 15, 20, 0.95),
        0 0 0 3px var(--weapon-color, #ff5a36),
        0 0 8px rgba(0, 0, 0, 0.6);
    cursor: grab;
    user-select: none;
    position: relative;
    transition: transform .12s;
}

.ars-origin-marker::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
}

.ars-origin-wrap:hover .ars-origin-marker {
    transform: scale(1.18);
}

.ars-origin-marker:active {
    cursor: grabbing;
    transform: scale(1.05);
}

/* Per-range ✕ delete affordance — sits up-and-right of the dot, fades in on
   hover. Big enough to tap on touch screens without colliding with the drag
   target on the dot itself. */
.ars-origin-del {
    position: absolute;
    top: -14px;
    left: 14px;
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(10, 15, 20, 0.95);
    background: #ff3b30;
    color: #fff;
    font: 700 11px/1 'JetBrains Mono', monospace;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity .14s ease, transform .14s ease, background .14s ease;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    z-index: 5;
}

.ars-origin-wrap:hover .ars-origin-del {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.ars-origin-del:hover {
    background: #ff5b50;
}

/* Weapon name tag rendered next to the origin dot so users can tell ranges
   apart when several are placed close together. Stacking transform is set
   inline by JS (_restackRangeTags) so overlapping origins shift their tags
   downward and stay readable. */
.ars-origin-tag {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(10, 15, 20, 0.92);
    border-left: 2px solid var(--tag-accent, rgba(0, 229, 255, 0.55));
    color: #d6eaff;
    font: 600 9.5px/1 'JetBrains Mono', monospace;
    white-space: nowrap;
    pointer-events: auto;
    cursor: grab;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    opacity: 0.94;
    transition: transform .18s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
    user-select: none;
}
.ars-origin-tag:active,
.ars-origin-tag.dragging {
    cursor: grabbing;
    background: rgba(20, 30, 40, 0.98);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
    opacity: 1;
}

/* Hovering any origin marker makes its (and stacked siblings') tags pop
   forward with a brighter accent border — useful when many ranges overlap
   and the user wants to identify a specific weapon. */
.ars-origin-wrap:hover .ars-origin-tag {
    opacity: 1;
    background: rgba(15, 22, 30, 0.98);
    border-left-color: var(--tag-accent, rgba(0, 229, 255, 0.95));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Range polygon — sharp solid outline, minimal fill (warwatcher-style).
   No drop-shadow filter: SVG outlines render crisper without the soft halo
   that was making the geometry look smudged at low zoom levels. */
.ars-range-main {
    pointer-events: none;
    shape-rendering: geometricPrecision;
}

/* Inner explosion / impact zone — distinct red ring with a clean fill.
   Drop-shadow blur removed because it stacked with the fill and made the
   blast look out of focus; a flat ring reads better and matches the rest
   of the map's vector style. */
.ars-range-blast {
    pointer-events: none;
    shape-rendering: geometricPrecision;
}

/* Single hover tooltip used by arsenal origin markers AND simulator
   launch-site / defense-battery markers. Pointer-events:none so moving
   the cursor onto the tooltip still fires the marker's mouseout and the
   tooltip hides immediately — never traps the user. */
.wpn-tooltip.leaflet-tooltip {
    background: rgba(10, 15, 20, 0.96);
    border: 1px solid rgba(0, 229, 255, 0.35);
    border-radius: 6px;
    padding: 7px 10px;
    color: #d6eaff;
    font: 600 11px/1.35 'JetBrains Mono', monospace;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    pointer-events: none;
    transition: opacity .12s ease;
}
.wpn-tooltip.leaflet-tooltip::before { display: none; }
.wpn-tooltip .wpn-tt-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.18);
}
.wpn-tooltip .wpn-tt-flag { font-size: 16px; line-height: 1; }
.wpn-tooltip .wpn-tt-country { color: #c5d6e6; font-weight: 600; }
.wpn-tooltip .wpn-tt-name { color: #ffffff; font-weight: 700; }
.wpn-tooltip .wpn-tt-type { color: #7fb8ff; font-size: 10px; }
.wpn-tooltip .wpn-tt-row { color: #9bb3c8; font-size: 10px; }
.wpn-tooltip .wpn-tt-weapon + .wpn-tt-weapon {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed rgba(0, 229, 255, 0.14);
}
.wpn-tooltip .wpn-tt-qty { color: #ffb86c; font-weight: 600; }

/* Draggable target crosshair pinned to a strike target inside the
   simulator. Snap-to-range constraint lives in the drag handler. */
.sim-target-cross {
    position: relative;
    width: 26px;
    height: 26px;
    cursor: grab;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.75));
    color: var(--col, #ff6b5a);
}
.sim-target-cross:active { cursor: grabbing; }
.sim-target-cross svg { display: block; }
.sim-target-label {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 15, 20, 0.94);
    border-left: 2px solid var(--col, #ff6b5a);
    color: #d6eaff;
    font: 600 9.5px/1.1 'JetBrains Mono', monospace;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* Bottom-of-screen toast shown when the user picks a point outside the
   weapon's maximum range. CSS-only opacity transition so there is no
   layout reflow. */
.sim-pick-warning {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(180, 30, 30, 0.96);
    color: #fff;
    padding: 11px 20px;
    border-radius: 6px;
    font: 600 12px/1.3 'JetBrains Mono', monospace;
    border: 1px solid rgba(255, 80, 80, 0.7);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.7);
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
    max-width: 80vw;
    text-align: center;
    letter-spacing: 0.2px;
}
.sim-pick-warning.show { opacity: 1; }

/* When the simulator target picker is armed, no arsenal element should
   eat the click — the crosshair must hit the map below. We also force
   the crosshair cursor explicitly because Leaflet's `.leaflet-interactive`
   sets `cursor: pointer`, which browsers display even on elements that
   have `pointer-events: none`. */
body.sim-picking .ars-origin-wrap,
body.sim-picking .ars-origin-tag,
body.sim-picking .ars-origin-marker,
body.sim-picking .wpn-tooltip,
body.sim-picking .ars-range-main,
body.sim-picking .ars-range-blast,
body.sim-picking .sim-offensive-dot,
body.sim-picking .sim-defense-dot,
body.sim-picking .sim-offensive-ring,
body.sim-picking .sim-defense-ring,
body.sim-picking .sim-target-cross,
body.sim-picking .leaflet-marker-icon:has(.ars-origin-wrap),
body.sim-picking .leaflet-marker-icon:has(.sim-offensive-dot),
body.sim-picking .leaflet-marker-icon:has(.sim-defense-dot),
body.sim-picking .leaflet-marker-icon:has(.sim-target-cross) {
    pointer-events: none !important;
    cursor: crosshair !important;
}

/* Inside the simulator the arsenal-range layer should not be visible —
   the simulator owns the map and renders its own offensive/defensive
   envelopes. We hide rather than delete so the user's placed ranges are
   restored intact the moment they return to the Arsenals view. */
body.sim-mode .ars-range-main,
body.sim-mode .ars-range-blast,
body.sim-mode .ars-range-radius,
body.sim-mode .ars-range-center-dot,
body.sim-mode .ars-origin-wrap,
body.sim-mode .ars-origin-tooltip,
body.sim-mode .leaflet-marker-icon:has(.ars-origin-wrap) {
    display: none !important;
}

/* Range circle glow effect on the SVG path */
.ars-range-glow {
    filter: blur(0.5px);
}

/* Legend */
.ars-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 4px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ars-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.62rem;
    color: var(--text2);
    letter-spacing: 0.04em;
}

.ars-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Category badges (S→S, A→S, S→A) */
.ars-cat-badge {
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: 0.05em;
}

.ars-cat-ss {
    background: rgba(0, 229, 255, 0.15);
    color: var(--accent, #00e5ff);
}

.ars-cat-as {
    background: rgba(255, 107, 53, 0.15);
    color: var(--warm, #ff6b35);
}

.ars-cat-sa {
    background: rgba(0, 255, 136, 0.15);
    color: var(--accent2, #00ff88);
}

/* ──────────────────────────────────────────────────────────────
   RANGE LAYERS — crisp vector rendering at every zoom level
   ────────────────────────────────────────────────────────────── */

/* Subtle radius-leader line (north-pointing dashed) */
.ars-range-radius {
    pointer-events: none;
    shape-rendering: geometricPrecision;
}

/* ──────────────────────────────────────────────────────────────
   RANGE CONTEXT MENU — appears on right-click on a range circle
   ────────────────────────────────────────────────────────────── */
.range-cm {
    position: fixed;
    z-index: 5000;
    min-width: 200px;
    padding: 6px;
    background: rgba(8, 12, 20, 0.97);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border2, rgba(0, 229, 255, 0.25));
    border-radius: 8px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
    display: none;
    flex-direction: column;
    gap: 4px;
}

.range-cm.open {
    display: flex;
}

.range-cm-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font: 600 11px/1.1 'JetBrains Mono', monospace;
    color: var(--text, #e2e8f0);
    letter-spacing: 0.04em;
}

.range-cm-icon {
    font-size: 13px;
}

.range-cm-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.range-cm-delete {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: #ff8a82;
    font: 500 12px/1 'Roboto', sans-serif;
    cursor: pointer;
    text-align: left;
    transition: background .12s, color .12s;
}

.range-cm-delete:hover {
    background: rgba(255, 59, 48, 0.16);
    color: #ff5b50;
}

.range-cm-delete .cm-icon {
    width: 14px;
    text-align: center;
    font-weight: 700;
}
/* ── Country Info Panel — rich geopolitical readout ────────────────
   Slides in from the left when a country label is clicked. Stays
   above the layers panel but below the news panel z-index so the
   user can keep both open simultaneously. */
.ci-panel {
    position: fixed;
    top: 64px;
    left: 14px;
    width: 320px;
    max-height: calc(100vh - 84px);
    background: rgba(8, 12, 20, 0.96);
    backdrop-filter: blur(18px);
    border: 1px solid var(--border2, rgba(0, 229, 255, 0.25));
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1850;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-22px);
    transition: opacity .25s ease, transform .25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ci-panel.open {
    pointer-events: auto;
    opacity: 1;
    transform: translateX(0);
}

.ci-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.12);
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.07), transparent);
}

.ci-flag {
    width: 36px;
    height: 24px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity .2s;
}

.ci-flag.visible { opacity: 1; }

.ci-names {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ci-name {
    font: 700 0.92rem/1.1 'Orbitron', sans-serif;
    letter-spacing: 0.07em;
    color: var(--text, #e2e8f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ci-name-sub {
    display: none;
    font: 500 0.7rem/1.1 'JetBrains Mono', monospace;
    color: var(--text2);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ci-name-sub.visible { display: block; }

.ci-close {
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: var(--text2);
    font: 600 16px/1 'JetBrains Mono', monospace;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s;
}

.ci-close:hover {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}

.ci-body {
    flex: 1;
    overflow-y: auto;
    padding: 6px 14px 16px;
}

.ci-body::-webkit-scrollbar { width: 6px; }
.ci-body::-webkit-scrollbar-thumb {
    background: rgba(0, 229, 255, 0.18);
    border-radius: 3px;
}

.ci-section {
    margin-top: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(0, 229, 255, 0.1);
}

.ci-section:last-child {
    border-bottom: 0;
}

.ci-section-title {
    font: 700 0.7rem/1 'Orbitron', sans-serif;
    color: var(--accent, #00e5ff);
    letter-spacing: 0.18em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.ci-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font: 400 0.78rem/1.3 'JetBrains Mono', monospace;
}

.ci-lbl {
    color: var(--text2);
    font-weight: 500;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.ci-val {
    color: var(--text, #e2e8f0);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
    max-width: 65%;
}

.ci-alliances {
    font: 500 0.76rem/1.4 'JetBrains Mono', monospace;
    color: var(--text, #e2e8f0);
    background: rgba(0, 229, 255, 0.05);
    padding: 8px 10px;
    border-radius: 6px;
    border-left: 2px solid var(--accent, #00e5ff);
}

@media (max-width: 720px) {
    .ci-panel {
        width: calc(100vw - 28px);
        max-height: 70vh;
    }
}

/* ── Place Info Panel — unified card for cities, provinces, seas, straits, gulfs.
   Slides in from the right. Fed by Wikipedia + Nominatim. */
.place-info-panel {
    position: fixed;
    top: 64px;
    right: 14px;
    width: 340px;
    max-height: calc(100vh - 84px);
    background: rgba(8, 12, 20, 0.96);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1850;
    pointer-events: none;
    opacity: 0;
    transform: translateX(22px);
    transition: opacity .25s ease, transform .25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.place-info-panel.open {
    pointer-events: auto;
    opacity: 1;
    transform: translateX(0);
}
.pi-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border: 0;
    background: rgba(0, 0, 0, 0.4);
    color: var(--text2);
    font: 700 16px/1 'JetBrains Mono', monospace;
    cursor: pointer;
    border-radius: 50%;
    z-index: 2;
    transition: background .12s, color .12s;
}
.pi-close:hover { color: #ff6b6b; background: rgba(255, 107, 107, 0.12); }
.pi-header {
    padding: 14px 36px 10px 14px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.12);
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.07), transparent);
}
.pi-name {
    font: 700 1rem/1.1 'Orbitron', sans-serif;
    letter-spacing: 0.05em;
    color: #e2e8f0;
}
.pi-name-sub {
    margin-top: 3px;
    font: 500 0.72rem/1.1 'JetBrains Mono', monospace;
    color: var(--text2);
    letter-spacing: 0.01em;
}
.pi-type {
    margin-top: 6px;
    font: 700 0.65rem/1 'Orbitron', sans-serif;
    color: #00e5ff;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.pi-thumb {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    display: block;
}
.pi-summary {
    padding: 12px 14px;
    font: 400 0.78rem/1.45 system-ui, -apple-system, sans-serif;
    color: #cbd5e1;
    overflow-y: auto;
    max-height: 220px;
}
.pi-summary::-webkit-scrollbar { width: 5px; }
.pi-summary::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.2); border-radius: 3px; }
.pi-grid { padding: 0 14px 12px; }
.pi-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font: 400 0.74rem/1.3 'JetBrains Mono', monospace;
    border-bottom: 1px dashed rgba(0, 229, 255, 0.08);
}
.pi-k { color: var(--text2); font-weight: 500; }
.pi-v { color: #e2e8f0; font-weight: 600; text-align: right; }
.pi-link {
    display: block;
    margin: 0 14px 14px;
    padding: 8px 12px;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 6px;
    color: #00e5ff;
    font: 600 0.72rem/1 'Orbitron', sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    transition: background .15s;
}
.pi-link:hover { background: rgba(0, 229, 255, 0.16); }
@media (max-width: 720px) {
    .place-info-panel {
        width: calc(100vw - 28px);
        right: 14px;
        max-height: 70vh;
    }
}

/* ──────────────────────────────────────────────────────────────
   MISSILE IMPACT SIMULATOR — geopolitical military aesthetic
   ──────────────────────────────────────────────────────────── */

/* Wider arsenal panel when simulator is active */
body.sim-mode .arsenal-panel {
    width: 460px;
    max-height: calc(100vh - 90px);
}

.ars-simulator {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: var(--font);
    font-size: 0.82rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 229, 255, 0.25) transparent;
}
.ars-simulator::-webkit-scrollbar { width: 6px; }
.ars-simulator::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.25); border-radius: 3px; }
.ars-simulator::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 255, 0.45); }

/* Block — sharp-edged section, no rounded bubbles */
.sim-block {
    border: 1px solid rgba(0, 229, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(0, 229, 255, 0.025), transparent 40%),
        rgba(8, 14, 22, 0.55);
    padding: 10px 12px 12px;
    position: relative;
}
.sim-block::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px;
    width: 10px; height: 10px;
    border-top: 1px solid var(--accent);
    border-left: 1px solid var(--accent);
    pointer-events: none;
}
.sim-block::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 10px; height: 10px;
    border-bottom: 1px solid var(--accent);
    border-right: 1px solid var(--accent);
    pointer-events: none;
}

.sim-block-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.14);
    font: 700 0.74rem/1 var(--display);
    letter-spacing: 0.18em;
    color: var(--text);
    text-transform: uppercase;
}
.sim-block-num {
    color: var(--accent);
    font: 700 0.68rem/1 var(--font);
    letter-spacing: 0.1em;
    background: rgba(0, 229, 255, 0.10);
    border: 1px solid rgba(0, 229, 255, 0.30);
    padding: 3px 6px;
    min-width: 22px;
    text-align: center;
}

/* Mode bar */
.sim-mode-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid rgba(0, 229, 255, 0.30);
}
.sim-mode-btn {
    background: rgba(8, 14, 22, 0.6);
    border: none;
    color: var(--text2);
    padding: 9px 8px;
    font: 700 0.68rem/1 var(--font);
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.sim-mode-btn + .sim-mode-btn { border-left: 1px solid rgba(0, 229, 255, 0.30); }
.sim-mode-btn:hover { background: rgba(0, 229, 255, 0.06); color: var(--text); }
.sim-mode-btn.active {
    background: rgba(0, 229, 255, 0.16);
    color: var(--accent);
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
}
.sim-mode-desc {
    margin-top: 8px;
    color: var(--text2);
    font-size: 0.72rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

/* Side blocks */
.sim-side[data-side="A"] .sim-block-num { background: rgba(255, 70, 50, 0.12); border-color: rgba(255, 70, 50, 0.45); color: #ff6b55; }
.sim-side[data-side="A"] { border-color: rgba(255, 70, 50, 0.30); }
.sim-side[data-side="A"]::before, .sim-side[data-side="A"]::after { border-color: #ff6b55; }
.sim-side[data-side="A"] .sim-side-tag { color: #ff6b55; }

.sim-side[data-side="B"] .sim-block-num { background: rgba(54, 170, 255, 0.12); border-color: rgba(54, 170, 255, 0.45); color: #36aaff; }
.sim-side[data-side="B"] { border-color: rgba(54, 170, 255, 0.30); }
.sim-side[data-side="B"]::before, .sim-side[data-side="B"]::after { border-color: #36aaff; }
.sim-side[data-side="B"] .sim-side-tag { color: #36aaff; }

.sim-side-tag { flex: 1; }
.sim-side-summary {
    color: var(--text2);
    font: 600 0.66rem/1 var(--font);
    letter-spacing: 0.08em;
    text-transform: none;
}

.sim-add-country-row {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.sim-add-select {
    flex: 1;
    background: rgba(13, 21, 32, 0.7);
    border: 1px solid rgba(0, 229, 255, 0.20);
    color: var(--text);
    padding: 8px 10px;
    font: 500 0.78rem/1 var(--font);
    letter-spacing: 0.02em;
    min-width: 0;
}
.sim-add-select:hover { border-color: var(--accent); }
.sim-add-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sim-add-btn {
    background: rgba(0, 229, 255, 0.10);
    border: 1px solid rgba(0, 229, 255, 0.40);
    color: var(--accent);
    padding: 8px 12px;
    font: 700 0.68rem/1 var(--font);
    letter-spacing: 0.10em;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, transform .08s;
}
.sim-add-btn:hover { background: rgba(0, 229, 255, 0.22); }
.sim-add-btn:active { transform: scale(0.97); }
.sim-add-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Country card inside an alliance */
.sim-countries {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sim-country-card {
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(13, 21, 32, 0.55);
}
.sim-cc-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sim-cc-flag { font-size: 16px; }
.sim-cc-name {
    flex: 1;
    font: 700 0.78rem/1 var(--display);
    letter-spacing: 0.08em;
    color: var(--text);
    text-transform: uppercase;
}
.sim-cc-rm {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text2);
    width: 22px;
    height: 22px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: all .12s;
}
.sim-cc-rm:hover { color: #ff6b55; border-color: #ff6b55; }
.sim-cc-body {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sim-cc-section-title {
    font: 700 0.62rem/1 var(--font);
    letter-spacing: 0.16em;
    color: var(--text2);
    text-transform: uppercase;
    margin-top: 2px;
}

/* Weapon group (offensive loadout) */
.sim-group {
    border: 1px solid rgba(255, 70, 50, 0.20);
    background: rgba(255, 70, 50, 0.04);
    padding: 8px 8px 8px 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sim-group::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: #ff6b55;
}
/* Weapon-class color stripe overrides the generic red side stripe — analyst
   can read trajectory color directly from the loadout panel. */
.sim-group.has-weapon-col::before { background: var(--weapon-col, #ff6b55); }

/* Color swatch placed before the weapon select — same hue as on-map trail */
.sim-weapon-swatch {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 6px currentColor, inset 0 0 0 1px rgba(0,0,0,.5);
}

/* Compact pill for the weapon class (ICBM/SRBM/CRUISE/…) using the swatch col */
.sim-class-tag {
    display: inline-flex; align-items: center;
    padding: 2px 6px;
    font: 800 0.62rem/1 var(--display);
    letter-spacing: 0.1em;
    color: #0a0e14;
    background: var(--swatch, #fff);
    border: 1px solid rgba(0,0,0,0.4);
    text-transform: uppercase;
}
.sim-group-row {
    display: flex;
    gap: 6px;
}
.sim-group-weapon {
    flex: 1;
    min-width: 0;
    background: rgba(13, 21, 32, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--text);
    padding: 6px 8px;
    font: 500 0.74rem/1 var(--font);
    letter-spacing: 0.02em;
}
.sim-group-weapon:hover { border-color: rgba(255, 70, 50, 0.5); }
.sim-group-weapon:focus { outline: none; border-color: #ff6b55; box-shadow: 0 0 0 1px rgba(255, 70, 50, 0.4); }
.sim-group-qty {
    width: 60px;
    background: rgba(13, 21, 32, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--text);
    padding: 6px 6px;
    text-align: center;
    font: 700 0.78rem/1 var(--font);
}
.sim-group-qty:focus { outline: none; border-color: #ff6b55; }
.sim-group-target {
    display: flex;
    gap: 6px;
    align-items: center;
}
.sim-group-pick {
    background: rgba(255, 70, 50, 0.10);
    border: 1px solid rgba(255, 70, 50, 0.45);
    color: #ff8c70;
    padding: 6px 10px;
    font: 700 0.66rem/1 var(--font);
    letter-spacing: 0.10em;
    cursor: pointer;
    white-space: nowrap;
    transition: all .12s;
}
.sim-group-pick:hover { background: rgba(255, 70, 50, 0.22); color: #fff; }
.sim-group-pick.armed {
    background: #ff6b55;
    color: #fff;
    border-color: #fff;
    animation: simPickPulse 1.0s ease-in-out infinite;
}
@keyframes simPickPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 85, 0.55); }
    50%      { box-shadow: 0 0 0 4px rgba(255, 107, 85, 0.0); }
}
.sim-group-tgt-info {
    flex: 1;
    color: var(--text2);
    font: 500 0.7rem/1.3 var(--font);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sim-group-tgt-info.set { color: #ffd699; }
.sim-group-rm {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--text2);
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    transition: all .12s;
    flex-shrink: 0;
}
.sim-group-rm:hover { color: #ff6b55; border-color: #ff6b55; }

.sim-add-group-btn,
.sim-add-defense-btn {
    background: transparent;
    border: 1px dashed rgba(255, 70, 50, 0.40);
    color: #ff8c70;
    padding: 7px 10px;
    font: 700 0.66rem/1 var(--font);
    letter-spacing: 0.10em;
    cursor: pointer;
    transition: all .12s;
}
.sim-add-defense-btn {
    border-color: rgba(54, 170, 255, 0.40);
    color: #82c8ff;
}
.sim-add-group-btn:hover { background: rgba(255, 70, 50, 0.10); color: #fff; }
.sim-add-defense-btn:hover { background: rgba(54, 170, 255, 0.10); color: #fff; }
.sim-add-group-btn:disabled,
.sim-add-defense-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Defense group */
.sim-defense {
    border: 1px solid rgba(54, 170, 255, 0.22);
    background: rgba(54, 170, 255, 0.04);
    padding: 8px 8px 8px 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sim-defense::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: #36aaff;
}
.sim-defense-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.sim-defense-sys {
    flex: 1;
    min-width: 0;
    background: rgba(13, 21, 32, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--text);
    padding: 6px 8px;
    font: 500 0.74rem/1 var(--font);
}
.sim-defense-sys:focus { outline: none; border-color: #36aaff; }
.sim-defense-bat {
    width: 60px;
    background: rgba(13, 21, 32, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--text);
    padding: 6px 6px;
    text-align: center;
    font: 700 0.78rem/1 var(--font);
}
.sim-defense-bat:focus { outline: none; border-color: #36aaff; }
.sim-defense-pos {
    background: rgba(54, 170, 255, 0.10);
    border: 1px solid rgba(54, 170, 255, 0.45);
    color: #82c8ff;
    padding: 6px 10px;
    font: 700 0.64rem/1 var(--font);
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all .12s;
    white-space: nowrap;
}
.sim-defense-pos:hover { background: rgba(54, 170, 255, 0.22); color: #fff; }
.sim-defense-pos.armed {
    background: #36aaff;
    color: #fff;
    border-color: #fff;
    animation: simPickPulse 1.0s ease-in-out infinite;
}
.sim-defense-meta {
    color: var(--text2);
    font: 500 0.66rem/1.3 var(--font);
    letter-spacing: 0.02em;
}
.sim-defense-meta strong {
    color: #82c8ff;
    font-weight: 700;
}

/* Launch summary + button */
.sim-launch-block {
    border: 1px solid rgba(0, 229, 255, 0.30);
    background:
        linear-gradient(180deg, rgba(0, 229, 255, 0.05), rgba(0, 0, 0, 0.0));
}
.sim-launch-summary {
    color: var(--text2);
    font: 500 0.72rem/1.5 var(--font);
    margin-bottom: 10px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.30);
    border-left: 3px solid var(--accent);
    min-height: 38px;
    white-space: pre-line;
}
.sim-launch-summary strong { color: var(--accent); font-weight: 700; }
.sim-launch-row { display: flex; gap: 8px; }

/* Toggle row: "Show Offensive Weapon Ranges" switch lives directly
   above the Reset/Execute button row inside the Launch block. */
.sim-toggle-row { padding: 4px 2px 2px; }
.sim-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: rgba(220, 230, 240, 0.85);
}
.sim-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.sim-toggle-track {
    width: 32px;
    height: 16px;
    background: rgba(80, 90, 100, 0.55);
    border-radius: 8px;
    position: relative;
    transition: background 0.18s ease;
    border: 1px solid rgba(255,255,255,0.08);
    flex: 0 0 auto;
}
.sim-toggle-knob {
    position: absolute;
    top: 1px; left: 1px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #d8dde2;
    transition: transform 0.18s ease, background 0.18s ease;
}
.sim-toggle input:checked + .sim-toggle-track {
    background: rgba(255, 107, 90, 0.55);
    border-color: rgba(255, 107, 90, 0.7);
}
.sim-toggle input:checked + .sim-toggle-track .sim-toggle-knob {
    transform: translateX(16px);
    background: #fff;
}
.sim-toggle:hover .sim-toggle-label { color: #fff; }

/* Compact hover tooltip used by offensive range circles. Inherits the
   translucent dark style from .sim-info-wrap but trims padding so the
   small two-line content reads cleanly. */
.leaflet-tooltip.sim-info-mini {
    padding: 6px 8px !important;
    font-size: 0.7rem !important;
    line-height: 1.35 !important;
}
.sim-launch-btn {
    flex: 1;
    background: linear-gradient(135deg, #ff4530, #ff8c42);
    border: 1px solid #ffb070;
    color: #fff;
    padding: 12px 14px;
    font: 700 0.85rem/1 var(--display);
    letter-spacing: 0.18em;
    cursor: pointer;
    transition: all .15s;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.sim-launch-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 90, 54, 0.40);
}
.sim-launch-btn:active { transform: translateY(0); }
.sim-launch-btn:disabled {
    background: rgba(80, 80, 80, 0.5);
    border-color: rgba(120, 120, 120, 0.5);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.sim-secondary-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: var(--text2);
    padding: 12px 14px;
    font: 700 0.7rem/1 var(--font);
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: all .12s;
}
.sim-secondary-btn:hover { color: var(--text); border-color: var(--text); }

/* Target picker overlay (centred at top of map) */
.sim-target-picker {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 460px;
    max-width: calc(100vw - 40px);
    background: rgba(8, 14, 22, 0.96);
    border: 1px solid var(--accent);
    z-index: 9998;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    animation: simStatFadeIn 0.25s ease;
    pointer-events: auto;
}
.sim-pick-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.20);
    background: rgba(0, 229, 255, 0.06);
}
.sim-pick-icon { color: var(--accent); font-size: 14px; }
.sim-pick-title {
    flex: 1;
    color: var(--accent);
    font: 700 0.74rem/1 var(--display);
    letter-spacing: 0.16em;
}
.sim-pick-cancel {
    background: none;
    border: none;
    color: var(--text2);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
}
.sim-pick-cancel:hover { color: #ff6b55; }
.sim-pick-body { padding: 10px 12px 12px; }
.sim-pick-info { color: var(--text2); font-size: 0.74rem; margin-bottom: 8px; line-height: 1.4; }
.sim-pick-coords { display: flex; gap: 6px; }
.sim-pick-input {
    flex: 1;
    min-width: 0;
    background: rgba(13, 21, 32, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text);
    padding: 6px 10px;
    font: 500 0.78rem/1 var(--font);
}
.sim-pick-input:focus { outline: none; border-color: var(--accent); }
.sim-pick-confirm {
    background: var(--accent);
    border: none;
    color: #001018;
    padding: 6px 14px;
    font: 700 0.7rem/1 var(--font);
    letter-spacing: 0.10em;
    cursor: pointer;
}

/* Live HUD overlay (simulation phase) */
.sim-hud {
    position: fixed;
    top: 80px;
    right: 20px;
    background: rgba(6, 10, 16, 0.94);
    border: 1px solid var(--accent);
    padding: 10px 14px 12px;
    z-index: 9997;
    font-family: var(--font);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    animation: simStatFadeIn 0.30s ease;
    min-width: 280px;
}
.sim-hud-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.sim-hud-cell { text-align: center; }
.sim-hud-lbl {
    font: 700 0.58rem/1 var(--font);
    letter-spacing: 0.16em;
    color: var(--text2);
    margin-bottom: 4px;
    text-transform: uppercase;
}
.sim-hud-val {
    font: 700 1.10rem/1 var(--display);
    color: var(--text);
    letter-spacing: 0.06em;
}
.sim-hud-elapsed { color: var(--accent); }
.sim-hud-int .sim-hud-val { color: #36aaff; }
.sim-hud-imp .sim-hud-val { color: #ff6b55; }

.sim-hud-bar {
    margin-top: 10px;
    height: 6px;
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}
.sim-hud-bar-int, .sim-hud-bar-imp {
    position: absolute;
    top: 0; bottom: 0;
    transition: width 0.25s ease;
}
.sim-hud-bar-int { background: #36aaff; left: 0; width: 0%; }
.sim-hud-bar-imp { background: #ff6b55; right: 0; width: 0%; }

/* In-flight / impact / intercept marker styles */
.sim-missile-head {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--col, #ff5a36);
    box-shadow: 0 0 6px var(--col, #ff5a36), 0 0 12px var(--col, #ff5a36);
}
.sim-missile-trail { filter: drop-shadow(0 0 2px currentColor); }
.sim-interceptor-trail {
    filter: drop-shadow(0 0 3px #36aaff);
}

.sim-launch-pulse {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--col, #ff5a36);
    box-shadow: 0 0 0 0 var(--col, #ff5a36);
    animation: simLaunchPulse 0.8s ease-out forwards;
}
@keyframes simLaunchPulse {
    0%   { transform: scale(0.4); opacity: 1; box-shadow: 0 0 0 0 var(--col); }
    100% { transform: scale(2.0); opacity: 0; box-shadow: 0 0 0 18px transparent; }
}

.sim-origin-pulse,
.sim-target-pulse {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: rgba(8, 12, 20, 0.78);
    border: 1px solid var(--col, #ff6b55);
    box-shadow: 0 0 0 2px var(--col, #ff6b55), 0 0 14px var(--col, #ff6b55);
    animation: simPosPulse 1.3s ease-in-out infinite;
}
.sim-target-pulse {
    border-style: dashed;
}
@keyframes simPosPulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--col), 0 0 12px var(--col); }
    50%      { box-shadow: 0 0 0 5px var(--col), 0 0 24px var(--col); }
}

.sim-origin-label {
    background: rgba(8, 12, 20, 0.92);
    border: 1px solid var(--col, #ff6b55);
    color: #fff;
    padding: 4px 8px;
    font: 700 0.66rem/1 var(--font);
    letter-spacing: 0.06em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    transform: translate(-50%, -100%);
    animation: simOriginLabel 3s ease forwards;
    pointer-events: none;
}
@keyframes simOriginLabel {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -130%); }
}

.sim-defense-marker {
    width: 18px;
    height: 18px;
    background: rgba(8, 14, 22, 0.95);
    border: 1.5px solid #36aaff;
    transform: rotate(45deg);
    box-shadow: 0 0 6px #36aaff;
}
.sim-defense-marker.firing {
    background: #36aaff;
    box-shadow: 0 0 12px #36aaff, 0 0 24px #36aaff;
}

/* Legacy target crosshair — removed per design (replaced by the impact
   ring being the only on-impact visual). */
.sim-target-marker { display: none !important; }

/* In-panel results body (was a fixed modal previously) */
.sim-results-body {
    color: var(--text);
    font-size: 0.84rem;
    margin-bottom: 12px;
}

/* 3-step in-panel navigation pills */
.sim-stepnav {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.18);
    background: rgba(0, 229, 255, 0.04);
}
.sim-step-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sim-step-pill .sim-step-num {
    font: 800 0.76rem/1 var(--display);
    color: var(--text2);
    background: rgba(255, 255, 255, 0.08);
    padding: 3px 6px;
    border-radius: 2px;
    letter-spacing: 0.04em;
}
.sim-step-pill .sim-step-lbl {
    font: 700 0.72rem/1 var(--display);
    letter-spacing: 0.14em;
    color: var(--text2);
}
.sim-step-pill.active {
    border-color: var(--accent);
    background: rgba(0, 229, 255, 0.12);
}
.sim-step-pill.active .sim-step-num,
.sim-step-pill.active .sim-step-lbl { color: var(--accent); }
.sim-step-pill.disabled {
    opacity: 0.40;
    pointer-events: none;
}
.sim-step-sep {
    width: 18px;
    height: 1px;
    background: rgba(255, 255, 255, 0.16);
}

/* Step containers — fade in when shown */
.sim-step { animation: simStatFadeIn 0.25s ease; }

/* "View last results" pill in config step */
.sim-last-results-row { margin-top: 8px; }
.sim-view-last-btn {
    width: 100%;
    text-align: center;
    color: var(--accent);
    border-color: var(--accent);
}

/* Running-step "current stage" + progress strip */
.sim-running-block { padding-bottom: 10px; }
.sim-running-stage {
    font: 800 0.92rem/1.2 var(--display);
    letter-spacing: 0.10em;
    color: var(--accent);
    text-align: center;
    margin: 8px 0;
}
.sim-running-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    position: relative;
}
.sim-running-progress-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), #36ffd6);
    transition: width 0.25s linear;
}

/* Active-forces legend (running step) */
.sim-running-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sim-legend-row {
    display: grid;
    grid-template-columns: 16px 22px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.025);
    border-left: 2px solid transparent;
    font-size: 0.78rem;
}
.sim-legend-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
}
.sim-legend-flag { font-size: 14px; }
.sim-legend-name { color: var(--text); }
.sim-legend-role {
    font: 700 0.66rem/1 var(--display);
    letter-spacing: 0.10em;
    color: var(--text2);
    background: rgba(255, 255, 255, 0.06);
    padding: 3px 5px;
}

/* Nominatim search results dropdown inside the target picker */
.sim-pick-search-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.sim-pick-search-input { flex: 1; }
.sim-pick-search-btn {
    background: var(--accent);
    color: #001a1f;
    border: 1px solid var(--accent);
    padding: 0 12px;
    font: 700 1rem/1 var(--display);
    cursor: pointer;
}
.sim-pick-search-results {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid rgba(0, 229, 255, 0.22);
    background: rgba(0, 0, 0, 0.45);
    margin-bottom: 8px;
}
.sim-pick-result {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background 0.12s;
}
.sim-pick-result:hover { background: rgba(0, 229, 255, 0.10); }
.sim-pick-result-name { font-size: 0.80rem; color: var(--text); }
.sim-pick-result-coords {
    font: 700 0.66rem/1 var(--mono, monospace);
    color: var(--text2);
    letter-spacing: 0.04em;
}
.sim-pick-result-loading,
.sim-pick-result-empty {
    padding: 8px 10px;
    color: var(--text2);
    font-size: 0.78rem;
    text-align: center;
}

.sim-r-section { margin-bottom: 18px; }
.sim-r-section:last-child { margin-bottom: 0; }
.sim-r-section-hdr {
    font: 700 0.74rem/1 var(--display);
    letter-spacing: 0.16em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.18);
}

.sim-r-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.sim-r-cell {
    padding: 8px 10px;
    background: rgba(0, 229, 255, 0.04);
    border-left: 2px solid var(--accent);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sim-r-cell-lbl {
    font: 700 0.62rem/1 var(--font);
    letter-spacing: 0.14em;
    color: var(--text2);
    text-transform: uppercase;
}
.sim-r-cell-val {
    font: 700 1.0rem/1.2 var(--display);
    color: var(--text);
    letter-spacing: 0.04em;
}
.sim-r-cell-val.red { color: #ff6b55; }
.sim-r-cell-val.blue { color: #36aaff; }
.sim-r-cell-val.cyan { color: var(--accent); }

.sim-r-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sim-r-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.025);
    border-left: 2px solid rgba(255, 70, 50, 0.6);
    font-size: 0.78rem;
}
.sim-r-row.def { border-left-color: #36aaff; }
.sim-r-row span:first-child { color: var(--text); }
.sim-r-row span:last-child { color: var(--text2); font-weight: 600; font-family: var(--font); }
.sim-r-row strong { color: #ffd699; font-weight: 700; }

.sim-r-target {
    background: rgba(255, 90, 54, 0.05);
    border: 1px solid rgba(255, 90, 54, 0.20);
    padding: 10px 12px;
    margin-bottom: 8px;
}
.sim-r-target-hdr {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 90, 54, 0.20);
}
.sim-r-target-name {
    font: 700 0.84rem/1.1 var(--display);
    color: #ffd699;
    letter-spacing: 0.04em;
}
.sim-r-target-status {
    font: 700 0.68rem/1 var(--font);
    letter-spacing: 0.10em;
    padding: 3px 6px;
    border: 1px solid currentColor;
}
.sim-r-target-status.hit { color: #ff6b55; }
.sim-r-target-status.safe { color: #36aaff; }
.sim-r-target-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 12px;
    font-size: 0.74rem;
    color: var(--text2);
}
.sim-r-target-stats strong { color: var(--text); font-weight: 700; }

.sim-r-verdict {
    background: rgba(0, 0, 0, 0.40);
    border: 1px solid rgba(0, 229, 255, 0.30);
    padding: 12px 14px;
    line-height: 1.5;
    color: var(--text);
    font-size: 0.83rem;
}
.sim-r-verdict-lead {
    color: var(--accent);
    font: 700 0.82rem/1.2 var(--display);
    letter-spacing: 0.06em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

@keyframes simStatFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Map crosshair cursor while picking a target */
body.sim-picking #map { cursor: crosshair !important; }

/* During simulation the map remains interactive (pan/zoom) but the
   pointer stays the default arrow — the spinning "progress" cursor
   was intrusive and unprofessional. Loading state lives in the
   running-step progress bar inside the panel instead. */
body.sim-running #map { cursor: grab !important; }

/* ── Simulator: extra UI bits used by the JS engine ─────────────── */
.sim-empty {
    padding: 12px 10px;
    text-align: center;
    color: var(--text2);
    font: 500 0.74rem/1.3 var(--font);
    border: 1px dashed rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.20);
}
.sim-empty-min {
    padding: 6px 8px;
    color: var(--text2);
    font: 500 0.7rem/1.3 var(--font);
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed rgba(255, 255, 255, 0.08);
}
.sim-cc-sec {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sim-cc-sec-attack .sim-cc-section-title { color: #ff8c70; }
.sim-cc-sec-defense .sim-cc-section-title { color: #82c8ff; }

.sim-groups {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sim-group-row-top { align-items: center; }
.sim-group-meta,
.sim-defense-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font: 500 0.66rem/1.2 var(--font);
    color: var(--text2);
    padding-top: 2px;
}
.sim-group-meta span,
.sim-defense-meta span {
    white-space: nowrap;
}

/* ── Results modal extras ───────────────────────────────────────── */
.sim-r-cell.sim-r-cell-good { border-color: rgba(54, 170, 255, 0.45); }
.sim-r-cell.sim-r-cell-good .sim-r-cell-val { color: #82c8ff; }
.sim-r-cell.sim-r-cell-bad { border-color: rgba(255, 107, 85, 0.45); }
.sim-r-cell.sim-r-cell-bad .sim-r-cell-val { color: #ff8c70; }
.sim-r-cell-pct {
    font-size: 0.70em;
    color: var(--text2);
    font-weight: 600;
}
.sim-r-cell.sim-r-cell-verdict-none { border-color: rgba(54, 170, 255, 0.45); }
.sim-r-cell.sim-r-cell-verdict-none .sim-r-cell-val { color: #82c8ff; }
.sim-r-cell.sim-r-cell-verdict-low { border-color: rgba(150, 220, 120, 0.45); }
.sim-r-cell.sim-r-cell-verdict-low .sim-r-cell-val { color: #b6e58a; }
.sim-r-cell.sim-r-cell-verdict-mid { border-color: rgba(255, 200, 80, 0.45); }
.sim-r-cell.sim-r-cell-verdict-mid .sim-r-cell-val { color: #ffd684; }
.sim-r-cell.sim-r-cell-verdict-high { border-color: rgba(255, 107, 85, 0.55); }
.sim-r-cell.sim-r-cell-verdict-high .sim-r-cell-val { color: #ff8c70; }
.sim-r-cell.sim-r-cell-verdict-crit {
    border-color: rgba(255, 50, 30, 0.7);
    background: rgba(255, 50, 30, 0.10);
}
.sim-r-cell.sim-r-cell-verdict-crit .sim-r-cell-val { color: #ff5530; }

/* Tables */
.sim-r-thead {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(0, 229, 255, 0.20);
    font: 700 0.62rem/1 var(--font);
    letter-spacing: 0.10em;
    color: var(--text2);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.sim-r-table .sim-r-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    padding: 7px 10px;
    background: rgba(13, 21, 32, 0.40);
    border-left: 3px solid #ff6b55;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font: 500 0.74rem/1.2 var(--font);
    color: var(--text);
    align-items: center;
}
/* 7-column variant when defense table */
.sim-r-section .sim-r-table:has(.sim-r-thead > span:nth-child(7)) .sim-r-thead,
.sim-r-section .sim-r-table:has(.sim-r-thead > span:nth-child(7)) .sim-r-row {
    grid-template-columns: 50px 1.2fr 1.2fr 0.6fr 0.6fr 0.6fr 0.8fr;
}
.sim-r-side {
    display: inline-block;
    padding: 2px 6px;
    font: 800 0.66rem/1 var(--display);
    letter-spacing: 0.10em;
    border: 1px solid;
    text-align: center;
}
.sim-r-side-A {
    color: #ff8c70;
    border-color: rgba(255, 107, 85, 0.5);
    background: rgba(255, 70, 50, 0.10);
}
.sim-r-side-B {
    color: #82c8ff;
    border-color: rgba(130, 200, 255, 0.5);
    background: rgba(54, 170, 255, 0.10);
}
.sim-r-sysname { color: #ffd699; font-weight: 700; }

/* Per-target cards */
.sim-r-targets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.sim-r-target {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(13, 21, 32, 0.50);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-left: 3px solid #36aaff;
}
.sim-r-target-hit { border-left-color: #ff5530; }
.sim-r-target-safe { border-left-color: #36aaff; }
.sim-r-target-status {
    font: 800 0.74rem/1 var(--display);
    letter-spacing: 0.10em;
}
.sim-r-target-hit .sim-r-target-status { color: #ff8c70; }
.sim-r-target-safe .sim-r-target-status { color: #82c8ff; }
.sim-r-target-coords {
    margin-left: auto;
    color: var(--text2);
    font: 600 0.68rem/1 var(--font);
    letter-spacing: 0.04em;
}
.sim-r-target-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 12px;
}
.sim-r-target-stats > div {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}
.sim-r-tlbl {
    color: var(--text2);
    font: 600 0.66rem/1.2 var(--font);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.sim-r-tval {
    color: var(--text);
    font: 700 0.78rem/1 var(--font);
}
.sim-r-target-weapons {
    color: var(--text2);
    font: 500 0.7rem/1.4 var(--font);
    border-top: 1px dashed rgba(255, 255, 255, 0.10);
    padding-top: 5px;
}

/* Verdict tinting */
.sim-r-verdict.verdict-none { border-color: rgba(54, 170, 255, 0.30); color: #82c8ff; }
.sim-r-verdict.verdict-low { border-color: rgba(150, 220, 120, 0.30); }
.sim-r-verdict.verdict-mid { border-color: rgba(255, 200, 80, 0.40); }
.sim-r-verdict.verdict-high { border-color: rgba(255, 107, 85, 0.45); }
.sim-r-verdict.verdict-crit {
    border-color: rgba(255, 50, 30, 0.70);
    background: rgba(255, 50, 30, 0.06);
}

/* While simulator is open, hide the news panel and other clutter */
body.sim-mode #news-panel { display: none !important; }
body.sim-mode #left-panel { opacity: 0.30; pointer-events: none; }

/* Panel stays VISIBLE during simulation in the new in-panel flow.
   The legacy `.sim-hidden` slide-off rule was removed — simulation
   telemetry now lives inside the panel under the "running" step. */

/* HUD positioning was for the legacy floating overlay; HUD is now
   embedded in the running-step panel and uses normal block layout. */
.sim-hud {
    position: static;
    width: auto;
    max-width: none;
    z-index: auto;
}
.sim-target-picker {
    position: fixed;
    top: 78px;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    max-width: calc(100vw - 60px);
    z-index: 850;
}
.sim-results-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 900;
}

/* Persistent origin-label box was REMOVED per design — origin info now
   appears as a hover tooltip on the origin pulse. Keep the rule as a
   no-op so any leftover divIcon (e.g. mid-reload) stays invisible. */
.sim-origin-label { display: none !important; }

/* Hover tooltip on the origin pulse — lists every (weapon × N) bundle
   launching from that point. Replaces the old always-on origin label. */
.leaflet-tooltip.sim-origin-tooltip-wrap {
    background: rgba(8, 12, 20, 0.95);
    border: 1px solid var(--col, #ff5a36);
    border-radius: 6px;
    padding: 0;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
    color: var(--text);
    font: 600 0.7rem/1.15 var(--font);
    letter-spacing: 0.03em;
}
.leaflet-tooltip.sim-origin-tooltip-wrap::before { display: none; }
.sim-origin-tooltip {
    padding: 6px 10px;
    min-width: 120px;
}
.sim-origin-tooltip .sim-ot-hdr {
    display: flex; align-items: center; gap: 6px;
    font-weight: 800; font-size: 0.78rem;
    color: #ffffff; letter-spacing: 0.06em;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    margin-bottom: 4px;
}
.sim-origin-tooltip .sim-ot-line {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 2px 0;
}
.sim-origin-tooltip .sim-ot-w  { color: var(--text); }
.sim-origin-tooltip .sim-ot-x  {
    color: #0c0c0c;
    background: var(--col, #ff5a36);
    padding: 1px 6px;
    border-radius: 999px;
    font-weight: 800; font-size: 0.65rem;
}

/* Defense markers — switched from rotated diamond to a flat country-flag
   dot so it visually matches the arsenal-mode origin marker. The
   simulator only ever shows AIR-DEFENSE batteries here. */
.sim-defense-marker { display: none; }   /* legacy diamond — hidden */

.sim-defense-dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: rgba(10, 15, 20, 0.96);
    border: 2px solid var(--col, #36aaff);
    box-shadow: 0 0 0 2px rgba(10,15,20,0.85), 0 0 8px var(--col, #36aaff);
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.sim-defense-flag {
    font-size: 10px;
    line-height: 1;
    pointer-events: none;
}

/* Offensive launch-site chip (red counterpart to .sim-defense-dot)
   used by the config-time _renderOffensiveRanges() overlay. Drawn on
   each unique offensive origin so the analyst sees where attacks
   originate from while still configuring. */
.sim-offensive-dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: rgba(10, 15, 20, 0.96);
    border: 2px solid var(--col, #ff6b5a);
    box-shadow: 0 0 0 2px rgba(10,15,20,0.85), 0 0 8px var(--col, #ff6b5a);
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.sim-offensive-flag {
    font-size: 10px;
    line-height: 1;
    pointer-events: none;
}

/* Highlight applied to the dashed offensive range circle when the
   user hovers its corresponding weapon group card in the side panel. */
path.sim-off-ring-hl,
.leaflet-interactive.sim-off-ring-hl {
    stroke-width: 2.6 !important;
    stroke-opacity: 1 !important;
    filter: drop-shadow(0 0 6px #ff6b5a);
}

/* Target crosshair removed per design — the yellow circle with two
   perpendicular dots was visually confusing. Kept as a no-op rule so any
   stale icon construction can't leak a visible glyph. */
.sim-target-marker { display: none !important; }
.sim-target-marker::before, .sim-target-marker::after { display: none !important; }

/* Origin pulse — legacy class, kept only as a reference style. The
   active marker is now `.sim-site-marker` (composite offensive + defensive
   per-site marker). Both share the same animation. */
.sim-origin-pulse {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(13, 21, 32, 0.92);
    border: 2px solid var(--col, #ff4530);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    box-shadow: 0 0 0 0 var(--col, #ff4530);
    animation: simPosPulse 1.6s ease-out infinite;
    cursor: pointer;
    pointer-events: auto;
}

/* Composite per-SITE marker (active). One per location bucket, regardless
   of whether the site hosts offensive launches, defensive batteries, or
   both. Identical pixel size for every site — visual distinction comes
   from the border color (red=offensive, mint=defensive, gradient=both)
   and the small role badge, NOT from the circle size. The size of the
   *range ring* around it conveys range, per spec. */
.sim-site-marker {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(8, 12, 20, 0.94);
    border: 2px solid var(--col, #ff4530);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; line-height: 1;
    box-shadow: 0 0 0 0 var(--col, #ff4530);
    animation: simPosPulse 1.8s ease-out infinite;
    cursor: pointer;
    pointer-events: auto;
    /* Anchor invariant: divIcon size is in PIXELS; latlng is in degrees.
       The icon never changes size or moves on zoom — Leaflet only
       repositions it relative to the new viewport. */
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    will-change: transform;
}
.sim-site-marker:hover {
    transform: scale(1.12);
    z-index: 1000;
}
.sim-site-flag { font-size: 16px; line-height: 1; }
/* Mixed sites (offense + defense at same coordinate) get a dual-color
   conic gradient border to communicate the dual role at a glance. */
.sim-site-marker.sim-site-mixed {
    border-color: transparent;
    background:
        linear-gradient(rgba(8,12,20,0.94), rgba(8,12,20,0.94)) padding-box,
        conic-gradient(from 0deg, #ff4530 0% 50%, #22d3a8 50% 100%) border-box;
}

/* Hover info-box (for sites + range rings) — semi-transparent overlay,
   organized into OFFENSIVE / DEFENSIVE sections with a footer for
   timestamp + source. Bound to BOTH the flag marker AND the range ring
   so hovering anywhere on the site's footprint surfaces the same panel. */
.leaflet-tooltip.sim-info-wrap {
    background: rgba(6, 10, 16, 0.93);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6);
    color: var(--text);
    font: 600 0.7rem/1.2 var(--font);
    letter-spacing: 0.02em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    max-width: 320px;
}
.leaflet-tooltip.sim-info-wrap::before { display: none; }
.sim-info-box {
    padding: 8px 10px 6px;
    min-width: 180px;
}
.sim-info-hdr {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.sim-info-flag    { font-size: 18px; line-height: 1; }
.sim-info-country { font-weight: 800; color: #fff; font-size: 0.82rem; letter-spacing: 0.05em; }
.sim-info-coord   {
    font: 500 0.62rem/1 var(--font);
    color: rgba(255,255,255,0.55);
    margin: 4px 0 6px;
    letter-spacing: 0.08em;
}
.sim-info-sec {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed rgba(255,255,255,0.08);
}
.sim-info-sec:first-of-type { border-top: none; padding-top: 0; }
.sim-info-sec-hdr {
    font: 800 0.58rem/1 var(--font);
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.45);
    margin-bottom: 4px;
}
.sim-info-sec-off .sim-info-sec-hdr { color: #ff8a78; }
.sim-info-sec-def .sim-info-sec-hdr { color: #6be0bd; }
.sim-info-row {
    display: flex; align-items: center; gap: 6px;
    padding: 2px 0;
}
.sim-info-tag {
    background: var(--c, #888);
    color: #0c0c0c;
    font: 800 0.55rem/1 var(--font);
    letter-spacing: 0.08em;
    padding: 2px 5px;
    border-radius: 3px;
    flex: 0 0 auto;
}
.sim-info-name { color: var(--text); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-info-meta {
    color: rgba(255,255,255,0.55);
    font: 600 0.62rem/1 var(--font);
    letter-spacing: 0.04em;
}
.sim-info-x {
    color: #0c0c0c;
    background: var(--c, #888);
    font: 800 0.62rem/1 var(--font);
    padding: 2px 6px;
    border-radius: 999px;
}
.sim-info-foot {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.12);
    display: flex; flex-direction: column; gap: 2px;
}
.sim-info-foot-row {
    display: flex; justify-content: space-between; gap: 12px;
    font: 500 0.6rem/1.1 var(--font);
}
.sim-info-foot-k { color: rgba(255,255,255,0.4); letter-spacing: 0.1em; }
.sim-info-foot-v { color: rgba(255,255,255,0.78); }
@keyframes simPosPulse {
    0%   { box-shadow: 0 0 0 0 currentColor; }
    100% { box-shadow: 0 0 0 14px transparent; }
}

/* Launch flash at origin */
.sim-launch-pulse {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--col, #ff5a36) 0%, transparent 65%);
    animation: simLaunchPulse 1.0s ease-out forwards;
    pointer-events: none;
}
@keyframes simLaunchPulse {
    0%   { transform: scale(0.2); opacity: 1; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* Missile head dot — inner color = weapon class, outer ring = country of
   origin so analysts can read both dimensions at a glance. */
.sim-missile-head {
    width: 10px; height: 10px;
    background: var(--col, #ff5a36);
    border-radius: 50%;
    border: 2px solid var(--trail, var(--col, #ff5a36));
    box-shadow: 0 0 5px var(--col, #ff5a36), 0 0 11px var(--trail, var(--col, #ff5a36));
}
/* ═══════════════════════════════════════════════════════════════════════════
   CENTRAL DOT — beacon at the shared lat/lng of a spiderfy group
   ═══════════════════════════════════════════════════════════════════════════ */
.ev-dot-wrap {
    pointer-events: auto !important;
    background: transparent !important;
    border: none !important;
    display: flex; align-items: center; justify-content: center;
}
.ev-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00e5ff;
    border: 2px solid #fff;
    cursor: pointer;
    box-sizing: border-box;
    animation: ev-beacon 2s ease-in-out infinite;
}
@keyframes ev-beacon {
    0%   { box-shadow: 0 0 0 0   rgba(0, 229, 255, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(0, 229, 255, 0);    }
    100% { box-shadow: 0 0 0 0   rgba(0, 229, 255, 0);    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARKERCLUSTER OVERRIDES
   Hide default spider legs — replaced by central dot + clean deployment.
   ═══════════════════════════════════════════════════════════════════════════ */
.leaflet-marker-cluster-spider-leg { display: none !important; }

/* Hide ALL Google Maps branding / controls injected by GoogleMutant.
   The bottom-left logo is an <a><img alt="Google"> ; the bottom-right block
   is .gmnoprint / .gm-style-cc (Terms / Report a map error). */
.gm-style .gmnoprint,
.gmnoprint,
.gm-style-cc,
.gm-style .gm-style-cc,
.gm-style a[href^="https://maps.google.com/maps"],
.gm-style a[href^="https://www.google.com/maps"],
.gm-style a[href*="maps.google"],
.gm-style a[href*="google.com/maps"],
.gm-style a[title*="Google"],
.gm-style img[alt="Google"],
img[alt="Google"],
.gm-style img[src*="gstatic"],
.gm-style img[src*="googlelogo"],
.gm-style img[src*="google_white"],
.leaflet-google-mutant a[href*="google"],
.leaflet-google-mutant img[alt="Google"],
a[aria-label*="Google"] { display: none !important; }

/* Also hide the event marker hover tooltip (disabled per user request) */
.evt-tooltip-wrap { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   AI ASSISTANT (Claude)
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   NEWS SOURCE TABS + OUTLET ARTICLES (Phase 3)
   ═══════════════════════════════════════════════════════════════════════════ */
.news-src-tabs {
    display: flex; gap: 6px; padding: 8px 12px 4px;
}
.news-src-tab {
    flex: 1; padding: 6px 10px; cursor: pointer;
    background: transparent;
    border: 1px solid var(--border); border-radius: var(--radius);
    color: var(--text2); font-family: var(--font); font-size: 11px;
    font-weight: 500; letter-spacing: 0; transition: all 0.15s ease;
}
.news-src-tab:hover { color: var(--text); border-color: var(--border2); }
.news-src-tab.active {
    color: var(--text);
    border-color: var(--accent);
    background: rgba(94, 106, 210, 0.12);
}
.news-status-err { color: #ff9a9a; }
.outlet-item { display: flex; flex-direction: column; gap: 5px; }
.outlet-hdr {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.outlet-src {
    color: var(--accent); font-family: var(--font);
    font-size: 10px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
}
.outlet-when { color: #6b7d8c; font-size: 10px; white-space: nowrap; }
.outlet-title {
    color: #eaf2f8; font-weight: 600; font-size: 14px; line-height: 1.35;
    text-decoration: none;
}
.outlet-title:hover { color: var(--accent, #00e5ff); text-decoration: underline; }
.outlet-summary { color: #aebccb; font-size: 12.5px; line-height: 1.45; }

/* Outlet pins on the map + their click-to-open popup */
.ev-pin-outlet { --accent: #f0b070; }
.outlet-popup-src {
    color: var(--accent, #00e5ff); font-family: 'Orbitron', sans-serif;
    font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 4px;
}
.outlet-popup-title {
    display: block; font-weight: 600; color: #fff; font-size: 14px;
    line-height: 1.35; text-decoration: none; margin-bottom: 6px;
}
.outlet-popup-title:hover { color: var(--accent, #00e5ff); text-decoration: underline; }
.outlet-popup-summary { color: #cfd8e2; font-size: 12.5px; line-height: 1.45; }
.outlet-popup-img {
    width: 100%; max-height: 140px; object-fit: cover;
    border-radius: 6px; margin-bottom: 6px; display: block;
}

/* ── Custom sources (user-added Telegram channels / RSS feeds) ── */
.news-src-tab-sources { white-space: nowrap; }
.user-src-panel {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.usp-title {
    color: var(--accent); font-family: var(--font);
    font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px;
}
.usp-add-row { display: flex; gap: 6px; }
.usp-input {
    flex: 1; min-width: 0; padding: 6px 9px;
    background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 7px; color: #eaf2f8; font-size: 12.5px; outline: none;
}
.usp-input:focus { border-color: var(--accent, #00e5ff); }
.usp-add-btn {
    padding: 6px 12px; cursor: pointer; white-space: nowrap;
    background: rgba(0, 229, 255, 0.14); border: 1px solid var(--accent, #00e5ff);
    border-radius: 7px; color: var(--accent, #00e5ff);
    font-family: 'Orbitron', sans-serif; font-size: 11px; letter-spacing: 0.5px;
}
.usp-add-btn:hover { background: rgba(0, 229, 255, 0.25); }
.usp-status { color: #8fe3c0; font-size: 11px; min-height: 14px; margin: 5px 0 2px; }
.usp-status.usp-status-err { color: #ff8a8a; }
.usp-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.usp-empty { color: #6b7d8c; font-size: 11.5px; font-style: italic; padding: 2px 0; }
.usp-group-hdr {
    color: var(--accent, #00e5ff); font-family: 'Orbitron', sans-serif;
    font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
    margin: 8px 0 2px; opacity: 0.7;
}
.usp-group-hdr:first-child { margin-top: 2px; }
.usp-item {
    display: flex; align-items: center; gap: 8px; padding: 5px 8px;
    background: rgba(255, 255, 255, 0.04); border-radius: 7px;
}
.usp-item-ico { font-size: 13px; }
.usp-item-name { flex: 1; min-width: 0; color: #dce6ef; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usp-item-tags { display: flex; gap: 4px; flex-shrink: 0; }
.usp-item-type, .usp-item-origin {
    font-size: 9.5px; padding: 2px 6px; border-radius: 4px;
    font-family: 'Orbitron', sans-serif; letter-spacing: 0.5px; text-transform: uppercase;
    line-height: 1;
}
.usp-type-telegram { background: rgba(56, 161, 232, 0.18); color: #6bb7eb; }
.usp-type-rss      { background: rgba(255, 153, 0, 0.18);  color: #ffb95c; }
.usp-origin-default { background: rgba(143, 227, 192, 0.13); color: #8fe3c0; }
.usp-origin-live    { background: rgba(0, 229, 255, 0.13);  color: var(--accent, #00e5ff); }
.usp-origin-custom  { background: rgba(255, 255, 255, 0.08); color: #cfd8e2; }
.usp-item-del {
    background: none; border: none; color: #ff8a8a; cursor: pointer;
    font-size: 13px; padding: 0 4px; opacity: 0.7; flex-shrink: 0;
}
.usp-item-del:hover { opacity: 1; }
.usp-item-off { opacity: 0.45; }
.usp-item-off .usp-item-del { color: var(--accent, #00e5ff); }
.news-outlet-link {
    display: inline-block; margin-top: 6px; color: var(--accent, #00e5ff);
    font-size: 11.5px; text-decoration: none; font-family: 'Orbitron', sans-serif;
    letter-spacing: 0.3px;
}
.news-outlet-link:hover { text-decoration: underline; }

/* Top-bar "ask the AI" bar */
.ai-ask-wrap {
    display: flex; align-items: center; gap: 6px;
    background: rgba(0, 229, 255, 0.07);
    border: 1px solid rgba(0, 229, 255, 0.30); border-radius: 9px;
    padding: 5px 10px; min-width: 200px;
    position: relative;
}
.ai-ask-wrap:focus-within { border-color: var(--accent, #00e5ff); }
.ai-ask-icon { font-size: 14px; opacity: 0.9; }
.ai-ask-input {
    flex: 1; background: transparent; border: none; outline: none;
    color: #fff; font-size: 13px; font-family: inherit; min-width: 120px;
}
.ai-ask-input::placeholder { color: rgba(180, 210, 230, 0.6); }
.ai-fold-topbar {
    background: none; border: none; color: var(--accent, #00e5ff);
    font-size: 11px; cursor: pointer; padding: 0 2px; opacity: 0.7;
    line-height: 1; flex-shrink: 0;
}
.ai-fold-topbar:hover { opacity: 1; }

#ai-fab {
    position: fixed; right: 22px; bottom: 22px; z-index: 1600;
    width: 54px; height: 54px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent, #00e5ff), #0077ff);
    border: none; color: #fff; font-size: 26px; cursor: pointer;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#ai-fab:hover { transform: scale(1.08); box-shadow: 0 8px 28px rgba(0, 229, 255, 0.5); }

#ai-panel {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 3000;
    width: 420px; max-width: calc(100vw - 40px);
    height: 480px; max-height: calc(100vh - 80px);
    display: none; flex-direction: column;
    background: var(--panel, rgba(8, 12, 20, 0.97));
    border: 1px solid rgba(0, 229, 255, 0.35); border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65); overflow: hidden;
    backdrop-filter: blur(10px);
}
#ai-panel.open { display: flex; }
.ai-messages {
    flex: 1; overflow-y: auto; padding: 14px; display: flex;
    flex-direction: column; gap: 10px;
}
.ai-msg {
    max-width: 85%; padding: 9px 12px; border-radius: 12px;
    font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word;
}
.ai-msg-bot {
    align-self: flex-start; background: rgba(255, 255, 255, 0.07);
    color: #dfe9f2; border-bottom-left-radius: 4px;
}
.ai-msg-user {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.22), rgba(0, 119, 255, 0.22));
    color: #fff; border-bottom-right-radius: 4px;
}
.ai-msg-pending { opacity: 0.6; font-style: italic; }
.ai-msg-error { color: #ff9a9a; background: rgba(255, 80, 80, 0.12); }
.ai-input-row {
    display: flex; gap: 8px; padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ai-input {
    flex: 1; background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px;
    padding: 9px 12px; color: #fff; font-size: 13.5px; outline: none;
}
.ai-input:focus { border-color: var(--accent, #00e5ff); }
.ai-send {
    background: var(--accent, #00e5ff); border: none; border-radius: 10px;
    width: 42px; color: #00131a; font-size: 16px; cursor: pointer;
}
.ai-send:hover { filter: brightness(1.1); }

/* ============ MISSILE SIMULATOR PANEL ============ */
#missile-simulator-panel {
    position: fixed;
    right: 0;
    top: 0;
    width: 420px;
    height: 100vh;
    background: var(--panel);
    border-left: 2px solid var(--border2);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    font-family: var(--font);
    color: var(--text);
}

.ms-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.3);
}

.ms-title {
    font-family: var(--display);
    font-size: 15px;
    letter-spacing: 2px;
    color: var(--accent);
    font-weight: 700;
}

.ms-close-btn {
    background: none;
    border: none;
    color: var(--text2);
    font-size: 24px;
    cursor: pointer;
    transition: color 0.2s;
}

.ms-close-btn:hover {
    color: var(--accent);
}

.ms-mode-toggle {
    display: flex;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    align-items: center;
    flex-wrap: wrap;
}

.ms-mode-btn {
    flex: 1;
    min-width: 80px;
    padding: 7px 12px;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid var(--border);
    color: var(--text2);
    font-family: var(--font);
    font-size: 12px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 4px;
}

.ms-mode-btn.active {
    background: rgba(0, 229, 255, 0.2);
    border-color: var(--accent);
    color: var(--accent);
}

.ms-mode-btn:hover {
    border-color: var(--accent);
}

.ms-simultaneous {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text2);
    cursor: pointer;
    padding: 4px 8px;
}

.ms-simultaneous input {
    cursor: pointer;
}

.ms-section {
    display: none;
    flex-direction: column;
    padding: 14px;
    border-bottom: 1px solid var(--border);
    gap: 10px;
}

.ms-section.visible {
    display: flex;
}

.ms-section.summary-section {
    display: flex;
}

.ms-section-title {
    font-family: var(--display);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--accent2);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.ms-subsection {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.ms-subsection-title {
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--text2);
    text-transform: uppercase;
    opacity: 0.8;
}

.ms-country-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.ms-country-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 12px;
}

.ms-remove-btn {
    background: rgba(255, 107, 53, 0.15);
    border: 1px solid rgba(255, 107, 53, 0.3);
    color: var(--warm);
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.2s;
}

.ms-remove-btn:hover {
    background: rgba(255, 107, 53, 0.25);
}

.ms-add-country-btn,
.ms-set-target-btn,
.ms-reposition-btn,
.ms-launch-btn {
    padding: 9px 12px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid var(--border2);
    color: var(--accent);
    font-family: var(--font);
    font-size: 12px;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.ms-add-country-btn:hover,
.ms-set-target-btn:hover,
.ms-reposition-btn:hover {
    background: rgba(0, 229, 255, 0.2);
    border-color: var(--accent);
}

.ms-launch-btn {
    background: rgba(0, 255, 136, 0.15);
    border-color: var(--accent2);
    color: var(--accent2);
    font-weight: 600;
    margin-top: 10px;
}

.ms-launch-btn:hover:not(:disabled) {
    background: rgba(0, 255, 136, 0.25);
}

.ms-launch-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ms-summary-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    border: 1px solid var(--border);
}

.ms-summary-stats p {
    color: var(--text2);
    margin: 0;
}

.ms-results-panel {
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ms-results-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ms-results-content h3 {
    font-family: var(--display);
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--accent);
    margin: 0;
}

.ms-results-stats {
    padding: 10px;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid var(--border);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ms-results-stats p {
    font-size: 12px;
    color: var(--text);
    margin: 0;
}

.ms-strategic-assessment {
    padding: 10px;
    background: rgba(0, 255, 136, 0.08);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: 3px;
}

.ms-strategic-assessment h4 {
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--accent2);
    text-transform: uppercase;
    margin: 0 0 6px 0;
}

.ms-strategic-assessment p {
    font-size: 12px;
    color: var(--text2);
    line-height: 1.4;
    margin: 0;
}

.ms-return-btn {
    padding: 9px 12px;
    background: rgba(255, 107, 53, 0.15);
    border: 1px solid rgba(255, 107, 53, 0.3);
    color: var(--warm);
    font-family: var(--font);
    font-size: 12px;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.ms-return-btn:hover {
    background: rgba(255, 107, 53, 0.25);
}

/* FAB Button for Missile Simulator */
#missile-fab {
    position: fixed;
    bottom: 100px;
    left: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.25), rgba(255, 107, 53, 0.15));
    border: 2px solid rgba(255, 107, 53, 0.5);
    color: var(--warm);
    font-size: 28px;
    cursor: pointer;
    z-index: 900;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);
}

#missile-fab:hover {
    border-color: var(--warm);
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.4), rgba(255, 107, 53, 0.25));
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.35);
    transform: scale(1.1);
}

/* Missile Simulator Additional Styles */
.ms-select {
    width: 100%;
    padding: 7px 10px;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font);
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
    margin-bottom: 8px;
    transition: all 0.2s;
}

.ms-select:hover {
    border-color: var(--accent);
}

.ms-select:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(0, 229, 255, 0.12);
}

.ms-ally-weapons,
.ms-ally-defenses {
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: 3px;
    margin-bottom: 8px;
}

.ms-weapon-row,
.ms-defense-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    font-size: 11px;
}

.ms-qty-input,
.ms-bat-input {
    width: 50px;
    padding: 4px 6px;
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid var(--border);
    color: var(--accent);
    font-family: var(--font);
    font-size: 11px;
    border-radius: 2px;
    text-align: center;
}

.ms-qty-input:focus,
.ms-bat-input:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(94, 106, 210, 0.1);
}

/* ── UI Theme switcher ── */
.theme-switcher {
    display: flex;
    gap: 6px;
}
.theme-btn {
    flex: 1;
    padding: 7px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text2);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.theme-btn:hover {
    border-color: var(--border2);
    color: var(--text);
}
.theme-btn.active {
    border-color: var(--accent);
    color: var(--text);
    background: rgba(94, 106, 210, 0.12);
}

/* ── Provisional dev "reset onboarding" button (top bar) ── */
.onb-reset-btn {
    background: rgba(249, 115, 22, 0.14);
    border: 1px solid var(--warm, #f97316);
    color: var(--warm, #f97316);
    font-family: var(--font);
    font-size: 11px; font-weight: 600;
    padding: 5px 10px; border-radius: var(--radius);
    cursor: pointer; margin-right: 8px;
    letter-spacing: 0.3px; transition: all 0.15s;
}
.onb-reset-btn:hover { background: rgba(249, 115, 22, 0.28); }

/* ── Onboarding overlay ── */
.onb-overlay {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 8, 10, 0.5);
    backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
    padding: 20px;
}
[data-theme="light"] .onb-overlay { background: rgba(245, 245, 247, 0.55); }
body.onb-active { overflow: hidden; }
/* Minimalist glass panel — a touch transparent, soft and calm. */
.onb-modal {
    width: min(560px, 94vw);
    max-height: 92vh; overflow-y: auto;
    background: rgba(22, 22, 24, 0.55);
    backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    padding: 30px 32px 26px;
    font-family: var(--font);
    color: var(--text);
    /* No animation here — the modal re-rendered on every chip click which made
       the whole panel flash. The overlay backdrop already provides enter feel. */
}
[data-theme="light"] .onb-modal {
    background: rgba(255, 255, 255, 0.62); border-color: rgba(0, 0, 0, 0.08);
}
.onb-brand {
    font-family: var(--display); font-weight: 800; letter-spacing: 2px;
    font-size: 15px; color: var(--text); opacity: 0.85; margin-bottom: 14px;
}
.onb-brand-diamond { color: var(--accent); margin-right: 4px; }
.onb-progress-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.onb-stepnum { font-size: 11px; color: var(--text2); letter-spacing: 0.4px; }
.onb-dots { display: flex; gap: 6px; }
.onb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); transition: all 0.2s; }
.onb-dot.on { background: var(--accent); transform: scale(1.25); }
.onb-dot.done { background: var(--accent2); }
.onb-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.onb-sub { font-size: 13.5px; color: var(--text2); margin: 0 0 22px; line-height: 1.4; }
.onb-body { margin-bottom: 26px; }
.onb-grid { display: grid; gap: 10px; }
.onb-grid-lang { grid-template-columns: repeat(3, 1fr); }
.onb-grid-chips { grid-template-columns: repeat(2, 1fr); margin-bottom: 12px; }
.onb-grid-2 { grid-template-columns: repeat(2, 1fr); }
.onb-chip {
    display: flex; align-items: center; gap: 7px;
    background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text); font-family: var(--font); font-size: 13px;
    padding: 11px 12px; border-radius: 10px; cursor: pointer;
    text-align: start; transition: all 0.15s;
}
[data-theme="light"] .onb-chip { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.1); }
.onb-chip:hover { border-color: var(--accent); }
.onb-chip.sel { border-color: var(--accent); background: rgba(94, 106, 210, 0.16); color: var(--text); }
.onb-chip-ico { font-size: 15px; }
.onb-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text); font-family: var(--font);
    padding: 20px 14px; border-radius: 12px; cursor: pointer;
    text-align: center; transition: all 0.15s;
}
[data-theme="light"] .onb-card { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.1); }
.onb-card:hover { border-color: var(--accent); }
.onb-card.sel { border-color: var(--accent); background: rgba(94, 106, 210, 0.16); }
.onb-card-tall { min-height: 150px; justify-content: center; }
.onb-card-ico { font-size: 28px; }
.onb-card-t { font-size: 14px; font-weight: 600; }
.onb-card-s { font-size: 11.5px; color: var(--text2); line-height: 1.35; }
.onb-input {
    width: 100%; box-sizing: border-box;
    background: var(--bg); border: 1.5px solid var(--border2);
    color: var(--text); font-family: var(--font); font-size: 15px;
    padding: 13px 14px; border-radius: 9px; outline: none; transition: border-color 0.15s;
}
.onb-input:focus { border-color: var(--accent); }
.onb-input-sm { font-size: 13px; padding: 10px 12px; }
.onb-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.onb-btn {
    font-family: var(--font); font-size: 14px; font-weight: 600;
    padding: 11px 26px; border-radius: 9px; cursor: pointer;
    border: 1px solid transparent; transition: all 0.15s;
}
.onb-btn-ghost { background: transparent; border-color: var(--border2); color: var(--text2); }
.onb-btn-ghost:hover { color: var(--text); border-color: var(--text2); }
.onb-btn-primary { background: var(--accent); color: #fff; margin-inline-start: auto; }
.onb-btn-primary:hover { filter: brightness(1.1); }

/* Disabled state for the Next button when required fields aren't filled. */
.onb-btn-primary.onb-btn-disabled,
.onb-btn-primary:disabled {
    opacity: 0.4; cursor: not-allowed; filter: none;
}

/* Layouts and elements added for the redesigned name + updates steps. */
.onb-grid-3 { grid-template-columns: repeat(3, 1fr); margin-top: 8px; }
.onb-q-label {
    font-size: 13px; color: var(--text2);
    margin: 14px 0 6px; font-weight: 500;
}
.onb-subq + .onb-subq { margin-top: 14px; }
.onb-card-sm { padding: 12px 10px; gap: 4px; }
.onb-card-sm .onb-card-ico { font-size: 20px; }
.onb-card-sm .onb-card-t { font-size: 13px; }
.onb-chip-sex { justify-content: center; padding: 10px 8px; font-size: 12.5px; }

/* Source-panel title row + "ayuda" link that opens the source-types modal. */
.usp-title-row {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 6px; gap: 8px;
}
.usp-help-btn {
    background: none; border: none; padding: 0;
    color: var(--accent, #00e5ff);
    font-family: var(--font); font-size: 11.5px;
    text-decoration: underline; cursor: pointer;
    opacity: 0.85; transition: opacity 0.15s;
}
.usp-help-btn:hover { opacity: 1; }

/* Source-types help modal (opened from the "ayuda" link). */
.src-help-overlay {
    position: fixed; inset: 0; z-index: 4100;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    padding: 20px;
}
.src-help-modal {
    width: min(620px, 94vw);
    max-height: 86vh; overflow-y: auto;
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    padding: 26px 32px 28px;
    color: var(--text);
    font-family: var(--font);
    position: relative;
}
.src-help-close {
    position: absolute; top: 10px; right: 14px;
    background: none; border: none;
    color: var(--text2);
    font-size: 22px; line-height: 1;
    cursor: pointer; padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s;
}
.src-help-close:hover { background: var(--bg); color: var(--text); }
.src-help-title {
    margin: 0 0 14px; font-size: 20px; font-weight: 700;
    color: var(--text); padding-right: 28px;
}
.src-help-body {
    font-size: 13.5px; line-height: 1.55; color: var(--text);
}
.src-help-body p { margin: 0 0 10px; }
.src-help-body h4 {
    font-size: 13px; font-weight: 700; margin: 16px 0 6px;
    color: var(--accent);
    text-transform: uppercase; letter-spacing: 0.4px;
}
.src-help-body ul { margin: 6px 0 10px; padding-inline-start: 22px; }
.src-help-body li { margin-bottom: 4px; }
.src-help-body code {
    background: var(--bg);
    padding: 1px 6px; border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    border: 1px solid var(--border);
}
.src-help-body em { color: var(--text2); font-style: italic; }

/* ============ SETTINGS: icons-per-source range slider ============ */
.range-row { display: flex; align-items: center; gap: 10px; }
.range-input {
    flex: 1; -webkit-appearance: none; appearance: none; height: 4px;
    background: var(--muted); border-radius: 3px; outline: none; cursor: pointer;
}
.range-input::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 16px; height: 16px;
    border-radius: 50%; background: var(--accent); cursor: pointer;
    border: 2px solid var(--bg2); box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.range-input::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
    cursor: pointer; border: 2px solid var(--bg2);
}
.range-val {
    min-width: 26px; text-align: center; font-weight: 700; font-size: 0.85rem;
    color: var(--accent); font-variant-numeric: tabular-nums;
}
.p-section-hint { margin-top: 7px; font-size: 0.68rem; line-height: 1.4; color: var(--text2); }

/* ============ TOP-BAR: Favorite Topics Box trigger ============ */
.fav-fab {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px; margin-right: 8px;
    background: transparent;
    border: 1px solid var(--border); border-radius: var(--radius);
    color: var(--text2); cursor: pointer; transition: all 0.15s ease;
    font-family: var(--font); font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.03em;
}
.fav-fab:hover { color: var(--text); border-color: var(--border2); }
.fav-fab-ico { font-size: 0.95rem; }

/* ============ Favorite Topics Box overlay (full-screen, no map) ============ */
.fav-overlay {
    position: fixed; inset: 0; z-index: 100000;
    display: none; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px);
    padding: 24px;
}
.fav-panel {
    width: min(1100px, 100%); height: min(86vh, 820px);
    display: flex; flex-direction: column;
    background: var(--panel); backdrop-filter: blur(20px);
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    animation: favIn 0.2s ease-out;
}
@keyframes favIn { from { opacity: 0; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: none; } }
.fav-hdr {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.fav-hdr-ico { font-size: 1.4rem; }
.fav-hdr-titles { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fav-hdr-title { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.fav-hdr-sub { font-size: 0.76rem; color: var(--text2); }
.fav-close {
    width: 34px; height: 34px; flex-shrink: 0;
    background: transparent; border: 1px solid var(--border); border-radius: 8px;
    color: var(--text2); font-size: 1.3rem; line-height: 1; cursor: pointer;
    transition: all 0.15s ease;
}
.fav-close:hover { color: var(--text); border-color: var(--border2); }

/* News reader: the full feed of all the user's sources, like a noticiero. */
.fav-feed {
    flex: 1; overflow-y: auto; padding: 16px 18px 110px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px; align-content: start;
}
.fav-feed-empty {
    grid-column: 1 / -1; text-align: center; color: var(--text2);
    font-size: 0.9rem; line-height: 1.6; padding: 50px 20px;
}
.fav-news-item {
    display: flex; gap: 10px; padding: 12px;
    background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
    transition: border-color 0.15s ease;
}
.fav-news-item:hover { border-color: var(--border2); }
.fav-news-img {
    width: 72px; height: 72px; flex-shrink: 0; object-fit: cover;
    border-radius: 8px; background: var(--muted);
}
.fav-news-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.fav-news-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fav-news-src {
    font-size: 0.72rem; font-weight: 700; color: var(--accent);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fav-news-when { font-size: 0.66rem; color: var(--text2); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.fav-news-title { font-size: 0.9rem; font-weight: 600; line-height: 1.35; color: var(--text); }
.fav-news-body {
    font-size: 0.8rem; line-height: 1.45; color: var(--text2);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fav-news-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.fav-news-loc { font-size: 0.7rem; color: var(--text2); }
.fav-news-link {
    margin-left: auto; color: var(--accent); text-decoration: none; font-size: 0.95rem;
    width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 6px;
}
.fav-news-link:hover { border-color: var(--accent); }

/* Dynamic Island: a floating, minimalist, foldable AI consult about your news. */
.fav-island {
    position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
    width: min(440px, calc(100% - 36px)); z-index: 5;
    background: rgba(20, 20, 22, 0.6); backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    overflow: hidden; transition: width 0.28s ease, border-radius 0.25s ease;
}
[data-theme="light"] .fav-island {
    background: rgba(255, 255, 255, 0.72); border-color: rgba(0, 0, 0, 0.1);
}
.fav-island.open, .fav-island.has-convo { width: min(700px, calc(100% - 36px)); border-radius: 18px; }

.fav-island-convo {
    display: flex; flex-direction: column; gap: 11px;
    max-height: 0; opacity: 0; overflow: hidden; padding: 0 16px;
    transition: max-height .4s cubic-bezier(.22,.61,.36,1), opacity .3s ease, padding .4s cubic-bezier(.22,.61,.36,1);
}
.fav-island.has-convo .fav-island-convo {
    max-height: 320px; opacity: 1; overflow-y: auto; padding: 14px 16px 4px;
}
.fav-island.has-convo.collapsed .fav-island-convo {
    max-height: 0; opacity: 0; overflow: hidden; padding: 0 16px;
}
.fav-msg { word-wrap: break-word; white-space: pre-wrap; }
.fav-msg-user {
    align-self: flex-end; max-width: 85%;
    background: var(--accent); color: #fff;
    padding: 8px 12px; border-radius: 13px 13px 4px 13px;
    font-family: var(--font); font-size: 13.5px; line-height: 1.45;
}
.fav-msg-bot {
    align-self: stretch; font-family: var(--serif); font-size: 15.5px; line-height: 1.6;
    color: var(--text); letter-spacing: 0.005em;
}
.fav-msg-bot.fav-island-pending { opacity: 0.55; font-style: italic; }
.fav-msg-bot.fav-island-error { color: #ff9a9a; font-family: var(--font); font-size: 13.5px; }

.fav-island-bar { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 8px; }
.fav-island-toggle {
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    background: transparent; border: 1px solid var(--border); color: var(--text2);
    cursor: pointer; line-height: 0;
    transition: transform 0.25s ease, color 0.15s ease;
}
.fav-island.collapsed .fav-island-toggle { transform: rotate(180deg); }
.fav-island-toggle:hover { color: var(--text); border-color: var(--border2); }
.fav-island-input {
    flex: 1; background: transparent; border: none; outline: none;
    color: var(--text); font-size: 14px; font-family: var(--font); padding-left: 6px;
}
.fav-island-input::placeholder { color: var(--text2); }
.fav-island-send {
    flex-shrink: 0; width: 36px; height: 36px; border: none; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 15px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: filter 0.15s ease;
}
.fav-island-send:hover { filter: brightness(1.1); }

@media (max-width: 720px) {
    .fav-overlay { padding: 0; }
    .fav-panel { width: 100%; height: 100%; border-radius: 0; }
    .fav-feed { grid-template-columns: 1fr; padding-bottom: 100px; }
    .fav-fab-lbl { display: none; }
    .fav-fab { padding: 0 9px; }
}

/* ============ AI assistant — bottom Dynamic Island ============ */
/* Floats above the map, centered, not glued to the edge. Minimalist, a touch
   transparent. The conversation streams in above the bar and can be folded. */
.ai-island {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
    width: min(520px, calc(100% - 40px)); z-index: 950;
    background: rgba(18, 18, 20, 0.62); backdrop-filter: blur(26px) saturate(1.5);
    -webkit-backdrop-filter: blur(26px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 24px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    transition: width 0.3s cubic-bezier(.2,.7,.2,1), border-radius 0.28s ease;
}
[data-theme="light"] .ai-island {
    background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* In a conversation → wider. */
.ai-island.focus { width: min(560px, calc(100% - 40px)); }
.ai-island.open, .ai-island.has-convo { width: min(720px, calc(100% - 40px)); border-radius: 20px; }

/* The conversation log — message bubbles, scrollable, foldable. */
.ai-island-convo {
    display: flex; flex-direction: column; gap: 12px;
    max-height: 0; opacity: 0; overflow: hidden; padding: 0 18px;
    /* Fluid fold/unfold instead of an instant show/hide. */
    transition: max-height .4s cubic-bezier(.22,.61,.36,1), opacity .3s ease, padding .4s cubic-bezier(.22,.61,.36,1);
}
.ai-island.has-convo .ai-island-convo {
    max-height: min(48vh, 460px); opacity: 1; overflow-y: auto; padding: 16px 18px 4px;
}
.ai-island.has-convo.collapsed .ai-island-convo {
    max-height: 0; opacity: 0; overflow: hidden; padding: 0 18px;
}
.ai-island-convo::-webkit-scrollbar { width: 8px; }
.ai-island-convo::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 8px; }

.ai-msg { word-wrap: break-word; white-space: pre-wrap; }
.ai-msg-user {
    align-self: flex-end; max-width: 85%;
    background: var(--accent); color: #fff;
    padding: 9px 13px; border-radius: 14px 14px 4px 14px;
    font-family: var(--font); font-size: 14px; line-height: 1.45;
}
/* Assistant answer — Claude-like serif, generous and readable. */
.ai-msg-bot {
    align-self: stretch;
    font-family: var(--serif); font-size: 16.5px; line-height: 1.62;
    color: var(--text); letter-spacing: 0.005em;
}
.ai-msg-bot.ai-msg-pending { opacity: 0.5; font-style: italic; }
.ai-msg-bot.ai-msg-error { color: #ff9a9a; font-family: var(--font); font-size: 14px; }

/* "AI is a Pro feature" lock card, shown to free accounts in either island. */
.ai-lock {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 10px; padding: 18px 16px 16px;
}
.ai-lock-icon { font-size: 26px; line-height: 1; opacity: 0.9; }
.ai-lock-title {
    font-family: var(--font); font-weight: 700; font-size: 15px; color: var(--text);
}
.ai-lock-body {
    font-family: var(--font); font-size: 13.5px; line-height: 1.5;
    color: var(--text2); max-width: 320px;
}
.ai-lock-cta {
    margin-top: 4px; border: none; border-radius: 10px; cursor: pointer;
    padding: 11px 20px; font-family: var(--font); font-weight: 600; font-size: 14px;
    color: #fff; background: linear-gradient(135deg, var(--skp-purple, #8b5cf6), var(--skp-purpledk, #6d28d9));
    box-shadow: 0 10px 24px -8px rgba(139,92,246,0.7);
    transition: transform .15s, box-shadow .15s;
}
.ai-lock-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -10px rgba(139,92,246,0.95); }
.ai-lock-cta:active { transform: translateY(0); }

/* The always-visible input bar (the collapsed pill). */
.ai-island-bar { display: flex; align-items: center; gap: 8px; padding: 9px 9px 9px 8px; }
/* Always present (even with no conversation yet); the chevron is centred. */
.ai-island-toggle {
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    background: transparent; border: 1px solid var(--border); color: var(--text2);
    cursor: pointer; line-height: 0;
    transition: transform 0.25s ease, color 0.15s ease, border-color 0.15s ease;
}
.ai-island-toggle:hover { color: var(--text); border-color: var(--border2); }
/* Chevron points down when open, flips up when collapsed. */
.ai-island.collapsed .ai-island-toggle { transform: rotate(180deg); }
.ai-island-input {
    flex: 1; background: transparent; border: none; outline: none;
    color: var(--text); font-size: 15px; font-family: var(--font); padding-left: 6px;
}
.ai-island-input::placeholder { color: var(--text2); }
.ai-island-send {
    flex-shrink: 0; width: 40px; height: 40px; border: none; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: filter 0.15s ease, transform 0.1s ease;
}
.ai-island-send:hover { filter: brightness(1.12); }
.ai-island-send:active { transform: scale(0.94); }

@media (max-width: 720px) {
    .ai-island, .ai-island.focus, .ai-island.open, .ai-island.has-convo { width: calc(100% - 24px); bottom: 18px; }
    .ai-msg-bot { font-size: 15.5px; }
    .ai-island-convo { max-height: 42vh; }
}

/* ============ Source-loading veil ============ */
/* Blurred, minimalist overlay with a centered localized message, shown while
   sources load (AI finder OR the user's own sources). */
.src-loading-overlay {
    position: fixed; inset: 0; z-index: 99000;
    display: none; align-items: center; justify-content: center;
    background: rgba(10, 10, 12, 0.42);
    backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
    animation: srcLoadIn 0.25s ease-out;
}
[data-theme="light"] .src-loading-overlay { background: rgba(245, 245, 247, 0.5); }
@keyframes srcLoadIn { from { opacity: 0; } to { opacity: 1; } }
.src-loading-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.src-loading-spinner {
    width: 38px; height: 38px; border-radius: 50%;
    border: 3px solid var(--border2); border-top-color: var(--accent);
    animation: srcSpin 0.9s linear infinite;
}
@keyframes srcSpin { to { transform: rotate(360deg); } }
.src-loading-msg {
    font-family: var(--serif); font-size: 19px; color: var(--text);
    letter-spacing: 0.01em; text-align: center; padding: 0 24px;
}

/* ════════════════════════════════════════════════════════════════════════
   LANDING PAGE + AUTH GATE  —  minimalist, black + purple, Inter
   ════════════════════════════════════════════════════════════════════════ */
:root {
    --skp-purple:  #8b5cf6;
    --skp-purple2: #a78bfa;
    --skp-purpledk:#6d28d9;
    --skp-ink:     #08070d;
    --skp-ink2:    #100d1a;
}
.landing {
    position: fixed; inset: 0; z-index: 4000;
    background: var(--skp-ink);
    color: #f4f2fb;
    font-family: var(--font);
    overflow-y: auto;
    -webkit-font-smoothing: antialiased;
}
.landing[aria-hidden="true"] { display: none; }
/* Soft purple glow backdrop. position:fixed (not absolute) so the SAME glow
   stays behind the whole landing — hero AND pricing — as the user scrolls,
   instead of only covering the first viewport (which left the pricing section
   looking like a flat black band with a different background). */
.landing-bg {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(900px 600px at 18% 12%, rgba(139,92,246,0.22), transparent 60%),
        radial-gradient(800px 700px at 92% 88%, rgba(109,40,217,0.20), transparent 60%),
        radial-gradient(600px 500px at 70% 20%, rgba(167,139,250,0.10), transparent 55%);
}
.landing-inner {
    position: relative; z-index: 1;
    width: min(1080px, 92vw);
    margin: 0 auto;
    min-height: 78vh; box-sizing: border-box;
    /* Hero is now a single centered column (the auth card moved to its own
       dedicated view, reached from the top-bar buttons). */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    /* Top padding leaves room for the .landing-top header. */
    padding: 120px 0 30px;
}
.landing-inner .landing-hero { max-width: 720px; }
.landing-inner .landing-feats { max-width: 480px; margin: 22px auto 0; text-align: left; }

/* ── Plans-only mode ──
   When a logged-in user re-opens the landing just to pick a plan, hide the
   hero/auth and the language top bar, and show only the pricing + a close ✕. */
.landing[data-view="plans"] .landing-inner,
.landing[data-view="plans"] .landing-top { display: none; }
.landing[data-view="plans"] .landing-pricing { border-top: 0; padding-top: 92px; }
/* Plans-view Back button. Text "← Back" (NOT a round X). It must ONLY ever show
   in the plans view — it is deliberately NOT given the .lt-back class, because
   that class is shown in the auth view too, and this button's click enters the
   app (a serious bug if it leaked outside plans mode). */
.landing-close {
    display: none;
    position: fixed; top: 18px; left: 24px; z-index: 3;
    background: transparent; border: 0;
    color: #cbc5e0; font-family: var(--font); font-size: 14px; font-weight: 500;
    line-height: 1; cursor: pointer; padding: 9px 12px; border-radius: 9px;
    align-items: center; gap: 6px;
    transition: color .15s, background .15s;
}
.landing-close:hover { color: #fff; background: rgba(255,255,255,0.07); }
.landing[data-view="plans"] .landing-close { display: inline-flex; }
.landing[data-view="plans"] .landing-showcase,
.landing[data-view="plans"] .landing-authview { display: none; }

/* ── Top-bar auth actions (Log in / Create account / Back) ── */
.landing-top-actions { display: flex; align-items: center; gap: 10px; }
.lt-btn {
    font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer;
    padding: 9px 16px; border-radius: 10px; transition: background .15s, border-color .15s, transform .15s;
}
.lt-btn-ghost { background: transparent; color: #e9e4fb; border: 1px solid rgba(255,255,255,0.18); }
.lt-btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(139,92,246,0.5); }
.lt-btn-solid { background: linear-gradient(135deg,#8b5cf6,#6d28d9); color: #fff; border: 0; box-shadow: 0 6px 18px rgba(109,40,217,0.4); }
.lt-btn-solid:hover { transform: translateY(-1px); }
.lt-back { display: none; background: transparent; border: 0; color: #cbc5e0; font-family: var(--font); font-size: 13px; cursor: pointer; padding: 9px 10px; }
.lt-back:hover { color: #fff; }

/* ── Dedicated auth view ──
   The auth card lives in its own centered view, shown only when data-view=auth.
   On the home view the card is hidden (auth is reached from the top buttons). */
.landing-authview { display: none; }
.landing[data-view="auth"] .landing-authview {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative; z-index: 1;
    min-height: 100vh; box-sizing: border-box;
    padding: 120px 24px 60px; gap: 14px;
}
.landing-authview .landing-auth { width: min(440px, 92vw); }
.landing[data-view="auth"] .landing-inner,
.landing[data-view="auth"] .landing-showcase,
.landing[data-view="auth"] #landing-pricing { display: none; }
.landing[data-view="auth"] #landing-login-btn,
.landing[data-view="auth"] #landing-register-btn { display: none; }
.landing[data-view="auth"] .lt-back { display: inline-flex; }

/* ── Landing profile chip (replaces Log in / Create account once signed in) ── */
.landing-profile { position: relative; }
.landing-profile-btn {
    display: inline-flex; align-items: center; gap: 9px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
    color: #ece7fa; font-family: var(--font); font-size: 13px; font-weight: 600;
    padding: 6px 12px 6px 6px; border-radius: 999px; cursor: pointer;
    transition: background .18s, border-color .18s, transform .18s;
}
.landing-profile-btn:hover { background: rgba(139,92,246,0.14); border-color: rgba(139,92,246,0.45); transform: translateY(-1px); }
.landing-profile-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#8b5cf6,#6d28d9); color: #fff; font-weight: 700; font-size: 13px;
}
.landing-profile-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.landing-profile-plan { font-size: 11px; font-weight: 700; color: #c7b6ff; background: rgba(139,92,246,0.18); padding: 2px 8px; border-radius: 999px; }
.landing-profile-plan.is-choose { color: #f0b070; background: rgba(240,176,112,0.16); }
.landing-profile-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 5;
    min-width: 200px; padding: 8px;
    background: #171022; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.5);
    animation: lvIn .2s ease both;
}
.landing-profile-menu[hidden] { display: none; }
.lpm-email { font-size: 12px; color: #9b93b8; padding: 6px 10px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 6px; }
.lpm-item {
    display: block; width: 100%; text-align: left; background: transparent; border: 0;
    color: #ece7fa; font-family: var(--font); font-size: 13px; padding: 9px 10px; border-radius: 9px; cursor: pointer;
    transition: background .14s;
}
.lpm-item:hover { background: rgba(139,92,246,0.14); }
.lpm-enter { font-weight: 600; }
.lpm-logout { color: #ff8da3; }

/* ── Fluid view transitions ──
   Every landing view (home / auth / plans) and the in-card mode switch glides
   in instead of snapping. The .lv-anim class is re-applied from JS (with a forced
   reflow) so the entrance replays on every navigation, including Back. */
@keyframes lvIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes lvInSoft {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lv-anim { animation: lvIn .42s cubic-bezier(.22,.61,.36,1) both; }
@media (prefers-reduced-motion: reduce) {
    .lv-anim, .landing-profile-menu, .onb-body, .onb-title, .onb-sub, .auth-only-register { animation: none !important; }
}

/* Auth mode switch (login ↔ register): the whole card content crossfades so the
   name field appearing/disappearing reads as a smooth morph, not a snap. Driven
   by auth._switchMode() re-applying .auth-anim with a forced reflow. */
.auth-anim { animation: lvInSoft .34s cubic-bezier(.22,.61,.36,1) both; }

/* Onboarding step content slides in on every step render (the modal frame stays
   put so only the content moves — fluid, not a flash). */
.onb-title { animation: lvInSoft .36s cubic-bezier(.22,.61,.36,1) both; }
.onb-sub   { animation: lvInSoft .4s cubic-bezier(.22,.61,.36,1) .03s both; }
.onb-body  { animation: lvInSoft .44s cubic-bezier(.22,.61,.36,1) .06s both; }

/* ── Showcase (home view) ── */
.landing-showcase { position: relative; z-index: 1; padding: 30px 24px 10px; }
.landing-showcase-inner { max-width: 1000px; margin: 0 auto; }
.lsc-title { text-align: center; font-size: 30px; font-weight: 700; margin: 0 0 8px; color: #f4f2fb; letter-spacing: -0.01em; }
.lsc-sub { text-align: center; font-size: 15px; color: #cbc5e0; margin: 0 0 42px; }
.lsc-row { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 38px; align-items: center; margin-bottom: 44px; }
.lsc-row .lsc-shot { order: 1; } .lsc-row .lsc-copy { order: 2; }
.lsc-row-rev .lsc-shot { order: 2; } .lsc-row-rev .lsc-copy { order: 1; }
.lsc-shot {
    margin: 0; border-radius: 14px; overflow: hidden; position: relative;
    aspect-ratio: 16 / 10;
    border: 1px solid rgba(139,92,246,0.25); background: rgba(255,255,255,0.03);
    box-shadow: 0 14px 40px rgba(0,0,0,0.35);
}
.lsc-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lsc-shot-ph { display: none; margin: 0; }
.lsc-shot-empty { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.lsc-shot-empty .lsc-shot-ph { display: flex; align-items: center; justify-content: center; font-size: 54px; opacity: 0.5; }
.lsc-copy h3 { font-size: 19px; font-weight: 700; color: #f4f2fb; margin: 0 0 8px; }
.lsc-copy p { font-size: 14px; line-height: 1.6; color: #cbc5e0; margin: 0; }
.lsc-cases { text-align: center; font-size: 14px; color: #b9b2d0; max-width: 760px; margin: 6px auto 0; font-style: italic; }
@media (max-width: 760px) {
    .lsc-row { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
    .lsc-row .lsc-shot, .lsc-row-rev .lsc-shot,
    .lsc-row .lsc-copy, .lsc-row-rev .lsc-copy { order: initial; }
}

/* ── Top bar (brand + language picker) ── */
.landing-top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 22px 32px;
}
/* Brand stacked vertically: logo on top, "skorpene" centered below it
   (matching the reference mockup). */
.landing-brand {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.landing-logo {
    /* Scorpion-S logo. Same display box for both the <img> and the SVG
       fallback so the layout doesn't jump when only one of them is visible. */
    width: 64px; height: 64px; display: block; object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(139,92,246,0.55));
}
/* The brand PNG (logo.png) is purple on a BLACK background (not transparent).
   The JS chroma-key drops that black; mix-blend-mode: screen is the fallback
   if the canvas pass fails. Sized to the PNG's wide aspect (256×184), centered. */
.landing-logo-img {
    width: auto; height: 70px;
    object-fit: contain; object-position: center;
    mix-blend-mode: screen;
}
.landing-name {
    font-size: 22px; font-weight: 400; letter-spacing: 0.02em;
    /* No gradient on the wordmark — the user wants the brand to read flat & clean
       like the reference mockup. */
    color: #f4f2fb; text-align: center; line-height: 1;
}

/* Language picker */
.landing-lang { position: relative; }
.landing-lang-btn {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    color: #f4f2fb; font-family: var(--font); font-size: 13px; font-weight: 500;
    padding: 8px 12px; border-radius: 10px; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.landing-lang-btn:hover { background: rgba(255,255,255,0.10); border-color: rgba(139,92,246,0.45); }
.landing-lang-btn svg { opacity: 0.7; transition: transform .18s; }
.landing-lang-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.landing-lang-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 180px; max-height: 60vh; overflow-y: auto;
    background: rgba(20, 15, 30, 0.96); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
    box-shadow: 0 18px 50px -10px rgba(0,0,0,0.7);
    list-style: none; padding: 6px; margin: 0; z-index: 5;
}
.landing-lang-menu li {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px; cursor: pointer;
    font-size: 13.5px; color: #ece7fa;
    transition: background .12s;
}
.landing-lang-menu li:hover { background: rgba(139,92,246,0.18); }
.landing-lang-menu li.sel { background: rgba(139,92,246,0.30); }
.landing-lang-menu li .ll-flag { font-size: 16px; line-height: 1; }
[dir="rtl"] .landing-lang-menu { right: auto; left: 0; }
.landing-title {
    font-size: clamp(30px, 4.4vw, 50px); font-weight: 700;
    line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 18px;
}
.landing-sub {
    /* Bumped from #b8b2cf to a brighter near-white so it stays clearly legible
       against the deep purple/black background — was washing out. */
    font-size: 16px; line-height: 1.6; color: #ece7fa;
    max-width: 46ch; margin: 0 0 30px;
}
.landing-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.landing-feats li { display: flex; gap: 13px; align-items: flex-start; }
.lf-ic {
    flex: 0 0 38px; height: 38px; width: 38px; border-radius: 10px;
    display: grid; place-items: center; font-size: 18px;
    background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.28);
}
.landing-feats strong { display: block; font-size: 14px; font-weight: 600; }
.landing-feats span:not(.lf-ic) { font-size: 13px; color: #cbc5e0; }
.landing-feats div { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }

/* ── Auth side ── */
.landing-auth { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.auth-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px; padding: 26px 24px;
    box-shadow: 0 24px 60px -24px rgba(0,0,0,0.8), 0 0 0 1px rgba(139,92,246,0.06);
    backdrop-filter: blur(8px);
}
.auth-tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    background: rgba(255,255,255,0.04); border-radius: 11px; padding: 4px; margin-bottom: 22px;
}
.auth-tab {
    border: none; background: transparent; color: #d6d0e8;
    font-family: var(--font); font-size: 13.5px; font-weight: 600;
    padding: 9px 10px; border-radius: 8px; cursor: pointer; transition: all .18s;
}
.auth-tab.active { background: var(--skp-purple); color: #fff; box-shadow: 0 4px 14px -4px rgba(139,92,246,0.7); }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field > span { font-size: 12px; font-weight: 600; color: #cfc8e4; letter-spacing: 0.02em; }
.auth-field input {
    width: 100%; box-sizing: border-box;
    background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px; padding: 12px 13px; color: #f4f2fb;
    font-family: var(--font); font-size: 14.5px; transition: border-color .16s, box-shadow .16s;
}
.auth-field input::placeholder { color: #9089a8; }
.auth-field input:focus {
    outline: none; border-color: var(--skp-purple);
    box-shadow: 0 0 0 3px rgba(139,92,246,0.22);
}
.auth-only-register { display: none; }
.landing[data-mode="register"] .auth-only-register { display: flex; }
.auth-error {
    display: none; font-size: 12.5px; color: #ff8a8a; line-height: 1.4;
    background: rgba(255,80,80,0.08); border: 1px solid rgba(255,80,80,0.25);
    border-radius: 8px; padding: 9px 11px;
}
.auth-error.show { display: block; }
.auth-submit {
    margin-top: 4px; border: none; cursor: pointer;
    background: linear-gradient(180deg, var(--skp-purple), var(--skp-purpledk));
    color: #fff; font-family: var(--font); font-size: 15px; font-weight: 600;
    padding: 13px; border-radius: 11px; transition: transform .12s, box-shadow .18s, opacity .18s;
    box-shadow: 0 10px 26px -10px rgba(139,92,246,0.8);
}
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(139,92,246,0.95); }
.auth-submit:active { transform: translateY(0); }
.auth-submit[disabled] { opacity: 0.6; cursor: default; transform: none; }
.auth-switch { margin: 16px 0 0; text-align: center; font-size: 13px; color: #cbc5e0; }
.auth-link {
    background: none; border: none; cursor: pointer; padding: 0;
    color: var(--skp-purple2); font-family: var(--font); font-size: 13px; font-weight: 600;
}
.auth-link:hover { text-decoration: underline; }
.landing-foot { text-align: center; font-size: 11.5px; color: #a39bbe; margin: 2px 0 0; }

/* ── Pricing section ──
   Sits below the hero/auth on the landing. The user scrolls down to see the
   plan cards. Black + purple, same vibe as the auth card. */
.landing-pricing {
    position: relative;
    z-index: 1;
    padding: 60px 24px 80px;
    border-top: 1px solid rgba(139,92,246,0.12);
}
.landing-pricing-inner {
    max-width: 1000px;
    margin: 0 auto;
}
.lpr-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #f4f2fb;
    letter-spacing: -0.01em;
}
.lpr-sub {
    text-align: center;
    font-size: 15px;
    color: #ece7fa;
    margin: 0 0 40px;
    opacity: 0.85;
}
.lpr-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: stretch;
}
.lpr-cards-3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.lpr-card {
    position: relative;
    background: rgba(16,12,28,0.72);
    border: 1px solid rgba(139,92,246,0.18);
    border-radius: 14px;
    padding: 28px 26px 26px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    transition: border-color .18s, transform .18s, box-shadow .18s;
}
.lpr-card:hover {
    border-color: rgba(139,92,246,0.32);
    transform: translateY(-2px);
}
.lpr-card-pro {
    border-color: var(--skp-purple);
    box-shadow: 0 18px 60px -24px rgba(139,92,246,0.55);
}
.lpr-card-pro:hover {
    border-color: var(--skp-purple2);
    box-shadow: 0 22px 70px -22px rgba(139,92,246,0.75);
}
.lpr-badge {
    position: absolute;
    top: -10px;
    right: 18px;
    background: var(--skp-purple);
    color: #fff;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 6px 18px -6px rgba(139,92,246,0.7);
}
.lpr-card-hdr { display: flex; flex-direction: column; gap: 6px; }
.lpr-plan {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--skp-purple2);
}
.lpr-price { display: flex; align-items: baseline; gap: 4px; }
.lpr-price-amt {
    font-size: 38px;
    font-weight: 700;
    color: #f4f2fb;
    line-height: 1;
}
.lpr-price-period {
    font-size: 14px;
    color: #ece7fa;
    opacity: 0.7;
}
.lpr-tag {
    margin: 6px 0 0;
    font-size: 13px;
    color: #cbc5e0;
}
.lpr-feats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.lpr-feats li {
    font-size: 14px;
    color: #ece7fa;
    padding-left: 22px;
    position: relative;
    line-height: 1.4;
}
.lpr-feats li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--skp-purple2);
    border-bottom: 2px solid var(--skp-purple2);
    transform: rotate(-45deg);
}
.lpr-feats .lpr-feat-off {
    color: #948da9;
    text-decoration: line-through;
    text-decoration-color: rgba(148,141,169,0.4);
}
.lpr-feats .lpr-feat-off::before {
    border-color: rgba(148,141,169,0.45);
    transform: rotate(45deg);
    width: 9px;
    height: 9px;
    border-left: none;
    border-bottom: none;
    top: 5px;
    left: 1px;
}
.lpr-feats .lpr-feat-off::after {
    content: '';
    position: absolute;
    left: 1px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-top: 2px solid rgba(148,141,169,0.55);
    border-bottom: 2px solid rgba(148,141,169,0.55);
    transform: rotate(135deg);
    border-radius: 0;
    border-left: none;
    border-right: none;
}
.lpr-cta {
    border: none;
    border-radius: 10px;
    padding: 13px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: transform .15s, box-shadow .15s, background .15s;
    margin-top: 4px;
}
.lpr-cta-free {
    background: transparent;
    color: #ece7fa;
    border: 1px solid rgba(139,92,246,0.35);
}
.lpr-cta-free:hover {
    background: rgba(139,92,246,0.12);
    border-color: var(--skp-purple);
}
.lpr-cta-pro {
    background: linear-gradient(135deg, var(--skp-purple), var(--skp-purpledk));
    color: #fff;
    box-shadow: 0 10px 24px -8px rgba(139,92,246,0.7);
}
.lpr-cta-pro:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px -10px rgba(139,92,246,0.95);
}
.lpr-cta-pro:active { transform: translateY(0); }
.lpr-card-team {
    border-color: rgba(139,92,246,0.22);
}
.lpr-card-team:hover {
    border-color: rgba(139,92,246,0.38);
}
/* Team CTA: same neutral, outlined look as Free (not the bright Pro gradient). */
.lpr-cta-team {
    background: transparent;
    color: #ece7fa;
    border: 1px solid rgba(139,92,246,0.35);
}
.lpr-cta-team:hover {
    background: rgba(139,92,246,0.12);
    border-color: var(--skp-purple);
}
.lpr-cta-team:active { transform: translateY(0); }
.lpr-cta:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 820px) {
    .landing-inner { grid-template-columns: 1fr; gap: 32px; }
    .landing-hero { text-align: center; }
    .landing-brand { justify-content: center; }
    .landing-sub { margin-left: auto; margin-right: auto; }
    .landing-feats { max-width: 420px; margin: 0 auto; text-align: left; }
    .lpr-cards { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .lpr-title { font-size: 26px; }
}