:root { --bg:#10151c; --panel:#18202a; --line:#2a3644; --text:#e6edf3; --mut:#8b9bb0; --ok:#2dd4bf; --warn:#f5b942; --bad:#ef5b5b; --ad:#a78bfa; --btn:#223041; --panelA:var(--panelA); --panelB:var(--panelB); --stat:var(--stat); color-scheme:dark; }
:root[data-theme="light"] { --bg:#f3f6f9; --panel:#ffffff; --line:#d3dce6; --text:#13202c; --mut:#55657a; --ok:#0a7a70; --warn:#9a6a00; --bad:#c62f2f; --ad:#6d4fd8; --btn:#e8eef4; --panelA:#fffffff2; --panelB:#fffffff7; --stat:#dff4f0f2; color-scheme:light; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; font:15px/1.35 system-ui,sans-serif; background:var(--bg); color:var(--text); overflow:hidden; }
[hidden] { display:none !important; }
#map { position:absolute; inset:0; }
button { font:inherit; color:var(--text); background:var(--btn); border:1px solid var(--line); border-radius:10px; padding:8px 12px; cursor:pointer; }
button:active { transform:scale(.97); }
a { color:var(--ok); }
.float { position:absolute; z-index:10; }
.round { position:absolute; z-index:11; width:42px; height:42px; padding:0; border-radius:50%; font-size:18px; background:var(--panelA); box-shadow:0 3px 12px #0008; }
#gear { top:calc(8px + env(safe-area-inset-top)); right:8px; } #me { top:calc(8px + env(safe-area-inset-top)); right:58px; }
#gear[hidden] ~ #me { right:8px; }
.seg { display:flex; border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:4px 0 8px; } .seg > * { flex:1; padding:11px 8px; text-align:center; border:0; border-radius:0; font-size:15px; background:transparent; color:var(--text); } .seg .on { background:var(--ok); color:#06201c; font-weight:700; } .seg .off { color:var(--mut); font-size:13px; }
.opp { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:2px 0 6px; } .opp button { padding:6px 12px; } .cab h3 { margin:14px 0 6px; font-size:14px; color:var(--mut); } .cab .item { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); }
#near { top:calc(58px + env(safe-area-inset-top)); right:8px; }
#top { top:calc(8px + env(safe-area-inset-top)); left:8px; right:58px; display:flex; flex-direction:column; gap:6px; pointer-events:none; }
#top > * { pointer-events:auto; }
#pill { align-self:flex-start; padding:5px 10px; border-radius:20px; font-size:12px; background:var(--stat); color:var(--ok); max-width:100%; box-shadow:0 1px 6px #0004; }
#pill.empty { background:#2b2a14f2; color:var(--warn); } #pill.down { background:#3a1717f2; color:#ffb4b4; font-weight:700; font-size:13px; }
.chips { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.chip { flex:none; border-radius:20px; padding:6px 11px; background:var(--panelA); font-size:13px; white-space:nowrap; }
.chip.on { background:var(--ok); color:#06201c; border-color:var(--ok); }
.chip.fav { border-color:var(--warn); }
.chip b { font-weight:700; }
#bar { bottom:calc(10px + env(safe-area-inset-bottom)); left:8px; right:8px; display:flex; gap:8px; }
#bar button { flex:1; padding:16px 2px; font-size:14px; font-weight:700; white-space:nowrap; border-radius:16px; background:var(--panelA); box-shadow:0 4px 16px #0008; }
#bar button small { display:block; font-weight:400; font-size:11px; color:var(--mut); }
#bar .dps { border-color:#3b82f6; } #bar .acc { border-color:var(--bad); } #bar .haz { border-color:var(--warn); }
#sheet { left:0; right:0; bottom:0; max-width:640px; margin:0 auto; background:var(--panel); border-top:1px solid var(--line); border-radius:18px 18px 0 0; padding:14px 14px calc(14px + env(safe-area-inset-bottom)); transform:translateY(105%); transition:transform .2s; box-shadow:0 -8px 30px #000a; max-height:72%; overflow:auto; z-index:12; }
#sheet.open { transform:none; } #sheet { overflow-x:hidden; overflow-wrap:anywhere; } #sheet button { max-width:100%; white-space:normal; }
#sheet h2 { margin:0 0 2px; font-size:18px; display:flex; gap:8px; align-items:center; }
.mut { color:var(--mut); font-size:13px; } .small { font-size:12px; }
.acts { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; } .acts button { flex:1; padding:13px 6px; font-weight:600; min-width:90px; }
.yes { background:var(--stat) !important; border-color:var(--ok) !important; } .no { background:#3a1717 !important; border-color:var(--bad) !important; }
.ref { display:inline-block; min-width:34px; text-align:center; padding:2px 7px; border-radius:7px; color:#fff; font-weight:800; font-size:14px; text-shadow:0 1px 2px #0007; }
.row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:4px 0; }
.board { margin-top:10px; display:flex; flex-direction:column; }
.brow { display:grid; grid-template-columns:auto 1fr auto; gap:4px 10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); }
.brow .to { font-weight:600; } .brow .big { font-size:18px; font-weight:800; text-align:right; white-space:nowrap; } .brow .sub { grid-column:2 / 4; color:var(--mut); font-size:12px; }
.brow.arrived .big { color:var(--ok); } .brow.missing .big { color:var(--bad); } .brow.unknown { opacity:.55; }
.late { color:var(--warn); } .early { color:var(--ok); }
.badge { display:inline-block; font-size:11px; padding:1px 6px; border-radius:5px; background:#2a3644; color:var(--mut); margin-right:4px; }
.badge.demo { background:#3b2a12; color:var(--warn); } .badge.ok { background:var(--stat); color:var(--ok); } .badge.ad { background:#2a2250; color:var(--ad); }
.when { display:flex; gap:6px; margin:8px 0 2px; } .when button { flex:1; padding:6px 0; font-size:13px; } .when button.on { background:var(--ok); color:#06201c; border-color:var(--ok); }
.legal { font-size:11px; color:var(--mut); margin-top:8px; word-break:break-all; }
#toast { top:calc(150px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); max-width:92%; background:var(--panelB); border:1px solid var(--line); border-radius:12px; padding:10px 14px; display:none; box-shadow:0 6px 20px #0009; z-index:20; }
#ask { bottom:calc(92px + env(safe-area-inset-bottom)); left:8px; right:8px; background:var(--panelB); border:1px solid var(--ok); border-radius:14px; padding:10px; display:none; }
.mk { font-size:24px; text-align:center; line-height:1; text-shadow:0 0 4px #000; cursor:pointer; } .mk.pending { opacity:.55; } .mk.disputed { filter:hue-rotate(70deg); }
.pin { width:34px; height:34px; border-radius:10px; background:#18202a; border:2px solid #4b5b6e; display:flex; align-items:center; justify-content:center; font-size:18px; position:relative; box-shadow:0 2px 8px #0009; cursor:pointer; }
.pin.paid { border-color:var(--ad); } .pin.closed { opacity:.5; }
.pin i { position:absolute; right:-6px; top:-8px; font-style:normal; font-size:9px; background:var(--ad); color:#150f2e; border-radius:4px; padding:0 3px; font-weight:700; }
.me { width:18px; height:18px; border-radius:50%; background:var(--ok); border:3px solid #fff; box-shadow:0 0 0 6px #2dd4bf40; }
#demo { position:absolute; top:0; right:0; bottom:0; width:310px; max-width:92%; background:var(--panel); border-left:1px solid var(--line); z-index:30; padding:12px; overflow:auto; transform:translateX(105%); transition:transform .2s; }
#demo.open { transform:none; } #demo h3 { margin:14px 0 6px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); }
select { background:#0f151d; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:6px; font:inherit; }
button.on { background:var(--ok); color:#06201c; border-color:var(--ok); }
table { width:100%; border-collapse:collapse; font-size:12px; } td,th { padding:3px 4px; border-bottom:1px solid var(--line); text-align:left; }
.t-suspect { color:var(--bad); } .t-trusted { color:var(--ok); } #log { font-size:12px; color:var(--mut); max-height:160px; overflow:auto; }
.maplibregl-ctrl-attrib { background:#10151cc0 !important; color:var(--mut) !important; } .maplibregl-ctrl-attrib a { color:var(--mut) !important; }

.sticky { position:sticky; bottom:calc(-14px - env(safe-area-inset-bottom)); background:var(--panel); margin:10px -14px -14px; padding:10px 14px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }

.promo { margin:10px 0 4px; padding:10px 12px; border:1px solid #3b2f6b; background:#1a1730; border-radius:12px; } .promo.sponsor { border-color:var(--ad); }

.cta { position:absolute; z-index:11; left:50%; transform:translateX(-50%); bottom:calc(18px + env(safe-area-inset-bottom)); padding:16px 26px; border-radius:30px; font-size:17px; font-weight:700; background:var(--ok); color:#06201c; border:0; box-shadow:0 6px 20px #000a; white-space:nowrap; }
.cta[hidden] { display:none; }
.okc { color:var(--ok); }
.intro { position:absolute; z-index:13; left:12px; right:12px; bottom:calc(86px + env(safe-area-inset-bottom)); max-width:520px; margin:0 auto; background:var(--panel); border:1px solid var(--ok); border-radius:16px; padding:14px 16px; box-shadow:0 8px 28px #000b; }
.intro ol { margin:8px 0 10px; padding-left:20px; } .intro li { margin:4px 0; }
.cta2 { width:100%; background:var(--ok); color:#06201c; border:0; font-weight:700; padding:12px; }

.grp { padding:2px 0 6px; border-bottom:1px solid var(--line); } .grp .brow { border-bottom:0; padding-bottom:4px; }
.brow .to { font-weight:700; font-size:17px; }
.nxl { margin:0 0 4px; color:var(--mut); font-size:14px; } .nx { display:inline-block; margin-right:12px; color:var(--text); font-weight:600; font-size:15px; }
.grp .mut.small { margin-top:2px; }

.dirline { margin:2px 0 6px; color:var(--text); font-size:15px; } .dirline b { color:var(--ok); }
.homechip { align-self:flex-start; border-color:var(--line); } .homechip.u-g { background:#14532d; border-color:#22c55e; color:#dcfce7; } .homechip.u-y { background:#713f12; border-color:#facc15; color:#fef9c3; }
.homechip.u-r { background:#7f1d1d; border-color:#ef4444; color:#fee2e2; animation:pulse 1s infinite; } @keyframes pulse { 50% { box-shadow:0 0 0 6px rgba(239,68,68,.35); } }
.now.ok { border-color:var(--ok); } button.pri { background:var(--ok); color:#06201c; border-color:var(--ok); font-weight:700; } .late { color:var(--warn); }
.now { background:#10161d; border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin:10px 0; } .now .nm { font-size:26px; font-weight:800; margin:2px 0; }

:root[data-theme="light"] #pill.empty { background:#fff4d6f2; color:#7a5200; } :root[data-theme="light"] #pill.down { background:#ffe1e1f2; color:#9b1c1c; }
:root[data-theme="light"] .chip { box-shadow:0 1px 5px #0003; } :root[data-theme="light"] .round { box-shadow:0 2px 8px #0004; }
/* полоска сверху нижнего экрана: тап или потянуть вниз - экран убирается */
.grab { margin:-14px -14px 4px; padding:10px 0 8px; display:flex; justify-content:center; touch-action:none; cursor:grab; }
.grab::after { content:''; width:44px; height:5px; border-radius:3px; background:var(--mut); opacity:.55; }
#sheet.drag { transition:none; }
.nudge { margin:8px 0; padding:12px; border:1px solid var(--ok); border-radius:12px; background:var(--stat); }
.nudge b { font-size:16px; } .nudge .row { margin-top:8px; }
/* светлая тема: места, где цвета были заданы только для тёмной */
:root[data-theme="light"] .no { background:#fde8e8 !important; color:#9b1c1c; }
:root[data-theme="light"] .yes { background:var(--stat) !important; }
:root[data-theme="light"] .badge { background:#e4ebf2; color:var(--mut); } :root[data-theme="light"] .badge.demo { background:#fff0cf; color:#7a5200; } :root[data-theme="light"] .badge.ad { background:#ebe5ff; color:#5a3cc4; }
:root[data-theme="light"] .cta, :root[data-theme="light"] button.pri, :root[data-theme="light"] .chip.on, :root[data-theme="light"] .seg .on { color:#fff; }
:root[data-theme="light"] .homechip.u-g { background:#d6f3df; border-color:#16a34a; color:#14532d; } :root[data-theme="light"] .homechip.u-y { background:#fdf0c7; border-color:#ca8a04; color:#5f3b08; } :root[data-theme="light"] .homechip.u-r { background:#fde0e0; border-color:#dc2626; color:#7f1d1d; }
:root[data-theme="light"] .mk { text-shadow:0 0 4px #fff; } :root[data-theme="light"] .pin { background:#fff; border-color:#9fb0c3; }
:root[data-theme="light"] .nudge { border-color:var(--ok); }