:root {
    --bg: #edf1f6;
    --bg-soft: #f6f8fb;
    --panel: rgba(255, 255, 255, 0.78);
    --panel-strong: rgba(255, 255, 255, 0.92);
    --text: #182230;
    --muted: #5d6a79;
    --line: rgba(89, 105, 129, 0.18);
    --shadow: 0 22px 48px rgba(27, 46, 76, 0.12);
    --brand: #dc4fb7;
    --brand-2: #8d7cff;
    --cloud-0: #eef2f7;
    --cloud-100: #7f8ea6;
    --radar-1: #82d26f;
    --radar-2: #ffd857;
    --radar-3: #f78b45;
    --radar-4: #d84d3f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (min-width: 1280px) {
    html { zoom: 0.9; }
}

@supports not (zoom: 1) {
    @media (min-width: 1280px) {
        html { font-size: 90%; }
        .container { width: min(1242px, calc(100% - 32px)); }
    }
}

body {
    margin: 0;
    position: relative;
    font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(141, 124, 255, 0.10), transparent 34%),
        radial-gradient(circle at top right, rgba(220, 79, 183, 0.08), transparent 28%),
        linear-gradient(180deg, #e8edf4 0%, #f2f5fa 100%);
    overflow-x: hidden;
}
body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}
body::before {
    z-index: 0;
    background:
        radial-gradient(62% 34% at 12% 6%, rgba(88, 255, 204, 0.16), transparent 56%),
        radial-gradient(54% 28% at 78% 8%, rgba(123, 168, 255, 0.14), transparent 58%),
        radial-gradient(58% 30% at 56% 3%, rgba(216, 118, 255, 0.12), transparent 62%),
        linear-gradient(110deg, rgba(91,255,191,0.00) 0%, rgba(91,255,191,0.12) 18%, rgba(122,229,255,0.14) 36%, rgba(208,102,255,0.12) 54%, rgba(208,102,255,0.00) 72%);
    filter: blur(10px);
    opacity: 0.95;
}
body::after {
    z-index: 0;
    inset: -12vh -10vw auto -10vw;
    height: 58vh;
    background:
        radial-gradient(42% 24% at 16% 26%, rgba(61, 255, 176, 0.22), transparent 58%),
        radial-gradient(36% 20% at 50% 16%, rgba(122, 229, 255, 0.18), transparent 60%),
        radial-gradient(42% 22% at 82% 22%, rgba(224, 100, 255, 0.18), transparent 58%),
        linear-gradient(104deg, rgba(55,255,176,0.00) 0%, rgba(55,255,176,0.18) 20%, rgba(116,223,255,0.20) 42%, rgba(214,112,255,0.18) 60%, rgba(214,112,255,0.00) 78%);
    transform: rotate(-4deg);
    filter: blur(30px);
    opacity: 0.88;
    animation: auroraFloat 18s ease-in-out infinite alternate;
}
.topbar, .hero, .page-main { position: relative; z-index: 1; }

@keyframes auroraFloat {
    0% { transform: rotate(-4deg) translate3d(0, 0, 0) scale(1); }
    50% { transform: rotate(-2deg) translate3d(1.5vw, 1vh, 0) scale(1.03); }
    100% { transform: rotate(-6deg) translate3d(-1vw, 1.5vh, 0) scale(1.05); }
}

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

body.theme-night {
    --bg: #0f1622;
    --bg-soft: #151f2d;
    --panel: rgba(22, 31, 45, 0.82);
    --panel-strong: rgba(19, 27, 39, 0.92);
    --text: #edf3fb;
    --muted: #9aa9bb;
    --line: rgba(146, 166, 191, 0.18);
    --shadow: 0 24px 54px rgba(2, 6, 14, 0.45);
}
body.theme-night {
    background:
        radial-gradient(circle at top left, rgba(141, 124, 255, 0.14), transparent 26%),
        radial-gradient(circle at top right, rgba(220, 79, 183, 0.12), transparent 24%),
        linear-gradient(180deg, #0d1420 0%, #121a28 100%);
}
body.theme-night::before {
    background:
        radial-gradient(70% 36% at 10% 8%, rgba(67, 235, 178, 0.34), transparent 52%),
        radial-gradient(58% 28% at 52% 4%, rgba(126, 215, 255, 0.28), transparent 56%),
        radial-gradient(52% 28% at 86% 10%, rgba(208, 96, 255, 0.30), transparent 58%),
        linear-gradient(105deg, rgba(57,255,173,0.00) 0%, rgba(57,255,173,0.24) 18%, rgba(108,216,255,0.26) 38%, rgba(214,98,255,0.24) 58%, rgba(214,98,255,0.00) 78%),
        radial-gradient(circle at 18% 18%, rgba(255,255,255,0.16) 0 1px, transparent 1.5px),
        radial-gradient(circle at 76% 12%, rgba(255,255,255,0.14) 0 1px, transparent 1.5px),
        radial-gradient(circle at 64% 30%, rgba(255,255,255,0.10) 0 1px, transparent 1.5px);
    filter: blur(5px) saturate(125%);
    opacity: 1;
}
body.theme-night::after {
    inset: -10vh -12vw auto -12vw;
    height: 78vh;
    background:
        radial-gradient(46% 26% at 12% 28%, rgba(61, 255, 176, 0.44), transparent 56%),
        radial-gradient(34% 20% at 44% 18%, rgba(122, 229, 255, 0.34), transparent 58%),
        radial-gradient(40% 24% at 82% 24%, rgba(224, 100, 255, 0.38), transparent 56%),
        linear-gradient(108deg, rgba(55,255,176,0.00) 0%, rgba(55,255,176,0.34) 18%, rgba(116,223,255,0.34) 40%, rgba(214,112,255,0.34) 62%, rgba(214,112,255,0.00) 84%);
    filter: blur(22px) saturate(140%);
    opacity: 1;
}
body.theme-night .topbar { background: rgba(14, 21, 32, 0.84); border-bottom-color: rgba(138, 158, 183, 0.12); }
body.theme-night .page-main::before {
    content: "";
    position: fixed;
    inset: 22vh -12vw -8vh -12vw;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(34% 18% at 8% 48%, rgba(77, 255, 180, 0.24), transparent 60%),
        radial-gradient(30% 18% at 32% 56%, rgba(104, 240, 255, 0.18), transparent 62%),
        radial-gradient(34% 18% at 70% 44%, rgba(222, 109, 255, 0.18), transparent 62%),
        linear-gradient(112deg, rgba(58,255,173,0.00) 0%, rgba(58,255,173,0.18) 18%, rgba(118,228,255,0.16) 38%, rgba(221,117,255,0.18) 60%, rgba(221,117,255,0.00) 80%);
    filter: blur(40px) saturate(135%);
    opacity: .88;
}

body.theme-night .button-secondary,
body.theme-night .chip-button,
body.theme-night .mini-pill,
body.theme-night .chip,
body.theme-night .stat-pill,
body.theme-night .metric-item,
body.theme-night .legend-card,
body.theme-night .score-box,
body.theme-night .viz-card,
body.theme-night .map-help-list div,
body.theme-night .region-alert-item,
body.theme-night .kp-meter-note,
body.theme-night .inline-select,
body.theme-night .scenario-select,
body.theme-night .meteor-item,
body.theme-night .meteor-grid div,
body.theme-night .hero-note,
body.theme-night .panel,
body.theme-night .detail-card,
body.theme-night .card-block,
body.theme-night .empty-state,
body.theme-night .note-panel,
body.theme-night .alert-card {
    background: rgba(24, 35, 50, 0.9);
    color: var(--text);
    border-color: rgba(146, 166, 191, 0.15);
}
body.theme-night .hero-note ul,
body.theme-night .lead,
body.theme-night .legend-note,
body.theme-night .section-subtitle,
body.theme-night .brand-copy small,
body.theme-night .main-nav a,
body.theme-night .muted,
body.theme-night .metric-item span,
body.theme-night .kp-caption,
body.theme-night .kp-labels,
body.theme-night .legend-scale { color: var(--muted); }
body.theme-night .map-frame {
    background: linear-gradient(180deg, #202c3d 0%, #162130 100%);
    border-color: rgba(146, 166, 191, 0.14);
}
body.theme-night .region-border { stroke: rgba(188, 205, 225, 0.24); }
body.theme-night .region-border.is-active { stroke: rgba(235, 243, 252, 0.82); }

.container { width: min(1380px, calc(100% - 32px)); margin: 0 auto; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(18px);
    background: rgba(240, 245, 251, 0.78);
    border-bottom: 1px solid rgba(108, 124, 150, 0.14);
}
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 76px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
    width: 16px; height: 40px; border-radius: 999px;
    background: linear-gradient(180deg, var(--brand-2), var(--brand));
    box-shadow: 0 10px 18px rgba(220, 79, 183, 0.24);
}
.brand-copy { display: flex; flex-direction: column; gap: 2px; }
.brand-copy strong { font-size: 1.02rem; }
.brand-copy small { color: var(--muted); }
.main-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.main-nav a { color: var(--muted); font-weight: 600; }
.main-nav a:hover { color: var(--text); }

.button {
    appearance: none; border: 0; cursor: pointer; border-radius: 16px;
    font-weight: 700; padding: 13px 18px; transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.button:hover, .chip-button:hover { transform: translateY(-1px); }
.button:disabled, .chip-button:disabled { opacity: .6; cursor: default; transform: none; }
.button-primary {
    color: #fff;
    background: linear-gradient(135deg, #6f8cff 0%, #c65be8 100%);
    box-shadow: 0 14px 26px rgba(111, 140, 255, 0.25);
}
.button-secondary {
    background: rgba(255,255,255,0.85);
    color: var(--text);
    border: 1px solid var(--line);
}

.hero { padding: 42px 0 12px; }
.hero-grid { display: grid; grid-template-columns: 1.45fr 0.85fr; gap: 24px; align-items: start; }
.eyebrow, .section-kicker {
    margin: 0 0 10px; text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: #6d7a89; font-weight: 800;
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.8rem); margin: 0 0 14px; line-height: 1.03; }
.lead { font-size: 1.08rem; line-height: 1.75; color: #314154; max-width: 940px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.status-line { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--muted); font-weight: 600; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(180deg, #7ae089, #3ac573); box-shadow: 0 0 0 5px rgba(86, 211, 120, 0.15); }
.hero-note, .panel, .card-block, .detail-card {
    background: var(--panel);
    border: 1px solid rgba(255,255,255,0.62);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}
.hero-note {
    border-radius: 28px; padding: 24px 24px 18px;
}
.hero-note h2 { margin-top: 0; }
.hero-note ul { margin: 12px 0 0; padding-left: 18px; color: #334355; line-height: 1.7; }

.page-main { display: grid; gap: 24px; padding-bottom: 44px; }
.panel { border-radius: 30px; padding: 24px; }
.section-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.section-head h2, .section-head h3 { margin: 0; }
.section-subtitle { margin: 8px 0 0; color: var(--muted); line-height: 1.65; }
.wide-head { align-items: center; }
.map-controls-block { display: grid; gap: 10px; justify-items: end; }
.control-group, .meta-list, .chip-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.meta-list { justify-content: flex-end; flex-wrap: nowrap; }
.meta-list .mini-pill { white-space: nowrap; font-variant-numeric: tabular-nums; }
#map-layer-times { min-width: 390px; flex: 0 0 390px; justify-content: center; }
#daylight-transition { min-width: 290px; flex: 0 0 290px; justify-content: center; }
#daylight-badge { display: inline-flex; min-width: 72px; justify-content: center; font-variant-numeric: tabular-nums; }
#daylight-pill { min-width: 0; flex: 0 0 auto; justify-content: center; }
.chip-button {
    padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer;
    background: rgba(255,255,255,0.82); color: var(--text); font-weight: 700;
}
.inline-select { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.82); font-weight: 700; color: var(--text); }
.inline-select span { font-size: .92rem; color: var(--muted); }
.layer-select { appearance: none; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 700; outline: none; min-width: 138px; }
.layer-select option { color: #111827; }
.chip-button-alt { background: rgba(253, 243, 249, 0.95); }
.mini-pill, .chip, .stat-pill {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.85);
    padding: 8px 12px; color: #405063; font-weight: 600;
}
.mini-pill-wide { min-width: 290px; justify-content: center; }

.map-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, .8fr); gap: 24px; align-items: start; }
.map-shell-card { display: grid; gap: 16px; }
.map-top-bar { display: flex; justify-content: flex-start; }
.map-frame {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    border: 1px solid rgba(92, 110, 136, 0.16);
    overflow: hidden;
    background: linear-gradient(180deg, #dce4ed 0%, #cfd8e4 100%);
    padding: 108px 14px 14px;
}
.cz-map { display: block; width: min(100%, 980px); height: auto; max-height: 70vh; margin: 0 auto; }
.map-bg { fill: transparent; }
#satellite-image { opacity: .76; image-rendering: auto; filter: contrast(1.08) brightness(1.02) saturate(0.92); }
#radar-image { opacity: .94; image-rendering: auto; filter: saturate(1.95) contrast(1.7) brightness(1.07); }
.region-fill { fill: #bcc7d6; fill-opacity: .14; transition: fill .2s ease, fill-opacity .2s ease; }
.region-aurora-fill { fill: transparent; opacity: 0; transition: opacity .2s ease, fill .2s ease; }
.region-border { fill: none; stroke: rgba(59, 71, 90, 0.46); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.region-border.is-active { stroke: rgba(32, 42, 56, 0.72); stroke-width: 1.65; }
.region-aurora { fill: none; opacity: 0; transition: opacity .2s ease; vector-effect: non-scaling-stroke; }
.aurora-band { fill: rgba(255, 110, 210, 0.24); opacity: 0; filter: url(#aurora-glow); transition: opacity .2s ease, fill .2s ease; }
.region-hit { fill: transparent; cursor: pointer; }
.region-hit.is-active { fill: transparent; }
.mini-pill strong { font-weight: 800; }

.map-tooltip[hidden] { display: none !important; }
.map-tooltip {
    position: absolute; z-index: 10; min-width: 170px; max-width: 220px;
    background: rgba(19, 27, 38, 0.92); color: #f7faff; border-radius: 16px; padding: 12px 14px;
    box-shadow: 0 18px 32px rgba(11, 15, 23, 0.28); pointer-events: none;
    display: grid; gap: 5px; font-size: .92rem;
}
.map-tooltip strong { font-size: .98rem; }
.moon-phase-panel {
    position: absolute;
    right: 18px;
    top: 18px;
    left: auto;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(260px, calc(100% - 36px));
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(102, 119, 142, 0.14);
    box-shadow: 0 12px 28px rgba(20, 31, 46, 0.14);
    backdrop-filter: blur(12px);
}
.moon-phase-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #f2f4f8 55%, #d4dbe5 100%);
    font-size: 2rem;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(116, 129, 148, 0.18);
}
.moon-phase-copy {
    display: grid;
    gap: 2px;
}
.moon-phase-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--muted);
    font-weight: 800;
}
.moon-phase-copy strong {
    font-size: 1rem;
    line-height: 1.2;
}
.moon-phase-copy small {
    color: var(--muted);
    font-size: .88rem;
}
.moon-phase-copy small + small {
    margin-top: 2px;
    opacity: 0.92;
}

.comet-empty-note[hidden] { display: none !important; }
.comet-empty-note {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 9;
    max-width: min(300px, calc(100% - 36px));
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(21, 31, 46, 0.86);
    border: 1px solid rgba(161, 182, 209, 0.18);
    color: #f5f9ff;
    box-shadow: 0 12px 28px rgba(8, 14, 23, 0.22);
    backdrop-filter: blur(10px);
    font-size: .92rem;
    line-height: 1.45;
}
.comet-layer[hidden] { display: none !important; }
.comet-layer {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}
.comet-marker {
    position: absolute;
    width: 70px;
    height: 70px;
    transform: translate(-50%, -50%);
    border: 0;
    padding: 0;
    background: transparent;
    pointer-events: auto;
    cursor: pointer;
}
.comet-marker::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70px;
    height: 70px;
    transform: translate(-50%, -50%) rotate(var(--tail-rotation, 0deg));
    transform-origin: 50% 50%;
    background: center / contain no-repeat url('comet-marker.svg');
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.32)) drop-shadow(0 0 18px rgba(151,226,255,0.24));
}
.comet-marker::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 62px;
    height: 62px;
    transform: translate(-50%, -50%) rotate(var(--tail-rotation, 0deg));
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.10), rgba(255,255,255,0) 72%);
    pointer-events: none;
}
.comet-marker:hover,
.comet-marker:focus-visible {
    outline: none;
    transform: translate(-50%, -50%) scale(1.08);
}
.comet-marker[data-visibility="eye"]::before {
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.34)) drop-shadow(0 0 16px rgba(255, 210, 245, 0.22));
}
.comet-marker[data-visibility="binocular"]::before {
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.30)) drop-shadow(0 0 16px rgba(176, 214, 255, 0.22));
}
.comet-marker[data-visibility="camera"]::before {
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.32)) drop-shadow(0 0 16px rgba(166, 244, 255, 0.24));
}
.comet-marker[data-visibility="telescope"]::before {
    filter: grayscale(0.02) brightness(0.96) drop-shadow(0 0 10px rgba(210, 220, 255, 0.22));
}
body.theme-night .comet-empty-note {
    background: rgba(17, 25, 38, 0.9);
    border-color: rgba(146, 166, 191, 0.18);
    box-shadow: 0 14px 30px rgba(3, 8, 16, 0.34);
}
@media (max-width: 720px) {
    .comet-empty-note {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
        padding: 10px 12px;
        font-size: .86rem;
    }
}

body.theme-night .moon-phase-panel {
    background: rgba(24, 35, 50, 0.92);
    border-color: rgba(146, 166, 191, 0.16);
    box-shadow: 0 14px 30px rgba(3, 8, 16, 0.34);
}
body.theme-night .moon-phase-icon {
    background: radial-gradient(circle at 35% 35%, #fff7d1 0%, #e8e0b1 52%, #9b946f 100%);
    box-shadow: inset 0 0 0 1px rgba(210, 202, 157, 0.16);
}
@media (max-width: 720px) {
    .map-frame {
        padding-top: 120px;
    }
    .moon-phase-panel {
        min-width: 0;
        width: calc(100% - 24px);
        right: 12px;
        top: 12px;
        padding: 10px 12px;
        gap: 10px;
    }
    .moon-phase-icon {
        width: 44px;
        height: 44px;
        font-size: 1.7rem;
    }
    .moon-phase-copy strong {
        font-size: .94rem;
    }
    .moon-phase-copy small {
        font-size: .82rem;
    }
}

.legend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.legend-card {
    background: rgba(255,255,255,0.78); border: 1px solid rgba(113, 128, 150, 0.16);
    border-radius: 20px; padding: 14px 16px;
}
.legend-label { font-weight: 800; margin-bottom: 10px; }
.legend-bar, .legend-swatch { height: 14px; border-radius: 999px; }
.aurora-bar { background: linear-gradient(90deg, #f7d0ea 0%, #ff8ed8 50%, #ff2aaa 100%); }
.satellite-swatch { background: linear-gradient(90deg, #6f7b8b 0%, #a7b2c1 45%, #eef2f7 100%); }
.radar-swatch { background: linear-gradient(90deg, var(--radar-1) 0%, var(--radar-2) 38%, var(--radar-3) 68%, var(--radar-4) 100%); }
.warning-swatch { background: linear-gradient(90deg, #fde68a 0%, #f59e0b 55%, #dc2626 100%); }
.legend-scale { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: .88rem; }
.legend-note { margin-top: 8px; color: var(--muted); font-size: .9rem; }
.legend-label { line-height: 1.25; }
.legend-label-aurora { white-space: nowrap; font-size: .98rem; }
.kp-alert-banner {
    display: none; align-items: center; gap: 10px; border-radius: 18px; padding: 12px 14px;
    border: 1px solid var(--line); font-weight: 700; line-height: 1.45; margin-bottom: 12px;
}
.kp-alert-banner.is-visible { display: flex; }
.kp-alert-banner.is-camera { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.28); color: #166534; }
.kp-alert-banner.is-watch { background: rgba(249, 115, 22, 0.12); border-color: rgba(249, 115, 22, 0.28); color: #9a3412; }
.kp-alert-banner.is-extreme { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.28); color: #991b1b; }
body.theme-night .kp-alert-banner.is-camera { color: #b7f7ca; background: rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.32); }
body.theme-night .kp-alert-banner.is-watch { color: #ffd1a6; background: rgba(249, 115, 22, 0.18); border-color: rgba(249, 115, 22, 0.32); }
body.theme-night .kp-alert-banner.is-extreme { color: #ffc0c0; background: rgba(239, 68, 68, 0.18); border-color: rgba(239, 68, 68, 0.32); }

.map-extra-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr); gap: 14px; }
.map-alerts-card, .map-help-card { border-radius: 22px; padding: 18px; }
.region-alerts-list { display: grid; gap: 10px; }
.region-alert-item { padding: 14px; border-radius: 16px; background: rgba(245, 248, 252, 0.92); border: 1px solid rgba(102, 119, 142, 0.12); }

#region-alerts-context {
    margin: 6px 0 0;
}
.region-alert-meta { display: grid; gap: 6px; margin: 8px 0 0; color: var(--muted); font-size: .92rem; }
.map-help-list { display: grid; gap: 12px; }
.map-help-list div { padding: 13px 14px; border-radius: 16px; background: rgba(245, 248, 252, 0.92); border: 1px solid rgba(102, 119, 142, 0.12); display: grid; gap: 4px; }
.map-help-list strong { font-size: .95rem; }
.map-help-list span { color: var(--muted); font-size: .92rem; line-height: 1.45; }
.region-warning { fill: none; stroke: transparent; opacity: 0; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }


.detail-panel { display: grid; gap: 18px; }
.detail-card { border-radius: 24px; padding: 18px 18px 16px; }
.primary-detail { background: rgba(255,255,255,0.88); }
.detail-metrics { display: grid; gap: 10px; }
.metric-item {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 12px 14px; border-radius: 18px; background: rgba(240, 244, 249, 0.86); border: 1px solid rgba(104,118,140,.13);
}
.metric-item span { color: var(--muted); flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.metric-item strong { font-size: 1.05rem; white-space: nowrap; flex: 0 0 auto; text-align: right; }
.small-note { font-size: .92rem; }
.muted { color: var(--muted); }

.overall-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.viz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 14px 0 16px; }
.viz-card {
    padding: 16px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,247,251,.92));
    border: 1px solid rgba(98, 116, 142, .12);
}
.viz-head h4 { margin: 0; font-size: 1.08rem; }
.kp-meter { display: grid; gap: 14px; }
.kp-meter-head { display: grid; gap: 4px; }
.kp-number { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; }
.kp-caption { color: var(--muted); font-size: .9rem; }
.kp-subcaption { color: var(--muted); font-size: .84rem; }
.source-note { margin-top: 10px; color: var(--muted); font-size: .83rem; }
.kp-scale {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}
.kp-step {
    height: 18px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    border: 1px solid rgba(99, 114, 135, 0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.kp-step.is-active,
.kp-step.is-partial {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255,255,255,0.22);
}
.kp-labels {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 8px;
    color: #607086;
    font-size: 11px;
    font-weight: 700;
}
.kp-labels span { text-align: center; }
.kp-meter-note {
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(242, 246, 251, 0.95);
    border: 1px solid rgba(103,118,141,.1);
    color: #44556a;
    font-size: .94rem;
}

.hemi-meter { display: grid; gap: 14px; }
.hemi-scale {
    position: relative;
    height: 20px;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(103, 118, 141, 0.10), rgba(103, 118, 141, 0.18));
    border: 1px solid rgba(99, 114, 135, 0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.hemi-bar-fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #57e6a0 0%, #7fc4ff 52%, #df76ff 100%);
    box-shadow: 0 8px 20px rgba(87, 230, 160, 0.20);
    transition: width .25s ease;
}
.hemi-labels {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    color: #607086;
    font-size: 11px;
    font-weight: 700;
}
.hemi-labels span { text-align: center; }
.hemi-meta-row .chip { flex: 1 1 0; justify-content: space-between; }
body.theme-night .hemi-scale {
    background: linear-gradient(90deg, rgba(115, 132, 157, 0.16), rgba(115, 132, 157, 0.28));
    border-color: rgba(146, 166, 191, 0.16);
}
.score-box {
    padding: 16px; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(243,246,250,.92));
    border: 1px solid rgba(98, 116, 142, .12); display: grid; gap: 7px;
}
.score-box span { color: var(--muted); }
.score-box strong { font-size: clamp(1.4rem, 3.5vw, 2rem); }
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }

.state-badge {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 12px; border-radius: 999px; font-weight: 800; background: #eef2f7; border: 1px solid var(--line);
}
.state-high { background: rgba(235, 255, 240, 0.95); color: #1d7a44; }
.state-mid { background: rgba(255, 247, 219, 0.95); color: #926511; }
.state-low { background: rgba(246, 238, 246, 0.96); color: #8a4d7c; }

.split-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.card-block { border-radius: 26px; padding: 22px; }
.alerts-list { display: grid; gap: 12px; }
.alert-card {
    padding: 16px; border-radius: 18px; background: rgba(245, 248, 252, 0.92); border: 1px solid rgba(102, 119, 142, 0.12);
}
.alert-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 10px; }
.severity-tag {
    display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 10px; font-size: .86rem; font-weight: 800;
}
.severity-high { background: rgba(255, 229, 229, .95); color: #b33a3a; }
.severity-mid { background: rgba(255, 245, 214, .95); color: #9c6d08; }
.severity-low { background: rgba(240, 243, 249, .95); color: #677487; }
.empty-state, .note-panel {
    padding: 18px; border-radius: 18px; background: rgba(245, 248, 252, 0.9); border: 1px dashed rgba(101,117,140,.24);
}

.meteor-list { display: grid; gap: 14px; }
.meteor-item {
    border-radius: 22px; overflow: hidden; background: rgba(255,255,255,0.86); border: 1px solid rgba(102,118,140,0.14);
}
.meteor-item summary {
    list-style: none; cursor: pointer; padding: 18px 20px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 1rem;
}
.meteor-item summary::-webkit-details-marker { display: none; }
.meteor-item summary span { display: flex; flex-direction: column; gap: 4px; }
.meteor-item summary small { color: var(--muted); font-size: .86rem; }
.meteor-zhr {
    display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px;
    background: rgba(242, 230, 247, 0.95); color: #8b3e8a; font-weight: 800;
}
.meteor-body { padding: 0 20px 18px; }
.meteor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.meteor-grid div {
    padding: 13px 14px; border-radius: 16px; background: rgba(242, 246, 251, 0.9); border: 1px solid rgba(103,118,141,.1); display: grid; gap: 6px;
}
.meteor-grid span { color: var(--muted); font-size: .9rem; }


@media (min-width: 980px) {
    .meta-list { flex-wrap: nowrap; }
}
@media (max-width: 1080px) {
    .hero-grid, .map-layout, .split-panel { grid-template-columns: 1fr; }
    .map-controls-block { justify-items: start; }
}
@media (max-width: 760px) {
    .container { width: min(100% - 20px, 1380px); }
    .control-group { display: flex; flex-wrap: wrap; gap: 8px; }
    .chip-button { width: auto; }
    .topbar-inner { flex-wrap: wrap; padding: 10px 0; }
    .main-nav { width: 100%; justify-content: space-between; gap: 10px; }
    .panel, .card-block, .hero-note { padding: 18px; border-radius: 22px; }
    .map-frame { min-height: 320px; padding: 116px 8px 8px; }
    .cz-map { width: 100%; max-height: none; }
    .legend-grid, .stats-grid, .meteor-grid, .overall-grid, .viz-grid, .map-extra-grid, .tonight-timeline { grid-template-columns: 1fr; }
    .alert-top { flex-direction: column; align-items: flex-start; }
}

.toolbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.scenario-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.scenario-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--muted);
}

.scenario-select {
    min-width: 220px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(102, 118, 140, 0.2);
    background: rgba(255, 255, 255, 0.92);
    padding: 0 16px;
    color: var(--text);
    font: inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

.test-mode-banner {
    margin-top: 14px;
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 240, 247, 0.92);
    border: 1px solid rgba(211, 116, 176, 0.22);
    color: #79305e;
}

.test-mode-banner strong {
    font-size: 0.95rem;
}

.test-mode-banner span {
    font-size: 0.92rem;
    line-height: 1.45;
}

@media (max-width: 760px) {
    .toolbar-actions {
        width: 100%;
        justify-content: stretch;
    }

    .scenario-tools {
        width: 100%;
    }

    .scenario-select {
        min-width: 0;
        flex: 1 1 220px;
    }
}

.oval-card .chip-row { margin-top: 4px; }

.test-mode-banner[hidden] { display: none !important; }

body.theme-night .scenario-select {
    background: rgba(24, 35, 50, 0.9);
    color: var(--text);
    border-color: rgba(146, 166, 191, 0.15);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
body.theme-night .inline-select {
    background: rgba(24, 35, 50, 0.9);
    color: var(--text);
    border-color: rgba(146, 166, 191, 0.15);
}
body.theme-night .layer-select {
    color: var(--text);
}
body.theme-night .layer-select option,
body.theme-night .scenario-select option {
    color: #eef3fb;
    background: #182332;
}
body.theme-night .hero-note,
body.theme-night .panel,
body.theme-night .detail-card,
body.theme-night .card-block,
body.theme-night .meteor-item,
body.theme-night .empty-state,
body.theme-night .note-panel,
body.theme-night .alert-card {
    border-color: rgba(146, 166, 191, 0.12);
}


/* Vylepšená interaktivní sekce meteorických rojů */
.meteor-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .95fr);
    gap: 18px;
    margin-bottom: 18px;
}
.meteor-hero-card,
.meteor-guide-card {
    border-radius: 28px;
    padding: 24px;
    border: 1px solid rgba(102,118,140,0.14);
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,248,252,0.92));
    box-shadow: 0 18px 40px rgba(78, 96, 121, 0.08);
}
.meteor-hero-top { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:10px; }
.meteor-hero-text, .meteor-hero-note { color:#5e6f85; line-height:1.65; }
.meteor-kpi-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0 14px; }
.meteor-overview-foot { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.meteor-guide-card h3 { margin-bottom:14px; }
.meteor-guide-list { display:grid; gap:12px; }
.meteor-guide-list div { padding:14px 16px; border-radius:18px; background:rgba(243,247,251,0.95); border:1px solid rgba(103,118,141,.11); display:grid; gap:6px; }
.meteor-guide-list span { color:#627286; line-height:1.55; }
.meteor-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.meteor-strip-card { padding:16px 18px; border-radius:22px; background:linear-gradient(180deg, rgba(255,255,255,0.94), rgba(243,246,251,0.92)); border:1px solid rgba(102,118,140,0.12); box-shadow:0 10px 25px rgba(78,96,121,0.06); }
.meteor-strip-top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:8px; }
.meteor-strip-card p { margin:0 0 10px; color:#607086; line-height:1.5; }
.meteor-strip-meta { display:flex; flex-wrap:wrap; gap:10px; color:#516175; font-size:.92rem; }
.meteor-strip-score, .meteor-season-chip { display:inline-flex; align-items:center; border-radius:999px; padding:7px 11px; font-size:.82rem; font-weight:800; }
.meteor-high { background:rgba(226, 247, 234, 0.98); color:#23704a; }
.meteor-mid { background:rgba(255, 245, 213, 0.98); color:#9b6b0e; }
.meteor-low { background:rgba(245, 236, 246, 0.98); color:#8b4f8e; }
.meteor-list { display:grid; gap:16px; }
.meteor-item { border-radius:26px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,248,252,0.93)); border:1px solid rgba(102,118,140,0.14); box-shadow:0 14px 36px rgba(78,96,121,0.07); }
.meteor-item summary { list-style:none; cursor:pointer; padding:20px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:1rem; }
.meteor-item[open] summary { border-bottom:1px solid rgba(102,118,140,0.1); background:linear-gradient(180deg, rgba(251,253,255,0.95), rgba(244,248,252,0.92)); }
.meteor-item summary::-webkit-details-marker { display:none; }
.meteor-summary-main { display:flex; flex-direction:column; gap:5px; }
.meteor-summary-main small { color:var(--muted); font-size:.88rem; }
.meteor-summary-side { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
.meteor-zhr { display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; background:rgba(242, 230, 247, 0.95); color:#8b3e8a; font-weight:800; }
.meteor-body { padding:22px; }
.meteor-content-grid { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(290px, .9fr); gap:18px; }
.meteor-main-copy { display:grid; gap:14px; }
.meteor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.meteor-grid div { padding:14px 15px; border-radius:18px; background:rgba(242,246,251,0.92); border:1px solid rgba(103,118,141,.1); display:grid; gap:6px; }
.meteor-grid span { color:var(--muted); font-size:.9rem; }
.meteor-tags { display:flex; flex-wrap:wrap; gap:8px; }
.meteor-tag { display:inline-flex; align-items:center; padding:7px 11px; border-radius:999px; background:rgba(241,245,249,.98); border:1px solid rgba(103,118,141,.12); color:#55667b; font-size:.88rem; font-weight:700; }
.meteor-tipline { margin:0; color:#5e6f85; line-height:1.65; }
.meteor-visual-card { display:grid; gap:12px; }
.meteor-mini-kpi { padding:16px; border-radius:20px; border:1px solid rgba(103,118,141,.12); display:grid; gap:6px; background:rgba(248,250,252,0.94); }
.meteor-mini-kpi span, .meteor-mini-kpi small { color:#627286; }
.meteor-mini-kpi strong { font-size:1.12rem; }
.meteor-sky-card { padding:16px; border-radius:20px; background:linear-gradient(180deg, rgba(13,24,43,.94), rgba(28,43,67,.96)); color:#eef4fb; border:1px solid rgba(104,119,141,0.12); }
.sky-title { font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(235,243,255,0.78); margin-bottom:10px; }
.sky-compass { position:relative; height:170px; border-radius:999px; border:1px solid rgba(255,255,255,0.15); background:radial-gradient(circle at center, rgba(194,153,255,0.16), rgba(20,31,50,0.28) 55%, rgba(9,17,31,0.9)); overflow:hidden; margin-bottom:10px; }
.sky-compass::before, .sky-compass::after { content:''; position:absolute; background:rgba(255,255,255,0.08); }
.sky-compass::before { left:50%; top:18px; bottom:18px; width:1px; transform:translateX(-50%); }
.sky-compass::after { top:50%; left:18px; right:18px; height:1px; transform:translateY(-50%); }
.sky-north, .sky-east, .sky-south, .sky-west { position:absolute; font-weight:800; color:rgba(246,250,255,0.82); font-size:.9rem; }
.sky-north { top:12px; left:50%; transform:translateX(-50%); }
.sky-east { right:12px; top:50%; transform:translateY(-50%); }
.sky-south { bottom:12px; left:50%; transform:translateX(-50%); }
.sky-west { left:12px; top:50%; transform:translateY(-50%); }
.sky-core { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); padding:8px 10px; border-radius:999px; background:rgba(255,255,255,0.12); font-size:.8rem; font-weight:700; }
.sky-dot { position:absolute; width:18px; height:18px; border-radius:999px; background:radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95), rgba(255,138,245,0.96) 55%, rgba(184,88,255,0.98)); box-shadow:0 0 18px rgba(227, 154, 255, 0.72); left:50%; top:50%; transform:translate(-50%, -50%); }
.dir-n .sky-dot { left:50%; top:22%; }
.dir-ne .sky-dot { left:72%; top:28%; }
.dir-e .sky-dot { left:80%; top:50%; }
.dir-se .sky-dot { left:72%; top:72%; }
.dir-s .sky-dot { left:50%; top:80%; }
.dir-sw .sky-dot { left:28%; top:72%; }
.dir-w .sky-dot { left:20%; top:50%; }
.dir-nw .sky-dot { left:28%; top:28%; }
.meteor-sky-card p { margin:0; color:rgba(239,245,255,0.82); line-height:1.55; font-size:.92rem; }
.meteor-monthbar { padding:14px 16px; border-radius:20px; background:rgba(244,248,252,0.96); border:1px solid rgba(103,118,141,.11); }
.monthbar-label { color:#637287; font-size:.85rem; margin-bottom:10px; }
.monthbar-track { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px; }
.month-cell { display:flex; align-items:center; justify-content:center; min-height:32px; border-radius:12px; background:rgba(233,239,247,0.95); color:#607086; font-size:.74rem; font-weight:800; }
.month-cell.active { background:linear-gradient(135deg, rgba(255, 166, 244, 0.92), rgba(157, 95, 255, 0.95)); color:#fff; box-shadow:0 8px 18px rgba(174, 108, 255, 0.22); }
body.theme-night .meteor-hero-card,
body.theme-night .meteor-guide-card,
body.theme-night .meteor-strip-card,
body.theme-night .meteor-item,
body.theme-night .meteor-grid div,
body.theme-night .meteor-mini-kpi,
body.theme-night .meteor-monthbar {
    background: rgba(24, 35, 50, 0.9);
    color: var(--text);
    border-color: rgba(146, 166, 191, 0.15);
}
body.theme-night .meteor-guide-list div,
body.theme-night .meteor-tag,
body.theme-night .month-cell {
    background: rgba(31, 44, 62, 0.92);
    color: var(--text);
    border-color: rgba(146, 166, 191, 0.15);
}
body.theme-night .meteor-strip-card p,
body.theme-night .meteor-hero-text,
body.theme-night .meteor-hero-note,
body.theme-night .meteor-guide-list span,
body.theme-night .meteor-tipline,
body.theme-night .monthbar-label,
body.theme-night .meteor-strip-meta {
    color: var(--muted);
}
body.theme-night .meteor-item[open] summary {
    background: rgba(20, 31, 46, 0.92);
}
@media (max-width: 1080px) {
    .meteor-overview-grid, .meteor-content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .meteor-grid, .meteor-kpi-grid, .meteor-strip { grid-template-columns: 1fr; }
}

/* Mobilní a chytré zařízení: samostatné rozložení oproti desktopu */
@media (max-width: 980px) {
    html { zoom: 1 !important; }

    .container {
        width: min(100% - 20px, 1380px);
    }

    .topbar-inner {
        min-height: auto;
        padding: 12px 0;
        gap: 12px;
        align-items: stretch;
    }

    .brand {
        align-items: flex-start;
    }

    .brand-copy strong {
        font-size: 1rem;
        line-height: 1.2;
    }

    .brand-copy small {
        font-size: 0.84rem;
        line-height: 1.35;
    }

    .main-nav {
        width: 100%;
        order: 3;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .main-nav::-webkit-scrollbar {
        display: none;
    }

    .main-nav a {
        white-space: nowrap;
        padding: 9px 12px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.8);
    }

    body.theme-night .main-nav a {
        background: rgba(24, 35, 50, 0.9);
        border-color: rgba(146, 166, 191, 0.15);
    }

    .toolbar-actions {
        width: 100%;
        order: 4;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .scenario-tools {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: stretch;
    }

    .scenario-label {
        display: block;
    }

    .scenario-select,
    #scenario-live,
    #refresh-dashboard,
    .toolbar-actions .button {
        width: 100%;
        min-width: 0;
    }

    .hero {
        padding: 22px 0 10px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .hero h1 {
        font-size: clamp(2rem, 9vw, 3rem);
        line-height: 1.06;
        margin-bottom: 12px;
    }

    .lead {
        font-size: 1rem;
        line-height: 1.6;
        max-width: none;
    }

    .hero-note {
        padding: 20px;
        border-radius: 24px;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .hero-actions .button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .panel,
    .card-block,
    .detail-card {
        padding: 18px;
        border-radius: 24px;
    }

    .section-head,
    .wide-head {
        display: grid;
        gap: 14px;
        align-items: start;
    }

    .map-controls-block {
        width: 100%;
        justify-items: start;
        gap: 12px;
    }

    .control-group {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .inline-select {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: space-between;
    }

    .chip-button,
    .chip-button-alt {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .meta-list {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        justify-content: stretch;
    }

    #map-layer-times,
    #daylight-transition,
    #daylight-pill,
    .mini-pill-wide,
    .meta-list .mini-pill {
        width: 100%;
        min-width: 0;
        flex: 0 0 auto;
        justify-content: center;
    }

    .map-frame {
        min-height: 360px;
        padding: 100px 10px 10px;
    }

    .cz-map {
        width: 100%;
        max-height: none;
    }

    .moon-phase-panel {
        right: 12px;
        top: 12px;
        width: min(250px, calc(100% - 24px));
        padding: 10px 12px;
    }

    .legend-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .map-layout,
    .map-extra-grid,
    .split-panel,
    .meteor-overview-grid,
    .meteor-content-grid {
        grid-template-columns: 1fr;
    }

    .overall-grid,
    .viz-grid,
    .stats-grid,
    .meteor-kpi-grid,
    .meteor-strip,
    .meteor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detail-panel {
        gap: 14px;
    }

    .metric-item {
        padding: 11px 13px;
    }

    .metric-item strong {
        font-size: 1rem;
    }
}

@media (max-width: 640px) {
    .container {
        width: min(100% - 16px, 1380px);
    }

    .topbar-inner {
        padding: 10px 0;
    }

    .brand-mark {
        width: 14px;
        height: 36px;
    }

    .brand-copy strong {
        font-size: 0.96rem;
    }

    .brand-copy small {
        font-size: 0.8rem;
    }

    .main-nav a {
        padding: 8px 11px;
        font-size: 0.94rem;
    }

    .hero h1 {
        font-size: clamp(1.8rem, 10vw, 2.5rem);
    }

    .hero-actions {
        grid-template-columns: 1fr;
    }

    .status-line {
        font-size: 0.95rem;
    }

    .panel,
    .card-block,
    .detail-card,
    .hero-note {
        padding: 16px;
        border-radius: 22px;
    }

    .section-kicker,
    .eyebrow {
        font-size: 0.72rem;
        letter-spacing: 0.14em;
    }

    .section-head h2,
    .section-head h3 {
        line-height: 1.18;
    }

    .control-group {
        grid-template-columns: 1fr;
    }

    .map-frame {
        min-height: 300px;
        padding: 96px 8px 8px;
        border-radius: 22px;
    }

    .moon-phase-panel {
        width: calc(100% - 16px);
        right: 8px;
        top: 8px;
        padding: 9px 10px;
        gap: 9px;
        border-radius: 16px;
    }

    .moon-phase-icon {
        width: 42px;
        height: 42px;
        font-size: 1.6rem;
    }

    .moon-phase-copy strong {
        font-size: 0.92rem;
    }

    .moon-phase-copy small {
        font-size: 0.8rem;
    }

    .legend-grid,
    .overall-grid,
    .viz-grid,
    .stats-grid,
    .meteor-kpi-grid,
    .meteor-strip,
    .meteor-grid,
    .tonight-timeline {
        grid-template-columns: 1fr;
    }

    .legend-card,
    .score-box,
    .viz-card,
    .meteor-strip-card,
    .meteor-hero-card,
    .meteor-guide-card {
        padding: 14px 15px;
    }

    .meteor-item summary {
        padding: 16px 16px;
        align-items: flex-start;
    }

    .meteor-summary-side {
        width: 100%;
        justify-content: flex-start;
    }

    .meteor-body {
        padding: 16px;
    }

    .meteor-monthbar {
        padding: 12px;
    }

    .monthbar-track {
        gap: 4px;
    }

    .month-cell {
        min-height: 28px;
        font-size: 0.68rem;
    }

    .map-tooltip {
        min-width: 150px;
        max-width: 180px;
        font-size: 0.85rem;
    }
}


.timeline-panel {
    margin-top: 14px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 10%, rgba(92, 220, 176, 0.16), transparent 30%),
        radial-gradient(circle at 85% 20%, rgba(132, 90, 255, 0.20), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.93), rgba(244,248,252,0.92));
}
.timeline-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.10));
    pointer-events: none;
}
.timeline-head { position: relative; z-index: 1; }
.tonight-timeline {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.timeline-item {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 16px;
    min-height: 164px;
    display: grid;
    gap: 12px;
    border: 1px solid rgba(98, 116, 142, 0.14);
    box-shadow: 0 12px 26px rgba(13, 28, 48, 0.10);
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.95), rgba(255,255,255,0.45) 34%, transparent 35%),
        linear-gradient(180deg, rgba(11, 27, 46, 0.95), rgba(17, 40, 64, 0.94));
    color: #eef5ff;
}
.timeline-item::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 72px;
    background: linear-gradient(180deg, transparent, rgba(109, 236, 197, 0.08));
    pointer-events: none;
}
.timeline-item.is-twilight {
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.88), rgba(255,255,255,0.28) 34%, transparent 35%),
        linear-gradient(180deg, rgba(52, 64, 98, 0.96), rgba(34, 52, 84, 0.96));
}
.timeline-item.is-day {
    color: #1f2f46;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.95), rgba(255,255,255,0.55) 34%, transparent 35%),
        linear-gradient(180deg, rgba(226, 239, 252, 0.98), rgba(202, 224, 245, 0.98));
}
.timeline-item-top,
.timeline-scores,
.timeline-meta,
.timeline-bar { position: relative; z-index: 1; }
.timeline-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.timeline-hour {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .02em;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.12);
}
.timeline-item.is-day .timeline-hour {
    background: rgba(255,255,255,0.65);
    border-color: rgba(94, 120, 156, 0.18);
}
.timeline-light {
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: rgba(238,245,255,.82);
}
.timeline-item.is-day .timeline-light { color: #42556d; }
.timeline-scores {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 12px;
    align-items: end;
}
.timeline-score-main,
.timeline-score-side {
    display: grid;
    gap: 4px;
}
.timeline-score-main span,
.timeline-score-side span {
    font-size: .82rem;
    color: rgba(238,245,255,.76);
}
.timeline-item.is-day .timeline-score-main span,
.timeline-item.is-day .timeline-score-side span { color: #51657f; }
.timeline-score-main strong { font-size: 1.7rem; line-height: 1; }
.timeline-score-side strong { font-size: 1.18rem; line-height: 1; }
.timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: .84rem;
    color: rgba(238,245,255,.82);
}
.timeline-meta strong { color: inherit; }
.timeline-item.is-day .timeline-meta { color: #42556d; }
.timeline-bar {
    align-self: end;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.08);
}
.timeline-item.is-day .timeline-bar {
    background: rgba(94, 120, 156, 0.12);
    border-color: rgba(94, 120, 156, 0.10);
}
.timeline-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7dd3fc, #7c3aed 55%, #ec4899);
    box-shadow: 0 0 18px rgba(236, 72, 153, 0.25);
}
body.theme-night .timeline-panel {
    background:
        radial-gradient(circle at 10% 10%, rgba(73, 225, 174, 0.18), transparent 30%),
        radial-gradient(circle at 86% 24%, rgba(152, 92, 255, 0.24), transparent 34%),
        linear-gradient(180deg, rgba(14, 23, 38, 0.98), rgba(10, 18, 31, 0.97));
    border-color: rgba(146, 166, 191, 0.12);
}
body.theme-night .timeline-panel::before {
    background: linear-gradient(115deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01) 40%, rgba(255,255,255,0.04));
}
body.theme-night .timeline-item {
    border-color: rgba(146, 166, 191, 0.12);
    box-shadow: 0 14px 30px rgba(2, 8, 18, 0.34);
}
body.theme-night .timeline-item.is-day {
    color: #16304b;
}


.hemi-panel {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,247,251,.93)),
        radial-gradient(circle at top right, rgba(210,116,255,0.10), transparent 42%);
}
.hemi-panel::before {
    content: "";
    position: absolute;
    inset: -18% -10% auto -10%;
    height: 52%;
    pointer-events: none;
    background:
        radial-gradient(38% 30% at 18% 34%, rgba(76, 236, 166, 0.16), transparent 62%),
        radial-gradient(28% 22% at 52% 20%, rgba(122, 219, 255, 0.14), transparent 60%),
        radial-gradient(34% 24% at 82% 28%, rgba(221, 115, 255, 0.15), transparent 60%);
    filter: blur(18px);
    opacity: .95;
}
.hemi-panel .section-head,
.hemi-panel .hemi-meter { position: relative; z-index: 1; }
.hemi-meter-large { gap: 16px; }
.hemi-scale-large { height: 24px; }
.hemi-meta-row-large .chip { flex: 1 1 calc(50% - 8px); }
body.theme-night .hemi-panel {
    background:
        linear-gradient(180deg, rgba(21,31,46,.92), rgba(15,24,36,.94)),
        radial-gradient(circle at top right, rgba(210,116,255,0.16), transparent 42%);
    border-color: rgba(146, 166, 191, 0.16);
}
body.theme-night .hemi-panel::before {
    background:
        radial-gradient(40% 28% at 16% 32%, rgba(76, 236, 166, 0.24), transparent 60%),
        radial-gradient(30% 22% at 50% 18%, rgba(122, 219, 255, 0.22), transparent 58%),
        radial-gradient(36% 22% at 84% 26%, rgba(221, 115, 255, 0.22), transparent 58%);
}
@media (max-width: 1024px) {
    .tonight-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .tonight-timeline { grid-template-columns: 1fr; }
    .hemi-meta-row-large .chip { flex-basis: 100%; }
}

@media (min-width: 1120px) {
    .topbar-inner {
        display: grid;
        grid-template-columns: minmax(240px, auto) minmax(0, 1fr) auto;
        align-items: center;
    }

    .main-nav {
        justify-content: center;
        flex-wrap: nowrap;
        min-width: 0;
    }

    .main-nav a {
        white-space: nowrap;
    }

    .toolbar-actions {
        justify-content: flex-end;
    }
}

body.theme-twilight {
    --bg: #1c2432;
    --bg-soft: #202a39;
    --panel: rgba(27, 36, 52, 0.84);
    --panel-strong: rgba(22, 29, 43, 0.92);
    --text: #eef4fb;
    --muted: #a7b6c8;
    --line: rgba(151, 168, 189, 0.18);
    --shadow: 0 22px 48px rgba(10, 16, 25, 0.34);
    background:
        radial-gradient(circle at top left, rgba(237, 170, 112, 0.14), transparent 24%),
        radial-gradient(circle at top right, rgba(162, 124, 255, 0.16), transparent 28%),
        linear-gradient(180deg, #1f2734 0%, #1a2130 100%);
}

body.theme-twilight::before {
    background:
        radial-gradient(60% 30% at 14% 8%, rgba(255, 164, 97, 0.22), transparent 56%),
        radial-gradient(52% 26% at 58% 10%, rgba(116, 223, 255, 0.20), transparent 58%),
        radial-gradient(50% 24% at 84% 14%, rgba(214, 112, 255, 0.22), transparent 58%),
        linear-gradient(105deg, rgba(255, 165, 109, 0.00) 0%, rgba(255, 165, 109, 0.16) 18%, rgba(116,223,255,0.16) 40%, rgba(214,112,255,0.18) 62%, rgba(214,112,255,0.00) 84%);
    opacity: 0.95;
}

body.theme-twilight::after {
    inset: -10vh -12vw auto -12vw;
    height: 72vh;
    background:
        radial-gradient(42% 24% at 14% 28%, rgba(255, 162, 99, 0.26), transparent 56%),
        radial-gradient(34% 20% at 48% 18%, rgba(122, 229, 255, 0.26), transparent 58%),
        radial-gradient(40% 22% at 82% 24%, rgba(224, 100, 255, 0.28), transparent 56%),
        linear-gradient(108deg, rgba(255,165,109,0.00) 0%, rgba(255,165,109,0.20) 18%, rgba(116,223,255,0.24) 40%, rgba(214,112,255,0.24) 62%, rgba(214,112,255,0.00) 84%);
    filter: blur(24px) saturate(128%);
    opacity: 0.95;
}

body.theme-twilight .topbar,
body.theme-twilight .panel,
body.theme-twilight .detail-card,
body.theme-twilight .card-block,
body.theme-twilight .hero-note,
body.theme-twilight .button-secondary,
body.theme-twilight .chip-button,
body.theme-twilight .mini-pill,
body.theme-twilight .metric-item,
body.theme-twilight .field input,
body.theme-twilight .field textarea,
body.theme-twilight .gallery-card-modern,
body.theme-twilight .gallery-upload-card,
body.theme-twilight .gallery-public-card,
body.theme-twilight .gallery-lightbox-dialog,
body.theme-twilight .admin-modal-card,
body.theme-twilight .gallery-comment-item,
body.theme-twilight .gallery-admin-card,
body.theme-twilight .gallery-comment-admin-card {
    background: rgba(22, 31, 45, 0.84);
    color: var(--text);
    border-color: rgba(146, 166, 191, 0.18);
}

body.theme-twilight .main-nav a {
    background: rgba(24, 35, 50, 0.9);
    border-color: rgba(146, 166, 191, 0.15);
}

.hero-gallery { padding-bottom: 14px; }
.hero-grid-single { grid-template-columns: 1fr; }
.page-main-gallery { padding-top: 8px; }
.gallery-top-pills { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.toolbar-actions-gallery-page { align-items: center; gap: 12px; }
.hero-actions-gallery { margin-top: 22px; }
.status-line-gallery { margin-top: 18px; }
.gallery-panel-page { padding: 24px; }
.gallery-page-grid { display: grid; grid-template-columns: minmax(320px, 0.76fr) minmax(0, 1.24fr); gap: 24px; align-items: start; }
.gallery-upload-card,
.gallery-public-card {
    background: var(--panel-strong);
    border: 1px solid var(--line);
    border-radius: 28px;
    box-shadow: var(--shadow);
    padding: 22px;
}
.gallery-form { display: grid; gap: 16px; }
.field { display: grid; gap: 8px; }
.field span { font-weight: 700; }
.field input,
.field textarea {
    width: 100%;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.72);
    color: var(--text);
    padding: 14px 16px;
    font: inherit;
    resize: vertical;
}
body.theme-night .field input,
body.theme-night .field textarea {
    background: rgba(15, 24, 36, 0.78);
}
.field-grid-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-form-foot { display: grid; gap: 12px; align-items: center; }
.form-message {
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.56);
    padding: 12px 14px;
    color: var(--muted);
}
body.theme-night .form-message { background: rgba(22, 31, 45, 0.76); }
.gallery-grid-modern { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gallery-card-modern {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 36px rgba(15, 23, 33, 0.12);
}
.gallery-thumb-button {
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    aspect-ratio: 1.24 / 1;
    overflow: hidden;
}
.gallery-thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .28s ease;
}
.gallery-card-modern:hover .gallery-thumb-image { transform: scale(1.04); }
.gallery-thumb-overlay {
    position: absolute;
    inset: auto 10px 10px 10px;
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(13, 20, 31, 0.12), rgba(13, 20, 31, 0.78));
    color: #f7faff;
    text-align: left;
}
.gallery-thumb-overlay strong { font-size: 1rem; }
.gallery-thumb-overlay small { color: rgba(247,250,255,0.82); }
.gallery-card-copy { display: grid; gap: 10px; padding: 14px 16px 16px; }
.gallery-card-copy h4 { margin: 0; font-size: 1.02rem; }
.gallery-card-copy p { margin: 0; color: var(--muted); line-height: 1.5; min-height: 3em; }
.gallery-card-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 0.92rem; }
.gallery-lightbox[hidden] { display: none !important; }
.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 60;
}
.gallery-lightbox-backdrop,
.admin-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 12, 20, 0.74);
    backdrop-filter: blur(14px);
}
.gallery-lightbox-dialog {
    position: relative;
    z-index: 1;
    width: min(1440px, calc(100% - 34px));
    height: min(88vh, 920px);
    margin: 6vh auto;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    background: var(--panel-strong);
    border: 1px solid var(--line);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 32px 68px rgba(5, 11, 18, 0.36);
}
.gallery-lightbox-media-wrap {
    position: relative;
    background: linear-gradient(180deg, rgba(6,12,20,0.92), rgba(15,21,32,0.88));
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.gallery-lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.gallery-lightbox-side {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
}
.gallery-lightbox-meta,
.gallery-comments-block { padding: 22px; }
.gallery-lightbox-description { color: var(--muted); line-height: 1.62; margin: 0 0 14px; }
.gallery-meta-list { display: flex; gap: 10px; flex-wrap: wrap; }
.gallery-comments-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.gallery-comments-list { display: grid; gap: 12px; max-height: 300px; overflow: auto; padding-right: 4px; margin-bottom: 14px; }
.gallery-comment-item,
.gallery-comment-admin-card,
.gallery-admin-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,0.52);
    padding: 14px;
}
body.theme-night .gallery-comment-item,
body.theme-night .gallery-comment-admin-card,
body.theme-night .gallery-admin-card,
body.theme-night .gallery-upload-card,
body.theme-night .gallery-public-card,
body.theme-night .gallery-card-modern,
body.theme-night .gallery-lightbox-dialog,
body.theme-night .admin-modal-card {
    background: rgba(18, 27, 39, 0.9);
}
.gallery-comment-top,
.gallery-admin-card-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 8px; }
.gallery-comment-item p { margin: 0; line-height: 1.55; }
.gallery-comment-item small { color: var(--muted); }
.gallery-comment-form { display: grid; gap: 12px; }
.gallery-lightbox-close,
.gallery-lightbox-nav {
    position: absolute;
    z-index: 2;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    color: #fff;
    backdrop-filter: blur(14px);
    box-shadow: 0 14px 32px rgba(10, 16, 24, 0.24);
}
.gallery-lightbox-close { top: 16px; right: 16px; width: 44px; height: 44px; font-size: 1.8rem; }
.gallery-lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2rem; }
.gallery-lightbox-prev { left: 18px; }
.gallery-lightbox-next { right: calc(34% + 18px); }
.admin-modal[hidden] { display: none !important; }
.admin-modal { position: fixed; inset: 0; z-index: 70; }
.admin-modal-card {
    position: relative;
    z-index: 1;
    width: min(1480px, calc(100% - 34px));
    max-height: 90vh;
    margin: 5vh auto;
    background: var(--panel-strong);
    border: 1px solid var(--line);
    border-radius: 28px;
    overflow: auto;
    box-shadow: 0 32px 68px rgba(5, 11, 18, 0.36);
    padding: 22px;
}
.admin-modal-wide { width: min(1540px, calc(100% - 28px)); }
.admin-modal-head,
.gallery-admin-toolbar { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.gallery-admin-sections { display: grid; gap: 20px; margin-top: 18px; }
.gallery-admin-grid,
.gallery-comments-admin-grid { display: grid; gap: 16px; }
.gallery-admin-card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
}
.gallery-admin-card-media { border-radius: 18px; overflow: hidden; min-height: 180px; background: rgba(10, 16, 24, 0.16); }
.gallery-admin-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-admin-card-copy { display: grid; gap: 12px; }
.gallery-admin-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gallery-comment-admin-top { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 12px; }
.gallery-comment-admin-top img { width: 88px; height: 64px; border-radius: 12px; object-fit: cover; }
.empty-state {
    border-radius: 20px;
    border: 1px dashed var(--line);
    padding: 18px 16px;
    color: var(--muted);
    background: rgba(255,255,255,0.38);
}
body.theme-night .empty-state { background: rgba(18, 27, 39, 0.5); }
body.is-lightbox-open,
body.is-admin-open { overflow: hidden; }

@media (max-width: 1180px) {
    .gallery-page-grid { grid-template-columns: 1fr; }
    .gallery-grid-modern { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-lightbox-dialog { grid-template-columns: 1fr; height: min(92vh, 980px); }
    .gallery-lightbox-next { right: 18px; }
    .gallery-lightbox-side { grid-template-rows: auto auto; max-height: 44vh; overflow: auto; }
    .gallery-admin-card { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .toolbar-actions-gallery-page { width: 100%; align-items: stretch; }
    .gallery-top-pills { justify-content: stretch; }
    .gallery-top-pills .mini-pill { width: 100%; justify-content: center; }
    .field-grid-gallery { grid-template-columns: 1fr; }
    .gallery-grid-modern { grid-template-columns: 1fr; }
    .gallery-lightbox-dialog,
    .admin-modal-card { width: min(100% - 16px, 100%); margin: 8px auto; border-radius: 22px; }
    .gallery-lightbox-nav { width: 44px; height: 44px; font-size: 1.65rem; }
    .gallery-lightbox-prev { left: 10px; }
    .gallery-lightbox-next { right: 10px; }
}


/* gallery fixes */
.admin-login-wrap { max-width: 520px; margin: 0 auto; }
.admin-login-form { gap: 12px; }
.admin-login-form .field input { width: 100%; }
.gallery-thumb-image,
.gallery-thumb-overlay { pointer-events: none; }
.gallery-lightbox-side { overflow: auto; }
.gallery-comments-block { display: flex; flex-direction: column; min-height: 0; }
.gallery-comments-list { flex: 1 1 auto; max-height: none; min-height: 0; }
.gallery-comment-form { flex: 0 0 auto; margin-top: 6px; padding-bottom: 6px; }
.gallery-comment-form .gallery-form-foot { position: sticky; bottom: 0; padding-top: 10px; background: inherit; }
@media (max-width: 1180px) {
  .gallery-lightbox-side { max-height: 44vh; overflow: auto; }
}

/* Přidat na konec stávajícího www/assets/styles.css */
.admin-modal-card.admin-modal-login-mode {
    width: min(660px, calc(100% - 56px)) !important;
    max-height: none !important;
    padding: 24px 28px !important;
}

.admin-modal-card.admin-modal-login-mode .admin-login-wrap {
    max-width: 500px !important;
    margin: 16px auto 0 !important;
}

.admin-modal-card.admin-modal-login-mode .admin-login-form {
    gap: 12px !important;
}

.admin-modal-card.admin-modal-login-mode .admin-login-form .field input {
    padding: 11px 14px !important;
}

.admin-modal-card.admin-modal-login-mode .admin-login-form .button {
    width: auto !important;
    min-width: 180px;
}





/* Mobil a smart zařízení: nahoře je samostatný prostor pro Měsíc a severní komety,
   aby nezasahovaly do samotné mapy. Desktop zůstává beze změny. */
@media (max-width: 760px) {
    .map-frame {
        min-height: 412px;
        display: block;
        padding: 176px 8px 8px;
    }

    .cz-map {
        display: block;
        width: 100%;
        max-height: none;
        margin: 0 auto;
    }

    .moon-phase-panel {
        position: absolute !important;
        top: 2px !important;
        right: 8px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: min(212px, calc(100% - 16px));
        padding: 9px 10px;
        gap: 8px;
        border-radius: 16px;
        z-index: 14 !important;
    }

    .moon-phase-icon {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
        flex: 0 0 40px;
    }

    .moon-phase-copy strong {
        font-size: 0.9rem;
    }

    .moon-phase-copy small {
        font-size: 0.78rem;
        line-height: 1.28;
    }

    .comet-empty-note {
        left: 10px;
        right: 10px;
        top: 78px;
        bottom: auto;
        max-width: none;
        z-index: 12;
    }

    .comet-layer {
        z-index: 11;
    }
}

@media (max-width: 520px) {
    .map-frame {
        min-height: 396px;
        padding: 168px 8px 8px;
    }

    .moon-phase-panel {
        width: min(198px, calc(100% - 16px));
        top: 2px !important;
        right: 6px !important;
    }

    .moon-phase-copy {
        gap: 1px;
    }

    .moon-phase-label {
        font-size: 0.68rem;
        letter-spacing: 0.11em;
    }
}


.topbar-controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-left: auto;
}

.topbar-controls .toolbar-actions {
    width: 100%;
}

.topbar-controls .toolbar-actions .button {
    width: 100%;
    min-height: 50px;
    border-radius: 18px;
    justify-content: center;
}

.language-switcher {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: nowrap;
}

.lang-pill {
    min-width: 58px;
    height: 52px;
    padding: 0 18px;
    border-radius: 18px;
    border: 1px solid rgba(108, 124, 150, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text);
    background: rgba(255,255,255,0.82);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.32);
}

.lang-pill.is-active {
    color: #fff;
    border-color: rgba(255,255,255,0.16);
    background: linear-gradient(135deg, #6f8cff 0%, #c65be8 100%);
    box-shadow: 0 14px 26px rgba(111, 140, 255, 0.22);
}

body.theme-night .lang-pill {
    background: rgba(19, 29, 43, 0.92);
    border-color: rgba(146, 166, 191, 0.14);
    color: #eef4fb;
}

body.theme-night .lang-pill.is-active {
    color: #fff;
}

@media (max-width: 760px) {
    .topbar-controls { width: 100%; order: 2; }
    .language-switcher { width: 100%; justify-content: space-between; }
    .lang-pill { flex: 1 1 calc(25% - 8px); min-width: 0; }
    .topbar-controls .toolbar-actions .button { width: 100%; }
}