#routeTitle {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    /* Keep H1 visually identical to the previous span: same font size, line
       height, color, margins, and ellipsis truncation. */
    h1#routeTitleText.route-title-heading {
        margin: 0;
        padding: 0;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        color: inherit;
        letter-spacing: inherit;
        text-rendering: inherit;
        display: inline;
    }
    #routeTitleText {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: min(70vw, 560px);
    }
    .route-not-found-toast {
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.85);
        color: #fff;
        padding: 10px 16px;
        border-radius: 8px;
        font-size: 14px;
        z-index: 2400;
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
        opacity: 0;
        transition: opacity .25s ease;
        pointer-events: none;
    }
    .route-not-found-toast.is-visible { opacity: 1; }
    .wall-seo-text {
        font-size: 14px;
        line-height: 1.5;
        color: #d8d8d8;
        margin-top: 10px;
    }
    #wallInfoBtn {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        border: 1px solid rgba(0, 179, 255, 0.45);
        background: rgba(0, 0, 0, 0.6);
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        backdrop-filter: blur(3px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
        transition: border-color .15s, background-color .15s, transform .15s;
    }
    #wallInfoBtn:hover {
        border-color: rgba(0, 179, 255, 0.75);
        background: rgba(0, 33, 66, 0.75);
        transform: translateY(-1px);
    }
    #wallInfoBtn:focus {
        outline: 2px solid #ffcc00;
        outline-offset: 2px;
    }
    .wall-info-overlay {
        position: fixed;
        inset: 0;
        z-index: 2200;
        background: rgba(0, 0, 0, 0.64);
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
        box-sizing: border-box;
    }
    .wall-info-modal {
        width: min(92vw, 720px);
        max-height: min(88vh, 860px);
        overflow: auto;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(15, 15, 15, 0.95);
        color: #e9e9e9;
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
        padding: 14px;
        scrollbar-width: thin;
    }
    .wall-info-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 8px;
        position: sticky;
        top: 0;
        z-index: 2;
        background: rgba(15, 15, 15, 0.95);
        padding-bottom: 6px;
    }
    .wall-info-head h3 {
        margin: 0;
        font-size: 17px;
        color: #fff;
    }
    .wall-info-sub {
        color: #b9b9b9;
        margin: 4px 0 12px 0;
        font-size: 13px;
    }
    .wall-info-close {
        border: 1px solid #4f4f4f;
        border-radius: 10px;
        width: 38px;
        height: 38px;
        background: #232323;
        color: #ececec;
        cursor: pointer;
        font-size: 16px;
    }
    .wall-info-close:hover {
        border-color: #6a6a6a;
    }
    .wall-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 8px;
        margin: 10px 0 12px 0;
    }
    .wall-info-stat {
        border: 1px solid rgba(255, 255, 255, 0.09);
        background: rgba(255, 255, 255, 0.03);
        border-radius: 10px;
        padding: 10px;
    }
    .wall-info-stat .k {
        color: #b8b8b8;
        font-size: 12px;
        margin-bottom: 3px;
    }
    .wall-info-stat .v {
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        word-break: break-word;
    }
    .wall-info-section-title {
        margin: 10px 0 8px 0;
        font-size: 12px;
        color: #d4d4d4;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 700;
    }
    .wall-info-comments {
        font-size: 14px;
        line-height: 1.45;
        color: #ececec;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        padding: 10px;
        margin-bottom: 12px;
        white-space: pre-wrap;
    }
    .wall-grade-chart {
        display: flex;
        align-items: flex-end;
        gap: 8px;
        min-height: 215px;
        padding: 10px 10px 12px 10px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.03);
        overflow-x: auto;
        overflow-y: hidden;
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .wall-grade-bar {
        width: 42px;
        min-width: 42px;
        border-radius: 8px 8px 7px 7px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        color: #111;
        font-weight: 700;
        font-size: 10px;
        padding-bottom: 7px;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: inset 0 -12px 18px rgba(0, 0, 0, 0.11);
    }
    .wall-grade-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
    .wall-grade-label {
        font-size: 11px;
        color: #cfcfcf;
        white-space: nowrap;
    }
    .wall-grade-hint {
        display: none;
        margin: -2px 0 8px 0;
        font-size: 11px;
        color: #aeb6c1;
    }
    .wall-grade-bar.is-clickable {
        cursor: pointer;
    }
    .wall-grade-popover {
        position: fixed;
        z-index: 2300;
        width: min(92vw, 320px);
        max-height: min(56vh, 420px);
        overflow: auto;
        display: none;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(14, 14, 14, 0.97);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
        padding: 8px;
        scrollbar-width: thin;
    }
    .wall-grade-popover-head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        background: rgba(14, 14, 14, 0.97);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 4px 4px 6px 4px;
        margin-bottom: 4px;
    }
    .wall-grade-popover-title {
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }
    .wall-grade-popover-close {
        border: 1px solid #525252;
        border-radius: 8px;
        background: #222;
        color: #eee;
        font-size: 12px;
        width: 26px;
        height: 26px;
        cursor: pointer;
    }
    .wall-grade-route-item {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.03);
        color: #eaeaea;
        padding: 8px 9px;
        margin: 6px 0;
        cursor: pointer;
        text-align: left;
        font-size: 13px;
    }
    .wall-grade-route-item:hover {
        border-color: rgba(255, 204, 0, 0.65);
        background: rgba(255, 255, 255, 0.07);
    }
    .wall-grade-route-color {
        width: 9px;
        height: 26px;
        border-radius: 4px;
        flex: 0 0 auto;
    }
    .wall-grade-route-text {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .wall-grade-route-name {
        color: #fff;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .wall-grade-route-meta {
        color: #c2c2c2;
        font-size: 11px;
    }
    .wall-chart-empty {
        color: #b8b8b8;
        font-size: 13px;
    }
    @media (max-width: 700px) {
        .wall-info-overlay {
            align-items: flex-end;
            padding: 0;
            background: rgba(0, 0, 0, 0.55);
        }
        .wall-info-modal {
            width: 100vw;
            max-width: 100vw;
            max-height: min(82vh, 760px);
            border-radius: 14px 14px 0 0;
            border-left: none;
            border-right: none;
            border-bottom: none;
            padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px));
        }
        .wall-info-grid {
            grid-template-columns: 1fr 1fr;
            gap: 7px;
        }
        .wall-info-stat { padding: 9px; }
        .wall-info-stat .k { font-size: 11px; }
        .wall-info-stat .v { font-size: 14px; }
        .wall-info-comments {
            font-size: 13px;
            line-height: 1.42;
        }
        .wall-grade-chart {
            min-height: 182px;
            gap: 6px;
            padding: 9px 8px 10px 8px;
        }
        .wall-grade-bar {
            width: 36px;
            min-width: 36px;
            font-size: 10px;
            padding-bottom: 6px;
        }
        .wall-grade-label {
            font-size: 10px;
        }
        .wall-grade-hint {
            display: block;
        }
        .wall-grade-popover {
            width: calc(100vw - 16px);
            max-height: 52vh;
            left: 8px !important;
            right: 8px !important;
        }
        .wall-grade-route-item {
            padding: 9px 8px;
            margin: 5px 0;
        }
    }
    @media (hover: hover) and (pointer: fine) {
        .wall-grade-col:hover .wall-grade-bar {
            transform: translateY(-2px);
            filter: brightness(1.08);
            border-color: rgba(255, 255, 255, 0.32);
        }
        .wall-grade-col:hover .wall-grade-label {
            color: #ffffff;
        }
    }
    /* Route detail chart toolbar (outside canvas) */
    .rdp-chart { position: relative; }
    /* Default (desktop) layout keeps toolbar above, status below toolbar, chart last */
    .rdp-chart-block { display:flex; flex-direction: column; }
    .rdp-chart-toolbar { order:1; display:flex; justify-content:flex-start; gap:6px; margin:6px 0 6px 0; }
    .rdp-chart-status { order:2; }
    .rdp-chart { order:3; }
    .rdp-chart-toolbar button { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; border:2px solid transparent; border-radius:6px; background:rgba(0,0,0,0.6); color:#fff; cursor:pointer; transition:border-color .15s, background-color .15s, color .15s; }
    .rdp-chart-toolbar button:focus { outline:2px solid #ffcc00; outline-offset:2px; }
    .rdp-chart-toolbar button.active { background:rgba(0,0,0,0.6); color:#fff; border-color:#ffcc00; }
    .rdp-chart-status { display:flex; justify-content:flex-start; align-items:center; gap:8px; color:#aaa; font-size:12px; margin:4px 0; }
    .rdp-info-text {
        white-space: pre-line;
    }
    @media (max-width: 700px) {
        /* Mobile layout: toolbar hidden; two status items on the same row */
        .rdp-chart-block {
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: stretch;
        }
        .rdp-chart-status {
            margin: 4px 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: stretch;
            gap: 8px;
        }
        .rdp-chart { order: 3; }
        .rdp-chart-toolbar { display: none !important; }
        /* Inline status rows */
        .rdp-status-item { display:flex; align-items:center; justify-content:flex-start; gap:6px; }
        .rdp-status-item button {
            width:26px; height:26px; border-radius:8px;
            display:inline-flex; align-items:center; justify-content:center;
            box-sizing:border-box; border:3px solid transparent; background:rgba(0,0,0,0.6); color:#fff; cursor:pointer;
            transition:border-color .15s, background-color .15s, color .15s;
        }
        .rdp-status-item button:focus { outline:2px solid #ffcc00; outline-offset:2px; }
        .rdp-status-item button.active { border-color:#ffcc00; background:rgba(0,0,0,0.6); color:#fff; }
    }
    /* Route panel header:
       - Only the H3 takes vertical space (so route list starts right below it)
       - Handle + sort are overlaid (sticky) at top-right and do NOT push content down */
    .route-header { position: sticky; top: 0; z-index: 10; margin:0; padding:0; background: transparent; }
    .route-header h3 {
        margin: 0;
        display: inline-block;
        padding: 2px 6px;
        border-radius: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 44px); /* leave room for top-right handle */
        box-sizing: border-box;
    }
    .route-toolbar { position: absolute; top: 0; right: 0; margin: 0; padding: 0; }
    .route-filter-hidden-count {
        display:none;
        margin:4px 0 8px 0;
        font-size:12px;
        color:#a7a7a7;
    }
    /* Expanded state placement: handle on top-right, sort directly below; both sticky via header */
    .route-toolbar #routeInfoHandle { position: absolute; top: 0; right: 0; }
    #routeSortBtn {
        position: absolute;
        right: 0;
        top: calc(30px + 6px); /* below handle */
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:32px;
        height:32px;
        border-radius:8px;
        border:1px solid #444;
        background:rgba(0,0,0,0.6);
        color:#fff;
        cursor:pointer;
        padding-top:0px;
        padding-bottom:0px;
        margin:0;
        left:auto;
    }
    #routeSortBtn:focus { outline:2px solid #ffcc00; outline-offset:2px; }
    /* Prevent long route names from going underneath the right-side overlay buttons */
    #routeList { padding-right: 44px; box-sizing: border-box; }
    .route-sort-tooltip { position:fixed; right:10px; z-index:2147483000 !important; background:#1f1f1f; color:#fff; border:1px solid #444; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.4); padding:10px; width:320px; display:none; }
    .route-sort-tooltip h4 { margin:0 0 8px 0; font-size:14px; font-weight:600; color:#eaeaea; }
    .route-sort-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0; }
    .route-sort-options { display:flex; flex-wrap:wrap; gap:8px; }
    .route-sort-options label { display:flex; align-items:center; gap:6px; background:#2a2a2a; padding:6px 8px; border-radius:8px; cursor:pointer; border:1px solid transparent; }
    .route-sort-options input[type="radio"] { accent-color:#ffcc00; }
    .route-sort-dir { display:flex; gap:8px; }
    .route-sort-dir button { display:inline-flex; align-items:center; justify-content:center; padding:6px 8px; border-radius:8px; border:1px solid #444; background:#2a2a2a; color:#fff; cursor:pointer; }
    .route-sort-dir button.active { border-color:#ffcc00; }
    .route-grade-filter { margin-top:10px; padding-top:10px; border-top:1px solid #363636; }
    .route-grade-filter[hidden] { display:none !important; }
    .route-grade-filter-toggle { display:flex; align-items:center; gap:8px; font-size:13px; color:#eaeaea; cursor:pointer; }
    .route-grade-filter-toggle input[type="checkbox"] { accent-color:#ffcc00; }
    .route-grade-filter-controls { margin-top:10px; }
    .route-grade-filter-controls.disabled { opacity:0.45; }
    .route-grade-filter-extremes { display:flex; justify-content:space-between; gap:12px; font-size:12px; }
    .route-grade-filter-extremes { color:#9d9d9d; margin-top:8px; }
    .route-grade-filter-range-wrap { position:relative; height:54px; }
    .route-grade-filter-values {
        position:absolute;
        left:0;
        right:0;
        top:0;
        height:22px;
        margin:0;
        pointer-events:none;
    }
    .route-grade-filter-current {
        position:absolute;
        top:0;
        transform:translateX(-50%);
        color:#ffffff;
        font-weight:600;
        font-size:12px;
        white-space:nowrap;
    }
    .route-grade-filter-track,
    .route-grade-filter-fill { position:absolute; left:0; right:0; top:34px; height:4px; border-radius:999px; }
    .route-grade-filter-track { background:#303030; }
    .route-grade-filter-fill { background:linear-gradient(135deg, #ffcc00, rgb(255,174,0)); }
    .route-grade-filter-range-wrap input[type="range"] {
        position:absolute;
        left:0;
        top:22px;
        width:100%;
        height:28px;
        margin:0;
        background:transparent;
        pointer-events:none;
        touch-action:none;
        -webkit-appearance:none;
        appearance:none;
        z-index:2;
    }
    .route-grade-filter-range-wrap input[type="range"]::-webkit-slider-runnable-track { height:4px; background:transparent; }
    .route-grade-filter-range-wrap input[type="range"]::-moz-range-track { height:4px; background:transparent; }
    .route-grade-filter-range-wrap input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance:none;
        appearance:none;
        width:16px;
        height:16px;
        border-radius:50%;
        border:2px solid #1f1f1f;
        background:#ffcc00;
        box-shadow:0 2px 8px rgba(0,0,0,0.35);
        margin-top:-6px;
        pointer-events:auto;
        cursor:pointer;
    }
    .route-grade-filter-range-wrap input[type="range"]::-moz-range-thumb {
        width:16px;
        height:16px;
        border-radius:50%;
        border:2px solid #1f1f1f;
        background:#ffcc00;
        box-shadow:0 2px 8px rgba(0,0,0,0.35);
        pointer-events:auto;
        cursor:pointer;
    }
    .route-grade-filter-range-wrap input[type="range"]:disabled::-webkit-slider-thumb,
    .route-grade-filter-range-wrap input[type="range"]:disabled::-moz-range-thumb { cursor:not-allowed; filter:saturate(0.6); }
    .route-grade-filter-hint { margin-top:8px; font-size:12px; color:#a7a7a7; line-height:1.35; }
    .route-item.grade-filtered-out { opacity:0.38; filter:grayscale(0.75); }
    .route-item.grade-filtered-out .route-name,
    .route-item.grade-filtered-out .route-grade-row,
    .route-item.grade-filtered-out .route-length,
    .route-item.grade-filtered-out .route-grade { color:#9a9a9a !important; }
    /* Mobile route list: desktop-like layout and readability */
    @media (max-width: 700px) {
        .route-item { padding: 3px 0; display:flex; align-items:stretch; gap:6px; }
        .route-content { display:flex; flex-direction:column; min-width:0; align-items:flex-start; }
        .route-line1 { line-height: 1.25; display:flex; align-items:center; gap:6px; }
        /* Vertical color band spanning both lines */
        .route-item > .color-square { display:block; width:6px; height:auto; align-self:stretch; border-radius:3px; margin-right:0; }
        /* Grade row under name (no parentheses), compact and readable */
        .route-grade-row { display:inline-block; width:fit-content; align-self:flex-start; box-sizing:border-box; max-width:100%; padding:1px 3px; background:rgba(255,255,255,0.06); color:#eaeaea; border-radius:4px; }
        .route-item:hover .route-grade-row { background: rgba(255,255,255,0.10); }
        .route-grade-row::before, .route-grade-row::after { content: none !important; }
        .route-grade { font-size: 0.75em; }
        .route-grade-row .route-length { font-size: 0.65em; }
        .route-grade-row .mid-dot { opacity: 0.6; }
        .route-grade-row .beta-symbol { color: #00b3ff; margin-left: 6px; font-weight: 700; }
        .route-grade-row .mobile-prot-symbol { display:inline-flex; align-items:center; margin-left: 6px; line-height: 0; }
        /* Long names on one line with ellipsis */
        .route-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
        .route-info-symbol { color:#00b3ff; display:inline-flex; align-items:center; flex:0 0 auto; }
    }
    /* Mobile-specific behavior for sort tooltip: bottom sheet */
    @media (max-width: 700px) {
        .route-sort-tooltip { position:fixed; left:0; right:0; bottom:0; width:auto; border-radius:12px 12px 0 0; padding:14px; border-top:1px solid #444; border-left:none; border-right:none; z-index:2147483000 !important; }
        #routeSortBtn { width:30px; height:30px; border-radius:10px; }
    }

    /* Left suggestion panel for new route (similar style to detail panel) */
    .route-suggest-panel {
        position: fixed;
        right: 0;
        top: var(--handle-top, 80px);
        bottom: calc(100px + env(safe-area-inset-bottom, 0px));
        width: min(92vw, 400px);
        max-width: 400px;
        display:none;
        background: rgba(18,18,18,0.96);
        color:#eaeaea;
        border-left:1px solid #444;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.4);
        z-index: 900;
        overflow-y:auto;
        overflow-x:hidden;
        overscroll-behavior: contain;
        padding: var(--panel-padding, 15px);
        box-sizing: border-box;
    }
    .rsp-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 0 10px 0; }
    .rsp-title-row { display:flex; align-items:center; gap:8px; min-width:0; }
    .rsp-title { margin:0; font-size:16px; font-weight:600; color:#fff; }
    .rsp-close { background:transparent; color:#ddd; border:none; font-size:18px; cursor:pointer; }
    .rsp-form { display:block; }
    .rsp-form .rsp-field { display:block; margin:10px 0; }
    .rsp-form label { display:block; font-size:12px; color:#cfcfcf; margin-bottom:6px; }
    .rsp-label-row { display:flex; align-items:center; gap:8px; }
    .rsp-info-wrap { display:inline-flex; align-items:center; }
    .rsp-info-btn {
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border:none;
        padding:0;
        background:transparent;
        color:#00b3ff;
        line-height:0;
        cursor:pointer;
    }
    .rsp-info-btn svg { width:12px; height:12px; }
    .rsp-info-btn:focus { outline:2px solid rgba(0,179,255,0.45); outline-offset:3px; border-radius:999px; }
    .rsp-info-tooltip {
        position:fixed;
        left:-9999px;
        top:-9999px;
        width:min(320px, 70vw);
        padding:12px;
        border:1px solid #3f4b68;
        border-radius:12px;
        background:#171c26;
        color:#eef3ff;
        box-shadow:0 12px 30px rgba(0,0,0,0.4);
        display:none;
        z-index:910010;
        pointer-events:auto;
    }
    .rsp-info-tooltip::before {
        content:'';
        position:absolute;
        right:-6px;
        top:50%;
        width:12px;
        height:12px;
        background:#171c26;
        border-top:1px solid #3f4b68;
        border-right:1px solid #3f4b68;
        transform:translateY(-50%) rotate(45deg);
    }
    .rsp-info-tooltip p { margin:0 0 8px; font-size:13px; line-height:1.45; }
    .rsp-info-tooltip p:last-child { margin-bottom:0; }
    .rsp-form input,.rsp-form select,.rsp-form textarea { width:100%; box-sizing:border-box; padding:10px 12px; border-radius:10px; border:1px solid #444; background:#2a2a2a; color:#fff; font-size:14px; }
    .rsp-form textarea { resize:vertical; min-height:76px; }
    .rsp-form .error { border-color:#e74c3c; }
    /* Pending required fields: amber, so it reads as "still missing" instead of
       the red "invalid value" used after a failed submit. */
    .rsp-form input.rsp-missing,
    .rsp-form select.rsp-missing,
    .rsp-form textarea.rsp-missing {
        border-color:#ffcc00;
        background:rgba(255,204,0,0.06);
        box-shadow:0 0 0 2px rgba(255,204,0,0.14);
    }
    .rsp-form .rsp-missing-field > label,
    .rsp-form .rsp-missing-field > label > .rsp-label-row > span:first-child { color:#ffd86a; }
    .rsp-form .rsp-missing-box { border-color:rgba(255,204,0,0.55); box-shadow:0 0 0 2px rgba(255,204,0,0.10); }
    .rsp-form .rsp-missing-box .rsp-terms-label,
    .rsp-form .rsp-missing-box > .rsp-check-box-head .rsp-check-box-title { color:#ffd86a; }
    .rsp-required-hint {
        margin:0 0 8px 0;
        padding:8px 10px;
        border:1px solid rgba(255,204,0,0.35);
        border-radius:10px;
        background:rgba(255,204,0,0.07);
        font-size:12px;
        color:#ffd86a;
        line-height:1.5;
    }
    .rsp-required-hint-title { display:block; margin-bottom:6px; font-weight:600; }
    .rsp-required-chips { display:flex; flex-wrap:wrap; gap:6px; }
    .rsp-required-chip {
        display:inline-flex;
        align-items:center;
        padding:4px 9px;
        border-radius:999px;
        border:1px solid rgba(255,204,0,0.45);
        background:rgba(255,204,0,0.12);
        color:#ffe08a;
        font-size:11px;
        font-family:inherit;
        cursor:pointer;
    }
    .rsp-required-chip:hover { background:rgba(255,204,0,0.22); border-color:#ffcc00; }
    .rsp-required-chip.is-static { cursor:default; opacity:0.85; }
    .rsp-error { color:#ff8a80; font-size:12px; margin:4px 0 0 0; min-height:16px; }
    .rsp-hint { color:#9e9e9e; font-size:12px; margin-top:4px; }
    .rsp-conq-box { position:relative; width:100%; box-sizing:border-box; padding:8px 10px; border-radius:10px; border:1px solid #444; background:#2a2a2a; color:#fff; }
    .rsp-conq-box:focus-within { border-color: rgba(255,204,0,0.6); box-shadow: 0 0 0 2px rgba(255,204,0,0.12); }
    .rsp-conq-box input { border:none; outline:none; background:transparent; padding:6px 2px; margin:0; font-size:14px; width:100%; }
    .rsp-conq-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
    .rsp-conq-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color:#eaeaea; font-size:12px; }
    .rsp-conq-chip button { width:18px; height:18px; border-radius:6px; border:1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.25); color:#fff; cursor:pointer; line-height:1; padding:0; display:inline-flex; align-items:center; justify-content:center; }
    .rsp-conq-dd { position:absolute; left:0; right:0; top:calc(100% + 6px); background: rgba(20,20,20,0.98); border:1px solid rgba(255,255,255,0.12); border-radius:10px; overflow:hidden; z-index: 2500; box-shadow: 0 10px 24px rgba(0,0,0,0.55); }
    .rsp-conq-dd-item { padding:10px 12px; cursor:pointer; font-size:13px; color:#eee; }
    .rsp-conq-dd-item:hover { background: rgba(255,204,0,0.12); }
    .rsp-conq-dd-empty { padding:10px 12px; font-size:12px; color:#bdbdbd; }
    .rsp-human-check-hidden {
        position: fixed;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
        left: -9999px;
        top: -9999px;
        overflow: hidden;
    }
    .rsp-tools { display:flex; gap:8px; margin-top:8px; }
    /* Info-only edit (touch devices): no drawing, anchors or bolts. */
    .route-suggest-panel.rsp-info-only .rsp-tools,
    .route-suggest-panel.rsp-info-only #rspPitchSection,
    .route-suggest-panel.rsp-info-only #rspShowTutorial { display:none !important; }
    .rsp-tool-btn { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #444; border-radius:8px; background:#2a2a2a; color:#fff; cursor:pointer; }
    .rsp-tool-btn:focus { outline:2px solid #ffcc00; outline-offset:2px; }
    .rsp-tool-btn:disabled { opacity:0.35; cursor:not-allowed; pointer-events:auto; }
    .rsp-tool-btn svg { width:18px; height:18px; }
    .rsp-actions { position:relative; display:block; margin-top:10px; }
    .rsp-submit-wrap { position:relative; display:block; }
    .rsp-submit-tooltip {
        position:absolute;
        left:50%;
        bottom:calc(100% + 10px);
        transform:translateX(-50%) translateY(4px);
        max-width:220px;
        width:max-content;
        padding:8px 10px;
        border:1px solid #3f3f3f;
        border-radius:10px;
        background:#171c26;
        color:#eef3ff;
        font-size:12px;
        line-height:1.35;
        box-shadow:0 10px 24px rgba(0,0,0,0.28);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
        z-index:20;
        text-align:center;
    }
    .rsp-submit-tooltip::after {
        content:'';
        position:absolute;
        left:50%;
        top:100%;
        width:10px;
        height:10px;
        background:#171c26;
        border-right:1px solid #3f3f3f;
        border-bottom:1px solid #3f3f3f;
        transform:translateX(-50%) rotate(45deg);
    }
    .rsp-submit-wrap.is-disabled:hover .rsp-submit-tooltip,
    .rsp-submit-wrap.is-disabled:focus-within .rsp-submit-tooltip {
        opacity:1;
        visibility:visible;
        transform:translateX(-50%) translateY(0);
    }
    .rsp-submit-btn { display:block; width:100%; background:linear-gradient(135deg, #ffcc00, rgb(255,174,0)); color:#3b3b3b; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; font-size:14px; }
    .rsp-submit-btn[disabled] { opacity:0.6; cursor:not-allowed; filter:saturate(0.8); }
    .rsp-grade-control { display:block; }
    .rsp-grade-control select { width:100%; }
    .rsp-grade-control .rsp-check-row { margin:8px 0 0 0; }
    .rsp-check-row { display:flex; align-items:center; gap:8px; margin:10px 0; }
    .rsp-check-box { margin:10px 0; padding:10px 12px; border:1px solid #3f3f3f; border-radius:10px; background:rgba(255,255,255,0.03); }
    .rsp-check-box-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
    .rsp-check-box-title { font-size:13px; font-weight:600; color:#f1f1f1; }
    .rsp-check-box-body { display:flex; flex-direction:column; gap:8px; }
    .rsp-check-box-body .rsp-check-row { margin:0; }
    .rsp-check-label { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; color:#cfcfcf; line-height:1.4; }
    .rsp-check-label input[type="checkbox"] { accent-color:#ffcc00; flex-shrink:0; cursor:pointer; width:16px; height:16px; }
    .rsp-terms-block { margin-top:14px; padding:12px; border:1px solid #3f3f3f; border-radius:10px; background:rgba(255,255,255,0.03); }
    .rsp-terms-block p { margin:0 0 8px; font-size:12px; line-height:1.45; color:#cfcfcf; }
    .rsp-terms-block p:last-of-type { margin-bottom:10px; }
    .rsp-terms-label { display:flex; align-items:flex-start; gap:8px; cursor:pointer; font-size:13px; color:#eaeaea; line-height:1.4; }
    .rsp-terms-label input[type="checkbox"] { margin-top:2px; accent-color:#ffcc00; flex-shrink:0; cursor:pointer; width:16px; height:16px; }
    .rsp-tip { color:#bdbdbd; font-size:14px; margin:4px 0 10px 0; }
    .rsp-pitch-box { margin-top: 10px; padding: 10px; border: 1px solid #3f3f3f; border-radius: 10px; background: rgba(255,255,255,0.03); }
    .rsp-pitch-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
    .rsp-pitch-title { margin:0; font-size:13px; color:#f1f1f1; font-weight:600; }
    .rsp-pitch-tools { display:flex; gap:8px; margin-bottom:8px; }
    .rsp-mini-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid #535353; border-radius:8px; background:#2b2b2b; color:#ececec; font-size:12px; padding:7px 9px; cursor:pointer; }
    .rsp-mini-btn.active { border-color:#ffcc00; box-shadow: inset 0 0 0 1px #ffcc00; }
    .rsp-mini-btn:hover { border-color:#808080; }
    .rsp-pitch-help { color:#9f9f9f; font-size:12px; margin: 4px 0 8px 0; }
    .rsp-pitch-list { display:flex; flex-direction:column; gap:8px; }
    .rsp-pitch-empty { border:1px dashed #4b4b4b; border-radius:8px; padding:10px; color:#9f9f9f; font-size:12px; }
    .rsp-pitch-item { border:1px solid #4a4a4a; border-radius:10px; padding:10px; background:#232323; }
    .rsp-pitch-item-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
    .rsp-pitch-item-title-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .rsp-pitch-item-title { color:#f5f5f5; font-size:13px; font-weight:600; }
    .rsp-pitch-badge {
        display:inline-flex;
        align-items:center;
        padding:3px 8px;
        border-radius:999px;
        background:rgba(255, 204, 0, 0.12);
        border:1px solid rgba(255, 204, 0, 0.38);
        color:#ffd86a;
        font-size:10px;
        font-weight:700;
        letter-spacing:.03em;
        text-transform:uppercase;
    }
    .rsp-pitch-meta { color:#9f9f9f; font-size:11px; }
    .rsp-pitch-remove {
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:34px;
        height:34px;
        padding:0;
        background:transparent;
        border:1px solid #555;
        color:#ddd;
        border-radius:8px;
        cursor:pointer;
        transition:border-color .15s ease, color .15s ease, background-color .15s ease;
    }
    .rsp-pitch-remove:hover {
        border-color:#ffcc00;
        color:#ffcc00;
        background:rgba(255, 204, 0, 0.08);
    }
    .rsp-pitch-remove svg {
        width:16px;
        height:16px;
    }
    .rsp-pitch-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:7px; }
    .rsp-pitch-grid .rsp-field { margin:0; }
    .rsp-pitch-grid .rsp-field label { margin-bottom:4px; font-size:11px; color:#bdbdbd; }
    .rsp-pitch-grid .rsp-field input,
    .rsp-pitch-grid .rsp-field select { padding:8px 9px; border-radius:8px; font-size:12px; }
    .rsp-pitch-toggle-row {
        grid-column: 1 / -1;
        display:flex;
        align-items:center;
        gap:14px;
        flex-wrap:wrap;
        min-height:34px;
    }
    .rsp-pitch-aid-fields {
        display:none;
        grid-column: 1 / -1;
        padding:10px;
        border:1px solid rgba(255, 204, 0, 0.22);
        border-radius:10px;
        background:rgba(255, 204, 0, 0.05);
    }
    .rsp-pitch-aid-fields.is-visible { display:block; }
    .rsp-pitch-aid-fields .rsp-field { max-width:220px; }
    .rsp-pitch-grid .rsp-field-anchor-toggle {
        display:flex;
        align-items:flex-end;
        justify-self:start;
        grid-column: 1 / -1;
    }
    .rsp-anchor-toggle {
        display:inline-flex;
        align-items:center;
        gap:6px;
        min-height:auto;
        width:auto;
        padding:0;
        border:none;
        border-radius:0;
        background:transparent;
        color:#f1f1f1;
        cursor:pointer;
        user-select:none;
        flex-wrap:nowrap;
    }
    .rsp-anchor-toggle input {
        width:16px;
        height:16px;
        margin:0;
        accent-color:#ffcc00;
    }
    .rsp-anchor-toggle span {
        font-size:12px;
        line-height:1.2;
        white-space:nowrap;
        display:inline-flex;
        align-items:center;
    }
    @media (max-width: 520px) {
        .rsp-pitch-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 700px) {
        .route-suggest-panel { top: 120px; bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
    }

    /* Draw tutorial overlay */
    .draw-tutorial-overlay {
        position:fixed;
        inset:0;
        z-index:910020;
        pointer-events:none;
    }
    .draw-tutorial-overlay.is-active { pointer-events:auto; }
    .draw-tutorial-backdrop {
        position:absolute;
        inset:0;
        background:rgba(0,0,0,0.72);
        transition:opacity .2s ease;
    }
    .draw-tutorial-spotlight {
        position:fixed;
        z-index:910021;
        border-radius:10px;
        box-shadow:0 0 0 9999px rgba(0,0,0,0.72);
        pointer-events:none;
        transition:top .3s ease, left .3s ease, width .3s ease, height .3s ease;
    }
    .draw-tutorial-card {
        position:fixed;
        z-index:910022;
        width:min(92vw, 360px);
        background:#1b1b1b;
        border:1px solid #3a3a3a;
        border-radius:14px;
        box-shadow:0 12px 30px rgba(0,0,0,0.5);
        padding:22px 20px 18px;
        color:#f1f1f1;
        transition:top .3s ease, left .3s ease;
        max-height:calc(100vh - 20px);
        overflow-y:auto;
    }
    .draw-tutorial-step-indicator {
        display:flex;
        gap:6px;
        justify-content:center;
        margin-bottom:16px;
    }
    .draw-tutorial-dot {
        width:8px;
        height:8px;
        border-radius:50%;
        background:#444;
        transition:background .2s ease;
    }
    .draw-tutorial-dot.active { background:#ffcc00; }
    .draw-tutorial-dot.done { background:#8a8a8a; }
    .draw-tutorial-icon {
        display:flex;
        align-items:center;
        justify-content:center;
        margin:0 auto 14px;
        width:48px;
        height:48px;
        border-radius:12px;
        background:rgba(255,204,0,0.1);
        border:1px solid rgba(255,204,0,0.25);
    }
    .draw-tutorial-icon svg { width:24px; height:24px; color:#ffcc00; }
    .draw-tutorial-media {
        position:relative;
        width:100%;
        aspect-ratio:16 / 10;
        margin:0 auto 16px;
        border-radius:12px;
        overflow:hidden;
        background:#101010;
        border:1px solid #343434;
        box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);
    }
    .draw-tutorial-media[hidden] { display:none !important; }
    .draw-tutorial-media-placeholder {
        position:absolute;
        inset:0;
        background:
            radial-gradient(circle at top left, rgba(255,204,0,0.16), transparent 45%),
            linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
            #101010;
        transition:opacity .18s ease;
    }
    .draw-tutorial-fallback-msg {
        position:absolute;
        inset:0;
        display:none;
        flex-direction:column;
        gap:8px;
        align-items:center;
        justify-content:center;
        text-align:center;
        padding:16px;
        font-size:13px;
        line-height:1.45;
        color:#b0b0b0;
        background:rgba(0,0,0,0.45);
        z-index:2;
    }
    .draw-tutorial-edit-visual {
        position:relative;
        width:min(220px, 82%);
        height:74px;
        margin-bottom:2px;
    }
    .draw-tutorial-edit-visual span {
        position:absolute;
        left:8%;
        right:8%;
        top:36px;
        height:4px;
        border-radius:999px;
        background:linear-gradient(90deg, #7b4cff, #c26bff);
        transform:rotate(-8deg);
        box-shadow:0 0 18px rgba(174,107,255,0.45);
    }
    .draw-tutorial-edit-visual i {
        position:absolute;
        width:18px;
        height:18px;
        border-radius:50%;
        background:#b36bff;
        border:2px solid #f3e7ff;
        box-shadow:0 0 16px rgba(179,107,255,0.85);
    }
    .draw-tutorial-edit-visual i:nth-of-type(1) { left:18%; top:44px; }
    .draw-tutorial-edit-visual i:nth-of-type(2) { left:48%; top:25px; }
    .draw-tutorial-edit-visual i:nth-of-type(3) { right:18%; top:18px; }
    .draw-tutorial-video {
        width:100%;
        height:100%;
        display:block;
        object-fit:contain;
        opacity:0;
        transition:opacity .18s ease;
        pointer-events:none;
        background:#050505;
    }
    .draw-tutorial-media.is-ready .draw-tutorial-media-placeholder { opacity:0; }
    .draw-tutorial-media.is-ready .draw-tutorial-video { opacity:1; }
    .draw-tutorial-text {
        text-align:center;
        font-size:14px;
        line-height:1.55;
        color:#e0e0e0;
        margin-bottom:20px;
    }
    .draw-tutorial-text kbd {
        display:inline-block;
        padding:2px 7px;
        background:#2a2a2a;
        border:1px solid #555;
        border-radius:5px;
        font-family:inherit;
        font-size:12px;
        color:#ffcc00;
        font-weight:600;
    }
    .draw-tutorial-actions {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
    }
    .draw-tutorial-skip {
        background:transparent;
        border:none;
        color:#9e9e9e;
        font-size:13px;
        cursor:pointer;
        padding:6px 10px;
    }
    .draw-tutorial-skip:hover { color:#cfcfcf; }
    .draw-tutorial-nav { display:flex; align-items:center; gap:8px; margin-left:auto; }
    .draw-tutorial-prev {
        background:transparent;
        border:1px solid #555;
        color:#cfcfcf;
        padding:8px 14px;
        border-radius:8px;
        font-size:13px;
        cursor:pointer;
    }
    .draw-tutorial-prev:hover { border-color:#888; color:#fff; }
    .draw-tutorial-prev:disabled { opacity:0.3; cursor:not-allowed; }
    .draw-tutorial-next {
        background:linear-gradient(135deg, #ffcc00, rgb(255,174,0));
        color:#3b3b3b;
        border:none;
        padding:8px 18px;
        border-radius:8px;
        font-size:13px;
        font-weight:600;
        cursor:pointer;
    }
    .draw-tutorial-next:hover { filter:brightness(1.05); }
    @keyframes draw-tutorial-pulse {
        0%   { box-shadow:0 0 0 9999px rgba(0,0,0,0.72), 0 0 0 0 rgba(255,204,0,0.6); }
        50%  { box-shadow:0 0 0 9999px rgba(0,0,0,0.72), 0 0 0 6px rgba(255,204,0,0.3); }
        100% { box-shadow:0 0 0 9999px rgba(0,0,0,0.72), 0 0 0 0 rgba(255,204,0,0.6); }
    }
    .draw-tutorial-spotlight.is-pulse {
        animation: draw-tutorial-pulse 1.5s ease-in-out infinite;
        border:2px solid rgba(255,204,0,0.7);
    }
    @keyframes draw-tutorial-ring-pulse {
        0%   { box-shadow:0 0 0 0 rgba(255,204,0,0.7); }
        50%  { box-shadow:0 0 0 5px rgba(255,204,0,0.35); }
        100% { box-shadow:0 0 0 0 rgba(255,204,0,0.7); }
    }
    .draw-tutorial-highlight-ring {
        outline:2px solid #ffcc00 !important;
        outline-offset:3px !important;
        animation: draw-tutorial-ring-pulse 1.5s ease-in-out infinite !important;
        border-radius:8px;
        position:relative;
        z-index:2;
    }
    .rsp-show-tutorial {
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:28px;
        height:28px;
        flex:0 0 28px;
        background:rgba(255,255,255,0.06);
        border:1px solid #444;
        border-radius:9px;
        color:#cfcfcf;
        cursor:pointer;
        padding:0;
    }
    .rsp-show-tutorial svg { width:16px; height:16px; }
    .rsp-show-tutorial:hover { color:#fff; border-color:#666; background:rgba(255,255,255,0.1); }

    /* OTP confirmation overlay for route submission */
    .route-form-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        padding: 20px;
        box-sizing: border-box;
    }
    .route-form-modal {
        width: min(92vw, 420px);
        background: #1b1b1b;
        color: #f1f1f1;
        border: 1px solid #3a3a3a;
        border-radius: 14px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
        padding: 18px 18px 16px;
        font-family: inherit;
    }
    .route-form-modal .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 6px;
    }
    .route-form-modal .modal-header h3 {
        margin: 0;
        font-size: 16px;
    }
    .route-form-modal .modal-close {
        background: transparent;
        border: none;
        color: #cfcfcf;
        font-size: 20px;
        cursor: pointer;
    }
    .route-form-modal .modal-sub {
        margin: 4px 0 12px;
        color: #bdbdbd;
        font-size: 13px;
    }
    .route-form-modal label {
        display: block;
        font-size: 12px;
        color: #cfcfcf;
        margin-bottom: 6px;
    }
    .route-form-modal input {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid #444;
        background: #2a2a2a;
        color: #ffffff;
        font-size: 14px;
    }
    .route-form-modal .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 12px;
    }
    .route-form-modal .modal-note {
        min-height: 18px;
        margin: 0 0 10px;
        color: #9e9e9e;
        font-size: 12px;
    }
    .route-form-modal .modal-note.is-error {
        color: #ff8a80;
    }
    .route-form-modal .btn-ghost {
        background: transparent;
        color: #cfcfcf;
        border: 1px solid #555;
        border-radius: 10px;
        padding: 8px 12px;
        cursor: pointer;
    }
    .route-form-modal .btn-primary {
        background: linear-gradient(135deg, #ffcc00, rgb(255,174,0));
        color: #3b3b3b;
        border: none;
        border-radius: 10px;
        padding: 8px 14px;
        cursor: pointer;
        font-weight: 600;
    }
    .route-form-modal .btn-primary:hover {
        filter: brightness(1.03);
    }
    .route-form-modal .btn-primary[disabled] {
        opacity:0.65;
        cursor:not-allowed;
    }
    .route-form-modal.is-loading {
        text-align:center;
        padding-top:22px;
        padding-bottom:22px;
    }
    .route-form-modal.is-success .modal-sub {
        margin-bottom: 0;
    }
    .route-form-modal.is-loading .modal-header {
        justify-content:center;
        margin-bottom:12px;
    }
    .route-form-spinner {
        width:42px;
        height:42px;
        margin:4px auto 14px;
        border-radius:999px;
        border:3px solid rgba(255,255,255,0.16);
        border-top-color:#ffcc00;
        animation:rspSpin 0.9s linear infinite;
    }
    @keyframes rspSpin {
        from { transform:rotate(0deg); }
        to { transform:rotate(360deg); }
    }
    .sun-controls {
        margin-top: 0;
        padding-top: 0;
        position: relative;
    }
    .sun-controls h3 {
        margin: 0;
        font-size: 15px;
        color: #ffffff;
        letter-spacing: 0.02em;
    }
    .sun-controls .sun-title-row {
        position: relative;
        display: flex;
        width: 100%;
        align-items: center;
        gap: 8px;
        justify-content: flex-start;
    }
    .sun-controls .sun-title-left {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .sun-controls .sun-mobile-close {
        display: none;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        border: 1px solid #5a5a5a;
        background: #232323;
        color: #efefef;
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        align-items: center;
        justify-content: center;
    }
    .sun-controls .sun-info-btn {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        border: 1px solid rgba(0, 179, 255, 0.45);
        background: rgba(0, 0, 0, 0.6);
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        backdrop-filter: blur(3px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
        transition: border-color .15s, background-color .15s, transform .15s;
    }
    .sun-controls .sun-info-btn:hover {
        border-color: rgba(0, 179, 255, 0.75);
        background: rgba(0, 33, 66, 0.75);
        transform: translateY(-1px);
    }
    .sun-controls .sun-info-btn:focus {
        outline: 2px solid #ffcc00;
        outline-offset: 2px;
    }
    .sun-controls .sun-info-popup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(92vw, 420px);
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 10px;
        background: rgba(12, 12, 12, 0.95);
        color: #e2e2e2;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
        padding: 12px 13px;
        font-size: 16px;
        line-height: 1.45;
        display: none;
        z-index: 2302;
    }
    .sun-controls .sun-info-popup.is-open {
        display: block;
    }
    .sun-controls .sun-info-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.46);
        display: none;
        z-index: 2301;
    }
    .sun-controls .sun-info-backdrop.is-open {
        display: block;
    }
    .sun-controls .sun-row {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        margin: 10px 0;
    }
    .sun-controls label {
        font-size: 12px;
        color: #cfcfcf;
        text-transform: none;
        letter-spacing: 0;
        font-weight: 600;
    }
    .sun-controls .sun-inline {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .sun-controls .sun-hidden-date-input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }
    .sun-controls .sun-enable-line {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #e0e0e0;
        font-size: 13px;
        font-weight: 500;
    }
    .sun-controls .sun-enable-line input[type="checkbox"] {
        accent-color: #ffcc00;
    }
    .sun-controls #sunEnabledToggle,
    .sun-controls #sunRaysEnabledToggle {
        appearance: none;
        -webkit-appearance: none;
        width: 34px;
        height: 19px;
        border-radius: 999px;
        border: 1px solid #6a6a6a;
        background: #3a3a3a;
        position: relative;
        cursor: pointer;
        transition: background-color .18s ease, border-color .18s ease;
        box-sizing: border-box;
    }
    .sun-controls #sunEnabledToggle::after,
    .sun-controls #sunRaysEnabledToggle::after {
        content: "";
        position: absolute;
        top: 1px;
        left: 1px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #f4f4f4;
        transition: transform .18s ease, background-color .18s ease;
    }
    .sun-controls #sunEnabledToggle:checked,
    .sun-controls #sunRaysEnabledToggle:checked {
        background: #ffcc00;
        border-color: #ffcc00;
    }
    .sun-controls #sunEnabledToggle:checked::after,
    .sun-controls #sunRaysEnabledToggle:checked::after {
        transform: translateX(15px);
        background: #1f1f1f;
    }
    .sun-controls #sunEnabledToggle:focus-visible,
    .sun-controls #sunRaysEnabledToggle:focus-visible {
        outline: 2px solid #ffcc00;
        outline-offset: 2px;
    }
    .sun-controls .sun-check-stack {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;
    }
    .sun-controls .sun-date-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-right: 8px;
        flex: 0 0 auto;
    }
    .sun-controls .sun-date-icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        border: 1px solid #4a4a4a;
        border-radius: 8px;
        background: #2a2a2a;
        color: #f0f0f0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
    }
    .sun-controls .sun-date-icon:hover {
        border-color: #ffcc00;
    }
    .sun-controls .sun-date-icon svg {
        width: 14px;
        height: 14px;
    }
    .sun-controls .sun-date-compact-label {
        font-size: 16px;
        font-weight: 600;
        color: #e0e0e0;
        letter-spacing: 0.01em;
        min-width: 38px;
    }
    .sun-controls .sun-date-nav {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
    }
    .sun-controls .sun-date-btn {
        min-height: 38px;
        border: 1px solid #4a4a4a;
        border-radius: 9px;
        background: #2a2a2a;
        color: #f0f0f0;
        font-size: 13px;
        font-weight: 600;
        padding: 8px 10px;
        cursor: pointer;
        line-height: 1;
    }
    .sun-controls .sun-date-btn:hover {
        border-color: #ffcc00;
    }
    .sun-controls .sun-date-main {
        flex: 1;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sun-controls .sun-time-stack {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
    }
    .sun-controls .sun-slider-wrap {
        position: relative;
        padding-top: 2px;
        width: 95%;
        min-width: 0;
        box-sizing: border-box;
    }
    .sun-controls input[type="range"] {
        display: block;
        width: 95%;
        min-width: 0;
        box-sizing: border-box;
        accent-color: #ffcc00;
    }
    .sun-controls .sun-slider-markers {
        position: relative;
        height: 10px;
        margin-top: 4px;
    }
    .sun-controls .sun-slider-marker {
        position: absolute;
        top: 0;
        left: var(--sun-marker-pos, 50%);
        transform: translateX(-50%);
        width: 1px;
        height: 8px;
        background: rgba(255, 255, 255, 0.38);
    }
    .sun-controls .sun-slider-marker::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -2px;
        transform: translateX(-50%);
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.55);
    }
    .sun-controls .sun-slider-marker.sunrise::after {
        background: #ffad66;
    }
    .sun-controls .sun-slider-marker.noon::after {
        background: #ffde7a;
    }
    .sun-controls .sun-slider-marker.sunset::after {
        background: #ffa16e;
    }
    .sun-controls .sun-time-readout {
        font-size: 13px;
        color: #f0f0f0;
        min-width: 54px;
        text-align: left;
        font-weight: 600;
        letter-spacing: 0.02em;
    }
    .sun-controls .sun-time-floating {
        position: static;
        margin-left: 8px;
        min-width: 0;
        text-align: left;
        font-size: 24px;
        font-weight: 900;
        line-height: 1;
        color: #ffcc00;
    }
    .sun-controls .sun-time-events {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 2px;
        color: #b8c5d1;
        font-size: 11px;
    }
    .sun-controls .sun-time-events .sun-event {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }
    .sun-controls .sun-time-events .sun-event strong {
        color: #d8d8d8;
        font-weight: 600;
    }
    .sun-controls .sun-ghost-btn {
        border: 1px solid #555;
        border-radius: 8px;
        background: #2a2a2a;
        color: #f0f0f0;
        font-size: 12px;
        font-weight: 600;
        padding: 6px 10px;
        cursor: pointer;
        min-height: 32px;
    }
    .sun-controls .sun-ghost-btn:hover {
        border-color: #ffcc00;
        background: #323232;
    }
    .sun-controls .sun-ghost-btn.active {
        border-color: #ffcc00;
        color: #ffde7a;
        background: rgba(255, 204, 0, 0.12);
    }
    .sun-controls .sun-compass {
        margin-top: 8px;
        font-size: 12px;
        color: #b7b7b7;
    }
    .sun-dev-only {
        display: none;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    body.sun-debug-mode .sun-dev-only {
        display: block;
    }
    .sun-calibrator {
        margin-top: 8px;
    }
    .sun-calibrator summary {
        cursor: pointer;
        font-size: 13px;
        color: #e2e2e2;
        margin-bottom: 8px;
    }
    .sun-calibrator .sun-row {
        margin: 6px 0;
        grid-template-columns: 130px minmax(0, 1fr);
    }
    .sun-calibrator #sunNorthOffsetSlider {
        flex: 1 1 auto;
        width: 100%;
        min-width: 280px;
    }
    .sun-calibrator textarea {
        width: 100%;
        min-height: 86px;
        box-sizing: border-box;
        border-radius: 8px;
        border: 1px solid #4a4a4a;
        background: #232323;
        color: #eaeaea;
        padding: 8px;
        font-size: 11px;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
        resize: vertical;
    }
    .sun-calibrator .small-note {
        font-size: 11px;
        color: #b9b9b9;
        margin-top: 6px;
    }
    #sunTimelineToggleBtn {
        position: fixed;
        left: 14px;
        bottom: 20px;
        z-index: 1100;
        width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 10px;
        border: 1px solid #555;
        background: #333;
        color: #f4f4f4;
        cursor: pointer;
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        display: none;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    #sunTimelineToggleBtn:hover {
        border-color: #ffcc00;
        background: #3b3b3b;
    }
    #sunTimelineToggleBtn:focus {
        outline: 2px solid #ffcc00;
        outline-offset: 2px;
    }
    #sunTimelineToggleBtn svg {
        width: 20px;
        height: 20px;
    }
    #sunTimelineToggleBtn.is-open svg {
        color: #ffcc00;
    }
    #sunTimelineToggleBtn.sun-unavailable {
        border-color: rgba(255, 120, 120, 0.8);
        background: rgba(80, 24, 24, 0.95);
        color: #ffd2d2;
    }
    #sunTimelineToggleBtn.sun-unavailable::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 72px;
        height: 2.5px;
        background: rgba(255, 120, 120, 0.8);
        border-radius: 999px;
        border: 1px solid rgba(80, 24, 24, 0.95);
        transform: translate(-50%, -50%) rotate(-45deg);
        pointer-events: none;
        z-index: 2;
    }
    #sunTimelineToggleBtn.sun-unavailable:hover {
        border-color: rgba(255, 150, 150, 0.95);
        background: rgba(95, 28, 28, 0.98);
    }
    #sunUnavailableNotice {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(92vw, 440px);
        border: 1px solid rgba(255, 120, 120, 0.45);
        background: rgba(28, 10, 10, 0.95);
        color: #ffd7d7;
        border-radius: 9px;
        padding: 12px 14px;
        font-size: 16px;
        line-height: 1.45;
        z-index: 2303;
        box-shadow: 0 12px 30px rgba(0,0,0,0.45);
    }
    #sunUnavailableNotice.is-open {
        display: block;
    }
    #sunUnavailableNotice strong {
        display: block;
        color: #ffe6e6;
        margin-bottom: 6px;
    }
    #sunUnavailableBackdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        display: none;
        z-index: 2302;
    }
    #sunUnavailableBackdrop.is-open {
        display: block;
    }
    #sunTimelinePanel {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        z-index: 1100;
        width: min(96vw, 1180px);
        max-height: none;
        overflow: hidden;
        background: rgba(0,0,0,0.85);
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 10px 10px 0 0;
        padding: 8px 10px 9px 10px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
        display: none;
        scrollbar-width: thin;
    }
    @media (min-width: 701px) {
        #sunTimelinePanel {
            left: clamp(278px, 26vw, 360px);
            right: clamp(170px, 21vw, 320px);
            width: auto;
            max-width: none;
            transform: none;
            border-left: 1px solid rgba(255,255,255,0.10);
            border-right: 1px solid rgba(255,255,255,0.10);
            border-bottom: none;
            padding: 4px 12px 3px 12px;
        }
        .sun-controls {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            grid-template-rows: auto;
            grid-template-areas: "title time";
            column-gap: 10px;
            row-gap: 0;
            align-items: center;
        }
        .sun-controls #sunTitleRow {
            grid-area: title;
            align-self: center;
            min-width: 0;
            gap: 8px;
            justify-content: flex-start;
            flex-wrap: nowrap;
        }
        .sun-controls #sunControlChecks {
            margin-left: 6px;
            gap: 8px;
            flex-wrap: nowrap;
            min-width: 0;
            white-space: nowrap;
        }
        .sun-controls #sunControlChecks .sun-date-chip {
            margin-right: 2px;
        }
        .sun-controls #sunRowTime {
            grid-area: time;
            width: 100%;
        }
        .sun-controls .sun-row {
            margin: 0;
            gap: 4px;
            grid-template-columns: 1fr;
        }
        .sun-controls #sunRowTime {
            grid-template-columns: minmax(0, 1fr);
            align-items: center;
            margin-left: auto;
            padding-left: 58px;
            margin-top: 0;
            min-width: 0;
            max-width: calc(100% - 46px);
            width: calc(100% - 46px);
            overflow: hidden;
            box-sizing: border-box;
        }
        .sun-controls #sunRowTime > * {
            margin-left: 0;
            width: 100%;
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
        }
        .sun-controls #sunControlChecks .sun-enable-line {
            min-height: 20px;
            white-space: nowrap;
        }
        .sun-controls #sunControlChecks .sun-enable-line span {
            font-size: 11px;
        }
        .sun-controls .sun-time-stack {
            gap: 0;
            position: relative;
            min-width: 0;
            max-width: 100%;
            width: 100%;
            box-sizing: border-box;
        }
        .sun-controls .sun-slider-wrap {
            min-width: 0;
            max-width: 100%;
            width: 100%;
            box-sizing: border-box;
            padding-bottom: 10px;
        }
        .sun-controls #sunTimeSlider { height: 8px; }
        .sun-controls .sun-time-events {
            position: absolute;
            left: 0;
            right: 0;
            top: 27px;
            margin-top: 0;
            min-height: 9px;
            font-size: 10px;
            pointer-events: none;
            color: #b8c5d1;
        }
        .sun-controls .sun-time-events .sun-event {
            position: absolute;
            transform: none;
            max-width: 46%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .sun-controls .sun-time-events .sun-event.sun-event-sunrise {
            left: calc(var(--sunrise-pos, 12%) + 8px);
            text-align: left;
        }
        .sun-controls .sun-time-events .sun-event.sun-event-sunset {
            left: calc(var(--sunset-pos, 88%) - 8px);
            transform: translateX(-100%);
            text-align: right;
        }
        .sun-controls .sun-time-readout {
            min-width: 46px;
            font-size: 18px;
        }
        .sun-controls .sun-date-btn {
            min-height: 32px;
            padding: 6px 8px;
            font-size: 12px;
        }
    }
    @media (min-width: 701px) and (max-width: 1919px) {
        .sun-controls {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas:
                "title"
                "time";
            align-items: stretch;
            row-gap: 6px;
        }
        .sun-controls #sunTitleRow,
        .sun-controls #sunRowTime {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }
        .sun-controls #sunRowTime {
            margin-left: 0;
            padding-left: 0;
            overflow: visible;
        }
        .sun-controls #sunTimeSlider {
            width: 100%;
            min-width: 0;
        }
    }
    @media (max-width: 700px) {
        #sunTimelineToggleBtn {
            left: 10px;
            bottom: calc(12px + env(safe-area-inset-bottom, 0px));
            width: 44px;
            height: 44px;
        }
        #sunTimelinePanel {
            left: 0;
            right: 0;
            transform: none;
            bottom: 0;
            width: 100vw;
            max-width: 100vw;
            max-height: min(38vh, 290px);
            overflow: auto;
            border-radius: 14px 14px 0 0;
            border-left: none;
            border-right: none;
            border-bottom: none;
            padding: 8px 8px calc(9px + env(safe-area-inset-bottom, 0px));
        }
        .sun-controls .sun-title-row {
            position: static;
            margin-bottom: 2px;
            min-height: 26px;
            flex-wrap: wrap;
        }
        .sun-controls .sun-time-floating {
            font-size: 21px;
        }
        .sun-controls #sunControlChecks {
            width: 100%;
            margin-left: 0;
            padding-right: 30px;
        }
        .sun-controls .sun-mobile-close {
            display: inline-flex;
            position: absolute;
            top: 6px;
            right: 8px;
            width: 24px;
            height: 24px;
            font-size: 14px;
            z-index: 2;
        }
        .sun-controls .sun-check-stack {
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 10px;
            align-items: center;
            margin-bottom: 0;
        }
        .sun-controls .sun-check-stack .sun-enable-line {
            font-size: 11px;
            gap: 6px;
            white-space: nowrap;
        }
        .sun-controls .sun-time-stack {
            gap: 2px;
        }
        .sun-controls .sun-time-events {
            margin-top: 0;
            font-size: 10px;
        }
        .sun-controls .sun-row {
            grid-template-columns: 1fr;
            gap: 4px;
            margin: 5px 0;
        }
        .sun-controls h3 {
            font-size: 12px;
        }
        .sun-calibrator .sun-row {
            grid-template-columns: 1fr;
        }
    }