@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ── SPLASH SCREEN ── */
#splash-screen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; height: -webkit-fill-available;
    z-index: 99999;
    background: #050508;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1);
}
#splash-screen.zoom-out {
    opacity: 0;
    pointer-events: none;
}
#splash-screen.zoom-out .splash-title {
    letter-spacing: 80px;
    text-indent: 80px;
    opacity: 0;
    transform: scale(1.2);
}
#splash-screen.zoom-out .splash-subtitle,
#splash-screen.zoom-out .splash-loader {
    opacity: 0;
    transform: translateY(-20px);
}
.splash-content {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: 0 24px;
}
.splash-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(72px, 18vw, 180px);
    font-weight: 200;
    letter-spacing: clamp(16px, 4vw, 40px);
    text-indent: clamp(16px, 4vw, 40px);
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    line-height: 1;
    opacity: 0;
    animation: title-reveal 1.2s cubic-bezier(0.16,1,0.3,1) 0.2s forwards;
    transition: letter-spacing 1s cubic-bezier(0.16,1,0.3,1),
                text-indent 1s cubic-bezier(0.16,1,0.3,1),
                opacity 0.8s ease-out, transform 0.8s ease-out;
}
@keyframes title-reveal {
    from {
        opacity: 0;
        letter-spacing: clamp(30px, 8vw, 80px);
        text-indent: clamp(30px, 8vw, 80px);
    }
    to {
        opacity: 1;
        letter-spacing: clamp(16px, 4vw, 40px);
        text-indent: clamp(16px, 4vw, 40px);
    }
}
.splash-subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(9px, 1.4vw, 13px);
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin: clamp(12px, 2vw, 24px) 0 0;
    opacity: 0;
    animation: subtitle-reveal 1s cubic-bezier(0.16,1,0.3,1) 0.9s forwards;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
@keyframes subtitle-reveal {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.splash-loader {
    width: clamp(120px, 20vw, 220px);
    height: 1px;
    background: rgba(255,255,255,0.06);
    border-radius: 1px;
    overflow: hidden;
    margin-top: clamp(16px, 2.5vw, 32px);
    opacity: 0;
    animation: subtitle-reveal 0.8s cubic-bezier(0.16,1,0.3,1) 1.2s forwards;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.splash-loader-bar {
    height: 100%; width: 0%; border-radius: 1px;
    background: rgba(255,255,255,0.25);
    animation: splash-load 2s cubic-bezier(0.4,0,0.2,1) 1.4s forwards;
}
@keyframes splash-load {
    0% { width: 0%; }
    60% { width: 70%; }
    100% { width: 100%; }
}

:root {
    --bg: #050508;
    --surface: #000;
    --surface-hover: #111;
    --surface-solid: #0c0e16;
    --surface-gradient: linear-gradient(135deg, rgba(10,12,22,0.95), rgba(8,10,18,0.92));
    --border: rgba(255, 255, 255, 0.06);
    --border-accent: rgba(56, 189, 248, 0.2);
    --text: #c8ccd4;
    --text-dim: #5a5f6b;
    --text-bright: #eef0f4;
    --accent: #38bdf8;
    --accent-warm: #F5A623;
    --accent-glow: rgba(56, 189, 248, 0.15);
    --accent2: #a78bfa;
    --danger: #f87171;
    --success: #34D399;
    --warning: #fbbf24;
    --mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    --sans: 'Inter', system-ui, -apple-system, sans-serif;
    --panel-w: 400px;
    --header-h: 48px;
    --safe-b: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
*::-webkit-scrollbar { width: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

html {
    height: 100%; height: -webkit-fill-available;
}
body {
    font-family: var(--sans); background: var(--bg); color: var(--text);
    height: 100vh; height: 100dvh; height: -webkit-fill-available;
    width: 100vw; width: 100dvw;
    overflow: hidden;
    position: fixed; inset: 0;
    /* Prevent browser-level pinch zoom while keeping taps working */
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    /* Prevent pull-to-refresh and elastic scroll */
    overscroll-behavior-y: none;
    /* iPhone: remove tap highlight, prevent text-size scaling */
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

/* ── PREVENT ACCIDENTAL ZOOM ON ALL UI ── */
#float-logo, #atlas-dropdown, #float-controls, #float-stats,
#tile-switcher, #qt-layers, #map-search, #layer-panel, #plans-panel,
#search-area-btn, #pin-loading-pill, #auth-overlay, #password-modal,
#user-profile-overlay, #tour-overlay, #toast-container,
#a2hs-overlay, #draw-hud, #quick-add-hud,
.leaflet-control-zoom, .leaflet-control-locate {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
}

/* ── FLOATING UI ── */
#float-logo {
    position: fixed; top: var(--ui-logo-top, calc(12px + env(safe-area-inset-top, 0px))); left: var(--ui-edge, 12px); z-index: 1001;
    display: flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 14px 0 10px;
    background: #000; backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-radius: 50px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    cursor: pointer; user-select: none; -webkit-user-select: none;
}
#float-logo img { width: 20px; height: 20px; object-fit: contain; }
#float-logo span {
    font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 3px;
    color: var(--text-bright);
}
#atlas-dropdown {
    position: fixed; top: calc(var(--ui-logo-top, 12px) + 48px); left: var(--ui-edge, 12px); z-index: 1001;
    display: none; flex-direction: column; gap: 4px;
    animation: viewFadeIn 0.2s ease-out;
}
#atlas-dropdown.open { display: flex; }
.atlas-dropdown-item {
    display: flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 14px 0 10px;
    background: #000; backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-radius: 50px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    cursor: pointer; user-select: none; -webkit-user-select: none;
    transition: all 0.2s ease-out;
}
.atlas-dropdown-item:hover { background: #111; }
.atlas-dropdown-item:active { transform: scale(0.97); }
.atlas-dropdown-item img { width: 22px; height: 22px; object-fit: contain; }
.atlas-dropdown-item svg { flex-shrink: 0; stroke: var(--text-dim); }
.atlas-dropdown-item span {
    font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 3px;
    color: var(--text-bright);
}
.atlas-online-item { cursor: default; }
.atlas-online-item:hover { background: #000; }
.atlas-online-item:active { transform: none; }
.atlas-online-item .online-dot { margin: 0; }
.logo-dot {
    width: 8px; height: 8px; margin-left: -2px;
    position: relative; z-index: 10;
}
#online-tooltip {
    position: fixed; top: 50px; left: 14px; z-index: 2001;
    display: none; align-items: center; gap: 6px;
    height: 34px; padding: 0 14px;
    background: #000; backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-radius: 50px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 2px;
    color: var(--text-bright);
    animation: tooltip-in 0.2s ease-out;
    pointer-events: none;
}
#online-tooltip.visible { display: flex; }
@keyframes tooltip-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.online-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    background: #34d399;
    box-shadow: 0 0 8px rgba(52,211,153,0.6);
    animation: online-blink 2s ease-in-out infinite;
}
@keyframes online-blink {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(52,211,153,0.6); }
    50% { opacity: 0.4; box-shadow: 0 0 4px rgba(52,211,153,0.3); }
}

/* ── About Atlas Overlay ── */
#float-controls {
    position: fixed; top: var(--ui-logo-top, calc(12px + env(safe-area-inset-top, 0px))); right: var(--ui-edge, 12px); z-index: 1001;
    display: flex; align-items: center; gap: 8px;
}

.float-btn {
    width: 38px; height: 38px; border-radius: 50%; border: none;
    background: #000; backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    color: var(--text-dim); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease-out; position: relative;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.float-btn:hover { background: #111; color: var(--text-bright); }
.float-btn:active { transform: scale(0.97); }
.float-btn svg { width: 16px; height: 16px; }

.float-btn-layers { background: #000; color: rgba(255,255,255,0.7); }
.float-btn-layers:hover { background: #111; color: #fff; }
.float-btn-plans { background: #000; color: rgba(255,255,255,0.7); }
.float-btn-plans:hover { background: #111; color: #fff; }

.layer-count-badge, .plan-count-badge {
    position: absolute; top: -2px; right: -2px;
    background: #FF453A; color: #fff; font-family: var(--sans); font-size: 10px; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.plan-count-badge { background: #F5A623; }

/* ── USER PILL (logged in) ── */
.float-user-pill {
    gap: 6px !important;
    padding: 0 12px 0 4px !important;
    color: rgba(255,255,255,0.6) !important;
}
.float-user-pill:hover { color: #fff !important; }
.user-pill-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(48,209,88,0.15); color: #30D158;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--sans); font-size: 12px; font-weight: 700;
    flex-shrink: 0; overflow: hidden;
}
.user-pill-avatar img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.user-pill-name {
    font-family: var(--sans); font-size: 11px; font-weight: 600;
    letter-spacing: 0.3px; color: var(--text-bright);
    max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-pill-sep {
    width: 1px; height: 14px; background: rgba(255,255,255,0.08); flex-shrink: 0;
}
.user-pill-count {
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    color: rgba(255,255,255,0.5); letter-spacing: 0.5px;
}
.float-user-pill svg { opacity: 0.4; flex-shrink: 0; }

/* ── USER MENU DROPDOWN ── */
.user-menu-dropdown {
    position: fixed; z-index: 2000;
    min-width: 180px;
    background: #000;
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 4px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 1px rgba(255,255,255,0.1);
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    transition: opacity 0.2s cubic-bezier(0.16,1,0.3,1),
                transform 0.2s cubic-bezier(0.16,1,0.3,1);
    pointer-events: none;
}
.user-menu-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.umd-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text);
    font-family: var(--sans); font-size: 13px; font-weight: 500;
    transition: background 0.15s ease;
}
.umd-item:hover { background: rgba(255,255,255,0.07); }
.umd-item:active { background: rgba(255,255,255,0.1); }
.umd-item svg { color: var(--text-dim); flex-shrink: 0; }
.umd-item:hover svg { color: var(--text); }
.umd-divider {
    height: 1px;
    margin: 3px 10px;
    background: rgba(255,255,255,0.06);
}
.umd-danger { color: var(--danger); }
.umd-danger svg { color: var(--danger) !important; }
.umd-danger:hover { background: rgba(248,113,113,0.1); }

/* ── CALENDAR EXPORT MENU ── */
.cal-export-menu {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 0 12px calc(20px + env(safe-area-inset-bottom, 0px));
    opacity: 0; transition: opacity 0.2s ease;
}
.cal-export-menu.open { opacity: 1; }
.cal-export-title {
    font-family: var(--sans); font-size: 13px; font-weight: 600;
    color: var(--text-dim); text-align: center;
    padding: 12px 0 4px; letter-spacing: 0.3px;
}
.cal-export-opt {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 14px 18px;
    background: none; border: none; border-top: 1px solid rgba(255,255,255,0.06);
    color: var(--text); font-family: var(--sans); font-size: 15px; font-weight: 500;
    cursor: pointer; transition: background 0.15s;
    text-align: left;
}
.cal-export-opt:first-of-type { border-top: none; }
.cal-export-opt:hover { background: rgba(255,255,255,0.06); }
.cal-export-opt:active { background: rgba(255,255,255,0.1); }
.cal-export-opt svg { color: var(--text-dim); flex-shrink: 0; }
.cal-export-dismiss {
    justify-content: center; color: var(--text-dim);
    margin-top: 6px; border-radius: 14px;
    background: rgba(255,255,255,0.06); border-top: none;
}
.cal-export-menu > :not(.cal-export-dismiss) {
    background: rgba(18,18,20,0.95);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
}
.cal-export-menu > .cal-export-title,
.cal-export-menu > .cal-export-opt:not(.cal-export-dismiss) {
    background: none;
}
/* Wrap calendar options in a card */
.cal-export-menu {
    flex-direction: column; align-items: stretch;
    max-width: 400px; margin: 0 auto;
}
.cal-export-menu::before {
    content: ''; flex: 1;
}
.cal-export-title,
.cal-export-opt:not(.cal-export-dismiss) {
    background: rgba(18,18,20,0.95);
}
.cal-export-title {
    border-radius: 14px 14px 0 0;
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
}
.cal-export-opt:not(.cal-export-dismiss):last-of-type {
    border-radius: 0 0 14px 14px;
}

/* ── FLOATING STATS PILL ── */
#float-stats {
    position: fixed; bottom: var(--ui-stats-bottom, calc(22px + var(--safe-b))); left: 50%; transform: translateX(-50%); z-index: 1000;
    display: flex; align-items: center; gap: 8px;
    height: 30px; padding: 0 14px;
    background: #000;
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-radius: 50px;
    font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.35);
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    pointer-events: none; white-space: nowrap;
}
#float-stats span { display: inline; }
.float-stats-sep {
    width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.15);
    display: inline-block; flex-shrink: 0;
}

/* ── AUTH MODAL ── */
.auth-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(5,5,8,0.85); backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none; align-items: center; justify-content: center;
}
.auth-overlay.active { display: flex; }

.auth-card {
    width: 380px; max-width: 90vw;
    background: linear-gradient(160deg, rgba(14,16,26,0.98), rgba(10,12,20,0.96));
    border: 1px solid var(--border-accent);
    border-radius: 20px; padding: 32px; position: relative;
    box-shadow: 0 0 60px rgba(56,189,248,0.08), 0 20px 60px rgba(0,0,0,0.5);
}
.auth-card::before {
    content: ''; position: absolute; top: -1px; left: 20%; right: 20%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.auth-close {
    position: absolute; top: 14px; right: 14px; width: 26px; height: 26px;
    border: 1px solid var(--border); border-radius: 6px; background: transparent;
    color: var(--text-dim); cursor: pointer; display: flex; align-items: center;
    justify-content: center; font-size: 14px; transition: all 0.2s ease-out;
}
.auth-close:hover { border-color: var(--danger); color: var(--danger); }

.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo h2 {
    font-family: var(--sans); font-size: 13px; letter-spacing: 3px; font-weight: 600;
    color: var(--accent); margin-top: 8px;
}
.auth-tabs {
    display: flex; gap: 0; margin-bottom: 24px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.auth-tab {
    flex: 1; padding: 8px; text-align: center; background: transparent;
    border: none; color: var(--text-dim); font-family: var(--mono);
    font-size: 10px; letter-spacing: 1px; cursor: pointer; transition: all 0.2s ease-out;
}
.auth-tab.active { background: rgba(56,189,248,0.1); color: var(--accent); }
.auth-tab:hover:not(.active) { background: rgba(255,255,255,0.03); }

.auth-form .form-group { margin-bottom: 14px; }
.auth-form .form-input { background: rgba(255,255,255,0.04); }

.auth-submit {
    width: 100%; height: 42px; border: 1px solid var(--accent); border-radius: 10px;
    background: linear-gradient(135deg, rgba(56,189,248,0.15), rgba(56,189,248,0.08));
    color: var(--accent); font-family: var(--mono);
    font-size: 11px; font-weight: 600; letter-spacing: 1.5px; cursor: pointer;
    transition: all 0.2s ease-out; margin-top: 6px;
}
.auth-submit:hover { background: linear-gradient(135deg, rgba(56,189,248,0.3), rgba(56,189,248,0.15)); box-shadow: 0 0 30px rgba(56,189,248,0.15); }

.auth-divider {
    display: flex; align-items: center; gap: 12px; margin: 18px 0;
    font-family: var(--mono); font-size: 9px; color: var(--text-dim); letter-spacing: 1px;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.auth-user-info { text-align: center; padding: 12px 0; }
.auth-avatar {
    width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--accent);
    background: rgba(56,189,248,0.1); display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px; font-size: 20px; color: var(--accent);
    overflow: hidden; position: relative;
}
.auth-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-edit-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s; border-radius: 50%; color: #fff;
}
.auth-avatar.has-hover { cursor: pointer; }
.auth-avatar.has-hover:hover .avatar-edit-overlay { opacity: 1; }
.auth-username { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--text-bright); margin-bottom: 4px; }
.auth-email { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.auth-logout {
    margin-top: 16px; padding: 8px 20px; border: 1px solid var(--border); border-radius: 6px;
    background: transparent; color: var(--text-dim); font-family: var(--mono);
    font-size: 10px; letter-spacing: 0.5px; cursor: pointer; transition: all 0.2s ease-out;
}
.auth-logout:hover { border-color: rgba(248,113,113,0.3); color: var(--danger); }

/* ── MAP ── */
#map {
    position: fixed; inset: 0;
    width: 100vw; width: 100dvw;
    height: 100vh; /* fallback */
    height: 100lvh; /* large viewport — extends under Safari chrome so no black gaps */
    z-index: 0;
}
.leaflet-control-zoom {
    border: none !important;
    position: fixed !important; bottom: var(--ui-zoom-bottom, calc(92px + var(--safe-b))) !important; left: var(--ui-edge, 12px) !important;
    top: auto !important; right: auto !important;
    margin: 0 !important; z-index: 1000 !important;
    border-radius: 50px !important; overflow: hidden;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
    background: #000 !important; backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
}
.leaflet-control-zoom a {
    background: transparent !important;
    color: rgba(255,255,255,0.7) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    width: 38px !important; height: 38px !important;
    line-height: 38px !important; font-size: 16px !important;
    transition: all 0.15s ease-out !important;
}
.leaflet-control-zoom a:first-child {
    border-radius: 50px 50px 0 0 !important;
}
.leaflet-control-zoom a:last-child {
    border-radius: 0 0 50px 50px !important;
    border-bottom: none !important;
}
.leaflet-control-zoom a:hover { background: var(--surface-hover) !important; border-color: var(--border-accent) !important; color: var(--accent) !important; }

/* ── LOCATE BUTTON ── */
.leaflet-control-locate {
    border: none !important;
    position: fixed !important; bottom: var(--ui-locate-bottom, calc(44px + var(--safe-b))) !important; left: var(--ui-edge, 12px) !important;
    top: auto !important; right: auto !important;
    z-index: 1000 !important; margin: 0 !important;
}
.leaflet-control-locate a {
    width: 38px !important; height: 38px !important; line-height: 38px !important;
    background: #000 !important; backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: none !important; border-radius: 50% !important;
    color: rgba(255,255,255,0.7) !important; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease-out;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
}
.leaflet-control-locate a:hover { background: #111 !important; color: #fff !important; }
.leaflet-control-locate a.active { color: var(--accent) !important; background: #000 !important; }
.leaflet-control-locate a svg { width: 18px; height: 18px; }

/* User location marker */
.user-location-dot {
    width: 16px; height: 16px; position: relative;
}
.user-location-dot::before {
    content: ''; position: absolute; inset: 3px;
    background: var(--accent); border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 0 8px rgba(56,189,248,0.6);
}
.user-location-dot::after {
    content: ''; position: absolute; inset: -4px;
    background: rgba(56,189,248,0.15); border-radius: 50%;
    animation: locatePulse 2s ease-out infinite;
}
@keyframes locatePulse {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
}

.leaflet-control-attribution { background: rgba(5,5,8,0.8) !important; color: var(--text-dim) !important; font-size: 9px !important; }
.leaflet-control-attribution a { color: var(--text-dim) !important; }
.leaflet-control-scale-line { background: rgba(5,5,8,0.8) !important; color: var(--text-dim) !important; border-color: var(--border) !important; font-size: 9px !important; }

/* ── TILE SWITCHER ── */
#tile-switcher {
    position: fixed;
    bottom: var(--ui-tile-bottom, calc(54px + var(--safe-b)));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}
#tile-switcher .ts-active {
    display: flex; align-items: center; justify-content: center;
    height: 34px; padding: 0 18px;
    background: #000;
    border: 1px solid var(--border);
    border-radius: 50px;
    color: #fff;
    font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    transition: border-color 0.2s;
}
#tile-switcher .ts-active:hover { border-color: var(--border-accent); }
#tile-switcher .ts-menu {
    display: none;
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: #000; border: 1px solid var(--border-accent);
    border-radius: 14px; padding: 6px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    min-width: 200px;
    flex-wrap: wrap; justify-content: center; gap: 2px;
}
#tile-switcher.open .ts-menu { display: flex; }
.tile-btn {
    padding: 8px 12px;
    border: none; border-radius: 50px;
    background: transparent;
    color: rgba(255,255,255,0.5);
    font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
    cursor: pointer; white-space: nowrap;
    transition: color 0.15s, background 0.15s, transform 0.1s;
}
.tile-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-bright); }
.tile-btn:active { transform: scale(0.93); }
.tile-btn.active { background: rgba(255,255,255,0.14); color: #fff; }

/* ── QUICK TOGGLE WIDGET ── */
#quick-widget {
    position: fixed;
    top: calc(64px + env(safe-area-inset-top, 0px));
    left: 12px;
    z-index: 1000;
    width: 36px;
    transition: width 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.2s;
    background: var(--surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

#quick-widget.expanded {
    width: 340px;
    max-width: calc(100vw - 24px);
    border-color: var(--border-accent);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 1px rgba(56,189,248,0.2);
}
#quick-widget.expanded::before {
    content: ''; position: absolute; top: -1px; left: 15%; right: 15%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.5;
}

.qw-trigger {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-dim);
    transition: color 0.2s ease-out;
    flex-shrink: 0;
}
.qw-trigger:hover { color: var(--accent); }
.qw-trigger svg { width: 16px; height: 16px; }

.qw-body {
    display: none;
    flex-direction: column;
    max-height: calc(100vh - var(--header-h) - 80px);
}
#quick-widget.expanded .qw-trigger { display: none; }
#quick-widget.expanded .qw-body { display: flex; }

.qw-search-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.qw-search-bar svg { width: 14px; height: 14px; color: var(--text-dim); flex-shrink: 0; }
.qw-search-bar input {
    flex: 1; background: none; border: none; outline: none;
    color: var(--text-bright); font-family: var(--sans); font-size: 16px;
}
.qw-search-bar input::placeholder { color: var(--text-dim); }
.qw-scroll {
    overflow-y: auto; padding: 6px;
    max-height: calc(100vh - var(--header-h) - 140px);
}

.qw-section-label {
    font-family: var(--mono); font-size: 8px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text-dim); padding: 6px 8px 4px; opacity: 0.7;
}
.qw-bulk-toggle {
    font-family: var(--mono); font-size: 8px; font-weight: 700;
    letter-spacing: 1px; color: var(--accent);
    cursor: pointer; padding: 3px 8px; border-radius: 4px;
    background: rgba(56,189,248,0.08); border: 1px solid rgba(56,189,248,0.15);
    transition: all 0.15s ease-out; opacity: 1;
}
.qw-bulk-toggle:hover { background: rgba(56,189,248,0.18); }

.qw-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 8px; border-radius: 8px;
    cursor: pointer; transition: all 0.2s ease-out;
}
.qw-item:hover { background: rgba(255,255,255,0.04); }
.qw-item:active { transform: scale(0.98); }

.qw-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    transition: all 0.2s ease-out; cursor: pointer; position: relative;
}
.qw-dot:hover { transform: scale(1.4); }
.qw-dot.on { box-shadow: 0 0 10px; }
.qw-dot.off { opacity: 0.2; }

.qw-color-pop {
    position: absolute; top: 18px; left: -4px; z-index: 10;
    display: flex; flex-wrap: wrap; gap: 4px; padding: 6px;
    background: var(--surface-solid); border: 1px solid var(--border-accent);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    width: 120px; animation: viewFadeIn 0.15s ease-out;
}
.qw-color-pop .qw-c-swatch {
    width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
    border: 1.5px solid transparent; transition: all 0.15s;
}
.qw-color-pop .qw-c-swatch:hover { transform: scale(1.25); border-color: var(--text-bright); }

.qw-info { flex: 1; min-width: 0; }
.qw-name {
    font-size: 12px; font-weight: 500; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qw-meta {
    font-family: var(--mono); font-size: 9px; color: var(--text-dim); margin-top: 1px;
}

.qw-status {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.5px;
    padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
}
.qw-status.active { color: var(--success); background: rgba(52,211,153,0.1); }
.qw-status.hidden { color: var(--text-dim); background: rgba(255,255,255,0.04); }

/* Suggestions */
.qw-suggestion {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 8px; border-radius: 8px;
    cursor: pointer; transition: all 0.2s ease-out;
    border: 1px solid transparent;
}
.qw-suggestion:hover { background: rgba(56,189,248,0.05); border-color: var(--border-accent); }
.qw-suggestion:active { transform: scale(0.98); }

.qw-sug-icon {
    width: 28px; height: 28px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
    background: rgba(56,189,248,0.08); border: 1px solid rgba(56,189,248,0.12);
}
.qw-sug-icon.exists { background: rgba(52,211,153,0.08); border-color: rgba(52,211,153,0.12); }

.qw-sug-info { flex: 1; min-width: 0; }
.qw-sug-name { font-size: 12px; font-weight: 500; color: var(--text-bright); }
.qw-sug-reason { font-size: 10px; color: var(--text-dim); margin-top: 1px; }

.qw-sug-action {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.5px;
    padding: 3px 8px; border-radius: 5px; flex-shrink: 0;
    border: 1px solid var(--border-accent); color: var(--accent);
    background: rgba(56,189,248,0.06);
}
.qw-hint {
    text-align: center; padding: 16px 12px;
    font-size: 11px; color: var(--text-dim); line-height: 1.5;
}
.qw-hint span { display: block; font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,0.2); margin-top: 6px; }

/* ── Place search items ── */
.qw-place-icon {
    width: 28px; height: 28px; border-radius: 7px;
    background: rgba(56,189,248,0.08); border: 1px solid rgba(56,189,248,0.12);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    color: var(--accent);
}
.qw-place-item:hover .qw-place-icon {
    background: rgba(56,189,248,0.14);
}
@keyframes qw-spinner {
    to { transform: rotate(360deg); }
}
.qw-spin {
    display: inline-block;
    animation: qw-spinner 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
}

/* ── USER FOLLOW WIDGET ── */
#user-widget {
    position: fixed;
    top: calc(64px + env(safe-area-inset-top, 0px) + 44px);
    left: 12px;
    z-index: 1000;
    width: 36px;
    transition: width 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.2s;
    background: var(--surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
#user-widget.expanded {
    width: 340px;
    max-width: calc(100vw - 24px);
    border-color: var(--border-accent);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 1px rgba(56,189,248,0.2);
    z-index: 1200;
}
#user-widget.expanded::before {
    content: ''; position: absolute; top: -1px; left: 15%; right: 15%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.5;
}
.uw-trigger {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-dim);
    transition: color 0.2s ease-out; flex-shrink: 0;
}
.uw-trigger:hover { color: var(--accent); }
.uw-trigger svg { width: 16px; height: 16px; }
.uw-body {
    display: none; flex-direction: column;
    max-height: calc(100vh - var(--header-h) - 130px);
}
#user-widget.expanded .uw-trigger { display: none; }
#user-widget.expanded .uw-body { display: flex; }
/* (dead user-widget sub-components removed) */
.uw-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 8px; border-radius: 8px;
    cursor: pointer; transition: all 0.2s ease-out;
}
.uw-item:hover { background: rgba(255,255,255,0.04); }
.uw-item:active { transform: scale(0.98); }
.uw-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(56,189,248,0.08); border: 1.5px solid rgba(56,189,248,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; color: var(--accent);
    flex-shrink: 0; overflow: hidden;
}
.uw-avatar img { width: 100%; height: 100%; object-fit: cover; }
.uw-info { flex: 1; min-width: 0; }
.uw-name {
    font-size: 12px; font-weight: 500; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uw-meta {
    font-family: var(--mono); font-size: 9px; color: var(--text-dim); margin-top: 1px;
}
.uw-status {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.5px;
    padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
}
.uw-status.active { color: var(--success); background: rgba(52,211,153,0.1); }
.uw-status.hidden { color: var(--text-dim); background: rgba(255,255,255,0.04); }
.uw-follow-btn {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.5px;
    padding: 3px 8px; border-radius: 5px; flex-shrink: 0;
    border: 1px solid var(--border-accent); color: var(--accent);
    background: rgba(56,189,248,0.06); cursor: pointer;
    transition: all 0.2s;
}
.uw-follow-btn:hover { background: rgba(56,189,248,0.12); }
.uw-hint {
    text-align: center; padding: 16px 12px;
    font-size: 11px; color: var(--text-dim); line-height: 1.5;
}

/* ── QUICK TOGGLE WIDGETS ── */
#qt-layers {
    position: fixed;
    top: var(--ui-sidebar1-top, calc(64px + env(safe-area-inset-top, 0px)));
    left: var(--ui-edge, 12px);
    z-index: 1000;
    width: 38px;
    transition: width 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.2s;
    background: var(--surface);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
#qt-layers.expanded {
    width: 300px;
    max-width: calc(100vw - 24px);
    border-color: var(--border-accent);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 1px rgba(56,189,248,0.2);
    z-index: 1200;
}
.qt-trigger {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-dim);
    transition: color 0.2s ease-out; flex-shrink: 0;
}
.qt-trigger:hover { color: var(--accent); }
.qt-trigger svg { width: 16px; height: 16px; }
.qt-body {
    display: none; flex-direction: column;
    max-height: calc(100vh - var(--header-h) - 120px);
}
#qt-layers.expanded .qt-trigger { display: none; }
#qt-layers.expanded .qt-body { display: flex; }
.qt-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.qt-title {
    font-family: var(--mono); font-size: 9px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim);
}
.qt-header-actions { display: flex; align-items: center; gap: 6px; }
.qt-toggle-all {
    background: none; border: 1px solid var(--border); border-radius: 6px;
    color: var(--text-dim); font-family: var(--mono); font-size: 8px;
    letter-spacing: 0.5px; padding: 3px 8px; cursor: pointer;
    transition: all 0.2s ease-out;
}
.qt-toggle-all:hover { color: var(--accent); border-color: var(--border-accent); }
.qt-close {
    width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; color: var(--text-dim); cursor: pointer;
    border-radius: 4px; font-size: 14px; transition: all 0.2s ease-out;
}
.qt-close:hover { color: var(--danger); background: rgba(248,113,113,0.1); }
.qt-scroll {
    overflow-y: auto; padding: 4px 6px;
    max-height: 260px;
}
.qt-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 8px;
    cursor: pointer; transition: all 0.15s ease-out;
}
.qt-item:hover { background: rgba(255,255,255,0.04); }
.qt-item-icon {
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(56,189,248,0.08); border: 1.5px solid rgba(56,189,248,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
}
.qt-item-name {
    flex: 1; min-width: 0; font-family: var(--sans); font-size: 12px;
    color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qt-onoff {
    flex-shrink: 0; border: none; cursor: pointer;
    font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 1px;
    padding: 4px 10px; border-radius: 6px;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.35);
    transition: all 0.2s ease-out;
}
.qt-onoff.on {
    background: rgba(56,189,248,0.15); color: var(--accent);
}
.qt-empty {
    padding: 12px; text-align: center;
    font-family: var(--sans); font-size: 11px; color: var(--text-dim);
}

/* ── MAP SEARCH WIDGET ── */
#map-search {
    position: fixed;
    top: var(--ui-sidebar2-top, calc(64px + env(safe-area-inset-top, 0px) + 40px));
    left: var(--ui-edge, 12px);
    z-index: 1000;
    width: 38px;
    transition: width 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.2s;
    background: var(--surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
#map-search.expanded {
    width: 340px;
    max-width: calc(100vw - 24px);
    border-color: var(--border-accent);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 1px rgba(56,189,248,0.2);
    z-index: 1200;
}
#map-search.expanded::before {
    content: ''; position: absolute; top: -1px; left: 15%; right: 15%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.5;
}
.ms-trigger {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-dim);
    transition: color 0.2s ease-out; flex-shrink: 0;
}
.ms-trigger:hover { color: var(--accent); }
.ms-trigger svg { width: 16px; height: 16px; }
.ms-body {
    display: none; flex-direction: column;
    max-height: calc(100vh - var(--header-h) - 80px);
}
#map-search.expanded .ms-trigger { display: none; }
#map-search.expanded .ms-body { display: flex; }
.ms-search-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.ms-search-bar svg { width: 14px; height: 14px; color: var(--text-dim); flex-shrink: 0; }
.ms-search-bar input {
    flex: 1; background: none; border: none; outline: none;
    color: var(--text-bright); font-family: var(--sans); font-size: 16px;
}
.ms-search-bar input::placeholder { color: var(--text-dim); }
.ms-close {
    width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; color: var(--text-dim); cursor: pointer;
    border-radius: 4px; font-size: 14px; transition: all 0.2s ease-out; flex-shrink: 0;
}
.ms-close:hover { color: var(--danger); background: rgba(248,113,113,0.1); }
.ms-scroll {
    overflow-y: auto; padding: 6px;
    max-height: calc(100vh - var(--header-h) - 120px);
}
.ms-section-label {
    font-family: var(--mono); font-size: 8px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text-dim); padding: 6px 8px 4px; opacity: 0.7;
}
.ms-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 8px; border-radius: 8px;
    cursor: pointer; transition: all 0.2s ease-out;
}
.ms-item:hover { background: rgba(255,255,255,0.04); }
.ms-item:active { transform: scale(0.98); }
.ms-icon {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(56,189,248,0.08); border: 1.5px solid rgba(56,189,248,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0; color: var(--accent);
}
.ms-info { flex: 1; min-width: 0; }
.ms-name {
    font-size: 12px; font-weight: 500; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-meta {
    font-family: var(--mono); font-size: 9px; color: var(--text-dim); margin-top: 1px;
}
.ms-go {
    font-family: var(--mono); font-size: 9px; letter-spacing: 1px;
    color: var(--accent); flex-shrink: 0;
}
.ms-hint {
    text-align: center; padding: 16px 12px;
    font-size: 11px; color: var(--text-dim); line-height: 1.5;
}
/* Map search highlight */
.ms-highlight-marker { background: none !important; border: none !important; }
.ms-highlight-ring {
    width: 40px; height: 40px; border-radius: 50%;
    border: 3px solid var(--accent);
    background: rgba(56,189,248,0.15);
    animation: msRingPulse 3s ease-out forwards;
    box-shadow: 0 0 20px rgba(56,189,248,0.4);
}
@keyframes msRingPulse {
    0% { transform: scale(0.5); opacity: 1; }
    30% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}
/* Unified search extras */
.ms-toggle-status {
    font-family: var(--mono); font-size: 9px; letter-spacing: 1px;
    color: var(--text-dim); flex-shrink: 0; padding: 2px 6px;
    border-radius: 4px; border: 1px solid var(--border);
}
.ms-toggle-status.on {
    color: var(--success); border-color: rgba(52,211,153,0.3);
    background: rgba(52,211,153,0.08);
}
.ms-user-icon {
    background: rgba(167,139,250,0.12) !important;
    border-color: rgba(167,139,250,0.2) !important;
    color: var(--accent2) !important;
    font-size: 12px; font-weight: 700;
}
.ms-follow-btn {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.5px;
    color: var(--accent); flex-shrink: 0; padding: 2px 8px;
    border-radius: 4px; border: 1px solid rgba(56,189,248,0.3);
    background: rgba(56,189,248,0.06);
}
.ms-create-btn {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.5px;
    color: var(--success); flex-shrink: 0; padding: 2px 8px;
    border-radius: 4px; border: 1px solid rgba(52,211,153,0.3);
    background: rgba(52,211,153,0.06);
}
.ms-bulk-toggle {
    font-family: var(--mono); font-size: 8px; letter-spacing: 1px;
    color: var(--accent); cursor: pointer; padding: 2px 6px;
    border-radius: 4px; border: 1px solid rgba(56,189,248,0.2);
    transition: all 0.2s;
}
.ms-bulk-toggle:hover { background: rgba(56,189,248,0.1); }

/* ── USER PROFILE POPUP ── */
.user-profile-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(5,5,8,0.7); backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none; align-items: center; justify-content: center;
}
.user-profile-overlay.active { display: flex; }
.user-profile-card {
    width: 340px; max-width: 90vw;
    background: var(--surface-solid);
    border: 1px solid var(--border-accent);
    border-radius: 16px; padding: 24px; position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 1px rgba(56,189,248,0.15);
    animation: viewFadeIn 0.2s ease-out;
}
.up-header { text-align: center; margin-bottom: 16px; }
.up-avatar {
    width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 8px;
    background: rgba(56,189,248,0.08); border: 2px solid rgba(56,189,248,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 600; color: var(--accent); overflow: hidden;
}
.up-avatar img { width: 100%; height: 100%; object-fit: cover; }
.up-name { font-weight: 700; font-size: 15px; color: var(--text-bright); }
.up-bio { font-size: 11px; color: var(--text-dim); margin-top: 4px; line-height: 1.4; }
.up-stats {
    display: flex; justify-content: center; gap: 16px; margin: 12px 0;
    font-family: var(--mono); font-size: 10px; color: var(--text-dim);
}
.up-stat-val { font-weight: 700; color: var(--accent); font-size: 14px; display: block; text-align: center; }
.up-layers-label {
    font-family: var(--mono); font-size: 8px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 6px; opacity: 0.7;
}
.up-layer-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 6px; margin-bottom: 2px;
    font-size: 12px; color: var(--text);
}
.up-layer-row:hover { background: rgba(255,255,255,0.04); }
.up-layer-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.up-layer-emoji { font-size: 14px; flex-shrink: 0; }
.up-follow-action {
    display: flex; justify-content: center; margin-top: 16px;
}
.up-follow-action button {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px;
    padding: 8px 24px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--border-accent); color: var(--accent);
    background: rgba(56,189,248,0.06); transition: all 0.2s;
}
.up-follow-action button:hover { background: rgba(56,189,248,0.12); }
.up-follow-action button.following {
    color: var(--success); border-color: rgba(52,211,153,0.3);
    background: rgba(52,211,153,0.06);
}

/* clickable author name in browse */
.layer-card-author { color: var(--accent); cursor: pointer; transition: color 0.2s; }
.layer-card-author:hover { text-decoration: underline; }

/* ── PANEL ── */
#layer-panel {
    position: fixed;
    top: calc(64px + env(safe-area-inset-top, 0px));
    right: 12px;
    width: var(--panel-w);
    max-height: calc(100vh - 80px - env(safe-area-inset-top, 0px));
    z-index: 1002;
    background: var(--surface);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex; flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.4);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.16,1,0.3,1),
                transform 0.25s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
#layer-panel.open {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    border-color: var(--border-accent);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 1px rgba(56,189,248,0.2);
}
#layer-panel.open ~ #qt-layers,
#layer-panel.open ~ #map-search { z-index: 0 !important; pointer-events: none !important; opacity: 0 !important; transition: opacity 0.2s; }
#layer-panel.open::before {
    content: ''; position: absolute; top: -1px; left: 15%; right: 15%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.5; z-index: 1;
}

.panel-header {
    padding: 16px 20px;
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.panel-title {
    font-family: var(--sans); font-size: 20px; font-weight: 700; letter-spacing: -0.3px;
    color: var(--text-bright);
}

.panel-back {
    display: flex; align-items: center; gap: 4px; background: none; border: none;
    color: var(--accent); font-family: var(--sans); font-size: 13px; font-weight: 500;
    cursor: pointer; transition: opacity 0.2s ease-out; padding: 0;
}
.panel-back:hover { opacity: 0.7; }

.panel-close {
    width: 28px; height: 28px; border: none; border-radius: 50%;
    background: rgba(255,255,255,0.08); color: var(--text-dim); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s ease-out; font-size: 15px;
}
.panel-close:hover { background: rgba(255,255,255,0.14); color: var(--text-bright); }

.panel-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.panel-body::-webkit-scrollbar { width: 0; }

/* ── MENU ITEMS (Apple grouped list) ── */
.menu-list { padding: 8px 16px; }

.menu-item {
    display: flex; align-items: center; gap: 14px; padding: 13px 14px;
    background: rgba(255,255,255,0.04); cursor: pointer;
    transition: all 0.15s ease-out; position: relative; overflow: hidden;
    animation: viewFadeIn 0.15s ease-out;
}
/* Grouped card style: first/last/middle/only radius */
.menu-item:first-child { border-radius: 12px 12px 0 0; }
.menu-item:last-child { border-radius: 0 0 12px 12px; }
.menu-item:only-child { border-radius: 12px; }
.menu-item:first-child:last-child { border-radius: 12px; }
.menu-item + .menu-item { border-top: 1px solid rgba(255,255,255,0.04); }

.menu-item:nth-child(1) { animation-delay: 0ms; }
.menu-item:nth-child(2) { animation-delay: 0ms; }
.menu-item:nth-child(3) { animation-delay: 0ms; }
.menu-item:nth-child(4) { animation-delay: 0ms; }
.menu-item:hover { background: rgba(255,255,255,0.07); }
.menu-item:active { background: rgba(255,255,255,0.10); transform: scale(0.99); }

.menu-item .mi-icon {
    width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0;
}
.menu-item .mi-body { flex: 1; }
.menu-item .mi-title { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--text-bright); margin-bottom: 1px; }
.menu-item .mi-desc { font-family: var(--sans); font-size: 12px; color: var(--text-dim); line-height: 1.3; }
.menu-item .mi-arrow { color: rgba(255,255,255,0.2); font-size: 14px; transition: transform 0.2s ease-out; }
.menu-item:hover .mi-arrow { color: rgba(255,255,255,0.3); }

.mi-icon.blue, .mi-icon.purple, .mi-icon.green, .mi-icon.warm {
    background: #000; border: 1px solid rgba(255,255,255,0.06);
}
.mi-icon svg { color: rgba(255,255,255,0.8); }

/* ── SECTION LABEL ── */
.section-label {
    font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: -0.1px;
    color: var(--text-dim); margin-bottom: 8px; padding: 0 4px;
}
.section-label::after { display: none; }

/* ── FORM ELEMENTS ── */
.form-group { margin-bottom: 16px; }
.form-label { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-dim); margin-bottom: 6px; display: block; }

.form-input {
    width: 100%; padding: 0 14px; height: 44px; background: rgba(255,255,255,0.06);
    border: none; border-radius: 12px; color: var(--text-bright);
    font-family: var(--sans); font-size: 15px; outline: none; transition: all 0.2s ease-out;
}
.form-input:focus { background: rgba(255,255,255,0.09); box-shadow: 0 0 0 3px rgba(56,189,248,0.2); }
.form-input::placeholder { color: rgba(255,255,255,0.25); }

.form-select {
    width: 100%; padding: 0 14px; height: 44px; background: rgba(255,255,255,0.06);
    border: none; border-radius: 12px; color: var(--text-bright);
    font-family: var(--sans); font-size: 15px; outline: none; transition: all 0.2s ease-out;
    appearance: none; cursor: pointer;
    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='%235a5f6b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}
.form-select:focus { background: rgba(255,255,255,0.09); }
.form-select option { background: #1c1c1e; color: var(--text); }

.btn-primary {
    width: 100%; height: 44px; border: none; border-radius: 12px;
    background: rgba(56,189,248,0.9);
    color: #fff; font-family: var(--sans);
    font-size: 15px; font-weight: 600; letter-spacing: 0; cursor: pointer; transition: all 0.2s ease-out;
}
.btn-primary:hover { background: var(--accent); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.3; cursor: not-allowed; }

.btn-secondary {
    width: 100%; height: 44px; border: none; border-radius: 12px;
    background: rgba(255,255,255,0.06); color: var(--text-bright); font-family: var(--sans);
    font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.2s ease-out;
}
.btn-secondary:hover { background: rgba(255,255,255,0.10); }

/* ── CREATE LAYER TYPES ── */
.create-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px; }

.create-type-card {
    padding: 22px 16px; background: rgba(255,255,255,0.04); border: none; border-radius: 14px;
    cursor: pointer; transition: all 0.2s ease-out; text-align: center;
}
.create-type-card:hover { background: rgba(255,255,255,0.07); }
.create-type-card:active { transform: scale(0.97); }
.create-type-card .ctc-icon { font-size: 30px; margin-bottom: 10px; }
.create-type-card .ctc-title { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--text-bright); margin-bottom: 4px; }
.create-type-card .ctc-desc { font-size: 11px; color: var(--text-dim); line-height: 1.4; }

/* ── OSM SEARCH & CATEGORIES ── */
.search-box {
    display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 40px;
    background: rgba(255,255,255,0.06); border: none; border-radius: 12px; transition: all 0.2s ease-out;
}
.search-box:focus-within { background: rgba(255,255,255,0.09); box-shadow: 0 0 0 3px rgba(56,189,248,0.15); }
.search-box svg { width: 14px; height: 14px; color: rgba(255,255,255,0.3); flex-shrink: 0; }
.search-box input { flex: 1; background: none; border: none; outline: none; color: var(--text-bright); font-family: var(--sans); font-size: 16px; }
.search-box input::placeholder { color: rgba(255,255,255,0.25); }

.category-group { margin-bottom: 16px; }
.category-group-title {
    font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: -0.1px;
    text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; padding-left: 2px;
}
.category-group-title::after { display: none; }
.category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.category-item {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    background: rgba(255,255,255,0.04); border: none; border-radius: 10px;
    cursor: pointer; transition: all 0.15s ease-out; position: relative; overflow: hidden;
}
.category-item:hover { background: rgba(255,255,255,0.07); }
.category-item:active { transform: scale(0.97); background: rgba(255,255,255,0.10); }
.category-item.loading { pointer-events: none; }
.category-item.loading::after { content: ''; position: absolute; bottom: 0; left: 0; height: 2px; background: rgba(56,189,248,0.9); animation: load-bar 2s ease-in-out infinite; }
@keyframes load-bar { 0% { width:0; left:0; } 50% { width:60%; left:20%; } 100% { width:0; left:100%; } }
.category-item .ci-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.category-item .ci-label { font-size: 12px; font-weight: 500; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── TAG FILTERS ── */
.filter-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 20px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer; transition: all 0.15s ease-out;
    font-size: 12px; font-weight: 500; color: var(--text);
    user-select: none; -webkit-user-select: none;
}
.filter-chip:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.15); }
.filter-chip:active { transform: scale(0.95); }
.filter-chip.active {
    background: rgba(56,189,248,0.15); border-color: var(--accent);
    color: var(--accent);
}
.filter-chip-icon { font-size: 14px; }
.filter-chip-label { white-space: nowrap; }
.filter-chip.cuisine-chip { padding: 6px 10px; font-size: 11px; }
.filter-chip.cuisine-chip .filter-chip-icon { font-size: 12px; }

/* ── ROUTE WAYPOINT LIST ── */
.route-wp-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; margin-bottom: 4px;
    background: rgba(255,255,255,0.04); border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
}
.route-wp-num {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: #000;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.route-wp-label {
    flex: 1; font-size: 12px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.route-wp-actions { display: flex; gap: 2px; flex-shrink: 0; }
.route-wp-btn {
    background: rgba(255,255,255,0.06); border: none;
    color: var(--text-dim); width: 22px; height: 22px;
    border-radius: 4px; cursor: pointer; font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.route-wp-btn:hover { background: rgba(255,255,255,0.12); color: var(--text); }

/* Data quality bars in layer card */
.osm-qual-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px;
}
.osm-qual-label {
    font-size: 10px; color: var(--text-dim);
    width: 64px; flex-shrink: 0; text-align: right;
}
.osm-qual-bar {
    flex: 1; height: 6px; border-radius: 3px;
    background: rgba(255,255,255,0.06); overflow: hidden;
}
.osm-qual-fill {
    height: 100%; border-radius: 3px;
    transition: width 0.3s ease-out;
}
.osm-qual-pct {
    font-size: 10px; font-weight: 600; color: var(--text-dim);
    width: 28px; flex-shrink: 0;
}

/* ── MY LAYERS LIST ── */
.layer-list { padding: 8px 16px; }

.layer-card {
    background: rgba(255,255,255,0.04); border: none; border-radius: 16px; margin-bottom: 10px;
    overflow: hidden; transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
    animation: viewFadeIn 0.15s ease-out;
}
.layer-card:nth-child(1) { animation-delay: 0ms; }
.layer-card:nth-child(2) { animation-delay: 0ms; }
.layer-card:nth-child(3) { animation-delay: 0ms; }
.layer-card:nth-child(4) { animation-delay: 0ms; }
.layer-card:nth-child(5) { animation-delay: 0ms; }
.layer-card:hover { background: rgba(255,255,255,0.06); }
.layer-card.lc-open { background: rgba(255,255,255,0.06); }

.layer-card-header {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
    position: relative; z-index: 1;
}
.layer-card-info { flex: 1; min-width: 0; }
.layer-card-name {
    font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--text-bright);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.layer-card-meta { font-family: var(--sans); font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* Icon bubble */
.lc-icon-bubble {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    border: 1.5px solid; display: flex; align-items: center; justify-content: center;
    font-size: 17px; background: rgba(255,255,255,0.03);
    transition: all 0.3s ease-out; cursor: pointer; position: relative; overflow: hidden;
}
.lc-icon-bubble:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 0 10px rgba(56,189,248,0.2);
}
.lc-icon-bubble::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(0,0,0,0.55); border-radius: inherit;
    opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 1;
}
.lc-icon-bubble:hover::after { opacity: 1; }
.lc-icon-bubble .lc-icon-hint {
    position: absolute; z-index: 2; opacity: 0; transition: opacity 0.2s;
    pointer-events: none; color: #fff; font-size: 13px;
}
.lc-icon-bubble:hover .lc-icon-hint { opacity: 1; }

/* Header right group */
.lc-header-right {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

/* Chevron */
.lc-chevron {
    color: var(--text-dim); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.lc-chevron.open { transform: rotate(180deg); }

/* Visibility pill in meta */
.lc-vis-pill {
    font-size: 9px; font-weight: 600; letter-spacing: 0.3px;
    padding: 1px 6px; border-radius: 4px; margin-left: 4px;
    display: inline-block; vertical-align: middle;
}
.lc-vis-pill.vis-private { color: var(--text-dim); background: rgba(255,255,255,0.06); }
.lc-vis-pill.vis-public { color: var(--success); background: rgba(52,211,153,0.1); }
.lc-vis-pill.vis-invite { color: var(--accent2); background: rgba(167,139,250,0.1); }
.lc-vis-pill.vis-members { color: var(--warning); background: rgba(251,191,36,0.1); }

/* Pending hint */
.lc-pending {
    font-size: 10px; color: var(--accent); padding: 0 14px 10px 64px;
    letter-spacing: 0.3px; opacity: 0.7;
}

/* Toggle */
.layer-toggle {
    width: 42px; height: 24px; border-radius: 12px; background: rgba(255,255,255,0.12);
    border: none; cursor: pointer; position: relative; transition: all 0.3s cubic-bezier(0.16,1,0.3,1); flex-shrink: 0;
}
.layer-toggle.on { background: #30D158; }
.layer-toggle::after {
    content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; top: 3px; left: 3px; transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.layer-toggle.on::after { left: 21px; }

/* ── EXPANDED LAYER CARD ── */
.lc-expanded {
    padding: 0 14px 14px;
    animation: lcExpandIn 0.3s cubic-bezier(0.16,1,0.3,1);
}
@keyframes lcExpandIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.lc-section {
    margin-bottom: 10px;
}
.lc-section-title {
    font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 1px;
    text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px;
}

/* Color swatches */
.lc-color-family { margin-bottom: 4px; }
.lc-family-label {
    font-family: var(--mono); font-size: 8px; letter-spacing: 0.5px;
    color: rgba(255,255,255,0.2); text-transform: uppercase; margin-bottom: 3px; display: block;
}
.lc-swatch-row { display: flex; gap: 3px; flex-wrap: wrap; }
.lc-swatch {
    width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
    border: 1.5px solid transparent; transition: all 0.15s ease-out;
}
.lc-swatch:hover { transform: scale(1.2); border-color: rgba(255,255,255,0.3); }
.lc-swatch.active { border-color: #fff; box-shadow: 0 0 6px rgba(255,255,255,0.15); transform: scale(1.15); }

/* Emoji picker row */
.lc-emoji-row { display: flex; gap: 3px; flex-wrap: wrap; }
.lc-emoji {
    width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
    font-size: 14px; cursor: pointer; background: rgba(255,255,255,0.03);
    border: 1.5px solid transparent; transition: all 0.15s ease-out;
}
.lc-emoji:hover { background: rgba(255,255,255,0.07); transform: scale(1.1); }
.lc-emoji.active { border-color: rgba(56,189,248,0.5); background: rgba(56,189,248,0.08); }

/* Inline input rows */
.lc-inline-row { display: flex; gap: 6px; align-items: center; }
.lc-input {
    flex: 1; height: 34px; padding: 0 10px; background: rgba(255,255,255,0.06);
    border: none; border-radius: 8px; color: var(--text-bright);
    font-family: var(--sans); font-size: 16px; outline: none; transition: all 0.2s ease-out;
}
.lc-input:focus { background: rgba(255,255,255,0.09); box-shadow: 0 0 0 2px rgba(56,189,248,0.2); }
.lc-input::placeholder { color: rgba(255,255,255,0.2); }

.lc-sm-btn {
    height: 34px; padding: 0 12px; border: none; border-radius: 8px;
    background: rgba(56,189,248,0.1); color: var(--accent); font-family: var(--sans);
    font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s ease-out;
    white-space: nowrap;
}
.lc-sm-btn:hover { background: rgba(56,189,248,0.18); }
.lc-sm-btn:active { transform: scale(0.96); }
.lc-sm-btn.lc-sm-danger { background: rgba(248,113,113,0.1); color: var(--danger); }
.lc-sm-btn.lc-sm-danger:hover { background: rgba(248,113,113,0.18); }

/* Segmented visibility control */
.lc-segmented {
    display: flex; gap: 2px; background: rgba(255,255,255,0.04);
    border-radius: 10px; padding: 2px;
}
.lc-seg {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 8px 4px; border: none; border-radius: 8px;
    background: transparent; color: var(--text-dim); font-family: var(--sans);
    font-size: 11px; font-weight: 500; cursor: pointer; transition: all 0.2s ease-out;
}
.lc-seg:hover { background: rgba(255,255,255,0.06); }
.lc-seg.active { background: rgba(255,255,255,0.1); color: var(--text-bright); font-weight: 600; }
.lc-seg.active.green { background: rgba(48,209,88,0.15); color: #30D158; }
.lc-seg.active.purple { background: rgba(167,139,250,0.15); color: var(--accent2); }
.lc-seg.active.amber { background: rgba(251,191,36,0.15); color: #fbbf24; }
.lc-seg svg { flex-shrink: 0; }

/* Invite codes */
.lc-code-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lc-code {
    font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 1px;
    color: var(--accent2); background: rgba(167,139,250,0.1); padding: 5px 10px;
    border-radius: 6px; cursor: pointer; transition: all 0.15s ease-out;
}
.lc-code:hover { background: rgba(167,139,250,0.2); }

/* Membership rows */
.lc-subsection-title {
    font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 1px;
    color: var(--text-dim); text-transform: uppercase; margin-bottom: 4px;
}
.lc-member-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; border-bottom: 1px solid var(--border);
}
.lc-member-row:last-child { border-bottom: none; }
.lc-member-name {
    flex: 1; font-size: 12px; font-weight: 500; color: var(--text);
}
.lc-member-time {
    font-family: var(--mono); font-size: 9px; color: var(--text-dim);
}
.lc-member-row.pending .lc-member-name { color: var(--warning); }
.lc-member-row.approved .lc-member-name { color: var(--success); }

/* Opacity range */
.lc-range {
    width: 100%; height: 3px; -webkit-appearance: none; appearance: none;
    background: rgba(255,255,255,0.08); border-radius: 2px; outline: none;
}
.lc-range::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
    background: var(--text); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.lc-range::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%; border: none;
    background: var(--text); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Section divider */
.lc-section + .lc-section {
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.04);
}

/* Action grid */
.lc-action-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px;
    margin-top: 6px;
}
.lc-action-grid.lc-action-grid-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.lc-action {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 4px; border: none; border-radius: 8px;
    background: rgba(255,255,255,0.03); color: var(--text-dim);
    font-family: var(--mono); font-size: 9px; font-weight: 400; letter-spacing: 0.3px;
    cursor: pointer; transition: all 0.15s ease-out;
}
.lc-action:hover { background: rgba(255,255,255,0.07); color: var(--text); }
.lc-action:active { transform: scale(0.95); }
.lc-action svg { color: var(--text-dim); transition: color 0.15s; }
.lc-action:hover svg { color: var(--text); }
.lc-action-danger { color: rgba(248,113,113,0.7); }
.lc-action-danger svg { color: rgba(248,113,113,0.7); }
.lc-action-danger:hover { background: rgba(248,113,113,0.08); color: var(--danger); }
.lc-action-danger:hover svg { color: var(--danger); }

/* Pending membership badge */
.lc-pending-badge {
    display: flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px;
    background: var(--error, #ef4444);
    color: #fff;
    font-family: var(--sans); font-size: 11px; font-weight: 700;
    flex-shrink: 0;
    cursor: pointer;
    animation: badgePulse 2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(239,68,68,0.4);
}
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    50% { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}
.lc-pending-badge:hover {
    background: #dc2626;
    transform: scale(1.1);
}

/* Suggestion notification */
.lc-notif-btn {
    display: block; width: 100%; padding: 8px 12px; margin-bottom: 10px;
    background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.12);
    border-radius: 8px; font-family: var(--sans); font-size: 11px; font-weight: 500;
    color: var(--warning); cursor: pointer; transition: all 0.15s ease-out;
    text-align: left;
}
.lc-notif-btn:hover { background: rgba(251,191,36,0.14); }

/* Section labels */
.layer-section-label {
    font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: -0.1px;
    color: var(--text-dim); padding: 16px 0 6px; text-transform: uppercase;
}

/* Collected layers */
.layer-card.collected { border-left: 3px solid var(--accent); }

/* Browse action buttons (kept for browse panel) */
.lca-btn {
    padding: 6px 14px; border: none; border-radius: 8px;
    background: rgba(255,255,255,0.06); color: var(--text-dim); font-family: var(--sans);
    font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s ease-out;
}
.lca-btn:hover { background: rgba(255,255,255,0.10); color: var(--text-bright); }
.lca-btn:active { transform: scale(0.96); }
.lca-btn.published { background: rgba(52,211,153,0.12); color: var(--success); }
.lca-btn.published:hover { background: rgba(52,211,153,0.2); }
.lca-btn.danger { color: var(--text-dim); }
.lca-btn.danger:hover { background: rgba(248,113,113,0.12); color: var(--danger); }
.lca-btn.add-collection {
    background: rgba(0,122,255,0.12); color: var(--accent); font-size: 13px; font-weight: 600;
    padding: 10px 14px; width: 100%; text-align: center; border-radius: 10px;
}
.lca-btn.add-collection:hover { background: rgba(0,122,255,0.2); }
.lca-btn.collected {
    background: rgba(52,211,153,0.1); color: var(--success); font-size: 13px; font-weight: 600;
    padding: 10px 14px; width: 100%; cursor: default; text-align: center; border-radius: 10px;
}
.layer-card-actions {
    display: flex; gap: 8px; padding: 0 16px 12px; flex-wrap: wrap;
    opacity: 1; height: auto;
}

.no-layers-msg {
    text-align: center; padding: 60px 32px; color: var(--text-dim);
}
.no-layers-msg .nlm-icon { font-size: 44px; opacity: 0.3; margin-bottom: 16px; animation: gentlePulse 3s ease-in-out infinite; }
@keyframes gentlePulse { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.06); opacity: 0.5; } }
.no-layers-msg .nlm-text { font-family: var(--sans); font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--text-bright); }
.no-layers-msg .nlm-hint { font-family: var(--sans); font-size: 13px; color: var(--text-dim); }

/* ── BROWSE PLACEHOLDER ── */
.browse-placeholder {
    text-align: center; padding: 60px 32px; color: var(--text-dim);
}
.browse-placeholder .bp-icon { font-size: 48px; opacity: 0.2; margin-bottom: 16px; animation: gentlePulse 3s ease-in-out infinite; }
.browse-placeholder .bp-title { font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--text-bright); margin-bottom: 8px; }
.browse-placeholder .bp-desc { font-family: var(--sans); font-size: 13px; line-height: 1.6; }

/* ── MAP CLICK POPUP ── */
.pin-popup { font-family: var(--sans); }
.pin-popup-title { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.pin-popup .form-group { margin-bottom: 10px; }
.pin-popup .form-input, .pin-popup .form-select {
    height: 36px; font-size: 16px; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12);
}
.pin-popup .form-input:focus, .pin-popup .form-select:focus { border-color: var(--accent); }
.pin-popup .btn-primary { height: 34px; font-size: 10px; }
.pin-popup .pp-coords { font-family: var(--mono); font-size: 10px; color: var(--text-dim); margin-bottom: 10px; }

/* Rich pin popup form */
.pin-popup-rich .pp-textarea {
    height: auto !important; min-height: 48px; resize: vertical; padding: 8px 10px;
    font-size: 16px; line-height: 1.4;
}
.pp-required { color: #ef4444; font-weight: 600; }
.pp-rating { display: flex; align-items: center; gap: 2px; }
.pp-star {
    font-size: 18px; cursor: pointer; color: rgba(255,255,255,0.15); transition: color 0.15s, transform 0.15s;
    user-select: none; -webkit-user-select: none;
}
.pp-star:hover { transform: scale(1.2); }
.pp-star.active { color: #eab308; }
.pp-rating-label { font-size: 10px; color: var(--text-dim); margin-left: 8px; font-family: var(--mono); letter-spacing: 0.5px; }
.pp-emoji-toggle {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border);
    background: rgba(255,255,255,0.04); transition: background 0.15s;
}
.pp-emoji-toggle:hover { background: rgba(255,255,255,0.08); }
.pp-emoji-toggle svg { color: var(--text-dim); }
.pp-emoji-current { font-size: 16px; }
.pp-emoji-row { display: none; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pp-emoji-row.open { display: flex; }
.pp-emoji-opt {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    font-size: 14px; border-radius: 6px; cursor: pointer; border: 1.5px solid transparent;
    background: rgba(255,255,255,0.04); transition: all 0.15s;
}
.pp-emoji-opt:hover { background: rgba(255,255,255,0.1); }
.pp-emoji-opt.active { border-color: var(--accent); background: rgba(56,189,248,0.12); }
.pp-color-row { display: flex; gap: 4px; flex-wrap: wrap; }
.pp-color-opt {
    width: 14px; height: 14px; border-radius: 50%; cursor: pointer;
    border: 1.5px solid transparent; transition: all 0.15s; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}
.pp-color-opt:hover { transform: scale(1.3); }
.pp-color-opt.active { border-color: var(--text-bright); box-shadow: 0 0 6px rgba(255,255,255,0.3); transform: scale(1.2); }
.pp-image-upload { width: 100%; }
.pp-image-preview {
    width: 100%; height: 80px; border-radius: 10px; cursor: pointer;
    border: 1.5px dashed rgba(255,255,255,0.15); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px; color: var(--text-dim);
    font-size: 11px; transition: all 0.2s; position: relative; overflow: hidden;
}
.pp-image-preview:hover { border-color: var(--accent); color: var(--accent); }
.pp-image-preview svg { opacity: 0.5; }
.pp-image-preview.has-image { border-style: solid; border-color: var(--accent); height: auto; min-height: 80px; }
.pp-image-preview.has-image img {
    width: 100%; height: auto; max-height: 160px; object-fit: cover; border-radius: 8px; display: block;
}
.pp-image-remove {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px;
    background: rgba(0,0,0,0.7); color: #fff; border-radius: 50%; font-size: 12px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    z-index: 2; line-height: 1;
}
.pp-image-remove:hover { background: #ef4444; }

/* Pin form section dividers */
.pp-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    margin: 4px 0 10px;
}
.pp-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.pp-actions .btn-primary,
.pp-actions .btn-secondary {
    flex: 1;
    height: 34px;
    font-size: 10px;
    letter-spacing: 0.5px;
}
.pp-actions .btn-secondary {
    background: rgba(255,255,255,0.06);
    color: var(--text-dim);
}
.pp-actions .btn-secondary:hover {
    background: rgba(255,255,255,0.10);
    color: var(--text);
}

/* ── Pin creation bottom sheet ── */
#pin-sheet {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 50vh; max-height: 50vh;
    background: var(--surface); border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    z-index: 2000;
    display: none; flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
}
#pin-sheet.open { display: flex; transform: translateY(0); }
.pin-sheet-handle {
    width: 36px; height: 4px; border-radius: 2px;
    background: rgba(255,255,255,0.2); margin: 10px auto 0; flex-shrink: 0;
}
.pin-sheet-close {
    position: absolute; top: 10px; right: 14px;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,0.08); border: 1px solid var(--border);
    color: var(--text); font-size: 20px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 2; padding: 0; transition: background 0.15s;
}
.pin-sheet-close:hover { background: rgba(255,255,255,0.16); }
.pin-sheet-scroll {
    flex: 1; overflow-y: auto; padding: 12px 20px 20px;
    -webkit-overflow-scrolling: touch;
}
#pin-sheet .pin-popup { font-family: var(--sans); }
#pin-sheet .pin-popup-title { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
#pin-sheet .form-group { margin-bottom: 10px; }
#pin-sheet .form-input, #pin-sheet .form-select {
    background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text);
    border-radius: 8px; padding: 8px 10px; width: 100%; font-size: 13px; box-sizing: border-box;
}
#pin-sheet .form-input:focus, #pin-sheet .form-select:focus { border-color: var(--accent); outline: none; }
#pin-sheet .btn-primary { height: 38px; font-size: 11px; }
#pin-sheet .pp-coords { font-family: var(--mono); font-size: 10px; color: var(--text-dim); margin-bottom: 10px; }

/* ATLAS 'A' drop marker */
.atlas-drop-icon { background: none !important; border: none !important; }
.atlas-drop-marker {
    width: 36px; height: 36px;
    background: var(--accent); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-weight: 800; font-size: 18px;
    color: #0a0a0c; letter-spacing: -0.5px;
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 0 2px 12px rgba(56,189,248,0.5), 0 0 0 4px rgba(56,189,248,0.15);
    animation: atlas-drop-pulse 1.5s ease-in-out infinite;
}
@keyframes atlas-drop-pulse {
    0%, 100% { box-shadow: 0 2px 12px rgba(56,189,248,0.5), 0 0 0 4px rgba(56,189,248,0.15); }
    50% { box-shadow: 0 2px 16px rgba(56,189,248,0.7), 0 0 0 8px rgba(56,189,248,0.1); }
}

/* Pin detail popup (when clicking an existing pin) */
.pin-detail-popup { font-family: var(--sans); }
.pdp-image { margin: -14px -16px 10px; overflow: hidden; border-radius: 12px 12px 0 0; }
.pdp-image img { width: 100%; max-height: 180px; object-fit: cover; display: block; }
.pdp-desc { font-size: 12px; color: var(--text); line-height: 1.5; margin-bottom: 8px; opacity: 0.85; }
.pdp-rating { color: #eab308; font-size: 14px; letter-spacing: 1px; margin-bottom: 6px; }
.pdp-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.pdp-tag {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase;
    background: rgba(56,189,248,0.1); color: var(--accent); padding: 2px 8px; border-radius: 10px;
    border: 1px solid rgba(56,189,248,0.15);
}

/* Pin detail action buttons */
.pdp-actions {
    display: flex; gap: 6px; margin-top: 10px; padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.pdp-action {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
    height: 28px; border: none; border-radius: 6px; font-family: var(--mono);
    font-size: 9px; letter-spacing: 0.5px; cursor: pointer; transition: all 0.15s;
    background: rgba(255,255,255,0.05); color: var(--text-dim);
}
.pdp-action:hover { background: rgba(255,255,255,0.09); color: var(--text); }
.pdp-action:active { transform: scale(0.96); }
.pdp-action svg { width: 11px; height: 11px; }
.pdp-action.pdp-delete:hover { background: rgba(248,113,113,0.1); color: var(--danger); }

/* Suggestion cards */
.sug-card {
    background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    border-radius: 12px; margin: 8px 12px; overflow: hidden;
}
.sug-card-image { width: 100%; max-height: 160px; overflow: hidden; }
.sug-card-image img { width: 100%; height: auto; max-height: 160px; object-fit: cover; display: block; }
.sug-card-body { padding: 12px 14px; }
.sug-card-name { font-weight: 600; font-size: 14px; color: var(--text-bright); margin-bottom: 4px; }
.sug-card-meta { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; }
.sug-card-reason {
    font-size: 12px; color: var(--text); line-height: 1.5; margin-bottom: 8px;
    padding: 8px 10px; background: rgba(255,255,255,0.03); border-radius: 8px;
    border-left: 2px solid var(--accent);
}
.sug-reason-label { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent); }
.sug-card-rating { color: #eab308; font-size: 13px; letter-spacing: 1px; margin-bottom: 4px; }

/* ── DRAW MODE HUD ── */
#draw-hud {
    position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2000;
    display: none; align-items: center; gap: 10px;
    padding: 8px 14px;
    background: #000; backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-radius: 50px; border: 1px solid rgba(56,189,248,0.25);
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.7);
    letter-spacing: 0.3px; white-space: nowrap;
    animation: hudSlideIn 0.3s cubic-bezier(0.16,1,0.3,1);
}
#draw-hud.active { display: flex; }
@keyframes hudSlideIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.draw-hud-btn {
    padding: 4px 12px; border: none; border-radius: 50px; cursor: pointer;
    font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.5px;
    background: var(--accent); color: #000; transition: all 0.15s;
}
.draw-hud-btn:hover { filter: brightness(1.15); }
.draw-hud-cancel { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
.draw-hud-cancel:hover { background: rgba(239,68,68,0.3); color: #ef4444; }

/* ── DRAW POINT MARKERS ── */
.draw-point-icon {
    width: 14px; height: 14px;
    background: #38bdf8;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 0 6px rgba(56,189,248,0.5);
    transition: transform 0.1s, box-shadow 0.1s;
}
.draw-point-icon:hover {
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(56,189,248,0.8);
}
.draw-point-icon:active { cursor: grabbing; }
.draw-point-start {
    background: #22c55e;
    border-color: #fff;
    box-shadow: 0 0 8px rgba(34,197,94,0.6), 0 0 0 3px rgba(34,197,94,0.2);
    width: 18px; height: 18px;
}
.draw-point-start.closeable {
    animation: startPulse 1.2s ease-in-out infinite;
}
@keyframes startPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(34,197,94,0.6), 0 0 0 3px rgba(34,197,94,0.2); }
    50% { box-shadow: 0 0 14px rgba(34,197,94,0.9), 0 0 0 8px rgba(34,197,94,0.25); }
}
.draw-point-start:hover {
    box-shadow: 0 0 12px rgba(34,197,94,0.9), 0 0 0 5px rgba(34,197,94,0.3);
}

/* ── LEAFLET POPUP OVERRIDES ── */
.leaflet-popup-content-wrapper {
    background: var(--surface-solid) !important; border: 1px solid var(--border-accent) !important;
    border-radius: 14px !important; backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 12px 40px rgba(0,0,0,0.4) !important;
}
.leaflet-popup-content { color: var(--text) !important; font-family: var(--sans) !important; font-size: 12px !important; margin: 14px 16px !important; max-height: 65vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }
.leaflet-popup-tip { background: var(--surface-solid) !important; border: 1px solid var(--border) !important; }
.leaflet-popup-close-button { color: var(--text-dim) !important; font-size: 18px !important; }
.leaflet-popup-close-button:hover { color: var(--accent) !important; }

.pdp-layer-badge-wrap { text-align: center; margin-bottom: 8px; }
.pdp-layer-badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--accent);
    background: rgba(255,107,53,0.12);
    border: 1px solid rgba(255,107,53,0.35);
    padding: 4px 8px; border-radius: 6px;
}
.popup-title { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--text-bright); margin-bottom: 6px; }
.popup-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 11px; }
.popup-row .k { color: var(--text-dim); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.popup-row .v { color: var(--text); font-weight: 500; text-align: right; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

.geo-delete-btn {
    width: 100%; margin-top: 8px; padding: 6px 0;
    background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.25); border-radius: 6px;
    color: #f87171; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 1px;
    cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.geo-delete-btn:hover { background: rgba(248,113,113,0.25); border-color: rgba(248,113,113,0.5); }

/* ── DELETE CONFIRMATION OVERLAY ── */
.delete-confirm-overlay {
    position: fixed; inset: 0; z-index: 99990;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s;
}
.delete-confirm-overlay.active { opacity: 1; }
.delete-confirm-card {
    background: var(--surface-solid, #1a1a2e);
    border: 1px solid var(--border-accent, rgba(255,255,255,0.08));
    border-radius: 16px; padding: 28px 24px 20px; width: 320px; max-width: 90vw;
    text-align: center;
    transform: scale(0.92); transition: transform 0.2s;
}
.delete-confirm-overlay.active .delete-confirm-card { transform: scale(1); }
.delete-confirm-title {
    font-family: var(--sans); font-size: 16px; font-weight: 700;
    color: #fff; margin-bottom: 8px;
}
.delete-confirm-msg {
    font-family: var(--sans); font-size: 13px;
    color: rgba(255,255,255,0.55); margin-bottom: 20px; line-height: 1.4;
}
.delete-confirm-actions { display: flex; flex-direction: column; gap: 8px; }
.delete-confirm-btn {
    width: 100%; padding: 10px 0; border-radius: 8px; border: none;
    font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
    cursor: pointer; transition: background 0.15s, transform 0.1s;
}
.delete-confirm-btn:active { transform: scale(0.97); }
.dc-turnoff {
    background: rgba(56,189,248,0.15); color: #38bdf8;
    border: 1px solid rgba(56,189,248,0.25);
}
.dc-turnoff:hover { background: rgba(56,189,248,0.25); }
.dc-delete {
    background: rgba(239,68,68,0.15); color: #ef4444;
    border: 1px solid rgba(239,68,68,0.25);
}
.dc-delete:hover { background: rgba(239,68,68,0.3); }
.dc-cancel {
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.08);
}
.dc-cancel:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }

/* ── CLUSTER ── */
.marker-cluster { background: transparent !important; }
.marker-cluster div {
    background: var(--surface-solid) !important; border: 1.5px solid var(--accent) !important;
    color: var(--accent) !important; font-family: var(--mono) !important; font-size: 11px !important; font-weight: 600 !important;
    box-shadow: 0 0 12px rgba(56,189,248,0.2) !important;
    width: 36px !important; height: 36px !important; margin-left: -18px !important; margin-top: -18px !important;
    border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important;
}
.marker-cluster-small div { border-color: var(--accent) !important; color: var(--accent) !important; }
.marker-cluster-medium div { border-color: var(--warning) !important; color: var(--warning) !important; box-shadow: 0 0 12px rgba(251,191,36,0.2) !important; }
.marker-cluster-large div { border-color: var(--danger) !important; color: var(--danger) !important; box-shadow: 0 0 12px rgba(248,113,113,0.2) !important; }

.atlas-marker { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid; box-shadow: 0 0 8px; transition: all 0.2s ease-out; }
.atlas-marker:hover { transform: scale(1.5); }

.atlas-pin { width: 14px; height: 14px; border-radius: 3px; border: 2px solid; transform: rotate(45deg); box-shadow: 0 0 10px; transition: all 0.2s ease-out; }
.atlas-pin:hover { transform: rotate(45deg) scale(1.3); }

/* ── LOADING OVERLAY ── */
.loading-overlay {
    position: fixed; top: calc(var(--header-h) + 12px); left: 50%; transform: translateX(-50%);
    z-index: 1002;
    background: #000; backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-radius: 20px;
    padding: 6px 18px 6px 14px;
    display: none; align-items: center; gap: 10px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    pointer-events: none;
    animation: pillSlideIn 0.3s cubic-bezier(0.16,1,0.3,1);
}
.loading-overlay.active { display: inline-flex; }
.loader-ring {
    width: 14px; height: 14px; border: 1.5px solid rgba(56,189,248,0.2); border-top-color: var(--accent);
    border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0;
}
.loader-ring::before { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.7); letter-spacing: 0.8px; animation: flicker 1.5s ease-in-out infinite; }
@keyframes flicker { 0%,100% { opacity:1; } 50% { opacity:0.5; } }

/* ── SEARCH THIS AREA BUTTON ── */
#search-area-btn {
    position: fixed; top: calc(var(--header-h) + 12px); left: 50%; transform: translateX(-50%) translateY(-6px);
    z-index: 1003; display: none; align-items: center; gap: 6px;
    height: 34px; padding: 0 16px 0 12px;
    background: #000; backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: none; border-radius: 50px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px; color: var(--accent);
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    opacity: 0; transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
#search-area-btn.visible {
    display: inline-flex; opacity: 1; transform: translateX(-50%) translateY(0);
}
#search-area-btn:active { transform: translateX(-50%) scale(0.96); }
#search-area-btn svg { opacity: 0.7; }

/* ── INLINE LOADING PILL ── */
#pin-loading-pill {
    position: fixed; top: calc(var(--header-h) + 12px); left: 50%; transform: translateX(-50%);
    z-index: 1003; display: none; align-items: center; gap: 8px;
    height: 34px; padding: 0 16px 0 12px;
    background: #000; backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: none; border-radius: 50px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.8px; color: rgba(255,255,255,0.7);
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    animation: pillSlideIn 0.3s cubic-bezier(0.16,1,0.3,1);
    pointer-events: none;
}
#pin-loading-pill.active { display: inline-flex; }
#pin-loading-pill .pill-spinner {
    width: 12px; height: 12px; border: 1.5px solid rgba(56,189,248,0.2);
    border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}
#pin-loading-pill .pill-shimmer {
    position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(56,189,248,0.06), transparent);
    border-radius: 20px; animation: pillShimmer 2s ease-in-out infinite;
}
@keyframes pillSlideIn { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes pillShimmer { 0% { left: -100%; } 100% { left: 200%; } }

/* ── TOAST ── */
#toast-container {
    position: fixed; bottom: calc(100px + var(--safe-b)); left: 50%; transform: translateX(-50%);
    z-index: 50000; display: flex; flex-direction: column-reverse; align-items: center; gap: 6px;
    pointer-events: none;
}
.toast {
    padding: 8px 18px;
    background: #000; backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.06); border-radius: 50px;
    font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.7);
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    animation: toast-in 0.4s cubic-bezier(0.16,1,0.3,1), toast-out 0.3s ease-in 2.7s forwards;
    white-space: nowrap; pointer-events: auto;
}
.toast.error { border-color: rgba(248,113,113,0.15); color: var(--danger); }
@keyframes toast-in { from { opacity:0; transform:translateY(10px) scale(0.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes toast-out { from { opacity:1; } to { opacity:0; transform:translateY(-6px) scale(0.96); } }

/* ── COLOR PICKER ── */
.color-picker-row {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.color-swatch {
    width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; transition: all 0.2s ease-out; flex-shrink: 0;
}
.color-swatch:hover { transform: scale(1.2); }
.color-swatch.active { border-color: var(--text-bright); transform: scale(1.15); }
.color-swatch.custom-swatch {
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) !important;
    display: flex; align-items: center; justify-content: center; position: relative;
    box-shadow: none !important;
}
.color-swatch.custom-swatch span {
    font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.osm-name-step { padding: 16px 20px; }

/* ── Transition helper ── */
.view-fade { animation: viewFadeIn 0.15s ease-out; }
@keyframes viewFadeIn { from { opacity: 0.6; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ── Emoji Markers ── */
.atlas-emoji-marker {
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; line-height: 1;
    background: rgba(10,10,15,0.75); border: 1.5px solid;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.35); transition: transform 0.2s ease-out;
}
.atlas-emoji-marker:hover { transform: scale(1.15); }

/* ── FRIEND PIN (followed-user label ring) ── */
.friend-pin {
    position: relative;
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
}
.friend-pin .atlas-emoji-marker,
.friend-pin .atlas-img-marker {
    position: relative;
    z-index: 1;
}
.friend-pin-ring {
    position: absolute;
    top: 0; left: 0;
    width: 56px; height: 56px;
    pointer-events: none;
    overflow: visible;
}
.friend-pin-ring text {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    fill: #fff;
    letter-spacing: 2px;
    opacity: 0; transition: opacity 0.2s;
}
body.zoom-show-names .friend-pin-ring text {
    opacity: 1;
    text-transform: uppercase;
    paint-order: stroke fill;
    stroke: rgba(0,0,0,0.85);
    stroke-width: 3.5px;
}

.atlas-cluster {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 6px;
    color: #fff; font-family: var(--mono);
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.3px;
    border: none;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: transform 0.2s ease-out;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}
.atlas-cluster:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Override default Leaflet cluster styles */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large {
    background: none !important;
}
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
    background: none !important;
}

/* ── Profile Panel ── */
.profile-card { text-align: center; padding: 24px 20px; }
.profile-avatar {
    width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--accent);
    background: rgba(56,189,248,0.1); display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px; font-size: 28px; color: var(--accent);
}
.profile-name { font-family: var(--sans); font-size: 20px; font-weight: 700; color: var(--text-bright); letter-spacing: 1px; }
.profile-email { font-family: var(--mono); font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.profile-joined { font-family: var(--mono); font-size: 10px; color: var(--text-dim); margin-top: 4px; opacity: 0.6; }
.profile-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    padding: 16px 20px; margin-top: 16px;
}
.profile-stat {
    text-align: center; padding: 12px 8px; border: 1px solid var(--border); border-radius: 8px;
    background: rgba(255,255,255,0.02);
}
.profile-stat .ps-val { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--accent); }
.profile-stat .ps-label { font-family: var(--mono); font-size: 9px; color: var(--text-dim); letter-spacing: 0.5px; margin-top: 4px; text-transform: uppercase; }

.profile-actions { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 8px; }

/* ── Social Interactions ── */
.social-bar {
    display: flex; align-items: center; gap: 16px; padding: 8px 16px;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.social-btn {
    display: flex; align-items: center; gap: 5px; background: none; border: none;
    color: var(--text-dim); font-family: var(--sans); font-size: 12px; font-weight: 500;
    cursor: pointer; transition: all 0.2s ease-out; padding: 4px 0;
}
.social-btn:hover { color: var(--text-bright); }
.social-btn.liked { color: #FF453A; }
.social-btn.liked .heart-icon { animation: heartPop 0.3s ease-out; }
@keyframes heartPop { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } }
.social-btn.following { color: var(--accent); }

/* ── Journey Mode ── */
.journey-toggle {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    border-bottom: 1px solid var(--border); cursor: pointer;
}
.journey-toggle-label { font-family: var(--mono); font-size: 9px; color: var(--text-dim); letter-spacing: 0.5px; flex: 1; }
.journey-switch {
    width: 28px; height: 14px; border-radius: 7px; background: rgba(255,255,255,0.08);
    border: 1px solid var(--border); position: relative; transition: all 0.2s ease-out;
}
.journey-switch.on { background: rgba(167,139,250,0.3); border-color: var(--accent2); }
.journey-switch::after {
    content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%;
    background: var(--text-dim); top: 1px; left: 1px; transition: all 0.2s ease-out;
}
.journey-switch.on::after { left: 15px; background: var(--accent2); }

.journey-timeline { padding: 8px 12px; }
.journey-step {
    display: flex; gap: 10px; padding: 8px 0; position: relative;
}
.journey-step::before {
    content: ''; position: absolute; left: 13px; top: 32px; bottom: -8px; width: 1px;
    background: var(--border); z-index: 0;
}
.journey-step:last-child::before { display: none; }
.journey-num {
    width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--accent2);
    background: rgba(167,139,250,0.1); display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 10px; color: var(--accent2); flex-shrink: 0; z-index: 1;
}
.journey-step-info { flex: 1; }
.journey-step-name { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--text-bright); }
.journey-step-reason { font-family: var(--sans); font-size: 10px; color: var(--text-dim); }

.journey-start {
    margin: 8px 12px; padding: 8px; border: 1px solid var(--accent2); border-radius: 8px;
    background: rgba(167,139,250,0.1); color: var(--accent2); font-family: var(--mono);
    font-size: 11px; font-weight: 600; letter-spacing: 1px; cursor: pointer; text-align: center;
    transition: all 0.2s ease-out; width: calc(100% - 24px);
}
.journey-start:hover { background: rgba(167,139,250,0.2); box-shadow: 0 0 20px rgba(167,139,250,0.15); }

/* ── Club Map Styles ── */
.layer-card.club { border-color: rgba(245,166,35,0.15); }
.layer-card.club .layer-card-header::after {
    content: '\uD83D\uDD12'; position: absolute; top: 8px; right: 8px; font-size: 12px; opacity: 0.5;
}
.layer-card.club .layer-card-header { position: relative; }
.club-badge {
    font-family: var(--mono); font-size: 8px; letter-spacing: 1px; color: var(--accent-warm);
    background: rgba(245,166,35,0.1); border: 1px solid rgba(245,166,35,0.2);
    padding: 1px 6px; border-radius: 4px; margin-left: 6px;
}

.password-modal {
    position: fixed; inset: 0; z-index: 2001; background: rgba(5,5,8,0.85);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center;
}
.password-modal.active { display: flex; }
.password-modal-card {
    width: 320px; padding: 24px; background: var(--surface-solid);
    border: 1px solid var(--border-accent); border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.password-modal-card h3 {
    font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px;
    color: var(--accent); margin-bottom: 16px; text-transform: uppercase;
}

/* ── Layer Contributions ── */
.suggestion-badge {
    background: var(--accent-warm); color: var(--bg); font-size: 8px; font-weight: 700;
    min-width: 14px; height: 14px; border-radius: 7px; display: inline-flex;
    align-items: center; justify-content: center; padding: 0 3px; margin-left: 4px;
}
.suggestion-review { padding: 8px 14px; border-top: 1px solid var(--border); }
.suggestion-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.suggestion-item .si-info { flex: 1; }
.suggestion-item .si-name { font-size: 11px; color: var(--text); }
.suggestion-item .si-coords { font-family: var(--mono); font-size: 9px; color: var(--text-dim); }
.suggestion-item button { padding: 2px 8px; border-radius: 4px; font-family: var(--mono); font-size: 9px; cursor: pointer; border: 1px solid; background: transparent; transition: all 0.2s ease-out; }
.suggestion-item .si-accept { border-color: rgba(52,211,153,0.3); color: var(--success); }
.suggestion-item .si-accept:hover { background: rgba(52,211,153,0.1); }
.suggestion-item .si-reject { border-color: rgba(248,113,113,0.3); color: var(--danger); }
.suggestion-item .si-reject:hover { background: rgba(248,113,113,0.1); }

/* ── Events Layer ── */
.atlas-event-marker {
    width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; background: rgba(10,10,15,0.75);
    border: 1.5px solid; position: relative;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    animation: eventPulse 2s ease-in-out infinite;
}
@keyframes eventPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(167,139,250,0.4); }
    50% { box-shadow: 0 0 0 10px rgba(167,139,250,0); }
}
.event-card { padding: 12px 14px; }
.event-card .ec-date { font-family: var(--mono); font-size: 9px; color: var(--accent2); letter-spacing: 0.5px; }
.event-card .ec-name { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--text-bright); margin-top: 2px; }
.event-card .ec-loc { font-family: var(--sans); font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.event-card .ec-tag {
    display: inline-block; padding: 2px 8px; border-radius: 4px; font-family: var(--mono);
    font-size: 8px; letter-spacing: 0.5px; margin-top: 6px;
    background: rgba(167,139,250,0.1); border: 1px solid rgba(167,139,250,0.2); color: var(--accent2);
}

/* ── Onboarding Tour ── */
.tour-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(0,0,0,0.35); display: none;
}
.tour-overlay.active { display: block; }
.tour-spotlight {
    position: absolute; border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.4);
    transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
    pointer-events: none;
}
.tour-tooltip {
    position: absolute; width: 300px; padding: 20px;
    background: rgba(0,0,0,0.92); backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    animation: tourFadeIn 0.35s ease-out;
}
.tour-tooltip-center { width: 320px; text-align: center; }
@keyframes tourFadeIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.tour-tooltip:not(.tour-tooltip-center) {
    animation: tourSlideIn 0.3s ease-out;
}
@keyframes tourSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.tour-title-row {
    display: flex; justify-content: space-between; align-items: center;
}
.tour-skip {
    background: none; border: 1px solid rgba(255,255,255,0.15); border-radius: 50px;
    color: rgba(255,255,255,0.5); font-family: var(--sans); font-size: 11px;
    padding: 4px 12px; cursor: pointer; transition: all 0.15s;
}
.tour-skip:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.tour-footer {
    display: flex; justify-content: space-between; align-items: center;
}
.tour-dots { display: flex; gap: 6px; align-items: center; }
.tour-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.2); transition: all 0.2s;
}
.tour-dot.active { background: var(--accent); width: 18px; border-radius: 3px; }
.tour-next-btn {
    background: #fff; color: #000; border: none; border-radius: 50px;
    font-family: var(--sans); font-size: 12px; font-weight: 700;
    padding: 8px 20px; cursor: pointer; letter-spacing: 0.5px;
    transition: all 0.15s;
}
.tour-next-btn:hover { background: var(--accent); color: #fff; }
.tour-skip {
    padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px;
    background: transparent; color: var(--text-dim); font-family: var(--mono);
    font-size: 10px; cursor: pointer; transition: all 0.2s ease-out;
}
.tour-skip:hover { border-color: var(--border-accent); color: var(--text); }
.tour-next {
    padding: 6px 16px; border: 1px solid var(--accent); border-radius: 6px;
    background: rgba(56,189,248,0.12); color: var(--accent); font-family: var(--mono);
    font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.2s ease-out;
}
.tour-next:hover { background: rgba(56,189,248,0.25); box-shadow: 0 0 15px rgba(56,189,248,0.15); }

/* ── IMAGE MARKERS & ICON PICKER ── */
.atlas-img-marker {
    width: 32px; height: 32px; border-radius: 50%; border: 2px solid;
    overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.atlas-img-marker img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.layer-card-icon {
    width: 28px; height: 28px; border-radius: 50%; overflow: hidden; margin: 0 8px; flex-shrink: 0;
    background: var(--surface); border: 1px solid var(--border);
}
.layer-card-icon img {
    width: 100%; height: 100%; object-fit: cover;
}
.icon-type-tabs {
    display: flex; gap: 0; margin-bottom: 10px; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border); background: var(--bg);
}
.icon-tab {
    flex: 1; padding: 6px 0; font-family: var(--mono); font-size: 10px; font-weight: 600;
    letter-spacing: 1px; border: none; cursor: pointer; transition: all 0.2s ease-out;
    background: transparent; color: var(--text-dim);
}
.icon-tab.active {
    background: rgba(56,189,248,0.12); color: var(--accent);
}
.icon-tab:hover:not(.active) { color: var(--text); }
.icon-upload-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.icon-upload-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px;
    background: rgba(255,255,255,0.04); color: var(--text-dim);
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.5px;
    cursor: pointer; transition: all 0.2s ease-out; white-space: nowrap;
}
.icon-upload-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(56,189,248,0.06); }
.icon-image-preview {
    width: 48px; height: 48px; border-radius: 10px; overflow: hidden; margin-top: 8px;
    border: 1px solid var(--border); background: var(--bg);
}
.icon-image-preview img {
    width: 100%; height: 100%; object-fit: cover;
}
.icon-image-preview:empty { display: none; }

/* ── Layer card upload button & image preview ── */
.lc-upload-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px;
    background: rgba(255,255,255,0.04); color: var(--text-dim);
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.5px;
    cursor: pointer; transition: all 0.2s ease-out; white-space: nowrap;
    flex-shrink: 0;
}
.lc-upload-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(56,189,248,0.06); }
.lc-img-preview {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
    padding: 6px; border-radius: 8px; background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
}
.lc-img-preview img {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--accent);
}

/* ── Pin popup photo icon ── */
.pp-icon-upload-row {
    display: flex; align-items: center; gap: 8px; margin-top: 6px;
}
.pp-icon-upload-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px;
    background: rgba(255,255,255,0.04); color: var(--text-dim);
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.5px;
    cursor: pointer; transition: all 0.2s ease-out; white-space: nowrap;
}
.pp-icon-upload-btn:hover { border-color: var(--accent); color: var(--accent); }
.pp-icon-preview {
    width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
    border: 2px solid var(--accent); flex-shrink: 0;
}
.pp-icon-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ── PROFILE VIEW ── */
.prof-view { padding: 20px; }
.prof-header { text-align: center; margin-bottom: 20px; }
.prof-avatar {
    margin: 0 auto 10px; width: 64px; height: 64px;
    font-size: 26px; line-height: 64px; cursor: pointer;
}
.prof-name { font-weight: 700; font-size: 18px; color: var(--text); }
.prof-email { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.prof-joined { font-size: 10px; color: var(--text-dim); margin-top: 4px; }
.prof-social-row {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-top: 10px;
}
.prof-social-stat { font-size: 11px; color: var(--text-dim); }
.prof-social-num { font-weight: 700; color: var(--text); }
.prof-social-sep {
    width: 3px; height: 3px; border-radius: 50%; background: var(--text-dim); opacity: 0.5;
}
.prof-stats-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; margin-bottom: 16px;
}
.prof-stat-card {
    text-align: center; padding: 10px 4px; background: var(--surface);
    border-radius: 8px; border: 1px solid var(--border);
}
.prof-stat-num { font-size: 18px; font-weight: 700; color: var(--accent); }
.prof-stat-label {
    font-size: 8px; color: var(--text-dim); text-transform: uppercase;
    letter-spacing: 1px; margin-top: 2px;
}
.prof-section { margin-bottom: 14px; }
.prof-section-title {
    font-family: var(--mono); font-size: 9px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-dim);
    margin-bottom: 8px;
}
.prof-breakdown { display: flex; flex-direction: column; gap: 6px; }
.prof-break-item {
    display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text);
    padding: 6px 10px; background: var(--surface); border-radius: 6px;
    border: 1px solid var(--border);
}
.prof-break-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.prof-break-val { margin-left: auto; font-weight: 700; color: var(--accent); font-size: 13px; }
.prof-activity-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; background: var(--surface); border-radius: 6px;
    border: 1px solid var(--border); margin-bottom: 4px;
}
.prof-activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.prof-activity-info { flex: 1; min-width: 0; }
.prof-activity-name {
    font-size: 12px; color: var(--text); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prof-activity-meta { font-size: 10px; color: var(--text-dim); margin-top: 1px; }
.prof-following-list { display: flex; flex-wrap: wrap; gap: 6px; }
.prof-following-chip {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 10px 4px 4px; background: var(--surface); border-radius: 20px;
    border: 1px solid var(--border); font-size: 11px; color: var(--text);
    cursor: pointer; transition: border-color 0.2s;
}
.prof-following-chip:hover { border-color: var(--accent); }
.prof-following-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(56,189,248,0.15); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
}

/* ── MEMBERSHIP LAYERS ── */
.layer-card.membership {
    border: 1px solid rgba(167,139,250,0.35);
}
.membership-badge {
    background: var(--accent2); color: #fff; font-size: 9px; padding: 2px 6px;
    border-radius: 4px; margin-left: 6px; font-weight: 700; letter-spacing: 0.5px;
}
.invite-code-display {
    font-family: var(--mono); font-size: 13px; letter-spacing: 2px; color: var(--accent);
    background: rgba(56,189,248,0.08); border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 14px; text-align: center; margin: 8px 0; user-select: all;
}
.invite-input-row {
    display: flex; gap: 6px; padding: 0 16px 8px;
}
.invite-input-row .form-input { flex: 1; font-size: 16px; padding: 8px 10px; }

/* ── MOBILE RESPONSIVE ── */
/* ── ADD-TO-HOMESCREEN PROMPT ── */
#a2hs-overlay {
    display: none; position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    align-items: center; justify-content: center; padding: 16px;
}
#a2hs-overlay.active { display: flex; }
#a2hs-card {
    background: var(--surface-solid, #1a1a1e); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px; padding: 28px 24px 20px; width: 100%; max-width: 360px;
    text-align: center; position: relative;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
    animation: a2hs-slide 0.4s cubic-bezier(0.16,1,0.3,1);
}
@keyframes a2hs-slide { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
#a2hs-close {
    position: absolute; top: 12px; right: 14px; background: none; border: none;
    color: rgba(255,255,255,0.4); font-size: 22px; cursor: pointer; line-height: 1;
}
#a2hs-icon { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 12px; }
#a2hs-title {
    font-family: var(--mono); font-size: 15px; font-weight: 700; color: #fff;
    letter-spacing: 0.5px; margin-bottom: 6px;
}
#a2hs-subtitle {
    font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.5; margin-bottom: 18px;
}
#a2hs-steps { text-align: left; margin-bottom: 18px; }
.a2hs-step {
    display: flex; align-items: center; gap: 10px; padding: 8px 0;
    font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.4;
}
.a2hs-step + .a2hs-step { border-top: 1px solid rgba(255,255,255,0.05); }
.a2hs-step-num {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent, #38bdf8); color: #000; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.a2hs-step strong { color: #fff; }
#a2hs-dismiss, #a2hs-android-btn {
    width: 100%; height: 44px; border-radius: 12px; border: none; cursor: pointer;
    font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 1px;
    transition: all 0.2s;
}
#a2hs-dismiss {
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
}
#a2hs-dismiss:active { background: rgba(255,255,255,0.1); }
#a2hs-android-btn {
    background: var(--accent, #38bdf8); color: #000; margin-bottom: 8px;
}
#a2hs-android-btn:active { transform: scale(0.98); }

/* ── MOBILE LAYOUT (< 768px) ── */
@media (max-width: 768px) {
    :root { --panel-w: calc(100vw - 16px); --mob-bar-h: 40px; }

    /* ─ TOP-RIGHT FLOATING PILLS ─ */
    #float-controls {
        top: var(--ui-logo-top, calc(8px + env(safe-area-inset-top, 0px))) !important;
        right: var(--ui-edge, 8px) !important;
        left: auto !important;
        bottom: auto !important;
        transform: none;
        padding: 0;
        background: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-top: none;
        justify-content: flex-end;
        gap: 6px;
        z-index: 1003;
    }
    #float-controls .float-pill,
    #float-controls .float-btn {
        background: #000 !important;
        box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
        backdrop-filter: blur(40px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
        border-radius: 50px;
        height: 36px;
        flex-direction: row;
        gap: 6px;
        padding: 0 14px;
        min-width: unset;
        font-size: 10px;
    }
    #float-controls .float-btn {
        width: 36px; padding: 0;
    }
    #float-controls .float-pill svg,
    #float-controls .float-btn svg {
        width: 14px !important; height: 14px !important;
    }
    #float-controls .float-pill span:not(.layer-count-badge):not(.plan-count-badge) {
        font-size: 10px !important; letter-spacing: 1px !important;
    }
    .layer-count-badge, .plan-count-badge {
        top: -4px !important; right: -4px !important;
        min-width: 14px; height: 14px; font-size: 8px;
    }

    /* User button: compact circle in top-right on mobile */
    #btn-user { position: relative; }
    #btn-user::after { display: none !important; }
    /* If user pill with avatar — clean tab style */
    .float-user-pill::after { display: none !important; }
    .float-user-pill {
        padding: 0 12px 0 4px !important;
    }
    .float-user-pill .user-pill-avatar {
        width: 22px !important; height: 22px !important; font-size: 9px !important;
        order: -1;
    }
    .float-user-pill .user-pill-name {
        font-size: 10px !important; letter-spacing: 1px !important;
        text-transform: uppercase;
    }
    .float-user-pill .user-pill-sep,
    .float-user-pill .user-pill-count,
    .float-user-pill > svg { display: none !important; }

    /* ─ LOGO ─ */
    #float-logo span { font-size: 11px; letter-spacing: 2px; }

    /* ─ LEFT SIDEBAR TOOLS ─ */
    #qt-layers { width: 42px; }
    #qt-layers .qt-trigger { width: 40px; height: 40px; }
    #qt-layers .qt-trigger svg { width: 18px; height: 18px; }
    #qt-layers.expanded {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
    }
    #map-search { width: 42px; }
    #map-search .ms-trigger { width: 40px; height: 40px; }
    #map-search .ms-trigger svg { width: 18px; height: 18px; }
    #map-search.expanded {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
    }

    /* ─ PANELS: popup bottom sheet, above bottom bar ─ */
    #layer-panel, #plans-panel {
        width: calc(100vw - 16px) !important;
        right: var(--ui-edge, 8px) !important; left: var(--ui-edge, 8px) !important;
        top: auto !important;
        bottom: var(--ui-panel-bottom, 50px) !important;
        border-radius: 14px !important;
        max-height: 55vh !important;
        height: fit-content !important;
        transform-origin: bottom center !important;
        padding-top: 0;
    }
    #layer-panel .panel-body,
    #plans-panel .panel-body {
        flex: 0 1 auto;
    }

    /* ─ ZOOM: hide on mobile (pinch-to-zoom is sufficient) ─ */
    .leaflet-control-zoom {
        display: none !important;
    }

    /* ─ NOTIFICATION BELL: inside #float-controls on mobile (reparented by JS) ─ */
    #float-notif {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        width: 36px; height: 36px;
    }
    /* ─ NOTIF PANEL: drop down from top-right on mobile ─ */
    #notif-panel {
        bottom: auto !important;
        left: auto !important;
        top: calc(var(--ui-logo-top, calc(8px + env(safe-area-inset-top, 0px))) + 44px) !important;
        right: var(--ui-edge, 8px) !important;
        transform-origin: top right !important;
    }

    /* ─ STATS BAR ─ */
    #float-stats {
        font-size: 9px; padding: 4px 10px; gap: 5px;
    }

    /* ─ PANEL HEADERS: compact for popup sheets ─ */
    #layer-panel .panel-header,
    #plans-panel .panel-header {
        padding: 12px 16px;
    }
    #layer-panel .panel-title,
    #plans-panel .panel-title {
        font-size: 16px;
    }

    /* ─ TOUCH TARGETS: minimum 44px for mobile ─ */
    .qt-onoff { min-height: 36px; min-width: 48px; font-size: 10px; padding: 6px 12px; }
    .tile-btn { padding: 10px 14px; font-size: 10px; min-height: 40px; }
    .lc-action { min-height: 44px; padding: 10px 6px; }
    .pdp-action { min-height: 40px; height: auto; }
    .tour-skip, .tour-next { padding: 10px 16px; min-height: 40px; }
    .qt-item { min-height: 44px; }

    /* ─ MISC ─ */
    #tile-switcher .ts-menu { min-width: 180px; }
    .create-type-grid { grid-template-columns: 1fr; }
    .category-grid { grid-template-columns: 1fr; }
    .auth-card { padding: 24px; width: 95vw; border-radius: 16px; max-height: 85vh; overflow-y: auto; }
    .profile-stats { grid-template-columns: repeat(2, 1fr); }
    .user-profile-card { max-width: 92vw; }
    .journey-timeline { padding: 6px 8px; }
    .tour-tooltip { width: 280px; max-width: calc(100vw - 32px); }
    .tour-tooltip-center { width: 300px; }

    /* ─ DRAW / QUICK-ADD HUDs: safe area for notch ─ */
    #draw-hud { top: calc(var(--ui-safe-t, 0px) + 12px) !important; }
    #quick-add-hud { top: calc(var(--ui-safe-t, 0px) + 20px) !important; }

    /* ─ EXPLORE PROGRESS: move below logo on mobile ─ */
    #explore-progress { top: calc(var(--ui-safe-t, 0px) + 52px) !important; left: var(--ui-edge, 8px) !important; }

    /* ─ TOAST: above bottom bar on mobile ─ */
    #toast-container {
        bottom: calc(var(--ui-bottom-base, 50px) + 12px) !important;
    }

    /* ─ POPUPS: constrain width ─ */
    .leaflet-popup-content-wrapper { max-width: calc(100vw - 32px) !important; }
    .leaflet-popup-content { max-width: calc(100vw - 48px) !important; }

    /* ─ PLAN CREATION POPUP ─ */
    .plan-popup { min-width: unset !important; }

    /* ─ REDUCE BACKDROP-FILTER ON MOBILE FOR PERF ─ */
    #float-logo,
    #float-stats,
    .leaflet-control-zoom a,
    .leaflet-control-locate a {
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
    }
}

@media (max-width: 480px) {
    #tile-switcher { flex-wrap: wrap; max-width: 200px; }
    #float-stats { font-size: 8px; padding: 3px 8px; gap: 4px; }
}

/* ── LAYERS PILL BUTTON ── */
.float-pill {
    height: 38px; border-radius: 50px; border: none;
    background: #000; backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    color: rgba(255,255,255,0.7); cursor: pointer;
    display: flex; align-items: center; gap: 7px;
    padding: 0 16px 0 12px;
    font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
    transition: all 0.25s ease-out; position: relative;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.float-pill:hover { background: #111; color: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.4); }
.float-pill:active { transform: scale(0.97); }
.float-pill svg { width: 14px; height: 14px; flex-shrink: 0; }
.float-pill span:not(.layer-count-badge):not(.plan-count-badge) { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; }

/* ── PLANS PANEL ── */
#plans-panel {
    position: fixed;
    top: calc(64px + env(safe-area-inset-top, 0px));
    right: 12px;
    width: var(--panel-w);
    max-height: calc(100vh - 80px - env(safe-area-inset-top, 0px));
    z-index: 1002;
    background: var(--surface);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex; flex-direction: column;
    overflow: hidden;
    opacity: 0; transform: scale(0.4); transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.16,1,0.3,1), transform 0.25s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
#plans-panel.open {
    opacity: 1; transform: scale(1); pointer-events: auto;
    border-color: rgba(245,166,35,0.3);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 1px rgba(245,166,35,0.2);
}
#plans-panel.open ~ #qt-layers,
#plans-panel.open ~ #map-search { z-index: 0 !important; pointer-events: none !important; opacity: 0 !important; transition: opacity 0.2s; }
#plans-panel.open::before {
    content: ''; position: absolute; top: -1px; left: 15%; right: 15%; height: 1px;
    background: linear-gradient(90deg, transparent, #F5A623, transparent);
    opacity: 0.5; z-index: 1;
}

/* Plan marker */
.atlas-plan-marker {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    transform: rotate(45deg); border-radius: 8px 8px 8px 2px;
    border: 2.5px solid #F5A623; background: var(--surface-solid);
    box-shadow: 0 2px 10px rgba(245,166,35,0.35);
    transition: all 0.2s; cursor: pointer;
    animation: planPulse 3s ease-in-out infinite;
}
.atlas-plan-marker .plan-marker-inner {
    transform: rotate(-45deg); font-size: 16px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; overflow: hidden; border-radius: 6px 6px 6px 0;
}
.atlas-plan-marker .plan-marker-inner img {
    width: 100%; height: 100%; object-fit: cover;
}
@keyframes planPulse {
    0%, 100% { box-shadow: 0 2px 10px rgba(245,166,35,0.35); }
    50% { box-shadow: 0 2px 16px rgba(245,166,35,0.55); }
}

/* Long-press visual feedback */
.longpress-ring {
    position: absolute; width: 50px; height: 50px; border-radius: 50%;
    border: 2px solid #F5A623; pointer-events: none; z-index: 9999;
    animation: longpressGrow 0.6s ease-out forwards;
}
@keyframes longpressGrow {
    0% { transform: scale(0); opacity: 0.8; }
    100% { transform: scale(1); opacity: 0; }
}

/* Plan form (inside popup) */
.plan-popup { font-family: var(--sans); }
.plan-popup-title {
    font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
    text-transform: uppercase; color: #F5A623; margin-bottom: 10px;
}
.plan-popup .form-group { margin-bottom: 10px; }
.plan-popup .form-input, .plan-popup .form-select {
    height: 32px; font-size: 12px; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12);
}
.plan-popup .form-input:focus, .plan-popup .form-select:focus { border-color: #F5A623; }
.plan-popup .btn-primary { height: 34px; font-size: 10px; background: rgba(245,166,35,0.85); }
.plan-popup .btn-primary:hover { background: #F5A623; }
.plan-popup .pp-divider { margin: 4px 0 10px; }
.plan-popup .pp-actions { display: flex; gap: 8px; margin-top: 6px; }
.plan-popup .pp-actions .btn-primary, .plan-popup .pp-actions .btn-secondary { flex: 1; height: 34px; font-size: 10px; }
.plan-date-row { display: flex; gap: 8px; }
.plan-date-row .form-group { flex: 1; }
.plan-date-row input[type="date"], .plan-date-row input[type="time"] {
    width: 100%; height: 32px; padding: 0 8px; background: rgba(255,255,255,0.06);
    border: none; border-radius: 8px; color: var(--text-bright); font-family: var(--sans);
    font-size: 12px; outline: none; color-scheme: dark;
}

/* Plan detail popup */
.plan-detail-popup { font-family: var(--sans); }
.plan-detail-image { margin: -14px -16px 10px; overflow: hidden; border-radius: 12px 12px 0 0; }
.plan-detail-image img { width: 100%; max-height: 180px; object-fit: cover; display: block; }
.plan-detail-title { font-size: 15px; font-weight: 700; color: var(--text-bright); margin-bottom: 4px; }
.plan-detail-datetime {
    display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px;
    color: #F5A623; letter-spacing: 0.5px; margin-bottom: 8px;
}
.plan-detail-datetime svg { width: 12px; height: 12px; }
.plan-detail-desc { font-size: 12px; color: var(--text); line-height: 1.5; margin-bottom: 8px; opacity: 0.85; }
.plan-detail-vis {
    display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.5px;
    padding: 2px 8px; border-radius: 4px; margin-bottom: 8px;
}
.plan-detail-vis.vis-private { color: var(--text-dim); background: rgba(255,255,255,0.06); }
.plan-detail-vis.vis-public { color: var(--success); background: rgba(52,211,153,0.1); }
.plan-attendee-section {
    margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06);
}
.plan-attendee-label {
    font-family: var(--mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 6px;
}
.plan-attendee {
    display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; color: var(--text);
}
.plan-attendee-avatar {
    width: 22px; height: 22px; border-radius: 50%; background: rgba(245,166,35,0.12);
    border: 1.5px solid rgba(245,166,35,0.2); display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 600; color: #F5A623; flex-shrink: 0;
}
.plan-rsvp-row { display: flex; gap: 4px; margin-top: 8px; }
.plan-rsvp-btn {
    flex: 1; height: 28px; border: none; border-radius: 6px; font-family: var(--mono);
    font-size: 9px; letter-spacing: 0.5px; cursor: pointer; transition: all 0.15s;
    background: rgba(255,255,255,0.05); color: var(--text-dim);
}
.plan-rsvp-btn:hover { background: rgba(255,255,255,0.09); color: var(--text); }
.plan-rsvp-btn.active-going { background: rgba(52,211,153,0.15); color: var(--success); }
.plan-rsvp-btn.active-maybe { background: rgba(245,166,35,0.15); color: #F5A623; }
.plan-rsvp-btn.active-no { background: rgba(248,113,113,0.1); color: var(--danger); }

/* Plan card in panel */
.plan-card {
    background: rgba(255,255,255,0.04); border: none; border-radius: 16px; margin-bottom: 10px;
    overflow: hidden; transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.plan-card:hover { background: rgba(255,255,255,0.06); }
.plan-card.pc-open { background: rgba(255,255,255,0.06); }
.plan-card-header {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
}
.plan-card-icon {
    width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
    border: 1.5px solid #F5A623; display: flex; align-items: center; justify-content: center;
    font-size: 17px; background: rgba(245,166,35,0.06); transform: rotate(45deg);
}
.plan-card-icon span { transform: rotate(-45deg); }
.plan-card-info { flex: 1; min-width: 0; }
.plan-card-name {
    font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--text-bright);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plan-card-meta { font-family: var(--sans); font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.plan-card-date {
    font-family: var(--mono); font-size: 10px; color: #F5A623; letter-spacing: 0.3px;
}
.pc-expanded { padding: 0 14px 14px; animation: lcExpandIn 0.3s cubic-bezier(0.16,1,0.3,1); }
.plan-empty {
    text-align: center; padding: 40px 20px; color: var(--text-dim); font-size: 12px; line-height: 1.6;
}
.plan-empty-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.5; }

/* ── PANTONE COLOR PICKER ── */
.pantone-picker { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pantone-row { display: contents; }
.pantone-chip {
    width: 14px; height: 14px; cursor: pointer; transition: all 0.15s ease-out;
    border-radius: 50%; overflow: hidden; border: 1.5px solid transparent;
    background: rgba(255,255,255,0.02); flex-shrink: 0;
}
.pantone-chip:hover { transform: scale(1.3); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.pantone-chip.active { border-color: #fff; box-shadow: 0 0 6px rgba(255,255,255,0.2); transform: scale(1.2); }
.pantone-color { width: 100%; height: 100%; border-radius: 50%; }
.pantone-label { display: none; }
.pantone-custom {
    width: 14px; height: 14px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    position: relative; border: 1.5px solid transparent; flex-shrink: 0;
}
.pantone-custom span { font-size: 8px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }

/* ── CREATE TYPE CARD SVG ICONS ── */
.ctc-icon svg { color: var(--accent); }

/* ── BRAND LAYER ── */
.brand-type-card {
    border: 1px solid rgba(168, 130, 255, 0.2);
    background: linear-gradient(135deg, rgba(168, 130, 255, 0.06), transparent);
}
.brand-type-card:hover {
    border-color: rgba(168, 130, 255, 0.4);
    background: linear-gradient(135deg, rgba(168, 130, 255, 0.1), transparent);
}

.brand-create-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, #a882ff, #7c5ce0) !important;
}
.brand-create-btn:hover { filter: brightness(1.1); }

.layer-card.brand-layer {
    border-left: 3px solid rgba(168, 130, 255, 0.5);
}
.layer-card.brand-layer.lc-open {
    border-left-color: rgba(168, 130, 255, 0.8);
}

.lc-brand-badge {
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #a882ff;
    background: rgba(168, 130, 255, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 6px;
}

.lc-brand-info {
    background: rgba(168, 130, 255, 0.04);
    border: 1px solid rgba(168, 130, 255, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
}

.lc-brand-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
    font-size: 11px;
}
.lc-brand-key {
    color: var(--text-dim);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    min-width: 60px;
    flex-shrink: 0;
}
.lc-brand-val {
    color: var(--text);
    word-break: break-word;
}
.lc-brand-val a {
    color: var(--accent);
    text-decoration: none;
}
.lc-brand-val a:hover { text-decoration: underline; }

/* ── IMPORT FROM WEB ── */
.import-web-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.import-mode-toggle {
    display: flex;
    gap: 4px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 3px;
    margin-top: 8px;
}

.import-toggle-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease-out;
}
.import-toggle-btn:hover { color: var(--text-bright); background: rgba(255,255,255,0.04); }
.import-toggle-btn.active {
    background: rgba(56, 189, 248, 0.12);
    color: var(--accent);
    font-weight: 600;
}
.import-toggle-btn svg { flex-shrink: 0; }

.import-search-hint {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 8px;
    padding: 0 2px;
    line-height: 1.4;
}

.import-results {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.import-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    color: var(--text-dim);
    font-family: var(--sans);
    font-size: 12px;
}

.import-result-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    transition: all 0.15s ease-out;
}
.import-result-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(56, 189, 248, 0.2);
}

.import-result-info {
    flex: 1;
    min-width: 0;
}
.import-result-name {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.import-result-meta {
    display: flex;
    gap: 8px;
    margin-top: 3px;
}
.import-result-ai-badge {
    display: inline-block; padding: 1px 5px; border-radius: 3px;
    background: rgba(168,85,247,0.2); border: 1px solid rgba(168,85,247,0.3);
    color: #a855f7; font-family: var(--mono); font-size: 9px; font-weight: 600;
    letter-spacing: 0.5px;
}
.import-result-type {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.import-result-points {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
}

.import-result-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.import-btn-preview {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease-out;
}
.import-btn-preview:hover {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.3);
    color: var(--accent);
}
.import-btn-add {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 7px;
    border: none;
    background: rgba(56, 189, 248, 0.15);
    color: var(--accent);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease-out;
}
.import-btn-add:hover {
    background: rgba(56, 189, 248, 0.25);
}
.import-btn-add svg { flex-shrink: 0; }

/* ════════════════════════════════════════
   PSYCHOLOGY-FIRST FEATURES
   ════════════════════════════════════════ */

/* ── QUICK-ADD FAB — REMOVED ── */

/* ── QUICK-ADD HUD ── */
#quick-add-hud {
    position: fixed;
    top: 20px; left: 50%; transform: translateX(-50%);
    z-index: 1200;
    display: none;
    animation: hudSlideIn 0.3s ease-out;
}
#quick-add-hud.active { display: block; }
.qa-hud-inner {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 16px;
    background: #000;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(56,189,248,0.2);
    border-radius: 50px;
    font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,0.7);
}
.qa-hud-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: #22c55e;
    animation: qaPulse 1.5s ease-in-out infinite;
}
@keyframes qaPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.qa-hud-text { white-space: nowrap; letter-spacing: 0.5px; }
.qa-hud-done {
    padding: 4px 12px;
    border-radius: 50px;
    border: none;
    background: var(--accent);
    color: #000;
    font-family: var(--mono); font-size: 10px; font-weight: 700;
    cursor: pointer; transition: all 0.15s;
    letter-spacing: 0.5px;
}
.qa-hud-done:hover { filter: brightness(1.15); }

/* ── QUICK NAME POPUP ── */
.quick-name-popup .leaflet-popup-content-wrapper {
    background: #000 !important;
    border: 1px solid rgba(56,189,248,0.15) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
.quick-name-popup .leaflet-popup-tip { background: #000 !important; }
.qnp { padding: 4px 0; }
.qnp-input {
    width: 100%; padding: 8px 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #fff; font-family: var(--sans); font-size: 16px;
    outline: none; transition: border-color 0.15s;
    box-sizing: border-box;
}
.qnp-input:focus { border-color: var(--accent); }
.qnp-hint {
    margin-top: 4px;
    font-size: 10px; color: rgba(255,255,255,0.3);
    text-align: center;
}

/* ── PIN DROP ANIMATION ── */
@keyframes pinDrop {
    0% { transform: translateY(-30px) scale(0.5); opacity: 0; }
    50% { transform: translateY(4px) scale(1.1); opacity: 1; }
    70% { transform: translateY(-3px) scale(0.95); }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
.pin-drop-anim {
    animation: pinDrop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ── EXPLORE PROGRESS BAR ── */
#explore-progress {
    position: fixed;
    top: 10px; left: 10px;
    z-index: 1000;
    width: 180px;
    display: none;
    opacity: 0;
    transition: opacity 0.3s;
}
#explore-progress.active { display: block; opacity: 1; }
.xp-bar-track {
    width: 100%; height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
}
.xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #38bdf8, #22c55e);
    border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.xp-info {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 3px;
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.5px;
}
.xp-level { color: rgba(255,255,255,0.5); font-weight: 600; }
.xp-score { color: rgba(255,255,255,0.3); }

/* ── GLOBAL MICRO-INTERACTIONS ── */
.btn-primary, .btn-secondary, .lc-action, .tile-btn, .float-btn, .float-pill {
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease-out, opacity 0.15s ease-out !important;
}
.btn-primary:active, .btn-secondary:active, .lc-action:active, .float-btn:active, .float-pill:active {
    transform: scale(0.95) !important;
}
.layer-card {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease-out !important;
}
.layer-card:active {
    transform: scale(0.98) !important;
}

/* ── IMAGE CROPPER OVERLAY ── */
.crop-overlay {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(0,0,0,0.92);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    touch-action: none; user-select: none;
    -webkit-user-select: none;
    animation: cropFadeIn 0.2s ease-out;
}
@keyframes cropFadeIn { from { opacity: 0; } to { opacity: 1; } }

.crop-canvas-wrap {
    position: relative;
    width: 280px; height: 280px;
    overflow: hidden;
    flex-shrink: 0;
}
.crop-canvas-wrap.crop-rect {
    width: 320px; height: 220px;
}
.crop-canvas-wrap img {
    position: absolute;
    transform-origin: 0 0;
    will-change: transform;
    pointer-events: none;
}

/* Mask overlay — uses box-shadow trick for circle, clip-path for rect */
.crop-mask {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 2;
}
.crop-mask.circle {
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.6);
    border: 2px solid rgba(255,255,255,0.3);
}
.crop-mask.rect {
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.6);
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.3);
}

.crop-hint {
    color: rgba(255,255,255,0.45);
    font-family: var(--mono);
    font-size: 11px; letter-spacing: 0.5px;
    margin-top: 16px; text-align: center;
}

.crop-actions {
    display: flex; gap: 12px;
    margin-top: 20px;
}
.crop-actions button {
    font-family: var(--mono);
    font-size: 13px; font-weight: 600;
    letter-spacing: 1px; text-transform: uppercase;
    border: none; border-radius: 10px;
    padding: 12px 32px; cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.crop-actions button:active { transform: scale(0.95); }
.crop-btn-cancel {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
}
.crop-btn-confirm {
    background: var(--accent);
    color: #fff;
}

/* ── NOTIFICATION BELL + PANEL ── */
#float-notif {
    position: fixed;
    bottom: calc(var(--ui-locate-bottom, calc(44px + var(--safe-b))) + 48px);
    left: var(--ui-edge, 12px);
    top: auto;
    z-index: 1001;
    width: 38px; height: 38px;
    background: #000;
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: none; border-radius: 50%;
    box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease-out;
}
#float-notif:active { transform: scale(0.95); }
#float-notif:hover { background: #111; color: #fff; }
.notif-bell-icon { transform-origin: 50% 4px; }
#float-notif.has-unread .notif-bell-icon { animation: notifBellShake 1.6s ease-in-out infinite; color: var(--accent); }
.notif-bell-pulse { display: none; }
#float-notif.has-unread .notif-bell-pulse { display: inline; color: var(--accent); animation: notifPulse 1.4s ease-out infinite; }
@keyframes notifBellShake {
    0%, 90%, 100% { transform: rotate(0); }
    93% { transform: rotate(-12deg); }
    96% { transform: rotate(10deg); }
}
@keyframes notifPulse {
    0% { opacity: 1; transform: scale(1); transform-origin: 18px 6px; }
    100% { opacity: 0; transform: scale(2.2); transform-origin: 18px 6px; }
}
.notif-badge {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: #ef4444;
    border: 2px solid #000;
    border-radius: 50%;
    color: #fff;
    font-family: var(--mono);
    font-size: 9px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}

#notif-panel {
    position: fixed;
    bottom: calc(var(--ui-locate-bottom, calc(44px + var(--safe-b))) + 96px);
    top: auto;
    left: var(--ui-edge, 12px);
    width: 340px; max-width: calc(100vw - 24px);
    max-height: 70vh;
    z-index: 1002;
    background: rgba(18,18,20,0.85);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.6);
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: notifSlideIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: bottom left;
}
#notif-panel.open { display: flex; }
@keyframes notifSlideIn {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.notif-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.notif-title {
    font-family: var(--sans);
    font-size: 13px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--text-bright);
}
.notif-mark-read {
    background: none; border: none;
    font-family: var(--mono);
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--accent);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.notif-mark-read:hover { background: rgba(255,255,255,0.05); }
.notif-scroll {
    flex: 1; overflow-y: auto;
    padding: 6px 0;
    -webkit-overflow-scrolling: touch;
}
.notif-item {
    display: flex; gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
    position: relative;
}
.notif-item:hover { background: rgba(255,255,255,0.04); }
.notif-item.unread {
    background: rgba(34,197,94,0.04);
    border-left-color: var(--accent);
}
.notif-item.unread::after {
    content: '';
    position: absolute;
    top: 18px; right: 16px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 6px rgba(34,197,94,0.6);
}
.notif-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.notif-icon svg { width: 16px; height: 16px; }
.notif-icon.notif-icon-follow { background: rgba(34,197,94,0.15); color: #4ade80; }
.notif-icon.notif-icon-pin { background: rgba(99,102,241,0.15); color: #818cf8; }
.notif-icon.notif-icon-layer { background: rgba(168,85,247,0.15); color: #c084fc; }
.notif-icon.notif-icon-system { background: rgba(251,146,60,0.15); color: #fb923c; }
.notif-body { flex: 1; min-width: 0; }
.notif-text {
    font-family: var(--sans);
    font-size: 13px; line-height: 1.4;
    color: var(--text-bright);
    margin-bottom: 4px;
}
.notif-text strong { color: #fff; font-weight: 700; }
.notif-time {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
}
.notif-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1px;
}

@media (max-width: 480px) {
    #notif-panel { width: calc(100vw - 24px); }
}

/* ── SEARCH RESULT MARKER ── */
.ms-search-marker { background: none !important; border: none !important; pointer-events: none; }
.ms-search-pin {
    width: 36px; height: 36px;
    background: var(--accent);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
    border: 2px solid #fff;
    margin: 0 auto;
    animation: ms-search-pin-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ms-search-pin svg {
    width: 16px; height: 16px;
    color: #fff;
    transform: rotate(45deg);
}
@keyframes ms-search-pin-drop {
    from { opacity: 0; transform: rotate(-45deg) translateY(-20px) scale(0.5); }
    to { opacity: 1; transform: rotate(-45deg) translateY(0) scale(1); }
}
.ms-search-pin-label {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: #fff;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    text-align: center;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    animation: ms-search-pin-label-in 0.3s ease-out 0.2s both;
}
@keyframes ms-search-pin-label-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── JOURNEY MODE ── */
.ms-journey-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ms-journey-badge {
    font-family: var(--mono, monospace);
    font-size: 9px; font-weight: 700; letter-spacing: 1.2px;
    background: linear-gradient(135deg, #38bdf8, #818cf8);
    color: #0a0a0c;
    padding: 3px 7px; border-radius: 4px;
}
.ms-journey-sub {
    font-size: 10px; color: var(--text-dim, rgba(255,255,255,0.4));
    letter-spacing: 0.4px; text-transform: uppercase;
}
.ms-journey-step {
    display: flex; gap: 10px;
    padding: 10px 14px 4px;
    position: relative;
}
.ms-journey-step.last { padding-bottom: 14px; }
.ms-journey-rail {
    display: flex; flex-direction: column; align-items: center;
    flex-shrink: 0; padding-top: 2px;
}
.ms-journey-dot {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(56,189,248,0.12);
    border: 1px solid rgba(56,189,248,0.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 1;
    z-index: 1;
}
.ms-journey-line {
    flex: 1;
    width: 2px;
    background: linear-gradient(to bottom, rgba(56,189,248,0.35), rgba(56,189,248,0.08));
    margin-top: 2px; min-height: 18px;
}
.ms-journey-body { flex: 1; min-width: 0; }
.ms-journey-label {
    font-size: 12px; font-weight: 600;
    color: var(--text, #fff);
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}
.ms-journey-item {
    margin-bottom: 4px;
}
.ms-journey-loading {
    font-size: 10px; color: var(--text-dim, rgba(255,255,255,0.4));
    padding: 4px 0; font-style: italic;
}