:root {
  --bg: #07090c;
  --surface: #0d1115;
  --surface-2: #12171c;
  --surface-3: #171d23;
  --line: rgba(255,255,255,.085);
  --line-strong: rgba(255,255,255,.16);
  --text: #f5f7f8;
  --muted: #84909a;
  --mint: #61f7ce;
  --mint-2: #1fd1a4;
  --coral: #ff5c5c;
  --amber: #ffc261;
  --blue: #69a5ff;
  --sidebar: 244px;
  --topbar: 76px;
  --radius: 18px;
  --shadow: 0 24px 80px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overscroll-behavior-y:none; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { overflow-x: hidden; }
body.drawer-open { overflow:hidden; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

.brand { display: flex; align-items: center; gap: 11px; font-weight: 900; font-size: 14px; letter-spacing: .14em; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; color: #07110e; background: var(--mint); font-weight: 950; font-size: 17px; clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%); }
.brand-large .brand-mark { width: 42px; height: 42px; font-size: 22px; }
.eyebrow, .section-label { color: var(--mint); font-size: 10px; font-weight: 900; letter-spacing: .19em; }
.pulse-dot { width: 7px; height: 7px; background: var(--mint); border-radius: 50%; display: inline-block; box-shadow: 0 0 0 0 rgba(97,247,206,.55); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(97,247,206,0); } 100% { box-shadow: 0 0 0 0 rgba(97,247,206,0); } }

/* Authentication */
.auth-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(480px, 1.35fr) minmax(420px, .65fr); background: #07090c; }
.auth-visual { min-height: 100vh; position: relative; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: linear-gradient(90deg, rgba(4,7,9,.05), rgba(4,7,9,.7)), url('/static/assets/map-fallback.png') center 52% / cover; }
.auth-visual::after { content:""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(5,8,10,.12),rgba(5,8,10,.08) 45%,#07090c 112%), radial-gradient(circle at 58% 48%, transparent 0 16%, rgba(5,8,10,.55) 72%); }
.auth-visual > * { position: relative; z-index: 1; }
.auth-copy { max-width: 660px; margin-bottom: 7vh; }
.auth-copy h1 { font-size: clamp(52px, 6vw, 92px); line-height: .91; letter-spacing: -.065em; margin: 18px 0 24px; text-transform: uppercase; font-style: italic; }
.auth-copy h1 em { color: var(--mint); font-style: inherit; }
.auth-copy > p { color: #c4ccd0; font-size: 17px; max-width: 440px; line-height: 1.6; }
.live-strip { display: inline-flex; align-items: center; gap: 9px; margin-top: 28px; background: rgba(8,12,14,.72); border: 1px solid var(--line); border-radius: 100px; padding: 11px 16px; color: #aeb7bd; font-size: 12px; backdrop-filter: blur(16px); }
.live-strip strong { color: #fff; }
.auth-panel { display: grid; place-items: center; padding: 40px 7vw; border-left: 1px solid var(--line); background: radial-gradient(circle at 100% 0,rgba(97,247,206,.06),transparent 35%),#090c0f; }
.auth-box { width: min(390px, 100%); }
.auth-box h2 { font-size: 36px; letter-spacing: -.04em; margin: 12px 0 8px; }
.auth-box > p { margin: 0 0 32px; color: var(--muted); font-size: 14px; }
.auth-box label, .form-card label, .modal label { display: grid; gap: 8px; margin: 0 0 16px; color: #afb8be; font-size: 12px; font-weight: 750; letter-spacing: .02em; }
input, textarea, select { width: 100%; color: var(--text); background: #11161b; border: 1px solid var(--line); border-radius: 11px; padding: 14px 15px; transition: .2s border-color,.2s background; }
input::placeholder, textarea::placeholder { color: #56616a; }
input:focus, textarea:focus, select:focus { border-color: rgba(97,247,206,.55); background: #131a1e; outline: none; }
.btn { min-height: 42px; border: 1px solid var(--line); background: var(--surface-3); border-radius: 10px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 12px; font-weight: 850; cursor: pointer; transition: .2s transform,.2s background,.2s border-color; }
.btn:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.btn svg { width: 16px; }
.btn-primary { color: #06100d; background: var(--mint); border-color: var(--mint); box-shadow: 0 10px 30px rgba(97,247,206,.12); }
.btn-primary:hover { background: #7effda; }
.btn-danger { color: #ff8585; background: rgba(255,92,92,.08); border-color: rgba(255,92,92,.25); }
.btn-wide { width: 100%; justify-content: space-between; min-height: 50px; padding: 0 18px; }
.text-btn, .demo-login { width: 100%; border: 0; cursor: pointer; background: transparent; color: var(--muted); font-size: 12px; margin-top: 22px; }
.text-btn strong { color: var(--text); }
.demo-login { border: 1px dashed var(--line-strong); border-radius: 9px; padding: 10px; margin-top: 14px; }
.demo-login span { color: var(--mint); margin-left: 4px; }
.pwa-install-auth { margin-top:14px; padding:13px; border:1px solid rgba(97,247,206,.18); border-radius:11px; background:rgba(97,247,206,.035); }
.pwa-install-auth .btn { justify-content:center; color:var(--mint); border-color:rgba(97,247,206,.24); background:rgba(97,247,206,.07); }
.pwa-install-auth small { display:block; margin-top:8px; color:var(--muted); font-size:9px; line-height:1.5; text-align:center; }
.pwa-install-card { display:flex; align-items:center; gap:14px; }
.pwa-install-card > div { min-width:0; flex:1; }
.pwa-install-card strong,.pwa-install-card small { display:block; }
.pwa-install-card strong { color:#dce4e6; font-size:11px; }
.pwa-install-card small { margin-top:5px; color:var(--muted); font-size:8px; line-height:1.5; }
.pwa-install-card .btn { flex:none; min-width:105px; }
.btn:disabled { cursor:not-allowed; opacity:.42; transform:none; }
.mobile-brand { display: none; }

/* Shell */
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 1000; inset: 0 auto 0 0; width: var(--sidebar); padding: 26px 16px 18px; display: flex; flex-direction: column; background: rgba(8,11,14,.97); border-right: 1px solid var(--line); }
.sidebar .brand { padding: 0 12px 28px; }
.side-nav { display: grid; gap: 5px; }
.side-nav button, .side-bottom > button { position: relative; width: 100%; height: 45px; border: 0; border-radius: 10px; padding: 0 13px; display: flex; align-items: center; gap: 13px; cursor: pointer; background: transparent; color: #7f8a93; font-size: 12px; font-weight: 750; text-align: left; }
.side-nav button:hover, .side-bottom > button:hover { color: #d9dfe2; background: rgba(255,255,255,.035); }
.side-nav button.active, .side-bottom > button.active { color: var(--text); background: linear-gradient(90deg,rgba(97,247,206,.12),rgba(97,247,206,.03)); }
.side-nav button.active::before, .side-bottom > button.active::before { content:""; position:absolute; left:0; width:2px; height:22px; background:var(--mint); box-shadow:0 0 12px var(--mint); }
.side-nav svg, .side-bottom svg { width: 18px; }
.nav-live { margin-left:auto; width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px var(--mint); }
.side-bottom { margin-top: auto; display: grid; gap: 7px; }
.mini-profile { display:grid; grid-template-columns:34px 1fr 28px; align-items:center; gap:10px; margin-top:10px; padding:14px 7px 0; border-top:1px solid var(--line); }
.mini-profile strong, .mini-profile span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini-profile strong { font-size:11px; }
.mini-profile span { color:var(--muted); font-size:9px; margin-top:3px; }
.mini-profile button { border:0; background:transparent; color:#65717a; cursor:pointer; padding:4px; }
.avatar, .top-avatar { flex:none; display:grid; place-items:center; overflow:hidden; border-radius:50%; color:#06100d; background:linear-gradient(135deg,var(--mint),#cbfff1); font-size:10px; font-weight:950; }
.avatar img, .top-avatar img { width:100%; height:100%; display:block; object-fit:cover; }
.avatar { width:34px; height:34px; }
.main-stage { min-height:100vh; margin-left:var(--sidebar); background:var(--bg); }
.topbar { position:fixed; z-index:900; top:0; right:0; left:var(--sidebar); height:var(--topbar); padding:0 28px; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(180deg,rgba(7,9,12,.97),rgba(7,9,12,.82)); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); }
.topbar h2 { margin:0; font-size:16px; letter-spacing:-.02em; }
.topbar > div > span { display:block; margin-top:5px; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.topbar b { color:var(--mint); font-weight:800; }
.top-actions { display:flex; align-items:center; gap:10px; }
.points-pill { height:34px; display:flex; align-items:center; gap:7px; padding:0 12px; background:var(--surface-2); border:1px solid var(--line); border-radius:100px; }
.points-pill svg { width:14px; color:var(--amber); }
.points-pill strong { font-size:11px; }
.points-pill span { color:var(--muted); font-size:8px; font-weight:850; }
.icon-btn, .top-avatar { border:1px solid var(--line); cursor:pointer; }
.icon-btn { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--surface-2); color:#a4adb4; }
.icon-btn svg { width:16px; }
.icon-btn i { position:absolute; width:6px; height:6px; border-radius:50%; background:var(--coral); transform:translate(8px,-8px); }
.top-avatar { width:34px; height:34px; padding:0; }
.view { display:none; min-height:calc(100vh - var(--topbar)); }
.view.active { display:block; animation:view-in .3s ease both; }
@keyframes view-in { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
.content-view, .admin-view { padding:calc(var(--topbar) + 36px) clamp(22px,3.4vw,56px) 60px; max-width:1500px; margin:auto; }
.mobile-nav, .mobile-only { display:none; }
.drawer-overlay { display:none; }

/* Installed app shells must not hand a downward swipe to browser refresh.
   Content pages keep their own contained scroller; the map remains fixed. */
@media (display-mode: standalone) {
  html, body {
    width:100%;
    height:100%;
    min-height:0;
    overflow:hidden;
    overscroll-behavior:none;
  }
  body {
    position:fixed;
    inset:0;
  }
  .auth-screen {
    height:100dvh;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .app-shell,
  .main-stage {
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }
  .content-view,
  .admin-view {
    height:100dvh;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
}
html.pwa-standalone,
html.pwa-standalone body {
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  overscroll-behavior:none;
}
html.pwa-standalone body {
  position:fixed;
  inset:0;
}
html.pwa-standalone .auth-screen {
  height:100dvh;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
html.pwa-standalone .app-shell,
html.pwa-standalone .main-stage {
  height:100dvh;
  min-height:0;
  overflow:hidden;
}
html.pwa-standalone .content-view,
html.pwa-standalone .admin-view {
  height:100dvh;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* Map */
.view-map { position:fixed; inset:var(--topbar) 0 0 var(--sidebar); overflow:hidden; background:#111820; }
.map-canvas { width:100%; height:100%; z-index:1; background:#111820; }
.map-canvas.heading-up .leaflet-map-pane { rotate:var(--map-bearing,0deg); transition:rotate .38s linear; }
.map-canvas.heading-up .leaflet-marker-icon > * { rotate:var(--map-counter-bearing,0deg); transition:rotate .38s linear; }
.map-canvas.heading-up .leaflet-popup-content-wrapper,
.map-canvas.heading-up .leaflet-popup-tip { rotate:var(--map-counter-bearing,0deg); transition:rotate .38s linear; }
.map-shade { position:absolute; z-index:400; pointer-events:none; inset:0; background:linear-gradient(90deg,rgba(4,7,9,.08),transparent 35%,rgba(4,7,9,.08)),linear-gradient(0deg,rgba(4,7,9,.28),transparent 20%); }
.leaflet-container { font-family:inherit; background:#111820; }
.leaflet-tile-pane { filter:grayscale(.25) invert(.88) hue-rotate(155deg) brightness(.95) contrast(.9) saturate(.72); }
.leaflet-tile { will-change:transform,opacity; transition:opacity .18s linear; }
.leaflet-control-attribution { background:rgba(7,9,12,.65)!important; color:#63717a!important; font-size:8px!important; }
.leaflet-control-attribution a { color:#9babae!important; }
.floating-panel { z-index:500; position:absolute; background:rgba(10,14,17,.86); border:1px solid var(--line-strong); box-shadow:var(--shadow); backdrop-filter:blur(18px); }
.map-search { top:20px; left:50%; transform:translateX(-50%); width:min(430px,40vw); height:46px; display:flex; align-items:center; gap:11px; padding:0 14px; border-radius:12px; }
.map-search svg { color:var(--muted); width:16px; }
.map-search input { min-width:0; flex:1; padding:0; border:0; background:transparent; font-size:11px; }
.map-search kbd { color:#64717a; background:#161d22; border:1px solid var(--line); padding:4px 7px; border-radius:5px; font-size:8px; }
.map-status { position:absolute; z-index:500; top:24px; left:22px; display:flex; align-items:center; gap:8px; color:#c5cdd1; font-size:8px; letter-spacing:.12em; }
.map-status strong { color:var(--mint); }
.map-status span:last-child { padding-left:7px; border-left:1px solid var(--line-strong); }
.map-tools { right:20px; top:50%; transform:translateY(-50%); width:42px; padding:4px; border-radius:12px; display:grid; }
.map-tools button { width:32px; height:34px; display:grid; place-items:center; border:0; cursor:pointer; color:#d9e0e3; background:transparent; font-size:19px; }
.map-tools button:hover { color:var(--mint); }
.map-tools button.override-active { color:var(--coral); background:rgba(255,92,92,.09); border-radius:8px; }
.map-tools button.gps-active,.map-tools button.follow-active { color:var(--mint); background:rgba(97,247,206,.09); border-radius:8px; }
.map-tools button.gps-off { color:#7a858c; }
.map-tools button.heading-active { color:var(--amber); background:rgba(255,194,97,.1); border-radius:8px; }
.map-tools button.heading-active svg { filter:drop-shadow(0 0 5px rgba(255,194,97,.45)); }
.map-tools span { height:1px; background:var(--line); margin:2px 4px; }
.map-tools svg { width:16px; }
.map-tools #map-legend-toggle.active { color:var(--mint); background:rgba(97,247,206,.09); border-radius:8px; }
.map-legend { z-index:620; top:50%; right:72px; width:230px; max-height:calc(100% - 40px); overflow:auto; padding:14px; border-radius:15px; transform:translateY(-50%); }
.map-legend[hidden] { display:none; }
.map-legend header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:1px 1px 11px; border-bottom:1px solid var(--line); }
.map-legend header > div { display:grid; gap:5px; }
.map-legend header strong { font-size:13px; }
.map-legend header button { width:28px; height:28px; padding:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; cursor:pointer; color:var(--muted); background:#151b20; }
.map-legend header button svg { width:13px; }
.map-legend-list { display:grid; padding:7px 0; }
.map-legend-list label { min-width:0; min-height:52px; display:grid; grid-template-columns:30px minmax(0,1fr) 31px; align-items:center; gap:9px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.045); }
.map-legend-list label:last-child { border:0; }
.legend-symbol { width:27px; height:27px; display:grid; place-items:center; color:#07100e; background:var(--mint); border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 4px rgba(97,247,206,.08); font-size:7px; font-style:normal; font-weight:950; }
.legend-symbol.events { color:#fff; background:var(--coral); border-radius:8px; transform:rotate(45deg); }
.legend-symbol.events span { transform:rotate(-45deg); }
.legend-symbol.pois { color:var(--coral); background:#151a1f; border-color:var(--coral); }
.legend-symbol.challenges { background:var(--amber); }
.map-legend-list label > span { min-width:0; }
.map-legend-list strong,.map-legend-list small { display:block; }
.map-legend-list strong { color:#dce3e6; font-size:9px; }
.map-legend-list small { margin-top:4px; color:var(--muted); font-size:7px; }
.map-legend-list small b { color:#8f9aa1; }
.map-legend-list input { display:none; }
.map-legend-list em { width:30px; height:17px; position:relative; border-radius:99px; background:#252d33; transition:.2s; }
.map-legend-list em::after { content:""; position:absolute; top:3px; left:3px; width:11px; height:11px; border-radius:50%; background:#7a858c; transition:.2s; }
.map-legend-list input:checked + em { background:rgba(97,247,206,.28); }
.map-legend-list input:checked + em::after { left:16px; background:var(--mint); box-shadow:0 0 7px rgba(97,247,206,.45); }
.map-legend footer { padding-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:7px; border-top:1px solid var(--line); }
.map-legend footer button { height:30px; border:1px solid var(--line); border-radius:7px; cursor:pointer; color:#9ca7ad; background:#13191d; font-size:8px; font-weight:850; }
.map-legend footer button:hover { color:var(--mint); border-color:rgba(97,247,206,.22); }
.map-radio-hud { right:20px; bottom:78px; width:360px; min-height:76px; padding:8px; display:grid; grid-template-columns:minmax(0,1fr) 60px; align-items:center; gap:8px; border-radius:16px; }
.map-radio-picker { min-width:0; height:58px; display:grid; grid-template-columns:34px minmax(0,1fr) 34px; align-items:center; border:1px solid var(--line); border-radius:11px; background:rgba(6,10,12,.64); }
.map-radio-picker > button { width:34px; height:100%; padding:0; display:grid; place-items:center; border:0; cursor:pointer; color:#9ba7ad; background:transparent; font-size:25px; }
.map-radio-picker > button:hover { color:var(--mint); }
.map-radio-picker > div { min-width:0; text-align:center; }
.map-radio-picker small,.map-radio-picker strong,.map-radio-picker span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.map-radio-picker small { color:var(--mint); font-size:6px; font-weight:900; letter-spacing:.15em; }
.map-radio-picker strong { margin:3px 0 2px; font-size:11px; }
.map-radio-picker span { color:var(--muted); font-size:7px; }
.map-ptt-button { width:58px; height:58px; padding:0; position:relative; display:grid; place-items:center; align-content:center; gap:1px; border:1px solid rgba(97,247,206,.35); border-radius:50%; cursor:pointer; color:var(--mint); background:radial-gradient(circle,#1a2826,#0d1415 70%); box-shadow:0 0 0 5px rgba(97,247,206,.035); touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.map-ptt-button svg { width:16px; height:16px; }
.map-ptt-button strong { font-size:7px; letter-spacing:.08em; }
.map-ptt-button small { color:#718078; font-size:5px; font-weight:800; }
.map-ptt-button.transmitting { color:#06100d; background:var(--mint); box-shadow:0 0 0 7px rgba(97,247,206,.12),0 0 35px rgba(97,247,206,.3); transform:scale(.96); }
.map-ptt-button.transmitting small { color:#18332c; }
.map-ptt-button.sending { color:var(--amber); border-color:rgba(255,194,97,.45); pointer-events:none; }
.map-ptt-button:disabled { cursor:not-allowed; opacity:.38; filter:saturate(.35); }
.alert-fab { position:absolute; z-index:500; right:20px; bottom:22px; height:42px; padding:0 15px; border:1px solid rgba(255,255,255,.13); border-radius:100px; display:flex; align-items:center; gap:8px; cursor:pointer; background:#11171b; box-shadow:var(--shadow); font-size:10px; font-weight:850; }
.alert-fab svg { width:14px; color:var(--coral); }
.route-card { top:80px; right:20px; width:240px; padding:12px; border-radius:13px; }
.route-card:not([hidden]) { animation:pin-card-in .3s cubic-bezier(.2,.85,.25,1) both; }
.route-card h3 { overflow:hidden; margin:5px 28px 3px 0; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.route-metrics { display:flex; gap:6px; margin:0 0 8px; color:#aab5bb; font-size:9px; }
.route-close { position:absolute; right:7px; top:7px; width:27px; height:27px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:50%; background:#11171b; color:var(--muted); cursor:pointer; }
.route-close svg { width:12px; }
.route-card #start-route { min-height:32px; }
.route-card #start-route:disabled { cursor:default; opacity:.78; }
.pin-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:6px; }
.pin-actions .btn { min-width:0; min-height:29px; padding:0 7px; font-size:8px; }
.route-card.navigation-active .pin-actions { display:none; }
.event-map-picker { z-index:650; top:82px; left:50%; width:min(570px,calc(100% - 40px)); padding:14px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; border-radius:15px; transform:translateX(-50%); animation:event-picker-in .3s cubic-bezier(.2,.85,.25,1) both; }
.event-map-picker > div { min-width:0; display:grid; gap:4px; }
.event-map-picker strong { font-size:12px; }
.event-map-picker small { color:var(--muted); font-size:9px; }
.event-route-map-editor { z-index:720; top:20px; left:20px; width:min(400px,calc(100% - 100px)); height:min(640px,calc(100% - 40px)); max-height:calc(100% - 40px); padding:16px; display:flex; flex-direction:column; gap:12px; overflow:hidden; border-radius:17px; background:rgba(8,12,15,.94); }
.route-map-editor-head { flex:none; display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }
.route-map-editor-head > div:first-child { min-width:0; }
.route-map-editor-head strong,.route-map-editor-head small { display:block; }
.route-map-editor-head > div:first-child strong { margin-top:5px; font-size:14px; }
.route-map-editor-head > div:first-child small { margin-top:4px; color:var(--muted); font-size:8px; }
.route-map-live-metrics { flex:none; text-align:right; }
.route-map-live-metrics strong { color:var(--mint); font-size:14px; }
.route-map-live-metrics span { display:block; max-width:130px; margin-top:4px; color:#8b989f; font-size:7px; }
.route-map-tools { flex:none; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.route-map-tools button { min-width:0; height:54px; padding:5px 3px; display:grid; place-items:center; align-content:center; gap:4px; border:1px solid var(--line); border-radius:9px; cursor:pointer; color:#91a0a7; background:#11171b; }
.route-map-tools button i { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:#07100e; background:#69a5ff; font-size:8px; font-style:normal; font-weight:950; }
.route-map-tools button[data-route-map-tool="start"] i { background:var(--mint); }
.route-map-tools button[data-route-map-tool="regroup"] i { background:var(--amber); }
.route-map-tools button[data-route-map-tool="finish"] i { color:#fff; background:var(--coral); }
.route-map-tools button span { overflow:hidden; width:100%; font-size:7px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.route-map-tools button.active { color:#eafff9; border-color:rgba(97,247,206,.55); background:rgba(97,247,206,.11); box-shadow:0 0 20px rgba(97,247,206,.08); }
.route-map-hint { flex:none; margin:0; padding:9px 10px; color:#9ca8ae; background:rgba(97,247,206,.045); border-radius:8px; font-size:8px; line-height:1.45; }
.route-map-list { min-height:0; max-height:none; flex:1 1 0; display:grid; align-content:start; gap:5px; overflow:auto; overscroll-behavior:contain; padding-right:3px; }
.route-map-list-row { min-height:50px; display:grid; grid-template-columns:27px minmax(0,1fr) auto; align-items:center; gap:8px; padding:7px; border:1px solid var(--line); border-radius:9px; background:rgba(0,0,0,.18); }
.route-map-list-row > i { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; color:#07100e; background:#69a5ff; font-size:8px; font-style:normal; font-weight:950; }
.route-map-list-row > i.start { background:var(--mint); }
.route-map-list-row > i.regroup { background:var(--amber); }
.route-map-list-row > i.finish { color:#fff; background:var(--coral); }
.route-map-list-row span { min-width:0; }
.route-map-list-row input { height:27px; padding:0 7px; border-radius:6px; font-size:8px; }
.route-map-list-row small { display:block; overflow:hidden; margin-top:3px; color:#6f7c84; font-size:6px; text-overflow:ellipsis; white-space:nowrap; }
.route-map-list-row > div { display:flex; gap:3px; }
.route-map-list-row > div button { width:25px; height:25px; padding:0; border:1px solid var(--line); border-radius:6px; cursor:pointer; color:#9ca7ad; background:#151c21; font-size:8px; }
.route-map-list-row > div button:last-child { color:var(--coral); }
.route-map-list-row > div button:disabled { cursor:not-allowed; opacity:.25; }
.route-map-empty { padding:18px 9px; text-align:center; color:var(--muted); font-size:8px; line-height:1.5; }
.route-map-editor-actions { flex:none; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.route-map-editor-actions .btn:disabled { cursor:not-allowed; opacity:.35; }
.route-editing .map-search,.route-editing .map-status,.route-editing .map-radio-hud,.route-editing .alert-fab,.route-editing .featured-card,.route-editing .route-card,.location-picking .map-search,.location-picking .map-status,.location-picking .map-radio-hud,.location-picking .alert-fab,.location-picking .featured-card { display:none!important; }
.event-location-field { margin:0 0 16px; padding:12px; display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--line); border-radius:11px; background:#11161b; }
.event-location-field > div { min-width:0; display:grid; gap:4px; }
.event-location-field span { color:var(--mint); font-size:8px; font-weight:900; letter-spacing:.14em; }
.event-location-field strong { overflow:hidden; color:#dfe6e8; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.event-location-field .btn { flex:none; min-height:36px; }
@keyframes pin-card-in { from { opacity:0; transform:translateY(-8px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes event-picker-in { from { opacity:0; transform:translateX(-50%) translateY(-8px) scale(.97); } to { opacity:1; transform:translateX(-50%); } }
.mission-active .featured-card { display:none!important; }
.active-mission-hud { position:absolute; z-index:610; bottom:22px; left:22px; width:min(400px,calc(100% - 120px)); padding:11px 13px 12px; overflow:hidden; border-radius:15px; background:linear-gradient(145deg,rgba(8,13,16,.96),rgba(7,10,13,.94)); box-shadow:0 24px 70px rgba(0,0,0,.58),inset 0 0 45px rgba(97,247,206,.025); backdrop-filter:blur(22px); }
.active-mission-hud::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; border-radius:17px 0 0 17px; background:var(--mint); box-shadow:0 0 22px var(--mint); }
.active-mission-hud header { display:flex; align-items:center; justify-content:space-between; }
.active-mission-hud header > div { display:flex; align-items:center; gap:7px; color:var(--mint); font-size:7px; font-weight:950; letter-spacing:.17em; }
.mission-live-dot { width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 0 rgba(97,247,206,.55); animation:pulse 1.8s infinite; }
.active-mission-hud header button { width:24px; height:24px; padding:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; cursor:pointer; color:#839097; background:#12181c; }
.active-mission-hud header button svg { width:13px; }
.active-mission-hud h3 { margin:2px 0 7px; overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.mission-objective-row { min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:9px; }
.mission-objective-row > i { width:34px; height:34px; display:grid; place-items:center; border:2px solid #fff; border-radius:10px; color:#07100e; background:var(--blue); box-shadow:0 0 0 5px rgba(105,165,255,.09); font-size:10px; font-style:normal; font-weight:950; }
.mission-objective-row > i.start { background:var(--mint); }.mission-objective-row > i.regroup { background:var(--amber); }.mission-objective-row > i.finish { color:#fff; background:var(--coral); }.mission-objective-row > i.meet { background:#c48cff; }.mission-objective-row > i.complete { background:var(--mint); }
.mission-objective-row > span { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; }
.mission-objective-row small { grid-column:1/-1; color:#6f7d85; font-size:6px; font-weight:900; letter-spacing:.14em; }
.mission-objective-row strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.mission-objective-row em { color:var(--mint); font-size:8px; font-style:normal; font-weight:850; white-space:nowrap; }
.mission-progress-track { height:3px; margin-top:8px; overflow:hidden; border-radius:10px; background:#242d32; }
.mission-progress-track i { width:0; height:100%; display:block; border-radius:10px; background:var(--mint); box-shadow:0 0 12px var(--mint); transition:width .35s ease; }
.mission-progress-meta { margin-top:4px; display:flex; justify-content:space-between; color:#748088; font-size:6px; }
.mission-actions { margin-top:7px; display:grid; grid-template-columns:1fr auto; gap:6px; }
.mission-actions .btn { min-height:29px; font-size:8px; }
.mission-actions #mission-skip { color:var(--amber); }
.mission-exit-confirm { position:absolute; z-index:3; inset:0; padding:13px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; background:rgba(8,13,16,.985); backdrop-filter:blur(22px); }
.mission-exit-confirm[hidden] { display:none; }
.mission-exit-confirm > div { min-width:0; }
.mission-exit-confirm strong,.mission-exit-confirm small { display:block; }
.mission-exit-confirm strong { font-size:11px; }
.mission-exit-confirm small { margin-top:4px; color:var(--muted); font-size:7px; }
.mission-exit-confirm .btn { min-height:31px; padding:0 10px; font-size:8px; white-space:nowrap; }
.mission-waypoint { border:0!important; overflow:visible!important; background:transparent!important; }
.mission-waypoint-core { width:38px; height:38px; display:grid; place-items:center; border:2px solid #fff; border-radius:50%; color:#07100e; background:var(--blue); box-shadow:0 0 0 6px rgba(105,165,255,.13),0 9px 25px rgba(0,0,0,.55); font-size:9px; font-weight:950; }
.mission-waypoint-core.start { background:var(--mint); }.mission-waypoint-core.regroup { background:var(--amber); }.mission-waypoint-core.finish { color:#fff; background:var(--coral); }.mission-waypoint-core.meet { color:#fff; background:#9c62df; }
.mission-waypoint.passed .mission-waypoint-core { color:#9eaaa9; border-color:#82908d; background:#26312f; box-shadow:none; }
.mission-waypoint.skipped .mission-waypoint-core { color:#8d969b; border-color:#6c7479; background:#252a2d; box-shadow:none; opacity:.72; }
.mission-waypoint.skipped .mission-waypoint-core::after { content:"/"; position:absolute; color:var(--coral); font-size:28px; font-weight:500; transform:rotate(18deg); }
.mission-waypoint.future .mission-waypoint-core { opacity:.7; filter:saturate(.55); }
.mission-waypoint.current .mission-waypoint-core { animation:mission-waypoint-pulse 1.5s infinite; }
.mission-waypoint-tooltip { padding:6px 9px!important; border:1px solid rgba(97,247,206,.35)!important; border-radius:8px!important; color:#eafff9!important; background:#0c1315!important; box-shadow:0 8px 25px rgba(0,0,0,.45)!important; font-size:8px!important; font-weight:850!important; }
.mission-privacy-note { margin:12px 0 0!important; padding:11px 12px; border:1px solid rgba(97,247,206,.13); border-radius:9px; color:#839098!important; background:rgba(97,247,206,.035); font-size:8px!important; line-height:1.5!important; }.mission-privacy-note strong { color:var(--mint); }
.event-card.active-mission-event { border-color:rgba(97,247,206,.42); box-shadow:inset 0 0 35px rgba(97,247,206,.035),0 12px 35px rgba(0,0,0,.22); }
@keyframes mission-waypoint-pulse { 0%,100% { box-shadow:0 0 0 6px rgba(97,247,206,.12),0 0 15px rgba(97,247,206,.2); } 50% { box-shadow:0 0 0 13px rgba(97,247,206,0),0 0 28px rgba(97,247,206,.45); } }
.featured-card { position:absolute; z-index:500; bottom:22px; left:22px; width:min(480px,calc(100% - 120px)); min-height:118px; padding:18px 18px 18px 22px; display:grid; grid-template-columns:54px 1fr 40px; align-items:center; gap:18px; overflow:hidden; background:rgba(8,12,15,.9); border:1px solid var(--line-strong); border-radius:16px; box-shadow:var(--shadow); backdrop-filter:blur(22px); }
.card-accent { position:absolute; inset:0 auto 0 0; width:3px; background:var(--mint); box-shadow:0 0 20px var(--mint); }
.event-date { height:62px; display:grid; place-items:center; align-content:center; background:var(--surface-3); border:1px solid var(--line); border-radius:10px; }
.event-date strong { font-size:22px; letter-spacing:-.05em; }
.event-date span { color:var(--mint); font-size:8px; font-weight:900; letter-spacing:.16em; }
.tag { display:flex; align-items:center; gap:6px; color:var(--mint); font-size:7px; font-weight:900; letter-spacing:.16em; }
.tag i { width:5px; height:5px; border-radius:50%; background:var(--mint); }
.featured-copy h3 { margin:7px 0 4px; font-size:17px; }
.featured-copy p { margin:0; color:var(--muted); font-size:9px; }
.avatar-stack { display:flex; align-items:center; margin-top:10px; }
.avatar-stack i { width:20px; height:20px; margin-left:-5px; display:grid; place-items:center; border:2px solid #0a0e11; border-radius:50%; background:#29343a; font-size:7px; font-style:normal; font-weight:900; }
.avatar-stack i:first-child { margin-left:0; background:var(--mint); color:#05100d; }
.avatar-stack span { margin-left:6px; color:#97a2a8; font-size:8px; }
.round-arrow { width:36px; height:36px; border:1px solid var(--line); border-radius:50%; cursor:pointer; color:#06100d; background:var(--mint); }
.user-marker, .event-marker, .alert-marker, .challenge-marker { border:0!important; background:transparent!important; }
.user-marker { overflow:visible!important; transition:transform .45s linear,opacity .25s ease!important; }
.user-marker-shell { position:relative; width:42px; height:42px; }
.user-marker-shell .marker-core { position:absolute; inset:4px; }
.user-heading { position:absolute; z-index:2; inset:0; pointer-events:none; transform:rotate(var(--heading)); transition:transform .35s linear; }
.map-canvas.heading-up .user-heading { transform:rotate(calc(var(--heading) + var(--map-bearing))); }
.user-heading::before { content:""; position:absolute; top:-2px; left:50%; width:0; height:0; border-right:3px solid transparent; border-bottom:6px solid #fff; border-left:3px solid transparent; filter:drop-shadow(0 0 3px rgba(97,247,206,.9)); transform:translateX(-50%); }
.user-marker-shell.offline .marker-core { color:#d3d6d8; background:#565d62; border-color:#a2a8ac; box-shadow:0 0 0 6px rgba(120,126,130,.12),0 8px 20px rgba(0,0,0,.5); filter:grayscale(1); }
.user-marker.offline { opacity:.72; filter:grayscale(1); }
.marker-core { width:34px; height:34px; display:grid; place-items:center; border:2px solid #fff; border-radius:50%; color:#07100e; background:var(--mint); box-shadow:0 0 0 7px rgba(97,247,206,.13),0 8px 24px rgba(0,0,0,.55); font-size:8px; font-weight:950; }
.marker-core.event { border-radius:10px; background:var(--coral); color:#fff; transform:rotate(45deg); }
.marker-core.event span { transform:rotate(-45deg); }
.marker-core.challenge { background:var(--amber); }
.marker-core.alert { background:#151a1f; color:var(--coral); border-color:var(--coral); }
.map-cluster { border:0!important; background:transparent!important; }
.cluster-core { width:52px; height:52px; display:grid; place-items:center; border:3px solid #fff; border-radius:50%; color:#06100d; background:var(--mint); box-shadow:0 0 0 9px rgba(97,247,206,.2),0 10px 30px rgba(0,0,0,.72); font-size:20px; font-weight:950; line-height:1; }
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow { transition:transform .3s ease-out,opacity .3s ease-in; }
.dropped-pin-marker { border:0!important; background:transparent!important; overflow:visible!important; }
.dropped-pin-shell { position:relative; width:54px; height:64px; animation:dropped-pin-in .42s cubic-bezier(.2,1.25,.4,1) both; }
.dropped-pin-pulse { position:absolute; left:14px; bottom:4px; width:26px; height:12px; border:2px solid rgba(97,247,206,.72); border-radius:50%; animation:dropped-pin-breathe 1.8s ease-out infinite; }
.dropped-pin-core { position:absolute; left:15px; top:15px; width:24px; height:24px; border:3px solid #fff; border-radius:50% 50% 50% 8px; background:var(--mint); box-shadow:0 7px 22px rgba(0,0,0,.7); transform:rotate(-45deg); animation:dropped-pin-float 1.8s ease-in-out infinite; }
.dropped-pin-core::after { content:""; position:absolute; inset:6px; border-radius:50%; background:#07100e; }
.dropped-pin-remove { position:absolute; z-index:2; top:-3px; right:-3px; width:23px; height:23px; padding:0; display:grid; place-items:center; border:1px solid rgba(255,255,255,.32); border-radius:50%; color:#fff; background:#11171b; box-shadow:0 5px 14px rgba(0,0,0,.65); cursor:pointer; font-size:16px; font-weight:800; line-height:1; }
.dropped-pin-remove:hover { color:var(--coral); border-color:var(--coral); }
@keyframes dropped-pin-in { from { opacity:0; transform:translateY(-24px) scale(.6); } to { opacity:1; transform:none; } }
@keyframes dropped-pin-breathe { 0% { opacity:.8; transform:scale(.55); } 75%,100% { opacity:0; transform:scale(1.65); } }
@keyframes dropped-pin-float { 0%,100% { translate:0 0; } 50% { translate:0 -3px; } }
.you-marker { width:22px; height:22px; border:3px solid #fff; border-radius:50%; background:#57a5ff; box-shadow:0 0 0 12px rgba(87,165,255,.15); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { color:var(--text); background:#101519; box-shadow:var(--shadow); }
.leaflet-popup-content-wrapper { border:1px solid var(--line-strong); border-radius:12px; }
.leaflet-popup-content { font-size:11px; }
.leaflet-popup-content strong { color:var(--mint); }
.map-popup-title { display:block; max-width:220px; padding:0; border:0; color:var(--mint); background:transparent; cursor:pointer; font:inherit; font-weight:900; text-align:left; }
.map-popup-title:hover, .map-popup-title:focus-visible { color:#fff; text-decoration:underline; }
.map-popup-meta { display:block; margin-top:5px; color:#a8b4ba; line-height:1.4; }
.map-popup-delete { width:100%; height:28px; margin-top:10px; border:1px solid rgba(255,92,92,.32); border-radius:7px; cursor:pointer; color:#ff8a8a; background:rgba(255,92,92,.08); font:inherit; font-size:9px; font-weight:850; }.map-popup-delete:hover,.map-popup-delete:focus-visible { color:#fff; border-color:rgba(255,92,92,.58); background:rgba(255,92,92,.17); }.map-popup-delete:disabled { opacity:.5; cursor:wait; }
.map-popup-confirm { width:100%; height:28px; margin-top:10px; border:1px solid rgba(97,247,206,.32); border-radius:7px; cursor:pointer; color:var(--mint); background:rgba(97,247,206,.08); font:inherit; font-size:9px; font-weight:850; }.map-popup-confirm:hover,.map-popup-confirm:focus-visible { color:#fff; border-color:rgba(97,247,206,.58); background:rgba(97,247,206,.17); }.map-popup-confirm:disabled { cursor:default; color:#82918c; border-color:var(--line); background:rgba(255,255,255,.035); }
.map-user-popup { width:225px; padding:2px; }
.map-user-head { display:grid; grid-template-columns:38px minmax(0,1fr) 8px; align-items:center; gap:10px; }
.map-user-avatar { width:38px; height:38px; font-size:11px; }
.map-user-head > div:nth-child(2) { min-width:0; }
.map-user-name { max-width:100%; padding:0; display:block; overflow:hidden; border:0; color:var(--text); background:transparent; cursor:pointer; font-size:12px; font-weight:900; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.map-user-name:hover { color:var(--mint); text-decoration:underline; }
.map-user-head span { display:block; margin-top:3px; overflow:hidden; color:#718089; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.map-user-head > i { width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 9px rgba(97,247,206,.7); }
.map-user-head > i.offline { background:#657079; box-shadow:none; }
.map-user-presence { display:block; margin:10px 0; color:#94a0a7; font-size:8px; }
.map-user-stats { display:grid; grid-template-columns:1fr 1fr; border-block:1px solid var(--line); }
.map-user-stats span { padding:9px 0; }
.map-user-stats span + span { padding-left:12px; border-left:1px solid var(--line); }
.map-user-stats small,.map-user-vehicle small { display:block; color:#65727b; font-size:7px; font-weight:900; letter-spacing:.12em; }
.map-user-stats strong { display:block; margin-top:3px; color:var(--mint); font-size:12px; }
.map-user-vehicle { min-width:0; margin-top:10px; display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:9px; }
.map-user-car { width:48px; height:34px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line); border-radius:7px; color:#68757c; background:#0b0f12; }
.map-user-car img { width:100%; height:100%; object-fit:cover; }.map-user-car svg { width:19px; }
.map-user-vehicle strong { display:block; margin-top:3px; overflow:hidden; color:#dfe5e7; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.map-user-loading { margin-top:10px; color:#65727b; font-size:8px; }

/* Content pages */
.page-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; }
.page-intro h1, .admin-header h1 { margin:7px 0 7px; font-size:38px; letter-spacing:-.05em; }
.page-intro p, .admin-header p { margin:0; color:var(--muted); font-size:13px; }
.panel { background:linear-gradient(145deg,rgba(19,24,29,.96),rgba(11,15,18,.96)); border:1px solid var(--line); border-radius:var(--radius); }
.stat-strip { display:grid; grid-template-columns:repeat(3,1fr); margin:0 0 28px; background:var(--surface); border:1px solid var(--line); border-radius:14px; }
.stat-strip > div { padding:18px 22px; border-right:1px solid var(--line); }
.stat-strip > div:last-child { border:0; }
.stat-strip span, .garage-stat span, .profile-rank span, .season-clock span { display:block; color:var(--muted); font-size:8px; font-weight:900; letter-spacing:.15em; }
.stat-strip strong { display:block; margin-top:6px; font-size:21px; }
.mint { color:var(--mint); }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.crew-card { position:relative; min-height:220px; padding:22px; overflow:hidden; background:linear-gradient(150deg,rgba(22,28,33,.98),rgba(9,12,15,.98)); border:1px solid var(--line); border-radius:16px; }
.crew-card::after { content:""; position:absolute; width:170px; height:170px; right:-70px; top:-65px; border-radius:50%; background:var(--crew-color); filter:blur(70px); opacity:.13; }
.crew-badge { position:relative; z-index:1; width:50px; height:50px; display:grid; place-items:center; color:#07100e; background:var(--crew-color); clip-path:polygon(50% 0,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%); font-size:11px; font-weight:950; letter-spacing:.06em; }
.crew-card h3 { margin:20px 0 5px; font-size:18px; }
.crew-card p { min-height:34px; margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
.card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:22px; padding-top:15px; border-top:1px solid var(--line); }
.card-footer span { color:#9ba5ab; font-size:10px; }
.card-footer button { border:0; cursor:pointer; color:var(--mint); background:transparent; font-size:10px; font-weight:850; }
.friends-section { margin-top:34px; }
.section-title-row { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:15px; }
.section-title-row h3 { margin:7px 0 0; font-size:18px; }
.section-title-row form { display:flex; gap:7px; width:min(420px,100%); }
.section-title-row input { height:42px; }
.friend-add-tools { width:min(590px,100%); display:flex; justify-content:flex-end; gap:8px; }
.friend-add-tools form { min-width:0; flex:1; }
.friend-add-tools > .btn { flex:none; min-height:42px; }
.friend-qr-icon { font-size:16px; line-height:1; }
.friend-method-note { margin-bottom:14px; padding:12px 14px; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:10px; font-size:9px; }
.friend-request-list { margin-bottom:15px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.friend-request-list[hidden] { display:none; }
.friend-request-card { min-width:0; min-height:72px; padding:11px 12px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:10px; border:1px solid rgba(97,247,206,.18); border-radius:12px; background:linear-gradient(135deg,rgba(97,247,206,.055),rgba(12,17,20,.96)); }
.friend-request-card > div:nth-child(2) { min-width:0; }
.friend-request-card span,.friend-request-card strong,.friend-request-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.friend-request-card span { color:var(--mint); font-size:6px; font-weight:950; letter-spacing:.14em; }
.friend-request-card strong { margin-top:4px; font-size:10px; }
.friend-request-card small { margin-top:3px; color:var(--muted); font-size:7px; }
.friend-request-card > i { color:var(--amber); font-size:8px; font-style:normal; }
.friend-request-actions { display:flex; gap:5px; }
.friend-request-actions button { height:29px; padding:0 9px; border:1px solid var(--line); border-radius:7px; cursor:pointer; color:#929ea5; background:#151b20; font-size:7px; font-weight:850; }
.friend-request-actions button.accept { color:#06100d; border-color:var(--mint); background:var(--mint); }
.friend-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.friend-card { display:flex; align-items:center; gap:11px; padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.friend-card > div:nth-child(2) { min-width:0; flex:1; }
.friend-card strong,.friend-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.friend-card strong { font-size:10px; }.friend-card small { margin-top:3px; color:var(--muted); font-size:8px; }
.friend-card button { border:0; cursor:pointer; color:var(--coral); background:transparent; font-size:9px; }
.friend-card [data-open-dm] { color:var(--mint); }
.friend-qr-modal { display:grid; grid-template-columns:minmax(0,1fr) 300px; align-items:center; gap:25px; min-height:360px; }
.friend-qr-heading h2 { margin:7px 0 10px; font-size:30px; }
.friend-qr-heading p { max-width:430px; color:var(--muted); font-size:11px; line-height:1.65; }
.friend-qr-display { text-align:center; }
.friend-qr-canvas-shell { width:246px; height:246px; position:relative; display:grid; place-items:center; margin:0 auto 11px; padding:8px; overflow:hidden; border-radius:18px; background:#f5fffc; box-shadow:0 0 0 1px rgba(97,247,206,.3),0 20px 60px rgba(0,0,0,.45); }
.friend-qr-canvas-shell #friend-qr-canvas,.friend-qr-canvas-shell #friend-qr-canvas img,.friend-qr-canvas-shell #friend-qr-canvas canvas { width:230px!important; height:230px!important; display:block; }
.friend-qr-canvas-shell::before,.friend-qr-canvas-shell::after,.friend-qr-canvas-shell > i::before,.friend-qr-canvas-shell > i::after { content:""; position:absolute; width:24px; height:24px; border-color:var(--mint); border-style:solid; }
.friend-qr-canvas-shell::before { top:3px; left:3px; border-width:3px 0 0 3px; border-radius:8px 0 0; }.friend-qr-canvas-shell::after { top:3px; right:3px; border-width:3px 3px 0 0; border-radius:0 8px 0 0; }.friend-qr-canvas-shell > i::before { bottom:3px; left:3px; border-width:0 0 3px 3px; border-radius:0 0 0 8px; }.friend-qr-canvas-shell > i::after { right:3px; bottom:3px; border-width:0 3px 3px 0; border-radius:0 0 8px; }
.friend-qr-display > strong,.friend-qr-display > small { display:block; }
.friend-qr-display > strong { font-size:12px; }.friend-qr-display > small { margin-top:5px; color:var(--mint); font-size:8px; }.friend-qr-display > small.expired { color:var(--coral); }
.friend-qr-buttons { margin-top:13px; display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.friend-qr-buttons .btn { min-height:34px; }
.friend-qr-photo { min-height:31px; margin-top:7px; display:grid; place-items:center; cursor:pointer; font-size:8px; }
.friend-qr-photo input { display:none; }
.friend-qr-scanner { grid-column:2; text-align:center; }
.friend-qr-scanner[hidden] { display:none; }
.friend-qr-video-shell { aspect-ratio:1; position:relative; overflow:hidden; border:1px solid rgba(97,247,206,.38); border-radius:18px; background:#050709; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.friend-qr-video-shell video { width:100%; height:100%; object-fit:cover; }
.friend-qr-video-shell span { position:absolute; inset:16%; border:2px solid var(--mint); border-radius:15px; box-shadow:0 0 0 999px rgba(0,0,0,.25),0 0 25px rgba(97,247,206,.2); }
.friend-qr-scanner > strong { display:block; min-height:30px; margin:11px 0; color:var(--muted); font-size:8px; line-height:1.5; }
.filter-row { display:flex; gap:7px; margin-bottom:18px; }
.chip { height:32px; padding:0 14px; border:1px solid var(--line); border-radius:100px; cursor:pointer; color:var(--muted); background:var(--surface); font-size:10px; font-weight:750; }
.chip.active { color:#06100d; background:var(--mint); border-color:var(--mint); }
.event-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.event-card { min-height:220px; position:relative; overflow:hidden; padding:22px; background:linear-gradient(130deg,rgba(19,25,30,.98),rgba(9,13,16,.98)); border:1px solid var(--line); border-radius:17px; }
.event-card::before { content:""; position:absolute; width:220px; height:220px; inset:-130px -50px auto auto; border-radius:50%; background:var(--event-color,var(--mint)); filter:blur(65px); opacity:.14; }
.event-card-top { position:relative; display:flex; justify-content:space-between; }
.event-type { color:var(--event-color,var(--mint)); font-size:9px; font-weight:900; letter-spacing:.16em; }
.event-card h3 { position:relative; margin:23px 0 7px; font-size:22px; }
.event-card p { position:relative; color:var(--muted); font-size:11px; line-height:1.5; }
.event-card .card-footer button { height:32px; padding:0 13px; color:#07100e; background:var(--event-color,var(--mint)); border-radius:8px; }
.event-route-preview { position:relative; margin:14px 0 2px; padding:11px 12px; border:1px solid rgba(105,165,255,.16); border-radius:10px; background:rgba(105,165,255,.035); }
.event-route-nodes { position:relative; min-height:22px; display:flex; align-items:center; justify-content:space-between; gap:4px; }
.event-route-nodes::before { content:""; position:absolute; z-index:0; left:9px; right:9px; top:10px; height:2px; background:linear-gradient(90deg,var(--mint),#69a5ff); opacity:.45; }
.event-route-nodes i { position:relative; z-index:1; width:21px; height:21px; flex:none; display:grid; place-items:center; border:2px solid #9aa6ad; border-radius:50%; color:#07100e; background:#9aa6ad; font-size:7px; font-style:normal; font-weight:950; }
.event-route-nodes i.start { border-color:var(--mint); background:var(--mint); }
.event-route-nodes i.meet { border-color:var(--mint); background:var(--mint); }
.event-route-nodes i.checkpoint { border-color:#69a5ff; background:#69a5ff; }
.event-route-nodes i.regroup { border-color:var(--amber); background:var(--amber); }
.event-route-nodes i.finish { border-color:var(--coral); background:var(--coral); color:#fff; }
.event-route-nodes i.more { border-color:#637079; color:#c9d0d4; background:#182027; }
.event-route-preview > small { display:block; overflow:hidden; margin-top:7px; color:#7f8c95; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.event-route-detail { margin:18px 0; padding:16px; border:1px solid rgba(105,165,255,.2); border-radius:13px; background:rgba(105,165,255,.035); }
.event-route-detail-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.event-route-detail-head strong { display:block; margin-top:5px; font-size:11px; }
.event-route-detail .event-route-preview { margin-bottom:13px; }
.event-route-timeline { display:grid; gap:6px; }
.event-route-timeline > div { min-height:47px; display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:10px; padding:7px 8px; border:1px solid var(--line); border-radius:9px; background:rgba(0,0,0,.12); }
.event-route-timeline i,.route-editor-meet > i,.route-editor-row > i { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; color:#07100e; background:#69a5ff; font-size:8px; font-style:normal; font-weight:950; }
.event-route-timeline i.start,.event-route-timeline i.meet,.route-editor-meet > i.meet { background:var(--mint); }
.event-route-timeline i.regroup,.route-editor-row > i.regroup { background:var(--amber); }
.event-route-timeline i.finish,.route-editor-row > i.finish { color:#fff; background:var(--coral); }
.event-route-timeline span strong,.event-route-timeline span small { display:block; }
.event-route-timeline span strong { font-size:10px; }.event-route-timeline span small { margin-top:3px; color:var(--muted); font-size:7px; text-transform:capitalize; }
.event-route-timeline .btn { min-height:29px; padding:0 10px; font-size:8px; }
.route-join-note { display:block; margin-top:10px; color:var(--muted); font-size:8px; }
.event-route-builder { margin:16px 0; padding:14px; border:1px solid rgba(105,165,255,.2); border-radius:12px; background:rgba(105,165,255,.025); }
.event-route-builder-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; }
.event-route-builder-head strong { display:block; margin-top:4px; font-size:10px; }
.event-route-builder-head > div:last-child { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.event-route-builder-head .btn { min-height:31px; padding:0 9px; font-size:8px; }
.route-editor-meet,.route-editor-row { min-height:49px; display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:9px; padding:7px 8px; border-bottom:1px solid var(--line); }
.route-editor-meet span strong,.route-editor-meet span small,.route-editor-row span small { display:block; }
.route-editor-meet span strong { font-size:9px; }.route-editor-meet span small,.route-editor-row span small { margin-top:3px; color:var(--muted); font-size:7px; }
.route-editor-row input { height:30px; padding:0 8px; font-size:9px; }
.route-editor-row > div { display:flex; gap:3px; }
.route-editor-row > div button { min-width:27px; height:27px; padding:0 5px; border:1px solid var(--line); border-radius:6px; cursor:pointer; color:#9ca7ad; background:#151c21; font-size:8px; }
.route-editor-row > div button:last-child { color:var(--coral); }
.route-editor-row > div button:disabled { cursor:not-allowed; opacity:.25; }
.route-builder-empty { padding:18px 8px; text-align:center; color:var(--muted); font-size:9px; }
.route-builder-empty strong,.route-builder-empty span { display:block; }
.route-builder-empty strong { margin-bottom:5px; color:#dfe5e8; font-size:10px; }
.route-builder-empty span { line-height:1.5; }
.route-builder-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; }
.route-builder-summary span strong,.route-builder-summary span small { display:block; }
.route-builder-summary span strong { font-size:10px; }.route-builder-summary span small { margin-top:3px; color:var(--muted); font-size:7px; }
.route-builder-summary .btn { min-height:31px; font-size:8px; }
.event-route-map-marker { border:0!important; background:transparent!important; }
.event-route-map-core { width:32px; height:32px; display:grid; place-items:center; border:3px solid #fff; border-radius:50%; color:#07100e; background:#69a5ff; box-shadow:0 0 0 6px rgba(105,165,255,.15),0 8px 22px rgba(0,0,0,.6); font-size:9px; font-weight:950; }
.event-route-map-core.start,.event-route-map-core.meet { background:var(--mint); }.event-route-map-core.regroup { background:var(--amber); }.event-route-map-core.finish { color:#fff; background:var(--coral); }
.route-editor-draggable .event-route-map-core { width:36px; height:36px; cursor:grab; box-shadow:0 0 0 7px rgba(97,247,206,.12),0 10px 28px rgba(0,0,0,.68); animation:route-pin-breathe 2s ease-in-out infinite; }
.leaflet-drag-target.route-editor-draggable .event-route-map-core { cursor:grabbing; animation:none; transform:scale(1.1); }
@keyframes route-pin-breathe { 50% { box-shadow:0 0 0 11px rgba(97,247,206,.035),0 12px 30px rgba(0,0,0,.7); } }
.event-meeting-detail { margin:14px 0; padding:11px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:10px; background:#11161b; }
.event-meeting-detail > span { min-width:0; display:grid; grid-template-columns:20px minmax(0,1fr); align-items:center; gap:2px 7px; }
.event-meeting-detail svg { grid-row:1/3; width:17px; color:var(--mint); }
.event-meeting-detail strong,.event-meeting-detail small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.event-meeting-detail strong { font-size:10px; }.event-meeting-detail small { color:var(--muted); font-size:7px; }
.event-meeting-detail .btn { flex:none; min-height:34px; padding:0 10px; font-size:8px; }
.secure-pill { height:34px; display:flex; align-items:center; gap:8px; padding:0 12px; color:var(--mint); background:rgba(97,247,206,.06); border:1px solid rgba(97,247,206,.18); border-radius:100px; font-size:9px; font-weight:800; }
.secure-pill svg { width:14px; }
.radio-layout { min-height:580px; display:grid; grid-template-columns:220px 1fr 260px; overflow:hidden; }
.channels { padding:22px 12px; border-right:1px solid var(--line); }
.channels #radio-dynamic-channels { display:grid; gap:2px; }
.channels .section-label { display:block; padding:0 10px 14px; color:#64717a; }
.radio-group-label { display:block; padding:15px 10px 5px; color:#56636c; font-size:7px; font-weight:900; letter-spacing:.15em; }
.channels button { width:100%; min-height:53px; padding:9px 10px; display:flex; gap:12px; align-items:center; text-align:left; border:0; border-radius:10px; cursor:pointer; color:#8e9aa2; background:transparent; }
.channels button.active { color:var(--text); background:rgba(97,247,206,.075); }
.channels button > i { width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; color:var(--mint); font-style:normal; }
.channels button > i.dm-avatar { border-radius:50%; font-size:9px; font-weight:900; }
.channels strong, .channels small { display:block; }
.channels strong { font-size:11px; }
.channels small { color:#637079; font-size:8px; margin-top:4px; }
.comms { display:grid; grid-template-rows:58px 1fr 65px; min-width:0; }
.comms-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 20px; border-bottom:1px solid var(--line); font-size:11px; }
.comms-head > div { display:flex; align-items:center; gap:9px; }
.comms-head strong,.comms-head small { display:block; }.comms-head small { margin-top:3px; color:var(--muted); font-size:8px; }
.channel-controls { margin-left:auto; display:flex!important; align-items:center; gap:8px!important; }
.channel-controls > span { color:var(--muted); font-size:9px; white-space:nowrap; }
.channel-mute { height:27px; padding:0 9px; border:1px solid var(--line); border-radius:7px; cursor:pointer; color:#9aa5ac; background:#151b20; font-size:8px; font-weight:850; }
.channel-mute.muted { color:var(--coral); border-color:rgba(255,92,92,.25); background:rgba(255,92,92,.07); }
.mini-toggle { margin:0!important; display:flex!important; align-items:center; gap:5px!important; cursor:pointer; color:var(--muted)!important; font-size:8px!important; }
.mini-toggle input { display:none; }.mini-toggle i { width:28px; height:16px; position:relative; border-radius:20px; background:#293139; }
.mini-toggle i::after { content:""; position:absolute; width:10px; height:10px; left:3px; top:3px; border-radius:50%; background:#8b969d; transition:.2s; }
.mini-toggle input:checked + i { background:rgba(97,247,206,.28); }.mini-toggle input:checked + i::after { left:15px; background:var(--mint); }
.message-list { overflow-y:auto; padding:20px; max-height:455px; }
.message { display:grid; grid-template-columns:32px 1fr; gap:10px; margin:0 0 18px; }
.message .avatar { width:32px; height:32px; }
.message strong { font-size:10px; }
.message time { margin-left:7px; color:#56616a; font-size:8px; }
.message p { margin:5px 0 0; color:#c1c8cc; font-size:11px; line-height:1.5; }
.message-form { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:10px 14px; border-top:1px solid var(--line); }
.message-form input { height:42px; }
.message-form button { height:38px; border:0; border-radius:8px; padding:0 16px; cursor:pointer; color:#07100e; background:var(--mint); font-size:10px; font-weight:900; }
.message-form button:disabled { cursor:not-allowed; opacity:.35; }
.ptt-zone { padding:22px; display:flex; flex-direction:column; align-items:center; border-left:1px solid var(--line); }
.ptt-zone > .section-label { align-self:flex-start; color:#64717a; }
.voice-user { width:100%; margin:23px 0 45px; display:flex; align-items:center; gap:10px; }
.voice-user strong, .voice-user small { display:block; }
.voice-user strong { font-size:10px; }
.voice-user small { color:var(--muted); font-size:8px; margin-top:3px; }
.ptt-button { width:124px; height:124px; position:relative; display:grid; place-items:center; align-content:center; gap:5px; border:2px solid rgba(97,247,206,.28); border-radius:50%; cursor:pointer; color:var(--mint); background:radial-gradient(circle,#1a2826,#0d1415 67%); box-shadow:0 0 0 10px rgba(97,247,206,.025),0 20px 50px rgba(0,0,0,.4); user-select:none; -webkit-user-select:none; touch-action:none; -webkit-touch-callout:none; }
.ptt-button::before { content:""; position:absolute; inset:7px; border:1px dashed rgba(97,247,206,.25); border-radius:50%; }
.ptt-button svg { width:24px; height:24px; }
.ptt-button strong { font-size:9px; letter-spacing:.14em; }
.ptt-button.transmitting { color:#06100d; background:var(--mint); box-shadow:0 0 0 12px rgba(97,247,206,.1),0 0 45px rgba(97,247,206,.3); transform:scale(.97); }
.ptt-button.sending { color:var(--amber); border-color:rgba(255,194,97,.45); pointer-events:none; }
.ptt-zone > p { color:#69757d; font-size:9px; margin-top:22px; }
.garage-hero { min-height:245px; padding:30px; display:grid; grid-template-columns:minmax(260px,1.4fr) 1fr auto; align-items:center; gap:30px; overflow:hidden; }
.garage-primary-photo { width:100%; height:180px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line); border-radius:14px; color:#536069; background:radial-gradient(circle at 50% 100%,rgba(97,247,206,.09),transparent 55%),#090d10; }
.garage-primary-photo img { width:100%; height:100%; object-fit:cover; }.garage-primary-photo svg { width:80px; height:80px; opacity:.45; }
.car-silhouette { height:170px; position:relative; display:grid; place-items:center; }
.car-silhouette::before { content:""; position:absolute; width:85%; height:42%; border-radius:70% 45% 30% 28% / 65% 70% 30% 35%; background:linear-gradient(165deg,#35424a 0 25%,#12181c 45% 65%,#06090a 68%); box-shadow:0 30px 45px #000, inset 0 2px 1px rgba(255,255,255,.18); transform:skewX(-6deg); }
.car-silhouette::after { content:""; width:80%; height:2px; background:var(--mint); box-shadow:0 0 24px var(--mint); position:absolute; bottom:40px; opacity:.7; }
.car-silhouette span::before, .car-silhouette span::after { content:""; position:absolute; bottom:42px; width:45px; height:45px; border:8px solid #060708; border-radius:50%; background:#273038; box-shadow:inset 0 0 0 5px #0b0e10; }
.car-silhouette span::before { left:17%; }.car-silhouette span::after { right:16%; }
.garage-hero h2 { margin:9px 0 8px; font-size:26px; }.garage-hero p { color:var(--muted); font-size:11px; }
.garage-stat { padding:20px; text-align:right; }.garage-stat strong { display:block; margin-top:7px; color:var(--mint); font-size:26px; }
.vehicle-card { min-height:300px; padding:0; overflow:hidden; }.vehicle-card-photo { height:165px; display:grid; place-items:center; overflow:hidden; color:#526069; background:#090d10; }.vehicle-card-photo img { width:100%; height:100%; object-fit:cover; }.vehicle-card-photo svg { width:58px; height:58px; opacity:.42; }.vehicle-card-copy { padding:18px 20px 14px; }.vehicle-card-copy > span { display:block; margin-top:10px; color:var(--mint); font-size:7px; font-weight:900; letter-spacing:.13em; }.vehicle-color { width:32px; height:4px; border-radius:4px; background:var(--vehicle-color); box-shadow:0 0 12px var(--vehicle-color); }.vehicle-card h3 { margin:7px 0 5px; }.vehicle-card p { margin:0; color:var(--muted); font-size:10px; }.vehicle-card-actions { padding:12px 15px; display:flex; flex-wrap:wrap; gap:5px; border-top:1px solid var(--line); }.vehicle-card-actions button { min-height:28px; padding:0 8px; border:1px solid var(--line); border-radius:6px; color:#a9b2b7; background:#151b20; cursor:pointer; font-size:8px; }.vehicle-card-actions button.danger { margin-left:auto; color:#ff8585; }.vehicle-upload-preview { margin-bottom:18px; display:grid; grid-template-columns:150px 1fr; align-items:center; gap:15px; }.vehicle-form-photo { width:150px; height:100px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line); border-radius:10px; color:#5e6a72; background:#090d10; }.vehicle-form-photo img { width:100%; height:100%; object-fit:cover; }.vehicle-form-photo svg { width:40px; height:40px; }.vehicle-upload-preview label { margin:0; }.vehicle-upload-preview small { color:var(--muted); font-size:8px; font-weight:500; }
.season-clock { text-align:right; }.season-clock strong { display:block; margin-top:5px; color:var(--mint); font-size:16px; letter-spacing:.08em; }
.leaderboard-layout { display:grid; grid-template-columns:330px 1fr; gap:16px; }.podium { padding:25px; display:flex; flex-direction:column; gap:15px; }.podium-driver { display:grid; grid-template-columns:34px 1fr auto; gap:11px; align-items:center; }.podium-driver > i { color:var(--muted); font-size:11px; font-style:normal; }.podium-driver strong,.podium-driver small { display:block; }.podium-driver strong { font-size:11px; }.podium-driver small { margin-top:3px; color:var(--muted); font-size:8px; }.podium-driver > span { color:var(--mint); font-size:11px; font-weight:900; }.leader-table { overflow:hidden; }.table-head,.leader-row { display:grid; grid-template-columns:70px 1fr 80px 100px; align-items:center; min-height:52px; padding:0 20px; border-bottom:1px solid var(--line); }.table-head { color:#69747c; font-size:8px; font-weight:900; letter-spacing:.12em; }.leader-row { font-size:11px; }.leader-row > span:first-child { color:var(--muted); }.driver-cell { display:flex; align-items:center; gap:10px; }.driver-cell .avatar { width:29px; height:29px; }.leader-row > strong { color:var(--mint); text-align:right; }.section-heading { margin:34px 0 15px; font-size:15px; }.challenge-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.challenge-card { padding:20px; }.challenge-card > span { color:var(--amber); font-size:8px; font-weight:900; letter-spacing:.14em; }.challenge-card h3 { font-size:15px; margin:13px 0 6px; }.challenge-card p { min-height:30px; color:var(--muted); font-size:10px; line-height:1.5; }.challenge-meta { display:flex; justify-content:space-between; align-items:center; padding-top:14px; margin-top:14px; border-top:1px solid var(--line); font-size:9px; }.challenge-meta strong { color:var(--mint); }
.profile-cover { min-height:210px; position:relative; padding:35px; display:flex; align-items:center; gap:22px; overflow:hidden; }.profile-glow { position:absolute; right:-5%; width:40%; height:140%; background:var(--mint); filter:blur(100px); opacity:.08; }.avatar-xl { width:90px; height:90px; font-size:24px; }.profile-avatar-wrap { position:relative; z-index:1; margin:0; display:block; cursor:pointer; }.profile-avatar-wrap > span { position:absolute; right:5px; bottom:1px; padding:4px 6px; border:1px solid var(--line-strong); border-radius:6px; color:var(--mint); background:#0c1114; font-size:6px; font-weight:950; letter-spacing:.1em; }.profile-avatar-wrap input { display:none; }.profile-cover h1 { margin:7px 0 3px; font-size:34px; }.profile-cover p { margin:0; color:var(--muted); font-size:12px; }.profile-rank { position:relative; margin-left:auto; display:flex; gap:34px; text-align:right; }.profile-rank strong { display:block; margin-top:6px; color:var(--mint); font-size:30px; }.profile-photo-actions { margin-bottom:18px; padding:13px; display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.015); }.profile-photo-actions > span { margin-right:auto; color:#afb8be; font-size:11px; font-weight:800; }.profile-photo-actions small { margin-top:4px; display:block; color:var(--muted); font-size:8px; font-weight:500; }.profile-photo-actions .btn { min-height:34px; font-size:9px; }.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }.form-card { padding:24px; }.form-card h3 { margin:0 0 22px; }.toggle-row { grid-template-columns:1fr 42px; align-items:center; }.toggle-row strong,.toggle-row small { display:block; }.toggle-row small { color:var(--muted); margin-top:5px; }.toggle-row input { display:none; }.toggle-row i { width:40px; height:23px; position:relative; border-radius:100px; background:#283039; transition:.2s; }.toggle-row i::after { content:""; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#929ca3; transition:.2s; }.toggle-row input:checked + i { background:rgba(97,247,206,.3); }.toggle-row input:checked + i::after { left:20px; background:var(--mint); }.device-alert-setting { margin:5px 0 22px; padding:15px; border:1px solid rgba(97,247,206,.13); border-radius:12px; background:rgba(97,247,206,.035); }.device-alert-setting > .toggle-row { margin-bottom:12px; }.device-alert-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:9px 10px; transition:.2s opacity; }.device-alert-controls > label { margin:0; }.device-alert-controls > .btn { min-height:46px; }.device-alert-controls > small { grid-column:1/-1; color:var(--muted); font-size:8px; line-height:1.5; }.device-alert-controls.disabled { opacity:.42; }.radius-input { position:relative; }.radius-input input { padding-right:45px; }.radius-input span { position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--mint); font-size:8px; font-weight:900; letter-spacing:.08em; pointer-events:none; }.security-note { display:flex; gap:13px; margin:25px 0; padding:16px; border:1px solid rgba(97,247,206,.14); background:rgba(97,247,206,.045); border-radius:12px; }.security-note svg { color:var(--mint); }.security-note strong,.security-note small { display:block; }.security-note strong { font-size:11px; }.security-note small { margin-top:5px; color:var(--muted); font-size:9px; line-height:1.5; }
.public-profile { margin-top:-8px; }.public-profile-hero { min-height:110px; padding:20px; display:flex; align-items:center; gap:16px; border:1px solid var(--line); border-radius:15px; background:radial-gradient(circle at 10% 50%,rgba(97,247,206,.09),transparent 40%),#0c1114; }.public-profile-avatar { width:74px; height:74px; font-size:20px; }.public-profile-hero h2 { margin:6px 0 3px; }.public-profile-hero p { margin:0; color:var(--muted); font-size:10px; }.public-profile-bio { margin:18px 2px; color:#b9c1c5; font-size:11px; line-height:1.65; }.public-profile-stats { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:12px; }.public-profile-stats div { padding:14px; border-right:1px solid var(--line); }.public-profile-stats div:last-child { border:0; }.public-profile-stats span,.public-profile-details small { display:block; color:var(--muted); font-size:7px; font-weight:900; letter-spacing:.12em; }.public-profile-stats strong { display:block; margin-top:5px; color:var(--mint); font-size:17px; }.public-profile-details { margin-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }.public-profile-details > span { padding:12px; border:1px solid var(--line); border-radius:10px; }.public-profile-details strong { display:block; margin-top:5px; color:#d5dcdf; font-size:9px; }.public-profile-heading { margin:22px 0 10px; font-size:12px; }.public-profile-crews { display:flex; flex-wrap:wrap; gap:6px; }.public-crew-chip { padding:7px 9px; display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:100px; color:#b9c2c6; background:#11171b; font-size:8px; }.public-crew-chip i { width:6px; height:6px; border-radius:50%; background:var(--crew-color); box-shadow:0 0 7px var(--crew-color); }.public-profile-garage { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.public-vehicle-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:11px; background:#0c1114; }.public-vehicle-photo { height:105px; display:grid; place-items:center; color:#59666e; background:#090d10; }.public-vehicle-photo img { width:100%; height:100%; object-fit:cover; }.public-vehicle-photo svg { width:40px; height:40px; }.public-vehicle-card > div:last-child { padding:11px; }.public-vehicle-card span,.public-vehicle-card strong,.public-vehicle-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.public-vehicle-card span { color:var(--mint); font-size:6px; font-weight:900; letter-spacing:.12em; }.public-vehicle-card strong { margin-top:5px; font-size:9px; }.public-vehicle-card small { margin-top:4px; color:var(--muted); font-size:7px; }.public-profile-empty { color:var(--muted); font-size:9px; }.public-profile-loading { height:120px; border-radius:12px; background:linear-gradient(100deg,#11171b 20%,#182126 40%,#11171b 60%); background-size:200% 100%; animation:profile-loading 1.2s infinite; }@keyframes profile-loading { to { background-position:-200% 0; } }

/* Admin */
.admin-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px; }.admin-live { display:grid; grid-template-columns:auto 1fr; gap:2px 8px; align-items:center; padding:12px 15px; background:rgba(97,247,206,.05); border:1px solid rgba(97,247,206,.16); border-radius:10px; }.admin-live strong { color:var(--mint); font-size:9px; letter-spacing:.12em; }.admin-live small { grid-column:2; color:var(--muted); font-size:8px; }.admin-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }.metric-card { padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:13px; }.metric-card span { color:var(--muted); font-size:8px; font-weight:900; letter-spacing:.12em; }.metric-card strong { display:block; margin-top:8px; font-size:24px; }.metric-card i { color:var(--mint); font-size:8px; font-style:normal; }.admin-shell { min-height:570px; display:grid; grid-template-columns:190px 1fr; overflow:hidden; }.admin-tabs { padding:14px 9px; border-right:1px solid var(--line); }.admin-tabs button { width:100%; height:40px; padding:0 12px; text-align:left; border:0; border-radius:8px; cursor:pointer; color:var(--muted); background:transparent; font-size:10px; font-weight:750; }.admin-tabs button.active { color:var(--text); background:rgba(97,247,206,.08); }.admin-content { min-width:0; padding:22px; overflow:auto; }.admin-content-head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:18px; }.admin-content-head h3 { margin:0; font-size:17px; }.admin-content-head p { margin:4px 0 0; color:var(--muted); font-size:9px; }.admin-search { width:min(280px,100%); height:36px; padding:0 12px; }.data-table { width:100%; border-collapse:collapse; }.data-table th { color:#68747d; font-size:8px; letter-spacing:.12em; text-align:left; }.data-table th,.data-table td { padding:12px 10px; border-bottom:1px solid var(--line); }.data-table td { color:#c4cbd0; font-size:10px; }.data-table .user-summary { display:flex; align-items:center; gap:9px; }.data-table .avatar { width:29px; height:29px; }.status { display:inline-flex; align-items:center; gap:5px; padding:4px 7px; border-radius:100px; color:var(--mint); background:rgba(97,247,206,.08); font-size:8px; font-weight:850; }.status.banned,.status.suspended { color:var(--coral); background:rgba(255,92,92,.08); }.table-actions { display:flex; justify-content:flex-end; gap:5px; }.table-actions button { height:27px; border:1px solid var(--line); border-radius:6px; cursor:pointer; color:#9da7ad; background:#161c21; font-size:8px; }.table-actions button.danger { color:#ff7676; }.broadcast-form,.settings-form { max-width:650px; }.broadcast-list { margin-top:24px; display:grid; gap:8px; }.broadcast-item,.moderation-item,.audit-item { display:flex; gap:14px; align-items:flex-start; padding:13px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.015); }.broadcast-item > i { width:7px; height:7px; margin-top:5px; border-radius:50%; background:var(--mint); }.broadcast-item strong,.broadcast-item small,.moderation-item strong,.moderation-item small { display:block; }.broadcast-item strong,.moderation-item strong { font-size:10px; }.broadcast-item p,.moderation-item p { margin:5px 0; color:#aeb7bc; font-size:9px; }.broadcast-item small,.moderation-item small,.audit-item small { color:#64717a; font-size:8px; }.broadcast-item button,.moderation-item button { margin-left:auto; border:0; cursor:pointer; color:var(--coral); background:transparent; font-size:9px; }.settings-form { display:grid; gap:8px; }.settings-form .toggle-row { padding:13px 0; border-bottom:1px solid var(--line); }.audit-list { display:grid; gap:6px; }.audit-item { display:grid; grid-template-columns:120px 1fr auto; }.audit-item code { color:var(--mint); font-size:9px; }.empty-state { padding:60px 20px; text-align:center; color:var(--muted); font-size:11px; }
.owner-danger-zone { max-width:650px; margin-top:34px; padding:22px; border:1px solid rgba(255,92,92,.3); border-radius:14px; background:linear-gradient(140deg,rgba(255,92,92,.075),rgba(255,92,92,.018)); }.owner-danger-zone .eyebrow { color:#ff8585; }.owner-danger-zone h3 { margin:9px 0 7px; color:#ffd7d7; font-size:18px; }.owner-danger-zone > p { max-width:590px; margin:0 0 20px; color:#aeb6bb; font-size:10px; line-height:1.65; }.server-wipe-form { display:grid; gap:11px; }.server-wipe-form > label:not(.wipe-ack) { display:grid; gap:7px; color:#c5cbcf; font-size:10px; }.server-wipe-form > label strong { color:#ff9c9c; letter-spacing:.05em; }.server-wipe-form input:focus { border-color:rgba(255,92,92,.65); }.wipe-ack { display:flex; align-items:center; gap:9px; color:#abb3b8; font-size:9px; cursor:pointer; }.wipe-ack input { width:16px; height:16px; accent-color:var(--coral); }.server-wipe-form .btn { width:max-content; min-width:150px; }.server-wipe-form .btn:disabled { cursor:not-allowed; opacity:.38; transform:none; }.wipe-status { min-height:14px; color:#ff9c9c; font-size:9px; }

/* Modals and feedback */
.modal-backdrop { position:fixed; z-index:3000; inset:0; padding:20px; display:grid; place-items:center; overflow:hidden; background:rgba(0,0,0,.74); backdrop-filter:blur(8px); }.modal { width:min(500px,100%); max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; position:relative; padding:28px; background:#101519; border:1px solid var(--line-strong); border-radius:20px; box-shadow:0 35px 100px #000; animation:modal-in .25s ease both; }.modal.wide { width:min(740px,100%); }.modal-close { position:sticky; z-index:2; top:0; margin:-15px -15px -17px auto; width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; cursor:pointer; color:var(--muted); background:#171d22; }.modal h2 { margin:8px 0; font-size:25px; }.modal > #modal-content > p { color:var(--muted); font-size:11px; line-height:1.6; margin-bottom:22px; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.modal-stats { display:grid; grid-template-columns:repeat(3,1fr); margin:20px 0; border:1px solid var(--line); border-radius:12px; }.modal-stats div { padding:14px; border-right:1px solid var(--line); }.modal-stats div:last-child { border:0; }.modal-stats span { display:block; color:var(--muted); font-size:8px; }.modal-stats strong { display:block; margin-top:5px; font-size:13px; }.toast-stack { position:fixed; z-index:4000; right:18px; top:18px; display:grid; gap:8px; }.toast { width:min(340px,calc(100vw - 36px)); padding:13px 15px; display:flex; align-items:center; gap:10px; background:#13191e; border:1px solid var(--line-strong); border-radius:10px; box-shadow:var(--shadow); font-size:10px; animation:toast-in .25s ease both; }.toast::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px var(--mint); }.toast.error::before { background:var(--coral); box-shadow:0 0 10px var(--coral); }
.notification-scroll { max-height:min(58vh,520px); overflow-y:auto; overscroll-behavior:contain; padding-right:5px; }.notification-group + .notification-group { margin-top:22px; }.notification-group h3 { position:sticky; z-index:1; top:0; margin:0 0 8px; padding:7px 0; background:#101519; }.notification-item { margin-bottom:8px; }.notification-item > div { min-width:0; flex:1; }.notification-item .notification-dismiss { flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center; margin:-5px -5px 0 auto; border:1px solid var(--line); border-radius:50%; color:var(--muted); background:#171d22; font-size:18px; line-height:1; }.notification-item .notification-dismiss:hover { color:var(--coral); border-color:rgba(255,92,92,.4); }.notification-critical { border-color:rgba(255,72,72,.5); background:linear-gradient(135deg,rgba(145,18,28,.42),rgba(78,10,17,.28)); box-shadow:inset 0 0 24px rgba(255,40,53,.06); }.notification-critical > i { background:#ff4e5b; box-shadow:0 0 12px rgba(255,64,77,.72); }.notification-critical strong { color:#fff1f2; }.notification-locked { flex:0 0 auto; padding:5px 7px; border:1px solid rgba(255,92,92,.32); border-radius:100px; color:#ff9ba2; background:rgba(45,5,10,.34); font-size:7px; font-weight:900; letter-spacing:.1em; }
@keyframes modal-in { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } } @keyframes toast-in { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }

@media (max-width: 1100px) {
  :root { --sidebar:80px; }
  .sidebar { padding-inline:11px; }.sidebar .brand > span:last-child,.side-nav span,.side-bottom > button span,.mini-profile > div:not(.avatar),.mini-profile > button { display:none; }.sidebar .brand { justify-content:center; padding-inline:0; }.side-nav button,.side-bottom > button { justify-content:center; padding:0; }.mini-profile { grid-template-columns:1fr; justify-items:center; }.radio-layout { grid-template-columns:180px 1fr; }.ptt-zone { grid-column:1/-1; min-height:220px; flex-direction:row; gap:25px; border-left:0; border-top:1px solid var(--line); }.ptt-zone > .section-label { display:none; }.voice-user { width:auto; margin:0; }.ptt-button { width:100px; height:100px; }.ptt-zone > p { margin:0; }.card-grid,.challenge-grid,.friend-grid { grid-template-columns:repeat(2,1fr); }.auth-screen { grid-template-columns:1.1fr .9fr; }
}

@media (max-width: 760px) {
  :root { --sidebar:0px; --topbar:64px; }
  body { padding-bottom:env(safe-area-inset-bottom); }.auth-screen { display:block; min-height:100svh; background:linear-gradient(180deg,rgba(5,8,10,.56),#080b0e 52%),url('/static/assets/map-fallback.png') center/cover; }.auth-visual { display:none; }.auth-panel { min-height:100svh; place-items:end center; padding:36px 24px 48px; background:linear-gradient(180deg,transparent 0,#080b0e 33%); border:0; }.mobile-brand { display:flex; position:absolute; top:28px; left:24px; }.auth-box { padding:26px 0 0; }.auth-box h2 { font-size:31px; }.sidebar { display:flex; z-index:2501; width:min(286px,84vw); transform:translateX(-105%); transition:transform .28s cubic-bezier(.2,.8,.2,1); box-shadow:25px 0 70px rgba(0,0,0,.5); }.sidebar.mobile-open { transform:translateX(0); }.sidebar .brand { justify-content:flex-start; padding-inline:12px; }.sidebar .brand > span:last-child,.sidebar .side-nav span,.sidebar .side-bottom > button span,.sidebar .mini-profile > div:not(.avatar),.sidebar .mini-profile > button { display:block; }.sidebar .side-nav button,.sidebar .side-bottom > button { justify-content:flex-start; padding:0 13px; }.sidebar .mini-profile { grid-template-columns:34px 1fr 28px; justify-items:stretch; }.drawer-overlay.active { position:fixed; z-index:2500; inset:0; display:block; border:0; background:rgba(0,0,0,.62); backdrop-filter:blur(3px); }.main-stage { margin-left:0; }.topbar { left:0; padding:0 14px; }.topbar h2 { font-size:14px; }.topbar > div > span { font-size:7px; }.mobile-only { display:grid; margin-right:10px; }.topbar > div:nth-child(2) { margin-right:auto; }.points-pill { display:none; }.view-map { left:0; bottom:calc(66px + env(safe-area-inset-bottom)); }.mobile-nav { position:fixed; z-index:2000; display:grid; grid-template-columns:repeat(5,1fr); inset:auto 0 0; height:calc(66px + env(safe-area-inset-bottom)); padding:6px 7px env(safe-area-inset-bottom); background:rgba(8,11,14,.98); border-top:1px solid var(--line); backdrop-filter:blur(18px); }.mobile-nav button { border:0; display:grid; place-items:center; align-content:center; gap:4px; cursor:pointer; color:#64717a; background:transparent; font-size:8px; }.mobile-nav button svg { width:19px; }.mobile-nav button.active { color:var(--mint); }.content-view,.admin-view { padding:calc(var(--topbar) + 24px) 14px calc(82px + env(safe-area-inset-bottom)); }.page-intro { align-items:flex-start; }.page-intro h1,.admin-header h1 { font-size:30px; }.page-intro p { max-width:220px; line-height:1.5; }.page-intro .btn { padding:0 12px; font-size:0; }.page-intro .btn svg { margin:0; }.map-search { top:15px; left:14px; transform:none; width:calc(100% - 70px); }.map-search kbd,.map-status { display:none; }.map-tools { top:auto; right:13px; bottom:150px; transform:none; }.alert-fab { position:fixed; z-index:2101; right:13px; bottom:calc(78px + env(safe-area-inset-bottom)); width:42px; padding:0; justify-content:center; }.alert-fab span { display:none; }.featured-card { position:fixed; z-index:2100; left:13px; bottom:calc(78px + env(safe-area-inset-bottom)); width:calc(100% - 68px); min-height:92px; grid-template-columns:45px 1fr 31px; gap:11px; padding:13px 10px 13px 16px; }.event-date { height:52px; }.featured-copy h3 { font-size:14px; margin:5px 0 3px; }.featured-copy p { font-size:8px; }.avatar-stack { display:none; }.round-arrow { width:30px; height:30px; }.route-card { top:70px; left:14px; right:auto; width:calc(100% - 28px); max-height:calc(100% - 84px); overflow:auto; }.destination-active .map-search { display:none!important; }.destination-active .route-card { top:10px; max-height:calc(100% - 20px); }.event-map-picker { top:70px; width:calc(100% - 28px); max-height:calc(100% - 84px); overflow:auto; grid-template-columns:1fr 1fr; }.location-picking .event-map-picker { top:10px; max-height:calc(100% - 20px); }.event-map-picker > div { grid-column:1/-1; }.event-map-picker .btn { padding:0 10px; }.modal-backdrop { padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); align-items:center; }.modal { max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding:22px 16px calc(22px + env(safe-area-inset-bottom)); border-radius:16px; }.stat-strip > div { padding:14px; }.stat-strip strong { font-size:17px; }.card-grid,.event-grid,.challenge-grid,.settings-grid,.leaderboard-layout,.friend-grid { grid-template-columns:1fr; }.radio-layout { min-height:620px; grid-template-columns:1fr; }.channels { display:flex; gap:6px; overflow-x:auto; padding:10px; border-right:0; border-bottom:1px solid var(--line); }.channels #radio-dynamic-channels { display:flex; gap:6px; }.channels .section-label { display:none; }.channels button { min-width:135px; }.comms { min-height:420px; }.comms-head { padding:0 12px; }.channel-controls > span { display:none; }.mini-toggle span { display:none!important; }.message-list { max-height:320px; }.ptt-zone { grid-column:auto; min-height:170px; justify-content:center; padding:15px; }.voice-user,.ptt-zone > p { display:none; }.ptt-button { width:105px; height:105px; }.garage-hero { grid-template-columns:1fr; padding:18px; gap:10px; }.car-silhouette { height:150px; }.leader-table { overflow-x:auto; }.table-head,.leader-row { min-width:520px; }.profile-cover { padding:25px 20px; flex-wrap:wrap; }.avatar-xl { width:70px; height:70px; }.profile-cover h1 { font-size:25px; }.profile-rank { width:100%; text-align:left; margin:0; padding-top:17px; border-top:1px solid var(--line); }.profile-rank strong { font-size:26px; }.admin-header { align-items:flex-start; }.admin-live { display:none; }.admin-metrics { grid-template-columns:repeat(2,1fr); }.admin-shell { grid-template-columns:1fr; }.admin-tabs { display:flex; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); }.admin-tabs button { min-width:max-content; width:auto; padding:0 13px; }.admin-content { padding:15px; }.data-table { min-width:700px; }.admin-content { overflow-x:auto; }.audit-item { grid-template-columns:1fr; }.form-row { grid-template-columns:1fr; }.section-title-row { align-items:flex-start; flex-direction:column; }.toast-stack { top:74px; }
}

@media (max-width: 760px) {
  .map-radio-hud { left:13px; right:68px; bottom:115px; width:auto; min-height:70px; grid-template-columns:minmax(0,1fr) 54px; padding:7px; }
  .map-legend { top:70px; right:13px; width:min(230px,calc(100% - 26px)); max-height:calc(100% - 88px); transform:none; }
  .map-radio-picker { height:54px; grid-template-columns:31px minmax(0,1fr) 31px; }
  .map-radio-picker > button { width:31px; }
  .map-ptt-button { width:52px; height:52px; }
  .event-route-detail-head,.event-route-builder-head { align-items:stretch; flex-direction:column; }
  .event-route-builder-head > .btn { width:100%; }
  .route-editor-row { grid-template-columns:27px minmax(0,1fr); }
  .route-editor-row > div { grid-column:2; flex-wrap:wrap; }
  .event-route-timeline > div { grid-template-columns:27px minmax(0,1fr); }
  .event-route-timeline .btn { grid-column:2; width:100%; }
  .event-route-map-editor { top:auto; right:10px; bottom:10px; left:10px; width:auto; height:min(520px,calc(100% - 20px)); max-height:calc(100% - 20px); padding:12px; gap:9px; border-radius:15px; }
  .route-map-editor-head > div:first-child strong { font-size:12px; }
  .route-map-tools button { height:48px; }
  .route-map-list { max-height:none; }
  .route-map-list-row { grid-template-columns:25px minmax(0,1fr) auto; min-height:46px; padding:5px; }
  .route-map-list-row > i { width:25px; height:25px; }
  .route-map-list-row > div button { width:24px; }
  .route-map-editor-actions .btn { min-height:38px; }
  .route-editing .map-tools { bottom:auto; top:12px; }
  .event-meeting-detail { align-items:stretch; flex-direction:column; }
  .garage-stat { display:none; }
}

@media (max-width: 760px) and (max-height: 520px) {
  .map-tools { top:10px; bottom:auto; }
  .event-route-map-editor { padding:8px; gap:6px; }
  .route-map-editor-head > div:first-child strong { font-size:10px; }
  .route-map-editor-head > div:first-child small { display:none; }
  .route-map-live-metrics strong { font-size:11px; }
  .route-map-live-metrics span { max-width:100px; font-size:6px; }
  .route-map-tools button { height:38px; }
  .route-map-tools button i { width:18px; height:18px; }
  .route-map-hint { display:none; }
  .route-map-editor-actions .btn { min-height:34px; }
}

/* Map overlay geometry: reserve real space for mobile chrome and use a
   compact, non-overlapping layout for wide phones in landscape. */
@media (max-width: 760px) {
  .view-map {
    min-height:0!important;
    bottom:calc(66px + env(safe-area-inset-bottom,0px))!important;
  }
  .featured-card {
    position:absolute;
    z-index:500;
    bottom:12px;
  }
  .alert-fab {
    position:absolute;
    z-index:500;
    bottom:12px;
  }
}

@media (min-width: 761px) and (max-height: 520px) {
  .featured-card {
    bottom:14px;
    left:14px;
    width:min(390px,calc(100% - 360px));
    min-height:88px;
    padding:12px 12px 12px 16px;
    grid-template-columns:46px minmax(0,1fr) 34px;
    gap:12px;
  }
  .featured-copy h3 { font-size:14px; }
  .avatar-stack { display:none; }
  .map-radio-hud {
    right:20px;
    bottom:78px;
    width:300px;
    min-height:64px;
  }
  .alert-fab { right:20px; bottom:14px; }
  .map-tools {
    top:80px;
    right:20px;
    bottom:auto;
    width:auto;
    display:flex;
    transform:none;
  }
  .map-tools button { flex:none; }
  .map-tools span { width:1px; height:28px; margin:3px 2px; }
}

.map-fullscreen .sidebar,
.map-fullscreen .topbar,
.map-fullscreen .mobile-nav { display:none!important; }
.map-fullscreen .main-stage { margin-left:0!important; }
.map-fullscreen .view-map {
  inset:0!important;
  min-height:0!important;
}
@media (max-width: 760px) {
  .map-fullscreen .featured-card,
  .map-fullscreen .alert-fab {
    bottom:calc(12px + env(safe-area-inset-bottom,0px));
  }
}

/* Phone radio channel browser: keep channel groups readable instead of
   flattening every crew and event into one extra-wide flex row. */
@media (max-width: 760px) {
  .radio-layout .channels {
    max-height:270px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
    gap:6px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:10px;
  }
  .radio-layout .channels #radio-dynamic-channels { display:contents; }
  .radio-layout .channels .radio-group-label {
    grid-column:1/-1;
    padding:11px 5px 3px;
    color:#7d8991;
  }
  .radio-layout .channels button {
    width:100%;
    min-width:0;
    min-height:58px;
  }
  .radio-layout .channels button > span { min-width:0; }
  .radio-layout .channels strong,
  .radio-layout .channels small {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

.dm-modal { display:grid; min-height:420px; grid-template-rows:auto minmax(260px,1fr) auto; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#0b0f12; }
.dm-modal-head { min-width:0; padding:13px 14px; display:grid; grid-template-columns:40px minmax(0,1fr) auto auto; align-items:center; gap:10px; border-bottom:1px solid var(--line); background:#11171b; }
.dm-chat-avatar { width:40px; height:40px; display:grid; place-items:center; flex:none; color:#07100e; background:var(--mint); border-radius:50%; font-size:11px; font-weight:950; }
.dm-modal-head #dm-chat-person { min-width:0; }
.dm-modal-head #dm-chat-person strong,.dm-modal-head #dm-chat-person small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-modal-head #dm-chat-person strong { color:var(--text); font-size:12px; }
.dm-modal-head #dm-chat-person small { margin-top:4px; color:var(--muted); font-size:8px; }
.text-only-pill { padding:6px 8px; color:var(--mint); background:rgba(97,247,206,.07); border:1px solid rgba(97,247,206,.2); border-radius:99px; font-size:7px; font-weight:900; letter-spacing:.12em; white-space:nowrap; }
.dm-message-list { min-height:260px; max-height:52vh; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; }
.dm-bubble { display:flex; justify-content:flex-start; }
.dm-bubble.own { justify-content:flex-end; }
.dm-bubble > div { max-width:78%; padding:10px 12px; color:#cbd2d6; background:#171e23; border:1px solid var(--line); border-radius:4px 13px 13px 13px; }
.dm-bubble.own > div { color:#dafdf4; background:rgba(97,247,206,.1); border-color:rgba(97,247,206,.2); border-radius:13px 4px 13px 13px; }
.dm-bubble strong { color:var(--text); font-size:8px; }
.dm-bubble time { margin-left:7px; color:var(--muted); font-size:7px; }
.dm-bubble p { margin:5px 0 0; font-size:11px; line-height:1.45; overflow-wrap:anywhere; }
.dm-empty-state { margin:auto; max-width:260px; display:grid; justify-items:center; gap:7px; color:var(--muted); text-align:center; }
.dm-empty-state svg { width:28px; color:var(--mint); }
.dm-empty-state strong { color:var(--text); font-size:11px; }
.dm-empty-state span { font-size:9px; line-height:1.5; }
.dm-message-form { padding:11px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; border-top:1px solid var(--line); background:#11171b; }
.dm-message-form input { min-width:0; height:42px; }
.dm-message-form button { min-width:72px; border:0; border-radius:8px; cursor:pointer; color:#07100e; background:var(--mint); font-size:9px; font-weight:950; }
.dm-message-form button:disabled { cursor:not-allowed; opacity:.35; }

@media (max-width: 520px) {
  .dm-modal { min-height:min(560px,calc(100dvh - 86px)); grid-template-rows:auto minmax(220px,1fr) auto; }
  .dm-modal-head { grid-template-columns:38px minmax(0,1fr) auto; padding:11px 10px; gap:8px; }
  .dm-chat-avatar { width:38px; height:38px; }
  .text-only-pill { display:none; }
  .dm-modal-head #dm-chat-mute { padding:0 8px; white-space:nowrap; }
  .dm-message-list { min-height:220px; max-height:none; padding:13px 10px; }
  .dm-bubble > div { max-width:88%; }
}

@media (max-width:760px) {
  .garage-hero { gap:14px; }
  .garage-primary-photo { height:180px; }
  .vehicle-upload-preview { grid-template-columns:1fr; }
  .vehicle-form-photo { width:100%; height:150px; }
  .profile-rank { justify-content:flex-start; }
  .profile-photo-actions { align-items:stretch; flex-wrap:wrap; }
  .profile-photo-actions > span { width:100%; }
  .profile-photo-actions .btn { flex:1; }
  .public-profile-garage,.public-profile-details { grid-template-columns:1fr; }
  .friend-add-tools { width:100%; flex-direction:column; align-items:stretch; }
  .friend-add-tools form { width:100%; }
  .friend-add-tools > .btn { width:100%; }
  .friend-request-list { grid-template-columns:1fr; }
  .friend-request-card { grid-template-columns:36px minmax(0,1fr) auto; }
  .friend-qr-modal { grid-template-columns:1fr; gap:18px; min-height:0; }
  .friend-qr-heading { text-align:center; }
  .friend-qr-heading h2 { font-size:24px; }
  .friend-qr-heading p { margin-inline:auto; }
  .friend-qr-canvas-shell { width:226px; height:226px; }
  .friend-qr-canvas-shell #friend-qr-canvas,.friend-qr-canvas-shell #friend-qr-canvas img,.friend-qr-canvas-shell #friend-qr-canvas canvas { width:210px!important; height:210px!important; }
  .friend-qr-scanner { grid-column:1; width:min(300px,100%); margin:auto; }
  .route-card { left:13px; right:auto; width:min(250px,calc(100% - 82px)); padding:11px; }
  .active-mission-hud { right:68px; bottom:12px; left:13px; width:auto; padding:9px 10px 10px; border-radius:13px; }
  .active-mission-hud h3 { margin:1px 0 6px; font-size:12px; }
  .active-mission-hud header button { width:22px; height:22px; }
  .mission-objective-row { grid-template-columns:30px minmax(0,1fr); gap:8px; }
  .mission-objective-row > i { width:30px; height:30px; border-radius:8px; font-size:9px; }
  .mission-objective-row strong { font-size:10px; }
  .mission-progress-track { margin-top:7px; }
  .mission-actions { margin-top:6px; }
  .mission-actions .btn { min-height:27px; }
  .mission-exit-confirm { padding:10px; grid-template-columns:minmax(0,1fr) auto; }
  .mission-exit-confirm > div { grid-column:1/-1; }
  .mission-exit-confirm .btn { min-height:28px; }
  .mission-active .map-radio-hud { bottom:153px; }
  .mission-active .map-tools { top:14px; bottom:auto; }
}

@media (max-width:760px) and (max-height:590px) {
  .mission-active .map-radio-hud { display:none; }
  .active-mission-hud { max-width:400px; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }