:root { color-scheme:dark; --bg:#0c1116; --panel:#141c23; --line:#28333e; --muted:#97a8b7; --text:#ebf1f5; --logbook-accent:#72dfb5; --logbook-button:#19232c; --logbook-hover:#212e38; --logbook-input:#0f171f; --logbook-input-line:#36434f; --logbook-primary-ink:#10261f; --logbook-primary-hover:#8de8c4; --logbook-delay:#ffbc7a; --logbook-error:#ffb4a9; --logbook-danger:#ff8a80; --logbook-danger-bg:#ff8a8018; --logbook-chart:#72dfb580; --logbook-map-bg:#192a32; }
* { box-sizing:border-box; }
html[data-theme="light"] {
  color-scheme:light;
  --bg:#eef1f5; --panel:#ffffff; --line:#cbd5df; --muted:#526372; --text:#172b3a;
  --logbook-accent:#047857; --logbook-button:#ffffff; --logbook-hover:#e2e9ef;
  --logbook-input:#ffffff; --logbook-input-line:#a9bac8;
  --logbook-primary-ink:#ffffff; --logbook-primary-hover:#065f46;
  --logbook-delay:#9a3412; --logbook-error:#b91c1c; --logbook-danger:#b91c1c;
  --logbook-danger-bg:#fee2e2; --logbook-chart:#047857b3; --logbook-map-bg:#dce6eb;
}
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
main { max-width:1328px; margin:auto; padding:38px 32px 32px; }
.hero { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:30px; }
.hero h1 { font-size:32px; font-weight:650; line-height:1.2; letter-spacing:-.8px; margin:0 0 10px; }
.hero p { color:var(--muted); margin:0; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.theme-picker { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.theme-picker select { font-size:12px; }
main input::placeholder,dialog input::placeholder,dialog textarea::placeholder { color:var(--muted); opacity:1; }
.eyebrow { color:var(--muted); font-size:12px; margin:0 0 6px; }
button,.button,input,select,textarea { font:inherit; }
button,.button { display:inline-block; padding:8px 12px; border-radius:5px; border:1px solid var(--line); background:var(--logbook-button); color:var(--text); cursor:pointer; }
button:hover,.button:hover { border-color:var(--muted); background:var(--logbook-hover); }
button:disabled { opacity:.5; cursor:default; }
.primary { background:var(--logbook-accent); border-color:var(--logbook-accent); color:var(--logbook-primary-ink); font-weight:600; }
.primary:hover { background:var(--logbook-primary-hover); border-color:var(--logbook-primary-hover); }
.hero .primary { padding:10px 16px; white-space:nowrap; }
h2 { font-size:17px; font-weight:600; letter-spacing:-.2px; margin:0 0 18px; }
h3 { font-size:15px; margin:0 0 8px; }
.panel { background:transparent; border:0; border-radius:0; padding:0; }
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.panel-head h2 { margin:0; }
.summary { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-bottom:32px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.metric { padding:0 24px; border-left:1px solid var(--line); }
.metric:first-child { border-left:0; padding-left:0; }
.metric strong { display:block; font-size:27px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.5px; margin-top:4px; }
.metric span,.metric small { display:block; color:var(--muted); }
.metric span { font-size:12px; }
.metric small { font-size:11px; margin-top:3px; }
.metric small:empty { display:none; }
.explore-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:32px; margin-bottom:34px; }
#map { height:350px; border:1px solid var(--line); border-radius:5px; background:var(--logbook-map-bg); z-index:0; }
.legend { display:flex; gap:9px; align-items:center; flex-wrap:wrap; font-size:11px; color:var(--muted); margin:12px 0 0; }
.legend i { width:18px; border-top:3px solid var(--logbook-accent); }
.legend .rail-network { border-color:#cbd5e1; }
.legend .dashed { border-top-style:dashed; }
.legend .dot { width:7px; height:7px; border-radius:50%; background:var(--logbook-accent); border:0; }
.muted { color:var(--muted); font-size:12px; }
#map-note { margin:6px 0 0; font-size:11px; }
.records-panel { border-left:1px solid var(--line); padding-left:28px; }
.records-panel h2 { margin:8px 0 12px; }
.record { padding:15px 0; border-bottom:1px solid var(--line); }
.record:last-child { border:0; }
.record small { color:var(--muted); display:block; margin-bottom:4px; font-size:12px; }
.record strong { display:block; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }
.record span { display:block; font-size:12px; color:var(--muted); margin-top:3px; overflow-wrap:anywhere; }
.journeys-panel { margin-bottom:32px; border-top:1px solid var(--line); padding-top:24px; }
.badge { display:inline-block; color:var(--muted); font-size:12px; font-weight:400; vertical-align:middle; margin-left:8px; font-variant-numeric:tabular-nums; }
.filters { display:flex; gap:8px; margin-bottom:16px; }
input,select,textarea { background:var(--logbook-input); border:1px solid var(--logbook-input-line); border-radius:5px; padding:9px 11px; color:var(--text); min-width:0; }
input[type=search] { flex:1; }
input:focus,select:focus,textarea:focus { outline:2px solid var(--logbook-accent); outline-offset:2px; }
.table-scroll { overflow:auto; border:1px solid var(--line); border-radius:5px; }
table { width:100%; border-collapse:collapse; white-space:nowrap; text-align:left; }
th { font-size:12px; color:var(--muted); font-weight:500; background:var(--panel); padding:11px 12px; border-bottom:1px solid var(--line); }
td { padding:15px 12px; border-bottom:1px solid var(--line); font-size:12px; font-variant-numeric:tabular-nums; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--panel); }
td strong { display:block; font-size:13px; font-weight:600; }
td small { display:block; color:var(--muted); max-width:230px; white-space:normal; margin-top:3px; }
.delay { color:var(--logbook-delay); }
.on-time { color:var(--logbook-accent); }
td button { padding:5px 8px; font-size:11px; margin:2px; }
button.confirm-delete { color:var(--logbook-danger); border-color:var(--logbook-danger); background:var(--logbook-danger-bg); }
.empty { text-align:center; padding:40px 16px; color:var(--muted); }
.empty h3 { color:var(--text); }
.empty p { margin:8px 0 20px; }
.bottom-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; border-top:1px solid var(--line); padding-top:24px; }
.months { display:flex; height:155px; gap:12px; align-items:end; }
.month { flex:1; text-align:center; min-width:0; font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }
.month b { display:block; background:var(--logbook-chart); border-radius:2px 2px 0 0; min-height:3px; margin:6px 0; }
.month span { display:block; }
.loco-row { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; }
.loco-row strong { font-weight:500; overflow-wrap:anywhere; }
.loco-row span { color:var(--muted); white-space:nowrap; }
.footer-note { font-size:11px; color:var(--muted); margin:24px 0 0; }
#notice { color:var(--muted); }
#notice:empty { display:none; }
#notice.error,#form-notice { color:var(--logbook-error); }
#login { padding:24px; border:1px solid var(--line); border-radius:5px; }
dialog { color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:8px; max-width:760px; width:calc(100% - 32px); max-height:90dvh; padding:26px; }
dialog::backdrop { background:#000a; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid label { font-size:12px; color:var(--muted); }
.form-grid input,.form-grid select,.form-grid textarea { display:block; width:100%; margin-top:6px; }
.form-grid .wide { grid-column:1/-1; }
.form-grid .check { display:flex; align-items:center; gap:8px; }
.check input { width:auto; }
.import-box { border:1px solid var(--line); background:var(--logbook-input); border-radius:5px; padding:16px; margin-bottom:20px; }
.import-box p { font-size:12px; color:var(--muted); }
.import-actions { display:flex; flex-wrap:wrap; gap:8px; }
.import-actions select { max-width:100%; }
.form-footer { display:flex; justify-content:flex-end; gap:10px; padding-top:16px; border-top:1px solid var(--line); }
[hidden] { display:none!important; }
:focus-visible { outline:2px solid var(--logbook-accent); outline-offset:3px; }
.leaflet-popup-content { color:#17242a; }
.leaflet-control-attribution a { color:#1c5772; }
/* The shared fixed header keeps its own styles. */
.logbook-page { height:auto; overflow:auto; }
.logbook-page main { padding-top:94px; }
.logbook-page main > .account-back { display:inline-block; margin-bottom:24px; font-size:12px; color:var(--muted); }
.logbook-page main > .account-back:hover { color:var(--text); }
.logbook-page #map { position:relative; inset:auto; width:100%; }
.logbook-page #editor { margin:auto; }
.logbook-page main .panel { width:auto!important; height:auto!important; min-width:0; max-width:100%; display:block; transform:none; transition:none; overflow:visible; }
.logbook-page .top-bar input { flex:none; }
@media(max-width:1000px) {
  .explore-grid { grid-template-columns:minmax(0,1fr) 250px; gap:24px; }
  .records-panel { padding-left:22px; }
  .filters { flex-wrap:wrap; }
  .filters input { flex-basis:100%; }
}
@media(max-width:700px) {
  main { padding:24px 16px; }
  .hero { align-items:flex-start; flex-direction:column; gap:18px; margin-bottom:24px; }
  .hero h1 { font-size:28px; }
  .summary { grid-template-columns:1fr 1fr; row-gap:20px; padding:18px 0; margin-bottom:26px; }
  .metric { padding:0 16px; }
  .metric:nth-child(odd) { border-left:0; padding-left:0; }
  .metric strong { font-size:24px; }
  .explore-grid,.bottom-grid { grid-template-columns:1fr; gap:24px; }
  .records-panel { padding:22px 0 0; border-left:0; border-top:1px solid var(--line); }
  .records-panel h2 { margin:0 0 8px; }
  #records { display:grid; grid-template-columns:1fr 1fr; column-gap:20px; }
  .record { padding:12px 0; }
  .record:nth-last-child(-n+2) { border-bottom:0; }
  .record strong { font-size:15px; }
  .panel-head { gap:10px; }
  .panel-head button { font-size:11px; padding:8px; }
  #map { height:300px; }
  .filters select { flex:1; width:100px; font-size:12px; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid .wide { grid-column:auto; }
  dialog { padding:18px; }
  .legend { font-size:10px; }
  .months { gap:6px; }
  .footer-note { line-height:1.7; }
}