:root {
  --panel-bg: rgba(255,255,255,0.96);
  --panel-shadow: 0 10px 24px rgba(0,0,0,0.15);
  --btn:#2563eb;
  --btn-dark:#111827;
}
html, body, #map { height: 100%; margin: 0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

#streetBanner{
  position:fixed; left:50%; bottom:160px; transform:translateX(-50%);
  z-index:1001; background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(59,130,246,.95));
  color:#fff; padding:10px 14px; border-radius:14px; box-shadow: 0 12px 28px rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.35); max-width:92vw; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; font-weight:800; font-size:15px; letter-spacing:.2px; pointer-events:none;
  opacity:0; transition: opacity .25s ease, transform .25s ease;
}
#streetBanner.show{ opacity:1; transform:translateX(-50%); }

#controls {
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  z-index:1000; width:min(1180px,96vw); display:flex; justify-content:center; align-items:center;
  gap:10px; background:var(--panel-bg); padding:10px 12px; border-radius:14px; box-shadow:var(--panel-shadow);
  backdrop-filter:blur(4px); flex-wrap:wrap;
}
.btn{ background:var(--btn); color:#fff; border:none; border-radius:12px; padding:10px 14px; cursor:pointer; font-size:14px; min-width:84px; }
.btn.secondary{ background:var(--btn-dark); }
.checkbox,.mode{ display:flex; align-items:center; gap:6px; font-size:13px; color:#374151; }
#speedWrap,#durWrap{ display:flex; align-items:center; gap:6px; }
input[type="range"]{ width:180px; }
.speedVal{ font-size:13px; font-weight:600; min-width:60px; text-align:right; }
.label-small{ font-size:13px; color:#374151; }
.select{ padding:8px 10px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; font-size:13px; }

.badge{
  display:inline-block; padding:7px 12px; border-radius:999px; color:#fff; font-weight:800; font-size:14px;
  letter-spacing:.4px; text-shadow:0 1px 0 rgba(0,0,0,.3); box-shadow:0 8px 18px rgba(0,0,0,.25);
  border:2px solid rgba(255,255,255,.75);
}
.start-badge{background:#10b981}
.goal-badge{background:#ef4444}
.km-badge{
  color:#fff; padding:4px 14px; border-radius:8px; font-weight:800; font-size:12px;
  box-shadow:0 6px 14px rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.45);
}
.km-out{ background:#2563eb; }
.km-back{ background:#10b981; }

.logo-control{
  position:absolute; right:14px; top:14px; z-index:1002; backdrop-filter:blur(4px);
  border-radius:10px; box-shadow:0 1px 6px rgba(0,0,0,.2); padding:10px; background:rgba(255,255,255,0);
}
.logo-control img{ display:block; max-height:48px; width:auto; }

#coordDebug{
  position:absolute; top:70px; left:14px; z-index:1003; background:rgba(17,24,39,0.92); color:#e5e7eb;
  font-size:12px; padding:8px 10px; border-radius:8px; box-shadow:0 8px 18px rgba(0,0,0,0.35);
  max-width:260px; line-height:1.4; display:none;
}
#coordDebug b { color:#facc15; }


/* OKREPNE STANICE */

.aid-marker{

height:26px;
min-width:26px;

padding:0 6px;

border-radius:13px;

display:flex;
align-items:center;
justify-content:center;

font-size:13px;
font-weight:600;

color:white;

box-shadow:0 2px 6px rgba(0,0,0,0.25);

cursor:pointer;

}

/* tipovi */

.aid-water{ background:#2563eb; }

.aid-iso{ background:#10b981; }

.aid-gel{ background:#f59e0b; }

.aid-med{ background:#ef4444; }