:root { --ink: #14213D; --muted: #64748B; --line: #DCE3EF; --bg: #F4F7FC; --blue: #0066FF; --lime: #84CC16; --red: #E10600; --amber: #F59E0B; --r: 12px;
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.35 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg);
  background-image: radial-gradient(circle at 100% 0, #E0ECFF 0, transparent 40%), radial-gradient(circle at 0 100%, #ECFCCB 0, transparent 35%); min-height: 100vh; }
.t, input[type=number] { font-variant-numeric: tabular-nums; }
header.top { display: flex; align-items: center; gap: 12px; padding: 8px 18px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
header.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: linear-gradient(90deg, var(--blue) 0 33%, #EC4899 33% 50%, var(--lime) 50% 75%, #06B6D4 75%); }
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand i { width: 26px; height: 18px; align-self: center; background: repeating-linear-gradient(115deg, var(--blue) 0 5px, transparent 5px 8px, #EC4899 8px 13px, transparent 13px 16px, var(--lime) 16px 21px, transparent 21px 24px); }
.brand b { font: italic 800 26px var(--display); letter-spacing: .02em; }
.brand span { color: var(--muted); font-size: 12px; }
.grow { flex: 1; }
.btn { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 9px; padding: 5px 11px; font: 700 13px Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: #B8C4D8; }
.btn.go { background: var(--lime); border-color: var(--lime); color: #14213D; }
.btn.stop { background: var(--red); border-color: var(--red); color: #fff; }
.btn.blue { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.on { background: var(--amber); border-color: var(--amber); color: #fff; }
.btn.cmd { font: italic 800 15px var(--display); letter-spacing: .03em; padding: 5px 12px; text-transform: uppercase; }
.btn:disabled { opacity: .45; cursor: default; }
.wrap { padding: 14px 18px 30px; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 2px 10px rgba(20, 33, 61, .05); }
.panel { overflow: hidden; display: flex; flex-direction: column; }
.panel .hd { display: flex; align-items: center; gap: 8px; padding: 7px 12px; color: #fff; background: linear-gradient(115deg, var(--c), color-mix(in srgb, var(--c) 70%, #fff)); }
.panel .hd b { font: italic 800 24px var(--display); text-transform: uppercase; letter-spacing: .02em; }
.panel .hd .url { font-size: 11px; opacity: .85; }
.pill { display: inline-block; border-radius: 99px; padding: 2px 9px; font-size: 11px; font-weight: 800; background: rgba(255, 255, 255, .25); color: #fff; white-space: nowrap; }
.pill.run { background: #fff; color: #15803D; } .pill.ok { background: #DCFCE7; color: #15803D; } .pill.bad { background: #FEE2E2; color: var(--red); }
.panel .bd { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 7px; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
label.f { display: flex; flex-direction: column; font-size: 11px; font-weight: 700; color: var(--muted); gap: 2px; }
select, input, textarea { font: 13px Inter, system-ui, sans-serif; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 4px 7px; background: #fff; height: 30px; }
textarea { height: 46px; width: 100%; resize: vertical; font: 12px ui-monospace, Consolas, monospace; }
input[type=number] { width: 74px; }
.strip { position: relative; height: 34px; border-radius: 8px; background: #F1F5FB; border: 1px solid var(--line); }
.strip .tick { position: absolute; top: 0; bottom: 0; width: 2px; background: #94A3B8; }
.strip .tick.main { background: var(--ink); width: 3px; } .strip .tick.pit { background: var(--amber); }
.strip .tick span { position: absolute; top: -1px; left: 3px; font-size: 9px; color: var(--muted); white-space: nowrap; }
.strip .car { position: absolute; top: 13px; width: 11px; height: 11px; margin-left: -5px; border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); transition: left .9s linear; }
.strip .car.Held, .strip .car.Waiting { background: #94A3B8; } .strip .car.PitLane, .strip .car.Pits, .strip .car.Leaving { background: var(--amber); top: 22px; }
.strip .car.Stopped { background: var(--red); } .strip .car.gps { box-shadow: 0 0 0 2px #06B6D4; }
.strip .seg { position: absolute; top: 0; height: 6px; border-radius: 3px; }
.stats { font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.stats b { color: var(--ink); }
.err { color: var(--red); font-size: 12px; font-weight: 700; }
.log { font: 11px ui-monospace, Consolas, monospace; color: var(--muted); max-height: 46px; overflow: hidden; }
.msg { font-size: 12px; font-weight: 600; color: #15803D; min-height: 16px; }
.tiny { font-size: 11px; color: var(--muted); }
.cmds { display: flex; gap: 5px; flex-wrap: wrap; }
body.login { display: grid; place-items: center; }
.loginbox { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; width: 320px; }
.loginbox input { width: 100%; height: 36px; margin-top: 4px; }