* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #0b1d26; color: #e8f4f8; }
header { padding: 14px 16px; background: linear-gradient(135deg, #0b3d5c, #0e5a7a); }
.brand { font-weight: 800; font-size: 1.25rem; }
.subtitle { color: #9fd4e8; font-size: 0.85rem; }
main { max-width: 860px; margin: 0 auto; padding: 12px; }
#map { height: 420px; border-radius: 12px; z-index: 1; }
.panel { margin-top: 12px; }
.journey-ctrl { display: flex; gap: 8px; margin-bottom: 10px; }
.btn-primary { flex: 1; background: #0288c7; color: #fff; border: none; border-radius: 10px;
  padding: 14px; font-size: 1.05rem; font-weight: 700; cursor: pointer; }
.btn-ghost { background: none; color: #9fd4e8; border: 1px solid #2a5a73; border-radius: 10px;
  padding: 14px 18px; cursor: pointer; }
.hidden { display: none !important; }
.muted { color: #7ba3b5; } .small { font-size: 0.82rem; }
.progress-bar { height: 10px; background: #14394e; border-radius: 5px; overflow: hidden; margin: 8px 0; }
#journeyFill { height: 100%; width: 0%; background: #4dd0ff; transition: width 0.3s; }
#stopInfo .stop-card { background: #10293a; border: 1px solid #1e4a63; border-radius: 10px; padding: 14px; margin: 10px 0; }
#stopInfo .stop-card h3 { margin: 0 0 8px; color: #4dd0ff; }
.stops h3, .fakta h3 { color: #4dd0ff; margin: 16px 0 8px; }
#stopList { display: flex; flex-direction: column; gap: 6px; }
.stop-item { background: #10293a; border: 1px solid #1e4a63; border-radius: 8px; padding: 10px 12px;
  cursor: pointer; font-size: 0.95rem; }
.stop-item:hover { border-color: #4dd0ff; }
#faktaList .fakta-item { background: #0e2230; border-left: 3px solid #4dd0ff; padding: 8px 12px;
  margin-bottom: 6px; font-size: 0.9rem; border-radius: 0 8px 8px 0; }