:root {
    --bt-black: #1c1c1c;
    --bt-blue: #35b1ce;
    --bt-blue-dark: #247b8e;
    --bt-cyan: #31a5be;
    --bt-shadow: 0 20px 50px rgba(15, 34, 39, 0.12);
}

html, body { min-height: 100%; }
body {
    background: linear-gradient(180deg, #eef7fa 0%, #f6fbfd 30%, #ffffff 100%);
    color: var(--bt-black);
    font: 16px/1.6 'Roboto Condensed', sans-serif;
}
a { color: var(--bt-blue); text-decoration: none; }
a:hover, a:focus { color: var(--bt-black); }
.top-strip { background: rgba(12, 24, 27, 0.85); padding: 0.7rem 0; }
.top-link { color: rgba(255,255,255,0.84); text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; }
.top-link:hover, .top-link:focus { color: #fff; }
.hero-shell {
    background: linear-gradient(135deg, rgba(29,35,36,.84), rgba(49,165,190,.78)), url('/assets/img/header-bg.jpg') center bottom / cover no-repeat;
    box-shadow: inset 0 -80px 120px rgba(0, 0, 0, 0.15);
}
.site-logo { width: 60px; height: 60px; object-fit: contain; }
.navbar { padding-top: 1rem; padding-bottom: 1rem; }
.navbar .nav-link { text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: rgba(255,255,255,.86); }
.navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-link.active { color: #fff; }
.btn-accent, .btn-dark-accent { border-radius: 999px; padding: .8rem 1.3rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; border: 0; }
.btn-accent { background: linear-gradient(135deg, var(--bt-blue) 0%, #64d3ef 100%); color: #fff; }
.btn-accent:hover, .btn-accent:focus { color: #fff; background: linear-gradient(135deg, var(--bt-black) 0%, var(--bt-blue-dark) 100%); }
.btn-dark-accent { background: var(--bt-black); color: #fff; }
.btn-dark-accent:hover, .btn-dark-accent:focus { color: #fff; background: var(--bt-blue-dark); }
.hero-banner {
    position: relative; overflow: hidden; border-radius: 1.5rem; padding: 3rem; color: #fff; box-shadow: var(--bt-shadow);
    background: linear-gradient(135deg, rgba(13,20,22,.78), rgba(53,177,206,.6)), url('/assets/img/slider-bg.jpg') center center / cover no-repeat;
}
.hero-banner::after { content: ''; position: absolute; inset: auto -10% -40% auto; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 68%); }
.hero-kicker, .section-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
.hero-kicker { color: rgba(255,255,255,.78); }
.section-kicker { color: var(--bt-blue-dark); }
.dashboard-card, .panel-card, .auth-card, .table-card { border: 0; border-radius: 1.25rem; box-shadow: var(--bt-shadow); background: rgba(255,255,255,.96); }
.metric-card { position: relative; padding: 1.5rem; background: #fff; border-radius: 1.25rem; box-shadow: var(--bt-shadow); min-height: 100%; }
.metric-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(53,177,206,.12); pointer-events: none; }
.metric-label { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: #6c757d; }
.metric-value { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.map-shell { border-radius: 1.25rem; overflow: hidden; box-shadow: var(--bt-shadow); border: 1px solid rgba(53,177,206,.15); }
.map-canvas { width: 100%; min-height: 460px; }
.small-map { min-height: 360px; }
.trail-map-shell {
    position: relative;
}
.trail-fullscreen-floating-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1200;
    display: none;
}
.trail-fullscreen-active,
html.trail-fullscreen-active {
    overflow: hidden;
}
html.trail-fullscreen-active .site-header,
html.trail-fullscreen-active .site-footer,
html.trail-fullscreen-active .container.py-4 > .panel-card > :not(.map-shell),
html.trail-fullscreen-active .container-fluid.py-4,
.trail-fullscreen-active .site-header,
.trail-fullscreen-active .site-footer,
.trail-fullscreen-active .container.py-4 > .panel-card > :not(.map-shell),
.trail-fullscreen-active .container-fluid.py-4 {
    display: none !important;
}
html.trail-fullscreen-active .trail-page .map-shell,
.trail-fullscreen-active .trail-page .map-shell {
    position: fixed;
    inset: 0;
    z-index: 1100;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}
html.trail-fullscreen-active .trail-page #trailBuilderMap,
.trail-fullscreen-active .trail-page #trailBuilderMap {
    min-height: 100vh;
    min-height: 100dvh;
}
html.trail-fullscreen-active .trail-fullscreen-floating-btn,
.trail-fullscreen-active .trail-fullscreen-floating-btn {
    display: inline-flex;
}
.public-route-preview { min-height: 220px; }
.map-product-page main {
    padding-bottom: 0;
}
.map-product-page main > .container:first-child {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.map-experience-shell,
.map-surface-page {
    padding-bottom: 2rem;
}
.map-experience-stage,
.map-surface-shell {
    position: relative;
    overflow: hidden;
    border-radius: 1.75rem;
    min-height: calc(100vh - 13rem);
    background: #dbe7ef;
    box-shadow: 0 30px 80px rgba(15, 34, 39, 0.16);
}
.map-experience-canvas {
    min-height: calc(100vh - 13rem);
}
.map-floating-stack {
    position: absolute;
    z-index: 1200;
    display: grid;
    gap: 1rem;
    pointer-events: none;
}
.map-floating-stack > * {
    pointer-events: auto;
}
.map-floating-stack-left {
    top: 1.25rem;
    left: 1.25rem;
    max-width: min(36rem, calc(100% - 2.5rem));
}
.map-floating-stack-right {
    top: 1.25rem;
    right: 1.25rem;
    width: min(24rem, calc(100% - 2.5rem));
}
.map-mobile-dock,
.map-mobile-panel-head {
    display: none;
}
.map-glass-panel {
    padding: 1rem 1.1rem;
    border-radius: 1.25rem;
    background: rgba(12, 20, 24, 0.72);
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(14px);
}
.map-trip-panel [hidden] {
    display: none !important;
}
.map-hero-panel {
    max-width: 32rem;
}
.map-muted-copy {
    color: rgba(255,255,255,.74);
}
.map-toolbar-title {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.66);
}
.map-toolbar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.map-toolbar-top-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}
.map-toolbar-grid {
    display: grid;
    gap: .75rem;
    margin-top: .9rem;
}
.map-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}
.map-toolbar-actions .btn,
.map-toolbar-actions .form-select {
    min-height: 2.5rem;
}
.map-toolbar-actions .route-speed-select {
    min-width: 10rem;
}
.map-toolbar-panel .form-label,
.map-toolbar-panel .form-check-label {
    color: rgba(255,255,255,.82);
}
.map-toolbar-panel .form-select,
.map-toolbar-panel .form-control {
    background: rgba(255,255,255,.96);
}
.map-stats-strip,
.map-top-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
.map-stat-block {
    display: grid;
    gap: .18rem;
    min-width: 8.25rem;
}
.map-stat-block span {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.6);
}
.map-stat-block strong {
    font-size: 1rem;
}
.map-trip-panel {
    margin-top: auto;
}
.map-preview-stack {
    display: grid;
    gap: .85rem;
}
.map-preview-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem 1rem;
    border-radius: 1rem;
    background: rgba(53,177,206,.06);
}
.map-preview-line span {
    color: #607077;
}
.map-poi-pin,
.map-photo-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
    border: 2px solid rgba(255,255,255,.94);
}
.map-poi-pin {
    width: 16px;
    height: 16px;
    background: #1877f2;
}
.map-poi-hazard { background: #e23d3d; }
.map-poi-viewpoint { background: #6f42c1; }
.map-poi-water { background: #19a7ce; }
.map-poi-parking { background: #495057; }
.map-poi-checkpoint { background: #1db954; }
.map-photo-pin {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #ff8a00, #ff4d4d);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}
.map-photo-popup {
    display: grid;
    gap: .45rem;
    min-width: 180px;
}
.map-photo-popup img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: .75rem;
}
.map-photo-popup span {
    color: #6c757d;
    font-size: .82rem;
}
.trail-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}
.trail-photo-card {
    display: grid;
    gap: .45rem;
}
.trail-photo-card img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 1rem;
}
.trail-photo-card span {
    color: #6c757d;
    font-size: .84rem;
}
.home-page .hero-shell {
    background:
        linear-gradient(135deg, rgba(8,15,17,.86), rgba(20,94,112,.72)),
        url('/assets/img/slider-bg.jpg') center center / cover no-repeat;
}
.landing-hero {
    position: relative;
    margin-top: -1rem;
    padding: 5.5rem 0 4.25rem;
    color: #fff;
    overflow: hidden;
}
.landing-hero-media {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 75% 18%, rgba(255,255,255,.16), transparent 22%),
        linear-gradient(180deg, rgba(8,15,17,.08), rgba(8,15,17,.34));
    pointer-events: none;
}
.landing-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(20rem, .8fr);
    gap: 2rem 3rem;
    align-items: end;
}
.landing-kicker {
    display: inline-block;
    padding: .45rem .8rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
}
.landing-title {
    margin-top: 1rem;
    max-width: 10ch;
    font-size: clamp(2.8rem, 6vw, 5.5rem);
    line-height: .95;
    text-transform: uppercase;
}
.landing-subtitle {
    max-width: 42rem;
    margin-top: 1.2rem;
    font-size: 1.08rem;
    color: rgba(255,255,255,.82);
}
.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.7rem;
}
.landing-hero-side {
    display: grid;
    gap: 1rem;
}
.landing-hero-note {
    padding: 1.2rem 1.3rem;
    border-radius: 1.35rem;
    background: rgba(10,18,20,.62);
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(12px);
}
.landing-hero-note span {
    display: block;
    margin-bottom: .35rem;
    color: rgba(255,255,255,.6);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
}
.landing-hero-note strong {
    color: #fff;
    font-size: 1rem;
}
.landing-band,
.landing-faq,
.landing-cta {
    padding-top: 4.75rem;
}
.landing-section-title {
    font-size: clamp(1.95rem, 4vw, 3.15rem);
    line-height: 1.03;
    text-transform: uppercase;
}
.landing-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 2.4rem;
}
.landing-feature-grid h3,
.landing-faq-list h3,
.landing-route-title {
    margin-bottom: .45rem;
    font-size: 1.15rem;
    text-transform: uppercase;
}
.landing-feature-grid p,
.landing-faq-list p,
.landing-route-copy,
.home-muted-copy {
    color: #5f6b71;
}
.landing-story {
    margin-top: 4rem;
    padding: 5rem 0;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(11,18,20,.94), rgba(27,85,100,.92)),
        url('/assets/img/footer-bg.jpg') center center / cover no-repeat;
}
.landing-story-copy {
    color: rgba(255,255,255,.72);
}
.landing-story-list {
    display: grid;
    gap: 1rem;
}
.landing-story-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.72);
}
.landing-story-list strong {
    color: #fff;
    text-transform: uppercase;
    font-size: .92rem;
}
.landing-route-card {
    height: 100%;
    padding: 1.4rem;
    border-radius: 1.3rem;
    background: #fff;
    box-shadow: var(--bt-shadow);
}
.landing-route-label {
    margin-bottom: .45rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .72rem;
    color: var(--bt-blue-dark);
}
.landing-route-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    color: #415057;
    font-size: .92rem;
}
.landing-faq-list {
    display: grid;
    gap: 2rem;
}
.landing-cta {
    padding-bottom: 4.5rem;
}
.landing-cta-shell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    padding: 2rem 0;
    border-top: 1px solid rgba(28,28,28,.08);
}
.ride-page .site-header,
.ride-page .site-footer,
.ride-page .hero-banner,
.ride-page .top-strip { display: none; }
.ride-page,
.ride-page body,
.ride-page main { overflow: hidden; background: #0f171a; }
.ride-page .container-fluid,
.ride-page .map-shell {
    position: fixed;
    inset: 0;
    width: 100%;
    margin: 0;
    padding: 0 !important;
}
.ride-page .map-shell {
    z-index: 1100;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background: #dfe8ec;
}
.ride-page #dashboardMap {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
}
.ride-page .ride-top-bar,
.playback-top-bar {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}
.ride-page .ride-top-bar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 1200;
    justify-content: center;
}
.ride-stat {
    min-width: 6.5rem;
    padding: .8rem 1rem;
    border-radius: 1rem;
    background: rgba(16,23,26,.82);
    color: #fff;
    text-align: center;
    backdrop-filter: blur(10px);
}
.ride-stat-label {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.68);
    margin-bottom: .2rem;
}
.ride-stat-value {
    display: block;
    font-weight: 700;
    line-height: 1.1;
}
.ride-page .ride-bottom-bar {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1200;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(16,23,26,.82);
    color: #fff;
    backdrop-filter: blur(10px);
}
.ride-page .ride-action-row {
    display: flex;
    gap: .75rem;
    align-items: stretch;
}
.ride-page .ride-stop-form {
    flex: 1 1 56%;
    margin: 0;
}
.ride-action-row > .ride-stop-btn,
.playback-fullscreen-bottom .ride-stop-btn {
    flex: 1 1 56%;
}
.ride-page .ride-pause-btn {
    flex: 1 1 44%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: .85rem;
    font-size: 1rem;
    border-width: 1px;
}
.ride-page .ride-pause-btn.is-paused {
    background: #f4c542;
    border-color: #f4c542;
    color: #142126;
}
.playback-fullscreen-bottom .ride-action-row {
    display: flex;
    gap: .75rem;
    align-items: stretch;
}
.playback-fullscreen-bottom .ride-pause-btn {
    flex: 1 1 44%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: .85rem;
    font-size: 1rem;
    border-width: 1px;
}
.playback-fullscreen-bottom .ride-pause-btn.is-paused {
    background: #f4c542;
    border-color: #f4c542;
    color: #142126;
}
.ride-page .ride-stop-btn {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1rem;
    box-shadow: none;
}
.bt-marker {
    position: relative;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.bt-marker-label {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(14, 19, 26, .88);
    color: #fff;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.1;
    box-shadow: 0 8px 18px rgba(0,0,0,.22);
    pointer-events: none;
}
.bt-marker-core {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 4px rgba(255,255,255,.16), 0 6px 18px rgba(0,0,0,.25);
}
.bt-marker-core-avatar {
    width: 48px;
    height: 48px;
    overflow: hidden;
    border: 0;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
}
.bt-marker-core-glyph {
    width: 48px;
    height: 48px;
    overflow: hidden;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}
.bt-marker-avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}
.bt-marker-glyph-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}
.bt-marker-start .bt-marker-core { background: #1db954; }
.bt-marker-end .bt-marker-core { background: #e23d3d; }
.bt-marker-active .bt-marker-core { background: #1877f2; width: 18px; height: 18px; }
.bt-marker-active .bt-marker-core.bt-marker-core-avatar { background: transparent; width: 48px; height: 48px; }
.bt-marker-active .bt-marker-core.bt-marker-core-glyph { background: transparent; min-width: 24px; min-height: 24px; }
.bt-marker-arrow {
    position: absolute;
    top: -6px;
    left: 24px;
    width: 8px;
    height: 14px;
    transform-origin: 50% 16px;
}
.bt-marker-arrow::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 14px solid #1877f2;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.2));
}
.status-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 700; background: rgba(53,177,206,.12); color: var(--bt-blue-dark); }
.status-pill::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.form-control, .form-select { border-radius: .9rem; border: 1px solid rgba(28,28,28,.12); padding: .9rem 1rem; }
.form-control:focus, .form-select:focus { border-color: rgba(53,177,206,.55); box-shadow: 0 0 0 .25rem rgba(53,177,206,.16); }
.route-speed-select { width: auto; min-width: 150px; }
.site-footer { color: #fff; background: linear-gradient(135deg, rgba(17,23,25,.94), rgba(36,123,142,.9)), url('/assets/img/footer-bg.jpg') center center / cover no-repeat; }
.footer-title { font-size: clamp(1.7rem, 3vw, 2.4rem); text-transform: uppercase; }
.table thead th { text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: #6c757d; }
.table tbody tr { vertical-align: middle; }
.empty-state { padding: 2rem; border: 1px dashed rgba(53,177,206,.28); border-radius: 1rem; background: rgba(53,177,206,.05); }
.playback-fullscreen-top,
.playback-fullscreen-bottom { display: none; }
html.playback-fullscreen-active,
.playback-fullscreen-active { overflow: hidden; }
html.playback-fullscreen-active .site-header,
html.playback-fullscreen-active .site-footer,
html.playback-fullscreen-active .hero-banner,
html.playback-fullscreen-active .top-strip,
html.playback-fullscreen-active .playback-top-bar,
html.playback-fullscreen-active #tripRouteDetails,
html.playback-fullscreen-active #navigationStatus,
html.playback-fullscreen-active .d-flex.flex-wrap.gap-2.mb-3,
.playback-fullscreen-active .site-header,
.playback-fullscreen-active .site-footer,
.playback-fullscreen-active .hero-banner,
.playback-fullscreen-active .top-strip,
.playback-fullscreen-active .playback-top-bar,
.playback-fullscreen-active #tripRouteDetails,
.playback-fullscreen-active #navigationStatus,
.playback-fullscreen-active .d-flex.flex-wrap.gap-2.mb-3 { display: none !important; }
html.playback-fullscreen-active .map-shell,
.playback-fullscreen-active .map-shell {
    position: fixed;
    inset: 0;
    z-index: 1100;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background: #dfe8ec;
}
html.playback-fullscreen-active #tripRouteMap,
.playback-fullscreen-active #tripRouteMap {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    z-index: 1100;
}
html.playback-fullscreen-active .playback-fullscreen-top,
.playback-fullscreen-active .playback-fullscreen-top {
    position: fixed;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 1200;
    display: flex;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
}
html.playback-fullscreen-active .playback-fullscreen-bottom,
.playback-fullscreen-active .playback-fullscreen-bottom {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1200;
    max-width: 24rem;
    margin: 0 auto;
    display: block;
}
.large-map { min-height: 460px; }
.trail-builder-tools { display: flex; flex-wrap: wrap; gap: .5rem; }
.trail-detail-panel,
.trail-detail-placeholder {
    border: 1px dashed rgba(53,177,206,.22);
    border-radius: 1rem;
    padding: 1rem;
    background: rgba(53,177,206,.04);
}
.trail-detail-card { display: grid; gap: 1rem; }
.trail-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}
.trail-meta-grid span {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6c757d;
}
.trail-meta-grid strong { display: block; font-size: 1rem; color: var(--bt-blue-dark); }
.leaderboard-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.leaderboard-heading {
    margin-bottom: .6rem;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6c757d;
}
.leaderboard-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .75rem;
    border-radius: .8rem;
    background: rgba(17,23,25,.04);
    margin-bottom: .45rem;
}
.leaderboard-row span small {
    display: block;
    margin-top: .2rem;
    color: #6c757d;
}
.elevation-profile {
    border: 1px solid rgba(17,23,25,.08);
    border-radius: 1rem;
    padding: .9rem;
    background: linear-gradient(180deg, rgba(53,177,206,.12), rgba(53,177,206,.03));
}
.elevation-profile svg {
    display: block;
    width: 100%;
    height: 120px;
}
.elevation-scale {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .5rem;
    font-size: .85rem;
    color: #6c757d;
}
.segment-card,
.achievement-card,
.athlete-card {
    border: 1px solid rgba(17,23,25,.08);
    border-radius: 1rem;
    padding: 1rem;
    background: #fff;
}
.segment-card + .segment-card { margin-top: .8rem; }
.trail-list { display: grid; gap: .75rem; }
.trail-list-item {
    display: block;
    width: 100%;
    padding: .95rem 1rem;
    border: 1px solid rgba(17,23,25,.08);
    border-radius: 1rem;
    background: #fff;
    color: inherit;
    text-align: left;
    text-decoration: none;
}
.trail-list-item strong,
.trail-list-item span { display: block; }
.trail-list-item span { color: #6c757d; font-size: .9rem; margin-top: .2rem; }
.trail-share-box {
    padding: .9rem 1rem 1rem;
    border-top: 1px solid rgba(17,23,25,.08);
    background: rgba(53,177,206,.03);
    border-radius: 0 0 1rem 1rem;
}

.trail-action-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.trail-delete-form {
    display: none;
}
.trail-marker-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .85rem;
}
.trail-marker-option {
    display: grid;
    gap: .55rem;
    align-content: start;
    padding: .85rem .75rem;
    border: 1px solid rgba(17,23,25,.08);
    border-radius: 1rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.trail-marker-option:hover {
    border-color: rgba(53,177,206,.45);
    transform: translateY(-1px);
}
.trail-marker-option-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.trail-marker-option-visual {
    display: grid;
    place-items: center;
    min-height: 4.25rem;
    border-radius: .85rem;
    background: rgba(53,177,206,.08);
}
.trail-marker-option-visual img {
    max-width: 42px;
    max-height: 42px;
    object-fit: contain;
}
.trail-marker-option-label {
    font-size: .9rem;
    font-weight: 600;
    text-align: center;
    color: #142126;
}
.trail-marker-option-input:checked + .trail-marker-option-visual {
    box-shadow: inset 0 0 0 2px #35b1ce;
    background: rgba(53,177,206,.14);
}
.trail-marker-option-input:checked ~ .trail-marker-option-label {
    color: #0f7f99;
}
.trail-view-stats {
    display: grid;
    gap: .9rem;
}
.trail-view-stats .ride-stat {
    background: rgba(53,177,206,.06);
    border: 1px solid rgba(53,177,206,.14);
    border-radius: 1rem;
    padding: .9rem 1rem;
}
.athlete-grid,
.achievement-grid {
    display: grid;
    gap: .85rem;
}
.athlete-name,
.achievement-title {
    font-weight: 700;
    color: var(--bt-blue-dark);
}
.profile-avatar-lg,
.profile-avatar-fallback-lg {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(53,177,206,.2);
    box-shadow: 0 10px 24px rgba(17,23,25,.14);
}
.marker-icon-picker {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
}
.marker-icon-option {
    appearance: none;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    border-radius: 1rem;
    padding: 0.85rem 0.65rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    transition: border-color .2s ease, transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.marker-icon-option:hover {
    border-color: rgba(83, 202, 239, .7);
    transform: translateY(-1px);
}
.marker-icon-option.is-selected {
    border-color: #53caef;
    background: rgba(83, 202, 239, .12);
    box-shadow: 0 0 0 1px rgba(83, 202, 239, .35);
}
.marker-icon-option img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}
.marker-icon-option span {
    font-size: 0.75rem;
    line-height: 1.2;
    text-align: center;
}
.marker-icon-pagination-wrap {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.marker-icon-pagination .page-link {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    color: #fff;
}
.marker-icon-pagination .page-item.active .page-link {
    background: #53caef;
    border-color: #53caef;
    color: #07131a;
}
.marker-icon-pagination .page-item.disabled .page-link {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.08);
    color: rgba(255,255,255,.4);
}
@media (max-width: 1199.98px) {
    .marker-icon-picker {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 991.98px) {
    .marker-icon-picker {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 575.98px) {
    .marker-icon-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.profile-avatar-lg {
    object-fit: cover;
    background: #fff;
}
.profile-avatar-fallback-lg {
    background: linear-gradient(135deg, rgba(53,177,206,.9), rgba(19,121,164,.85));
    color: #fff;
    font-size: 4rem;
    font-weight: 700;
    text-transform: uppercase;
}
.group-chat-shell {
    border: 1px solid rgba(17,23,25,.08);
    border-radius: 1rem;
    background: #fff;
    overflow: hidden;
}
.group-chat-header {
    padding: 1rem;
    border-bottom: 1px solid rgba(17,23,25,.08);
    background: rgba(53,177,206,.06);
}
.group-chat-header strong,
.group-chat-header span {
    display: block;
}
.group-chat-header span {
    color: #6c757d;
    margin-top: .2rem;
}
.group-member-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid rgba(17,23,25,.08);
}
.group-member-chip {
    display: inline-flex;
    align-items: center;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: rgba(17,23,25,.06);
    font-size: .85rem;
}
.group-chat-messages {
    max-height: 320px;
    overflow-y: auto;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(53,177,206,.04), rgba(53,177,206,0));
}
.group-message {
    padding: .8rem .9rem;
    border-radius: .9rem;
    background: #fff;
    border: 1px solid rgba(17,23,25,.08);
    margin-bottom: .75rem;
}
.group-message strong,
.group-message p,
.group-message span {
    display: block;
}
.group-message p {
    margin: .35rem 0;
}
.group-message span {
    color: #6c757d;
    font-size: .82rem;
}
.group-chat-form {
    display: flex;
    gap: .75rem;
    padding: 1rem;
    border-top: 1px solid rgba(17,23,25,.08);
    background: #fff;
}
.group-chat-form .form-control {
    flex: 1 1 auto;
}
.group-invite-panel {
    padding: 1rem;
    border-bottom: 1px solid rgba(17,23,25,.08);
    background: rgba(17,23,25,.03);
}
.group-invite-form {
    display: flex;
    gap: .75rem;
}
.group-invite-form .form-control {
    flex: 1 1 auto;
}
.groups-page .hero-banner {
    margin-bottom: 1.75rem;
}
.groups-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
.groups-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .78rem 1.15rem;
    border-radius: 999px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(17,23,25,.08);
    color: var(--bt-black);
    box-shadow: 0 10px 20px rgba(17,23,25,.05);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .84rem;
}
.groups-nav-link:hover,
.groups-nav-link:focus {
    color: var(--bt-black);
    border-color: rgba(24,119,242,.18);
    background: #f6fbff;
}
.groups-nav-link.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #1877f2, #39a0ff);
}
.messenger-layout {
    display: grid;
    grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}
.messenger-layout-chat-only {
    grid-template-columns: minmax(20rem, 24rem) minmax(0, 1fr);
}
.messenger-sidebar,
.messenger-chat-frame {
    border: 1px solid rgba(17,23,25,.08);
    border-radius: 1.4rem;
    background: rgba(255,255,255,.98);
    box-shadow: var(--bt-shadow);
}
.messenger-sidebar {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 13rem);
    overflow: hidden;
}
.messenger-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(17,23,25,.08);
}
.messenger-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 .7rem;
    border-radius: 999px;
    background: rgba(24,119,242,.1);
    color: #1877f2;
    font-weight: 700;
}
.messenger-sidebar-section {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(17,23,25,.08);
    overflow: auto;
}
.messenger-sidebar-section:last-child {
    border-bottom: 0;
}
.messenger-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .9rem;
}
.messenger-section-head h3 {
    margin: 0;
    font-size: .96rem;
    text-transform: uppercase;
}
.messenger-section-head span {
    color: #6c757d;
    font-size: .84rem;
}
.messenger-section-head.compact {
    margin-bottom: .65rem;
}
.messenger-create-form {
    display: grid;
    gap: .85rem;
}
.messenger-room-list,
.messenger-compact-list,
.messenger-pending-invites {
    display: grid;
    gap: .75rem;
}
.messenger-room-link {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1rem;
    border-radius: 1rem;
    color: inherit;
    background: #f7fafc;
    border: 1px solid transparent;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.messenger-room-link:hover,
.messenger-room-link:focus {
    color: inherit;
    background: #eff5fb;
    border-color: rgba(24,119,242,.14);
    transform: translateY(-1px);
}
.messenger-room-link.is-active {
    background: rgba(24,119,242,.1);
    border-color: rgba(24,119,242,.22);
}
.messenger-room-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #1877f2, #4cb6ff);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(24,119,242,.18);
}
.messenger-room-avatar.large {
    width: 3.25rem;
    height: 3.25rem;
}
.messenger-room-copy {
    display: grid;
    gap: .15rem;
    min-width: 0;
}
.messenger-room-copy strong,
.messenger-room-copy small {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.messenger-room-copy small {
    color: #6c757d;
}
.messenger-compact-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    padding: .95rem 1rem;
    border-radius: 1rem;
    background: #f7fafc;
    border: 1px solid rgba(17,23,25,.06);
}
.messenger-compact-copy {
    display: grid;
    gap: .18rem;
    min-width: 0;
}
.messenger-compact-copy strong,
.messenger-compact-copy span,
.messenger-compact-copy small {
    display: block;
}
.messenger-compact-copy span,
.messenger-compact-copy small {
    color: #6c757d;
}
.messenger-chat-pane,
.messenger-chat-frame,
.messenger-chat-shell {
    min-width: 0;
}
.messenger-chat-frame {
    height: 100%;
    min-height: 48rem;
}
.messenger-chat-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(246,250,253,.92), rgba(255,255,255,.98));
}
.messenger-chat-top {
    padding: 1.25rem 1.25rem 0;
    border-bottom: 1px solid rgba(17,23,25,.08);
    background: #fff;
}
.messenger-chat-header {
    padding: 0 0 1rem;
    border-bottom: 0;
    background: transparent;
}
.messenger-chat-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.messenger-chat-title-wrap {
    display: flex;
    align-items: center;
    gap: .9rem;
}
.messenger-chat-header-actions {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}
.messenger-chat-meta {
    display: block;
    padding-bottom: 1rem;
}
.messenger-chat-members,
.messenger-invite-panel {
    min-width: 0;
}
.messenger-member-list {
    padding: 0;
    border-bottom: 0;
    gap: .55rem;
    max-height: 5.2rem;
    overflow-y: auto;
}
.messenger-member-chip {
    background: rgba(24,119,242,.08);
    color: #1a3f6d;
}
.messenger-invite-panel {
    padding: 0;
    border-bottom: 0;
    background: transparent;
}
.messenger-invite-form {
    gap: .6rem;
}
.messenger-inline-invite {
    padding: .75rem .85rem;
    border-radius: .9rem;
    background: #f7fafc;
    border: 1px solid rgba(17,23,25,.06);
}
.messenger-inline-invite strong,
.messenger-inline-invite span {
    display: block;
}
.messenger-inline-invite span {
    color: #6c757d;
    font-size: .84rem;
    margin-top: .2rem;
}
.messenger-chat-messages {
    flex: 1 1 auto;
    max-height: none;
    min-height: 20rem;
    padding: 1.4rem 1.25rem;
    background:
        radial-gradient(circle at top, rgba(24,119,242,.08), transparent 26%),
        linear-gradient(180deg, rgba(250,252,255,.96), rgba(241,246,251,.88));
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.group-message {
    max-width: min(38rem, 82%);
    width: fit-content;
    padding: .8rem 1rem;
    border-radius: 1.15rem 1.15rem 1.15rem .45rem;
    background: #fff;
    border: 1px solid rgba(17,23,25,.08);
    box-shadow: 0 8px 20px rgba(17,23,25,.06);
}
.group-message-own {
    margin-left: auto;
    border-radius: 1.15rem 1.15rem .45rem 1.15rem;
    background: linear-gradient(135deg, #1877f2, #3e8dff);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 24px rgba(24,119,242,.18);
}
.group-message-own strong,
.group-message-own span {
    color: rgba(255,255,255,.86);
}
.messenger-chat-form {
    padding: 1rem 1.25rem;
    background: #fff;
    align-items: center;
}
.messenger-chat-form .form-control {
    background: #f4f7fb;
    border-color: rgba(17,23,25,.08);
    border-radius: 999px;
    min-height: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.messenger-chat-form .btn {
    border-radius: 999px;
    min-width: 5.5rem;
}
.messenger-empty-state,
.messenger-empty-stage {
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(24,119,242,.06);
    color: #52626a;
}
.messenger-empty-state.compact {
    padding: .75rem .85rem;
}
.messenger-empty-stage {
    min-height: 14rem;
    display: grid;
    place-content: center;
    text-align: center;
    gap: .45rem;
}
.messenger-empty-stage strong {
    color: var(--bt-blue-dark);
}
.messenger-manage-frame {
    min-height: 38rem;
}
.messenger-manage-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.messenger-manage-header {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(17,23,25,.08);
    background: #fff;
}
.messenger-manage-body {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
}
.messenger-manage-card {
    padding: 1.1rem 1.1rem 1rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(17,23,25,.06);
    background: #fff;
    box-shadow: 0 8px 22px rgba(17,23,25,.04);
}
.messenger-invite-form-stacked {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
}
@media (max-width: 991.98px) {
    .map-product-page.mobile-map-ui-hidden .map-mobile-dock {
        display: none !important;
    }
    .map-product-page.mobile-map-ui-hidden [data-hide-with-ui='1'] {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(.5rem) !important;
    }
    .map-product-page .site-header,
    .map-product-page .site-footer,
    .map-product-page .top-strip,
    .map-product-page .hero-shell {
        display: none !important;
    }
    .map-product-page,
    .map-product-page main {
        background: #0f171a;
    }
    .map-product-page main {
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }
    .map-product-page main > .container:first-child {
        display: none;
    }
    .map-product-page .map-experience-shell,
    .map-product-page .map-surface-page {
        padding-bottom: 0;
        margin: 0;
    }
    .map-product-page .container-fluid.map-surface-page {
        padding: 0 !important;
    }
    .map-product-page .map-surface-page > .row {
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
        margin: 0;
    }
    .map-product-page .map-surface-page > .row > [class*='col-'] {
        padding-right: 0;
        padding-left: 0;
    }
    .hero-banner { padding: 2rem; }
    .map-canvas { min-height: 380px; }
    .landing-hero-inner { grid-template-columns: 1fr; }
    .landing-feature-grid { grid-template-columns: 1fr; }
    .landing-hero { padding: 4.5rem 0 3.5rem; }
    .leaderboard-columns,
    .trail-meta-grid { grid-template-columns: 1fr; }
    .map-experience-stage,
    .map-surface-shell,
    .map-experience-canvas {
        min-height: 100vh;
        min-height: 100dvh;
    }
    .map-experience-stage,
    .map-surface-shell {
        border-radius: 0;
        box-shadow: none;
    }
    .map-floating-stack {
        gap: .75rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(.5rem);
        transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    }
    .map-floating-stack.is-mobile-panel-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
    .map-floating-stack-left,
    .map-floating-stack-right {
        position: absolute;
        padding: 0;
        z-index: 1200;
        width: auto;
        max-width: calc(100% - 1.7rem);
    }
    .map-floating-stack-left {
        top: .85rem;
        left: .85rem;
        right: .85rem;
        max-width: min(24rem, calc(100% - 1.7rem));
    }
    .map-floating-stack-right {
        top: auto;
        right: .85rem;
        bottom: .85rem;
        left: .85rem;
    }
    .live-map-trip-stack {
        bottom: 4.8rem;
    }
    .trail-page .map-floating-stack-right {
        bottom: 1.65rem;
    }
    .map-glass-panel {
        border-radius: 1rem;
    }
    .map-mobile-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        margin-bottom: .75rem;
    }
    .map-mobile-panel-label {
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .12em;
        color: rgba(255,255,255,.68);
    }
    .map-hero-panel {
        max-width: none;
    }
    .map-hero-panel h1,
    .map-hero-panel h2 {
        font-size: 1.2rem;
        line-height: 1.1;
    }
    .map-muted-copy {
        font-size: .92rem;
    }
    .map-stats-strip,
    .map-top-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem;
    }
    .map-stat-block,
    .ride-stat {
        min-width: 0;
    }
    .map-stat-block strong,
    .ride-stat-value {
        font-size: .95rem;
    }
    .map-toolbar-sheet {
        max-height: min(58vh, 34rem);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .live-map-experience .map-toolbar-sheet {
        max-height: min(50vh, 28rem);
    }
    .map-mobile-dock {
        position: absolute;
        z-index: 1250;
        right: .85rem;
        bottom: .85rem;
        left: .85rem;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .65rem;
        pointer-events: none;
    }
    .trail-page .map-mobile-dock {
        bottom: 1.65rem;
    }
    .map-mobile-dock-btn {
        min-height: 2.7rem;
        box-shadow: 0 14px 32px rgba(0,0,0,.24);
        pointer-events: auto;
    }
    .map-floating-stack-right.is-mobile-panel-open ~ .map-mobile-dock,
    .map-floating-stack-left.is-mobile-panel-open ~ .map-mobile-dock {
        opacity: .72;
    }
    .map-toolbar-panel .map-toolbar-top {
        position: sticky;
        top: 0;
        z-index: 2;
        padding-bottom: .7rem;
        background: linear-gradient(180deg, rgba(12, 20, 24, 0.96), rgba(12, 20, 24, 0.82));
    }
    .map-toolbar-top .btn {
        flex: 1 1 auto;
        min-height: 2.5rem;
    }
    .map-toolbar-top-actions {
        width: 100%;
    }
    .map-toolbar-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }
    .map-toolbar-actions .route-speed-select,
    .map-toolbar-actions .btn:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
    .map-trip-panel .btn,
    .trail-builder-tools .btn {
        min-height: 2.7rem;
    }
    .trail-photo-grid {
        grid-template-columns: 1fr;
    }
    .messenger-layout,
    .messenger-chat-meta,
    .messenger-invite-form-stacked { grid-template-columns: 1fr; }
    .groups-nav {
        gap: .55rem;
    }
    .messenger-sidebar {
        max-height: none;
    }
    .messenger-chat-frame {
        min-height: 40rem;
    }
    .group-chat-form,
    .group-invite-form { flex-direction: column; }
    .messenger-chat-header-bar {
        align-items: flex-start;
        flex-direction: column;
    }
}
@media (max-width: 767.98px) {
    .hero-banner { padding: 1.5rem; border-radius: 1rem; }
    .metric-value { font-size: 1.7rem; }
    .map-canvas { min-height: 320px; }
    .map-experience-stage,
    .map-surface-shell,
    .map-experience-canvas {
        min-height: 100vh;
        min-height: 100dvh;
    }
    .map-floating-stack-left,
    .map-floating-stack-right {
        left: .65rem;
        right: .65rem;
        max-width: calc(100% - 1.3rem);
    }
    .map-floating-stack-left {
        top: .65rem;
    }
    .map-floating-stack-right {
        bottom: .65rem;
    }
    .live-map-trip-stack {
        bottom: 4.4rem;
    }
    .trail-page .map-floating-stack-right {
        bottom: 1.35rem;
    }
    .map-toolbar-top,
    .map-preview-line {
        flex-direction: column;
        align-items: flex-start;
    }
    .map-glass-panel {
        padding: .95rem 1rem;
    }
    .map-hero-panel .map-muted-copy {
        display: none;
    }
    .map-hero-panel h1,
    .map-hero-panel h2 {
        font-size: 1.05rem;
        margin-bottom: 0;
    }
    .map-stats-strip,
    .map-top-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .map-toolbar-sheet {
        max-height: min(64vh, 36rem);
    }
    .live-map-experience .map-toolbar-sheet {
        max-height: min(44vh, 24rem);
    }
    .map-mobile-dock {
        left: .65rem;
        right: .65rem;
        bottom: .65rem;
    }
    .trail-page .map-mobile-dock {
        bottom: 1.35rem;
    }
    .map-toolbar-actions {
        grid-template-columns: 1fr 1fr;
    }
    .map-toolbar-actions .btn,
    .map-toolbar-actions .form-select {
        width: 100%;
    }
    .landing-title { max-width: none; }
    .landing-route-card { padding: 1rem; }
    .landing-band,
    .landing-faq,
    .landing-cta { padding-top: 3.5rem; }
    .messenger-sidebar-header,
    .messenger-sidebar-section,
    .messenger-chat-top,
    .messenger-chat-form,
    #groupChatStatus { padding-left: 1rem; padding-right: 1rem; }
    .messenger-room-link,
    .messenger-compact-card {
        align-items: flex-start;
    }
    .messenger-chat-messages {
        padding: 1rem;
    }
    .group-message {
        max-width: 92%;
    }
}