/* ธีมร่วมของหน้า demo ทั้งหมด */
:root {
  --bg: #0e1410;
  --panel: #182018e6;
  --line: #ffffff1f;
  --ink: #eaf0e8;
  --muted: #eaf0e899;
  --danger: #e5484d;
  --warning: #f2c744;
  --safe: #3fb950;
  --accent: #4c9aff;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", sans-serif;
}
a { color: var(--accent); }
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px; border-bottom: 1px solid var(--line); background: #0b100c;
}
.topbar h1 { font-size: 15px; margin: 0; font-weight: 650; }
.topbar .spacer { flex: 1; }
.topbar a { text-decoration: none; font-size: 13px; opacity: .8; }
.topbar a:hover { opacity: 1; }
.live {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  padding: 3px 10px; border-radius: 999px; background: #3fb95022; color: var(--safe);
}
.live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--safe); animation: blink 2s infinite;
}
@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px;
}
.panel h2 { margin: 0 0 10px; font-size: 15px; font-weight: 650; }
.muted { color: var(--muted); }

/* ---------- แผนที่ SVG ---------- */
svg.map { width: 100%; height: 100%; display: block; background: #16210f; border-radius: 14px; }
.course .water { fill: #1d4e63; }
.course .fairway { stroke: #38612c; stroke-width: 58; stroke-linecap: round; fill: none; }
.course .green { fill: #63a83d; }
.course .tee { fill: #4d7a35; }
.course .hole-label {
  fill: #ffffffb0; font-size: 26px; text-anchor: middle; font-weight: 600;
  paint-order: stroke; stroke: #00000088; stroke-width: 5px;
}

.zone { fill: none; stroke-width: 3; }
.zone.danger { stroke: var(--danger); fill: #e5484d1a; }
.zone.warning { stroke: var(--warning); fill: #f2c74412; }
.zone.safe { stroke: var(--safe); fill: #3fb95010; }

.cart { stroke: #0b100c; stroke-width: 2.5; }
.cart.danger { fill: var(--danger); }
.cart.warning { fill: var(--warning); }
.cart.safe, .cart.normal { fill: var(--safe); }
.cart.own { fill: var(--accent); stroke: #fff; stroke-width: 4; }
.cart-label {
  fill: #fff; font-size: 15px; text-anchor: middle; font-weight: 700;
  paint-order: stroke; stroke: #000000aa; stroke-width: 5px;
}

.cluster { fill-opacity: .18; stroke-width: 4; }
.cluster.danger { fill: var(--danger); stroke: var(--danger); }
.cluster.warning { fill: var(--warning); stroke: var(--warning); }
.cluster.normal { fill: var(--safe); stroke: var(--safe); }
.cluster-count {
  font-size: 46px; font-weight: 800; text-anchor: middle; fill: #fff;
  paint-order: stroke; stroke: #000000cc; stroke-width: 7px;
}

/* ---------- รายการรถ ---------- */
.cart-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 4px; border-bottom: 1px solid var(--line);
}
.cart-row:last-child { border-bottom: 0; }
.dot { width: 30px; height: 30px; border-radius: 9px; flex: none; }
.dot.danger { background: var(--danger); }
.dot.warning { background: var(--warning); }
.dot.safe, .dot.normal { background: var(--safe); }
.cart-row .name { flex: 1; font-weight: 650; letter-spacing: .3px; }
.cart-row .sub { font-size: 11px; color: var(--muted); font-weight: 400; }
.cart-row .val { font-size: 19px; font-weight: 750; font-variant-numeric: tabular-nums; }
.cart-row .val.danger { color: var(--danger); }
.cart-row .val.warning { color: var(--warning); }
.cart-row .val.safe, .cart-row .val.normal { color: var(--safe); }
.cart-row .unit { font-size: 11px; color: var(--muted); font-weight: 400; }

/* ---------- ป้ายกำกับสี ---------- */
.legend { display: flex; gap: 22px; flex-wrap: wrap; }
.legend .item { font-size: 12px; }
.legend .bar { height: 5px; border-radius: 3px; margin-bottom: 5px; }

pre.json {
  margin: 0; padding: 12px; border-radius: 10px; background: #00000055;
  font: 11px ui-monospace, "Cascadia Code", Consolas, monospace;
  color: #cfe6c8; overflow: auto; max-height: 260px; white-space: pre;
}