/* Ajda — izgled. Raspored kao u Google mapama (mapa preko celog ekrana, traka pretrage gore, donji list),
   boje i fontovi brenda (src/brand/README.md): Ink — tekst i logo, Coral — glavna dugmad i oznaka odredišta,
   Dunav — sve što je prevoz (izbor, linkovi, stanice). Na širokom ekranu (≥ 900 px) donji list postaje leva tabla. */
@font-face { font-family:Manrope; font-weight:400; font-display:swap; src:url(fonts/manrope-latin-400-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2190-21FF,U+2212; }
@font-face { font-family:Manrope; font-weight:400; font-display:swap; src:url(fonts/manrope-latin-ext-400-normal.woff2) format("woff2"); unicode-range:U+0100-024F,U+1E00-1EFF; }
@font-face { font-family:Manrope; font-weight:400; font-display:swap; src:url(fonts/manrope-cyrillic-400-normal.woff2) format("woff2"); unicode-range:U+0400-04FF; }
@font-face { font-family:Manrope; font-weight:500; font-display:swap; src:url(fonts/manrope-latin-500-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2190-21FF,U+2212; }
@font-face { font-family:Manrope; font-weight:500; font-display:swap; src:url(fonts/manrope-latin-ext-500-normal.woff2) format("woff2"); unicode-range:U+0100-024F,U+1E00-1EFF; }
@font-face { font-family:Manrope; font-weight:500; font-display:swap; src:url(fonts/manrope-cyrillic-500-normal.woff2) format("woff2"); unicode-range:U+0400-04FF; }
@font-face { font-family:Manrope; font-weight:600; font-display:swap; src:url(fonts/manrope-latin-600-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2190-21FF,U+2212; }
@font-face { font-family:Manrope; font-weight:600; font-display:swap; src:url(fonts/manrope-latin-ext-600-normal.woff2) format("woff2"); unicode-range:U+0100-024F,U+1E00-1EFF; }
@font-face { font-family:Manrope; font-weight:600; font-display:swap; src:url(fonts/manrope-cyrillic-600-normal.woff2) format("woff2"); unicode-range:U+0400-04FF; }
@font-face { font-family:Manrope; font-weight:700; font-display:swap; src:url(fonts/manrope-latin-700-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2190-21FF,U+2212; }
@font-face { font-family:Manrope; font-weight:700; font-display:swap; src:url(fonts/manrope-latin-ext-700-normal.woff2) format("woff2"); unicode-range:U+0100-024F,U+1E00-1EFF; }
@font-face { font-family:Manrope; font-weight:700; font-display:swap; src:url(fonts/manrope-cyrillic-700-normal.woff2) format("woff2"); unicode-range:U+0400-04FF; }
@font-face { font-family:Unbounded; font-weight:600; font-display:swap; src:url(fonts/unbounded-latin-600-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2190-21FF,U+2212; }
@font-face { font-family:Unbounded; font-weight:600; font-display:swap; src:url(fonts/unbounded-latin-ext-600-normal.woff2) format("woff2"); unicode-range:U+0100-024F,U+1E00-1EFF; }
@font-face { font-family:Unbounded; font-weight:600; font-display:swap; src:url(fonts/unbounded-cyrillic-600-normal.woff2) format("woff2"); unicode-range:U+0400-04FF; }
@font-face { font-family:Unbounded; font-weight:700; font-display:swap; src:url(fonts/unbounded-latin-700-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2190-21FF,U+2212; }
@font-face { font-family:Unbounded; font-weight:700; font-display:swap; src:url(fonts/unbounded-latin-ext-700-normal.woff2) format("woff2"); unicode-range:U+0100-024F,U+1E00-1EFF; }
@font-face { font-family:Unbounded; font-weight:700; font-display:swap; src:url(fonts/unbounded-cyrillic-700-normal.woff2) format("woff2"); unicode-range:U+0400-04FF; }

:root {
  --ink:#14213D; --coral:#E94A22; --dunav:#0E9F8E; --mist:#EEF1F4;
  --accent:#E94A22; --on-accent:#fff;                 /* glavna dugmad: Ruta, Kreni, smer */
  --pri:#0B7D70; --pri-strong:#075C52; --pri-soft:#D8F0EC; --pri-softer:#EEF8F6; --on-pri:#fff;   /* Dunav, tamniji za tekst */
  --bg:#fff; --fg:#14213D; --muted:#5B6475; --line:#E3E7EC; --outline:#D5DAE1; --surf:#EEF1F4; --hover:rgba(20,33,61,.05);
  --shadow:0 1px 3px rgba(20,33,61,.18), 0 2px 8px rgba(20,33,61,.10);
  --you:#2F6BFF; --warn:#B3261E; --ban:#14213D; --ban2:#0C1530; --dest:#E94A22;
  --font:Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; --font-head:Unbounded, Manrope, system-ui, sans-serif;
  --tabs-h:72px; --panel-w:408px; --safe-b:env(safe-area-inset-bottom, 0px); --safe-t:env(safe-area-inset-top, 0px);
}
@media (prefers-color-scheme: dark) {
  :root { --accent:#FF6A45; --on-accent:#14213D; --pri:#3CC9B5; --pri-strong:#7EE0D2; --pri-soft:#123B3A; --pri-softer:#0F2A2D; --on-pri:#062420;
          --bg:#101828; --fg:#E8ECF2; --muted:#A3ADBD; --line:#26324A; --outline:#3A4763; --surf:#1A2438; --hover:rgba(255,255,255,.06);
          --shadow:0 1px 3px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35); --you:#7FA6FF; --warn:#F2B8B5; --ban:#1C2B4D; --ban2:#14203B; }
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
html, body { margin:0; height:100%; overflow:hidden; }
body { font:14px/1.4 var(--font); color:var(--fg); background:var(--bg); }
button { font:inherit; color:inherit; cursor:pointer; }
a { color:var(--pri); }
.ic { display:block; flex:none; }
#map { position:fixed; inset:0; }
.maplibregl-map { font:inherit; }
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { bottom:var(--map-b, 0px); transition:bottom .2s; }
.maplibregl-ctrl-attrib { font-size:10px; }
.maplibregl-ctrl-bottom-left .maplibregl-ctrl { margin:0 0 8px 8px; }
.maplibregl-ctrl-attrib.maplibregl-compact { background:var(--bg); color:var(--muted); }

/* ---------- vidljivost delova po ekranu (body[data-screen]) ---------- */
.topbar, .fabs, .dircard, .navban, .tabs, .sheet, .searchscreen { display:none; }
body[data-top="search"] .topbar, body[data-fabs="1"] .fabs, body[data-top="dir"] .dircard, body[data-top="nav"] .navban,
body[data-tabs="1"] .tabs, body[data-sheet]:not([data-sheet="none"]) .sheet, body[data-screen="search"] .searchscreen { display:block; }
body[data-screen="search"] .topbar, body[data-screen="search"] .sheet { display:none; }
.pane { display:none; }
.pane.on { display:block; }

/* ---------- traka pretrage ---------- */
.topbar { position:fixed; left:12px; right:12px; top:calc(10px + var(--safe-t)); z-index:20; pointer-events:none; }
.topbar > * { pointer-events:auto; }
.searchbar { height:48px; border-radius:24px; background:var(--bg); box-shadow:var(--shadow); display:flex; align-items:center; padding:0 4px; }
.sb-ic { width:40px; height:40px; border:0; background:none; border-radius:20px; display:grid; place-items:center; color:var(--muted); flex:none; }
.sb-ic:hover { background:var(--hover); }
.sb-ic.brand { color:var(--fg); }
.sb-ic.brand svg { border-radius:7px; }
.sb-text { flex:1; min-width:0; height:44px; border:0; background:none; text-align:left; font-size:16px; color:var(--muted); padding:0 4px;
           white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-text.val { color:var(--fg); }
.sb-me { width:34px; height:34px; border-radius:17px; border:0; background:var(--ink); color:#fff; font-weight:500; font-size:13px;
         display:grid; place-items:center; margin:0 3px 0 2px; flex:none; }
@media (prefers-color-scheme: dark) { .sb-me { background:var(--surf); color:var(--fg); } }
.brandbox { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:8px 16px 4px; }
.brandbox svg { height:56px; width:auto; color:var(--fg); }
.brandbox .slogan { font-family:var(--font-head); font-weight:600; font-size:15px; }
.brandbox .slogan b { color:var(--accent); font-weight:600; }
.chips { display:flex; gap:8px; margin:10px -12px 0; padding:0 12px 6px; overflow-x:auto; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chip { flex:none; height:34px; padding:0 14px 0 10px; border-radius:17px; background:var(--bg); box-shadow:var(--shadow); border:0;
        display:flex; align-items:center; gap:6px; font-weight:500; white-space:nowrap; }
.chip .ic { color:var(--pri); }
.chip.on { background:var(--pri-soft); color:var(--pri-strong); }
.chip.flat { box-shadow:none; border:1px solid var(--outline); }

/* ---------- dugmad na mapi ---------- */
.fabs { position:fixed; right:16px; z-index:15; bottom:calc(var(--sheet-h, 0px) + var(--tabs-on, 0px) + 16px); transition:bottom .2s;
        display:none; flex-direction:column; align-items:flex-end; gap:12px; }
body[data-fabs="1"] .fabs { display:flex; }
.fab { border:0; background:var(--bg); box-shadow:var(--shadow); display:grid; place-items:center; color:var(--muted); }
.fab.sm { width:40px; height:40px; border-radius:20px; }
.fab.loc { width:56px; height:56px; border-radius:16px; color:var(--muted); }
.fab.loc.on { color:var(--you); }
.fab.dir { width:56px; height:56px; border-radius:16px; background:var(--accent); color:var(--on-accent); }
#fab-compass { position:fixed; right:16px; top:calc(112px + var(--safe-t)); }
#fab-compass .needle { transition:transform .15s linear; }
#fab-compass.on { background:var(--pri-soft); }
body[data-top="nav"] #fab-compass { top:auto; bottom:calc(var(--navbot-h, 96px) + 16px); }
body[data-top="dir"] #fab-compass { top:auto; position:static; }
body[data-top="nav"] #fab-loc, body[data-top="nav"] #fab-dir, body:not([data-screen="home"]) #fab-dir { display:none; }
body:not([data-screen="home"]) .chips { display:none; }
.zoom { display:none; flex-direction:column; background:var(--bg); border-radius:8px; box-shadow:var(--shadow); overflow:hidden; }
.zoom button { width:40px; height:40px; border:0; background:none; color:var(--muted); display:grid; place-items:center; }
.zoom button + button { border-top:1px solid var(--line); }

/* ---------- donji list ---------- */
.sheet { position:fixed; left:0; right:0; z-index:18; background:var(--bg); border-radius:16px 16px 0 0;
         bottom:var(--tabs-on, 0px); height:var(--sheet-h, 0px); box-shadow:0 -2px 10px rgba(0,0,0,.14);
         display:flex; flex-direction:column; transition:height .22s cubic-bezier(.2,.8,.2,1); }
.sheet.drag { transition:none; }
.grab { flex:none; height:22px; display:grid; place-items:center; touch-action:none; cursor:grab; }
.grab span { width:32px; height:4px; border-radius:2px; background:var(--outline); }
.sheet-body { flex:1; overflow-y:auto; overscroll-behavior:contain; padding-bottom:calc(12px + var(--safe-b)); }
.sheet.peek .sheet-body { overflow:hidden; }
.sh-pad { padding:0 16px 12px; }
h2.title { font-family:var(--font-head); font-size:20px; font-weight:600; letter-spacing:-.2px; margin:0 0 4px; line-height:1.25; }
h3 { font-size:16px; font-weight:500; margin:0; }
.sub { color:var(--muted); font-size:14px; }
.sub.sm { font-size:13px; }
.sect { display:flex; justify-content:space-between; align-items:center; font-size:15px; font-weight:500; margin:14px 0 6px; }
.link, .sect .link { border:0; background:none; color:var(--pri); font-weight:500; padding:4px 0; }
.divider { height:1px; background:var(--line); margin:10px -16px; }
.acts { display:flex; gap:8px; margin:12px -16px 4px; padding:0 16px 2px; overflow-x:auto; scrollbar-width:none; }
.act { flex:none; height:36px; padding:0 16px 0 12px; border-radius:18px; border:1px solid var(--outline); background:var(--bg);
       display:flex; align-items:center; gap:6px; font-weight:500; color:var(--pri-strong); }
.act.pri { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.act.on { background:var(--pri-soft); border-color:var(--pri-soft); }
.btn { height:40px; padding:0 20px 0 16px; border-radius:20px; border:0; background:var(--accent); color:var(--on-accent); font-weight:700;
       display:inline-flex; align-items:center; gap:6px; flex:none; }
.btn.sm { height:34px; padding:0 14px; }
.btn.ghost { background:none; color:var(--pri); border:1px solid var(--outline); font-weight:600; }
.btn.wide { width:100%; justify-content:center; }
.msg { color:var(--muted); padding:16px; }
.msg.err { color:var(--warn); }
.badge { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:24px; padding:0 6px; border-radius:6px;
         color:#fff; font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; flex:none; }
.badge.s { min-width:24px; height:20px; font-size:12px; padding:0 4px; border-radius:5px; }
.badges { display:flex; flex-wrap:wrap; gap:6px; }
.estimate { color:var(--muted); font-size:12px; padding:6px 16px 12px; }

/* redovi spiskova (pretraga, mesta, istorija) */
.row { display:flex; align-items:center; gap:14px; padding:10px 16px; border:0; background:none; width:100%; text-align:left; }
button.row:hover, button.row.active { background:var(--hover); }
.row .ri { width:40px; height:40px; border-radius:20px; background:var(--surf); display:grid; place-items:center; color:var(--muted); flex:none; }
.row .ri.stop { background:var(--pri-soft); color:var(--pri-strong); }
.row .rt { flex:1; min-width:0; }
.row .rt .l1 { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .rt .l2 { font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .rd { color:var(--muted); font-size:12px; flex:none; }
.row .rb { display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; }

/* ---------- početni list ---------- */
.near-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.near-deps { display:flex; gap:14px; flex-wrap:wrap; margin:8px 0 2px; }
.near-deps button { border:0; background:none; padding:0; display:flex; align-items:center; gap:6px; font-weight:500; color:var(--pri); }
.quick { display:flex; gap:8px; margin-top:12px; }
.qb { flex:1; min-width:0; height:48px; border-radius:12px; border:0; background:var(--surf); display:flex; align-items:center; gap:10px; padding:0 12px; text-align:left; }
.qb .ic { color:var(--pri); }
.qb .qt { min-width:0; font-weight:500; line-height:1.2; }
.qb small { display:block; color:var(--muted); font-weight:400; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- polasci ---------- */
.dep { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); }
.dep .hd { flex:1; min-width:0; }
.dep .hd .l1 { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dep .hd .l2 { color:var(--muted); font-size:12px; }
.dep .tm { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.dep .tm .a { font-weight:500; color:var(--pri); }
.dep .tm .b { color:var(--muted); font-size:12px; }
.fchips { display:flex; gap:6px; flex-wrap:wrap; padding:2px 16px 10px; }
.fchip { border:0; height:28px; min-width:36px; padding:0 8px; border-radius:6px; font-weight:700; color:#fff; opacity:.4; }
.fchip.on, .fchips.none .fchip { opacity:1; }
.fchip.all { background:var(--surf); color:var(--fg); opacity:1; font-weight:500; }
.fchip.all.on { background:var(--pri-soft); color:var(--pri-strong); }
.more { margin:10px 16px; }

/* ---------- planiranje ---------- */
.dircard { position:fixed; left:0; right:0; top:0; z-index:20; background:var(--bg); box-shadow:0 1px 4px rgba(0,0,0,.15);
           padding:calc(8px + var(--safe-t)) 8px 8px 4px; }
.dc-grid { display:grid; grid-template-columns:40px 22px 1fr 40px; align-items:center; row-gap:8px; }
.dc-ic { width:40px; height:40px; border:0; background:none; border-radius:20px; display:grid; place-items:center; color:var(--muted); }
.dc-swap { grid-row:1 / 4; grid-column:4; }
.dc-dot.a { width:12px; height:12px; border-radius:6px; border:2px solid var(--muted); margin:auto; }
.dc-dot.b { color:var(--dest); display:grid; place-items:center; }
.dc-dots { display:flex; flex-direction:column; align-items:center; gap:3px; margin:-6px 0; }
.dc-dots i { width:3px; height:3px; border-radius:2px; background:var(--outline); }
.dc-inp { height:42px; border:1px solid var(--outline); border-radius:8px; background:var(--bg); text-align:left; padding:0 12px; font-size:15px;
          white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-inp.ph { color:var(--muted); }
.dc-inp.you { color:var(--you); }
.dc-row { display:flex; gap:6px; padding:8px 0 0 44px; overflow-x:auto; scrollbar-width:none; }
.mode { display:flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:16px; color:var(--muted); font-weight:500;
        white-space:nowrap; border:0; background:none; }
.mode.on { background:var(--pri-soft); color:var(--pri-strong); }
.pill { height:32px; padding:0 6px 0 12px; border-radius:8px; border:1px solid var(--outline); background:var(--bg); display:flex; align-items:center; gap:2px; font-weight:500; font-size:13px; }
.pill .ic { color:var(--muted); }
.dc-whenbox { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 0 2px 44px; }
.dc-whenbox input { height:34px; border:1px solid var(--outline); border-radius:8px; background:var(--bg); color:var(--fg); font:inherit; padding:0 8px; }
.seg { display:inline-flex; border:1px solid var(--outline); border-radius:8px; overflow:hidden; }
.seg button { border:0; background:transparent; color:var(--muted); padding:6px 12px; font-size:13px; font-weight:500; }
.seg button[aria-pressed="true"] { background:var(--pri-soft); color:var(--pri-strong); }

.sh-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 16px 8px; }
.opt { display:block; width:100%; text-align:left; border:0; border-bottom:1px solid var(--line); background:none; padding:12px 16px; }
.opt:hover { background:var(--hover); }
.opt.sel { background:var(--pri-softer); box-shadow:inset 4px 0 0 var(--pri); }
.opt .o1 { display:flex; justify-content:space-between; gap:8px; font-size:16px; font-weight:500; font-variant-numeric:tabular-nums; }
.opt .o2 { display:flex; align-items:center; gap:3px; margin-top:6px; color:var(--muted); flex-wrap:wrap; }
.opt .o2 .sep { color:var(--outline); }
.opt .o2 .wk { display:inline-flex; align-items:center; font-size:12px; }
.opt .o3 { margin-top:6px; color:var(--muted); font-size:13px; }
.opt .o3 b { color:var(--pri); font-weight:500; }
.opt .best { display:inline-block; margin-left:8px; padding:1px 8px; border-radius:10px; background:var(--pri-soft); color:var(--pri-strong); font-size:12px; font-weight:500; vertical-align:2px; }
.opt.walk .o1 { font-weight:400; color:var(--muted); }

/* vremenska linija (detalji rute) */
.tl { padding:4px 16px 8px; }
.tl .st { display:grid; grid-template-columns:48px 24px 1fr; }
.tl .tm { font-size:13px; color:var(--muted); padding-top:1px; font-variant-numeric:tabular-nums; }
.tl .rail { position:relative; }
.tl .rail::before { content:""; position:absolute; left:10px; top:8px; bottom:-8px; width:4px; border-radius:2px; background:var(--c, var(--outline)); }
.tl .st.walk .rail::before { background:repeating-linear-gradient(var(--muted) 0 3px, transparent 3px 8px); width:3px; left:10px; opacity:.6; }
.tl .st.end .rail::before { display:none; }
.tl .rail::after { content:""; position:absolute; left:4px; top:2px; width:16px; height:16px; border-radius:8px; background:var(--bg); border:3px solid var(--c, var(--muted)); box-sizing:border-box; }
.tl .st.end .rail::after { border-color:var(--dest); }
.tl .tx { padding:0 0 14px; min-width:0; }
.tl .nm { font-weight:500; font-size:15px; }
.tl .ride { display:flex; align-items:center; gap:8px; margin:6px 0 2px; }
.tl .wk { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:13px; margin-top:2px; }
.tl details summary { color:var(--pri); font-size:13px; font-weight:500; cursor:pointer; margin-top:4px; list-style:none; display:flex; align-items:center; gap:2px; }
.tl details summary::-webkit-details-marker { display:none; }
.tl details ol { margin:6px 0 0; padding:0; list-style:none; font-size:13px; color:var(--muted); }
.tl details li { padding:2px 0; }

/* ---------- navigacija i vožnja ---------- */
.navban { position:fixed; left:8px; right:8px; top:calc(8px + var(--safe-t)); z-index:20; border-radius:16px; background:var(--ban); color:#fff;
          box-shadow:var(--shadow); overflow:hidden; }
.nb-main { display:flex; gap:14px; align-items:center; padding:14px 16px; }
.nb-ic { flex:none; }
.nb-tx { min-width:0; }
.nb-step { font-size:12px; opacity:.75; text-transform:uppercase; letter-spacing:.04em; }
.nb-step:empty { display:none; }
.nb-title { font-family:var(--font-head); font-size:19px; font-weight:600; line-height:1.2; }
.nb-sub { font-size:15px; opacity:.88; margin-top:3px; }
.nb-sub:empty { display:none; }
.nb-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px 16px; background:var(--ban2); font-size:14px; }
.nb-row .btns { display:flex; gap:6px; margin-left:auto; }
.nb-row button { border:1px solid rgba(255,255,255,.6); background:none; color:#fff; border-radius:8px; padding:4px 12px; font-weight:500; }
.nb-row.warn { background:#8c1d18; }
.nb-then { display:flex; align-items:center; gap:8px; padding:8px 16px; background:var(--ban2); font-size:14px; }
@keyframes navflash { 0%,100% { filter:none; } 30% { filter:brightness(1.6); } }
.navban.flash { animation:navflash 1.2s ease 3; }
.recenter { position:fixed; left:12px; z-index:16; bottom:calc(var(--sheet-h, 0px) + 48px); height:40px; padding:0 16px 0 12px; border-radius:20px; border:0;
            background:var(--bg); box-shadow:var(--shadow); display:flex; align-items:center; gap:6px; font-weight:500; color:var(--you); }
.navbar { display:flex; align-items:center; gap:12px; padding:0 16px 8px; }
.navbar .x { width:48px; height:48px; border-radius:24px; border:1px solid var(--outline); background:var(--bg); display:grid; place-items:center; flex:none; }
.navbar .eta { flex:1; text-align:center; min-width:0; }
.navbar .eta .a { font-family:var(--font-head); font-size:19px; font-weight:600; color:var(--pri); }
.navbar .eta .b { color:var(--muted); font-size:13px; }
.nav-steps { margin:4px 0 0; padding:0; list-style:none; }
.nav-steps li { display:flex; gap:10px; padding:8px 16px; color:var(--muted); align-items:center; }
.nav-steps li .t { width:44px; font-variant-numeric:tabular-nums; font-size:13px; flex:none; }
.nav-steps li.now { color:var(--fg); font-weight:500; background:var(--pri-softer); }
.nav-steps li.past { opacity:.55; text-decoration:line-through; }
.nav-man { display:flex; gap:8px; padding:8px 16px; }
.nav-man button { flex:1; }
.choices { display:grid; }
.choice { display:flex; gap:10px; align-items:center; text-align:left; width:100%; padding:10px 16px; border:0; border-bottom:1px solid var(--line); background:none; font-size:15px; }
.choice:hover { background:var(--hover); }

/* ---------- donja traka kartica ---------- */
.tabs { position:fixed; left:0; right:0; bottom:0; z-index:19; height:calc(var(--tabs-h) + var(--safe-b)); padding-bottom:var(--safe-b);
        background:var(--bg); border-top:1px solid var(--line); }
body[data-tabs="1"] .tabs { display:flex; justify-content:space-around; align-items:flex-start; }
.tabs button { border:0; background:none; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; font-weight:500;
               color:var(--muted); width:80px; padding-top:10px; }
.tabs .ti { width:56px; height:30px; border-radius:15px; display:grid; place-items:center; }
.tabs button.on { color:var(--fg); }
.tabs button.on .ti { background:var(--pri-soft); color:var(--pri-strong); }

/* ---------- pretraga preko celog ekrana ---------- */
.searchscreen { position:fixed; inset:0; z-index:40; background:var(--bg); display:none; flex-direction:column; }
body[data-screen="search"] .searchscreen { display:flex; }
.ss-bar { flex:none; display:flex; align-items:center; gap:4px; height:calc(64px + var(--safe-t)); padding:var(--safe-t) 8px 0; border-bottom:1px solid var(--line); }
.ss-bar input { flex:1; min-width:0; height:44px; border:0; background:none; color:var(--fg); font:inherit; font-size:18px; outline:none; }
.ss-bar input::-webkit-search-cancel-button { display:none; }
.ss-body { flex:1; overflow-y:auto; padding-bottom:calc(16px + var(--safe-b)); }
.ss-chips { display:flex; gap:8px; padding:12px 16px 4px; overflow-x:auto; scrollbar-width:none; }
.seg2 { display:flex; margin:12px 16px 4px; background:var(--surf); border-radius:12px; padding:3px; }
.seg2 button { flex:1; height:36px; border:0; border-radius:10px; background:none; font-weight:500; color:var(--muted); }
.seg2 button.on { background:var(--bg); color:var(--fg); box-shadow:0 1px 2px rgba(0,0,0,.15); }
.ss-h { padding:14px 16px 4px; font-size:14px; font-weight:500; color:var(--muted); }
.cats { display:grid; grid-template-columns:repeat(4, 1fr); row-gap:16px; padding:12px 8px 4px; }
.cat { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12.5px; text-align:center; border:0; background:none; padding:0 2px; }
.cat .ci { width:56px; height:56px; border-radius:28px; display:grid; place-items:center; background:var(--pri-softer); color:var(--pri-strong); }
.hl { font-weight:700; }

/* ---------- mesto: oznake na mapi ---------- */
.pinwrap { cursor:grab; }
.pinwrap.b { width:30px; height:40px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.pin-a { width:18px; height:18px; border-radius:9px; background:#fff; border:5px solid var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.4); }
.mv-user { pointer-events:none; }
.mv-user svg { display:block; }
.mv-tip .maplibregl-popup-content { padding:4px 8px; font-size:13px; color:#1f1f1f; }
.mv-mark { cursor:pointer; }
.poi-pin { display:flex; align-items:center; gap:4px; background:var(--bg); border-radius:14px; padding:2px 8px 2px 2px; box-shadow:0 1px 4px rgba(0,0,0,.35);
           font-size:12px; font-weight:500; white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis; color:var(--fg); }
.poi-pin .lg { width:22px; height:22px; border-radius:11px; display:grid; place-items:center; color:#fff; background:var(--ink); flex:none; }
.poi-pin.sel { transform:scale(1.15); box-shadow:0 0 0 2px var(--pri), 0 2px 6px rgba(0,0,0,.4); z-index:2; }
.poi-dot { width:24px; height:24px; border-radius:12px; display:grid; place-items:center; color:#fff; background:var(--ink); border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.4); }
.place-pin { filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }

/* ---------- podešavanja ---------- */
.set { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.set .sl { min-width:0; }
.set small { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.set input[type=checkbox] { width:20px; height:20px; accent-color:var(--pri); flex:none; }
.about { padding:14px 16px; color:var(--muted); font-size:13px; line-height:1.5; }
.about a { color:inherit; }
.linesgrid { display:flex; flex-wrap:wrap; gap:8px; padding:4px 16px 12px; }
.linesgrid .badge { min-width:44px; height:34px; font-size:15px; border:0; border-radius:8px; }

.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--sheet-h, 0px) + var(--tabs-on, 0px) + 20px); z-index:50;
         background:#323232; color:#fff; padding:10px 16px; border-radius:8px; font-size:14px; box-shadow:var(--shadow); max-width:90vw; }

/* ---------- široki ekran: leva tabla ---------- */
@media (min-width: 900px) {
  :root { --tabs-on:0px !important; }
  .topbar { left:16px; right:16px; top:12px; display:flex; gap:12px; align-items:flex-start; }
  body[data-top="search"] .topbar { display:flex; }
  .searchbar { width:calc(var(--panel-w) - 32px); flex:none; }
  .chips { margin:7px 0 0; padding:0 0 6px; }
  .sheet { left:0; top:0; bottom:0 !important; right:auto; width:var(--panel-w); height:auto !important; border-radius:0;
           box-shadow:2px 0 8px rgba(0,0,0,.15); padding-top:72px; transition:none; }
  body[data-top="dir"] .sheet { padding-top:var(--dircard-h, 190px); }
  body[data-tabs="1"] .sheet { bottom:0; padding-bottom:var(--tabs-h); }
  body[data-sheet="none"] .sheet { display:none; }
  .grab { display:none; }
  .sheet.peek .sheet-body { overflow-y:auto; }
  .tabs { left:0; right:auto; width:var(--panel-w); z-index:19; }
  .dircard { width:var(--panel-w); box-shadow:none; border-bottom:1px solid var(--line); }
  .fabs { bottom:24px !important; }
  .fab.loc, .fab.dir { width:40px; height:40px; border-radius:20px; }
  .fab.dir { display:none; }
  .zoom { display:flex; }
  #fab-compass { position:static; }
  body[data-top="nav"] #fab-compass { position:static; }
  .navban { left:16px; right:auto; width:calc(var(--panel-w) - 16px); top:16px; }
  body[data-top="nav"] .sheet { top:auto; bottom:16px !important; left:16px; width:calc(var(--panel-w) - 16px); max-height:50vh; border-radius:16px; padding-top:8px; }
  .recenter { left:calc(var(--panel-w) + 16px); bottom:24px; }
  .searchscreen { right:auto; width:var(--panel-w); box-shadow:2px 0 8px rgba(0,0,0,.15); }
  .toast { bottom:24px; left:calc(var(--panel-w) + (100vw - var(--panel-w)) / 2); }
  .maplibregl-ctrl-bottom-left { left:var(--panel-w); }
}