:root { --ink:#19202c; --muted:#6e7785; --line:#e4e7eb; --paper:#fff; --soft:#f5f6f4; --accent:#d94f30; --green:#22c681; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"IBM Plex Sans",system-ui,sans-serif; }
.topbar { height:70px; position:sticky; top:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; padding:10px clamp(18px,4vw,64px); background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.loading-bar { position:fixed; z-index:1200; top:70px; left:0; width:100%; height:3px; overflow:hidden; opacity:0; pointer-events:none; transition:opacity .18s ease; }.loading-bar.active { opacity:1; }.loading-bar span { display:block; width:36%; height:100%; background:linear-gradient(90deg,#ec8a34,#d94f30); animation:loading-slide 1s ease-in-out infinite; }@keyframes loading-slide { from { transform:translateX(-110%); } to { transform:translateX(380%); } }
.nav-actions { display:flex; align-items:center; gap:10px; }.text-button { border:0; background:transparent; color:#435264; font:600 13px "IBM Plex Sans",sans-serif; cursor:pointer; }.text-button:hover { color:var(--accent); }
.brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; }.brand strong { display:block; font-size:21px; letter-spacing:-.04em; }.brand small { display:block; color:var(--muted); font-size:12px; }.logo { width:48px; height:48px; object-fit:contain; }
.primary-button,.outline-button { border:0; border-radius:8px; padding:11px 15px; font:600 14px/1 "IBM Plex Sans",sans-serif; cursor:pointer; }.primary-button { background:var(--green); color:#09271b; }.primary-button span { font-size:18px; line-height:0; margin-left:4px; }.outline-button { border:1px solid var(--ink); color:var(--ink); background:var(--paper); }
.map-section { position:relative; height:min(55vh,620px); min-height:400px; border-bottom:1px solid var(--line); }#map { width:100%; height:100%; background:#dfe7df; }.leaflet-container { font-family:inherit; }.map-caption { position:absolute; z-index:500; left:18px; bottom:18px; padding:8px 11px; border-radius:7px; background:rgba(255,255,255,.93); color:#4f5864; box-shadow:0 4px 18px rgba(30,40,50,.12); font-size:12px; }.map-dot { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--accent); }
.history-section { max-width:1240px; margin:0 auto; padding:38px clamp(18px,4vw,64px) 80px; }.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:2px solid var(--ink); }.summary-grid div { padding:0 22px 26px 0; }.summary-grid strong { display:inline-block; font-size:44px; font-weight:500; letter-spacing:-.06em; }.summary-grid span { margin-left:7px; color:var(--muted); font-size:20px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; padding:31px 0 18px; }.eyebrow { margin:0 0 5px; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }.section-heading h1 { margin:0; font-size:28px; letter-spacing:-.04em; }
.profile-section { max-width:1240px; margin:0 auto; padding:38px clamp(18px,4vw,64px) 80px; }.profile-title { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:24px; }.profile-title h1 { margin:0; font-size:28px; letter-spacing:-.04em; }.journey-count-button { appearance:none; border:0; background:transparent; padding:0 22px 26px 0; color:inherit; text-align:left; cursor:pointer; }.journey-count-button strong { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }.journey-count-button:hover strong { color:var(--accent); }.stats-heading { padding:30px 0 15px; }.stats-heading h2 { margin:0; font-size:24px; letter-spacing:-.04em; }.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.stat-card { min-height:112px; padding:16px; border:1px solid var(--line); border-radius:9px; background:#fafbfa; }.stat-card p { margin:0 0 12px; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }.stat-card strong { display:block; overflow:hidden; font-size:17px; text-overflow:ellipsis; white-space:nowrap; }.stat-card small { display:block; margin-top:5px; color:var(--muted); }.auth-gate { max-width:540px; margin:54px auto; padding:42px; border:1px solid var(--line); border-radius:12px; background:#fafbfa; text-align:center; }.auth-gate h2 { margin:10px 0 6px; }.auth-gate p { margin:0 0 20px; color:var(--muted); line-height:1.5; }.gate-icon { color:var(--accent); font-size:34px; }.site-footer { padding:22px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; text-align:center; }.site-footer span { color:var(--accent); }.site-footer a { color:#2b5f93; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.journey-list { min-height:240px; }.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:300px; padding:40px; border:1px dashed #cfd4da; background:#fafbfa; text-align:center; }.empty-icon { color:var(--accent); font-size:33px; }.empty-state h2 { margin:10px 0 4px; font-size:20px; }.empty-state p { max-width:460px; margin:0 0 20px; color:var(--muted); line-height:1.55; }
.journey-card { display:grid; grid-template-columns:1fr auto auto auto auto; align-items:center; gap:18px; padding:20px 0; border-top:1px solid var(--line); }.journey-card:last-child { border-bottom:1px solid var(--line); }.journey-date { margin:0 0 4px; color:var(--muted); font-size:13px; }.journey-train { margin:0; font-size:19px; }.journey-route { margin:4px 0 0; color:#4d5663; }.journey-meta { color:var(--muted); font-size:13px; }.route-status { padding:5px 8px; border-radius:99px; background:#fff3e9; color:#a44425; font-size:11px; font-weight:600; white-space:nowrap; }.route-status.mapped { background:#e8f8f0; color:#187a4f; }.delete-journey,.edit-journey { border:0; background:transparent; font:600 12px "IBM Plex Sans",sans-serif; cursor:pointer; }.edit-journey { color:#40566e; }.delete-journey { color:#a23a32; }.delete-journey:hover,.edit-journey:hover { text-decoration:underline; }
.journey-dialog { width:min(650px,calc(100vw - 28px)); padding:0; border:0; border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.28); }.journey-dialog::backdrop { background:rgba(22,29,40,.54); }.dialog-header { display:flex; align-items:start; justify-content:space-between; padding:24px 24px 14px; }.dialog-header h2 { margin:0; font-size:25px; letter-spacing:-.04em; }.icon-button { border:0; background:transparent; color:var(--muted); font-size:29px; line-height:1; cursor:pointer; }.entry-choice { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 24px 18px; }.entry-card { min-height:108px; display:flex; flex-direction:column; align-items:start; gap:4px; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); text-align:left; cursor:pointer; }.entry-card.selected { border:2px solid var(--accent); background:#fff8f5; }.entry-card small { color:var(--muted); line-height:1.35; }.card-icon { color:var(--accent); font-size:19px; }form { padding:0 24px 24px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }label { display:flex; flex-direction:column; gap:6px; color:#495260; font-size:13px; font-weight:600; }label span { color:var(--muted); font-weight:400; }input { width:100%; padding:10px 11px; border:1px solid #cfd4da; border-radius:7px; color:var(--ink); font:400 14px "IBM Plex Sans",sans-serif; outline:none; }input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(217,79,48,.12); }.form-note { margin:0 24px 16px; color:var(--muted); font-size:12px; line-height:1.45; }.submit-button { width:100%; }
input,select { width:100%; padding:10px 11px; border:1px solid #cfd4da; border-radius:7px; color:var(--ink); background:white; font:400 14px "IBM Plex Sans",sans-serif; outline:none; }
input:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(217,79,48,.12); }
input:disabled,select:disabled { background:#f1f2f3; color:#8a939f; cursor:not-allowed; }
.field-help { min-height:16px; color:var(--muted); font-size:11px; font-weight:400; line-height:1.25; }.field-help.error { color:#b33124; }.field-help.success { color:#177149; }
.pnr-lookup { display:grid; grid-template-columns:1fr auto; align-items:end; gap:10px; padding:0 24px 8px; }.pnr-lookup .outline-button { height:40px; }.pnr-result { margin:10px 24px 14px; padding:14px; border:1px solid var(--line); border-radius:9px; background:#fafbfa; }.pnr-result > p { margin:5px 0 12px; color:var(--muted); font-size:13px; line-height:1.45; }.passenger-list { display:grid; gap:7px; }.passenger-option { display:flex; flex-direction:row; align-items:flex-start; gap:9px; padding:9px; border:1px solid var(--line); border-radius:7px; background:#fff; cursor:pointer; }.passenger-option input { width:auto; margin-top:3px; }.passenger-option strong,.passenger-option small { display:block; }.passenger-option small { margin-top:2px; color:var(--muted); font-size:12px; font-weight:400; }
.journey-limit { margin:0 24px 24px; padding:28px 20px; border:1px solid #f0c9b8; border-radius:10px; background:#fff8f5; text-align:center; }.journey-limit span { color:var(--accent); font-size:23px; }.journey-limit h3 { margin:7px 0 5px; font-size:18px; }.journey-limit p { max-width:390px; margin:0 auto; color:var(--muted); font-size:13px; line-height:1.45; }
@media (max-width:640px) { .topbar { height:62px; }.brand small { display:none; }.brand strong { font-size:18px; }.map-section { height:47vh; min-height:330px; }.summary-grid strong { display:block; font-size:31px; }.summary-grid span { margin:0; font-size:13px; }.section-heading { align-items:start; }.section-heading h1 { font-size:23px; }.outline-button { padding:9px 10px; font-size:12px; }.journey-card { grid-template-columns:1fr auto auto auto; }.journey-meta { grid-column:1/-1; }.form-grid,.entry-choice,.pnr-lookup { grid-template-columns:1fr; }.entry-card { min-height:82px; }.profile-title { align-items:start; }.stats-grid { grid-template-columns:1fr 1fr; }.auth-gate { margin:25px auto; padding:28px 20px; } }