:root {
  --bg: #0b1020;
  --bg-grad-1: #0b1020;
  --bg-grad-2: #141a33;
  --panel: rgba(22, 28, 56, 0.72);
  --panel-solid: #161c38;
  --panel-2: rgba(30, 38, 74, 0.6);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #eef2ff;
  --text-dim: #9aa4c7;
  --text-faint: #6770a0;
  --accent: #6c8cff;
  --accent-2: #38e8c8;
  --accent-grad: linear-gradient(135deg, #6c8cff 0%, #38e8c8 100%);
  --good: #38e8a8;
  --warn: #ffce5c;
  --bad: #ff6b81;
  --train: #ffb347;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  --radius: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: radial-gradient(1200px 800px at 80% -10%, #1b2350 0%, transparent 60%),
              radial-gradient(900px 700px at -10% 110%, #112a44 0%, transparent 55%),
              linear-gradient(160deg, var(--bg-grad-1), var(--bg-grad-2));
  background-attachment: fixed;
  color: var(--text); min-height: 100vh;
  -webkit-font-smoothing: antialiased; line-height: 1.5;
}
a { color: var(--accent); text-decoration: none; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

header { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(14px); background: rgba(11,16,32,.72); border-bottom: 1px solid var(--border); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; max-width: 1180px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -.4px; min-width: 0; }
.brand-name { white-space: nowrap; }
.nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand .logo { width: 34px; height: 34px; border-radius: 9px; display: block; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 4px 10px rgba(108,140,255,.35)); }
.brand .logo svg { display: block; }
.brand .grad { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav .tag { color: var(--text-faint); font-size: 13px; font-weight: 500; white-space: nowrap; }
.live-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--good); background: rgba(56,232,168,.12); border: 1px solid rgba(56,232,168,.3); padding: 5px 11px; border-radius: 999px; }
.live-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(56,232,168,.5);} 70%{ box-shadow: 0 0 0 9px rgba(56,232,168,0);} 100%{ box-shadow: 0 0 0 0 rgba(56,232,168,0);} }

.hero { padding: 54px 0 28px; text-align: center; }
.hero h1 { font-size: clamp(30px, 5vw, 52px); font-weight: 800; letter-spacing: -1.2px; line-height: 1.08; margin-bottom: 14px; }
.hero h1 .grad { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--text-dim); font-size: 17px; max-width: 620px; margin: 0 auto 30px; }

/* Catchy animated digital clock (train departure-board style) */
.train-clock { margin: 0 auto 30px; width: fit-content; max-width: 100%; }
.tc-strip { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; }
.tc-strip .tc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); animation: tcDot 1.4s ease-in-out infinite; }
.tc-strip .tc-label { font-size: 11px; font-weight: 800; letter-spacing: 2.2px; color: var(--text-dim); }
.tc-board { position: relative; display: flex; align-items: center; padding: 14px 18px; border-radius: 16px; background: linear-gradient(180deg, #131a2e, #0a0f1f); border: 1px solid rgba(255,210,120,.18); box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden; }
.tc-board::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.5); box-shadow: 0 -1px 0 rgba(255,255,255,.04); }
.tc-digits { display: flex; align-items: center; gap: 5px; position: relative; z-index: 1; }
.tc-colon { font: 700 30px ui-monospace, monospace; color: #ffb43a; text-shadow: 0 0 10px rgba(255,180,58,.7); animation: tcBlink 1s steps(2,start) infinite; padding: 0 1px; }

/* flip digit */
.tc-dig { perspective: 220px; width: 34px; height: 50px; position: relative; display: inline-block; }
.tc-dig .fc-front, .tc-dig .fc-back { position: absolute; inset: 0; display: grid; place-items: center; font: 700 34px ui-monospace, "SF Mono", Menlo, monospace; color: #ffd27a; text-shadow: 0 0 12px rgba(255,180,58,.55); backface-visibility: hidden; border-radius: 8px; }
.tc-dig .fc-back { transform: rotateX(180deg); }
.tc-dig.flip .fc-front { animation: fcFlipOut .42s ease-in forwards; }
.tc-dig.flip .fc-back { animation: fcFlipIn .42s ease-out forwards; }
@keyframes fcFlipOut { 0% { transform: rotateX(0); } 100% { transform: rotateX(-90deg); } }
@keyframes fcFlipIn { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }

.tc-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 9px; padding: 0 4px; }
.tc-ampm { font: 700 12px ui-monospace, monospace; color: var(--accent); letter-spacing: 1px; }
.tc-date { font-size: 12px; font-weight: 600; color: var(--text-dim); letter-spacing: .5px; }

.tc-track { position: relative; height: 16px; margin-top: 6px; overflow: hidden; }
.tc-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 10px, transparent 10px 18px); transform: translateY(-50%); }
.tc-train { position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: 15px; animation: tcRoll 4.5s linear infinite; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
@keyframes tcRoll { 0% { left: -8%; } 100% { left: 104%; } }
@keyframes tcBlink { 50% { opacity: .25; } }
@keyframes tcDot { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
body.light .tc-strip .tc-label, body.light .tc-date { color: #5a6478; }
body.light .tc-ampm { color: #5b6cff; }

.search-card { max-width: 720px; margin: 0 auto; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 20px; padding: 8px; display: flex; gap: 8px; box-shadow: var(--shadow); backdrop-filter: blur(10px); position: relative; }
.search-card .icon { display: grid; place-items: center; padding-left: 16px; color: var(--text-faint); }
.search-card input { flex: 1 1 auto; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: 16px; padding: 14px 16px; font-family: inherit; }
.search-card input::placeholder { color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; }
.search-card button { border: none; cursor: pointer; border-radius: 14px; padding: 14px 26px; font-weight: 700; font-size: 15px; color: #06112e; background: var(--accent-grad); transition: transform .12s, box-shadow .12s; font-family: inherit; display: inline-flex; align-items: center; gap: 8px; }
.search-card button:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(108,140,255,.4); }
.search-card button:active { transform: translateY(0); }

.autocomplete { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow); max-height: 320px; overflow-y: auto; z-index: 50; display: none; text-align: left; }
.autocomplete.active { display: block; }
.autocomplete .item { padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: 12px; }
.autocomplete .item:last-child { border-bottom: none; }
.autocomplete .item:hover, .autocomplete .item.active { background: rgba(108,140,255,.12); }
.autocomplete .num { font-weight: 700; color: var(--accent); min-width: 80px; }
.autocomplete .nm { color: var(--text-dim); flex: 1; }
.autocomplete .empty { padding: 14px 16px; color: var(--text-faint); }

.chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.chips .chip { font-size: 13px; color: var(--text-dim); background: rgba(255,255,255,.04); border: 1px solid var(--border); padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: .15s; }
.chips .chip:hover { color: var(--text); border-color: var(--border-strong); background: rgba(108,140,255,.1); }

.result-wrap { padding: 18px 0 60px; }
.result { display: none; }
.result.show { display: block; }
.loader { display: none; text-align: center; padding: 50px 0; color: var(--text-dim); }
.loader.show { display: block; }
.spinner-logo { display: block; margin: 0 auto 14px; animation: spin 1.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-box { display: none; background: rgba(255,107,129,.1); border: 1px solid rgba(255,107,129,.3); color: #ffb3c0; padding: 16px 20px; border-radius: 14px; margin-top: 18px; text-align: center; }
.error-box.show { display: block; }

.train-card { background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); backdrop-filter: blur(10px); margin-bottom: 22px; }
.train-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.train-name { font-size: 24px; font-weight: 800; letter-spacing: -.4px; }
.train-num { color: var(--accent); font-weight: 700; margin-right: 10px; }
.train-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; color: var(--text-dim); font-size: 14px; }
.badge { padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); background: rgba(255,255,255,.04); }

.status-pill { font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; }
.status-pill.running { color: var(--good); background: rgba(56,232,168,.12); border: 1px solid rgba(56,232,168,.3); }
.status-pill.not-started { color: var(--text-dim); background: rgba(255,255,255,.05); border: 1px solid var(--border); }
.status-pill.completed { color: var(--accent); background: rgba(108,140,255,.12); border: 1px solid rgba(108,140,255,.3); }
.status-pill.cancelled { color: var(--bad); background: rgba(255,107,129,.12); border: 1px solid rgba(255,107,129,.3); }

.route-summary { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.endpoint .lab { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); }
.endpoint .name { font-size: 16px; font-weight: 700; margin-top: 2px; }
.endpoint .code { font-size: 12px; color: var(--accent); font-weight: 700; }
.endpoint.dest { text-align: right; }
.journey-bar { position: relative; min-width: 120px; }
.journey-bar .line { height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); position: relative; }
.journey-bar .fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px; background: var(--accent-grad); }
.journey-bar .train-ico { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 16px; }
.journey-bar .dist { text-align: center; font-size: 11px; color: var(--text-faint); margin-top: 6px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 20px; }
.stat { background: var(--panel-2); border: 1px solid var(--border); border-radius: 13px; padding: 14px; }
.stat .v { font-size: 20px; font-weight: 800; }
.stat .v.delay-bad { color: var(--bad); }
.stat .v.delay-warn { color: var(--warn); }
.stat .v.delay-good { color: var(--good); }
.stat .l { font-size: 12px; color: var(--text-faint); margin-top: 3px; }

/* Alert banner (admin overrides + AI-fetched updates shown to passengers) */
.alert-banner { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.alert-banner .ab-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-2); font-size: 13.5px; line-height: 1.45; }
.alert-banner .ab-ic { font-size: 18px; line-height: 1.3; flex-shrink: 0; }
.alert-banner .ab-body { flex: 1; min-width: 0; }
.alert-banner .ab-label { font-weight: 700; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; display: inline-block; padding: 2px 8px; border-radius: 10px; margin-bottom: 4px; }
.alert-banner .ab-type-cancellation, .alert-banner .ab-type-partial_cancellation, .alert-banner .ab-type-short_termination { border-left: 4px solid var(--bad); }
.alert-banner .ab-type-cancellation .ab-label, .alert-banner .ab-type-partial_cancellation .ab-label, .alert-banner .ab-type-short_termination .ab-label { background: rgba(255,80,80,.15); color: var(--bad); }
.alert-banner .ab-type-diversion, .alert-banner .ab-type-reschedule { border-left: 4px solid var(--warn); }
.alert-banner .ab-type-diversion .ab-label, .alert-banner .ab-type-reschedule .ab-label { background: rgba(255,206,92,.15); color: var(--warn); }
.alert-banner .ab-type-restoration, .alert-banner .ab-type-admin { border-left: 4px solid var(--good); }
.alert-banner .ab-type-restoration .ab-label, .alert-banner .ab-type-admin .ab-label { background: rgba(80,200,120,.15); color: var(--good); }
.alert-banner .ab-type-delay { border-left: 4px solid var(--accent); }
.alert-banner .ab-type-delay .ab-label { background: rgba(108,140,255,.15); color: var(--accent); }
.alert-banner .ab-src { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
.alert-banner .ab-src a { color: var(--text-dim); text-decoration: underline; }
.alert-banner .ab-critical { border-color: rgba(255,80,80,.4); background: rgba(255,80,80,.08); }

.grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: start; margin-top: 22px; }
@media (max-width: 920px) { .grid { grid-template-columns: 1fr; } }

/* AdSense slots (admin-controlled; hidden unless filled by app.js) */
.ad-slot {
  max-width: 1180px; margin: 18px auto; min-height: 90px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border); border-radius: var(--radius);
  background: var(--panel); overflow: hidden;
}
.ad-slot .adsbygoogle { width: 100%; min-height: 90px; }
.ad-slot.ad-footer { margin-top: 24px; }
@media (max-width: 920px) { .ad-slot { margin: 14px auto; } }

.panel { background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); backdrop-filter: blur(10px); margin-bottom: 22px; }
.panel h2 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.panel h2 .ic { font-size: 18px; }
.panel h2 .refresh { margin-left: auto; }

.ai-panel { border-color: rgba(56,232,200,.25); }
.ai-panel h2 { color: var(--accent-2); }
.ai-block { margin-bottom: 16px; }
.ai-block:last-child { margin-bottom: 0; }
.ai-block .ttl { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); margin-bottom: 5px; display: flex; align-items: center; gap: 7px; }
.ai-block .body { font-size: 14.5px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; }
.confidence { font-size: 11px; padding: 2px 9px; border-radius: 999px; font-weight: 600; margin-left: auto; }
.confidence.high { color: var(--good); background: rgba(56,232,168,.12); }
.confidence.medium { color: var(--warn); background: rgba(255,206,92,.12); }
.confidence.low { color: var(--bad); background: rgba(255,107,129,.12); }
.tips { list-style: none; }
.tips li { font-size: 14px; color: var(--text-dim); padding: 10px 0 10px 26px; position: relative; border-bottom: 1px solid var(--border); }
.tips li:last-child { border-bottom: none; }
.tips li::before { content: "💡"; position: absolute; left: 0; }

#map { height: 380px; border-radius: 14px; border: 1px solid var(--border); overflow: hidden; }
.map-stage { position: relative; }
.map-stage.expanded #map { height: 70vh; position: fixed; inset: 0; z-index: 9999; border-radius: 0; border: none; }
.map-overlay-top { position: absolute; top: 10px; left: 10px; z-index: 600; display: flex; gap: 8px; align-items: center; pointer-events: none; }
.map-overlay-top > * { pointer-events: auto; }
.map-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: rgba(11,16,32,.82); color: var(--text); font-size: 15px; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(6px); transition: transform .15s, background .15s; }
.map-btn:hover { transform: scale(1.08); background: rgba(108,140,255,.25); }
.map-expand { position: absolute; top: 10px; right: 10px; z-index: 600; }
.map-progress { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--text); background: rgba(11,16,32,.82); border: 1px solid var(--border); padding: 6px 10px; border-radius: 8px; backdrop-filter: blur(6px); white-space: nowrap; }
.map-progress .mp-bar { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; }
.map-progress .mp-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #38e8a8, #6c8cff); border-radius: 3px; transition: width .6s ease; }
body.light .map-btn { background: rgba(255,255,255,.85); }
body.light .map-progress { background: rgba(255,255,255,.88); }
/* Animated flowing dashes on the route overlay path */
.route-flow { animation: routeFlow 1.4s linear infinite; }
@keyframes routeFlow { to { stroke-dashoffset: -15; } }
/* Current station marker pulse */
.station-current { animation: stnPulse 1.8s ease-out infinite; transform-origin: center; }
@keyframes stnPulse { 0% { filter: drop-shadow(0 0 0 rgba(255,179,71,.6)); } 50% { filter: drop-shadow(0 0 6px rgba(255,179,71,.9)); } 100% { filter: drop-shadow(0 0 0 rgba(255,179,71,0)); } }
.map-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--text-dim); }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend .sw { width: 14px; height: 4px; border-radius: 3px; }
.map-legend .sw-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent); background: var(--bg); }

.timeline { position: relative; max-height: 520px; overflow-y: auto; padding-right: 6px; }
.timeline::-webkit-scrollbar { width: 8px; }
.timeline::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 8px; }
/* Journey-progress overlay: green line from origin to current station */
.timeline .tl-progress { position: absolute; left: 17px; top: 0; width: 3px; background: linear-gradient(180deg, #38e8a8, #38e8a8aa); border-radius: 3px; z-index: 1; transition: height .9s cubic-bezier(.22,1,.36,1); box-shadow: 0 0 8px rgba(56,232,168,.5); }
.timeline .tl-train { position: absolute; left: -7px; transform: translateY(-50%); font-size: 15px; z-index: 4; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); animation: tltrainbob 1.1s ease-in-out infinite; white-space: nowrap; }
.timeline .tl-glow { position: absolute; left: -3px; top: 0; width: 9px; height: 14px; border-radius: 50%; background: radial-gradient(circle, rgba(56,232,168,.9), rgba(56,232,168,0)); animation: tlglow 1.8s linear infinite; }
@keyframes tltrainbob { 0%,100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(2px); } }
@keyframes tlglow { 0% { transform: translateY(0); opacity: .9; } 90% { opacity: 0; } 100% { transform: translateY(40px); opacity: 0; } }
.timeline .stop { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: start; padding: 11px 0; position: relative; }
.timeline .stop::before { content: ""; position: absolute; left: 17px; top: 24px; bottom: -11px; width: 2px; background: var(--border); }
.timeline .stop:last-child::before { display: none; }
.timeline .dot-wrap { position: relative; display: flex; justify-content: center; padding-top: 4px; }
.timeline .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--text-faint); z-index: 2; }
.timeline .stop.passed .dot { background: var(--good); border-color: var(--good); box-shadow: 0 0 0 4px rgba(56,232,168,.15); }
.timeline .stop.current .dot { background: var(--train); border-color: var(--train); box-shadow: 0 0 0 5px rgba(255,179,71,.25); animation: pulse2 1.6s infinite; }
.timeline .stop.upcoming .dot { border-color: var(--accent); }
@keyframes pulse2 { 0%,100%{ box-shadow: 0 0 0 5px rgba(255,179,71,.25);} 50%{ box-shadow: 0 0 0 9px rgba(255,179,71,.1);} }
.timeline .stop.cancelled .dot { background: var(--bad); border-color: var(--bad); }
.timeline .info .nm { font-weight: 700; font-size: 14.5px; }
.timeline .info .meta { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.timeline .info .meta .pf { background: rgba(108,140,255,.15); color: var(--accent); padding: 1px 7px; border-radius: 5px; font-weight: 600; margin-right: 6px; }
.timeline .times { text-align: right; font-size: 13px; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.timeline .times .trow { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.timeline .times .tlab { font-size: 10px; font-weight: 700; color: var(--text-faint); background: rgba(255,255,255,.06); padding: 1px 5px; border-radius: 4px; letter-spacing: .3px; }
.timeline .times .sch { color: var(--text-dim); }
.timeline .times .tarrow { color: var(--text-faint); font-size: 11px; }
.timeline .times .act { color: var(--text); font-weight: 600; }
.timeline .times .act.est { color: var(--accent); font-style: italic; opacity: .92; }
.timeline .times .dly { font-size: 11px; font-weight: 600; }
.timeline .times .dly.good { color: var(--good); }
.timeline .times .dly.bad { color: var(--bad); }
.timeline .times .dly.warn { color: var(--warn); }
.timeline .times .dly.est { color: var(--accent); }
.timeline .times .dly.est em { font-style: italic; font-weight: 500; opacity: .75; font-size: 9px; margin-left: 1px; }
.timeline .current .nm { color: var(--train); }
.timeline .stop.skipped { opacity: .55; }

.refresh-btn { border: 1px solid var(--border-strong); background: rgba(255,255,255,.05); color: var(--text); padding: 7px 13px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-family: inherit; transition: .15s; }
.refresh-btn:hover { background: rgba(108,140,255,.12); border-color: var(--accent); }
.refresh-btn .ico { display: inline-block; transition: transform .6s; }
.refresh-btn.spinning .ico { transform: rotate(360deg); }

.halts-toggle { margin-left: auto; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; color: var(--text-dim); user-select: none; }
.halts-toggle input { accent-color: var(--accent); cursor: pointer; }

/* Stops view dropdown */
.stops-view { margin-left: auto; font-size: 12px; font-weight: 600; cursor: pointer; background: var(--panel-solid); color: var(--text-dim); border: 1px solid var(--border-strong); border-radius: 9px; padding: 6px 28px 6px 11px; font-family: inherit; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 L5 6.5 L8 3.5' stroke='%238b95c0' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; transition: border-color .15s, color .15s; }
.stops-view:hover, .stops-view:focus { border-color: var(--accent); color: var(--text); outline: none; }
.stops-view option { background: #0d1428; color: var(--text); padding: 6px; }

/* Non-stop badge in timeline */
.timeline .pf.nonstop { background: rgba(160,170,200,.12); color: var(--text-faint); border: 1px solid var(--border); }
.timeline .stop.non-halt { opacity: .62; }
.timeline .stop.non-halt .nm { font-size: 13px; font-weight: 500; }

/* Coach composition */
.coach-wrap { margin-top: 16px; padding: 14px; background: rgba(13,20,40,.55); border: 1px solid var(--border-strong); border-radius: 14px; }
.coach-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.coach-hint { font-size: 12px; font-weight: 500; color: var(--text-dim); }

/* toolbar: search + direction */
.coach-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.coach-search { display: flex; align-items: center; gap: 6px; background: rgba(8,12,26,.7); border: 1px solid var(--border-strong); border-radius: 9px; padding: 4px 8px; min-width: 220px; transition: border-color .15s, box-shadow .15s; }
.coach-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108,140,255,.18); }
.coach-search .cs-ic { font-size: 12px; opacity: .7; }
.coach-search input { background: transparent; border: none; outline: none; color: var(--text); font-size: 12px; font-family: inherit; width: 100%; padding: 3px 0; }
.coach-search input::placeholder { color: var(--text-faint); }
.cs-clear { background: rgba(255,255,255,.08); border: none; color: var(--text-dim); cursor: pointer; border-radius: 50%; width: 16px; height: 16px; font-size: 9px; line-height: 1; display: grid; place-items: center; }
.cs-clear:hover { background: rgba(255,107,129,.25); color: #ffb3c0; }
.coach-dir { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-faint); }
.coach-dir .cd-arrow { color: var(--accent); animation: cdir 1.6s ease-in-out infinite; }
@keyframes cdir { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

/* the track holds the scrollable coaches and an animated rail */
.coach-track { position: relative; padding: 18px 4px 10px; border-radius: 10px; background: linear-gradient(var(--track-c, rgba(8,12,26,.5)), var(--track-c, rgba(8,12,26,.5))); overflow: hidden; }
.coach-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(8px); background: repeating-linear-gradient(90deg, rgba(255,179,71,.55) 0 14px, transparent 14px 26px); opacity: .4; }
.coach-track.moving::after { content: ""; position: absolute; left: -30px; top: calc(50% + 6px); width: 26px; height: 3px; background: var(--accent); border-radius: 2px; box-shadow: 0 0 10px rgba(108,140,255,.7); animation: railrun 2.6s linear infinite; }
@keyframes railrun { 0% { left: -30px; } 100% { left: 100%; } }

.coach-pos { display: flex; gap: 4px; overflow-x: auto; padding: 0 2px 8px; scroll-behavior: smooth; position: relative; z-index: 2; }
.coach-pos::-webkit-scrollbar { height: 6px; }
.coach-pos::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.coach { flex: 0 0 auto; min-width: 48px; height: 44px; border-radius: 7px; display: grid; place-items: center; gap: 0; cursor: pointer; border: 1px solid rgba(255,255,255,.12); transition: transform .14s, box-shadow .14s, filter .14s, outline-color .14s; position: relative; }
.coach .c-code { font-size: 11px; font-weight: 800; letter-spacing: .3px; text-shadow: 0 1px 2px rgba(0,0,0,.5); line-height: 1; }
.coach .c-pos { font-size: 8px; font-weight: 600; opacity: .65; margin-top: 2px; line-height: 1; }
.coach:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.45); z-index: 3; }
/* staggered entrance */
.coach.enter { animation: cdrop .5s cubic-bezier(.2,.8,.3,1.2) backwards; animation-delay: var(--d, 0ms); }
@keyframes cdrop { 0% { opacity: 0; transform: translateY(-14px) scale(.6); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.coach.sel { outline: 2px solid var(--accent); outline-offset: 1px; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(108,140,255,.4); z-index: 4; }
.coach.is-eng { min-width: 42px; border-radius: 16px 7px 7px 16px; }
.coach.is-eng::before { content: ""; position: absolute; left: -6px; top: 50%; width: 0; height: 0; transform: translateY(-50%); border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 8px solid var(--accent); opacity: .8; }
/* found (search match) pulses; non-matches dim */
.coach.found { animation: cfound 1s ease-in-out infinite; outline: 2px solid #ffb347; outline-offset: 1px; z-index: 4; }
@keyframes cfound { 0%,100% { transform: translateY(-3px) scale(1); box-shadow: 0 6px 16px rgba(255,179,71,.35); } 50% { transform: translateY(-3px) scale(1.08); box-shadow: 0 8px 22px rgba(255,179,71,.6); } }
.coach.dim { filter: grayscale(.7) brightness(.55); opacity: .5; }

/* detail panel */
.coach-detail { margin: 12px 0 0; padding: 10px 12px; background: rgba(108,140,255,.08); border: 1px solid var(--border-strong); border-radius: 10px; display: flex; align-items: center; gap: 10px; animation: cfade .25s ease; }
@keyframes cfade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.coach-detail .cd-badge { font-size: 12px; font-weight: 800; padding: 5px 9px; border-radius: 7px; letter-spacing: .4px; }
.coach-detail .cd-name { font-size: 13px; font-weight: 700; color: var(--text); }
.coach-detail .cd-where { font-size: 11px; color: var(--text-dim); }

/* legend */
.coach-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; }
.coach-legend .leg { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-dim); }
.coach-legend .leg-sw { width: 10px; height: 10px; border-radius: 3px; border: 1px solid rgba(255,255,255,.2); }
.coach-note { font-size: 11px; color: var(--text-faint); margin-top: 10px; text-align: center; }

/* Seat / berth layout */
.coach-seats { margin-top: 12px; border: 1px solid var(--border-strong); border-radius: 12px; background: rgba(8,12,26,.5); padding: 14px; overflow-y: hidden; overflow-x: auto; }
.coach-seats.show .seats-head { animation: cfade .3s ease; }
.seats-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.seats-head .sh-ic { margin-right: 6px; }
.seats-sub { font-size: 11px; font-weight: 500; color: var(--text-dim); }
.berth-aisle-label { font-size: 10px; color: var(--text-faint); margin: 2px 0 8px; letter-spacing: 1px; }

/* berth (sleeper/AC) grid: bays in a row, scrollable */
.berth-grid { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scroll-behavior: smooth; }
.berth-grid::-webkit-scrollbar { height: 6px; }
.berth-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.bay { flex: 0 0 auto; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.bay-no { font-size: 9px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; }
.bay-bunks { display: flex; gap: 3px; align-items: stretch; }
.bay-bunks .col { display: flex; flex-direction: column; gap: 3px; }
.bay-bunks .side-col { display: flex; flex-direction: column; gap: 3px; border-left: 1px dashed rgba(255,255,255,.15); padding-left: 4px; margin-left: 2px; }
.bay-bunks .aisle-gap { width: 10px; align-self: stretch; background: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 4px, transparent 4px 8px); border-radius: 2px; }
.berth-cell { width: 26px; height: 16px; border-radius: 4px; display: grid; place-items: center; gap: 0; color: #fff; cursor: pointer; border: 1px solid rgba(255,255,255,.18); position: relative; opacity: 0; animation: berthIn .4s ease forwards; animation-delay: var(--d, 0ms); transition: transform .12s, box-shadow .12s; }
@keyframes berthIn { from { opacity: 0; transform: translateY(-6px) scale(.7); } to { opacity: 1; transform: translateY(0) scale(1); } }
.berth-cell .bc-ic { font-size: 9px; line-height: 1; }
.berth-cell .bc-no { font-size: 7px; font-weight: 700; line-height: 1; text-shadow: 0 1px 1px rgba(0,0,0,.5); }
.berth-cell.is-side { width: 22px; height: 30px; }
.berth-cell:hover, .berth-cell.hi { transform: scale(1.35); z-index: 5; box-shadow: 0 4px 12px rgba(0,0,0,.5); outline: 2px solid #ffb347; }

/* chair-car grid */
.chair-grid { display: flex; flex-direction: column; gap: 5px; max-height: 280px; overflow-y: auto; padding-right: 4px; }
.chair-row { display: flex; align-items: center; gap: 6px; }
.chair-row .row-no { font-size: 9px; font-weight: 700; color: var(--text-faint); width: 14px; text-align: right; }
.row-seats { display: flex; align-items: center; gap: 4px; }
.chair-aisle { width: 14px; }
.chair-seat { width: 26px; height: 26px; border-radius: 6px 6px 4px 4px; display: grid; place-items: center; color: #fff; font-size: 9px; font-weight: 700; cursor: pointer; border: 1px solid rgba(255,255,255,.18); opacity: 0; animation: berthIn .4s ease forwards; animation-delay: var(--d, 0ms); transition: transform .12s, box-shadow .12s; position: relative; }
.chair-seat::after { content: ""; position: absolute; top: 2px; left: 3px; right: 3px; height: 4px; border-top: 1px solid rgba(255,255,255,.3); border-radius: 3px; }
.chair-seat:hover, .chair-seat.hi { transform: scale(1.2); z-index: 5; box-shadow: 0 4px 12px rgba(0,0,0,.5); outline: 2px solid #ffb347; }

/* legend for seats */
.seats-legend { display: flex; flex-wrap: wrap; gap: 5px 12px; margin: 10px 0 4px; }
.sl-item { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-dim); }
.sl-sw { width: 11px; height: 11px; border-radius: 3px; border: 1px solid rgba(255,255,255,.2); }
.seats-cap { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.seat-info { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--accent); background: rgba(108,140,255,.1); border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 11px; min-height: 16px; transition: background .15s; }
.special-coach { display: flex; align-items: center; gap: 10px; padding: 18px; color: var(--text-dim); font-size: 13px; }
.special-coach .sc-ic { font-size: 26px; }

/* Animated live train marker on the map */
.train-div-icon { background: transparent !important; border: none !important; }
.train-mark { position: relative; width: 38px; height: 38px; display: grid; place-items: center; }
.train-mark .tm-pulse { position: absolute; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,179,71,.35); animation: tmpulse 1.8s ease-out infinite; }
.train-mark .tm-pulse2 { animation-delay: .9s; background: rgba(255,179,71,.25); }
.train-mark .tm-compass { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 0; }
.train-mark .tm-arrow { font-size: 11px; color: #ffb347; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); line-height: 1; display: inline-block; transition: transform .4s ease; }
.train-mark .tm-emoji { position: relative; font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); animation: tmbob 1.2s ease-in-out infinite; }
.train-mark .tm-logo { position: relative; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); animation: tmbob 1.2s ease-in-out infinite; }
@keyframes tmpulse { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes tmbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

footer { text-align: center; color: var(--text-dim); font-size: 13px; padding: 36px 0 calc(28px + env(safe-area-inset-bottom)); }
footer a { color: var(--text-dim); }
.footer-inner { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: center; }
.footer-logo { opacity: .85; }
.footer-main { font-weight: 600; color: var(--text-dim); }
.footer-sep { color: var(--text-faint); }
.footer-sub { color: var(--text-faint); font-size: 12px; }

/* ----------------------------------------------------------------------- */
/* New features: tabs, station board, find trains, favorites, share,        */
/* toasts, theme toggle, delay chart                                        */
/* ----------------------------------------------------------------------- */

/* Theme toggle */
.theme-toggle { border: 1px solid var(--border-strong); background: rgba(255,255,255,.05); color: var(--text); width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font-size: 16px; display: grid; place-items: center; transition: .15s; font-family: inherit; }
.theme-toggle:hover { background: rgba(108,140,255,.12); border-color: var(--accent); }

/* Tabs */
.tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: nowrap; overflow-x: auto; border-bottom: 1px solid var(--border); padding-bottom: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { border: none; background: transparent; color: var(--text-dim); font-size: 14px; font-weight: 600; padding: 11px 18px; cursor: pointer; border-radius: 10px 10px 0 0; font-family: inherit; border-bottom: 2px solid transparent; transition: .15s; margin-bottom: -1px; white-space: nowrap; flex-shrink: 0; }
.tab:hover { color: var(--text); background: rgba(255,255,255,.04); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(108,140,255,.08); }

/* Favorites row */
.fav-row { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.fav-label { font-size: 13px; color: var(--text-dim); font-weight: 600; }
.fav-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fav-chip { font-size: 12px; color: var(--text); background: rgba(255,206,92,.1); border: 1px solid rgba(255,206,92,.3); padding: 5px 10px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: .15s; }
.fav-chip:hover { background: rgba(255,206,92,.18); }
.fav-chip .fc-rm { opacity: .5; font-size: 13px; }
.fav-chip .fc-rm:hover { opacity: 1; color: var(--bad); }

/* Action row (fav + share + refresh) */
.action-row { display: flex; align-items: center; gap: 8px; }
.icon-btn { border: 1px solid var(--border-strong); background: rgba(255,255,255,.05); color: var(--text-dim); width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font-size: 15px; display: grid; place-items: center; transition: .15s; font-family: inherit; }
.icon-btn:hover { background: rgba(108,140,255,.12); border-color: var(--accent); color: var(--text); }
.icon-btn.active { color: var(--warn); border-color: rgba(255,206,92,.4); background: rgba(255,206,92,.12); }

/* Station search + find trains forms */
.station-search { max-width: 100%; }
.station-search .icon { padding-left: 14px; }
.between-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.between-field { flex: 1; min-width: 160px; position: relative; }
.between-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); margin-bottom: 5px; }
.between-field input { width: 100%; background: rgba(8,12,26,.7); border: 1px solid var(--border-strong); border-radius: 10px; color: var(--text); font-size: 15px; padding: 12px 14px; font-family: inherit; }
.between-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108,140,255,.18); }
.between-form button[type="submit"] { border: none; cursor: pointer; border-radius: 10px; padding: 12px 22px; font-weight: 700; font-size: 14px; color: #06112e; background: var(--accent-grad); font-family: inherit; height: 46px; }
.swap-btn { border: 1px solid var(--border-strong); background: rgba(255,255,255,.05); color: var(--text); width: 42px; height: 46px; border-radius: 10px; cursor: pointer; font-size: 18px; transition: .15s; }
.swap-btn:hover { background: rgba(108,140,255,.12); border-color: var(--accent); }

/* Station / between results table */
.station-result { margin-top: 16px; }
.station-info { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; font-size: 13px; color: var(--text-dim); }
.station-info .si-name { font-size: 17px; font-weight: 800; color: var(--text); }
.station-info .si-code { color: var(--accent); font-weight: 700; }
.station-info .si-pill { background: rgba(255,255,255,.05); border: 1px solid var(--border); padding: 3px 9px; border-radius: 999px; font-size: 11px; }
.station-info .si-updated { color: var(--text-faint); border-color: var(--border); }
.board-hint { font-size: 12px; color: var(--text-faint); margin-top: 10px; text-align: center; }
.board-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.board-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); padding: 8px 10px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel-solid); z-index: 2; }
.board-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); color: var(--text-dim); }
.board-table tr:hover td { background: rgba(108,140,255,.06); color: var(--text); }
.board-table .bt-num { color: var(--accent); font-weight: 700; cursor: pointer; white-space: nowrap; }
.board-table .bt-num:hover { text-decoration: underline; }
.board-table .bt-name { color: var(--text); font-weight: 600; }
.board-table .bt-time { color: var(--text); font-weight: 600; white-space: nowrap; }
.board-table .bt-soon { color: var(--good); }
.board-table .bt-imminent { color: var(--train); font-weight: 700; }
.board-table .bt-dur { white-space: nowrap; }
.board-table .bt-dur-v { font-size: 11px; color: var(--text-dim); background: rgba(255,255,255,.05); border: 1px solid var(--border); padding: 2px 6px; border-radius: 6px; }
.board-table .bt-today { font-size: 9px; font-weight: 700; color: var(--good); background: rgba(56,232,168,.14); border: 1px solid rgba(56,232,168,.3); padding: 1px 5px; border-radius: 5px; vertical-align: middle; text-transform: uppercase; letter-spacing: .3px; }
.board-wrap-scroll { max-height: 560px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; }
.run-days { display: inline-flex; gap: 1px; }
.run-days .rd { width: 14px; height: 15px; border-radius: 3px; background: rgba(255,255,255,.08); font-size: 8px; font-weight: 700; line-height: 15px; text-align: center; color: var(--text-faint); }
.run-days .rd.on { background: var(--accent); color: #06112e; }
.empty-result { padding: 30px; text-align: center; color: var(--text-faint); font-size: 14px; }

/* Toasts */
.toast-wrap { position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.toast { background: var(--panel-solid); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent); border-radius: 12px; padding: 13px 16px; box-shadow: var(--shadow); font-size: 13px; color: var(--text); display: flex; align-items: flex-start; gap: 10px; animation: toastIn .3s ease; }
.toast.t-good { border-left-color: var(--good); }
.toast.t-warn { border-left-color: var(--warn); }
.toast.t-bad { border-left-color: var(--bad); }
.toast .t-ic { font-size: 16px; flex-shrink: 0; }
.toast .t-close { margin-left: auto; opacity: .4; cursor: pointer; font-size: 16px; }
.toast .t-close:hover { opacity: 1; }
.toast.out { animation: toastOut .3s ease forwards; }
@keyframes toastIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { to { transform: translateX(40px); opacity: 0; } }

/* Delay trend chart */
.delay-chart-wrap { margin-top: 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 13px; padding: 14px; }
.dc-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 8px; }
.dc-legend { font-size: 11px; color: var(--text-faint); font-weight: 500; }
.delay-chart { width: 100%; height: 80px; display: block; }
.delay-chart .dc-axis { stroke: var(--border); stroke-width: 1; }
.delay-chart .dc-zero { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.delay-chart .dc-area { fill: url(#dcGrad); opacity: .3; }
.delay-chart .dc-line { fill: none; stroke: var(--warn); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.delay-chart .dc-pt { fill: var(--warn); stroke: var(--bg); stroke-width: 1.5; }
.delay-chart .dc-pt.passed { fill: var(--good); }

/* PNR status */
.pnr-result { margin-top: 16px; }
.pnr-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.pnr-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.pnr-head .ph-train { font-size: 18px; font-weight: 800; color: var(--text); }
.pnr-head .ph-train .ph-num { color: var(--accent); margin-right: 6px; }
.pnr-head .ph-pnr { font-size: 13px; color: var(--text-dim); }
.pnr-journey { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.pnr-journey .pj-end { flex: 1; min-width: 120px; }
.pnr-journey .pj-lab { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); }
.pnr-journey .pj-name { font-size: 15px; font-weight: 700; color: var(--text); }
.pnr-journey .pj-code { font-size: 13px; color: var(--accent); font-weight: 600; }
.pnr-journey .pj-arrow { color: var(--text-faint); font-size: 20px; }
.pnr-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.pnr-meta .pm-item { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.pnr-meta .pm-lab { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); margin-bottom: 3px; }
.pnr-meta .pm-val { font-size: 14px; font-weight: 700; color: var(--text); }
.pnr-meta .pm-val.good { color: var(--good); }
.pnr-meta .pm-val.warn { color: var(--warn); }
.pnr-meta .pm-val.bad { color: var(--bad); }
.pnr-pass { margin-top: 4px; }
.pnr-pass-title { font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }
.pnr-pass-row { display: grid; grid-template-columns: 28px 1fr 1fr; gap: 10px; align-items: center; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; }
.pnr-pass-row .pp-idx { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-grad); color: #06112e; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.pnr-pass-row .pp-name { font-size: 14px; font-weight: 600; color: var(--text); }
.pnr-pass-row .pp-st { font-size: 12px; }
.pnr-pass-row .pp-booking { color: var(--text-dim); }
.pnr-pass-row .pp-current { color: var(--text); font-weight: 600; }
.pnr-pass-row .pp-current.cnf { color: var(--good); }
.pnr-pass-row .pp-current.wl { color: var(--warn); }
.pnr-pass-row .pp-current.rac { color: var(--warn); }
.pnr-pass-row .pp-current.cncl { color: var(--bad); }
.pnr-legend { font-size: 11px; color: var(--text-faint); margin-top: 10px; }
.official-pnr-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s; }
.official-pnr-btn:hover { background: var(--panel-2); }

/* Book-on-ConfirmTkt buttons */
.book-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 10px; border: 1px solid rgba(255,180,58,.4); background: rgba(255,180,58,.12); color: #ffb43a; font-size: 13px; font-weight: 700; text-decoration: none; transition: .15s; white-space: nowrap; }
.book-btn:hover { background: rgba(255,180,58,.22); border-color: #ffb43a; transform: translateY(-1px); }
.book-mini { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(255,180,58,.12); border: 1px solid rgba(255,180,58,.3); text-decoration: none; font-size: 13px; transition: .15s; }
.book-mini:hover { background: rgba(255,180,58,.25); border-color: #ffb43a; }
.bt-book { text-align: center; width: 42px; }
body.light .book-btn, body.light .book-mini { color: #b87a10; }

/* My Tickets wallet */
.tickets-intro { font-size: 13px; color: var(--text-dim); margin: 0 0 14px; }
.tickets-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.book-cta { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(255,180,58,.4); background: rgba(255,180,58,.12); color: #ffb43a; font-size: 13px; font-weight: 700; text-decoration: none; transition: .15s; }
.book-cta:hover { background: rgba(255,180,58,.22); border-color: #ffb43a; }
body.light .book-cta { color: #b87a10; }
.add-ticket-box { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; flex-wrap: wrap; }
.add-ticket-box input { flex: 1 1 180px; min-width: 0; background: transparent; border: 1px solid var(--border-strong); border-radius: 8px; padding: 9px 12px; color: var(--text); font-size: 15px; font-family: inherit; outline: none; }
.add-ticket-box input:focus { border-color: var(--accent); }
.add-ticket-box button { padding: 9px 16px; border-radius: 8px; border: 1px solid var(--border-strong); background: rgba(255,255,255,.05); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: .15s; }
.add-ticket-box button:hover { background: rgba(108,140,255,.12); border-color: var(--accent); }
.add-ticket-box #addTicketSave { background: var(--accent); color: #fff; border-color: var(--accent); }
.add-ticket-box #addTicketSave:hover { filter: brightness(1.1); }
.tickets-list { display: flex; flex-direction: column; gap: 12px; }
.ticket-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 16px; transition: border-color .15s; }
.ticket-card:hover { border-color: var(--border-strong); }
.tk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tk-train { font-size: 15px; font-weight: 700; color: var(--text); }
.tk-num { color: var(--accent); }
.tk-pnr { font-size: 12px; color: var(--text-dim); }
.tk-pnr strong { color: var(--text); letter-spacing: .5px; }
.tk-route { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-dim); margin-bottom: 10px; flex-wrap: wrap; }
.tk-route em { font-style: normal; font-size: 11px; color: var(--text-faint); background: rgba(255,255,255,.06); padding: 1px 5px; border-radius: 4px; }
.tk-arrow { color: var(--accent); }
.tk-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tk-class, .tk-date { color: var(--text-dim); }
.tk-chip { padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.tk-chip.good { background: rgba(56,232,168,.14); color: var(--good); }
.tk-chip.warn { background: rgba(255,206,92,.14); color: var(--warn); }
.tk-chip.bad { background: rgba(239,83,80,.14); color: var(--bad); }
.tk-chip.pending { background: rgba(255,255,255,.06); color: var(--text-faint); }
.tk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tk-btn { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border-strong); background: rgba(255,255,255,.05); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: .15s; }
.tk-btn:hover { background: rgba(108,140,255,.12); border-color: var(--accent); }
.tk-btn.tk-remove { color: var(--text-dim); }
.tk-btn.tk-remove:hover { background: rgba(239,83,80,.12); border-color: var(--bad); color: var(--bad); }
.tk-checked { display: block; margin-top: 8px; font-size: 11px; color: var(--text-faint); }

/* PNR captcha step (official indianrail.gov.in proxy) */
.pnr-captcha-box { margin-top: 14px; padding: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.pnr-captcha-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pnr-captcha-img { height: 46px; width: auto; min-width: 120px; border-radius: 8px; border: 1px solid var(--border); background: #fff; object-fit: contain; }
.pnr-captcha-refresh { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 18px; cursor: pointer; transition: background .15s, transform .15s; }
.pnr-captcha-refresh:hover:not(:disabled) { background: var(--panel); }
.pnr-captcha-refresh:active:not(:disabled) { transform: rotate(90deg); }
.pnr-captcha-refresh:disabled { opacity: .5; cursor: not-allowed; }
.pnr-captcha-input { flex: 1; min-width: 140px; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 16px; letter-spacing: 1px; }
.pnr-captcha-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, rgba(0,120,255,.15)); }
#pnrCaptchaSubmit { flex: 0 0 auto; height: 42px; padding: 0 18px; border-radius: 10px; border: none; background: var(--accent-grad); color: #06112e; font-weight: 700; font-size: 14px; cursor: pointer; transition: opacity .15s; }
#pnrCaptchaSubmit:disabled { opacity: .55; cursor: not-allowed; }
.pnr-captcha-hint { font-size: 11px; color: var(--text-faint); margin: 8px 2px 0; }
@media (max-width: 480px) {
  .pnr-captcha-img { height: 40px; min-width: 100px; }
  .pnr-captcha-input { font-size: 15px; }
  #pnrCaptchaSubmit { padding: 0 14px; }
}
.admin-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s; }
.admin-link:hover { background: var(--panel-2); }
@media (max-width: 480px) {
  .pnr-pass-row { grid-template-columns: 24px 1fr; }
  .pnr-pass-row .pp-st.pp-booking { grid-column: 2; font-size: 11px; }
  .pnr-pass-row .pp-st.pp-current { grid-column: 2; }
}

/* ----------------------------------------------------------------------- */
/* Responsive / mobile-friendly                                            */
/* ----------------------------------------------------------------------- */
.hidden-mobile { display: inline; }

/* Tablet & small laptops */
@media (max-width: 768px) {
  .container { padding: 0 16px; }
  .nav { padding: 12px 16px; }
  .brand { font-size: 18px; gap: 9px; }
  .brand .logo { width: 30px; height: 30px; border-radius: 8px; }
  .hero { padding: 36px 0 22px; }
  .hero p { font-size: 15px; margin-bottom: 22px; }
  .tc-dig { width: 26px; height: 38px; }
  .tc-dig .fc-front, .tc-dig .fc-back { font-size: 26px; }
  .tc-colon { font-size: 24px; }
  .tc-board { padding: 11px 13px; }
  .tc-strip .tc-label { font-size: 9px; letter-spacing: 1.5px; }
  .train-card { padding: 18px; border-radius: 16px; margin-bottom: 16px; }
  .train-name { font-size: 21px; }
  .panel { padding: 18px; border-radius: 16px; margin-bottom: 16px; }
  .panel h2 { font-size: 15px; margin-bottom: 14px; flex-wrap: wrap; gap: 7px; }
  #map { height: 320px; }
  .timeline { max-height: 440px; }
  .timeline .stop { grid-template-columns: 30px 1fr auto; gap: 10px; }
  .timeline .info .nm { font-size: 13.5px; }
  .timeline .times { font-size: 12px; }
  /* coach search fills width */
  .coach-tools { flex-direction: column; align-items: stretch; gap: 8px; }
  .coach-search { min-width: 0; width: 100%; }
  .coach-dir { justify-content: center; }
  /* seat layout: slightly tighter bays */
  .bay { width: 86px; }
}

/* Phones */
@media (max-width: 480px) {
  .container { padding: 0 12px; }
  .nav { padding: 10px 12px; gap: 8px; }
  .hidden-mobile { display: none; }
  .brand { font-size: 16px; gap: 8px; }
  .brand .logo { width: 26px; height: 26px; border-radius: 7px; }
  .nav-actions { gap: 6px; }
  .live-pill { font-size: 10px; padding: 4px 9px; gap: 5px; }
  .live-pill .dot { width: 6px; height: 6px; }
  .theme-toggle { width: 32px; height: 32px; padding: 0; }
  .theme-toggle .ti { font-size: 15px; }

  .hero { padding: 26px 0 18px; }
  .hero p { font-size: 14px; margin-bottom: 18px; }
  /* search bar: stack button under input on very narrow screens */
  .search-card { flex-direction: column; border-radius: 16px; padding: 6px; }
  .search-card .icon { display: none; }
  .search-card input { padding: 13px 14px; font-size: 16px; }
  .search-card button { width: 100%; justify-content: center; padding: 13px; font-size: 15px; }
  .chips { gap: 7px; margin-top: 14px; }
  .chips .chip { font-size: 12px; padding: 6px 11px; }

  .result-wrap { padding: 12px 0 40px; }
  .train-card { padding: 14px; border-radius: 14px; margin-bottom: 12px; }
  .train-head { gap: 10px; }
  .train-name { font-size: 18px; }
  .train-meta { gap: 8px; font-size: 12px; margin-top: 6px; }
  .route-summary { gap: 10px; margin-top: 16px; padding-top: 14px; }
  .endpoint .name { font-size: 14px; }
  .endpoint .code { font-size: 11px; }
  .journey-bar { min-width: 70px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; }
  .stat { padding: 11px; border-radius: 11px; }
  .stat .v { font-size: 17px; }
  .stat .l { font-size: 11px; }

  .grid { gap: 14px; margin-top: 14px; }
  .panel { padding: 14px; border-radius: 14px; margin-bottom: 14px; }
  .panel h2 { font-size: 14px; margin-bottom: 12px; gap: 6px; }
  .panel h2 .ic { font-size: 16px; }
  /* stops dropdown: full width, sits on its own line */
  .panel h2 { flex-wrap: wrap; }
  .stops-view { margin-left: 0; width: 100%; margin-top: 6px; padding: 8px 28px 8px 11px; }
  #map { height: 260px; border-radius: 12px; }
  .map-legend { gap: 10px; font-size: 11px; margin-top: 9px; }

  /* timeline compact */
  .timeline { max-height: 380px; }
  .timeline .stop { grid-template-columns: 26px 1fr auto; gap: 8px; padding: 9px 0; }
  .timeline .stop::before { left: 12px; top: 20px; }
  .timeline .dot-wrap { padding-top: 3px; }
  .timeline .dot { width: 12px; height: 12px; }
  .timeline .info .nm { font-size: 13px; }
  .timeline .info .meta { font-size: 11px; }
  .timeline .times { font-size: 11px; }

  /* coach composition compact */
  .coach-wrap { padding: 12px; border-radius: 12px; margin-top: 12px; }
  .coach-head { font-size: 12px; }
  .coach-hint { font-size: 11px; }
  .coach-tools { gap: 8px; margin-bottom: 10px; }
  .coach-search { padding: 5px 8px; }
  .coach-search input { font-size: 13px; padding: 5px 0; }
  .coach-track { padding: 14px 4px 8px; }
  .coach { min-width: 42px; height: 40px; }
  .coach .c-code { font-size: 10px; }
  .coach .c-pos { font-size: 7px; }
  .coach.is-eng { min-width: 38px; }

  /* seat / berth layout compact */
  .coach-seats { padding: 12px; border-radius: 12px; }
  .seats-head { font-size: 12px; }
  .berth-aisle-label { font-size: 9px; margin-bottom: 6px; }
  .berth-grid { gap: 6px; }
  .bay { width: 78px; gap: 4px; }
  .bay-no { font-size: 8px; }
  .bay-bunks { gap: 2px; }
  .bay-bunks .col, .bay-bunks .side-col { gap: 2px; }
  .bay-bunks .aisle-gap { width: 7px; }
  .berth-cell { width: 22px; height: 14px; border-radius: 3px; }
  .berth-cell .bc-ic { font-size: 8px; }
  .berth-cell .bc-no { font-size: 6px; }
  .berth-cell.is-side { width: 18px; height: 26px; }
  .chair-seat { width: 22px; height: 22px; font-size: 8px; border-radius: 5px 5px 3px 3px; }
  .chair-row .row-no { font-size: 8px; width: 11px; }
  .row-seats { gap: 3px; }
  .chair-aisle { width: 10px; }
  .chair-grid { max-height: 240px; gap: 4px; }
  .seats-legend { gap: 4px 9px; }
  .sl-item { font-size: 9px; }
  .sl-sw { width: 9px; height: 9px; }
  .seats-cap { font-size: 10px; }
  .seat-info { font-size: 11px; padding: 6px 9px; }
  .coach-detail { padding: 8px 10px; gap: 8px; }
  .coach-detail .cd-name { font-size: 12px; }
  .coach-detail .cd-where { font-size: 10px; }

  /* AI insights compact */
  .ai-block .body { font-size: 13px; padding: 11px 12px; }
  .tips li { font-size: 13px; padding: 9px 0 9px 22px; }

  footer { font-size: 12px; padding: 26px 0 22px; }
}

/* Very small phones */
@media (max-width: 360px) {
  .stats { grid-template-columns: 1fr; }
  .bay { width: 72px; }
  .berth-cell { width: 20px; }
  .train-name { font-size: 16px; }
}

/* Mobile rules for new features (tabs, station board, find, toasts, chart) */
@media (max-width: 480px) {
  .tab { font-size: 12px; padding: 9px 12px; }
  .tabs { gap: 2px; }
  .between-form { flex-direction: column; align-items: stretch; gap: 10px; }
  .between-field { min-width: 0; }
  .swap-btn { align-self: center; transform: rotate(90deg); }
  .between-form button[type="submit"] { width: 100%; }
  .board-table { font-size: 12px; }
  .board-table th, .board-table td { padding: 7px 7px; }
  .board-table .bt-type { display: none; }
  .board-table .bt-dur { display: none; }
  .toast-wrap { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .action-row { flex-wrap: wrap; }
  .delay-chart { height: 60px; }
}

/* Light theme */
body.light {
  --bg: #f4f6fc;
  --bg-grad-1: #eef2fb;
  --bg-grad-2: #e3e9f7;
  --panel: rgba(255, 255, 255, 0.82);
  --panel-solid: #ffffff;
  --panel-2: rgba(241, 244, 252, 0.7);
  --border: rgba(20, 30, 60, 0.1);
  --border-strong: rgba(20, 30, 60, 0.18);
  --text: #1a2240;
  --text-dim: #5a6490;
  --text-faint: #8b95b8;
  --shadow: 0 10px 40px rgba(40, 50, 90, 0.12);
  background: radial-gradient(1200px 800px at 80% -10%, #dde4f6 0%, transparent 60%),
              radial-gradient(900px 700px at -10% 110%, #e6ecfb 0%, transparent 55%),
              linear-gradient(160deg, var(--bg-grad-1), var(--bg-grad-2));
}
body.light header { background: rgba(255,255,255,.78); }
body.light .board-table th { background: #fff; }
body.light .delay-chart .dc-pt { stroke: var(--bg); }

/* ----- Modal (sync) + commute + PWA install ----- */
.modal-overlay { position: fixed; inset: 0; background: rgba(4,8,20,.62); backdrop-filter: blur(4px); z-index: 9999; display: grid; place-items: center; padding: 16px; }
.modal-card { background: var(--panel-solid); border: 1px solid var(--border); border-radius: 18px; padding: 26px; width: min(440px, 94vw); box-shadow: var(--shadow); position: relative; }
.modal-card h3 { margin: 0 0 6px; font-size: 18px; }
.modal-sub { color: var(--text-dim); font-size: 13px; margin: 0 0 18px; line-height: 1.5; }
.modal-close { position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; }
.sync-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sync-row label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }
.sync-row input { padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 15px; letter-spacing: 1px; }
.sync-actions { display: flex; gap: 10px; }
.sync-actions button, .sync-row button { flex: 1; padding: 11px; border: none; border-radius: 10px; background: var(--accent-grad); color: #06112e; font-weight: 700; cursor: pointer; font-size: 14px; }
.sync-actions .btn-primary { background: var(--accent-grad); }
.sync-msg { font-size: 13px; margin: 12px 0 0; min-height: 18px; color: var(--text-dim); }
.sync-msg.ok { color: var(--good); }
.sync-msg.err { color: var(--bad); }

.install-prompt { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--panel-solid); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px; z-index: 9000; max-width: 92vw; }
.install-prompt button { border: none; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-weight: 700; font-size: 13px; }
.install-prompt .ip-install { background: var(--accent-grad); color: #06112e; }
.install-prompt .ip-dismiss { background: var(--panel-2); color: var(--text-dim); }

/* lang menu */
.lang-menu { position: absolute; top: 44px; right: 0; background: var(--panel-solid); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; z-index: 8000; display: none; max-height: 70vh; overflow-y: auto; min-width: 160px; }
.lang-menu button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; white-space: nowrap; }
.lang-menu button:hover, .lang-menu button.active { background: var(--panel-2); }