/* Aspan — Карта покрытия (публичная).
 * Визуал = 1:1 Aspan Map (инженерский Fiber Map): тема «Полночь», акцент aspan,
 * те же плашки #apphead / .dock, «жидкое стекло» с ползунком --glass-pct/--glass-blur. */
:root{
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --radius:14px; --radius-sm:9px;
  --shadow:0 8px 30px rgba(0,0,0,.40); --shadow-lg:0 24px 70px rgba(0,0,0,.55);
}
/* тема «Полночь» + акцент aspan — значения из style.css Aspan Map */
body[data-theme="midnight"]{
  --bg:#0a0f1f; --surface:#121a30; --surface-2:#1d2742; --surface-3:#2c3a63;
  --crust:#060912; --border:#283353; --muted:#5a6a8d;
  --text:#e7ecff; --text-dim:#9db0d8; --text-dim2:#bccaee;
}
body[data-accent="aspan"]{ --accent:#1e6fff; --accent-contrast:#ffffff;
  --ring: color-mix(in srgb, var(--accent) 55%, transparent); }

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font-ui); background:var(--bg); color:var(--text);
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
#map{position:fixed;inset:0;background:var(--crust)}
.leaflet-container{font:inherit}
.leaflet-control-attribution{
  background:rgba(6,9,18,.6)!important;color:#8b96b3!important;
  font-size:10px!important;backdrop-filter:blur(6px);
}
.leaflet-control-attribution a{color:#aab6d4!important}
.leaflet-control-zoom{display:none}

/* ── Верхняя плашка — 1:1 #apphead Aspan Map ── */
#apphead{
  position:fixed; z-index:1200;
  top:calc(env(safe-area-inset-top) + 14px); left:12px; right:12px;
  display:flex; align-items:center; gap:6px; max-width:600px; margin:0 auto;
  padding:6px; border-radius:16px;
  background:color-mix(in srgb, var(--surface) var(--glass-pct,80%), transparent);
  border:1px solid color-mix(in srgb, var(--border) 55%, transparent);
  box-shadow:0 14px 38px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.14);
}
#brand-badge{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  height:40px; min-width:96px; padding:0 16px; border-radius:12px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 4px 14px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.9);
}
#brand-badge .brand-logo{height:26px;width:auto}
#head-title{
  flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
  padding:0 8px; line-height:1.15; min-width:0;
}
#head-title b{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#head-title span{font-size:10.5px;color:var(--text-dim)}
.head-btn{
  flex:0 0 auto; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:6px;
  height:40px; min-width:0; padding:0 13px; border-radius:12px; cursor:pointer;
  color:var(--text); font-family:inherit; font-size:12px; font-weight:600; white-space:nowrap;
  background:transparent; border:none; box-shadow:none;
  transition:transform .12s, background .15s;
}
.head-btn .dk-ic{font-size:18px;line-height:1;display:inline-flex;align-items:center}
.head-btn:active{transform:scale(.9)}
.head-btn:hover{background:color-mix(in srgb, var(--surface-2) 60%, transparent)}
.hdr-btn{
  margin:0; flex:0 0 auto; width:40px; height:40px; border-radius:12px; font-size:18px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:transparent; border:none; box-shadow:none; color:var(--text); font-family:inherit;
  transition:transform .12s, background .15s, color .15s;
}
.hdr-btn:hover{background:color-mix(in srgb, var(--surface-2) 60%, transparent)}
.hdr-btn:active{transform:scale(.88)}

/* ── Панель настроек — 1:1 .settings-panel ── */
.settings-panel{
  position:fixed; z-index:2500;
  top:calc(env(safe-area-inset-top) + 66px); right:16px;
  width:300px; max-width:calc(100vw - 24px);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:14px 16px 16px;
}
.settings-panel.hidden{display:none}
.settings-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.settings-head b{font-size:14px}
.set-group{margin-top:8px}
.set-group label{display:block;font-size:11.5px;font-weight:600;color:var(--text-dim);margin-bottom:8px}
.set-range{width:100%;accent-color:var(--accent)}
.set-range-cap{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:4px}

/* ── Нижний док — 1:1 .dock ── */
.dock{
  position:fixed; z-index:1200; left:50%; transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 14px);
  display:flex; gap:6px; padding:9px; border-radius:24px; max-width:96vw;
  background:color-mix(in srgb, var(--surface) var(--glass-pct,80%), transparent);
  border:1px solid color-mix(in srgb, var(--border) 55%, transparent);
  box-shadow:0 16px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
  overflow-x:auto; overflow-y:visible; scrollbar-width:none;
}
.dock::-webkit-scrollbar{display:none}
.dock .dock-btn, .dock .dock-sep{flex:0 0 auto}
.dock .dock-btn{
  width:60px; height:62px; min-height:0; margin:0; padding:0;
  border:none; border-radius:16px; background:transparent; color:var(--text); font-family:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:10.5px; font-weight:600; cursor:pointer; transition:transform .12s, background .15s;
}
.dock .dock-btn span:not(.dk-ic){font-size:10.5px;line-height:1}
.dock .dock-btn svg.ic{width:24px;height:24px;stroke-width:1.9}
.dock .dock-btn:active{transform:scale(.88)}
.dock .dock-btn.active{background:var(--accent);color:var(--accent-contrast);box-shadow:0 6px 16px var(--ring)}
.dock-sep{width:1px;align-self:center;height:38px;margin:0 3px;
  background:color-mix(in srgb, var(--border) 70%, transparent)}
.dock .dock-map svg.ic{color:var(--text)}

/* «Жидкое стекло»: размытие и vibrancy — 1:1 */
#apphead, .dock, .settings-panel{
  -webkit-backdrop-filter:blur(var(--glass-blur,7px)) saturate(1.35);
  backdrop-filter:blur(var(--glass-blur,7px)) saturate(1.35);
}
#apphead, .dock{text-shadow:0 1px 2px rgba(0,0,0,.55)}
#apphead svg, .dock .dock-btn svg.ic{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.5))}
#brand-badge{text-shadow:none}

/* примечание */
#note{
  position:fixed; z-index:1190; bottom:calc(env(safe-area-inset-bottom) + 14px); left:12px;
  padding:7px 12px; font-size:11px; color:var(--text-dim); border-radius:12px;
  background:color-mix(in srgb, var(--surface) var(--glass-pct,80%), transparent);
  border:1px solid color-mix(in srgb, var(--border) 55%, transparent);
  -webkit-backdrop-filter:blur(var(--glass-blur,7px)) saturate(1.35);
  backdrop-filter:blur(var(--glass-blur,7px)) saturate(1.35);
}

@media (max-width:820px){
  #brand-badge{height:38px;min-width:86px;padding:0 12px}
  #brand-badge .brand-logo{height:24px}
  .head-btn{padding:0 10px}
  #note{display:none}
}

/* ── Линейка (порт из Aspan Map 1:1) ── */
#map.measuring{cursor:crosshair}
.dock .dock-btn .dk-ic{font-size:22px;line-height:1;height:24px;display:flex;align-items:center}
.ruler-tooltip{
  background:#f9e2af!important;color:#0a0f1f!important;font-weight:600!important;
  border:none!important;font-size:12px!important;
}
@keyframes rl-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#ruler-list{
  position:fixed;z-index:1550;right:14px;top:calc(env(safe-area-inset-top) + 76px);width:232px;
  background:color-mix(in srgb, var(--surface) var(--glass-pct,92%), transparent);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid var(--glass-brd);border-radius:16px;color:var(--text);
  box-shadow:0 16px 48px rgba(0,0,0,.45);overflow:hidden;animation:rl-in .16s ease;
}
#ruler-list.hidden{display:none}
.rl-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--glass-brd)}
.rl-head > b{font-size:13px}
.rl-sum{margin-left:auto;font-size:12px;font-weight:700;opacity:.85}
.rl-close{background:none;border:none;color:var(--text);font-size:18px;line-height:1;cursor:pointer;opacity:.65}
.rl-close:hover{opacity:1}
.rl-list{max-height:46vh;overflow-y:auto;padding:5px}
.rl-row{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:9px}
.rl-row:hover{background:var(--surface-2)}
.rl-row.rl-off{opacity:.45}
.rl-sw{width:13px;height:4px;border-radius:2px;flex:none}
.rl-row > b{font-size:12px;width:52px;white-space:nowrap}
.rl-d{flex:1;font-size:12px;font-family:monospace;opacity:.85}
.rl-eye,.rl-del{background:none;border:none;cursor:pointer;font-size:13px;opacity:.7;padding:0 2px}
.rl-del{color:#e5383b;font-size:17px}
.rl-eye:hover,.rl-del:hover{opacity:1}
.rl-foot{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-top:1px solid var(--glass-brd);font-size:11px;opacity:.8}
.rl-clear{background:var(--surface-2);border:1px solid var(--glass-brd);color:var(--text);border-radius:9px;padding:5px 10px;font-size:11px;cursor:pointer}
.rl-clear:hover{filter:brightness(1.12)}
/* подсказка по инструменту */
#ruler-hint{
  position:fixed;z-index:1560;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 100px);width:320px;max-width:calc(100vw - 24px);
  background:color-mix(in srgb, var(--surface) var(--glass-pct,92%), transparent);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid var(--glass-brd);border-radius:16px;color:var(--text);
  box-shadow:0 16px 48px rgba(0,0,0,.45);padding:12px 14px;animation:rl-in .16s ease;
  font-size:12px;line-height:1.55;
}
#ruler-hint b{font-size:12.5px}
#ruler-hint .rh-ok{
  display:block;margin:9px 0 0 auto;background:var(--accent);color:var(--accent-contrast);
  border:none;border-radius:9px;padding:6px 14px;font:600 12px Inter,sans-serif;cursor:pointer;
}
#ruler-hint.hidden{display:none}

/* ── Поиск адресов (порт search-box из Aspan Map) ── */
.search-box{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0}
.search-ic{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--text-dim);pointer-events:none}
.search-box input{
  width:100%;height:40px;padding:0 8px 0 31px;border-radius:10px;font-size:14px;
  background:transparent;color:var(--text);border:none;font-family:inherit;
  transition:background .15s;
}
.search-box input::placeholder{color:var(--muted);opacity:1}
.search-box input:focus{outline:none;background:color-mix(in srgb, var(--surface-2) 35%, transparent)}
.search-results{
  position:absolute;top:100%;left:0;right:0;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;margin-top:6px;
  max-height:260px;overflow-y:auto;z-index:1300;box-shadow:var(--shadow-lg);
}
.search-results.hidden{display:none}
.search-results .res-item{padding:8px 10px;border-bottom:1px solid var(--surface-2);cursor:pointer;font-size:12px;line-height:1.4}
.search-results .res-item:last-child{border-bottom:none}
.search-results .res-item:hover{background:var(--surface-2)}
.search-results .res-empty{padding:10px;font-size:12px;color:var(--muted)}

/* ── Плавающие окна (калькулятор, заметка) — glass, draggable за шапку ── */
.float-win{
  position:fixed;z-index:1600;
  background:color-mix(in srgb, var(--surface) var(--glass-pct,92%), transparent);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid var(--glass-brd);border-radius:16px;color:var(--text);
  box-shadow:0 16px 48px rgba(0,0,0,.45);overflow:hidden;animation:rl-in .16s ease;
  user-select:none;
}
.float-win.hidden{display:none}
.fw-head{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-bottom:1px solid var(--glass-brd);cursor:move;touch-action:none;
}
.fw-head > b{font-size:13px;flex:1}
.fw-grip{font-size:13px;opacity:.5;letter-spacing:1px}
.fw-close{background:none;border:none;color:var(--text);font-size:18px;line-height:1;cursor:pointer;opacity:.65;padding:0 2px}
.fw-close:hover{opacity:1}

/* калькулятор */
#calc-win{width:236px}
.calc-disp{
  margin:10px 12px 4px;padding:10px 12px;border-radius:11px;background:var(--crust);
  border:1px solid var(--glass-brd);text-align:right;min-height:56px;
  display:flex;flex-direction:column;justify-content:center;gap:2px;
}
.calc-expr{font:500 12px 'JetBrains Mono',monospace;color:var(--text-dim);min-height:14px;word-break:break-all}
.calc-res{font:600 20px 'JetBrains Mono',monospace}
.calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px 12px 12px}
.calc-btn{
  height:42px;border:none;border-radius:11px;background:var(--surface-2);color:var(--text);
  font:600 15px Inter,sans-serif;cursor:pointer;transition:filter .12s, transform .1s;
}
.calc-btn:hover{filter:brightness(1.15)}
.calc-btn:active{transform:scale(.92)}
.calc-btn.op{background:var(--surface-3)}
.calc-btn.eq{background:var(--accent);color:var(--accent-contrast)}
.calc-btn.danger{color:#f38ba8}

/* заметка */
#note-win{width:300px}
.note-tools{display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--glass-brd)}
.note-tools button{
  width:32px;height:30px;border:none;border-radius:8px;background:var(--surface-2);
  color:var(--text);font-size:13px;cursor:pointer;transition:filter .12s;
}
.note-tools button:hover{filter:brightness(1.15)}
.note-tools button b{font-weight:800}
.note-tools button i{font-style:italic;font-family:Georgia,serif}
.note-tools button u{text-decoration:underline}
.note-tools .nt-clear{margin-left:auto;width:auto;padding:0 10px;font-size:11px;color:var(--text-dim)}
.note-body{
  min-height:140px;max-height:44vh;overflow-y:auto;padding:10px 14px;outline:none;
  font-size:13px;line-height:1.55;user-select:text;cursor:text;
}
.note-body:empty::before{content:'Текст заметки…';color:var(--muted)}
.note-body ul{padding-left:20px}
.note-foot{padding:6px 12px 9px;font-size:10px;color:var(--muted);border-top:1px solid var(--glass-brd)}