*{box-sizing:border-box}
:root{--panel:#0d1a31;--panel2:#152644;--line:#27467d;--text:#f8fafc;--muted:#a7b7d5;--accent:#3268e0;--accent2:#1f4db8;--ok:#22c55e;--warn:#f59e0b;--danger:#c24141;--danger2:#932f35;--link-on-panel:#ffffff;--link-on-panel-hover:#dbeafe}
body[data-theme="light"]{--panel:#ffffff;--panel2:#f4f8fd;--line:#c8d7ec;--text:#10213c;--muted:#5c6f92;--accent:#215fdf;--accent2:#1b4eb3;--ok:#168b43;--warn:#c08407;--link-on-panel:#173364;--link-on-panel-hover:#0f4bb8}
html,body{margin:0;min-height:100%}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:radial-gradient(circle at top,#09204a 0%,#050d1a 55%,#040914 100%);color:var(--text)}body[data-theme="light"]{background:linear-gradient(180deg,#f0f6ff 0%,#e8f1fb 100%)}
.container{max-width:1360px;margin:0 auto;padding:0 22px}.layout-gap{display:grid;gap:18px;padding-bottom:34px}.topbar{padding-top:20px;padding-bottom:16px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.compact-topbar{padding-bottom:6px}.top-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.eyebrow{color:#93c5fd;font-size:1rem;font-weight:650}body[data-theme="light"] .eyebrow{color:#29539b}h1{margin:10px 0 0;font-size:4rem;line-height:1}.subtitle{margin:10px 0 0;color:var(--muted);font-size:1.2rem}h2{margin-top:0;font-size:1.8rem}h3{margin-top:0}.card{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 16px 40px rgba(0,0,0,.18)}
.status-pill,.theme-toggle,.secondary-link,.icon-button{border-radius:14px;border:1px solid var(--line);background:rgba(50,104,224,.12);color:var(--text);padding:10px 14px;font-weight:700;text-decoration:none}.theme-toggle,.icon-button{cursor:pointer}.icon-button{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;font-size:1.3rem}
.action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}.big-link,.primary,.danger-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:0;cursor:pointer;border-radius:18px;padding:16px 20px;font-size:1.2rem;font-weight:800}.big-link,.primary{background:var(--accent);color:var(--link-on-panel);min-height:74px}.big-link:hover,.primary:hover{background:var(--accent2);color:var(--link-on-panel-hover)}.big-link:visited,.primary:visited{color:var(--link-on-panel)}.danger-button{background:var(--danger);color:#fff;min-height:64px}.danger-button:hover{background:var(--danger2)}
.vehicle-cards,.stats-grid,.gps-grid,.option-grid,.report-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.vehicle-card,.stat,.report-item,.gps-quickinfo,.station-card,.operation-card,.option-card{background:var(--panel2);border:1px solid var(--line);border-radius:18px;padding:16px}.vehicle-card{color:var(--text);text-decoration:none}.vehicle-card:hover{border-color:#7ab4ff}.vehicle-card:visited{color:var(--text)}.callsign,.report-item-title{font-weight:800}.muted{color:var(--muted)}.small{font-size:.95rem}.footer{text-align:center;padding:10px 20px 28px;color:var(--muted)}
.station-wrapper{display:grid;gap:12px}.station-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}.vehicle-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.mini-actions{max-width:700px}.vehicle-type{margin:0;font-size:1.25rem;color:var(--muted)}
.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.metric-card{width:100%;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:var(--panel2);color:var(--text);border-radius:20px;border:2px solid var(--line);padding:18px 14px;gap:10px;cursor:pointer}.metric-card.active{border-color:#7ab4ff;box-shadow:0 0 0 4px rgba(122,180,255,.12)}.metric-value{font-size:3rem;font-weight:900}
.keypad-card,.map-card{margin-top:18px;background:var(--panel2);border:1px solid var(--line);border-radius:22px;padding:18px}.keypad-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;color:var(--muted)}.keypad-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.key{min-height:78px;border-radius:18px;border:0;cursor:pointer;background:#1e3d72;color:#fff;font-size:1.8rem;font-weight:900}body[data-theme="light"] .key{background:#d6e3f9;color:#16335e}.key-danger{background:#86383a;font-size:1.2rem}.key-soft{background:#40597a}
.save-area{margin-top:18px;display:grid;gap:12px}.notice-ok{color:#b7f7c2}.notice-error{color:#fecaca}.notice-warn{color:#fde68a}.report-list,.station-groups{display:grid;gap:10px}.report-item-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.report-item-values div{background:rgba(8,18,35,.25);border-radius:12px;padding:10px}.gps-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}#map{width:100%;height:480px;border-radius:18px;overflow:hidden}.leaflet-container{border-radius:18px}.legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;color:var(--muted)}.legend-item{display:flex;align-items:center;gap:8px}.legend-dot{width:12px;height:12px;border-radius:999px;display:inline-block}.legend-missing{background:#f59e0b}
.dialog-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:16px;z-index:1000}.dialog-backdrop.show{display:flex}.dialog{width:min(560px,100%);background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.35)}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.switch{position:relative;width:58px;height:32px;background:rgba(255,255,255,.18);border:1px solid var(--line);border-radius:999px;cursor:pointer}.switch::after{content:'';position:absolute;top:3px;left:4px;width:24px;height:24px;border-radius:999px;background:#fff;transition:transform .18s ease}.switch.active{background:rgba(50,104,224,.45)}.switch.active::after{transform:translateX(25px)}
@media(max-width:900px){.topbar,.vehicle-head{flex-direction:column}.metric-grid{grid-template-columns:1fr}}@media(max-width:700px){h1{font-size:3rem}.subtitle{font-size:1.05rem}#map{height:360px}.dialog-actions{grid-template-columns:1fr}}