/* ══════════════════════════════════════════════
   Trail Pathfinder – Styles
   ══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Screen-reader only (accessible but visually hidden) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Breadcrumb navigation ── */
.breadcrumb-nav {
    padding: .5rem 0;
    font-size: .8rem;
    color: var(--color-muted);
}
.breadcrumb-nav ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: 0;
    margin: 0;
}
.breadcrumb-nav li { display: flex; align-items: center; gap: .25rem; }
.breadcrumb-nav li + li::before { content: "/"; color: var(--color-border); }
.breadcrumb-nav a { color: var(--color-primary); text-decoration: none; }
.breadcrumb-nav a:hover { text-decoration: underline; }
.breadcrumb-nav .current { color: var(--color-text); }

:root {
    --color-primary:       #2d6a4f;
    --color-primary-light: #40916c;
    --color-primary-dark:  #1b4332;
    --color-accent:        #e76f51;
    --color-bg:            #f8f9fa;
    --color-surface:       #ffffff;
    --color-text:          #212529;
    --color-muted:         #6c757d;
    --color-border:        #dee2e6;
    --color-easy:          #28a745;
    --color-moderate:      #e6a817;
    --color-hard:          #dc3545;
    --color-expert:        #6f42c1;
    --radius:              6px;
    --radius-lg:           12px;
    --shadow:              0 2px 8px rgba(0,0,0,.12);
    --shadow-lg:           0 4px 20px rgba(0,0,0,.18);
    --sidebar-w:           340px;
    --drawer-w:            380px;
    --navbar-h:            56px;
    --bottom-nav-h:        60px;
    --safe-top:            env(safe-area-inset-top, 0px);
    --safe-bottom:         env(safe-area-inset-bottom, 0px);
    --transition:          .25s ease;
    --sheet-collapsed-h:   72px;
    --sheet-half-h:        50vh;
}

/* ═══════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════ */
[data-theme="dark"] {
    --color-bg:            #0f1117;
    --color-surface:       #1a1d26;
    --color-text:          #e4e4e7;
    --color-muted:         #71717a;
    --color-border:        #2a2d36;
    --color-primary:       #40916c;
    --color-primary-light: #52b788;
    --color-primary-dark:  #2d6a4f;
    --shadow:              0 2px 8px rgba(0,0,0,.35);
    --shadow-lg:           0 4px 20px rgba(0,0,0,.45);
}
[data-theme="dark"] body {
    color: var(--color-text);
    background: var(--color-bg);
}
/* Dark mode: navbar keeps its gradient */
[data-theme="dark"] .navbar {
    background: linear-gradient(135deg, #0a1a12 0%, #1b4332 100%);
}
/* Dark mode: cards, panels, form inputs */
[data-theme="dark"] .sf-panel,
[data-theme="dark"] .db-badge-card,
[data-theme="dark"] .db-trail-card,
[data-theme="dark"] .admin-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--color-muted);
}
/* Dark mode: badges */
[data-theme="dark"] .badge {
    background: rgba(255,255,255,.08);
    color: var(--color-text);
}
/* Dark mode: map tiles */
[data-theme="dark"] .leaflet-tile-pane {
    filter: brightness(0.8) contrast(1.1);
}
/* Dark mode: landing page sections */
[data-theme="dark"] .lp-stats {
    background: var(--color-surface);
}
[data-theme="dark"] .lp-section {
    background: var(--color-bg);
}
[data-theme="dark"] .lp-mf-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .lp-activity-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .lp-step {
    background: var(--color-surface);
}
/* Dark mode: detail page meta items */
[data-theme="dark"] .td-meta-item {
    background: var(--color-bg);
    border-color: var(--color-border);
}
/* Dark mode: mobile menu */
[data-theme="dark"] .mobile-menu {
    background: var(--color-surface);
}
[data-theme="dark"] .mobile-menu-link {
    color: var(--color-text);
}
/* Dark mode: bottom nav */
[data-theme="dark"] .bottom-nav {
    background: var(--color-surface);
    border-top-color: var(--color-border);
}
/* Dark mode: submit/edit form panel */
[data-theme="dark"] .sf-panel-scroll {
    background: var(--color-bg);
}
/* Dark mode: practical info section */
[data-theme="dark"] .sf-practical-toggle {
    background: var(--color-surface);
}
/* Dark mode: dashboard */
[data-theme="dark"] .db-trail-item {
    border-color: var(--color-border);
}
/* Dark mode: chat panel */
[data-theme="dark"] .chat-panel {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .chat-msg-body {
    background: var(--color-bg);
}
[data-theme="dark"] .chat-input {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* Navbar chat button */
.navbar-chat-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    cursor: pointer;
    transition: background .2s;
    padding: 0;
    flex-shrink: 0;
}
.navbar-chat-btn:hover { background: rgba(255,255,255,.22); }
.navbar-chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: var(--color-accent);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}

/* Theme toggle button */
.navbar-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    cursor: pointer;
    transition: background .2s;
    padding: 0;
    flex-shrink: 0;
}
.navbar-theme-toggle:hover {
    background: rgba(255,255,255,.22);
}
/* Show moon in light mode, sun in dark mode */
.navbar-theme-toggle .icon-sun { display: none; }
.navbar-theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .navbar-theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .navbar-theme-toggle .icon-moon { display: none; }

html, body { height: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════
   NAVBAR  (PWA / mobile-first)
   ═══════════════════════════════════════════════ */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    color: #fff;
    padding: 0 1rem;
    padding-top: var(--safe-top);
    height: calc(var(--navbar-h) + var(--safe-top));
    box-shadow: 0 1px 8px rgba(0,0,0,.15);
    z-index: 1100;
    flex-shrink: 0;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
}
.navbar a { color: #fff; text-decoration: none; }
.navbar a:hover { text-decoration: none; }

/* Brand / logo */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -.02em;
    white-space: nowrap;
    flex-shrink: 0;
}
.navbar-logo { flex-shrink: 0; height: 28px; width: auto; }

/* Center nav links (desktop) */
.navbar-center {
    display: flex;
    align-items: center;
    gap: .2rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.navbar-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .45rem .6rem;
    font-size: .78rem;
    font-weight: 600;
    border-radius: 20px;
    color: rgba(255,255,255,.75) !important;
    transition: all var(--transition);
    white-space: nowrap;
}
.navbar-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,.12);
}
.navbar-link.active {
    color: #fff !important;
    background: rgba(255,255,255,.18);
}
.navbar-link svg { opacity: .8; flex-shrink: 0; }

/* Right side */
.navbar-right {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}
.navbar-auth-link {
    font-size: .85rem;
    font-weight: 600;
    padding: .35rem .6rem;
    color: rgba(255,255,255,.85) !important;
    transition: color var(--transition);
}
.navbar-auth-link:hover { color: #fff !important; }
.navbar-register-btn {
    display: inline-flex;
    align-items: center;
    padding: .4rem .85rem;
    background: rgba(255,255,255,.18);
    border-radius: 20px;
    font-size: .82rem;
    font-weight: 700;
    color: #fff !important;
    transition: background var(--transition);
    border: 1px solid rgba(255,255,255,.2);
}
.navbar-register-btn:hover { background: rgba(255,255,255,.28); }

/* User dropdown */
.navbar-user { position: relative; }
.navbar-user-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 24px;
    padding: .3rem .65rem .3rem .3rem;
    color: #fff;
    font-size: .82rem;
    cursor: pointer;
    transition: background var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.navbar-user-btn:hover { background: rgba(255,255,255,.22); }
.navbar-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 800;
    flex-shrink: 0;
}
.navbar-avatar--lg {
    width: 40px; height: 40px;
    font-size: 1rem;
}
.navbar-username {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.navbar-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
    min-width: 180px;
    display: none;
    z-index: 1200;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.06);
}
.navbar-dropdown.open { display: block; }
.navbar-dropdown a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1rem;
    color: var(--color-text) !important;
    font-size: .88rem;
    font-weight: 500;
    transition: background .15s;
}
.navbar-dropdown a:hover { background: #f1f3f5; }
.navbar-dropdown a svg { color: var(--color-muted); flex-shrink: 0; }
.navbar-dropdown-danger { color: var(--color-hard) !important; }
.navbar-dropdown-danger svg { color: var(--color-hard) !important; }

/* Hamburger button (mobile only) */
.navbar-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 8px;
    transition: background var(--transition);
}
.navbar-hamburger:hover { background: rgba(255,255,255,.12); }
.navbar-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all .3s ease;
    transform-origin: center;
}
.navbar-hamburger.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.navbar-hamburger.active span:nth-child(2) { opacity: 0; }
.navbar-hamburger.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}


/* ═══════════════════════════════════════════════
   MOBILE SLIDE-OUT MENU
   ═══════════════════════════════════════════════ */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1300;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.mobile-overlay.open { opacity: 1; pointer-events: auto; }

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: var(--color-surface);
    z-index: 1400;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0,0,0,.15);
    padding-top: var(--safe-top);
}
.mobile-menu.open { transform: translateX(0); }

.mobile-menu-header {
    padding: 1.2rem 1rem .8rem;
    border-bottom: 1px solid #f0f0f0;
}
.mobile-menu-user {
    display: flex;
    align-items: center;
    gap: .7rem;
}
.mobile-menu-user strong {
    display: block;
    font-size: .95rem;
}
.mobile-menu-user small {
    display: block;
    font-size: .78rem;
    color: var(--color-muted);
}

.mobile-menu-nav {
    flex: 1;
    overflow-y: auto;
    padding: .5rem 0;
    -webkit-overflow-scrolling: touch;
}
.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem 1.2rem;
    font-size: .95rem;
    font-weight: 500;
    color: var(--color-text) !important;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
    min-height: 48px; /* touch target */
}
.mobile-menu-link:hover { background: #f1f3f5; text-decoration: none; }
.mobile-menu-link svg { color: var(--color-muted); flex-shrink: 0; }
.mobile-menu-link--danger { color: var(--color-hard) !important; }
.mobile-menu-link--danger svg { color: var(--color-hard) !important; }
.mobile-menu-divider {
    height: 1px;
    background: #f0f0f0;
    margin: .3rem 1rem;
}
.mobile-menu-footer {
    padding: .8rem 1rem;
    padding-bottom: calc(.8rem + var(--safe-bottom));
    border-top: 1px solid #f0f0f0;
    text-align: center;
}
.mobile-menu-footer small {
    font-size: .72rem;
    color: var(--color-muted);
}

body.menu-open { overflow: hidden; }


/* ═══════════════════════════════════════════════
   BOTTOM NAVIGATION BAR  (mobile PWA)
   ═══════════════════════════════════════════════ */
.bottom-nav {
    display: none; /* shown on mobile via media query */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--bottom-nav-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
    z-index: 1050;
    align-items: center;
    justify-content: space-around;
}
.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    padding: .4rem 0;
    color: var(--color-muted) !important;
    font-size: .62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    transition: color var(--transition);
    -webkit-tap-highlight-color: transparent;
    text-decoration: none !important;
    min-height: 48px;
    position: relative;
}
.bottom-nav-item:hover { text-decoration: none !important; }
.bottom-nav-item.active {
    color: var(--color-primary) !important;
}
.bottom-nav-item.active svg { stroke: var(--color-primary); }
.bottom-nav-item--add {
    position: relative;
}
.bottom-nav-item--add svg {
    background: var(--color-primary);
    color: #fff;
    stroke: #fff;
    border-radius: 50%;
    padding: 4px;
    width: 32px;
    height: 32px;
    box-shadow: 0 2px 8px rgba(45,106,79,.3);
    margin-top: -8px;
}
.bottom-nav-item--add.active svg {
    stroke: #fff;
    background: var(--color-primary-dark);
}


/* ═══════════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════════ */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Footer (hidden on map pages for full-screen) ── */
.mode-world .footer,
.mode-filtered .footer { display: none; }

/* ── Dark gradient footer ─────────────────── */
.footer.footer-dark {
    background: linear-gradient(135deg, #0f1117 0%, #1a2332 100%);
    color: #a8b2c1;
    padding: 1.2rem 2rem .8rem;
    flex-shrink: 0;
    border-top: none;
}
.footer.footer-dark a { color: #c8cdd5; text-decoration: none; }
.footer.footer-dark a:hover { color: #fff; text-decoration: none; }
.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Top columns: brand | nav | support ───── */
.footer-columns {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
.footer-col-brand {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.footer-col-title {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #555;
    margin-bottom: .1rem;
}
.footer-brand-row {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.footer-brand-name {
    font-size: .95rem;
    font-weight: 700;
    color: #e4e8ee;
}
.footer-logo { height: 22px; width: auto; }
.footer-tagline {
    font-size: .72rem;
    color: #555;
}

/* Nav links — 2-col grid */
.footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .1rem .8rem;
}
.footer-nav a {
    font-size: .78rem;
    font-weight: 500;
    color: #a8b2c1;
    position: relative;
    transition: color .2s;
    width: fit-content;
}
.footer-nav a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--color-accent, #e76f51);
    transition: width .25s;
}
.footer-nav a:hover { color: #fff; }
.footer-nav a:hover::after { width: 100%; }

/* Social icons */
.footer-social {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.1);
    transition: transform .2s, background .2s;
}
.footer-social-link:hover {
    transform: scale(1.1);
    background: rgba(255,255,255,.2);
}
.footer-social-coffee { color: #ff813f; }

/* Coffee link fallback (shown when no QR images) */
.footer-coffee-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    color: #ff813f;
    font-weight: 500;
    transition: color .2s;
}
.footer-coffee-link:hover { color: #ffaa7f; }

/* QR codes (only rendered when images exist) */
.footer-qr-row {
    display: flex;
    gap: .75rem;
}
.footer-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
}
.footer-qr img {
    width: 80px;
    height: 80px;
    border-radius: var(--radius);
    object-fit: cover;
}
.footer-qr span {
    font-size: .65rem;
    color: #71717a;
    font-weight: 500;
}

/* Divider */
.footer-divider {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,.08);
    margin: .7rem 0 .5rem;
}

/* ── Bottom bar: single compact row ───────── */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.footer-stats-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(255,255,255,.06);
    padding: .2rem .6rem;
    border-radius: 20px;
    font-size: .68rem;
    color: #a8b2c1;
}
.footer-stats-dot { color: #555; }
.footer-dev {
    display: flex;
    align-items: center;
}
.footer-dev-link {
    display: inline-block;
    transition: opacity .2s;
}
.footer-dev-link:hover { opacity: .8; }
.footer-dev-img {
    height: 18px;
    width: auto;
    display: block;
    filter: brightness(0.8);
}
.footer-copy {
    font-size: .65rem;
    color: #555;
    margin: 0;
}

/* ── Footer responsive ────────────────────── */
@media (max-width: 768px) {
    .footer.footer-dark { padding: 1rem .75rem .7rem; }
    .footer-columns {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    .footer-col-brand { grid-column: 1 / -1; }
    .footer-bottom { justify-content: center; text-align: center; }
    .footer-qr img { width: 70px; height: 70px; }
}
@media (max-width: 480px) {
    .footer-columns { grid-template-columns: 1fr; gap: .75rem; }
    .footer-col-brand { text-align: center; align-items: center; }
    .footer-nav { align-items: center; }
    .footer-social { justify-content: center; }
    .footer-qr-row { justify-content: center; }
    .footer-bottom { flex-direction: column; gap: .4rem; }
}


/* ═══════════════════════════════════════════════
   NAVBAR / NAV RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .navbar { padding: 0 .7rem; }
    .navbar-center { display: none; }
    .navbar-auth-link { display: none; }
    .navbar-register-btn { display: none; }
    .navbar-username { display: none; }
    .navbar-hamburger { display: flex; }
    .navbar-user-btn svg:last-child { display: none; }

    /* Show bottom nav on non-fullscreen pages */
    .bottom-nav { display: flex; }

    /* Hide footer on mobile – bottom nav handles navigation */
    .footer { display: none; }

    /* Hide bottom nav on fullscreen map/navigate modes */
    .mode-world .bottom-nav,
    .mode-filtered .bottom-nav,
    .mode-navigate .bottom-nav,
    .mode-submit .bottom-nav { display: none; }

    /* Add bottom padding for pages with bottom nav */
    .mode-dashboard .main-content,
    .mode-admin .main-content,
    .mode-auth .main-content,
    .mode-detail .main-content {
        padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
    }

    .footer { padding-bottom: calc(1.5rem + var(--bottom-nav-h) + var(--safe-bottom)); }

    .mode-world .footer,
    .mode-filtered .footer,
    .mode-navigate .footer { display: none; }
}

@media (min-width: 769px) {
    .navbar-hamburger { display: none !important; }
    .mobile-menu { display: none !important; }
    .mobile-overlay { display: none !important; }
    .bottom-nav { display: none !important; }
}


/* ══════════════════════════════════════════════
   MAP LAYOUT
   ══════════════════════════════════════════════ */
.map-container {
    flex: 1;
    display: flex;
    position: relative;
    overflow: hidden;
}
.map-fullscreen {
    position: relative;
}
.map-canvas {
    flex: 1;
    min-height: 0;
    z-index: 1;
}


/* ══════════════════════════════════════════════
   FLOATING FILTERS  (World view)
   ══════════════════════════════════════════════ */
.floating-filters {
    position: absolute;
    top: .8rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: .5rem .6rem;
    display: flex;
    gap: .4rem;
    align-items: center;
    max-width: 96%;
}
.ff-search {
    width: 180px;
    padding: .4rem .6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .85rem;
    outline: none;
}
.ff-search:focus { border-color: var(--color-primary); }
.ff-select {
    padding: .35rem .4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .82rem;
    background: #fff;
    cursor: pointer;
}
.ff-radius { width: 75px; }
.ff-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .38rem .6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    font-size: .82rem;
    cursor: pointer;
    color: var(--color-text);
    transition: all var(--transition);
    white-space: nowrap;
}
.ff-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ff-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* ── Map status badge (trail count) ──────────── */
.map-status {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(0,0,0,.7);
    color: #fff;
    font-size: .8rem;
    padding: .3rem .8rem;
    border-radius: 20px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
}
.map-status.visible { opacity: 1; }


/* ══════════════════════════════════════════════
   SIDEBAR  (Filtered view)
   ══════════════════════════════════════════════ */

/* ── Bottom-sheet handle (hidden on desktop) ── */
.sb-sheet-handle { display: none; }

/* ── Styles (applied via mobile media query) ── */
.sb-sheet-handle-bar {
    width: 36px; height: 4px;
    background: #ccc; border-radius: 2px;
    margin: .5rem auto .4rem;
}
.sb-sheet-peek {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 0 .8rem .5rem;
}
.sb-sheet-count {
    font-size: .85rem; font-weight: 600;
    color: var(--color-text);
}
.sb-sheet-filter-btn {
    padding: .3rem .8rem;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    background: #fff;
    color: var(--color-primary);
    font-size: .82rem; font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.sb-sheet-filter-btn:hover {
    background: var(--color-primary);
    color: #fff;
}

.map-sidebar {
    width: var(--sidebar-w);
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 10px rgba(0,0,0,.08);
    z-index: 2;
    overflow: hidden;
}

/* Sidebar sections */
.sb-section { padding: .7rem .8rem; border-bottom: 1px solid #f0f0f0; }
.sb-search {
    width: 100%;
    padding: .5rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .9rem;
}
.sb-search:focus { outline: none; border-color: var(--color-primary); }
.sb-filters { padding: .5rem .8rem; }
.sb-row {
    display: flex;
    gap: .5rem;
    margin-bottom: .4rem;
    align-items: flex-end;
}
.sb-field { flex: 1; }
.sb-field label {
    display: block;
    font-size: .72rem;
    color: var(--color-muted);
    margin-bottom: .15rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sb-field select,
.sb-radius {
    width: 100%;
    padding: .35rem .5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .85rem;
    background: #fff;
}

/* Near-me button in sidebar */
.btn-nearme {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .4rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    font-size: .85rem;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-nearme:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-nearme.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.sb-radius { width: 90px; flex-shrink: 0; }

/* Results header */
.sb-results-header {
    padding: .4rem .8rem;
    font-size: .8rem;
    color: var(--color-muted);
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.spinner {
    width: 14px; height: 14px;
    border: 2px solid #e9ecef;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    display: none;
}
.spinner.show {
    display: block;
    animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Trail list */
.sb-trail-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.sb-trail-list .text-muted {
    padding: 1rem .8rem;
    font-size: .85rem;
}

/* Trail cards */
.trail-card {
    padding: .65rem .8rem;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background .15s;
}
.trail-card:hover { background: #f8f9fa; }
.trail-card.active { background: #e8f5e9; border-left: 3px solid var(--color-primary); }
.trail-card h4 {
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: .2rem;
    line-height: 1.3;
}
.trail-card .tc-meta {
    font-size: .78rem;
    color: var(--color-muted);
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}
.trail-card .tc-location {
    font-size: .75rem;
    color: var(--color-muted);
    margin-top: .15rem;
}


/* ══════════════════════════════════════════════
   TRAIL DRAWER  (slide-in panel on trail click)
   ══════════════════════════════════════════════ */
.trail-drawer {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--drawer-w);
    height: 100%;
    background: var(--color-surface);
    box-shadow: -4px 0 16px rgba(0,0,0,.15);
    z-index: 1050;
    transform: translateX(100%);
    transition: transform var(--transition);
    overflow-y: auto;
    overflow-x: hidden;
}
.trail-drawer.open {
    transform: translateX(0);
}
.drawer-close {
    position: absolute;
    top: .5rem;
    right: .7rem;
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: var(--color-muted);
    z-index: 10;
    line-height: 1;
    padding: .2rem;
}
.drawer-close:hover { color: var(--color-text); }
.drawer-body { padding: 1rem 1.1rem 1.5rem; }
.drawer-body h2 {
    font-size: 1.15rem;
    margin-bottom: .5rem;
    padding-right: 2rem;
    line-height: 1.3;
}

/* Drawer stats row */
.drawer-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .7rem 0;
}
.drawer-stat {
    background: #f1f3f5;
    border-radius: var(--radius);
    padding: .35rem .6rem;
    text-align: center;
    flex: 1;
    min-width: 70px;
}
.drawer-stat .val { font-size: 1rem; font-weight: 700; display: block; }
.drawer-stat .lbl { font-size: .68rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .03em; }

/* Drawer meta */
.drawer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .8rem;
}
.drawer-rating {
    color: #e6a817;
    font-weight: 600;
    font-size: .9rem;
}
.drawer-location {
    font-size: .85rem;
    color: var(--color-muted);
    margin-bottom: .8rem;
}
.drawer-alerts {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--radius);
    padding: .4rem .6rem;
    font-size: .82rem;
    margin-bottom: .8rem;
}
.drawer-btn-row {
    margin-top: 1rem;
}


/* ══════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════ */
.badge {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 600;
    background: #e9ecef;
    color: #495057;
    white-space: nowrap;
}
.badge-easy     { background: #d4edda; color: #155724; }
.badge-moderate { background: #fff3cd; color: #856404; }
.badge-hard     { background: #f8d7da; color: #721c24; }
.badge-expert   { background: #721c24; color: #fff; }
.badge-featured { background: var(--color-primary); color: #fff; }


/* ══════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════ */
.btn {
    display: inline-block;
    padding: .55rem 1.4rem;
    border: none;
    border-radius: var(--radius);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
    text-align: center;
    text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-light); color: #fff; }
.btn-sm { padding: .35rem .9rem; font-size: .82rem; }
.btn-block { display: block; width: 100%; }
.btn-accent { background: var(--color-accent); color: #fff; }
.btn-accent:hover { background: #d4583d; color: #fff; }


/* ══════════════════════════════════════════════
   MARKER CLUSTER OVERRIDES  (green theme)
   ══════════════════════════════════════════════ */
.marker-cluster-small {
    background-color: rgba(45, 106, 79, .25) !important;
}
.marker-cluster-small div {
    background-color: rgba(45, 106, 79, .65) !important;
    color: #fff !important;
    font-weight: 600;
}
.marker-cluster-medium {
    background-color: rgba(231, 111, 81, .3) !important;
}
.marker-cluster-medium div {
    background-color: rgba(231, 111, 81, .7) !important;
    color: #fff !important;
    font-weight: 600;
}
.marker-cluster-large {
    background-color: rgba(220, 53, 69, .3) !important;
}
.marker-cluster-large div {
    background-color: rgba(220, 53, 69, .7) !important;
    color: #fff !important;
    font-weight: 600;
}


/* ══════════════════════════════════════════════
   UTILITY
   ══════════════════════════════════════════════ */
.text-muted { color: var(--color-muted); }


/* ══════════════════════════════════════════════
   TRAIL DETAIL PAGE  (td- prefix)
   ══════════════════════════════════════════════ */

/* ── Layout overrides for scrollable pages ─── */
/* Footer visible on detail page */
.mode-detail .main-content,
.mode-dashboard .main-content,
.mode-admin .main-content,
.mode-auth .main-content {
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Hero map ──────────────────────────────── */
.td-hero {
    position: relative;
    width: 100%;
    height: 42vh;
    min-height: 260px;
    flex-shrink: 0;
}
.td-map {
    width: 100%;
    height: 100%;
}

/* ── Photo Hero (A1) ──────────────────────── */
.td-hero-photo {
    background-size: cover;
    background-position: center;
    height: 50vh;
    min-height: 320px;
    max-height: 500px;
}
.td-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.25) 50%, transparent 100%);
    display: flex;
    align-items: flex-end;
}
.td-hero-content {
    padding: 2rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    color: #fff;
}
.td-hero-badges {
    display: flex;
    gap: .35rem;
    margin-bottom: .5rem;
}
.td-hero-badges .badge {
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(4px);
    color: #fff;
}
.td-hero-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: .4rem;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.td-hero-location {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .9rem;
    color: rgba(255,255,255,.85);
    margin-bottom: .4rem;
}
.td-hero-rating {
    display: flex;
    align-items: center;
    gap: .15rem;
    font-size: .9rem;
}
.td-hero-rating .star-filled { color: #f6c343; }
.td-hero-rating .star-half { color: #f6c343; }
.td-hero-rating-val {
    margin-left: .3rem;
    font-weight: 700;
    font-size: .95rem;
}

/* Back link (below map, in page body) */
.td-back-link {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .85rem; font-weight: 600; color: var(--color-primary);
    text-decoration: none; margin-bottom: 1rem;
}
.td-back-link:hover { text-decoration: underline; }

/* ── Body + container ──────────────────────── */
.td-body {
    background: var(--color-bg);
    padding: 1.2rem 1rem 3rem;
}
.td-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Two-Column Layout (A2) ───────────────── */
.td-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.td-content {
    flex: 1;
    min-width: 0;
    max-width: 760px;
}
.td-sidebar {
    width: 340px;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--navbar-h) + var(--safe-top) + 1rem);
}
.td-sidebar-map {
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 400px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.1);
}
.td-sidebar-map .td-map {
    border-radius: var(--radius-lg);
}
.td-sidebar-stats {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 1rem 1.2rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.td-sidebar-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 0;
    border-bottom: 1px solid var(--color-border);
}
.td-sidebar-stat:last-child { border-bottom: none; }
.td-sidebar-stat-val {
    font-weight: 700;
    font-size: .95rem;
    color: var(--color-text);
}
.td-sidebar-stat-lbl {
    font-size: .78rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Collapse to single column below 1100px */
@media (max-width: 1100px) {
    .td-layout {
        flex-direction: column;
    }
    .td-content { max-width: 100%; }
    .td-sidebar {
        width: 100%;
        position: static;
    }
    .td-sidebar-map {
        height: 300px;
    }
    .td-container {
        max-width: 760px;
    }
}

/* ── Cards (A4 glass-morphism polish) ─────── */
.td-card {
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1rem;
}
[data-theme="dark"] .td-card {
    background: rgba(26,29,38,.85);
    border-color: rgba(255,255,255,.06);
    box-shadow: 0 2px 12px rgba(0,0,0,.2);
}

/* ── Header card ───────────────────────────── */
.td-header-card { padding-bottom: 1rem; }
.td-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}
.td-title {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: .4rem;
}
.td-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .4rem;
}
.td-location {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .85rem;
    color: var(--color-muted);
}

/* Rating badge (top-right) */
.td-rating-badge {
    flex-shrink: 0;
    text-align: center;
    background: rgba(248,249,250,.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: var(--radius-lg);
    padding: .6rem .8rem;
    min-width: 80px;
}
.td-rating-val {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1;
}
.td-rating-stars {
    display: block;
    font-size: .75rem;
    margin: .15rem 0;
}
.star-filled { color: #e6a817; }
.star-half   { color: #e6a817; opacity: .5; }
.star-empty  { color: #d1d5db; }
.td-rating-count {
    display: block;
    font-size: .65rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* ── Stats strip ───────────────────────────── */
.td-stats {
    display: flex;
    gap: 1px;
    background: var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
}
.td-stat {
    flex: 1;
    text-align: center;
    padding: .6rem .4rem;
    background: rgba(248,249,250,.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.td-stat:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.td-stat:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
.td-stat-val {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
}
.td-stat-unit {
    font-size: .72rem;
    font-weight: 600;
    color: var(--color-muted);
}
.td-stat-lbl {
    display: block;
    font-size: .62rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: .1rem;
}

/* ── Nav button ────────────────────────────── */
.td-nav-btn {
    padding: .7rem 1rem;
    font-size: .95rem;
    border-radius: var(--radius);
}

/* ── Alert ─────────────────────────────────── */
.td-alert {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #fff8e1;
    border-left: 4px solid #ffc107;
    border-radius: var(--radius);
    padding: .7rem 1rem;
    font-size: .85rem;
    color: #6d5a00;
    margin-bottom: 1rem;
    line-height: 1.45;
}

/* ── Section titles ────────────────────────── */
.td-section-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .6rem;
    color: var(--color-text);
}
.td-muted-count {
    font-weight: 400;
    font-size: .82rem;
    color: var(--color-muted);
}

/* ── Description ───────────────────────────── */
.td-description {
    line-height: 1.7;
    font-size: .92rem;
    color: #333;
}

/* ── Star rating (interactive) ─────────────── */
.td-rate-row {
    display: flex;
    align-items: center;
    gap: .8rem;
}
.star-rating { display: flex; gap: .1rem; }
.star-btn {
    background: none;
    border: none;
    font-size: 1.8rem;
    color: #d1d5db;
    cursor: pointer;
    padding: 0;
    transition: color .12s, transform .12s;
    line-height: 1;
}
.star-btn:hover { transform: scale(1.15); }
.star-btn.hovered,
.star-btn.selected { color: #e6a817; }
.star-feedback {
    font-size: .8rem;
    color: var(--color-muted);
}
.star-feedback-ok  { color: var(--color-primary) !important; font-weight: 600; }
.star-feedback-err { color: var(--color-hard) !important; }

/* ── Divider ───────────────────────────────── */
.td-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1.1rem 0;
}

/* ── Comment form ──────────────────────────── */
.td-comment-form {
    margin-bottom: 1rem;
}
.td-comment-form textarea {
    width: 100%;
    padding: .6rem .8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .88rem;
    font-family: inherit;
    resize: vertical;
    margin-bottom: .45rem;
    transition: border-color .2s;
}
.td-comment-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(45,106,79,.1);
}

/* ── Comments list ─────────────────────────── */
.td-comment-list .text-muted {
    padding: .5rem 0;
    font-size: .85rem;
}
.td-comment {
    display: flex;
    gap: .7rem;
    padding: .7rem 0;
    border-top: 1px solid #f0f0f0;
}
.td-comment:first-child { border-top: none; }
.td-comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: .1rem;
}
.td-comment-body { flex: 1; min-width: 0; }
.td-comment-meta {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .15rem;
}
.td-comment-meta strong { font-size: .85rem; }
.td-comment-meta time { font-size: .72rem; color: var(--color-muted); }
.td-comment-body p {
    font-size: .87rem;
    line-height: 1.5;
    color: #444;
}

/* ── Report section ────────────────────────── */
.td-report-card { padding: .8rem 1.4rem; }
.td-report-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: none;
    border: none;
    font-size: .88rem;
    color: var(--color-muted);
    cursor: pointer;
    padding: .3rem 0;
    transition: color .2s;
    width: 100%;
}
.td-report-toggle:hover { color: var(--color-accent); }
.td-report-toggle.active { color: var(--color-accent); }
.td-report-form { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--color-border); }
.td-optional { font-weight: 400; color: var(--color-muted); font-size: .78rem; }
.td-report-feedback {
    font-size: .82rem;
    margin-top: .5rem;
}
.td-feedback-ok  { color: var(--color-primary); font-weight: 600; }
.td-feedback-err { color: var(--color-hard); }

/* ── Legacy forms (kept for any other pages) ── */
.form-stack { max-width: 700px; margin: 1.5rem auto; padding: 0 1rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .9rem; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: .5rem .7rem;
    border: 1px solid var(--color-border); border-radius: var(--radius);
    font-size: .95rem;
}
.form-row { display: flex; gap: 1rem; }
.form-row .form-group { flex: 1; }


/* ══════════════════════════════════════════════
   SUBMIT TRAIL PAGE  (sf- prefix)
   ══════════════════════════════════════════════ */

/* Layout: form panel left, map right */
.mode-submit .footer { display: none !important; }
.mode-submit .main-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
    height: calc(100vh - var(--navbar-h) - var(--safe-top)) !important;
    height: calc(100dvh - var(--navbar-h) - var(--safe-top)) !important;
}

.sf-layout {
    display: flex;
    flex-direction: row;
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* ── Left panel (scrollable form) ─────────── */
.sf-panel {
    width: 420px;
    flex-shrink: 0;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    z-index: 2;
}
.sf-panel-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 1.4rem 2rem;
}

/* Header */
.sf-back {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .82rem;
    color: var(--color-muted);
    margin-bottom: .6rem;
}
.sf-back:hover { color: var(--color-primary); text-decoration: none; }
.sf-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: .25rem;
    letter-spacing: -.02em;
}
.sf-subtitle {
    font-size: .85rem;
    color: var(--color-muted);
    line-height: 1.45;
    margin-bottom: 1.2rem;
}

/* Form fields */
.sf-form { display: flex; flex-direction: column; gap: .9rem; }

.sf-field { display: flex; flex-direction: column; gap: .3rem; }
.sf-field label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sf-req { color: var(--color-accent); }

.sf-field input:not([type="checkbox"]),
.sf-field select,
.sf-field textarea {
    width: 100%;
    padding: .6rem .75rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .92rem;
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-bg);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.sf-field input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.sf-field input:not([type="checkbox"]):focus,
.sf-field select:focus,
.sf-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(45,106,79,.12);
    background: #fff;
}
.sf-field input::placeholder,
.sf-field textarea::placeholder {
    color: #adb5bd;
}

.sf-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    padding-right: 2rem;
}

/* Side-by-side row */
.sf-row { display: flex; gap: .75rem; }
.sf-row .sf-field { flex: 1; }
.sf-field-grow { flex: 2 !important; }
.sf-field-sm { flex: 0 0 72px !important; }

/* Location autocomplete */
.sf-location-wrap { position: relative; }
.sf-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--color-border, #dee2e6);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    max-height: 220px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}
.sf-suggestions.active { display: block; }
.sf-suggestion-item {
    padding: .55rem .75rem;
    cursor: pointer;
    border-bottom: 1px solid #f1f3f5;
    transition: background .15s;
}
.sf-suggestion-item:last-child { border-bottom: none; }
.sf-suggestion-item:hover,
.sf-suggestion-item.focused { background: #e9f5ef; }
.sf-suggestion-name { font-size: .88rem; }
.sf-suggestion-sub {
    font-size: .75rem;
    color: var(--color-muted, #868e96);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* GeoJSON textarea */
.sf-geojson {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: .8rem;
    background: #f1f3f5;
    line-height: 1.5;
}
.sf-link-btn {
    background: none;
    border: none;
    font-size: .72rem;
    color: var(--color-primary);
    cursor: pointer;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.sf-link-btn:hover { text-decoration: underline; }

/* Status messages */
.sf-status {
    padding: .6rem .8rem;
    border-radius: var(--radius);
    font-size: .85rem;
    font-weight: 600;
}
.sf-status.hidden { display: none; }
.sf-status-error   { background: #fff5f5; color: var(--color-hard); border: 1px solid #fecaca; }
.sf-status-success { background: #f0fdf4; color: var(--color-primary-dark); border: 1px solid #bbf7d0; }

/* Submit button */
.sf-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .75rem 1.2rem;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition), transform .15s ease;
    box-shadow: 0 2px 8px rgba(45,106,79,.25);
}
.sf-submit-btn:hover { background: var(--color-primary-light); transform: translateY(-1px); }
.sf-submit-btn:active { transform: translateY(0); }
.sf-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.sf-submit-btn svg { flex-shrink: 0; }

.sf-hint {
    font-size: .76rem;
    color: var(--color-muted);
    text-align: center;
    margin-top: .2rem;
}

/* ── Right panel (map) ────────────────────── */
.sf-map-panel {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
}
.sf-map {
    flex: 1;
    width: 100%;
    min-height: 0;
    z-index: 1;
}

/* Floating toolbar over the map */
.sf-map-toolbar {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1000;
    display: flex;
    gap: 6px;
}
.sf-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .7rem;
    background: #fff;
    border: 1.5px solid var(--color-border);
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
    transition: all var(--transition);
    white-space: nowrap;
}
.sf-tool-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.sf-tool-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.sf-tool-btn.active svg { stroke: #fff; }

/* Info bar at bottom of map */
.sf-map-info {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: .4rem .9rem;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-text);
    box-shadow: 0 1px 6px rgba(0,0,0,.1);
    display: flex;
    gap: .5rem;
    align-items: center;
}
.sf-info-sep { color: var(--color-border); }

/* ── Submit page responsive ───────────────── */
@media (max-width: 768px) {
    .mode-submit .main-content {
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    .sf-layout { flex-direction: column; height: auto; min-height: 100%; }
    .sf-panel {
        width: 100%;
        flex-shrink: 0;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        max-height: none;
        order: 2;
        overflow-y: visible;
    }
    .sf-map-panel {
        height: 45vh;
        min-height: 280px;
        flex-shrink: 0;
        order: 1;
    }
    .sf-panel-scroll { padding: 1rem; overflow-y: visible; }
    .sf-title { font-size: 1.2rem; }
}
@media (max-width: 480px) {
    .sf-row { flex-direction: column; gap: .5rem; }
    .sf-field-sm { flex: 1 !important; }
    .sf-tool-btn span { display: none; }
    .sf-map-panel { height: 38vh; min-height: 240px; }
}

/* ── Utility ──────────────────────────────── */
.hidden { display: none !important; }


/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 900px) {
    .floating-filters {
        flex-wrap: wrap;
        width: 94%;
        justify-content: center;
    }
    .ff-search { width: 100%; }
    .ff-btn-label { display: none; }
    .trail-drawer { width: 100%; }
}

@media (max-width: 768px) {
    /* ── Bottom sheet for sidebar ────────────── */
    .map-container { flex-direction: column; }

    .map-sidebar {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        width: 100%;
        max-height: none;
        height: 95vh;
        border-bottom: none;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,.15);
        z-index: 800;
        transform: translateY(calc(95vh - var(--sheet-collapsed-h)));
        transition: transform .3s cubic-bezier(.4,0,.2,1);
        will-change: transform;
    }
    .map-sidebar[data-sheet="collapsed"] {
        transform: translateY(calc(95vh - var(--sheet-collapsed-h)));
    }
    .map-sidebar[data-sheet="half"] {
        transform: translateY(calc(95vh - var(--sheet-half-h)));
    }
    .map-sidebar[data-sheet="full"] {
        transform: translateY(0);
    }
    .map-sidebar.sb-dragging {
        transition: none;
    }
    .map-sidebar.sb-sheet-hidden {
        transform: translateY(100%) !important;
    }

    /* Show handle on mobile */
    .sb-sheet-handle {
        display: block;
        flex-shrink: 0;
        cursor: grab;
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Disable trail list scroll when collapsed */
    .map-sidebar[data-sheet="collapsed"] .sb-trail-list {
        overflow: hidden;
    }

    .trail-drawer { width: 100%; }
    .form-row { flex-direction: column; gap: 0; }

    /* Trail detail responsive */
    .td-hero { height: 32vh; min-height: 200px; }
    .td-hero-photo { height: 36vh; min-height: 240px; }
    .td-hero-title { font-size: 1.4rem; }
    .td-hero-content { padding: 1.2rem 1rem; }
    .td-body { padding: .8rem .5rem 2rem; }
    .td-card { padding: 1rem; border-radius: var(--radius); }
    .td-header-top { flex-direction: column; }
    .td-rating-badge { align-self: flex-start; flex-direction: row; display: flex; align-items: center; gap: .5rem; padding: .4rem .7rem; }
    .td-rating-val { font-size: 1.1rem; }
    .td-title { font-size: 1.2rem; }
    .td-stats { flex-wrap: wrap; }
    .td-stat { min-width: calc(50% - 1px); }
    .td-rate-row { flex-direction: column; align-items: flex-start; gap: .3rem; }
    .td-share-row { width: 100%; margin-top: .3rem; }
    .td-cta-row { flex-direction: column; }
    .td-cta-row .td-nav-btn { width: 100%; }
    .td-nearby-grid { grid-template-columns: 1fr; }
    .td-prev-next { flex-direction: column; gap: .5rem; }
    .td-pn-link { text-align: left !important; }
}


/* ── Share Buttons (A3) ───────────────────── */
.td-share-row {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
}
.td-share-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .65rem;
    border: 1.5px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-surface);
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
}
.td-share-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
}
.td-share-btn svg { flex-shrink: 0; }

/* ── CTA Row (nav + GPX) ─────────────────── */
.td-cta-row {
    display: flex;
    gap: .5rem;
    align-items: stretch;
}
.td-cta-row .td-nav-btn {
    flex: 1;
    text-align: center;
}
.td-gpx-btn {
    padding: .7rem 1rem;
    font-size: .88rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.td-gpx-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.td-track-btn {
    padding: .7rem 1rem;
    font-size: .88rem;
    border-radius: var(--radius);
    background: var(--color-primary-light);
    color: #fff;
    border: 1px solid var(--color-primary-light);
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.td-track-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* ── About Meta Row (A5) ─────────────────── */
.td-about-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.2rem;
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid var(--color-border);
}
.td-about-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    color: var(--color-muted);
}
.td-about-meta-item svg { opacity: .55; flex-shrink: 0; }

/* ── Creator Card (A6) ───────────────────── */
.td-creator {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid var(--color-border);
}
.td-creator-text {
    font-size: .85rem;
    color: var(--color-muted);
}
.td-creator-text strong {
    color: var(--color-text);
}

/* ── Elevation Profile (B10) ─────────────── */
.td-elevation-wrap {
    position: relative;
    height: 220px;
}
.td-elevation-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}
.elev-extremes {
    display: flex;
    justify-content: space-between;
    padding: .3rem 0 0;
    font-size: .72rem;
    color: var(--color-muted);
}
.elev-min, .elev-max { font-weight: 600; }

/* ── Location Map Card ────────────────────── */
.td-location-map-card { padding-bottom: 0; overflow: hidden; }
.td-location-map-sub {
    font-size: .85rem;
    color: var(--color-muted);
    margin-bottom: .8rem;
    line-height: 1.4;
}
.td-location-map-wrap {
    height: 380px;
    margin: 0 -1.4rem;
    border-top: 1px solid var(--color-border);
}
.td-location-map-wrap .td-map {
    border-radius: 0;
}
@media (max-width: 768px) {
    .td-location-map-wrap {
        height: 280px;
        margin: 0 -1rem;
    }
}

/* ── Nearby Trails Grid (B8) ─────────────── */
.td-nearby-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    margin-top: .5rem;
}
.td-nearby-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, transform .15s;
}
.td-nearby-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}
.td-nearby-thumb {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--color-border);
}
.td-nearby-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.td-nearby-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    background: var(--color-bg);
}
.td-nearby-info {
    padding: .6rem .7rem;
}
.td-nearby-name {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: .25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.td-nearby-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.badge-sm {
    font-size: .62rem;
    padding: .1rem .4rem;
}
.td-nearby-dist {
    font-size: .72rem;
    color: var(--color-muted);
}

/* ── Prev / Next Navigation (B9) ─────────── */
.td-prev-next {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.td-pn-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-text);
    font-size: .88rem;
    font-weight: 500;
    transition: border-color .15s, box-shadow .15s;
    max-width: 50%;
}
.td-pn-link:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    text-decoration: none;
    color: var(--color-text);
}
.td-pn-link small {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.td-pn-link svg { flex-shrink: 0; color: var(--color-muted); }
.td-pn-next { margin-left: auto; text-align: right; }

/* ── Dark mode: new detail elements ──────── */
[data-theme="dark"] .td-rating-badge { background: rgba(255,255,255,.06); }
[data-theme="dark"] .td-stat { background: rgba(255,255,255,.04); }
[data-theme="dark"] .td-share-btn { background: var(--color-surface); border-color: var(--color-border); color: var(--color-muted); }
[data-theme="dark"] .td-gpx-btn { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .td-nearby-card { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .td-pn-link { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .td-sidebar-stats { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .td-description { color: var(--color-text); }
[data-theme="dark"] .td-like-btn { background: var(--color-surface); }

/* ══════════════════════════════════════════════
   NAVIGATION MODE  (nav- prefix)
   ══════════════════════════════════════════════ */

/* ── Layout: fullscreen, no chrome ─────────── */
.mode-navigate .navbar     { display: none !important; }
.mode-navigate .footer     { display: none !important; }
.mode-navigate .bottom-nav { display: none !important; }
.mode-navigate .main-content {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}

.nav-screen {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
.nav-map {
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* ── Top instruction card ──────────────────── */
.nav-top-card {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: var(--shadow-lg);
    padding: env(safe-area-inset-top, 10px) 1rem .7rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 68px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.nav-icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    border-radius: var(--radius);
    color: #fff;
}
.nav-icon svg { width: 28px; height: 28px; }
.nav-icon.warning { background: var(--color-accent); }
.nav-icon.success { background: var(--color-easy); }
.nav-instruction { flex: 1; min-width: 0; }
#nav-main-text {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#nav-sub-text {
    display: block;
    font-size: .8rem;
    color: var(--color-muted);
    margin-top: .1rem;
}
#nav-voice-btn {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    transition: all var(--transition);
}
#nav-voice-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* ── Bottom bar ────────────────────────────── */
.nav-bottom-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 -2px 12px rgba(0,0,0,.1);
    padding: .55rem 1rem calc(env(safe-area-inset-bottom, 6px) + .4rem);
    display: flex;
    align-items: center;
    gap: .5rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.nav-stat { flex: 1; text-align: center; }
.nav-stat-val {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
}
.nav-stat-lbl {
    display: block;
    font-size: .62rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.nav-stat-divider {
    width: 1px;
    height: 28px;
    background: var(--color-border);
    flex-shrink: 0;
}

/* ── Mode toggle pill ──────────────────────── */
.nav-mode-toggle {
    display: flex;
    background: #f1f3f5;
    border-radius: 20px;
    padding: 3px;
    flex-shrink: 0;
}
.nav-mode-btn {
    padding: .28rem .65rem;
    font-size: .72rem;
    font-weight: 600;
    border: none;
    border-radius: 18px;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
.nav-mode-btn.active {
    background: var(--color-primary);
    color: #fff;
}

/* ── End Navigation button ─────────────────── */
.nav-end-btn {
    position: absolute;
    bottom: 76px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: .55rem 1.4rem;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(220,53,69,.35);
    transition: background var(--transition);
    white-space: nowrap;
}
.nav-end-btn:hover { background: #c82333; }

/* ── Re-center button ──────────────────────── */
.nav-recenter-btn {
    position: absolute;
    bottom: 84px;
    right: 14px;
    z-index: 1000;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: var(--shadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    transition: color var(--transition);
}
.nav-recenter-btn:hover { color: var(--color-primary); }
.nav-recenter-btn.hidden { display: none; }

/* ── Loading overlay ───────────────────────── */
.nav-loading {
    position: absolute;
    inset: 0;
    z-index: 2000;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.nav-loading.hidden { display: none; }
.nav-loading-spinner {
    width: 40px; height: 40px;
    border: 4px solid #e9ecef;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.nav-loading-text {
    font-size: .92rem;
    color: var(--color-muted);
    font-weight: 500;
}

/* ── Navigation driving perspective ────────── */
.nav-map {
    transition: transform .6s ease;
    transform-origin: center 70%;
}

/* ── Navigation arrow marker (GMaps style) ─── */
.nav-arrow-icon {
    background: none !important;
    border: none !important;
}
.nav-arrow-inner {
    width: 40px;
    height: 40px;
    position: relative;
    transition: transform .3s ease;
}
/* Blue navigation chevron */
.nav-arrow-inner::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 22px solid #4285f4;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}
/* White inner chevron for depth */
.nav-arrow-inner::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 11px solid #fff;
}
/* Pulsing glow ring around arrow */
.nav-arrow-icon::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid rgba(66,133,244,.4);
    animation: nav-pulse 2s ease-in-out infinite;
}
@keyframes nav-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(66,133,244,.4); }
    50%      { box-shadow: 0 0 0 14px rgba(66,133,244,0); }
}

/* ── Navigation responsive ─────────────────── */
@media (max-width: 480px) {
    .nav-top-card {
        padding: env(safe-area-inset-top, 6px) .7rem .5rem .7rem;
        gap: .5rem;
        min-height: 58px;
    }
    .nav-icon { width: 40px; height: 40px; }
    .nav-icon svg { width: 22px; height: 22px; }
    #nav-main-text { font-size: .92rem; }
    .nav-bottom-bar { padding: .45rem .6rem calc(env(safe-area-inset-bottom, 4px) + .3rem); }
    .nav-stat-val { font-size: 1rem; }
    .nav-end-btn { bottom: 68px; padding: .45rem 1.1rem; font-size: .82rem; }
    .nav-recenter-btn { bottom: 76px; right: 10px; width: 38px; height: 38px; }
    .nav-arrow-inner { width: 34px; height: 34px; }
    .nav-arrow-inner::before {
        border-left-width: 11px;
        border-right-width: 11px;
        border-bottom-width: 18px;
    }
    .nav-arrow-inner::after {
        top: 8px;
        border-left-width: 5px;
        border-right-width: 5px;
        border-bottom-width: 9px;
    }
}



/* ══════════════════════════════════════════════
   AUTH PAGES  (au- prefix)
   ══════════════════════════════════════════════ */
.mode-auth .footer { display: none; }
.au-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--color-bg);
}
.au-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2rem 2rem 1.5rem;
}
.au-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: .25rem;
}
.au-subtitle {
    font-size: .88rem;
    color: var(--color-muted);
    margin-bottom: 1.5rem;
}
.au-alert {
    padding: .6rem .8rem;
    border-radius: var(--radius);
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.au-alert-error {
    background: #fff5f5;
    color: var(--color-hard);
    border: 1px solid #fecaca;
}
.au-form { display: flex; flex-direction: column; gap: .9rem; }
.au-field { display: flex; flex-direction: column; gap: .3rem; }
.au-field label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.au-field input {
    width: 100%;
    padding: .65rem .8rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .95rem;
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-bg);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.au-field input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(45,106,79,.12);
    background: #fff;
}
.au-btn {
    width: 100%;
    padding: .75rem;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition);
    margin-top: .4rem;
}
.au-btn:hover { background: var(--color-primary-light); }
.au-footer-text {
    text-align: center;
    font-size: .85rem;
    color: var(--color-muted);
    margin-top: 1.2rem;
}
.au-footer-text a { font-weight: 600; }


/* ══════════════════════════════════════════════
   USER DASHBOARD  (db- prefix)  Strava-style
   ══════════════════════════════════════════════ */

/* Layout: 3-column wide */
.db-layout {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.2rem 1rem 3rem;
    display: grid;
    grid-template-columns: 260px 1fr 280px;
    gap: 1.2rem;
    align-items: start;
}

/* ── Left column ────────────────────────── */
.db-left { display: flex; flex-direction: column; gap: 1rem; }

/* ── Right column ───────────────────────── */
.db-right { display: flex; flex-direction: column; gap: 1rem; }

/* Mini profile card (left column) */
.db-profile-mini {
    background: var(--color-surface); border-radius: var(--radius-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,.06); padding: 1rem;
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: .5rem;
}
.db-profile-mini-info { min-width: 0; }
.db-profile-mini-info strong { display: block; font-size: .95rem; font-weight: 700; line-height: 1.3; }
.db-profile-mini-info span { display: block; font-size: .75rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-view-profile-link {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .78rem; font-weight: 600; color: var(--color-primary);
    text-decoration: none; padding: .3rem .6rem;
    border: 1.5px solid var(--color-border); border-radius: var(--radius);
    transition: all var(--transition); margin-top: .2rem;
}
.db-view-profile-link:hover { border-color: var(--color-primary); background: rgba(45,106,79,.04); text-decoration: none; }

/* Quick links (left column) */
.db-quick-links {
    background: var(--color-surface); border-radius: var(--radius-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    display: flex; flex-direction: column;
}
.db-quick-links a {
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem 1rem; font-size: .85rem; font-weight: 500;
    color: var(--color-text); text-decoration: none;
    border-bottom: 1px solid #f5f5f5;
    transition: background var(--transition);
}
.db-quick-links a:last-child { border-bottom: none; }
.db-quick-links a:hover { background: #fafbfc; text-decoration: none; }
.db-quick-links a svg { color: var(--color-primary); flex-shrink: 0; }

/* Feed tabs */
.db-feed-tabs { display: flex; gap: .2rem; }
.db-feed-tab {
    padding: .45rem .9rem; font-size: .85rem; font-weight: 600;
    color: var(--color-muted); text-decoration: none;
    border-bottom: 2px solid transparent; transition: all var(--transition);
}
.db-feed-tab:hover { color: var(--color-text); text-decoration: none; }
.db-feed-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* Pagination */
.db-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: .3rem; padding: .8rem 0;
}
.db-page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 .5rem;
    font-size: .85rem; font-weight: 600; color: var(--color-text);
    text-decoration: none; border-radius: var(--radius);
    border: 1px solid var(--color-border); background: #fff;
    transition: all var(--transition);
}
.db-page-link:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.db-page-link.active {
    background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}

/* Profile card (used on settings page) */
.db-profile-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    padding: 1.2rem;
}
.db-profile-top { display: flex; gap: .8rem; align-items: center; }
.db-avatar-lg {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 800;
    flex-shrink: 0;
}
.db-profile-info h1 { font-size: 1.1rem; font-weight: 800; line-height: 1.2; }
.db-profile-info p { font-size: .8rem; color: var(--color-muted); }
.db-member-since { display: flex; align-items: center; gap: .3rem; margin-top: .1rem; }

/* Profile / settings page */
.db-profile-page {
    max-width: 960px; margin: 0 auto;
    padding: 1.2rem 1rem 3rem;
}
.db-back-link {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .85rem; font-weight: 600; color: var(--color-primary);
    text-decoration: none; margin-bottom: 1rem;
}
.db-back-link:hover { text-decoration: underline; }
.db-profile-grid {
    display: grid; grid-template-columns: 1fr 320px;
    gap: 1.5rem; align-items: start;
}
.db-profile-main { display: flex; flex-direction: column; gap: 1rem; }
.db-profile-aside { display: flex; flex-direction: column; gap: 1rem; }
.db-settings-section {
    background: var(--color-surface); border-radius: var(--radius-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,.06); padding: 1.2rem;
}
.db-settings-section h3 { font-size: .95rem; font-weight: 700; margin-bottom: .8rem; }

/* Edit forms (shared) */
.db-edit-form { margin-bottom: 0; }
.db-form-field { margin-bottom: .6rem; }
.db-form-field label { display: block; font-size: .72rem; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; }
.db-form-field input {
    width: 100%; padding: .5rem .7rem; border: 1.5px solid var(--color-border);
    border-radius: var(--radius); font-size: .88rem; font-family: inherit;
    transition: border-color var(--transition);
}
.db-form-field input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(45,106,79,.1); }
.db-flash { padding: .5rem .7rem; border-radius: var(--radius); font-size: .82rem; font-weight: 600; margin-bottom: .8rem; }
.db-flash--error { background: #fff5f5; color: var(--color-hard); border: 1px solid #fecaca; }
.db-flash--success { background: #f0fdf4; color: var(--color-primary-dark); border: 1px solid #bbf7d0; }

/* Summary card */
.db-summary-card, .db-breakdown-card {
    background: var(--color-surface); border-radius: var(--radius-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,.06); padding: 1rem 1.2rem;
}
.db-card-title {
    font-size: .78rem; font-weight: 700; color: var(--color-muted);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: .7rem;
    display: flex; align-items: center; gap: .4rem;
}
.db-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.db-summary-item {
    display: flex; flex-direction: column; align-items: center;
    padding: .5rem; border-radius: var(--radius); background: #f8f9fa;
}
.db-summary-item svg { margin-bottom: .2rem; }
.db-summary-val { font-size: 1.2rem; font-weight: 800; color: var(--color-text); line-height: 1; }
.db-summary-val small { font-size: .65rem; font-weight: 600; color: var(--color-muted); }
.db-summary-lbl { font-size: .62rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: .15rem; }

/* Breakdown */
.db-breakdown-row { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; font-size: .85rem; }
.db-breakdown-icon { font-size: 1rem; width: 22px; text-align: center; }
.db-breakdown-name { flex: 1; font-weight: 500; }
.db-breakdown-count { font-weight: 700; font-size: .82rem; color: var(--color-primary); min-width: 20px; text-align: right; }
.db-breakdown-bar { width: 50px; height: 4px; background: #e9ecef; border-radius: 2px; overflow: hidden; }
.db-breakdown-fill { height: 100%; background: var(--color-primary); border-radius: 2px; transition: width .4s ease; }

/* Mini stats */
.db-mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.db-mini-stat {
    background: var(--color-surface); border-radius: var(--radius); padding: .6rem;
    text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.db-mini-val { display: block; font-size: 1.3rem; font-weight: 800; color: var(--color-primary); }
.db-mini-lbl { font-size: .62rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
.db-mini-stat--warn .db-mini-val { color: var(--color-accent); }

/* ── Feed column ─────────────────────────── */
.db-feed { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.db-feed-header {
    display: flex; align-items: center; justify-content: space-between;
}
.db-feed-header h2 { font-size: 1.15rem; font-weight: 800; }
.db-feed-header .btn { display: inline-flex; align-items: center; gap: .3rem; }

/* Activity card (comments on your trails) */
.db-activity-card {
    background: var(--color-surface); border-radius: var(--radius-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,.06); padding: 1rem 1.2rem;
}
.db-activity-item { display: flex; gap: .6rem; padding: .5rem 0; border-top: 1px solid #f5f5f5; }
.db-activity-item:first-of-type { border-top: none; }
.db-activity-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: var(--color-primary-light); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem; font-weight: 700; margin-top: .1rem;
}
.db-activity-body { flex: 1; min-width: 0; }
.db-activity-body p { font-size: .82rem; line-height: 1.4; }
.db-activity-body a { font-weight: 600; }
.db-activity-text { color: var(--color-muted) !important; margin-top: .1rem; }
.db-activity-body time { font-size: .7rem; color: var(--color-muted); }

/* Trail feed cards (Strava activity card style) */
.db-trail-card {
    background: var(--color-surface); border-radius: var(--radius-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,.06); overflow: hidden;
    transition: box-shadow var(--transition);
}
.db-trail-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.db-tc-header {
    display: flex; align-items: center; gap: .6rem;
    padding: .8rem 1rem; border-bottom: 1px solid #f5f5f5;
}
.db-tc-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--color-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700; flex-shrink: 0;
}
.db-tc-meta { flex: 1; min-width: 0; }
.db-tc-meta strong { display: block; font-size: .85rem; line-height: 1.2; }
.db-tc-meta span { font-size: .72rem; color: var(--color-muted); }
.db-tc-body {
    display: block; padding: .8rem 1rem; color: var(--color-text) !important;
    text-decoration: none !important; transition: background .15s;
}
.db-tc-body:hover { background: #fafbfc; }
.db-tc-body h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; display: flex; align-items: center; gap: .4rem; }
.db-tc-icon { font-size: 1.1rem; }
.db-tc-stats { display: flex; gap: 1.5rem; }
.db-tc-stat { display: flex; align-items: baseline; gap: .25rem; }
.db-tc-stat-val { font-size: 1.15rem; font-weight: 800; color: var(--color-text); }
.db-tc-stat-lbl { font-size: .68rem; color: var(--color-muted); text-transform: uppercase; }
.db-tc-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem 1rem; border-top: 1px solid #f5f5f5;
}
.db-tc-tags { display: flex; gap: .3rem; flex-wrap: wrap; }
.db-tc-rating { display: inline-flex; align-items: center; gap: .2rem; font-size: .82rem; font-weight: 700; color: #856404; }

/* Empty state */
.db-empty-state {
    text-align: center; padding: 3rem 1.5rem;
    background: var(--color-surface); border-radius: var(--radius-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.db-empty-state h3 { font-size: 1.1rem; margin: .8rem 0 .3rem; }
.db-empty-state p { font-size: .88rem; color: var(--color-muted); margin-bottom: 1.2rem; }

/* Status badges */
.badge-pending  { background: #fff3cd; color: #856404; }
.badge-approved { background: #d4edda; color: #155724; }
.badge-rejected { background: #f8d7da; color: #721c24; }
.badge-admin    { background: var(--color-primary); color: #fff; }
.badge-user     { background: #e9ecef; color: #495057; }
.badge-active   { background: #d4edda; color: #155724; }
.badge-inactive { background: #f8d7da; color: #721c24; }

/* ── Dashboard responsive ────────────────── */
@media (max-width: 1024px) {
    .db-layout {
        grid-template-columns: 260px 1fr;
        max-width: 900px;
    }
    .db-right {
        grid-column: 1 / -1;
        display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
    }
    .db-profile-grid { grid-template-columns: 1fr; }
    .db-profile-aside {
        display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
    }
}
@media (max-width: 768px) {
    .db-layout {
        grid-template-columns: 1fr;
        padding: .8rem .5rem 2rem;
    }
    .db-right {
        grid-template-columns: 1fr;
    }
    .db-summary-grid { grid-template-columns: 1fr 1fr; gap: .4rem; }
    .db-summary-val { font-size: 1rem; }
    .db-mini-stats { grid-template-columns: 1fr 1fr; gap: .4rem; }
    .db-mini-val { font-size: 1.1rem; }
    .db-tc-stats { gap: 1rem; }
    .db-tc-stat-val { font-size: 1rem; }
    .db-profile-top { flex-direction: column; text-align: center; }
    .db-member-since { justify-content: center; }
    .db-profile-grid { grid-template-columns: 1fr; }
    .db-profile-aside { grid-template-columns: 1fr; }
    .db-feed-header { flex-direction: column; gap: .6rem; align-items: stretch; }
    .db-feed-tabs { justify-content: center; }
}


/* ══════════════════════════════════════════════
   ADMIN DASHBOARD  (adm- prefix)
   Sidebar-based layout
   ══════════════════════════════════════════════ */

/* ── Hide footer & bottom nav on admin pages ── */
.mode-admin .footer     { display: none !important; }
.mode-admin .bottom-nav { display: none !important; }
.mode-admin .main-content { padding: 0 !important; }

/* ── Layout: sidebar + main ──────────────────── */
.adm-layout {
    display: flex;
    min-height: calc(100vh - var(--navbar-h) - var(--safe-top));
}

/* ── Sidebar ─────────────────────────────────── */
.adm-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: #1b2332;
    color: #c8d0db;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: calc(100vh - var(--navbar-h) - var(--safe-top));
    overflow-y: auto;
    z-index: 100;
}
.adm-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 1.1rem 1.2rem;
    font-weight: 700;
    font-size: .95rem;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}
.adm-sidebar-nav {
    flex: 1;
    padding: .6rem 0;
}
.adm-sidebar-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem 1.2rem;
    font-size: .88rem;
    font-weight: 500;
    color: #9ba5b4;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all .15s ease;
}
.adm-sidebar-link:hover {
    color: #fff;
    background: rgba(255,255,255,.06);
    text-decoration: none;
}
.adm-sidebar-link.active {
    color: #fff;
    background: rgba(45,106,79,.35);
    border-left-color: var(--color-primary-light);
}
.adm-sidebar-footer {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: .3rem 0;
    flex-shrink: 0;
}

/* ── Main content area ───────────────────────── */
.adm-main {
    flex: 1;
    min-width: 0;
    padding: 1.5rem 2rem 3rem;
    background: var(--color-bg);
    overflow-y: auto;
}

/* ── Top bar ─────────────────────────────────── */
.adm-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.adm-page-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: .2rem;
}
.adm-page-desc {
    font-size: .88rem;
    color: var(--color-muted);
}
.adm-back-link {
    font-size: .82rem;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    margin-bottom: .25rem;
    display: inline-block;
}
.adm-back-link:hover { text-decoration: underline; }

/* ── Toast / flash message ───────────────────── */
.adm-toast {
    padding: .65rem 1rem;
    border-radius: var(--radius);
    font-size: .88rem;
    margin-bottom: 1rem;
}
.adm-toast--success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* ── Filter bar ──────────────────────────────── */
.adm-filter-bar {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.adm-filter-chip {
    display: inline-block;
    padding: .35rem .85rem;
    font-size: .82rem;
    font-weight: 600;
    border-radius: 20px;
    background: #fff;
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: all var(--transition);
}
.adm-filter-chip:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    text-decoration: none;
}
.adm-filter-chip.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* ── KPI cards ───────────────────────────────── */
.adm-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.adm-kpi-row--secondary {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.adm-kpi {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    padding: 1.1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    transition: box-shadow var(--transition);
}
.adm-kpi:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.adm-kpi--sm {
    padding: .85rem 1rem;
}
.adm-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.adm-kpi-body {
    display: flex;
    flex-direction: column;
}
.adm-kpi-val {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-text);
}
.adm-kpi--sm .adm-kpi-val { font-size: 1.25rem; }
.adm-kpi-lbl {
    font-size: .72rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: .15rem;
}

/* ── Cards ───────────────────────────────────── */
.adm-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.adm-card-header {
    padding: .85rem 1.2rem;
    font-size: .95rem;
    font-weight: 700;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.adm-card-header h3 {
    font-size: .95rem;
    font-weight: 700;
}
.adm-card-body {
    padding: .6rem 1.2rem;
}

/* ── Two-column grid ─────────────────────────── */
.adm-grid-2 {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.5rem;
}

/* ── List items (used in recent submissions) ─── */
.adm-list-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid #f5f5f5;
}
.adm-list-item:last-child { border-bottom: none; }
.adm-list-item-main { flex: 1; min-width: 0; }
.adm-list-item-title {
    font-size: .88rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-list-item-title:hover { color: var(--color-primary); text-decoration: none; }
.adm-list-item-sub {
    font-size: .78rem;
    color: var(--color-muted);
}
.adm-list-item-actions {
    display: flex;
    gap: .3rem;
    flex-shrink: 0;
}

/* ── Quick actions ───────────────────────────── */
.adm-quick-action {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem .5rem;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none;
    color: var(--color-text);
    transition: background var(--transition);
    border-radius: var(--radius);
}
.adm-quick-action:last-child { border-bottom: none; }
.adm-quick-action:hover { background: var(--color-bg); text-decoration: none; }
.adm-quick-action strong {
    display: block;
    font-size: .88rem;
    font-weight: 600;
}
.adm-quick-action span {
    font-size: .78rem;
    color: var(--color-muted);
}
.adm-qa-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Table ───────────────────────────────────── */
.adm-table-wrap {
    overflow-x: auto;
}
.adm-table {
    width: 100%;
    border-collapse: collapse;
}
.adm-table th {
    text-align: left;
    padding: .55rem 1rem;
    font-size: .72rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    background: #fafbfc;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
}
.adm-table td {
    padding: .55rem 1rem;
    font-size: .88rem;
    border-bottom: 1px solid #f5f5f5;
    vertical-align: middle;
}
.adm-table tr:last-child td { border-bottom: none; }
.adm-table tr:hover td { background: #fafbfc; }
.adm-td-id { font-size: .78rem; color: var(--color-muted); font-weight: 500; }
.adm-trail-link {
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}
.adm-trail-link:hover { color: var(--color-primary); text-decoration: none; }
.adm-reject-hint {
    font-size: .78rem;
    color: var(--color-accent);
}
.adm-actions {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}
.adm-actions .btn { padding: .25rem .6rem; font-size: .78rem; }
.btn-success { background: #28a745; color: #fff; }
.btn-success:hover { background: #218838; color: #fff; }
.btn-danger { background: #dc3545; color: #fff; }
.btn-danger:hover { background: #c82333; color: #fff; }
.btn-outline {
    background: #fff;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-warning { background: #e6a817; color: #fff; }
.btn-warning:hover { background: #d49c15; color: #fff; }
.adm-empty {
    padding: 2rem;
    text-align: center;
    color: var(--color-muted);
    font-size: .9rem;
}

/* ── Activity type fields inline ─────────────── */
.adm-field-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.2rem;
    border-bottom: 1px solid #f5f5f5;
    font-size: .85rem;
}
.adm-field-item-main {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}
.adm-field-item-actions {
    display: flex;
    gap: .3rem;
    flex-shrink: 0;
}
.adm-field-item-actions .btn { padding: .2rem .45rem; }
.adm-field-type {
    font-size: .72rem;
    background: #e9ecef;
    padding: .1rem .4rem;
    border-radius: 4px;
    color: var(--color-muted);
}

/* Activity type management */
.adm-at-form-row {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: flex-start;
}
.adm-at-form-row .sf-field { flex: 1; min-width: 140px; }
.adm-at-form-row .sf-field label { font-size: .78rem; font-weight: 600; margin-bottom: .2rem; display: block; }
.adm-at-form-row .sf-field input,
.adm-at-form-row .sf-field select {
    width: 100%;
    padding: .35rem .6rem;
    font-size: .85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    outline: none;
}
.adm-at-form-row .sf-field input:focus,
.adm-at-form-row .sf-field select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(45,106,79,.1);
}
.adm-at-trail-count {
    font-size: .75rem;
    color: var(--color-muted);
}
.adm-at-card-footer {
    padding: .5rem 1.2rem;
    border-top: 1px solid #f0f0f0;
}
.adm-field-add-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--color-primary);
    background: none;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
}
.adm-field-add-toggle:hover {
    border-color: var(--color-primary);
    background: rgba(45,106,79,.04);
}

/* ── Responsive: collapse sidebar on mobile ──── */
@media (max-width: 860px) {
    .adm-sidebar {
        position: fixed;
        left: -260px;
        top: calc(var(--navbar-h) + var(--safe-top));
        height: calc(100vh - var(--navbar-h) - var(--safe-top));
        transition: left .25s ease;
        z-index: 1050;
    }
    .adm-sidebar.open { left: 0; }
    .adm-layout { display: block; }
    .adm-main { padding: 1rem; }
    .adm-kpi-row { grid-template-columns: 1fr 1fr; }
    .adm-grid-2 { grid-template-columns: 1fr; }
    .adm-preview-grid { grid-template-columns: 1fr; }
    .adm-table { font-size: .82rem; }
    .adm-table th, .adm-table td { padding: .4rem .6rem; }
}
@media (max-width: 480px) {
    .adm-kpi-row { grid-template-columns: 1fr; }
    .adm-kpi-row--secondary { grid-template-columns: 1fr 1fr; }
}

/* ── DataTables theme overrides ──────────────── */
.adm-card .dataTables_wrapper { padding: 0; }
.adm-dt-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.2rem;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 1px solid #f0f0f0;
}
.adm-dt-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 1.2rem;
    gap: 1rem;
    flex-wrap: wrap;
    border-top: 1px solid #f0f0f0;
    font-size: .82rem;
    color: var(--color-muted);
}
/* Search input */
.adm-dt-top .dataTables_filter input {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: .4rem .75rem;
    font-size: .85rem;
    outline: none;
    transition: border-color var(--transition);
    min-width: 200px;
}
.adm-dt-top .dataTables_filter input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(45,106,79,.1);
}
.adm-dt-top .dataTables_filter label { margin: 0; display: flex; }
/* Length select */
.adm-dt-top .dataTables_length {
    font-size: .85rem;
    color: var(--color-muted);
    display: flex;
    align-items: center;
    gap: .4rem;
}
.adm-dt-top .dataTables_length select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: .3rem .5rem;
    font-size: .85rem;
    outline: none;
}
/* Pagination */
.adm-dt-bottom .dataTables_paginate {
    display: flex;
    gap: .2rem;
}
.adm-dt-bottom .dataTables_paginate .paginate_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 .5rem;
    border-radius: var(--radius);
    font-size: .82rem;
    font-weight: 500;
    color: var(--color-text);
    background: #fff;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}
.adm-dt-bottom .dataTables_paginate .paginate_button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(45,106,79,.04);
}
.adm-dt-bottom .dataTables_paginate .paginate_button.current {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.adm-dt-bottom .dataTables_paginate .paginate_button.disabled {
    opacity: .4;
    cursor: default;
    pointer-events: none;
}
/* Info text */
.adm-dt-bottom .dataTables_info {
    font-size: .82rem;
    color: var(--color-muted);
}
/* Sorting arrows */
.adm-table thead th.sorting,
.adm-table thead th.sorting_asc,
.adm-table thead th.sorting_desc {
    cursor: pointer;
    position: relative;
    padding-right: 1.5rem !important;
}
.adm-table thead th.sorting::after,
.adm-table thead th.sorting_asc::after,
.adm-table thead th.sorting_desc::after {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .65rem;
    opacity: .4;
}
.adm-table thead th.sorting::after { content: '\2195'; }
.adm-table thead th.sorting_asc::after { content: '\2191'; opacity: .8; }
.adm-table thead th.sorting_desc::after { content: '\2193'; opacity: .8; }
/* Remove DT default background images on sort headers */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-image: none !important;
}
/* Remove DT default border styles */
table.dataTable { border-collapse: collapse !important; }
table.dataTable thead th { border-bottom: 1px solid #f0f0f0 !important; }
table.dataTable.no-footer { border-bottom: none !important; }

/* ── Dynamic form fields on submit page ─────── */
.sf-dynamic-fields {
    border-top: 1px solid var(--color-border);
    padding-top: .9rem;
    transition: all var(--transition);
}
.sf-dynamic-fields .sf-field {
    animation: sfFadeIn .3s ease;
}
@keyframes sfFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sf-dynamic-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .4rem;
}



/* ── Admin Media Grid (adm- prefix) ────────── */
.adm-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.adm-media-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition);
}
.adm-media-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.adm-media-preview {
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: #f1f3f5;
}
.adm-media-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.adm-media-preview--video {
    background: #1b1b2f;
    display: flex;
    align-items: center;
    justify-content: center;
}
.adm-media-info {
    padding: .7rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 1;
}
.adm-media-trail {
    font-size: .88rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.3;
}
.adm-media-trail:hover { color: var(--color-primary); text-decoration: underline; }
.adm-media-meta {
    font-size: .72rem;
    color: var(--color-muted);
}
.adm-media-caption {
    font-size: .78rem;
    color: #555;
    font-style: italic;
}
.adm-media-actions {
    padding: 0 .9rem .7rem;
}
@media (max-width: 600px) {
    .adm-media-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .adm-media-preview { height: 120px; }
}


/* ── Vehicle Catalog admin ──────────────────── */
.adm-cat-tabs {
    display: flex;
    gap: .25rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.adm-cat-tab {
    padding: .4rem .9rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-muted);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    text-decoration: none;
    transition: all .15s ease;
}
.adm-cat-tab:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    text-decoration: none;
}
.adm-cat-tab.active {
    color: #fff;
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.adm-brand-row { cursor: default; }
.adm-model-list {
    border-top: 1px solid #e8ecef;
}
.adm-model-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45rem 1rem;
    border-bottom: 1px solid #eef0f2;
    font-size: .85rem;
    gap: .75rem;
}
.adm-model-item:last-child { border-bottom: none; }
.adm-model-info {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.adm-model-name { font-weight: 500; }
.adm-model-scale {
    font-size: .72rem;
    color: var(--color-primary);
    background: rgba(45,106,79,.08);
    padding: .1rem .45rem;
    border-radius: 10px;
    font-weight: 600;
}
.adm-model-variant {
    font-size: .72rem;
    color: var(--color-muted);
    font-style: italic;
}
.adm-model-actions {
    display: flex;
    gap: .25rem;
    flex-shrink: 0;
}

/* ── Cascading brand/model on submit form ────── */
.sf-cascade-group { position: relative; }
.sf-cascade-scale {
    display: inline-block;
    margin-top: .3rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(45,106,79,.08);
    padding: .15rem .5rem;
    border-radius: 10px;
}


/* ══════════════════════════════════════════════
   GPX Upload (sf- prefix)
   ══════════════════════════════════════════════ */

.sf-gpx-upload { margin-top: .25rem; }
.sf-gpx-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.sf-gpx-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem 1rem; border-radius: var(--radius);
    background: var(--color-bg); border: 1.5px dashed var(--color-border);
    color: var(--color-primary); font-size: .88rem; font-weight: 500;
    cursor: pointer; transition: var(--transition);
}
.sf-gpx-btn:hover { border-color: var(--color-primary); background: rgba(45,106,79,.06); }
.sf-gpx-status { font-size: .85rem; color: var(--color-muted); }
.sf-gpx-ok { color: var(--color-easy); font-weight: 500; }
.sf-gpx-err { color: var(--color-hard); font-weight: 500; }


/* ══════════════════════════════════════════════
   Trail Detail – Meta Grid (td- prefix)
   ══════════════════════════════════════════════ */

.td-meta-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .75rem; margin-top: .5rem;
}
.td-meta-item {
    display: flex; flex-direction: column; gap: .15rem;
    padding: .6rem .75rem; background: var(--color-bg);
    border-radius: var(--radius); border: 1px solid var(--color-border);
}
.td-meta-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-muted); font-weight: 600; display: flex; align-items: center; gap: .35rem; }
.td-meta-label svg { opacity: .55; flex-shrink: 0; }
.td-meta-value { font-size: .95rem; font-weight: 500; color: var(--color-text); }

/* Practical Info card */
.td-practical-info .td-meta-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Submit/Edit form: practical info collapsible */
.sf-practical-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    overflow: hidden;
}
.sf-practical-toggle {
    padding: .7rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--color-bg);
}
.sf-practical-toggle::-webkit-details-marker { display: none; }
.sf-practical-toggle::before {
    content: '+';
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    width: 1.2rem;
    text-align: center;
}
details.sf-practical-section[open] .sf-practical-toggle::before { content: '-'; }
.sf-practical-toggle .sf-optional {
    font-weight: 400;
    font-size: .75rem;
    color: var(--color-muted);
}
.sf-practical-fields {
    padding: .5rem .9rem .9rem;
}

.td-edit-card { text-align: center; }


/* ══════════════════════════════════════════════
   Dashboard – Badges (db- prefix)
   ══════════════════════════════════════════════ */

.db-badge-card {
    background: var(--color-surface); border-radius: var(--radius-lg); padding: 1.1rem;
    box-shadow: var(--shadow); margin-bottom: 1rem;
}
.db-badge-count {
    margin-left: auto; font-size: .8rem; color: var(--color-muted); font-weight: 400;
}
.db-badge-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .6rem;
}
.db-badge-item {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: .6rem .4rem; border-radius: var(--radius); transition: var(--transition);
    cursor: default;
}
.db-badge-earned {
    background: rgba(45,106,79,.08); border: 1px solid rgba(45,106,79,.2);
}
.db-badge-locked {
    background: var(--color-bg); border: 1px solid var(--color-border);
    opacity: .5; filter: grayscale(.7);
}
.db-badge-locked:hover { opacity: .75; filter: grayscale(.3); }
.db-badge-icon { font-size: 1.5rem; line-height: 1; margin-bottom: .2rem; }
.db-badge-name { font-size: .75rem; font-weight: 600; color: var(--color-text); line-height: 1.2; }
.db-badge-date { font-size: .7rem; color: var(--color-primary); margin-top: .1rem; }
.db-badge-progress { font-size: .7rem; color: var(--color-muted); margin-top: .1rem; }


/* ══════════════════════════════════════════════
   Dashboard – Edit Button (db- prefix)
   ══════════════════════════════════════════════ */

.db-tc-edit-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .8rem; color: var(--color-primary); text-decoration: none;
    padding: .2rem .5rem; border-radius: var(--radius);
    transition: var(--transition);
}
.db-tc-edit-btn:hover { background: rgba(45,106,79,.08); }


/* ══════════════════════════════════════════════
   Admin – Trail Preview (adm- prefix)
   ══════════════════════════════════════════════ */

.adm-preview-actions {
    display: flex; align-items: center; gap: .75rem;
    margin-bottom: 1rem; flex-wrap: wrap;
}
.adm-preview-map-wrap {
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow); margin-bottom: 1.5rem;
}
.adm-preview-map { height: 350px; width: 100%; }
.adm-preview-grid {
    display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem;
}
.adm-preview-card {
    background: var(--color-surface); border-radius: var(--radius-lg); padding: 1.25rem;
    box-shadow: var(--shadow);
}

@media (max-width: 768px) {
    .adm-preview-grid { grid-template-columns: 1fr; }
    .adm-preview-map { height: 250px; }
}

/* Rejection form */
.adm-reject-form {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 1rem;
    margin-bottom: 1rem;
}
.adm-reject-reason-display {
    background: #fdf2f2; border: 1px solid #f5c6cb;
    border-radius: var(--radius); padding: .75rem 1rem;
    margin-bottom: 1rem; font-size: .9rem; color: #721c24;
}


/* ══════════════════════════════════════════════
   Admin – Rejection Modal (adm- prefix)
   ══════════════════════════════════════════════ */

.adm-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}
.adm-modal-overlay.hidden { display: none; }
.adm-modal {
    background: var(--color-surface); border-radius: var(--radius-lg); padding: 1.5rem;
    width: 90%; max-width: 450px; box-shadow: var(--shadow-lg);
}
.adm-modal h3 { margin-bottom: .75rem; }


/* ══════════════════════════════════════════════
   LANDING PAGE  (lp- prefix)
   ══════════════════════════════════════════════ */

/* ── Mode overrides ───────────────────────── */
/* Kill the base flex/overflow layout so the page scrolls naturally. */
.mode-landing {
    display: block !important;
    height: auto !important;
    min-height: 100vh;
    overflow-x: hidden;
}
.mode-landing .main-content {
    display: block !important;
    flex: none !important;
    overflow: visible !important;
    padding: 0 !important;
    height: auto !important;
}
/* Footer visible on landing page */
.mode-landing .bottom-nav { display: none !important; }

/* Fixed navbar for landing – floats over the hero */
.mode-landing .navbar {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 1100;
    transition: background .35s ease, box-shadow .35s ease;
}

/* Transparent state (initial class + toggled via JS on scroll) */
.navbar-transparent {
    background: transparent !important;
    box-shadow: none !important;
}
.navbar-transparent .navbar-brand,
.navbar-transparent .navbar-link,
.navbar-transparent .navbar-auth-link {
    color: rgba(255,255,255,.9) !important;
}
.navbar-transparent .navbar-hamburger span {
    background: rgba(255,255,255,.9) !important;
}
.navbar-transparent .navbar-register-btn {
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.3) !important;
}
.navbar-transparent .navbar-user-btn {
    color: rgba(255,255,255,.9) !important;
}
.navbar-transparent .navbar-avatar {
    background: rgba(255,255,255,.2) !important;
}

/* ── Hero ─────────────────────────────────── */
.lp-hero {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--navbar-h) + 2rem) 1.5rem 3rem;
    background:
        url('../img/hero-mountains.svg') bottom center / 100% auto no-repeat,
        url('../img/hero-topo.svg') center / 800px 800px repeat,
        linear-gradient(160deg, #0b1f15 0%, #1b4332 45%, #2d6a4f 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.lp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(45,106,79,0.25) 0%, transparent 70%);
    pointer-events: none;
}
.lp-hero-content {
    max-width: 680px;
    width: 100%;
    position: relative;
    z-index: 1;
}
.lp-hero-title {
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1rem;
    letter-spacing: -.02em;
    min-height: 2.4em;
}
.lp-hero-typed {
    display: inline;
    color: var(--color-accent, #e76f51);
}
.lp-hero-cursor {
    display: inline-block;
    color: var(--color-accent, #e76f51);
    font-weight: 300;
    animation: lp-blink .7s step-end infinite;
    margin-left: 1px;
}
@keyframes lp-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
    color: #fff;
}
.lp-hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: rgba(255,255,255,.85);
    line-height: 1.6;
    margin-bottom: 2rem;
}
.lp-hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Button helpers */
.lp-btn-lg {
    padding: .75rem 2rem !important;
    font-size: 1rem !important;
    font-weight: 600;
    border-radius: var(--radius);
    display: inline-block;
    text-decoration: none;
}
.btn.btn-outline-light {
    background: transparent;
    color: #fff !important;
    border: 2px solid rgba(255,255,255,.5) !important;
    cursor: pointer;
}
.btn.btn-outline-light:hover {
    background: rgba(255,255,255,.15);
    text-decoration: none;
    color: #fff !important;
}
.btn.btn-light {
    background: #fff;
    color: var(--color-primary-dark) !important;
    border: none;
    cursor: pointer;
    font-weight: 600;
}
.btn.btn-light:hover {
    background: #f1f3f5;
    text-decoration: none;
}

/* Scroll-down hint */
.lp-scroll-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: none;
    border: none;
    color: rgba(255,255,255,.6);
    cursor: pointer;
    animation: lp-bounce 2s infinite;
    padding: .5rem;
    z-index: 1;
}
@keyframes lp-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
}

/* ── Common section ───────────────────────── */
.lp-section {
    width: 100%;
    padding: 4.5rem 1.5rem;
}
.lp-container {
    max-width: 960px;
    margin: 0 auto;
}
.lp-section-title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
    color: var(--color-text);
}

/* ── Features ─────────────────────────────── */
.lp-features {
    background: var(--color-bg);
}
.lp-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.lp-feature-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transition: transform .2s, box-shadow .2s;
}
.lp-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.lp-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: #e8f5e9;
    color: var(--color-primary);
    margin-bottom: 1.2rem;
}
.lp-feature-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .5rem;
    color: var(--color-text);
}
.lp-feature-card p {
    font-size: .9rem;
    color: var(--color-muted);
    line-height: 1.6;
}

/* ── How It Works ─────────────────────────── */
.lp-how {
    background: var(--color-surface);
}
.lp-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: center;
}
.lp-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.lp-step h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .4rem;
    color: var(--color-text);
}
.lp-step p {
    font-size: .88rem;
    color: var(--color-muted);
    line-height: 1.6;
}

/* ── Activity Types ───────────────────────── */
.lp-activities {
    background: var(--color-bg);
}
.lp-activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 1rem;
}
.lp-activity-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 1.2rem .8rem;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: transform .2s, box-shadow .2s;
    text-decoration: none !important;
    color: var(--color-text) !important;
}
.lp-activity-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    text-decoration: none !important;
}
.lp-activity-emoji {
    font-size: 2rem;
    line-height: 1;
}
.lp-activity-label {
    font-size: .82rem;
    font-weight: 600;
}

/* ── Stats ────────────────────────────────── */
.lp-stats {
    background: var(--color-surface);
}
.lp-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    text-align: center;
}
.lp-stat-card {
    padding: 1.5rem 1rem;
}
.lp-stat-number {
    display: block;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: .4rem;
}
.lp-stat-label {
    display: block;
    font-size: .85rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

/* ── CTA ──────────────────────────────────── */
.lp-cta {
    width: 100%;
    background: linear-gradient(135deg, #1b4332, #2d6a4f);
    color: #fff;
    text-align: center;
    padding: 4.5rem 1.5rem;
}
.lp-cta .lp-container { max-width: 600px; }
.lp-cta-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: .6rem;
    color: #fff;
}
.lp-cta-subtitle {
    font-size: 1.05rem;
    color: rgba(255,255,255,.85);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* ── Major Features Section ───────────────── */
.lp-major-features {
    background: var(--color-bg);
}
.lp-section-subtitle {
    text-align: center;
    color: var(--color-muted);
    font-size: 1.05rem;
    max-width: 600px;
    margin: -1.5rem auto 2.5rem;
    line-height: 1.6;
}
.lp-mf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.lp-mf-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 1.8rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    border: 1px solid var(--color-border);
    transition: transform .2s, box-shadow .2s;
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
}
.lp-mf-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.lp-mf-highlight {
    border-left: 3px solid var(--color-primary);
}
.lp-mf-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 14px;
}
.lp-mf-icon--track    { background: #e8f5e9; color: #2e7d32; }
.lp-mf-icon--navigate  { background: #e3f2fd; color: #1565c0; }
.lp-mf-icon--builder   { background: #fff3e0; color: #e65100; }
.lp-mf-icon--elevation { background: #fce4ec; color: #c62828; }
.lp-mf-icon--discover  { background: #e8eaf6; color: #283593; }
.lp-mf-icon--community { background: #f3e5f5; color: #6a1b9a; }

.lp-mf-body h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .3rem;
    color: var(--color-text);
    display: inline;
}
.lp-mf-badge {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .15rem .5rem;
    border-radius: 9999px;
    background: var(--color-primary);
    color: #fff;
    vertical-align: middle;
    margin-left: .5rem;
    position: relative;
    top: -1px;
}
.lp-mf-body p {
    font-size: .88rem;
    color: var(--color-muted);
    line-height: 1.6;
    margin-top: .5rem;
    margin-bottom: 0;
}
.lp-mf-list {
    list-style: none;
    padding: 0;
    margin: .75rem 0 0;
}
.lp-mf-list li {
    font-size: .82rem;
    color: var(--color-muted);
    padding: .25rem 0 .25rem 1.2rem;
    position: relative;
    line-height: 1.5;
}
.lp-mf-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .55rem;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* ── Responsive ───────────────────────────── */
@media (max-width: 768px) {
    .mode-landing .bottom-nav { display: none !important; }
    .lp-features-grid { grid-template-columns: 1fr; }
    .lp-mf-grid { grid-template-columns: 1fr; }
    .lp-mf-card { flex-direction: column; }
    .lp-steps { grid-template-columns: 1fr; gap: 1.5rem; }
    .lp-stats-grid { grid-template-columns: repeat(3, 1fr); }
    .lp-section { padding: 3rem 1.2rem; }
    .lp-cta { padding: 3rem 1.2rem; }
    .lp-cta-title { font-size: 1.4rem; }
}
@media (max-width: 480px) {
    .lp-hero { padding: calc(var(--navbar-h) + 1.5rem) 1rem 2.5rem; }
    .lp-hero-title { font-size: 1.6rem; }
    .lp-activity-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .75rem; }
    .lp-stat-number { font-size: 1.8rem; }
    .lp-hero-actions { flex-direction: column; align-items: center; }
    .lp-hero-actions .lp-btn-lg { width: 100%; max-width: 280px; text-align: center; }
}


/* ══════════════════════════════════════════════
   LIKES, COMMENTS, MEDIA  (Phase 2)
   ══════════════════════════════════════════════ */

/* ── Feed card: thumbnail ──────────────────── */
.db-tc-thumb-link { display: block; }
.db-tc-thumb {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

/* ── Feed card: like button ────────────────── */
.db-tc-like-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-muted);
    padding: .15rem .4rem;
    border-radius: var(--radius);
    transition: all var(--transition);
}
.db-tc-like-btn:hover { color: #e53e3e; background: rgba(229,62,62,.06); }
.db-tc-like-btn.liked { color: #e53e3e; }
.db-tc-like-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Feed card: comment count ──────────────── */
.db-tc-comment-count {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-muted);
}

/* ── Detail page: like button (pill) ───────── */
.td-like-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: 24px;
    background: #fff;
    font-size: .88rem;
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    transition: all var(--transition);
}
.td-like-btn:hover {
    border-color: #e53e3e;
    color: #e53e3e;
    background: rgba(229,62,62,.04);
}
.td-like-btn.liked {
    border-color: #e53e3e;
    color: #e53e3e;
    background: rgba(229,62,62,.06);
}
.td-like-btn:disabled { opacity: .5; cursor: not-allowed; }
.td-like-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .8rem;
}
.td-view-count {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    color: var(--color-muted);
}
.td-view-count svg { opacity: .6; }

/* ── Media gallery (detail page) ───────────── */
.td-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-bottom: .8rem;
}
.td-gallery-photo {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4/3;
}
.td-gallery-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s;
}
.td-gallery-photo:hover img {
    transform: scale(1.05);
}

.td-gallery-videos {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}
.td-gallery-video iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius);
}
.td-gallery-caption {
    font-size: .82rem;
    color: var(--color-muted);
    margin-top: .3rem;
}

/* ── Lightbox ──────────────────────────────── */
.td-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.9);
    display: flex;
    align-items: center;
    justify-content: center;
}
.td-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius);
}
.td-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.2rem;
    cursor: pointer;
    line-height: 1;
    z-index: 1;
}
.td-lightbox-prev,
.td-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    font-size: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    z-index: 1;
}
.td-lightbox-prev:hover,
.td-lightbox-next:hover { background: rgba(255,255,255,.3); }
.td-lightbox-prev { left: 1rem; }
.td-lightbox-next { right: 1rem; }

/* ── Submit/Edit: photo grid ───────────────── */
.sf-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: .5rem;
    margin-top: .4rem;
}
.sf-photo-item {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 1;
    background: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sf-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sf-photo-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    color: #fff;
    border: none;
    font-size: .85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.sf-photo-remove:hover { background: #e53e3e; }

.sf-video-item {
    background: #1b1b2f;
    color: #fff;
    font-size: .72rem;
}
.sf-video-label {
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Responsive: gallery 2-col on mobile ───── */
@media (max-width: 768px) {
    .td-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    .db-tc-thumb { height: 150px; }
}
@media (max-width: 480px) {
    .td-lightbox-prev,
    .td-lightbox-next { width: 36px; height: 36px; font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════════
   COMMUNITY POSTS (td-post-*)
   ═══════════════════════════════════════════════ */
.td-post-form { margin-bottom: 1rem; }
.td-post-form textarea {
    width: 100%;
    padding: .6rem .8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .88rem;
    font-family: inherit;
    resize: vertical;
    margin-bottom: .4rem;
    transition: border-color .2s;
}
.td-post-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(45,106,79,.1);
}
.td-post-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.td-post-photo-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    color: var(--color-muted);
    cursor: pointer;
    padding: .3rem .5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color .2s, color .2s;
}
.td-post-photo-label:hover { border-color: var(--color-primary); color: var(--color-primary); }
.td-post-preview {
    display: flex;
    gap: .4rem;
    margin-top: .4rem;
    flex-wrap: wrap;
}
.td-post-preview img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}
.td-login-prompt {
    padding: .7rem 0;
    font-size: .88rem;
    color: var(--color-muted);
    margin-bottom: .5rem;
}
.td-login-prompt a { font-weight: 600; }
.td-post {
    padding: .8rem 0;
    border-top: 1px solid #f0f0f0;
}
.td-post:first-child { border-top: none; }
.td-post-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .4rem;
}
.td-post-meta { flex: 1; min-width: 0; }
.td-post-meta strong { font-size: .85rem; display: block; }
.td-post-meta time { font-size: .72rem; color: var(--color-muted); }
.td-post-delete {
    background: none;
    border: none;
    color: var(--color-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 .3rem;
    line-height: 1;
    transition: color .2s;
}
.td-post-delete:hover { color: #e53e3e; }
.td-post-body {
    font-size: .87rem;
    line-height: 1.55;
    color: #444;
    margin-bottom: .5rem;
}
.td-post-photos {
    display: grid;
    gap: .4rem;
    border-radius: var(--radius);
    overflow: hidden;
}
.td-post-photos-1 { grid-template-columns: 1fr; }
.td-post-photos-2 { grid-template-columns: 1fr 1fr; }
.td-post-photos-3 { grid-template-columns: 1fr 1fr 1fr; }
.td-post-photos img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--radius);
    cursor: pointer;
    transition: opacity .2s;
}
.td-post-photos img:hover { opacity: .85; }

/* Floating donate button removed — replaced by footer donate section */

/* ============================================================
   ACTIVITY TRACKER
   ============================================================ */

/* Layout: full-screen map with overlaid panels */
.mode-activity .main-content { padding: 0; }
.mode-activity .footer,
.mode-activity .bottom-nav,
.mode-activity .floating-donate { display: none; }

.act-layout {
    position: relative;
    width: 100%;
    height: calc(100vh - var(--navbar-h));
    overflow: hidden;
}
.act-map {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ── Pre-start overlay ──────────────────────────────── */
.act-pre-start {
    position: absolute;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(4px);
}
.act-pre-start-inner {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    max-width: 360px;
    width: 90%;
    text-align: center;
    box-shadow: var(--shadow-lg);
}
.act-pre-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--color-text);
}
.act-pre-subtitle {
    font-size: .85rem;
    color: var(--color-muted);
    margin: 0 0 20px;
}

/* GPS Signal indicator */
.act-gps-signal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: .82rem;
}
.act-gps-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
}
.act-gps-bars span {
    width: 4px;
    background: var(--color-border);
    border-radius: 1px;
}
.act-gps-bars span:nth-child(1) { height: 4px; }
.act-gps-bars span:nth-child(2) { height: 7px; }
.act-gps-bars span:nth-child(3) { height: 11px; }
.act-gps-bars span:nth-child(4) { height: 16px; }
.act-gps-strong .act-gps-bars span { background: #28a745; }
.act-gps-good .act-gps-bars span:nth-child(-n+3) { background: #28a745; }
.act-gps-weak .act-gps-bars span:nth-child(-n+2) { background: #e6a817; }
.act-gps-poor .act-gps-bars span:nth-child(1) { background: #dc3545; }
.act-gps-none .act-gps-bars span { background: var(--color-border); }
.act-gps-text { color: var(--color-muted); }

/* Activity type select */
.act-field { margin-bottom: 16px; text-align: left; }
.act-field label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 4px; color: var(--color-muted); }
.act-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .9rem;
    background: #fff;
}

/* ── Buttons ───────────────────────────────────────── */
.act-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-lg);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .1s;
}
.act-btn:active { transform: scale(.96); }
.act-btn-start {
    width: 100%;
    background: var(--color-primary);
    color: #fff;
    padding: 14px;
    font-size: 1rem;
}
.act-btn-start:hover { background: var(--color-primary-dark); }
.act-btn-pause   { background: #e6a817; color: #fff; }
.act-btn-resume  { background: var(--color-primary); color: #fff; }
.act-btn-stop    { background: #dc3545; color: #fff; }
.act-btn-discard { background: transparent; color: var(--color-muted); border: 1px solid var(--color-border); }

/* ── Stats panel (top overlay) ─────────────────────── */
.act-stats-panel {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 400;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    box-shadow: var(--shadow);
    display: none;
}
.act-stats-panel.act-panel-active { display: block; }
.act-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    text-align: center;
}
.act-stat-val {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}
.act-stat-lbl {
    display: block;
    font-size: .65rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.act-status-badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 99px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.act-status-recording { background: #28a74520; color: #28a745; }
.act-status-paused    { background: #e6a81720; color: #b8860b; }
.act-status-completed { background: #0d47a120; color: #0d47a1; }
.act-status-idle      { background: var(--color-border); color: var(--color-muted); }

/* Recording pulse animation */
.act-stats-panel.act-recording::before {
    content: '';
    position: absolute;
    top: 8px;
    right: 12px;
    width: 10px;
    height: 10px;
    background: #28a745;
    border-radius: 50%;
    animation: act-pulse 1.5s ease-in-out infinite;
}
@keyframes act-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(1.3); }
}
.act-stats-panel.act-paused::before {
    content: '';
    position: absolute;
    top: 8px;
    right: 12px;
    width: 10px;
    height: 10px;
    background: #e6a817;
    border-radius: 50%;
}

/* ── Controls bar (bottom) ─────────────────────────── */
.act-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 400;
    display: none;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    padding-bottom: calc(16px + var(--safe-bottom));
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(8px);
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
.act-controls.act-panel-active { display: flex; }

/* ── Mobile adjustments ────────────────────────────── */
@media (max-width: 768px) {
    .act-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .act-stats-grid .act-stat:nth-child(n+4) {
        grid-column: span 1;
    }
    .act-stat-val { font-size: .95rem; }
    .act-btn { padding: 10px 16px; font-size: .85rem; }
}

/* ── Finish / Save overlay ────────────────────────── */
.act-finish-overlay {
    position: absolute;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
    overflow-y: auto;
    padding: 24px 0;
}
.act-finish-inner {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    max-width: 420px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    max-height: 90vh;
    overflow-y: auto;
}
.act-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .9rem;
    background: #fff;
    box-sizing: border-box;
}
.act-input:focus, .act-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(45,106,79,.1);
}
.act-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .9rem;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
}
.act-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .2s, background .2s;
    color: var(--color-muted);
    font-size: .85rem;
}
.act-dropzone:hover {
    border-color: var(--color-primary);
    background: rgba(45,106,79,.03);
}
.act-photo-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.act-photo-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
}
.act-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.act-photo-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    color: #fff;
    border: none;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.act-toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .9rem;
    cursor: pointer;
}
.act-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.act-toggle input { opacity: 0; width: 0; height: 0; }
.act-toggle-slider {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 24px;
    transition: background .2s;
    cursor: pointer;
}
.act-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
}
.act-toggle input:checked + .act-toggle-slider {
    background: var(--color-primary);
}
.act-toggle input:checked + .act-toggle-slider::before {
    transform: translateX(20px);
}
.act-finish-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}
.act-finish-actions .act-btn-start { width: 100%; }
.act-finish-actions .act-btn-discard { width: 100%; text-align: center; }

/* ── Activity detail photos grid ──────────────────── */
.act-detail-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.act-detail-photo {
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    display: block;
}
.act-detail-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s;
}
.act-detail-photo:hover img {
    transform: scale(1.05);
}

/* ============================================================
   ACTIVITY DETAIL VIEW
   ============================================================ */
.act-detail {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px;
}
.act-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.act-detail-header h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
}
.act-detail-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.act-detail-map {
    width: 100%;
    height: 350px;
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    overflow: hidden;
}
.act-detail-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.act-detail-stat {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px;
    text-align: center;
}
.act-detail-stat-val {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}
.act-detail-stat-lbl {
    font-size: .75rem;
    color: var(--color-muted);
    text-transform: uppercase;
}
.act-detail-section {
    margin-bottom: 24px;
}
.act-detail-section h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--color-text);
}

/* Elevation chart container */
.act-elev-chart {
    width: 100%;
    height: 200px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px;
}

/* Surface breakdown bar */
.act-surface-bar {
    display: flex;
    height: 24px;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 8px;
}
.act-surface-bar > div { height: 100%; transition: width .3s; }
.act-surface-paved   { background: #9e9e9e; }
.act-surface-gravel  { background: #f0a500; }
.act-surface-dirt    { background: #8d6e63; }
.act-surface-sand    { background: #fdd835; }
.act-surface-grass   { background: #66bb6a; }
.act-surface-unknown { background: #bdbdbd; }
.act-surface-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .78rem;
    color: var(--color-muted);
}
.act-surface-legend span::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
}
.act-surface-legend .sf-paved::before   { background: #9e9e9e; }
.act-surface-legend .sf-gravel::before  { background: #f0a500; }
.act-surface-legend .sf-dirt::before    { background: #8d6e63; }
.act-surface-legend .sf-sand::before    { background: #fdd835; }
.act-surface-legend .sf-grass::before   { background: #66bb6a; }
.act-surface-legend .sf-unknown::before { background: #bdbdbd; }

/* Activity notes */
.act-notes {
    background: #f8f9fa;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px;
    font-size: .9rem;
    line-height: 1.5;
}
.act-notes-edit {
    width: 100%;
    min-height: 60px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px;
    font-size: .9rem;
    resize: vertical;
}

/* Action buttons row */
.act-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.act-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s;
    text-decoration: none;
    color: var(--color-text);
}
.act-action-btn:hover { background: #f0f0f0; }
.act-action-btn--primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.act-action-btn--primary:hover { background: var(--color-primary-dark); }
.act-action-btn--danger {
    color: #c62828;
    border-color: #ef9a9a;
}
.act-action-btn--danger:hover { background: #ffebee; }
.act-action-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ============================================================
   ACTIVITY HISTORY
   ============================================================ */
.act-history {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px;
}
.act-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.act-history-header h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
}
.act-history-actions {
    display: flex;
    gap: 8px;
}

/* Summary stats row */
.act-history-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.act-history-summary .act-detail-stat {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.act-history-summary .act-detail-stat-val { color: #fff; }
.act-history-summary .act-detail-stat-lbl { color: rgba(255,255,255,.8); }

/* Activity cards */
.act-card {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 12px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s;
}
.act-card:hover { box-shadow: var(--shadow); }
.act-card-map {
    width: 100%;
    height: 100px;
    border-radius: var(--radius);
    background: #e8ece8;
    overflow: hidden;
}
.act-card-body h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 4px;
}
.act-card-date {
    font-size: .78rem;
    color: var(--color-muted);
    margin-bottom: 8px;
}
.act-card-stats {
    display: flex;
    gap: 16px;
    font-size: .82rem;
}
.act-card-stats strong { font-weight: 600; }

/* Filters row */
.act-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.act-filters select,
.act-filters input {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .85rem;
    background: #fff;
}

/* Pagination reuse from dashboard */
.act-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}
.act-pagination a,
.act-pagination span {
    display: inline-block;
    padding: 8px 14px;
    border-radius: var(--radius);
    font-size: .85rem;
    text-decoration: none;
}
.act-pagination a { background: #fff; border: 1px solid var(--color-border); color: var(--color-text); }
.act-pagination a:hover { background: #f0f0f0; }
.act-pagination .active { background: var(--color-primary); color: #fff; border: none; }

@media (max-width: 600px) {
    .act-card {
        grid-template-columns: 1fr;
    }
    .act-card-map { height: 120px; }
}

/* ============================================================
   ROUTE BUILDER
   ============================================================ */
.mode-builder .main-content { padding: 0; }
.mode-builder .footer,
.mode-builder .bottom-nav,
.mode-builder .floating-donate { display: none; }

.rb-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    height: calc(100vh - var(--navbar-h));
}
.rb-sidebar {
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
    padding: 20px;
}
.rb-sidebar h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 16px;
}
.rb-map { min-height: 0; }

/* Waypoint list */
.rb-waypoints {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
.rb-waypoints li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: .85rem;
}
.rb-wp-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    flex-shrink: 0;
}
.rb-wp-coords {
    flex: 1;
    color: var(--color-muted);
    font-size: .78rem;
    font-family: monospace;
}
.rb-wp-remove {
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    padding: 4px;
}
.rb-wp-remove:hover { color: #dc3545; }

/* Route stats */
.rb-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    font-size: .85rem;
}
.rb-stats strong { font-weight: 600; color: var(--color-primary-dark); }

/* Buttons */
.rb-btn-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.rb-btn {
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s;
}
.rb-btn:hover { background: #f0f0f0; }
.rb-btn--primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.rb-btn--primary:hover { background: var(--color-primary-dark); }
.rb-btn--danger { color: #dc3545; }

/* Drafts list */
.rb-drafts {
    margin-top: 20px;
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
}
.rb-drafts h3 {
    font-size: .9rem;
    font-weight: 600;
    margin: 0 0 8px;
}
.rb-draft-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: .82rem;
    cursor: pointer;
}
.rb-draft-item:hover { color: var(--color-primary); }

/* Search bar */
.rb-search {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .85rem;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .rb-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }
    .rb-sidebar {
        order: 2;
        max-height: 45vh;
        border-right: none;
        border-top: 1px solid var(--color-border);
    }
    .rb-map { order: 1; }
}

/* ═══════════════════════════════════════════════
   HIKER LOUNGE CHAT
   ═══════════════════════════════════════════════ */

/* ── Floating bubble ─────────────────────────── */
.chat-bubble {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9998;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    transition: transform .2s, background .2s;
}
.chat-bubble:hover { transform: scale(1.08); }
.chat-bubble.active { background: var(--color-primary-dark); }

.chat-bubble-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--color-accent);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* ── Chat panel ──────────────────────────────── */
.chat-panel {
    position: fixed;
    bottom: 88px;
    right: 24px;
    z-index: 9999;
    width: 360px;
    max-height: 480px;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(12px) scale(.96);
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.chat-panel.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ── Header ──────────────────────────────────── */
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.chat-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.chat-title {
    font-size: .88rem;
    font-weight: 700;
}
.chat-online {
    font-size: .7rem;
    opacity: .8;
}
.chat-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.chat-close:hover { background: rgba(255,255,255,.15); }

/* ── Messages area ───────────────────────────── */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 200px;
    max-height: 340px;
}
.chat-welcome {
    text-align: center;
    color: var(--color-muted);
    font-size: .82rem;
    padding: 32px 16px;
}

/* ── Single message ──────────────────────────── */
.chat-msg {
    max-width: 85%;
    align-self: flex-start;
}
.chat-msg-me {
    align-self: flex-end;
}
.chat-msg-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 2px;
}
.chat-msg-name {
    font-size: .72rem;
    font-weight: 600;
    color: var(--color-primary);
}
.chat-msg-me .chat-msg-name {
    color: var(--color-accent);
}
.chat-msg-time {
    font-size: .65rem;
    color: var(--color-muted);
}
.chat-msg-body {
    font-size: .82rem;
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-bg);
    padding: 6px 10px;
    border-radius: 10px 10px 10px 2px;
    word-break: break-word;
}
.chat-msg-me .chat-msg-body {
    background: var(--color-primary);
    color: #fff;
    border-radius: 10px 10px 2px 10px;
}

/* ── Input row ───────────────────────────────── */
.chat-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--color-border);
}
.chat-input {
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 8px 14px;
    font-size: .82rem;
    outline: none;
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color .15s;
}
.chat-input:focus {
    border-color: var(--color-primary);
}
.chat-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.chat-send:hover { background: var(--color-primary-dark); }
.chat-send:disabled { opacity: .5; cursor: not-allowed; }

/* ── Mobile adjustments ──────────────────────── */
@media (max-width: 768px) {
    .chat-bubble {
        bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px);
        right: 16px;
        width: 48px;
        height: 48px;
    }
    .chat-panel {
        bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 72px);
        right: 8px;
        left: 8px;
        width: auto;
        max-height: 70vh;
    }
    .chat-messages {
        max-height: 55vh;
    }
}

/* ── Hide chat on fullscreen modes ───────────── */
.mode-world .chat-bubble,
.mode-world .chat-panel,
.mode-filtered .chat-bubble,
.mode-filtered .chat-panel,
.mode-navigate .chat-bubble,
.mode-navigate .chat-panel,
.mode-submit .chat-bubble,
.mode-submit .chat-panel {
    display: none;
}