:root {
  --bg: #f4f1ea; --card: #ffffff; --ink: #0b1d2a; --muted: #5d6b75; --line: #d9d3c7;
  --head: #0b1d2a; --headink: #f4f1ea; --me: #ffe08a; --best: #0a7d3b; --worst: #b3261e;
  --accent: #0b5cad; --stale: #a0a7ad; --s1: #2a78d6; --s2: #eb6834; --th: #1baf7a; --gl: #c9c6bd;
  --hid: #eda100; --grid: #e6e2d8;
}
.dark {
  --bg: #071118; --card: #0d1b26; --ink: #eef3f6; --muted: #8fa3b1; --line: #1f3240;
  --head: #000000; --headink: #eef3f6; --me: #5a4a10; --best: #45d483; --worst: #ff7b72;
  --accent: #6cb6ff; --stale: #4f5d68; --s1: #3987e5; --s2: #d95926; --th: #199e70; --gl: #3a4650;
  --hid: #c98500; --grid: #1c2c38;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.3 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
header { position: sticky; top: 0; z-index: 5; background: var(--head); color: var(--headink);
  padding: calc(6px + env(safe-area-inset-top)) 10px 6px; }
.bar { display: flex; align-items: center; gap: 8px; }
.clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; }
.sub { font-size: 13px; opacity: .85; }
.sub.bad { color: #ffb4a9; opacity: 1; font-weight: 700; }
.grow { flex: 1; }
.me { font-weight: 800; font-size: 14px; }
.title { font-size: 12px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title:empty { display: none; }
button, select, input { font: inherit; color: inherit; background: transparent; border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; min-height: 40px; }
header button { border-color: #ffffff55; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
button:disabled { opacity: .45; }
input[type=number] { width: 6em; }
nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; background: var(--card);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
nav a { flex: 1; text-align: center; padding: 14px 2px; color: var(--muted); text-decoration: none; font-weight: 700; font-size: 14px; }
nav a.on { color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
body:not(.devmode) nav .dev { display: none; }
main { padding: 0; }
.pad { padding: 12px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 10px 0; }
.card h3 { margin: 0 0 8px; font-size: 16px; }
.muted { color: var(--muted); font-size: 13px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.list button { display: block; width: 100%; text-align: left; margin: 6px 0; background: var(--card); }
.list button.on { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.tag { font-size: 11px; color: var(--muted); font-weight: 600; margin-left: 3px; }
.ok { color: var(--best); font-weight: 700; } .bad { color: var(--worst); font-weight: 700; }
.wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--card); font-variant-numeric: tabular-nums; }
th, td { padding: 8px 7px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
th { position: sticky; top: 0; background: var(--card); color: var(--muted); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em; cursor: pointer; }
th small { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; }
th:first-child, td:first-child { position: sticky; left: 0; text-align: left; background: var(--card); font-weight: 800; z-index: 1;
  box-shadow: 1px 0 0 var(--line); }
table.live td { font-size: 18px; }
table.small td { font-size: 14px; } table.small td:first-child { font-weight: 600; }
tr.me td { background: var(--me); }
tr.dim td { color: var(--stale); }
td.best { color: var(--best); font-weight: 800; } td.worst { color: var(--worst); }
td.left, th.left { text-align: left; }
tr.click { cursor: pointer; }
.empty { padding: 30px 14px; color: var(--muted); text-align: center; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 72vh; overflow-y: auto; z-index: 10; background: var(--card);
  border-top: 3px solid var(--accent); box-shadow: 0 -8px 30px #0005; padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform .18s; }
.sheet:not(.open) { visibility: hidden; }
.sheet.open { transform: none; }
.sheet h2 { margin: 0 0 8px; font-size: 20px; display: flex; justify-content: space-between; align-items: center; }
.ev { display: grid; grid-template-columns: 4.2em 2.2em 1fr; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ev .k { font-weight: 800; } .ev.T .k { color: var(--best); } .ev.G .k { color: var(--accent); } .ev.hidden { opacity: .6; }
#map { height: calc(100vh - 180px); min-height: 320px; }
.mapbar { display: flex; gap: 6px; padding: 8px; flex-wrap: wrap; align-items: center; background: var(--card); border-bottom: 1px solid var(--line); }
.leaflet-popup-content { font-size: 14px; line-height: 1.35; }
.chart { width: 100%; display: block; }
.chart text { fill: var(--muted); font-size: 11px; }
.chart .ax { stroke: var(--line); } .chart .gr { stroke: var(--grid); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 4px 0; }
.legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }
.tip { position: fixed; pointer-events: none; z-index: 20; background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 8px; font-size: 13px; box-shadow: 0 4px 14px #0003; display: none; font-variant-numeric: tabular-nums; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.grid2 .card { margin: 0; }
.kpi { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.login { max-width: 360px; margin: 60px auto; }
.login input { width: 100%; margin: 8px 0; }