:root { --ink:#172022; --muted:#708085; --paper:#f4f1e9; --green:#174f45; --orange:#e4582d; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); font-family:"Hiragino Sans","Yu Gothic",sans-serif; }
button, input { font:inherit; }
body { overflow:hidden; }
main { height:100vh; display:grid; grid-template-rows:74px minmax(300px,1fr) 270px; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:#f7f4ec; border-bottom:1px solid #d7d3c8; position:relative; z-index:500; }
.brand { display:flex; align-items:center; gap:14px; }
.brand-mark { width:40px; height:40px; display:grid; place-items:center; border:3px solid var(--orange); border-radius:50% 50% 50% 12%; color:var(--orange); font-weight:900; font-style:italic; transform:rotate(-8deg); }
.brand p, .control-heading p { margin:0 0 2px; color:var(--orange); font:700 10px/1.2 ui-monospace,monospace; letter-spacing:.16em; }
.brand h1 { margin:0; font-size:18px; letter-spacing:.035em; }
.upload { display:flex; gap:9px; align-items:center; padding:10px 15px; border:1px solid #c7c5bc; border-radius:7px; background:#fff; font-size:13px; font-weight:700; cursor:pointer; box-shadow:0 2px 5px #17202210; }
.upload input { display:none; }.upload span { color:var(--orange); font-size:19px; line-height:0; }
.map-wrap { min-height:0; position:relative; border-bottom:1px solid #c5c4bc; }.map { height:100%; width:100%; background:#dfe5df; }
.map-status,.legend { position:absolute; z-index:450; top:22px; left:26px; display:flex; align-items:center; gap:12px; background:#fffdf8ee; backdrop-filter:blur(8px); border:1px solid #d5d1c8; border-radius:8px; padding:10px 14px; box-shadow:0 5px 20px #26383218; }
.map-status b { font:800 25px/1 ui-monospace,monospace; }.map-status small,.legend small { display:block; color:var(--muted); margin-top:2px; font-size:10px; }.pulse { width:9px; height:9px; border-radius:50%; background:#36a66d; box-shadow:0 0 0 5px #36a66d25; }
.legend { top:auto; bottom:20px; padding:9px 12px; }.legend>span { width:28px; height:4px; border-radius:3px; background:#0072bc; }.legend b { font-size:11px; }
.leaflet-control-attribution { font-size:9px!important; }.train-marker-shell { background:none!important; border:0!important; }.train-marker { width:28px; height:28px; border-radius:50%; background:white; border:4px solid var(--route); box-shadow:0 2px 9px #0d222a55; display:grid; place-items:center; }.train-marker span { width:8px; height:8px; border-radius:50%; background:var(--route); }
.control-panel { background:#f7f4ec; padding:25px 34px 22px; box-shadow:0 -8px 28px #1f292510; z-index:500; }
.control-heading { display:flex; align-items:flex-end; justify-content:space-between; }.clock { font:800 42px/.95 ui-monospace,"SFMono-Regular",monospace; letter-spacing:-.06em; }.clock span { margin:0; font:inherit; color:inherit; }.clock em { margin-left:12px; font:700 11px/1 sans-serif; letter-spacing:.1em; color:var(--orange); font-style:normal; }
.date-control { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; font-weight:700; }.date-control input { background:white; border:1px solid #c9c6bd; border-radius:6px; padding:7px 9px; color:var(--ink); }
.slider-block { margin-top:18px; }.time-slider { width:100%; height:6px; appearance:none; background:linear-gradient(90deg,var(--orange) 0%,var(--orange) var(--progress,50%),#d2cec3 var(--progress,50%)); border-radius:6px; cursor:pointer; accent-color:var(--orange); }.time-slider::-webkit-slider-thumb { appearance:none; width:18px; height:18px; border-radius:50%; background:var(--orange); border:4px solid white; box-shadow:0 0 0 1px var(--orange),0 2px 4px #0003; }
.ticks { display:flex; justify-content:space-between; color:#7d8583; font:600 10px/1.5 ui-monospace,monospace; margin-top:5px; }
.play-row { display:grid; grid-template-columns:180px 1fr auto; align-items:center; gap:26px; margin-top:19px; }.play { border:0; border-radius:7px; height:47px; background:var(--orange); color:white; font-weight:800; cursor:pointer; box-shadow:0 5px 13px #e4582d38; }.play span { margin-right:10px; }.play.active { background:var(--green); }
.speed { display:flex; align-items:center; gap:14px; }.speed>span { color:var(--muted); font-size:11px; font-weight:700; white-space:nowrap; }.speed>div { display:flex; gap:5px; background:#e6e2d8; padding:4px; border-radius:7px; }.speed button { min-width:44px; padding:7px 10px; border:0; border-radius:5px; background:transparent; color:#6e7776; font:700 11px ui-monospace,monospace; cursor:pointer; }.speed button.selected { background:white; color:var(--orange); box-shadow:0 1px 5px #293b321f; }
.file-state { display:flex; align-items:center; gap:9px; padding-left:20px; border-left:1px solid #d4d0c7; max-width:210px; }.file-state>span { color:#39a36e; font-size:8px; }.file-state small { display:block; color:var(--muted); font-size:9px; }.file-state b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; margin-top:2px; }
@media (max-width:780px) { body { overflow:auto; } main { min-height:100vh; height:auto; grid-template-rows:66px 48vh auto; }.topbar { padding:0 16px; }.brand h1 { font-size:14px; }.brand p { display:none; }.brand-mark { width:34px;height:34px; }.upload { padding:8px 10px; font-size:11px; }.control-panel { padding:20px 17px 24px; }.clock { font-size:35px; }.play-row { grid-template-columns:1fr; gap:12px; }.speed { justify-content:space-between; overflow:auto; }.speed button { min-width:38px; }.file-state { border:0; padding:0; }.date-control { align-items:flex-start; flex-direction:column; gap:3px; }.map-status { left:14px; top:14px; }.legend { left:14px; bottom:14px; } }
@media (max-height:700px) and (min-width:781px) { main { grid-template-rows:64px minmax(250px,1fr) 225px; }.control-panel { padding-top:18px; }.clock { font-size:34px; }.slider-block { margin-top:12px; }.play-row { margin-top:12px; } }