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

  :root {
    --wheelchair: #16a34a;
    --blind:      #2563eb;
    --general:    #7c3aed;
    --cycling:    #ea580c;
    --danger:     #dc2626;
    --warn:       #d97706;
    --bg:         #f8fafc;
    --card:       #ffffff;
    --border:     #e2e8f0;
    --text:       #1e293b;
    --muted:      #64748b;
    --shadow:     0 4px 24px rgba(0,0,0,.10);
  }
  body                { --active: var(--wheelchair); }
  body.mode-blind     { --active: var(--blind); }
  body.mode-general   { --active: var(--general); }
  body.mode-cycling   { --active: var(--cycling); }

  body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ── HEADER ── */
  header {
    background: var(--active);
    color: #fff;
    /* padding-top kompenzira Android status bar (edge-to-edge, API 35+) i iOS notch */
    padding: env(safe-area-inset-top, 0px) 1rem 0;
    min-height: 56px;
    height: calc(56px + env(safe-area-inset-top, 0px));
    display: flex;
    align-items: flex-end;
    padding-bottom: .5rem;
    gap: .75rem;
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow: hidden;
    transition: background .3s;
    z-index: 1000;
  }
  header .logo { font-size: 1.25rem; font-weight: 700; letter-spacing: -.5px; display: flex; align-items: center; min-width: 0; flex-shrink: 1; overflow: hidden; }
  header .logo span { opacity: .7; font-weight: 400; }
  .header-logo-img { height: 28px; width: auto; display: block; filter: brightness(0) invert(1); flex-shrink: 0; }
  .logo-fallback { display: none; }
  .tab-icon { display: flex; align-items: center; justify-content: center; line-height: 1; }

  /* ── WELCOME (samo desktop, dok nije odabran profil) ── */
  .welcome-card {
    padding: 1.5rem 1.25rem 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }
  .welcome-card .welcome-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: .25rem;
  }
  .welcome-card h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
  }
  .welcome-card p {
    font-size: .88rem;
    color: var(--muted);
    line-height: 1.45;
  }
  .welcome-card .welcome-hint {
    margin-top: .5rem;
    padding: .6rem .75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .82rem;
    color: var(--text);
    font-weight: 500;
  }
  .btn-pwa-install {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .25rem .6rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
  }
  .btn-pwa-install:hover { border-color: var(--active); color: var(--active); }

  body.has-profile .welcome-card { display: none; }
  body:not(.has-profile):not(.layout-mobile) .search-section { display: none; }
  body.layout-mobile .welcome-card { display: none; }

  /* ── GRB GRADA ZAGREBA (desktop, ispod "Traži pristupačnu rutu") ── */
  .sidebar-grb {
    display: flex;
    justify-content: center;
    padding: 1.25rem 1rem .75rem;
  }
  .sidebar-grb img {
    width: 240px;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.2));
  }
  body.layout-mobile .sidebar-grb { display: none; }

  .mode-tabs {
    display: flex;
    gap: .25rem;
    margin-left: auto;
    background: rgba(255,255,255,.15);
    border-radius: 8px;
    padding: 3px;
  }
  .mode-tab {
    border: none;
    background: transparent;
    color: rgba(255,255,255,.7);
    padding: .3rem .65rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 500;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
  }
  .mode-tab.active {
    background: #fff;
    color: var(--active);
  }
  .mode-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  /* ── MAIN LAYOUT ── */
  .app-body {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  /* ── SIDEBAR ── */
  .sidebar {
    width: 360px;
    background: var(--card);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
    z-index: 500;
  }

  .search-section {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: .6rem;
  }
  .input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
  }
  .input-dot {
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--muted);
    flex-shrink: 0;
  }
  .input-dot.end { background: var(--active); border-color: var(--active); }
  .input-line {
    position: absolute; left: 5px; top: 24px;
    width: 2px; height: 22px; background: var(--border);
  }
  .addr-input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .55rem .75rem;
    font-size: .9rem;
    font-family: inherit;
    color: var(--text);
    background: var(--bg);
    transition: border-color .15s;
  }
  .addr-input:focus { outline: none; border-color: var(--active); }
  .addr-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 24px; right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    z-index: 2000;
    max-height: 200px;
    overflow-y: auto;
  }
  .addr-suggestions button {
    display: block; width: 100%;
    text-align: left; padding: .6rem .8rem;
    border: none; background: none;
    font-size: .82rem; color: var(--text);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
  }
  .addr-suggestions button:last-child { border-bottom: none; }
  .addr-suggestions button:hover { background: var(--bg); }

  .btn-route {
    background: var(--active);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .65rem 1rem;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: opacity .2s;
  }
  .btn-route:hover { opacity: .88; }
  .btn-route:disabled { opacity: .45; cursor: not-allowed; }

  /* ── ROUTE INFO ── */
  .route-info {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    display: none;
  }
  .route-info.visible { display: block; }
  .route-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: .75rem;
  }
  .stat {
    flex: 1;
    background: var(--bg);
    border-radius: 8px;
    padding: .6rem .8rem;
    text-align: center;
  }
  .stat-val { font-size: 1.1rem; font-weight: 700; color: var(--active); }
  .stat-lbl { font-size: .72rem; color: var(--muted); margin-top: 2px; }
  .obstacle-count {
    font-size: .82rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: .4rem;
  }
  .obstacle-count .badge {
    background: var(--danger);
    color: #fff;
    border-radius: 4px;
    padding: 0 .4rem;
    font-size: .75rem;
    font-weight: 600;
  }
  .badge.warn { background: var(--warn); }

  /* Sažetak prepreka koje je naša ruta izbjegla u odnosu na standardnu */
  .avoided-info {
    margin-top: .55rem;
    padding: .55rem .65rem;
    border-radius: 8px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    font-size: .82rem;
    color: #065f46;
  }
  .avoided-info .avoided-title {
    font-weight: 700;
    margin-bottom: .35rem;
    display: flex;
    align-items: center;
    gap: .35rem;
  }
  .avoided-info .avoided-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
  }
  .avoided-info .avoided-list li {
    display: flex;
    align-items: center;
    gap: .4rem;
  }
  .avoided-info .avoided-list .count {
    font-weight: 700;
    min-width: 1.5rem;
    text-align: right;
  }

  /* ── STEPS ── */
  .steps-section {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    display: none;
  }
  .steps-section.visible { display: block; }
  .steps-title {
    font-size: .8rem; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: .5rem;
  }
  .step {
    display: flex; gap: .6rem; padding: .4rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .82rem;
  }
  .step:last-child { border-bottom: none; }
  .step-dist { color: var(--muted); flex-shrink: 0; min-width: 48px; text-align: right; }
  .step.active { background: #eff6ff; border-left: 3px solid #2563eb; padding-left: .4rem; font-weight: 600; }
  .step.done   { opacity: .4; }

  /* Nav banner (floating over map) */
  #nav-banner {
    display: none; position: fixed;
    bottom: 5.5rem; left: 50%; transform: translateX(-50%);
    background: #1e293b; color: #fff;
    padding: .8rem 1.4rem; border-radius: 14px;
    max-width: calc(100vw - 2rem); min-width: 240px;
    z-index: 2000; box-shadow: 0 4px 18px rgba(0,0,0,.35);
    flex-direction: column; align-items: center; gap: .2rem; text-align: center;
  }
  #nav-banner.active { display: flex; }
  #nav-instruction { font-size: .95rem; font-weight: 600; }
  #nav-dist-next   { font-size: .78rem; color: #94a3b8; }

  /* Pokreni navigaciju gumb */
  .btn-start-nav {
    display: none; width: 100%; margin-top: .75rem;
    padding: .65rem 1rem; border: none; border-radius: 8px;
    background: #16a34a; color: #fff;
    font-size: .88rem; font-weight: 600; cursor: pointer;
  }
  .btn-start-nav.visible { display: block; }
  .btn-start-nav.active  { background: #dc2626; }

  /* ── OBSTACLE LIST ── */
  .obstacles-section {
    padding: 1rem;
    flex: 1;
  }
  .section-title {
    font-size: .8rem; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: .75rem;
    display: flex; align-items: center; gap: .5rem;
  }
  .obs-count {
    background: var(--active); color: #fff;
    border-radius: 99px; padding: 0 .45rem;
    font-size: .72rem;
  }
  .obs-item {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: .6rem 0; border-bottom: 1px solid var(--border);
  }
  .obs-item:last-child { border-bottom: none; }
  .obs-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
    background: #fef3c7;
  }
  .obs-icon.verified { background: #fee2e2; }
  .obs-body { flex: 1; min-width: 0; }
  .obs-type { font-size: .84rem; font-weight: 600; }
  .obs-desc { font-size: .76rem; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .obs-badge {
    font-size: .7rem; padding: 1px 6px; border-radius: 4px;
    color: #fff; font-weight: 600;
  }
  .obs-badge.unverified { background: var(--warn); }
  .obs-badge.verified   { background: var(--danger); }

  /* ── MAP ── */
  #map { flex: 1; }

  /* ── REPORT BUTTON ── */
  .btn-report {
    position: absolute;
    bottom: 1.5rem; right: 1.5rem;
    z-index: 900;
    background: var(--active);
    color: #fff;
    border: none;
    width: 56px; height: 56px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s, opacity .2s;
  }
  .btn-report:hover { transform: scale(1.08); }
  .btn-report.selecting {
    background: var(--danger);
    animation: pulse 1.2s infinite;
  }
  @keyframes pulse {
    0%,100% { box-shadow: 0 4px 16px rgba(220,38,38,.4); }
    50%      { box-shadow: 0 4px 32px rgba(220,38,38,.7); }
  }

  /* ── MODAL ── */
  .modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 2000;
    align-items: flex-end;
    justify-content: center;
  }
  .modal-overlay.open { display: flex; }
  .modal {
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 1.5rem;
    width: 100%; max-width: 480px;
    max-height: 90dvh;
    overflow-y: auto;
    animation: slideUp .25s ease;
  }
  @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .modal-title {
    font-size: 1.05rem; font-weight: 700;
    margin-bottom: 1rem;
    display: flex; align-items: center; gap: .5rem;
  }
  .modal label {
    display: block;
    font-size: .83rem; font-weight: 600;
    color: var(--muted);
    margin-bottom: .3rem;
    margin-top: .75rem;
  }
  .modal select, .modal textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .55rem .75rem;
    font-size: .9rem;
    font-family: inherit;
    color: var(--text);
    background: var(--bg);
  }
  .modal select:focus, .modal textarea:focus { outline: none; border-color: var(--active); }
  .modal textarea { resize: vertical; min-height: 72px; }
  .modal-coords {
    font-size: .78rem; color: var(--muted);
    background: var(--bg); border-radius: 6px;
    padding: .4rem .7rem; margin-bottom: .25rem;
  }
  .modal-actions {
    display: flex; gap: .75rem; margin-top: 1.25rem;
  }
  .btn-cancel {
    flex: 1; padding: .65rem;
    border: 1px solid var(--border);
    background: none; border-radius: 8px;
    font-weight: 600; cursor: pointer;
    font-family: inherit;
  }
  .btn-submit {
    flex: 2; padding: .65rem;
    background: var(--active); color: #fff;
    border: none; border-radius: 8px;
    font-weight: 600; cursor: pointer;
    font-family: inherit;
  }

  /* ── TTS BAR (blind mode) ── */
  .tts-bar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--blind);
    color: #fff;
    padding: .75rem 1rem;
    font-size: .9rem;
    z-index: 1500;
    align-items: center;
    gap: .75rem;
  }
  body.mode-blind .tts-bar { display: flex; }
  .tts-text { flex: 1; }
  .tts-btn {
    background: rgba(255,255,255,.2);
    border: none;
    color: #fff;
    padding: .4rem .8rem;
    border-radius: 6px;
    font-size: .82rem;
    cursor: pointer;
    font-family: inherit;
  }
  /* Compare button + rezultat -- key pitch feature za žiri */
  .btn-compare {
    width: 100%;
    margin-top: .5rem;
    padding: .55rem .9rem;
    border: 2px dashed var(--border);
    background: #fff;
    color: var(--text);
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: all .2s;
  }
  .btn-compare:hover { border-color: var(--active); background: #f8fafc; }
  .btn-compare[aria-pressed="true"] {
    background: var(--active); color: #fff; border-style: solid; border-color: var(--active);
  }
  .compare-result {
    margin-top: .5rem;
    padding: .7rem .9rem;
    background: #f8fafc;
    border-radius: 8px;
    font-size: .82rem;
    line-height: 1.5;
    display: none;
  }
  .compare-result.visible { display: block; }
  .compare-result .row { display: flex; justify-content: space-between; padding: .15rem 0; }
  .compare-result .label-our      { color: var(--wheelchair); font-weight: 600; }
  .compare-result .label-standard { color: #64748b; font-weight: 600; text-decoration: line-through dashed; }
  .compare-result .diff           { font-weight: 700; }
  .compare-result .diff.positive  { color: var(--wheelchair); }
  .compare-result .diff.negative  { color: var(--danger); }
  .compare-result .pitch-line     { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--border); font-style: italic; color: var(--muted); font-size: .76rem; }

  /* Wake word indikator -- sitna traka na vrhu, nestaje kad nema podrške */
  #voice-indicator {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #4caf50;
    z-index: 2000;
    transition: background .3s;
  }
  #voice-indicator.listening { background: #e53935; animation: pulse-bar .8s infinite alternate; }
  #voice-indicator.thinking  { background: #f59e0b; animation: pulse-think 1.2s infinite linear; }
  #voice-indicator.hidden    { display: none; }
  @keyframes pulse-bar   { from { opacity: 1; } to { opacity: .4; } }
  @keyframes pulse-think {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }
  #voice-indicator.thinking {
    background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
    background-size: 200% 100%;
  }

  /* ── HIGH CONTRAST (blind mode helper) ── */
  body.mode-blind .addr-input { font-size: 1rem; padding: .7rem .9rem; }
  body.mode-blind .btn-route  { font-size: 1rem; padding: .75rem; }

  /* ── TUTORIAL ── */
  .tut-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }
  .tut-overlay.open { display: flex; }
  .tut-box {
    background: #fff;
    border-radius: 20px;
    padding: 2rem 1.75rem 1.5rem;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0,0,0,.3);
    animation: slideUp .3s ease;
  }
  .tut-step-num {
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: .75rem;
  }
  .tut-icon { font-size: 3.5rem; margin-bottom: .75rem; line-height: 1; }
  .tut-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .6rem;
    line-height: 1.3;
  }
  .tut-desc {
    font-size: 1rem;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }
  .tut-desc strong { color: var(--text); }
  .tut-dots {
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin-bottom: 1.25rem;
  }
  .tut-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--border);
    transition: background .2s;
  }
  .tut-dot.active { background: var(--active); }
  .tut-actions { display: flex; gap: .75rem; }
  .tut-skip {
    flex: 1; padding: .7rem;
    border: 1px solid var(--border);
    background: none; border-radius: 10px;
    font-size: .95rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
    color: var(--muted);
  }
  .tut-next {
    flex: 2; padding: .7rem;
    background: var(--active); color: #fff;
    border: none; border-radius: 10px;
    font-size: .95rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
  }
  .tut-help-btn {
    position: absolute;
    bottom: 1.5rem; left: 1.5rem;
    z-index: 900;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 50%;
    width: 44px; height: 44px;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: var(--shadow);
    display: flex; align-items: center; justify-content: center;
  }
  /* ── DEVICE PICKER ── */
  .device-picker-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 4000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
  }
  .device-picker-overlay.open { display: flex; }
  .device-picker-box {
    background: #fff;
    border-radius: 24px;
    padding: 2.5rem 2rem 2rem;
    max-width: 360px;
    width: 100%;
    text-align: center;
    box-shadow: 0 12px 48px rgba(0,0,0,.25);
    animation: slideUp .3s ease;
  }
  .device-picker-icon { font-size: 3rem; margin-bottom: .75rem; }
  .device-picker-title { font-size: 1.3rem; font-weight: 700; margin-bottom: .4rem; }
  .device-picker-sub {
    font-size: .9rem; color: var(--muted);
    margin-bottom: 1.75rem; line-height: 1.5;
  }
  .device-picker-btns { display: flex; flex-direction: column; gap: .75rem; }
  .device-picker-btn {
    border: 2px solid var(--border);
    background: none;
    border-radius: 14px;
    padding: 1.1rem 1rem;
    font-size: 1rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
    gap: .6rem;
    transition: border-color .15s, background .15s;
    color: var(--text);
  }
  .device-picker-btn:hover, .device-picker-btn:active {
    border-color: var(--active);
    background: #f0fdf4;
    color: var(--active);
  }
  .device-picker-note { margin-top: 1.25rem; font-size: .78rem; color: var(--muted); }

  /* ── SHEET HANDLE ── */
  .sheet-handle {
    display: none;
    justify-content: center;
    padding: .65rem 0 .5rem;
    cursor: pointer;
    flex-shrink: 0;
    touch-action: none;
    user-select: none;
  }
  .sheet-handle-pill {
    width: 40px; height: 5px;
    background: var(--border);
    border-radius: 3px;
    transition: background .15s;
  }
  .sheet-handle:hover .sheet-handle-pill,
  .sheet-handle:active .sheet-handle-pill { background: var(--muted); }

  /* ── TRANSIT TOGGLE ── */
  .btn-transit {
    position: absolute;
    top: 1rem; right: 1rem;
    z-index: 900;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    box-shadow: var(--shadow);
    color: var(--text);
    transition: all .2s;
  }
  .btn-transit.active {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #fff;
  }
  .transit-legend {
    position: static;
    z-index: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .5rem .75rem;
    font-size: .76rem;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: .3rem;
    width: 100%;
  }
  .transit-legend.visible { display: flex; }
  .legend-row { display: flex; align-items: center; gap: .5rem; }
  .transit-filter {
    border: 1px solid var(--border); background: none;
    border-radius: 6px; padding: .25rem .5rem;
    font-size: .74rem; font-weight: 600; cursor: pointer;
    font-family: inherit; color: var(--muted);
  }
  .transit-filter.active { background: var(--active); color: #fff; border-color: var(--active); }
  .terminal-tooltip {
    background: hsl(280,65%,48%); color: #fff; border: none;
    border-radius: 6px; font-size: .78rem; font-weight: 600;
    padding: 3px 8px; white-space: nowrap;
  }
  .terminal-tooltip::before { border-top-color: hsl(280,65%,48%) !important; }

  /* ── BAJS LEGENDA ── */
  .bajs-legend {
    position: static;
    z-index: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .5rem .75rem;
    font-size: .76rem;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: .35rem;
    width: 100%;
  }
  .bajs-legend.visible { display: flex; }

  /* ── ZDRAVSTVO LEGENDA ── */
  .zdravstvo-legend {
    position: static;
    z-index: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .5rem .75rem;
    font-size: .76rem;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: .35rem;
    width: 100%;
  }
  .zdravstvo-legend.visible { display: flex; }

  /* ── MAP STYLE SWITCHER (top-left) ── */
  .btn-mapstyle {
    position: absolute;
    top: 1rem; left: 1rem;
    z-index: 900;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    box-shadow: var(--shadow);
    color: var(--text);
    transition: all .2s;
  }
  .btn-mapstyle:hover { border-color: var(--active); }
  .mapstyle-menu {
    position: absolute;
    top: 3.5rem; left: 1rem;
    z-index: 900;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .35rem;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: .15rem;
    min-width: 170px;
  }
  .mapstyle-menu.visible { display: flex; }
  .mapstyle-option {
    border: none; background: none;
    border-radius: 6px;
    padding: .5rem .65rem;
    font-size: .82rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--text);
    transition: background .15s, color .15s;
  }
  .mapstyle-option:hover { background: #f3f4f6; }
  .mapstyle-option.active { background: var(--active); color: #fff; }
  body.layout-mobile .btn-mapstyle { top: .5rem; left: .5rem; padding: .4rem .55rem; font-size: .8rem; }
  body.layout-mobile .mapstyle-menu { top: 3rem; left: .5rem; }
  body.layout-mobile .mapstyle-label { display: none; }

  /* Satellite/dark UI tweaks: keep markers readable on imagery */
  body.mapstyle-satellite .leaflet-control-attribution { background: rgba(0,0,0,.6); color:#fff; }
  body.mapstyle-satellite .leaflet-control-attribution a { color:#9bd; }

  /* Dark mode: Carto dark_all je sirov #181818 i izgleda crno.
     Brightness + smanjena saturacija ga podiže na čitljiv tamni-sivkasti
     stil gdje su ceste, voda i nazivi razlikljivi. Filter ide samo na
     tile-pane pa markeri/rute ostaju netaknute. */
  body.mapstyle-dark .leaflet-tile-pane {
    filter: brightness(1.75) contrast(.82) saturate(.5);
  }
  body.mapstyle-dark { background: #2a2a2a; }
  body.mapstyle-dark #map { background: #2a2a2a; }

  /* ── GUŽVA / TRAFFIC TOGGLE (right column, ispod my-location) ── */
  .btn-guzva {
    position: absolute;
    top: 13.5rem; right: 1rem;
    z-index: 900;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    box-shadow: var(--shadow);
    color: var(--text);
    transition: all .2s;
  }
  .btn-guzva.active {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
  }
  .btn-guzva.disabled {
    opacity: .55;
    cursor: not-allowed;
  }
  body.layout-mobile .btn-guzva {
    top: 12.7rem; right: .6rem;
    font-size: .8rem; padding: .4rem .65rem;
  }
  body.layout-mobile .guzva-label { display: none; }
  .guzva-legend {
    position: static;
    z-index: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .4rem .75rem;
    font-size: .76rem;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: .3rem;
    width: 100%;
  }
  .guzva-legend .legend-row { gap: .35rem; }
  .guzva-legend.visible { display: flex; }

  /* ── BAJS TOGGLE ── */
  .btn-bajs {
    position: absolute;
    top: 3.5rem; right: 1rem;
    z-index: 900;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    box-shadow: var(--shadow);
    color: var(--text);
    transition: all .2s;
  }
  .btn-bajs.active {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
  }
  body.layout-mobile .btn-bajs {
    top: 3rem; right: .6rem;
    font-size: .8rem; padding: .4rem .65rem;
  }
  body.layout-mobile .bajs-label { display: none; }

  /* ── ZDRAVSTVO TOGGLE ── */
  .btn-zdravstvo {
    position: absolute;
    top: 6rem; right: 1rem;
    z-index: 900;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    box-shadow: var(--shadow);
    color: var(--text);
    transition: all .2s;
  }
  .btn-zdravstvo.active {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
  }
  .btn-zdravstvo.loading {
    opacity: .65;
    cursor: wait;
  }
  body.layout-mobile .btn-zdravstvo {
    top: 5.4rem; right: .6rem;
    font-size: .8rem; padding: .4rem .65rem;
  }
  body.layout-mobile .zdravstvo-label { display: none; }

  /* Zdravstvo markeri */
  /* Pristupačnost markeri */
  .pac-marker {
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    border-radius: 50%;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.30);
    line-height: 1;
  }
  .pac-marker.udruga  { width: 34px; height: 34px; font-size: 1rem;   background: #7c3aed; }
  .pac-marker.ured    { width: 34px; height: 34px; font-size: 1rem;   background: #1e40af; }
  .pac-marker.wc      { width: 24px; height: 24px; font-size: .65rem; background: #0891b2; }
  .pac-marker.parking { width: 26px; height: 26px; font-size: .85rem; background: #1d4ed8; }

  .btn-pristupacnost {
    position: absolute;
    top: 8.5rem; right: 1rem;
    z-index: 900;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    box-shadow: var(--shadow);
    color: var(--text);
    transition: all .2s;
  }
  .btn-pristupacnost:hover  { background: #f5f3ff; border-color: #7c3aed; }
  .btn-pristupacnost.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
  body.layout-mobile .btn-pristupacnost { top: 7.8rem; right: .6rem; font-size: .8rem; padding: .4rem .65rem; }
  body.layout-mobile .pristupacnost-label { display: none; }

  .btn-heatmap {
    position: absolute;
    top: 11.5rem; right: 1rem;
    z-index: 900;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    box-shadow: var(--shadow);
    color: var(--text);
    transition: all .2s;
  }
  .btn-heatmap:hover  { background: #fff7ed; border-color: #f97316; }
  .btn-heatmap.active { background: #f97316; border-color: #f97316; color: #fff; }
  body.layout-mobile .btn-heatmap { top: 10.8rem; right: .6rem; font-size: .8rem; padding: .4rem .65rem; }
  body.layout-mobile .heatmap-label { display: none; }

  .heatmap-legend {
    position: static;
    z-index: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .5rem .75rem;
    font-size: .76rem;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: .35rem;
    width: 100%;
  }
  .heatmap-legend.visible { display: flex; }

  .pristupacnost-legend {
    position: static;
    z-index: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .5rem .75rem;
    font-size: .76rem;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: .35rem;
    width: 100%;
  }
  .pristupacnost-legend.visible { display: flex; }

  .zdr-marker {
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    border-radius: 50%;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.30);
    line-height: 1;
  }
  .zdr-marker.hospital  { width: 32px; height: 32px; font-size: .95rem; background: #1d4ed8; }
  .zdr-marker.dezurna   { width: 28px; height: 28px; font-size: 1.1rem; background: #16a34a; }
  .zdr-marker.pharmacy  { width: 22px; height: 22px; font-size: .72rem; background: #7c3aed; }

  /* Bajs "B" marker ikonica */
  .bajs-marker-icon {
    width: 28px; height: 28px;
    background: #16a34a;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 800;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.28);
    line-height: 1;
  }
  .bajs-marker-icon.empty { background: #94a3b8; }

  /* Slijepih resursi markeri (auto-prikaz u blind modu) */
  .slijepih-marker {
    display: flex; align-items: center; justify-content: center;
    border: 3px solid #fff;
    border-radius: 50%;
    font-size: 1.5rem;
    box-shadow: 0 3px 10px rgba(0,0,0,.40);
    line-height: 1;
    cursor: pointer;
  }
  .slijepih-marker.hsuss     { background: #1d4ed8; }
  .slijepih-marker.knjiznica { background: #7c3aed; }

  /* ── MOBILE LAYOUT ── */
  body.layout-mobile .sheet-handle { display: flex; }

  body.layout-mobile .app-body {
    padding-bottom: var(--sheet-h, 90px);
    transition: padding-bottom .3s cubic-bezier(.4, 0, .2, 1);
  }


  body.layout-mobile .sidebar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    top: auto; width: 100%;
    height: var(--sheet-h, 90px);
    border-right: none;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    z-index: 800;
    overflow: hidden;
    transition: height .3s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 -4px 24px rgba(0,0,0,.12);
    /* Safe area za telefone s home indicatorom */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body.layout-mobile .sidebar.expanded { overflow-y: auto; }

  /* Spriječi Leaflet SVG elemente da prelaze izvan mape u sheet/header područje */
  body.layout-mobile .map-wrapper { overflow: hidden; }

  body.layout-mobile .btn-report {
    bottom: 8px;
    right: 1rem;
    background: #dc2626;
    width: 48px; height: 48px;
    font-size: 1.3rem;
  }
  body.layout-mobile .tut-help-btn {
    bottom: .75rem;
    left: 1rem;
  }

  /* Transit gumb: gornji desni kut mape */
  body.layout-mobile .btn-transit {
    top: .6rem; right: .6rem;
    font-size: .8rem; padding: .4rem .65rem;
  }
  body.layout-mobile .transit-label { display: none; }
  /* Na mobitelu legend panel: kompaktniji, uz desni rub ispod gear gumba */
  body.layout-mobile #legend-panel {
    top: 3.4rem;
    right: .5rem;
    width: 185px;
    max-height: calc(100vh - var(--sheet-h, 90px) - 5rem);
    font-size: .74rem;
  }
  body.layout-mobile #legend-panel .legend-title { font-size: .65rem; }
  body.layout-mobile #legend-panel .legend-row { font-size: .74rem; }
  body.layout-mobile #legend-panel .transit-filter { padding: .2rem .4rem; font-size: .68rem; min-height: 30px; min-width: 30px; }

  /* Header tabovi: samo emoji na mobitelu */
  body.layout-mobile .logo {
    font-size: .82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    min-width: 0;
    max-width: 90px;
    flex-shrink: 1;
  }
  /* Na mobitelu: sakrij logo sliku (bijeli kvadrat problem), prikaži tekst */
  body.layout-mobile .header-logo-img { display: none; }
  body.layout-mobile .logo-fallback { display: inline; font-size: .78rem; font-weight: 700; white-space: normal; }
  body.layout-mobile .tab-label { display: none; }
  body.layout-mobile .mode-tab  { padding: .3rem .5rem; font-size: 1.1rem; }
  body.layout-mobile .tab-icon  { font-size: 1.15rem; line-height: 1; }
  body.layout-mobile .btn-cb-tab {
    padding: .3rem .5rem; font-size: 1.1rem;
    border-left: 1px solid rgba(255,255,255,.2);
    margin-left: .15rem;
  }

  /* Inputi i gumb - veći touch targeti */
  body.layout-mobile .addr-input {
    font-size: 1rem; padding: .75rem .9rem; min-height: 48px;
  }
  body.layout-mobile .btn-route {
    padding: .85rem 1rem; font-size: 1rem; min-height: 52px;
  }
body.layout-mobile .search-section { padding: .85rem .85rem .75rem; gap: .55rem; }

  /* Obstacle lista - veći redovi na mobitelu */
  body.layout-mobile .obs-item { padding: .75rem 0; }
  body.layout-mobile .obs-type { font-size: .9rem; }
  body.layout-mobile .obs-desc { font-size: .8rem; }

  /* Mobile search trigger gumb (collapsed) / search forma (expanded) */
  .mobile-search-trigger { display: none; }

  body.layout-mobile .mobile-search-trigger {
    display: flex;
    align-items: center; justify-content: center;
    gap: .5rem;
    width: calc(100% - 1.4rem);
    margin: .5rem .7rem .6rem;
    background: var(--active);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: .85rem 1rem;
    font-size: 1rem; font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    min-height: 52px;
    box-shadow: 0 2px 12px rgba(0,0,0,.15);
    transition: opacity .15s;
  }
  body.layout-mobile .mobile-search-trigger:active { opacity: .82; }

  /* U collapsed stanju: sakrij search formu */
  body.layout-mobile:not(.sheet-open) .search-section { display: none; }

  /* U expanded stanju: sakrij trigger gumb, pokaži formu */
  body.layout-mobile.sheet-open .mobile-search-trigger { display: none; }
  body.layout-mobile.sheet-open .search-section { display: flex; }

  /* ── PALETTE BOJA (sljepilo boja) ── */
  body.cb-deuter {
    --wheelchair: #0072B2;
    --blind:      #56B4E9;
    --general:    #009E73;
    --danger:     #D55E00;
    --warn:       #E69F00;
  }
  body.cb-protan {
    --wheelchair: #0582CA;
    --blind:      #56B4E9;
    --general:    #009E73;
    --danger:     #E69F00;
    --warn:       #F0C000;
  }
  body.cb-tritan {
    --wheelchair: #009E73;
    --blind:      #D55E00;
    --general:    #CC79A7;
    --danger:     #A30000;
    --warn:       #CC79A7;
  }
  body.cb-achro {
    --wheelchair: #1C1C1E;
    --blind:      #444444;
    --general:    #777777;
    --danger:     #1C1C1E;
    --warn:       #555555;
    --bg:         #F0F0F0;
    --border:     #AAAAAA;
    --text:       #000000;
    --muted:      #444444;
  }

  /* ── CB PANEL ── */
  .cb-panel {
    display: none;
    position: fixed;
    top: 56px; left: 0; right: 0;
    z-index: 1100;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    padding: 1rem;
    max-height: 70dvh;
    overflow-y: auto;
  }
  .cb-panel.open { display: block; }
  .cb-panel-title {
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    color: var(--muted); margin-bottom: .75rem;
  }
  .cb-options { display: flex; flex-direction: column; gap: .5rem; }
  .cb-option {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: none; cursor: pointer;
    font-family: inherit; text-align: left;
    transition: border-color .15s, background .15s;
    width: 100%;
  }
  .cb-option:hover { border-color: var(--active); background: var(--bg); }
  .cb-option.active { border-color: var(--active); background: var(--bg); }
  .cb-swatches { display: flex; gap: .3rem; flex-shrink: 0; }
  .cb-swatches span {
    display: inline-block;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.12);
  }
  .cb-label strong { display: block; font-size: .85rem; color: var(--text); }
  .cb-label small { font-size: .74rem; color: var(--muted); line-height: 1.4; }
  .cb-group-label {
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px;
    color: var(--muted); padding: .4rem 0 .2rem;
    border-top: 1px solid var(--border);
    margin-top: .25rem;
  }
  .cb-group-label:first-of-type { border-top: none; margin-top: 0; }
  .btn-cb-tab {
    border: none; background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.75);
    padding: .3rem .65rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: .8rem; font-weight: 500;
    font-family: inherit;
    transition: all .2s;
    display: flex; align-items: center; gap: .3rem;
    margin-left: .25rem;
    border-left: 1px solid rgba(255,255,255,.2);
    padding-left: .7rem;
  }
  .btn-cb-tab:hover, .btn-cb-tab.active {
    background: #fff;
    color: var(--active);
  }

  /* ── PREPREKE TAB ── */
  .btn-obstacles-tab {
    border: none; background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.75);
    padding: .3rem .65rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: .8rem; font-weight: 500;
    font-family: inherit;
    transition: all .2s;
    display: flex; align-items: center; gap: .3rem;
    margin-left: .25rem;
    border-left: 1px solid rgba(255,255,255,.2);
    padding-left: .7rem;
  }
  .btn-obstacles-tab:hover, .btn-obstacles-tab.active {
    background: #fff;
    color: var(--active);
  }
  .obs-tab-count {
    background: rgba(255,255,255,.3);
    border-radius: 99px;
    padding: 0 .35rem;
    font-size: .7rem;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
  }
  .btn-obstacles-tab.active .obs-tab-count {
    background: var(--active);
    color: #fff;
  }
  /* Mobile obstacles overlay */
  #mobile-obs-overlay {
    display: none;
  }
  body.layout-mobile #mobile-obs-overlay {
    display: block;
    position: fixed;
    top: 56px; left: 0; right: 0;
    bottom: var(--sheet-h, 90px);
    background: var(--card);
    z-index: 790;
    overflow-y: auto;
    transform: translateY(-102%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
  }
  body.layout-mobile #mobile-obs-overlay.open {
    transform: translateY(0);
  }

  /* Na mobitelu sakrij tekst u Prepreke tabu */
  body.layout-mobile .btn-obstacles-tab {
    padding: .3rem .5rem; font-size: 1.1rem;
    border-left: 1px solid rgba(255,255,255,.2);
    margin-left: .15rem;
  }
  body.layout-mobile .btn-obstacles-tab .tab-label { display: none; }
  body.layout-mobile .obs-tab-count { display: none; }

  /* ── MOJA LOKACIJA GUMB ── */
  .btn-my-location {
    position: absolute;
    top: 11rem; right: 1rem;
    z-index: 900;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: .45rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    box-shadow: var(--shadow);
    color: var(--text);
    transition: all .2s;
  }
  .btn-my-location.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
  }
  body.layout-mobile .btn-my-location {
    top: 10.3rem; right: .6rem;
    font-size: .8rem; padding: .4rem .65rem;
  }
  body.layout-mobile .my-location-label { display: none; }

  /* Pulsing "you are here" dot */
  @keyframes location-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(37,99,235,.55); }
    70%  { box-shadow: 0 0 0 12px rgba(37,99,235,.0); }
    100% { box-shadow: 0 0 0 0   rgba(37,99,235,.0); }
  }
  .location-dot {
    width: 18px; height: 18px;
    background: #2563eb;
    border: 3px solid #fff;
    border-radius: 50%;
    animation: location-pulse 2s infinite;
  }

  /* Offline banner */
  #offline-banner {
    position: fixed;
    top: calc(56px + env(safe-area-inset-top, 0px));
    left: 0; right: 0;
    z-index: 1200;
    background: #1e293b;
    color: #f1f5f9;
    text-align: center;
    font-size: .82rem;
    font-weight: 600;
    padding: .45rem 1rem;
    letter-spacing: .01em;
  }

  /* Toast poruke */
  .toast {
    position: fixed;
    bottom: 5.5rem; left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    padding: .65rem 1.25rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 500;
    z-index: 9999;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
    text-align: center;
    max-width: calc(100vw - 2rem);
    white-space: normal;
  }
  .toast.show { opacity: 1; }

  /* ── GEAR / SETTINGS PANEL (jedan gumb za sve opcije) ─────────────────── */
  /* Sakrij stare individualne gumbe — sve ide kroz gear panel */
  .btn-mapstyle, .mapstyle-menu,
  .btn-transit, .btn-bajs, .btn-zdravstvo, .btn-pristupacnost,
  .btn-heatmap, .btn-my-location, .btn-guzva { display: none !important; }

  .btn-gear {
    position: absolute;
    top: 1rem; right: 1rem;
    z-index: 950;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 50%;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform .25s, border-color .15s, background .15s;
    font-family: inherit;
    color: var(--text);
    padding: 0;
  }
  .btn-gear:hover { transform: rotate(45deg); border-color: var(--active); }
  .btn-gear.open { background: var(--active); border-color: var(--active); color:#fff; transform: rotate(45deg); }
  .btn-gear .gear-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    background: #ef4444; color: #fff;
    border-radius: 999px;
    font-size: .65rem; font-weight: 700;
    display: none; align-items: center; justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff;
  }
  .btn-gear .gear-badge.visible { display: flex; }
  body.layout-mobile .btn-gear { top: .5rem; right: .5rem; width: 44px; height: 44px; font-size: 1.25rem; }

  .gear-panel {
    position: absolute;
    top: 4.25rem; right: 1rem;
    z-index: 950;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .85rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    display: none;
    flex-direction: column;
    gap: 1rem;
    width: 340px;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    font-family: inherit;
  }
  .gear-panel.visible { display: flex; }
  body.layout-mobile .gear-panel {
    top: 3.4rem; right: .5rem; left: .5rem; width: auto;
    max-height: calc(100vh - 5rem);
  }

  .gear-section { display: flex; flex-direction: column; gap: .4rem; }
  .gear-section-title {
    font-size: .7rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .05em;
    padding: 0 .15rem;
  }

  .gear-mapstyle-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: .45rem;
  }
  .gear-style {
    border: 2px solid var(--border); background: #fff;
    border-radius: 9px;
    padding: .55rem .6rem;
    font-family: inherit; cursor: pointer;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: .15rem; text-align: left;
    transition: border-color .15s, background .15s;
    color: var(--text);
  }
  .gear-style:hover { border-color: var(--active); background: #f9fafb; }
  .gear-style.active { border-color: var(--active); background: var(--active); color: #fff; }
  .gear-style.active .gear-desc { color: rgba(255,255,255,.9); }
  .gear-style .gear-style-head { display: flex; align-items: center; gap: .35rem; }
  .gear-style .gear-icon { font-size: 1.05rem; }
  .gear-style .gear-name { font-weight: 600; font-size: .82rem; }
  .gear-style .gear-desc { font-size: .68rem; color: var(--muted); line-height: 1.25; }

  .gear-toggle {
    border: 1px solid var(--border); background: #fff;
    border-radius: 9px;
    padding: .6rem .7rem;
    font-family: inherit; cursor: pointer;
    display: flex; align-items: center; gap: .7rem;
    text-align: left;
    transition: border-color .15s, background .15s;
    color: var(--text);
    width: 100%;
  }
  .gear-toggle:hover { border-color: var(--active); background: #f9fafb; }
  .gear-toggle.active { border-color: var(--active); background: rgba(34,197,94,.06); }
  .gear-toggle .gear-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1; }
  .gear-toggle .gear-text { flex: 1; display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
  .gear-toggle .gear-name { font-weight: 600; font-size: .85rem; color: var(--text); }
  .gear-toggle .gear-desc { font-size: .7rem; color: var(--muted); line-height: 1.3; }
  .gear-toggle .gear-switch {
    width: 34px; height: 20px; background: #d1d5db; border-radius: 999px;
    position: relative; flex-shrink: 0; transition: background .18s;
  }
  .gear-toggle .gear-switch::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; background: #fff; border-radius: 50%;
    transition: transform .18s; box-shadow: 0 1px 2px rgba(0,0,0,.25);
  }
  .gear-toggle.active .gear-switch { background: var(--active); }
  .gear-toggle.active .gear-switch::after { transform: translateX(14px); }
  .gear-toggle.disabled { opacity: .55; cursor: not-allowed; }
  .gear-toggle.disabled:hover { border-color: var(--border); background: #fff; }

  /* ── LEGEND PANEL (desno ispod gear gumba, legende se slažu jedna ispod druge) ── */
  #legend-panel {
    position: absolute;
    top: 4.25rem;
    right: 1rem;
    z-index: 901;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    width: 220px;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    pointer-events: none;
  }
  #legend-panel > * { pointer-events: auto; }

  .legend-title {
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .2rem;
  }
}

/* ── a11y: fokus vidljiv na svim interaktivnim elementima ──────────────────── */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #2e7d32;
  outline-offset: 2px;
}

/* ── a11y: minimalni touch target (Apple HIG + Material) ───────────────────── */
button,
.mode-tab,
.cb-option,
.device-picker-btn,
.tut-skip,
.tut-next,
.gear-toggle,
.gear-style,
.mapstyle-option,
.transit-filter {
  min-height: 44px;
  min-width:  44px;
}

/* ── GUMB "TRENUTNA LOKACIJA" uz polje polazišta ─────────────────────────── */
.btn-current-loc {
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #64748b;
  padding: .25rem;
  border-radius: 4px;
  min-height: 32px;
  min-width:  32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.btn-current-loc:hover { color: #16a34a; background: #f0fdf4; }

.btn-clear-input {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  padding: .25rem;
  border-radius: 4px;
  min-height: 28px;
  min-width:  28px;
  font-size: 1rem;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.btn-clear-input:hover { color: #ef4444; background: #fef2f2; }
/* Veći touch target na mobitelu */
body.layout-mobile .btn-clear-input { min-height: 44px; min-width: 44px; }

/* ── SAFE AREA PADDING (notch / home indicator) ──────────────────────────── */
@supports (padding: env(safe-area-inset-top)) {
  .header {
    padding-top: max(.5rem, env(safe-area-inset-top));
  }
  .sidebar {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  .tts-bar {
    padding-bottom: max(.5rem, env(safe-area-inset-bottom));
  }
}

/* ── STAT COUNTER (verificirane prepreke) ───────────────────────────────── */
.stat-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .6rem .75rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  margin: .5rem 0;
}
#stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  color: #16a34a;
  line-height: 1;
}
.stat-label {
  font-size: .7rem;
  color: #64748b;
  margin-top: .15rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── LOADING SKELETON (shimmer dok se ruta racuna) ───────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
}
.route-skeleton { height: 3rem; margin: .5rem 0; display: none; }
.route-loading .route-skeleton { display: block; }

/* ── TAMNI NAČIN (dark mode) ─────────────────────────────────────────────── */
body.theme-dark {
  --bg:     #0f172a;
  --card:   #1e293b;
  --border: #334155;
  --text:   #f1f5f9;
  --muted:  #94a3b8;
  --shadow: 0 4px 24px rgba(0,0,0,.50);
  color-scheme: dark;
}

/* Adresni inputi i autocomplete */
body.theme-dark .addr-input      { background: #1e293b; color: #f1f5f9; border-color: #334155; }
body.theme-dark .addr-input::placeholder { color: #64748b; }
body.theme-dark .addr-suggestions { background: #1e293b; border-color: #334155; }
body.theme-dark .addr-suggestions button { color: #f1f5f9; border-color: #334155; }
body.theme-dark .addr-suggestions button:hover { background: #0f172a; }

/* Gumbi na karti (bijela pozadina → tamna) */
body.theme-dark .btn-gear,
body.theme-dark .btn-transit,
body.theme-dark .btn-bajs,
body.theme-dark .btn-zdravstvo,
body.theme-dark .btn-pristupacnost,
body.theme-dark .btn-heatmap,
body.theme-dark .btn-my-location,
body.theme-dark .btn-guzva,
body.theme-dark .btn-mapstyle,
body.theme-dark .tut-help-btn    { background: #1e293b; border-color: #334155; color: #f1f5f9; }

/* Legende (bijela → tamna) */
body.theme-dark .guzva-legend,
body.theme-dark .transit-legend,
body.theme-dark .bajs-legend,
body.theme-dark .zdravstvo-legend,
body.theme-dark .pristupacnost-legend,
body.theme-dark .heatmap-legend,
body.theme-dark .mapstyle-menu   { background: #1e293b; border-color: #334155; color: #f1f5f9; }
body.theme-dark .legend-title    { color: #94a3b8; }
body.theme-dark .transit-filter  { background: #0f172a; color: #94a3b8; border-color: #334155; }
body.theme-dark .transit-filter.active { background: var(--active); color: #fff; border-color: var(--active); }

/* Gear panel */
body.theme-dark .gear-panel      { background: #1e293b; border-color: #334155; }
body.theme-dark .gear-style      { background: #0f172a; border-color: #334155; color: #f1f5f9; }
body.theme-dark .gear-style:hover { background: #1e293b; border-color: var(--active); }
body.theme-dark .gear-style .gear-desc { color: #94a3b8; }
body.theme-dark .gear-toggle     { background: #0f172a; border-color: #334155; color: #f1f5f9; }
body.theme-dark .gear-toggle:hover { background: #1e293b; }
body.theme-dark .gear-toggle .gear-name { color: #f1f5f9; }
body.theme-dark .gear-toggle .gear-switch { background: #475569; }

/* Modal */
body.theme-dark .modal-overlay   { background: rgba(0,0,0,.65); }
body.theme-dark .modal           { background: #1e293b; color: #f1f5f9; }
body.theme-dark .modal select,
body.theme-dark .modal textarea  { background: #0f172a; color: #f1f5f9; border-color: #334155; }
body.theme-dark .modal-coords    { background: #0f172a; color: #94a3b8; }
body.theme-dark .btn-cancel      { background: #1e293b; border-color: #334155; color: #f1f5f9; }

/* Welcome card i hint */
body.theme-dark .welcome-card    { border-color: #334155; }
body.theme-dark .welcome-hint    { background: #0f172a; border-color: #334155; }

/* CB panel */
body.theme-dark .cb-panel        { background: #1e293b; border-color: #334155; }
body.theme-dark .cb-option       { border-color: #334155; color: #f1f5f9; }
body.theme-dark .cb-option:hover { border-color: var(--active); background: #0f172a; }
body.theme-dark .cb-label strong { color: #f1f5f9; }

/* Ruta info, statistika, prepreke */
body.theme-dark .stat            { background: rgba(255,255,255,.05); }
body.theme-dark .compare-result  { background: rgba(255,255,255,.04); }
body.theme-dark .obs-item        { border-color: #334155; }
body.theme-dark .obs-icon        { background: #2d3748; }
body.theme-dark .obs-icon.verified { background: #3d1515; }
body.theme-dark .step            { border-color: #334155; }
body.theme-dark .step.active     { background: #1a2744; border-left-color: #3b82f6; }

/* Device picker i tutorial */
body.theme-dark .device-picker-box,
body.theme-dark .tut-box         { background: #1e293b; color: #f1f5f9; }
body.theme-dark .device-picker-btn { border-color: #334155; color: #f1f5f9; }
body.theme-dark .device-picker-btn:hover { border-color: var(--active); background: #0f172a; }
body.theme-dark .tut-skip        { border-color: #334155; color: #94a3b8; background: #1e293b; }

/* Mobile bottom sheet */
body.theme-dark .sidebar         { border-top-color: #334155; }
body.theme-dark #mobile-obs-overlay { background: #1e293b; border-color: #334155; }
body.theme-dark .mobile-search-trigger { /* zadržava var(--active) -- bez promjene */ }

/* Mapstyle menu opcije */
body.theme-dark .mapstyle-option { color: #f1f5f9; }
body.theme-dark .mapstyle-option:hover { background: #0f172a; }
body.theme-dark .mapstyle-option.active { background: var(--active); color: #fff; }

/* Skeleton shimmer -- tamnija verzija */
body.theme-dark .skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #263446 50%, #1e293b 75%);
  background-size: 200% 100%;
}

/* Avoided info */
body.theme-dark .avoided-info    { background: #0d2010; border-color: #1a4a28; color: #86efac; }
body.theme-dark .avoided-info .avoided-title { color: #86efac; }

/* ── Header i mode tabovi ── */
body.theme-dark header {
  background: #0f172a;
  border-bottom: 2px solid var(--active);
}
body.theme-dark .mode-tabs        { background: rgba(255,255,255,.07); }
body.theme-dark .mode-tab         { color: rgba(255,255,255,.5); }
body.theme-dark .mode-tab.active  { background: var(--active); color: #fff; }
body.theme-dark .btn-cb-tab,
body.theme-dark .btn-obstacles-tab {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.5);
}
body.theme-dark .btn-cb-tab:hover,
body.theme-dark .btn-cb-tab.active,
body.theme-dark .btn-obstacles-tab:hover,
body.theme-dark .btn-obstacles-tab.active {
  background: #fff;
  color: var(--active);
}
body.theme-dark .obs-tab-count    { background: rgba(255,255,255,.2); }

/* ── Leaflet popupi i kontrole ── */
body.theme-dark .leaflet-popup-content-wrapper,
body.theme-dark .leaflet-popup-tip      { background: #1e293b; color: #f1f5f9; }
body.theme-dark .leaflet-popup-content a { color: #93c5fd; }
body.theme-dark .leaflet-control-zoom a {
  background: #1e293b;
  color: #f1f5f9;
  border-color: #334155;
}
body.theme-dark .leaflet-control-zoom a:hover { background: #334155; }
body.theme-dark .leaflet-bar           { border-color: #334155; box-shadow: var(--shadow); }
body.theme-dark .leaflet-control-attribution {
  background: rgba(15,23,42,.75);
  color: #94a3b8;
}
body.theme-dark .leaflet-control-attribution a { color: #93c5fd; }

/* ── SPEECH LOG PANEL ────────────────────────────────────────────────────── */
#stt-log-panel {
  position: fixed;
  bottom: 80px;
  right: 12px;
  width: min(340px, calc(100vw - 24px));
  max-height: 55vh;
  background: rgba(10, 16, 12, 0.96);
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: 14px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', monospace, sans-serif;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}
#stt-log-panel[hidden] { display: none; }

#stt-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(74, 222, 128, 0.15);
  font-size: 0.75rem;
  font-weight: 600;
  color: #4ade80;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
#stt-log-header button {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
}
#stt-log-header button:hover { color: #d1d5db; background: rgba(255,255,255,0.08); }

#stt-log-entries {
  overflow-y: auto;
  padding: 6px 0;
  flex: 1;
  min-height: 60px;
}

.stt-entry {
  display: grid;
  grid-template-columns: 52px 18px 1fr;
  gap: 4px;
  align-items: start;
  padding: 4px 12px;
  font-size: 0.72rem;
  line-height: 1.4;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.stt-entry:last-child { border-bottom: none; }
.stt-time  { color: #4b5563; font-variant-numeric: tabular-nums; }
.stt-icon  { text-align: center; }
.stt-msg   { color: #d1d5db; word-break: break-word; }

/* Tip boje */
.stt-entry.rec      .stt-msg { color: #60a5fa; }
.stt-entry.transcript .stt-msg { color: #4ade80; font-weight: 600; }
.stt-entry.action   .stt-msg { color: #fbbf24; }
.stt-entry.wake     .stt-msg { color: #c084fc; }
.stt-entry.error    .stt-msg { color: #f87171; }
.stt-entry.warn     .stt-msg { color: #fb923c; }
.stt-entry.info     .stt-msg { color: #94a3b8; }

/* Toggle gumb */
#stt-log-toggle {
  position: fixed;
  bottom: 36px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(10, 16, 12, 0.92);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: #4ade80;
  font-size: 1rem;
  cursor: pointer;
  z-index: 3001;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
#stt-log-toggle[hidden] { display: none; }
#stt-log-toggle.has-new {
  border-color: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
}