/* ==========================================================================
   MOVETAIN PLANNED ROUTES & ISOLATED ROUTE PLANNER STYLES
   Designed to match Movetain Alpine Tactical design language
   ========================================================================== */

/* ── Route Planner Isolation: Hide Room, Nodes, Gateway, Weather, Storage, Share, Ruler, Target ── */
body.route-planner-active .room-status-group,
body.route-planner-active #btn-weather,
body.route-planner-active #btn-storage,
body.route-planner-active #btn-share,
body.route-planner-active #btn-tool-ruler,
body.route-planner-active #btn-tool-target,
body.route-planner-active .sidebar-tabs,
body.route-planner-active #tab-team,
body.route-planner-active #tab-chat,
body.route-planner-active #tab-points,
body.route-planner-active #tab-tracks,
body.route-planner-active #sidebar-live-wrapper {
    display: none !important;
}

/* ── Force crosshair cursor everywhere on map canvas when planner is active ── */
body.route-planner-active #map,
body.route-planner-active #map-container,
body.route-planner-active #map canvas,
body.route-planner-active .maplibregl-canvas-container,
body.route-planner-active .maplibregl-canvas,
body.route-planner-active .maptiler-canvas {
    cursor: crosshair !important;
}

body.route-planner-active .planner-checkpoint-marker {
    cursor: grab !important;
    z-index: 20 !important;
    pointer-events: auto !important;
}

body.route-planner-active .planner-checkpoint-marker:active {
    cursor: grabbing !important;
}

body.route-planner-active .btn-cp-action svg,
body.route-planner-active .btn-cp-action svg line,
body.route-planner-active .btn-cp-action svg circle {
    pointer-events: none !important;
}

#btn-planner-header-save {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background-color: var(--button-bg, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--button-border, rgba(255, 255, 255, 0.15));
    color: var(--text-primary, #ffffff);
    font-family: var(--font-mono, monospace);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 7px;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 4px !important;
}

#btn-planner-header-save:hover {
    background-color: rgba(0, 229, 255, 0.18);
    border-color: #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
    color: #ffffff;
}

/* ── Lobby Plan Route Button (Matches CREATE ROOM .btn-primary .btn-sm 1:1) ── */
.btn-plan-route {
    background-color: #00e5ff !important;
    color: #000000 !important;
    border-color: transparent !important;
    font-weight: 700 !important;
}

.btn-plan-route:hover {
    background-color: #33ecff !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.45) !important;
    color: #000000 !important;
}

.btn-plan-route:active {
    transform: scale(0.97);
}

.btn-plan-route svg {
    flex-shrink: 0;
}

/* ── Lobby Planned Routes Counter Badge ── */
.lobby-planned-badge {
    background: rgba(0, 229, 255, 0.12);
    color: #00e5ff;
    border: 1px solid rgba(0, 229, 255, 0.3);
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Ensure History header badges and buttons never break into 2 lines */
.lobby-rooms-heading {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
}

.lobby-rooms-heading h3 {
    margin-right: 2px;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.lobby-limit-tag {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ── Bento Planned Route Card (Matches recorded / cloud Bento card layout 1:1) ── */
.bento-planned-card {
    border-color: rgba(0, 229, 255, 0.28) !important;
}

.bento-planned-card:hover {
    border-color: #00e5ff !important;
    box-shadow: 0 8px 26px rgba(0, 229, 255, 0.2) !important;
    background: rgba(16, 30, 48, 0.85) !important;
}

.bento-planned-card .bento-history-metric-value {
    color: #00e5ff !important;
}

.bento-planned-card .bento-history-sparkline-svg polyline {
    stroke: #00e5ff !important;
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.65)) !important;
}

.planned-synced-badge {
    background: rgba(0, 229, 255, 0.12) !important;
    border: 1px solid rgba(0, 229, 255, 0.35) !important;
    color: #00e5ff !important;
}

.bento-planned-card .btn-send-phone {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    height: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.3);
    color: #00e5ff;
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bento-planned-card .btn-send-phone:hover {
    background: rgba(0, 229, 255, 0.25);
    border-color: #00e5ff;
    color: #ffffff;
}

/* ── Floating Route Planner Action Bar (Top of Map) ── */
.route-planner-bar {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000 !important;
    display: none;
    align-items: center;
    gap: 12px;
    background: rgba(13, 20, 28, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(0, 229, 255, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75), 0 0 20px rgba(0, 229, 255, 0.2);
    border-radius: 12px;
    padding: 6px 14px;
    color: #ffffff;
    max-width: calc(100% - 40px);
    box-sizing: border-box;
    pointer-events: auto;
}

.route-planner-bar.active {
    display: flex;
}

.planner-bar-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.planner-bar-tag {
    background: rgba(0, 229, 255, 0.2);
    color: #00e5ff;
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(0, 229, 255, 0.35);
}

.planner-title-input {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 8px;
    width: 170px;
    outline: none;
    transition: all 0.2s ease;
}

.planner-title-input:focus {
    border-color: #00e5ff;
    background: rgba(0, 229, 255, 0.08);
}

.planner-metrics-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px 0 2px;
    border-left: none;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    font-family: var(--font-mono, monospace);
    font-size: 11px;
}

.planner-metric-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.planner-metric-item .p-lbl {
    font-size: 8px;
    color: var(--text-secondary, #94a3b8);
    font-weight: 600;
}

.planner-metric-item .p-val {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
}

.planner-bar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-planner-tool {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    padding: 5px 9px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-planner-tool:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.btn-planner-tool.active-tool {
    background: rgba(0, 229, 255, 0.22);
    border-color: #00e5ff;
    color: #00e5ff;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
}

.btn-planner-tool.active-tool:hover {
    background: rgba(0, 229, 255, 0.35);
    color: #ffffff;
}

/* ── Interactive Map Marker for Planner Checkpoints (1, 2, 3...) ── */
.planner-checkpoint-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto;
    will-change: transform; /* Hardware-accelerated GPU layer - locked to map coordinates without lag */
}

.planner-cp-core {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #00e5ff;
    border: 2px solid #ffffff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.8), 0 3px 6px rgba(0, 0, 0, 0.5);
    color: #0b131a;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease;
    pointer-events: none;
}

.planner-checkpoint-marker.start .planner-cp-core {
    background: #4ade80;
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.85), 0 3px 6px rgba(0, 0, 0, 0.5);
}

.planner-checkpoint-marker.finish .planner-cp-core {
    background: #f43f5e;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.85), 0 3px 6px rgba(0, 0, 0, 0.5);
}

.planner-checkpoint-marker:hover .planner-cp-core {
    transform: scale(1.18);
    box-shadow: 0 0 16px rgba(0, 229, 255, 1), 0 4px 8px rgba(0, 0, 0, 0.6);
}

.planner-checkpoint-marker:active .planner-cp-core {
    transform: scale(1.05);
}

/* ── Floating Add Point Popup along the Line ── */
.planner-add-point-popup {
    background: rgba(13, 20, 28, 0.95);
    border: 1px solid #00e5ff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 229, 255, 0.3);
    border-radius: 6px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 700;
    color: #00e5ff;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.planner-add-point-popup:hover {
    background: #00e5ff;
    color: #0b131a;
}

/* ── Confirmation Modal (Unsaved changes / Exit to Lobby) ── */
.planner-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
}

.planner-modal-backdrop.open {
    display: flex;
}

.planner-modal-box {
    background: #0f172a;
    border: 1px solid rgba(0, 229, 255, 0.4);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 229, 255, 0.2);
    border-radius: 14px;
    padding: 22px 24px;
    max-width: 420px;
    width: 90%;
    color: #ffffff;
    box-sizing: border-box;
}

.planner-modal-box h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: #00e5ff;
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.5px;
}

.planner-modal-box p {
    margin: 0 0 20px;
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.5;
}

.planner-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.planner-modal-btn {
    padding: 7px 14px;
    border-radius: 6px;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.planner-modal-btn.btn-discard {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.35);
}

.planner-modal-btn.btn-discard:hover {
    background: #ef4444;
    color: #ffffff;
}

.planner-modal-btn.btn-cancel {
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    border-color: rgba(255, 255, 255, 0.18);
}

.planner-modal-btn.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.planner-modal-btn.btn-save-exit {
    background: #00e5ff;
    color: #0b131a;
    font-weight: 700;
}

.planner-modal-btn.btn-save-exit:hover {
    background: #33ecff;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.5);
}

/* ==========================================================================
   ROUTE PLANNER SIDEBAR (Replaces room/nodes sidebar during planning)
   ========================================================================== */
.sidebar-route-planner {
    display: none;
    flex-direction: column;
    flex: 1;
    height: 100%;
    background-color: var(--bg-surface, #0f172a);
    color: #e2e8f0;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.planner-sb-header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(0, 0, 0, 0.15);
}

.planner-sb-tag-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.planner-sb-pts-badge {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 700;
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.15);
    border: 1px solid rgba(0, 229, 255, 0.35);
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.planner-sb-title-wrap {
    width: 100%;
}

.planner-sb-title-input {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 6px;
    color: #ffffff;
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    font-weight: 700;
    padding: 7px 10px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: all 0.2s ease;
}

.planner-sb-title-input:focus {
    border-color: #00e5ff;
    background: rgba(0, 229, 255, 0.08);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
}

/* Tactical Metrics Bar in Sidebar (Above Checkpoints) */
.planner-sb-metrics-bar {
    display: grid;
    grid-template-columns: 0.9fr 0.9fr 0.9fr 1.35fr;
    gap: 5px;
    margin-top: 2px;
}

.planner-sb-metric-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 5px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    transition: all 0.2s ease;
}

.planner-sb-metric-chip:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(0, 229, 255, 0.25);
}

.planner-sb-metric-lbl {
    font-family: var(--font-mono, monospace);
    font-size: 8px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.6px;
}

.planner-sb-metric-val {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 700;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.planner-sb-metric-val.gain {
    color: #4ade80;
}

.planner-sb-metric-val.loss {
    color: #fb923c;
}

.planner-sb-metric-val.alt-range {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 10px;
    color: #f1f5f9;
    letter-spacing: -0.2px;
}

.planner-sb-metric-val.alt-range .alt-sub {
    display: inline-flex;
    align-items: center;
    gap: 1.5px;
    white-space: nowrap;
}

.planner-sb-metric-val.alt-range .alt-arr {
    font-weight: 800;
    font-size: 10.5px;
    line-height: 1;
}

.planner-sb-metric-val.alt-range .alt-arr.down {
    color: #94a3b8;
}

.planner-sb-metric-val.alt-range .alt-arr.up {
    color: #94a3b8;
}

/* Checkpoints & Intervals List Section */
.planner-sb-section-title {
    padding: 10px 16px 8px;
    font-family: var(--font-mono, monospace);
    font-size: 10.5px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.planner-sb-list-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 4px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Checkpoint Card in Sidebar */
.planner-cp-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 8px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.15s ease;
    cursor: default;
}

.planner-cp-card:hover {
    border-color: #00e5ff;
    background: rgba(0, 229, 255, 0.08);
}

.planner-cp-badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #00e5ff;
    color: #0b131a;
    font-family: var(--font-mono, monospace);
    font-weight: 800;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
}

.planner-cp-badge.start {
    background: #10b981;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
}

.planner-cp-badge.finish {
    background: #f59e0b;
    color: #0b131a;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.7);
}

.planner-cp-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.planner-cp-title {
    font-size: 12px;
    font-weight: 700;
    color: #f1f5f9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-cp-sub {
    font-family: var(--font-mono, monospace);
    font-size: 9.5px;
    color: #94a3b8;
}

.planner-cp-comment-wrap {
    margin-top: 4px;
    width: 100%;
}

.planner-cp-comment-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(11, 19, 26, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    padding: 3px 7px;
    font-size: 10.5px;
    color: #e2e8f0;
    font-family: inherit;
    outline: none;
    transition: all 0.2s ease;
}

.planner-cp-comment-input:focus {
    border-color: #00e5ff;
    background: rgba(0, 229, 255, 0.08);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.25);
}

.planner-cp-comment-input::placeholder {
    color: rgba(148, 163, 184, 0.45);
    font-size: 10px;
}

.planner-cp-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.btn-cp-action {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #e2e8f0;
    width: 24px;
    height: 24px;
    padding: 0;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-cp-action svg {
    display: block;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn-cp-action:hover {
    background: rgba(0, 229, 255, 0.2);
    border-color: #00e5ff;
    color: #00e5ff;
}

.btn-cp-action.delete:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
    color: #ff6b6b;
}

/* Connecting Leg (Промежуток) between Checkpoints */
.planner-leg-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0 3px 20px;
}

.planner-leg-line {
    width: 2px;
    height: 16px;
    background: rgba(0, 229, 255, 0.35);
    border-radius: 1px;
}

.planner-leg-badge {
    background: rgba(0, 229, 255, 0.08);
    border: 1px dashed rgba(0, 229, 255, 0.35);
    border-radius: 4px;
    padding: 2px 8px;
    font-family: var(--font-mono, monospace);
    font-size: 9.5px;
    color: #00e5ff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.planner-leg-badge .leg-dist {
    font-weight: 700;
    color: #ffffff;
}

.planner-leg-badge .leg-elev {
    color: #38bdf8;
}

/* Empty State in Sidebar */
.planner-sb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 36px 16px;
    color: #64748b;
}

.planner-sb-empty-icon {
    font-size: 32px;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.3));
}

.planner-sb-empty-text {
    font-size: 13px;
    font-weight: 700;
    color: #cbd5e1;
    margin-bottom: 4px;
}

.planner-sb-empty-sub {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.4;
}

/* ── Compact Icon Badges for Planned Route Bento Cards ── */
.btn-planned-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    flex-shrink: 0;
    user-select: none;
}

.btn-planned-icon-badge svg {
    flex-shrink: 0;
}

.btn-planned-icon-badge.phone-stored {
    color: #4AE176;
    background: rgba(74, 225, 118, 0.12);
    border-color: rgba(74, 225, 118, 0.4);
    box-shadow: 0 0 6px rgba(74, 225, 118, 0.2);
}

.btn-planned-icon-badge.phone-stored:hover {
    background: rgba(74, 225, 118, 0.22);
    border-color: #4AE176;
}

.btn-planned-icon-badge.phone-missing {
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.btn-planned-icon-badge.phone-missing:hover {
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.15);
    border-color: rgba(0, 229, 255, 0.4);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.25);
}

.btn-planned-icon-badge.cloud-synced {
    color: #2979ff;
    background: rgba(41, 121, 255, 0.12);
    border-color: rgba(41, 121, 255, 0.35);
    box-shadow: 0 0 6px rgba(41, 121, 255, 0.2);
}

.btn-planned-icon-badge.cloud-synced:hover {
    background: rgba(41, 121, 255, 0.22);
    border-color: #2979ff;
}



.planner-route-layers {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 12;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}
.planner-route-layers button {
    border: 1px solid rgba(201, 209, 255, .35);
    border-radius: 8px;
    background: #20293b;
    color: #c9d1ff;
    padding: 9px 12px;
    font: inherit;
    cursor: pointer;
}
.planner-route-layers button:hover { background: #303b52; }
.planner-route-layers .route-layers-toggle {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--text-secondary);
    background: rgba(16, 25, 45, .85);
    border: 1px solid var(--border-highlight);
    border-radius: 10px;
    padding: 10px 15px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.planner-route-layers .route-layers-toggle:hover {
    color: #fff;
    background: rgba(38, 47, 65, .9);
}
.planner-route-layers .route-layers-toggle[aria-expanded=true] {
    color: #fff;
    background: rgba(186, 155, 255, .18);
    border-color: rgba(186, 155, 255, .4);
}
.route-layers-panel {
    margin-top: 7px;
    width: min(280px, calc(100vw - 48px));
    padding: 10px;
    border: 1px solid rgba(201, 209, 255, .25);
    border-radius: 12px;
    background: rgba(17, 25, 43, .97);
    box-shadow: 0 8px 24px #0005;
    color: #dde3f5;
}
.route-layers-panel[hidden] { display: none; }
.route-layers-panel input[type=search] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ffffff25;
    border-radius: 7px;
    background: #0e1627;
    color: #dde3f5;
    padding: 9px;
    font: inherit;
}
.route-layers-list { max-height: 280px; overflow-y: auto; margin: 8px 0; }
.route-layers-list label { display: flex; align-items: center; gap: 9px; padding: 9px 3px; cursor: pointer; }
.route-layers-list input { accent-color: #b39cd9; flex-shrink: 0; }
.route-layers-list span { overflow-wrap: anywhere; }
.route-layers-list .route-layer-title { flex: 1; min-width: 0; }
.route-layers-list .route-layer-kind {
    flex-shrink: 0;
    font-size: 8px;
    letter-spacing: .3px;
    padding: 3px 4px;
    border: 1px solid currentColor;
    border-radius: 4px;
    opacity: .8;
}
.route-layer-kind.recorded { color: #8ebcb2; }
.route-layer-kind.measure { color: #d8b88b; }
.route-layer-kind.planned { color: #c9d1ff; }
.route-layers-list .loading { opacity: .55; }
.route-layers-list p { padding: 8px; color: #9ba8c2; }
.route-layers-clear { width: 100%; }
.route-layer-group { border-bottom: 1px solid #ffffff15; }
.route-layer-group summary {
    padding: 10px 4px;
    color: #c9d1ff;
    font-weight: 700;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.route-layer-group-content { padding-left: 10px; }
.route-layer-group-content > .route-layer-group summary { color: #aeb9ce; }