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

  :root {
    --green: #1a6b3a;
    --green-light: #2d9e58;
    --bg: #f5f5f0;
    --text: #222;
    --card: #fff;
    --shadow: 0 2px 12px rgba(0,0,0,0.15);
    --radius: 14px;
    --bar-h: 64px;
    --border: #e0e0e0;
  }

  html, body { touch-action: manipulation; height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

  /* własny polski panel wskazówek zastępuje domyślne UI Leaflet Routing Machine */
  .leaflet-routing-container { display: none !important; }
  /* zoom +/- niżej, by nie chował się pod górnym banerem trasy / nawigacją */
  .leaflet-top.leaflet-right { top: 66px; }
  body.live-nav-on .leaflet-top.leaflet-right { top: 150px; }
  /* login/ustawienia zsuwają się w dół gdy górny baner trasy jest widoczny (top inline w JS, bez transition — psuje pozycjonowanie) */

  #map { position: absolute; inset: 0; bottom: var(--bar-h); z-index: 0; }

  /* ── bottom nav bar ── */
  #navbar {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--bar-h);
    background: var(--card);
    display: flex; flex-direction: column; align-items: stretch;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.12);
    z-index: 1000;
  }
  .nav-buttons { display: flex; align-items: stretch; flex: 0 0 52px; }
  #nav-credits {
    flex: 0 0 12px; text-align: center; font-size: 8px; color: #bbb;
    line-height: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 0 8px;
  }
  #nav-credits a { color: #aaa; text-decoration: none; }
  .nav-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; border: none; background: transparent; cursor: pointer;
    font-size: 9.5px; color: #888; padding: 3px 4px;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-btn svg { width: 21px; height: 21px; }
  .nav-btn.active { color: var(--green); }
  .nav-btn.active svg path, .nav-btn.active svg rect, .nav-btn.active svg circle { fill: var(--green); }

  /* ── pływające przyciski (model "ręka": akcje po stronie ręki, kontrolki mapy po przeciwnej) ── */
  #fab-locate, #fab-layers, #fab-search-map, #fab-record, #fab-favs, #fab-planned, #fab-report {
    position: fixed; width: 52px; height: 52px; border-radius: 50%;
    background: var(--card); border: none; box-shadow: var(--shadow);
    cursor: pointer; z-index: 999; display: flex; align-items: center; justify-content: center;
    font-size: 22px; -webkit-tap-highlight-color: transparent;
  }
  #fab-locate svg, #fab-layers svg { width: 24px; height: 24px; }

  /* domyślnie praworęczny:
     LEWA kolumna (dół→góra): lokalizacja, pinezka Zaplanowane, gwiazdka Ulubione, styl podkładu
     PRAWA kolumna (dół→góra): rekorder, lupka */
  /* lewa kolumna (dół→góra): zaplanowane, ulubione, warstwy */
  #fab-planned    { left: 16px;  bottom: calc(var(--bar-h) + 20px); }
  #fab-favs       { left: 16px;  bottom: calc(var(--bar-h) + 84px); }
  #fab-layers     { left: 16px;  bottom: calc(var(--bar-h) + 148px); }
  #fab-report     { left: 16px;  bottom: calc(var(--bar-h) + 212px); }
  /* prawa kolumna (dół→góra): lokalizuj, szukaj, rekorder */
  #fab-locate     { right: 16px; bottom: calc(var(--bar-h) + 20px); }
  #fab-search-map { right: 16px; bottom: calc(var(--bar-h) + 84px); }
  #fab-record     { right: 16px; bottom: calc(var(--bar-h) + 148px); }

  /* leworęczny: zamień kolumny stronami */
  body.hand-left #fab-planned,
  body.hand-left #fab-favs,
  body.hand-left #fab-layers,
  body.hand-left #fab-report      { left: auto; right: 16px; }
  body.hand-left #fab-locate,
  body.hand-left #fab-record,
  body.hand-left #fab-search-map  { right: auto; left: 16px; }

  /* gdy otwarte dolne okno (baner trasy / panel / arkusz) lub szukanie celu — schowaj WSZYSTKIE pływające FAB-y */
  body.route-ready-open #fab-layers, body.route-ready-open #fab-locate,
  body.route-ready-open #fab-record, body.route-ready-open #fab-search-map,
  body.route-ready-open #fab-favs, body.route-ready-open #fab-planned, body.route-ready-open #fab-report,
  body.sheet-open #fab-layers, body.sheet-open #fab-locate,
  body.sheet-open #fab-record, body.sheet-open #fab-search-map,
  body.sheet-open #fab-favs, body.sheet-open #fab-planned, body.sheet-open #fab-report,
  body.panel-open #fab-layers, body.panel-open #fab-locate,
  body.panel-open #fab-record, body.panel-open #fab-search-map,
  body.panel-open #fab-favs, body.panel-open #fab-planned, body.panel-open #fab-report,
  body.route-dest-on #fab-favs, body.route-dest-on #fab-planned { display: none; }
  /* wyznaczanie trasy (baner „wskaż punkt") — schowaj zbędne FAB-y, lupka zostaje do wskazania celu */
  body.route-planning #fab-record, body.route-planning #fab-locate, body.route-planning #fab-layers,
  body.route-planning #fab-favs, body.route-planning #fab-planned, body.route-planning #fab-report { display: none; }
  /* Future theme — chowaj klasyczne FABs i bannery; overlay przejmuje UI */
  body.theme-future #fab-favs, body.theme-future #fab-planned,
  body.theme-future #fab-layers, body.theme-future #fab-locate, body.theme-future #fab-report,
  body.theme-future #fab-search-map, body.theme-future #route-banner,
  body.theme-future #route-dest-search, body.theme-future #route-ready-bar,
  body.theme-future #track-draft-bar { display: none !important; }
  body.live-nav-on #fab-search-map { display: none !important; }
  body.live-nav-on #fab-favs, body.live-nav-on #fab-planned { display: none !important; }
  body.live-mini-on #fab-settings, body.live-nav-on #fab-settings { display: none !important; }
  /* debug panel po prawej — tylko locate wędruje w lewo (search i record schowane podczas nav) */
  body.nav-debug-on #fab-locate { right: auto; left: 16px; }
  .fav-btn {
    flex-shrink: 0; background: none; border: none; cursor: pointer;
    font-size: 18px; padding: 6px 2px 6px 10px; line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }
  #fav-cat-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.48); z-index: 3100;
    display: none; align-items: flex-end; justify-content: center; padding-bottom: 0;
  }
  #fav-cat-modal.open { display: flex; }
  #fav-cat-card {
    background: var(--card); border-radius: 22px 22px 0 0; width: 100%; max-width: 500px;
    padding: 20px 16px 32px; box-shadow: 0 -4px 24px rgba(0,0,0,.18);
    animation: slideUp .22s cubic-bezier(.2,.8,.3,1);
  }
  #fav-cat-card h3 { font-size: 16px; margin: 0 0 16px; color: var(--text); }
  .fav-cats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .fav-cat-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: #f4faf5; border: 1.5px solid #d0e8d8; border-radius: 14px;
    padding: 12px 6px; cursor: pointer; font-size: 12px; font-weight: 600;
    color: var(--text); -webkit-tap-highlight-color: transparent;
  }
  .fav-cat-btn:active { background: #e0f2e6; }
  .fav-cat-btn .cat-emoji { font-size: 22px; line-height: 1; }
  #fav-sheet, #planned-sheet {
    position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 2100;
    display: none; align-items: flex-end; justify-content: center;
  }
  #fav-sheet.open, #planned-sheet.open { display: flex; }
  #fav-sheet-card, #planned-sheet-card {
    background: var(--card); border-radius: 22px 22px 0 0; width: 100%; max-width: 500px;
    max-height: 82vh; display: flex; flex-direction: column;
    box-shadow: 0 -4px 24px rgba(0,0,0,.18); animation: slideUp .22s cubic-bezier(.2,.8,.3,1);
  }
  #fav-sheet-head, #planned-sheet-head {
    padding: 16px 16px 12px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid #eee;
  }
  #fav-sheet-head h2, #planned-sheet-head h2 { font-size: 18px; margin: 0; }
  #fav-sheet-body { overflow-y: auto; flex: 1; padding: 0 0 24px; }
  #planned-sheet-body { overflow-y: auto; flex: 1; padding: 8px 16px 24px; }
  .fav-cat-section { padding: 0 16px; margin-top: 16px; }
  .fav-cat-section h4 { font-size: 12px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 8px; }
  .fav-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 0;
    border-bottom: 1px solid #f0f0f0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .fav-item:last-child { border: none; }
  .fav-item:active { background: #f8f8f8; }
  .fav-item-ico { font-size: 20px; flex-shrink: 0; }
  .fav-item-info { flex: 1; min-width: 0; }
  .fav-item-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fav-item-sub  { font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
  .fav-item-cnt  { font-size: 11px; color: #bbb; flex-shrink: 0; }
  .fav-del-btn   { background: none; border: none; font-size: 18px; color: #ccc; cursor: pointer; padding: 4px; flex-shrink: 0; }
  .fav-del-btn:active { color: #c62828; }
  .fav-edit-btn  { background: none; border: none; font-size: 15px; color: #ccc; cursor: pointer; padding: 4px; flex-shrink: 0; }
  .fav-edit-btn:active { color: var(--green); }
  .fav-empty { color: #aaa; font-size: 13px; padding: 6px 0; }
  #fab-record.recording { background: #c62828; animation: recPulse 1.4s infinite; }
  @keyframes recPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(198,40,40,.5); } 50% { box-shadow: 0 0 0 10px rgba(198,40,40,0); } }
  #route-more-panel { display: none; }
  #route-more-panel.open { display: flex; }
  @keyframes locatePulse { 0% { box-shadow:0 0 0 0 rgba(66,133,244,.7); } 70% { box-shadow:0 0 0 18px rgba(66,133,244,0); } 100% { box-shadow:0 0 0 0 rgba(66,133,244,0); } }
  @keyframes locatePulseStrong { 0% { box-shadow:0 0 0 0 rgba(66,133,244,.9),0 0 0 0 rgba(66,133,244,.4); } 50% { box-shadow:0 0 0 16px rgba(66,133,244,0),0 0 0 32px rgba(66,133,244,0); } 100% { box-shadow:0 0 0 0 rgba(66,133,244,0),0 0 0 0 rgba(66,133,244,0); } }
  .locate-pulse { border-radius:50%; animation: locatePulse 1s ease-out 3; }
  .locate-pulse-strong { border-radius:50%; animation: locatePulseStrong .8s ease-out 4; }
  #record-pill {
    position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
    background: #c62828; color: #fff; border-radius: 22px; padding: 8px 14px;
    box-shadow: var(--shadow); z-index: 1001; display: none; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 600;
  }
  #record-pill.show { display: flex; }
  #record-pill button {
    background: rgba(255,255,255,.25); border: none; color: #fff; border-radius: 14px;
    padding: 5px 10px; font-size: 13px; font-weight: 700; cursor: pointer;
  }
  #record-pill.paused { background: #ef6c00; animation: none; }

  #record-resume-banner {
    position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
    background: var(--card); color: var(--text); border-radius: 14px; padding: 12px 16px;
    box-shadow: var(--shadow); z-index: 1002; display: none; align-items: center; gap: 12px;
    font-size: 14px; font-weight: 600; max-width: calc(100% - 24px);
    border-left: 5px solid var(--green);
  }
  #record-resume-banner.show { display: flex; }
  #record-resume-banner button {
    background: #f0f0ec; border: none; color: #c62828; border-radius: 12px;
    padding: 7px 12px; font-size: 13px; font-weight: 700; cursor: pointer; flex-shrink: 0;
  }

  #record-save-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.52);
    z-index: 3001; display: none; align-items: center; justify-content: center; padding: 24px;
  }
  #record-save-modal.open { display: flex; }
  #record-save-card {
    background: var(--card); border-radius: 20px; box-shadow: 0 8px 48px rgba(0,0,0,.3);
    padding: 26px 24px 22px; max-width: 340px; width: 100%; text-align: center;
  }
  #record-save-card h2 { font-size: 20px; font-weight: 700; margin: 0 0 6px; color: var(--text); }
  #record-save-info { font-size: 14px; color: #666; margin: 0 0 18px; }
  #record-save-name {
    width: 100%; padding: 12px; border: 1.5px solid #ddd; border-radius: 12px;
    font-size: 15px; outline: none; margin-bottom: 14px; -webkit-appearance: none;
  }
  #record-save-name:focus { border-color: var(--green); }
  .record-save-btns { display: flex; gap: 10px; }
  .record-save-btns button {
    flex: 1; padding: 13px; border: none; border-radius: 12px;
    font-size: 15px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .record-save-btns .rs-discard { background: #f0f0ec; color: #666; }
  .record-save-btns .rs-save { background: var(--green); color: #fff; }

  /* ── legenda kolorów typu drogi ──
     Lewy górny róg pod #fab-settings — jedyny wolny narożnik: zoom controls są wyłączone
     (zoomControl:false), dolne rogi zajmują kolumny FAB-ów, góra-środek to toast/route-banner.
     Ukryta podczas prowadzenia (live-nav-on), w motywie future i przy panelu debug. */
  #roadcat-legend {
    position: fixed; left: 12px; top: 56px; z-index: 900;
    display: none; cursor: pointer;
    background: rgba(255,255,255,0.9); color: var(--text);
    border: 1px solid var(--border); border-radius: 10px;
    padding: 6px 22px 6px 8px; box-shadow: 0 2px 10px rgba(0,0,0,.16);
    font-size: 10.5px; line-height: 1.6; max-width: 48vw;
    -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  }
  /* znacznik A/B/C na linii wariantu — zeruje domyslne tlo .leaflet-div-icon */
  .qa-badge { background: none !important; border: 0 !important; }
  #roadcat-legend .rcl-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
  #roadcat-legend .rcl-row i { width: 14px; height: 4px; border-radius: 2px; flex: 0 0 auto; }
  #roadcat-legend .rcl-x {
    position: absolute; top: 1px; right: 2px; width: 18px; height: 18px; padding: 0;
    border: none; background: none; color: #999; font-size: 11px; line-height: 1; cursor: pointer;
  }
  /* NIE chowamy przy nav-debug-on: legenda jest w LEWYM gornym rogu, pasek debug w prawym
     i na dole — nie kolidują, a użytkownik z włączonym debugiem na stałe nigdy by legendy
     nie zobaczył (zgłoszone 2026-07-26). */
  body.live-nav-on #roadcat-legend,
  body.theme-future #roadcat-legend { display: none !important; }

  #fab-settings {
    position: fixed; left: 12px; top: 12px;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.88); border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.18); cursor: pointer; z-index: 1001;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; opacity: 0.65; -webkit-tap-highlight-color: transparent;
  }
  #fab-settings:hover, #fab-settings:active { opacity: 1; }

  #settings-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.52);
    z-index: 3000; display: none; align-items: flex-start; justify-content: center; padding: 16px;
  }
  #settings-modal.open { display: flex; }
  #settings-card {
    background: var(--card); border-radius: 20px; box-shadow: 0 8px 48px rgba(0,0,0,.3);
    padding: 22px; max-width: 360px; width: 100%;
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    animation: settingsDrop .26s cubic-bezier(.2,.7,.3,1);
  }
  @keyframes settingsDrop { from { transform: translateY(-24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  #settings-card h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; color: var(--text); position: sticky; top: 0; background: var(--card); padding: 4px 0; z-index: 1; }
  #settings-card > div:first-child { position: sticky; top: 0; background: var(--card); z-index: 2; border-bottom: 1px solid var(--border); }
  .settings-row { margin: 0; padding: 18px 0 8px; border-top: 1px solid #ececec; }
  .settings-row:first-of-type { border-top: none; padding-top: 10px; }
  .set-section { margin: 18px 0 0; padding: 6px 0 2px; font-size: 12px; font-weight: 800; color: var(--green); text-transform: uppercase; letter-spacing: .06em; border-top: 2px solid #eef3ef; }
  .set-section:first-of-type { border-top: none; margin-top: 4px; }
  .set-section + .settings-row { border-top: none; padding-top: 8px; }
  .settings-label { font-size: 13px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 12px; }
  .seg { display: flex; gap: 6px; }
  .seg button {
    flex: 1; min-width: 0; padding: 10px 3px; border: 2px solid #e0e0e0; border-radius: 12px;
    background: #fff; color: #666; font-size: 12px; font-weight: 600; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    -webkit-tap-highlight-color: transparent;
  }
  .seg button.active { border-color: var(--green); color: var(--green); background: #eef7f0; }
  .set-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 0; font-size: 14px; color: var(--text); cursor: pointer;
    border-bottom: 1px solid #f0f0ec;
  }
  .set-toggle input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--green); cursor: pointer; flex-shrink: 0; }
  .seg button .seg-ico { font-size: 18px; }
  #settings-close {
    width: 100%; margin-top: 20px; padding: 13px; border: none; border-radius: 12px;
    background: var(--green); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
  }
  #settings-clear-cache {
    width: 100%; padding: 12px; border: 1.5px solid #f3c9c9; border-radius: 12px;
    background: #fdecec; color: #c62828; font-size: 14px; font-weight: 600; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #settings-clear-cache:active { background: #f9dada; }

  #logout-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.52);
    z-index: 3000; display: none; align-items: center; justify-content: center;
    padding: 24px;
  }
  #logout-modal.open { display: flex; }
  #logout-modal-card {
    background: var(--card); border-radius: 20px;
    box-shadow: 0 8px 48px rgba(0,0,0,.3);
    padding: 28px 24px 22px; max-width: 320px; width: 100%; text-align: center;
  }
  #logout-modal-card h2 { font-size: 20px; font-weight: 700; margin: 0 0 8px; color: var(--text); }
  #logout-modal-card p { font-size: 14px; color: #666; margin: 0 0 16px; line-height: 1.5; }
  #logout-countdown-bar {
    height: 4px; background: #e8e8e4; border-radius: 2px; margin-bottom: 8px; overflow: hidden;
  }
  #logout-countdown-fill {
    height: 100%; width: 100%; background: #c62828; border-radius: 2px;
  }
  #logout-countdown-text { font-size: 13px; color: #aaa; margin-bottom: 22px; }
  .logout-btns { display: flex; gap: 10px; }
  .logout-btns button {
    flex: 1; padding: 13px; border: none; border-radius: 12px;
    font-size: 15px; font-weight: 600; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #logout-btn-confirm { background: #c62828; color: #fff; }
  #logout-btn-cancel { background: #f0f0eb; color: var(--text); }

  /* potwierdzenie zakończenia nawigacji — auto-anulujące odliczanie */
  /* WSZYSTKIE te modale MUSZĄ mieć position:fixed + backdrop + z-index — inaczej
     przy .open renderują się w normalnym flow na dole strony i rozwalają layout
     (waypoint/motion nie miały tej reguły → „× Zakończ" wchodził na mapę). */
  #navstop-modal, #arrive-modal, #waypoint-modal, #motion-resume-modal, #report-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.52);
    z-index: 3000; display: none; align-items: center; justify-content: center; padding: 24px;
  }
  #navstop-modal.open, #arrive-modal.open, #waypoint-modal.open,
  #motion-resume-modal.open, #report-modal.open { display: flex; }
  #report-card {
    background: var(--card); border-radius: 20px; box-shadow: 0 8px 48px rgba(0,0,0,.3);
    padding: 22px 20px; max-width: 340px; width: 100%; text-align: left;
  }
  #report-card h2 { font-size: 18px; font-weight: 700; margin: 0 0 12px; color: var(--text); text-align: center; }
  #report-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; border-radius: 12px; }
  #report-cats.attn { animation: reportCatsAttn .5s ease; }
  @keyframes reportCatsAttn {
    0%, 100% { transform: translateX(0); box-shadow: none; }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
    50% { box-shadow: 0 0 0 3px rgba(198,40,40,.35); }
  }
  #report-cats button {
    flex: 1 1 auto; min-width: 100px; padding: 9px 8px; border-radius: 12px; border: 1.5px solid #b0c9b8;
    font-size: 12.5px; font-weight: 600; cursor: pointer; background: #f0f4f0; color: #6a9a7a;
  }
  #report-cats button.active { background: #c62828; color: #fff; border-color: #c62828; }
  #report-note {
    width: 100%; padding: 10px; border: 1.5px solid #ddd; border-radius: 12px; font-size: 14px;
    outline: none; margin-bottom: 10px; resize: vertical; min-height: 60px; box-sizing: border-box;
  }
  #report-voice-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
  #report-voice-btn {
    padding: 9px 14px; border-radius: 12px; border: none; font-size: 13px; font-weight: 600;
    cursor: pointer; background: #1565c0; color: #fff;
  }
  #report-voice-btn.recording { background: #c62828; }
  #report-voice-status { font-size: 12.5px; color: #666; flex: 1; }
  #motion-resume-card {
    background: var(--card); border-radius: 20px; box-shadow: 0 8px 48px rgba(0,0,0,.3);
    padding: 28px 24px 22px; max-width: 300px; width: 100%; text-align: center;
  }
  #motion-resume-cd-bar { height: 4px; background: #e8e8e4; border-radius: 2px; margin-bottom: 8px; overflow: hidden; }
  #motion-resume-cd-fill { height: 100%; width: 100%; background: #1565c0; border-radius: 2px; }
  #motion-resume-cd-text { font-size: 13px; color: #aaa; margin-bottom: 22px; }
  #waypoint-card { background: var(--card); border-radius: 20px; box-shadow: 0 8px 48px rgba(0,0,0,.3); padding: 28px 24px 22px; max-width: 320px; width: 100%; text-align: center; }
  #waypoint-cd-bar { height: 4px; background: #e8e8e4; border-radius: 2px; margin-bottom: 8px; overflow: hidden; }
  #waypoint-cd-fill { height: 100%; width: 100%; background: #1565c0; border-radius: 2px; transition: width linear; }
  #waypoint-cd-text { font-size: 13px; color: #aaa; margin-bottom: 22px; }
  #navstop-card, #arrive-card {
    background: var(--card); border-radius: 20px; box-shadow: 0 8px 48px rgba(0,0,0,.3);
    padding: 28px 24px 22px; max-width: 320px; width: 100%; text-align: center;
  }
  #navstop-card h2, #arrive-card h2 { font-size: 20px; font-weight: 700; margin: 0 0 8px; color: var(--text); }
  #navstop-card p, #arrive-card p { font-size: 14px; color: #666; margin: 0 0 16px; line-height: 1.5; }
  #navstop-cd-bar, #arrive-cd-bar { height: 4px; background: #e8e8e4; border-radius: 2px; margin-bottom: 8px; overflow: hidden; }
  #navstop-cd-fill { height: 100%; width: 100%; background: #c62828; border-radius: 2px; }
  #arrive-cd-fill  { height: 100%; width: 100%; background: #1a6b3a; border-radius: 2px; }
  #navstop-cd-text, #arrive-cd-text { font-size: 13px; color: #aaa; margin-bottom: 22px; }

  /* ── region selector ──
     region-row to JEDEN scrollowalny pasek obejmujący WSZYSTKIE chipy (region-selector + mine-chip
     razem) — wcześniej #region-selector (flex:1) i #mine-chip były osobnymi sąsiadami w nie-scrollowalnym
     flex-rzędzie, więc #mine-chip odbierał miejsce reszcie i chipy się realnie nie mieściły
     (scrollWidth>clientWidth) — bez widocznego scrollbara wyglądało to jak obcięty przycisk. */
  #region-row {
    display: flex; gap: 8px; padding: 0 16px 10px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #region-row::-webkit-scrollbar { display: none; }
  #region-selector { display: flex; gap: 8px; padding: 0; margin: 0; }
  .region-chip {
    flex: 0 0 auto; padding: 8px 16px; border: 2px solid #e0e0e0; border-radius: 24px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    background: #fff; color: #555; white-space: nowrap;
    -webkit-tap-highlight-color: transparent; transition: all .2s;
  }
  .region-chip.active { background: var(--green); color: #fff; border-color: var(--green); }
  #mine-chip {
    flex: 0 0 auto; padding: 8px 16px; border: 2px solid #e0e0e0; border-radius: 24px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    background: #fff; color: #555; white-space: nowrap;
    -webkit-tap-highlight-color: transparent; transition: all .2s;
  }
  #mine-chip.active { background: #e65100; color: #fff; border-color: #e65100; }

  #trail-controls { padding: 0 16px 10px; }
  #trail-search {
    width: 100%; padding: 9px 12px; border: 1.5px solid #ddd; border-radius: 10px;
    font-size: 14px; outline: none; -webkit-appearance: none;
  }
  #trail-search:focus { border-color: var(--green); }
  #trail-control-btns { display: flex; gap: 8px; margin-top: 8px; }
  #trail-control-btns button {
    flex: 1; padding: 7px 4px; border: 1.5px solid #d0e8d8; border-radius: 18px;
    background: #f4faf5; color: var(--green); font-size: 12px; font-weight: 600; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #trail-control-btns button:active { background: #e8f3ea; }
  #offline-btn {
    display: block; width: calc(100% - 32px); margin: 4px 16px 16px; padding: 12px;
    border: 1.5px solid #d0e8d8; border-radius: 12px; background: #f4faf5;
    color: var(--green); font-size: 14px; font-weight: 600; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #offline-btn:active { background: #e8f3ea; }
  #near-btn {
    display: block; width: calc(100% - 32px); margin: 0 16px 10px; padding: 11px;
    border: none; border-radius: 12px; background: #e8f1fb; color: #1565c0;
    font-size: 14px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  #near-btn:active { background: #d6e6f7; }
  .trail-fav {
    background: none; border: none; font-size: 18px; cursor: pointer; padding: 2px 4px;
    opacity: .35; -webkit-tap-highlight-color: transparent; flex-shrink: 0;
  }
  .trail-fav.on { opacity: 1; }
  .trail-diff { font-weight: 700; }

  .route-opt-row {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; background: #f4faf5;
    border-radius: 10px; margin: 0 16px 12px;
    font-size: 14px; font-weight: 500; cursor: pointer;
    border: 1.5px solid #d0e8d8;
  }
  .route-opt-row input[type=checkbox] {
    width: 20px; height: 20px; accent-color: var(--green); cursor: pointer; flex-shrink: 0;
  }
  .route-opt-row small { color: #888; font-weight: 400; }

  /* ── trail card nav button ── */
  #trail-nav-fab {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--bar-h) + 14px); z-index: 860;
    background: var(--green); color: #fff; border: none; border-radius: 24px;
    padding: 13px 22px; font-size: 14.5px; font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.28); display: none; white-space: nowrap;
    max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
    -webkit-tap-highlight-color: transparent;
  }
  #trail-nav-fab.show { display: block; animation: slideUp .3s ease; }
  #trail-card-nav-btn {
    width: 100%; margin-top: 10px; padding: 11px;
    background: var(--green); color: #fff; border: none; border-radius: 10px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    -webkit-tap-highlight-color: transparent; display: none;
  }
  #trail-card-poi-btn {
    width: 100%; margin-top: 6px; padding: 10px;
    background: #1565c0; color: #fff; border: none; border-radius: 10px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    -webkit-tap-highlight-color: transparent; display: none;
  }

  /* ── Route form (text origin + destination) ── */
  #rform { padding: 0 16px 10px; }
  #via-form { padding: 0 16px 10px; }
  .rform-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); }
  .rform-row:last-child { border-bottom: none; }
  .rform-marker { font-size: 18px; width: 24px; flex-shrink: 0; text-align: center; padding-top: 8px; }
  .rform-field-wrap { flex: 1; min-width: 0; }
  .rform-gps-label { font-size: 14px; color: #555; cursor: pointer; padding: 8px 0; }
  .rform-field {
    width: 100%; box-sizing: border-box;
    font-size: 14px; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--input-bg, #f5f5f5); color: var(--text); outline: none;
  }
  .rform-field:focus { border-color: var(--green); }
  .rform-field-wrap { position: relative; }
  .rform-clear {
    position: absolute; right: 8px; top: 8px;
    background: none; border: none; font-size: 16px; color: #bbb;
    cursor: pointer; padding: 2px 4px; display: none; line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }
  .rform-fav-btn {
    display: block; width: 100%; text-align: left;
    margin-top: 4px; padding: 7px 10px;
    background: #fff5fb; border: 1px solid #f0c0d8; border-radius: 8px;
    font-size: 12px; color: #b05080; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .rform-fav-btn:active { background: #ffe8f4; }
  .rform-results {
    margin-top: 4px; background: var(--card);
    border-radius: 8px; box-shadow: var(--shadow);
    max-height: 55vh; overflow-y: auto; position: relative; z-index: 9999;
    display: none;
  }
  .rform-result-item {
    padding: 9px 12px; font-size: 13px; cursor: pointer;
    border-bottom: 1px solid var(--border); color: var(--text);
  }
  .rform-result-item:last-child { border-bottom: none; }
  .rform-result-item:active { background: var(--hover, #f0f0f0); }
  .geo-kind {
    display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: #fff; background: var(--green);
    padding: 1px 6px; border-radius: 5px; margin-right: 6px; vertical-align: middle;
    line-height: 1.5;
  }
  .geo-kind.k-ulica, .geo-kind.k-adres { background: #90a4ae; }
  .geo-kind.k-atrakcja, .geo-kind.k-zabytek, .geo-kind.k-muzeum, .geo-kind.k-punkt { background: #8d6e63; }
  .geo-kind.k-nocleg, .geo-kind.k-gastronomia { background: #ef6c00; }
  .rform-gps-reset { background: none; border: none; font-size: 17px; cursor: pointer; padding: 6px 2px; flex-shrink: 0; }

  #layer-picker {
    position: fixed; right: 78px; bottom: calc(var(--bar-h) + 148px);
    background: var(--card); border-radius: 14px;
    box-shadow: var(--shadow); z-index: 999;
    overflow: hidden; display: none; min-width: 170px;
  }
  #layer-picker.open { display: block; animation: slideUp .2s ease; }
  .layer-option {
    padding: 13px 16px; font-size: 14.5px; font-weight: 500;
    cursor: pointer; border-bottom: 1px solid #f0f0ec;
    -webkit-tap-highlight-color: transparent;
  }
  .layer-option:last-child { border-bottom: none; }
  .layer-option.active { background: #e8f3ea; color: var(--green); font-weight: 700; }
  .layer-option:active { background: #f5f5f0; }
  #layer-picker .layer-sep {
    padding: 9px 16px 4px; font-size: 11px; font-weight: 700; color: #999;
    text-transform: uppercase; letter-spacing: .04em; border-top: 1px solid #e6e6e0;
  }
  .ovl-option .ovl-check { float: right; opacity: 0; }
  .ovl-option.active .ovl-check { opacity: 1; }

  /* ── panels ── */
  .panel {
    position: fixed; left: 0; right: 0; bottom: var(--bar-h);
    background: var(--bg);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
    z-index: 800;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), visibility 0s 0.32s;
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* visibility:hidden dopiero PO transformie — bez tego panel-route (np. "Trasa aktywna")
     zostaje w pełni namalowany pod #route-ready-bar (z-index 998 > .panel 800) przez cały
     czas 320ms zjazdu, co przy szybkim przełączaniu trybów trasy dawało przebijający "duch" */
  .panel.open { transform: translateY(0); visibility: visible; transition-delay: 0s; }

  .panel-handle {
    width: 40px; height: 4px; border-radius: 2px; background: #ccc;
    position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  }
  /* większy obszar dotyku do zamykania panelu */
  .panel-header { padding: 10px 12px 8px; display: flex; align-items: center; position: relative; min-height: 40px; }

  /* ── przyciski zamykania okienek (pozycja konfigurowalna) ── */
  .winx {
    flex-shrink: 0; width: 32px; height: 32px; border: none; border-radius: 50%;
    background: #f0f0ec; color: #666; font-size: 15px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  .panel-header .winx { background: #eceae4; }
  .winx-left  { margin-right: auto; }
  .winx-right { margin-left: auto; }
  .winx-left { display: none; }                         /* domyślnie (praworęczny): zamykanie po prawej */
  body.hand-left .winx-right { display: none; }
  body.hand-left .winx-left  { display: flex; }
  body.hand-both .winx-left  { display: flex; }         /* oburęczny: zamykanie po obu stronach */

  .panel h2 {
    font-size: 17px; font-weight: 700; color: var(--text);
    padding: 8px 16px 12px;
  }

  /* ── trail list ── */
  .trail-section {
    padding: 14px 16px 6px; font-size: 13px; font-weight: 700;
    color: #888; text-transform: uppercase; letter-spacing: 0.4px;
  }
  .trail-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; background: var(--card);
    margin: 0 12px 8px; border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .trail-dot {
    width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  }
  .trail-info { flex: 1; min-width: 0; }
  .trail-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .trail-meta { font-size: 12px; color: #777; margin-top: 2px; }
  .trail-toggle {
    width: 42px; height: 24px; border-radius: 12px;
    background: #ddd; border: none; cursor: pointer;
    position: relative; transition: background 0.2s; flex-shrink: 0;
  }
  .trail-toggle::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; transition: transform 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  }
  .trail-toggle.on { background: var(--green); }
  .trail-toggle.on::after { transform: translateX(18px); }

  /* photo lightbox */
  #photo-lightbox {
    position: fixed; inset: 0; background: rgba(0,0,0,.88);
    z-index: 2000; display: none; align-items: center; justify-content: center;
    padding: 16px;
  }
  #photo-lightbox.open { display: flex; }
  #photo-lightbox img {
    max-width: 100%; max-height: 85vh; border-radius: 10px;
    box-shadow: 0 4px 32px rgba(0,0,0,.5);
  }
  #photo-lightbox-close {
    position: absolute; top: 16px; right: 16px;
    background: rgba(255,255,255,.2); border: none; color: #fff;
    width: 36px; height: 36px; border-radius: 50%; font-size: 18px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
  }

  /* ── route panel ── */
  #route-instructions { padding: 8px 16px 16px; }

  .route-summary {
    font-size: 18px; font-weight: 700; color: var(--green);
    padding: 4px 0 10px;
  }
  .route-summary-time {
    font-size: 13px; font-weight: 500; color: #666; margin-top: 3px;
  }
  .route-speed-pick {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 12px; color: #888; margin: 8px 0 12px;
  }
  .seg-sm { display: flex; gap: 4px; }
  .seg-sm button {
    width: 40px; height: 34px; border: 1.5px solid #e0e0e0; border-radius: 9px;
    background: var(--card); font-size: 16px; cursor: pointer; padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .seg-sm button.active { border-color: var(--green); background: #eef7f0; }

  .route-step {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px; background: var(--card);
    margin-bottom: 6px; border-radius: 10px;
    font-size: 13px; line-height: 1.4;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: opacity .2s, transform .2s;
  }
  .route-step.step-done {
    opacity: .4; text-decoration: line-through;
  }
  .route-step.step-active {
    border: 2px solid var(--green);
    background: #f0faf4;
  }
  .route-step.step-next {
    border-left: 3px solid #aaa;
  }
  .step-arrow {
    font-size: 22px; flex-shrink: 0; width: 28px; text-align: center;
  }
  .step-body { flex: 1; min-width: 0; }
  .step-dist { font-size: 11px; color: #999; margin-top: 2px; }
  .step-check {
    background: none; border: 2px solid #ddd; border-radius: 50%;
    width: 28px; height: 28px; flex-shrink: 0; cursor: pointer;
    font-size: 14px; display: flex; align-items: center; justify-content: center;
    color: #ccc; transition: all .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .step-check:active { background: var(--green); border-color: var(--green); color: #fff; }

  .route-more {
    text-align: center; padding: 8px; font-size: 13px;
    color: var(--green); cursor: pointer; font-weight: 600;
  }

  /* ── live navigation overlay ── */
  #live-nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1050; display: none; flex-direction: column;
    background: #1a3a28;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
  }
  #live-nav.show { display: flex; }
  /* stan pośredni „compact" — nagłówek + dystans + ETA/km do celu (bez selektora tempa i stopki z przyciskami) */
  #live-nav.compact #live-nav-speed,
  #live-nav.compact #live-nav-footer { display: none; }
  #live-nav.compact #live-nav-top { cursor: pointer; }
  #live-nav-compact-dest { display: none; }
  #live-nav.compact #live-nav-compact-dest {
    display: flex; gap: 8px; justify-content: center; align-items: baseline;
    padding: 0 16px 10px; font-size: 14px; color: #cfe9d8;
  }
  #live-nav-compact-dest strong { color: #fff; font-weight: 700; }
  #live-nav-min {
    position: absolute; top: 8px; left: 10px; z-index: 2;
    background: rgba(255,255,255,.15); border: none; color: #fff;
    width: 34px; height: 28px; border-radius: 14px; font-size: 18px; line-height: 1;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  /* ⚙️ obok ✕ po prawej */
  #live-nav-settings {
    position: absolute; top: 8px; right: 52px; z-index: 2;
    background: rgba(255,255,255,.15); border: none; color: #fff;
    width: 34px; height: 28px; border-radius: 14px; font-size: 14px; line-height: 1;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  /* ✕ po prawej — widoczne w full i compact */
  #live-nav-compact-stop {
    position: absolute; top: 8px; right: 10px; z-index: 2;
    background: rgba(255,255,255,.15); border: none; color: #fff;
    width: 34px; height: 28px; border-radius: 14px; font-size: 14px; line-height: 1;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }

  #live-nav-mini {
    position: fixed; top: 8px; left: 8px; right: 8px; z-index: 1050;
    background: #1a3a28; color: #fff; border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,.4);
    display: none; align-items: center; gap: 12px; padding: 8px 10px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  #live-nav-mini.show { display: flex; }
  #live-mini-arrow {
    width: 42px; height: 42px; flex-shrink: 0; background: #000; color: #fff; font-weight: 700;
    border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 26px;
  }
  #live-mini-info { flex: 1; min-width: 0; }
  #live-mini-dist { font-size: 13px; font-weight: 700; color: #8fe0ab; }
  #live-mini-text { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #live-mini-shrink, #live-mini-stop, #live-mini-settings {
    flex-shrink: 0; background: rgba(255,255,255,.15); border: none; color: #fff;
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #live-mini-shrink { font-size: 18px; }
  #live-mini-stop, #live-mini-settings { font-size: 14px; }

  #live-nav-top {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 16px 14px;
  }
  #live-nav-arrow {
    width: 62px; height: 62px; flex-shrink: 0;
    background: #000; color: #fff; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 38px; line-height: 1; font-weight: 700;
  }
  /* tryb nocny (filtr mapy „night") — odwróć: białe tło, czarna strzałka */
  body.map-night #live-nav-arrow,
  body.map-night #live-mini-arrow { background: #fff; color: #000; }
  #live-nav-instruction {
    flex: 1; min-width: 0;
  }
  #live-nav-text {
    font-size: 20px; font-weight: 700; color: #fff; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  #live-nav-road {
    font-size: 14px; color: rgba(255,255,255,.65); margin-top: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* dist-do-manewru + prędkościomierz w jednym rzędzie */
  #live-nav-metrics {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 0 16px 12px;
  }
  #live-nav-dist-next {
    font-size: 30px; font-weight: 800; color: #5efa8e;
    padding: 0; letter-spacing: -0.5px; flex-shrink: 0;
  }
  #live-speed-actual {
    display: flex; align-items: baseline; justify-content: flex-end; gap: 10px;
    padding: 0; color: #cfe9d8; font-size: 14px; min-height: 0;
  }
  #live-speed-actual .spd-now { font-size: 34px; font-weight: 800; color: #fff; line-height: 1; }
  #live-speed-actual .spd-avg { opacity: .75; }
  #live-nav.compact #live-speed-actual { padding-bottom: 6px; }
  #live-nav-speed {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 4px 16px 8px; color: #cfe9d8; font-size: 12px;
  }
  #live-nav-speed .seg-sm button {
    background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff;
  }
  #live-nav-speed .seg-sm button.active { background: var(--green-light); border-color: var(--green-light); }
  #elevation-live {
    display: none; height: 48px; margin: 0; position: relative;
    background: rgba(0,0,0,.2); overflow: hidden;
  }
  #elevation-live svg { width: 100%; height: 100%; display: block; }
  #elevation-cursor { position: absolute; top: 0; bottom: 0; width: 2px; background: #ff4444; pointer-events: none; transition: left .3s linear; }
  #live-nav.show #elevation-live { display: block; }
  #live-nav.compact #elevation-live { display: none; }
  #live-nav-footer {
    background: rgba(0,0,0,.25);
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px;
  }
  #live-nav-dest { flex: 1; font-size: 13px; color: rgba(255,255,255,.8); }
  #live-nav-dest strong { color: #fff; }
  .vtown { display: inline-block; white-space: nowrap; vertical-align: top; }   /* nazwa miejscowości nie pęka w pół */
  #live-nav-voice, #live-nav-pause {
    background: rgba(255,255,255,.15); border: none; color: #fff;
    padding: 7px 12px; border-radius: 20px; font-size: 15px; cursor: pointer;
    margin-right: 8px; opacity: .85; -webkit-tap-highlight-color: transparent;
  }
  #live-nav-voice { opacity: .5; }
  #live-nav-voice.on { opacity: 1; background: rgba(255,255,255,.3); }
  #live-nav-pause.paused { background: #ef6c00; opacity: 1; }
  body.live-nav-on #fab-record, body.live-nav-on #record-pill { display: none !important; }

  #live-nav-offroute {
    background: #c62828; color: #fff;
    padding: 10px 16px; font-size: 14px; font-weight: 600;
    display: none; align-items: center; gap: 8px;
  }
  #live-nav-offroute.show { display: flex; }

  /* shrink map when live nav active */
  body.live-nav-on #map { top: 0; }

  /* ── debug nawigacji (pole diagnostyczne na telefonie) ── */
  /* Debug nawigacji: rozwinięty = wyśrodkowany u góry (pod ikonami), NIE zasłania prawych przycisków akcji */
  #nav-debug {
    position: fixed; left: 50%; right: auto; transform: translateX(-50%); top: 60px; bottom: auto;
    width: min(92vw, 360px);
    z-index: 1400; display: none; flex-direction: column; gap: 4px;
    background: rgba(0,0,0,.82); color: #6f6; border: 1px solid #2a2;
    border-radius: 8px; padding: 7px 9px; max-height: 40vh; overflow: hidden;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; line-height: 1.45;
    transition: all .2s ease;
  }
  body.nav-debug-on #nav-debug { display: flex; }
  /* Mini = małe okrągłe w prawym górnym rogu (kciuk łatwo sięga, nie blokuje mapy ani prawych przycisków) */
  #nav-debug.dbg-mini {
    left: auto; right: 12px; transform: none; top: 60px; bottom: auto;
    width: 92px; height: 46px; border-radius: 23px;
    padding: 0 4px; max-height: 46px; align-items: center; justify-content: center;
    cursor: default; gap: 0; flex-direction: row;
  }
  #nav-debug.dbg-mini.dbg-mini-left { right: auto; left: 12px; }
  /* Debug NIE może zasłaniać otwartego panelu — gdy wyszukiwarka/panel otwarte, zejdź z drogi (iOS 16.4+ :has) */
  body:has(#search-overlay.open) #nav-debug:not(.dbg-mini),
  body:has(.panel.open) #nav-debug:not(.dbg-mini) {
    top: auto; bottom: 86px; max-height: 26vh;
  }
  /* mini pill zostaje w top-right niezależnie od stanu panelu — nie przestawiaj */
  body:has(#search-overlay.open) #nav-debug.dbg-mini { top: auto; bottom: 150px; }
  #nav-debug.dbg-mini #nav-debug-status,
  #nav-debug.dbg-mini #nav-debug-log,
  #nav-debug.dbg-mini #nav-debug-bar { display: none; }
  #dbg-mini-icon { display: none; align-items: center; gap: 4px; }
  #nav-debug.dbg-mini #dbg-mini-icon { display: flex; }
  #dbg-mini-icon span { font-size: 22px; line-height: 1; padding: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  #nav-debug-status { color: #9ef; white-space: pre-wrap; word-break: break-word; border-bottom: 1px solid #333; padding-bottom: 4px; }
  #nav-debug-log { overflow-y: auto; white-space: pre-wrap; word-break: break-word; flex: 1; }
  #nav-debug-log .dbg-voice { color: #fd6; }
  #nav-debug-log .dbg-instr { color: #8f8; }
  #nav-debug-log .dbg-warn  { color: #f88; }
  #nav-debug-bar { display: flex; flex-wrap: wrap; gap: 6px; }
  #nav-debug-bar button {
    flex: 1 1 44px; min-width: 0; background: #1a3a28; color: #cfe; border: 1px solid #2a2; border-radius: 6px;
    font-size: 16px; padding: 6px 2px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  #dbg-voice-btn.recording { background: #c62828; animation: recPulse 1.4s infinite; }

  #live-follow-btn {
    position: fixed; right: 12px; top: 50%; transform: translateY(-50%);
    background: var(--green); color: #fff; border: none;
    width: 52px; height: 52px; border-radius: 50%;
    font-size: 22px; line-height: 1;
    box-shadow: 0 4px 16px rgba(0,0,0,.35); z-index: 1600;
    cursor: pointer; display: none; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  #live-follow-btn.show { display: flex; animation: slideUp .25s ease; }
  body.hand-left #live-follow-btn { right: auto; left: 12px; }

  #live-overview-btn {
    position: fixed; bottom: 120px; right: 16px;
    background: #fff; color: var(--green); border: none;
    padding: 9px 14px; border-radius: 22px; font-size: 13px; font-weight: 700;
    box-shadow: 0 4px 14px rgba(0,0,0,.25); z-index: 1500;
    cursor: pointer; display: none;
    -webkit-tap-highlight-color: transparent;
  }
  #live-overview-btn.show { display: block; animation: slideUp .25s ease; }

  #live-heading-btn {
    position: fixed; bottom: 168px; right: 16px;
    background: #fff; color: var(--green); border: none;
    padding: 9px 14px; border-radius: 22px; font-size: 13px; font-weight: 700;
    box-shadow: 0 4px 14px rgba(0,0,0,.25); z-index: 1500;
    cursor: pointer; display: none;
    -webkit-tap-highlight-color: transparent;
  }
  #live-heading-btn.show { display: block; animation: slideUp .25s ease; }
  #live-heading-btn.heading-on { background: var(--green); color: #fff; }

  #map-reorient-btn {
    position: fixed; right: 12px; top: calc(50% + 64px); transform: translateY(-50%);
    background: #fff; color: var(--green); border: none;
    width: 44px; height: 44px; border-radius: 50%; font-size: 20px; line-height: 1;
    box-shadow: 0 3px 12px rgba(0,0,0,.28); z-index: 1600;
    cursor: pointer; display: none; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  #map-reorient-btn.show { display: flex; animation: slideUp .2s ease; }
  body.hand-left #map-reorient-btn { right: auto; left: 12px; }

  /* blokada ekranu — stały przycisk POWYŻEJ overlaya blokującego dotyk, żeby zawsze dało się go trafić */
  #live-nav-lock-fab {
    position: fixed; right: 12px; top: calc(50% + 120px);
    background: #fff; color: var(--green); border: none;
    width: 44px; height: 44px; border-radius: 50%; font-size: 19px; line-height: 1;
    box-shadow: 0 3px 12px rgba(0,0,0,.28); z-index: 3600;
    cursor: pointer; display: none; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  #live-nav-lock-fab.show { display: flex; animation: slideUp .2s ease; }
  #live-nav-lock-fab.locked { background: #c62828; color: #fff; }
  body.hand-left #live-nav-lock-fab { right: auto; left: 12px; }
  #nav-lock-hint {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,.55); color: #fff; font-size: 13px; font-weight: 600;
    padding: 4px 12px; border-radius: 20px; pointer-events: none; white-space: nowrap;
  }
  #unlock-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.52);
    z-index: 3700; display: none; align-items: center; justify-content: center; padding: 24px;
  }
  #unlock-modal.open { display: flex; }
  #unlock-card {
    background: var(--card); border-radius: 20px; box-shadow: 0 8px 48px rgba(0,0,0,.3);
    padding: 28px 24px 22px; max-width: 300px; width: 100%; text-align: center;
  }
  #unlock-card h2 { font-size: 20px; font-weight: 700; margin: 0 0 8px; color: var(--text); }
  #unlock-card p { font-size: 14px; color: #666; margin: 0 0 16px; line-height: 1.5; }
  #unlock-cd-bar { height: 4px; background: #e8e8e4; border-radius: 2px; margin-bottom: 8px; overflow: hidden; }
  #unlock-cd-fill { height: 100%; width: 100%; background: #1565c0; border-radius: 2px; }
  #unlock-cd-text { font-size: 13px; color: #aaa; margin-bottom: 22px; }

  /* ── loading / toast ── */
  #toast {
    position: fixed; top: max(16px, env(safe-area-inset-top, 16px)); left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.82); color: #fff; padding: 10px 20px;
    border-radius: 24px; font-size: 13px; z-index: 9999;
    opacity: 0; transition: opacity 0.3s; pointer-events: none;
    white-space: nowrap;
  }
  #toast.show { opacity: 1; }

  /* Odliczanie przed przeliczeniem trasy od GPS. Osobny element od #toast, bo zawiera
     przycisk: #toast ma pointer-events:none (przepuszcza dotyk na mape), a tu dotyk MUSI
     dochodzic. Nizej o wysokosc toasta, zeby oba mogly byc widoczne naraz. */
  #gps-countdown {
    position: fixed; top: calc(max(16px, env(safe-area-inset-top, 16px)) + 52px);
    left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.9); color: #fff; padding: 10px 16px;
    border-radius: 24px; font-size: 14px; z-index: 10000;
    opacity: 0; transition: opacity 0.3s; pointer-events: none;
    max-width: calc(100vw - 24px);
  }
  #gps-countdown.show { opacity: 1; pointer-events: auto; }

  /* ── route mode banner ── */
  #route-banner {
    position: fixed; top: 0; left: 0; right: 0;
    background: var(--green); color: #fff;
    padding: 10px 12px; font-size: 14px; font-weight: 600;
    z-index: 900; display: none;
  }
  #route-banner.show { display: block; }
  #route-banner-top {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  }
  #route-banner-text { flex: 1; font-size: 13px; font-weight: 600; }
  #route-banner button.cancel-btn {
    background: rgba(255,255,255,0.25); border: none; color: #fff;
    padding: 5px 12px; border-radius: 12px;
    font-size: 13px; cursor: pointer; white-space: nowrap;
  }
  #route-dest-search {
    display: none; position: relative;
  }
  #route-dest-search.show { display: block; }
  #route-dest-input {
    width: 100%; box-sizing: border-box;
    padding: 9px 36px 9px 12px; border: none; border-radius: 10px;
    font-size: 15px; background: rgba(255,255,255,.95); color: #222;
    outline: none;
  }
  #route-dest-input::placeholder { color: #aaa; }
  #route-dest-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; font-size: 18px; color: #aaa;
    cursor: pointer; padding: 0; display: none;
  }
  #route-dest-results {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.2);
    max-height: 260px; overflow-y: auto; z-index: 1000; display: none;
  }
  #route-dest-results.show { display: block; }
  .rdest-item {
    padding: 11px 14px; border-bottom: 1px solid #f0f0f0;
    cursor: pointer; display: flex; align-items: center; gap: 10px;
    font-size: 14px; color: #222;
  }
  .rdest-item:last-child { border-bottom: none; }
  .rdest-item:active { background: #f5f5f0; }
  .rdest-icon { font-size: 16px; flex-shrink: 0; }
  .rdest-name { font-weight: 600; line-height: 1.2; }
  .rdest-sub { font-size: 12px; color: #888; margin-top: 1px; }
  .geo-addr { font-size: 11px; color: var(--text-muted, #9a9a9a); line-height: 1.15; }
  .rdest-section-head { padding: 8px 14px 4px; font-size: 11px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: .04em; }
  .rdest-item-del { margin-left: auto; background: none; border: none; color: #bbb; font-size: 15px; padding: 4px 6px; cursor: pointer; flex-shrink: 0; }
  .rdest-item-del:active { color: #e53935; }

  @keyframes slideUp { from { transform: translateY(20px); opacity:0; } to { transform: translateY(0); opacity:1; } }
  @keyframes poiSpin { to { transform: rotate(360deg); } }
  @keyframes poiBar  { from { width:0 } to { width:90% } }
  #poi-progress { display:none; height:4px; background:#e0ede3; border-radius:2px; margin-top:6px; overflow:hidden; }
  #poi-progress.active { display:block; }
  #poi-progress-fill { height:100%; background:var(--green); border-radius:2px; width:0; animation:poiBar 28s cubic-bezier(.1,.5,.3,1) forwards; }
  .poi-spin { display:inline-block; animation:poiSpin .9s linear infinite; }

  /* ── welcome screen ── */
  #welcome-screen {
    position: fixed; inset: 0; z-index: 2000;
    background: linear-gradient(160deg, #004d40 0%, #002d28 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 32px 24px; text-align: center;
    overflow-y: auto; height: 100dvh;  /* iOS: scrolluj gdy klawiatura zasłania przycisk */
  }
  #welcome-screen.hidden { display: none; }
  #welcome-screen img { width: 96px; height: 96px; border-radius: 24px; margin-bottom: 20px; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
  #welcome-screen h1 { color: #fff; font-size: 26px; margin-bottom: 8px; }
  #welcome-screen p { color: rgba(255,255,255,.85); font-size: 15px; margin-bottom: 36px; max-width: 300px; line-height: 1.45; }
  .welcome-btn {
    width: 100%; max-width: 320px; padding: 15px; border: none; border-radius: 14px;
    font-size: 16px; font-weight: 700; cursor: pointer; margin-bottom: 12px;
    -webkit-tap-highlight-color: transparent;
  }
  .welcome-btn-primary { background: #ffc107; color: #002d28; }
  #welcome-login-form { width: 100%; max-width: 320px; }
  #welcome-login-form input {
    width: 100%; padding: 14px; margin-bottom: 10px; border: none; border-radius: 12px;
    font-size: 16px; background: rgba(255,255,255,.95); outline: none;
  }

  /* ── baner nowej wersji SW ── */
  #sw-update-bar {
    display: none; position: fixed; bottom: var(--bar-h); left: 0; right: 0;
    background: #004d40; color: #fff; padding: 8px 12px; z-index: 1500;
    flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  }
  #sw-update-bar.show { display: flex; }
  #sw-update-bar #sw-update-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #sw-update-bar button {
    padding: 6px 14px; background: #ffc107; color: #002d28;
    border: none; border-radius: 20px; font-size: 12px; font-weight: 700; cursor: pointer;
    white-space: nowrap; flex-shrink: 0;
  }
  #sw-update-bar #sw-update-later { background: rgba(255,255,255,.2); color: #fff; }
  /* podczas nawigacji baner u GÓRY (tam patrzysz), nad paskiem prowadzenia */
  body.live-nav-on #sw-update-bar.show { top: 0; bottom: auto; z-index: 1600; }
  #resume-unlock-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1700;
    background: #e65100; color: #fff; padding: 14px 20px;
    font-size: 16px; font-weight: 700; text-align: center; cursor: pointer;
    letter-spacing: .3px;
  }
  /* ── route ready bar ── */
  #route-ready-bar {
    position: fixed; bottom: calc(var(--bar-h) + 12px); left: 12px; right: 12px;
    background: var(--card); border-radius: var(--radius);
    box-shadow: 0 -2px 20px rgba(0,0,0,0.18);
    padding: 14px 16px; z-index: 998;
    display: none; animation: slideUp 0.3s ease;
  }
  #route-ready-bar.show { display: block; }
  /* Zwiniety panel: zostaje tylko to, co potrzebne do decyzji "jade / nie jade" — naglowek,
     chipy wariantow z paskiem nawierzchni i Prowadz. Powod jest zmierzony, nie estetyczny:
     rozwiniety panel mial 391 px na 698 px mapy (56%), przez co kadrowanie trasy schodzilo
     do zoom 9.25. (zgloszenie glosowe 2026-07-29) */
  #route-ready-bar.mini > *:not(.rrb-keep) { display: none !important; }
  #route-ready-bar.mini { padding: 10px 14px; }
  #rrb-toggle { transition: transform .2s; }
  #route-ready-bar.mini #rrb-toggle { transform: rotate(180deg); }
  #route-ready-info { font-size: 15px; font-weight: 600; color: var(--text); }
  #route-ready-info span { display: block; color: #666; font-weight: 400; font-size: 13px; margin-top: 2px; }
  #route-save-form { display:none; margin-top:8px; gap:6px; align-items:center; }
  #route-save-form.show { display:flex; }
  #route-save-name-inp { flex:1; padding:9px 12px; border:1.5px solid var(--border); border-radius:10px; font-size:14px; background:var(--card); color:var(--text); }
  #saved-routes-section { margin-top:12px; display:none; }
  #saved-routes-toggle { width:100%; background:none; border:1px solid var(--border); border-radius:10px; padding:9px 12px; font-size:14px; color:var(--green); font-weight:600; cursor:pointer; text-align:left; display:flex; justify-content:space-between; align-items:center; }
  .saved-route-item { display:flex; align-items:center; gap:6px; padding:8px 2px; border-bottom:1px solid var(--border); position:relative; background:var(--card); }
  .saved-route-item:not(.dragging) { transition: transform .15s ease; }
  .saved-route-item.dragging { z-index:10; box-shadow:0 4px 16px rgba(0,0,0,.18); border-radius:8px; }
  .saved-route-item:last-child { border-bottom:none; }
  .saved-route-drag { flex-shrink:0; padding:4px 6px; font-size:18px; color:#bbb; cursor:grab; touch-action:none; -webkit-tap-highlight-color:transparent; user-select:none; }
  .saved-route-item.dragging .saved-route-drag { cursor:grabbing; color:var(--green); }
  .saved-route-name { flex:1; font-size:14px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .saved-route-date { font-size:11px; color:#aaa; white-space:nowrap; }
  .saved-route-load { padding:6px 10px; background:var(--green); color:#fff; border:none; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; }
  .saved-route-del { padding:6px 8px; background:#fdecea; color:#c62828; border:none; border-radius:8px; font-size:13px; cursor:pointer; }
  /* poziomy wyglądu nawigacji (prosty/średni/zaawansowany) */
  body.nav-simple [data-lvl="med"], body.nav-simple [data-lvl="adv"],
  body.nav-medium [data-lvl="adv"] { display: none !important; }
  /* poziom widoku ustawień (4 poziomy) — toggle klasy, nie clobberuje inline display */
  .setlvl-hidden { display: none !important; }

  .route-action-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .route-action-row button {
    flex: 1 1 calc(25% - 6px); display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 2px; background: #f5f7f5; border: none; border-radius: 10px;
    font-size: 17px; color: var(--green); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .route-action-row button span { font-size: 9.5px; font-weight: 600; color: #777; }
  .route-action-row button:active { background: #e8f3ea; }

  /* ── trail card (profil wysokości) ── */
  #trail-card {
    position: fixed; left: 0; right: 0; bottom: var(--bar-h);
    background: var(--card); border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,.2); z-index: 850;
    padding: 12px 16px 14px; display: none;
  }
  #trail-card.show { display: block; animation: slideUp .3s ease; }
  #trail-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
  #trail-card-title { flex: 1; font-size: 16px; font-weight: 700; color: var(--text); }
  #trail-card-title small { display: block; font-weight: 400; font-size: 12.5px; color: #777; margin-top: 2px; }
  #trail-card-close {
    background: #f0f0ec; border: none; border-radius: 50%; width: 32px; height: 32px;
    font-size: 15px; color: #666; cursor: pointer; flex-shrink: 0;
  }
  #trail-card-handle {
    width: 40px; height: 4px; background: #ddd; border-radius: 2px;
    margin: -4px auto 8px; cursor: grab;
  }
  #trail-card-profile { position: relative; margin-top: 6px; touch-action: none; }
  #trail-card-profile svg { width: 100%; height: 220px; display: block; }
  #trail-card-readout {
    font-size: 13px; font-weight: 600; color: var(--green);
    min-height: 18px; margin-top: 4px; text-align: center;
  }
  .profile-label {
    position: absolute; left: 8px;
    font-size: 11.5px; font-weight: 600; color: #888;
    background: rgba(255,255,255,.75); padding: 1px 6px; border-radius: 8px;
    pointer-events: none;
  }

  /* ── panele POI / pogoda ── */
  #poi-panel, #weather-panel {
    position: fixed; left: 0; right: 0; bottom: var(--bar-h);
    background: var(--card); border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,.2); z-index: 851;
    padding: 14px 16px 16px; display: none; max-height: 70vh; overflow-y: auto;
  }
  #poi-panel.show, #weather-panel.show { display: block; animation: slideUp .3s ease; }
  #variants-panel {
    position: fixed; left: 0; right: 0; bottom: var(--bar-h);
    background: var(--card); border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,.2); z-index: 851;
    padding: 14px 16px 16px; display: none; max-height: 48vh; overflow-y: auto;
  }
  #variants-panel.show { display: block; animation: slideUp .3s ease; }
  #variants-panel::before {
    content: ''; display: block; width: 36px; height: 4px; border-radius: 2px;
    background: #d5d5d0; margin: 0 auto 10px;
  }
  #variants-panel.show::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
    background: linear-gradient(to bottom, transparent, var(--card) 85%);
    pointer-events: none; border-radius: 0 0 var(--radius) var(--radius);
  }
  .variant-card {
    border: 2px solid #e6e6e0; border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .variant-card.sel { border-color: var(--green); background: #f1f9f3; }
  .variant-head { display: flex; align-items: center; gap: 8px; }
  .variant-title { flex: 1; font-size: 15px; font-weight: 700; color: var(--text); }
  .variant-stats { font-size: 13px; color: #555; margin-top: 3px; }
  .variant-extra { font-size: 12.5px; color: #888; margin-top: 4px; line-height: 1.4; }
  .variant-pick {
    display: none; width: 100%; margin-top: 10px; padding: 11px;
    background: var(--green); color: #fff; border: none; border-radius: 10px;
    font-size: 14px; font-weight: 700; cursor: pointer;
  }
  .variant-card.sel .variant-pick { display: block; }
  .lodging-intervals { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: 6px 0 12px; }
  .lodging-interval-btn {
    padding: 8px 6px; border: 2px solid #e0e0e0; border-radius: 18px;
    background: #fff; font-size: 12px; font-weight: 600; color: #888; cursor: pointer;
  }
  .lodging-interval-btn.active { border-color: var(--green); color: var(--green); background: #e8f5e9; }
  .poi-categories { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .poi-cat {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 6px;
    border: 2px solid #e0e0e0; border-radius: 10px; cursor: pointer;
    font-size: 12px; font-weight: 600; color: #666; -webkit-tap-highlight-color: transparent;
  }
  .poi-cat .ico { font-size: 18px; }
  .poi-cat.active { border-color: var(--green); color: var(--green); background: #eef7f0; }

  /* ── no-gps fallback bar ── */
  #track-draft-bar {
    position: fixed; bottom: calc(var(--bar-h) + 12px); left: 12px; right: 12px;
    background: var(--card); border-radius: var(--radius);
    box-shadow: var(--shadow); z-index: 998;
    padding: 14px 16px; display: none;
    flex-direction: column; gap: 10px;
  }
  #track-draft-bar.show { display: flex; }
  #track-draft-bar p { font-size: 14px; color: var(--text); font-weight: 500; margin: 0; }
  #track-draft-bar .bar-btns { display: flex; gap: 8px; }

  #no-gps-bar {
    position: fixed; bottom: calc(var(--bar-h) + 12px); left: 12px; right: 12px;
    background: var(--card); border-radius: var(--radius);
    box-shadow: var(--shadow); z-index: 998;
    padding: 14px 16px; display: none;
    flex-direction: column; gap: 10px;
  }
  #no-gps-bar.show { display: flex; }
  #no-gps-bar p {
    font-size: 14px; color: var(--text); font-weight: 500; margin: 0;
  }
  #no-gps-bar .bar-btns {
    display: flex; gap: 8px;
  }
  #no-gps-bar .bar-btn {
    flex: 1; padding: 10px 8px; border-radius: 10px; border: none;
    font-size: 14px; font-weight: 600; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .bar-btn-primary { background: var(--green); color: #fff; }
  .bar-btn-secondary { background: #f0f0eb; color: var(--text); }

  #hazard-confirm-bar {
    position: fixed; bottom: calc(var(--bar-h) + 12px); left: 12px; right: 12px;
    background: var(--card); border-radius: var(--radius); border-left: 5px solid #e65100;
    box-shadow: var(--shadow); z-index: 998;
    padding: 14px 16px; display: none;
    flex-direction: column; gap: 10px;
  }
  #hazard-confirm-bar.show { display: flex; }
  #hazard-confirm-bar p { font-size: 14px; color: var(--text); font-weight: 500; margin: 0; }
  #hazard-confirm-bar .bar-btns { display: flex; gap: 8px; }
  #hazard-confirm-bar .bar-btn { flex: 1; padding: 10px 8px; border-radius: 10px; border: none; font-size: 14px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .bar-btn-confirm { background: #e65100; color: #fff; }
  .bar-btn-gone { background: #f0f0eb; color: var(--text); }

  /* ── pick-location crosshair ── */
  #pick-crosshair {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; z-index: 700; display: none;
  }
  #pick-crosshair.show { display: block; }
  #pick-crosshair svg { width: 48px; height: 48px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }

  /* leaflet popup tweaks */
  .leaflet-popup-content { font-size: 14px; }
  .leaflet-popup-content b { color: var(--green); }
  .popup-btn {
    display: block; margin-top: 8px; padding: 6px 12px;
    background: var(--green); color: #fff; border-radius: 8px;
    text-align: center; cursor: pointer; font-size: 13px; border: none;
    width: 100%;
  }

  /* bottom sheet drag area */
  .panel-header { cursor: grab; padding-bottom: 2px; }

  /* ── location search ── */
  #search-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    z-index: 1100; display: none; align-items: flex-start; justify-content: center;
    padding-top: 60px;
  }
  #search-overlay.open { display: flex; }
  #search-box {
    background: var(--card); border-radius: var(--radius);
    box-shadow: var(--shadow); width: calc(100% - 32px); max-width: 480px;
    overflow: hidden;
  }
  #search-input-wrap {
    display: flex; align-items: center; gap: 8px; padding: 12px 14px;
    border-bottom: 1px solid #eee;
  }
  #search-input {
    flex: 1; border: none; outline: none; font-size: 16px;
    background: transparent; color: var(--text);
  }
  #search-clear {
    background: none; border: none; font-size: 18px; color: #aaa;
    cursor: pointer; padding: 0 4px;
  }
  #search-results { max-height: 260px; overflow-y: auto; }
  .search-result {
    padding: 13px 16px; border-bottom: 1px solid #f0f0f0;
    cursor: pointer; font-size: 14px; line-height: 1.3;
  }
  .search-result:last-child { border-bottom: none; }
  .search-result:active { background: #f5f5f0; }
  .search-result strong { color: var(--green); }
  .search-result small { color: #888; display: block; margin-top: 2px; }
  #search-hint { padding: 14px 16px; font-size: 13px; color: #aaa; text-align: center; }
  .search-section { padding: 10px 16px 6px; font-size: 12px; font-weight: 700; color: #888; background: #fafafa; text-transform: uppercase; letter-spacing: .03em; }

  /* ── Desktop layout (≥ 768px, mysz) ── */
  @media (min-width: 768px) and (pointer: fine) {
    /* Panele zakładek jako prawy sidebar */
    .panel {
      left: auto; right: 0;
      max-width: 420px;
      max-height: calc(100vh - var(--bar-h));
      border-radius: var(--radius) 0 0 0;
    }
    /* Panele POI / pogoda / warianty */
    #poi-panel, #weather-panel, #variants-panel {
      left: auto; right: 0;
      max-width: 420px;
      max-height: calc(100vh - var(--bar-h));
      border-radius: var(--radius) 0 0 0;
    }
    /* Karta szlaku */
    #trail-card {
      left: auto; right: 0;
      max-width: 420px;
      border-radius: var(--radius) 0 0 0;
    }
    /* Baner trasy aktywnej */
    #route-ready-bar {
      left: auto; right: 12px;
      max-width: 420px;
    }
    /* SW update bar — pełna szerokość OK */
    /* Live nav — pełna szerokość OK (banner nawigacji) */
    /* Sheets ulubionych/zaplanowanych — już mają max-width 82vh + backdrop */
    /* Hover dla wyników wyszukiwania na desktopie */
    .search-result:hover { background: #f5f5f0; }
    .fav-item:hover, .rdest-item:hover { background: #f5f5f0; }
    /* Kursor pointer na klikalnych elementach */
    .nav-btn, .layer-option, .seg button, .fav-item,
    .rdest-item, .poi-btn, .variant-card { cursor: pointer; }
  }
  /* 📊 Statystyki — drawer wysuwany z prawej + KPI w stylu Power BI */
  .stats-drawer { position:fixed; inset:0; z-index:1600; background:rgba(0,0,0,.45); display:flex; justify-content:flex-end; opacity:0; transition:opacity .25s ease; }
  .stats-drawer.open { opacity:1; }
  .stats-drawer-card { background:var(--card); width:92%; max-width:440px; height:100%; overflow-y:auto; padding:16px; box-shadow:-14px 0 44px rgba(0,0,0,.32); transform:translateX(100%); transition:transform .3s cubic-bezier(.22,.61,.36,1); -webkit-overflow-scrolling:touch; }
  .stats-drawer.open .stats-drawer-card { transform:translateX(0); }
  .stats-drawer-head { display:flex; align-items:center; gap:8px; }
  .stats-drawer-title { flex:1; font-size:19px; font-weight:800; color:var(--text); }
  .stats-icon-btn { border:none; background:#eef4f0; color:var(--text); height:36px; min-width:36px; padding:0 10px; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; }
  .stats-icon-btn:active { opacity:.7; }
  .stats-kpi-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .stats-kpi { position:relative; border-radius:14px; padding:12px 14px; color:#fff; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.14); }
  .stats-kpi .kpi-ic { font-size:18px; opacity:.92; }
  .stats-kpi .kpi-val { font-size:23px; font-weight:800; line-height:1.1; margin-top:3px; }
  .stats-kpi .kpi-lbl { font-size:10px; opacity:.85; margin-top:2px; text-transform:uppercase; letter-spacing:.5px; }
  #seg-stats-range button { width:auto; flex:none; padding:0 9px; font-size:13px; }

  .ui-icon { width:1.15em; height:1.15em; vertical-align:-0.2em; object-fit:contain; }