:root {
  --forest: #31473a;
  --forest-deep: #22352c;
  --forest-soft: #52705d;
  --mineral: #f4efe4;
  --paper: #fcfaf5;
  --sand: #e9e0cf;
  --route: #d6a85f;
  --route-soft: #f0d29b;
  --coral: #d9553d;
  --ink: #27322c;
  --muted: #788078;
  --line: rgba(49, 71, 58, 0.13);
  --shadow: 0 16px 45px rgba(38, 51, 42, 0.13);
  --display: "Alegreya Sans", Georgia, serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { background: var(--forest); }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--mineral); font-family: var(--body); -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid rgba(214, 168, 95, 0.78); outline-offset: 3px; }
svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-shell { width: min(100%, 620px); min-height: 100vh; margin: 0 auto; background: var(--paper); overflow: hidden; box-shadow: 0 0 60px rgba(20, 34, 26, 0.15); }
.topbar { height: 72px; padding: max(14px, env(safe-area-inset-top)) 22px 12px; display: flex; justify-content: space-between; align-items: center; background: var(--forest); color: var(--paper); }
.brand-lockup, .header-actions, .gps-status, .panel-heading, .section-heading, .action-row, .share-button, .recenter-button, .share-link-box, .sos-location, .sos-actions, .profile-facts { display: flex; align-items: center; }
.brand-lockup { gap: 10px; }
.brand-mark { width: 62px; height: 35px; display: block; object-fit: contain; background: #101211; border-radius: 5px; }
.brand-name { font: 700 19px/1 var(--display); letter-spacing: -.025em; }
.brand-name span { font-weight: 400; opacity: .78; }
.brand-kicker { margin-top: 4px; color: var(--route-soft); text-transform: uppercase; font: 500 8px/1 var(--mono); letter-spacing: .13em; }
.header-actions { gap: 12px; }
.gps-status { gap: 7px; padding: 7px 9px; color: #dbe9d3; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.status-dot { width: 7px; height: 7px; display: inline-block; background: #9dcc75; border-radius: 50%; box-shadow: 0 0 0 3px rgba(157, 204, 117, .15); }
.gps-status.live .status-dot { background: var(--route); box-shadow: 0 0 0 3px rgba(214, 168, 95, .18); animation: dot-pulse 1.7s ease-in-out infinite; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; color: var(--paper); background: transparent; border: 1px solid rgba(255,255,255,.26); border-radius: 50%; }
.icon-button svg { width: 17px; height: 17px; }
.map-stage { position: relative; height: min(61vh, 540px); min-height: 410px; overflow: hidden; isolation: isolate; background: #cad1b7; }
.leaflet-map { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .35s ease; }
.map-stage.real-map::before, .map-stage.real-map::after { opacity: 0; }
.map-stage.real-map .leaflet-map { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; }
.map-stage.real-map .maplibregl-canvas-container { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-stage.real-map .map-grid, .map-stage.real-map .map-contours, .map-stage.real-map .map-label, .map-stage.real-map .trail-mark, .map-stage.real-map .route-svg { display: none; }
.leaflet-map .leaflet-control-attribution { color: rgba(39,55,45,.7); background: rgba(252,250,245,.72); font: 8px var(--body); }
.leaflet-map .leaflet-control-attribution a { color: var(--forest); }
.map-stage::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 35% 27%, rgba(243,239,213,.85), transparent 45%), radial-gradient(ellipse at 75% 78%, rgba(124,151,118,.65), transparent 42%), linear-gradient(135deg, #bbc5a9, #d8d8bc 42%, #aebda1); }
.map-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .27; background-image: repeating-linear-gradient(21deg, transparent 0 25px, rgba(50,79,57,.12) 26px 27px, transparent 28px 55px), repeating-linear-gradient(101deg, transparent 0 42px, rgba(244,244,211,.17) 43px 44px, transparent 45px 84px); mix-blend-mode: multiply; }
.map-grid { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(49,71,58,.34) 1px, transparent 1px), linear-gradient(90deg, rgba(49,71,58,.34) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 75%, transparent); }
.map-contours { position: absolute; border: 1px solid rgba(73, 102, 75, .34); border-radius: 46% 54% 52% 48%; transform: rotate(-18deg); }
.contour-a { width: 120%; height: 220px; top: 15%; left: -22%; box-shadow: 0 22px 0 rgba(73,102,75,.18), 0 44px 0 rgba(73,102,75,.14), 0 66px 0 rgba(73,102,75,.1), 0 88px 0 rgba(73,102,75,.08); }
.contour-b { width: 85%; height: 130px; bottom: 16%; right: -28%; transform: rotate(25deg); box-shadow: 0 20px 0 rgba(73,102,75,.17), 0 40px 0 rgba(73,102,75,.12), 0 60px 0 rgba(73,102,75,.08); }
.route-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route-shadow { fill: none; stroke: rgba(28,53,40,.23); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.route-line { fill: none; stroke: var(--route); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 1px rgba(49,71,58,.25)); transition: d .5s ease; }
.route-ghost { fill: none; stroke: var(--forest-soft); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 8; opacity: .95; }
.route-start { fill: var(--forest); stroke: var(--paper); stroke-width: 3; }
.current-pin { transform-origin: center; }
.pin-halo { fill: rgba(217, 85, 61, .2); stroke: rgba(217,85,61,.45); stroke-width: 1; animation: pin-breathe 2.4s ease-in-out infinite; }
.pin-core { fill: var(--coral); stroke: var(--paper); stroke-width: 3; }
.pin-center { fill: var(--paper); }
.map-label { position: absolute; color: rgba(45,70,53,.63); text-transform: uppercase; font: 500 8px/1.3 var(--mono); letter-spacing: .08em; pointer-events: none; }
.map-label span { display: block; margin-top: 3px; color: rgba(45,70,53,.45); font-size: 7px; }
.label-norte { top: 21px; right: 24px; padding: 6px 7px; color: var(--forest); border: 1px solid rgba(49,71,58,.4); border-radius: 50%; font-weight: 700; }
.label-pico { top: 24%; left: 11%; transform: rotate(-8deg); }
.label-refugio { right: 10%; bottom: 30%; transform: rotate(7deg); }
.label-bosque { left: 8%; bottom: 19%; color: rgba(45,70,53,.35); line-height: 1.5; letter-spacing: .14em; }
.trail-mark { position: absolute; width: 32px; height: 13px; opacity: .5; border-top: 1px solid var(--forest-soft); border-bottom: 1px solid var(--forest-soft); transform: rotate(-32deg); }
.trail-mark-one { top: 18%; right: 19%; }
.trail-mark-two { top: 57%; left: 13%; transform: rotate(55deg); }
.map-coordinates { position: absolute; z-index: 3; top: 20px; left: 20px; color: rgba(39, 55, 45, .68); font: 500 8px var(--mono); letter-spacing: .03em; }
.map-style-switcher { position: absolute; z-index: 3; top: 50px; left: 20px; display: flex; padding: 3px; gap: 2px; background: rgba(252,250,245,.84); border: 1px solid rgba(49,71,58,.14); border-radius: 9px; box-shadow: 0 5px 16px rgba(31,51,39,.1); backdrop-filter: blur(6px); }
.map-style-switcher button { padding: 5px 7px; color: var(--forest-soft); background: transparent; border: 0; border-radius: 6px; font-size: 9px; font-weight: 800; }
.map-style-switcher button.active { color: var(--paper); background: var(--forest); }
.map-zoom-controls { position: absolute; z-index: 3; right: 19px; bottom: 62px; width: 36px; overflow: hidden; color: var(--forest); background: rgba(252,250,245,.78); border: 1px solid rgba(49,71,58,.18); border-radius: 11px; box-shadow: 0 5px 16px rgba(31,51,39,.12); backdrop-filter: blur(6px); }
.map-zoom-controls button { width: 100%; height: 35px; padding: 0; color: inherit; background: transparent; border: 0; font: 400 22px/1 var(--display); }
.map-zoom-controls span { display: block; height: 1px; background: rgba(49,71,58,.17); }
.recenter-button { position: absolute; z-index: 3; left: 18px; bottom: 21px; gap: 7px; padding: 10px 12px; color: var(--forest); background: rgba(252,250,245,.88); border: 1px solid rgba(49,71,58,.14); border-radius: 999px; box-shadow: 0 5px 16px rgba(31,51,39,.12); backdrop-filter: blur(6px); font-size: 11px; font-weight: 700; }
.recenter-button svg { width: 15px; height: 15px; }
.map-scale { position: absolute; z-index: 3; right: 19px; bottom: 24px; color: rgba(39,55,45,.6); font: 500 8px var(--mono); text-align: right; }
.map-scale span { display: block; width: 39px; height: 5px; margin-left: auto; margin-bottom: 4px; border: 1px solid rgba(39,55,45,.6); border-top: 0; }
.ride-panel { position: relative; z-index: 2; margin-top: -1px; padding: 10px 22px 24px; background: var(--paper); border-radius: 24px 24px 0 0; box-shadow: 0 -12px 30px rgba(39,55,45,.1); }
.grabber { width: 38px; height: 4px; margin: 0 auto 20px; background: var(--sand); border-radius: 99px; }
.panel-heading { justify-content: space-between; align-items: flex-start; gap: 12px; }
.eyebrow { margin: 0 0 6px; color: var(--forest-soft); font: 700 9px/1 var(--mono); letter-spacing: .13em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; color: var(--forest); font: 700 clamp(29px, 7vw, 38px)/.92 var(--display); letter-spacing: -.045em; }
h1 em { color: var(--route); font-style: normal; }
.share-button { flex: none; gap: 6px; padding: 8px 10px; color: var(--forest); background: #f1ece1; border: 1px solid #e3dacc; border-radius: 9px; font-size: 10px; font-weight: 800; }
.share-button svg { width: 14px; height: 14px; }
.metrics-row { display: grid; grid-template-columns: 1.18fr 1fr 1fr; gap: 12px; margin: 26px 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.metric { min-width: 0; padding-right: 9px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric-value { color: var(--forest); font: 500 25px/1 var(--mono); letter-spacing: -.09em; }
.metric-primary .metric-value { color: var(--route); font-size: 31px; font-weight: 500; }
.metric:nth-child(3) .metric-value { font-size: 18px; letter-spacing: -.11em; white-space: nowrap; }
.metric-label { margin-left: 4px; color: var(--forest-soft); font: 700 10px var(--body); }
.metric-caption { display: block; margin-top: 7px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.action-row { gap: 10px; }
.primary-action { min-height: 53px; display: flex; flex: 1; align-items: center; justify-content: center; gap: 10px; color: var(--paper); background: var(--forest); border: 0; border-radius: 12px; box-shadow: 0 8px 18px rgba(49,71,58,.2); font-size: 13px; font-weight: 800; transition: background .2s, transform .2s; }
.primary-action:active { transform: translateY(1px); }
.primary-action.is-paused { background: var(--forest-soft); }
.action-icon { width: 25px; height: 25px; display: grid; place-items: center; color: var(--forest); background: var(--route); border-radius: 50%; }
.action-icon svg { width: 15px; height: 15px; stroke-width: 2.2; }
.sos-action { --hold-progress: 0; position: relative; width: 60px; height: 53px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; color: var(--paper); background: var(--coral); border: 0; border-radius: 12px; box-shadow: 0 8px 18px rgba(217,85,61,.2); touch-action: none; user-select: none; }
.sos-action::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.2); transform: scaleX(var(--hold-progress)); transform-origin: left; pointer-events: none; }
.sos-action.holding { box-shadow: 0 0 0 4px rgba(217,85,61,.18), 0 8px 18px rgba(217,85,61,.2); }
.sos-action span { font: 800 15px/1 var(--mono); letter-spacing: .03em; }
.sos-action small { margin-top: 3px; opacity: .8; font: 700 8px/1 var(--body); }
.finish-action { width: 100%; display: none; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; padding: 10px; color: var(--forest-soft); background: transparent; border: 1px solid #ddd4c5; border-radius: 10px; font-size: 10px; font-weight: 800; }
.finish-action.visible { display: flex; }
.finish-action svg { width: 14px; height: 14px; color: var(--route); }
.activity-note { min-height: 18px; margin-top: 13px; color: var(--muted); font-size: 10px; }
.note-spark { display: inline-block; margin-right: 4px; color: var(--route); }
.route-alert { display: grid; gap: 3px; margin-top: 12px; padding: 11px 12px; color: #17231b; background: #e9f1d8; border: 2px solid #6b963c; border-radius: 11px; font-size: 11px; }
.route-alert strong { text-transform: uppercase; font: 800 12px var(--mono); letter-spacing: .02em; }
.route-alert span { font-weight: 700; }
.route-alert[data-tone="warning"] { color: #35280d; background: #fff0bd; border-color: #d49b17; }
.route-alert[data-tone="danger"] { color: #fff8f3; background: #a83227; border-color: #732019; }
.route-alert[data-tone="success"] { color: #17301f; background: #d6ebc4; border-color: #5b924c; }
.elevation-profile { margin-top: 18px; padding: 13px 13px 11px; background: #f4f0e7; border: 1px solid #e5dccd; border-radius: 13px; }
.profile-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.profile-heading .eyebrow { margin-bottom: 4px; }
.profile-heading h2 { font-size: 19px; }
.profile-heading > span { color: var(--forest-soft); font: 500 9px var(--mono); }
.profile-chart { position: relative; height: 92px; margin-top: 9px; overflow: hidden; background: repeating-linear-gradient(to bottom, transparent 0 29px, rgba(49,71,58,.08) 30px 31px); border-radius: 8px; }
.profile-chart svg { width: 100%; height: 100%; }
.profile-fill { fill: rgba(214,168,95,.24); stroke: none; }
.profile-line { fill: none; stroke: var(--route); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.profile-marker { display: none; fill: var(--coral); stroke: var(--paper); stroke-width: 2; filter: drop-shadow(0 1px 2px rgba(39,55,45,.3)); }
.profile-marker.visible { display: block; }
.profile-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 9px; }
.profile-empty[hidden] { display: none; }
.history-section { padding: 4px 22px 102px; background: var(--paper); }
.section-heading { justify-content: space-between; margin-bottom: 14px; }
.history-tools { display: flex; align-items: center; gap: 9px; }
.import-button { padding: 7px 8px; color: var(--forest); background: #f1ece1; border: 1px solid #e3dacc; border-radius: 8px; font-size: 9px; font-weight: 800; }
h2 { margin-bottom: 0; color: var(--forest); font: 700 24px/1 var(--display); letter-spacing: -.035em; }
.text-button { padding: 4px 0; color: var(--forest-soft); background: transparent; border: 0; font-size: 10px; font-weight: 800; }
.text-button span { margin-left: 3px; color: var(--route); font-size: 15px; }
.history-list { display: grid; gap: 9px; }
.history-empty { padding: 18px; color: var(--muted); background: #f4f0e7; border: 1px dashed #d8cfbf; border-radius: 12px; font-size: 11px; line-height: 1.45; }
.history-card { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 11px 12px; background: #f7f3eb; border: 1px solid #ece4d6; border-radius: 13px; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.history-card:hover, .history-card:focus-visible { border-color: var(--route); box-shadow: 0 7px 18px rgba(49,71,58,.08); transform: translateY(-1px); outline: none; }
.history-thumb { width: 48px; height: 43px; position: relative; overflow: hidden; background: #cad1b7; border-radius: 9px; }
.history-thumb::before { content: ""; position: absolute; inset: -15px; border: 2px solid rgba(49,71,58,.3); border-radius: 48%; transform: rotate(-30deg); box-shadow: 0 9px 0 rgba(49,71,58,.18), 0 18px 0 rgba(49,71,58,.12); }
.history-thumb::after { content: ""; position: absolute; width: 34px; height: 3px; left: 7px; top: 22px; background: var(--route); border-radius: 2px; transform: rotate(-27deg); }
.history-info b { display: block; color: var(--forest); font: 700 14px var(--display); }
.history-info span { display: block; margin-top: 3px; color: var(--muted); font: 9px var(--mono); }
.history-distance { color: var(--forest); font: 500 13px var(--mono); text-align: right; }
.history-distance small { display: block; margin-top: 3px; color: var(--muted); font: 9px var(--body); }
.export-button { padding: 0; color: var(--forest-soft); background: transparent; border: 0; font: 700 9px var(--body); text-decoration: underline; }
.bottom-nav { position: fixed; z-index: 10; bottom: 0; left: 50%; width: min(100%, 620px); display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px 20px max(10px, env(safe-area-inset-bottom)); background: rgba(252,250,245,.94); border-top: 1px solid rgba(49,71,58,.1); box-shadow: 0 -8px 28px rgba(39,55,45,.08); transform: translateX(-50%); backdrop-filter: blur(10px); }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; color: #9aa198; background: transparent; border: 0; font-size: 9px; font-weight: 700; }
.nav-item.active { color: var(--forest); }
.nav-icon { width: 25px; height: 23px; display: grid; place-items: center; }
.nav-icon svg { width: 18px; height: 18px; }
.nav-item.active .nav-icon { color: var(--route); background: #f3e7cf; border-radius: 8px; }
.toast { position: fixed; z-index: 40; left: 50%; bottom: 92px; max-width: calc(100% - 40px); padding: 11px 15px; color: var(--paper); background: var(--forest-deep); border-radius: 999px; box-shadow: 0 10px 25px rgba(31,49,38,.25); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: .25s ease; font-size: 11px; font-weight: 700; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.modal { width: min(92vw, 430px); padding: 0; color: var(--ink); background: transparent; border: 0; }
.modal::backdrop { background: rgba(31, 49, 38, .62); backdrop-filter: blur(4px); }
.modal-card { position: relative; padding: 30px 24px 23px; background: var(--paper); border: 1px solid rgba(255,255,255,.5); border-radius: 22px; box-shadow: 0 18px 60px rgba(20,34,26,.28); }
.modal-close { position: absolute; top: 12px; right: 15px; width: 28px; height: 28px; color: var(--muted); background: transparent; border: 0; font-size: 24px; line-height: 1; }
.modal-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 18px; color: var(--forest); background: #f0e6d1; border-radius: 13px; }
.modal-icon svg { width: 20px; height: 20px; }
.modal h2 { margin-bottom: 9px; font-size: 30px; }
.modal-copy { max-width: 34em; margin-bottom: 18px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.share-link-box { justify-content: space-between; gap: 8px; margin-bottom: 12px; padding: 5px 5px 5px 12px; background: #f1ece1; border: 1px solid #e6ddce; border-radius: 10px; }
.share-link-box span { overflow: hidden; color: var(--forest-soft); text-overflow: ellipsis; white-space: nowrap; font: 10px var(--mono); }
.share-link-box button { flex: none; padding: 8px 10px; color: var(--paper); background: var(--forest); border: 0; border-radius: 7px; font-size: 10px; font-weight: 800; }
.modal-primary { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--paper); background: var(--forest); border: 0; border-radius: 10px; font-size: 12px; font-weight: 800; }
.modal-primary svg { width: 16px; height: 16px; }
.gps-onboarding-card { border-top: 5px solid var(--route); }
.gps-onboarding-icon { width: 54px; height: 54px; margin-bottom: 14px; color: var(--paper); background: var(--forest); border-radius: 16px; }
.gps-onboarding-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.gps-onboarding-card h2 { margin: 0 0 8px; color: var(--forest); font: 800 27px/1.05 var(--display); letter-spacing: -.04em; }
.gps-onboarding-button { min-height: 52px; margin-top: 9px; background: var(--coral); font-size: 13px; }
.gps-onboarding-button:disabled { opacity: .65; }
.gps-onboarding-status { min-height: 0; margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.gps-onboarding-status:not(:empty) { min-height: 18px; }
.gps-onboarding-status[data-tone="error"] { color: #a52f22; font-weight: 700; }
.gps-onboarding-status[data-tone="success"] { color: var(--forest); font-weight: 700; }
.sos-modal-card { max-height: min(92vh, 900px); overflow-y: auto; border-top: 5px solid var(--coral); overscroll-behavior: contain; }
.sos-emblem { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 16px; color: var(--paper); background: var(--coral); border-radius: 18px; font: 800 18px var(--mono); box-shadow: 0 8px 18px rgba(217,85,61,.2); }
.sos-eyebrow { color: var(--coral); }
.sos-location { gap: 10px; margin: 16px 0; padding: 12px; background: #f7eee9; border-radius: 10px; }
.sos-location .status-dot { background: var(--coral); box-shadow: 0 0 0 3px rgba(217,85,61,.12); }
.sos-location b, .sos-location small { display: block; }
.sos-location b { color: var(--forest); font-size: 11px; }
.sos-location small { margin-top: 3px; color: var(--muted); font: 9px var(--mono); }
.sos-actions { gap: 8px; }
.call-button, .message-button { flex: 1; min-height: 45px; border-radius: 9px; font-size: 11px; font-weight: 800; }
.call-button { color: var(--paper); background: var(--coral); border: 1px solid var(--coral); }
.message-button { color: var(--forest); background: #f0e6d1; border: 1px solid #e0d2bd; }
.cancel-button { width: 100%; margin-top: 10px; padding: 8px; color: var(--muted); background: transparent; border: 0; font-size: 10px; font-weight: 700; }
.sos-send-status { margin: 10px 0; color: var(--forest-soft); font-size: 11px; line-height: 1.4; }
.sos-whatsapp-link { display: block; margin: 10px 0; padding: 11px; color: var(--paper); background: #287c4a; border-radius: 9px; font-size: 11px; font-weight: 800; text-align: center; text-decoration: none; }
.sos-whatsapp-link[hidden] { display: none; }
.offline-rescue { margin: 14px -8px; padding: 16px 13px; color: #fff; background: #171b1c; border: 2px solid #f4b544; border-radius: 14px; text-align: left; }
.offline-rescue[hidden] { display: none; }
.offline-rescue-kicker { margin: 0 0 5px; color: #ffd36a; font: 800 10px var(--mono); letter-spacing: .1em; }
.offline-rescue h3 { margin: 0; color: #fff; font: 800 21px var(--display); }
.offline-rescue-help { margin: 6px 0 12px; color: #e6e9e8; font-size: 11px; line-height: 1.45; }
.offline-gps-fix, .offline-medical-card dl { display: grid; gap: 7px; margin: 0; }
.offline-gps-fix > div, .offline-medical-card dl > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.offline-gps-fix { padding: 11px; background: #262d2d; border-radius: 10px; }
.offline-gps-fix dt { color: #c8cfce; font-size: 10px; }
.offline-gps-fix dd { margin: 0; color: #fff; font: 700 13px var(--mono); text-align: right; overflow-wrap: anywhere; }
.offline-gps-fix > div:first-child dd, .offline-gps-fix > div:nth-child(2) dd { color: #ffd36a; font-size: 17px; }
.offline-medical-card { margin-top: 10px; padding: 11px; color: #202525; background: #fff; border-radius: 10px; }
.offline-medical-card > p { margin: 0 0 8px; color: #9e311f; font: 800 10px var(--mono); letter-spacing: .08em; }
.offline-medical-card dt { color: #4f5857; font-size: 10px; font-weight: 700; }
.offline-medical-card dd { max-width: 60%; margin: 0; color: #151918; font-size: 11px; font-weight: 800; text-align: right; overflow-wrap: anywhere; }
.offline-call-button, .offline-call-secondary { display: block; padding: 13px; border-radius: 9px; font-size: 14px; font-weight: 900; text-align: center; text-decoration: none; }
.offline-call-button { margin-top: 12px; color: #fff; background: #c73524; border: 2px solid #ff806d; }
.offline-call-secondary { margin-top: 7px; padding: 9px; color: #fff; background: #343b3a; border: 1px solid #68716e; font-size: 12px; }
.offline-call-note { margin: 9px 0 0; color: #e1e5e4; font-size: 10px; line-height: 1.45; }
.pending-emergency { margin-top: 12px; padding: 11px; color: #171b1c; background: #ffe08e; border-radius: 10px; }
.pending-emergency[hidden] { display: none; }
.pending-emergency strong { display: block; font-size: 11px; line-height: 1.4; }
.pending-message-label { display: block; margin-top: 9px; color: #33372c; font-size: 10px; font-weight: 800; }
.pending-emergency textarea { width: 100%; margin-top: 5px; padding: 8px; color: #f4f5f3; background: #252c2b; border: 1px solid #69716b; border-radius: 7px; font: 10px/1.4 var(--mono); resize: vertical; }
.pending-share-button, .pending-clear-button { width: 100%; min-height: 38px; margin-top: 7px; color: #fff; background: #252c2b; border: 0; border-radius: 8px; font-size: 10px; font-weight: 800; }
.pending-clear-button { color: #242927; background: transparent; border: 1px solid #77745f; }
.profile-card { max-height: min(88vh, 780px); overflow-y: auto; text-align: center; overscroll-behavior: contain; }
.profile-avatar { width: 62px; height: 62px; display: grid; place-items: center; overflow: hidden; margin: 0 auto 16px; background: #101211; border-radius: 50%; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-card .modal-copy { margin: 0 auto 20px; }
.profile-facts { justify-content: center; gap: 8px; }
.profile-facts span { min-width: 100px; padding: 10px; color: var(--muted); background: #f3eee5; border-radius: 10px; font-size: 10px; }
.profile-facts b { display: block; color: var(--forest); font: 500 17px var(--mono); }
.sampling-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 11px 12px; color: var(--forest-soft); background: #f3eee5; border-radius: 10px; font-size: 10px; font-weight: 800; text-align: left; }
.sampling-control select { padding: 7px 8px; color: var(--forest); background: var(--paper); border: 1px solid #e0d6c6; border-radius: 7px; font-size: 10px; font-weight: 700; }
.offline-control { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; margin-top: 10px; padding: 11px 12px; color: var(--forest); background: #eef1e7; border: 1px solid #dfe6d5; border-radius: 10px; text-align: left; }
.offline-control b, .offline-control small { display: block; }
.offline-control b { font-size: 11px; }
.offline-control small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.3; }
.offline-control select, .offline-control button { padding: 7px 8px; color: var(--forest); background: var(--paper); border: 1px solid #d5dfc8; border-radius: 7px; font-size: 9px; font-weight: 800; }
.offline-control button { color: var(--paper); background: var(--forest); }
.emergency-settings { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e5ddcf; text-align: left; }
.emergency-settings .eyebrow { margin-bottom: 5px; color: var(--coral); }
.emergency-settings h3 { margin: 0; color: var(--forest); font: 700 17px var(--display); }
.settings-note { margin: 5px 0 12px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.emergency-settings form { display: grid; gap: 6px; }
.emergency-settings label { margin-top: 5px; color: var(--forest-soft); font-size: 10px; font-weight: 800; }
.emergency-settings label span { color: var(--muted); font-weight: 500; }
.emergency-settings input, .emergency-settings textarea { width: 100%; padding: 9px 10px; color: var(--ink); background: #fffefa; border: 1px solid #ded6c8; border-radius: 8px; font: 12px var(--body); }
.emergency-settings textarea { min-height: 58px; resize: vertical; }
.emergency-settings input:focus, .emergency-settings textarea:focus { outline: 2px solid rgba(217,85,61,.3); border-color: var(--coral); }
.settings-save { min-height: 42px; margin-top: 8px; color: var(--paper); background: var(--forest); border: 0; border-radius: 9px; font-size: 11px; font-weight: 800; }
.settings-status { min-height: 15px; margin: 2px 0 0; color: var(--forest-soft); font-size: 10px; }
@keyframes pin-breathe { 0%, 100% { transform: scale(.8); opacity: .4; } 50% { transform: scale(1.1); opacity: .9; } }
@keyframes dot-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (min-width: 621px) { body { padding: 20px 0; } .app-shell { border-radius: 24px; min-height: calc(100vh - 40px); } .bottom-nav { bottom: 20px; border-radius: 0 0 24px 24px; } }
@media (max-width: 360px) { .topbar { padding-left: 15px; padding-right: 15px; } .ride-panel, .history-section { padding-left: 16px; padding-right: 16px; } .gps-status { display: none; } .metrics-row { gap: 8px; } .metric-value { font-size: 22px; } .metric-primary .metric-value { font-size: 27px; } }