:root {
  color-scheme: dark;
  --bg: #0b1111;
  --panel: #14201f;
  --panel-2: #192826;
  --ink: #f5f1e7;
  --muted: #9eaaa6;
  --line: rgba(255,255,255,.1);
  --green: #60d394;
  --green-dark: #173f32;
  --sand: #e5bd72;
  --danger: #ff7d7d;
  --shadow: 0 18px 50px rgba(0,0,0,.24);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--ink); background:
  radial-gradient(circle at 15% -10%, rgba(54,132,102,.26), transparent 35rem),
  radial-gradient(circle at 110% 20%, rgba(229,189,114,.1), transparent 28rem), var(--bg); }
button, a { font: inherit; }

.topbar, main, footer { width: min(920px, calc(100% - 28px)); margin-inline: auto; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 26px 2px 18px; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(1.55rem, 5vw, 2.25rem); letter-spacing: -.04em; }
h2 { font-size: clamp(1.12rem, 3.7vw, 1.42rem); letter-spacing: -.025em; }
.eyebrow, .label { color: var(--green); text-transform: uppercase; font-size: .71rem; font-weight: 800; letter-spacing: .12em; margin-bottom: 6px; }
.mode-badge { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.035); font-size: .76rem; font-weight: 700; }
.mode-badge.live { color: #baf3d2; border-color: rgba(96,211,148,.38); background: rgba(96,211,148,.1); }

main { display: grid; gap: 14px; }
.card { background: linear-gradient(150deg, rgba(25,40,38,.98), rgba(18,30,29,.98)); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 20px; overflow: hidden; }
.hero { background: linear-gradient(135deg, #1b4335, #152b27 58%, #282719); }
.hero-top, .section-heading { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.hero h2 { font-size: clamp(1.35rem, 5vw, 2rem); }
.muted { color: var(--muted); margin-top: 7px; line-height: 1.48; }
.countdown { flex: 0 0 auto; color: var(--sand); font-weight: 850; font-variant-numeric: tabular-nums; font-size: clamp(1.15rem, 4vw, 1.6rem); }
.progress-track { height: 8px; border-radius: 99px; background: rgba(0,0,0,.24); margin: 25px 0 10px; overflow: hidden; }
.progress-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--green), var(--sand)); border-radius: inherit; transition: width .6s ease; }
.hero-foot { display: flex; justify-content: space-between; gap: 10px; color: #bac4c0; font-size: .73rem; }
.hero-foot span:last-child { text-align: right; }
.hero-foot b { color: var(--sand); font-variant-numeric: tabular-nums; }

.love-note { display: flex; align-items: center; gap: 15px; background: linear-gradient(135deg, rgba(82,37,53,.96), rgba(29,38,35,.98)); }
.heart { flex: 0 0 auto; width: 47px; height: 47px; display: grid; place-items: center; border-radius: 50%; color: #ff98ad; background: rgba(255,152,173,.12); font-size: 1.35rem; box-shadow: 0 0 0 7px rgba(255,152,173,.045); }
.love-note h2 { transition: opacity .25s ease; }

.sender { border-color: rgba(96,211,148,.26); }
.status-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(96,211,148,.1); margin: 7px; }
.status-dot.off { background: #697572; box-shadow: 0 0 0 6px rgba(255,255,255,.05); }
.status-dot.error { background: var(--danger); box-shadow: 0 0 0 6px rgba(255,125,125,.1); }
.actions { display: flex; gap: 10px; margin-top: 17px; }
.actions.two > * { flex: 1; }
.primary, .secondary { min-height: 46px; padding: 0 17px; border-radius: 13px; border: 0; font-weight: 800; cursor: pointer; text-align: center; }
.primary { color: #092017; background: var(--green); }
.secondary { color: var(--ink); background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.link-button { display: inline-grid; place-items: center; text-decoration: none; }

.map-card { padding: 0; }
.map-heading { padding: 20px 20px 14px; }
.icon-button { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--ink); font-size: 1.35rem; cursor: pointer; }
#map { width: 100%; height: clamp(330px, 52vh, 470px); min-width: 0; background: #d9ded5; }
#map .leaflet-tile { max-width: none !important; max-height: none !important; }
#map .leaflet-tile-pane { z-index: 200; }
.map-note { color: var(--muted); padding: 11px 20px 15px; font-size: .72rem; line-height: 1.45; }
.leaflet-container { font-family: inherit; }
.live-marker { width: 18px; height: 18px; border: 3px solid white; border-radius: 50%; background: #1b7dff; box-shadow: 0 3px 14px rgba(0,50,120,.48); }
.estimate-marker { width: 18px; height: 18px; border: 3px solid white; border-radius: 50%; background: var(--sand); box-shadow: 0 0 0 7px rgba(229,189,114,.2), 0 3px 14px rgba(0,0,0,.4); animation: estimatePulse 2s ease-in-out infinite; }
.station-pin { width: 13px; height: 13px; border: 3px solid white; border-radius: 50%; background: #173f32; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
@keyframes estimatePulse { 50% { box-shadow: 0 0 0 12px rgba(229,189,114,0), 0 3px 14px rgba(0,0,0,.4); } }

.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.metric { padding: 16px; min-height: 105px; display: flex; flex-direction: column; justify-content: space-between; }
.metric span, .metric small { color: var(--muted); font-size: .71rem; }
.metric strong { font-size: 1.02rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.metric small { margin-top: -6px; }
.total-time { color: var(--sand); font-size: .82rem; font-weight: 800; white-space: nowrap; margin-top: 6px; }

.timeline { list-style: none; margin: 22px 0 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 36px 1fr; gap: 13px; position: relative; padding-bottom: 23px; opacity: .6; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 34px; bottom: 2px; width: 2px; background: var(--line); }
.timeline li.active, .timeline li.done { opacity: 1; }
.timeline li.done .rail-icon { background: var(--green-dark); color: var(--green); }
.timeline li.active .rail-icon { background: var(--green); color: #0a1b15; box-shadow: 0 0 0 6px rgba(96,211,148,.1); }
.rail-icon { width: 35px; height: 35px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.07); font-size: .76rem; font-weight: 900; z-index: 1; }
.rail-icon.metro { background: #1d62b4; color: white; }
.rail-icon.finish { border-radius: 50%; }
.timeline p { color: var(--sand); font-size: .83rem; margin: 3px 0; }
.timeline small { color: var(--muted); }

.detail-list { display: grid; gap: 10px; margin-top: 19px; }
.detail-list article { display: grid; grid-template-columns: 88px 1fr; gap: 13px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid transparent; }
.detail-list article.warning-detail { border-color: rgba(229,189,114,.22); background: rgba(229,189,114,.07); }
.detail-time { color: var(--sand); font-size: .78rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.detail-list p { color: var(--muted); font-size: .8rem; line-height: 1.47; margin-top: 5px; }
.detail-list b { color: var(--sand); }

.transfer-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 19px 0; }
.transfer-summary div { background: rgba(255,255,255,.045); border-radius: 13px; padding: 12px 10px; }
.transfer-summary strong, .transfer-summary span { display: block; }
.transfer-summary strong { color: var(--sand); font-size: .95rem; }
.transfer-summary span { color: var(--muted); font-size: .66rem; margin-top: 4px; line-height: 1.25; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.steps li > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; background: #1d62b4; font-size: .72rem; font-weight: 900; }
.steps p { line-height: 1.45; font-size: .88rem; padding-top: 3px; }
.notice { margin-top: 14px; padding: 12px 13px; border-radius: 12px; background: rgba(229,189,114,.09); border: 1px solid rgba(229,189,114,.16); color: #e8ddc9; line-height: 1.45; }
.notice.small { font-size: .76rem; }
.iphone-note { border-color: rgba(96,211,148,.16); background: rgba(96,211,148,.06); }
.notice.danger { color: #ffd0d0; border-color: rgba(255,125,125,.22); background: rgba(255,125,125,.08); }
.compact { padding-block: 16px; }
.privacy p { color: var(--muted); font-size: .76rem; line-height: 1.5; }
.privacy strong { color: var(--ink); }
.hidden { display: none !important; }
.demo-controls { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: 17px; }
.demo-controls label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.demo-controls select { color: var(--ink); background: rgba(255,255,255,.08); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.demo-controls button { min-height: 42px; }
.demo-state { margin-top: 12px; color: var(--sand); font-size: .78rem; font-variant-numeric: tabular-nums; }
.live-board { grid-column: 1 / -1; }
footer { color: #77827f; text-align: center; padding: 24px 0 34px; font-size: .73rem; }

@media (min-width: 720px) {
  main { grid-template-columns: 1.2fr .8fr; }
.hero, .love-note, .sender, .map-card, .metrics, .privacy { grid-column: 1 / -1; }
  .card { padding: 24px; }
  .map-card { padding: 0; }
  .map-heading { padding: 22px 24px 15px; }
  .map-note { padding-inline: 24px; }
  .metrics { grid-template-columns: repeat(4, 1fr); }
  .transfer { grid-column: 2; }
}

@media (max-width: 470px) {
  .topbar, main, footer { width: min(100% - 18px, 920px); }
  .card { border-radius: 17px; padding: 17px; }
  .map-card { padding: 0; }
  .map-heading { padding: 17px 17px 13px; }
  .map-note { padding-inline: 17px; }
  .countdown { font-size: 1.03rem; }
  .hero-top { flex-direction: column; }
  .countdown { align-self: flex-start; }
  .actions.two { display: grid; }
  .transfer-summary { grid-template-columns: 1fr; }
  .transfer-summary div { display: flex; justify-content: space-between; align-items: center; }
  .transfer-summary span { text-align: right; max-width: 55%; }
  .detail-list article { grid-template-columns: 1fr; gap: 5px; }
}