:root {
  color-scheme: light dark;
  --background: light-dark(#f7f8f6, #111311);
  --foreground: light-dark(#171a17, #f1f3ef);
  --card: light-dark(#ffffff, #1b1e1b);
  --card-foreground: light-dark(#171a17, #f1f3ef);
  --muted: light-dark(#e9ece7, #282c28);
  --muted-foreground: light-dark(#5f685f, #afb7af);
  --primary: light-dark(#171a17, #f1f3ef);
  --primary-foreground: light-dark(#ffffff, #171a17);
  --accent: light-dark(#e8ece7, #2b302b);
  --accent-foreground: light-dark(#171a17, #f1f3ef);
  --border: light-dark(#cbd1ca, #424842);
  --ring: light-dark(#687268, #aeb7ae);
  --blue: light-dark(#2878d0, #55a4f4);
  --orange: light-dark(#dd5a13, #ff8a45);
  --green: light-dark(#159447, #35c86c);
  --red: light-dark(#dc3535, #ff6666);
  --yellow: light-dark(#d4ad00, #f6d443);
  --font-size-base: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px;
  background: var(--background);
  color: var(--foreground);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.45;
}

main {
  width: min(1180px, 100%);
  margin: 0 auto;
}

button { font: inherit; }

.btn {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
}

.btn:hover { background: var(--accent); }
.btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary); }
.btn-ghost { border-color: transparent; }

.card {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--card-foreground);
}

.text-muted { color: var(--muted-foreground); }
.text-small { font-size: 12px; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.viz-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-foreground);
  font-size: 12px;
  white-space: nowrap;
}

i[data-lucide] {
  display: inline-flex;
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  body { padding: 8px; }
  .btn { min-height: 40px; }
}

#varazdin-bus-map {
      color: var(--foreground);
      background: transparent;
      width: 100%;
    }
    #varazdin-bus-map .map-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }
    #varazdin-bus-map .map-title h2 {
      margin: 0 0 4px;
    }
    #varazdin-bus-map .map-title p {
      margin: 0;
    }
    #varazdin-bus-map .map-actions,
    #varazdin-bus-map .line-controls {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    #varazdin-bus-map .map-actions .btn {
      min-height: 34px;
      padding: 5px 9px;
      font-size: 13px;
    }
    #varazdin-bus-map .line-controls {
      margin-bottom: 12px;
    }
    #varazdin-bus-map .line-control {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    #varazdin-bus-map .line-swatch,
    #varazdin-bus-map .detail-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--line-color);
      flex: 0 0 auto;
    }
    #varazdin-bus-map .line-1 { --line-color: var(--yellow); }
    #varazdin-bus-map .line-2 { --line-color: var(--red); }
    #varazdin-bus-map .line-3 { --line-color: var(--blue); }
    #varazdin-bus-map .line-4 { --line-color: var(--orange); }
    #varazdin-bus-map .line-5 { --line-color: var(--green); }
    #varazdin-bus-map .detail-card {
      position: absolute;
      z-index: 10;
      top: 12px;
      right: auto;
      bottom: auto;
      left: 12px;
      width: fit-content;
      max-width: min(560px, calc(100% - 24px));
      min-height: 0;
      margin: 0;
      padding: 9px 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      box-shadow: 0 8px 24px color-mix(in srgb, var(--foreground) 14%, transparent);
    }
    #varazdin-bus-map .detail-card strong {
      font-weight: 500;
    }
    #varazdin-bus-map .detail-lines {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    #varazdin-bus-map .detail-line {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }
    #varazdin-bus-map .map-wrap {
      position: relative;
      width: 100%;
      height: clamp(500px, 67vw, 700px);
      overflow: hidden;
      border-radius: 12px;
      background: color-mix(in srgb, var(--muted) 42%, transparent);
    }
    #varazdin-bus-map #vbm-svg {
      display: block;
      width: 100%;
      height: 100%;
      touch-action: none;
    }
    #varazdin-bus-map .road {
      fill: none;
      stroke: var(--border);
      vector-effect: non-scaling-stroke;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    #varazdin-bus-map .road-primary { stroke-width: 2.1; opacity: .78; }
    #varazdin-bus-map .road-secondary { stroke-width: 1.7; opacity: .72; }
    #varazdin-bus-map .road-tertiary { stroke-width: 1.25; opacity: .62; }
    #varazdin-bus-map .road-unclassified { stroke-width: .85; opacity: .48; }
    #varazdin-bus-map .road-residential { stroke-width: .65; opacity: .38; }
    #varazdin-bus-map .route-halo,
    #varazdin-bus-map .route-line {
      fill: none;
      vector-effect: non-scaling-stroke;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: opacity 160ms ease;
    }
    #varazdin-bus-map .route-halo {
      stroke: var(--background);
      stroke-width: 8px;
      opacity: .9;
    }
    #varazdin-bus-map .route-line {
      stroke: var(--line-color);
      stroke-width: 4.5px;
      opacity: .9;
    }
    #varazdin-bus-map .route-group.is-muted .route-halo { opacity: .1; }
    #varazdin-bus-map .route-group.is-muted .route-line { opacity: .08; }
    #varazdin-bus-map .stop-node {
      transition: opacity 160ms ease;
    }
    #varazdin-bus-map .stop-node.is-muted {
      opacity: .14;
    }
    #varazdin-bus-map .stop-hit {
      fill: transparent;
      stroke: none;
    }
    #varazdin-bus-map .stop-mark {
      fill: var(--card);
      stroke: var(--foreground);
      stroke-width: 1.5;
      vector-effect: non-scaling-stroke;
    }
    #varazdin-bus-map .stop-node.is-hub .stop-mark {
      fill: var(--foreground);
      stroke: var(--card);
      stroke-width: 2.5;
    }
    #varazdin-bus-map .stop-membership {
      fill: var(--line-color);
      stroke: var(--background);
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
    }
    #varazdin-bus-map .stop-label {
      display: none;
      fill: var(--foreground);
      stroke: var(--background);
      stroke-width: 3.5px;
      paint-order: stroke;
      stroke-linejoin: round;
      font-size: 11px;
      font-weight: 500;
      pointer-events: none;
    }
    #varazdin-bus-map .stop-node.show-label .stop-label {
      display: block;
    }
    #varazdin-bus-map .live-status {
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    #varazdin-bus-map .live-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--green);
      flex: 0 0 auto;
    }
    #varazdin-bus-map .live-status.is-off .live-dot {
      background: var(--muted-foreground);
    }
    #varazdin-bus-map .live-clock {
      font-weight: 500;
    }
    #varazdin-bus-map .bus-node {
      transition: opacity 160ms ease;
    }
    #varazdin-bus-map .bus-node.is-muted {
      opacity: .12;
      pointer-events: none;
    }
    #varazdin-bus-map .bus-hit {
      fill: transparent;
      stroke: none;
    }
    #varazdin-bus-map .bus-marker {
      fill: var(--card);
      stroke: var(--line-color);
      stroke-width: 4px;
      vector-effect: non-scaling-stroke;
    }
    #varazdin-bus-map .bus-number {
      fill: var(--card-foreground);
      font-size: 12px;
      font-weight: 500;
      text-anchor: middle;
      dominant-baseline: central;
      pointer-events: none;
    }
    #varazdin-bus-map .bus-direction {
      fill: var(--line-color);
      stroke: var(--background);
      stroke-width: 1.5px;
      vector-effect: non-scaling-stroke;
      pointer-events: none;
    }
    #varazdin-bus-map .user-accuracy {
      fill: color-mix(in srgb, var(--blue) 14%, transparent);
      stroke: var(--blue);
      stroke-width: 1px;
      vector-effect: non-scaling-stroke;
      pointer-events: none;
    }
    #varazdin-bus-map .user-marker-ring {
      fill: var(--card);
      stroke: var(--blue);
      stroke-width: 3px;
      vector-effect: non-scaling-stroke;
      pointer-events: none;
    }
    #varazdin-bus-map .user-marker-core {
      fill: var(--blue);
      pointer-events: none;
    }
    #varazdin-bus-map .map-footer {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 8px;
    }
    @media (max-width: 560px) {
      #varazdin-bus-map .map-header {
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        margin-bottom: 8px;
      }
      #varazdin-bus-map .map-title {
        min-width: 0;
        flex: 1 1 auto;
      }
      #varazdin-bus-map .map-title h2 {
        font-size: 20px;
        line-height: 1.15;
      }
      #varazdin-bus-map .map-title p {
        font-size: 12px;
        line-height: 1.3;
      }
      #varazdin-bus-map .map-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 4px;
      }
      #varazdin-bus-map .map-actions .btn {
        width: 38px;
        min-height: 38px;
        padding: 0;
        border-radius: 9px;
      }
      #varazdin-bus-map .map-actions .action-label {
        display: none;
      }
      #varazdin-bus-map .live-status {
        gap: 6px;
        margin-bottom: 8px;
        font-size: 13px;
      }
      #varazdin-bus-map .live-location {
        display: none;
      }
      #varazdin-bus-map .line-controls {
        flex-wrap: nowrap;
        gap: 6px;
        margin: 0 0 8px;
        padding-bottom: 2px;
        overflow-x: auto;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
      }
      #varazdin-bus-map .line-controls::-webkit-scrollbar {
        display: none;
      }
      #varazdin-bus-map .line-control {
        min-height: 38px;
        padding: 6px 10px;
        flex: 0 0 auto;
        font-size: 13px;
      }
      #varazdin-bus-map .map-wrap {
        height: max(340px, calc(100dvh - 160px));
        min-height: 340px;
        border-radius: 10px;
      }
      #varazdin-bus-map .detail-card {
        align-items: flex-start;
        top: 8px;
        right: auto;
        bottom: auto;
        left: 8px;
        max-width: calc(100% - 16px);
        padding: 8px 10px;
        gap: 7px;
        font-size: 13px;
        line-height: 1.35;
      }
      #varazdin-bus-map .detail-card .viz-badge {
        font-size: 10px;
      }
      #varazdin-bus-map .map-footer {
        gap: 2px 10px;
        margin-top: 6px;
        font-size: 11px;
      }
    }