/* ====================== THEME / RESET ====================== */
:root{
  --bg:#0f1220;
  --panel:#171a2b;
  --text:#e7e9f0;
  --muted:#a4a9c1;
  --accent:#6ea8fe;
  --good:#46c27a;
  --bad:#ff6b6b;
  --border-soft:rgba(255,255,255,0.06);
  --card-h:268px;
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
}

.app{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}

/* ====================== MAP / MODES ====================== */
.app.mode-add #map,
.app.mode-add #map *{
  cursor:var(--cursor-add, crosshair) !important;
}
.app.mode-delete #map,
.app.mode-delete #map *{
  cursor:var(--cursor-delete, crosshair) !important;
}
.app.mode-ruler #map,
.app.mode-ruler #map *{
  cursor:var(--cursor-ruler, crosshair) !important;
}

#map{
  position:absolute;
  inset:0;
  background:#0f1424;
  z-index:1;
}

/* ====================== TOP BAR ====================== */
.topbar{
  position:absolute;
  top:0; left:0; right:0;
  height:44px;
  background:rgba(15,18,32,0.6);
  border-bottom:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
}

.topbar .controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  max-width:1100px;
}

.topbar .topbar-logout-btn{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border:none;
  background:linear-gradient(135deg,#6ea8fe,#4a8cff);
  box-shadow:0 6px 14px rgba(0,0,0,0.45);
}

.topbar .topbar-logout-btn[hidden]{
  display:none !important;
}

.topbar .topbar-logout-btn:hover{
  transform:translateY(calc(-50% - 1px));
  box-shadow:0 8px 18px rgba(0,0,0,0.55);
}

.topbar .topbar-logout-btn:disabled,
.topbar .topbar-logout-btn:disabled:hover{
  opacity:0.58;
  transform:translateY(-50%);
  box-shadow:0 6px 14px rgba(0,0,0,0.45);
}

.topbar .topbar-logout-btn svg,
.topbar .topbar-logout-btn svg path{
  color:#081020;
  stroke:#081020;
}

.topbar .topbar-profile-btn{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
}

.topbar .topbar-profile-btn:hover{
  transform:translateY(calc(-50% - 1px));
}

.topbar .topbar-profile-btn:disabled,
.topbar .topbar-profile-btn:disabled:hover{
  opacity:0.58;
  transform:translateY(-50%);
}

.service-version{
  display:none;
}

.freq-group{
  display:flex;
  align-items:center;
  gap:8px;
}
.freq-group label{ white-space:nowrap; }

.topbar input{
  width:70px;
  background:#0d1122;
  border:1px solid #243055;
  color:#e7e9f0;
  border-radius:6px;
  padding:3px 5px;
  font-size:12px;
}

.toolbar{
  display:flex;
  align-items:center;
  gap:8px;
}
.toolbar-group{
  position:relative;
  display:flex;
  align-items:center;
}

/* ====================== ICON BUTTONS ====================== */
.icon-btn{
  width:32px;
  height:32px;
  padding:0;
  border:none;
  border-radius:10px;
  background:linear-gradient(135deg,#6ea8fe,#4a8cff);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,0.45);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.icon-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,0.55);
}
.icon-btn:disabled{
  cursor:default;
  transform:none;
}
.icon-btn:disabled:hover{
  transform:none;
  box-shadow:0 6px 14px rgba(0,0,0,0.45);
}

.icon-btn.active{
  box-shadow:0 0 0 2px rgba(255,209,102,.85), 0 6px 14px rgba(0,0,0,0.5);
}
.icon-btn.active:hover{
  box-shadow:
    0 0 0 2px rgba(255,209,102,.85),
    0 8px 18px rgba(0,0,0,0.55);
}
.icon-btn.info-pending{
  box-shadow:0 0 0 2px rgba(255,209,102,.85), 0 6px 14px rgba(0,0,0,0.5);
}
.icon-btn.info-pending:hover{
  box-shadow:
    0 0 0 2px rgba(255,209,102,.85),
    0 8px 18px rgba(0,0,0,0.55);
}

.icon-btn svg{
  width:18px;
  height:18px;
  color:#081020;
  stroke:#081020;
  fill:none;
  overflow:visible;
}
.icon-btn svg path,
.icon-btn svg line,
.icon-btn svg polyline,
.icon-btn svg circle,
.icon-btn svg rect{
  stroke-width:1.69 !important;
  vector-effect:non-scaling-stroke;
}

/* активний delete-режим — без жовтого контуру */
.icon-btn.icon-btn-danger.active{
  background:#ff6b6b;
  box-shadow:0 6px 14px rgba(0,0,0,0.5);
}
.icon-btn.icon-btn-danger.active:hover{
  box-shadow:0 8px 18px rgba(0,0,0,0.55);
}

/* ====================== BUTTONS ====================== */
.btn{
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:8px 12px;
  font-weight:600;
  cursor:pointer;
  font-size:13px;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,0.45);
}
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.btn.small{
  padding:4px 10px;
  font-size:12px;
  border-radius:8px;
}
.btn.small.active{
  outline:2px solid rgba(255,209,102,.8);
}

.btn.accent{
  background:linear-gradient(135deg,#6ea8fe,#4a8cff);
  color:#081020;
  font-weight:600;
}

.btn.wide{
  width:100%;
  padding:7px 10px;
  border-radius:8px;
  font-size:13px;
  background:linear-gradient(135deg,#6ea8fe,#4a8cff);
  color:#fff;
  border:none;
  cursor:pointer;
  transition:.15s;
}
.btn.wide:hover{ background:#314170; }

/* ====================== DOCK / CARDS ====================== */
.bottom-dock{
  position:absolute;
  bottom:0; left:0; right:0;
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:16px;
  padding:14px 16px;
  pointer-events:none;
  z-index:10;
  flex-wrap:nowrap;

  max-width:1400px;
  margin:0 auto;
}

.floating-card{
  pointer-events:auto;
  background:rgba(23,26,43,0.4);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
  color:#e7e9f0;
  overflow:hidden;
  backdrop-filter:blur(14px);
  display:flex;
  flex-direction:column;
  max-height:90vh;
}

.site-card{
  width:140px;
  max-width:none;
  flex:0 0 140px;
}

.chart-card{
  height:var(--card-h);
  display:flex;
  flex-direction:column;

  width:auto;
  flex:1 1 675px;
  min-width:520px;
  max-width:675px;
}

/* ====================== CARD HEADER / TEXT ====================== */
.card-header{
  padding:8px 12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.card-header h3{
  margin:0;
  font-size:14px;
  color:#fff;
}
.chart-title-beta{
  color:#a4afc7;
  font-size:13px;
  font-weight:500;
  margin-left:8px;
}
.card-sub{ font-size:11px; color:#a4afc7; }
.profile-inline{ font-size:13px; color:#a4afc7; }
.profile-inline .sep{ margin:0 6px; opacity:.45; }

.card-body{ padding:10px 12px; }

.two-cols{
  display:flex;
  gap:8px;
  margin-bottom:8px;
}

.ctrl{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:8px;
  flex:1;
}
.ctrl label{
  display:block;
  font-size:12px;
  color:#a4afc7;
  margin-bottom:3px;
}
.ctrl input,
.ctrl select{
  width:100%;
  background:#0d1122;
  border:1px solid #243055;
  border-radius:8px;
  padding:6px 8px;
  color:#e7e9f0;
  font-size:12px;
}

/* ====================== UI MINIMIZE BUTTON ====================== */
.chart-card .card-header{
  position:relative;
  padding-right:44px; /* desktop reserve */
}

.ui-min-btn{
  position:absolute;
  right:5px;
  top:5px;
  width:28px;
  height:28px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  background:rgba(13,17,34,.75);
  border:1px solid rgba(255,255,255,0.10);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e7e9f0;
  transition:transform .12s ease, opacity .12s ease, box-shadow .12s ease;
  z-index:50;
}
.ui-min-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,0.45);
  opacity:.95;
}
.ui-min-btn svg{ width:18px; height:18px; }
.ui-min-btn.mobile{ display:none; }

/* ====================== CHART HEADER / LEGEND ====================== */
.chart-header-left{
  display:flex;
  align-items:baseline;
  gap:8px;
}

.chart-legend-inline{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  white-space:nowrap;
}
.chart-legend-default{
  display:flex;
  align-items:center;
  gap:12px;
}
.chart-legend-inline span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.chart-legend-inline i{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
}
.chart-legend-inline .lg-los{ background:#46c27a; }
.chart-legend-inline .lg-terrain{ background:#b87333; }
.chart-legend-inline .lg-f1{ background:#4a90e2; }

.chart-legend-beacon{
  display:none;
  align-items:center;
  gap:12px;
  font-size:12px;
}

.chart-legend-beacon .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
}

.chart-legend-beacon [hidden]{
  display:none !important;
}

.chart-legend-beacon .dot.good{ background:#46c27a; }
.chart-legend-beacon .dot.warn{ background:#b87333; }
.chart-legend-beacon .dot.bad{ background:#ff4d4d; }

/* ====================== CHART AREA / CANVAS ====================== */
.chart-area{
  position:relative;
  flex:1;
  min-height:0;
  padding:8px 18px 10px;
  background:radial-gradient(circle at bottom,#0b0f1e 0%,#080a16 100%);
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
  border-radius:0;
}
.chart-area canvas{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  box-sizing:border-box;
}

/* ====================== MINI STATS ====================== */
.mini-stats{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  padding:6px 12px 8px;
  background:#15192b;
  border-top:1px solid rgba(255,255,255,0.05);
  margin-top:auto;
}
.chart-card .mini-stats{
  border-bottom-left-radius:16px;
  border-bottom-right-radius:16px;
}
.mini-stats > div{ white-space:nowrap; }

.beacon-quick-stats{
  display:none;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  padding:6px 12px 8px;
  background:#15192b;
  border-top:1px solid rgba(255,255,255,0.05);
  margin-top:auto;
}
.chart-card .beacon-quick-stats{
  border-bottom-left-radius:16px;
  border-bottom-right-radius:16px;
}
.beacon-quick-stats > div{ white-space:nowrap; }

.small{ font-size:12px; color:var(--muted); }
.ok{ color:var(--good); }
.bad{ color:var(--bad); }

/* ====================== OBSTACLES ====================== */
.ob-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:6px;
}
.ob-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:#0f142a;
  border:1px solid #283257;
  padding:8px;
  border-radius:8px;
  font-size:12px;
}
.pill{
  display:inline-flex;
  gap:6px;
  align-items:center;
  border:1px solid #34406c;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  color:#cfe0ff;
}

/* ====================== FORM SELECT (GLOBAL) ====================== */
select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-color:#0d1122;
  border:1px solid #243055;
  border-radius:10px;
  padding:6px 32px 6px 10px;
  color:#e7e9f0;
  font-size:12px;
}
select::-ms-expand{ display:none; }

/* desktop default */
#mobileControls{ display:none; }

/* ====================== MAP MARKER LABEL ====================== */
.marker-label{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:600;
  font-size:14px;
  color:#fff;
  text-shadow:
    0 0 2px #000,
    0 0 6px #000,
    0 2px 2px rgba(0,0,0,.85);
  -webkit-text-stroke:0px #000;
}

/* ====================== DROPDOWNS ====================== */
.dropdown-panel,
.dropdown-card{
  position:absolute;
  background:rgba(23,26,43,0.4);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:none;
  z-index:20;
}

.dropdown-panel{
  top:52px;
  left:0;
  width:120px;
  padding:8px;
  background:rgba(23,26,43,0.9);
}
.dropdown-panel.right{ right:0; left:auto; }
.dropdown-panel.open{ display:block; }
.dropdown-panel.overlay-menu{
  width:152px;
}

.menu-toggle-btn{
  justify-content:space-between;
}
.menu-point{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#46c27a;
  box-shadow:0 0 0 1px rgba(255,255,255,0.25);
  flex:0 0 8px;
}
.menu-toggle-btn.off .menu-point{
  background:#ff4d4d;
}

.dropdown-card{
  padding:12px 14px;
  width:154px;
  height:var(--card-h);
  display:flex;
  flex-direction:column;
  gap:8px;
  transform:none;
}
.dropdown-card label{
  display:flex;
  flex-direction:column;
  font-size:12px;
  color:var(--muted);
}
.dropdown-card label span{ margin-bottom:3px; }
.dropdown-card input{
  margin-top:0;
  background:#0d1122;
  border:1px solid #243055;
  color:#e7e9f0;
  border-radius:8px;
  padding:6px 8px;
  font-size:11px;
}

.dropdown-btn{
  width:100%;
  text-align:center;
  padding:6px;
  border-radius:8px;
  cursor:pointer;
  font-size:13px;
  background:var(--accent);
  border:none;
  color:#fff;
}
.dropdown-btn.secondary{
  background:transparent;
  border:1px solid #243055;
  color:var(--muted);
}
.dropdown-btn:hover{ opacity:.9; }

.dropdown-title{
  font-size:13px;
  font-weight:600;
  color:#fff;
  margin-bottom:4px;
}

.menu-btn{
  width:100%;
  border-radius:12px;
  border:none;
  background:linear-gradient(135deg,#6ea8fe,#4a8cff);
  color:#081020;
  font-size:12px;
  font-weight:600;
  padding:6px 10px;
  text-align:left;
  cursor:pointer;
  margin:0 0 6px 0;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;

  box-shadow:0 6px 14px rgba(0,0,0,0.45);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.menu-btn:last-child{ margin-bottom:0; }
.menu-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,0.55);
  opacity:.95;
}
.menu-btn:disabled{
  opacity:.45;
  cursor:default;
  transform:none;
  box-shadow:none;
  pointer-events:none;
}
.menu-btn:disabled:hover{
  transform:none;
  box-shadow:none;
  opacity:.45;
}
.menu-btn.danger{
  background:none;
  color:#ff6b6b;
  border:1px solid rgba(255,107,107,0.8);
}
.menu-separator{
  height:1px;
  margin:6px 0 8px;
  background:rgba(255,255,255,0.07);
}
.menu-btn.active{ outline:2px solid rgba(255,209,102,.9); }
.menu-btn.info-pending{
  outline:2px solid rgba(255,209,102,.9);
}

#exportMenu .menu-btn{
  justify-content:center;
  text-align:center;
}

#exportToolbarGroup{
  display:none !important;
}

#mobileMenuExportBtn{
  display:none !important;
}

.profile-menu{
  width:min(318px, calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  box-sizing:border-box;
  max-height:calc(100dvh - var(--profile-menu-top, 68px) - 12px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:none;
  padding:12px;
  border-radius:14px;
  background:rgba(15,18,32,0.6);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
}

.profile-menu-shell{
  position:relative;
}

.profile-menu::-webkit-scrollbar{
  display:none;
}

.profile-menu-close{
  position:absolute;
  top:8px;
  right:8px;
  width:26px;
  height:26px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e7e9f0;
  background:rgba(13,17,34,0.62);
  cursor:pointer;
  font-size:18px;
  line-height:1;
  font-weight:700;
  z-index:2;
}

.profile-menu-close:hover{
  border-color:rgba(110,168,254,0.38);
  background:rgba(33,42,72,0.82);
}

.profile-menu-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 34px 12px 8px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.profile-menu-avatar{
  width:44px;
  height:44px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  color:#081020;
  background:linear-gradient(135deg,#6ea8fe,#4a8cff);
  box-shadow:0 8px 18px rgba(0,0,0,0.45);
}

.profile-menu-avatar svg{
  width:27px;
  height:27px;
}

.profile-menu-meta{
  min-width:0;
}

.profile-menu-meta h3{
  margin:0 0 2px;
  color:#fff;
  font-size:15px;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.profile-menu-meta p{
  margin:0 0 6px;
  color:#a4afc7;
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.profile-plan-line{
  display:flex;
  align-items:center;
  gap:6px;
}

.profile-plan-label{
  color:#cfd6ea;
  font-size:11px;
  font-weight:700;
}

.profile-menu-section{
  display:grid;
  gap:6px;
  padding:10px 0 0;
}

.profile-menu-section + .profile-menu-section{
  margin-top:8px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.08);
}

.profile-section-toggle{
  width:100%;
  min-height:34px;
  border:0;
  border-radius:10px;
  padding:7px 4px;
  color:#fff;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-align:left;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.profile-section-toggle.sub{
  margin-top:2px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(13,17,34,0.52);
  font-size:12px;
  letter-spacing:0;
  text-transform:none;
}

.profile-section-toggle small{
  color:#d8deee;
  font-size:11px;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
}

.profile-section-toggle small:not(:empty)::before{
  content:" - ";
  color:rgba(231,233,240,0.62);
}

.profile-section-toggle i{
  position:relative;
  width:16px;
  height:16px;
  display:block;
  opacity:.82;
  flex:0 0 auto;
}

.profile-section-toggle i::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translate(-50%, -50%) rotate(45deg);
  transform-origin:center;
  transition:transform .16s ease;
}

.profile-section-toggle[aria-expanded="true"] i::before{
  transform:translate(-50%, -50%) rotate(225deg);
}

.profile-section-panel{
  display:grid;
  gap:6px;
  max-height:900px;
  opacity:1;
  overflow:hidden;
  transform-origin:top;
  transition:max-height .2s ease, opacity .2s ease;
}

.profile-action-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;
  padding:1px 0;
}

.profile-action-grid .profile-menu-btn{
  justify-content:center;
  text-align:center;
  padding:7px 8px;
}

.profile-link-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;
}

.profile-link-grid .profile-menu-btn{
  justify-content:center;
  text-align:center;
}

.profile-section-panel[hidden]{
  display:grid;
  max-height:0;
  opacity:0;
  pointer-events:none;
}

.profile-menu-btn{
  width:100%;
  min-height:34px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  padding:7px 10px;
  color:#e7e9f0;
  background:rgba(13,17,34,0.72);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-align:left;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  box-shadow:none;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}

.profile-menu-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(110,168,254,0.38);
  background:rgba(33,42,72,0.86);
}

.profile-menu-btn.danger{
  color:#ff9bad;
  border-color:rgba(255,107,107,0.42);
}

.profile-project-list{
  display:grid;
  gap:6px;
  max-height:2400px;
  overflow:visible;
  padding:2px 0 0;
  opacity:1;
  transition:max-height .2s ease, opacity .2s ease, padding-top .2s ease;
}

.profile-project-list[hidden]{
  display:grid;
  max-height:0;
  opacity:0;
  overflow:hidden;
  padding-top:0;
  pointer-events:none;
}

.profile-project-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 34px 34px;
  align-items:center;
  gap:4px;
}

.profile-project-open{
  width:100%;
  min-width:0;
  min-height:34px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  padding:7px 9px;
  color:#e7e9f0;
  background:rgba(13,17,34,0.72);
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:8px;
  text-align:left;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  box-shadow:none;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}

.profile-project-open:hover,
.profile-project-icon:hover{
  transform:translateY(-1px);
  border-color:rgba(110,168,254,0.38);
  background:rgba(33,42,72,0.86);
}

.profile-project-open span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.profile-project-open small{
  color:#a4afc7;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}

.profile-project-icon{
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  color:#d8deee;
  background:rgba(13,17,34,0.72);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:17px;
  font-weight:800;
  line-height:1;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}

.profile-project-icon svg{
  width:14px;
  height:14px;
}

.profile-project-icon.danger{
  color:#ff9bad;
  border-color:rgba(255,107,107,0.32);
}

.profile-project-empty{
  padding:10px;
  color:#a4afc7;
  text-align:center;
  font-size:12px;
}

.profile-menu-message{
  min-height:12px;
  margin:5px 4px 0;
  color:#78e4a7;
  font-size:11px;
  text-align:center;
}

.profile-menu-message:empty{
  display:none;
}

.profile-menu-message[data-type="bad"]{
  color:#ff8ba0;
}

.profile-menu-footer{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  padding-top:10px;
  margin-top:6px;
  border-top:1px solid rgba(255,255,255,0.08);
}

.profile-menu-footer .profile-menu-btn{
  justify-content:center;
  text-align:center;
}

.feedback-modal{
  background:rgba(23,26,43,0.1);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.export-modal{
  background:rgba(23,26,43,0.1);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.feedback-modal-inner{
  width:430px;
  max-width:92%;
  background:rgba(15,18,32,0.72);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  position:relative;
}

.export-modal-inner{
  width:580px;
  max-width:92%;
  background:rgba(15,18,32,0.72);
  border:1px solid rgba(255,255,255,0.08);
  padding:18px 20px 20px;
  gap:14px;
  overflow:visible;
}

.feedback-modal-head,
.export-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.feedback-modal .feedback-modal-head h3,
.export-modal .export-modal-head h3{
  border:0;
  padding:0;
}

.profile-menu-close.in-modal{
  position:static;
  flex:0 0 auto;
}

.feedback-field{
  display:grid;
  gap:7px;
}

.feedback-field span{
  color:#fff;
  font-size:12px;
  font-weight:800;
}

.feedback-modal .feedback-field textarea{
  width:100%;
  min-height:138px;
  height:138px;
  resize:vertical;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(13,17,34,0.74);
  color:#e7e9f0;
  padding:10px 12px;
  font:13px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
  white-space:pre-wrap;
}

.feedback-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.export-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  overflow:visible;
}

.export-actions .btn{
  flex:0 0 auto;
}

#mobileMenuToggle{
  display:none;
}

#mobileMenu{
  width:152px;
}

.mobile-menu-card{
  display:block;
}

/* Compensate downward button shadow so visual top/bottom in Add menu match. */
#addMenu{
  padding:8px 8px 3px;
}

/* ====================== MODAL ====================== */
.modal{
  position:fixed;
  inset:0;
  background:rgba(23,26,43,0.1);
  backdrop-filter:blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.modal-inner{
  background:rgba(23,26,43,0.4);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  width:580px;
  max-width:92%;
  padding:18px 20px 20px;
  color:#e7e9f0;
  box-shadow:0 12px 32px rgba(0,0,0,0.7);
  backdrop-filter:blur(14px);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.modal-inner h3{
  font-size:15px;
  font-weight:600;
  margin:0;
  padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.modal-inner textarea{
  background:transparent;
  border:none;
  color:#e7e9f0;
  border-radius:10px;
  padding:10px 12px;
  font-family:"JetBrains Mono",monospace;
  font-size:13px;
  height:300px;
  resize:vertical;
  white-space:pre;
  line-height:1.5;
}
/* Custom scrollbars for export textarea (dark / subtle, no white tracks) */
.modal-inner textarea{
  overflow:auto;

  /* легка темна підкладка, щоб яскрава карта під модалкою не “світила” в зоні скролбарів */
  background:rgba(15,18,32,0.18);
  border:1px solid rgba(255,255,255,0.06);

  /* Firefox */
  scrollbar-width:thin;
  scrollbar-color:rgba(231,233,240,0.35) transparent;
}

/* Chrome / Edge / Safari */
.modal-inner textarea::-webkit-scrollbar{ width:10px; height:10px; }
.modal-inner textarea::-webkit-scrollbar-track{ background:transparent; }
.modal-inner textarea::-webkit-scrollbar-thumb{
  background-color:rgba(231,233,240,0.35);
  border-radius:999px;
  border:3px solid transparent;
  background-clip:content-box; /* робить “маркер” без білої доріжки */
}
.modal-inner textarea::-webkit-scrollbar-thumb:hover{
  background-color:rgba(231,233,240,0.55);
  background-clip:content-box;
}
.modal-inner textarea::-webkit-scrollbar-corner{ background:transparent; }
.modal-inner textarea{ resize:none; }

.profile-modal{
  background:rgba(23,26,43,0.1);
  backdrop-filter:blur(8px);
}

.profile-modal-inner{
  width:420px;
  max-width:92%;
}

.profile-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.profile-avatar{
  width:58px;
  height:58px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#081020;
  background:linear-gradient(135deg,#6ea8fe,#4a8cff);
  box-shadow:0 8px 18px rgba(0,0,0,0.45);
  flex:0 0 auto;
}

.profile-avatar svg{
  width:34px;
  height:34px;
}

.profile-meta{
  min-width:0;
}

.profile-meta h3{
  margin:0 0 4px;
  padding:0;
  border:0;
  color:#fff;
  font-size:17px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.profile-meta p{
  margin:0 0 7px;
  color:#a4afc7;
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.profile-plan{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 9px;
  border-radius:999px;
  border:1px solid rgba(110,168,254,0.45);
  color:#cfe0ff;
  background:rgba(110,168,254,0.14);
  font-size:11px;
  font-weight:700;
  text-transform:none;
}

.profile-settings{
  display:grid;
  gap:12px;
}

.profile-field{
  display:grid;
  gap:5px;
}

.profile-field span,
.profile-check span{
  color:#a4afc7;
  font-size:12px;
  font-weight:700;
}

.profile-field select{
  width:100%;
  height:34px;
}

.profile-check{
  display:flex;
  align-items:center;
  gap:9px;
}

.profile-check input{
  width:16px;
  height:16px;
  accent-color:#6ea8fe;
}

.profile-message{
  min-height:16px;
  margin:0;
  color:#78e4a7;
  font-size:12px;
  text-align:center;
}

.profile-message:empty{
  min-height:0;
}

/* ====================== POINT CARD ====================== */
.point-card{
  width:154px;
  height:var(--card-h);
  max-width:none;
  padding:10px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.point-title{
  font-size:13px;
  font-weight:600;
  color:#fff;
  margin-bottom:3px;
  flex:1 1 auto;
  min-width:0;
  white-space:pre;
  overflow:visible;
  text-overflow:clip;
}
.point-title[contenteditable="true"]{
  border-radius:8px;
  padding:2px 2px 2px 0;
}
.point-title[contenteditable="true"]:focus{
  outline:none;
  box-shadow:none;
  background:transparent;
}
.point-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-bottom:3px;
  margin-bottom:3px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.point-header-actions{
  display:flex;
  align-items:center;
  gap:2px;
  flex:0 0 auto;
  position:relative;
  top:-1px;
}

.copy-icon-btn{
  background:none;
  border:none;
  padding:2px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#e7e9f0;
  transition:transform .12s ease, opacity .12s ease;
}
.copy-icon-btn:hover{
  opacity:.8;
  transform:scale(1.05);
}
.copy-icon-btn svg{ width:16px; height:16px; }
.copy-icon-btn svg path{ stroke-width:2.2; }

.point-field{
  display:flex;
  flex-direction:column;
  font-size:12px;
  color:var(--muted);
}
.point-field span,
.point-field > label{ margin-bottom:3px; }
.point-field input{
  background:#0d1122;
  border:1px solid #243055;
  color:#e7e9f0;
  border-radius:8px;
  padding:6px 8px;
  font-size:11px;
}
.point-copy-row{
  display:flex;
  align-items:center;
  gap:5px;
  width:100%;
}
.point-copy-row input{
  flex:1 1 auto;
  min-width:0;
  width:100%;
}
.point-copy-btn{
  flex:0 0 25px;
  width:25px;
  height:25px;
  border:1px solid #243055;
  border-radius:8px;
  background:#0d1122;
  color:#dfe8ff;
}
.point-copy-btn:hover{
  opacity:1;
  transform:none;
  border-color:#4f8ff7;
  background:#0d1122;
}
.point-copy-btn svg{
  width:14px;
  height:14px;
}
.point-copy-btn.is-copied{
  color:#78e4a7;
  border-color:rgba(120,228,167,.65);
}
.point-field input[type="number"]::-webkit-outer-spin-button,
.point-field input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.point-field input[type="number"]{
  appearance:textfield;
  -moz-appearance:textfield;
}
.point-height-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:7px;
}
.point-height-row input{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  text-align:center;
}
.point-btn.point-auto-btn{
  width:100%;
  min-width:0;
  height:25px;
  align-self:center;
  margin-top:0;
  padding:0;
  border-radius:8px;
  font-size:11px;
  box-shadow:0 4px 10px rgba(0,0,0,0.4);
}

.point-btn{
  margin-top:7px;
  width:100%;
  padding:8px 0;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  background:var(--accent);
  color:#081020;
  box-shadow:0 6px 14px rgba(0,0,0,0.45);
  transition:transform .12s ease, box-shadow .12s ease;
}
.point-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,0.55);
}

/* ====================== SEGMENT / FREQ CONTROLS ====================== */
.seg-wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:2px;
  background:rgba(13,17,34,.75);
  border:2px solid #6ea8fe;
  border-radius:12px;
  padding:3px;
}
.seg-btn{
  border:none;
  background:transparent;
  color:#a4afc7;
  font-weight:700;
  padding:4px 6px;
  border-radius:8px;
  cursor:pointer;
  font-size:12px;
}
.seg-btn.active{
  background:linear-gradient(135deg,#6ea8fe,#4a8cff);
  color:#081020;
  box-shadow:0 6px 14px rgba(0,0,0,0.35);
}

.seg-tip{
  position:fixed;
  left:0;
  top:0;
  transform:none;
  background:rgba(20,24,40,.95);
  border:1px solid #2a355f;
  border-radius:10px;
  font-size:11px;
  color:#e7e9f0;
  padding:8px 10px;
  pointer-events:none;
  opacity:0;
  transition:.15s ease;
  z-index:9999;
  max-width:calc(100vw - 16px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.seg-wrap:hover .seg-tip{ opacity:1; }

.seg-btn:focus,
.seg-btn:focus-visible{
  outline:none;
  box-shadow:none;
}

.seg-wrap,
.seg-btn{
  -webkit-tap-highlight-color:transparent;
}

.freq-pill{
  display:flex;
  align-items:center;
  gap:2px;
  background:rgba(13,17,34,.75);
  border:2px solid #6ea8fe;
  border-radius:12px;
  padding:4px;
  height:32px;
}
.freq-menu-toggle,
.freq-pill input{
  box-sizing:border-box;
  height:32px;
  border:none;
  outline:none;
  text-align:center;
  background:transparent;
  color:#e7e9f0;
  font-size:12px;
  font-weight:500;
  border-radius:12px;
  padding:0 14px;
  -webkit-appearance:none;
  appearance:none;
}
.freq-menu-toggle{
  width:92px;
  padding:0 10px;
  text-align:left;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.freq-menu-arrow{
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid #9fb8e8;
  transition:transform .12s ease;
}
.freq-menu-toggle[aria-expanded="true"] .freq-menu-arrow{
  transform:rotate(180deg);
}
.freq-pill input{
  width:56px;
  padding:0 8px;
}
.freq-pill input[hidden]{
  display:none;
}
.freq-pill input::-webkit-outer-spin-button,
.freq-pill input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.frequency-menu{
  width:112px;
  padding:8px 8px 3px;
}
.frequency-menu .menu-btn{
  justify-content:center;
  text-align:center;
}

.beacon-radius-menu{
  width:112px;
}

/* ====================== MINIMIZED STATE ====================== */
.app.ui-minimized .bottom-dock > section.floating-card.point-card{
  display:none !important;
}

.app.ui-minimized .chart-card .chart-area,
.app.ui-minimized .chart-card .chart-legend-inline{
  display:none !important;
}

.app.ui-minimized .chart-card .mini-stats > div{
  flex:0 0 auto;
}

.app.ui-minimized .chart-card{
  position:fixed !important;
  left:50% !important;
  bottom:14px !important;
  transform:translateX(-50%) !important;

  height:auto !important;
  flex:0 0 auto !important;

  width:min(675px, calc(100vw - 24px)) !important;   /* desktop/overall */
  max-width:calc(100vw - 24px) !important;
}

/* show title in header while minimized */
.app.ui-minimized .chart-card .chart-header-left{
  display:flex !important;
  width:100% !important;
  justify-content:center !important;
  align-items:center !important;
  gap:10px !important;
}

/* ====================== PANEL HELPERS (rounded) ====================== */
.fresnel-panel{
  border-radius:22px;
  overflow:hidden;
}
.fresnel-panel.expanded{ border-radius:22px; }
.fresnel-panel::before{ border-radius:inherit; }

.fresnel-footer{
  border-bottom-left-radius:22px;
  border-bottom-right-radius:22px;
}

/* ====================== CHART OVERLAYS / DRAG UI ====================== */
.b-drag-badge{
  position:absolute;
  z-index:5;
  display:none;
  padding:4px 8px;
  border-radius:10px;
  background:rgba(13,17,34,.82);
  border:1px solid rgba(110,168,254,.35);
  color:#e7e9f0;
  font-size:11px;
  font-weight:700;
  pointer-events:none;
  backdrop-filter:blur(10px);
  transform:translate(-50%, -125%);
  white-space:nowrap;
}

#chart{
  touch-action:none;
  user-select:none;
}

.chart-overlay-distance{
  position:absolute;
  left:10px;
  right:10px;
  top:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  z-index:5;
  pointer-events:none;
  user-select:none;
}

.dist-text{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20ch;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(13,17,34,0.69);
  color:rgba(164,175,199,.95);
  font-size:11px;
  line-height:1;
  white-space:nowrap;
  text-align:center;
  font-variant-numeric:tabular-nums;
}

.dist-line{
  position:relative;
  height:0;
  border-top:1px solid rgba(255,255,255,0.22);
  flex:1 1 auto;
  max-width:48px;
  min-width:40px;
  opacity:.9;
}
.dist-left::after{
  content:"";
  position:absolute;
  left:-1px;
  top:-4px;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-right:6px solid rgba(255,255,255,0.69);
}
.dist-right::after{
  content:"";
  position:absolute;
  right:-1px;
  top:-4px;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-left:6px solid rgba(255,255,255,0.69);
}

/* ====================== RESPONSIVE (MOBILE) ====================== */
@media (max-width:768px){
  body,
  .app,
  .topbar,
  .bottom-dock,
  .floating-card,
  .chart-card,
  .icon-btn,
  button,
  input,
  label{
    touch-action:manipulation;
  }

  #map,
  #map *{
    touch-action:pan-x pan-y pinch-zoom;
  }

  .topbar{
    height:40px;
    justify-content:center;
    gap:8px;
    padding:0 8px;
    overflow:hidden;
  }

  .topbar .controls{
    justify-content:flex-start;
    gap:8px;
    width:auto;
    min-width:0;
    max-width:calc(100vw - 54px);
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .topbar .controls::-webkit-scrollbar{
    display:none;
  }

  .topbar .controls > *{
    flex:0 0 auto;
  }

  .service-version{
    left:8px;
    font-size:9px;
  }

  .topbar .topbar-logout-btn{
    right:8px;
    width:30px;
    height:30px;
  }

  .topbar .topbar-profile-btn{
    position:static;
    left:auto;
    top:auto;
    transform:none;
    flex:0 0 30px;
    width:30px;
    height:30px;
    z-index:2;
  }

  .topbar .topbar-profile-btn:hover,
  .topbar .topbar-profile-btn:disabled,
  .topbar .topbar-profile-btn:disabled:hover{
    transform:none;
  }

  .topbar .freq-group{ display:none; }
  .site-card{ display:none; }

  .bottom-dock{
    justify-content:center;
    align-items:stretch;
    bottom:0;
    padding:8px;
    overflow:visible !important;
  }

  .floating-card{ overflow:visible !important; }

  .chart-card{
    width:100%;
    flex:0 0 auto;
    height:42vh;
    overflow:visible !important;
    position:relative;
    z-index:9999 !important;
    min-width:0;
    max-width:none;
  }

  /* mobile inputs block */
  #mobileControls{
    display:flex;
    gap:8px;
    padding:6px 10px 8px;
    background:rgba(15,18,32,0.9);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }

  #mobileControls .mc-field{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
  }

  #mobileControls label{
    font-size:11px;
    color:var(--muted);
  }

  #mobileControls input{
    width:100%;
    padding:5px 7px;
    border-radius:6px;
    border:1px solid #243055;
    background:#0d1122;
    color:#e7e9f0;
    font-size:13px;
  }

  #mobileControls #mFreqLabel{
    text-align:center;
  }

  #mobileControls .mc-field:first-child > label,
  #mobileControls .mc-field:last-child > label{
    text-align:center;
  }

  .mobile-height-control{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:4px;
    width:100%;
  }

  #mobileControls .mobile-height-control input{
    box-sizing:border-box;
    min-width:0;
    text-align:center;
  }

  #mobileControls .mobile-auto-btn{
    height:27px;
    align-self:center;
    padding:0;
    border:none;
    border-radius:6px;
    background:linear-gradient(135deg,#6ea8fe,#4a8cff);
    color:#081020;
    font-size:10px;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 4px 10px rgba(0,0,0,0.4);
  }

  .mobile-frequency-control{
    position:relative;
    width:100%;
  }

  #mobileControls .mobile-frequency-control select,
  #mobileControls .mobile-frequency-control input{
    box-sizing:border-box;
    width:100%;
    height:29px;
    margin:0;
    padding:5px 28px 5px 7px;
    border-radius:6px;
    border:1px solid #243055;
    background-color:#0d1122;
    color:#e7e9f0;
    font-size:13px;
  }

  #mobileControls .mobile-frequency-control select{
    padding-left:28px;
    text-align:center;
    text-align-last:center;
    background-image:
      linear-gradient(45deg, transparent 50%, #9fb8e8 50%),
      linear-gradient(135deg, #9fb8e8 50%, transparent 50%);
    background-position:
      calc(100% - 13px) 12px,
      calc(100% - 9px) 12px;
    background-size:4px 4px, 4px 4px;
    background-repeat:no-repeat;
  }

  #mobileControls .mobile-frequency-control input{
    text-align:center;
  }

  #mobileControls .mobile-frequency-control select option{
    background:#0d1122;
    color:#e7e9f0;
  }

  #mobileControls .mobile-frequency-control.custom input{
    position:absolute;
    inset:0 28px 0 0;
    z-index:2;
    width:calc(100% - 28px);
    padding-left:28px;
    padding-right:0;
    border-right:none;
    border-radius:6px 0 0 6px;
  }

  #mobileControls .mobile-frequency-control.custom select{
    position:relative;
    z-index:1;
    width:100%;
    color:#e7e9f0;
    background-color:#0d1122;
  }

  #mobileControls .mobile-frequency-control input[hidden]{
    display:none;
  }

  .mini-stats{
    flex-wrap:wrap;
    row-gap:4px;
  }

  .beacon-quick-stats{
    flex-wrap:wrap;
    row-gap:4px;
  }

  .chart-card .card-header{
  padding-top:6px;
  padding-bottom:4px;
  padding-left:48px !important;   /* ✅ симетрія під кнопку справа */
  padding-right:48px !important;  /* place for ui button */

  overflow:visible !important;

  flex-direction:column;
  gap:4px;

  justify-content:flex-start !important;
}


  .chart-legend-inline{
    width:100% !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    white-space:nowrap !important;
    padding-right:0 !important;
    gap:10px;
  }
  .chart-legend-inline span{ white-space:nowrap !important; }

.chart-header-left{ display:none; }

  .chart-card .card-header h3{
    font-size:13px;
  }

.profile-inline{
  font-size:11px;
}

  #exportToolbarGroup,
  #overlayToolbarGroup,
  #infoBtn,
  #rulerBtn,
  #resetBtn{
    display:none !important;
  }

  #mobileMenuToggle{
    display:flex !important;
  }

  #mobileMenu{
    position:absolute !important;
    width:152px !important;
    height:auto !important;
    max-width:calc(100vw - 16px) !important;
    padding:8px !important;
    border:1px solid rgba(255,255,255,0.06) !important;
    border-radius:16px !important;
    background:rgba(23,26,43,0.9) !important;
    box-shadow:0 8px 24px rgba(0,0,0,0.5) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
    z-index:50;
  }

  #mobileMenu.open{
    display:block !important;
  }

  #mobileMenu .mobile-menu-card{
    width:auto;
    max-height:none;
    overflow:visible;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  #mobileMenu .mobile-menu-card::-webkit-scrollbar{
    display:none;
  }

  #mobileMenu .menu-btn{
    justify-content:space-between;
    text-align:left;
  }

  #profileMenu.profile-menu{
    position:fixed !important;
    inset:0 !important;
    left:0 !important;
    top:0 !important;
    width:auto !important;
    max-width:none !important;
    max-height:none !important;
    padding:12px !important;
    border:0 !important;
    border-radius:0 !important;
    background:rgba(5,8,18,0.42) !important;
    box-shadow:none !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    z-index:9999;
  }

  #profileMenu.profile-menu.open{
    display:flex !important;
  }

  #profileMenu .profile-menu-shell{
    width:min(318px, calc(100vw - 24px));
    max-height:calc(100dvh - 24px);
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:none;
    padding:12px;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    background:rgba(15,18,32,0.72);
    box-shadow:0 12px 32px rgba(0,0,0,0.7);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  #profileMenu .profile-menu-shell::-webkit-scrollbar{
    display:none;
  }

  .chart-card .card-header .ui-min-btn{
    display:flex !important;
    position:absolute !important;
    right:6px !important;
    top:6px !important;
    margin-top:-48px !important;
    transform:none !important;
    z-index:99999 !important;
  }
  .chart-card .card-header .ui-min-btn:hover{ transform:none !important; }

  .chart-card .card-header .map-scale-control-mobile{
    display:flex !important;
    position:absolute !important;
    left:6px !important;
    top:6px !important;
    margin-top:-48px !important;
    z-index:99999 !important;
    background:rgba(13,17,34,.75) !important;
    border:1px solid rgba(255,255,255,0.10) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
  }

  .ui-min-btn{
    width:36px;
    height:36px;
    border-radius:12px;
  }
  .ui-min-btn svg{
    width:22px;
    height:22px;
  }

  /* ui-minimized: align width with dock padding (fix "slightly smaller") */
  .app.ui-minimized .chart-card{
    bottom:calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
  }

  /* chart closed by default (mobile) */
  .app.chart-closed .chart-card{ height:auto !important; }

  .app.chart-closed .chart-card .card-header{
    display:flex !important;
    border-bottom:none !important;
    padding-bottom:6px !important;
  }

  .app.chart-closed .chart-card .chart-legend-inline,
  .app.chart-closed .chart-area,
  .app.chart-closed .mini-stats{
    display:none !important;
  }

  /* prevent iOS focus-zoom */
  input, textarea, select, button{
    font-size:16px;
    line-height:1.2;
  }
  @media (max-width:768px){
  .mini-stats .stat-worst{
    display:none !important;
  }
}
}

/* tighter distance line on small phones */
@media (max-width:420px){
  .dist-line{ max-width:32px; min-width:16px; }
  /* hide bottom Distance row on mobile (keep DOM for JS) */

}
/* keep Distance only in top overlay (hide bottom duplicate) */
.mini-stats .stat-distance{
  display:none !important;
}
/* Тільки для повзунка в модалці експорту (підлаштуй селектор за потреби) */
#exportModal input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;          /* зона кліку, щоб зручно тягнути */
  background: transparent;
  outline: none;
}

/* Chrome / Edge / Opera */
#exportModal input[type="range"]::-webkit-slider-runnable-track{
  height: 0px;           /* 0 = доріжки не видно */
  background: transparent;
  border: none;
  box-shadow: none;
}

#exportModal input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);   /* колір маркера */
  border: 1px solid rgba(0,0,0,.35);
  margin-top: 5px;        /* вирівнювання по центру (можеш підкрутити) */
}

/* Firefox */
#exportModal input[type="range"]::-moz-range-track{
  height: 0px;
  background: transparent;
  border: none;
}

#exportModal input[type="range"]::-moz-range-thumb{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.35);
}

/* прибрати фокус-обводки в Firefox */
#exportModal input[type="range"]::-moz-focus-outer{
  border: 0;
}
/* textarea з експортом (підстав свій id, якщо інший) */
#exportText{
  width:100%;
  background:rgba(13,17,34,0.74);
  color: #e7e9f0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:10px 12px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.55;
  tab-size: 2;
  resize: none;                          /* прибрати білий “куток” resize справа знизу (опційно) */

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.55) transparent;
}

/* Chrome / Edge / Opera */
#exportText::-webkit-scrollbar{
  width: 12px;
  height: 12px;
  background: transparent;               /* фон області скролбару */
}
#exportText::-webkit-scrollbar-track{
  background: transparent;               /* доріжка прозора */
}
#exportText::-webkit-scrollbar-corner{
  background: transparent;               /* кут (де перетинаються) */
}
#exportText::-webkit-scrollbar-thumb{
  background-color: rgba(255,255,255,.55); /* “маркер” */
  border-radius: 999px;
  border: 4px solid transparent;         /* робить thumb “плаваючим” */
  background-clip: content-box;
}
/* Custom scrollbars for export textarea (dark / subtle, no white tracks) */
.modal-inner textarea{
  overflow:auto;

  /* легка темна підкладка, щоб яскрава карта під модалкою не “світила” в зоні скролбарів */
  background:rgba(15,18,32,0.18);
  border:1px solid rgba(255,255,255,0.06);

  /* Firefox */
  scrollbar-width:thin;
  scrollbar-color:rgba(231,233,240,0.35) transparent;
}

/* Chrome / Edge / Safari */
.modal-inner textarea::-webkit-scrollbar{ width:10px; height:10px; }
.modal-inner textarea::-webkit-scrollbar-track{ background:transparent; }
.modal-inner textarea::-webkit-scrollbar-thumb{
  background-color:rgba(231,233,240,0.35);
  border-radius:999px;
  border:3px solid transparent;
  background-clip:content-box; /* робить “маркер” без білої доріжки */
}
.modal-inner textarea::-webkit-scrollbar-thumb:hover{
  background-color:rgba(231,233,240,0.55);
  background-clip:content-box;
}
.modal-inner textarea::-webkit-scrollbar-corner{ background:transparent; }
.modal-inner textarea{ resize:none; }
/* ===== Safari/Chrome custom scrollbars for modal scroll areas ===== */
.modal-inner textarea,
.modal-inner .modal-content{
  -webkit-appearance: none;
  appearance: none;
}

/* WebKit (Safari/Chrome/Opera/Edge) */
.modal-inner textarea::-webkit-scrollbar,
.modal-inner .modal-content::-webkit-scrollbar{
  width: 10px;
  height: 10px;
  background: transparent;
}

.modal-inner textarea::-webkit-scrollbar-track,
.modal-inner .modal-content::-webkit-scrollbar-track,
.modal-inner textarea::-webkit-scrollbar-track-piece,
.modal-inner .modal-content::-webkit-scrollbar-track-piece{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.modal-inner textarea::-webkit-scrollbar-thumb,
.modal-inner .modal-content::-webkit-scrollbar-thumb{
  background-color: rgba(231,233,240,.35);
  border-radius: 999px;
  border: 3px solid transparent;     /* прибирає “білу доріжку” навколо */
  background-clip: content-box;
}

.modal-inner textarea::-webkit-scrollbar-thumb:hover,
.modal-inner .modal-content::-webkit-scrollbar-thumb:hover{
  background-color: rgba(231,233,240,.55);
  background-clip: content-box;
}

.modal-inner textarea::-webkit-scrollbar-corner,
.modal-inner .modal-content::-webkit-scrollbar-corner{
  background: transparent !important;
}

/* якщо десь видно білий “куток” ресайзу */
.modal-inner textarea::-webkit-resizer{
  background: transparent !important;
}
/* Safari: hide native scrollbars in modal areas (keeps scrolling) */
.safari #exportText{
  scrollbar-width: none;           /* Firefox ignore, ok */
  -ms-overflow-style: none;
}
.safari #infoModal .modal-content{
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.safari #exportText::-webkit-scrollbar,
.safari #infoModal .modal-content::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}

/* прибрати білий “куток” ресайзу textarea (часто видно в Safari) */
#exportText{ resize: none; }
#exportText::-webkit-resizer{ background: transparent !important; }

/* Safari: hide native scrollbars in modals (scroll still works) */
.safari #exportText,
.safari #infoModal .modal-content{
  scrollbar-width: none;     /* harmless outside Firefox */
  -ms-overflow-style: none;
}

.safari #exportText::-webkit-scrollbar,
.safari #infoModal .modal-content::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}

/* optional: remove textarea resize corner */
#exportText{ resize: none; }
#exportText::-webkit-resizer{ background: transparent !important; }

/* Distance labels (no bubbles) */
.dist-label{
  position:absolute;
  transform: translate(-50%,-120%);
  color:#e7e9f0;
  font:600 12px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}
.az-label{
  transform: translate(-50%, 10px);
  white-space: nowrap;
}

.route-probe-tooltip{
  position:absolute;
  transform:translate(-50%, calc(-100% - 16px));
  min-width:180px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(23,26,43,0.92);
  color:#eef3ff;
  box-shadow:0 14px 32px rgba(0,0,0,0.38);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  pointer-events:none;
  user-select:none;
  z-index:30;
}
.route-probe-tooltip::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:14px;
  height:14px;
  background:rgba(23,26,43,0.92);
  border-right:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
  transform:translateX(-50%) rotate(45deg);
}
.route-probe-tooltip__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  white-space:nowrap;
  font:600 12px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.route-probe-tooltip__row + .route-probe-tooltip__row{
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.route-probe-tooltip__row span{
  color:#aeb8d8;
}
.route-probe-tooltip__row strong{
  color:#f5f8ff;
  font-weight:700;
}

/* Adaptive map scale control */
.map-scale-control{
  margin:0 12px 14px 0;
  width:76px;
  padding:6px 8px 7px;
  display:flex;
  flex-direction:column;
  align-items:center;
  border-radius:12px;
  background:rgba(23,26,43,0.42);
  border:1px solid rgba(255,255,255,0.10);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 24px rgba(0,0,0,0.38);
  pointer-events:none;
  user-select:none;
}
.map-scale-label{
  color:#eef3ff;
  font:600 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-align:center;
  margin:0 0 4px;
  letter-spacing:.01em;
}
.map-scale-track{
  position:relative;
  height:7px;
  border-top:2px solid rgba(231,233,240,0.92);
  width:48px;
  margin:0 auto;
}
.map-scale-tick{
  position:absolute;
  top:-2px;
  width:0;
  height:7px;
  border-left:2px solid rgba(231,233,240,0.92);
}
.map-scale-tick-left{ left:0; }
.map-scale-tick-right{ right:0; }
.map-scale-control-mobile{ display:none; }

/* Map distance grid (step is synced with scale indicator) */
.map-grid-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:2;
}

/* Portrait orientation lock overlay */
.orientation-lock{
  display:none;
  position:fixed;
  inset:0;
  z-index:10000;
  padding:24px;
  background:#020816;
  color:#e7e9f0;
  align-items:center;
  justify-content:center;
  text-align:center;
  font:600 18px/1.4 "Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

body.lock-portrait.is-landscape-lock > *:not(.orientation-lock){
  display:none !important;
}
body.lock-portrait.is-landscape-lock .orientation-lock{
  display:flex;
}

/* map scale control tuning for touch landscape */
@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-width:1000px){
  .map-scale-control{
    width:92px;
    margin-right:8px;
    margin-bottom:8px;
    padding:5px 7px 6px;
  }
}
.beacon-mode-panel{
  position:relative;
  width:100%;
  height:100%;
  z-index:1;
  display:none;
  align-items:stretch;
  justify-content:stretch;
}

.beacon-mode-panel-inner{
  width:100%;
  height:100%;
  background:transparent;
  border:none;
  border-radius:0;
  padding:6px 6px 2px;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow:none;
  backdrop-filter:none;
}

.beacon-mode-grid{
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  width:100%;
}

.beacon-mode-panel .point-field{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
}

.beacon-mode-panel .point-field span{
  font-size:11px;
  margin-bottom:0;
  text-align:left;
  white-space:nowrap;
}

.beacon-seg{
  width:max-content;
  max-width:100%;
  justify-content:flex-start;
  overflow-x:auto;
  scrollbar-width:none;
}
.beacon-seg::-webkit-scrollbar{ display:none; }

.beacon-seg .seg-btn{
  padding:3px 8px;
  font-size:11px;
  white-space:nowrap;
}

.beacon-seg-input{
  display:none;
}

.beacon-radius-pill{
  padding:0;
}

.beacon-radius-pill .freq-menu-toggle{
  width:82px;
}

.beacon-radius-pill input{
  width:56px;
}

.beacon-radius-custom{
  position:relative;
  display:flex;
  align-items:center;
}

.beacon-radius-custom input{
  padding-right:24px;
}

.beacon-radius-custom span{
  position:absolute;
  right:8px;
  color:#a4afc7;
  font-size:11px;
  font-weight:700;
  line-height:1;
  pointer-events:none;
}

.beacon-radius-custom input[hidden] + span{
  display:none;
}

.beacon-mode-height-pill{
  padding:0;
}

.beacon-mode-height-pill input{
  width:62px;
  height:32px;
  border:none;
  outline:none;
  text-align:center;
  background:transparent;
  color:#e7e9f0;
  font-size:12px;
  font-weight:500;
  border-radius:12px;
  padding:0 6px;
  appearance:textfield;
}

.beacon-layer-field{
  margin-left:auto;
}

.beacon-layer-seg{
  display:inline-flex;
  align-items:center;
  gap:2px;
  height:32px;
  padding:2px;
  border:2px solid #6ea8fe;
  border-radius:12px;
  background:#0f1426;
}

.beacon-layer-seg .seg-btn{
  min-width:64px;
  height:24px;
  padding:0 9px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#b8c2d9;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}

.beacon-layer-seg .seg-btn.active{
  background:#6ea8fe;
  color:#061225;
}

.beacon-mode-height-pill input::-webkit-outer-spin-button,
.beacon-mode-height-pill input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.beacon-mode-panel-title{
  font-size:14px;
  line-height:1.2;
  font-weight:700;
  color:#e7e9f0;
  margin:0;
}

.beacon-mode-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:auto;
  padding-top:2px;
}

.beacon-mode-list{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:4px;
  max-height:106px;
  overflow-y:auto;
  scrollbar-width:thin;
  padding-right:2px;
}

.beacon-status-bar{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:28px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  background:rgba(13,17,34,.58);
}

.beacon-status-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#a4afc7;
  font-size:11px;
  font-weight:700;
  line-height:1;
}

.beacon-status-track{
  height:4px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
}

.beacon-status-fill{
  width:0%;
  height:100%;
  border-radius:inherit;
  background:#6ea8fe;
  transition:width .18s ease, background-color .18s ease;
}

.beacon-status-bar[data-state="running"] .beacon-status-fill{
  background:linear-gradient(90deg,#6ea8fe 0%,#9fc3ff 45%,#6ea8fe 90%);
  background-size:180% 100%;
  animation:beacon-status-flow 1.1s linear infinite;
}

.beacon-status-bar[data-state="done"] .beacon-status-fill{
  background:#46c27a;
}

.beacon-status-bar[data-state="error"] .beacon-status-fill{
  background:#ff4d4d;
}

@keyframes beacon-status-flow{
  from{ background-position:180% 0; }
  to{ background-position:0 0; }
}

.beacon-mode-list-empty{
  font-size:11px;
  color:var(--muted);
  opacity:.9;
}

@media (max-width:768px){
  .beacon-mode-grid{
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:8px;
  }

  .beacon-layer-field{
    margin-left:0;
  }

  .beacon-mode-list{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    max-height:144px;
  }
}

.beacon-mode-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  padding:3px 6px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(13,17,34,0.55);
}

.beacon-mode-item .name{
  font-size:11px;
  font-weight:600;
  flex:1 1 auto;
  min-width:0;
  max-width:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.beacon-mode-ctrls{
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
}

.beacon-mode-icon-btn{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(13,17,34,0.72);
  color:#a4afc7;
  padding:0;
  cursor:pointer;
}

.beacon-mode-icon-btn:hover{
  color:#e7e9f0;
  border-color:rgba(255,255,255,0.22);
}

.beacon-mode-icon-btn.active{
  color:#6ea8fe;
  border-color:rgba(110,168,254,0.8);
  box-shadow:0 0 0 1px rgba(110,168,254,0.25) inset;
}

.beacon-mode-icon-btn svg{
  width:13px;
  height:13px;
  stroke-width:2;
}

.beacon-mode-item-progress{
  position:relative;
  flex:1 1 auto;
  min-width:80px;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,0.10);
  overflow:hidden;
}

.beacon-mode-item-progress-fill{
  width:0%;
  height:100%;
  border-radius:inherit;
  background:#46c27a;
  transition:width .14s linear, background-color .18s ease;
}

.beacon-mode-btn{
  margin-top:0;
  padding:5px 0;
  font-size:12px;
}

.app.beacon-mode-on .bottom-dock > .point-card{
  display:none !important;
}

.app.beacon-mode-on .chart-card .chart-area canvas,
.app.beacon-mode-on .chart-card .chart-overlay-distance,
.app.beacon-mode-on .chart-card .mini-stats,
.app.beacon-mode-on #mobileControls{
  display:none !important;
}

.app.beacon-mode-on #profileIndicator{
  display:none !important;
}

.app.beacon-mode-on .chart-legend-default{
  display:none !important;
}

.app.beacon-mode-on .chart-legend-beacon{
  display:flex !important;
}

.app.beacon-mode-on .beacon-mode-panel{
  display:flex !important;
}

.app.beacon-mode-on .chart-card .chart-area{
  display:block !important;
}

.app.beacon-mode-on .chart-card .beacon-quick-stats{
  display:flex !important;
}

/* Beacon mode should respect the same collapsed/minimized states as UAV/UGV */
.app.beacon-mode-on.ui-minimized .beacon-mode-panel,
.app.beacon-mode-on.chart-closed .beacon-mode-panel{
  display:none !important;
}

.app.beacon-mode-on.ui-minimized .chart-card .chart-area{
  display:none !important;
}

.app.beacon-mode-on.ui-minimized .chart-card .beacon-quick-stats{
  display:flex !important;
}

.app.beacon-mode-on.chart-closed .chart-card .beacon-quick-stats{
  display:flex !important;
}

.app.beacon-mode-on .topbar {
  z-index: 6;
}