:root{color-scheme:dark;--bg:#0f1020;--panel:#1a1c34;--line:#35385e;--ink:#f4f2ff;--muted:#b7b6ce;--accent:#8b5cf6;--good:#54d6a2;--warn:#f5bc5d}*{box-sizing:border-box}body{margin:0;background:linear-gradient(145deg,#111128,#0b0c17);color:var(--ink);font:16px system-ui,sans-serif}header,main,footer{max-width:1120px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;align-items:center}.eyebrow{color:#c4b5fd;text-transform:uppercase;font-size:.76rem;letter-spacing:.12em}h1{margin:.2rem 0;font-size:2.4rem}h2{margin-top:0}.status{padding:.5rem .8rem;border:1px solid var(--line);border-radius:999px;color:var(--good)}main{display:grid;gap:20px}.panel{background:rgba(26,28,52,.94);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:0 18px 40px #0003}p{color:var(--muted)}form{display:grid;grid-template-columns:1fr 180px auto;gap:12px;align-items:end}label{display:grid;gap:6px;color:var(--muted);font-size:.9rem}input,select,button{font:inherit;border-radius:8px;padding:.72rem;border:1px solid var(--line)}input,select{background:#101126;color:var(--ink)}button{background:var(--accent);color:white;border-color:var(--accent);cursor:pointer;font-weight:700}button.delete{background:transparent;color:#ff9a9a;border-color:#763b53}.message{min-height:1.25em}.message.error{color:#ff9a9a}.hidden{display:none}.preview-heading{display:flex;justify-content:space-between;gap:18px}.metrics{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted)}.metrics span{display:grid;text-align:right}.metrics b{color:var(--ink);font-size:1.2rem}#map{height:380px;border-radius:10px;border:1px solid var(--line);margin:18px 0}.save-form{grid-template-columns:1fr 1fr auto}.stops{padding-left:1.4rem}.stops li{margin:.45rem 0}.library{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}.route-card{padding:16px;border:1px solid var(--line);border-radius:10px}.route-card h3{margin:0}.route-card a{display:inline-block;margin:12px 8px 0 0;color:#c4b5fd}footer{text-align:center;font-size:.8rem;color:var(--muted)}@media(max-width:720px){header,.preview-heading{display:block}form,.save-form{grid-template-columns:1fr}.status{display:inline-block;margin-top:12px}.metrics span{text-align:left}#map{height:300px}}

/* Route alternatives */
.route-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.route-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px;
    background: #101126;
    border: 2px solid var(--line);
    text-align: left;
}

.route-option span {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 400;
}

.route-option.selected {
    background: #292044;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px #8b5cf633;
}

.route-option:focus-visible {
    outline: 2px solid white;
    outline-offset: 3px;
}

@media(max-width:720px) {
    .route-options {
        grid-template-columns: 1fr;
    }
}

/* Import layout and map refinements */
#import-form {
    grid-template-columns: minmax(0, 1fr) 220px;
    align-items: end;
}
#import-form label:first-child {
    grid-column: 1 / -1;
}
#import-form label:nth-child(2) {
    grid-column: 1;
}
#import-form button {
    grid-column: 2;
    white-space: nowrap;
}
#import-form input,
#import-form select {
    min-width: 0;
    width: 100%;
}
#map {
    height: 440px;
}
@media (max-width: 720px) {
    #import-form {
        grid-template-columns: 1fr;
    }
    #import-form label:first-child,
    #import-form label:nth-child(2),
    #import-form button {
        grid-column: 1;
    }
    #map {
        height: 340px;
    }
}


/* Route Planner interface refinements */
#import-form {
    grid-template-columns: minmax(0, 1fr) 190px auto;
    grid-template-areas: "url url url" "mode mode button";
    align-items: end;
    gap: 14px;
}
#import-form label:first-child { grid-area: url; }
#import-form label:nth-child(2) { grid-area: mode; }
#import-form button { grid-area: button; min-height: 46px; }
#import-form input { width: 100%; }

#map { height: 440px; }

.route-option {
    min-height: 76px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}
.route-option.selected {
    border-color: var(--good);
    box-shadow: 0 0 0 1px var(--good);
}

.route-analysis {
    margin: 20px 0;
    padding: 18px;
    background: #101126;
    border: 1px solid var(--line);
    border-radius: 12px;
}
.route-analysis h3 { margin-top: 0; }
.analysis-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 16px;
}
.analysis-metrics div { display: grid; gap: 5px; }
.analysis-metrics span { color: var(--muted); font-size: .85rem; }
.analysis-metrics strong { font-size: 1.15rem; }
.elevation-profile {
    background: #191a32;
    border-radius: 8px;
    padding: 12px;
    min-height: 90px;
}
.elevation-profile svg { width: 100%; height: 180px; display: block; }
.profile-labels { color: var(--muted); font-size: .8rem; }
.data-note { font-size: .8rem; }

@media (max-width: 720px) {
    #import-form {
        grid-template-columns: 1fr;
        grid-template-areas: "url" "mode" "button";
    }
    #import-form label:first-child,
    #import-form label:nth-child(2),
    #import-form button { width: 100%; }
    #map { height: 340px; }
}