:root {
  --bg: #0B0D10; --panel: #14181D; --hi: #1B2027; --border: #262C33;
  --text: #F5F7FA; --sec: #8A94A3; --accent: #FFB000; --good: #22C55E; --warn: #F59E0B; --crit: #EF4444; --media: #A78BFA;
}
* { box-sizing: border-box; }
html, body, #root { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--border); background: var(--hi); border-radius: 8px; padding: 7px 12px; }
button:hover { border-color: var(--sec); }
button:disabled { opacity: .4; cursor: default; }
button.pri { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 600; }
button.danger { color: var(--crit); border-color: var(--crit); background: transparent; }
button.small { padding: 3px 8px; font-size: 12px; }
button.icon { padding: 4px 7px; background: transparent; border-color: transparent; color: var(--sec); }
button.icon:hover { color: var(--text); }
input, select, textarea { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
.lab { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--sec); }
.muted { color: var(--sec); }
.pill { font-size: 11px; letter-spacing: 1px; padding: 2px 8px; border-radius: 6px; border: 1px solid currentColor; text-transform: uppercase; }
.pill.live { color: var(--good); } .pill.planned { color: var(--sec); } .pill.ended { color: var(--crit); }
.lock { font-size: 12px; padding: 4px 10px; border-radius: 7px; color: var(--accent); border: 1px solid var(--accent); background: #FFB00018; }
.lock.other { color: var(--crit); border-color: var(--crit); background: #EF444418; }

/* Layout */
.center { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 24px; width: 100%; max-width: 440px; }
.card h1 { margin: 0 0 4px; font-size: 22px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 8px; }
.app { display: grid; grid-template-rows: 50px 1fr; height: 100%; }
.top { display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--panel); border-bottom: 1px solid var(--border); }
.brand { font-weight: 800; letter-spacing: 2px; display: flex; align-items: center; gap: 8px; }
.brand .chev { display: inline-flex; gap: 3px; } .brand .chev i { width: 4px; height: 15px; background: var(--accent); transform: skewX(-20deg); display: block; }
.main { display: grid; grid-template-columns: 330px 1fr; min-height: 0; }
.side { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; background: #0E1216; }
.tabs { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid var(--border); }
.tabs button { flex: 1; padding: 6px 0; font-size: 13px; }
.tabs button.on { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 600; }
.pane { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.list { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border); font-size: 13px; }
.item:first-child { border-top: none; }
.item .grow { flex: 1; min-width: 0; }
.item input, .item select { padding: 4px 6px; font-size: 13px; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
#map { height: 100%; min-height: 0; background: #10161C; }
.hint { position: absolute; z-index: 500; left: 50%; top: 12px; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--accent);
  color: var(--text); padding: 6px 12px; border-radius: 8px; font-size: 13px; pointer-events: none; }
.mapwrap { position: relative; min-height: 0; }
.mapwrap.adding #map { cursor: crosshair; }

/* Chat */
.chat { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 200px; }
.msg { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; font-size: 13px; }
.msg .who { font-size: 11px; font-weight: 600; letter-spacing: .5px; }
.msg.ann { border-color: var(--accent); background: #FFB00014; }

/* Map markers */
.mk { background: none; border: none; }
.mk .car { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px;
  border: 2px solid #0B0D10; box-shadow: 0 1px 4px #0008; }
.mk .wp, .mk .spot, .mk .poi { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 15px; border-radius: 7px;
  border: 2px solid #0B0D10; box-shadow: 0 1px 4px #0008; }
.mk .wp { background: #F5F7FA; color: #0B0D10; }
.mk .spot { background: var(--media); color: #1A1033; }
.mk .poi { border-radius: 50%; color: #fff; }
.leaflet-container { background: #10161C; font: inherit; }
.leaflet-tooltip { background: var(--panel); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.leaflet-tooltip-top:before { border-top-color: var(--border); }

/* Modal */
.modal { position: fixed; inset: 0; background: #000A; display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal .card { max-width: 760px; }
.codes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.code { background: var(--hi); border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; }
.code svg { width: 100%; height: auto; background: #fff; border-radius: 8px; }
.code .big { font: 700 22px/1.2 ui-monospace, Menlo, monospace; letter-spacing: 3px; margin-top: 8px; }
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 2000; pointer-events: none; }
.toast { background: var(--panel); border: 1px solid var(--accent); padding: 8px 16px; border-radius: 10px; }
.toast.err { border-color: var(--crit); }
@media (max-width: 800px) { .main { grid-template-columns: 1fr; grid-template-rows: 1fr 45%; } .side { order: 2; border-right: none; border-top: 1px solid var(--border); } }