/* Маячок — дизайн-система «One Shape» v2
   Язык: тёплый серый холст, чёрно-белые компоненты, один оранжевый акцент (луч), пружины, фигуры-капсулы.
   Красный — только для тревоги и SOS (безопасность важнее минимализма). Токены — design/tokens.css. */
:root {
  --land: #E7E4DD; --land-2: #E1DED6; --tree: #CFCBC0;
  --rock: #F6F4EE; --rock-l: #FFFFFF; --rock-d: #D9D5CA; --rock-edge: #8E8A80; --rock-shadow: rgba(40, 36, 28, .16);
  --water: #D3D8D9; --water-line: #9AA4A7;
  --trail: #2A2824; --trail-casing: rgba(255, 255, 255, .88); --road: #CBC7BC;
  --ink: #0B0B0B; --ink-2: #4A4741; --ink-3: #6B675E; --halo: #E7E4DD;
  --panel: #FBFAF6; --panel-2: #F1EEE7; --line: rgba(11, 11, 11, .10);
  --accent: #FF5A1F; --accent-ink: #0B0B0B; --accent-soft: rgba(255, 90, 31, .15); --warn-text: #A63A08;
  --ok: #0B0B0B; --warn: #FF5A1F; --bad: #E5322B; --lora: #0B0B0B;
  --shadow: 0 24px 48px -24px rgba(20, 16, 8, .32), 0 2px 8px rgba(20, 16, 8, .08);
  --shadow-s: 0 8px 20px -8px rgba(20, 16, 8, .26);
  --r: 24px; --r-s: 16px;
  --font-ui: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-map: var(--font-ui);
  /* пружина: ζ≈0.8, ≈2.4 Гц — тот же отклик, что в анимации One Shape */
  --spring: linear(0, .052, .173, .32, .468, .603, .717, .809, .879, .93, .966, .989, 1.004, 1.011, 1.015, 1.015, 1.014, 1.012, 1.01, 1.007, 1.005, 1.004, 1.003, 1.002, 1.001, 1);
}
[data-theme="dark"] {
  --land: #131210; --land-2: #181714; --tree: #23221E;
  --rock: #2A2925; --rock-l: #47443E; --rock-d: #1E1D1A; --rock-edge: #77736A; --rock-shadow: rgba(0, 0, 0, .5);
  --water: #1D272A; --water-line: #4F6368;
  --trail: #D9D5CA; --trail-casing: rgba(11, 11, 11, .75); --road: #2C2A26;
  --ink: #F4F2EC; --ink-2: #B8B3A7; --ink-3: #8F8A7E; --halo: #131210;
  --panel: #1C1B18; --panel-2: #262521; --line: rgba(244, 242, 236, .11);
  --accent: #FF6A2B; --accent-soft: rgba(255, 106, 43, .2); --warn-text: #FF8A52;
  --ok: #F4F2EC; --warn: #FF6A2B; --bad: #FF5A52; --lora: #F4F2EC;
  --shadow: 0 24px 48px -20px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .4);
  --shadow-s: 0 8px 20px -8px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-ui); color: var(--ink); background: var(--land);
  overflow: hidden; font-size: 14px; line-height: 1.4; font-feature-settings: "tnum" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased; transition: background .4s;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
svg { display: block; }
.mono { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

#app { position: fixed; inset: 0; display: grid; grid-template-columns: 428px 1fr; background: var(--land); }
#stage { position: relative; overflow: hidden; background: var(--land); touch-action: none; margin: 12px 12px 12px 0; border-radius: 32px; box-shadow: var(--shadow); }
#map { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; user-select: none; -webkit-user-select: none; }
#map.dragging { cursor: grabbing; }

/* ---------- панель: плавающая карточка ---------- */
#panel {
  position: relative; z-index: 5; background: var(--panel); margin: 12px 0 12px 12px; border-radius: 32px;
  display: flex; flex-direction: column; min-height: 0; box-shadow: var(--shadow); transition: background .4s;
}
#sheetHandle { display: none; }
.brand { display: flex; align-items: center; gap: 12px; padding: 18px 20px 12px; }
.brand .logo { width: 42px; height: 42px; flex: none; }
.brand h1 { margin: 0; font-size: 22px; letter-spacing: -.04em; font-weight: 700; line-height: 1; }
.brand small { color: var(--ink-3); font-size: 12px; display: block; margin-top: 4px; font-weight: 500; }
.brand .sp { flex: 1; }
.iconbtn {
  width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center;
  background: var(--panel-2); color: var(--ink-2); transition: transform .5s var(--spring), color .2s;
}
.iconbtn:hover { color: var(--ink); transform: scale(1.08); }
.iconbtn:active { transform: scale(.92); }
.iconbtn svg { width: 18px; height: 18px; }

.seg { display: flex; margin: 4px 20px 14px; background: var(--panel-2); border-radius: 26px; padding: 4px; position: relative; }
.seg button { flex: 1; padding: 11px 8px; border-radius: 22px; font-weight: 600; font-size: 13.5px; color: var(--ink-2); z-index: 1; display: flex; gap: 7px; align-items: center; justify-content: center; transition: color .2s; }
.seg button svg { width: 16px; height: 16px; }
.seg button.on { color: var(--panel); }
.seg .thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: var(--ink); border-radius: 22px; transition: transform .6s var(--spring); }
.seg[data-v="dispatch"] .thumb { transform: translateX(100%); }

#content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 20px 28px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; min-height: 0; }
.view { display: none; }
.view.on { display: block; animation: rise .6s var(--spring) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.card { background: var(--panel-2); border-radius: var(--r); padding: 16px; margin-bottom: 12px; }
.card h3 { margin: 0 0 12px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); font-weight: 700; display: flex; align-items: center; justify-content: space-between; }
.h2 { font-size: 26px; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; margin: 8px 0 6px; }
.sub { color: var(--ink-2); margin: 0 0 16px; font-size: 14.5px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 9px 14px; border-radius: 999px; background: var(--panel); font-weight: 600; font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; transition: transform .5s var(--spring), background .2s, color .2s; }
.chip:hover { color: var(--ink); transform: translateY(-1px); }
.chip:active { transform: scale(.95); }
.chip.on { background: var(--ink); color: var(--panel); }

.route-list { display: flex; flex-direction: column; gap: 8px; }
.rt { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 10px 14px 10px 10px; border-radius: 22px; background: var(--panel); transition: transform .5s var(--spring), box-shadow .25s; width: 100%; }
.rt:hover { transform: translateX(3px); }
.rt:active { transform: scale(.985); }
.rt.on { box-shadow: inset 0 0 0 2px var(--ink); }
.rt .n { width: 40px; height: 40px; border-radius: 14px; background: var(--ink); color: var(--panel); display: grid; place-items: center; font-weight: 700; }
.rt.on .n { background: var(--accent); color: var(--accent-ink); }
.rt b { display: block; font-size: 14px; font-weight: 600; }
.rt span { color: var(--ink-3); font-size: 12px; }
.rt .meta { text-align: right; font-weight: 600; font-size: 13px; }

.wp { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.wp:last-child { border: 0; }
.wp .dot { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.wp .dot.s { background: var(--ink); color: var(--panel); }
.wp .nm { flex: 1; font-weight: 600; }
.wp .x { color: var(--ink-3); padding: 4px 9px; border-radius: 10px; transition: .2s; }
.wp .x:hover { background: var(--line); color: var(--ink); }
.hint { color: var(--ink-3); font-size: 12.5px; display: flex; gap: 8px; align-items: flex-start; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.stat { background: var(--panel); border-radius: 18px; padding: 11px 13px; }
.stat b { display: block; font-size: 21px; letter-spacing: -.03em; font-weight: 700; }
.stat span { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

.stepper { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stepper .val { font-size: 38px; font-weight: 700; letter-spacing: -.04em; }
.stepper .val small { font-size: 13px; color: var(--ink-3); font-weight: 600; letter-spacing: 0; margin-left: 6px; }
.stepper button { width: 48px; height: 48px; border-radius: 24px; background: var(--panel); font-size: 22px; font-weight: 600; transition: transform .5s var(--spring); }
.stepper button:hover { transform: scale(1.08); }
.stepper button:active { transform: scale(.9); }

.contact { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.ava { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 13px; flex: none; }
.contact .t { flex: 1; font-weight: 600; }
.contact .t small { display: block; color: var(--ink-3); font-weight: 500; }
.tg { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--panel); }

/* главная кнопка — чёрная капсула, как «Начать поход» в анимации */
.cta {
  width: 100%; min-height: 58px; padding: 0 20px; border-radius: 29px; font-weight: 600; font-size: 16.5px; letter-spacing: -.01em;
  background: var(--ink); color: var(--panel); position: relative; overflow: hidden;
  box-shadow: var(--shadow-s); transition: transform .5s var(--spring), box-shadow .3s, background .2s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.cta::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.cta:hover { transform: translateY(-2px); }
.cta:active { transform: scale(.965); }
.cta:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.cta.ghost { background: var(--panel); color: var(--ink); box-shadow: none; }
.cta.ghost::before, .cta.sm.ghost::before { display: none; }
.cta.sm { min-height: 46px; font-size: 14px; border-radius: 23px; padding: 0 12px; box-shadow: none; }
.cta.sm::before { display: none; }
.cta svg { width: 20px; height: 20px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* таймер-кольцо */
.timer { display: grid; place-items: center; padding: 8px 0 12px; position: relative; }
.timer svg { width: 220px; height: 220px; transform: rotate(-90deg); }
.timer .trk { stroke: var(--line); fill: none; stroke-width: 10; }
.timer .arc { fill: none; stroke: var(--ink); stroke-width: 10; stroke-linecap: round; transition: stroke .4s; }
.timer .mid { position: absolute; text-align: center; }
.timer .mid b { display: block; font-size: 44px; letter-spacing: -.05em; font-weight: 700; line-height: 1; margin: 4px 0; }
.timer .mid span { color: var(--ink-3); font-size: 11px; white-space: nowrap; display: block; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.timer[data-s="soon"] .arc { stroke: var(--accent); }
.timer[data-s="late"] .arc, .timer[data-s="alarm"] .arc, .timer[data-s="sos"] .arc { stroke: var(--bad); }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--line); color: var(--ink); white-space: nowrap; flex: none; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.soon { background: var(--accent-soft); color: var(--warn-text); }
.badge.late, .badge.alarm, .badge.sos { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }
.badge.alarm::before, .badge.sos::before, .badge.late::before { animation: blink 1s infinite; }
.badge.back { background: var(--line); color: var(--ink-3); }
@keyframes blink { 50% { opacity: .2; } }

.link-sig { display: flex; align-items: center; gap: 12px; }
.sig { display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.sig i { width: 5px; background: var(--ink); border-radius: 2.5px; opacity: .2; }
.sig i.on { opacity: 1; }
.sig i:nth-child(1) { height: 7px } .sig i:nth-child(2) { height: 12px } .sig i:nth-child(3) { height: 17px } .sig i:nth-child(4) { height: 22px }

.sos-wrap { position: relative; margin: 6px 0 12px; }
.sos {
  width: 100%; min-height: 68px; padding: 0 18px; border-radius: 34px; font-weight: 700; font-size: 18px; letter-spacing: .02em;
  background: var(--bad); color: #fff; position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none;
  box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--bad) 70%, transparent); transition: transform .5s var(--spring);
}
.sos:active { transform: scale(.97); }
.sos .fill { position: absolute; inset: 0; background: rgba(255, 255, 255, .36); transform: scaleX(0); transform-origin: left; }
.sos span { position: relative; display: flex; justify-content: center; gap: 10px; align-items: center; }
.sos small { display: block; font-size: 11px; opacity: .9; letter-spacing: .04em; font-weight: 500; }

.feed { display: flex; flex-direction: column; gap: 8px; }
.fi { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 11px 12px; border-radius: 20px; background: var(--panel); animation: fadeUp .6s var(--spring) both; }
.fi .ic { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--panel-2); }
.fi .ic svg { width: 17px; height: 17px; }
.fi.warn .ic { background: var(--accent-soft); color: var(--warn-text); }
.fi.bad .ic { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.fi.ok .ic { background: var(--ink); color: var(--panel); }
.fi.tg .ic { background: var(--accent); color: var(--accent-ink); }
.fi b { font-size: 13px; display: block; font-weight: 600; }
.fi p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); }
.fi time { color: var(--ink-3); font-size: 11px; font-weight: 600; float: right; }
.empty { color: var(--ink-3); text-align: center; padding: 14px; font-size: 13px; }

.demo { border: 1.5px dashed var(--line); border-radius: var(--r); padding: 14px; margin-bottom: 12px; }
.demo h3 { color: var(--ink-3); }

/* диспетчерская */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.kpi { border-radius: 22px; padding: 12px 14px; background: var(--panel-2); }
.kpi b { font-size: 28px; font-weight: 700; letter-spacing: -.04em; display: block; line-height: 1.1; }
.kpi span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
.kpi.bad { background: var(--bad); } .kpi.bad b, .kpi.bad span { color: #fff; }
.kpi.warn b { color: var(--warn-text); }
.grp { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 22px; background: var(--panel-2); width: 100%; text-align: left; margin-bottom: 8px; transition: transform .5s var(--spring), box-shadow .25s; }
.grp:hover { transform: translateX(3px); }
.grp:active { transform: scale(.985); }
.grp.on { box-shadow: inset 0 0 0 2px var(--ink); }
.grp.alarm, .grp.sos, .grp.late { background: color-mix(in srgb, var(--bad) 12%, var(--panel-2)); }
.grp.alarm.on, .grp.sos.on, .grp.late.on { box-shadow: inset 0 0 0 2px var(--bad); }
.grp b { display: block; font-size: 14px; font-weight: 600; }
.grp span { font-size: 12px; color: var(--ink-3); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 13px; }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; font-weight: 600; text-align: right; }
select, .inp { width: 100%; padding: 13px 16px; border-radius: 20px; background: var(--panel); border: 0; color: var(--ink); font: inherit; font-weight: 600; margin-bottom: 8px; }

/* ---------- элементы на карте ---------- */
.float { position: absolute; z-index: 4; }
#search { top: 16px; left: 16px; width: min(360px, calc(100% - 150px)); }
#search .box { display: flex; align-items: center; gap: 10px; background: var(--panel); border-radius: 26px; padding: 0 18px; box-shadow: var(--shadow-s); height: 52px; }
#search input { flex: 1; border: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 500; outline: 0; min-width: 0; font-size: 15px; }
#search svg { width: 18px; height: 18px; color: var(--ink); flex: none; }
#results { margin-top: 8px; background: var(--panel); border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; display: none; max-height: 40vh; overflow-y: auto; padding: 6px; }
#results button { display: flex; width: 100%; padding: 11px 14px; text-align: left; gap: 10px; align-items: center; font-weight: 600; border-radius: 16px; }
#results button:hover { background: var(--panel-2); }
#results small { color: var(--ink-3); margin-left: auto; font-weight: 500; }

#ctrls { top: 16px; right: 16px; display: flex; flex-direction: column; gap: 10px; }
#ctrls .grpbtn { background: var(--panel); border-radius: 24px; box-shadow: var(--shadow-s); overflow: hidden; display: flex; flex-direction: column; padding: 3px; }
#ctrls .grpbtn button { width: 46px; height: 46px; border-radius: 21px; display: grid; place-items: center; color: var(--ink-2); font-size: 21px; font-weight: 500; transition: background .2s, transform .5s var(--spring); }
#ctrls .grpbtn button:hover { background: var(--panel-2); color: var(--ink); }
#ctrls .grpbtn button:active { transform: scale(.88); }
#ctrls svg { width: 20px; height: 20px; }

#layers { top: 16px; right: 76px; background: var(--panel); border-radius: 24px; box-shadow: var(--shadow); padding: 8px; display: none; min-width: 230px; }
#layers.open { display: block; animation: rise .5s var(--spring) both; }
#layers label { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; font-weight: 600; cursor: pointer; }
#layers label:hover { background: var(--panel-2); }
#layers input { accent-color: var(--ink); width: 17px; height: 17px; }

#clock { bottom: 16px; right: 16px; display: flex; align-items: center; gap: 4px; background: var(--ink); color: var(--panel); border-radius: 30px; box-shadow: var(--shadow); padding: 6px; }
#clock .t { font-weight: 700; font-size: 19px; padding: 0 14px 0 16px; letter-spacing: -.02em; }
#clock .t small { display: block; font-size: 9.5px; letter-spacing: .08em; color: color-mix(in srgb, var(--panel) 60%, transparent); text-transform: uppercase; font-weight: 600; margin-top: -2px; }
#clock button { padding: 10px 13px; border-radius: 22px; font-weight: 600; font-size: 12.5px; color: color-mix(in srgb, var(--panel) 70%, transparent); transition: background .2s, transform .5s var(--spring); }
#clock button.on { background: var(--accent); color: #0B0B0B; }
#clock button:not(.on):hover { background: color-mix(in srgb, var(--panel) 14%, transparent); }
#clock button:active { transform: scale(.92); }

#legend { bottom: 16px; left: 16px; background: var(--panel); border-radius: 22px; box-shadow: var(--shadow-s); padding: 12px 16px; font-size: 12px; color: var(--ink-2); max-width: 240px; font-weight: 500; }
#legend .li { display: flex; align-items: center; gap: 10px; padding: 2.5px 0; }
#legend svg { width: 28px; height: 14px; flex: none; }
#scale { bottom: 84px; left: 18px; font-size: 11px; font-weight: 600; color: var(--ink-2); text-shadow: 0 0 3px var(--halo), 0 0 3px var(--halo), 0 0 3px var(--halo); }
#scale i { display: block; height: 6px; border: 2px solid var(--ink-2); border-top: 0; margin-top: 2px; }
#coords { bottom: 112px; left: 18px; font-size: 11px; color: var(--ink-3); font-weight: 600; text-shadow: 0 0 3px var(--halo), 0 0 3px var(--halo); }

#tip { position: absolute; z-index: 6; transform: translate(-50%, calc(-100% - 18px)); background: var(--panel); border-radius: 22px; padding: 12px 14px; box-shadow: var(--shadow); display: none; min-width: 180px; pointer-events: auto; animation: pop .5s var(--spring) both; }
#tip::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 14px; height: 14px; background: var(--panel); transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
#tip b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
#tip small { color: var(--ink-3); display: block; margin-bottom: 10px; }
#tip .cta { min-height: 40px; font-size: 13px; border-radius: 20px; box-shadow: none; }
#tip .cta::before { display: none; }
@keyframes pop { from { opacity: 0; transform: translate(-50%, calc(-100% - 6px)) scale(.8); } }

/* тосты — тёмная капсула */
#toasts { position: absolute; z-index: 9; top: 82px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100% - 24px)); pointer-events: none; }
.toast { background: var(--ink); color: var(--panel); border-radius: 26px; box-shadow: var(--shadow); padding: 14px 18px 14px 44px; position: relative; animation: slideIn .7s var(--spring) both; pointer-events: auto; }
.toast::before { content: ""; position: absolute; left: 18px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.toast.bad::before { background: var(--bad); animation: blink 1s infinite; } .toast.ok::before { background: var(--panel); }
.toast b { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.toast b span { color: color-mix(in srgb, var(--panel) 60%, transparent) !important; }
.toast p { margin: 3px 0 0; color: color-mix(in srgb, var(--panel) 72%, transparent); font-size: 13px; }
.toast.out { animation: slideOut .4s both; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-24px) scale(.92); filter: blur(6px); } }
@keyframes slideOut { to { opacity: 0; transform: translateY(-12px) scale(.96); filter: blur(4px); } }

#splash { position: fixed; inset: 0; z-index: 50; background: #0B0B0B; display: grid; place-items: center; transition: opacity .8s .2s, visibility 1s; color: #F4F2EC; }
#splash.gone { opacity: 0; visibility: hidden; }
#splash .in { text-align: center; }
#splash h2 { font-size: 40px; margin: 22px 0 6px; letter-spacing: -.045em; font-weight: 700; }
#splash p { margin: 0; color: #8F8A7E; font-weight: 500; }
.pulse-logo { width: 120px; height: 120px; margin: 0 auto; }

/* ---------- SVG-карта ---------- */
#map .land { fill: var(--land); }
#map .ptn-tree { opacity: .55; }
#map .rock { fill: url(#hatch); stroke: var(--rock-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
#map .rock-fill { fill: var(--rock); }
#map .rock-sh { fill: var(--rock-shadow); }
#map .cliff { fill: none; stroke: var(--rock-edge); stroke-width: 6; stroke-dasharray: 1.2 3.2; vector-effect: non-scaling-stroke; opacity: .75; }
#map .road { fill: none; stroke: var(--road); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .9; }
#map .water { fill: var(--water); stroke: var(--water-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
#map .stream { fill: none; stroke: var(--water-line); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-dasharray: 7 4; animation: flow 1.8s linear infinite; opacity: .9; }
#map .stream.r { stroke-width: 3; stroke-dasharray: none; animation: none; stroke: var(--water); }
@keyframes flow { to { stroke-dashoffset: -22; } }
#map .tr-c { fill: none; stroke: var(--trail-casing); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#map .tr { fill: none; stroke: var(--trail); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#map .tr.p { stroke-width: 1.7; stroke-dasharray: 5 3; } #map .tr-c.p { stroke-width: 3.6; }
#map .tr.f { stroke-width: 2; } #map .tr-c.f { stroke-width: 4; }
#map .tr.t { stroke-width: 2.6; opacity: .85; } #map .tr-c.t { stroke-width: 5; }
#map .tr.s { stroke-width: 3; stroke-dasharray: 1.4 1.6; stroke-linecap: butt; } #map .tr-c.s { stroke-width: 5; }
#map .draw { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes draw { 0% { stroke-dashoffset: 1; opacity: 1; } 70% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
#map.intro .tr, #map.intro .tr-c { animation: fadeIn 1s both; animation-delay: 1.6s; }
@keyframes fadeIn { from { opacity: 0; } }

#map .ui { transform: scale(var(--inv, 1)); }
#map text { font-family: var(--font-map); paint-order: stroke; stroke: var(--halo); stroke-width: 3.4px; stroke-linejoin: round; fill: var(--ink); pointer-events: none; }
#map .pk { cursor: pointer; transition: opacity .25s; }
#map .pk path.g { fill: var(--rock-edge); stroke: var(--halo); stroke-width: 1; transition: fill .2s; }
#map .pk:hover path.g, #map .pk.sel path.g { fill: var(--accent); }
#map .pk text { font-size: 11px; font-weight: 500; }
#map .pk.t1 text { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
#map .pk.t1 path.g { fill: var(--ink-2); }
#map .pk.lbl-off text { opacity: 0; }
#map .pk.hide { opacity: 0; pointer-events: none; }
#map .poi { cursor: pointer; }
#map .poi circle { fill: var(--panel); stroke: var(--ink-3); stroke-width: 1.2; }
#map .poi use { color: var(--ink-2); }
#map .poi text { font-size: 10.5px; font-weight: 600; fill: var(--ink-2); }
#map .poi.v circle { stroke: var(--accent); } #map .poi.v use { color: var(--accent); }
#map .poi.w circle { stroke: var(--water-line); } #map .poi.w use { color: var(--water-line); }
#map .poi.hide { opacity: 0; pointer-events: none; }

#map .cov { fill: url(#cov); opacity: .9; }
#map .cov-ring { fill: none; stroke: var(--lora); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 3 6; opacity: .3; }
#map .gw-wave { fill: none; stroke: var(--lora); stroke-width: 2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: wave 3.2s cubic-bezier(.2, .5, .4, 1) infinite; opacity: 0; }
#map .gw-wave:nth-child(2) { animation-delay: 1.07s; } #map .gw-wave:nth-child(3) { animation-delay: 2.14s; }
@keyframes wave { 0% { transform: scale(.05); opacity: .7; } 100% { transform: scale(1); opacity: 0; } }
#map .gw-ic circle.bg { fill: var(--ink); stroke: var(--halo); stroke-width: 2; }
#map .gw-ic path { stroke: var(--panel); fill: none; stroke-width: 1.8; stroke-linecap: round; }
#map .gw-ic circle[fill="#fff"] { fill: var(--accent); }
#map .gw text { font-weight: 600; font-size: 10.5px; fill: var(--ink); }

#map .ent circle.o { fill: var(--ink); stroke: var(--halo); stroke-width: 2; }
#map .ent circle[fill="#fff"] { fill: var(--panel); }
#map .ent text { font-weight: 700; font-size: 11px; }

#map .route-c { fill: none; stroke: var(--halo); stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
#map .route { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; }
#map .route-m { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; opacity: .85; animation: march 1s linear infinite; }
@keyframes march { to { stroke-dashoffset: calc(-18px * var(--inv, 1)); } }
#map .trace { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
#map .wpm circle { fill: var(--ink); stroke: var(--halo); stroke-width: 2; }
#map .wpm text { font-size: 10px; font-weight: 700; fill: var(--panel); stroke: none; text-anchor: middle; dominant-baseline: central; }

#map .hk .halo { fill: var(--c); opacity: .25; transform-box: fill-box; transform-origin: center; animation: hkpulse 2s ease-out infinite; }
@keyframes hkpulse { from { transform: scale(.6); opacity: .5; } to { transform: scale(2.2); opacity: 0; } }
#map .hk .core { fill: var(--c); stroke: var(--panel); stroke-width: 2.5; }
#map .hk .tag rect { fill: var(--panel); stroke: none; }
#map .hk .tag text { font-weight: 700; font-size: 11px; fill: var(--ink); stroke: none; }
#map .hk.alarm .halo, #map .hk.sos .halo, #map .hk.late .halo { animation-duration: .9s; }
#map .hk { cursor: pointer; }
#map .last { fill: none; stroke: var(--bad); stroke-width: 2.5; }
#map .szone { fill: rgba(229, 50, 43, .04); stroke: var(--bad); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 10 7; animation: spin 14s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes spin { to { stroke-dashoffset: -170; } }
#map .packet { fill: var(--accent); }
#map .link { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; animation: march2 .6s linear infinite; }
@keyframes march2 { to { stroke-dashoffset: -12; } }
#map .haz { fill: rgba(255, 90, 31, .12); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; }
#map .haz-pulse { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: wave 2.4s ease-out infinite; }

.hide-trails .g-trails, .hide-rocks .g-rocks, .hide-water .g-water, .hide-lora .g-lora, .hide-roads .g-roads, .hide-labels .g-peaks text { display: none; }

#map .ra { pointer-events: none; transition: opacity .3s; }
#map .ra.hide { opacity: 0; }
#map .ra .sh { fill: var(--rock-shadow); }
#map .ra .fl { fill: var(--rock-l); stroke: var(--rock-edge); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
#map .ra .fr { fill: var(--rock-d); stroke: var(--rock-edge); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
#map .ra .fc { fill: none; stroke: var(--rock-edge); stroke-width: .8; vector-effect: non-scaling-stroke; opacity: .55; }
#actRoot .h2 { flex: 1; min-width: 0; }
#actRoot > div:first-child { gap: 10px; }
#themeWrap { display: none; }

/* ---------- мобильная версия ---------- */
@media (max-width: 899px) {
  #app { grid-template-columns: 1fr; }
  #panel {
    position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto; height: calc(90dvh - 8px); margin: 0; border-radius: 32px;
    transform: translateY(calc(90dvh - var(--peek, 168px))); transition: transform .7s var(--spring); z-index: 8;
    box-shadow: 0 -12px 48px rgba(0, 0, 0, .22);
  }
  #panel.dragging { transition: none; }
  #panel[data-snap="half"] { transform: translateY(calc(90dvh - 52dvh)); }
  #panel[data-snap="full"] { transform: translateY(0); }
  #sheetHandle { display: block; padding: 10px 0 8px; touch-action: none; cursor: grab; }
  #sheetHandle i { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--ink-3); opacity: .4; margin: 0 auto; }
  .brand { display: none; }
  #themeWrap { display: flex; }
  .seg { margin: 4px 16px 10px; }
  #content { padding: 0 16px 120px; }
  #stage { position: fixed; inset: 0; margin: 0; border-radius: 0; box-shadow: none; }
  #search { width: calc(100% - 82px); top: 12px; left: 12px; }
  #ctrls { top: 12px; right: 12px; }
  #ctrls .grpbtn:nth-child(2) { display: none; }
  #layers { right: 12px; top: 72px; }
  #clock { bottom: auto; top: 74px; right: auto; left: 12px; transform-origin: top left; transform: scale(.9); flex-wrap: wrap; justify-content: flex-end; max-width: 200px; }
  #legend, #scale, #coords { display: none; }
  #toasts { top: 76px; }
  .timer svg { width: 190px; height: 190px; }
}
@media (min-width: 900px) and (max-width: 1100px) { #app { grid-template-columns: 380px 1fr; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }