/* ── Reset & Tokens ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:        #0b0d12;
    --bg-alt:    #0e1018;
    --card:      #13161e;
    --border:    #1c2030;
    --border-hi: #2a2f42;
    --blue:      #2D6DB5;
    --blue-h:    #3A7EC6;
    --blue-lo:   #7FB3E8;
    --blue-dim:  rgba(45,109,181,0.10);
    --amber:     #F0A500;
    --amber-h:   #FFB520;
    --amber-dim: rgba(240,165,0,0.10);
    --pink:      #FF1493;
    --yellow:    #FFE600;
    --red:       #CC2222;
    --green:     #4CAF72;
    --text:      #e8eaf0;
    --text-2:    #8892a4;
    --text-3:    #434a5e;
    --text-dim:  #667086;
    --font:      'Inter', system-ui, sans-serif;
    --r:         8px;
    --r-lg:      14px;
    --planner-nav-h: 58px;
    --planner-panel-w: 204px;
    --planner-left-w: 292px;
    --planner-left-collapsed-w: 0px;
    --planner-status-h: 0px;
}

html { scroll-behavior: smooth; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { display: block; }
a   { color: inherit; }

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav-wrapper {
    position: sticky; top: 0; z-index: 100;
    background: rgba(11,13,18,0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    transition: box-shadow 0.3s;
}
.nav-wrapper.scrolled { box-shadow: 0 2px 30px rgba(0,0,0,0.6); }
.planner-body {
    height: 100vh;
    overflow: hidden;
}
.planner-nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
    height: var(--planner-nav-h);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    background: rgba(9, 12, 18, 0.94);
    box-shadow: 0 12px 36px rgba(0,0,0,0.32);
    pointer-events: auto;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.planner-nav {
    position: relative;
    max-width: none;
    height: var(--planner-nav-h);
    padding: 0 16px;
    gap: 16px;
    align-items: center;
    flex-wrap: nowrap;
    pointer-events: auto;
}
.planner-nav .nav-logo,
.planner-nav .nav-actions {
    pointer-events: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
.planner-nav .nav-logo {
    height: var(--planner-nav-h);
    padding: 0;
}
.planner-nav .nav-actions {
    position: static;
    gap: 8px;
    margin-left: auto;
    padding: 0;
}
.planner-nav .btn {
    height: 34px;
    padding: 0 12px;
}
.planner-action-btn {
    min-width: 58px;
}
.planner-body {
    --planner-panel-w: clamp(284px, 16vw, 308px);
}
.export-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.export-modal[hidden] { display: none; }
.export-modal-backdrop { position: absolute; inset: 0; background: rgba(3,5,9,0.72); backdrop-filter: blur(5px); }
.export-dialog {
    position: relative; width: min(520px, 100%); padding: 30px; border: 1px solid rgba(255,255,255,0.13);
    border-radius: 16px; background: #10141d; box-shadow: 0 28px 80px rgba(0,0,0,0.58); color: var(--text);
    max-height: calc(100vh - 40px); overflow-y: auto;
}
.export-dialog-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: rgba(255,255,255,0.06); color: var(--text-2); font-size: 22px; cursor: pointer; }
.export-dialog-close:hover { background: rgba(255,255,255,0.11); color: var(--text); }
.export-dialog-kicker { margin-bottom: 8px; color: var(--amber); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.export-dialog h2 { margin: 0 38px 8px 0; font-size: 24px; letter-spacing: -.025em; }
.export-dialog > p { margin: 0 0 22px; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.export-destinations { display: grid; gap: 10px; }
.export-destination { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 16px; border: 1px solid rgba(255,255,255,.11); border-radius: 12px; background: rgba(255,255,255,.035); color: var(--text); text-align: left; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.export-destination:hover, .export-destination:focus-visible { border-color: rgba(240,165,0,.56); background: rgba(240,165,0,.07); transform: translateY(-1px); outline: none; }
.export-destination:disabled { cursor: not-allowed; opacity: .42; transform: none; }
.export-destination-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(240,165,0,.12); color: var(--amber); font-size: 22px; }
.export-destination-copy { display: grid; gap: 4px; }
.export-destination-copy strong { font-size: 14px; }
.export-destination-copy small { color: var(--text-dim); font-size: 12px; line-height: 1.4; }
.export-destination-arrow { color: var(--text-dim); font-size: 18px; }
.export-safety-review { margin-bottom: 14px; padding: 14px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; background: rgba(255,255,255,.03); }
.export-safety-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.export-safety-head > strong { font-size: 13px; }
.export-safety-head button { padding: 0; border: 0; background: transparent; color: var(--blue-lo); font: 700 11px var(--font); cursor: pointer; }
.export-safety-head button:hover { color: #fff; }
.export-safety-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin: 0; }
.export-safety-grid div { min-width: 0; padding: 9px 10px; border-radius: 8px; background: rgba(255,255,255,.04); }
.export-safety-grid div.is-risky { border: 1px solid rgba(240,165,0,.42); background: rgba(240,165,0,.08); }
.export-safety-grid div.is-risky dt { color: rgba(255,210,122,.72); }
.export-safety-grid div.is-risky dd { color: #ffd27a; }
.export-safety-grid dt { margin-bottom: 4px; color: var(--text-dim); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.export-safety-grid dd { margin: 0; color: var(--text); font-size: 12px; font-weight: 700; }
.export-safety-warning { margin: 10px 0 0 !important; padding: 9px 10px; border: 1px solid rgba(240,165,0,.35); border-radius: 8px; background: rgba(240,165,0,.08); color: #ffd27a !important; font-size: 11px !important; line-height: 1.4 !important; }
/* Flight-splitting controls in the flight settings panel */
.mp-split-toggle { display: flex; align-items: center; justify-content: space-between; min-height: 24px; gap: 14px; cursor: pointer; }
.mp-split-toggle input {
    appearance: none;
    width: 40px;
    height: 22px;
    margin: 0;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    background: radial-gradient(circle at 10px 50%, #e8edf4 0 7px, transparent 7.5px), rgba(255,255,255,0.09);
    cursor: pointer;
    flex: 0 0 auto;
    order: 2;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}
.mp-split-toggle input:checked {
    border-color: var(--blue-lo);
    background: radial-gradient(circle at 30px 50%, #081018 0 7px, transparent 7.5px), var(--blue-lo);
}
.mp-split-toggle input:focus-visible {
    outline: 2px solid var(--blue-lo);
    outline-offset: 2px;
}
.mp-split-toggle span { font-size: 11px; font-weight: 700; color: #f2f5fa; }
.mp-split-toggle small { display: block; margin-top: 3px; font-weight: 500; color: var(--text-dim); font-size: 10px; line-height: 1.4; text-transform: none; letter-spacing: normal; }
.mp-terrain-follow { margin-top: 4px; padding-left: 14px; }
.mp-split-toggle input:disabled { cursor: default; }
.mp-split-toggle input:disabled + span { opacity: 0.45; }
.mp-split-body { display: grid; gap: 13px; margin-top: 14px; }
.mp-split-body[hidden] { display: none; }
.mp-terrain-section .mp-split-body { gap: 10px; margin-top: 0; }
.mp-split-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mp-split-field input { width: 74px; height: 36px; padding: 0 8px; border: 1px solid var(--border-hi); border-radius: 7px; background: rgba(0,0,0,0.25); color: var(--text); font: 700 13px var(--font); text-align: center; }
.mp-split-summary { margin: 2px 0 0; color: var(--blue-lo); font-size: 11px; font-weight: 700; }
.mp-split-warning { margin: 2px 0 0; padding: 8px 9px; border: 1px solid rgba(240,165,0,0.35); border-radius: 8px; background: rgba(240,165,0,0.08); color: #ffd27a; font-size: 10.5px; line-height: 1.4; }
.mp-split-warning[hidden] { display: none; }
.export-split { margin: 0 0 16px; padding: 12px 13px; border: 1px solid var(--border-hi); border-radius: 10px; background: rgba(255,255,255,0.03); }
.export-split-toggle { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.export-split-toggle input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--blue-lo); flex: 0 0 auto; }
.export-split-toggle strong { display: block; font-size: 12.5px; color: var(--text); }
.export-split-toggle small { display: block; margin-top: 2px; color: var(--text-dim); font-size: 11px; line-height: 1.4; }
.export-split-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.export-split-body[hidden] { display: none; }
.export-split-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--text-2); }
.export-split-field input { width: 88px; height: 32px; padding: 0 10px; border: 1px solid var(--border-hi); border-radius: 7px; background: rgba(0,0,0,0.25); color: var(--text); font: 700 14px var(--font); text-align: center; }
.export-split-summary { margin: 10px 0 0; color: var(--blue-lo); font-size: 12px; font-weight: 700; }
.export-split-warning { margin: 8px 0 0; padding: 9px 10px; border: 1px solid rgba(240,165,0,0.35); border-radius: 8px; background: rgba(240,165,0,0.08); color: #ffd27a; font-size: 11px; line-height: 1.4; }
.export-split-warning[hidden] { display: none; }
.export-safety-confirm { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 18px; color: var(--text-2); font-size: 12px; line-height: 1.45; cursor: pointer; }
.export-safety-confirm input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--amber); flex: 0 0 auto; }
.export-choice-label { margin-bottom: 8px; color: var(--text-dim); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
body.export-modal-open { overflow: hidden; }
@media (max-width: 620px) {
    .export-dialog { padding: 24px 18px 18px; }
    .export-safety-grid { grid-template-columns: 1fr; }
}
.planner-nav .btn:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}
.planner-menu {
    position: relative;
}
.planner-menu-trigger {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: var(--text-2);
    cursor: pointer;
}
.planner-menu-trigger svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.planner-menu-trigger:hover,
.planner-menu.is-open .planner-menu-trigger {
    border-color: rgba(240,165,0,0.42);
    color: var(--text);
}
.planner-menu-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 300;
    width: 188px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    background: rgba(12, 15, 22, 0.98);
    box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}
.planner-menu-popover[hidden] {
    display: none;
}
.planner-menu-item {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(232,234,240,0.84);
    font: 700 12px var(--font);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.planner-menu-item:hover {
    background: rgba(255,255,255,0.07);
    color: var(--text);
}
.planner-menu-form {
    margin: 4px 0 0;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.nav {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 60px;
    flex-wrap: wrap;
}
.nav-logo {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none;
    font-size: 19px; font-weight: 800; letter-spacing: -0.5px;
    flex-shrink: 0;
}
.nav-icon { width: 26px; height: 26px; border-radius: 6px; }
.logo-fly  { color: var(--blue); }
.logo-path { color: var(--amber); }

.nav-links { display: flex; list-style: none; gap: 24px; }
.nav-links a {
    color: var(--text-2); text-decoration: none;
    font-size: 14px; font-weight: 500;
    transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }

.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.nav-toggle {
    display: none; flex-direction: column;
    justify-content: center; gap: 5px;
    background: none; border: none; cursor: pointer;
    padding: 6px 4px; margin-left: auto;
}
.nav-toggle span {
    display: block; width: 22px; height: 2px;
    background: var(--text); border-radius: 2px;
    transition: all 0.25s;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 18px; border-radius: var(--r);
    font-size: 14px; font-weight: 600; font-family: var(--font);
    cursor: pointer; text-decoration: none; border: none;
    transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.12s;
    white-space: nowrap; line-height: 1;
}
.btn:active { transform: scale(0.96); }
.btn-lg     { padding: 13px 28px; font-size: 15px; }

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-h); }

.btn-amber { background: var(--amber); color: #1a1200; }
.btn-amber:hover { background: var(--amber-h); }

.btn-ghost {
    background: transparent; color: var(--text-2);
    border: 1px solid var(--border-hi);
}
.btn-ghost:hover { color: var(--text); border-color: var(--text-3); }

.btn-social {
    width: 100%;
    margin-bottom: 18px;
    background: #fff;
    color: #1f2328;
    border: 1px solid rgba(255,255,255,0.18);
}
.btn-social:hover { background: #f3f4f6; }

/* Amber pulse glow on the primary CTA */
.pulse-amber {
    animation: amberGlow 2.8s ease-in-out infinite;
}
@keyframes amberGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240,165,0,0.5); }
    50%       { box-shadow: 0 0 18px 6px rgba(240,165,0,0); }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
    padding: 96px 0 80px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse 70% 50% at 30% 0%,
        rgba(45,109,181,0.12) 0%, transparent 70%);
}

.hero-inner {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 56px;
    align-items: center;
}
.hero-inner > * { min-width: 0; }
.planner-workspace {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    padding: var(--planner-nav-h) 0 0;
    display: flex;
    align-items: stretch;
    background: var(--bg);
}
.planner-inner {
    display: block;
    width: 100%;
    max-width: none;
    height: calc(100vh - var(--planner-nav-h));
    padding: 0;
}
.planner-inner .hero-visual {
    width: 100%;
    height: calc(100vh - var(--planner-nav-h));
    min-height: calc(100vh - var(--planner-nav-h));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
    transform: none !important;
    transition: none;
    will-change: auto;
}
.planner-inner #mapBg {
    right: var(--planner-panel-w);
    left: var(--planner-left-w);
    transition: right 0.18s ease, left 0.18s ease;
}

/* ── Hero text ───────────────────────────────────────────────────────────── */
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(45,109,181,0.09);
    border: 1px solid rgba(45,109,181,0.25);
    color: var(--blue-lo);
    font-size: 12px; font-weight: 600;
    padding: 5px 14px; border-radius: 100px;
    margin-bottom: 24px;
    animation: fadeDown 0.6s ease both;
}
.badge-dot {
    width: 7px; height: 7px;
    background: var(--amber); border-radius: 50%;
    animation: blink 2.5s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.3; transform: scale(0.7); }
}

.hero-title {
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.5px;
    margin-bottom: 18px;
    animation: fadeDown 0.6s ease 0.1s both;
}

/* Animated gradient on the second line */
.title-gradient {
    background: linear-gradient(90deg,
        var(--blue-lo) 0%, var(--amber) 50%, var(--blue-lo) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 5s linear infinite;
}
@keyframes gradientShift {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.hero-sub {
    font-size: 1.05rem;
    color: var(--text-2);
    line-height: 1.75;
    margin-bottom: 32px;
    max-width: 420px;
    animation: fadeDown 0.6s ease 0.2s both;
}

.hero-ctas {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-bottom: 24px;
    animation: fadeDown 0.6s ease 0.3s both;
}

.hero-proof {
    font-size: 12px;
    color: var(--text-3);
    animation: fadeDown 0.6s ease 0.4s both;
}
.proof-num {
    color: var(--amber);
    font-weight: 700;
}

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: none; }
}

/* ── Hero SVG visualization ──────────────────────────────────────────────── */
.hero-visual {
    position: relative;
    display: flex;
    align-items: stretch;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border-hi);
    box-shadow: 0 0 0 1px rgba(45,109,181,0.08),
                0 24px 64px rgba(0,0,0,0.6);
    animation: fadeUp 0.7s ease 0.2s both;
    transition: transform 0.08s linear;
    will-change: transform;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

/* Satellite map tile background */
#mapBg {
    position: absolute;
    top: 0;
    right: var(--planner-panel-w);
    bottom: 0;
    left: 0;
    z-index: 0;
    background:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
        #0b0d12;
    background-size: 18px 18px, 18px 18px, auto;
}
#mapBg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.24);
    pointer-events: none;
    z-index: 500;
}
.leaflet-control-attribution {
    font-size: 8px !important;
    opacity: 0.4;
    background: transparent !important;
    color: #aaa !important;
}
.leaflet-control-attribution a { color: #aaa !important; }

/* Leaflet core layout fallback. Keeps map tiles positioned if CDN CSS is unavailable. */
#mapBg.leaflet-container {
    overflow: hidden;
    touch-action: none;
}
#mapBg .leaflet-pane,
#mapBg .leaflet-tile,
#mapBg .leaflet-marker-icon,
#mapBg .leaflet-marker-shadow,
#mapBg .leaflet-tile-container,
#mapBg .leaflet-pane > svg,
#mapBg .leaflet-pane > canvas,
#mapBg .leaflet-zoom-box,
#mapBg .leaflet-image-layer,
#mapBg .leaflet-layer {
    position: absolute;
    left: 0;
    top: 0;
}
#mapBg .leaflet-tile {
    user-select: none;
    -webkit-user-drag: none;
}
#mapBg .leaflet-overlay-pane {
    z-index: 560;
}
#mapBg .leaflet-marker-pane {
    z-index: 610;
}
#mapBg .leaflet-control-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
#mapBg .leaflet-control {
    position: relative;
    z-index: 800;
    pointer-events: auto;
}
#mapBg .leaflet-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
}

#missionSvg {
    display: block; flex: 1; min-width: 0; height: auto; position: relative; z-index: 1;
    pointer-events: none;
}
#missionSvg.draw-active { pointer-events: auto; }
#polyHandles { pointer-events: auto; }
.poly-handle { cursor: move; }
.mp-panel   { position: relative; z-index: 1; }
.draw-toolbar { z-index: 20; }

/* Custom map zoom buttons */
.map-zoom-ctrl {
    position: absolute;
    bottom: calc(var(--planner-status-h) + 58px);
    left: calc(var(--planner-left-w) + 12px);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 3px;
    pointer-events: auto;
    transition: left 0.18s ease;
}
.map-zoom-ctrl button {
    width: 28px;
    height: 28px;
    background: rgba(10, 14, 22, 0.82);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: #ccc;
    font-size: 17px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    user-select: none;
}
.map-zoom-ctrl button:hover {
    background: rgba(0, 212, 255, 0.16);
    border-color: rgba(0, 212, 255, 0.45);
    color: #00D4FF;
}
.map-zoom-ctrl button:active {
    background: rgba(0, 212, 255, 0.28);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.map-tools {
    position: absolute;
    left: calc(var(--planner-left-w) + 12px);
    bottom: calc(var(--planner-status-h) + 12px);
    z-index: 3;
    pointer-events: auto;
    transition: left 0.18s ease;
}
.map-tool-buttons {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    background: rgba(9, 12, 18, 0.84);
    box-shadow: 0 10px 24px rgba(0,0,0,0.34);
}
.map-tool-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}
.map-tool-btn svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.map-tool-btn.active,
.map-tool-btn:hover {
    background: var(--amber);
    color: #1a1200;
}
.map-tools-panel {
    position: absolute;
    left: 0;
    bottom: 48px;
    width: min(320px, calc(100vw - var(--planner-left-w) - var(--planner-panel-w) - 24px));
    display: grid;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    background: rgba(9, 12, 18, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 18px 42px rgba(0,0,0,0.42);
}
.map-tools-panel[hidden] {
    display: none;
}

.map-style-panel {
    width: min(240px, calc(100vw - var(--planner-left-w) - var(--planner-panel-w) - 24px));
    gap: 3px;
    padding: 5px;
}
.map-style-options {
    display: grid;
    gap: 3px;
}
.map-style-options .mp-style-select-option.is-selected::after {
    content: "\2713";
    color: var(--amber);
    font-size: 13px;
}
.map-route-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    padding: 8px 9px;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: var(--text-dim);
    font-size: 10.5px;
    line-height: 1.35;
}
.map-route-legend-line {
    width: 22px;
    height: 2px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #ffed00;
}

.map-location-search {
    display: grid;
    gap: 6px;
}
.map-search-panel {
    left: calc(100% + 6px);
    bottom: 0;
    width: min(400px, calc(100vw - var(--planner-left-w) - var(--planner-panel-w) - 24px));
    gap: 0;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
.map-location-row {
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 7px;
    background: rgba(9,12,18,0.95);
    box-shadow: 0 12px 30px rgba(0,0,0,0.34);
}
.map-location-row:focus-within {
    border-color: rgba(240,165,0,0.58);
    box-shadow: 0 0 0 3px rgba(240,165,0,0.12), 0 12px 30px rgba(0,0,0,0.2);
}
.map-location-search input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 13px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font: 500 12px var(--font);
    outline: none;
}
.map-location-search input::placeholder {
    color: rgba(232,234,240,0.55);
}
.map-location-suggestions {
    order: -1;
    max-height: 300px;
    overflow-y: auto;
    margin: 0 0 6px;
    padding: 4px;
    list-style: none;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 8px;
    background: rgba(9,12,18,0.95);
    box-shadow: 0 18px 42px rgba(0,0,0,0.42);
}
.map-location-suggestions[hidden] {
    display: none;
}
.map-location-suggestions [role="option"] {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
}
.map-location-suggestions [role="option"]:hover,
.map-location-suggestions [role="option"][aria-selected="true"] {
    background: rgba(240,165,0,0.18);
    color: var(--amber);
}
.map-location-suggestion-name,
.map-location-suggestion-detail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.map-location-suggestion-name {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
}
.map-location-suggestion-detail {
    color: var(--text-dim);
    font-size: 10.5px;
    line-height: 1.25;
}
.map-location-suggestions [role="option"]:hover .map-location-suggestion-detail,
.map-location-suggestions [role="option"][aria-selected="true"] .map-location-suggestion-detail {
    color: rgba(240,165,0,0.72);
}
.map-location-search.is-loading input {
    opacity: 0.68;
}
.map-location-status {
    order: -1;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 7px;
    background: rgba(9,12,18,0.95);
    color: rgba(136,146,164,0.9);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.map-location-status:empty {
    display: none;
}
.hero-visual.draw-active #mapBg {
    cursor: crosshair;
}
.leaflet-vertex-handle {
    width: 16px;
    height: 16px;
    border: 2px solid #FFE600;
    border-radius: 50%;
    background: rgba(255,20,147,0.9);
    box-shadow: 0 0 0 3px rgba(255,230,0,0.22), 0 4px 14px rgba(0,0,0,0.42);
    cursor: grab;
}
.leaflet-vertex-handle:active {
    cursor: grabbing;
}
/* Midpoint "+" handle — cuts a boundary edge in half; drag to reshape.
   Same pink as the survey boundary, on a dark disc so it stays visible over
   bright imagery; hollow look distinguishes it from the solid vertex handles. */
.leaflet-marker-icon.leaflet-mid-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--pink);
    border-radius: 50%;
    background: rgba(9,12,18,0.82);
    color: var(--pink);
    font: 800 11px/1 var(--font);
    cursor: copy;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.leaflet-mid-handle:hover {
    background: var(--pink);
    color: #fff;
}
.leaflet-mid-handle span {
    transform: translateY(-0.5px);
}
/* Planner waypoint badge — flight-order number centred in the marker.
   Yellow fill with a black number for maximum readability. */
.wp-badge {
    box-sizing: border-box;
    display: block;
    border-radius: 50%;
    background: #ffe600;
    border: 1.5px solid rgba(9,12,18,0.8);
    color: #111;
    font: 800 8.5px var(--font);
    /* Line-height centring works identically for 1- and 2-digit numbers
       (13px ≈ the 12px inner height plus a slight downward optical nudge). */
    line-height: 13px;
    text-align: center;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.45);
    pointer-events: none;
}
.leaflet-boundary-measurement {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    pointer-events: none;
}
.leaflet-boundary-measurement span {
    padding: 3px 6px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 5px;
    background: rgba(12,17,27,0.84);
    color: #f3f7ff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.38);
    font: 700 11px/1 var(--font);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.leaflet-mission-label {
    color: #f3f7ff;
    font: 800 16px/1 var(--font);
    text-align: center;
    text-shadow: 0 2px 5px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.8);
    white-space: nowrap;
}
.leaflet-mission-label.is-start {
    color: #ff3333;
}
.leaflet-mission-label.is-end {
    color: #8fc7ff;
}
.leaflet-drone-marker,
.leaflet-capture-pulse {
    background: transparent;
    border: 0;
}
.leaflet-drone-icon {
    --drone-rot: 0deg;
    position: relative;
    width: 36px;
    height: 34px;
    transform: rotate(var(--drone-rot));
    transform-origin: center;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.62));
}
.leaflet-drone-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.map-drone-shadow { fill: rgba(0,0,0,0.22); transform: translate(-2px, 3px); }
.map-drone-arm { fill: none; stroke: #30383e; stroke-width: 6; stroke-linecap: round; }
.map-drone-rotor { fill: rgba(220,235,245,0.1); stroke: #e1e8ed; stroke-width: 1.5; stroke-dasharray: 5 4; }
.map-drone-propeller {
    fill: none;
    stroke: rgba(255,255,255,0.92);
    stroke-width: 2.3;
    stroke-linecap: round;
    transform-box: view-box;
    transform-origin: var(--rotor-origin);
    animation: rotorSpin 0.34s linear infinite;
}
.map-drone-propeller.reverse { animation-direction: reverse; }
.map-drone-body { fill: #59636b; stroke: #eef4f7; stroke-width: 1.6; }
.leaflet-drone-icon[class*="marker-hi-"] .map-drone-arm { stroke: #16242b; stroke-width: 7; }
.leaflet-drone-icon[class*="marker-hi-"] .map-drone-rotor { stroke: #f7fdff; stroke-width: 2; stroke-dasharray: none; }
.leaflet-drone-icon[class*="marker-hi-"] .map-drone-body { stroke: #fff; stroke-width: 2; }
.leaflet-drone-icon.marker-hi-cyan { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.82)) drop-shadow(0 0 5px rgba(0,212,255,0.65)); }
.leaflet-drone-icon.marker-hi-cyan .map-drone-rotor { fill: rgba(0, 212, 255, 0.28); }
.leaflet-drone-icon.marker-hi-cyan .map-drone-body { fill: #00c6ed; }
.leaflet-drone-icon.marker-hi-cyan .map-drone-detail { fill: #dffaff; }
.leaflet-drone-icon.marker-hi-blue { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.84)) drop-shadow(0 0 5px rgba(36,120,255,0.72)); }
.leaflet-drone-icon.marker-hi-blue .map-drone-rotor { fill: rgba(36, 120, 255, 0.3); }
.leaflet-drone-icon.marker-hi-blue .map-drone-body { fill: #2478ff; }
.leaflet-drone-icon.marker-hi-blue .map-drone-detail { fill: #e2edff; }
.leaflet-drone-icon.marker-hi-pink { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.82)) drop-shadow(0 0 5px rgba(255,20,147,0.72)); }
.leaflet-drone-icon.marker-hi-pink .map-drone-rotor { fill: rgba(255, 20, 147, 0.3); }
.leaflet-drone-icon.marker-hi-pink .map-drone-body { fill: #f40083; }
.leaflet-drone-icon.marker-hi-pink .map-drone-detail { fill: #ffe0f1; }
.leaflet-drone-icon.marker-hi-red { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.84)) drop-shadow(0 0 5px rgba(255,43,61,0.72)); }
.leaflet-drone-icon.marker-hi-red .map-drone-rotor { fill: rgba(255, 43, 61, 0.3); }
.leaflet-drone-icon.marker-hi-red .map-drone-body { fill: #ff2b3d; }
.leaflet-drone-icon.marker-hi-red .map-drone-detail { fill: #ffe5e8; }
.leaflet-drone-icon.marker-hi-lime { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.85)) drop-shadow(0 0 5px rgba(75,255,105,0.62)); }
.leaflet-drone-icon.marker-hi-lime .map-drone-rotor { fill: rgba(75, 255, 105, 0.26); }
.leaflet-drone-icon.marker-hi-lime .map-drone-body { fill: #36e65f; }
.leaflet-drone-icon.marker-hi-lime .map-drone-detail { fill: #e8ffed; }
.leaflet-drone-icon.marker-hi-violet { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.84)) drop-shadow(0 0 5px rgba(154,92,255,0.74)); }
.leaflet-drone-icon.marker-hi-violet .map-drone-rotor { fill: rgba(154, 92, 255, 0.3); }
.leaflet-drone-icon.marker-hi-violet .map-drone-body { fill: #9657f5; }
.leaflet-drone-icon.marker-hi-violet .map-drone-detail { fill: #eee3ff; }
.leaflet-drone-icon.marker-hi-white { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.92)) drop-shadow(0 0 6px rgba(255,255,255,0.72)); }
.leaflet-drone-icon.marker-hi-white .map-drone-arm { stroke: #3b4650; }
.leaflet-drone-icon.marker-hi-white .map-drone-rotor { fill: rgba(255,255,255,0.24); stroke: #fff; }
.leaflet-drone-icon.marker-hi-white .map-drone-body { fill: #f4f7fa; stroke: #53616c; }
.leaflet-drone-icon.marker-hi-white .map-drone-detail { fill: #26343d; }
.homepage-map-drone.marker-hi-white .map-drone-arm { stroke: #3b4650; stroke-width: 7; }
.homepage-map-drone.marker-hi-white .map-drone-rotor { fill: rgba(255,255,255,0.24); stroke: #fff; stroke-width: 2; stroke-dasharray: none; }
.homepage-map-drone.marker-hi-white .map-drone-body { fill: #f4f7fa; stroke: #53616c; stroke-width: 2; }
.homepage-map-drone.marker-hi-white .map-drone-detail { fill: #26343d; }
.leaflet-drone-icon.marker-arrow { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.8)) drop-shadow(0 0 5px rgba(0,212,255,0.7)); }
.leaflet-drone-icon.marker-arrow .map-drone-halo { fill: rgba(4, 20, 29, 0.76); stroke: rgba(124, 231, 255, 0.8); stroke-width: 1.5; }
.leaflet-drone-icon.marker-arrow .map-drone-body { fill: #00d4ff; stroke: #f2fdff; stroke-width: 2; }
.leaflet-drone-icon.marker-arrow .map-drone-detail { fill: #063847; }
.leaflet-capture-pulse span {
    display: block;
    width: 34px;
    height: 34px;
    border: 2px solid rgba(56,200,255,0.9);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(56,200,255,0.55);
    animation: capturePulse 0.9s ease-out forwards;
}
@keyframes rotorSpin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .map-drone-propeller { animation: none; }
}
@keyframes capturePulse {
    0% { opacity: 0.85; transform: scale(0.35); }
    100% { opacity: 0; transform: scale(1.5); }
}

/* Polygon */
.survey-fill {
    fill: rgba(45,109,181,0.06);
    opacity: 0;
    animation: fadeIn 0.6s ease 1.8s both;
}
.survey-border {
    fill: none;
    stroke: var(--pink);
    stroke-width: 1.5;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: drawPath 1.4s ease-out 0.5s both;
}
@keyframes drawPath {
    to { stroke-dashoffset: 0; }
}
@keyframes fadeIn {
    to { opacity: 1; }
}

/* Flight lines */
.fline {
    fill: none;
    stroke: #ffed00;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 1;
    animation: drawPath 0.35s ease-out both;
    animation-delay: var(--d);
}
.fline-casing {
    fill: none;
    stroke: #111827;
    stroke-width: 4.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0.82;
    animation: drawPath 0.35s ease-out both;
    animation-delay: var(--d);
}
.fline-turn {
    stroke-width: 2.2;
}

/* Waypoints */
.wp { opacity: 0; }
.wp-start {
    fill: var(--red);
    animation: popIn 0.3s ease 2.1s both;
}
.wp-end {
    fill: var(--blue);
    animation: popIn 0.3s ease 4.1s both;
}
.wp-mid {
    fill: rgba(255,255,255,0.55);
    stroke: var(--yellow);
    stroke-width: 0.8;
    animation: popIn 0.2s ease 4.0s both;
}
/* Waypoint sequence numbers. White glyph with a dark halo (paint-order) so
   they stay legible over both bright and dark satellite imagery. */
.wp-num {
    fill: #ffffff;
    stroke: rgba(6,9,14,0.85);
    stroke-width: 1.6px;
    paint-order: stroke;
    stroke-linejoin: round;
    font: 800 5px var(--font);
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
    opacity: 0;
    animation: wpNumIn 0.3s ease 4.05s both;
}
@keyframes wpNumIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Terrain-follow waypoints the export adds at peaks/valleys/slope changes —
   small quiet dots so they read as detail, not clutter. */
.terrain-wp {
    fill: #38c8ff;
    stroke: rgba(6,9,14,0.85);
    stroke-width: 1;
}
/* Elevation profile panel — terrain along a user-drawn straight line. */
.elev-profile {
    position: absolute;
    bottom: 14px;
    left: calc((100% + var(--planner-left-w) - var(--planner-panel-w)) / 2);
    transform: translateX(-50%);
    z-index: 12;
    width: min(620px, calc(100% - var(--planner-left-w) - var(--planner-panel-w) - 48px));
    overflow: hidden;
    border: 1px solid rgba(127,179,232,0.22);
    border-radius: 14px;
    background: rgba(8,11,17,0.92);
    box-shadow: 0 14px 34px rgba(0,0,0,0.42);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.elev-profile[hidden] { display: none; }
.elev-profile-head-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 7px 10px 7px 12px;
    border-bottom: 1px solid rgba(127,179,232,0.16);
}
.elev-profile-heading { min-width: 142px; }
.elev-profile-heading > span { display: block; }
.elev-profile-sum {
    margin-top: 3px;
    color: var(--text-dim);
    font: 500 9px var(--font);
}
.elev-profile-title {
    color: var(--blue-lo);
    font: 800 10px var(--font);
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.elev-profile-metrics {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    gap: 16px;
    margin: 0;
}
.elev-profile-metrics div { white-space: nowrap; }
.elev-profile-metrics dt { color: var(--text-dim); font: 600 9px var(--font); }
.elev-profile-metrics dd { margin: 1px 0 0; color: #eef4fb; font: 700 9px var(--font); font-variant-numeric: tabular-nums; }
#elevProfileClose {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--text-dim);
    font: 700 18px/1 var(--font);
    cursor: pointer;
}
#elevProfileClose:hover,
#elevProfileClose:focus-visible { color: #fff; background: rgba(255,255,255,0.08); outline: none; }
.elev-profile-chart { position: relative; padding: 4px 8px 0; }
.elev-profile svg { display: block; width: 100%; height: auto; }
.elev-profile-readout {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 7px;
    border: 1px solid rgba(127,179,232,0.22);
    border-radius: 6px;
    background: rgba(20,27,37,0.96);
    color: #eef4fb;
    font: 600 9px var(--font);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    white-space: nowrap;
}
.elev-profile-hint { margin: 0; padding: 0 8px 6px; color: var(--text-dim); font: 500 8px var(--font); text-align: center; }
.elev-grid { stroke: rgba(127,179,232,0.14); stroke-width: 0.8; }
.elev-terrain { fill: rgba(72,137,201,0.28); }
.elev-terrain-line { stroke: rgba(207,233,255,0.86); stroke-width: 1.4; }
.elev-axis { fill: #7c8698; font: 600 7px var(--font); }
.elev-endpoint-dot { fill: #69b7ff; stroke: rgba(8,11,17,0.92); stroke-width: 1.5; }
.elev-profile .elev-endpoint { fill: #eef4fb; font: 800 7.5px var(--font); }
.elev-cursor { stroke: #69b7ff; stroke-width: 0.9; stroke-dasharray: 3 3; }
.elev-cursor-dot { fill: #69b7ff; stroke: rgba(8,11,17,0.92); stroke-width: 1.5; }
@media (max-width: 1000px) {
    .elev-profile { left: 14px; right: 14px; width: auto; transform: none; }
}
@media (max-width: 600px) {
    .elev-profile-head-row { align-items: flex-start; flex-wrap: wrap; }
    .elev-profile-heading { flex: 1; }
    .elev-profile-metrics { order: 3; width: 100%; justify-content: space-between; gap: 8px; }
    .elev-profile-chart { padding-inline: 5px; }
    .elev-axis { font-size: 10px; }
    .elev-profile .elev-endpoint { font-size: 10px; }
}

/* Ground-elevation labels (m) beside each sampled point — opt-in check aid.
   The amber H part is the planned flight height relative to the start point,
   matching the RC's "H" readout for in-flight verification. */
.terrain-elev .terrain-h { fill: #ffd27a; }
.terrain-elev {
    fill: #cfe9ff;
    stroke: rgba(6,9,14,0.85);
    stroke-width: 1.8px;
    paint-order: stroke;
    stroke-linejoin: round;
    font: 700 6px var(--font);
    pointer-events: none;
}
/* Split boundaries on the flight path — a thin, minimal ring marking where one
   KMZ flight ends and the next begins (they share this exact waypoint). */
.split-ring-bg { fill: none; stroke: rgba(6,9,14,0.55); stroke-width: 3; }
.split-ring { fill: none; stroke: #eef2f8; stroke-width: 1.3; }
.split-label {
    fill: rgba(255,255,255,0.85);
    stroke: rgba(6,9,14,0.8);
    stroke-width: 2;
    paint-order: stroke;
    stroke-linejoin: round;
    font: 700 6.5px var(--font);
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}
@keyframes popIn {
    from { opacity: 0; transform: scale(0); transform-origin: center; }
    60%  { opacity: 1; transform: scale(1.3); }
    to   { opacity: 1; transform: scale(1); }
}

/* Drone (quadcopter group) */
.drone-grp {
    opacity: 0;
    animation: fadeIn 0.3s ease 4.2s both;
}

.drone-shadow { fill: rgba(0,0,0,0.28); transform: translate(-3px, 4px); }
.drone-arm { fill: none; stroke: #2f353b; stroke-width: 5; stroke-linecap: round; }
.drone-rotor { fill: rgba(255,255,255,0.08); stroke: #d7dde2; stroke-width: 1.4; stroke-dasharray: 4 3; }
.drone-body { fill: #555e66; stroke: #e5ebef; stroke-width: 1.5; }
.drone-canopy { fill: #20262b; stroke: #78838c; stroke-width: 1; }
.drone-camera { fill: #111619; stroke: #00d4ff; stroke-width: 1.5; }
.drone-headlight { fill: #fff; }
.drone-tail-light { fill: #ff3b4f; }
.drone-landing-rail { fill: none; stroke: #c3cbd1; stroke-width: 1.5; stroke-linecap: round; }

/* SVG text labels */
.svg-label {
    fill: var(--red);
    font-family: var(--font);
    font-size: 9px;
    font-weight: 700;
    text-anchor: middle;
    opacity: 0;
    animation: fadeIn 0.3s ease 2.3s both;
}
.svg-label-end {
    fill: var(--blue-lo);
    animation-delay: 4.3s;
}
.edge-lbl {
    fill: rgba(255,255,255,0.55);
    font-family: var(--font);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    opacity: 0;
    animation: fadeIn 0.4s ease 2.5s both;
    pointer-events: none;
}

.svg-area-lbl {
    fill: rgba(255,255,255,0.18);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 600;
    text-anchor: middle;
    letter-spacing: 0.3px;
    opacity: 0;
    animation: fadeIn 0.4s ease 2.0s both;
    pointer-events: none;
}

/* Area stat — shares bottom row with front-overlap readout */
.mp-stat-area {
    padding-top: 9px;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 0;
}
.planner-body .mp-stat-area {
    grid-column: 1 / -1;
}
.planner-body .mp-stat-area {
    grid-column: 1 / -1;
}

/* Front-overlap colour coding */
.val-warn { color: #FFB800 !important; }
.val-bad  { color: #FF4444 !important; }

/* Assumption footnote at panel bottom */
.mp-note {
    font-size: 10px;
    color: rgba(160,172,190,0.48);
    padding: 10px 16px 12px;
    margin: 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    line-height: 1.45;
}
.planner-validation {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
}
.planner-validation:hover,
.planner-validation:focus-visible {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    outline: none;
}
.planner-validation:disabled {
    cursor: default;
}
.planner-validation:disabled:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.10);
}
.planner-validation::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.planner-validation.is-ready {
    color: var(--green);
}
.planner-validation.is-ready::before {
    box-shadow: 0 0 0 3px rgba(76,175,114,0.14);
}
.planner-validation.is-warning {
    color: var(--amber);
}
.planner-validation.is-warning::before {
    box-shadow: 0 0 0 3px rgba(240,165,0,0.16);
}
.planner-validation.is-blocked {
    color: #ff7777;
}
.planner-validation.is-blocked::before {
    box-shadow: 0 0 0 3px rgba(204,34,34,0.18);
}
.planner-validation.is-save-error {
    border-color: rgba(255,119,119,0.55);
    background: rgba(116,20,20,0.88);
    color: #fff;
    box-shadow: 0 8px 24px rgba(80,0,0,0.36);
}
.planner-warning-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 80;
    width: min(360px, calc(100vw - 28px));
    transform: translateX(-50%);
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 8px;
    background: rgba(9,12,18,0.94);
    box-shadow: 0 18px 46px rgba(0,0,0,0.44);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.planner-warning-panel[hidden] {
    display: none;
}
.planner-warning-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.planner-warning-head strong {
    color: var(--text);
    font-size: 12px;
}
.planner-warning-head button {
    width: 26px;
    height: 26px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.72);
    cursor: pointer;
}
.planner-warning-panel ul {
    display: grid;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.planner-warning-panel li {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,0.08);
    border-left-color: var(--amber);
    border-radius: 7px;
    background: rgba(255,255,255,0.045);
}
.planner-warning-panel li.is-blocked {
    border-left-color: #ff7777;
}
.planner-warning-panel span {
    color: var(--text);
    font-size: 12px;
    font-weight: 750;
}
.planner-warning-panel small {
    color: rgba(160,172,190,0.76);
    font-size: 11px;
    line-height: 1.35;
}
.planner-empty-hint {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: min(360px, calc(100% - var(--planner-panel-w) - var(--planner-left-w) - 80px));
    display: grid;
    gap: 6px;
    transform: translate(-50%, -50%);
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    background: rgba(9, 12, 18, 0.82);
    box-shadow: 0 18px 42px rgba(0,0,0,0.38);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: none;
}
.planner-empty-hint[hidden] {
    display: none;
}
.planner-empty-hint strong {
    color: var(--text);
    font-size: 15px;
}
.planner-empty-hint span {
    color: var(--text-2);
    font-size: 12px;
    line-height: 1.45;
}

/* ── Stats bar ───────────────────────────────────────────────────────────── */
.ops-mission-rail {
    position: absolute;
    top: 0;
    left: 0;
    bottom: var(--planner-status-h);
    z-index: 6;
    width: var(--planner-left-w);
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,0.08);
    background: rgba(9, 12, 18, 0.96);
    box-shadow: 18px 0 44px rgba(0,0,0,0.26);
    pointer-events: auto;
    transition: width 0.18s ease, box-shadow 0.18s ease;
}

.ops-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}
.ops-panel-head div { display: grid; gap: 3px; min-width: 0; }
.ops-panel-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.ops-panel-title {
    color: #f4f7fb;
    font-size: 17px;
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.ops-panel-head strong { color: var(--text); font-size: 15px; line-height: 1.2; }
.ops-rail-toggle {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 7px;
    background: rgba(255,255,255,0.04);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ops-new-mission-btn {
    margin: 10px 10px 0;
    min-height: 36px;
    border: 1px solid rgba(127,179,232,0.46);
    border-radius: 7px;
    background: rgba(45,109,181,0.13);
    color: #d8eaff;
    font: 700 13px/1 var(--font);
    cursor: pointer;
}
.ops-rail-toggle-label {
    display: none;
    font: 750 12px/1 var(--font);
}
.ops-rail-toggle-icon {
    position: relative;
    width: 16px;
    height: 16px;
    display: none;
    color: var(--amber);
}
.ops-rail-toggle-icon::before {
    content: "";
    position: absolute;
    inset: 2px 0;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    box-shadow: inset 0 4px 0 -2px currentColor, inset 0 -4px 0 -2px currentColor;
}
.ops-new-mission-btn:hover {
    border-color: rgba(127,179,232,0.76);
    background: rgba(45,109,181,0.22);
}
.ops-new-mission-btn:focus-visible,
.ops-select-btn:focus-visible,
.ops-mission-action:focus-visible,
.ops-mission-active-name button:focus-visible,
.ops-mission-delete:focus-visible {
    outline: 2px solid var(--blue-lo);
    outline-offset: 2px;
}
@media (min-width: 701px) {
    /* The first page hugs its content; no stretching to fill tall screens. */
    .landing-first-page {
        display: flex;
        flex-direction: column;
    }
    body:not(.planner-body) .hero {
        padding: 48px 0 32px;
        display: flex;
        align-items: center;
    }
    body:not(.planner-body) .hero-inner {
        width: 100%;
        max-width: 1700px;
        grid-template-columns: 0.95fr 1.75fr;
        gap: 72px;
    }
    body:not(.planner-body) .hero-visual {
        min-height: clamp(480px, 46svh, 600px);
    }
    body:not(.planner-body) .hero-title {
        font-size: clamp(2.4rem, 3.4vw, 3.6rem);
    }
    body:not(.planner-body) .hero-sub {
        max-width: 480px;
        font-size: 1.1rem;
    }
}
@media (min-width: 701px) and (max-width: 1000px) {
    .landing-first-page {
        height: auto;
        overflow: visible;
    }
    body:not(.planner-body) .hero {
        height: auto;
        padding: 64px 0;
    }
    body:not(.planner-body) .hero-inner {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
    }
    body:not(.planner-body) .hero-sub {
        margin-right: auto;
        margin-left: auto;
    }
    body:not(.planner-body) .hero-ctas {
        justify-content: center;
    }
    body:not(.planner-body) .hero-visual {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }
}
.ops-rail-toggle:hover {
    border-color: rgba(240,165,0,0.48);
    color: var(--amber);
}
.ops-rail-toggle {
    background: rgba(14,17,24,0.94);
    color: rgba(232,234,240,0.82);
    box-shadow: none;
}
.ops-collapse-icon {
    width: 9px;
    height: 9px;
    display: block;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 4px;
}
.mission-rail-collapsed .ops-collapse-icon {
    transform: rotate(225deg);
    margin-left: 0;
    margin-right: 4px;
}
@media (min-width: 1001px) {
    .mission-rail-collapsed .ops-mission-rail {
        bottom: auto;
        width: 0;
        height: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .mission-rail-collapsed .ops-mission-rail .ops-panel-head {
        position: absolute;
        top: 16px;
        left: 14px;
        width: auto;
        height: 34px;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .mission-rail-collapsed .ops-mission-rail .ops-panel-head > div:not(.ops-panel-actions),
    .mission-rail-collapsed .ops-mission-rail > :not(.ops-panel-head) {
        display: none;
    }
    .mission-rail-collapsed .ops-panel-actions {
        gap: 0;
    }
    .mission-rail-collapsed .ops-rail-toggle {
        width: auto;
        min-width: 82px;
        height: 34px;
        gap: 7px;
        padding: 0 11px;
        border-color: rgba(255,255,255,0.16);
        border-radius: 8px;
        background: rgba(9, 12, 18, 0.9);
        box-shadow: 0 12px 30px rgba(0,0,0,0.38);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .mission-rail-collapsed .ops-rail-toggle-label {
        display: inline;
    }
    .mission-rail-collapsed .ops-rail-toggle-icon {
        display: inline-block;
    }
    .mission-rail-collapsed .ops-collapse-icon {
        display: none;
    }
    .mission-rail-collapsed .draw-toolbar {
        top: 58px;
        left: 14px;
    }
}
.ops-mission-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(160,172,190,0.46) rgba(255,255,255,0.04);
    scrollbar-width: thin;
    padding: 10px;
}
.ops-mission-list::-webkit-scrollbar {
    width: 8px;
}
.ops-mission-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
}
.ops-mission-list::-webkit-scrollbar-thumb {
    border: 2px solid rgba(9,12,18,0.96);
    border-radius: 999px;
    background: rgba(160,172,190,0.46);
}
.ops-mission-list::-webkit-scrollbar-thumb:hover {
    background: rgba(240,165,0,0.62);
}
.ops-mission-card {
    position: relative;
    display: grid;
    gap: 7px;
    padding: 11px 12px;
    margin-bottom: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.035);
    transition: border-color 0.14s, background 0.14s;
}
/* Delete sits at the far-right of the card's top-right action cluster. The
   rename button (below) is positioned just to its left at the same size and
   top line so the two read as one aligned pair. */
.ops-mission-delete {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.17);
    border-radius: 6px;
    background: rgba(255,255,255,0.065);
    color: rgba(232,238,247,0.78);
    cursor: pointer;
    transition: color 0.14s, border-color 0.14s, background 0.14s, opacity 0.14s;
}
.ops-mission-delete svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ops-mission-delete:hover {
    color: #ff6b6b;
    border-color: rgba(255,107,107,0.5);
    background: rgba(255,107,107,0.12);
}
.ops-mission-delete:disabled {
    opacity: 0.36;
    cursor: default;
}
/* Keep the mission name / rename input clear of the button cluster. */
.ops-mission-card.active .ops-mission-active-name input {
    padding-right: 66px;
}
.ops-mission-card:not(.active) .ops-mission-name,
.ops-mission-card:not(.active) .ops-mission-meta {
    padding-right: 32px;
}
.ops-mission-card-link {
    display: grid;
    gap: 7px;
    color: inherit;
    text-decoration: none;
}
.ops-mission-card:hover,
.ops-mission-card.active {
    border-color: rgba(45,109,181,0.58);
    background: rgba(45,109,181,0.14);
}
.ops-mission-card.active { box-shadow: inset 3px 0 0 var(--blue); }
.ops-mission-active-name {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ops-mission-card:not(.active) .ops-mission-active-name {
    display: none;
}
.ops-mission-card.active .ops-mission-card-link .ops-mission-name {
    display: none;
}
.ops-mission-active-name input {
    min-width: 0;
    height: 28px;
    flex: 1 1 auto;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font: 750 13px var(--font);
    text-overflow: ellipsis;
    outline: none;
}
.ops-mission-active-name input[readonly] {
    cursor: default;
}
.ops-mission-card.is-renaming .ops-mission-active-name input {
    border-color: rgba(127,179,232,0.68);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 0 3px rgba(127,179,232,0.10);
}
.ops-mission-active-name button {
    position: absolute;
    top: 10px;
    right: 46px;
    z-index: 2;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.17);
    border-radius: 6px;
    background: rgba(255,255,255,0.065);
    color: rgba(232,238,247,0.78);
    cursor: pointer;
}
.ops-mission-active-name button:hover,
.ops-mission-card.is-renaming .ops-mission-active-name button {
    border-color: rgba(127,179,232,0.65);
    color: var(--blue-lo);
}
.ops-mission-active-name button svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ops-mission-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 2px;
    padding-top: 9px;
    border-top: 1px solid rgba(255,255,255,0.09);
}
.ops-mission-actions[hidden] { display: none; }
.ops-mission-action {
    width: 100%;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(127,179,232,0.35);
    border-radius: 6px;
    background: rgba(45,109,181,0.10);
    color: var(--text);
    font: 700 11px var(--font);
    cursor: pointer;
}
/* The action's explicit display would otherwise override the [hidden]
   attribute, keeping a gated button (e.g. Export) visible. */
.ops-mission-action[hidden] { display: none; }
.ops-mission-action:hover {
    border-color: rgba(127,179,232,0.68);
    background: rgba(45,109,181,0.19);
    color: #fff;
}
.ops-mission-name {
    color: var(--text);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ops-mission-name small {
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
}
.ops-mission-meta,
.ops-empty span { color: #c3cdd9; font-size: 11px; line-height: 1.35; }
.ops-mission-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.ops-mission-stats span {
    min-width: 0;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: #e1e7ef;
    font-size: 10px;
    font-weight: 700;
}
.ops-empty {
    display: grid;
    gap: 6px;
    margin: 12px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.035);
}
.ops-empty strong { font-size: 13px; }
.ops-map-controls {
    position: absolute;
    top: 16px;
    /* Center within the visible map between the mission rail and settings. */
    left: calc((100% + var(--planner-left-w) - var(--planner-panel-w)) / 2);
    transform: translateX(-50%);
    z-index: 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    background: rgba(14, 17, 24, 0.88);
    box-shadow: 0 14px 34px rgba(0,0,0,0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: auto;
    transition: left 0.18s ease, top 0.18s ease;
}
.ops-map-controls[hidden] {
    display: none;
}
.ops-map-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    transition: background 0.12s, opacity 0.12s, transform 0.1s;
}
.ops-map-btn:hover {
    background: rgba(255,255,255,0.10);
}
.ops-map-btn:active {
    transform: scale(0.92);
}
.ops-map-btn:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}
.ops-map-btn-play span {
    width: 0;
    height: 0;
    margin-left: 2px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid #6cc36c;
}
.ops-map-btn-pause {
    gap: 4px;
}
.ops-map-btn-pause span {
    width: 4px;
    height: 14px;
    background: #7fb3ff;
}
.ops-map-btn-stop span {
    width: 12px;
    height: 12px;
    background: #df6a6a;
}
.ops-map-btn.is-active {
    background: rgba(255,255,255,0.13);
}
.simulation-off .leaflet-drone-marker,
.simulation-off .leaflet-capture-pulse,
.simulation-off .leaflet-capture-footprint {
    display: none !important;
}

.stats-bar {
    min-height: 80px;
    flex-shrink: 0;
    background: var(--card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
}
.stats-row {
    display: flex; align-items: center;
    justify-content: center; flex-wrap: wrap;
}
.stat {
    display: flex; flex-direction: column;
    align-items: center; gap: 2px;
    padding: 8px 32px;
}
.stat-n {
    font-size: 1.4rem; font-weight: 800;
    color: var(--amber); letter-spacing: -0.5px;
    line-height: 1;
}
.stat-l { font-size: 11px; color: var(--text-2); white-space: nowrap; }
/* Caption on the hero animation: honest about being a simulation, and a
   pointer to the full planner. */
.hero-sim-note {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 28px);
    padding: 7px 12px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    background: rgba(9, 12, 18, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #cfd8e3;
    font-size: 11.5px;
    line-height: 1.35;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
.hero-sim-note:hover,
.hero-sim-note:focus-visible {
    border-color: rgba(255,194,75,0.6);
    color: #fff;
}
.hero-sim-tag {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,194,75,0.16);
    color: var(--amber, #ffc24b);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.stat-div {
    width: 1px; height: 36px;
    background: var(--border-hi); flex-shrink: 0;
}

/* ── Section commons ─────────────────────────────────────────────────────── */
.section     { padding: 80px 0; }
.section-alt { background: var(--bg-alt); }

.eyebrow {
    font-size: 11px; font-weight: 700;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--blue); text-align: center;
    margin-bottom: 10px;
}
.eyebrow-amber { color: var(--amber); }

.sec-title {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 800; letter-spacing: -0.7px;
    text-align: center; line-height: 1.2;
    margin-bottom: 44px;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.cards-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 16px;
}
.cards-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 28px;
    transition: border-color 0.2s, box-shadow 0.2s;
    /* 3D tilt via CSS custom props set by JS */
    transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition: transform 0.12s linear, border-color 0.2s, box-shadow 0.2s;
    will-change: transform;
}
.card:hover {
    border-color: var(--border-hi);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px var(--border-hi);
}

/* Amber-accented feature cards */
.card-accent {
    border-color: rgba(240,165,0,0.18);
    background: linear-gradient(150deg, var(--amber-dim) 0%, var(--card) 60%);
}
.card-accent:hover {
    border-color: rgba(240,165,0,0.38);
    box-shadow: 0 8px 32px rgba(240,165,0,0.08), 0 0 0 1px rgba(240,165,0,0.3);
}

.card-icon { font-size: 1.8rem; margin-bottom: 14px; display: block; }
.card h3   { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.card p    { font-size: 14px; color: var(--text-2); line-height: 1.7; }

/* "Coming soon" tag used by the static marketing page (index.html). */
.coming-soon-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    color: var(--amber);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    vertical-align: 2px;
}

/* ── Waitlist ─────────────────────────────────────────────────────────────── */
.waitlist-section {
    position: relative;
    padding: 96px 0;
    overflow: hidden;
}

/* Animated radial gradient background */
.waitlist-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 70% at 50% 50%,
            rgba(45,109,181,0.10) 0%, transparent 70%);
    animation: wlBgPulse 6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes wlBgPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.7; transform: scale(1.05); }
}

.waitlist-inner {
    position: relative; z-index: 1;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}
.waitlist-title {
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    font-weight: 800; letter-spacing: -0.8px;
    line-height: 1.18; margin-bottom: 16px;
}
.waitlist-sub {
    font-size: 1rem; color: var(--text-2);
    line-height: 1.75; margin-bottom: 36px;
}

.wl-row {
    display: flex; gap: 10px;
    margin-bottom: 12px;
}
.wl-input {
    flex: 1; min-width: 0;
    background: var(--card);
    border: 1px solid var(--border-hi);
    border-radius: var(--r);
    padding: 13px 16px;
    font-size: 15px; color: var(--text); font-family: var(--font);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.wl-input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(45,109,181,0.15);
}
.wl-input::placeholder { color: var(--text-3); }

.wl-note { font-size: 12px; color: var(--text-3); }
.wl-success {
    display: none;
    margin-top: 16px;
    padding: 14px 20px;
    background: rgba(76,175,114,0.08);
    border: 1px solid rgba(76,175,114,0.2);
    border-radius: var(--r);
    color: var(--green);
    font-size: 14px; font-weight: 500;
}

/* Beta auth and dashboard */
.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(ellipse 70% 45% at 50% 0%, rgba(45,109,181,0.15) 0%, transparent 68%),
        var(--bg);
}
.auth-shell {
    width: min(100%, 520px);
    min-height: 100vh;
    margin: 0 auto;
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.auth-logo { margin: 0 auto 22px; }
.auth-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: 0 18px 54px rgba(0,0,0,0.34);
}
.auth-card { padding: 32px; }
.auth-card h1 {
    font-size: clamp(1.8rem, 5vw, 2.7rem);
    line-height: 1.1;
    letter-spacing: -0.7px;
    margin-bottom: 12px;
}
.auth-sub,
.auth-note { color: var(--text-2); }
.auth-sub { margin-bottom: 26px; }
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--border);
}
.auth-note {
    margin-top: 18px;
    font-size: 14px;
    text-align: center;
}
.auth-note a,
.wl-note a {
    color: var(--amber);
    font-weight: 700;
    text-decoration: none;
}
.stacked-form {
    display: grid;
    gap: 10px;
}
.stacked-form label {
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.stacked-form input,
.stacked-form select,
.stacked-form textarea {
    width: 100%;
    min-width: 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-hi);
    border-radius: var(--r);
    color: var(--text);
    font: 500 15px var(--font);
    padding: 12px 14px;
    outline: none;
}
.stacked-form textarea {
    resize: vertical;
    line-height: 1.5;
}
.stacked-form select option {
    background: #10141d;
    color: var(--text);
}
.stacked-form input:focus,
.stacked-form select:focus,
.stacked-form textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(45,109,181,0.16);
}
.field-error,
.form-alert {
    padding: 10px 12px;
    border-radius: var(--r);
    font-size: 13px;
    background: rgba(204,34,34,0.1);
    border: 1px solid rgba(204,34,34,0.24);
    color: #ff8d8d;
}
.field-help {
    color: var(--text-3);
    font-size: 12px;
}
.form-alert-success {
    margin-top: 22px;
    background: rgba(76,175,114,0.08);
    border-color: rgba(76,175,114,0.22);
    color: var(--green);
}
.dashboard-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% -20%, rgba(45,109,181,0.10), transparent 36%),
        var(--bg);
}
.dashboard-nav-wrapper {
    background: rgba(9, 12, 18, 0.94);
}
.dashboard-nav .planner-menu-form {
    margin: 0;
    padding-top: 0;
    border-top: 0;
}
.dashboard-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 500;
    padding: 5px 8px;
    transform: translate(-50%, -2px);
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 6px;
    background: rgba(8,10,15,0.97);
    box-shadow: 0 8px 22px rgba(0,0,0,0.32);
    color: var(--text);
    font: 600 10px var(--font);
    letter-spacing: 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    white-space: nowrap;
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
}
.dashboard-tooltip:hover::after,
.dashboard-tooltip:focus-visible::after {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0.35s;
}
.planner-menu-trigger.dashboard-tooltip::after {
    right: 0;
    left: auto;
    transform: translateY(-2px);
}
.planner-menu-trigger.dashboard-tooltip:hover::after,
.planner-menu-trigger.dashboard-tooltip:focus-visible::after {
    transform: translateY(0);
}
.mission-rename-button.dashboard-tooltip::after {
    top: auto;
    bottom: calc(100% + 8px);
    transform: translate(-50%, 2px);
}
.mission-rename-button.dashboard-tooltip:hover::after,
.mission-rename-button.dashboard-tooltip:focus-visible::after {
    transform: translate(-50%, 0);
}
.dashboard-nav-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.dashboard-page {
    min-height: 100vh;
    padding-top: var(--planner-nav-h);
}
.dashboard-shell {
    max-width: 1120px;
    padding-top: 72px;
    padding-bottom: 96px;
}
.dashboard-messages {
    margin-bottom: 24px;
}
.dashboard-messages .form-alert-success {
    margin: 0;
}
.dashboard-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 42px;
}
.dashboard-kicker {
    margin-bottom: 8px;
    color: var(--amber);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.dashboard-header h1 {
    margin: 0 0 10px;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
}
.dashboard-header > div > p:last-child {
    color: var(--text-2);
    font-size: 15px;
}
.dashboard-primary-action {
    flex: 0 0 auto;
    gap: 9px;
    min-height: 42px;
    padding-inline: 18px;
}
.dashboard-primary-action span {
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}
.missions-panel {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(19,22,30,0.72);
    box-shadow: 0 22px 60px rgba(0,0,0,0.2);
}
.missions-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 64px;
    padding: 0 22px;
    border-bottom: 1px solid var(--border);
}
.missions-panel-heading h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
}
.missions-panel-heading > span {
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
}
.mission-list {
    display: block;
}
.mission-list-row {
    position: relative;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s ease;
}
.mission-list-row:last-child {
    border-bottom: 0;
}
.mission-list-row:hover {
    background: rgba(255,255,255,0.035);
}
.mission-row-open {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
.mission-row-open:focus-visible {
    outline: 2px solid rgba(240,165,0,0.72);
    outline-offset: -3px;
}
.mission-list-item {
    display: grid;
    grid-template-columns: minmax(240px, 1.25fr) minmax(360px, 1fr) 24px;
    gap: 24px;
    align-items: center;
    min-height: 92px;
    padding: 18px 22px;
    color: inherit;
    pointer-events: none;
}
.mission-list-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}
.mission-list-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(127,179,232,0.16);
    border-radius: 10px;
    background: var(--blue-dim);
    color: var(--blue-lo);
}
.mission-list-icon svg,
.missions-empty-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}
.mission-list-main > div {
    min-width: 0;
}
.mission-title-line {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mission-title-line h3 {
    overflow: hidden;
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mission-status {
    flex: 0 0 auto;
    padding: 2px 7px;
    border: 1px solid rgba(76,175,114,0.18);
    border-radius: 999px;
    background: rgba(76,175,114,0.07);
    color: #75c895;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mission-list-main p {
    margin: 3px 0 0;
    color: var(--text-2);
    font-size: 11px;
}
.mission-list-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
}
.mission-list-meta dt {
    color: var(--text-dim);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.mission-list-meta dd {
    overflow: hidden;
    margin: 2px 0 0;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mission-list-arrow {
    color: var(--text-3);
    font-size: 18px;
    transition: color 0.2s ease, transform 0.2s ease;
}
.mission-list-item:hover .mission-list-arrow {
    color: var(--amber);
    transform: translateX(3px);
}
.mission-rename-button {
    position: relative;
    z-index: 2;
    width: 26px;
    height: 26px;
    display: inline-flex;
    flex: 0 0 26px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    pointer-events: auto;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.mission-rename-button:hover,
.mission-rename-button:focus-visible {
    border-color: var(--border-hi);
    background: rgba(255,255,255,0.055);
    color: var(--text);
    outline: none;
}
.mission-rename-button svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}
.rename-mission-dialog {
    width: min(430px, calc(100vw - 32px));
    margin: auto;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 16px;
    background: #10141d;
    color: var(--text);
    box-shadow: 0 28px 80px rgba(0,0,0,0.58);
}
.rename-mission-dialog::backdrop {
    background: rgba(3,5,9,0.72);
    backdrop-filter: blur(5px);
}
.rename-mission-form {
    padding: 28px;
}
.rename-mission-kicker {
    margin-bottom: 6px;
    color: var(--amber);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.rename-mission-form h2 {
    margin: 0 0 22px;
    font-size: 22px;
    letter-spacing: -0.025em;
}
.rename-mission-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
}
.rename-mission-form input {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 9px;
    background: rgba(255,255,255,0.055);
    color: var(--text);
    font: 600 14px var(--font);
    outline: none;
}
.rename-mission-form input:focus {
    border-color: rgba(240,165,0,0.7);
    box-shadow: 0 0 0 3px rgba(240,165,0,0.13);
}
.rename-mission-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 22px;
}
.delete-mission-dialog { width: min(380px, calc(100vw - 32px)); }
.delete-mission-dialog .rename-mission-form { padding: 20px 22px; }
.delete-mission-dialog .rename-mission-kicker { margin-bottom: 4px; color: #ff8080; }
.delete-mission-dialog h2 { margin-bottom: 12px; font-size: 20px; }
.delete-mission-dialog p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.45; }
.delete-mission-dialog .rename-mission-actions { margin-top: 16px; }
.delete-mission-dialog .btn { padding: 8px 14px; }
.btn-danger { background: #b93a3a; color: #fff; }
.btn-danger:hover { background: #d04747; }
.missions-empty-state {
    padding: 72px 24px 78px;
    text-align: center;
}
.missions-empty-icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border: 1px solid var(--border-hi);
    border-radius: 14px;
    background: rgba(255,255,255,0.035);
    color: var(--text-2);
}
.missions-empty-state h3 {
    margin: 0 0 7px;
    font-size: 17px;
    font-weight: 650;
}
.missions-empty-state p {
    max-width: 420px;
    margin: 0 auto 22px;
    color: var(--text-2);
    font-size: 13px;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer {
    border-top: 1px solid var(--border);
    padding: 28px 0;
    background: var(--card);
}
.footer-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.footer-links {
    display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap;
}
.footer-links a {
    font-size: 13px; color: var(--text-2);
    text-decoration: none; transition: color 0.2s;
}
.footer-links a:hover { color: var(--text); }
.footer-copy {
    font-size: 12px; color: var(--text-3);
    width: 100%; text-align: center; margin-top: 8px;
}

/* ── Reveal animation ────────────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
    .nav {
        height: auto;
        min-height: 60px;
        align-content: center;
    }
    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-sub    { max-width: 100%; }
    .hero-ctas   { justify-content: center; }
    .hero-visual { max-width: 600px; margin: 0 auto; }
    .hero-proof  { justify-content: center; }
    .cards-2     { grid-template-columns: 1fr; }
    body:not(.planner-body) .hero-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    body:not(.planner-body) .hero-visual {
        width: 100%;
    }

    .nav-links, .nav-actions { display: none; }
    .nav-toggle { display: flex; }
    .nav-links.open {
        display: flex; flex-direction: column; gap: 14px;
        width: 100%; order: 3;
        padding: 16px 0;
        border-top: 1px solid var(--border);
    }
    .nav-actions.open {
        display: flex; flex-direction: column; gap: 8px;
        width: 100%; order: 4; padding-bottom: 16px;
    }
    .nav-actions.open .btn { width: 100%; justify-content: center; }
    .nav.mobile-menu-open .nav-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .nav.mobile-menu-open .nav-toggle span:nth-child(2) {
        opacity: 0;
    }
    .nav.mobile-menu-open .nav-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    .planner-nav .nav-links,
    .planner-nav .nav-actions {
        display: flex;
    }
    .planner-nav .nav-actions {
        width: auto;
        order: initial;
        padding: 0;
        position: static;
    }
    .planner-nav .nav-actions .btn {
        width: auto;
    }
    .planner-nav .nav-toggle {
        display: none;
    }
    .planner-nav {
        gap: 10px;
        padding: 0 10px;
    }
    .planner-nav .nav-logo {
        font-size: 17px;
    }
    .planner-validation {
        left: auto;
        right: 104px;
        transform: none;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .planner-menu-popover {
        right: -4px;
    }
    .planner-inner.hero-inner {
        grid-template-columns: none;
        text-align: left;
    }
    .planner-inner .hero-visual {
        max-width: none;
        margin: 0;
    }
    .mission-list-item {
        grid-template-columns: minmax(0, 1fr) 20px;
        gap: 14px 18px;
    }
    .mission-list-meta {
        grid-column: 1 / -1;
        padding-left: 52px;
    }
    .mission-list-arrow {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 600px) {
    .section   { padding: 56px 0; }
    .hero      { padding: 40px 0 52px; }
    .hero-inner { gap: 36px; }
    .hero-badge { margin-bottom: 16px; }
    .hero-title { margin-bottom: 14px; }
    .hero-sub { margin-bottom: 24px; }
    .hero-ctas { margin-bottom: 0; }
    .dashboard-shell {
        padding-top: 44px;
        padding-bottom: 64px;
    }
    .dashboard-header {
        display: grid;
        gap: 22px;
        margin-bottom: 30px;
    }
    .dashboard-primary-action {
        justify-content: center;
    }
    .dashboard-nav-title {
        display: none;
    }
    .missions-panel-heading {
        padding: 0 17px;
    }
    .mission-list-item {
        min-height: 0;
        padding: 18px 17px;
    }
    .mission-list-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding-left: 0;
    }
    .mission-title-line {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
    }
    .wl-row    { flex-direction: column; }
    .stat-div  { display: none; }
    .stat      { padding: 6px 18px; }
    .footer-inner { justify-content: center; }
    .footer-links { margin-left: 0; justify-content: center; }
}

/* ── Global reach section ────────────────────────────────────────────────── */
.reach-sub {
    text-align: center;
    color: var(--text-dim);
    font-size: 15px;
    margin: -8px auto 36px;
    max-width: 520px;
}
.reach-grid { max-width: 880px; margin: 0 auto; }
.reach-map-wrap {
    position: relative;
    width: 100%;
}
.reach-map-svg {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.reach-tip {
    position: absolute;
    background: rgba(10,14,24,0.96);
    border: 1px solid rgba(255,210,0,0.25);
    color: rgba(220,226,237,0.9);
    font-size: 13px;
    padding: 6px 13px;
    border-radius: 7px;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 10;
    backdrop-filter: blur(10px);
}
.reach-tip strong { color: #FFE600; }
@keyframes reachPulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    70%  { transform: scale(2.2); opacity: 0;   }
    100% { transform: scale(2.2); opacity: 0;   }
}
.reach-ring {
    animation: reachPulse 2.8s ease-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
.reach-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 28px;
    max-width: 880px;
    margin: 18px auto 0;
}
.reach-list-row {
    display: grid;
    grid-template-columns: 18px 20px 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.rln {
    font-size: 10px;
    font-family: 'JetBrains Mono','Courier New',monospace;
    color: rgba(255,255,255,0.2);
    text-align: right;
}
.rlf { font-size: 13px; line-height: 1; }
.rlc { font-size: 12px; color: rgba(220,226,237,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rlv { font-size: 12px; font-weight: 700; color: var(--amber); font-family: 'JetBrains Mono','Courier New',monospace; }
.reach-list-top .rln { color: var(--amber); }
.reach-list-top .rlc { color: rgba(255,230,0,0.85); }
@media (max-width: 700px) { .reach-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .reach-list { grid-template-columns: 1fr; } }
.reach-note {
    text-align: center;
    font-size: 11.5px;
    color: rgba(136,146,164,0.5);
    margin-top: 14px;
}

/* ── Mission parameter panel (right sidebar) ─────────────────────────────── */
.mp-panel {
    width: var(--planner-panel-w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: rgba(9,12,18,0.96);
    border-left: 1px solid rgba(255,255,255,0.08);
    box-shadow: -18px 0 44px rgba(0,0,0,0.26);
    overflow: hidden;
    transition: width 0.18s ease;
}
.mp-panel-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(160,172,190,0.46) rgba(255,255,255,0.04);
    scrollbar-width: thin;
}
.mp-panel-scroll::-webkit-scrollbar {
    width: 8px;
}
.mp-panel-scroll::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
}
.mp-panel-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(160,172,190,0.46);
}
.planner-body .mp-desktop-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
}
.mp-panel-toggle {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 7px;
    background: rgba(14,17,24,0.94);
    color: #f4f7fb;
    font: 750 12px/1 var(--font);
    cursor: pointer;
}
.mp-panel-toggle:hover,
.mp-panel-toggle:focus-visible {
    border-color: rgba(240,165,0,0.48);
    color: var(--amber);
    outline: none;
}
.mp-panel-toggle .planner-mobile-action-label,
.mp-panel-toggle .planner-mobile-action-icon {
    display: none;
}
.mp-panel-collapse-icon {
    width: 9px;
    height: 9px;
    display: block;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(225deg);
    margin-right: 4px;
}
@media (min-width: 1001px) {
    .planner-body .planner-inner #mapBg {
        left: 0;
        right: 0;
    }
    .planner-body.mission-rail-collapsed .map-zoom-ctrl,
    .planner-body.mission-rail-collapsed .map-tools {
        left: 12px;
    }
    .planner-body.mission-rail-collapsed .map-zoom-ctrl,
    .planner-body.mission-rail-collapsed .map-tools {
        left: 12px;
    }
    .planner-body .mp-panel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 45;
        height: 100%;
        transition: width 0.18s ease, box-shadow 0.18s ease;
    }
    .planner-body.settings-panel-collapsed .mp-panel {
        bottom: auto;
        width: 0;
        height: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .planner-body.settings-panel-collapsed .mp-desktop-panel-head {
        position: absolute;
        top: 16px;
        right: 14px;
        width: auto;
        height: 34px;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .planner-body.settings-panel-collapsed .mp-desktop-panel-head > .ops-panel-title,
    .planner-body.settings-panel-collapsed .mp-panel > :not(.mp-desktop-panel-head) {
        display: none;
    }
    .planner-body.settings-panel-collapsed .mp-panel-toggle {
        width: auto;
        min-width: 82px;
        height: 34px;
        gap: 7px;
        padding: 0 11px;
        border-color: rgba(255,255,255,0.16);
        border-radius: 8px;
        background: rgba(9,12,18,0.9);
        box-shadow: 0 12px 30px rgba(0,0,0,0.38);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .planner-body.settings-panel-collapsed .mp-panel-toggle .planner-mobile-action-label,
    .planner-body.settings-panel-collapsed .mp-panel-toggle .planner-mobile-action-icon {
        display: inline-block;
    }
    .planner-body.settings-panel-collapsed .mp-panel-collapse-icon {
        display: none;
    }
    .planner-body .mp-panel-toggle:hover,
    .planner-body .mp-panel-toggle:focus-visible {
        border-color: rgba(240,165,0,0.48);
        color: var(--amber);
    }
    .planner-body.settings-panel-collapsed .mp-panel-toggle .planner-mobile-action-icon {
        position: relative;
        width: 16px;
        height: 16px;
        color: var(--amber);
    }
    .planner-body.settings-panel-collapsed .mp-panel-toggle .planner-mobile-action-icon-sliders::before,
    .planner-body.settings-panel-collapsed .mp-panel-toggle .planner-mobile-action-icon-sliders::after {
        content: "";
        position: absolute;
        left: 1px;
        right: 1px;
        height: 2px;
        background: currentColor;
        box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor;
    }
    .planner-body.settings-panel-collapsed .mp-panel-toggle .planner-mobile-action-icon-sliders::after {
        left: 4px;
        right: auto;
        top: -2px;
        width: 4px;
        height: 6px;
        border-radius: 2px;
        box-shadow: 6px 6px 0 0 currentColor, 2px 12px 0 0 currentColor;
    }
}
.mp-section-title {
    color: var(--blue-lo);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
}
.mp-stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mp-stats-toggle {
    display: none;
}
.mp-section {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mp-settings-accordion {
    gap: 0;
    padding-block: 2px;
}
.mp-accordion-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 12px;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
}
.mp-accordion-summary {
    overflow: hidden;
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.2;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-accordion-chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--blue-lo);
    border-bottom: 2px solid var(--blue-lo);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.18s ease;
}
.mp-accordion-head[aria-expanded="true"] .mp-accordion-chevron {
    transform: translateY(2px) rotate(225deg);
}
.mp-accordion-head:focus-visible {
    outline: none;
    border-radius: 4px;
    box-shadow: 0 0 0 2px rgba(127,179,232,0.56);
}
.mp-accordion-body {
    display: grid;
    gap: 14px;
    padding: 16px 0 2px;
}
.mp-accordion-body[hidden] {
    display: none;
}
.mp-drone-setting-row {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(105px, 0.85fr);
    gap: 8px;
    align-items: end;
}
.mp-drone-setting-row.is-single { grid-template-columns: 1fr; }
.mp-drone-setting-field,
.mp-marker-setting {
    display: grid;
    gap: 6px;
    min-width: 0;
}
.mp-marker-setting-label {
    color: #e1e7ef;
    font-size: 10px;
    font-weight: 700;
}
.mp-section-grow {
    flex: 0 0 auto;
    min-height: 0;
}
.ops-runtime-timer {
    min-width: 118px;
    display: grid;
    gap: 2px;
    padding: 5px 9px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    text-align: center;
}
.ops-runtime-timer[hidden] {
    display: none;
}
.ops-runtime-timer strong {
    color: var(--amber);
    font: 700 13px/1.1 'JetBrains Mono','Courier New',monospace;
    font-variant-numeric: tabular-nums;
}
.ops-runtime-timer span {
    color: #c3cdd9;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}
.ops-runtime-timer.is-complete strong,
.ops-runtime-timer.is-complete span {
    color: #78d58a;
}
.ops-runtime-buttons {
    display: flex;
    gap: 6px;
}
.mp-field {
    display: grid;
    gap: 6px;
    color: #e1e7ef;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mp-safety-section .mp-drone-select {
    text-transform: none;
    letter-spacing: normal;
}
.mp-style-select {
    position: relative;
    width: 100%;
    text-transform: none;
    letter-spacing: normal;
}
.mp-style-select-trigger {
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 7px;
    background: rgba(255,255,255,0.035);
    color: #f4f7fb;
    font: 700 12px var(--font);
    cursor: pointer;
    outline: none;
}
.mp-style-select-trigger:hover {
    border-color: rgba(255,255,255,0.24);
    background: rgba(255,255,255,0.065);
}
.mp-style-select-trigger:focus-visible,
.mp-style-select.is-open .mp-style-select-trigger {
    border-color: rgba(75,148,230,0.92);
    background: rgba(45,109,181,0.18);
    box-shadow: 0 0 0 2px rgba(45,109,181,0.13);
}
.mp-style-select-chevron {
    width: 7px;
    height: 7px;
    border-right: 2px solid #f4f7fb;
    border-bottom: 2px solid #f4f7fb;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.16s ease;
}
.mp-style-select.is-open .mp-style-select-chevron {
    transform: translateY(2px) rotate(225deg);
}
.mp-style-select-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 5px);
    right: 0;
    left: 0;
    display: grid;
    gap: 3px;
    padding: 5px;
    border: 1px solid rgba(75,148,230,0.55);
    border-radius: 8px;
    background: #111722;
    box-shadow: 0 14px 30px rgba(0,0,0,0.45);
}
.mp-style-select.is-dropup .mp-style-select-menu {
    top: auto;
    bottom: calc(100% + 5px);
    box-shadow: 0 -14px 30px rgba(0,0,0,0.45);
}
.mp-style-select-menu[hidden] {
    display: none;
}
.mp-style-select-option {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #f4f7fb;
    font: 700 12px var(--font);
    text-align: left;
    cursor: pointer;
}
.mp-style-select-option:hover,
.mp-style-select-option:focus-visible,
.mp-style-select-option.is-selected {
    background: rgba(45,109,181,0.28);
    color: #fff;
    outline: none;
}
.mp-style-select-option:disabled {
    color: rgba(232,234,240,0.42);
    cursor: not-allowed;
}
.mp-style-select-option:disabled:hover {
    background: transparent;
}
.mp-style-select-option small {
    color: var(--amber);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mp-enhanced-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.mp-drone-select-wrap.is-enhanced::after {
    display: none;
}
/* Drone selector */
.mp-drone-select-wrap {
    position: relative;
    display: block;
}
.mp-drone-select-wrap::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid rgba(232,234,240,0.58);
    border-bottom: 2px solid rgba(232,234,240,0.58);
    transform: translateY(-68%) rotate(45deg);
    pointer-events: none;
}
.mp-drone-select {
    width: 100%;
    height: 38px;
    padding: 0 34px 0 11px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 7px;
    background: rgba(255,255,255,0.035);
    color: rgba(232,234,240,0.86);
    font: 700 12px var(--font);
    font-weight: 700;
    cursor: pointer;
    outline: none;
    appearance: none;
}
.mp-drone-select:hover,
.mp-drone-select:focus {
    background: rgba(45,109,181,0.15);
    border-color: rgba(45,109,181,0.6);
}
.mp-drone-select option {
    background: #10141d;
    color: var(--text);
}

/* Enabled planner icons should read as active controls, not muted states. */
.planner-body .planner-menu-trigger,
.planner-body .ops-rail-toggle,
.planner-body .map-zoom-ctrl button,
.planner-body .map-tool-btn,
.planner-body .draw-tb-btn:not(:disabled):not(.active):not(.is-drawing),
.planner-body .mp-btn:not(:disabled) {
    color: #f4f7fb;
    opacity: 1;
}
.planner-body .draw-tb-btn:disabled,
.planner-body .mp-btn:disabled,
.planner-body .ops-map-btn:disabled {
    color: #7d8490;
}

/* Simulation stats grid */
.mp-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0;
    background: transparent;
    border-bottom: 0;
    flex-shrink: 0;
}
.mp-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    min-height: 48px;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 7px;
    background: rgba(255,255,255,0.035);
}
.mp-stat-val {
    font-size: 14px;
    font-weight: 600;
    color: #dce3ec;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.mp-stat-group {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mp-stat-group[hidden] { display: none !important; }
.mp-stat-group-title {
    grid-column: 1 / -1;
    padding: 6px 2px 4px;
    color: var(--blue-lo);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.045em;
    line-height: 1.1;
    text-transform: uppercase;
}
.mp-stat-group .mp-stat {
    min-height: 32px;
    padding: 5px 2px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    border-radius: 0;
    background: transparent;
}
.mp-stat-terrain-details div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mp-stat-terrain-details {
    grid-column: 1 / -1;
    padding: 3px 0 5px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.mp-stat-terrain-details[hidden] { display: none; }
.mp-stat-terrain-details div { min-height: 32px; }
.mp-stat-lbl {
    font-size: 9.5px;
    font-weight: 500;
    color: #8993a2;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    line-height: 1;
}
.mp-stat-sep { display: none; }
.mp-simulation-stats .mp-section-title {
    color: #b9c3cf;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.mp-stats-title-short { display: none; }

@media (min-width: 1001px) {
    .planner-body .mp-panel-scroll > .mp-simulation-stats {
        visibility: hidden;
    }
    .planner-body .hero-visual > .mp-simulation-stats {
        position: absolute;
        top: 16px;
        left: auto;
        right: calc(var(--planner-panel-w) + 16px);
        z-index: 11;
        width: 216px;
        gap: 0;
        padding: 10px 12px 8px;
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 12px;
        background: rgba(15,18,24,0.94);
        box-shadow: 0 14px 34px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.05);
        pointer-events: none;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        transition: top 0.18s ease, right 0.18s ease;
    }
    .planner-body.settings-panel-collapsed .hero-visual > .mp-simulation-stats {
        top: 60px;
        right: 16px;
    }
    .planner-body:not(.settings-panel-collapsed) .planner-empty-hint {
        left: calc(50% - 84px);
    }
    .planner-body .hero-visual > .mp-simulation-stats .mp-stats {
        display: block;
    }
    .planner-body .hero-visual > .mp-simulation-stats .mp-stats-header {
        padding: 0 2px 8px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .planner-body .hero-visual > .mp-simulation-stats .mp-stats-toggle {
        width: 20px;
        height: 20px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 5px;
        background: rgba(255,255,255,0.04);
        color: #c3cdd9;
        cursor: pointer;
        pointer-events: auto;
    }
    .planner-body .hero-visual > .mp-simulation-stats .mp-stats-toggle:hover,
    .planner-body .hero-visual > .mp-simulation-stats .mp-stats-toggle:focus-visible {
        border-color: rgba(240,165,0,0.5);
        color: var(--amber);
        outline: none;
    }
    .planner-body .hero-visual > .mp-simulation-stats .mp-stats-toggle span {
        font-size: 18px;
        line-height: 1;
        transform: rotate(0deg);
        transition: transform 0.18s ease;
    }
    .planner-body .hero-visual > .mp-simulation-stats .mp-stat {
        min-height: 29px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 5px 2px;
        border: 0;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        border-radius: 0;
        background: transparent;
    }
    .planner-body .hero-visual > .mp-simulation-stats .mp-stat-group {
        display: block;
        padding: 4px 2px 3px;
    }
    .planner-body .hero-visual > .mp-simulation-stats .mp-stat-group-title {
        padding: 6px 0 4px;
    }
    .planner-body .hero-visual > .mp-simulation-stats .mp-stat-group .mp-stat:last-child {
        border-bottom: 0;
    }
    .planner-body .hero-visual > .mp-simulation-stats .mp-stat-val {
        order: 2;
        flex: 0 0 auto;
        text-align: right;
    }
    .planner-body .hero-visual > .mp-simulation-stats .mp-stat-lbl {
        order: 1;
    }
    .planner-body .hero-visual > .mp-simulation-stats .mp-stat-area {
        grid-column: auto;
        margin-top: 0;
        padding: 6px 2px;
        border-top: 0;
        border-bottom: 1px solid rgba(255,255,255,0.075);
    }
    .planner-body .hero-visual > .mp-simulation-stats.is-collapsed {
        width: 96px;
        padding: 8px 9px;
    }
    .planner-body .hero-visual > .mp-simulation-stats.is-collapsed .mp-stats-header {
        gap: 8px;
        padding-bottom: 0;
        border-bottom: 0;
    }
    .planner-body .hero-visual > .mp-simulation-stats.is-collapsed .mp-section-title {
        white-space: nowrap;
    }
    .planner-body .hero-visual > .mp-simulation-stats.is-collapsed .mp-stats-title-full { display: none; }
    .planner-body .hero-visual > .mp-simulation-stats.is-collapsed .mp-stats-title-short { display: inline; }
    .planner-body .hero-visual > .mp-simulation-stats.is-collapsed .mp-stats-toggle span {
        transform: rotate(180deg);
    }
    .planner-body .hero-visual > .mp-simulation-stats.is-collapsed .mp-stats {
        display: none;
    }
}

/* Controls — vertical stack, each takes 1/3 of remaining height */
.mp-controls {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0;
    min-height: 0;
    min-width: 0;
}
/* Minimal row: label left, value + steppers right, slim slider spanning below.
   No card chrome — flat rows separated by a hairline, so five parameters read
   as a calm list rather than five heavy boxes. */
.mp-ctrl {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label value"
        "slider slider";
    align-items: center;
    column-gap: 10px;
    row-gap: 9px;
    padding: 12px 3px 13px;
    border: 0;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-left: 3px;
    border-left: 2px solid transparent;
    transition: border-color 0.15s;
}
.mp-ctrl:last-child { border-bottom: 0; }
.mp-ctrl > .mp-lbl { grid-area: label; align-self: center; }
.mp-ctrl > .mp-lbl-row { grid-area: label; }
.mp-ctrl > .mp-spin-wrap { grid-area: value; justify-self: end; }
.mp-ctrl > .mp-slider { grid-area: slider; align-self: center; }
/* Spin box: quiet inline field; native arrows appear on hover/focus. */
/* Keep the natural value-unit reading order while a fixed unit slot keeps
   all value boxes aligned. */
.mp-spin-wrap { display: flex; align-items: baseline; gap: 5px; }
.mp-spin-wrap .mp-unit { width: 22px; text-align: left; }
.mp-spin {
    width: 56px;
    height: 30px;
    box-sizing: border-box;
    padding: 3px 4px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    background: rgba(255,255,255,0.09);
    color: #f2f5fa;
    font: 700 14px var(--font);
    text-align: right;
    outline: none;
    color-scheme: dark;
}
.mp-spin:hover { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.12); }
.mp-spin:focus { border-color: var(--blue-lo); background: rgba(255,255,255,0.12); }
/* Warnings stay minimal too: a thin left accent bar + colored label instead
   of a filled/glowing box. */
.mp-ctrl.has-warning {
    border-left-color: var(--amber);
    padding-left: 9px;
}
.mp-ctrl.has-blocked {
    border-left-color: #ff6b6b;
    padding-left: 9px;
}
.mp-ctrl.has-warning .mp-lbl { color: var(--amber-h); }
.mp-ctrl.has-blocked .mp-lbl { color: #ff8080; }
.mp-warning-inline {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px 9px;
    border-radius: 6px;
    background: rgba(240,165,0,0.10);
    color: var(--amber-h);
    font-size: 10px;
}
.mp-warning-inline > span:nth-child(2) { display: grid; gap: 2px; }
.mp-warning-inline strong { color: #f4f7fb; font-size: 10px; }
.mp-warning-inline small { color: var(--text-2); font-size: 9px; line-height: 1.35; }
.mp-warning-inline button {
    padding: 5px 7px;
    border: 1px solid rgba(240,165,0,0.48);
    border-radius: 5px;
    background: rgba(240,165,0,0.14);
    color: var(--amber-h);
    font: 700 9px var(--font);
    cursor: pointer;
}
.mp-warning-inline button:hover,
.mp-warning-inline button:focus-visible { background: rgba(240,165,0,0.24); outline: none; }
.mp-ctrl.has-blocked .mp-warning-inline { background: rgba(255,107,107,0.10); color: #ff8080; }
.mp-ctrl-sep { display: none; }

.mp-lbl {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #f2f5fa;
    text-transform: uppercase;
    align-self: flex-start;
}
.mp-lbl-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    min-width: 0;
}
.mp-lbl-row .mp-lbl { align-self: auto; }
.mp-auto-direction {
    border: 1px solid rgba(127,179,232,0.42);
    border-radius: 999px;
    padding: 2px 7px;
    background: rgba(45,109,181,0.10);
    color: #cfe5fb;
    font: inherit;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.25px;
    line-height: 1.35;
    text-transform: uppercase;
    cursor: pointer;
}
.mp-auto-direction:hover,
.mp-auto-direction:focus-visible {
    border-color: rgba(127,179,232,0.78);
    color: #fff;
}
.mp-auto-direction.is-active {
    border-color: var(--blue-lo);
    background: rgba(45,109,181,0.24);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(127,179,232,0.14);
}

/* [−] value unit [+] row — compact, right-aligned next to the label */
.mp-row {
    display: grid;
    grid-template-columns: 24px auto 24px;
    align-items: center;
    gap: 7px;
    width: max-content;
    max-width: 100%;
    justify-content: end;
}
.mp-val-wrap {
    display: flex;
    align-items: baseline;
    gap: 3px;
    min-width: 46px;
    justify-content: center;
}
.mp-num {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}
.mp-unit {
    font-size: 11px;
    color: #c3cdd9;
    font-weight: 500;
}

/* ± buttons — quiet borderless glyphs; in the planner they stay hidden
   until the row is hovered, so a resting row is just label + value + track. */
.mp-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,0.5);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 1px;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    flex-shrink: 0;
    user-select: none;
}
.mp-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.mp-btn:active {
    transform: scale(0.9);
    background: rgba(255,255,255,0.12);
}
.planner-body .mp-btn { opacity: 0; transition: opacity 0.15s, color 0.15s, background 0.15s; }
.planner-body .mp-ctrl:hover .mp-btn,
.planner-body .mp-btn:focus-visible { opacity: 1; }
@media (hover: none) {
    .planner-body .mp-btn { opacity: 1; }
}

/* Filled range slider */
.mp-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(
        to right,
        var(--blue-lo) 0%,
        var(--blue-lo) var(--fill, 58%),
        rgba(255,255,255,0.14) var(--fill, 58%),
        rgba(255,255,255,0.14) 100%
    );
}
.mp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    transition: transform 0.12s;
}
.mp-slider::-webkit-slider-thumb:hover {
    transform: scale(1.18);
}
.mp-slider::-moz-range-thumb {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.planner-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.mp-route-update-bar {
    position: absolute;
    top: 16px;
    left: calc((100% + var(--planner-left-w) - var(--planner-panel-w)) / 2);
    z-index: 13;
    width: min(360px, calc(100% - var(--planner-left-w) - var(--planner-panel-w) - 32px));
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px 10px 12px;
    border: 1px solid rgba(56,215,255,0.50);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(12,35,50,0.98), rgba(10,16,27,0.98));
    box-shadow: 0 14px 38px rgba(0,0,0,0.48), 0 0 0 1px rgba(56,215,255,0.08);
    transform: translateX(-50%);
}
.mp-route-update-bar[hidden] { display: none; }
.mp-route-update-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}
.mp-route-update-copy strong {
    color: #fff;
    font-size: 12px;
    line-height: 1.1;
}
.mp-route-update-copy small {
    color: #a9c9d5;
    font-size: 10px;
    line-height: 1.25;
}
.mp-route-update-btn {
    min-width: 108px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid #4b91d7;
    border-radius: 8px;
    background: #2d6db5;
    color: #fff;
    font: 800 11px/1 var(--font);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.mp-route-update-btn:not(:disabled):hover,
.mp-route-update-btn:not(:disabled):focus-visible {
    border-color: #79b7f1;
    background: #397fc8;
    transform: translateY(-1px);
}
.mp-route-update-btn:disabled {
    opacity: 0.5;
    cursor: default;
}
.hero-visual.has-route-update .ops-map-controls { top: 92px; }

@media (max-width: 1000px) {
    .mp-route-update-bar {
        top: 16px;
        right: 16px;
        bottom: auto;
        left: 16px;
        width: auto;
        transform: none;
    }
}

/* Mobile: stack panel below SVG */
@media (max-width: 700px) {
    .hero-visual {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        transform: none !important;
    }
    #missionSvg {
        flex: none;
        width: 100%;
    }
    #mapBg {
        right: 0;
        bottom: auto;
        aspect-ratio: 520 / 380;
    }
    .map-tools {
        left: 12px;
        bottom: auto;
        top: calc((min(100vw - 64px, 600px) * 0.73077) - 68px);
    }
    .map-tools-panel {
        width: min(320px, calc(100vw - 88px));
    }
    .map-zoom-ctrl {
        bottom: auto;
        top: calc((min(100vw - 64px, 600px) * 0.73077) - 132px);
    }
    .mp-panel {
        width: auto;
        min-width: 0;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.07);
        flex-direction: column;
    }
    .mp-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mp-ctrl {
        min-width: 0;
        padding: 10px 10px 12px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        border-right: 1px solid rgba(255,255,255,0.05);
    }
    .mp-ctrl:nth-child(3),
    .mp-ctrl:nth-child(7) { border-right: none; }
    .mp-ctrl:nth-child(9) { border-bottom: none; }
    .mp-stat-sep { display: block; width: 1px; height: 16px; background: rgba(255,255,255,0.1); margin: 0; }
    .mp-stats { flex-direction: row; align-items: center; gap: 0; padding: 8px 16px; }
    .mp-stat { justify-content: center; flex-direction: column; align-items: center; padding: 0 16px 0 0; gap: 2px; }
}

@media (max-width: 420px) {
    .container { padding: 0 20px; }
    .hero-title {
        font-size: 2rem;
        letter-spacing: -0.7px;
    }
    .hero-sub {
        font-size: 0.98rem;
        line-height: 1.65;
    }
    .hero-ctas .btn {
        width: 100%;
    }
    .map-tools {
        top: calc(((100vw - 40px) * 0.73077) - 68px);
    }
    .map-zoom-ctrl {
        top: calc(((100vw - 40px) * 0.73077) - 132px);
    }
    .draw-toolbar {
        gap: 4px;
    }
    .draw-tb-btn {
        padding: 4px 8px;
        font-size: 9px;
    }
    .mp-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 10px;
    }
    .mp-stat {
        padding: 0;
    }
    .mp-stat-area {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }
    .mp-row {
        grid-template-columns: 26px 64px 26px;
        gap: 6px;
    }
    .mp-val-wrap {
        width: 64px;
    }
    .mp-num {
        font-size: 20px;
    }
    .mp-btn {
        width: 26px;
        height: 26px;
    }
}

/* ── Polygon draw / edit tool ────────────────────────────────────────────── */

.draw-toolbar {
    position: absolute;
    top: 16px;
    left: calc(var(--planner-left-w) + 14px);
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 20;
    pointer-events: auto;
    transition: left 0.18s ease;
}

@media (max-width: 1100px) {
    .planner-body {
        --planner-left-w: 240px;
    }
}
body:not(.planner-body) .mp-section {
    gap: 6px;
    padding: 8px 10px;
}
body:not(.planner-body) .mp-drone-select {
    height: 30px;
    font-size: 10px;
}
body:not(.planner-body) .mp-stats {
    gap: 5px;
}
body:not(.planner-body) .mp-stat {
    min-height: 34px;
    padding: 5px 7px;
}
body:not(.planner-body) .mp-stat-val { font-size: 12px; }
body:not(.planner-body) .mp-stat-lbl { font-size: 8px; }
body:not(.planner-body) .mp-controls {
    gap: 0;
}
body:not(.planner-body) .mp-section-grow {
    overflow: hidden;
    padding-top: 0;
}

/* Planner compact workspace -------------------------------------------------
   Keep the map as the workspace and surface secondary UI as temporary
   drawers. These rules intentionally live after the shared landing-page
   breakpoints so the public-page responsive layout remains unchanged. */
.planner-mobile-backdrop,
.planner-mobile-actions,
.planner-view-only-notice,
.mp-sheet-toggle {
    display: none;
}

@media (max-width: 1000px) {
    .planner-body .mp-desktop-panel-head {
        display: none;
    }
    .planner-body {
        height: 100svh;
        min-height: 100svh;
        overflow: hidden;
        overscroll-behavior: none;
    }
  .planner-body .planner-nav-wrapper {
    position: fixed;
    }
    .planner-body .planner-nav {
        overflow: visible;
        flex-wrap: nowrap;
    }
    .planner-body .planner-workspace {
        height: 100svh;
        min-height: 100svh;
        box-sizing: border-box;
        padding: var(--planner-nav-h) 0 0;
        align-items: stretch;
        overflow: hidden;
    }
    .planner-body .planner-inner,
    .planner-body .planner-inner .hero-visual {
        width: 100%;
        height: calc(100svh - var(--planner-nav-h));
        min-height: 0;
    }
    .planner-body .planner-inner {
        padding: 0;
    }
    .planner-body .planner-inner .hero-visual {
        position: relative;
        display: block;
        overflow: hidden;
        padding: 0;
    }
    .planner-body .planner-inner #mapBg {
        inset: 0;
        width: auto;
        height: auto;
        aspect-ratio: auto;
    }
    .planner-body #missionSvg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
    }
    .planner-body .planner-nav .nav-actions {
        flex: 0 0 auto;
        margin-left: auto;
    }
    .planner-body .planner-validation {
        position: absolute;
        top: 50%;
        right: auto;
        left: 50%;
        z-index: 42;
        max-width: min(280px, calc(100vw - 28px));
        transform: translate(-50%, -50%);
        overflow: hidden;
        text-overflow: ellipsis;
        background: rgba(9,12,18,0.88);
        box-shadow: 0 8px 24px rgba(0,0,0,0.28);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .planner-body .planner-warning-panel {
        position: fixed;
        top: calc(var(--planner-nav-h) + 46px);
        right: auto;
        left: 50%;
        width: min(360px, calc(100vw - 28px));
        transform: translateX(-50%);
    }
    .mobile-missions-open .planner-validation,
    .mobile-settings-open .planner-validation,
    .mobile-missions-open .planner-warning-panel,
    .mobile-settings-open .planner-warning-panel {
        opacity: 0;
        pointer-events: none;
    }

    .planner-mobile-backdrop {
        position: absolute;
        inset: 0;
        z-index: 44;
        display: block;
        border: 0;
        background: rgba(2, 5, 10, 0.58);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    .mobile-missions-open .planner-mobile-backdrop,
    .mobile-settings-open .planner-mobile-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    .mobile-missions-open .planner-mobile-backdrop {
        left: min(330px, 86vw);
    }
    .mobile-settings-open .planner-mobile-backdrop {
        bottom: min(78svh, 680px);
    }

  .planner-mobile-actions {
    position: absolute;
        top: 16px;
        right: 14px;
        bottom: auto;
        z-index: 70;
        display: flex;
        flex: 0 0 auto;
        gap: 6px;
        margin-left: 0;
        transition: opacity 0.18s ease, transform 0.18s ease;
    }
    .planner-mobile-actions button {
        min-width: 82px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0 11px;
        border: 1px solid rgba(255,255,255,0.16);
        border-radius: 8px;
        background: rgba(9,12,18,0.90);
        box-shadow: 0 12px 30px rgba(0,0,0,0.36);
        color: var(--text);
        font: 750 12px/1 var(--font);
        cursor: pointer;
    }
    .planner-mobile-actions #btnOpenMissionDrawer {
        position: fixed;
        top: calc(var(--planner-nav-h) + 16px);
        left: 14px;
        z-index: 70;
    }
    .planner-mobile-actions button:hover,
    .planner-mobile-actions button[aria-expanded="true"] {
        border-color: rgba(240,165,0,0.48);
        background: rgba(240,165,0,0.10);
        color: #fff;
    }
    .mobile-settings-open .planner-mobile-actions,
    .mobile-missions-open .planner-mobile-actions {
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
    }
    .planner-mobile-action-icon {
        position: relative;
        width: 16px;
        height: 16px;
        display: inline-block;
        color: var(--amber);
    }
    .planner-mobile-action-icon-list::before {
        content: "";
        position: absolute;
        inset: 2px 0;
        border-top: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        box-shadow: inset 0 4px 0 -2px currentColor, inset 0 -4px 0 -2px currentColor;
    }
    .planner-mobile-action-icon-sliders::before,
    .planner-mobile-action-icon-sliders::after {
        content: "";
        position: absolute;
        left: 1px;
        right: 1px;
        height: 2px;
        background: currentColor;
        box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor;
    }
    .planner-mobile-action-icon-sliders::after {
        left: 4px;
        right: auto;
        top: -2px;
        width: 4px;
        height: 6px;
        border-radius: 2px;
        box-shadow: 6px 6px 0 0 currentColor, 2px 12px 0 0 currentColor;
    }

    .planner-body .ops-mission-rail {
        position: absolute;
        inset: 0 auto 0 0;
        z-index: 50;
        width: min(330px, 86vw);
        max-height: none;
        border-right: 1px solid rgba(255,255,255,0.12);
        border-left: 0;
        box-shadow: 20px 0 54px rgba(0,0,0,0.46);
        transform: translateX(-102%);
        transition: transform 0.22s ease;
    }
    .mobile-missions-open .ops-mission-rail {
        transform: translateX(0);
    }
    .planner-body.mission-rail-collapsed .ops-mission-rail .ops-panel-head {
        justify-content: space-between;
        padding: 14px 16px;
    }
    .planner-body.mission-rail-collapsed .ops-mission-rail .ops-panel-head > div:not(.ops-panel-actions) {
        display: grid;
    }
    .planner-body.mission-rail-collapsed .ops-new-mission-btn {
        display: block;
    }
    .planner-body.mission-rail-collapsed .ops-mission-list {
        display: block;
    }
    .planner-body.mission-rail-collapsed .ops-empty {
        display: grid;
    }
    .planner-body .ops-collapse-icon,
    .planner-body.mission-rail-collapsed .ops-collapse-icon {
        transform: rotate(45deg);
        margin: 0 0 0 4px;
    }

    .planner-body .mp-panel {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 46;
        width: 100%;
        height: min(78svh, 680px);
        max-height: min(78svh, 680px);
        display: flex;
        overflow: hidden;
        padding-bottom: env(safe-area-inset-bottom);
        border: 1px solid rgba(255,255,255,0.12);
        border-width: 1px 0 0;
        border-radius: 18px 18px 0 0;
        background: rgba(9,11,17,0.97);
        box-shadow: 0 -18px 54px rgba(0,0,0,0.48);
        transform: translateY(102%);
        transition: transform 0.24s ease;
    }
    .mobile-settings-open .mp-panel {
        height: min(78svh, 680px);
        transform: translateY(0);
    }
    .mp-sheet-toggle {
        position: sticky;
        top: 0;
        z-index: 3;
        width: 100%;
        min-height: 52px;
        flex: 0 0 52px;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 12px;
        padding: 13px 18px 9px;
        border: 0;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        background: rgba(9,11,17,0.98);
        color: var(--text);
        text-align: left;
        cursor: pointer;
    }
    .mp-sheet-grabber {
        position: absolute;
        top: 6px;
        left: 50%;
        width: 38px;
        height: 4px;
        transform: translateX(-50%);
        border-radius: 999px;
        background: rgba(255,255,255,0.24);
    }
    .mp-sheet-heading {
        display: grid;
        gap: 2px;
    }
    .mp-sheet-heading strong {
        font-size: 13px;
    }
    .mp-sheet-heading small {
        color: var(--text-dim);
        font-size: 10px;
    }
    .mp-sheet-chevron {
        width: 10px;
        height: 10px;
        border-top: 2px solid var(--amber);
        border-left: 2px solid var(--amber);
        transform: translateY(3px) rotate(45deg);
        transition: transform 0.2s ease;
    }
    .mobile-settings-open .mp-sheet-chevron {
        transform: translateY(-3px) rotate(225deg);
    }
    .planner-body:not(.mobile-settings-open) .mp-panel-scroll > .mp-section:first-of-type,
    .planner-body:not(.mobile-settings-open) .mp-panel-scroll > .mp-settings-accordion,
    .planner-body:not(.mobile-settings-open) .mp-panel-scroll > .mp-section-grow,
    .planner-body:not(.mobile-settings-open) .mp-panel-scroll > .mp-safety-section,
    .planner-body:not(.mobile-settings-open) .mp-panel-scroll > .mp-note {
        display: none;
    }
    .planner-body:not(.mobile-settings-open) .mp-panel-scroll > .mp-section:nth-of-type(2) {
        padding: 8px 14px 10px;
        border: 0;
    }
    .planner-body:not(.mobile-settings-open) .mp-panel-scroll > .mp-section:nth-of-type(2) > .mp-section-title {
        display: none;
    }
    .planner-body:not(.mobile-settings-open) .mp-stat {
        display: none;
        min-height: 38px;
        padding: 5px 8px;
        align-items: center;
        justify-content: center;
    }
    .planner-body:not(.mobile-settings-open) .mp-stat-group {
        display: contents;
    }
    .planner-body:not(.mobile-settings-open) .mp-stat-group-title {
        display: none;
    }
    .planner-body:not(.mobile-settings-open) .mp-stat-mobile-key {
        display: flex;
    }
    .planner-body:not(.mobile-settings-open) .mp-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding: 0;
    }
    .mobile-settings-open .mp-panel-scroll > .mp-section {
        flex: 0 0 auto;
    }
    .mobile-settings-open .mp-stats {
        grid-template-columns: 1fr;
    }
    .mobile-settings-open .mp-stat-group {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .mobile-settings-open .mp-stat-group-quality {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mobile-settings-open .mp-controls {
        display: flex;
        flex-direction: column;
    }
    .mobile-settings-open .mp-ctrl {
        min-width: 0;
    }

    .planner-body .draw-toolbar {
        top: 58px;
        left: 14px;
    }
    .planner-body .ops-map-controls {
        top: 16px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
    .planner-body .map-tools {
        top: auto;
        bottom: calc(16px + env(safe-area-inset-bottom));
        left: 12px;
    }
    .planner-body .map-tools-panel {
        width: min(320px, calc(100vw - 24px));
    }
    .planner-body .map-search-panel {
        left: 0;
        bottom: 48px;
    }
    .planner-body .map-zoom-ctrl {
        top: auto;
        bottom: calc(74px + env(safe-area-inset-bottom));
        left: 12px;
    }
    .planner-body .planner-empty-hint {
        top: 42%;
        width: min(360px, calc(100% - 32px));
    }
}

@media (max-width: 620px) {
    .planner-body .planner-nav {
        gap: 8px;
        padding: 0 10px;
    }
    .planner-body .planner-nav .nav-logo {
        width: 30px;
        flex: 0 0 30px;
    }
    .planner-body .planner-nav .nav-logo .logo-fly,
    .planner-body .planner-nav .nav-logo .logo-path {
        display: none;
    }
    .planner-body .planner-validation {
        position: absolute;
        top: 50%;
        right: auto;
        left: 50%;
        z-index: 42;
        max-width: min(180px, calc(100vw - 180px));
        justify-content: center;
        transform: translate(-50%, -50%);
        background: rgba(9,12,18,0.88);
        box-shadow: 0 8px 24px rgba(0,0,0,0.28);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .planner-body .planner-warning-panel {
        position: fixed;
        top: calc(var(--planner-nav-h) + 46px);
        right: 12px;
        left: 12px;
        width: auto;
        transform: none;
    }
    .mobile-missions-open .planner-validation,
    .mobile-settings-open .planner-validation,
    .mobile-missions-open .planner-warning-panel,
    .mobile-settings-open .planner-warning-panel {
        opacity: 0;
        pointer-events: none;
    }
    .planner-body .planner-nav .btn {
        min-width: 52px;
        padding: 0 10px;
    }
    .planner-body .draw-toolbar {
        top: 58px;
    }
    .planner-body .ops-map-controls {
        top: 16px;
    }
    .planner-mobile-actions {
        gap: 5px;
        margin-left: 0;
    }
    .planner-mobile-actions button {
        width: 34px;
        min-width: 34px;
        padding: 0;
    }
    .planner-mobile-action-label {
        display: none;
    }
}

@media (max-width: 420px) {
    .mobile-settings-open .mp-ctrl {
        min-height: 0;
    }
    .planner-body .planner-empty-hint span {
        display: none;
    }
}
body:not(.planner-body) .mp-section-grow > .mp-section-title { display: none; }
body:not(.planner-body) #btnDrawUndo,
body:not(.planner-body) #btnDrawRedo,
body:not(.planner-body) #btnProfileLine,
body:not(.planner-body) .mp-stat-group-quality,
body:not(.planner-body) .mp-stat-group-route,
body:not(.planner-body) .mp-controls > .mp-ctrl:last-child,
body:not(.planner-body) .mp-controls > .mp-ctrl-sep:nth-last-child(2),
body:not(.planner-body) .mp-route-action { display: none; }
body:not(.planner-body) .draw-toolbar { left: 14px; }
body:not(.planner-body) .map-tools,
body:not(.planner-body) .map-zoom-ctrl { left: 12px; }
body:not(.planner-body) .mp-ctrl {
    flex: 1;
    min-height: 38px;
    padding: 5px 8px;
    gap: 4px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    border-radius: 0;
    background: transparent;
}
body:not(.planner-body) .mp-lbl { font-size: 8px; }
body:not(.planner-body) .mp-row { grid-template-columns: 22px 52px 22px; gap: 5px; }
body:not(.planner-body) .mp-val-wrap { width: 52px; }
body:not(.planner-body) .mp-num { font-size: 18px; }
body:not(.planner-body) .mp-unit { font-size: 9px; }
body:not(.planner-body) .mp-btn { width: 22px; height: 22px; font-size: 14px; }
body:not(.planner-body) .mp-note { padding: 4px 8px 6px; font-size: 8px; }

.draw-tb-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    background: rgba(9, 12, 18, 0.94);
    box-shadow: 0 4px 12px rgba(0,0,0,0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ccc;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.1s;
    user-select: none;
}
.draw-tb-btn svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.draw-tb-btn.active,
.draw-tb-btn:hover,
.draw-tb-btn.is-drawing {
    background: var(--amber);
    border-color: #ffc43d;
    color: #1a1200;
    box-shadow: 0 0 0 1px rgba(255,196,61,0.28),
                0 5px 16px rgba(240,165,0,0.45);
}
.draw-tb-btn-danger:hover {
    background: rgba(204,34,34,0.14);
    border-color: rgba(204,34,34,0.45);
    color: #ff7777;
}
.draw-tb-btn:active { transform: scale(0.94); }
.draw-tb-btn:disabled {
    opacity: 1;
    border-color: rgba(255,255,255,0.08);
    background: rgba(9, 12, 18, 0.88);
    color: rgba(195,205,217,0.36);
    cursor: not-allowed;
    transform: none;
}

@media (min-width: 1001px) {
    .draw-toolbar,
    .map-zoom-ctrl {
        gap: 5px;
    }
    .draw-tb-btn,
    .map-zoom-ctrl button,
    .map-tool-btn {
        width: 34px;
        height: 34px;
    }
    .draw-tb-btn svg {
        width: 19px;
        height: 19px;
    }
    .map-tool-btn svg {
        width: 18px;
        height: 18px;
    }
    .map-zoom-ctrl button {
        font-size: 19px;
    }
}

/* Crosshair cursor while draw mode is active */
#missionSvg.draw-active { cursor: crosshair !important; }

/* Preview: placed-edges polyline */
.draw-preview-line {
    fill: none;
    stroke: #FFE600;
    stroke-width: 1.4;
    stroke-dasharray: 5 3;
    opacity: 0.8;
    pointer-events: none;
}

/* Rubber band segment from last vertex to cursor */
.draw-rubber {
    stroke: #FFE600;
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.45;
    pointer-events: none;
}

/* Placed vertices while drawing */
.draw-vertex {
    fill: rgba(255,230,0,0.2);
    stroke: #FFE600;
    stroke-width: 1.5;
    pointer-events: none;
}
.draw-vertex-first {
    fill: rgba(255,230,0,0.35);
    stroke-width: 2;
}

/* Snap ring highlighting the first vertex when close enough to close */
.draw-snap-ring {
    fill: none;
    stroke: #FFE600;
    stroke-width: 1.5;
    opacity: 0.7;
    pointer-events: none;
    animation: snapPulse 0.5s ease-in-out infinite alternate;
}
@keyframes snapPulse {
    from { r: 9; opacity: 0.5; }
    to   { r: 12; opacity: 1;  }
}

/* Vertex drag handles */
.poly-handle {
    fill: rgba(255,230,0,0.08);
    stroke: #FFE600;
    stroke-width: 1.5;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.18s, fill 0.12s;
}
#polyHandles:not(:empty) .poly-handle { opacity: 0.5; }
.poly-handle:hover {
    fill: rgba(255,230,0,0.3);
    opacity: 1 !important;
}
.poly-handle:active { cursor: grabbing; }

/* ── Aircraft profiles ───────────────────────────────────────────────────── */
.drones-sub {
    text-align: center;
    color: var(--text-2);
    font-size: 15px;
    margin: -8px auto 40px;
    max-width: 660px;
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 1040px;
    margin: 0 auto;
}

.profile-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: grid;
    grid-template-columns: 132px 1fr;
    min-height: 188px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.profile-card:hover {
    border-color: var(--border-hi);
    box-shadow: 0 10px 32px rgba(0,0,0,0.42);
}
.profile-card--enterprise {
    border-color: rgba(240,165,0,0.18);
}

.profile-img-wrap {
    min-height: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, #0d1019 0%, #141824 60%, #0e1118 100%);
    position: relative;
}
.profile-img-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 55%, rgba(19,22,30,0.55));
    pointer-events: none;
}
.drone-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s;
}
.profile-card:hover .drone-img { transform: scale(1.035); }

.profile-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.profile-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    color: var(--blue-lo);
    background: var(--blue-dim);
    border: 1px solid rgba(45,109,181,0.25);
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    line-height: 1;
}
.profile-status--enterprise {
    color: var(--amber);
    background: transparent;
    border-color: transparent;
    padding-right: 0;
}
.profile-card--coming-soon .drone-img {
    filter: grayscale(0.72) saturate(0.5);
    opacity: 0.62;
}
.profile-card--coming-soon:hover .drone-img {
    transform: none;
}

.drone-name {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.25;
}

.profile-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
    margin: 0;
    border-top: 1px solid var(--border);
}
.profile-specs div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.profile-specs dt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-3);
}
.profile-specs dd {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    overflow-wrap: anywhere;
}

.profile-note {
    max-width: 680px;
    margin: 18px auto 0;
    text-align: center;
    font-size: 12px;
    color: var(--text-3);
}

@media (max-width: 1024px) {
    .profile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .profile-card {
        grid-template-columns: 1fr;
    }
    .profile-img-wrap {
        aspect-ratio: 16 / 8;
        min-height: 0;
    }
    .profile-img-wrap::after {
        background: linear-gradient(180deg, transparent 55%, rgba(19,22,30,0.45));
    }
}
@media (max-width: 420px) {
    .profile-info {
        padding: 18px;
    }
    .profile-head {
        flex-direction: column;
        gap: 8px;
    }
    .profile-specs {
        grid-template-columns: 1fr;
    }
}

/* This final body override must follow the legacy stacked-planner breakpoint. */
@media (max-width: 1000px) {
    body.planner-body {
        height: 100svh;
        min-height: 100svh;
        overflow: hidden;
    }
}

/* Tablet planner: preserve the full map and use opposing side drawers. */
@media (min-width: 701px) and (max-width: 1000px) {
    .planner-body {
        --planner-tablet-panel-w: min(360px, 46vw);
    }
    .planner-body .mp-panel {
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: var(--planner-tablet-panel-w);
        height: 100%;
        max-height: none;
        padding-bottom: 0;
        border-width: 0 0 0 1px;
        border-radius: 0;
        box-shadow: -20px 0 54px rgba(0,0,0,0.46);
        transform: translateX(102%);
        transition: transform 0.22s ease;
    }
    .mobile-settings-open .mp-panel {
        height: 100%;
        transform: translateX(0);
    }
    .mobile-settings-open .planner-mobile-backdrop {
        right: var(--planner-tablet-panel-w);
        bottom: 0;
    }
    .planner-body .map-tools {
        bottom: 16px;
    }
    .planner-body .map-zoom-ctrl {
        bottom: 74px;
    }
    .mp-sheet-heading small {
        font-size: 11px;
    }
}

/* SEO topic pages */
.seo-body {
    min-height: 100vh;
}
.seo-hero {
    padding: 88px 0 76px;
    background:
        radial-gradient(circle at 14% 12%, rgba(45,109,181,0.18), transparent 34%),
        radial-gradient(circle at 88% 28%, rgba(240,165,0,0.10), transparent 28%);
    border-bottom: 1px solid var(--border);
}
.seo-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
    align-items: center;
    gap: clamp(44px, 7vw, 92px);
}
.seo-hero-copy h1 {
    max-width: 760px;
    margin: 12px 0 22px;
    font-size: clamp(2.5rem, 5vw, 4.6rem);
    line-height: 1.03;
    letter-spacing: -0.055em;
}
.seo-lead {
    max-width: 680px;
    color: var(--text-2);
    font-size: clamp(1rem, 1.5vw, 1.16rem);
    line-height: 1.78;
}
.seo-hero-copy .hero-ctas {
    margin-top: 30px;
}
.seo-hero-note {
    max-width: 650px;
    margin-top: 22px;
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.6;
}
.seo-hero-figure {
    overflow: hidden;
    border: 1px solid var(--border-hi);
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 30px 80px rgba(0,0,0,0.42);
}
.seo-hero-figure img {
    width: 100%;
    height: auto;
}
.seo-hero-figure figcaption {
    padding: 12px 16px;
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.5;
}
.seo-section {
    padding: 88px 0;
}
.seo-section-alt {
    background: var(--bg-alt);
    border-block: 1px solid rgba(255,255,255,0.025);
}
.seo-section h2,
.seo-cta h2 {
    max-width: 760px;
    margin: 10px 0 30px;
    font-size: clamp(2rem, 3.4vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -0.045em;
}
.seo-copy-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(46px, 8vw, 110px);
}
.seo-copy-grid h2 {
    margin-bottom: 0;
}
.seo-prose {
    max-width: 760px;
    color: var(--text-2);
    font-size: 16px;
    line-height: 1.85;
}
.seo-prose p + p,
.seo-prose p + ul {
    margin-top: 20px;
}
.seo-prose strong {
    color: var(--text);
}
.seo-prose code {
    padding: 2px 6px;
    border: 1px solid var(--border-hi);
    border-radius: 5px;
    background: rgba(255,255,255,0.04);
    color: var(--blue-lo);
}
.seo-text-link {
    color: var(--blue-lo);
    font-weight: 700;
    text-decoration: none;
}
.seo-text-link:hover {
    color: #fff;
}
.seo-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.seo-feature-card {
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--card);
}
.seo-feature-card h3 {
    margin-bottom: 10px;
    font-size: 17px;
}
.seo-feature-card p {
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.75;
}
.seo-process {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    list-style: none;
}
.seo-process li {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--card);
}
.seo-process li > span {
    color: var(--amber);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
}
.seo-process h3 {
    margin-bottom: 8px;
    font-size: 17px;
}
.seo-process p {
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.7;
}
.seo-checklist {
    display: grid;
    gap: 10px;
    padding: 0;
    list-style: none;
}
.seo-checklist li {
    position: relative;
    padding-left: 28px;
}
.seo-checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 800;
}
.seo-faq {
    max-width: 900px;
}
.seo-faq details {
    border-top: 1px solid var(--border);
}
.seo-faq details:last-child {
    border-bottom: 1px solid var(--border);
}
.seo-faq summary {
    padding: 22px 4px;
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
}
.seo-faq details p {
    max-width: 760px;
    padding: 0 4px 24px;
    color: var(--text-2);
    line-height: 1.75;
}
.seo-cta {
    padding: 70px 0;
    background: linear-gradient(135deg, rgba(45,109,181,0.13), rgba(240,165,0,0.08));
    border-top: 1px solid var(--border);
}
.seo-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
.seo-cta h2 {
    margin-bottom: 0;
}
.seo-footer {
    margin-top: 0;
}

@media (max-width: 900px) {
    .seo-hero-grid,
    .seo-copy-grid {
        grid-template-columns: 1fr;
    }
    .seo-hero-grid {
        gap: 46px;
    }
    .seo-copy-grid {
        gap: 30px;
    }
    .seo-nav-links {
        display: none;
    }
}

@media (max-width: 700px) {
    .seo-body .nav {
        flex-wrap: nowrap;
    }
    .seo-body .nav-actions {
        display: flex;
    }
    .seo-body .nav-actions .btn-ghost {
        display: none;
    }
    .seo-body .nav-actions .btn-primary {
        padding-inline: 12px;
        font-size: 12px;
    }
    .seo-hero {
        padding: 58px 0 54px;
    }
    .seo-section {
        padding: 64px 0;
    }
    .seo-feature-grid,
    .seo-process {
        grid-template-columns: 1fr;
    }
    .seo-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Release-facing public content */
.section-intro {
    max-width: 720px;
    margin: -22px auto 34px;
    text-align: center;
    color: var(--text-2);
    font-size: 16px;
    line-height: 1.75;
}
/* Features as zig-zag rows: text one side, screenshot the other, alternating.
   No JavaScript — scrolling is the interaction, and rows stack on phones. */
.zz-rows {
    display: flex;
    flex-direction: column;
    gap: 64px;
    margin-top: 10px;
    /* Keep text and image adjacent on wide monitors instead of letting the
       two halves drift to the container edges. */
    max-width: 1020px;
    margin-inline: auto;
}
.zz-row {
    /* Every row shares the same column grid, so left-side content always
       starts on one vertical axis and right-side content on another —
       images and text in alternating rows line up edge to edge. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 56px;
    /* Text top-aligns with the image's upper edge. */
    align-items: start;
}
.zz-row-flip .zz-text { order: 2; }
.zz-row-flip .zz-img { order: 1; }
.zz-text { padding-top: 6px; }
.zz-num {
    display: block;
    margin-bottom: 8px;
    font: 800 13px var(--font);
    letter-spacing: 1.2px;
    color: var(--amber, #ffc24b);
}
.zz-text h3 { margin: 0 0 10px; font-size: 21px; }
.zz-text p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.7; max-width: 44ch; }
.zz-img img {
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    box-shadow: 0 16px 44px rgba(0,0,0,0.35);
}
@media (max-width: 900px) {
    .zz-rows { gap: 44px; }
    .zz-row,
    .zz-row-flip { grid-template-columns: 1fr; gap: 18px; }
    /* Stacked: image above its text, in the same order for every row. */
    .zz-row .zz-img,
    .zz-row-flip .zz-img { order: -1; }
    .zz-row-flip .zz-text { order: 0; }
    .zz-img img { max-width: 340px; margin-inline: auto; }
    .zz-text p { max-width: none; }
}

/* "On the roadmap" pill for problem cards that version 1 does not solve yet. */
.card-soon {
    display: inline-block;
    margin-top: 14px;
    padding: 4px 11px;
    border: 1px solid rgba(255,194,75,0.45);
    border-radius: 999px;
    color: var(--amber, #ffc24b);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.faq-container {
    max-width: 860px;
}
.homepage-faq {
    border-top: 1px solid rgba(255,255,255,.1);
}
.footer-link-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font: inherit;
    cursor: pointer;
}
.footer-link-button:hover {
    color: var(--text);
}
.cookie-consent {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 5000;
    width: min(620px, calc(100vw - 44px));
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    background: rgba(12,15,21,.97);
    box-shadow: 0 22px 70px rgba(0,0,0,.5);
    backdrop-filter: blur(18px);
}
.cookie-consent[hidden] {
    display: none;
}
.cookie-consent-copy {
    flex: 1 1 auto;
}
.cookie-consent-copy strong {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
}
.cookie-consent-copy p {
    margin: 0 0 5px;
    color: var(--text-2);
    font-size: 12px;
    line-height: 1.55;
}
.cookie-consent-copy a,
.legal-page a,
.auth-terms a {
    color: var(--blue-lo);
}
.cookie-consent-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}
.cookie-consent-actions .btn {
    white-space: nowrap;
}
.legal-container {
    max-width: 820px;
}
.contact-page {
    padding: 48px 0 56px;
}
.contact-container {
    max-width: 700px;
}
.contact-form {
    margin-top: 18px;
}
.legal-page h1 {
    margin: 8px 0 8px;
    font-size: clamp(2.1rem, 5vw, 3.7rem);
    letter-spacing: -.045em;
}
.legal-updated {
    margin: 0 0 38px !important;
    color: var(--text-dim) !important;
    font-size: 13px !important;
}
.legal-page h2 {
    margin: 38px 0 12px;
    font-size: 1.35rem;
}
.legal-page p,
.legal-page li {
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.8;
}
.legal-page ul {
    display: grid;
    gap: 8px;
    padding-left: 22px;
}
.auth-terms {
    margin: -10px 0 18px;
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.55;
}

@media (max-width: 700px) {
    .cookie-consent {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }
    .cookie-consent-actions {
        justify-content: flex-end;
    }
}

@media (max-width: 560px) {
    .cookie-consent {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
    }
    .cookie-consent-actions {
        flex-direction: column;
    }
    .cookie-consent-actions .btn {
        width: 100%;
    }
}
/* Contour options use the same label-left, control-right rows as tolerance. */
#contourBody { grid-template-columns: 1fr; }
#contourBody .mp-split-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    align-items: center;
    gap: 12px;
    width: 100%;
}
#contourBody .mp-split-field select,
#contourBody .mp-style-select,
#contourBody .mp-style-select-trigger { width: 112px !important; min-width: 0; }
#contourBody .mp-contour-select { text-transform: none; letter-spacing: normal; }
#contourBody .mp-drone-select-wrap { width: 112px; justify-self: end; }
/* Direction: chips sit beside the label on the first line; the slider
   and spin box get their own full-width line beneath. */
.mp-ctrl-direction {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label value"
        "slider slider";
}
.mp-ctrl-direction > .mp-lbl-row { grid-area: label; }
.planner-body .mp-spin,
.planner-body .mp-split-field input {
    width: 64px;
    height: 36px;
    border-color: var(--border-hi);
    background: rgba(0,0,0,0.25);
    text-align: center;
}
.planner-body #splitBody .mp-split-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.planner-body .mp-terrain-section .mp-split-toggle,
.planner-body #terrainFollowBody .mp-split-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    align-items: center;
    min-height: 36px;
    gap: 12px;
}
.planner-body .mp-terrain-section .mp-split-toggle > input,
.planner-body #terrainFollowBody .mp-split-field > input {
    justify-self: center;
}
.planner-body #terrainFollowBody .mp-split-field > span {
    color: #f2f5fa;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.planner-body .mp-settings-accordion .mp-lbl,
.planner-body .mp-settings-accordion .mp-split-toggle > span,
.planner-body .mp-settings-accordion .mp-field > label,
.planner-body .mp-settings-accordion .mp-field > span,
.planner-body .mp-settings-accordion .mp-marker-setting-label {
    color: #f2f5fa;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.planner-body .mp-settings-accordion input[type="number"],
.planner-body .mp-settings-accordion .mp-drone-select,
.planner-body .mp-settings-accordion .mp-style-select-trigger {
    color: #f2f5fa;
    font: 700 14px var(--font);
}
.planner-body .mp-settings-accordion input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}
.planner-body .mp-settings-accordion input[type="number"]::-webkit-inner-spin-button,
.planner-body .mp-settings-accordion input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}
.planner-body .mp-settings-accordion .mp-drone-select,
.planner-body .mp-settings-accordion .mp-style-select-trigger {
    height: 36px;
    border-color: var(--border-hi);
    background: rgba(0,0,0,0.25);
}
.planner-body .mp-split-section .mp-split-summary {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 600;
}
.mp-route-action {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    padding: 12px 3px 1px;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.mp-route-action input { order: initial; }
.mp-route-action .mp-route-action-icon {
    width: 26px;
    height: 26px;
    color: #fff;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mp-route-action .mp-route-action-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.mp-route-action-copy strong {
    color: #f2f5fa;
    font-size: 11px;
}
.mp-route-action-copy small {
    margin: 0;
    color: var(--text-dim);
    font-size: 9.5px;
    line-height: 1.3;
}
/* Mission multi-select */
.ops-select-btn {
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 6px;
    background: rgba(255,255,255,0.07);
    color: #d5deea;
    font: 700 10px var(--font);
    cursor: pointer;
}
.ops-select-btn:hover { color: #fff; border-color: rgba(127,179,232,0.66); background: rgba(45,109,181,0.14); }
.ops-select-btn.is-active { color: #fff; border-color: var(--blue-lo); background: rgba(127,179,232,0.12); }
.ops-select-btn:disabled { opacity: 0.36; cursor: default; }
.ops-mission-check {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 15px;
    height: 15px;
    accent-color: var(--blue-lo);
    cursor: pointer;
}
.ops-mission-rail.is-selecting .ops-mission-check { display: block; }
.ops-mission-rail.is-selecting .ops-mission-delete,
.ops-mission-rail.is-selecting .ops-mission-actions,
.ops-mission-rail.is-selecting .ops-mission-active-name button { display: none; }
.ops-mission-rail.is-selecting .ops-mission-card { cursor: pointer; }
.ops-select-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    font: 600 11px var(--font);
    color: var(--text-dim);
}
.ops-select-bar[hidden] { display: none; }
.ops-select-bar span { margin-right: auto; }
.ops-select-bar button {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 7px;
    background: transparent;
    color: var(--text-2);
    font: 700 11px/1 var(--font);
    cursor: pointer;
}
.ops-select-bar button:hover { color: #fff; }
.ops-select-bar button.is-danger { border-color: rgba(255,107,107,0.45); color: #ff8080; }
.ops-select-bar button.is-danger:hover { background: rgba(255,107,107,0.12); color: #ff9d9d; }
.ops-select-bar button:disabled { opacity: 0.4; cursor: default; }
/* New-mission row: Select sits to the right of + New mission. */
.ops-new-row { display: flex; gap: 7px; margin: 10px 10px 0; }
.ops-new-row .ops-new-mission-btn { flex: 1; margin: 0; }
.ops-new-row .ops-select-btn { min-height: 36px; padding: 0 12px; }
/* Profile-line tool armed: crosshair over the map signals click-to-place. */
#mapBg.profile-arming,
#mapBg.profile-arming .leaflet-grab,
#mapBg.profile-arming .leaflet-interactive { cursor: crosshair !important; }
/* Profile-line endpoint badges (map) and chart end markers. */
.profile-pt {
    box-sizing: border-box;
    border-radius: 50%;
    background: #38c8ff;
    border: 1.5px solid rgba(6,9,14,0.8);
    color: #06222e;
    font: 800 9px var(--font);
    line-height: 13px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.45);
    pointer-events: none;
}
.elev-endpoint { fill: #38c8ff; font: 800 8px var(--font); }
/* Terrain-inserted waypoint badge - same family as .wp-badge, cyan. */
.wp-badge-terrain {
    background: #38c8ff;
    border-color: rgba(6,9,14,0.8);
    font-size: 7.5px;
    line-height: 11px;
}

/* Landing: terrain-aware section */
.terrain-sec {
    background:
        radial-gradient(900px 420px at 50% -80px, rgba(56,200,255,0.07), transparent 70%),
        transparent;
}
.terrain-visual {
    max-width: 640px;
    margin: 26px auto 34px;
}
.terrain-visual svg { display: block; width: 100%; height: auto; }
.tv-ground { fill: rgba(120,145,120,0.20); stroke: rgba(160,190,160,0.35); stroke-width: 1; }
.tv-flat { stroke: rgba(255,255,255,0.30); stroke-width: 1.6; stroke-dasharray: 7 6; }
.tv-follow { stroke: #38c8ff; stroke-width: 2.2; stroke-linecap: round; }
.tv-wp { fill: #ffe600; stroke: rgba(6,9,14,0.85); stroke-width: 1.4; }
.tv-wp-add { fill: #38c8ff; }
.tv-lbl { font: 600 10px var(--font); letter-spacing: 0.4px; text-transform: uppercase; }
.tv-lbl-flat { fill: rgba(255,255,255,0.45); }
.tv-lbl-follow { fill: rgba(56,200,255,0.9); }
.terrain-caption {
    margin: 10px auto 0;
    max-width: 520px;
    text-align: center;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted, #9aa7b5);
}

/* Landing: problem-card illustrations */
.prob-illust { margin: -2px 0 14px; }
.prob-illust svg { display: block; width: 100%; height: auto; max-height: 110px; }
.pi-dark { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.28); stroke-width: 1.5; }
.pi-screen { fill: rgba(10,14,20,0.85); stroke: rgba(255,255,255,0.14); stroke-width: 1; }
.pi-knob { fill: rgba(255,255,255,0.30); }
.pi-amber { stroke: var(--amber, #ffc24b); stroke-width: 2; stroke-linecap: round; }
.pi-ground { fill: rgba(120,145,120,0.20); stroke: rgba(160,190,160,0.35); stroke-width: 1; }
.pi-flat { stroke: rgba(255,255,255,0.35); stroke-width: 1.6; stroke-dasharray: 7 6; }
.pi-danger { stroke: #ff6b6b; stroke-width: 2.4; stroke-linecap: round; }
.pi-cyan { stroke: #38c8ff; stroke-width: 2.2; stroke-linecap: round; }
.pi-faded { stroke: rgba(56,200,255,0.35); stroke-width: 2.2; stroke-dasharray: 6 5; stroke-linecap: round; }
.pi-batt rect { fill: rgba(10,14,20,0.9); stroke: rgba(255,255,255,0.45); stroke-width: 1.2; }
.pi-batt .pi-batt-low { fill: #ff6b6b; stroke: none; }
.pi-lock { fill: none; stroke: var(--amber, #ffc24b); stroke-width: 2; stroke-linecap: round; }
.pi-lock-body { fill: rgba(10,14,20,0.9); stroke: var(--amber, #ffc24b); stroke-width: 2; }

/* Landing: how-it-works demo video */
.hiw-video {
    max-width: 860px;
    margin: 26px auto 34px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0,0,0,0.45);
    background: #0a0e14;
}
.hiw-video video { display: block; width: 100%; height: auto; }
.demo-note { margin-top: 0; }
.demo-cta { text-align: center; margin-top: 4px; }

/* Small screens are deliberately view-only; mission selection and map navigation remain available. */
@media (max-width: 1000px) {
    .planner-body .planner-view-only-notice {
        position: absolute;
        top: 16px;
        left: 50%;
        z-index: 43;
        width: min(360px, calc(100% - 220px));
        display: grid;
        gap: 2px;
        padding: 9px 12px;
        border: 1px solid rgba(240,165,0,0.42);
        border-radius: 9px;
        background: rgba(9,12,18,0.92);
        box-shadow: 0 10px 30px rgba(0,0,0,0.34);
        color: var(--text);
        text-align: center;
        transform: translateX(-50%);
        backdrop-filter: blur(12px);
    }
    .planner-view-only-notice strong { font-size: 12px; }
    .planner-view-only-notice span { color: var(--text-2); font-size: 10px; }
    .mobile-missions-open .planner-view-only-notice { display: none; }

    .planner-body .planner-action-btn,
    .planner-body #btnOpenSettingsSheet,
    .planner-body .draw-toolbar,
    .planner-body .mp-panel,
    .planner-body .mp-route-update-bar,
    .planner-body .ops-map-controls,
    .planner-body .planner-empty-hint,
    .planner-body .planner-validation,
    .planner-body .planner-warning-panel,
    .planner-body .ops-new-row,
    .planner-body .ops-mission-delete,
    .planner-body .ops-mission-check,
    .planner-body #btnImportKml,
    .planner-body #exportEditSafety,
    .planner-body .ops-mission-active-name button,
    .planner-body .ops-select-bar {
        display: none !important;
    }
    .planner-body .ops-mission-actions { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .planner-body .planner-view-only-notice {
        top: auto;
        bottom: calc(16px + env(safe-area-inset-bottom));
        width: min(360px, calc(100% - 28px));
    }
}