:root {
  --paper: #f8f5ec;
  --ink: #1f2933;
  --muted: #69737d;
  --water: #8bbbd9;
  --border: #d6cab3;
}

* { box-sizing: border-box; }
body { margin: 0; background: #ded7c8; color: var(--ink); font-family: Inter, "Segoe UI", system-ui, sans-serif; }
.poster { width: min(100vw, 1120px); margin: 0 auto; min-height: 100vh; background: var(--paper); box-shadow: 0 20px 80px #0003; padding: 34px 42px 48px; }
.masthead { display: grid; grid-template-columns: 1fr; gap: 6px; border-bottom: 5px solid var(--ink); padding-bottom: 18px; margin-bottom: 18px; }
.kicker { margin: 0; color: #a33d2e; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: .92; letter-spacing: -.06em; }
.subtitle { margin: 0; color: var(--muted); max-width: 760px; font-size: 1.05rem; }
.map-frame { position: relative; overflow: auto; border-radius: 18px; background: var(--paper); }
.zoom-controls { position: sticky; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; margin: 12px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 999px; background: #fffaf1e8; color: var(--ink); font-size: .84rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.zoom-controls input { accent-color: #d3382f; inline-size: 120px; }
.zoom-readout { min-width: 176px; }
.rail-map { width: 100%; min-width: 760px; height: auto; display: block; background: var(--paper); }
.country { fill: #fbf8f0; stroke: var(--border); stroke-width: 5; }
.river { fill: none; stroke: var(--water); stroke-width: 8; stroke-linecap: round; opacity: .65; }
.river-label { fill: #6b9dbb; font-size: 23px; font-style: italic; font-weight: 700; opacity: .8; }
.route { fill: none; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.routes .route { filter: drop-shadow(0 1px 0 #fff); }
.r1 { stroke: #d3382f; }
.r2 { stroke: #245fbe; }
.r3 { stroke: #f2a900; }
.r4 { stroke: #7b4bb2; }
.r5 { stroke: #008c72; }
.r6 { stroke: #e46c2f; }
.r7 { stroke: #00a0c6; }
.r8 { stroke: #b04a78; }
.r9 { stroke: #5c8f2d; }
.r10 { stroke: #7c6b52; }
.r11 { stroke: #c23b73; }
.r12 { stroke: #2d8bd4; }
.r13 { stroke: #7463b6; }
.r14 { stroke: #009f5d; }
.r15 { stroke: #cc7a00; }
.stations circle { fill: var(--paper); stroke: var(--ink); stroke-width: 4.5; }
.stations .halo { fill: var(--paper); stroke: var(--ink); stroke-width: 3; opacity: .96; }
.stations text { fill: var(--ink); font-size: 22px; font-weight: 700; paint-order: stroke; stroke: var(--paper); stroke-width: 8px; stroke-linejoin: round; filter: url(#label-halo); }
.stations .tier1 text { font-size: 40px; font-weight: 950; letter-spacing: -.035em; }
.stations .tier1 circle:not(.halo) { stroke-width: 7.5; }
.stations .tier2 text { font-size: 31px; font-weight: 900; }
.stations .tier2 circle:not(.halo) { stroke-width: 6.5; }
.stations .tier3 text { font-size: 23px; font-weight: 800; }
.leader { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; opacity: .72; }
.belgrade-label text { font-size: 23px; font-weight: 850; }
.zoom-secondary, .zoom-all { opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.map-frame[data-zoom="120"] .zoom-secondary,
.map-frame[data-zoom="160"] .zoom-secondary,
.map-frame[data-zoom="160"] .zoom-all { opacity: 1; pointer-events: auto; }
.intl text { fill: #57616b; font-size: 30px; font-weight: 900; letter-spacing: .02em; }
.legend rect { fill: #fffaf1; stroke: var(--ink); stroke-width: 3; }
.legend path { fill: none; stroke-width: 10; stroke-linecap: round; }
.legend text { fill: var(--ink); font-size: 22px; font-weight: 700; }
.legend .legend-title { font-size: 28px; font-weight: 900; }
@media (max-width: 720px) { .poster { padding: 22px 14px 30px; } .zoom-controls { align-items: flex-start; border-radius: 16px; flex-direction: column; font-size: .72rem; } }
.atlas-shell { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.services-panel { position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow: auto; border: 3px solid var(--ink); border-radius: 22px; background: #fffaf1; padding: 18px; box-shadow: 0 10px 30px #0000001f; }
.tab-header { display: flex; border-bottom: 3px solid var(--ink); margin: -4px -4px 16px; }
.tab { border: 0; border-radius: 14px 14px 0 0; background: var(--ink); color: var(--paper); padding: 10px 16px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.services-tab h2 { margin: 0 0 12px; font-size: 1.45rem; letter-spacing: -.03em; }
.service-search-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: .82rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
#service-search { width: 100%; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); padding: 10px 12px; font: inherit; font-weight: 750; }
.service-count { margin: 10px 0; color: var(--muted); font-size: .9rem; font-weight: 800; }
.service-list { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.service-card { width: 100%; display: grid; gap: 3px; text-align: left; border: 2px solid #d8cdb7; border-radius: 14px; background: #fff; color: var(--ink); padding: 10px 12px; cursor: pointer; }
.service-card:hover, .service-card.selected { border-color: #d3382f; box-shadow: inset 5px 0 0 #d3382f; }
.service-number { font-size: 1.1rem; font-weight: 950; }
.service-name { font-weight: 800; }
.service-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .84rem; font-weight: 800; }
.badge { display: inline-block; border-radius: 999px; background: #1f2933; color: var(--paper); padding: 3px 8px; font-size: .72rem; font-weight: 950; letter-spacing: .04em; text-transform: uppercase; }
.service-detail { border-top: 3px solid var(--ink); padding-top: 14px; }
.service-detail h3 { margin: 0 0 4px; font-size: 1.55rem; }
.detail-route { margin: 0 0 10px; font-weight: 900; }
.stop-list { margin: 12px 0; padding-left: 22px; }
.stop-list li { margin: 6px 0; font-weight: 850; }
.stop-list span { display: block; color: var(--muted); font-size: .78rem; font-weight: 700; }
.service-note { color: var(--muted); font-size: .82rem; font-weight: 800; }
.service-selected .routes .route { opacity: .18; }
.service-selected .routes .route.selected-route { opacity: 1; stroke-width: 15; }
.service-path { fill: none; stroke: #111827; stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; opacity: .18; pointer-events: none; }
.service-stop { fill: #fffaf1; stroke: #111827; stroke-width: 4; filter: drop-shadow(0 2px 0 #ffffff); }
.transfer-stop { stroke-width: 6; }
.service-train-label { fill: #111827; stroke: #fffaf1; stroke-width: 7; paint-order: stroke; font-size: 30px; font-weight: 950; letter-spacing: .02em; }
@media (max-width: 1040px) { .atlas-shell { grid-template-columns: 1fr; } .services-panel { position: static; max-height: none; } }
.show-all-services { width: 100%; margin-top: 8px; border: 2px solid var(--ink); border-radius: 12px; background: var(--ink); color: var(--paper); padding: 9px 12px; font-weight: 950; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.service-selected .service-card:not(.selected) { opacity: .15; }
.service-selected .routes .route { opacity: .15; }
.service-selected .routes .route.selected-route { opacity: .15; }
.service-path { opacity: .92; stroke: #111827; stroke-width: 16; }
.terminal-label { fill: #111827; stroke: #fffaf1; stroke-width: 7; paint-order: stroke; font-size: 24px; font-weight: 950; }
.map-frame { overflow: hidden; }
.rail-map { min-width: 0; max-height: min(78vh, 940px); object-fit: contain; }
.service-card .service-name { font-size: 1.02rem; }
.service-card .service-number { color: var(--muted); font-size: .92rem; }
.hidden { display: none !important; }
.clear-search, .find-route { width: 100%; margin-top: 8px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); color: var(--ink); padding: 9px 12px; font-weight: 950; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.journey-tab select, #journey-date { width: 100%; margin: 0 0 10px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); padding: 10px 12px; font: inherit; font-weight: 750; }
.journey-result { border-top: 3px solid var(--ink); margin-top: 14px; padding-top: 12px; }
.journey-result h3 { margin: 0 0 8px; }
.journey-card { border: 2px solid #d8cdb7; border-radius: 14px; background: #fff; padding: 12px; }
.journey-card h3 { margin: 0 0 8px; font-size: 1.2rem; }
.tab:not(.active) { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-bottom: 0; }
.no-results { border: 2px dashed #d8cdb7; border-radius: 14px; background: #fff; color: var(--muted); padding: 12px; font-weight: 850; }
.journey-card { display: block; width: 100%; text-align: left; margin-top: 10px; color: var(--ink); cursor: pointer; }
.journey-card.selected { border-color: #d3382f; box-shadow: inset 5px 0 0 #d3382f; }

.journey-date-control { margin: 0 0 10px; }
.date-shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.date-shortcuts button { border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); padding: 7px 8px; font-size: .72rem; font-weight: 950; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; }
.date-summary, .search-stats { border: 2px solid #d8cdb7; border-radius: 14px; background: #fff; margin: 10px 0; padding: 10px 12px; }
.date-summary p, .search-stats p { margin: 4px 0; color: var(--muted); font-size: .86rem; font-weight: 800; }