/* site-shell: css/premium-motion.css, css/site-polish.css, css/dark-theme.css, css/site-redesign.css, css/components/telegram-updates-modal.css, css/components/site-tabbar.css, css/components/cookie-notice.css */

/* ---- css/premium-motion.css ---- */
:root {
    --premium-motion-ease: cubic-bezier(.16, 1, .3, 1);
    --premium-motion-soft: cubic-bezier(.2, .8, .2, 1);
    --premium-motion-shadow: 0 22px 58px rgba(15, 23, 42, .12);
    --premium-motion-orange-shadow: 0 18px 42px rgba(255, 106, 26, .26);
}

html.premium-motion-ready {
    scroll-behavior: smooth;
}

.site-ambient {
    position: fixed;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    contain: strict;
    pointer-events: none;
    opacity: 0;
    transition: opacity .7s ease;
}

html.site-ambient-ready .site-ambient {
    opacity: 1;
}

.site-ambient__layer {
    position: absolute;
    inset: -12%;
    transform: translate3d(0, 0, 0) scale(1.06);
    transform-origin: center;
    transition: transform 1.15s var(--premium-motion-soft);
    backface-visibility: hidden;
    will-change: transform;
}

.site-ambient__wash {
    opacity: 1;
    background:
        linear-gradient(132deg, rgba(255, 106, 26, .21) 0%, rgba(255, 106, 26, .075) 25%, transparent 44%),
        linear-gradient(25deg, transparent 39%, rgba(14, 165, 233, .105) 57%, transparent 75%),
        linear-gradient(156deg, transparent 52%, rgba(34, 197, 94, .13) 72%, transparent 90%);
}

.site-ambient__contours {
    opacity: .92;
    background-image:
        repeating-linear-gradient(112deg, transparent 0 52px, rgba(255, 106, 26, .1) 53px, transparent 54px 106px),
        repeating-linear-gradient(24deg, transparent 0 116px, rgba(14, 165, 233, .07) 117px, transparent 118px 232px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.site-ambient__trail {
    inset: 5% -18% auto;
    height: 48%;
    opacity: .76;
    border-top: 1px solid rgba(255, 106, 26, .19);
    border-bottom: 1px solid rgba(34, 197, 94, .12);
    background:
        repeating-linear-gradient(174deg, transparent 0 78px, rgba(255, 106, 26, .08) 79px, transparent 80px 156px);
}

body.page-map .site-ambient,
body.page-messages .site-ambient,
body.auth-page .site-ambient {
    display: none;
}

.motion-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.985);
    filter: saturate(.95);
    transition:
        opacity .56s var(--premium-motion-ease),
        transform .56s var(--premium-motion-ease),
        filter .56s var(--premium-motion-ease);
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, transform;
}

.motion-reveal.motion-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: saturate(1);
    will-change: auto;
}

.motion-reveal.motion-reveal-left {
    transform: translate3d(-18px, 0, 0) scale(.99);
}

.motion-reveal.motion-reveal-right {
    transform: translate3d(18px, 0, 0) scale(.99);
}

.motion-reveal.motion-reveal-left.motion-visible,
.motion-reveal.motion-reveal-right.motion-visible {
    transform: translate3d(0, 0, 0) scale(1);
}

@media (min-width: 768px) {
    html.premium-motion-ready body.site-topbar-scrolled .site-topbar {
        top: 10px;
        height: 58px !important;
        min-height: 58px;
        border-color: rgba(230, 234, 240, .76) !important;
        background: rgba(255, 255, 255, .84) !important;
        box-shadow: 0 18px 48px rgba(15, 23, 42, .12), 0 1px 0 rgba(255, 255, 255, .82) inset !important;
        backdrop-filter: blur(26px) saturate(1.2);
        -webkit-backdrop-filter: blur(26px) saturate(1.2);
    }

    html.premium-motion-ready body.site-topbar-scrolled .site-topbar-left > a img {
        width: var(--site-logo-current-width, 178px) !important;
        max-width: var(--site-logo-current-width, 178px) !important;
    }
}

.motion-reveal.motion-enhanced {
    transition: none !important;
}

@media (hover: hover) and (pointer: fine) {
    html.premium-motion-ready :where(
        .home-scenario-card,
        .home-route-card,
        .home-collection-card,
        .home-region-tile,
        .home-journal-card,
        .route-catalog-results-grid > article,
        .regions-index-grid > article,
        .journal-grid > article
    ) {
        transition:
            transform .34s var(--premium-motion-ease),
            box-shadow .34s ease,
            border-color .28s ease,
            filter .28s ease !important;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
    }

    html.premium-motion-ready :where(
        .home-scenario-card,
        .home-route-card,
        .home-collection-card,
        .home-region-tile,
        .home-journal-card,
        .route-catalog-results-grid > article,
        .regions-index-grid > article,
        .journal-grid > article
    ):hover {
        transform: translate3d(0, -4px, 0);
        border-color: rgba(255, 106, 26, .2);
        box-shadow: 0 22px 52px rgba(15, 23, 42, .11);
        filter: saturate(1.035);
    }
}

html.premium-motion-ready .site-topbar,
html.premium-motion-ready .site-primary-tabs,
html.premium-motion-ready .site-action-button,
html.premium-motion-ready .site-profile-button,
html.premium-motion-ready #mobile-bottom-nav > div {
    transition:
        top .24s var(--premium-motion-soft),
        height .24s var(--premium-motion-soft),
        min-height .24s var(--premium-motion-soft),
        width .24s var(--premium-motion-soft),
        background-color .24s ease,
        border-color .24s ease,
        box-shadow .24s ease,
        transform .24s var(--premium-motion-soft),
        opacity .24s ease,
        filter .24s ease;
}

html.premium-motion-ready .site-primary-tabs {
    overflow: hidden;
    isolation: isolate;
}

html.premium-motion-ready .site-primary-tabs a {
    z-index: 2;
    overflow: visible;
}

html.premium-motion-ready .site-primary-tabs a.bg-white {
    background: transparent !important;
    box-shadow: none !important;
}

.site-tabs-liquid-indicator {
    position: absolute;
    z-index: 1;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 0;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .9)),
        radial-gradient(circle at 50% 100%, rgba(255, 106, 26, .14), transparent 58%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08), 0 0 0 1px rgba(230, 234, 240, .76);
    transition:
        left .34s var(--premium-motion-ease),
        width .34s var(--premium-motion-ease),
        opacity .18s ease;
}

html.premium-motion-ready .site-tabs-liquid-indicator.is-visible {
    opacity: 1;
}

.site-create-button,
.messenger-new-chat-btn,
#quick-publish-btn,
.community-detail-action--orange,
.community-rides-header button,
.community-club-routes-header button {
    position: relative;
    overflow: hidden;
}

.site-create-button::before,
.messenger-new-chat-btn::before,
#quick-publish-btn::before,
.community-detail-action--orange::before,
.community-rides-header button::before,
.community-club-routes-header button::before {
    content: "";
    position: absolute;
    inset: -40% auto -40% -55%;
    width: 42%;
    transform: skewX(-18deg);
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .46), transparent);
    transition: transform .7s var(--premium-motion-ease), opacity .2s ease;
}

.site-create-button:hover::before,
.messenger-new-chat-btn:hover::before,
#quick-publish-btn:hover::before,
.community-detail-action--orange:hover::before,
.community-rides-header button:hover::before,
.community-club-routes-header button:hover::before {
    opacity: 1;
    transform: translateX(340%) skewX(-18deg);
}

.site-action-button:active,
.site-profile-button:active,
.site-create-button:active,
.is-premium-pressing,
.home-feed-tab-link:active,
.quick-action-btn:active,
.quick-icon-btn:active,
.feed-action-btn:active,
.community-detail-tabs a:active,
.messenger-chip:active,
.chat-item:active {
    transform: translateY(0) scale(.97) !important;
}

#desktop-search-dropdown,
#mobile-search-dropdown,
.create-menu-panel,
#userDropdown,
.post-options-dropdown,
.comment-menu-panel,
#sidebar-options-menu,
#chat-options-menu,
#attachment-menu,
#message-context-menu {
    transform-origin: top center;
    transition:
        opacity .2s ease,
        transform .24s var(--premium-motion-ease),
        filter .24s ease;
}

html.premium-motion-ready .create-menu-wrap.create-menu-open .create-menu-panel,
html.premium-motion-ready .create-menu-wrap:hover .create-menu-panel,
html.premium-motion-ready .create-menu-wrap:focus-within .create-menu-panel {
    filter: saturate(1.04);
}

html.premium-motion-ready #mobile-bottom-nav > div {
    box-shadow: 0 20px 48px rgba(15, 23, 42, .15), inset 0 1px rgba(255, 255, 255, .9);
}

.home-feed-tab-link,
.quick-post-card,
.quick-post-card .quick-action-btn,
.quick-post-card .quick-icon-btn,
.quick-post-card #quick-location-btn,
.quick-post-card .custom-dropdown-trigger,
.quick-post-card #quick-article-link,
[data-feed-card],
[data-feed-card] img,
.feed-action-btn,
.suggested-profile-card,
.suggested-profile-card img,
.profile-route-card,
.community-ride-card,
.community-club-route-card,
.community-detail-tabs a,
.community-detail-action,
.messenger-nav-item,
.messenger-pinned-link,
.chat-item,
.messenger-share-card,
.article-route-map-card,
.post-media-frame,
.tropa-video-player {
    transition-timing-function: var(--premium-motion-soft) !important;
}

.home-feed-tab-link {
    transition-property: background-color, color, box-shadow, transform;
    transition-duration: .22s;
}

.home-feed-tab-link:hover {
    transform: translateY(-1px);
}

.quick-post-card {
    transform-origin: top center;
}

.quick-post-card:focus-within {
    box-shadow: 0 24px 70px rgba(15, 23, 42, .1), 0 0 0 1px rgba(255, 106, 26, .1) !important;
}

.quick-post-card .quick-action-btn:hover,
.quick-post-card .quick-icon-btn:hover,
.quick-post-card #quick-location-btn:hover,
.quick-post-card .custom-dropdown-trigger:hover,
.quick-post-card #quick-article-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

#quick-post-images > *,
#quick-post-video > * {
    animation: premiumMediaPop .34s var(--premium-motion-ease) both;
}

@keyframes premiumMediaPop {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.96);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

[data-feed-card],
.suggested-profile-card,
.profile-route-card,
.community-ride-card,
.community-club-route-card,
.messenger-share-card {
    backface-visibility: hidden;
}

[data-feed-card]:hover img,
.suggested-profile-card:hover img,
.community-ride-card:hover img,
.community-club-route-card:hover img,
.messenger-share-card:hover img,
.post-media-frame:hover img {
    transform: scale(1.035);
}

[data-feed-card]:hover .feed-action-btn {
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.map-page-wrapper #search-wrapper,
.map-page-wrapper #left-collection-menu,
.map-page-wrapper #route-panel,
.map-page-wrapper #route-card,
.map-page-wrapper .map-floating-control,
.map-page-wrapper .map-controls-panel,
.map-page-wrapper .maplibregl-popup-content {
    transition:
        opacity .24s ease,
        transform .28s var(--premium-motion-ease),
        box-shadow .24s ease,
        filter .24s ease;
}

.map-page-wrapper #search-wrapper:hover,
.map-page-wrapper #left-collection-menu:hover,
.map-page-wrapper #route-card:hover,
.map-page-wrapper .map-controls-panel:hover {
    box-shadow: 0 20px 52px rgba(15, 23, 42, .16) !important;
    filter: saturate(1.02);
}

.maplibregl-marker {
    transition: filter .22s ease;
}

.maplibregl-marker:hover {
    filter: drop-shadow(0 10px 18px rgba(255, 106, 26, .22));
}

.messenger-shell {
    animation: premiumShellIn .42s var(--premium-motion-ease) both;
}

@keyframes premiumShellIn {
    from {
        opacity: .72;
        transform: translateY(10px) scale(.992);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#chat-info-panel {
    transition:
        width .34s var(--premium-motion-ease),
        transform .34s var(--premium-motion-ease),
        opacity .24s ease,
        border-color .24s ease !important;
}

#chat-info-panel.chat-info-panel-hidden {
    opacity: 0;
    transform: translateX(18px);
}

.chat-item:hover,
.messenger-nav-item:hover,
.messenger-pinned-link:hover {
    transform: translateX(2px);
}

.chat-item.is-selected {
    box-shadow: 0 14px 34px rgba(255, 106, 26, .11);
}

#attachment-menu.is-open,
#message-context-menu:not(.hidden),
#sidebar-options-menu:not(.hidden) {
    animation: premiumPopoverIn .2s var(--premium-motion-ease) both;
}

@keyframes premiumPopoverIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.97);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

[id^="msg-wrapper-"] {
    animation-duration: .28s !important;
    animation-timing-function: var(--premium-motion-ease) !important;
}

[id^="msg-wrapper-"] > div.relative {
    transition:
        transform .18s var(--premium-motion-soft),
        box-shadow .22s ease,
        filter .22s ease !important;
}

[id^="msg-wrapper-"] > div.relative:hover {
    filter: saturate(1.02);
}

.messenger-share-card {
    box-shadow: 0 12px 34px rgba(15, 23, 42, .08);
}

.messenger-share-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--premium-motion-shadow);
}

.community-hero-cover img,
.community-hero-avatar,
.community-detail-action,
.community-hero-pill {
    transition:
        transform .28s var(--premium-motion-soft),
        box-shadow .28s ease,
        filter .28s ease,
        background-color .2s ease,
        border-color .2s ease;
}

.community-hero-card:hover .community-hero-cover img {
    transform: scale(1.025);
}

.community-hero-card:hover .community-hero-avatar {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .14);
}

.community-detail-tabs a:hover {
    transform: translateY(-1px);
}

.community-ride-card:hover,
.community-club-route-card:hover,
.profile-route-card:hover,
.suggested-profile-card:hover {
    box-shadow: var(--premium-motion-shadow);
}

.post-content img,
.post-media-frame img,
.tropa-video,
.tropa-video-play,
.article-route-map-card,
.route-story-nav-link,
.comment-thread {
    transition:
        transform .28s var(--premium-motion-soft),
        box-shadow .28s ease,
        filter .28s ease,
        border-color .22s ease,
        background-color .22s ease;
}

.post-content img:hover,
.post-media-frame:hover,
.tropa-video-player:hover {
    filter: saturate(1.04) contrast(1.01);
}

.tropa-video-player:hover .tropa-video-play {
    transform: scale(1.05);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .2);
}

.article-route-map-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 58px rgba(15, 23, 42, .1);
}

.route-story-nav-link:hover,
.comment-thread:hover {
    transform: translateY(-1px);
}

.profile-route-experience__tab:hover,
.profile-route-experience__all:hover {
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

@media (max-width: 767px) {
    .site-ambient {
        display: none;
    }

    .motion-reveal {
        transform: translate3d(0, 12px, 0) scale(.992);
        transition-duration: .42s;
    }

    .quick-post-card:focus-within {
        transform: translateY(-1px);
    }

    .messenger-share-card:hover,
    [data-feed-card]:hover,
    .community-ride-card:hover,
    .community-club-route-card:hover,
    .profile-route-card:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.premium-motion-ready {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }

    .motion-reveal,
    .motion-reveal.motion-reveal-left,
    .motion-reveal.motion-reveal-right,
    .motion-reveal.motion-visible {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .site-tabs-liquid-indicator {
        display: none;
    }

    .site-ambient__layer {
        transform: none !important;
        transition: none !important;
        will-change: auto;
    }
}

html[data-theme="dark"] .site-ambient__wash {
    opacity: .62;
}

html[data-theme="dark"] .site-ambient__contours {
    opacity: .46;
}

html[data-theme="dark"] .site-ambient__trail {
    opacity: .38;
}


/* ---- css/site-polish.css ---- */
/*
   Site-wide visual polish.
   Keeps existing UI and behavior, but softens typography, spacing, cards,
   modals, and map controls across pages.
*/

:root {
    --site-content-width: 1240px;
    --site-content-gutter: 32px;
    --tt-home-container: var(--site-content-width);
    --site-polish-border: rgba(226, 232, 240, .82);
    --site-polish-border-soft: rgba(226, 232, 240, .64);
    --site-polish-shadow: 0 8px 24px rgba(15, 23, 42, .045);
    --site-polish-shadow-soft: 0 5px 16px rgba(15, 23, 42, .035);
    --site-polish-text: #111827;
    --site-polish-muted: #64748b;
}

body.page-routes-index .route-catalog-local-first {
    color: #526173;
}

html[data-theme="dark"] body.page-routes-index .route-catalog-local-first {
    color: #bccbd0;
}

body.page-routes-index .route-city-dialog[hidden] { display: none; }

body.page-routes-index .route-city-dialog {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 20px;
}

body.page-routes-index .route-city-dialog__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 25, 32, .68);
    backdrop-filter: blur(10px);
}

body.page-routes-index .route-city-dialog__panel {
    position: relative;
    width: min(100%, 440px);
    max-height: min(90dvh, 700px);
    overflow-y: auto;
    padding: 36px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 28px 90px rgba(5, 20, 28, .3);
    color: #17232d;
}

body.page-routes-index .route-city-dialog__eyebrow {
    color: #ec612f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body.page-routes-index .route-city-dialog__panel h2 {
    margin: 12px 0 10px;
    font-size: clamp(26px, 5vw, 32px);
    font-weight: 900;
    line-height: 1.1;
}

body.page-routes-index .route-city-dialog__panel p {
    color: #5d6b77;
    font-size: 14px;
    line-height: 1.55;
}

body.page-routes-index .route-city-dialog__close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: #65717d;
    font-size: 26px;
    line-height: 1;
}

body.page-routes-index .route-city-dialog__panel form { margin-top: 24px; }

body.page-routes-index .route-city-dialog__panel label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 800;
}

body.page-routes-index .route-city-dialog__panel input {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 0 15px;
    border: 1px solid #d9e2ea;
    border-radius: 14px;
    background: #f9fbfd;
    color: #17232d;
    font-size: 16px;
}

body.page-routes-index .route-city-dialog__panel input:focus {
    border-color: #f46d39;
    outline: 3px solid rgba(244, 109, 57, .18);
}

body.page-routes-index .route-city-dialog__panel .route-city-dialog__error {
    margin-top: 10px;
    color: #b32925;
}

body.page-routes-index .route-city-dialog__error[hidden] { display: none; }

body.page-routes-index .route-city-dialog__save {
    width: 100%;
    min-height: 50px;
    margin-top: 16px;
    border-radius: 14px;
    background: #f46635;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

body.page-routes-index .route-city-dialog__save:hover { background: #dc5123; }
body.page-routes-index .route-city-dialog__save:disabled { opacity: .6; cursor: wait; }

body.page-routes-index .route-city-dialog__skip {
    display: block;
    margin: 18px auto 0;
    color: #6c7883;
    font-size: 13px;
    font-weight: 700;
}

html[data-theme="dark"] body.page-routes-index .route-city-dialog__panel {
    border-color: #344a50;
    background: #1c2c31;
    color: #f8fafb;
}

html[data-theme="dark"] body.page-routes-index .route-city-dialog__panel p,
html[data-theme="dark"] body.page-routes-index .route-city-dialog__skip { color: #b9c8cd; }

html[data-theme="dark"] body.page-routes-index .route-city-dialog__panel input {
    border-color: #3a5158;
    background: #142328;
    color: #f8fafb;
}

@media (max-width: 520px) {
    body.page-routes-index .route-city-dialog { padding: 14px; }
    body.page-routes-index .route-city-dialog__panel { padding: 30px 22px; border-radius: 23px; }
}

.trailtrack-home {
    --tt-home-container: var(--site-content-width);
}

@media (min-width: 768px) {
    body:not(.page-map) #tropa-page-root.site-main-offset > :where(
        .trailtrack-home,
        .route-catalog-page,
        .route-collections-page,
        .route-detail-page,
        .articles-archive-page,
        .journal-feed-page,
        .community-page,
        .community-detail-page,
        .community-settings-page,
        .profile-page,
        .post-detail-layout,
        .official-routes-page,
        .search-page,
        .search-results-page,
        .album-detail-page,
        .all-albums-page,
        .discovery-page,
        .moderation-board-page,
        .tropa-error-page
    ),
    body:not(.page-map) #tropa-page-root.site-main-offset > :where(main, section, div):where(
        [class*="max-w-[1280px]"],
        [class*="max-w-7xl"],
        [class*="max-w-4xl"],
        [style*="max-width: 1280px"]
    ) {
        box-sizing: border-box !important;
        width: min(calc(100% - var(--site-content-gutter)), var(--site-content-width)) !important;
        max-width: var(--site-content-width) !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

.articles-archive-page {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--site-content-width);
    margin-right: auto;
    margin-left: auto;
}

/* Article details should visually match the current homepage content width. */
@media (min-width: 768px) {
    body:not(.page-map) :where(#main-content, #tropa-page-root).site-main-offset > .post-detail-layout:not(.has-route) {
        box-sizing: border-box !important;
        width: min(100% - 32px, var(--tt-home-container, var(--site-content-width))) !important;
        max-width: var(--tt-home-container, var(--site-content-width)) !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .post-detail-layout:not(.has-route) .post-detail-main {
        max-width: none !important;
    }

    .post-detail-layout:not(.has-route) .article-hero-card {
        padding: clamp(1.75rem, 3vw, 2.5rem);
    }

    .post-detail-layout:not(.has-route) .article-hero-title {
        max-width: 100%;
    }

    .post-detail-layout:not(.has-route) .article-hero-subtitle {
        max-width: min(100%, 900px);
    }

    .post-detail-layout:not(.has-route) .article-content-wrap {
        padding-right: clamp(1.75rem, 3.5vw, 3rem) !important;
        padding-left: clamp(1.75rem, 3.5vw, 3rem) !important;
    }

    .post-detail-layout:not(.has-route) #post-detail-article .post-content,
    .post-detail-layout:not(.has-route) #route-story-nav {
        max-width: none;
        margin-right: auto;
        margin-left: auto;
    }
}

/* Reference-style article cover hero. */
.article-hero-card--cover {
    isolation: isolate;
    display: flex;
    height: clamp(510px, 46vw, 570px);
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border-radius: 28px !important;
    clip-path: inset(0 round 28px);
    border-bottom: 0 !important;
    background: #020617 !important;
    padding: clamp(26px, 3.2vw, 38px) clamp(34px, 4.4vw, 58px) clamp(30px, 3.6vw, 46px) !important;
    --article-cover-title-size: 44px;
}

.article-hero-card--cover::before,
.article-hero-card--cover::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.article-hero-card--cover::before {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(2, 6, 23, .86) 0%, rgba(2, 6, 23, .72) 32%, rgba(2, 6, 23, .28) 58%, rgba(2, 6, 23, .04) 100%),
        linear-gradient(180deg, rgba(2, 6, 23, .56) 0%, rgba(2, 6, 23, .12) 42%, rgba(2, 6, 23, .5) 100%);
}

.article-hero-card--cover::after {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .06) 45%, rgba(0, 0, 0, .52) 100%),
        radial-gradient(circle at 24% 30%, rgba(0, 0, 0, .24) 0%, rgba(0, 0, 0, .06) 34%, rgba(0, 0, 0, 0) 58%);
}

.article-hero-card--cover > *:not(.article-hero-media) {
    position: relative;
    z-index: 2;
}

.article-hero-card--cover .article-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    border: 0;
    border-radius: inherit !important;
    background: #020617;
    aspect-ratio: auto;
}

.article-hero-card--cover .article-hero-media img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: center right;
    background: transparent;
    image-rendering: auto;
}

.article-hero-card--cover .article-hero-media-expand {
    display: none;
}

.article-hero-card--cover .article-hero-topline {
    width: 100%;
    align-items: flex-start;
}

.article-hero-card--cover .article-hero-chips {
    max-width: calc(100% - 64px);
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.article-hero-card--cover .article-hero-chips::-webkit-scrollbar {
    display: none;
}

.article-hero-card--cover .article-hero-chip {
    flex: 0 0 auto;
    min-height: 34px;
    border-color: rgba(255, 255, 255, .28);
    background: rgba(2, 6, 23, .42);
    color: rgba(255, 255, 255, .9);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.article-hero-card--cover .article-hero-chip-primary {
    border-color: rgba(255, 255, 255, .4);
    background: rgba(255, 90, 44, .9);
    color: #fff;
}

.article-hero-card--cover .article-hero-icon-button {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    border-color: rgba(255, 255, 255, .34);
    background: rgba(2, 6, 23, .44);
    color: #fff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.page-post-detail .article-hero-card--cover .article-hero-title {
    max-width: min(585px, 54%);
    margin-top: 18px;
    color: #fff;
    font-size: var(--article-cover-title-size);
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: 0;
    text-shadow: 0 14px 34px rgba(0, 0, 0, .42);
}

.article-hero-card--cover .article-hero-subtitle {
    max-width: min(520px, 50%);
    margin-top: 16px;
    color: rgba(255, 255, 255, .82);
    font-size: clamp(12px, 1vw, 13.5px);
    line-height: 1.48;
    font-weight: 560;
    max-height: none;
    overflow: visible;
    text-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}

.article-hero-card--cover .article-hero-subtitle--full {
    display: block;
    white-space: normal;
    text-overflow: clip;
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

.article-hero-card--cover .article-hero-author-row {
    width: fit-content;
    max-width: min(660px, 58%);
    justify-content: flex-start;
    margin-top: 34px;
    margin-bottom: 14px;
    padding: 3px 0;
}

.article-hero-card--cover .article-hero-author {
    gap: 11px;
}

.article-hero-card--cover .article-hero-avatar {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

.article-hero-card--cover .article-hero-avatar-level {
    display: none;
}

.article-hero-card--cover .article-hero-author-copy strong {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 880;
}

.article-hero-card--cover .article-hero-author-copy small {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .68);
    font-size: 10.5px;
    font-weight: 680;
}

.article-hero-verified {
    width: 14px;
    height: 14px;
    display: inline-flex;
    border-radius: 999px;
    background: #ff5a2c;
    -webkit-mask: url('/static/img/icons/verification.svg') center / contain no-repeat;
    mask: url('/static/img/icons/verification.svg') center / contain no-repeat;
}

.article-hero-card--cover.article-hero-card--with-summary > .article-hero-stats:not(.article-hero-route-summary),
.article-hero-card--cover.article-hero-card--with-summary > .article-hero-actions {
    display: none !important;
}

.article-hero-card--cover .article-hero-follow {
    width: auto;
    min-width: 126px;
    height: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(249, 115, 22, .55);
    border-radius: 999px;
    background: #ff5a2c;
    color: #fff;
    padding: 0 15px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(255, 90, 44, .22);
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.article-hero-card--cover .article-hero-follow:hover {
    background: #ea580c;
    color: #fff;
    transform: translateY(-1px);
}

.article-hero-card--cover .article-hero-follow.is-following {
    border-color: rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .16);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

.article-hero-card--cover .article-hero-route-summary {
    width: min(720px, 100%);
    display: grid;
    grid-template-columns: minmax(84px, .82fr) minmax(118px, 1.12fr) minmax(142px, 1.42fr) minmax(128px, 1.25fr);
    gap: 0;
    margin-top: auto;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 16px;
    background: rgba(2, 6, 23, .58);
    padding: 11px 14px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
    backdrop-filter: blur(16px) saturate(118%);
    -webkit-backdrop-filter: blur(16px) saturate(118%);
}

.article-hero-card--cover .article-hero-route-summary .article-hero-stat {
    justify-content: flex-start;
    min-width: 0;
    gap: 8px;
    border-right: 1px solid rgba(255, 255, 255, .2);
    border-radius: 0;
    background: transparent;
    padding: 0 12px;
}

.article-hero-card--cover .article-hero-route-summary .article-hero-stat:first-child {
    padding-left: 0;
}

.article-hero-card--cover .article-hero-route-summary .article-hero-stat:last-child {
    border-right: 0;
    padding-right: 0;
}

.article-hero-card--cover .article-hero-route-summary .article-hero-stat img {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    filter: brightness(0) invert(1);
}

.article-hero-card--cover .article-hero-route-summary .article-hero-stat strong {
    color: #fff;
    font-size: 12.5px;
    line-height: 1.08;
    font-weight: 920;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.article-hero-card--cover .article-hero-route-summary .article-hero-stat small {
    margin-top: 3px;
    color: rgba(255, 255, 255, .64);
    font-size: 9px;
    line-height: 1.15;
    font-weight: 650;
    text-transform: lowercase;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.article-hero-card--cover .article-hero-footer {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 14px;
    margin-top: auto;
}

.article-hero-card--cover .article-hero-footer > .article-hero-route-summary {
    flex: 0 1 720px;
    width: auto;
    margin-top: 0;
}

.article-hero-card--cover .article-hero-footer > .article-hero-social-actions {
    flex: 0 0 auto;
    margin-left: auto;
}

@media (max-width: 767px) {
    .article-hero-card--cover {
        height: clamp(520px, 132vw, 590px);
        min-height: 0;
        border-radius: 24px !important;
        clip-path: inset(0 round 24px);
        padding: 18px !important;
        --article-cover-title-size: 38px;
    }

    .article-hero-card--cover::before {
        background:
            linear-gradient(180deg, rgba(2, 6, 23, .88) 0%, rgba(2, 6, 23, .64) 42%, rgba(2, 6, 23, .26) 72%, rgba(2, 6, 23, .72) 100%),
            linear-gradient(90deg, rgba(2, 6, 23, .72) 0%, rgba(2, 6, 23, .42) 58%, rgba(2, 6, 23, .12) 100%);
    }

    .article-hero-card--cover .article-hero-chips,
    .article-hero-card--cover .article-hero-title,
    .article-hero-card--cover .article-hero-subtitle,
    .article-hero-card--cover .article-hero-author-row {
        max-width: 100%;
    }

    .article-hero-card--cover .article-hero-title {
        margin-top: 22px;
        font-size: var(--article-cover-title-size);
        line-height: 1.02;
    }

    .article-hero-card--cover .article-hero-subtitle {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.55;
    }

    .article-hero-card--cover .article-hero-author-row {
        align-items: center;
        flex-direction: row;
        margin-top: 28px;
        margin-bottom: 12px;
    }

    .article-hero-card--cover .article-hero-route-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 0;
        margin-top: auto;
        padding: 14px;
        border-radius: 18px;
    }

    .article-hero-card--cover .article-hero-footer {
        flex-wrap: wrap;
        gap: 10px;
    }

    .article-hero-card--cover .article-hero-footer > .article-hero-route-summary {
        flex: 1 1 100%;
        width: 100%;
        margin-top: 0;
    }

    .article-hero-card--cover .article-hero-footer > .article-hero-social-actions {
        width: 100%;
        margin-left: 0;
    }

    .article-hero-card--cover .article-hero-route-summary .article-hero-stat {
        border-right: 0;
        padding: 0 10px;
    }

    .article-hero-card--cover .article-hero-route-summary .article-hero-stat:nth-child(odd) {
        padding-left: 0;
    }

    .article-hero-card--cover .article-hero-route-summary .article-hero-stat img {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 767px) {
    body.page-routes-index:not(.page-map):not(.page-messages) #tropa-page-root.site-main-offset {
        padding-top: calc(72px + env(safe-area-inset-top, 0px)) !important;
        background: #f8fafc !important;
    }

    body.page-routes-index .route-catalog-page {
        padding: 8px 14px calc(var(--mobile-page-bottom-clearance, 100px) + 18px) !important;
    }

    body.page-routes-index .route-catalog-hero {
        min-height: 0 !important;
        align-items: flex-start !important;
        border-radius: 26px !important;
        padding: 22px 20px 20px !important;
    }

    body.page-routes-index .route-catalog-hero__content {
        width: 100% !important;
    }

    body.page-routes-index .route-catalog-eyebrow {
        font-size: 11px !important;
        line-height: 1 !important;
        letter-spacing: .08em !important;
    }

    body.page-routes-index .route-catalog-title {
        margin-top: 10px !important;
        font-size: clamp(26px, 8.3vw, 36px) !important;
        line-height: 1.05 !important;
        letter-spacing: 0 !important;
    }

    body.page-routes-index .route-catalog-description {
        margin-top: 14px !important;
        display: -webkit-box !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
    }

    body.page-routes-index .route-catalog-hero-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin-top: 16px !important;
        flex-wrap: initial !important;
        gap: 8px !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
        scroll-snap-type: none !important;
        touch-action: auto !important;
    }

    body.page-routes-index .route-catalog-hero-button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        border-radius: 16px !important;
        padding: 0 15px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    body.page-routes-index .route-catalog-hero [data-official-routes-safety] {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-height: 38px !important;
        justify-content: center !important;
        border-radius: 16px !important;
        padding: 0 12px !important;
        font-size: 11px !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    body.page-routes-index .route-catalog-hero [data-official-routes-safety] svg {
        width: 14px !important;
        height: 14px !important;
    }

    body.page-routes-index .route-catalog-source-tabs {
        margin-top: 14px !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        font-size: 10px !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain !important;
        padding-bottom: 2px !important;
        scroll-snap-type: x proximity !important;
        scrollbar-width: none !important;
        touch-action: pan-x pan-y !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.page-routes-index .route-catalog-source-tabs::-webkit-scrollbar {
        display: none !important;
    }

    body.page-routes-index .route-catalog-source-tabs a {
        flex: 0 0 auto !important;
        padding: 8px 12px !important;
    }

    body.page-routes-index .route-catalog-tag-nav {
        margin-top: 12px !important;
        gap: 7px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain !important;
        padding-bottom: 4px !important;
        scroll-snap-type: x proximity !important;
        scrollbar-width: none !important;
        touch-action: pan-x pan-y !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.page-routes-index .route-catalog-tag-nav::-webkit-scrollbar {
        display: none !important;
    }

    body.page-routes-index .route-catalog-tag-chip {
        min-height: 34px !important;
        padding: 0 12px !important;
        font-size: 11px !important;
        line-height: 1 !important;
    }

    body.page-routes-index .route-catalog-filter {
        margin-top: 12px !important;
        border-radius: 24px !important;
        padding: 12px !important;
        box-shadow: 0 10px 26px rgba(15, 23, 42, .06) !important;
    }

    body.page-routes-index .route-catalog-filter > :first-child {
        border-style: solid !important;
        border-color: rgba(226, 232, 240, .9) !important;
        border-radius: 20px !important;
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
        color: #64748b !important;
        font-size: 13px !important;
        font-weight: 650 !important;
        letter-spacing: 0 !important;
        box-shadow: inset 0 1px rgba(255, 255, 255, .82) !important;
    }

    body.page-routes-index .route-catalog-filter-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.page-routes-index .route-catalog-search {
        grid-column: 1 / -1 !important;
    }

    body.page-routes-index .route-catalog-field {
        width: 100% !important;
        min-height: 44px !important;
        height: 44px !important;
        border-radius: 15px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        font-weight: 520 !important;
        line-height: 1.2 !important;
        color: #111827 !important;
        background-color: #f8fafc !important;
    }

    body.page-routes-index .route-catalog-field::placeholder {
        color: #94a3b8 !important;
        font-weight: 430 !important;
    }

    body.page-routes-index select.route-catalog-field {
        padding-right: 28px !important;
        text-overflow: ellipsis !important;
    }

    body.page-routes-index .route-catalog-filter-button,
    body.page-routes-index .route-catalog-filter-reset {
        min-height: 42px !important;
        height: 42px !important;
        border-radius: 15px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
    }

    body.page-routes-index .route-catalog-results-summary {
        margin-top: 14px !important;
    }

    body.page-routes-index .route-catalog-results-summary p {
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    body.page-routes-index .route-catalog-results-grid {
        margin-top: 14px !important;
        gap: 12px !important;
    }
}

.catalog-light-hero {
    --catalog-hero-text: #111827;
    --catalog-hero-muted: #475569;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 4.8vw, 54px);
    align-items: end;
    min-height: clamp(280px, 25vw, 350px);
    overflow: hidden;
    border: 1px solid rgba(203, 213, 225, .82);
    border-radius: 30px;
    background:
        linear-gradient(122deg, rgba(255, 255, 255, .98) 0%, rgba(250, 252, 248, .96) 42%, rgba(236, 247, 239, .9) 100%),
        linear-gradient(145deg, rgba(249, 115, 22, .11), rgba(20, 184, 166, .08) 48%, rgba(22, 163, 74, .12));
    padding: clamp(30px, 5vw, 58px);
    color: var(--catalog-hero-text);
    box-shadow: 0 24px 64px rgba(15, 23, 42, .075);
}

.catalog-light-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(112deg, rgba(22, 163, 74, .12) 0 1px, transparent 1px),
        linear-gradient(24deg, rgba(14, 165, 233, .1) 0 1px, transparent 1px),
        repeating-linear-gradient(0deg, transparent 0 34px, rgba(100, 116, 139, .06) 34px 35px);
    background-position: right top, right 10px, center;
    background-size: 118px 118px, 92px 92px, 100% 70px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 36%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 36%, #000 100%);
    opacity: .78;
    pointer-events: none;
}

.catalog-light-hero::after {
    content: "";
    position: absolute;
    inset: auto -12% -36% auto;
    z-index: -1;
    width: min(62%, 680px);
    height: 72%;
    border-radius: 999px 0 0 0;
    background: radial-gradient(ellipse at center, rgba(34, 197, 94, .13) 0%, rgba(249, 115, 22, .08) 42%, transparent 70%);
    opacity: .9;
    pointer-events: none;
}

.catalog-light-hero__copy,
.catalog-light-hero__media,
.catalog-light-hero__stats {
    position: relative;
    z-index: 1;
}

.catalog-light-hero__copy {
    max-width: 790px;
}

.catalog-light-hero__eyebrow,
.catalog-light-hero .route-collections-eyebrow {
    margin: 0;
    color: #ea580c !important;
    font-size: 11px !important;
    font-weight: 680 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.catalog-light-hero__title,
.catalog-light-hero .catalog-light-hero__title {
    max-width: 900px;
    margin-top: 14px !important;
    color: var(--catalog-hero-text) !important;
    font-size: clamp(40px, 5.1vw, 66px) !important;
    font-weight: 680 !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
}

.catalog-light-hero__description,
.catalog-light-hero .catalog-light-hero__description,
.catalog-light-hero.route-collections-hero .catalog-light-hero__description {
    max-width: 760px;
    margin-top: 18px !important;
    color: var(--catalog-hero-muted) !important;
    font-size: clamp(16px, 1.55vw, 20px) !important;
    font-weight: 470 !important;
    line-height: 1.55 !important;
}

.catalog-light-hero__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 24px !important;
}

.catalog-light-hero .catalog-light-hero__button,
.catalog-light-hero .route-collections-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    border: 1px solid rgba(203, 213, 225, .92) !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, .9) !important;
    padding: 0 18px !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 620 !important;
    line-height: 1 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .055) !important;
    transform: none !important;
}

.catalog-light-hero .catalog-light-hero__button:hover,
.catalog-light-hero .route-collections-button:hover {
    border-color: rgba(249, 115, 22, .32) !important;
    background: #fff7ed !important;
    color: #ea580c !important;
    box-shadow: 0 14px 28px rgba(249, 115, 22, .12) !important;
}

.catalog-light-hero .catalog-light-hero__button--primary,
.catalog-light-hero .route-collections-button--primary {
    border-color: #f97316 !important;
    background: #f97316 !important;
    color: #fff !important;
    box-shadow: 0 14px 30px rgba(249, 115, 22, .22) !important;
}

.catalog-light-hero .catalog-light-hero__button--primary:hover,
.catalog-light-hero .route-collections-button--primary:hover {
    border-color: #ea580c !important;
    background: #ea580c !important;
    color: #fff !important;
}

.catalog-light-hero [data-official-routes-safety] {
    border-color: rgba(249, 115, 22, .22) !important;
    background: rgba(255, 247, 237, .88) !important;
    color: #c2410c !important;
    box-shadow: 0 10px 22px rgba(249, 115, 22, .09) !important;
}

.catalog-light-hero__chip {
    border-color: rgba(203, 213, 225, .92) !important;
    background: rgba(255, 255, 255, .88) !important;
    color: #334155 !important;
}

.catalog-light-hero__chip:hover {
    border-color: rgba(249, 115, 22, .3) !important;
    background: #fff7ed !important;
    color: #ea580c !important;
}

.catalog-light-hero__media {
    align-self: stretch;
    min-height: 228px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 24px;
    background: #e2e8f0;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .12);
}

.catalog-light-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, .04), rgba(15, 23, 42, .24));
    pointer-events: none;
}

.catalog-light-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
}

/* Region detail: a real route photo is the hero background, not a side thumbnail. */
.region-detail-hero--with-photo {
    --catalog-hero-text: #fff;
    --catalog-hero-muted: rgba(255, 255, 255, .88);
    grid-template-columns: minmax(0, 1fr) minmax(220px, 330px);
    min-height: clamp(390px, 35vw, 500px);
    align-items: end;
    border-color: rgba(15, 23, 42, .18);
    background: #0f172a;
    box-shadow: 0 28px 72px rgba(15, 23, 42, .18);
}

.region-detail-hero--with-photo::before {
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(3, 7, 18, .88) 0%, rgba(3, 7, 18, .72) 43%, rgba(3, 7, 18, .28) 72%, rgba(3, 7, 18, .2) 100%),
        linear-gradient(0deg, rgba(3, 7, 18, .7) 0%, transparent 56%);
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
}

.region-detail-hero--with-photo::after {
    inset: auto auto -45% -8%;
    z-index: -1;
    width: 58%;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(249, 115, 22, .24), transparent 68%);
}

.region-detail-hero__backdrop {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.region-detail-hero__backdrop img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.015);
}

.region-detail-hero--with-photo .catalog-light-hero__eyebrow {
    color: #fb923c !important;
}

.region-detail-hero--with-photo .catalog-light-hero__title {
    max-width: 820px;
    color: #fff !important;
    text-shadow: 0 3px 26px rgba(0, 0, 0, .28);
}

.region-detail-hero--with-photo .catalog-light-hero__description {
    max-width: 800px;
    color: rgba(255, 255, 255, .9) !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .32);
}

.region-detail-hero--with-photo .catalog-light-hero__chip {
    border-color: rgba(255, 255, 255, .3) !important;
    background: rgba(15, 23, 42, .5) !important;
    color: #fff !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.region-detail-hero--with-photo .catalog-light-hero__chip:hover {
    border-color: rgba(251, 146, 60, .75) !important;
    background: rgba(249, 115, 22, .92) !important;
}

.region-detail-hero__route {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 5px 12px;
    align-items: center;
    width: min(100%, 330px);
    min-height: 82px;
    justify-self: end;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 20px;
    background: rgba(15, 23, 42, .58);
    padding: 14px 14px 14px 17px;
    color: #fff;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .2);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.region-detail-hero__route:hover {
    border-color: rgba(251, 146, 60, .78);
    background: rgba(15, 23, 42, .78);
    transform: translateY(-2px);
}

.region-detail-hero__route-label {
    grid-column: 1;
    color: #fb923c;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.region-detail-hero__route strong {
    grid-column: 1;
    overflow: hidden;
    font-size: 14px;
    font-weight: 720;
    line-height: 1.28;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.region-detail-hero__route svg {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 22px;
    height: 22px;
    justify-self: center;
    transition: transform .2s ease;
}

.region-detail-hero__route:hover svg {
    transform: translateX(3px);
}

.catalog-light-hero__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.catalog-light-hero .catalog-light-hero__stat,
.catalog-light-hero .catalog-light-hero__stats > span {
    display: grid;
    gap: 7px;
    min-height: 88px;
    border: 1px solid rgba(203, 213, 225, .88) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .74) !important;
    padding: 18px !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 560 !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06) !important;
    backdrop-filter: none !important;
}

.catalog-light-hero .catalog-light-hero__stat span,
.catalog-light-hero .catalog-light-hero__stats > span {
    color: #64748b !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.catalog-light-hero .catalog-light-hero__stat strong,
.catalog-light-hero .catalog-light-hero__stats strong {
    display: block;
    margin: 0 !important;
    color: #111827 !important;
    font-size: 32px !important;
    font-weight: 680 !important;
    line-height: 1 !important;
}

.catalog-light-hero--with-media {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
}

.catalog-light-hero--collections.route-collections-hero {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 310px);
    width: auto;
    color: var(--catalog-hero-text) !important;
}

.catalog-light-hero.route-collections-hero::before {
    opacity: .78;
}

.catalog-light-hero.route-collections-hero .route-collections-hero__copy,
.catalog-light-hero.route-collections-hero .route-collections-hero__stats {
    z-index: 1;
}

.catalog-light-hero.route-collections-hero .route-collections-hero__stats {
    align-self: end;
}

@media (max-width: 920px) {
    .catalog-light-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .catalog-light-hero {
        min-height: 0;
        gap: 22px;
    }

    .catalog-light-hero--with-media,
    .catalog-light-hero--collections.route-collections-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .catalog-light-hero__media {
        min-height: 190px;
    }

    .catalog-light-hero__copy {
        max-width: none;
    }

    .region-detail-hero--with-photo {
        grid-template-columns: minmax(0, 1fr);
    }

    .region-detail-hero__route {
        justify-self: start;
    }
}

@media (max-width: 767px) {
    .catalog-light-hero {
        box-sizing: border-box;
        max-width: 100%;
        border-radius: 24px !important;
        padding: 24px 20px !important;
        box-shadow: 0 16px 38px rgba(15, 23, 42, .07) !important;
    }

    .catalog-light-hero::before {
        opacity: .52;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .28) 22%, #000 100%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .28) 22%, #000 100%);
    }

    .catalog-light-hero__title,
    .catalog-light-hero .catalog-light-hero__title {
        margin-top: 10px !important;
        font-size: clamp(26px, 8.4vw, 38px) !important;
        line-height: 1.07 !important;
    }

    .catalog-light-hero__description,
    .catalog-light-hero .catalog-light-hero__description,
    .catalog-light-hero.route-collections-hero .catalog-light-hero__description {
        display: -webkit-box !important;
        margin-top: 12px !important;
        overflow: hidden !important;
        font-size: 15px !important;
        line-height: 1.48 !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 4 !important;
    }

    .catalog-light-hero__actions {
        margin-top: 18px !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain !important;
        padding-bottom: 2px !important;
        scroll-snap-type: x proximity !important;
        scrollbar-width: none !important;
        touch-action: pan-x pan-y !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .catalog-light-hero__actions::-webkit-scrollbar {
        display: none !important;
    }

    .catalog-light-hero .catalog-light-hero__button,
    .catalog-light-hero .route-collections-button,
    .catalog-light-hero [data-official-routes-safety],
    .catalog-light-hero__chip {
        flex: 0 0 auto !important;
        min-height: 40px !important;
        border-radius: 14px !important;
        padding-right: 14px !important;
        padding-left: 14px !important;
        font-size: 12px !important;
    }

    .catalog-light-hero__media {
        min-height: 154px;
        border-radius: 18px;
    }

    .region-detail-hero--with-photo {
        min-height: 470px;
        padding-top: 84px !important;
    }

    .region-detail-hero--with-photo::before {
        background:
            linear-gradient(0deg, rgba(3, 7, 18, .9) 0%, rgba(3, 7, 18, .67) 62%, rgba(3, 7, 18, .28) 100%);
        opacity: 1;
    }

    .region-detail-hero__route {
        width: 100%;
        min-height: 72px;
        border-radius: 17px;
    }

    .catalog-light-hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .regions-hero {
        padding: 22px 18px !important;
    }

    .regions-hero .catalog-light-hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .regions-hero .catalog-light-hero__description {
        -webkit-line-clamp: 4 !important;
    }

    .catalog-light-hero .catalog-light-hero__stat,
    .catalog-light-hero .catalog-light-hero__stats > span {
        min-height: 74px;
        border-radius: 17px !important;
        padding: 14px !important;
    }

    .catalog-light-hero .catalog-light-hero__stat strong,
    .catalog-light-hero .catalog-light-hero__stats strong {
        font-size: 26px !important;
    }
}

@media (max-width: 430px) {
    .catalog-light-hero__stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .regions-hero .catalog-light-hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .regions-hero .catalog-light-hero__stat {
        min-height: 66px;
        padding: 12px !important;
    }
}

body {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    text-rendering: geometricPrecision;
}

body :where(h1, h2, h3, h4, h5, h6, p, a, button, label, span, strong, b, small) {
    letter-spacing: 0 !important;
}

body :where(.font-black, .font-extrabold) {
    font-weight: 680 !important;
}

body :where(.font-bold) {
    font-weight: 580 !important;
}

body :where(.uppercase) {
    text-transform: none !important;
}

body :where(.tracking-widest, .tracking-wide, .tracking-wider, [class*="tracking-["]) {
    letter-spacing: 0 !important;
}

body :where(.text-gray-400, .text-gray-500, .text-slate-400, .text-slate-500) {
    font-weight: 450 !important;
}

body:not(.page-map) :where(
    [class*="rounded-[40px]"],
    [class*="rounded-[36px]"],
    [class*="rounded-[32px]"],
    [class*="rounded-[28px]"],
    [class*="rounded-[24px]"],
    .shadow-2xl,
    .shadow-xl
) {
    border-color: var(--site-polish-border) !important;
    box-shadow: var(--site-polish-shadow) !important;
}

body:not(.page-map) :where(section, article, aside, form, [class*="-card"], [class*="Card"]) :where(h1, h2, h3) {
    font-weight: 680 !important;
}

body:not(.page-map) :where(section, article, aside, form, [class*="-card"], [class*="Card"]) :where(p, small) {
    font-weight: 450;
}

body:not(.page-map) :where(
    button,
    .btn,
    [role="button"],
    a[class*="bg-orange"],
    a[class*="bg-gray-9"],
    a[class*="bg-black"],
    button[class*="bg-orange"],
    button[class*="bg-gray-9"],
    button[class*="bg-black"]
) {
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

body:not(.page-map) :where(input, textarea, select) {
    font-weight: 450 !important;
}

body:not(.page-map) :where(label, legend) {
    font-weight: 520 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

[data-feed-card] .feed-action-views {
    margin-left: auto !important;
    min-height: 32px;
    padding: 0 3px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #94a3b8 !important;
    opacity: .82;
}

[data-feed-card] .feed-action-views svg {
    flex: 0 0 auto;
    color: currentColor;
}

[data-feed-card] .feed-action-views b {
    margin: 0 !important;
    color: currentColor !important;
    font-weight: 520 !important;
    line-height: 1 !important;
}

@media (min-width: 768px) {
    [data-feed-card] .feed-card-actions .feed-action-btn {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    [data-feed-card] .feed-card-actions a.feed-action-btn,
    [data-feed-card] .feed-card-actions button.feed-action-btn {
        min-width: 72px !important;
    }

    [data-feed-card] .feed-action-views {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        align-self: center !important;
        gap: 6px !important;
        font-size: 12px !important;
    }
}

body:not(.page-map) :where(
    body > .fixed.inset-0[id*="modal"] > div,
    body > .fixed.inset-0[id*="Modal"] > div,
    [id*="modal-content"],
    [id*="ModalContent"],
    [class*="modal"] [class*="rounded"]
) {
    border-color: var(--site-polish-border) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .12) !important;
}

body:not(.page-map) :where(
    [id*="modal"],
    [id*="Modal"],
    [class*="modal"],
    [class*="drawer"],
    [class*="Drawer"]
) :where(h2, h3) {
    font-weight: 680 !important;
    letter-spacing: 0 !important;
}

body:not(.page-map) :where(
    [id*="modal"],
    [id*="Modal"],
    [class*="modal"],
    [class*="drawer"],
    [class*="Drawer"]
) :where(p, label, small, span) {
    letter-spacing: 0 !important;
}

.site-topbar,
.site-create-button,
.site-create-menu-item,
#userDropdown,
#notifDropdown,
#mobile-bottom-nav {
    letter-spacing: 0 !important;
}

.site-create-button,
#mobile-bottom-nav span,
.site-create-menu-item :where(strong, small),
.notif-dropdown :where(p, button) {
    text-transform: none !important;
    font-weight: 560 !important;
}

.site-topbar .site-primary-tabs a {
    font-size: 13px !important;
    font-weight: 520 !important;
    color: #475569 !important;
}

.site-topbar .site-primary-tabs a.bg-white {
    font-weight: 600 !important;
    color: #f97316 !important;
}

.site-topbar #desktop-search-input {
    display: flex !important;
    align-items: center !important;
    height: 40px !important;
    line-height: normal !important;
    font-weight: 460 !important;
    color: #334155 !important;
}

@media (max-width: 1023px) {
    .site-topbar #desktop-search-form {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        flex: 0 0 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}

@media (max-width: 767px) {
    body:not(.page-map):not(.page-messages):not(.page-mobile-no-topbar) .site-topbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-left: 12px !important;
        padding-right: 10px !important;
    }

    .site-topbar-left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
    }

    .site-topbar-actions {
        flex: 0 0 auto !important;
        gap: 6px !important;
        margin-left: auto !important;
    }

    .site-topbar-actions .site-action-button,
    .site-topbar-actions > a[aria-label],
    .site-topbar-actions > a.md\:hidden {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        border-radius: 999px !important;
    }

    .mobile-notif-wrap {
        display: none !important;
    }

    .mobile-topbar-logo {
        pointer-events: auto;
    }
}

.site-topbar #desktop-search-input::placeholder {
    font-weight: 430 !important;
    color: #94a3b8 !important;
}

.site-topbar .site-create-button {
    font-size: 13px !important;
    font-weight: 600 !important;
}

.site-topbar .site-profile-name {
    display: block;
    max-width: 140px;
    overflow: hidden;
    color: currentColor;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 768px) and (max-width: 1100px) {
    .site-topbar .site-profile-name {
        max-width: 88px;
    }
}

@media (max-width: 767px) {
    body:not(.page-map):not(.page-messages) .site-main-offset {
        background: #f8fafc;
    }

    body:not(.page-map):not(.page-messages) :where(
        section,
        article,
        aside,
        form,
        [class*="-card"],
        [class*="Card"]
    ) {
        scroll-margin-top: 18px;
    }

    body:not(.page-map) :where(.space-y-3 > :not([hidden]) ~ :not([hidden])) {
        margin-top: 14px !important;
    }

    body:not(.page-map) :where(.space-y-4 > :not([hidden]) ~ :not([hidden])) {
        margin-top: 18px !important;
    }

    body:not(.page-map) :where(.space-y-6 > :not([hidden]) ~ :not([hidden])) {
        margin-top: 26px !important;
    }

    body:not(.page-map) :where(.gap-3) {
        gap: 14px !important;
    }

    body:not(.page-map) :where(.gap-4) {
        gap: 18px !important;
    }

    body:not(.page-map) :where(
        body > .fixed.inset-0[id*="modal"] > div,
        body > .fixed.inset-0[id*="Modal"] > div,
        [id*="modal-content"],
        [id*="ModalContent"]
    ) {
        border-radius: 22px !important;
    }

    body:not(.page-map) :where(.shadow-2xl, .shadow-xl, .shadow-lg) {
        box-shadow: var(--site-polish-shadow) !important;
    }

    body:not(.page-map) :where(.p-5, .p-6, .md\:p-6, .md\:p-7) {
        --site-polish-local-pad: 16px;
    }
}

/* Map gets its own lighter treatment so full-screen positioning stays intact. */
body.page-map .map-page-wrapper :where(.font-black, .font-extrabold, .font-bold),
body.page-map .map-page-wrapper :where(
    .map-control-title,
    .map-control-subtitle,
    .map-active-chip,
    .map-control-badge,
    .collection-title-badge,
    button,
    label,
    small,
    strong
) {
    font-weight: 550 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.page-map .map-page-wrapper :where(
    #search-wrapper,
    #planner-sidebar,
    #route-info-card,
    #radar-sidebar,
    #layer-switcher-menu,
    #poi-filter-menu,
    #left-collection-menu #collection-shell,
    .map-controls-panel,
    .map-floating-control,
    .maplibregl-popup-content
) {
    border-color: rgba(226, 232, 240, .72) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08) !important;
}

body.page-map .map-page-wrapper :where(.map-control-row) {
    border-color: rgba(226, 232, 240, .82) !important;
    background: rgba(255, 255, 255, .92) !important;
}

body.page-map .map-page-wrapper :where(.map-control-title) {
    color: #111827 !important;
    font-size: 10px !important;
}

body.page-map .map-page-wrapper :where(.map-control-subtitle) {
    color: #64748b !important;
    font-size: 9px !important;
    font-weight: 430 !important;
}

body.page-map .map-page-wrapper :where(.map-active-chip) {
    min-height: 31px !important;
    border-color: rgba(249, 115, 22, .2) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .06) !important;
}

/* Global accent background */
:root {
    --site-accent-bg-base: #f7f8fb;
    --site-accent-bg: none;
    --site-accent-bg-mobile:
        linear-gradient(145deg, rgba(255, 106, 26, .11) 0%, transparent 38%),
        linear-gradient(28deg, transparent 53%, rgba(34, 197, 94, .07) 82%, transparent 100%);
}

html:not([data-theme="dark"]) {
    background-color: var(--site-accent-bg-base);
}

html:not([data-theme="dark"]) body:not(.auth-page):not(.page-map):not(.page-messages) {
    background-color: var(--site-accent-bg-base) !important;
    background-image: var(--site-accent-bg) !important;
}

html:not([data-theme="dark"]) body:not(.auth-page):not(.page-map):not(.page-messages) .site-main-offset {
    background: transparent !important;
}

html:not([data-theme="dark"]) body:not(.auth-page):not(.page-map):not(.page-messages) .site-main-offset > :where(
    .home-shell,
    .profile-page,
    .post-detail-layout,
    .community-page,
    .community-detail-page,
    .community-settings-page,
    .official-routes-page,
    .search-page,
    .album-detail-page,
    .all-albums-page,
    .discovery-page,
    .tropa-error-page
) {
    background: transparent !important;
}

html:not([data-theme="dark"]) :where(.home-feed-tab-list, .home-sort-control) {
    background: #ffffff !important;
    border-color: rgba(226, 232, 240, .95) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08), inset 0 1px rgba(255, 255, 255, .92) !important;
    backdrop-filter: none !important;
}

@media (max-width: 767px) {
    html:not([data-theme="dark"]) body:not(.auth-page):not(.page-map):not(.page-messages) {
        background-image: var(--site-accent-bg-mobile) !important;
        background-attachment: scroll;
    }

    html:not([data-theme="dark"]) body:not(.auth-page):not(.page-map):not(.page-messages) .site-main-offset {
        background: transparent !important;
    }

    body.page-route-detail,
    body.page-route-detail #tropa-page-root,
    body.page-route-detail .site-main-offset,
    body.page-route-detail .route-detail-page,
    body.page-route-detail .route-mobile-detail,
    body.page-route-detail .route-mobile-detail > .route-mobile-hero:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body.page-route-detail #tropa-page-root,
    body.page-route-detail .site-main-offset {
        top: 0 !important;
        transform: none !important;
    }

    body.page-route-detail {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body.page-route-detail .site-topbar {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    body.page-route-detail #tropa-page-root.site-main-offset {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body.page-route-detail #tropa-page-root > .route-detail-page:first-child,
    body.page-route-detail .route-detail-page > .route-mobile-detail:first-child,
    body.page-route-detail .route-mobile-detail > .route-mobile-hero:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
        top: 0 !important;
    }

    html:not([data-theme="dark"]) body.page-route-detail,
    html:not([data-theme="dark"]) body.page-route-detail #tropa-page-root.site-main-offset,
    html:not([data-theme="dark"]) body.page-route-detail #tropa-page-root.site-main-offset > .route-detail-page:first-child,
    html:not([data-theme="dark"]) body.page-route-detail .route-detail-page > .route-mobile-detail:first-child {
        margin-block-start: 0 !important;
        padding-block-start: 0 !important;
        border-block-start: 0 !important;
        background: #ffffff !important;
        background-image: none !important;
    }

    html:not([data-theme="dark"]) body.page-route-detail .route-mobile-detail > .route-mobile-hero:first-child {
        display: block !important;
        margin-block-start: 0 !important;
        transform: none !important;
    }

    body.page-route-detail .route-mobile-detail > .route-mobile-hero:first-child {
        --route-detail-hero-bleed: 20px;
        margin-top: calc(var(--route-detail-hero-bleed) * -1) !important;
        min-height: calc(226px + var(--route-detail-hero-bleed)) !important;
    }

    body.page-route-detail .route-mobile-detail > .route-mobile-hero:first-child .route-mobile-hero__image,
    body.page-route-detail .route-mobile-detail > .route-mobile-hero:first-child .route-mobile-hero__fallback {
        top: calc(var(--route-detail-hero-bleed) * -1) !important;
        height: calc(100% + var(--route-detail-hero-bleed)) !important;
    }

    @media (max-width: 360px) {
        body.page-route-detail .route-mobile-detail > .route-mobile-hero:first-child {
            min-height: calc(214px + var(--route-detail-hero-bleed)) !important;
        }
    }

    @media (min-width: 414px) {
        body.page-route-detail .route-mobile-detail > .route-mobile-hero:first-child {
            min-height: calc(238px + var(--route-detail-hero-bleed)) !important;
        }
    }
}

@media (max-width: 767px) {
    body.page-route-detail,
    body.page-route-detail .site-main-offset,
    body.page-route-detail .route-detail-page,
    html:not([data-theme="dark"]) body.page-route-detail #tropa-page-root.site-main-offset,
    html:not([data-theme="dark"]) body.page-route-detail #tropa-page-root.site-main-offset > .route-detail-page:first-child {
        background: #f7f8fb !important;
    }

    body.page-route-detail .route-detail-page {
        padding: 8px 10px calc(var(--mobile-page-bottom-clearance, 98px) + 44px) !important;
    }

    body.page-route-detail .route-detail-desktop-content {
        overflow: visible !important;
    }

    .mobile-create-menu-wrap {
        right: 12px !important;
        bottom: calc(5.9rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.page-route-detail .route-detail-hero-card {
        border-color: rgba(226, 232, 240, .9) !important;
        border-radius: 24px !important;
        padding: 7px !important;
        box-shadow: 0 14px 34px rgba(15, 23, 42, .07) !important;
    }

    body.page-route-detail .route-detail-hero-media {
        min-height: clamp(410px, 56svh, 450px) !important;
        border-radius: 20px !important;
    }

    body.page-route-detail .route-detail-hero-media::after {
        background:
            linear-gradient(180deg, rgba(3, 7, 18, .34) 0%, rgba(3, 7, 18, .18) 38%, rgba(3, 7, 18, .72) 100%),
            linear-gradient(90deg, rgba(3, 7, 18, .38) 0%, rgba(3, 7, 18, .18) 62%, rgba(3, 7, 18, .06) 100%) !important;
    }

    body.page-route-detail .route-detail-hero-chips {
        gap: 5px !important;
        padding: 10px !important;
    }

    body.page-route-detail .route-detail-hero-chip {
        min-height: 25px !important;
        max-width: 100% !important;
        padding: 0 8px !important;
        font-size: 9px !important;
        font-weight: 760 !important;
        box-shadow: 0 6px 18px rgba(15, 23, 42, .1) !important;
    }

    body.page-route-detail .route-detail-hero-chip img {
        width: 13px !important;
        height: 13px !important;
    }

    body.page-route-detail .route-detail-hero-copy {
        right: 14px !important;
        bottom: 14px !important;
        left: 14px !important;
    }

    body.page-route-detail .route-detail-hero-title {
        font-size: 26px !important;
        line-height: 1.08 !important;
        text-shadow: 0 8px 24px rgba(0, 0, 0, .28) !important;
    }

    body.page-route-detail .route-detail-hero-description {
        margin-top: 8px !important;
        font-size: 12px !important;
        font-weight: 520 !important;
        line-height: 1.42 !important;
        -webkit-line-clamp: 3 !important;
    }

    body.page-route-detail .route-detail-hero-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin-top: 12px !important;
    }

    body.page-route-detail .route-detail-hero-action {
        min-width: 0 !important;
        min-height: 39px !important;
        border-radius: 13px !important;
        padding: 0 9px !important;
        font-size: 11px !important;
        font-weight: 760 !important;
        box-shadow: 0 10px 22px rgba(15, 23, 42, .12) !important;
    }

    body.page-route-detail .route-detail-hero-action img,
    body.page-route-detail .route-detail-hero-action svg {
        width: 15px !important;
        height: 15px !important;
    }

    body.page-route-detail .route-detail-hero-stats {
        margin-top: 8px !important;
        border-radius: 18px !important;
        box-shadow: 0 14px 32px rgba(15, 23, 42, .055) !important;
    }

    body.page-route-detail .route-detail-hero-stat {
        min-height: 52px !important;
        gap: 8px !important;
        padding: 8px 10px !important;
    }

    body.page-route-detail .route-detail-hero-stat__icon {
        width: 30px !important;
        height: 30px !important;
        border-radius: 11px !important;
    }

    body.page-route-detail .route-detail-hero-stat__icon img {
        width: 15px !important;
        height: 15px !important;
    }

    body.page-route-detail .route-detail-hero-stat dt {
        font-size: 9px !important;
        font-weight: 650 !important;
    }

    body.page-route-detail .route-detail-hero-stat dd {
        font-size: 14px !important;
        font-weight: 820 !important;
    }

    body.page-route-detail .route-detail-body-section {
        padding-top: 14px !important;
    }

    body.page-route-detail .route-guide-grid {
        gap: 12px !important;
        margin-top: 12px !important;
    }

    body.page-route-detail .route-guide-card,
    body.page-route-detail .route-guide-card--half,
    body.page-route-detail .route-guide-card--summary,
    body.page-route-detail .route-guide-card--wide,
    body.page-route-detail .route-side-card {
        border-color: rgba(226, 232, 240, .82) !important;
        border-radius: 20px !important;
        padding: 16px !important;
        box-shadow: 0 10px 28px rgba(15, 23, 42, .045) !important;
    }

    body.page-route-detail .route-guide-card__title,
    body.page-route-detail .route-side-card__title {
        gap: 8px !important;
        font-size: 16px !important;
        font-weight: 760 !important;
    }

    body.page-route-detail .route-guide-card__title img {
        width: 17px !important;
        height: 17px !important;
    }

    body.page-route-detail .route-guide-card__text,
    body.page-route-detail .route-side-card__text {
        margin-top: 12px !important;
        color: #4b5563 !important;
        font-size: 14px !important;
        font-weight: 450 !important;
        line-height: 1.62 !important;
    }

    body.page-route-detail .route-guide-card__muted,
    body.page-route-detail .route-guide-check-list span,
    body.page-route-detail .route-guide-time-list__row,
    body.page-route-detail .route-guide-icon-list__item,
    body.page-route-detail .route-guide-surfaces__row {
        color: #4b5563 !important;
        font-weight: 520 !important;
    }

    body.page-route-detail .route-guide-suitability {
        gap: 9px !important;
        margin-top: 14px !important;
    }

    body.page-route-detail .route-guide-suitability__item {
        min-height: 36px !important;
        border: 1px solid rgba(226, 232, 240, .76) !important;
        border-radius: 14px !important;
        background: #f8fafc !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    body.page-route-detail .route-guide-suitability__value {
        font-size: 12px !important;
        font-weight: 820 !important;
    }

    body.page-route-detail .route-guide-audit {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        margin-top: 14px !important;
    }

    body.page-route-detail .route-guide-audit__item {
        min-height: 68px !important;
        border-radius: 15px !important;
        padding: 12px !important;
    }

    body.page-route-detail .route-guide-audit__label {
        font-size: 9px !important;
        font-weight: 720 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    body.page-route-detail .route-guide-audit__value {
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    body.page-route-detail .route-guide-access-grid {
        gap: 12px !important;
    }

    body.page-route-detail .route-guide-access-item {
        padding-top: 14px !important;
    }
}

@media (max-width: 374px) {
    body.page-route-detail .route-guide-audit {
        grid-template-columns: 1fr !important;
    }
}

/* Keep page content close to the shared footer. */
body:not(.page-map):not(.page-messages) #tropa-page-root.site-main-offset {
    padding-bottom: 0 !important;
}

body:not(.page-map):not(.page-messages) #tropa-page-root.site-main-offset > :last-child {
    margin-bottom: 0 !important;
}

body:not(.page-map):not(.page-messages) #tropa-page-root.site-main-offset > :where(main, section, div):where(
    [class*="max-w-[1280px]"],
    [class*="max-w-7xl"],
    [class*="max-w-5xl"],
    [class*="max-w-4xl"],
    [style*="max-width: 1280px"]
):last-child,
body:not(.page-map):not(.page-messages) #tropa-page-root.site-main-offset > :where(
    .trailtrack-home,
    .route-catalog-page,
    .route-collections-page,
    .route-detail-page,
    .articles-archive-page,
    .journal-feed-page,
    .community-page,
    .community-detail-page,
    .community-settings-page,
    .profile-page,
    .post-detail-layout,
    .official-routes-page,
    .search-page,
    .search-results-page,
    .album-detail-page,
    .all-albums-page,
    .discovery-page,
    .moderation-board-page,
    .tropa-error-page
):last-child {
    padding-bottom: 24px !important;
}

@media (max-width: 767px) {
    body:not(.page-map):not(.page-messages) #tropa-page-root.site-main-offset > :where(main, section, div):where(
        [class*="max-w-[1280px]"],
        [class*="max-w-7xl"],
        [class*="max-w-5xl"],
        [class*="max-w-4xl"],
        [style*="max-width: 1280px"]
    ):last-child,
    body:not(.page-map):not(.page-messages) #tropa-page-root.site-main-offset > :where(
        .trailtrack-home,
        .route-catalog-page,
        .route-collections-page,
        .route-detail-page,
        .articles-archive-page,
        .journal-feed-page,
        .community-page,
        .community-detail-page,
        .community-settings-page,
        .profile-page,
        .post-detail-layout,
        .official-routes-page,
        .search-page,
        .search-results-page,
        .album-detail-page,
        .all-albums-page,
        .discovery-page,
        .moderation-board-page,
        .tropa-error-page
    ):last-child {
        padding-bottom: 12px !important;
    }
}

/* Premium completion pass: denser catalog hierarchy and dependable mobile controls. */
@media (min-width: 768px) {
    body.page-routes-index .catalog-light-hero,
    body.page-regions-index .catalog-light-hero {
        min-height: 230px;
        gap: 30px;
        border-radius: 24px;
        padding: 34px 38px;
    }

    body.page-routes-index .catalog-light-hero__title,
    body.page-regions-index .catalog-light-hero__title {
        margin-top: 10px !important;
        font-size: clamp(38px, 4vw, 52px) !important;
        line-height: 1.04 !important;
    }

    body.page-routes-index .catalog-light-hero__description,
    body.page-regions-index .catalog-light-hero__description {
        margin-top: 12px !important;
        font-size: 17px !important;
        line-height: 1.5 !important;
    }

    body.page-routes-index .catalog-light-hero__actions {
        margin-top: 18px !important;
    }

    body.page-regions-index .catalog-light-hero .catalog-light-hero__stat {
        min-height: 74px;
        border-radius: 16px !important;
        padding: 14px 16px !important;
    }

    body.page-regions-index .catalog-light-hero .catalog-light-hero__stat strong {
        font-size: 27px !important;
    }
}

.route-catalog-filter-skeleton {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(150px, 1fr));
    gap: 12px;
}

.route-catalog-filter-skeleton span {
    display: block;
    min-height: 46px;
    border-radius: 16px;
    background: linear-gradient(100deg, #f1f5f9 22%, #f8fafc 38%, #f1f5f9 54%);
    background-size: 200% 100%;
    animation: route-filter-loading 1.2s ease-in-out infinite;
}

.route-catalog-filter-skeleton span:last-child {
    grid-column: 1 / -1;
    min-height: 56px;
}

@keyframes route-filter-loading {
    to { background-position-x: -200%; }
}

.route-catalog-filter-error {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #fed7aa;
    border-radius: 16px;
    background: #fff7ed;
    padding: 10px 12px 10px 16px;
    color: #9a3412;
    font-size: 13px;
    font-weight: 600;
}

.route-catalog-filter-error button {
    min-height: 40px;
    border: 1px solid #fdba74;
    border-radius: 12px;
    background: #fff;
    padding: 0 14px;
    color: #c2410c;
    font-weight: 650;
}

.route-share-button {
    width: 44px !important;
    height: 44px !important;
}

.route-side-card__action,
.route-detail-hero-action {
    min-height: 44px !important;
}

a.route-detail-hero-chip {
    min-height: 40px;
}

@media (max-width: 767px) {
    #mobile-bottom-nav {
        transition: transform .24s ease, opacity .2s ease !important;
        will-change: transform, opacity;
    }

    #mobile-bottom-nav a {
        height: 100% !important;
        min-height: 58px !important;
    }

    body.page-route-detail .route-detail-page {
        padding-bottom: calc(var(--mobile-page-bottom-clearance, 98px) + 28px) !important;
    }

    .route-detail-hero-action {
        min-height: 46px !important;
    }

    a.route-detail-hero-chip {
        min-height: 44px;
    }

    .route-catalog-filter-skeleton {
        grid-template-columns: 1fr;
    }

    .route-catalog-filter-skeleton span:last-child {
        grid-column: auto;
    }

    .route-catalog-filter-error {
        align-items: stretch;
        flex-direction: column;
    }
}


/* ---- css/dark-theme.css ---- */
:root {
    --tropa-dark-bg: #07101d;
    --tropa-dark-bg-soft: #0a1424;
    --tropa-dark-surface: rgba(15, 23, 42, .88);
    --tropa-dark-surface-solid: #101928;
    --tropa-dark-surface-raised: #121e31;
    --tropa-dark-surface-muted: #172337;
    --tropa-dark-line: rgba(148, 163, 184, .16);
    --tropa-dark-line-strong: rgba(148, 163, 184, .26);
    --tropa-dark-text: #edf3fb;
    --tropa-dark-text-soft: #c8d3e1;
    --tropa-dark-muted: #8fa1b8;
    --tropa-dark-faint: #64748b;
    --tropa-dark-orange: #ff7a1a;
    --tropa-dark-orange-soft: rgba(255, 122, 26, .14);
    --tropa-dark-shadow: 0 24px 70px rgba(0, 0, 0, .38);
    --tropa-dark-inner: inset 0 1px rgba(255, 255, 255, .06);
}

html[data-theme="dark"] {
    color-scheme: dark;
    background: var(--tropa-dark-bg);
}

html[data-theme="dark"] body {
    color: var(--tropa-dark-text);
    background: var(--tropa-dark-bg) !important;
}

html[data-theme="dark"] ::selection {
    color: #fff;
    background: rgba(255, 122, 26, .42);
}

html[data-theme="dark"] :where(.bg-white, [class~="bg-white/90"], [class~="bg-white/95"], [class~="bg-white/80"], [class~="bg-white/70"], .bg-gray-50, .bg-slate-50) {
    background-color: var(--tropa-dark-surface) !important;
}

html[data-theme="dark"] :where(.bg-gray-100, .bg-slate-100, .bg-gray-200, .bg-slate-200) {
    background-color: var(--tropa-dark-surface-muted) !important;
}

html[data-theme="dark"] :where(.bg-orange-50, [class~="bg-orange-50/80"]) {
    background-color: var(--tropa-dark-orange-soft) !important;
}

html[data-theme="dark"] :where(
    .site-topbar,
    #desktop-search-dropdown,
    #mobile-search-dropdown,
    #userDropdown,
    #notifDropdown,
    .create-menu-panel,
    .home-shell,
    .profile-page,
    .post-detail-layout,
    .community-detail-page,
    .community-settings-page,
    .messenger-page,
    .map-page-wrapper
) :where([class*="bg-white/"], [class*="bg-gray-50/"], [class*="bg-slate-50/"]) {
    background-color: rgba(15, 23, 42, .78) !important;
}

html[data-theme="dark"] :where(
    .site-topbar,
    #desktop-search-dropdown,
    #mobile-search-dropdown,
    #userDropdown,
    #notifDropdown,
    .create-menu-panel,
    .home-shell,
    .profile-page,
    .post-detail-layout,
    .community-detail-page,
    .community-settings-page,
    .messenger-page,
    .map-page-wrapper
) :where([class*="bg-orange-50/"]) {
    background-color: rgba(255, 122, 26, .13) !important;
}

html[data-theme="dark"] :where(
    .site-topbar,
    #desktop-search-dropdown,
    #mobile-search-dropdown,
    #userDropdown,
    #notifDropdown,
    .create-menu-panel,
    .home-shell,
    .profile-page,
    .post-detail-layout,
    .community-detail-page,
    .community-settings-page,
    .messenger-page,
    .map-page-wrapper
) :where([class*="border-white/"], [class*="border-gray-100/"], [class*="border-gray-200/"]) {
    border-color: var(--tropa-dark-line) !important;
}

html[data-theme="dark"] :where(.text-gray-950, .text-gray-900, .text-slate-950, .text-slate-900) {
    color: var(--tropa-dark-text) !important;
}

html[data-theme="dark"] :where(.text-gray-800, .text-gray-700, .text-slate-800, .text-slate-700) {
    color: var(--tropa-dark-text-soft) !important;
}

html[data-theme="dark"] :where(.text-gray-600, .text-gray-500, .text-slate-600, .text-slate-500) {
    color: var(--tropa-dark-muted) !important;
}

html[data-theme="dark"] :where(.text-gray-400, .text-slate-400) {
    color: var(--tropa-dark-faint) !important;
}

html[data-theme="dark"] :where(.border-gray-50, .border-gray-100, .border-gray-200, .border-slate-100, .border-slate-200, .border-white, [class~="border-white/80"], [class~="border-white/70"]) {
    border-color: var(--tropa-dark-line) !important;
}

html[data-theme="dark"] :where(input, textarea, select) {
    color: var(--tropa-dark-text) !important;
    background-color: rgba(15, 23, 42, .78) !important;
    border-color: var(--tropa-dark-line) !important;
}

html[data-theme="dark"] :where(input, textarea, select)::placeholder {
    color: #6f8198 !important;
}

html[data-theme="dark"] :where(input, textarea, select):focus {
    border-color: rgba(255, 122, 26, .46) !important;
    box-shadow: 0 0 0 3px rgba(255, 122, 26, .15) !important;
    background-color: rgba(17, 26, 42, .96) !important;
}

html[data-theme="dark"] :where(.shadow-sm, .shadow-lg, .shadow-xl, .shadow-2xl) {
    box-shadow: var(--tropa-dark-shadow) !important;
}

html[data-theme="dark"] :where(.backdrop-blur, .backdrop-blur-md, .backdrop-blur-xl) {
    backdrop-filter: blur(24px) saturate(1.14);
    -webkit-backdrop-filter: blur(24px) saturate(1.14);
}

html[data-theme="dark"] a:hover {
    color: var(--tropa-dark-orange);
}

html[data-theme="dark"] .site-topbar {
    border-color: rgba(148, 163, 184, .18) !important;
    background:
        linear-gradient(180deg, rgba(18, 29, 46, .88), rgba(10, 18, 32, .82)) !important;
    box-shadow: 0 18px 54px rgba(0, 0, 0, .36), var(--tropa-dark-inner) !important;
}

html[data-theme="dark"].premium-motion-ready body.site-topbar-scrolled .site-topbar {
    border-color: rgba(148, 163, 184, .18) !important;
    background:
        linear-gradient(180deg, rgba(18, 29, 46, .92), rgba(10, 18, 32, .88)) !important;
    box-shadow: 0 18px 54px rgba(0, 0, 0, .38), var(--tropa-dark-inner) !important;
}

.site-logo-link {
    position: relative;
    z-index: 5;
    flex: 0 0 auto;
}

.site-logo-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: 140px;
    max-width: 140px;
}

.site-logo-img {
    display: block;
    width: 100% !important;
    height: auto !important;
    transition: opacity .18s ease, transform .3s ease;
}

.site-logo-img--dark {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
}

html[data-theme="dark"] .site-logo-mark--dark-ready .site-logo-img--light {
    opacity: 0;
}

html[data-theme="dark"] .site-logo-mark--dark-ready .site-logo-img--dark {
    opacity: 1;
    visibility: visible;
}

@media (min-width: 768px) and (max-width: 1240px) {
    .site-logo-mark {
        width: 124px;
        max-width: 124px;
    }
}

@media (max-width: 767px) {
    .site-logo-mark {
        width: 152px;
        max-width: 152px;
    }
}

html[data-theme="dark"] .site-primary-tabs {
    border-color: rgba(148, 163, 184, .16) !important;
    background: rgba(8, 15, 28, .72) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}

html[data-theme="dark"] .site-primary-tabs a {
    color: #a9b8ca !important;
}

html[data-theme="dark"] .site-primary-tabs a:hover {
    color: #f8fafc !important;
    background: rgba(255, 255, 255, .06) !important;
}

html[data-theme="dark"] .site-primary-tabs a.bg-white {
    color: #ff9a4a !important;
    background: rgba(255, 255, 255, .06) !important;
}

html[data-theme="dark"] .site-tabs-liquid-indicator {
    background:
        linear-gradient(180deg, rgba(30, 42, 64, .96), rgba(16, 25, 40, .96)),
        radial-gradient(circle at 50% 100%, rgba(255, 122, 26, .2), transparent 58%);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 122, 26, .12);
}

html[data-theme="dark"] .site-action-button,
html[data-theme="dark"] .site-profile-button {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(15, 23, 42, .78) !important;
    color: #d7e2ef !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24), var(--tropa-dark-inner) !important;
}

html[data-theme="dark"] .site-action-button:hover,
html[data-theme="dark"] .site-action-button.is-active,
html[data-theme="dark"] .site-profile-button:hover {
    border-color: rgba(255, 122, 26, .34) !important;
    background: rgba(255, 122, 26, .12) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] #desktop-search-input,
html[data-theme="dark"] #mobile-search-input {
    background: rgba(7, 16, 29, .78) !important;
    border-color: rgba(148, 163, 184, .18) !important;
    color: var(--tropa-dark-text) !important;
    box-shadow: var(--tropa-dark-inner) !important;
}

html[data-theme="dark"] #desktop-search-dropdown,
html[data-theme="dark"] #mobile-search-dropdown,
html[data-theme="dark"] #userDropdown,
html[data-theme="dark"] #notifDropdown,
html[data-theme="dark"] .create-menu-panel,
html[data-theme="dark"] .post-options-dropdown,
html[data-theme="dark"] .comment-menu-panel,
html[data-theme="dark"] #sidebar-options-menu,
html[data-theme="dark"] #attachment-menu,
html[data-theme="dark"] #message-context-menu {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(13, 23, 39, .94) !important;
    color: var(--tropa-dark-text);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .46), var(--tropa-dark-inner) !important;
}

html[data-theme="dark"] .site-search-result:hover,
html[data-theme="dark"] .site-create-menu-item:hover,
html[data-theme="dark"] #userDropdown a:hover,
html[data-theme="dark"] #userDropdown button:hover {
    background: rgba(255, 122, 26, .12) !important;
}

html[data-theme="dark"] .site-create-menu-item {
    color: #e8eef7 !important;
}

html[data-theme="dark"] .site-create-menu-item strong {
    color: #f8fafc !important;
}

html[data-theme="dark"] .site-create-menu-item small {
    color: #b8c5d6 !important;
}

html[data-theme="dark"] .site-create-menu-item:hover,
html[data-theme="dark"] .site-create-menu-item:hover strong,
html[data-theme="dark"] .site-create-menu-item:hover small {
    color: #ff9a4a !important;
}

html[data-theme="dark"] .site-search-fallback,
html[data-theme="dark"] .site-search-type {
    background: rgba(255, 122, 26, .14) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] :where(
    body > .fixed.inset-0[id*="modal"],
    body > .fixed.inset-0[id*="Modal"],
    body > [style*="position:fixed"][style*="inset:0"],
    [role="dialog"],
    dialog
) {
    color: var(--tropa-dark-text) !important;
}

html[data-theme="dark"] :where(
    body > .fixed.inset-0[id*="modal"],
    body > .fixed.inset-0[id*="Modal"],
    body > [style*="position:fixed"][style*="inset:0"],
    [role="dialog"]
) {
    background-color: rgba(2, 6, 23, .72) !important;
}

html[data-theme="dark"] :where(
    body > .fixed.inset-0[id*="modal"] > div,
    body > .fixed.inset-0[id*="Modal"] > div,
    body > [style*="position:fixed"][style*="inset:0"] > div,
    [id*="modal-content"],
    [id*="ModalContent"],
    [class*="modal"] [class*="rounded"],
    [class*="Modal"] [class*="rounded"],
    [role="dialog"] > div,
    dialog
) {
    border-color: var(--tropa-dark-line) !important;
    background:
        linear-gradient(180deg, rgba(18, 29, 46, .97), rgba(10, 18, 32, .98)) !important;
    color: var(--tropa-dark-text) !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .48), var(--tropa-dark-inner) !important;
}

html[data-theme="dark"] :where(
    [id*="modal"],
    [id*="Modal"],
    [class*="modal"],
    [class*="Modal"],
    body > [style*="position:fixed"][style*="inset:0"],
    [role="dialog"],
    dialog
) :where(
    .bg-white,
    [class~="bg-white/95"],
    [class~="bg-white/90"],
    [class~="bg-white/80"],
    .bg-gray-50,
    .bg-gray-100,
    .bg-slate-50,
    .bg-slate-100,
    [style*="background:#fff"],
    [style*="background: #fff"],
    [style*="background:#ffffff"],
    [style*="background: #ffffff"],
    [style*="background:#f8fafc"],
    [style*="background: #f8fafc"],
    [style*="background:#f1f5f9"],
    [style*="background: #f1f5f9"]
) {
    background:
        linear-gradient(180deg, rgba(20, 31, 49, .94), rgba(12, 22, 37, .96)) !important;
    color: var(--tropa-dark-text) !important;
}

html[data-theme="dark"] :where(
    [id*="modal"],
    [id*="Modal"],
    [class*="modal"],
    [class*="Modal"],
    body > [style*="position:fixed"][style*="inset:0"],
    [role="dialog"],
    dialog
) :where(
    .border,
    .border-t,
    .border-b,
    .border-l,
    .border-r,
    [style*="border:1px solid #e2e8f0"],
    [style*="border: 1px solid #e2e8f0"],
    [style*="border:1px solid #f1f5f9"],
    [style*="border: 1px solid #f1f5f9"],
    [style*="border-bottom:1px solid #f1f5f9"],
    [style*="border-bottom: 1px solid #f1f5f9"]
) {
    border-color: var(--tropa-dark-line) !important;
}

html[data-theme="dark"] :where(
    [id*="modal"],
    [id*="Modal"],
    [class*="modal"],
    [class*="Modal"],
    body > [style*="position:fixed"][style*="inset:0"],
    [role="dialog"],
    dialog
) :where(
    .text-gray-950,
    .text-gray-900,
    .text-gray-800,
    .text-slate-950,
    .text-slate-900,
    [style*="color:#020617"],
    [style*="color: #020617"],
    [style*="color:#0f172a"],
    [style*="color: #0f172a"]
) {
    color: var(--tropa-dark-text) !important;
}

html[data-theme="dark"] :where(
    [id*="modal"],
    [id*="Modal"],
    [class*="modal"],
    [class*="Modal"],
    body > [style*="position:fixed"][style*="inset:0"],
    [role="dialog"],
    dialog
) :where(
    .text-gray-700,
    .text-gray-600,
    .text-gray-500,
    .text-slate-700,
    .text-slate-600,
    .text-slate-500,
    [style*="color:#64748b"],
    [style*="color: #64748b"],
    [style*="color:#475569"],
    [style*="color: #475569"],
    [style*="color:#94a3b8"],
    [style*="color: #94a3b8"]
) {
    color: var(--tropa-dark-muted) !important;
}

html[data-theme="dark"] :where(
    [id*="modal"],
    [id*="Modal"],
    [class*="modal"],
    [class*="Modal"],
    body > [style*="position:fixed"][style*="inset:0"],
    [role="dialog"],
    dialog
) :where(button, a):where(
    .bg-white,
    .bg-gray-50,
    .bg-gray-100,
    [style*="background:#fff"],
    [style*="background: #fff"],
    [style*="background:#f1f5f9"],
    [style*="background: #f1f5f9"]
):not(.bg-orange-500):not(.bg-red-500):not(.bg-emerald-500):not(.text-white) {
    border-color: var(--tropa-dark-line-strong) !important;
    background: rgba(15, 23, 42, .88) !important;
    color: var(--tropa-dark-text) !important;
}

html[data-theme="dark"] :where(
    [id*="modal"],
    [id*="Modal"],
    [class*="modal"],
    [class*="Modal"],
    body > [style*="position:fixed"][style*="inset:0"],
    [role="dialog"],
    dialog
) :where(input, textarea, select) {
    background-color: rgba(7, 16, 29, .82) !important;
    border-color: var(--tropa-dark-line) !important;
    color: var(--tropa-dark-text) !important;
}

html[data-theme="dark"] #mobile-bottom-nav > div {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(12, 21, 36, .88) !important;
    box-shadow: 0 22px 58px rgba(0, 0, 0, .42), var(--tropa-dark-inner) !important;
}

html[data-theme="dark"] #mobile-bottom-nav a span:last-child {
    color: #97a7ba !important;
}

.theme-toggle-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 18px;
    padding: 9px 10px;
    color: #374151;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.theme-toggle-icon-wrap {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #fff7ed;
    color: #f97316;
}

.theme-toggle-copy {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.05;
}

.theme-toggle-copy [data-theme-toggle-label] {
    display: block;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    white-space: nowrap;
}

.theme-toggle-copy [data-theme-toggle-state] {
    display: block;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.theme-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: linear-gradient(90deg, #e5e7eb, #f8fafc);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
    transition: background-color .18s ease, box-shadow .18s ease;
}

.theme-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .18);
    transition: transform .22s cubic-bezier(.16, 1, .3, 1), background-color .18s ease;
}

.theme-toggle-row[data-theme-mode="light"] .theme-toggle-knob {
    transform: translateX(0);
}

.theme-toggle-row[data-theme-mode="dark"] .theme-toggle-switch {
    background: linear-gradient(135deg, #ff7a1a, #ff4f22);
    box-shadow: 0 0 0 1px rgba(255, 122, 26, .18), 0 8px 18px rgba(255, 106, 26, .16);
}

.theme-toggle-row[data-theme-mode="dark"] .theme-toggle-knob {
    transform: translateX(20px);
}

html[data-theme="dark"] .theme-toggle-row {
    color: var(--tropa-dark-text-soft);
}

html[data-theme="dark"] .theme-toggle-icon-wrap {
    background: rgba(255, 122, 26, .14);
    color: #ff9a4a;
}

html[data-theme="dark"] .theme-toggle-copy [data-theme-toggle-label] {
    color: #f8fafc;
}

html[data-theme="dark"] .theme-toggle-copy [data-theme-toggle-state] {
    color: #97a7ba;
}

html[data-theme="dark"] .theme-toggle-switch {
    background: rgba(15, 23, 42, .92);
    box-shadow: 0 0 0 1px rgba(148, 163, 184, .18), 0 10px 22px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .theme-toggle-row[data-theme-mode="dark"] .theme-toggle-switch {
    background: linear-gradient(135deg, #ff7a1a, #ff4f22);
    box-shadow: 0 0 0 1px rgba(255, 122, 26, .22), 0 10px 22px rgba(255, 106, 26, .18);
}

html[data-theme="dark"] .theme-toggle-knob {
    background: #fff7ed;
}

html[data-theme="dark"] .quick-post-card,
html[data-theme="dark"] [data-feed-card],
html[data-theme="dark"] .profile-suggestions-block,
html[data-theme="dark"] .suggested-profile-card,
html[data-theme="dark"] .official-routes-card,
html[data-theme="dark"] .community-hero-card,
html[data-theme="dark"] .community-detail-section,
html[data-theme="dark"] .community-side-card,
html[data-theme="dark"] .community-quick-note-card,
html[data-theme="dark"] .community-ride-card,
html[data-theme="dark"] .community-club-route-card,
html[data-theme="dark"] .profile-route-card,
html[data-theme="dark"] .post-detail-main > article,
html[data-theme="dark"] .article-route-map-card,
html[data-theme="dark"] .comment-composer-shell,
html[data-theme="dark"] .comment-thread {
    border-color: rgba(148, 163, 184, .16) !important;
    background:
        linear-gradient(180deg, rgba(18, 29, 46, .92), rgba(12, 21, 36, .92)) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .32), var(--tropa-dark-inner) !important;
}

html[data-theme="dark"] [data-feed-card] .feed-card-body,
html[data-theme="dark"] .suggested-profile-card-body,
html[data-theme="dark"] .community-club-route-card__body,
html[data-theme="dark"] .community-ride-card__body {
    background: linear-gradient(180deg, rgba(18, 29, 46, .96), rgba(11, 20, 34, .96)) !important;
}

html[data-theme="dark"] .profile-suggestions-block h3 {
    color: #f8fafc !important;
}

html[data-theme="dark"] .profile-suggestions-block p {
    color: #a9b8ca !important;
}

html[data-theme="dark"] .profile-suggestions-block .profile-swiper-prev,
html[data-theme="dark"] .profile-suggestions-block .profile-swiper-next {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(15, 23, 42, .78) !important;
    color: #d7e2ef !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24), var(--tropa-dark-inner) !important;
}

html[data-theme="dark"] .profile-suggestions-block .profile-swiper-prev:hover,
html[data-theme="dark"] .profile-suggestions-block .profile-swiper-next:hover {
    border-color: rgba(255, 122, 26, .34) !important;
    background: rgba(255, 122, 26, .12) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .suggested-profile-stat {
    border: 1px solid rgba(148, 163, 184, .16) !important;
    background: rgba(15, 23, 42, .74) !important;
    color: #f8fafc !important;
    box-shadow: var(--tropa-dark-inner) !important;
}

html[data-theme="dark"] .suggested-profile-stat > div > div:first-child,
html[data-theme="dark"] .suggested-followers-count {
    color: #f8fafc !important;
}

html[data-theme="dark"] .suggested-profile-stat-label,
html[data-theme="dark"] .suggested-profile-proof {
    color: #a9b8ca !important;
}

html[data-theme="dark"] .suggested-profile-open {
    color: #f8fafc !important;
}

html[data-theme="dark"] .official-routes-showcase {
    border-color: rgba(148, 163, 184, .16) !important;
    background:
        linear-gradient(180deg, rgba(18, 29, 46, .92), rgba(12, 21, 36, .92)) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .32), var(--tropa-dark-inner) !important;
}

html[data-theme="dark"] .official-routes-showcase__title {
    color: #f8fafc !important;
}

html[data-theme="dark"] .official-routes-showcase__subtitle {
    color: #a9b8ca !important;
}

html[data-theme="dark"] .official-routes-showcase__nav button {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(15, 23, 42, .78) !important;
    color: #d7e2ef !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24), var(--tropa-dark-inner) !important;
}

html[data-theme="dark"] .official-routes-showcase__nav button:hover {
    border-color: rgba(255, 122, 26, .34) !important;
    background: rgba(255, 122, 26, .12) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .route-showcase-card__shell {
    border-color: rgba(148, 163, 184, .16) !important;
    background: linear-gradient(180deg, rgba(18, 29, 46, .98), rgba(11, 20, 34, .98)) !important;
    box-shadow: 0 20px 54px rgba(0, 0, 0, .32) !important;
}

html[data-theme="dark"] .route-showcase-card__body {
    color: #f8fafc !important;
}

html[data-theme="dark"] .route-showcase-card__title,
html[data-theme="dark"] .route-showcase-card__title a {
    color: #f8fafc !important;
}

html[data-theme="dark"] .route-showcase-card__text,
html[data-theme="dark"] .route-showcase-card__region {
    color: #a9b8ca !important;
}

html[data-theme="dark"] .route-showcase-card__condition-copy strong {
    color: #f8fafc !important;
}

html[data-theme="dark"] .route-showcase-card__condition-copy small,
html[data-theme="dark"] .route-showcase-card__utility-item {
    color: #a9b8ca !important;
}

html[data-theme="dark"] .route-showcase-card__condition-icon {
    background: rgba(148, 163, 184, .08) !important;
}

html[data-theme="dark"] .route-showcase-card__condition--positive .route-showcase-card__condition-icon {
    border-color: #4ade80 !important;
    background: rgba(34, 197, 94, .12) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .route-showcase-card__condition--attention .route-showcase-card__condition-icon,
html[data-theme="dark"] .route-showcase-card__condition--warning .route-showcase-card__condition-icon {
    border-color: #fbbf24 !important;
    background: rgba(245, 158, 11, .12) !important;
    color: #fcd34d !important;
}

html[data-theme="dark"] .route-showcase-card__condition-avatar,
html[data-theme="dark"] .route-showcase-card__condition-more {
    border-color: #111c2d !important;
    background: #243249 !important;
    color: #d5dfeb !important;
}

html[data-theme="dark"] .route-showcase-card__tags span {
    border-color: rgba(255, 122, 26, .28) !important;
    background: rgba(255, 122, 26, .10) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .route-showcase-card__footer {
    border-color: rgba(148, 163, 184, .16) !important;
}

html[data-theme="dark"] .route-showcase-card__utility {
    border-color: rgba(148, 163, 184, .16) !important;
    background: rgba(5, 13, 25, .28) !important;
}

html[data-theme="dark"] .route-showcase-card__more {
    border-color: #f97316 !important;
    background: #f97316 !important;
    color: #fff !important;
}

html[data-theme="dark"] .route-showcase-card__more:hover {
    background: #f97316 !important;
    color: #fff !important;
}

html[data-theme="dark"] .route-showcase-card__provenance {
    border-color: rgba(148, 163, 184, .24) !important;
    background: rgba(148, 163, 184, .1) !important;
    color: #d5dfeb !important;
}

html[data-theme="dark"] .route-showcase-card__provenance--editorial_review {
    border-color: rgba(251, 146, 60, .35) !important;
    background: rgba(249, 115, 22, .13) !important;
    color: #ffad73 !important;
}

html[data-theme="dark"] .route-showcase-card__provenance--field_verified {
    border-color: rgba(74, 222, 128, .34) !important;
    background: rgba(34, 197, 94, .13) !important;
    color: #86efac !important;
}

html[data-theme="dark"] .official-routes-swiper-pagination .swiper-pagination-bullet {
    background: rgba(148, 163, 184, .36) !important;
}

html[data-theme="dark"] .official-routes-swiper-pagination .swiper-pagination-bullet-active {
    background: #ff9a4a !important;
}

html[data-theme="dark"] .home-feed-tab-link {
    color: #a9b8ca !important;
}

html[data-theme="dark"] .home-page-title {
    color: #f8fafc !important;
    text-shadow: 0 12px 34px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .home-feed-tab-link:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .home-feed-tab-link.is-active {
    background: #f8fafc !important;
    color: #08111f !important;
}

html[data-theme="dark"] .feed-action-btn,
html[data-theme="dark"] .quick-action-btn,
html[data-theme="dark"] .quick-icon-btn,
html[data-theme="dark"] .custom-dropdown-trigger,
html[data-theme="dark"] #quick-location-btn,
html[data-theme="dark"] #quick-article-link {
    border-color: rgba(148, 163, 184, .16) !important;
    background: rgba(15, 23, 42, .72) !important;
    color: #c8d3e1 !important;
}

html[data-theme="dark"] .quick-post-action-row .quick-action-btn,
html[data-theme="dark"] .quick-post-action-row .quick-icon-btn,
html[data-theme="dark"] .quick-post-action-row .custom-dropdown-trigger,
html[data-theme="dark"] .quick-post-action-row #quick-location-btn,
html[data-theme="dark"] .quick-post-action-row #quick-article-link {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

html[data-theme="dark"] .feed-action-btn:hover,
html[data-theme="dark"] .quick-action-btn:hover,
html[data-theme="dark"] .quick-icon-btn:hover,
html[data-theme="dark"] .custom-dropdown-trigger:hover,
html[data-theme="dark"] #quick-location-btn:hover,
html[data-theme="dark"] #quick-article-link:hover {
    background: rgba(255, 122, 26, .13) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .feed-card-topbar [class*="bg-[rgba"],
html[data-theme="dark"] [data-feed-card] .feed-route-stats {
    background: rgba(4, 10, 20, .78) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

html[data-theme="dark"] .messenger-page,
html[data-theme="dark"] body.page-messages {
    background:
        radial-gradient(circle at 18% 10%, rgba(255, 122, 26, .1), transparent 34%),
        linear-gradient(180deg, #08111f, #050b14) !important;
}

html[data-theme="dark"] .messenger-shell,
html[data-theme="dark"] #messenger-nav,
html[data-theme="dark"] #sidebar-container,
html[data-theme="dark"] #chat-window,
html[data-theme="dark"] #chat-info-panel,
html[data-theme="dark"] .sidebar-header,
html[data-theme="dark"] .chat-composer {
    border-color: rgba(148, 163, 184, .16) !important;
    background: rgba(12, 21, 36, .9) !important;
    color: var(--tropa-dark-text);
}

html[data-theme="dark"] #messages-container {
    background:
        radial-gradient(circle at 22% 10%, rgba(255, 122, 26, .08), transparent 30%),
        linear-gradient(180deg, #0b1626 0%, #08111f 100%) !important;
}

html[data-theme="dark"] .chat-item {
    background: transparent !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .chat-item:hover,
html[data-theme="dark"] .chat-item.is-selected,
html[data-theme="dark"] .messenger-nav-item:hover,
html[data-theme="dark"] .messenger-nav-item.is-active,
html[data-theme="dark"] .messenger-chip.is-active {
    background: rgba(255, 122, 26, .12) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .messenger-chip {
    background: rgba(15, 23, 42, .76) !important;
    color: #a9b8ca !important;
}

html[data-theme="dark"] [id^="msg-wrapper-"] .bg-white {
    background: rgba(17, 27, 43, .94) !important;
}

html[data-theme="dark"] [id^="msg-wrapper-"] .bg-\[\#eeffde\] {
    background: linear-gradient(135deg, rgba(64, 108, 48, .95), rgba(38, 83, 51, .95)) !important;
    color: #f2ffe9 !important;
}

html[data-theme="dark"] .messenger-share-card {
    border-color: rgba(148, 163, 184, .16) !important;
    background: linear-gradient(180deg, rgba(18, 29, 46, .96), rgba(12, 21, 36, .96)) !important;
}

html[data-theme="dark"] .composer-plus-btn,
html[data-theme="dark"] .composer-emoji-btn {
    border-color: rgba(148, 163, 184, .16) !important;
    background: rgba(15, 23, 42, .78) !important;
    color: #c8d3e1 !important;
}

html[data-theme="dark"] body.page-map {
    background: #07101d !important;
}

html[data-theme="dark"] body.page-map .site-topbar,
html[data-theme="dark"] body.page-map .site-topbar > div:nth-child(2),
html[data-theme="dark"] .map-page-wrapper #search-wrapper,
html[data-theme="dark"] .map-page-wrapper #search-suggestions,
html[data-theme="dark"] .map-page-wrapper #map-mode-controls,
html[data-theme="dark"] .map-page-wrapper #left-collection-menu,
html[data-theme="dark"] .map-page-wrapper #planner-sidebar,
html[data-theme="dark"] .map-page-wrapper #layer-switcher-menu,
html[data-theme="dark"] .map-page-wrapper #poi-filter-menu,
html[data-theme="dark"] .map-page-wrapper #route-card,
html[data-theme="dark"] .map-page-wrapper #collection-shell,
html[data-theme="dark"] .map-page-wrapper #radar-sidebar,
html[data-theme="dark"] .map-page-wrapper .map-controls-panel,
html[data-theme="dark"] .maplibregl-popup-content {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(12, 21, 36, .9) !important;
    color: var(--tropa-dark-text) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .34), var(--tropa-dark-inner) !important;
}

html[data-theme="dark"] body.page-map .site-topbar > div:nth-child(2) a {
    color: #a9b8ca !important;
}

html[data-theme="dark"] body.page-map .site-topbar > div:nth-child(2) a:hover,
html[data-theme="dark"] body.page-map .site-topbar > div:nth-child(2) a.bg-white {
    background: rgba(255, 255, 255, .07) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .map-page-wrapper #map-mode-controls .bg-orange-500,
html[data-theme="dark"] .map-page-wrapper #map-mode-controls [class*="bg-orange"] {
    color: #fff !important;
}

html[data-theme="dark"] .map-page-wrapper .map-search-result-item {
    border-color: rgba(148, 163, 184, .14) !important;
    background: transparent !important;
    color: var(--tropa-dark-text) !important;
}

html[data-theme="dark"] .map-page-wrapper .map-search-result-item:hover,
html[data-theme="dark"] .map-page-wrapper .map-search-result-item.is-active {
    background: rgba(249, 115, 22, .12) !important;
}

html[data-theme="dark"] .map-page-wrapper .map-search-result-item__content small,
html[data-theme="dark"] .map-page-wrapper .map-search-result-status {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .map-page-wrapper .map-search-result-group + .map-search-result-group,
html[data-theme="dark"] .map-page-wrapper .map-search-result-group__title,
html[data-theme="dark"] .map-page-wrapper .map-search-result-loading {
    border-color: rgba(148, 163, 184, .14) !important;
}

html[data-theme="dark"] .map-page-wrapper .map-search-result-group__title {
    background: rgba(15, 23, 42, .96) !important;
    color: #94a3b8 !important;
}

html[data-theme="dark"] .map-page-wrapper .map-search-result-loading {
    background: transparent !important;
    color: #94a3b8 !important;
}

html[data-theme="dark"] .map-page-wrapper #collapsed-route-actions .collapsed-route-action,
html[data-theme="dark"] .map-page-wrapper #planner-mobile-actions button {
    border-color: rgba(255, 122, 26, .38) !important;
    background: rgba(15, 23, 42, .9) !important;
    color: #ff9a4a !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .3) !important;
    text-shadow: none !important;
    filter: none !important;
}

html[data-theme="dark"] .map-page-wrapper #collapsed-route-actions .collapsed-route-action:hover,
html[data-theme="dark"] .map-page-wrapper #planner-mobile-actions button:active {
    border-color: #ff7a1a !important;
    background: rgba(255, 122, 26, .16) !important;
    color: #ffb178 !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24) !important;
}

html[data-theme="dark"] .map-page-wrapper #collapsed-route-actions .collapsed-route-action svg,
html[data-theme="dark"] .map-page-wrapper #planner-mobile-actions button svg {
    color: #ff8a3d !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper :where(.bg-white, .bg-white\/95, .bg-gray-50, .bg-gray-50\/80, .bg-gray-100, .bg-gray-100\/50):not(.bg-orange-500):not(.text-white) {
    border-color: rgba(148, 163, 184, .16) !important;
    background: rgba(15, 23, 42, .72) !important;
    color: #d8e2ee !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper :where(input, textarea, select) {
    border-color: rgba(148, 163, 184, .22) !important;
    background: rgba(15, 23, 42, .72) !important;
    color: #e8eef7 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper :where(input, textarea)::placeholder {
    color: #718198 !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper :where(select option) {
    background: #0f172a !important;
    color: #e8eef7 !important;
}

html[data-theme="dark"] .map-page-wrapper #planner-sidebar :where(.text-gray-900, .text-gray-800, .text-gray-700),
html[data-theme="dark"] .map-page-wrapper #left-collection-menu :where(.text-gray-900, .text-gray-800, .text-gray-700),
html[data-theme="dark"] .map-page-wrapper #planner-modal :where(.text-gray-900, .text-gray-800, .text-gray-700) {
    color: #f8fafc !important;
}

html[data-theme="dark"] .map-page-wrapper #planner-sidebar :where(.text-gray-600, .text-gray-500, .text-gray-400),
html[data-theme="dark"] .map-page-wrapper #left-collection-menu :where(.text-gray-600, .text-gray-500, .text-gray-400),
html[data-theme="dark"] .map-page-wrapper #planner-modal :where(.text-gray-600, .text-gray-500, .text-gray-400) {
    color: #9fb0c5 !important;
}

html[data-theme="dark"] .map-page-wrapper #left-collection-menu #collection-shell,
html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-toggle-btn,
html[data-theme="dark"] .map-page-wrapper #left-collection-menu #collection-content {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(12, 21, 36, .94) !important;
    color: #d8e2ee !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-header-title,
html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-route-item h4 {
    color: #f8fafc !important;
}

html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-header-meta,
html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-route-meta-line {
    color: #9fb0c5 !important;
}

html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-header-counts span,
html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-title-badge {
    border-color: rgba(255, 122, 26, .22) !important;
    background: rgba(255, 122, 26, .14) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-search,
html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-section,
html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-section > div:first-child,
html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-route-item,
html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-route-actions button,
html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-bulk-actions button,
html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-section-toggle {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(15, 23, 42, .72) !important;
    color: #d8e2ee !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-route-item:hover,
html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-route-item.is-selected,
html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-route-actions button:hover,
html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-bulk-actions button:hover,
html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-section-toggle:hover {
    border-color: rgba(255, 122, 26, .34) !important;
    background: rgba(255, 122, 26, .12) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-tab,
html[data-theme="dark"] .map-page-wrapper #planner-sidebar .planner-sidebar-tab {
    background: rgba(15, 23, 42, .72) !important;
    color: #9fb0c5 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .map-page-wrapper #left-collection-menu .collection-tab.is-active,
html[data-theme="dark"] .map-page-wrapper #planner-sidebar .planner-sidebar-tab.bg-white {
    background: rgba(255, 122, 26, .16) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .map-page-wrapper #planner-sidebar > .planner-sidebar-tabs,
html[data-theme="dark"] .map-page-wrapper #planner-sidebar .planner-sidebar-tabs {
    background: rgba(248, 250, 252, .08) !important;
}

html[data-theme="dark"] .map-page-wrapper #planner-route-onboarding,
html[data-theme="dark"] .map-page-wrapper .planner-route-setting,
html[data-theme="dark"] .map-page-wrapper .planner-routing-options,
html[data-theme="dark"] .map-page-wrapper .planner-preflight-panel,
html[data-theme="dark"] .map-page-wrapper .planner-selection-panel,
html[data-theme="dark"] .map-page-wrapper .planner-elevation-card,
html[data-theme="dark"] .map-page-wrapper .planner-diagnostics-panel {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(15, 23, 42, .72) !important;
    color: #d8e2ee !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .map-page-wrapper #planner-route-onboarding .planner-onboarding-title,
html[data-theme="dark"] .map-page-wrapper .planner-panel-heading,
html[data-theme="dark"] .map-page-wrapper .planner-routing-options summary strong,
html[data-theme="dark"] .map-page-wrapper .planner-preflight-head strong {
    color: #f8fafc !important;
}

html[data-theme="dark"] .map-page-wrapper .planner-secondary-copy,
html[data-theme="dark"] .map-page-wrapper .planner-routing-options-summary,
html[data-theme="dark"] .map-page-wrapper .planner-preflight-list li {
    color: #9fb0c5 !important;
}

html[data-theme="dark"] .map-page-wrapper .planner-routing-options summary b,
html[data-theme="dark"] .map-page-wrapper .planner-preflight-head b {
    border-color: rgba(255, 122, 26, .22) !important;
    background: rgba(255, 122, 26, .14) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .map-page-wrapper .planner-routing-options-notice-row,
html[data-theme="dark"] .map-page-wrapper .planner-routing-options-notice-row button {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(10, 18, 32, .68) !important;
    color: #c8d3e1 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar {
    border-color: rgba(148, 163, 184, .2) !important;
    background:
        linear-gradient(180deg, rgba(18, 29, 46, .96), rgba(10, 18, 32, .98)) !important;
    color: #e8eef7 !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .46), var(--tropa-dark-inner) !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar > .shrink-0,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar > div:first-child,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar > div:last-child {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(10, 18, 32, .86) !important;
    color: #e8eef7 !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar .planner-metrics-disclosure {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(15, 23, 42, .72) !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar .planner-metrics-toggle:hover,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar .planner-metrics-toggle:focus-visible,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar .planner-metrics-toggle.is-open {
    background: rgba(30, 41, 59, .82) !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar .planner-metrics-toggle__footer {
    border-color: rgba(148, 163, 184, .18) !important;
    color: #9fb0c5 !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar-title,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar :where(h2, h3, h4, strong),
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar .planner-panel-heading,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar #planner-stats-grid span:last-child {
    color: #f8fafc !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar :where(label, p, small),
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar #planner-draft-status,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar .planner-panel-subhint,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar #planner-stats-grid span:first-child {
    color: #9fb0c5 !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #btn-collapse-planner,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar button.bg-gray-100:not(.bg-orange-500):not(.text-white),
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar button.bg-gray-50:not(.bg-orange-500):not(.text-white),
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar button.bg-white:not(.bg-orange-500):not(.text-white) {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(15, 23, 42, .78) !important;
    color: #c8d3e1 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #btn-collapse-planner:hover,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar button.bg-gray-100:not(.bg-orange-500):not(.text-white):hover,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar button.bg-gray-50:not(.bg-orange-500):not(.text-white):hover,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar button.bg-white:not(.bg-orange-500):not(.text-white):hover {
    border-color: rgba(255, 122, 26, .34) !important;
    background: rgba(255, 122, 26, .13) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar > .planner-sidebar-tabs,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar .planner-sidebar-tabs {
    border: 1px solid rgba(148, 163, 184, .14) !important;
    background: rgba(8, 15, 28, .78) !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar .planner-sidebar-tab {
    background: transparent !important;
    color: #9fb0c5 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar .planner-sidebar-tab:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar .planner-sidebar-tab.bg-white,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar .planner-sidebar-tab.text-orange-600 {
    background: rgba(255, 122, 26, .18) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar :where(input:not([type="color"]), textarea, select) {
    border-color: rgba(148, 163, 184, .26) !important;
    background: rgba(7, 16, 29, .82) !important;
    color: #e8eef7 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar :where(input, textarea)::placeholder {
    color: #8293aa !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar :where(select option) {
    background: #0f172a !important;
    color: #e8eef7 !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar :where(input:not([type="color"]), textarea, select):focus {
    border-color: rgba(255, 122, 26, .58) !important;
    background: rgba(11, 20, 34, .96) !important;
    box-shadow: 0 0 0 3px rgba(255, 122, 26, .14) !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar .planner-route-setting,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar .planner-routing-options,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar .planner-elevation-card,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar #planner-empty-stats,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar .planner-point-item,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar #planner-tab-segments > .border-2,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar #planner-tab-waypoints > .bg-white,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar .planner-preflight-panel,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar .planner-selection-panel {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(15, 23, 42, .72) !important;
    color: #d8e2ee !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar #planner-tab-segments > .border-2.border-orange-500,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar #planner-tab-segments > .bg-orange-50\/30 {
    border-color: rgba(255, 122, 26, .78) !important;
    background: rgba(255, 122, 26, .12) !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar #planner-tab-segments .bg-white,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar #planner-tab-segments .bg-gray-50,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar #planner-tab-waypoints .bg-white,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar #planner-tab-waypoints .bg-gray-50 {
    border-color: rgba(148, 163, 184, .2) !important;
    background: rgba(10, 18, 32, .72) !important;
    color: #d8e2ee !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar #planner-tab-segments :where(.text-gray-950, .text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600),
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar #planner-tab-waypoints :where(.text-gray-950, .text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600) {
    color: #e8eef7 !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar #planner-tab-segments :where(.text-gray-500, .text-gray-400),
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar #planner-tab-waypoints :where(.text-gray-500, .text-gray-400) {
    color: #9fb0c5 !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar #planner-cover-btn,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar #planner-tab-info button[class*="border-dashed"],
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar button[class*="border-dashed"] {
    border-color: rgba(148, 163, 184, .28) !important;
    background: rgba(8, 15, 28, .72) !important;
    color: #a9b8ca !important;
}

html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar #planner-cover-btn:hover,
html[data-theme="dark"] body.page-map .map-page-wrapper #planner-sidebar button[class*="border-dashed"]:hover {
    border-color: rgba(255, 122, 26, .48) !important;
    background: rgba(255, 122, 26, .12) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .map-page-wrapper #planner-modal > div {
    border: 1px solid rgba(148, 163, 184, .18) !important;
    background: rgba(12, 21, 36, .96) !important;
    color: #d8e2ee !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .48) !important;
}

html[data-theme="dark"] .map-page-wrapper #planner-modal > div > div:first-of-type {
    border-bottom-color: rgba(148, 163, 184, .16) !important;
    background: transparent !important;
}

html[data-theme="dark"] .map-page-wrapper #planner-modal h2,
html[data-theme="dark"] .map-page-wrapper #planner-activity-grid button span:first-child {
    color: #f8fafc !important;
}

html[data-theme="dark"] .map-page-wrapper #planner-activity-grid h3 {
    border-bottom-color: rgba(148, 163, 184, .16) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .map-page-wrapper #planner-activity-grid button {
    border-color: rgba(148, 163, 184, .16) !important;
    background: rgba(15, 23, 42, .72) !important;
    color: #d8e2ee !important;
}

html[data-theme="dark"] .map-page-wrapper #planner-activity-grid button:hover {
    border-color: rgba(255, 122, 26, .34) !important;
    background: rgba(255, 122, 26, .12) !important;
}

html[data-theme="dark"] .map-page-wrapper #planner-activity-grid button span:last-child {
    color: #9fb0c5 !important;
}

html[data-theme="dark"] .map-page-wrapper #planner-toolbar > div {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(12, 21, 36, .94) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .34), var(--tropa-dark-inner) !important;
}

html[data-theme="dark"] .map-page-wrapper #planner-toolbar .planner-tool,
html[data-theme="dark"] .map-page-wrapper #planner-toolbar .planner-tool-secondary,
html[data-theme="dark"] .map-page-wrapper #planner-toolbar button {
    border-color: rgba(148, 163, 184, .16) !important;
    background: rgba(15, 23, 42, .72) !important;
    color: #9fb0c5 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .map-page-wrapper #planner-toolbar .planner-tool:hover,
html[data-theme="dark"] .map-page-wrapper #planner-toolbar .planner-tool-secondary:hover {
    border-color: rgba(255, 122, 26, .34) !important;
    background: rgba(255, 122, 26, .12) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .map-page-wrapper #planner-toolbar .planner-tool.active,
html[data-theme="dark"] .map-page-wrapper #planner-toolbar .planner-tool.bg-black,
html[data-theme="dark"] .map-page-wrapper #planner-toolbar .planner-tool.text-white {
    border-color: rgba(255, 122, 26, .34) !important;
    background: rgba(255, 122, 26, .18) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .map-page-wrapper #planner-toolbar .planner-tool[disabled],
html[data-theme="dark"] .map-page-wrapper #planner-toolbar .planner-tool-secondary[disabled],
html[data-theme="dark"] .map-page-wrapper #planner-toolbar button[disabled] {
    border-color: rgba(148, 163, 184, .1) !important;
    background: rgba(148, 163, 184, .08) !important;
    color: rgba(159, 176, 197, .45) !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .map-page-wrapper #planner-toolbar .w-px {
    background: rgba(148, 163, 184, .18) !important;
}

html[data-theme="dark"] #map {
    background: #08111f !important;
}

html[data-theme="dark"] .community-page {
    color: var(--tropa-dark-text) !important;
}

html[data-theme="dark"] .community-page .community-intro,
html[data-theme="dark"] .community-page .community-discovery {
    border-color: rgba(148, 163, 184, .16) !important;
    background: linear-gradient(180deg, rgba(18, 29, 46, .94), rgba(10, 18, 32, .92)) !important;
    color: var(--tropa-dark-text) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .3), var(--tropa-dark-inner) !important;
}

html[data-theme="dark"] .community-page .community-intro h1,
html[data-theme="dark"] .community-page h2,
html[data-theme="dark"] .community-card__title,
html[data-theme="dark"] .community-card__stats b {
    color: #f8fafc !important;
}

html[data-theme="dark"] .community-page .community-intro p:not(:first-child),
html[data-theme="dark"] #community-result-count,
html[data-theme="dark"] .community-card__description,
html[data-theme="dark"] .community-card__stats small,
html[data-theme="dark"] .community-card__members-strip p {
    color: #9fb0c5 !important;
}

html[data-theme="dark"] .community-search,
html[data-theme="dark"] .community-sort {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(15, 23, 42, .76) !important;
    color: #9fb0c5 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .community-search input,
html[data-theme="dark"] .community-sort select {
    color: #e8eef7 !important;
}

html[data-theme="dark"] .community-search input::placeholder,
html[data-theme="dark"] .community-sort span {
    color: #718198 !important;
}

html[data-theme="dark"] .community-sort select option {
    background: #0f172a !important;
    color: #e8eef7 !important;
}

html[data-theme="dark"] .community-tab {
    background: rgba(15, 23, 42, .72) !important;
    color: #b6c4d7 !important;
}

html[data-theme="dark"] .community-tab:hover {
    background: rgba(255, 122, 26, .12) !important;
    color: #ffb178 !important;
}

html[data-theme="dark"] .community-tab.is-active {
    background: #f97316 !important;
    color: #fff !important;
}

html[data-theme="dark"] .community-tab span {
    background: rgba(248, 250, 252, .08) !important;
    color: inherit !important;
}

html[data-theme="dark"] .community-card {
    border-color: rgba(148, 163, 184, .16) !important;
    background: linear-gradient(180deg, rgba(18, 29, 46, .96), rgba(11, 20, 34, .96)) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .32), var(--tropa-dark-inner) !important;
}

html[data-theme="dark"] .community-card:hover {
    border-color: rgba(255, 122, 26, .34) !important;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .36), 0 0 34px rgba(255, 122, 26, .08) !important;
}

html[data-theme="dark"] .community-card__media {
    background: #08111f !important;
}

html[data-theme="dark"] .community-card__fallback {
    background:
        radial-gradient(circle at 78% 28%, rgba(249, 115, 22, .2), transparent 26%),
        radial-gradient(circle at 22% 18%, rgba(96, 165, 250, .08), transparent 24%),
        linear-gradient(145deg, #08111f 0%, #132136 56%, #30190f 100%) !important;
}

html[data-theme="dark"] .community-card__shade {
    background:
        linear-gradient(to top, rgba(5, 11, 20, .58), rgba(5, 11, 20, .16) 58%, rgba(5, 11, 20, .04)),
        linear-gradient(135deg, rgba(255, 255, 255, .04), transparent 46%) !important;
}

html[data-theme="dark"] .community-card__badge--light {
    border: 1px solid rgba(148, 163, 184, .18) !important;
    background: rgba(15, 23, 42, .82) !important;
    color: #e8eef7 !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .28) !important;
}

html[data-theme="dark"] .community-card__avatar {
    border-color: rgba(15, 23, 42, .96) !important;
    background: rgba(15, 23, 42, .96) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .36) !important;
}

html[data-theme="dark"] .community-card__avatar-inner {
    background: #0f172a !important;
}

html[data-theme="dark"] .community-card__level {
    border-color: rgba(255, 122, 26, .24) !important;
    background: rgba(255, 122, 26, .14) !important;
    color: #ff9a4a !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .community-card__level strong {
    color: #ff9a4a !important;
}

html[data-theme="dark"] .community-card__level span {
    color: #fff7ed !important;
}

html[data-theme="dark"] .community-card__topic {
    background: rgba(248, 250, 252, .08) !important;
    color: #c8d3e1 !important;
}

html[data-theme="dark"] .community-card__topic--official {
    background: rgba(255, 122, 26, .14) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .community-card__stats {
    border-top-color: rgba(148, 163, 184, .18) !important;
    border-bottom-color: rgba(148, 163, 184, .18) !important;
}

html[data-theme="dark"] .community-card__stats span + span {
    border-left-color: rgba(148, 163, 184, .18) !important;
}

html[data-theme="dark"] .community-card__stats svg {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .community-card__stats span:nth-child(3) svg {
    color: #22c55e !important;
}

html[data-theme="dark"] .community-card__open-icon {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(15, 23, 42, .76) !important;
    color: #c8d3e1 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .community-card__open-icon:hover {
    border-color: rgba(255, 122, 26, .34) !important;
    background: rgba(255, 122, 26, .12) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .community-card__members-strip {
    background: rgba(15, 23, 42, .7) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .community-card__members a,
html[data-theme="dark"] .community-card__members-extra {
    border-color: rgba(15, 23, 42, .96) !important;
    background: #0f172a !important;
    color: #c8d3e1 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .community-join-btn.is-joined {
    border: 1px solid rgba(148, 163, 184, .18) !important;
    background: rgba(15, 23, 42, .82) !important;
    color: #e8eef7 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .community-empty-state {
    border-color: rgba(148, 163, 184, .22) !important;
    background: rgba(15, 23, 42, .72) !important;
}

html[data-theme="dark"] .community-empty-state__title {
    color: #f8fafc !important;
}

html[data-theme="dark"] .community-empty-state__text {
    color: #9fb0c5 !important;
}

html[data-theme="dark"] #create-club-modal > div {
    border: 1px solid rgba(148, 163, 184, .18) !important;
    background: linear-gradient(180deg, rgba(18, 29, 46, .98), rgba(10, 18, 32, .98)) !important;
    color: var(--tropa-dark-text) !important;
}

html[data-theme="dark"] #create-club-modal h3 {
    color: #f8fafc !important;
}

html[data-theme="dark"] #create-club-modal input,
html[data-theme="dark"] #create-club-modal textarea {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(15, 23, 42, .76) !important;
    color: #e8eef7 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] #create-club-modal input::placeholder,
html[data-theme="dark"] #create-club-modal textarea::placeholder {
    color: #718198 !important;
}

html[data-theme="dark"] .community-hero-card {
    background: #0d1727 !important;
}

html[data-theme="dark"] .community-hero-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 11, 20, .02), rgba(5, 11, 20, .32));
}

html[data-theme="dark"] .community-hero-pill,
html[data-theme="dark"] .profile-route-experience__tab,
html[data-theme="dark"] .profile-route-experience__all {
    border-color: rgba(148, 163, 184, .16) !important;
    background: rgba(15, 23, 42, .76) !important;
    color: #c8d3e1 !important;
}

html[data-theme="dark"] .community-detail-tabs {
    background: rgba(10, 18, 32, .7) !important;
    border-color: rgba(148, 163, 184, .16) !important;
}

html[data-theme="dark"] .community-detail-tabs a.is-active,
html[data-theme="dark"] .profile-route-experience__tab.is-active {
    background: #f8fafc !important;
    color: #07101d !important;
}

html[data-theme="dark"] .community-hero-level {
    border-color: rgba(255, 122, 26, .24) !important;
    background: rgba(15, 23, 42, .88) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .3) !important;
}

html[data-theme="dark"] .community-hero-level__rank {
    color: #f8fafc !important;
}

html[data-theme="dark"] .community-hero-level__xp {
    color: #9fb0c5 !important;
}

html[data-theme="dark"] .community-hero-level__track {
    background: rgba(255, 122, 26, .18) !important;
}

html[data-theme="dark"] .community-overview-card {
    border-color: rgba(148, 163, 184, .18) !important;
    background: linear-gradient(180deg, rgba(18, 29, 46, .94), rgba(11, 20, 34, .92)) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .community-overview-card:hover {
    border-color: rgba(255, 122, 26, .32) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .24) !important;
}

html[data-theme="dark"] .community-overview-card h3,
html[data-theme="dark"] .community-side-title h3,
html[data-theme="dark"] .community-award-item strong {
    color: #f8fafc !important;
}

html[data-theme="dark"] .community-overview-card p,
html[data-theme="dark"] .community-award-item div span,
html[data-theme="dark"] .community-awards-note,
html[data-theme="dark"] .community-next-award > span {
    color: #9fb0c5 !important;
}

html[data-theme="dark"] .community-overview-card__icon--orange,
html[data-theme="dark"] .community-overview-request-link,
html[data-theme="dark"] .community-overview-next-ride strong,
html[data-theme="dark"] .community-overview-status b {
    background: rgba(255, 122, 26, .14) !important;
    color: #ff9a4a !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .community-overview-card__icon--blue,
html[data-theme="dark"] .community-overview-status--blue b {
    background: rgba(59, 130, 246, .14) !important;
    color: #60a5fa !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .community-overview-card__icon--green,
html[data-theme="dark"] .community-overview-member-metric strong {
    background: rgba(34, 197, 94, .14) !important;
    color: #4ade80 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .community-overview-next-ride,
html[data-theme="dark"] .community-overview-status,
html[data-theme="dark"] .community-overview-member-metric {
    background: rgba(15, 23, 42, .72) !important;
    color: #c8d3e1 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .community-overview-next-ride span {
    color: #e8eef7 !important;
}

html[data-theme="dark"] .community-side-title a {
    color: #9fb0c5 !important;
}

html[data-theme="dark"] .community-side-title a span,
html[data-theme="dark"] .community-side-title__level {
    background: rgba(255, 122, 26, .14) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .community-side-member {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(15, 23, 42, .72) !important;
    color: #d8e2ee !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .community-side-member:hover {
    border-color: rgba(255, 122, 26, .34) !important;
    background: rgba(255, 122, 26, .12) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .community-award-item {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(15, 23, 42, .72) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .community-award-item__icon {
    background: rgba(255, 122, 26, .14) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .community-next-award {
    border: 1px solid rgba(255, 122, 26, .2) !important;
    background: rgba(15, 23, 42, .82) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .community-next-award strong {
    color: #f8fafc !important;
}

html[data-theme="dark"] .community-next-award div {
    background: rgba(248, 250, 252, .1) !important;
}

html[data-theme="dark"] .route-detail-page {
    color: var(--tropa-dark-text) !important;
}

html[data-theme="dark"] .route-detail-page > article {
    border-color: rgba(148, 163, 184, .16) !important;
    background: linear-gradient(180deg, rgba(18, 29, 46, .96), rgba(10, 18, 32, .94)) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .32), var(--tropa-dark-inner) !important;
}

html[data-theme="dark"] .route-detail-page h1,
html[data-theme="dark"] .route-detail-page h2,
html[data-theme="dark"] .route-detail-page h3,
html[data-theme="dark"] .route-detail-page .text-gray-950 {
    color: #f8fafc !important;
}

html[data-theme="dark"] .route-detail-page :where(.text-gray-600, .text-gray-700, .text-slate-700) {
    color: #c8d3e1 !important;
}

html[data-theme="dark"] .route-detail-page :where(.text-gray-400, .text-gray-500, .text-slate-500) {
    color: #9fb0c5 !important;
}

html[data-theme="dark"] .route-disclaimer-note {
    border-color: rgba(255, 122, 26, .28) !important;
    background: rgba(255, 122, 26, .12) !important;
    color: #c8d3e1 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .route-disclaimer-note span:first-child {
    color: #f8fafc !important;
}

html[data-theme="dark"] .route-detail-page dl > div,
html[data-theme="dark"] .route-detail-page #route-map .grid > div,
html[data-theme="dark"] .route-detail-page #route-elevation > div,
html[data-theme="dark"] .route-detail-page #route-surfaces > div,
html[data-theme="dark"] .route-detail-page #route-surfaces .rounded-2xl.bg-white {
    border-color: rgba(148, 163, 184, .16) !important;
    background: rgba(15, 23, 42, .72) !important;
    color: #d8e2ee !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .route-detail-page dl > div img {
    filter: brightness(0) invert(1) opacity(.86) !important;
}

html[data-theme="dark"] .route-detail-page dl > div dd.text-orange-500 {
    color: #ff9a4a !important;
}

html[data-theme="dark"] .route-detail-page #route-actions {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(10, 18, 32, .92) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .34), var(--tropa-dark-inner) !important;
}

html[data-theme="dark"] .route-detail-page #route-actions button:not(.bg-orange-500),
html[data-theme="dark"] .route-detail-page #route-actions summary {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(15, 23, 42, .78) !important;
    color: #d8e2ee !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .route-detail-page #route-actions button:not(.bg-orange-500):hover,
html[data-theme="dark"] .route-detail-page #route-actions summary:hover {
    border-color: rgba(255, 122, 26, .34) !important;
    background: rgba(255, 122, 26, .12) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .route-detail-page .route-download-menu > div {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(13, 23, 39, .96) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .42) !important;
}

html[data-theme="dark"] .route-detail-page .route-download-menu a {
    color: #d8e2ee !important;
}

html[data-theme="dark"] .route-detail-page .route-download-menu a:hover {
    background: rgba(255, 122, 26, .12) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .route-detail-page #route-map .relative,
html[data-theme="dark"] .route-detail-page #route-minimap > div,
html[data-theme="dark"] .route-detail-page .aspect-\[16\/10\] {
    border-color: rgba(148, 163, 184, .16) !important;
    background: #08111f !important;
}

html[data-theme="dark"] .route-detail-weather {
    border-color: rgba(255, 122, 26, .24) !important;
    background: rgba(255, 122, 26, .1) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .route-detail-weather-icon,
html[data-theme="dark"] .route-detail-weather-toggle {
    border-color: rgba(255, 122, 26, .24) !important;
    background: rgba(15, 23, 42, .72) !important;
    color: #ff9a4a !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .route-detail-weather-temp,
html[data-theme="dark"] .route-detail-weather-wind {
    color: #f8fafc !important;
}

html[data-theme="dark"] .route-detail-weather-body {
    border-top-color: rgba(255, 122, 26, .2) !important;
}

html[data-theme="dark"] .route-detail-page #route-surfaces .bg-gray-100 {
    background: rgba(248, 250, 252, .12) !important;
}

html[data-theme="dark"] .route-detail-page #route-surfaces .bg-orange-50 {
    background: rgba(255, 122, 26, .12) !important;
    color: #ffb178 !important;
}

html[data-theme="dark"] .route-detail-page [href*="/articles/"],
html[data-theme="dark"] .route-detail-page > section a {
    border-color: rgba(148, 163, 184, .16) !important;
    background: rgba(15, 23, 42, .72) !important;
    color: #d8e2ee !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .route-detail-page [href*="/articles/"]:hover,
html[data-theme="dark"] .route-detail-page > section a:hover {
    border-color: rgba(255, 122, 26, .34) !important;
    background: rgba(255, 122, 26, .12) !important;
}

html[data-theme="dark"] .route-detail-page > section h2 {
    color: #f8fafc !important;
}

html[data-theme="dark"] .route-detail-page > section p {
    color: #9fb0c5 !important;
}

html[data-theme="dark"] .route-detail-page > section .bg-orange-50 {
    background: rgba(255, 122, 26, .14) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .route-detail-page > section .bg-gray-100 {
    background: rgba(248, 250, 252, .08) !important;
    color: #c8d3e1 !important;
}

html[data-theme="dark"] .post-content {
    color: #d8e2ee !important;
}

html[data-theme="dark"] .post-content :where(h1, h2, h3, h4, strong) {
    color: #f8fafc !important;
}

html[data-theme="dark"] .post-content :where(p, li) {
    color: #c8d3e1 !important;
}

html[data-theme="dark"] .route-story-block-bound.route-story-block-active {
    border: 1px solid rgba(255, 122, 26, .24) !important;
    background:
        linear-gradient(180deg, rgba(255, 122, 26, .13), rgba(12, 21, 36, .82)) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .34), 0 0 34px rgba(255, 122, 26, .10) !important;
}

html[data-theme="dark"] .route-story-map-link-badge {
    border-color: rgba(255, 122, 26, .34) !important;
    background: rgba(15, 23, 42, .82) !important;
    color: #ff9a4a !important;
    box-shadow: var(--tropa-dark-inner) !important;
}

html[data-theme="dark"] .route-story-nav-link,
html[data-theme="dark"] .article-route-map-panel,
html[data-theme="dark"] .comment-body-wrapper {
    border-color: rgba(148, 163, 184, .16) !important;
    background: rgba(15, 23, 42, .76) !important;
}

html[data-theme="dark"] .post-detail-main :where([class*="bg-orange-50/"], [class*="bg-gray-50/"]),
html[data-theme="dark"] #route-story-nav,
html[data-theme="dark"] #comment-route-panel,
html[data-theme="dark"] .comment-edit-form {
    border-color: rgba(255, 122, 26, .2) !important;
    background:
        linear-gradient(180deg, rgba(255, 122, 26, .12), rgba(15, 23, 42, .78)) !important;
    color: var(--tropa-dark-text-soft) !important;
}

html[data-theme="dark"] .post-detail-main :where([class*="bg-orange-50/"], [class*="bg-gray-50/"]) p:not([class*="text-orange"]),
html[data-theme="dark"] #route-story-nav p,
html[data-theme="dark"] #comment-route-panel p {
    color: #d8e2ee !important;
}

html[data-theme="dark"] .tropa-video-player,
html[data-theme="dark"] .post-media-frame {
    background: #050b14 !important;
    border-color: rgba(148, 163, 184, .14) !important;
}

html[data-theme="dark"] .profile-gradient {
    background: linear-gradient(135deg, #ff7a1a 0%, #c2410c 100%) !important;
}

html[data-theme="dark"] .profile-page,
html[data-theme="dark"] .community-detail-page,
html[data-theme="dark"] .community-settings-page {
    color: var(--tropa-dark-text);
}

html[data-theme="dark"] .profile-page :where(.rounded-\[32px\], .rounded-\[28px\], .rounded-\[24px\]).bg-white,
html[data-theme="dark"] .profile-travel-map,
html[data-theme="dark"] .profile-travel-map__empty,
html[data-theme="dark"] .profile-events-card,
html[data-theme="dark"] .profile-current-event,
html[data-theme="dark"] .profile-event-row,
html[data-theme="dark"] .profile-route-empty,
html[data-theme="dark"] .profile-route-experience,
html[data-theme="dark"] .profile-tabs-bar,
html[data-theme="dark"] #profile-awards,
html[data-theme="dark"] #profile-awards .bg-white,
html[data-theme="dark"] .profile-page aside > div {
    border-color: rgba(148, 163, 184, .16) !important;
    background:
        linear-gradient(180deg, rgba(18, 29, 46, .92), rgba(10, 18, 32, .9)) !important;
    color: var(--tropa-dark-text) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .32), var(--tropa-dark-inner) !important;
}

html[data-theme="dark"] .profile-travel-map__map-shell {
    border-color: rgba(148, 163, 184, .18) !important;
    background: #0b1626 !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 18px 45px rgba(0, 0, 0, .28) !important;
}

html[data-theme="dark"] .profile-travel-map__map-badge {
    border-color: rgba(148, 163, 184, .2) !important;
    background: rgba(15, 23, 42, .82) !important;
    color: #dbeafe !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .3) !important;
}

html[data-theme="dark"] .profile-travel-map__title,
html[data-theme="dark"] .profile-travel-map__places-title,
html[data-theme="dark"] .profile-travel-map__empty-title,
html[data-theme="dark"] .profile-route-empty__title,
html[data-theme="dark"] .profile-travel-stat__value,
html[data-theme="dark"] .profile-header-name,
html[data-theme="dark"] .profile-header-stat strong {
    color: #f8fafc !important;
}

html[data-theme="dark"] .profile-page .profile-route-experience__title,
html[data-theme="dark"] .profile-page .profile-travel-map__title,
html[data-theme="dark"] .profile-page .profile-events-card__header h2,
html[data-theme="dark"] .profile-page #profile-photos > div:first-child h3,
html[data-theme="dark"] .profile-page #profile-posts > div:first-child h3,
html[data-theme="dark"] .profile-page #profile-awards > div:first-child h3,
html[data-theme="dark"] .profile-page #profile-communities > div:first-child h3,
html[data-theme="dark"] .profile-page aside > div > h3,
html[data-theme="dark"] .profile-page aside > div > .flex h3 {
    color: #f8fafc !important;
}

html[data-theme="dark"] .profile-travel-map__summary,
html[data-theme="dark"] .profile-travel-map__empty-text,
html[data-theme="dark"] .profile-route-empty__text,
html[data-theme="dark"] .profile-travel-stat__label,
html[data-theme="dark"] .profile-header-bio,
html[data-theme="dark"] .profile-header-stat span {
    color: #9fb0c4 !important;
}

html[data-theme="dark"] .profile-travel-map__all,
html[data-theme="dark"] .profile-travel-map__filter,
html[data-theme="dark"] .profile-travel-map__place,
html[data-theme="dark"] .profile-travel-map__empty-action,
html[data-theme="dark"] .profile-travel-stat,
html[data-theme="dark"] .profile-header-stat {
    border-color: rgba(148, 163, 184, .16) !important;
    background: rgba(15, 23, 42, .76) !important;
    color: #c8d3e1 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22) !important;
}

html[data-theme="dark"] .profile-page #profile-awards > .flex.gap-2.flex-wrap > div {
    border-color: rgba(148, 163, 184, .16) !important;
    background: rgba(15, 23, 42, .72) !important;
    color: #64748b !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

html[data-theme="dark"] .profile-page #profile-awards > .flex.gap-2.flex-wrap > div:hover {
    border-color: rgba(255, 122, 26, .32) !important;
    background: rgba(255, 122, 26, .12) !important;
}

html[data-theme="dark"] .profile-page #profile-awards > .flex.gap-2.flex-wrap > div[class*="bg-orange-50"] {
    border-color: rgba(255, 122, 26, .34) !important;
    background: rgba(255, 122, 26, .13) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] .profile-page #profile-awards > .flex.gap-2.flex-wrap > div[class*="bg-blue-50"] {
    border-color: rgba(96, 165, 250, .34) !important;
    background: rgba(59, 130, 246, .14) !important;
    color: #60a5fa !important;
}

html[data-theme="dark"] .profile-page #profile-awards > .flex.gap-2.flex-wrap > div[class*="bg-green-50"] {
    border-color: rgba(74, 222, 128, .34) !important;
    background: rgba(34, 197, 94, .13) !important;
    color: #4ade80 !important;
}

html[data-theme="dark"] .profile-page #profile-awards > .flex.gap-2.flex-wrap > div[class*="bg-gray-50"] {
    border-color: rgba(148, 163, 184, .14) !important;
    background: rgba(15, 23, 42, .62) !important;
    color: #64748b !important;
    opacity: .72 !important;
}

html[data-theme="dark"] .profile-page aside > div > .rounded-\[24px\].bg-blue-50 {
    border-color: rgba(96, 165, 250, .24) !important;
    background: rgba(59, 130, 246, .12) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

html[data-theme="dark"] .profile-page aside > div > .rounded-\[24px\].bg-blue-50 p:first-child {
    color: #93c5fd !important;
}

html[data-theme="dark"] .profile-page aside > div > .rounded-\[24px\].bg-blue-50 .text-blue-600 {
    color: #60a5fa !important;
}

html[data-theme="dark"] .profile-page aside > div > .rounded-\[24px\].bg-blue-50 .text-blue-500 {
    color: #93c5fd !important;
}

html[data-theme="dark"] .profile-page aside > div > .rounded-\[24px\].bg-blue-50 a.bg-white {
    border: 1px solid rgba(96, 165, 250, .24) !important;
    background: rgba(15, 23, 42, .72) !important;
    color: #93c5fd !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .profile-page aside > div > .rounded-\[24px\].bg-blue-50 a.bg-white:hover {
    background: rgba(59, 130, 246, .18) !important;
}

html[data-theme="dark"] .profile-header-meta {
    color: #fb923c !important;
}

html[data-theme="dark"] .profile-header-city {
    color: #9fb0c4 !important;
}

html[data-theme="dark"] .profile-header-meta span {
    color: rgba(148, 163, 184, .65) !important;
}

html[data-theme="dark"] .profile-verified-badge {
    background-color: #fb923c !important;
}

html[data-theme="dark"] .profile-header-stats {
    border-color: rgba(148, 163, 184, .16) !important;
    background: rgba(15, 23, 42, .76) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .24) !important;
}

html[data-theme="dark"] .profile-header-stat {
    border-color: rgba(148, 163, 184, .16) !important;
}

html[data-theme="dark"] .profile-header-stat-icon {
    color: #f8fafc !important;
}

html[data-theme="dark"] .profile-header-level-card {
    border-color: rgba(251, 146, 60, .32) !important;
    background: rgba(251, 146, 60, .13) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .22) !important;
}

html[data-theme="dark"] .profile-header-level-card > div:nth-child(1) {
    color: #fb923c !important;
}

html[data-theme="dark"] .profile-header-level-card > div:nth-child(2) {
    color: #f8fafc !important;
}

html[data-theme="dark"] .profile-header-level-card > div:nth-child(3),
html[data-theme="dark"] .profile-header-level-card > div:nth-child(4) {
    color: #9fb0c4 !important;
}

html[data-theme="dark"] .profile-header-level-card > div:nth-child(5) {
    background: rgba(251, 146, 60, .18) !important;
}

html[data-theme="dark"] .profile-header-badge--level {
    border-color: rgba(251, 146, 60, .38) !important;
    background: rgba(251, 146, 60, .16) !important;
    color: #fff7ed !important;
}

html[data-theme="dark"] .profile-header-badge--orange,
html[data-theme="dark"] .profile-header-badge--green,
html[data-theme="dark"] .profile-header-badge--blue,
html[data-theme="dark"] .profile-header-badge--gray {
    border-color: rgba(148, 163, 184, .16) !important;
    background: rgba(15, 23, 42, .68) !important;
    color: #c8d3e1 !important;
}

html[data-theme="dark"] .profile-travel-map__filter.is-active,
html[data-theme="dark"] .profile-travel-map__empty-action--dark,
html[data-theme="dark"] .profile-route-empty__action {
    border-color: rgba(255, 122, 26, .38) !important;
    background: linear-gradient(135deg, #ff7a1a, #ff5722) !important;
    color: #fff !important;
}

html[data-theme="dark"] .profile-page .quick-post-card .quick-post-action-row {
    border-color: rgba(148, 163, 184, .16) !important;
}

html[data-theme="dark"] .profile-page .quick-post-card #quick-text-input,
html[data-theme="dark"] .quick-post-card #quick-text-input {
    color: var(--tropa-dark-text) !important;
    caret-color: #ff9a4a;
}

html[data-theme="dark"] .profile-page .quick-post-card #char-counter,
html[data-theme="dark"] .quick-post-card #char-counter {
    color: #8fa1b8 !important;
}

html[data-theme="dark"] .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, .28);
}

html[data-theme="dark"] img[data-progressive-image="true"]:not(.progressive-image-loaded):not(.progressive-image-error) {
    background-color: #111827;
    filter: blur(18px) saturate(.78) brightness(.82);
}

html[data-theme="dark"] .maplibregl-popup.map-context-popup .maplibregl-popup-content {
    border-color: rgba(148, 163, 184, .22) !important;
    background: rgba(15, 23, 42, .94) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

html[data-theme="dark"] .maplibregl-popup.map-context-popup .maplibregl-popup-close-button {
    border-color: rgba(148, 163, 184, .2) !important;
    background: rgba(30, 41, 59, .9) !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .maplibregl-popup.map-context-popup .maplibregl-popup-close-button:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
}

html[data-theme="dark"] .tt-map-popup-title h3,
html[data-theme="dark"] .tt-map-coords-card__body b {
    color: #f8fafc !important;
}

html[data-theme="dark"] .tt-map-popup-title p,
html[data-theme="dark"] .tt-map-popup-description,
html[data-theme="dark"] .tt-map-coords-card__body small {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .tt-map-popup-description {
    border-color: rgba(148, 163, 184, .16) !important;
    background: rgba(30, 41, 59, .58) !important;
}

html[data-theme="dark"] .tt-map-coords-card {
    border-color: rgba(148, 163, 184, .16) !important;
    background: rgba(30, 41, 59, .72) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035) !important;
}

html[data-theme="dark"] .tt-map-popup-title span {
    background: rgba(255, 255, 255, .06) !important;
}

html[data-theme="dark"] .tt-map-popup-anchor-badge {
    border-color: rgba(15, 23, 42, .98) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .42) !important;
}

html[data-theme="dark"] .tt-map-popup-anchor-badge::before {
    background: rgba(15, 23, 42, .94) !important;
}

html[data-theme="dark"] [data-feed-card] .feed-card-section-badge {
    border-color: rgba(245, 158, 11, .26) !important;
    background: rgba(245, 158, 11, .12) !important;
    color: #fbbf24 !important;
}

html[data-theme="dark"] [data-feed-card] .feed-card-category-badge,
html[data-theme="dark"] [data-feed-card] .feed-card-mobile-meta > a {
    border-color: rgba(255, 122, 26, .34) !important;
    background: rgba(255, 122, 26, .13) !important;
    color: #ff9a4a !important;
}

html[data-theme="dark"] [data-feed-card] .feed-card-category-badge :where(svg, span),
html[data-theme="dark"] [data-feed-card] .feed-card-mobile-meta > a :where(svg, span) {
    color: #ff9a4a !important;
}

html[data-theme="dark"] [data-feed-card] .feed-card-type-badge,
html[data-theme="dark"] [data-feed-card] .feed-card-mobile-meta > span {
    border-color: rgba(148, 163, 184, .22) !important;
    background: rgba(20, 31, 49, .86) !important;
    color: #d7e2ef !important;
}

html[data-theme="dark"] [data-feed-card] .feed-card-type-badge :where(svg, span),
html[data-theme="dark"] [data-feed-card] .feed-card-mobile-meta > span :where(svg, span) {
    color: inherit !important;
}

html[data-theme="dark"] .route-actuality,
html[data-theme="dark"] .route-condition-modal__sheet {
    border-color: rgba(120, 139, 165, .28) !important;
    background: #101b2b !important;
    color: #f3f6fb !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .route-actuality--warning {
    border-color: rgba(245, 158, 11, .42) !important;
    background: #171c24 !important;
}

html[data-theme="dark"] .route-actuality--critical {
    border-color: rgba(248, 113, 113, .42) !important;
    background: #1d1920 !important;
}

html[data-theme="dark"] .route-actuality__header,
html[data-theme="dark"] .route-actuality__item + .route-actuality__item,
html[data-theme="dark"] .route-actuality__issues {
    border-color: rgba(120, 139, 165, .2) !important;
}

html[data-theme="dark"] .route-actuality__header h2,
html[data-theme="dark"] .route-actuality__value,
html[data-theme="dark"] .route-condition-modal__head h2,
html[data-theme="dark"] .route-condition-form__field > span,
html[data-theme="dark"] .route-condition-form__fieldset legend,
html[data-theme="dark"] .route-condition-form__location summary {
    color: #f3f6fb !important;
}

html[data-theme="dark"] .route-actuality__item > p,
html[data-theme="dark"] .route-actuality__label,
html[data-theme="dark"] .route-actuality__details,
html[data-theme="dark"] .route-actuality__issues,
html[data-theme="dark"] .route-condition-form small,
html[data-theme="dark"] .route-condition-form__fieldset > p,
html[data-theme="dark"] .route-condition-form__location > p {
    color: #a8b5c7 !important;
}

html[data-theme="dark"] .route-condition-modal__close,
html[data-theme="dark"] .route-condition-form__location {
    border-color: rgba(120, 139, 165, .28) !important;
    background: #142238 !important;
    color: #e8eef7 !important;
}

html[data-theme="dark"] .route-condition-form input[type="date"],
html[data-theme="dark"] .route-condition-form input[type="number"],
html[data-theme="dark"] .route-condition-form input[type="file"],
html[data-theme="dark"] .route-condition-form textarea,
html[data-theme="dark"] .route-condition-form__segments span,
html[data-theme="dark"] .route-condition-form__chips span {
    border-color: rgba(120, 139, 165, .28) !important;
    background: #0d1829 !important;
    color: #dce5f0 !important;
}

html[data-theme="dark"] .route-condition-form__segments input:checked + span,
html[data-theme="dark"] .route-condition-form__chips input:checked + span {
    border-color: #ff7a2c !important;
    background: rgba(255, 122, 44, .14) !important;
    color: #ff9b61 !important;
}

@media (max-width: 767px) {
    html[data-theme="dark"] .site-topbar {
        background: rgba(12, 21, 36, .9) !important;
    }
}


/* ---- css/site-redesign.css ---- */
/*
 * Shared TrailTrack shell for internal pages.
 * Page-specific layouts remain authoritative; this file only aligns them with
 * the light visual language and proportions of the redesigned home page.
 * The full-screen map is excluded in base.html.
 */

body.page-site-redesign {
    --tt-shell-width: 1360px;
    --tt-shell-bg: #f5f7f8;
    --tt-shell-surface: #fff;
    --tt-shell-surface-soft: #f8fafc;
    --tt-shell-ink: #121922;
    --tt-shell-copy: #667085;
    --tt-shell-muted: #8a96a7;
    --tt-shell-line: #dde3e9;
    --tt-shell-line-soft: #e9edf2;
    --tt-shell-orange: #ff671d;
    --tt-shell-orange-dark: #e95612;
    --tt-shell-shadow: 0 14px 38px rgba(15, 23, 42, .07);
    --tt-shell-shadow-hover: 0 20px 48px rgba(15, 23, 42, .11);
    color: var(--tt-shell-ink);
}

body.page-site-redesign:not(.page-home-redesign) {
    min-height: 100vh;
    background: var(--tt-shell-bg) !important;
}

body.page-site-redesign:not(.page-home-redesign) .site-ambient {
    opacity: .28;
}

body.page-site-redesign:not(.page-home-redesign) .site-ambient__wash {
    opacity: .14;
}

body.page-site-redesign:not(.page-home-redesign) :where(h1, h2, h3, h4) {
    color: var(--tt-shell-ink);
    letter-spacing: 0 !important;
    text-wrap: balance;
}

body.page-site-redesign:not(.page-home-redesign) :where(p, li, dd, figcaption) {
    text-wrap: pretty;
}

body.page-site-redesign:not(.page-home-redesign) :where(
    a,
    button,
    input,
    select,
    textarea
):focus-visible {
    outline: 3px solid rgba(255, 103, 29, .22);
    outline-offset: 2px;
}

/* The inner-page header uses the same clean white surface as the home finder. */
body.page-site-redesign:not(.page-home-redesign) > .site-topbar {
    position: fixed !important;
    top: 14px !important;
    right: auto !important;
    left: 50% !important;
    z-index: 220 !important;
    width: min(calc(100vw - 32px), var(--tt-shell-width)) !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 !important;
    border: 1px solid rgba(221, 227, 233, .94) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .95) !important;
    padding: 0 18px !important;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .08) !important;
    transform: translateX(-50%) !important;
    backdrop-filter: blur(20px) saturate(1.08);
    -webkit-backdrop-filter: blur(20px) saturate(1.08);
}

body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-logo-link {
    overflow: visible;
}

body.page-site-redesign:not(.page-home-redesign) > .site-topbar :where(
    .site-logo-mark,
    .site-logo-img
) {
    width: 150px !important;
    max-width: 150px !important;
}

body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-primary-tabs {
    gap: 2px !important;
    border: 1px solid #e7ebf0 !important;
    border-radius: 12px !important;
    background: #f5f7f9 !important;
    padding: 3px !important;
}

body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-primary-tabs a {
    min-height: 36px;
    border-radius: 9px !important;
    padding: 0 15px !important;
    color: #536173 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 36px;
}

/* 981-1180px: the centred tabs ran into the action buttons; keep them in the row flow. */
@media (min-width: 981px) and (max-width: 1180px) {
    body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-primary-tabs {
        position: static !important;
        flex: 0 0 auto;
        min-width: 0;
        margin: 0 12px;
        transform: none !important;
    }

    body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-primary-tabs a {
        min-width: 0 !important;
        padding: 0 11px !important;
    }
}

@media (min-width: 1360px) {
    body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-primary-tabs a {
        font-size: 14px !important;
    }
}

body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-primary-tabs a:hover {
    background: rgba(255, 255, 255, .75) !important;
    color: var(--tt-shell-ink) !important;
}

body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-primary-tabs a.bg-white {
    background: #fff !important;
    color: var(--tt-shell-orange) !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .07) !important;
}

body.page-site-redesign:not(.page-home-redesign) > .site-topbar :where(
    .site-action-button,
    .site-profile-button
) {
    border-color: #e1e7ed !important;
    background: #fff !important;
    color: #344054 !important;
}

body.page-site-redesign:not(.page-home-redesign) > .site-topbar :where(
    .site-action-button,
    .site-profile-button
):hover {
    border-color: rgba(255, 103, 29, .3) !important;
    background: #fff8f3 !important;
    color: var(--tt-shell-orange) !important;
}

body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-topbar-actions {
    gap: 8px !important;
}

body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-action-button {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 11px !important;
}

body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-create-button {
    min-width: 112px !important;
    height: 42px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: var(--tt-shell-orange) !important;
    padding: 0 18px !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: 0 12px 26px rgba(255, 103, 29, .24) !important;
}

/* 768-980px: «Создать» is icon-only here, so it needn't keep its desktop width; the tabs need the room. */
@media (min-width: 768px) and (max-width: 980px) {
    body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-create-button {
        min-width: 42px !important;
        width: 42px;
        padding: 0 !important;
    }

    body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-primary-tabs {
        flex: 0 0 auto;
    }

    body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-primary-tabs a {
        min-width: 0 !important;
        padding: 0 8px !important;
    }

    body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-profile-name {
        display: none;
    }

    body.page-site-redesign:not(.page-home-redesign) > .site-topbar {
        padding-left: 18px !important;
        padding-right: 14px !important;
    }

    body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-topbar-left {
        flex-shrink: 0;
        flex-basis: auto;
    }

    /* The logo already leads home. */
    body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-primary-tabs a:first-child {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 860px) {
    body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-primary-tabs a {
        padding: 0 6px !important;
        font-size: 12.5px !important;
    }
}

body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-create-button:hover {
    background: var(--tt-shell-orange-dark) !important;
    color: #fff !important;
}

body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-search-button {
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
}

body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-profile-button {
    height: 42px !important;
    min-height: 42px !important;
    gap: 7px !important;
    border-radius: 11px !important;
    padding: 5px 10px 5px 5px !important;
}

body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-profile-button > span:first-child {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
}

body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-profile-name {
    max-width: 72px !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1.1 !important;
}

body.page-site-redesign:not(.page-home-redesign) .site-main-offset {
    padding-top: 94px;
}

/* One shared subscription ring for the signed-in avatar on every shell. */
.subscription-avatar-anchor {
    position: relative;
    overflow: visible !important;
    isolation: isolate;
}

.subscription-avatar-frame {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid #9ca3af;
    border-radius: inherit;
    background: #fff;
    padding: 1px;
}

.subscription-avatar-frame--plus {
    border-color: #ff5b14;
}

.subscription-avatar-frame--free {
    border-color: #9ca3af;
}

.subscription-avatar-frame--mobile {
    width: 28px;
    height: 28px;
    border-radius: 999px;
}

.tt-home-nav__profile-avatar.subscription-avatar-anchor {
    overflow: visible;
}

/* One horizontal rhythm, matching the 1360px home shell before responsive scaling. */
body.page-site-redesign:not(.page-home-redesign) :where(
    .route-catalog-page,
    .journal-feed-page,
    .route-collections-page,
    .route-detail-page,
    .profile-page,
    .post-detail-layout,
    .articles-archive-page,
    .search-results-page,
    .all-albums-page,
    .album-detail-page,
    .official-routes-page,
    .seo-landing-page,
    .legal-document-page,
    .moderation-board-page,
    .community-page,
    .community-detail-page,
    .community-settings-page,
    .discovery-page
) {
    width: min(calc(100% - 32px), var(--tt-shell-width)) !important;
    max-width: var(--tt-shell-width) !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

body.page-site-redesign.page-regions-index #main-content > main,
body.page-site-redesign.page-region-detail #main-content > main {
    width: min(calc(100% - 32px), var(--tt-shell-width)) !important;
    max-width: var(--tt-shell-width) !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

body.page-site-redesign:not(.page-home-redesign) :where(
    .route-catalog-page,
    .journal-feed-page,
    .route-collections-page,
    .articles-archive-page,
    .search-results-page,
    .official-routes-page,
    .seo-landing-page,
    .legal-document-page
) {
    padding-top: 18px !important;
}

/* Keep page-specific heroes light unless their own template provides a photo. */
body.page-site-redesign:not(.page-home-redesign) :where(
    .catalog-light-hero,
    .journal-hero,
    .articles-archive-page > section:first-child,
    .search-results-card,
    .discovery-header
) {
    border-color: rgba(221, 227, 233, .94) !important;
    box-shadow: var(--tt-shell-shadow) !important;
}

body.page-site-redesign:not(.page-home-redesign) .journal-hero {
    border-radius: 16px 16px 0 0 !important;
}

body.page-site-redesign:not(.page-home-redesign) .journal-toolbar {
    border-color: rgba(221, 227, 233, .94) !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .055) !important;
}

body.page-site-redesign:not(.page-home-redesign) .journal-hero__shot {
    border-width: 3px;
    border-radius: 12px;
}

body.page-site-redesign:not(.page-home-redesign) :where(
    .catalog-light-hero,
    .articles-archive-page > section:first-child,
    .search-results-card,
    .official-routes-page > div:first-child,
    .legal-document-page > article,
    .moderation-board-page > div:first-child
) {
    border-radius: 16px !important;
}

/* Cards keep their own information architecture and gain a consistent finish. */
body.page-site-redesign:not(.page-home-redesign) :where(
    .route-catalog-intro,
    .route-catalog-filter,
    .search-result-card,
    .search-route-card,
    .search-publication-card,
    .route-collections-section,
    .profile-tabs-bar,
    .profile-sidebar-card,
    .profile-content-layout > aside > div,
    .legal-document,
    .legal-card
) {
    border-color: var(--tt-shell-line) !important;
    background-color: var(--tt-shell-surface) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .05) !important;
}

/* The collections catalog uses an open editorial canvas, not a framed panel. */
body.page-site-redesign.page-route-collections .route-collections-section {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.page-site-redesign:not(.page-home-redesign) :where(
    .route-showcase-card,
    .regions-index-grid > article,
    .route-collection-card,
    .journal-card,
    .profile-route-card,
    [data-feed-card]
) {
    border-color: var(--tt-shell-line) !important;
    background-color: var(--tt-shell-surface);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .055) !important;
}

body.page-site-redesign:not(.page-home-redesign) :where(
    .route-showcase-card,
    .regions-index-grid > article,
    .route-collection-card,
    .journal-card,
    .profile-route-card,
    [data-feed-card]
):hover {
    border-color: rgba(255, 103, 29, .28) !important;
    box-shadow: var(--tt-shell-shadow-hover) !important;
}

body.page-site-redesign.page-route-collections .route-collection-card {
    border-color: rgba(255, 255, 255, .32) !important;
    background-color: transparent !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .12) !important;
}

body.page-site-redesign.page-route-collections .route-collection-card:hover {
    border-color: rgba(255, 255, 255, .58) !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .2) !important;
}

/* Journal editorial grid: two lead stories followed by compact cards. */
body.page-site-redesign.page-journal-index .journal-feed-page {
    width: min(calc(100% - 32px), 1440px);
}

body.page-site-redesign.page-journal-index .journal-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px 18px;
}

body.page-site-redesign.page-journal-index .journal-card {
    grid-column: span 4;
    border-color: rgba(214, 222, 234, .86);
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .08) !important;
}

body.page-site-redesign.page-journal-index .journal-card--featured {
    grid-column: span 6;
}

body.page-site-redesign.page-journal-index .journal-card__media {
    aspect-ratio: 16 / 9;
    isolation: isolate;
}

body.page-site-redesign.page-journal-index .journal-card--featured .journal-card__media {
    aspect-ratio: 16 / 9;
}

body.page-site-redesign.page-journal-index .journal-card__image-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(4, 11, 23, .06) 24%, rgba(4, 11, 23, .88) 100%);
    pointer-events: none;
}

body.page-site-redesign.page-journal-index .journal-card__date {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(8, 15, 27, .68);
    padding: 0 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    backdrop-filter: blur(12px);
}

body.page-site-redesign.page-journal-index .journal-card__cover-copy {
    position: absolute;
    right: 20px;
    bottom: 18px;
    left: 20px;
    z-index: 3;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0;
    color: #fff;
}

body.page-site-redesign.page-journal-index .journal-card .journal-card__title {
    display: block;
    overflow: visible;
    max-width: none;
    margin: 0;
    color: #172033 !important;
    font-size: clamp(21px, 1.4vw, 25px);
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1.16;
    text-shadow: none;
    text-wrap: pretty;
    -webkit-line-clamp: unset;
}

body.page-site-redesign.page-journal-index .journal-card--featured .journal-card__title {
    max-width: none;
    font-size: clamp(25px, 1.85vw, 32px);
    line-height: 1.12;
}

body.page-site-redesign.page-journal-index .journal-card__route-facts {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px 16px;
}

body.page-site-redesign.page-journal-index .journal-card__route-fact {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, .96);
    font-size: 12px;
    font-weight: 760;
    line-height: 1.2;
}

body.page-site-redesign.page-journal-index .journal-card__route-fact img {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    filter: brightness(0) invert(1);
    opacity: .95;
}

body.page-site-redesign.page-journal-index .journal-card__route-fact--location {
    overflow: hidden;
    max-width: 45%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-site-redesign.page-journal-index .journal-card__body {
    min-height: 260px;
    padding: 18px 20px 16px !important;
}

body.page-site-redesign.page-journal-index .journal-card--featured .journal-card__body {
    min-height: 238px;
    padding: 20px 24px 18px !important;
}

body.page-site-redesign.page-journal-index .journal-card__description {
    margin: 14px 0 0;
    color: #4e5c71;
    font-size: 13px;
    font-weight: 570;
    line-height: 1.55;
    -webkit-line-clamp: 3;
}

body.page-site-redesign.page-journal-index .journal-card--featured .journal-card__description {
    max-width: 92%;
    font-size: 14px;
    -webkit-line-clamp: 2;
}

body.page-site-redesign.page-journal-index .journal-card__footer {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
}

body.page-site-redesign.page-journal-index .journal-card .journal-card__author {
    min-width: 0;
    flex: 1 1 auto;
}

body.page-site-redesign.page-journal-index .journal-card .journal-card__avatar {
    width: 34px;
    height: 34px;
}

body.page-site-redesign.page-journal-index .journal-card .journal-card__name {
    overflow: visible;
    color: #172033;
    font-size: 12px;
    text-overflow: clip;
    white-space: normal;
}

body.page-site-redesign.page-journal-index .journal-card .journal-card__meta {
    width: 100%;
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 16px;
    margin: 0;
    border-top: 1px solid rgba(214, 222, 234, .72);
    padding: 12px 0 0;
}

body.page-site-redesign.page-journal-index .journal-card__metric {
    gap: 5px;
    font-size: 11px;
}

body.page-site-redesign.page-journal-index .journal-card__metric img,
body.page-site-redesign.page-journal-index .journal-card__like .like-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

body.page-site-redesign.page-journal-index .journal-card__like[aria-pressed="true"] .like-icon,
body.page-site-redesign.page-journal-index .journal-card__like.text-red-500 .like-icon {
    filter: invert(36%) sepia(96%) saturate(2599%) hue-rotate(345deg) brightness(101%) contrast(95%);
}

body.page-site-redesign.page-journal-index .journal-card__metric--saved {
    margin-left: 0;
}

body.page-site-redesign.page-journal-index .journal-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 90, 31, .22);
    box-shadow: 0 24px 58px rgba(15, 23, 42, .13) !important;
}

@media (max-width: 1199px) {
    body.page-site-redesign.page-journal-index .journal-card,
    body.page-site-redesign.page-journal-index .journal-card--featured {
        grid-column: span 6;
    }

    body.page-site-redesign.page-journal-index .journal-card__media,
    body.page-site-redesign.page-journal-index .journal-card--featured .journal-card__media {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 767px) {
    body.page-site-redesign.page-journal-index .journal-feed-page {
        width: min(calc(100% - 20px), 100%);
    }

    body.page-site-redesign.page-journal-index .journal-grid {
        gap: 14px;
    }

    body.page-site-redesign.page-journal-index .journal-card,
    body.page-site-redesign.page-journal-index .journal-card--featured {
        grid-column: 1 / -1;
    }

    body.page-site-redesign.page-journal-index .journal-card__media,
    body.page-site-redesign.page-journal-index .journal-card--featured .journal-card__media {
        aspect-ratio: 16 / 10;
    }

    body.page-site-redesign.page-journal-index .journal-card .journal-card__title,
    body.page-site-redesign.page-journal-index .journal-card--featured .journal-card__title {
        max-width: 100%;
        font-size: clamp(22px, 6.4vw, 29px);
    }

    body.page-site-redesign.page-journal-index .journal-card__cover-copy {
        right: 16px;
        bottom: 15px;
        left: 16px;
    }

    body.page-site-redesign.page-journal-index .journal-card__route-facts {
        gap: 7px 12px;
    }

    body.page-site-redesign.page-journal-index .journal-card__route-fact {
        font-size: 11px;
    }

    body.page-site-redesign.page-journal-index .journal-card__route-fact--location {
        max-width: 52%;
    }

    body.page-site-redesign.page-journal-index .journal-card__body,
    body.page-site-redesign.page-journal-index .journal-card--featured .journal-card__body {
        min-height: 0;
        padding: 16px !important;
    }

    body.page-site-redesign.page-journal-index .journal-card__footer {
        padding-top: 16px;
    }

    body.page-site-redesign.page-journal-index .journal-card .journal-card__meta {
        gap: 10px;
    }
}

html[data-theme="dark"] body.page-journal-index .journal-card {
    border-color: var(--tropa-dark-line);
    background: var(--tropa-dark-surface-solid);
}

html[data-theme="dark"] body.page-journal-index .journal-card__description {
    color: var(--tropa-dark-text-soft);
}

html[data-theme="dark"] body.page-journal-index .journal-card .journal-card__name {
    color: var(--tropa-dark-text);
}

html[data-theme="dark"] body.page-journal-index .journal-card .journal-card__title {
    color: var(--tropa-dark-text) !important;
}

html[data-theme="dark"] body.page-journal-index .journal-card .journal-card__meta {
    border-top-color: var(--tropa-dark-line);
}

@media (prefers-reduced-motion: reduce) {
    body.page-site-redesign.page-journal-index .journal-card,
    body.page-site-redesign.page-journal-index .journal-card__media img {
        transition: none !important;
    }

    body.page-site-redesign.page-journal-index .journal-card:hover,
    body.page-site-redesign.page-journal-index .journal-card:hover .journal-card__media img {
        transform: none !important;
    }
}

body.page-site-redesign.page-routes-index .route-catalog-filter {
    padding: 18px !important;
}

/* Regions catalog: image-led cards matching the map and route visual language. */
body.page-site-redesign.page-regions-index #main-content > main.regions-showcase-page {
    width: min(calc(100vw - 32px), var(--tt-shell-width)) !important;
    max-width: var(--tt-shell-width) !important;
    padding: 34px 0 54px !important;
}

.regions-showcase-section + .regions-showcase-section {
    margin-top: 54px;
}

.regions-showcase-intro {
    max-width: 760px;
    margin-bottom: 26px;
}

.regions-showcase-intro__eyebrow {
    margin: 0 0 9px;
    color: #ff671d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.regions-showcase-intro__title {
    margin: 0;
    color: #151c28;
    font-size: clamp(30px, 2.6vw, 42px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.08;
}

.regions-showcase-intro__description {
    max-width: 680px;
    margin: 12px 0 0;
    color: #697386;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.55;
}

body.page-site-redesign.page-regions-index .regions-index-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 22px !important;
}

body.page-site-redesign.page-regions-index .region-showcase-card {
    position: relative;
    min-width: 0;
    height: clamp(310px, 23vw, 350px);
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 18px;
    background: #111827 !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .12) !important;
    isolation: isolate;
    transform: translateZ(0);
    transition: transform .38s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, box-shadow .38s ease;
}

.region-showcase-card__link {
    position: absolute;
    inset: 0;
    display: block;
    color: #fff;
    text-decoration: none;
}

.region-showcase-card__image,
.region-showcase-card__shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.region-showcase-card__image {
    object-fit: cover;
    transform: scale(1.005);
    transition: transform .8s cubic-bezier(.16, 1, .3, 1), filter .45s ease;
}

.region-showcase-card__shade {
    z-index: 1;
    background: linear-gradient(180deg, rgba(2, 6, 23, .04) 20%, rgba(2, 6, 23, .32) 55%, rgba(2, 6, 23, .94) 100%), linear-gradient(90deg, rgba(2, 6, 23, .22), transparent 58%);
    transition: opacity .38s ease;
}

.region-showcase-card__count {
    position: absolute;
    z-index: 2;
    top: 15px;
    left: 16px;
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(32, 83, 139, .9);
    box-shadow: 0 8px 20px rgba(2, 6, 23, .16);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    backdrop-filter: blur(10px);
}

.region-showcase-card:nth-child(3n + 1) .region-showcase-card__count { background: rgba(166, 92, 35, .9); }
.region-showcase-card:nth-child(3n) .region-showcase-card__count { background: rgba(35, 112, 52, .9); }

.region-showcase-card__content {
    position: absolute;
    z-index: 2;
    inset: auto 0 0;
    display: flex;
    flex-direction: column;
    padding: 24px 18px 17px;
}

.region-showcase-card__title {
    display: -webkit-box;
    overflow: hidden;
    color: #fff;
    font-size: clamp(23px, 1.75vw, 29px);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.08;
    text-shadow: 0 3px 18px rgba(2, 6, 23, .42);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.region-showcase-card__description {
    display: -webkit-box;
    max-width: calc(100% - 28px);
    margin-top: 9px;
    overflow: hidden;
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.region-showcase-card__footer {
    display: flex;
    min-height: 40px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.region-showcase-card__tags {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px;
    overflow: hidden;
}

.region-showcase-card__tag {
    display: inline-flex;
    min-height: 29px;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 9px;
    background: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .86);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    backdrop-filter: blur(9px);
}

.region-showcase-card__arrow {
    position: relative;
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 8px 22px rgba(2, 6, 23, .2);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .25s ease;
}

.region-showcase-card__arrow::before {
    width: 18px;
    height: 18px;
    background: #172033;
    content: "";
    -webkit-mask: url("../../map/icons/chevron-down.svg") center / contain no-repeat;
    mask: url("../../map/icons/chevron-down.svg") center / contain no-repeat;
    transform: rotate(-90deg);
}

body.page-site-redesign.page-regions-index .region-showcase-card:hover,
body.page-site-redesign.page-regions-index .region-showcase-card:focus-within {
    border-color: rgba(255, 103, 29, .34) !important;
    box-shadow: 0 22px 50px rgba(15, 23, 42, .2) !important;
    transform: translate3d(0, -5px, 0);
}

.region-showcase-card:hover .region-showcase-card__image,
.region-showcase-card:focus-within .region-showcase-card__image {
    filter: saturate(1.07) contrast(1.03);
    transform: scale(1.055);
}

.region-showcase-card:hover .region-showcase-card__shade,
.region-showcase-card:focus-within .region-showcase-card__shade { opacity: .9; }

.region-showcase-card:hover .region-showcase-card__arrow,
.region-showcase-card:focus-within .region-showcase-card__arrow {
    background: #ff671d;
    transform: translateX(3px);
}

.region-showcase-card:hover .region-showcase-card__arrow::before,
.region-showcase-card:focus-within .region-showcase-card__arrow::before { background: #fff; }

.region-showcase-card__link:focus-visible {
    outline: 3px solid #ff671d;
    outline-offset: -5px;
    border-radius: 18px;
}

html[data-theme="dark"] .regions-showcase-intro__title { color: #f8fafc; }
html[data-theme="dark"] .regions-showcase-intro__description { color: #a8b3c5; }

@media (max-width: 1100px) {
    body.page-site-redesign.page-regions-index .regions-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.page-site-redesign.page-regions-index .region-showcase-card { height: 340px; }
}

@media (max-width: 680px) {
    body.page-site-redesign.page-regions-index #main-content > main.regions-showcase-page {
        width: calc(100% - 24px) !important;
        padding-top: 24px !important;
        padding-bottom: 38px !important;
    }

    .regions-showcase-section + .regions-showcase-section { margin-top: 42px; }
    .regions-showcase-intro { margin-bottom: 20px; }
    .regions-showcase-intro__title { font-size: 29px; }
    .regions-showcase-intro__description { margin-top: 9px; font-size: 14px; line-height: 1.5; }

    body.page-site-redesign.page-regions-index .regions-index-grid {
        grid-template-columns: 1fr;
        gap: 16px !important;
    }

    body.page-site-redesign.page-regions-index .region-showcase-card {
        height: min(78vw, 338px);
        min-height: 300px;
        border-radius: 16px;
    }

    .region-showcase-card__content { padding: 20px 15px 14px; }
    .region-showcase-card__title { font-size: 23px; }
    .region-showcase-card__description { font-size: 13px; }
    .region-showcase-card__tag:nth-child(n + 4) { display: none; }
}

body.page-site-redesign.page-route-detail .route-detail-page,
body.page-site-redesign.page-post-detail .post-detail-layout {
    margin-top: 18px !important;
}

body.page-site-redesign.page-route-detail :where(
    .route-detail-card,
    .route-guide-card,
    .route-detail-map-card,
    .route-detail-section,
    .route-comments,
    .route-related
),
body.page-site-redesign.page-post-detail :where(
    .article-hero-card,
    .article-content-card,
    .article-section,
    .article-route-info-card
) {
    border-color: var(--tt-shell-line) !important;
    box-shadow: 0 10px 32px rgba(15, 23, 42, .05) !important;
}

/* Controls use the same restrained treatment as the finder on the home page. */
body.page-site-redesign:not(.page-home-redesign) :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
) {
    border-color: var(--tt-shell-line) !important;
    background-color: #fff !important;
    color: var(--tt-shell-ink) !important;
}

body.page-site-redesign:not(.page-home-redesign) :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
):focus {
    border-color: rgba(255, 103, 29, .58) !important;
    box-shadow: 0 0 0 3px rgba(255, 103, 29, .1) !important;
}

/* The footer is the deliberate dark closing band used on the home page. */
body.page-site-redesign:not(.page-home-redesign) .site-footer {
    margin-top: 56px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
    background: #07111d;
}

body.page-site-redesign:not(.page-home-redesign) .site-footer__inner {
    width: min(100%, var(--tt-shell-width));
    border: 0;
    border-radius: 0;
    background: #07111d;
    color: #fff;
    box-shadow: none;
}

body.page-site-redesign:not(.page-home-redesign) .site-footer__logo img:last-child {
    filter: brightness(0) invert(1);
}

body.page-site-redesign:not(.page-home-redesign) .site-footer__brand h2,
body.page-site-redesign:not(.page-home-redesign) .site-footer__nav h3 {
    color: #fff;
}

body.page-site-redesign:not(.page-home-redesign) .site-footer__brand p,
body.page-site-redesign:not(.page-home-redesign) .site-footer__nav a {
    color: #9fb0c3;
}

body.page-site-redesign:not(.page-home-redesign) .site-footer__nav,
body.page-site-redesign:not(.page-home-redesign) .site-footer__bottom {
    border-color: rgba(255, 255, 255, .09);
}

body.page-site-redesign:not(.page-home-redesign) .site-footer__ghost-link {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

body.page-site-redesign:not(.page-home-redesign) .site-footer__bottom {
    color: #74869a;
}

/* Explicit dark mode stays dark; light mode never receives dark content panels. */
html[data-theme="dark"] body.page-site-redesign {
    --tt-shell-bg: #07111d;
    --tt-shell-surface: #0e1a28;
    --tt-shell-surface-soft: #132130;
    --tt-shell-ink: #edf3f8;
    --tt-shell-copy: #aebdca;
    --tt-shell-muted: #78899b;
    --tt-shell-line: #263647;
}

html[data-theme="dark"] body.page-site-redesign:not(.page-home-redesign) {
    background: var(--tt-shell-bg) !important;
}

html[data-theme="dark"] body.page-site-redesign:not(.page-home-redesign) > .site-topbar {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(11, 23, 36, .95) !important;
}

html[data-theme="dark"] body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-primary-tabs {
    border-color: rgba(148, 163, 184, .16) !important;
    background: rgba(255, 255, 255, .06) !important;
}

html[data-theme="dark"] body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-primary-tabs a {
    color: #c8d3df !important;
}

html[data-theme="dark"] body.page-site-redesign:not(.page-home-redesign) > .site-topbar .site-primary-tabs a.bg-white {
    background: rgba(255, 255, 255, .12) !important;
    color: #ff9a62 !important;
}

@media (max-width: 1023px) {
    body.page-site-redesign:not(.page-home-redesign) :where(
        .route-catalog-page,
        .journal-feed-page,
        .route-collections-page,
        .route-detail-page,
        .profile-page,
        .post-detail-layout,
        .articles-archive-page,
        .search-results-page,
        .all-albums-page,
        .album-detail-page,
        .official-routes-page,
        .seo-landing-page,
        .legal-document-page,
        .moderation-board-page,
        .community-page,
        .community-detail-page,
        .community-settings-page,
        .discovery-page
    ),
    body.page-site-redesign.page-regions-index #main-content > main,
    body.page-site-redesign.page-region-detail #main-content > main {
        width: calc(100% - 24px) !important;
    }
}

@media (max-width: 767px) {
    body.page-site-redesign:not(.page-home-redesign) {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }

    body.page-site-redesign:not(.page-home-redesign):not(.page-mobile-no-topbar) > .site-topbar {
        top: calc(8px + env(safe-area-inset-top, 0px)) !important;
        width: min(calc(100vw - 20px), 430px) !important;
        height: 60px !important;
        min-height: 60px !important;
        border-radius: 16px !important;
        padding: 0 12px !important;
    }

    body.page-site-redesign:not(.page-home-redesign) > .site-topbar :where(
        .site-logo-mark,
        .site-logo-img
    ) {
        width: 132px !important;
        max-width: 132px !important;
    }

    body.page-site-redesign:not(.page-home-redesign) :where(
        .route-catalog-page,
        .journal-feed-page,
        .route-collections-page,
        .route-detail-page,
        .profile-page,
        .post-detail-layout,
        .articles-archive-page,
        .search-results-page,
        .all-albums-page,
        .album-detail-page,
        .official-routes-page,
        .seo-landing-page,
        .legal-document-page,
        .moderation-board-page,
        .community-page,
        .community-detail-page,
        .community-settings-page,
        .discovery-page
    ),
    body.page-site-redesign.page-regions-index #main-content > main,
    body.page-site-redesign.page-region-detail #main-content > main {
        width: calc(100% - 12px) !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body.page-site-redesign:not(.page-home-redesign) .journal-hero {
        border-radius: 16px 16px 0 0 !important;
    }

    body.page-site-redesign:not(.page-home-redesign) .journal-toolbar {
        border-radius: 0 0 16px 16px !important;
    }

    body.page-site-redesign:not(.page-home-redesign) .site-footer {
        margin-top: 36px;
    }

    body.page-site-redesign:not(.page-home-redesign) .site-footer__nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-site-redesign:not(.page-home-redesign) .site-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    body.page-site-redesign:not(.page-home-redesign) .site-footer__bottom span:last-child {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-site-redesign:not(.page-home-redesign) :where(
        .route-showcase-card,
        .regions-index-grid > article,
        .route-collection-card,
        .journal-card,
        .profile-route-card,
        [data-feed-card]
    ) {
        transition: none !important;
    }

    body.page-site-redesign.page-regions-index :where(
        .region-showcase-card,
        .region-showcase-card__image,
        .region-showcase-card__shade,
        .region-showcase-card__arrow
    ) {
        transition: none !important;
        transform: none !important;
    }
}


/* ---- css/components/telegram-updates-modal.css ---- */
.telegram-updates-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 20px;
}

.telegram-updates-modal[hidden] { display: none; }

.telegram-updates-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.telegram-updates-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(430px, calc(100vw - 32px));
    padding: 32px 30px 27px;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 28px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 28px 90px rgba(15, 23, 42, .3);
    color: #17253a;
    text-align: center;
    animation: telegram-updates-modal-in 220ms ease-out both;
}

.telegram-updates-modal__close {
    position: absolute;
    top: 13px;
    right: 14px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 11px;
    color: #8290a0;
    background: #f3f6f8;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease;
}

.telegram-updates-modal__close:hover,
.telegram-updates-modal__close:focus-visible { color: #e85f32; background: #fff0e8; }

.telegram-updates-modal__icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    place-items: center;
    border: 1px solid #bde8d4;
    border-radius: 18px;
    color: #159b69;
    background: #e8f8ef;
}

.telegram-updates-modal__icon svg { width: 30px; height: 30px; }

.telegram-updates-modal__eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #159b69;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.telegram-updates-modal__dialog h2 {
    margin: 0;
    color: #17253a;
    font-size: clamp(24px, 5vw, 30px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.telegram-updates-modal__dialog p {
    max-width: 350px;
    margin: 12px auto 22px;
    color: #718196;
    font-size: 13px;
    line-height: 1.55;
}

.telegram-updates-modal__cta,
.telegram-updates-modal__dismiss {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.telegram-updates-modal__cta {
    border: 1px solid #159b69;
    color: #fff;
    background: #159b69;
    box-shadow: 0 10px 22px rgba(21, 155, 105, .2);
}

.telegram-updates-modal__cta:hover,
.telegram-updates-modal__cta:focus-visible { background: #107e55; transform: translateY(-1px); }

.telegram-updates-modal__dismiss {
    margin-top: 9px;
    border: 1px solid transparent;
    color: #8390a0;
    background: transparent;
}

.telegram-updates-modal__dismiss:hover,
.telegram-updates-modal__dismiss:focus-visible { border-color: #e5eaee; color: #526276; background: #f7f9fa; }

html[data-theme="dark"] .telegram-updates-modal__dialog { border-color: rgba(148, 163, 184, .26); background: #172231; color: #f8fafc; }
html[data-theme="dark"] .telegram-updates-modal__dialog h2 { color: #f8fafc; }
html[data-theme="dark"] .telegram-updates-modal__dialog p { color: #afbdcd; }
html[data-theme="dark"] .telegram-updates-modal__close { color: #b4c0cf; background: #243244; }
html[data-theme="dark"] .telegram-updates-modal__close:hover,
html[data-theme="dark"] .telegram-updates-modal__close:focus-visible { color: #ff9a70; background: #3a2b2d; }
html[data-theme="dark"] .telegram-updates-modal__dismiss:hover,
html[data-theme="dark"] .telegram-updates-modal__dismiss:focus-visible { border-color: #35465b; color: #d5dfeb; background: #243244; }

@keyframes telegram-updates-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 520px) {
    .telegram-updates-modal { padding: 14px; }
    .telegram-updates-modal__dialog { padding: 28px 20px 21px; border-radius: 23px; }
}

@media (prefers-reduced-motion: reduce) {
    .telegram-updates-modal__dialog { animation: none; }
    .telegram-updates-modal__cta,
    .telegram-updates-modal__dismiss,
    .telegram-updates-modal__close { transition: none; }
}


/* ---- css/components/site-tabbar.css ---- */
/* Mobile primary navigation: floating tab bar + "Create" bottom sheet.
   Visible below 768px on every page that sets body.has-tt-tabbar (never on the map, which has its own chrome). */

.tt-tabbar,
.tt-sheet {
    --tt-tab-accent: #ff671d;
    --tt-tab-accent-strong: #e95612;
    --tt-tab-accent-soft: rgba(255, 103, 29, .13);
    --tt-tab-ink: #121922;
    --tt-tab-muted: #667085;
    --tt-tab-surface: rgba(255, 255, 255, .94);
    --tt-tab-solid: #ffffff;
    --tt-tab-border: rgba(18, 25, 34, .1);
    --tt-tab-shadow: 0 14px 36px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .06);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

html[data-theme="dark"] .tt-tabbar,
html[data-theme="dark"] .tt-sheet {
    --tt-tab-accent: #ff7a38;
    --tt-tab-accent-strong: #ff9460;
    --tt-tab-accent-soft: rgba(255, 122, 56, .18);
    --tt-tab-ink: #edf3fb;
    --tt-tab-muted: #98a8bd;
    --tt-tab-surface: rgba(18, 29, 46, .92);
    --tt-tab-solid: #101b2a;
    --tt-tab-border: rgba(255, 255, 255, .09);
    --tt-tab-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
}

/* ---------- Tab bar ---------- */

.tt-tabbar {
    display: none;
}

@media (max-width: 767px) {
    body.has-tt-tabbar .tt-tabbar {
        position: fixed;
        z-index: 100;
        left: 50%;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        display: flex;
        align-items: center;
        gap: 8px;
        width: min(calc(100% - 20px), 440px);
        transform: translateX(-50%);
        pointer-events: none;
        transition: transform .24s cubic-bezier(.22, 1, .36, 1), opacity .18s ease, visibility .24s;
    }

    body.has-tt-tabbar {
        padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    }

    /* Route and article pages: the tab bar owns the bottom while the hero is visible, then the page's own
       action bar takes over. */
    body.has-tt-tabbar:has(.route-mobile-action-bar.mobile-ux-after-hero) .tt-tabbar,
    body.has-tt-tabbar:has(.mobile-route-story-bar.mobile-ux-after-hero) .tt-tabbar,
    body.has-tt-tabbar.mobile-ux-past-hero .tt-tabbar {
        visibility: hidden;
        transform: translate(-50%, 24px);
        opacity: 0;
    }

    body.has-tt-tabbar.page-route-detail,
    body.has-tt-tabbar.page-post-detail {
        padding-bottom: 0;
    }

    /* Full-screen overlays live in other stacking contexts: step the bar aside instead of fighting z-index. */
    body.has-tt-tabbar.mobile-site-drawer-open .tt-tabbar,
    body.has-tt-tabbar.tt-mobile-app-prompt-open .tt-tabbar {
        visibility: hidden;
        opacity: 0;
    }

    body.has-tt-tabbar.tt-keyboard-open .tt-tabbar {
        visibility: hidden;
        transform: translate(-50%, 24px);
        opacity: 0;
    }

    body.has-tt-tabbar .site-scroll-to-top {
        left: auto;
        right: max(14px, env(safe-area-inset-right, 0px));
        bottom: calc(92px + env(safe-area-inset-bottom, 0px));
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }
}

/* Light capsule with five labelled destinations; the current one gets a tinted pill. */
.tt-tabbar__bar {
    pointer-events: auto;
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    min-width: 0;
    height: 62px;
    padding: 4px;
    border: 1px solid var(--tt-tab-border);
    border-radius: 31px;
    background: var(--tt-tab-surface);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .14), 0 1px 3px rgba(15, 23, 42, .06);
}

html[data-theme="dark"] .tt-tabbar__bar {
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .3);
}

#site-tabbar .tt-tabbar__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 0 1px;
    border: 0;
    border-radius: 27px;
    background: transparent;
    color: var(--tt-tab-muted);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: color .2s ease, background-color .2s ease;
}

#site-tabbar .tt-tabbar__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    transition: transform .2s ease;
}

#site-tabbar .tt-tabbar__icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#site-tabbar .tt-tabbar__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1.5px currentColor;
}

#site-tabbar .tt-tabbar__label {
    max-width: none;
    overflow: visible;
    color: inherit;
    font-size: clamp(11px, 2.9vw, 11.5px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.01em;
    text-overflow: clip;
    text-transform: none;
    white-space: nowrap;
}

#site-tabbar .tt-tabbar__item[aria-current="page"] {
    color: var(--tt-tab-accent-strong);
    background: var(--tt-tab-accent-soft);
}

#site-tabbar .tt-tabbar__item[aria-current="page"] .tt-tabbar__icon svg {
    stroke-width: 2.05;
}

#site-tabbar .tt-tabbar__item[aria-current="page"] .tt-tabbar__label {
    font-weight: 700;
}

#site-tabbar .tt-tabbar__item:active .tt-tabbar__icon {
    transform: scale(.88);
}

#site-tabbar .tt-tabbar__item:focus-visible {
    outline: 2px solid var(--tt-tab-accent);
    outline-offset: -2px;
}

#site-tabbar .tt-tabbar__item.app-tab-pending {
    opacity: .6;
}

/* Create: its own round button beside the capsule. The label is for screen readers only. */
#site-tabbar .tt-tabbar__create {
    pointer-events: auto;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: #ff671d;
    box-shadow: 0 10px 24px rgba(255, 90, 20, .4);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform .24s cubic-bezier(.34, 1.56, .64, 1), box-shadow .24s ease;
}

#site-tabbar .tt-tabbar__create svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

#site-tabbar .tt-tabbar__create .tt-tabbar__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

#site-tabbar .tt-tabbar__create:active {
    transform: scale(.92);
}

#site-tabbar .tt-tabbar__create[aria-expanded="true"] svg {
    transform: rotate(135deg);
}

#site-tabbar .tt-tabbar__create:focus-visible {
    outline: 3px solid rgba(255, 122, 56, .5);
    outline-offset: 3px;
}

@media (max-width: 359px) {
    body.has-tt-tabbar .tt-tabbar {
        gap: 8px;
    }

    #site-tabbar .tt-tabbar__create {
        width: 48px;
        height: 48px;
    }

    .tt-tabbar__bar {
        height: 58px;
        padding: 4px;
    }

    #site-tabbar .tt-tabbar__label {
        letter-spacing: -.02em;
    }
}

/* ---------- Create sheet ---------- */

.tt-sheet {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    visibility: hidden;
}

.tt-sheet[hidden] {
    display: none;
}

.tt-sheet.is-open {
    visibility: visible;
}

.tt-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 15, 24, .5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .26s ease;
}

.tt-sheet.is-open .tt-sheet__backdrop {
    opacity: 1;
}

.tt-sheet__panel {
    position: relative;
    width: min(100%, 520px);
    max-height: 92dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: 28px 28px 0 0;
    color: var(--tt-tab-ink);
    background: var(--tt-tab-solid);
    box-shadow: 0 -18px 50px rgba(9, 15, 24, .28);
    transform: translateY(100%);
    transition: transform .34s cubic-bezier(.22, 1, .36, 1);
    outline: none;
}

.tt-sheet.is-open .tt-sheet__panel {
    transform: translateY(var(--tt-sheet-drag, 0px));
}

.tt-sheet.is-dragging .tt-sheet__panel {
    transition: none;
}

.tt-sheet__grip {
    width: 40px;
    height: 4px;
    margin: 4px auto 14px;
    border-radius: 99px;
    background: var(--tt-tab-border);
    touch-action: none;
}

.tt-sheet__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.tt-sheet__head h2 {
    margin: 0;
    color: var(--tt-tab-ink);
    font-size: 21px;
    font-weight: 850;
    line-height: 1.2;
}

.tt-sheet__head p {
    margin: 3px 0 0;
    color: var(--tt-tab-muted);
    font-size: 13px;
    line-height: 1.35;
}

.tt-sheet__close {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    color: var(--tt-tab-muted);
    background: var(--tt-tab-accent-soft);
    cursor: pointer;
}

.tt-sheet__close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.tt-sheet__list {
    display: grid;
    gap: 8px;
}

.tt-sheet a {
    text-decoration: none;
}

.tt-sheet__item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 11px 14px;
    border: 1px solid var(--tt-tab-border);
    border-radius: 18px;
    color: var(--tt-tab-ink);
    background: var(--tt-tab-solid);
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.tt-sheet__item:active {
    transform: scale(.985);
}

.tt-sheet__item:focus-visible,
.tt-sheet__chips a:focus-visible,
.tt-sheet__close:focus-visible {
    outline: 2px solid var(--tt-tab-accent);
    outline-offset: 2px;
}

.tt-sheet__item--primary {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, #ff7a38 0%, #f04e0b 100%);
    box-shadow: 0 12px 26px rgba(240, 78, 11, .32);
}

.tt-sheet__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    color: var(--tt-tab-accent-strong);
    background: var(--tt-tab-accent-soft);
}

.tt-sheet__item--primary .tt-sheet__icon {
    color: #fff;
    background: rgba(255, 255, 255, .2);
}

.tt-sheet__icon svg,
.tt-sheet__chips svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tt-sheet__icon svg {
    width: 23px;
    height: 23px;
}

.tt-sheet__copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.tt-sheet__copy strong {
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.25;
}

.tt-sheet__copy small {
    color: var(--tt-tab-muted);
    font-size: 12.5px;
    line-height: 1.35;
}

.tt-sheet__item--primary .tt-sheet__copy small {
    color: rgba(255, 255, 255, .86);
}

.tt-sheet__chevron {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .5;
}

.tt-sheet__divider {
    margin: 20px 2px 10px;
    color: var(--tt-tab-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.tt-sheet__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tt-sheet__chips a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--tt-tab-border);
    border-radius: 999px;
    color: var(--tt-tab-ink);
    font-size: 13.5px;
    font-weight: 700;
    -webkit-tap-highlight-color: transparent;
}

.tt-sheet__chips svg {
    width: 18px;
    height: 18px;
    color: var(--tt-tab-accent-strong);
}

.tt-sheet__perks {
    display: grid;
    gap: 12px;
    margin: 4px 0 20px;
    padding: 0;
    list-style: none;
}

.tt-sheet__perks li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    color: var(--tt-tab-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.tt-sheet__perks svg {
    width: 24px;
    height: 24px;
    padding: 4px;
    border-radius: 50%;
    color: var(--tt-tab-accent-strong);
    background: var(--tt-tab-accent-soft);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tt-sheet__actions {
    display: grid;
    gap: 10px;
}

.tt-sheet__btn {
    display: grid;
    place-items: center;
    min-height: 52px;
    padding: 0 20px;
    border: 1px solid var(--tt-tab-border);
    border-radius: 999px;
    color: var(--tt-tab-ink);
    font-size: 15.5px;
    font-weight: 800;
    -webkit-tap-highlight-color: transparent;
}

.tt-sheet__btn--primary {
    border-color: transparent;
    color: #fff;
    background: #ff671d;
    box-shadow: 0 10px 24px rgba(255, 90, 20, .32);
}

.tt-sheet__btn:focus-visible {
    outline: 2px solid var(--tt-tab-accent);
    outline-offset: 2px;
}

/* Map navigation list (no tab bar on the map, so the map toolbar opens this). */
.tt-sheet__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.tt-sheet__nav .tt-sheet__item {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    min-height: 58px;
    padding: 9px 12px;
}

.tt-sheet__nav .tt-sheet__icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.tt-sheet__nav .tt-sheet__icon svg {
    width: 20px;
    height: 20px;
}

.tt-sheet__nav .tt-sheet__copy strong {
    font-size: 14.5px;
}

/* Above the map's own menus (~10k), below its system dialogs (30k+). */
body.page-map .tt-sheet {
    z-index: 20000;
}

body.tt-sheet-open {
    overflow: hidden;
}

@media (min-width: 768px) {
    .tt-tabbar,
    .tt-sheet {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tt-sheet__panel,
    .tt-sheet__backdrop,
    #site-tabbar .tt-tabbar__icon,
    #site-tabbar .tt-tabbar__create,
    #site-tabbar .tt-tabbar__create svg {
        transition: none;
        animation: none;
    }
}

/* Pages with their own chrome at the bottom: messenger, collaborative room and editors keep the screen to themselves. */
body.page-messages .tt-tabbar,
body.messenger-embedded .tt-tabbar {
    display: none !important;
}


/* ---- css/components/cookie-notice.css ---- */
/* Cookie notice: shown until the visitor chooses; the choice is kept for a year. */

.tt-cookie {
    --tt-cookie-ink: #121922;
    --tt-cookie-muted: #5b6676;
    --tt-cookie-surface: rgba(255, 255, 255, .97);
    --tt-cookie-border: rgba(18, 25, 34, .1);
    --tt-cookie-accent: #ff671d;
    position: fixed;
    z-index: 120;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    left: 10px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 4px 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--tt-cookie-border);
    border-radius: 22px;
    color: var(--tt-cookie-ink);
    background: var(--tt-cookie-surface);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .22), 0 2px 8px rgba(15, 23, 42, .08);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 0;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .28s ease, transform .34s cubic-bezier(.22, 1, .36, 1);
}

.tt-cookie[hidden] {
    display: none;
}

.tt-cookie.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* The mobile tab bar occupies the bottom edge: sit just above it. */
body.has-tt-tabbar .tt-cookie {
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
}

.tt-cookie__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    color: #c2410c;
    background: rgba(255, 103, 29, .12);
}

.tt-cookie__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tt-cookie__body strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

.tt-cookie__body p {
    margin: 3px 0 0;
    color: var(--tt-cookie-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

.tt-cookie__body a {
    color: #c2410c;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tt-cookie__actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.tt-cookie__button {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--tt-cookie-border);
    border-radius: 999px;
    color: var(--tt-cookie-ink);
    background: transparent;
    font: inherit;
    font-size: 13.5px;
    font-weight: 750;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s ease, transform .2s ease;
}

.tt-cookie__button:hover {
    background: rgba(18, 25, 34, .05);
}

.tt-cookie__button:active {
    transform: scale(.98);
}

.tt-cookie__button--primary {
    border-color: transparent;
    color: #fff;
    background: var(--tt-cookie-accent);
    box-shadow: 0 8px 20px rgba(255, 90, 20, .3);
}

.tt-cookie__button--primary:hover {
    background: #f25a10;
}

.tt-cookie__button:focus-visible,
.tt-cookie__body a:focus-visible {
    outline: 2px solid var(--tt-cookie-accent);
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .tt-cookie {
        right: auto;
        bottom: 20px;
        left: 20px;
        width: 460px;
    }

    body.has-tt-tabbar .tt-cookie {
        bottom: 20px;
    }
}

html[data-theme="dark"] .tt-cookie {
    --tt-cookie-ink: #edf3fb;
    --tt-cookie-muted: #a9b6c8;
    --tt-cookie-surface: rgba(16, 27, 42, .97);
    --tt-cookie-border: rgba(255, 255, 255, .12);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
}

html[data-theme="dark"] .tt-cookie__icon {
    color: #ff9460;
    background: rgba(255, 122, 56, .18);
}

html[data-theme="dark"] .tt-cookie__body a {
    color: #ff9460;
}

html[data-theme="dark"] .tt-cookie__button:hover {
    background: rgba(255, 255, 255, .08);
}

@media (prefers-reduced-motion: reduce) {
    .tt-cookie,
    .tt-cookie__button {
        transition: none;
    }
}

/* Phones: a compact strip above the tab bar instead of half the screen. */
@media (max-width: 640px) {
    .tt-cookie {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        padding: 12px 14px;
        border-radius: 18px;
    }

    .tt-cookie__icon {
        display: none;
    }

    .tt-cookie__body strong {
        font-size: 14px;
    }

    .tt-cookie__body p {
        font-size: 12.5px;
        line-height: 1.4;
    }

    .tt-cookie__actions {
        margin-top: 8px;
    }

    .tt-cookie__button {
        min-height: 40px;
        font-size: 13px;
    }
}

.tt-cookie__body a {
    display: inline-block;
    padding: 6px 0;
    margin: -6px 0;
}