:root {
    --orange: #ff6a00;
    --orange-soft: #ff8a36;
    --green: #58b72b;
    --green-deep: #2f7d32;
    --red: #ef3434;
    --off-white: #f5f5f2;
    --muted: #9b9d9a;
    --line: #292b29;
    --surface: #151715;
    --surface-raised: #1c1e1c;
    --background: #090a09;
    --heading-font: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
    --body-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --bs-primary: var(--orange);
    --bs-primary-rgb: 255, 106, 0;
}

* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--background); }
body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 50% -20%, rgba(47, 125, 50, .13), transparent 32rem),
        var(--background);
    color: var(--off-white);
    font-family: var(--body-font);
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { touch-action: manipulation; }
.d-none { display: none !important; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.brand-word {
    font-family: var(--heading-font);
    font-size: 1.6rem;
    font-style: italic;
    font-weight: 900;
    letter-spacing: .09em;
    line-height: 1;
}
.brand-kicker, .eyebrow {
    margin: 0 0 .35rem;
    color: var(--green);
    font-family: var(--heading-font);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .12em;
}
.eyebrow-orange { color: var(--orange); }
.eyebrow-green { color: var(--green); }
.eyebrow-danger { color: var(--red); }
.muted-copy { color: var(--muted); line-height: 1.55; }

.boot-view {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .75rem;
    background: var(--background);
    color: var(--muted);
}
.boot-view img { border-radius: 1.4rem; box-shadow: 0 1.25rem 4rem rgba(0, 0, 0, .45); }
.boot-view .brand-word { color: var(--off-white); font-size: 2rem; }
.boot-view span:last-child { font-size: .85rem; }

.login-view {
    min-height: 100vh;
    display: grid;
    align-items: center;
    gap: 2.5rem;
    padding: 2rem 1.25rem calc(2rem + var(--safe-bottom));
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .72)),
        repeating-linear-gradient(135deg, transparent 0 48px, rgba(255, 255, 255, .012) 48px 49px);
}
.login-brand { text-align: center; }
.login-brand img { border-radius: 2rem; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .45); }
.login-brand .brand-word { margin: 1rem 0 .35rem; font-size: 3rem; }
.login-brand .brand-kicker { color: var(--orange); }
.login-panel { width: min(100%, 28rem); margin-inline: auto; }
.login-panel h1, .view-heading h1, .special-detail h1, .profile-hero h1 {
    margin: 0;
    font-family: var(--heading-font);
    font-size: clamp(2rem, 8vw, 3rem);
    font-weight: 900;
    letter-spacing: .015em;
    text-transform: uppercase;
}
.login-panel .muted-copy { margin: .5rem 0 1.5rem; }

.tromo-form { display: grid; gap: .75rem; }
.tromo-form label, .surface-form label {
    color: #c7c9c6;
    font-size: .77rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.tromo-form input, .tromo-form select, .tromo-form textarea, .surface-form input {
    width: 100%;
    min-height: 3.5rem;
    border: 1px solid #343734;
    border-radius: .72rem;
    outline: none;
    background: #111311;
    color: var(--off-white);
    padding: .8rem .95rem;
}
.tromo-form textarea { resize: vertical; }
.tromo-form input:focus, .tromo-form select:focus, .tromo-form textarea:focus, .surface-form input:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(255, 106, 0, .13);
}
.tromo-form fieldset {
    display: grid;
    gap: .6rem;
    margin: .25rem 0;
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
}
.tromo-form legend { float: none; width: auto; margin: 0; padding: 0 .35rem; color: var(--green); font-family: var(--heading-font); font-size: 1rem; font-weight: 900; text-transform: uppercase; }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.two-columns > div { display: grid; gap: .45rem; }

.action-button {
    min-height: 3.65rem;
    border: 1px solid transparent;
    border-radius: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .8rem 1rem;
    font-family: var(--heading-font);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.action-button:disabled { opacity: .48; }
.action-primary { background: linear-gradient(135deg, var(--orange), #e85000); color: #fff; box-shadow: 0 .7rem 1.6rem rgba(255, 106, 0, .15); }
.action-secondary { border-color: #3b3e3b; background: #161816; color: var(--off-white); }
.action-green { background: linear-gradient(135deg, #68c834, var(--green-deep)); color: #fff; }
.action-danger { background: linear-gradient(135deg, #f04444, #cc2020); color: #fff; }

.app-shell { min-height: 100vh; }
.topbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 900;
    height: calc(4.25rem + env(safe-area-inset-top, 0px));
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 0px) 1rem .7rem;
    border-bottom: 1px solid var(--line);
    background: rgba(9, 10, 9, .96);
    backdrop-filter: blur(14px);
}
.topbar-brand, .topbar-actions { display: flex; align-items: center; gap: .65rem; }
.topbar-brand img { border-radius: .7rem; }
.connection-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #b6b9b5;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
}
.connection-badge span { width: .42rem; height: .42rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 .7rem var(--green); }
.connection-badge.is-offline { color: #f5a6a6; }
.connection-badge.is-offline span { background: var(--red); box-shadow: none; }
.icon-button {
    position: relative;
    width: 2.85rem;
    height: 2.85rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    display: grid;
    place-items: center;
    background: var(--surface);
    color: var(--off-white);
}
.notification-count { position: absolute; top: -.25rem; right: -.25rem; min-width: 1.15rem; height: 1.15rem; border-radius: 1rem; display: grid; place-items: center; background: var(--red); color: white; font-size: .63rem; font-weight: 900; }

.app-content {
    width: min(100%, 74rem);
    margin-inline: auto;
    padding: calc(5.35rem + env(safe-area-inset-top, 0px)) 1rem calc(6.7rem + var(--safe-bottom));
}
.app-view { display: none; }
.app-view.is-active { display: block; }
.view-heading { min-height: 4.3rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.view-heading h1 { font-size: clamp(2rem, 7vw, 2.75rem); }
.view-intro { max-width: 42rem; margin: -1rem 0 1.25rem; color: var(--muted); line-height: 1.5; }
.status-chip, .subtle-label {
    border: 1px solid var(--line);
    border-radius: 99px;
    color: var(--muted);
    background: #111311;
    padding: .5rem .65rem;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .06em;
    white-space: nowrap;
}
.status-chip.is-good { border-color: rgba(88, 183, 43, .45); color: #8bdf63; }
.status-chip.is-warning { border-color: rgba(255, 106, 0, .55); color: var(--orange-soft); }
.status-chip.is-danger { border-color: rgba(239, 52, 52, .55); color: #ff8c8c; }

.feature-card, .surface-card {
    border: 1px solid var(--line);
    border-radius: 1.2rem;
    background:
        radial-gradient(circle at 95% 0, rgba(47, 125, 50, .14), transparent 17rem),
        var(--surface);
    box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, .18);
}
.feature-card { padding: 1.1rem; }
.empty-state { min-height: 24rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-state .empty-icon { width: 4rem; height: 4rem; margin-bottom: 1.2rem; color: var(--orange); }
.empty-state h2, .feature-card h2, .section-title-row h2, .app-sheet h2, .admin-panel h2 {
    margin: 0;
    font-family: var(--heading-font);
    font-weight: 900;
    text-transform: uppercase;
}
.empty-state p:not(.eyebrow) { max-width: 23rem; color: var(--muted); }
.empty-state .action-button { width: 100%; max-width: 20rem; margin-top: .75rem; }
.solo-ride-actions { display: grid; width: 100%; max-width: 20rem; gap: .1rem; }
.solo-ride-actions .action-button { max-width: none; }
.solo-ride-note { display: block; max-width: 20rem; margin-top: .8rem; color: #9a9d99; line-height: 1.45; }
.solo-finish-button { width: 100%; max-width: 48rem; margin: .9rem auto; }
.solo-finish-button svg, #startSoloRide svg { width: 1.25rem; height: 1.25rem; }

.card-status-row, .section-title-row, .participants-summary, .special-meta-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.live-label { display: inline-flex; align-items: center; gap: .4rem; color: var(--green); font-family: var(--heading-font); font-size: .75rem; font-weight: 900; letter-spacing: .08em; }
.live-label span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 .75rem var(--green); }
.active-route-card h2 { margin: .85rem 0 .5rem; font-size: clamp(1.7rem, 7vw, 2.4rem); }
.route-meta { display: flex; flex-wrap: wrap; gap: 1rem; color: #c5c7c4; font-size: .8rem; }
.route-meta > span, .meeting-point { display: inline-flex; align-items: center; gap: .4rem; }
.route-meta svg, .meeting-point svg { width: 1rem; height: 1rem; color: var(--muted); }
.meeting-point { margin: .65rem 0 1rem; color: var(--muted); font-size: .85rem; }
.live-ride-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin: .25rem 0 1rem;
}
.live-ride-metric {
    min-width: 0;
    padding: .75rem .7rem;
    border: 1px solid rgba(88, 183, 43, .28);
    border-radius: .8rem;
    background: linear-gradient(145deg, rgba(88, 183, 43, .1), rgba(9, 13, 9, .78));
}
.live-ride-metric.is-distance { grid-column: 1 / -1; }
.live-ride-metric span {
    display: block;
    margin-bottom: .3rem;
    overflow: hidden;
    color: var(--muted);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.live-ride-metric strong {
    display: block;
    color: var(--green);
    font-family: var(--heading-font);
    font-size: clamp(1.3rem, 6vw, 1.85rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    line-height: 1;
}
.avatar-stack { display: flex; padding-left: .45rem; }
.avatar {
    width: 2.25rem;
    height: 2.25rem;
    margin-left: -.45rem;
    border: 2px solid var(--surface);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #3a403a, #171917);
    color: var(--off-white);
    font-family: var(--heading-font);
    font-size: .72rem;
    font-weight: 900;
}
.participants-summary > span { color: var(--green); font-size: .75rem; font-weight: 800; letter-spacing: .04em; }
.route-map-preview {
    position: relative;
    width: 100%;
    min-height: 11rem;
    margin-top: 1rem;
    overflow: hidden;
    border: 1px solid #263326;
    border-radius: 1rem;
    background: #101610;
    color: var(--off-white);
}
.map-grid { position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(30deg, transparent 47%, rgba(88, 183, 43, .22) 48% 50%, transparent 51%), linear-gradient(120deg, transparent 47%, rgba(255, 255, 255, .08) 48% 49%, transparent 50%); background-size: 95px 78px, 70px 92px; }
.mini-map-markers { position: absolute; inset: 0; }
.mini-dot { position: absolute; width: .8rem; height: .8rem; border: 2px solid #111; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(255, 106, 0, .18); }
.mini-dot.is-alert { width: 1rem; height: 1rem; background: var(--red); }
.map-preview-cta { position: absolute; inset: auto .75rem .7rem; min-height: 2.6rem; border-radius: .7rem; display: flex; align-items: center; justify-content: center; gap: .5rem; background: rgba(8, 10, 8, .86); font-family: var(--heading-font); font-size: .78rem; font-weight: 900; letter-spacing: .07em; }

.help-button {
    width: 100%;
    min-height: 4.6rem;
    margin: .9rem 0;
    border: 0;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    background: linear-gradient(135deg, #f04444, #d71d1d);
    color: #fff;
    box-shadow: 0 .8rem 2rem rgba(239, 52, 52, .2);
    font-family: var(--heading-font);
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: .04em;
}
.help-button svg { width: 1.65rem; height: 1.65rem; }
.special-run-banner { margin: .9rem 0 0; border: 1px solid rgba(88, 183, 43, .4); border-radius: 1rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; padding: .75rem; background: rgba(47, 125, 50, .14); }
.pulse-target { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--green-deep); color: white; }
.special-run-banner small { display: block; color: var(--green); font-size: .62rem; font-weight: 900; letter-spacing: .08em; }
.special-run-banner strong { display: block; font-family: var(--heading-font); }
.special-run-banner > span:last-child { font-variant-numeric: tabular-nums; font-weight: 800; }

.section-block { margin-top: 1.5rem; }
.section-title-row { margin-bottom: .75rem; }
.section-title-row h2 { font-size: 1.15rem; }
.stack-list { display: grid; gap: .65rem; }
.card-grid { display: grid; gap: .85rem; }
.list-card {
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface);
    padding: 1rem;
}
.list-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.list-card h2, .list-card h3 { margin: 0; font-family: var(--heading-font); font-size: 1.25rem; font-weight: 900; text-transform: uppercase; }
.list-card p { margin: .35rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.card-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.small-action, .text-action, .small-location-button {
    min-height: 2.65rem;
    border: 1px solid #3b3e3b;
    border-radius: .65rem;
    background: #1a1c1a;
    color: var(--off-white);
    padding: .55rem .7rem;
    font-family: var(--heading-font);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .04em;
}
.small-action.is-primary { border-color: var(--orange); background: var(--orange); color: #fff; }
.small-action.is-green { border-color: var(--green); background: var(--green-deep); color: #fff; }
.small-action.is-danger { border-color: rgba(239, 52, 52, .55); color: #ff8e8e; }
.text-action { min-height: 2.35rem; border: 0; background: transparent; color: var(--orange); }
.small-location-button { width: 100%; color: var(--green); }
.state-badge, .difficulty-badge { border: 1px solid #3a3d3a; border-radius: .45rem; padding: .3rem .45rem; color: #caccca; font-size: .63rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.state-badge.approved { border-color: rgba(88, 183, 43, .5); color: #8edf67; }
.state-badge.pending { border-color: rgba(255, 106, 0, .5); color: var(--orange-soft); }
.state-badge.in-progress { border-color: rgba(88, 183, 43, .5); color: #8edf67; }
.difficulty-badge { border-color: rgba(239, 52, 52, .55); background: rgba(239, 52, 52, .16); color: #ff9a9a; }
.round-action { min-width: 4.5rem; min-height: 3.5rem; border: 1px solid #343734; border-radius: .85rem; display: grid; place-items: center; gap: .05rem; background: var(--surface); color: var(--orange); font-family: var(--heading-font); font-size: .58rem; font-weight: 900; letter-spacing: .05em; }
.round-action svg { width: 1.35rem; height: 1.35rem; }
.participant-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; }
.participant-chip { border: 1px solid var(--line); border-radius: 99px; background: #111311; padding: .35rem .55rem; color: #c4c6c3; font-size: .7rem; }
.participant-chip.accepted { border-color: rgba(88, 183, 43, .4); }
.participant-chip.declined { opacity: .55; }
.inline-control { display: grid; grid-template-columns: 1fr auto; gap: .5rem; width: 100%; margin-top: .75rem; }
.inline-control select { min-width: 0; min-height: 2.75rem; border: 1px solid var(--line); border-radius: .65rem; background: #101210; color: white; padding: .5rem; }

.special-detail { padding: .5rem 0 1.3rem; }
.back-button { min-height: 2.8rem; border: 0; display: inline-flex; align-items: center; gap: .35rem; background: transparent; color: #c7c9c6; padding: 0; font-family: var(--heading-font); font-size: .78rem; font-weight: 900; letter-spacing: .07em; }
.special-detail h1 { margin: .15rem 0 .6rem; }
.special-meta-line { justify-content: flex-start; flex-wrap: wrap; color: #caccca; font-size: .8rem; }
.special-meta-line > span:not(:last-child)::after { content: "·"; margin-left: .65rem; color: #555; }
.special-detail .muted-copy { margin: 1rem 0; }
.special-detail .action-button { width: 100%; }
.ranking-section { border-top: 1px solid var(--line); }
.ranking-tabs, .admin-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.ranking-tabs button, .admin-tabs button { min-height: 3.5rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-family: var(--heading-font); font-size: .72rem; font-weight: 900; letter-spacing: .05em; }
.ranking-tabs button.is-active, .admin-tabs button.is-active { border-color: var(--green); color: var(--green); }
.ranking-list { margin: 0; padding: 0; list-style: none; }
.ranking-row { min-height: 3.6rem; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: .55rem; padding: .45rem .25rem; }
.ranking-row .rank-position { color: var(--green); font-family: var(--heading-font); font-size: 1rem; font-weight: 900; text-align: center; }
.ranking-row .rank-name { color: #d7d9d6; }
.ranking-row .rank-time { font-variant-numeric: tabular-nums; font-weight: 800; }
.ranking-empty { padding: 2rem .5rem; color: var(--muted); text-align: center; }
.personal-best { margin-top: 1rem; border: 1px solid rgba(88, 183, 43, .28); border-radius: 1rem; display: grid; justify-items: center; gap: .25rem; padding: 1rem; background: radial-gradient(circle at 50% 100%, rgba(88, 183, 43, .18), transparent 70%), var(--surface); }
.personal-best span, .personal-best small { color: var(--muted); font-size: .65rem; letter-spacing: .08em; }
.personal-best strong { color: var(--green); font-family: var(--heading-font); font-size: 2.35rem; font-weight: 900; font-variant-numeric: tabular-nums; }

.map-view { margin-inline: -1rem; }
.map-heading { margin-inline: 1rem; }
.map-center-button { color: var(--orange); }
.map-empty-note { margin: -.6rem 1rem .75rem; color: var(--muted); font-size: .75rem; }
.map { min-height: calc(100vh - 14.5rem - var(--safe-bottom)); border-block: 1px solid var(--line); background: #111711; }
.leaflet-tile-pane { filter: brightness(.52) saturate(.55) contrast(1.25); }
.leaflet-control-zoom a { background: #161816 !important; color: var(--off-white) !important; border-color: var(--line) !important; }
.leaflet-control-attribution { background: rgba(10, 11, 10, .78) !important; color: #aaa !important; }
.leaflet-control-attribution a { color: #c8c8c8 !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #181a18; color: var(--off-white); }
.map-marker { width: 2.15rem; height: 2.15rem; border: 2px solid #fff; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #fff; font-size: .65rem; font-weight: 900; box-shadow: 0 .25rem .8rem rgba(0, 0, 0, .45); }
.map-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1rem; padding: .75rem 1rem; color: #b8bab7; font-size: .68rem; }
.map-legend span { display: flex; align-items: center; gap: .35rem; }
.legend-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--orange); }
.special-dot { background: var(--green); }.meeting-dot { background: #3c8dff; }.alert-dot { background: var(--red); }

.profile-hero { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.profile-avatar { flex: 0 0 auto; width: 5rem; height: 5rem; border: 2px solid var(--orange); border-radius: 1.4rem; display: grid; place-items: center; background: linear-gradient(145deg, #2b2e2b, #111311); color: var(--orange); font-family: var(--heading-font); font-size: 1.55rem; font-weight: 900; }
.profile-hero .muted-copy { margin: .2rem 0 0; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.stat-card { min-height: 7.5rem; border: 1px solid var(--line); border-radius: 1rem; display: flex; flex-direction: column; justify-content: flex-end; padding: .8rem; background: var(--surface); }
.stat-card strong { color: var(--green); font-family: var(--heading-font); font-size: 2rem; font-weight: 900; line-height: 1; }
.stat-card span { margin-top: .35rem; color: var(--muted); font-size: .68rem; line-height: 1.25; text-transform: uppercase; }
.stat-card:first-child { grid-column: span 2; }
.profile-actions { display: grid; gap: .6rem; margin-top: 1.35rem; }
.settings-row { width: 100%; min-height: 4.25rem; border: 1px solid var(--line); border-radius: .9rem; display: flex; align-items: center; gap: .8rem; background: var(--surface); color: var(--off-white); padding: .75rem; text-align: left; }
.settings-row > svg { flex: 0 0 auto; color: var(--orange); }
.settings-row span { display: grid; gap: .15rem; }
.settings-row small { color: var(--muted); }
.danger-row > svg, .danger-row strong { color: #ff7e7e; }

.admin-tabs { grid-template-columns: repeat(3, 1fr); margin-bottom: 1.2rem; }
.admin-panel { display: none; }
.admin-panel.is-active { display: block; }
.admin-panel h2 { font-size: 1.2rem; }
.surface-form { display: grid; gap: .7rem; margin-bottom: .8rem; border: 1px solid var(--line); border-radius: 1rem; padding: 1rem; background: var(--surface); }
.surface-form p { color: var(--muted); font-size: .76rem; line-height: 1.45; }
.input-suffix { display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid #343734; border-radius: .72rem; overflow: hidden; background: #111311; }
.input-suffix input { border: 0; border-radius: 0; }
.input-suffix span { padding: 0 1rem; color: var(--muted); font-size: .8rem; }

.alert-card { border: 1px solid rgba(239, 52, 52, .4); border-radius: .9rem; background: rgba(120, 18, 18, .14); padding: .8rem; }
.alert-card strong { display: block; color: #ff9d9d; font-family: var(--heading-font); font-size: 1rem; }
.alert-card p { margin: .25rem 0 0; color: #c9aaa8; font-size: .78rem; }
.alert-card.is-pending { border-color: rgba(255, 106, 0, .45); background: rgba(120, 55, 0, .14); }
.alert-card.is-pending strong { color: var(--orange-soft); }

.bottom-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 900;
    min-height: calc(5.15rem + var(--safe-bottom));
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: .45rem .3rem var(--safe-bottom);
    border-top: 1px solid var(--line);
    background: rgba(9, 10, 9, .97);
    backdrop-filter: blur(14px);
}
.bottom-nav button { min-width: 0; min-height: 4.2rem; border: 0; border-radius: .75rem; display: grid; place-content: center; justify-items: center; gap: .24rem; background: transparent; color: #929591; padding: .3rem .05rem; font-family: var(--heading-font); font-size: .62rem; font-weight: 800; }
.bottom-nav button svg { width: 1.45rem; height: 1.45rem; }
.bottom-nav button.is-active { color: var(--green); background: rgba(47, 125, 50, .1); }

.app-toast { position: fixed; z-index: 1500; top: calc(4.7rem + env(safe-area-inset-top, 0px)); left: 50%; width: min(calc(100% - 2rem), 35rem); transform: translateX(-50%); border: 1px solid rgba(239, 52, 52, .4); border-radius: .85rem; background: rgba(92, 18, 18, .96); color: #fff; padding: .8rem 1rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .4); font-size: .84rem; }
.app-toast.is-success { border-color: rgba(88, 183, 43, .5); background: rgba(27, 83, 31, .97); }
.app-toast.is-info { border-color: rgba(255, 106, 0, .5); background: rgba(100, 48, 8, .97); }

.sheet-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(0, 0, 0, .72); backdrop-filter: blur(2px); }
.app-sheet {
    position: fixed;
    z-index: 1200;
    inset: auto 0 0;
    max-height: 91vh;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 1.35rem 1.35rem 0 0;
    background: #111311;
    padding: 1rem 1rem calc(1.25rem + var(--safe-bottom));
    box-shadow: 0 -1.5rem 4rem rgba(0, 0, 0, .45);
}
.sheet-handle { width: 3rem; height: .26rem; margin: 0 auto 1rem; border-radius: 1rem; background: #555; }
.sheet-close { position: absolute; top: .75rem; right: .75rem; width: 2.8rem; height: 2.8rem; border: 0; border-radius: 50%; display: grid; place-items: center; background: #222422; color: white; }
.app-sheet h2 { margin-bottom: 1rem; font-size: 1.65rem; }
.sheet-note { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.4; text-align: center; }
.app-sheet.route-summary-sheet {
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    transform: none;
    border-radius: 0;
    padding: calc(1.25rem + env(safe-area-inset-top, 0px)) clamp(1rem, 4vw, 2rem) calc(1.25rem + var(--safe-bottom));
}
.route-summary-sheet .sheet-handle { display: none; }
.route-summary-sheet .sheet-close { top: calc(.75rem + env(safe-area-inset-top, 0px)); }
.route-summary-sheet > :not(.sheet-close):not(.sheet-handle) { width: min(100%, 52rem); margin-inline: auto; }
.route-summary-subtitle { margin: -.65rem 0 1rem; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.route-summary-map-wrap { position: relative; min-height: clamp(16rem, 42vh, 28rem); margin-bottom: .8rem; overflow: hidden; border: 1px solid var(--line); border-radius: .9rem; background: #111711; }
.route-summary-map { min-height: clamp(16rem, 42vh, 28rem); }
.route-summary-map-empty { position: absolute; inset: 0; z-index: 2; margin: 0; display: grid; place-items: center; padding: 1.5rem; background: #111711; color: var(--muted); font-size: .82rem; text-align: center; }
.route-summary-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.route-metric { min-height: 5.15rem; border: 1px solid var(--line); border-radius: .8rem; display: flex; flex-direction: column; justify-content: flex-end; padding: .7rem; background: var(--surface); }
.route-metric strong { color: var(--green); font-family: var(--heading-font); font-size: 1.25rem; font-weight: 900; line-height: 1; }
.route-metric span { margin-top: .3rem; color: var(--muted); font-size: .63rem; line-height: 1.2; text-transform: uppercase; }
.route-summary-elevation { margin: .65rem 0; border-left: 3px solid var(--orange); padding: .55rem .7rem; background: rgba(255, 106, 0, .07); color: var(--off-white); font-size: .78rem; line-height: 1.4; }
.route-elevation-profile { margin-bottom: .8rem; border: 1px solid var(--line); border-radius: .9rem; background: #111411; padding: .75rem; }
.route-elevation-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.route-elevation-heading h3 { margin: 0; color: var(--off-white); font-family: var(--heading-font); font-size: .9rem; font-weight: 900; text-transform: uppercase; }
.route-elevation-heading span { color: var(--green); font-family: var(--heading-font); font-size: .8rem; font-weight: 900; }
.route-elevation-profile svg { width: 100%; height: 9.5rem; overflow: visible; }
.route-elevation-profile svg > line { stroke: rgba(245, 245, 242, .12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.elevation-area { fill: rgba(47, 125, 50, .24); stroke: none; }
.elevation-line { fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.route-elevation-empty { min-height: 7rem; margin: 0; display: grid; place-items: center; color: var(--muted); font-size: .8rem; text-align: center; }
.route-elevation-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: .58rem; font-weight: 800; letter-spacing: .06em; }
.reason-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.reason-grid label { min-width: 0; }
.reason-grid input { position: absolute; opacity: 0; pointer-events: none; }
.reason-grid span { min-height: 3.5rem; border: 1px solid #3a3d3a; border-radius: .75rem; display: grid; place-items: center; background: #171917; color: #d1d3d0; padding: .5rem; text-align: center; }
.reason-grid input:checked + span { border-color: var(--red); background: rgba(239, 52, 52, .14); color: #ff8c8c; }
.reason-wide { grid-column: span 2; }

@media (min-width: 700px) {
    .login-view { grid-template-columns: minmax(18rem, 1fr) minmax(22rem, 28rem); padding-inline: clamp(2rem, 8vw, 8rem); }
    .login-brand img { width: 180px; height: 180px; }
    .app-content { padding-inline: 1.5rem; }
    .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .active-route-card { max-width: 48rem; margin-inline: auto; }
    .live-ride-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .live-ride-metric.is-distance { grid-column: auto; }
    #routeView .section-block, #routeView .help-button, #routeView .special-run-banner { max-width: 48rem; margin-inline: auto; }
    #routeView .help-button { margin-top: .9rem; margin-bottom: .9rem; }
    .stats-grid { grid-template-columns: repeat(5, 1fr); }
    .stat-card:first-child { grid-column: auto; }
    .app-sheet { inset: 50% auto auto 50%; width: min(92vw, 38rem); max-height: 88vh; transform: translate(-50%, -50%); border-radius: 1.35rem; padding-bottom: 1.25rem; }
    .map-view { margin-inline: 0; }
    .map-heading { margin-inline: 0; }
    .map { border: 1px solid var(--line); border-radius: 1rem; min-height: calc(100vh - 15rem); overflow: hidden; }
}

@media (min-width: 1000px) {
    .topbar { padding-inline: max(1rem, calc((100% - 74rem) / 2)); }
    .bottom-nav { left: 50%; width: min(42rem, 100%); transform: translateX(-50%); border: 1px solid var(--line); border-bottom: 0; border-radius: 1.1rem 1.1rem 0 0; }
    .admin-panel .stack-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
    .app-toast { animation: toast-in .18s ease-out; }
    @keyframes toast-in { from { opacity: 0; transform: translate(-50%, -.5rem); } }
}