:root {
  /* Matte Black & Violet-Pink Neon (Cyberpunk Synthwave Noir) */
  --bg: #040406;
  --panel: rgba(6, 6, 9, 0.95);
  --panel-border: rgba(255, 42, 133, 0.35);
  --panel-border-bright: rgba(255, 42, 133, 0.75);
  --accent: #ff2a85;            /* Hot Neon Pink */
  --accent-violet: #a82fff;     /* Electric Ultraviolet */
  --accent2: #d946ef;           /* Neon Fuchsia */
  --accent-gold: #ffc337;       /* Neon Amber */
  --accent-red: #ff1744;        /* Laser Crimson */
  --text: #ffffff;              /* Crisp Pure White */
  --muted: #b8a4cc;             /* Silvery-Lavender */
  --muted-dark: #625078;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--bg); }
body {
  font-family: "Segoe UI", "Inter", system-ui, sans-serif;
  color: var(--text);
  user-select: none;
}
#app { position: fixed; inset: 0; background: #040406; }   /* round 20: letterbox canon when the terrain is inline svg */
/* round 20: viewer stacks the inline terrain svg UNDER the marker canvas (editor is the
   opposite: its canvas is a plain underlay); same #vecsvg element, per-page stacking */
#vecsvg.under { z-index: 1; }
#map.above { z-index: 2; }
#map {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cline x1='9' y1='2' x2='9' y2='6' stroke='rgba(160,180,210,0.45)' stroke-width='1.2'/%3E%3Cline x1='9' y1='12' x2='9' y2='16' stroke='rgba(160,180,210,0.45)' stroke-width='1.2'/%3E%3Cline x1='2' y1='9' x2='6' y2='9' stroke='rgba(160,180,210,0.45)' stroke-width='1.2'/%3E%3Cline x1='12' y1='9' x2='16' y2='9' stroke='rgba(160,180,210,0.45)' stroke-width='1.2'/%3E%3Ccircle cx='9' cy='9' r='1' fill='rgba(255,255,255,0.7)'/%3E%3C/svg%3E") 9 9, crosshair;
}
#map.marker-hover {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='5' fill='none' stroke='rgba(255, 42, 133, 0.45)' stroke-width='1.2' stroke-dasharray='2 2'/%3E%3C/svg%3E") 11 11, default;
}
#map.hand { cursor: grab; }
#map.hand.dragging { cursor: grabbing; }
.hidden { display: none !important; }

/* ---------- top bar ---------- */
#topbar {
  position: absolute; top: 0; left: 0; right: 0; min-height: 56px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 6px 14px;
  /* round 19: wrap on narrow windows instead of round-14 overflow-x:auto — the overflow
     clipped everything hanging below the bar (the search dropdown never painted) */
  background: linear-gradient(180deg, rgba(8, 12, 20,0.97), rgba(11, 16, 26,0.92));
  border-bottom: 1px solid rgba(255, 42, 133, 0.35);
  /* round 30: backdrop-filter REMOVED everywhere — per-frame re-blur over the animating
     map is a stutter source on weak GPUs/drivers; dense alpha does the job instead */
  z-index: 30;
}
.tb-left { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.logo { filter: drop-shadow(0 0 6px rgba(255, 42, 133, 0.8)); }
.title {
  font-size: 20px; font-weight: 700; letter-spacing: 3px; color: #ffffff;
  text-shadow: 0 0 14px rgba(255, 42, 133, 0.55);
  display: flex; flex-direction: column; line-height: 1.05;
}
.title .subtitle {
  font-size: 10px; font-weight: 400; letter-spacing: 1.5px; color: var(--muted);
  text-shadow: none;
}
.tb-tools { display: flex; gap: 4px; background: rgba(12, 18, 30,0.7); padding: 4px; border-radius: 10px; border: 1px solid rgba(255, 42, 133, 0.3); }
.tool {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  color: var(--muted); cursor: pointer;
}
.tool:hover { color: var(--text); border-color: rgba(255, 42, 133, 0.45); }
.tool.on { color: #fff; background: rgba(255, 42, 133, 0.25); border-color: var(--accent); box-shadow: 0 0 10px rgba(255, 42, 133, 0.35) inset; }
.tb-sep { width: 1px; height: 26px; background: rgba(255, 42, 133, 0.35); }
.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(12, 18, 30,0.8); border: 1px solid rgba(255, 42, 133, 0.35);
  border-radius: 8px; cursor: pointer; color: #f0e6f8;
}
.icon-btn:hover { border-color: var(--accent); color: #fff; }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.icon-btn.q { font-size: 15px; font-weight: 700; }
.tb-size { display: flex; align-items: center; gap: 8px; }
.sz-lbl { font-size: 11px; color: var(--muted); }
.sz-val { font-size: 12px; width: 26px; text-align: right; color: var(--text); }
.tb-size input[type=range] { width: 110px; }
.tb-right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.save { font-size: 11px; color: var(--muted); margin-right: 4px; white-space: nowrap; flex: none; }
.save.saved { color: rgba(217, 70, 239, 0.85); }
.save.pending { color: #ff2a85; animation: savepulse 1.2s ease-in-out infinite; }
.save.off { color: #ff4b6e; }
@keyframes savepulse { 50% { opacity: 0.55; } }
.save.warn { color: #ffd23e; }

input[type=range] {
  -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px;
  background: rgba(255, 42, 133, 0.45); outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 6px rgba(255, 42, 133, 0.8); cursor: pointer;
}

/* ---------- side panel ---------- */
#side {
  position: absolute; top: 66px; left: 10px; width: 252px;
  background: var(--panel); border: 1px solid var(--panel-border);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8), 0 0 24px rgba(168, 47, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12); border-radius: 12px;
  box-shadow: 0 0 18px rgba(255, 42, 133, 0.16), 0 10px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255, 42, 133, 0.12); z-index: 25;
  max-height: calc(100% - 120px); display: flex; flex-direction: column;
}
.panel-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 1px; color: var(--text);
}
.panel-head.sub { padding-top: 4px; color: var(--muted); font-weight: 500; }
.panel-body { padding: 0 10px 10px; overflow-y: auto; }
.layer-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px; margin: 2px 0;
  border-radius: 8px; cursor: pointer; border: 1px solid transparent;
}
.layer-row:hover { background: rgba(255, 42, 133, 0.10); }
.layer-row.active { background: rgba(255, 42, 133, 0.18); border-color: rgba(255, 42, 133, 0.5); }
.lr-icon { width: 14px; height: 14px; border-radius: 4px; background: var(--c, #888); box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 0 6px rgba(0,0,0,0.6) inset; flex: none; }
.lr-icon.base-ic { background: linear-gradient(135deg, #7a6a45 0%, #4d5a3a 50%, #35506b 100%); }
.lr-name { font-size: 12px; flex: 1; white-space: normal; line-height: 1.25; overflow: visible; }
.lr-codes { font-size: 10px; color: var(--muted); }
.switch {
  width: 30px; height: 16px; border-radius: 9px; background: rgba(90,96,133,0.5); position: relative; flex: none;
  transition: background .15s;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: #f0e6f8; transition: left .15s;
}
.switch.on { background: var(--accent); }
.switch.on::after { left: 2px; transform: translateX(14px); background: #fff; }
.op-row {
  display: flex; align-items: center; gap: 8px; padding: 2px 12px 8px 8px; font-size: 10px; color: var(--muted);
}
.op-row input { flex: 1; min-width: 0; }
.op-row b { font-size: 10px; color: var(--text); min-width: 36px; flex: none; text-align: right; }
.layer-op { display: flex; align-items: center; gap: 6px; padding: 0 8px 6px; }
.layer-op input { flex: 1; min-width: 0; }
.layer-op b { font-size: 10px; color: var(--muted); min-width: 36px; flex: none; text-align: right; }

.palette { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 2px 2px 8px; }
.sw {
  display: flex; align-items: center; gap: 7px; padding: 6px 8px;
  background: rgba(12, 18, 30,0.7); border: 1px solid rgba(255, 42, 133, 0.3); border-radius: 8px;
  cursor: pointer; font-size: 11px; color: var(--text);
}
.sw:hover { border-color: var(--accent); }
.sw.on { border-color: var(--accent); box-shadow: 0 0 8px rgba(255, 42, 133, 0.5); background: rgba(255, 42, 133, 0.16); }
.sw i { width: 16px; height: 16px; border-radius: 4px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.25) inset; }
.sw b { font-weight: 600; }
.sw em { font-style: normal; color: var(--muted); font-size: 10px; margin-left: auto; }
.help { font-size: 10px; line-height: 1.55; color: var(--muted); padding: 6px 8px; border-top: 1px solid rgba(255, 42, 133, 0.25); }
.help b { color: var(--text); }
.palette-note { font-size: 10px; color: var(--muted); padding: 0 8px 6px; }
.wide-btn {
  width: 100%; margin: 2px 0 8px; padding: 7px 10px; font-size: 11px; color: #ff9db1;
  background: rgba(255,75,110,0.10); border: 1px solid #ff4b6e; border-radius: 8px;
  cursor: pointer;
}
.wide-btn:hover { background: rgba(255,75,110,0.18); color: #fff; box-shadow: 0 0 14px rgba(255,75,110,0.25); }
#base-top.on { background: var(--accent2); }

/* ---------- bottom controls ---------- */
#zoombars { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 25; }
#zoombar, #zoombar2 {
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: var(--panel); border: 1px solid var(--panel-border);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8), 0 0 24px rgba(168, 47, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12); border-radius: 999px;
}
.zbtn {
  width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent;
  color: #f0e6f8; font-size: 17px; cursor: pointer; display: grid; place-items: center;
}
.zbtn:hover { background: rgba(255, 42, 133, 0.25); color: #fff; }
#zoom-pct { min-width: 46px; text-align: center; font-size: 12px; color: var(--text); }

#scalebar { position: absolute; left: 14px; bottom: 14px; z-index: 25; width: auto; padding: 7px 10px 9px; }
#scalebar .sb-text { display: flex; justify-content: space-between; gap: 10px; width: var(--sb-w, 150px); font-size: 10px; color: var(--muted); margin-bottom: 4px; white-space: nowrap; }
#scalebar .sb-line { position: relative; height: 6px; width: var(--sb-w, 150px); border-bottom: 2px solid var(--accent); }
#scalebar .sb-line i { position: absolute; bottom: 0; width: 2px; height: 6px; background: var(--accent); }
#scalebar .sb-line .t0 { left: 0; } #scalebar .sb-line .t1 { left: 25%; } #scalebar .sb-line .t2 { left: 50%; }
#scalebar .sb-line .t3 { left: 75%; } #scalebar .sb-line .t4 { right: 0; }

#status, #scalebar { pointer-events: none; }   /* informative pills must not eat canvas events (UX P2-7) */
#status {
  position: absolute; right: 14px; bottom: 14px; z-index: 25;
  display: flex; gap: 14px; padding: 7px 12px;
  background: var(--panel); border: 1px solid var(--panel-border);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8), 0 0 24px rgba(168, 47, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12); border-radius: 10px;
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 18px rgba(255, 42, 133, 0.16), inset 0 1px 0 rgba(255, 42, 133, 0.12);
}
#status b { color: var(--text); font-weight: 600; }

#loading {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 12px;
  background: var(--bg); z-index: 60; color: var(--muted); font-size: 13px;
  grid-auto-flow: row;
}
.spin {
  width: 34px; height: 34px; border-radius: 50%; margin: 0 auto;
  border: 3px solid rgba(255, 42, 133, 0.25); border-top-color: var(--accent);
  animation: sp 0.9s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }

/* ---------- start screen ---------- */
.start-body { background: radial-gradient(1200px 700px at 50% -10%, rgba(255, 42, 133, 0.25), transparent 60%), var(--bg); }
#start { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; padding: 40px 20px; }
.start-head { text-align: center; }
.start-head .logo.big { filter: drop-shadow(0 0 18px rgba(255, 42, 133, 0.7)); }
.start-head h1 { font-size: 44px; letter-spacing: 10px; color: #fff; text-shadow: 0 0 24px rgba(255, 42, 133, 0.6); margin-top: 8px; }
.start-head .tagline { color: var(--muted); font-size: 13px; letter-spacing: 2px; margin-top: 6px; }
.start-cards { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; }
.start-card {
  width: 420px; display: flex; flex-direction: column; text-decoration: none; color: var(--text);
  background: var(--panel); border: 1px solid var(--panel-border);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8), 0 0 24px rgba(168, 47, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12); border-radius: 16px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55); transition: transform .15s, border-color .15s, box-shadow .15s;
}
.start-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 20px 50px rgba(255, 42, 133, 0.35); }
.sc-thumb { height: 200px; overflow: hidden; border-bottom: 1px solid rgba(255, 42, 133, 0.4); }
.sc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05); }
.sc-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.sc-body h2 { font-size: 20px; letter-spacing: 3px; color: #fff; }
.sc-body p { font-size: 12px; line-height: 1.6; color: var(--muted); }
.sc-cta { color: var(--accent); font-size: 13px; letter-spacing: 1px; }
.start-foot { color: var(--muted); font-size: 11px; letter-spacing: 0.5px; text-align: center; }
.start-foot b { color: var(--text); }

/* ---------- viewer extras ---------- */
#map.pointer { cursor: crosshair; }
.tb-search { position: relative; flex: 1; max-width: 900px; margin-left: 10px; }
.tb-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: .8; }
#search {
  width: 100%; height: 34px; padding: 0 14px 0 36px;
  background: rgba(12, 18, 30,0.8); color: var(--text);
  border: 1px solid rgba(255, 42, 133, 0.45); border-radius: 8px; outline: none; font-size: 13px;
}
#search:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255, 42, 133, 0.25); }
.drop {
  position: absolute; top: 40px; left: 0; right: 0; max-height: 260px; overflow-y: auto;
  background: rgba(10, 15, 24,0.97); border: 1px solid var(--panel-border);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8), 0 0 24px rgba(168, 47, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6); z-index: 40;
}
.drop .d-item { padding: 8px 14px; font-size: 13px; cursor: pointer; display: flex; justify-content: space-between; }
.drop .d-item:hover { background: rgba(255, 42, 133, 0.18); }
.drop .d-item .d-type { color: var(--muted); font-size: 11px; }
#tooltip { display: none !important; 
  position: fixed; z-index: 50; pointer-events: none; padding: 5px 10px; font-size: 12px;
  background: rgba(10, 15, 24,0.95); border: 1px solid var(--panel-border);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8), 0 0 24px rgba(168, 47, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12); border-radius: 8px; color: var(--text);
}
.mini-btn {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(255, 42, 133, 0.4);
  background: rgba(12, 18, 30,0.8); color: #f0e6f8; cursor: pointer; font-size: 12px;
}
.mini-btn:hover { border-color: var(--accent); color: #fff; }

#card .close { position: absolute; top: 10px; right: 10px; z-index: 50; width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; }
.card-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; padding-right: 32px; }
.card-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 42, 133, 0.18); border: 1px solid rgba(255, 42, 133, 0.45); }
.card-name { font-size: 15px; font-weight: 700; color: #fff; }
.card-type { font-size: 11px; color: var(--muted); }
.card-coords { font-size: 11px; color: var(--accent2); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.card-desc { font-size: 12px; line-height: 1.55; color: var(--text); margin-bottom: 10px; }
.card-rows { display: flex; flex-direction: column; gap: 6px; }
.crow { display: flex; justify-content: space-between; font-size: 11px; padding: 5px 8px; background: rgba(12, 18, 30,0.6); border-radius: 6px; }
.crow .ck { color: var(--muted); }
.crow .cv { color: var(--text); }
.crow .cv.ok { color: #7dd87d; }
.legend-block { margin: 6px 2px 10px; padding: 10px; background: rgba(12, 18, 30,0.6); border: 1px solid rgba(255, 42, 133, 0.3); border-radius: 10px; }
.lg-title { font-size: 10px; letter-spacing: 1px; color: var(--muted); margin: 6px 0 4px; }
.lg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.lg-item, .w-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text); }
.sw-chip { width: 14px; height: 14px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,0.25) inset; flex: none; }
.water-row { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.water-row .w-item { flex: 1 1 100%; }   /* round 19: hex right-aligned like the class list */
.elev-bar { height: 10px; border-radius: 5px; background: linear-gradient(90deg, #1a2c20, #ffa020, #f97316, #ff003c, #e11d48); }
.elev-labels { display: flex; justify-content: space-between; font-size: 9px; color: var(--muted); margin-top: 2px; }


/* ---------- editor fix round (session 13): cursor, panel collapse, toast, coach, a11y ---------- */
body { user-select: none; -webkit-user-select: none; }        /* no blue selection box while drawing */
input, textarea { user-select: text; -webkit-user-select: text; }
#cursor { position: absolute; inset: 0; pointer-events: none; z-index: 24; }
#vecsvg {
  /* round 8/9: viewport-sized element + viewBox windowing in draw(): the browser
     rasterizes only the visible world rect at device resolution on every frame, so
     the view stays CRISP at any zoom and frame cost no longer grows like the old
     4095x2290 element under transform:scale() (p50 130-140 ms at 800-1400%).
     Round 9 tried a frozen-raster + compositor-delta scheme (will-change layer):
     it removed the per-frame raster but showed <=25% upscale softness while moving
     and re-freeze hitches — same complaint family as "pixels", so it was reverted.
     No raster fallback during zoom either (round-8 hybrid showed pixel grid). */
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 12;
  display: none;
}
#side.collapsed { display: none; }
#panel-tab {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 26;
  padding: 14px 10px; writing-mode: vertical-rl; letter-spacing: 1px;
  background: var(--panel); border: 1px solid var(--panel-border);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8), 0 0 24px rgba(168, 47, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12); border-left: none;
  border-radius: 0 10px 10px 0; color: var(--text); font-size: 12px; cursor: pointer;
  box-shadow: 0 0 18px rgba(255, 42, 133, 0.16), inset 0 1px 0 rgba(255, 42, 133, 0.12);
}
#panel-tab:hover { border-color: var(--accent); color: #fff; }
#panel-tab.pulse { animation: tabpulse 1.6s ease-in-out 4; }
@keyframes tabpulse { 50% { box-shadow: 0 0 22px rgba(255, 42, 133, 0.55); border-color: var(--accent); } }
.panel-head .mini-btn { margin-left: auto; }
#toast {
  position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%) translateY(8px);
  z-index: 45; pointer-events: none; padding: 9px 16px; border-radius: 10px;
  background: rgba(10, 15, 24,0.95); border: 1px solid var(--accent); color: var(--text);
  font-size: 12px; opacity: 0; transition: opacity .18s, transform .18s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* round 21: stale-code banner (viewer older than editor) */
#stale-banner {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 70;
  display: flex; gap: 10px; align-items: center; padding: 9px 14px; border-radius: 10px;
  background: rgba(10, 15, 24,0.97); border: 1px solid #ffd23e; color: var(--text); font-size: 12px;
  box-shadow: 0 0 18px rgba(255,210,62,0.25), 0 8px 24px rgba(0,0,0,0.5);
}
#stale-banner button {
  padding: 4px 10px; border-radius: 7px; cursor: pointer; font-size: 12px;
  background: rgba(255,210,62,0.12); border: 1px solid #ffd23e; color: #ffe27a;
}
/* round 28: the round-17 FS Access consent card (#fs-ask) is gone with the write-channel */
#coach { position: absolute; inset: 0; z-index: 65; background: transparent; pointer-events: none; cursor: pointer; }
#coach .coach-card { pointer-events: auto;
  position: absolute; width: 320px; padding: 12px 14px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--accent); box-shadow: 0 0 18px rgba(255, 42, 133, 0.22), 0 12px 34px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255, 42, 133, 0.12);
  display: flex; flex-direction: column; gap: 6px;
}
#coach .coach-card b { color: #fff; font-size: 13px; letter-spacing: 0.5px; }
#coach .coach-card span { color: var(--muted); font-size: 12px; line-height: 1.5; }
#coach .c1 { left: 40px; top: 38%; }
#coach .c2 { left: 40px; top: 56%; }
#coach .c3 { right: 24px; top: 70px; }
.viewer-coach .c3 { left: 40px; top: 74%; right: auto; }
#coach .coach-hint { pointer-events: auto;
  position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%);
  padding: 7px 16px; border-radius: 999px;
  background: rgba(8,9,12,0.72); border: 1px solid rgba(255, 42, 133, 0.35);
  color: #fff; font-size: 13px; letter-spacing: 1px; text-shadow: 0 0 12px rgba(255, 42, 133, 0.8);
}
/* a11y / readability (backlog D0): micro-text >= 11px, slider track >= 3:1, scalebar backing */
.help, .palette-note, .lr-codes, .op-row, .op-row b, .layer-op b, .save,
#scalebar .sb-text, .sw em, .lg-title { font-size: 11px; }
input[type=range] { background: #6a58a6; height: 5px; }
input[type=range]::-webkit-slider-thumb { width: 14px; height: 14px; }
#scalebar { background: rgba(8,9,12,0.78); border: 1px solid var(--panel-border);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8), 0 0 24px rgba(168, 47, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12); border-radius: 10px; padding: 7px 10px; width: 190px; }
#scalebar .sb-text { color: #f0e6f8; white-space: nowrap; gap: 10px; flex-wrap: nowrap; }
#scalebar .sb-text span { white-space: nowrap; }
.elev-labels { font-size: 11px; }

/* round 19: polish — neon scrollbars, keyboard focus, reduced motion, selection */
.panel-body::-webkit-scrollbar, .drop::-webkit-scrollbar { width: 8px; }
.panel-body::-webkit-scrollbar-thumb, .drop::-webkit-scrollbar-thumb {
  background: rgba(255, 42, 133, 0.35); border-radius: 4px;
}
.panel-body::-webkit-scrollbar-thumb:hover, .drop::-webkit-scrollbar-thumb:hover { background: rgba(255, 42, 133, 0.55); }
.panel-body::-webkit-scrollbar-track, .drop::-webkit-scrollbar-track { background: transparent; }
.panel-body, .drop { scrollbar-width: thin; scrollbar-color: rgba(255, 42, 133, 0.35) transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
#search { caret-color: var(--accent); }
::selection { background: rgba(255, 42, 133, 0.35); color: #fff; }
/* reduced-motion override removed to ensure smooth tactical UI animations */

/* ---------- round 12 (stage 0/4): styled tooltips with kbd badges, legend hex, subtitle ---------- */
.title .subtitle { font-size: 11px; }
#ui-tip {
  position: fixed; z-index: 70; pointer-events: none; max-width: 280px;
  padding: 6px 10px 7px; border-radius: 8px;
  background: rgba(10, 15, 24,0.97); border: 1px solid var(--panel-border);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8), 0 0 24px rgba(168, 47, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 14px rgba(255, 42, 133, 0.2), 0 8px 22px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255, 42, 133, 0.12);
  font-size: 11px; line-height: 1.45; color: var(--text);
  opacity: 0; transform: translateY(-2px); transition: opacity .12s, transform .12s;
}
#ui-tip.show { opacity: 1; transform: translateY(0); }
#ui-tip::before {
  content: ""; position: absolute; top: -5px; left: calc(50% - 4px);
  width: 8px; height: 8px; background: rgba(10, 15, 24,0.97);
  border-left: 1px solid var(--panel-border); border-top: 1px solid var(--panel-border);
  transform: rotate(45deg);
}
#ui-tip.above::before { top: auto; bottom: -5px; transform: rotate(225deg); }
#ui-tip .tip-kbd { margin-top: 5px; display: flex; gap: 4px; flex-wrap: wrap; }
#ui-tip kbd {
  padding: 1px 6px 2px; border-radius: 5px; font-family: inherit; font-size: 11px;
  background: rgba(255, 42, 133, 0.18); border: 1px solid rgba(255, 42, 133, 0.55);
  color: #e9d6ff; letter-spacing: .5px;
}
/* legend: hex codes + click-to-copy (single column so the hex fits at 11px) */
.lg-grid { grid-template-columns: 1fr; gap: 2px; }
.lg-item, .w-item { cursor: pointer; border-radius: 6px; padding: 2px 5px; }
.lg-item:hover, .w-item:hover { background: rgba(255, 42, 133, 0.14); }
.lg-hex { margin-left: auto; font-size: 11px; color: rgba(217, 70, 239, 0.62); font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.lg-item:hover .lg-hex, .w-item:hover .lg-hex { color: #d946ef; }
/* round 12: help wall -> accordion (art P2-7) */
details.help-acc { border-top: 1px solid rgba(255, 42, 133, 0.25); margin-top: 6px; }
details.help-acc summary {
  list-style: none; cursor: pointer; padding: 7px 8px; font-size: 11px; color: var(--muted);
}
details.help-acc summary::-webkit-details-marker { display: none; }
details.help-acc summary::before { content: "?  "; color: var(--accent); font-weight: 700; }
details.help-acc summary:hover { color: var(--text); }
details.help-acc .help { border-top: none; padding-top: 2px; }

/* ==========================================================================
   round 29: «КОНЦЕПТ-СТЕКЛО» — канонический хром (выбор пользователя из лаборатории
   ui_lab, вариант V1, усиленный по правкам критиков читаемости/арта/UX):
   панели — плотное витражное стекло (alpha .82, blur 12) с тёмным внешним кольцом,
   топбар — плавающий остров, пилюли-статусы, градиентные тумблеры, без inset-свечения
   на активных инструментах. Карта и палитра E11 не тронуты.
   ========================================================================== */
#topbar {
  top: 12px; left: 50%; right: auto; transform: translateX(-50%);
  /* round 30: equal island min-height on BOTH pages — viewer/editor parity probe centers the
     view via TOPBAR; unequal bar heights shifted the «same view» by (Δh/2)*zoom px.
     min- (not fixed) height so narrow windows can still wrap (round 19 canon) */
  width: min(1280px, calc(100vw - 24px)); min-height: 58px;
  /* round 29 polish: scrim-градиент у верхней кромки — тёплые пятна карты не проступают (критик арта);
     round 30: без backdrop-filter (перфорация кадров на слабых GPU), плотность компенсирует */
  background: linear-gradient(180deg, rgba(10, 15, 24, 0.92), rgba(12, 18, 30, 0.82));
  border: 1px solid var(--panel-border);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8), 0 0 24px rgba(168, 47, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12); border-radius: 18px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(5, 3, 12, 0.85),
              inset 0 1px 0 rgba(255, 255, 255, 0.09);
  padding: 6px 16px;
}
.page-editor #topbar { width: calc(100vw - 24px); }   /* редактору нужен полный ряд инструментов без переноса */
.title { font-weight: 300; letter-spacing: 7px; font-size: 17px; text-shadow: 0 0 18px rgba(255, 42, 133, 0.6); }
.title .subtitle { letter-spacing: 3px; }
.logo { filter: drop-shadow(0 0 10px rgba(255, 42, 133, 0.85)); }
#side {
  background: linear-gradient(180deg, rgba(10, 15, 24, 0.94), rgba(10, 15, 24, 0.88) 72px);
  border: 1px solid var(--panel-border);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8), 0 0 24px rgba(168, 47, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12); border-radius: 18px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(5, 3, 12, 0.85),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#side { top: 78px; }
.panel-head { letter-spacing: 2px; font-weight: 500; color: #e8defc; }
.layer-row { border-radius: 12px; }
.layer-row:hover { background: linear-gradient(135deg, rgba(255, 42, 133, 0.22), rgba(168, 47, 255, 0.22)); }
.layer-row.active { background: rgba(255, 42, 133, 0.2); border-color: rgba(255, 42, 133, 0.55); }
.switch { background: rgba(120, 110, 160, 0.35); border: 1px solid rgba(255, 42, 133, 0.3); }
.switch.on {
  background: linear-gradient(90deg, #d946ef, #ff2a85); border-color: transparent;
  box-shadow: 0 0 12px rgba(217, 70, 239, 0.4);
}
.switch.on::after { background: #fff; }
.icon-btn, .mini-btn { background: rgba(10, 15, 24, 0.6); border: 1px solid rgba(255, 42, 133, 0.35); border-radius: 12px; }
.mini-btn { width: 28px; height: 28px; }   /* round 29 polish: цели ≥28px (критик UX) */
.icon-btn:hover, .mini-btn:hover { border-color: var(--accent2); color: #fff; box-shadow: 0 0 14px rgba(217, 70, 239, 0.3); }
#search { background: rgba(8, 12, 20, 0.6); border: 1px solid rgba(255, 42, 133, 0.35); border-radius: 999px; }
#search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 42, 133, 0.25), 0 0 20px rgba(255, 42, 133, 0.45); }
.drop, #tooltip, #ui-tip {
  background: rgba(10, 15, 24, 0.96);
  border: 1px solid rgba(255, 42, 133, 0.5); border-radius: 12px;
}
#ui-tip::before { background: rgba(10, 15, 24, 0.94); border-color: rgba(255, 42, 133, 0.5); }
.drop .d-item:hover { background: rgba(255, 42, 133, 0.22); }
#zoombar, #zoombar2, #status, #scalebar {
  background: rgba(10, 15, 24, 0.9);
  border: 1px solid var(--panel-border);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8), 0 0 24px rgba(168, 47, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(5, 3, 12, 0.85);
}
#zoombar, #zoombar2 { border-radius: 999px; }
#status { border-radius: 999px; letter-spacing: 0.5px; }
#scalebar { border-radius: 14px; }
.zbtn:hover { background: rgba(255, 42, 133, 0.3); }
.zbtn { width: 34px; height: 34px; }   /* round 29 polish: цели зума ≥34px (критик UX) */
#zoom-pct { color: #e8defc; letter-spacing: 1px; }
#scalebar .sb-text { color: #d9cdf5; }
#scalebar .sb-line { border-bottom-color: var(--accent2); }
#scalebar .sb-line i { background: var(--accent2); }
#status b { color: #fff; }
#toast { background: rgba(10, 15, 24, 0.95); border: 1px solid var(--accent); border-radius: 999px; }
#panel-tab { background: rgba(10, 15, 24, 0.88); border-radius: 0 14px 14px 0; }
#stale-banner { top: 84px; background: rgba(10, 15, 24, 0.96); border-radius: 14px; }
.card-icon { background: rgba(255, 42, 133, 0.16); border-color: rgba(255, 42, 133, 0.55); border-radius: 12px; }
.card-name { font-weight: 600; letter-spacing: 0.5px; }
.card-coords { color: var(--accent2); }
.crow { background: rgba(8, 12, 20, 0.5); border-radius: 10px; }
.crow .cv.ok { color: #7dd87d; }   /* round 29 polish: статусный зелёный не унифицируем с акцентом (критик UX) */
.legend-block { background: rgba(8, 12, 20, 0.55); border-color: rgba(255, 42, 133, 0.4); border-radius: 14px; }
.lg-hex { color: #ff70ba; }
.lg-hex, .card-coords, .elev-labels { font-size: 11px; }   /* round 29 polish: микро-текст ≥11px (критик читаемости) */
.lg-item:hover, .w-item:hover { background: rgba(255, 42, 133, 0.18); }
.elev-bar { border-radius: 999px; }
details.help-acc { border-top-color: rgba(255, 42, 133, 0.3); }
/* editor */
.tb-tools { background: rgba(8, 12, 20, 0.6); border-radius: 14px; border-color: rgba(255, 42, 133, 0.35); }
.tool { border-radius: 10px; }
.tool.on { background: rgba(255, 42, 133, 0.3); border-color: var(--accent); color: #fff; box-shadow: none; }  /* round 29: no inset glow (critic) */
.tool:hover { color: #fff; border-color: rgba(255, 42, 133, 0.55); }
.sw { background: rgba(8, 12, 20, 0.55); border-color: rgba(255, 42, 133, 0.35); border-radius: 12px; }
.sw.on { border-color: var(--accent); background: rgba(255, 42, 133, 0.2); box-shadow: 0 0 10px rgba(255, 42, 133, 0.35); }
.wide-btn { border-radius: 12px; }
.help, .palette-note { border-top-color: rgba(255, 42, 133, 0.28); }
.save.saved { color: var(--accent2); }
.save.pending { color: var(--accent); }
input[type=range] { background: rgba(255, 42, 133, 0.45); }
input[type=range]::-webkit-slider-thumb { background: var(--accent); box-shadow: 0 0 8px rgba(255, 42, 133, 0.7); }
.panel-body::-webkit-scrollbar-thumb, .drop::-webkit-scrollbar-thumb { background: rgba(255, 42, 133, 0.4); }
.panel-body, .drop { scrollbar-color: rgba(255, 42, 133, 0.4) transparent; }
::selection { background: rgba(255, 42, 133, 0.4); }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible, input:focus-visible { outline-color: var(--accent2); }
/* coach / start */
#coach .coach-card { pointer-events: auto; background: rgba(10, 15, 24, 0.93); border: 1px solid rgba(255, 42, 133, 0.55); border-radius: 16px; }
#coach .coach-hint { pointer-events: auto; background: rgba(8, 12, 20, 0.8); border-color: rgba(255, 42, 133, 0.45); }
.start-body { background: radial-gradient(1200px 700px at 50% -10%, rgba(140, 90, 240, 0.28), transparent 60%), var(--bg); }
.start-head h1 { font-weight: 300; letter-spacing: 14px; }
.start-card { background: rgba(10, 15, 24, 0.82); border-radius: 22px; border-color: rgba(255, 42, 133, 0.45); }
.sc-cta { color: var(--accent); }
.spin { border-color: rgba(255, 42, 133, 0.25); border-top-color: var(--accent); }

/* Tactical Location Dossier Card — Soft & Elegant Animation Engine */
#card {
  position: absolute;
  top: 78px;
  right: 14px;
  width: 316px;
  z-index: 35;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(10, 15, 24, 0.97), rgba(10, 15, 24, 0.94) 72px);
  border: 1px solid rgba(255, 42, 133, 0.4);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.75), 0 0 25px rgba(255, 42, 133, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  overflow: hidden;

  /* Off-screen closed resting state */
  opacity: 0;
  transform: translateX(380px);
  visibility: hidden;
  pointer-events: none;
  /* Soft, graceful exit transition */
  transition: transform 0.40s cubic-bezier(0.28, 0, 0.62, 0.2),
              opacity 0.35s ease,
              visibility 0.40s;
  will-change: transform, opacity;
}

/* Neon laser vertical accent on left border */
#card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3.5px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #ff2a85 30%, #ff2a85 70%, transparent);
  opacity: 0.85;
  pointer-events: none;
}

/* Smooth, relaxed open state — gentle deceleration */
#card.open {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.40s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0.46s;
}

/* Close button with tactile rotation and crimson neon hover */
#card .close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 50;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(24, 14, 46, 0.7);
  border: 1px solid rgba(255, 42, 133, 0.35);
  color: #f0e6f8;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  /* Soft, gradual hover rotation */
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.26s ease,
              border-color 0.26s ease,
              color 0.26s ease,
              box-shadow 0.32s ease;
}
#card .close:hover {
  transform: rotate(90deg) scale(1.10);
  background: rgba(255, 30, 70, 0.25);
  border-color: #ff1e46;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(255, 30, 70, 0.5);
}
#card .close:active {
  transform: rotate(90deg) scale(0.95);
}

/* Card header & dynamic tactical icon badge */
.card-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  padding-right: 32px;
}

.card-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(12, 16, 28, 0.92);
  border: 1px solid rgba(255, 42, 133, 0.45);
  box-shadow: 0 0 12px rgba(255, 42, 133, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  flex-shrink: 0;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.card-icon.pulse {
  animation: cardIconPulse 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Soft, subtle icon badge breath instead of harsh flash */
@keyframes cardIconPulse {
  0% { transform: scale(1.08); filter: brightness(1.15); }
  100% { transform: scale(1.0); filter: brightness(1.0); }
}

.card-head-titles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.card-name {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.3px;
  line-height: 1.25;
}

.card-coords {
  font-size: 11px;
  color: #ff2a85;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.card-rows {
  border-top: 1px solid rgba(255, 42, 133, 0.25);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
}

.crow {
  display: flex;
  justify-content: space-between;
}

.crow .ck {
  color: var(--muted);
}

.crow .cv {
  color: var(--text);
  font-weight: 600;
}

/* Smooth data transition on marker switch without vanishing */
.card-data-wrap {
  will-change: transform, opacity;
}

.card-data-wrap.refresh {
  animation: cardDataGlide 0.30s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Soft 4px micro-glide with 0.75 starting opacity — completely seamless */
@keyframes cardDataGlide {
  0% {
    opacity: 0.75;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------------------------------------------------------------- */
/* ROLE & PERMISSION SYSTEM: Entry Gateway & Unobtrusive Control */
/* ------------------------------------------------------------- */

/* Small unobtrusive role toggle button in top-left */
.mini-role-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 2px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(184, 164, 204, 0.22);
  border-radius: 5px;
  color: #b8a4cc;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.18s ease-out;
  user-select: none;
  padding: 0;
  box-sizing: border-box;
}

.mini-role-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(200, 215, 240, 0.50);
  color: #f0e6f8;
  transform: translateY(-1px);
}

.mini-role-btn.admin {
  background: rgba(255, 195, 55, 0.12);
  border-color: rgba(255, 195, 55, 0.45);
  color: #ffc337;
}

.mini-role-btn.admin:hover {
  background: rgba(255, 195, 55, 0.22);
  border-color: #ffd23e;
  box-shadow: 0 0 10px rgba(255, 195, 55, 0.35);
}

/* Fullscreen Entry Gateway Terminal (Before Viewing Map) */
.entry-gate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  /* round 46: за входным экраном видна приглушённая карта — первый экран перестал быть чёрным */
  background: rgba(3, 3, 5, 0.74);
  -webkit-backdrop-filter: blur(11px) saturate(1.05);
  backdrop-filter: blur(11px) saturate(1.05);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 0.35s cubic-bezier(0.2, 0.8, 0.25, 1), transform 0.35s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.entry-gate.dismissed {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.02);
}

.entry-gate.hidden {
  display: none !important;
}

.entry-gate-bg {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 50% 25%, rgba(255, 42, 133, 0.24) 0%, transparent 60%),
    radial-gradient(circle at 20% 80%, rgba(168, 47, 255, 0.20) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 195, 55, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.entry-gate-card {
  position: relative;
  width: 100%;
  max-width: 1060px;
  background: linear-gradient(165deg, rgba(8, 8, 12, 0.99) 0%, rgba(3, 3, 5, 0.99) 100%);
  border: 1px solid rgba(255, 42, 133, 0.40);
  border-radius: 14px;
  padding: 34px 36px 38px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95), 0 0 50px rgba(255, 42, 133, 0.30), 0 0 80px rgba(168, 47, 255, 0.15);
  box-sizing: border-box;
  text-align: center;
}

.eg-logo {
  margin-bottom: 12px;
  filter: drop-shadow(0 0 12px rgba(255, 42, 133, 0.75));
}

.eg-tag {
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: #ff2a85;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.eg-title {
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
}

.eg-desc {
  font-size: 14px;
  color: #b8a4cc;
  line-height: 1.55;
  margin: 0 auto 30px;
  max-width: 520px;
}

.eg-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: left;
}

@media (max-width: 980px) {
  .entry-gate-card {
    max-width: 520px;
    padding: 24px 20px;
  }
  .eg-options {
    grid-template-columns: 1fr;
    gap: 14px;
    max-height: 65vh;
    overflow-y: auto;
  }
}

.eg-option {
  position: relative;
  background: rgba(8, 8, 12, 0.92);
  border: 1px solid rgba(184, 164, 204, 0.25);
  border-radius: 10px;
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
  cursor: pointer;
  user-select: none;
}

.eg-option:hover {
  transform: translateY(-4px);
}

.eg-option.viewer:hover {
  background: rgba(8, 14, 20, 0.96);
  border-color: rgba(0, 240, 255, 0.75);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.70), 0 0 22px rgba(0, 240, 255, 0.25);
}

.eg-option.tactician:hover {
  background: rgba(18, 8, 14, 0.96);
  border-color: rgba(255, 42, 133, 0.85);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.70), 0 0 24px rgba(255, 42, 133, 0.30);
}

.eg-option.editor:hover {
  background: rgba(18, 14, 6, 0.96);
  border-color: rgba(255, 195, 55, 0.85);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.70), 0 0 24px rgba(255, 195, 55, 0.30);
}

.ego-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(0, 240, 255, 0.12);
  color: #00f0ff;
  border: 1px solid rgba(0, 240, 255, 0.35);
}

.ego-badge.tactician {
  background: rgba(255, 42, 133, 0.18);
  color: #ff2a85;
  border-color: rgba(255, 42, 133, 0.45);
}

.ego-badge.editor {
  background: rgba(255, 195, 55, 0.18);
  color: #ffc337;
  border-color: rgba(255, 195, 55, 0.45);
}

.ego-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.ego-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.ego-desc {
  font-size: 12px;
  line-height: 1.55;
  color: #b8a4cc;
  margin-bottom: 20px;
  flex-grow: 1;
}

.ego-btn {
  width: 100%;
  padding: 11px 14px;
  border-radius: 6px;
  border: 1px solid rgba(0, 240, 255, 0.55);
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.16), rgba(168, 47, 255, 0.20));
  color: #00f0ff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease-out;
  text-align: center;
}

.ego-btn.viewer:hover {
  background: linear-gradient(135deg, #00f0ff, #a82fff);
  color: #050608;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.75);
}

.ego-btn.tactician {
  border-color: rgba(255, 42, 133, 0.60);
  background: linear-gradient(135deg, rgba(255, 42, 133, 0.25), rgba(168, 47, 255, 0.25));
  color: #ff529a;
}

.ego-btn.tactician:hover {
  background: linear-gradient(135deg, #ff2a85, #a82fff);
  color: #ffffff;
  box-shadow: 0 0 22px rgba(255, 42, 133, 0.85);
}

.ego-btn.editor {
  border-color: rgba(255, 195, 55, 0.60);
  background: rgba(255, 195, 55, 0.16);
  color: #ffc337;
}

.ego-btn.editor:hover {
  background: #ffc337;
  color: #1a1202;
  box-shadow: 0 0 18px rgba(255, 195, 55, 0.65);
}

#drawbar.hidden {
  display: none !important;
}

/* Card Admin Faction Box */
.card-admin-box {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  box-sizing: border-box;
}

.card-admin-box.hidden {
  display: none !important;
}

.admin-box-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ffc337;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.admin-bolt {
  font-size: 12px;
  color: #ffc337;
  text-shadow: 0 0 6px rgba(255, 195, 55, 0.6);
}

.admin-fac-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.admin-fac-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(10, 10, 14, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  padding: 6px 9px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #f0e6f8;
  cursor: pointer;
  transition: all 0.18s ease-out;
  box-sizing: border-box;
  text-align: left;
}

.admin-fac-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--fc, #ff2a85);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.40);
}

.admin-fac-btn.active {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--fc, #ff2a85);
  color: var(--fc, #ff2a85);
  box-shadow: 0 0 10px var(--fc, #ff2a85), inset 0 0 6px var(--fc, #ff2a85);
  font-weight: 700;
}

.af-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fc, #fff);
  box-shadow: 0 0 6px var(--fc, #fff);
  flex-shrink: 0;
}

/* ---------- OBSIDIAN DARK TECH TACTICAL ENHANCEMENTS ---------- */

/* Topbar Filter Chips */
.tb-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 8px;
  background: rgba(10, 10, 14, 0.90);
  border: 1px solid rgba(126, 143, 174, 0.22);
  color: #b8a4cc;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.20s cubic-bezier(0.2, 0.8, 0.3, 1);
  user-select: none;
}

.filter-chip:hover {
  background: rgba(22, 32, 50, 0.9);
  border-color: var(--fc, #ff2a85);
  color: #ffffff;
  transform: translateY(-1px);
}

.filter-chip.active {
  background: linear-gradient(135deg, rgba(255, 42, 133, 0.22), rgba(168, 47, 255, 0.22));
  border-color: var(--fc, #ff2a85);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(255, 42, 133, 0.25);
}

.fchip-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: var(--fc, #ff2a85);
  box-shadow: 0 0 6px var(--fc, #ff2a85);
  flex-shrink: 0;
}

.fchip-badge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #b8a4cc;
  font-variant-numeric: tabular-nums;
  transition: all 0.15s;
}

.filter-chip.active .fchip-badge {
  background: var(--fc, #ff2a85);
  color: #060911;
  font-weight: 700;
}

/* Card Interactive Action Buttons */
.card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.card-act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(10, 10, 14, 0.90);
  border: 1px solid rgba(255, 42, 133, 0.42);
  color: #ff2a85;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease-out;
  user-select: none;
}

.card-act-btn:hover {
  background: linear-gradient(135deg, #ff2a85, #a82fff);
  color: #ffffff;
  border-color: #ff2a85;
  box-shadow: 0 0 18px rgba(255, 42, 133, 0.75);
  transform: translateY(-1px);
}

.card-act-btn:active {
  transform: translateY(0);
}

/* Modern Telemetry Status Pill */
#status {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(6, 6, 9, 0.96);
  border: 1px solid rgba(255, 42, 133, 0.35);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 14px rgba(255, 42, 133, 0.12);
  font-size: 11px;
  font-family: "JetBrains Mono", Consolas, -apple-system, sans-serif;
  letter-spacing: 0.5px;
  pointer-events: none;
}

.st-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff2a85;
  box-shadow: 0 0 10px #ff2a85, 0 0 16px #a82fff;
  animation: stPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes stPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

.st-divider {
  color: rgba(126, 143, 174, 0.35);
  font-weight: 300;
  margin: 0 2px;
}

#st-coords {
  color: #ff529a;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#st-codes {
  color: #7e8fae;
  font-size: 10.5px;
}

/* Clean Modern Tactical Legend */
.legend-block {
  margin: 6px 0 10px;
  padding: 10px 12px;
  background: rgba(10, 10, 14, 0.90);
  border: 1px solid rgba(255, 42, 133, 0.32);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.lg-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.lg-sec-dot {
  width: 5.5px;
  height: 5.5px;
  border-radius: 50%;
  background: var(--ld, #ff2a85);
  box-shadow: 0 0 6px var(--ld, #ff2a85);
}

.elev-bar {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1a2c20 0%, #2b4a34 25%, #ffa020 50%, #ff003c 75%, #e11d48 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 3px;
}

.elev-labels {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  color: var(--muted);
  font-family: inherit;
  margin-bottom: 4px;
}

.lg-compact-grid, .lg-fac-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.lg-badge, .lg-fac-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border-radius: 6px;
  background: rgba(16, 16, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10.5px;
  color: #ffffff;
  transition: all 0.15s ease-out;
}

.lg-badge:hover, .lg-fac-item:hover {
  background: rgba(255, 42, 133, 0.12);
  border-color: rgba(255, 42, 133, 0.35);
}

.lg-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
  flex-shrink: 0;
}

.lfi-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: var(--fc, #fff);
  box-shadow: 0 0 6px var(--fc, #fff);
  flex-shrink: 0;
}

/* ==========================================================================
   SILKY TACTICAL ANIMATION ENGINE (Non-abrupt, graceful transitions)
   ========================================================================== */

/* 1. Smooth sliding side panel */
#side {
  transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.25, 1),
              opacity 0.32s ease,
              visibility 0.38s !important;
  will-change: transform, opacity;
}

#side.collapsed {
  display: flex !important;
  transform: translateX(-310px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#panel-tab {
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.25, 1),
              opacity 0.30s ease,
              visibility 0.35s,
              background 0.2s,
              border-color 0.2s,
              box-shadow 0.3s !important;
  will-change: transform, opacity;
}

#panel-tab.hidden {
  display: block !important;
  transform: translateY(-50%) translateX(-65px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2. Smooth accordion legend unfolding */
.legend-block {
  max-height: 260px;
  opacity: 1;
  transform: translateY(0);
  overflow: hidden;
  padding: 10px 12px;
  margin: 8px 0 10px;
  border: 1px solid rgba(255, 42, 133, 0.32);
  border-radius: 12px;
  background: rgba(10, 10, 14, 0.90);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  transition: max-height 0.40s cubic-bezier(0.2, 0.8, 0.25, 1),
              opacity 0.34s ease,
              transform 0.40s cubic-bezier(0.2, 0.8, 0.25, 1),
              padding 0.35s ease,
              margin 0.35s ease,
              border-color 0.35s ease !important;
}

.legend-block.hidden {
  display: block !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-8px) scale(0.98) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-color: transparent !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* 3. Discrete Segmented Elevation Bar (Calm, dark matte rail, quiet indicator pills) */
.elev-segmented-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin: 6px 0 8px;
}

.elev-seg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 2px 4px;
  border-radius: 6px;
  background: rgba(14, 14, 18, 0.90) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 5px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: background 0.20s ease, border-color 0.20s ease, box-shadow 0.20s ease !important;
  user-select: none;
}

.elev-seg .seg-dot {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  margin-bottom: 3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 4px var(--seg-c);
  flex-shrink: 0;
}

.elev-seg:hover {
  background: rgba(26, 20, 36, 0.95) !important;
  border-color: rgba(255, 42, 133, 0.45) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
  transform: none !important;
  filter: none !important;
}

.seg-lvl {
  font-size: 9.5px;
  font-weight: 700;
  color: #f0e6f8;
  letter-spacing: 0.3px;
  line-height: 1.1;
}

.seg-sub {
  font-size: 8px;
  color: #9a87ad;
  letter-spacing: 0.2px;
  margin-top: 1px;
}

/* 4. Smooth switches (Bounded strictly inside capsule, 2px padding on all sides) */
.switch {
  width: 32px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: rgba(30, 24, 40, 0.70) !important;
  border: 1px solid rgba(255, 42, 133, 0.35) !important;
  position: relative !important;
  flex: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: background 0.25s cubic-bezier(0.2, 0.8, 0.25, 1),
              border-color 0.25s ease,
              box-shadow 0.25s ease !important;
}

.switch::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  transform: none !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1),
              background 0.25s ease !important;
}

.switch.on {
  background: linear-gradient(90deg, #ff2a85, #a82fff) !important;
  border-color: transparent !important;
  box-shadow: 0 0 12px rgba(255, 42, 133, 0.50) !important;
}

.switch.on::after {
  left: 2px !important;
  transform: translateX(14px) !important;
  background: #ffffff !important;
}

/* 5. Smooth search dropdown */
.drop {
  transition: opacity 0.28s cubic-bezier(0.2, 0.8, 0.25, 1),
              transform 0.28s cubic-bezier(0.2, 0.8, 0.25, 1),
              visibility 0.28s !important;
  will-change: transform, opacity;
}

.drop.hidden {
  display: block !important;
  opacity: 0 !important;
  transform: translateY(-8px) scale(0.98) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.d-item {
  transition: background 0.18s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.25, 1), padding-left 0.18s ease !important;
}

.d-item:hover {
  background: rgba(255, 42, 133, 0.18) !important;
  transform: translateX(4px);
}

/* 6. Smooth hover states on rows and buttons */
.layer-row {
  transition: background 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1) !important;
}

.layer-row:hover {
  background: rgba(255, 42, 133, 0.12) !important;
  transform: translateX(2px);
}

.icon-btn, .mini-btn {
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1),
              background 0.22s ease,
              border-color 0.22s ease,
              box-shadow 0.26s ease,
              color 0.20s ease !important;
}

.icon-btn:hover, .mini-btn:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 42, 133, 0.45) !important;
}

.icon-btn:active, .mini-btn:active {
  transform: translateY(0) scale(0.95);
}

.card-act-btn {
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.25, 1),
              background 0.22s ease,
              border-color 0.22s ease,
              box-shadow 0.26s ease,
              color 0.20s ease !important;
}

.card-act-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 42, 133, 0.65) !important;
}

.card-act-btn:active {
  transform: translateY(0) scale(0.96);
}

.filter-chip {
  transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.25, 1),
              background 0.24s ease,
              border-color 0.24s ease,
              box-shadow 0.28s ease,
              color 0.20s ease !important;
}

.filter-chip:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 12px var(--fc, #ff2a85) !important;
}

.filter-chip.active {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 16px var(--fc, #ff2a85) !important;
}

.filter-chip:active {
  transform: translateY(0) scale(0.96);
}


/* ==========================================================================
   ULTRA-SLEEK COMPACT TOP & BOTTOM UI (UNION SMP)
   Reduces vertical footprint by ~35%, minimalist tactical profile
   ========================================================================== */

/* 1. Sleek Compact Topbar */
#topbar {
  top: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(1280px, calc(100vw - 20px)) !important;
  min-height: 38px !important;
  padding: 3px 12px !important;
  gap: 6px 10px !important;
  border-radius: 10px !important;
  background: rgba(8, 10, 16, 0.96) !important;
  border: 1px solid rgba(255, 42, 133, 0.28) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65), 0 0 10px rgba(168, 47, 255, 0.12) !important;
}

.page-editor #topbar {
  width: calc(100vw - 20px) !important;
}

.tb-left {
  gap: 8px !important;
  min-width: auto !important;
}

.title {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 42, 133, 0.45) !important;
}

.title .subtitle {
  font-size: 8px !important;
  letter-spacing: 0.8px !important;
  color: #9a87ad !important;
  margin-top: 1px !important;
}

.logo svg {
  width: 20px !important;
  height: 20px !important;
}

.mini-role-btn {
  width: 22px !important;
  height: 22px !important;
  font-size: 11px !important;
  border-radius: 5px !important;
  padding: 0 !important;
}

/* 2. Compact Search Input */
.tb-search {
  max-width: 250px !important;
  margin-left: 4px !important;
}

#search {
  height: 26px !important;
  padding: 0 10px 0 26px !important;
  font-size: 10.5px !important;
  border-radius: 999px !important;
  background: rgba(12, 10, 18, 0.75) !important;
  border: 1px solid rgba(255, 42, 133, 0.28) !important;
}

.tb-search svg {
  width: 12px !important;
  height: 12px !important;
  left: 8px !important;
}

/* 3. Compact Filter Chips */
.tb-filters {
  gap: 3px !important;
}

.filter-chip {
  height: 22px !important;
  padding: 2px 7px !important;
  font-size: 10px !important;
  border-radius: 5px !important;
  gap: 4px !important;
  background: rgba(10, 10, 14, 0.85) !important;
  border: 1px solid rgba(126, 143, 174, 0.20) !important;
}

.filter-chip:hover {
  transform: none !important;
  background: rgba(255, 42, 133, 0.15) !important;
  border-color: var(--fc, #ff2a85) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.filter-chip.active {
  transform: none !important;
  background: linear-gradient(135deg, rgba(255, 42, 133, 0.24), rgba(168, 47, 255, 0.24)) !important;
  border-color: var(--fc, #ff2a85) !important;
  box-shadow: 0 0 10px rgba(255, 42, 133, 0.3) !important;
}

.fchip-dot {
  width: 5px !important;
  height: 5px !important;
}

.fchip-badge {
  font-size: 8.5px !important;
  padding: 0 4px !important;
  min-width: 13px !important;
  line-height: 13px !important;
  border-radius: 3px !important;
}

/* 4. Bottom Zoom Controls (Comfortable balanced size, slightly larger) */
#zoombars {
  bottom: 12px !important;
  gap: 7px !important;
}

#zoombar, #zoombar2, #drawbar {
  padding: 4px !important;
  background: rgba(8, 10, 16, 0.96) !important;
  contain: paint;
  border: 1px solid rgba(255, 42, 133, 0.28) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.70) !important;
  border-radius: 999px !important;
}

.zbtn {
  width: 28px !important;
  height: 28px !important;
  font-size: 14px !important;
  border-radius: 50% !important;
  line-height: 1 !important;
}

.zbtn:hover {
  background: rgba(255, 42, 133, 0.25) !important;
}

#zoom-pct {
  font-size: 11px !important;
  min-width: 44px !important;
  padding: 0 5px !important;
  letter-spacing: 0.5px !important;
}

#zoom-fit svg, #draw-toggle-btn svg {
  width: 14px !important;
  height: 14px !important;
}

/* 5. Telemetry Status Pill (Clear comfortable readability) */
#status {
  bottom: 12px !important;
  right: 14px !important;
  padding: 6px 14px !important;
  font-size: 11px !important;
  gap: 8px !important;
  background: rgba(8, 10, 16, 0.96) !important;
  contain: paint;
  border: 1px solid rgba(255, 42, 133, 0.28) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.70) !important;
  border-radius: 999px !important;
}

.st-dot {
  width: 6.5px !important;
  height: 6.5px !important;
  box-shadow: 0 0 6px #ff2a85 !important;
}

.st-divider {
  margin: 0 2px !important;
  font-size: 10.5px !important;
}

/* 6. Harmonized Side Panel & Dossier Card Top Offset */
#side {
  top: 54px !important;
}

#card {
  top: 54px !important;
}


/* ==========================================================================
   TACTICAL DRAWING TOOLBAR & INTERACTIVE CANVAS MODES
   ========================================================================== */
#draw-toolbar {
  position: absolute;
  bottom: 54px !important;
  top: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: rgba(8, 10, 16, 0.96);
  contain: paint;
  border: 1px solid rgba(255, 42, 133, 0.35);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75), 0 0 14px rgba(255, 42, 133, 0.18);
  transition: opacity 0.25s cubic-bezier(0.2, 0.8, 0.25, 1),
              transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1),
              visibility 0.25s !important;
  will-change: transform, opacity;
}

#draw-toolbar.hidden {
  display: flex !important;
  opacity: 0 !important;
  transform: translateX(-50%) translateY(8px) scale(0.96) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.dt-group, .dt-colors, .dt-sizes, .dt-actions, .dt-opacity {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* round 62: общая прозрачность новых линий/дорог/стрелок */
.dt-opacity {
  gap: 5px;
  padding: 0 2px;
}
.dt-opacity-label {
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(216, 205, 230, 0.62);
  white-space: nowrap;
}
.dt-opacity-val {
  width: 28px;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  color: #d8cde6;
  text-align: right;
}
#dt-opacity {
  width: 58px;
  height: 3px;
  margin: 0;
  accent-color: #ff2a85;
  cursor: pointer;
}
#dt-opacity::-webkit-slider-thumb {
  cursor: grab;
}

/* round 62: на узких окнах (планшет) девять инструментов + слайдер не должны
   вылезать за экран; на телефоне ниже 760px работает своя компактная шторка. */
@media (min-width: 761px) and (max-width: 900px) {
  #draw-toolbar .dt-opacity-label { display: none; }
  #draw-toolbar .dt-opacity-val { width: 22px; }
  #dt-opacity { width: 38px; }
  #draw-toolbar .dt-group, #draw-toolbar .dt-colors,
  #draw-toolbar .dt-sizes, #draw-toolbar .dt-actions,
  #draw-toolbar .dt-opacity { gap: 3px; }
  #draw-toolbar .dt-btn { width: 24px; height: 24px; }
  #draw-toolbar .dt-color-chip { width: 15px; height: 15px; }
  #draw-toolbar .dt-custom-color-label { width: 17px; height: 17px; }
  #draw-toolbar .dt-size-btn { width: 22px; height: 22px; }
  #draw-toolbar .dt-opacity { padding: 0; }
}

.dt-sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 42, 133, 0.25);
  margin: 0 2px;
}

.dt-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(14, 14, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #d8cde6;
  cursor: pointer;
  transition: all 0.18s ease;
  padding: 0;
}

.dt-btn:hover:not(:disabled) {
  background: rgba(255, 42, 133, 0.22);
  border-color: #ff2a85;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(255, 42, 133, 0.35);
}

.dt-btn.active {
  background: linear-gradient(135deg, #ff2a85, #a82fff);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 42, 133, 0.5);
}

.dt-btn:disabled {
  opacity: 0.30;
  cursor: not-allowed;
  border-color: transparent;
}

.dt-btn.danger:hover {
  background: rgba(255, 30, 70, 0.25);
  border-color: #ff1e46;
  color: #ff4b6e;
}

.dt-btn.close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Color chips */
.dt-color-chip {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--cc, #ff2a85);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 4px var(--cc);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  padding: 0;
}

.dt-color-chip:hover {
  transform: scale(1.22);
}

.dt-color-chip.active {
  transform: scale(1.28);
  border-color: #ffffff;
  box-shadow: 0 0 10px var(--cc), 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}

/* Custom color picker label */
.dt-custom-color-label {
  position: relative;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  box-shadow: 0 0 6px rgba(168, 47, 255, 0.4);
  transition: transform 0.18s ease;
}

.dt-custom-color-label:hover {
  transform: scale(1.18);
}

.dt-custom-color-label input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.dt-color-wheel {
  font-size: 10px;
  pointer-events: none;
}

/* Size buttons */
.dt-size-btn {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(14, 14, 18, 0.80);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.18s ease;
  padding: 0;
}

.dt-size-btn:hover {
  border-color: rgba(255, 42, 133, 0.4);
}

.dt-size-btn.active {
  background: rgba(255, 42, 133, 0.22);
  border-color: #ff2a85;
}

.dt-sz-dot {
  border-radius: 50%;
  background: #f0e6f8;
}

/* ---------- round 48: свои метки (pin) ----------
   Панель висит над панелью черчения и работает в двух режимах: выбрана метка —
   правим её, ничего не выбрано — задаём вид следующей. */
canvas.mode-pin {
  cursor: crosshair !important;
}

/* round 52: наведение на свою метку — курсор-указатель и подсветка */
canvas.pin-hover {
  cursor: pointer !important;
}

/* round 54: отдельной панели #pin-panel больше нет — редактор метки живёт в #card */

.pin-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.pin-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #ff4b91;
}

.pin-sync {
  flex: none;
  margin-left: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #8f86a3;
  font-size: 9.5px;
  line-height: 1.5;
  white-space: nowrap;
}

.pin-sync.ok { color: #10eb82; border-color: rgba(16, 235, 130, 0.45); }
.pin-sync.warn { color: #ffa020; border-color: rgba(255, 160, 32, 0.45); }

.pin-sub {
  margin-left: auto;
  font-size: 10px;
  color: #8f86a3;
  max-width: 58%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pin-icons {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 9px;
}

.pin-icon-btn {
  height: 29px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 7px;
  background: rgba(14, 14, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbbfe0;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.pin-icon-btn:hover {
  color: #ffffff;
  border-color: rgba(255, 42, 133, 0.55);
  background: rgba(255, 42, 133, 0.16);
}

.pin-icon-btn.active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, #ff2a85, #a82fff);
  box-shadow: 0 0 9px rgba(255, 42, 133, 0.45);
}

.pin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.pin-row-label {
  flex: none;
  width: 76px;
  font-size: 10px;
  color: #8f86a3;
}

.pin-colors {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pin-color-chip {
  width: 17px;
  height: 17px;
  padding: 0;
  border-radius: 50%;
  background: var(--cc, #ff2a85);
  border: 1px solid rgba(255, 255, 255, 0.30);
  box-shadow: 0 0 4px var(--cc);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.pin-color-chip:hover {
  transform: scale(1.22);
}

.pin-color-chip.active {
  transform: scale(1.28);
  border-color: #ffffff;
  box-shadow: 0 0 10px var(--cc), 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}

.pin-custom {
  position: relative;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  box-shadow: 0 0 6px rgba(168, 47, 255, 0.4);
  transition: transform 0.16s ease;
}

.pin-custom:hover {
  transform: scale(1.18);
}

.pin-custom input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.pin-range {
  flex: 1;
  min-width: 0;
  height: 16px;
  accent-color: #ff2a85;
  cursor: pointer;
}

.pin-val {
  flex: none;
  width: 42px;
  text-align: right;
  font-size: 10px;
  color: #c8bfd8;
  font-variant-numeric: tabular-nums;
}

#pin-name {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 8px;
  border-radius: 7px;
  background: rgba(14, 14, 20, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #f2ecfa;
  font: inherit;
  outline: none;
}

#pin-name:focus {
  border-color: #ff2a85;
  box-shadow: 0 0 0 2px rgba(255, 42, 133, 0.18);
}

.pin-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pin-hint {
  flex: 1;
  font-size: 9.5px;
  line-height: 1.35;
  color: #7d748f;
}

.pin-del {
  flex: none;
  height: 24px;
  padding: 0 10px;
  border-radius: 7px;
  background: rgba(255, 30, 70, 0.12);
  border: 1px solid rgba(255, 30, 70, 0.40);
  color: #ff6b86;
  font-size: 10px;
  cursor: pointer;
  white-space: nowrap;
}

.pin-del:hover:not(:disabled) {
  background: rgba(255, 30, 70, 0.26);
  color: #ffffff;
}

.pin-del:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Canvas cursors */
canvas.mode-brush, canvas.mode-line, canvas.mode-arrow, canvas.mode-road {
  cursor: crosshair !important;
}

canvas.mode-eraser {
  cursor: cell !important;
}

canvas.mode-hand, canvas.space-pan {
  cursor: grab !important;
}

canvas.mode-territory, canvas.ruler-mode {
  cursor: crosshair !important;
}

canvas.middle-pan {
  cursor: grabbing !important;
}

canvas.dragging, canvas.space-pan:active {
  cursor: grabbing !important;
}


/* Bottom drawbar pill */
#drawbar {
  display: flex !important;
  align-items: center !important;
  padding: 2px !important;
  background: rgba(8, 10, 16, 0.96) !important;
  contain: paint;
  border: 1px solid rgba(255, 42, 133, 0.28) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6) !important;
  border-radius: 999px !important;
}

#draw-toggle-btn.active {
  background: linear-gradient(135deg, #ff2a85, #a82fff) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(255, 42, 133, 0.5) !important;
}

#dt-smooth.active {
  background: linear-gradient(135deg, #ff2a85, #a82fff) !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(255, 42, 133, 0.5) !important;
}


/* ---------- Two-tier Notification System ---------- */
/* 1. Important Notifications: Centered right ABOVE drawing toolbar (bottom: 104px) */
#toast, .toast-primary {
  position: absolute;
  left: 50% !important;
  bottom: 104px !important;
  top: auto !important;
  right: auto !important;
  transform: translateX(-50%) translateY(10px) !important;
  z-index: 60 !important;
  pointer-events: none !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  background: rgba(8, 10, 16, 0.96) !important;
  contain: paint;
  border: 1px solid rgba(255, 42, 133, 0.45) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.8), 0 0 16px rgba(255, 42, 133, 0.28) !important;
  color: #ffffff !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.22s cubic-bezier(0.2, 0.8, 0.25, 1),
              transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1),
              visibility 0.22s !important;
  white-space: nowrap !important;
}

#toast.show, .toast-primary.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* 2. Secondary / Informational Notifications: Bottom Right ABOVE Coordinates (#status) */
#toast-side, .toast-secondary {
  position: absolute;
  right: 14px !important;
  bottom: 48px !important;
  top: auto !important;
  left: auto !important;
  transform: translateY(8px) !important;
  z-index: 60 !important;
  pointer-events: none !important;
  padding: 5px 13px !important;
  border-radius: 999px !important;
  background: rgba(8, 10, 16, 0.96) !important;
  contain: paint;
  border: 1px solid rgba(168, 47, 255, 0.40) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.70), 0 0 12px rgba(168, 47, 255, 0.20) !important;
  color: #cfd6ea !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.20s cubic-bezier(0.2, 0.8, 0.25, 1),
              transform 0.20s cubic-bezier(0.2, 0.8, 0.25, 1),
              visibility 0.20s !important;
  white-space: nowrap !important;
}

#toast-side.show, .toast-secondary.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* round 62: в режиме черчения нижняя панель стала шире — вторичный тост
   поднимаем над ней, чтобы длинная подсказка не закрывала инструменты. */
body.drawing-mode #toast-side {
  bottom: 150px !important;
}

/* ---------- round 54: редактор своей метки внутри карточки ----------
   Отдельной плавающей панели больше нет: имя, описание, иконка, цвет, размер и
   прозрачность правятся прямо в выезжающей карточке. */
.card-pin-editor {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 42, 133, 0.22);
}

/* read-only карточка (зритель или обычный просмотр): описание без редактора */
.card-pin-desc-view {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 42, 133, 0.18);
}

.card-desc-label {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8f86a3;
}

#card-pin-desc-text {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: #d8cde6;
  white-space: pre-wrap;
}

#card .card-pin-editor .pin-foot {
  margin-top: 6px;
  justify-content: space-between;
}

#card .card-pin-editor .pin-sync {
  margin-left: 0;
  padding: 1px 6px;
  font-size: 9px;
}

#card .card-pin-editor .pin-coord-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}

.pin-coord-key {
  flex: none;
  font-size: 9.5px;
  color: #8f86a3;
}

.pin-coord-input {
  width: 58px;
  height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(14, 14, 20, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #f2ecfa;
  font: 11px/1 "Segoe UI", -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}

.pin-coord-input::-webkit-outer-spin-button,
.pin-coord-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pin-coord-input:focus {
  border-color: #ff2a85;
  box-shadow: 0 0 0 2px rgba(255, 42, 133, 0.18);
}

.pin-coord-input:disabled {
  opacity: 0.42;
}

#card .card-pin-editor .pin-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 4px;
  max-height: 64px;
  overflow-y: auto;
  margin-bottom: 6px;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 42, 133, 0.35) transparent;
}

#card .card-pin-editor .pin-icon-btn {
  height: 25px;
  border-radius: 6px;
}

#card .card-pin-editor .pin-icon-btn svg {
  width: 15px;
  height: 15px;
}

#card .card-pin-editor .pin-row {
  gap: 7px;
  margin-bottom: 5px;
}

#card .card-pin-editor .pin-row-label {
  width: 72px;
  font-size: 9.5px;
}

#card .card-pin-editor .pin-colors {
  gap: 5px;
  flex-wrap: nowrap;
}

#card .card-pin-editor .pin-color-chip {
  width: 15px;
  height: 15px;
  box-shadow: 0 0 3px var(--cc);
}

#card .card-pin-editor .pin-color-chip.active {
  transform: scale(1.18);
  box-shadow: 0 0 7px var(--cc), 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}

#card .card-pin-editor .pin-custom {
  width: 16px;
  height: 16px;
  box-shadow: 0 0 4px rgba(168, 47, 255, 0.35);
}

#card .card-pin-editor .pin-range {
  height: 14px;
}

#card .card-pin-editor .pin-val {
  width: 38px;
  font-size: 9.5px;
}

#card .card-pin-editor .pin-row-desc {
  align-items: flex-start;
}

#card .card-pin-editor .pin-row-desc .pin-row-label {
  padding-top: 6px;
}

#card .card-pin-editor #pin-name {
  height: 25px;
  padding: 0 7px;
  font-size: 11px;
}

#card .card-pin-editor #pin-desc {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  max-height: 74px;
  padding: 5px 7px;
  border-radius: 7px;
  background: rgba(14, 14, 20, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #f2ecfa;
  font: 11px/1.35 "Segoe UI", -apple-system, sans-serif;
  outline: none;
  resize: vertical;
}

#card .card-pin-editor #pin-desc:focus {
  border-color: #ff2a85;
  box-shadow: 0 0 0 2px rgba(255, 42, 133, 0.18);
}



#card .card-pin-editor .pin-del {
  height: 22px;
  padding: 0 8px;
  font-size: 9px;
  background: transparent;
  border-color: rgba(255, 30, 70, 0.28);
}

/* Карточка с редактором выше обычной — даём ей прокрутку на невысоких экранах */
#card {
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  scrollbar-width: thin;
}

#card::-webkit-scrollbar {
  width: 6px;
}

#card::-webkit-scrollbar-thumb {
  background: rgba(255, 42, 133, 0.35);
  border-radius: 999px;
}

/* ---------- round 46: мобильная раскладка (портрет, до 760 px) ----------
   До этого единственный @media был у входного экрана: на телефоне шапка занимала
   четверть высоты, фильтры не влезали, карточка выезжала за экран. Здесь только
   раскладка — палитра, карта и метки не меняются. */
@media (max-width: 760px) {
  #topbar { width: calc(100vw - 16px) !important; }
  .title { display: none !important; }
  .tb-search { max-width: none !important; margin-left: 0 !important; }
  /* фильтры не выносим из шапки: у неё contain: paint, fixed-потомки обрезаются.
     Вместо этого шапка переносится на вторую строку и фильтры едут лентой. */
  #topbar { flex-wrap: wrap !important; height: auto !important; padding-bottom: 4px !important; }
  .tb-search { flex: 1 1 55% !important; }
  .tb-filters {
    order: 9; flex: 1 1 100%; display: flex; gap: 5px; overflow-x: auto; padding: 2px 0 2px;
    scrollbar-width: none;
  }
  .tb-filters::-webkit-scrollbar { display: none; }
  .filter-chip { flex: none; }

  #side, #panel-tab { display: none !important; }

  #card {
    top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: auto !important; max-height: 82vh; overflow-y: auto;
    background: #0a0f18 !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 16px 16px 26px !important;
    transform: translateY(105%) !important;
  }
  #card.open { transform: none !important; }

  /* round 53: на телефоне карточка — нижний лист; панели черчения и меток на время
     её показа прячем, иначе они перекрывают координаты и кнопки карточки */
  body.card-open #draw-toolbar { display: none !important; }

  /* round 54: в нижнем листе пальцу нужны цели крупнее */
  #card .card-pin-editor .pin-icon-btn { height: 32px; }
  #card .card-pin-editor .pin-icons { max-height: 68px; }
  #card .card-pin-editor .pin-color-chip { width: 20px; height: 20px; }
  #card .card-pin-editor .pin-custom { width: 22px; height: 22px; }
  #card .card-pin-editor .pin-row-label { width: 78px; font-size: 10px; }
  #card .card-pin-editor .pin-coord-input { width: 64px; height: 27px; }

  #zoombars {
    left: auto !important; right: 10px !important; bottom: 10px !important;
    transform: none !important; flex-direction: column; align-items: flex-end;
  }
  #scalebar { left: 10px !important; bottom: 10px !important; }
  #status { display: none !important; }

  /* round 48: панель черчения на телефоне не должна вылезать за экран —
     сжимаем её в компактную колонку слева от зум-кнопок, а панель меток ставим
     над ней. */
  #draw-toolbar {
    left: 6px !important;
    right: 128px !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 14px;
    row-gap: 3px;
    padding: 4px 7px;
    bottom: 54px !important;
  }
  #draw-toolbar.hidden { transform: translateY(8px) !important; }
  #draw-toolbar .dt-sep { display: none; }
  #draw-toolbar .dt-opacity-label { display: none; }
  #dt-opacity { width: 38px; }
  #draw-toolbar .dt-opacity-val { width: 22px; }
  /* round 62: девять инструментов и слайдер должны влезать в 256px шторку */
  #draw-toolbar .dt-group, #draw-toolbar .dt-colors,
  #draw-toolbar .dt-sizes, #draw-toolbar .dt-actions,
  #draw-toolbar .dt-opacity { gap: 3px; }
  #draw-toolbar .dt-btn { width: 24px; height: 24px; }
  #draw-toolbar .dt-color-chip { width: 15px; height: 15px; }
  #draw-toolbar .dt-custom-color-label { width: 17px; height: 17px; }
  #draw-toolbar .dt-size-btn { width: 22px; height: 22px; }
  #draw-toolbar .dt-opacity { padding: 0; }
  #toast {
    white-space: normal !important;
    max-width: calc(100vw - 28px);
    text-align: center;
  }
  /* в режиме черчения нижняя панель выше — не даём тосту лечь на инструменты */
  body.drawing-mode #toast { bottom: 150px !important; }
  /* мелкие уведомления на телефоне уводим наверх: внизу они закрывали панель */
  #toast-side {
    top: 118px !important;
    bottom: auto !important;
    left: 8px !important;
    right: 8px !important;
    white-space: normal !important;
    text-align: center;
    border-radius: 10px !important;
  }
}

/* ==========================================================================
   ROUND 56 — реестр своих меток (список, поиск, фильтры, массовые действия)
   ========================================================================== */
#pin-registry {
  position: absolute;
  top: 78px;
  left: 10px;
  width: 300px;
  max-height: calc(100% - 180px);
  z-index: 34;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(10, 15, 24, 0.97), rgba(10, 15, 24, 0.94));
  border: 1px solid rgba(255, 42, 133, 0.4);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.75), 0 0 25px rgba(255, 42, 133, 0.18),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
  opacity: 0;
  transform: translateX(-16px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease,
              transform 0.30s cubic-bezier(0.2, 0.8, 0.25, 1),
              visibility 0.30s,
              left 0.30s cubic-bezier(0.2, 0.8, 0.25, 1);
  will-change: transform, opacity, left;
}
#side:not(.collapsed) ~ #pin-registry { left: 274px; }
#pin-registry.open {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
}

#pin-registry .pin-reg-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 13px 8px;
  flex: none;
}
.pin-reg-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #e8defc;
}
.pin-reg-total {
  flex: none;
  padding: 0 6px;
  border: 1px solid rgba(255, 42, 133, 0.3);
  border-radius: 999px;
  background: rgba(255, 42, 133, 0.14);
  color: var(--muted);
  font-size: 9px;
  line-height: 15px;
}
.pin-reg-head-actions { display: flex; gap: 6px; margin-left: auto; flex: none; }
.pin-reg-new, .pin-reg-close { flex: none; width: 26px; height: 26px; }
.pin-reg-new { font-size: 15px; line-height: 1; }

.pin-reg-tools {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 8px;
  flex: none;
}
.pin-reg-search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(255, 42, 133, 0.28);
  border-radius: 10px;
  background: rgba(8, 12, 20, 0.7);
  color: var(--muted);
}
.pin-reg-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 42, 133, 0.16);
}
.pin-reg-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 11px;
}
.pin-reg-search input::placeholder { color: rgba(184, 164, 204, 0.6); }

.pin-reg-filters { display: flex; gap: 6px; }
.pin-reg-select {
  flex: 1;
  min-width: 0;
  height: 27px;
  padding: 0 7px;
  border: 1px solid rgba(255, 42, 133, 0.28);
  border-radius: 8px;
  background: rgba(8, 12, 20, 0.7);
  color: #d9cdf5;
  font: inherit;
  font-size: 10px;
  outline: none;
  cursor: pointer;
}
.pin-reg-select:focus { border-color: var(--accent); }
.pin-reg-select option { background: #0a0f18; color: #fff; }

.pin-reg-colors { display: flex; align-items: center; gap: 5px; }
.pin-reg-color {
  width: 16px;
  height: 16px;
  flex: none;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 5px;
  background: var(--cc, #888);
  cursor: pointer;
}
.pin-reg-color.all {
  width: auto;
  padding: 0 6px;
  border-color: rgba(255, 42, 133, 0.28);
  background: rgba(255, 42, 133, 0.10);
  color: var(--muted);
  font: inherit;
  font-size: 8.5px;
  line-height: 14px;
}
.pin-reg-color.active {
  outline: 2px solid var(--accent2);
  outline-offset: 1px;
}

.pin-reg-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 13px 6px;
  color: var(--muted);
  font-size: 10px;
  flex: none;
}
.pin-reg-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent2);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.pin-reg-link:hover { color: #fff; text-decoration: underline; }

.pin-reg-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 7px;
  margin: 0 12px 8px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 42, 133, 0.32);
  border-radius: 10px;
  background: rgba(255, 42, 133, 0.10);
  font-size: 10px;
  flex: none;
}
.pin-reg-bulk.hidden { display: none; }
.pin-reg-bulk-label { flex: 1 1 100%; color: #fff; }
.pin-reg-bulk-colors { display: flex; gap: 4px; }
.pin-reg-bulk-color {
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  background: var(--cc);
  cursor: pointer;
}
.pin-reg-bulk-color:hover { transform: scale(1.12); }
.pin-reg-bulk-select {
  height: 20px;
  max-width: 88px;
  padding: 0 4px;
  border: 1px solid rgba(255, 42, 133, 0.3);
  border-radius: 6px;
  background: rgba(8, 12, 20, 0.7);
  color: #d9cdf5;
  font: inherit;
  font-size: 9px;
  outline: none;
}
.pin-reg-bulk-select:disabled { opacity: 0.4; }
.pin-reg-bulk-color:disabled,
.pin-reg-bulk-del:disabled { opacity: 0.4; cursor: default; transform: none; }
.pin-reg-bulk-del {
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid rgba(255, 30, 70, 0.5);
  border-radius: 7px;
  background: rgba(255, 30, 70, 0.12);
  color: #ff9db1;
  font: inherit;
  font-size: 9.5px;
  cursor: pointer;
}
.pin-reg-bulk-del:hover { background: rgba(255, 30, 70, 0.25); color: #fff; }

.pin-reg-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 42, 133, 0.35) transparent;
}
.pin-reg-list::-webkit-scrollbar { width: 6px; }
.pin-reg-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 42, 133, 0.35);
}
.pin-reg-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  outline: none;
}
.pin-reg-row:hover {
  border-color: rgba(255, 42, 133, 0.25);
  background: rgba(255, 42, 133, 0.12);
}
.pin-reg-row.active {
  border-color: rgba(255, 42, 133, 0.55);
  background: rgba(255, 42, 133, 0.18);
}
.pin-reg-row.selected {
  border-color: rgba(168, 47, 255, 0.5);
  background: rgba(168, 47, 255, 0.15);
}
.pin-reg-row:focus-visible { border-color: var(--accent2); }
.pin-reg-check {
  display: none;
  width: 14px;
  height: 14px;
  margin: 0;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}
#pin-registry.select-mode .pin-reg-check { display: block; }
.pin-reg-ic {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 1px solid rgba(255, 42, 133, 0.22);
  border-radius: 8px;
  background: rgba(255, 42, 133, 0.08);
}
.pin-reg-main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}
.pin-reg-name {
  overflow: hidden;
  color: #fff;
  font-size: 11.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pin-reg-meta {
  overflow: hidden;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pin-reg-dist {
  flex: none;
  color: rgba(200, 215, 230, 0.55);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.pin-reg-empty {
  padding: 16px 16px 20px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  text-align: center;
}
.pin-reg-empty b { color: #fff; font-weight: 600; }
.pin-reg-empty .pin-reg-link { display: inline-block; margin-top: 8px; }

#pins-open-btn { position: relative; }
#pins-open-btn.active {
  border-color: var(--accent2);
  color: #fff;
  box-shadow: 0 0 12px rgba(217, 70, 239, 0.35);
}
.pins-btn-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: linear-gradient(135deg, #ff2a85, #a82fff);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  box-shadow: 0 0 7px rgba(255, 42, 133, 0.7);
  pointer-events: none;
}
.pins-btn-count.hidden { display: none; }

.lr-count {
  flex: none;
  padding: 0 5px;
  border: 1px solid rgba(255, 42, 133, 0.28);
  border-radius: 999px;
  background: rgba(255, 42, 133, 0.12);
  color: var(--muted);
  font-size: 8.5px;
  line-height: 14px;
}

@media (max-width: 760px) {
  #pin-registry {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-height: 78vh !important;
    z-index: 55;
    border-radius: 18px 18px 0 0 !important;
    transform: translateY(105%) !important;
    transition: opacity 0.35s ease,
                transform 0.40s cubic-bezier(0.28, 0, 0.62, 0.2),
                visibility 0.40s;
  }
  #pin-registry.open { transform: none !important; }
  body.card-open #pin-registry { display: none !important; }
  .pin-reg-color { width: 19px; height: 19px; }
  .pin-reg-new, .pin-reg-close { width: 32px; height: 32px; }
  .pin-reg-row { padding: 8px 6px; }
  .pin-reg-name { font-size: 12px; }
  .pin-reg-meta { font-size: 10px; }
}

/* round 57: автор метки и позывной в реестре */
#card-author { color: var(--accent-gold); font-weight: 500; }
.pin-reg-me {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  margin: 0 12px 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 42, 133, 0.22);
}
.pin-reg-me.hidden { display: none; }
.pin-reg-me-label {
  flex: none;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pin-reg-me input {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 8px;
  border: 1px solid rgba(255, 42, 133, 0.28);
  border-radius: 8px;
  background: rgba(8, 12, 20, 0.7);
  color: #fff;
  font: inherit;
  font-size: 10.5px;
  outline: none;
}
.pin-reg-me input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 42, 133, 0.16);
}
.pin-reg-me input::placeholder { color: rgba(184, 164, 204, 0.55); }
#card-author {
  max-width: 65%;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   ROUND 59 — линейка (всем) и территории фракций (оператор/тактик)
   ========================================================================== */
#ruler-btn.active {
  color: #071018;
  background: #00e5ff;
  border-color: #00e5ff;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.55);
}

#ruler-hud {
  position: absolute;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  z-index: 44;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: calc(100vw - 24px);
  padding: 7px 9px 7px 11px;
  border: 1px solid rgba(0, 229, 255, 0.42);
  border-radius: 11px;
  background: rgba(7, 12, 18, 0.94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 18px rgba(0, 229, 255, 0.12);
  color: #dffbff;
  font: 11px "Segoe UI", -apple-system, sans-serif;
  white-space: nowrap;
}
#ruler-hud.hidden { display: none !important; }
.rh-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #00e5ff;
  box-shadow: 0 0 9px #00e5ff;
}
#ruler-total {
  color: #00e5ff;
  font: 700 12px "JetBrains Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.rh-hint {
  padding-left: 8px;
  border-left: 1px solid rgba(0, 229, 255, 0.16);
  color: #8f9eb0;
  font-size: 9.5px;
}
#ruler-hud button {
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 6px;
  background: rgba(0, 229, 255, 0.07);
  color: #bff8ff;
  font: 10px "Segoe UI", -apple-system, sans-serif;
  cursor: pointer;
}
#ruler-hud button:hover {
  border-color: rgba(0, 229, 255, 0.65);
  background: rgba(0, 229, 255, 0.14);
}
#ruler-clear { color: #ffb3c2; border-color: rgba(255, 30, 70, 0.28); }

#territory-panel {
  position: absolute;
  left: 50%;
  bottom: 102px;
  transform: translateX(-50%);
  z-index: 44;
  width: 372px;
  max-width: calc(100vw - 20px);
  padding: 9px 11px 10px;
  border: 1px solid rgba(255, 160, 32, 0.38);
  border-radius: 13px;
  background: rgba(7, 10, 16, 0.97);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.72), 0 0 18px rgba(255, 160, 32, 0.10);
  color: #e7dccd;
  font: 11px "Segoe UI", -apple-system, sans-serif;
}
#territory-panel.hidden { display: none !important; }
.tp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.tp-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffc37a;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.tp-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tp-hist {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 160, 32, 0.34);
  border-radius: 7px;
  background: rgba(255, 160, 32, 0.07);
  color: #ffd7a1;
  font: 14px/1 "Segoe UI", -apple-system, sans-serif;
  cursor: pointer;
  padding: 0;
}
.tp-hist:hover:not(:disabled) {
  border-color: #ffc37a;
  background: rgba(255, 160, 32, 0.18);
  color: #ffffff;
}
.tp-hist:disabled {
  opacity: 0.28;
  cursor: default;
}
.tp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffa020;
  box-shadow: 0 0 8px #ffa020;
}
.tp-factions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 7px;
}
.tp-fac {
  height: 24px;
  padding: 0 3px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  background: rgba(14, 14, 20, 0.86);
  color: #b9afc8;
  font: 9.5px "Segoe UI", -apple-system, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.tp-fac.active {
  color: var(--fc);
  border-color: var(--fc);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 9px color-mix(in srgb, var(--fc) 28%, transparent);
}
.tp-status {
  min-height: 15px;
  margin-bottom: 5px;
  color: #f2e9db;
  font-size: 10.5px;
}
.tp-hint {
  color: #887d72;
  font-size: 8.8px;
  line-height: 1.35;
}
.tp-finish {
  width: 100%;
  height: 29px;
  margin-top: 7px;
  border: 1px solid rgba(255, 160, 32, 0.72);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 160, 32, 0.20), rgba(255, 160, 32, 0.08));
  color: #ffd7a1;
  font: 600 10px "Segoe UI", -apple-system, sans-serif;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(255, 160, 32, 0.10);
}
.tp-finish:hover:not(:disabled) {
  border-color: #ffc37a;
  background: linear-gradient(180deg, rgba(255, 160, 32, 0.30), rgba(255, 160, 32, 0.12));
}
.tp-finish:disabled {
  opacity: 0.38;
  cursor: default;
}
.tp-finish.hidden { display: none !important; }

.tp-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  margin-top: 7px;
}
.tp-actions button {
  height: 25px;
  border: 1px solid rgba(255, 160, 32, 0.27);
  border-radius: 6px;
  background: rgba(255, 160, 32, 0.06);
  color: #ffd7a1;
  font: 9.5px "Segoe UI", -apple-system, sans-serif;
  cursor: pointer;
}
.tp-actions button:hover:not(:disabled) {
  border-color: rgba(255, 160, 32, 0.65);
  background: rgba(255, 160, 32, 0.13);
}
.tp-actions button:disabled {
  opacity: 0.32;
  cursor: default;
}
#territory-delete {
  color: #ffb3c2;
  border-color: rgba(255, 30, 70, 0.28);
}
body.territory-mode #toast {
  bottom: auto !important;
  top: 66px !important;
}

@media (max-width: 760px) {
  #ruler-hud {
    left: 8px;
    right: 8px;
    bottom: 88px;
    transform: none;
    max-width: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 7px;
    padding: 7px 8px;
  }
  .rh-hint {
    flex-basis: 100%;
    padding-left: 0;
    border-left: 0;
    text-align: center;
    white-space: normal;
    order: 5;
  }
  #ruler-total { margin-right: auto; }
  #territory-panel {
    left: 8px;
    right: 8px;
    bottom: 190px;
    transform: none;
    width: auto;
    max-width: none;
    max-height: 42vh;
    overflow-y: auto;
  }
  .tp-fac { height: 27px; font-size: 9px; }
  .tp-finish { height: 31px; font-size: 9.5px; }
  .tp-actions button { height: 28px; }
  /* на телефоне во время выбора точек оставляем только счётчик и «Замкнуть»,
     чтобы панель не закрывала карту и точки можно было ставить ниже */
  #territory-panel.drafting .tp-factions,
  #territory-panel.drafting .tp-hint,
  #territory-panel.drafting .tp-actions { display: none !important; }
  #territory-panel.drafting { padding-bottom: 9px; }
  body.territory-mode #toast { top: 178px !important; }
}

/* ==========================================================================
   round 66 — карточка слоёв: спокойная иерархия вместо восьми ярких тумблеров.
   Слои сгруппированы по смыслу, у каждого — цветная иконка и тихий «глаз»
   справа; счётчики показываются только когда есть что считать.
   ========================================================================== */
#side.layers-card > .panel-head {
  padding: 11px 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}
#side.layers-card .panel-body { padding: 0 8px 8px; }

#side.layers-card .layers-list { display: flex; flex-direction: column; }

#side.layers-card .layers-list > .layer-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 4px;
  color: rgba(226, 212, 244, 0.32);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 1.55px;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}
#side.layers-card .layers-list > .layer-group-label:first-child { padding-top: 4px; }
#side.layers-card .layers-list > .layer-group-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0));
}

#side.layers-card .layers-list .layer-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  margin: 0;
  padding: 4px 6px 4px 7px;
  border: 1px solid transparent;
  border-radius: 9px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
#side.layers-card .layers-list .layer-row:hover {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.035);
  transform: none !important;
}
#side.layers-card .layers-list .layer-row:active { background: rgba(255, 255, 255, 0.07) !important; }

/* «Вид» — вторичные переключатели в две колонки: меньше высоты и визуального шума. */
#side.layers-card .layers-list > .layer-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
#side.layers-card .layers-list > .layer-pair .layer-row {
  min-height: 29px;
  padding: 3px 5px 3px 8px;
  gap: 6px;
  border-color: rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.022);
}
#side.layers-card .layers-list > .layer-pair .layer-row:hover {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.055) !important;
}
#side.layers-card .layers-list > .layer-pair .lr-icon { display: none; }
#side.layers-card .layers-list > .layer-pair .lr-name { font-size: 10.5px; }
#side.layers-card .layers-list > .layer-pair .switch { width: 21px !important; height: 21px !important; }
#side.layers-card .layers-list > .layer-pair .sw-eye { width: 13.5px; height: 13.5px; }

#side.layers-card .layers-list .lr-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: var(--c, #888);
  background: transparent;
  box-shadow: none;
  transition: opacity 0.18s ease, filter 0.18s ease;
}
#side.layers-card .layers-list .lr-icon svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
#side.layers-card .layers-list .layer-row.layer-off .lr-icon { opacity: 0.48; filter: saturate(0.55); }

#side.layers-card .layers-list .lr-name {
  flex: 1;
  min-width: 0;
  color: #d9cdee;
  font-size: 11.5px;
  line-height: 1.25;
  white-space: normal;
}
#side.layers-card .layers-list .layer-row.layer-off .lr-name { color: rgba(217, 205, 238, 0.50); }

#side.layers-card .layers-list .lr-count {
  flex: none;
  min-width: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(217, 205, 238, 0.42);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
}
#side.layers-card .layers-list .lr-count.is-zero { display: none; }
#side.layers-card .layers-list .layer-row.layer-off .lr-count { opacity: 0.55; }

/* «Глаз» вместо розовой капсулы: спокойный индикатор видимости. */
#side.layers-card .layers-list .switch {
  display: grid !important;
  flex: none !important;
  place-items: center;
  width: 24px !important;
  height: 24px !important;
  border: 1px solid transparent !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(217, 205, 238, 0.30) !important;
  cursor: pointer !important;
  transition: color 0.18s ease, background 0.18s ease !important;
}
#side.layers-card .layers-list .switch::after { display: none !important; }
#side.layers-card .layers-list .switch:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.07) !important;
}
#side.layers-card .layers-list .switch.on {
  color: #ff6aac !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
#side.layers-card .layers-list .switch.on:hover {
  color: #ff8fc0 !important;
  background: rgba(255, 42, 133, 0.14) !important;
}
#side.layers-card .layers-list .sw-eye {
  display: block;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
#side.layers-card .layers-list .switch.on .sw-eye-slash { display: none; }

#side.layers-card .panel-body > details.help-acc {
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
#side.layers-card .panel-body > details.help-acc summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 8px 4px;
  color: rgba(217, 205, 238, 0.42);
  font-size: 10px;
  letter-spacing: 0.2px;
}
#side.layers-card .panel-body > details.help-acc summary::before {
  content: "?";
  display: grid;
  flex: none;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 42, 133, 0.35);
  border-radius: 50%;
  color: var(--accent);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}
#side.layers-card .panel-body > details.help-acc summary:hover { color: var(--text); }
#side.layers-card .panel-body > details.help-acc .help {
  padding: 2px 8px 5px 29px;
  border-top: 0;
  color: rgba(217, 205, 238, 0.52);
  font-size: 10px;
  line-height: 1.5;
}

/* ==========================================================================
   round 67 — верхняя панель: живой поиск, один фильтр вместо пяти капсул,
   спокойные инструменты справа. Нижняя шкала блоков убрана, статус — только X/Z.
   ========================================================================== */
.page-viewer #topbar {
  gap: 9px;
  padding: 4px 12px;
  overflow: visible;
}
.page-viewer .tb-left { min-width: auto; gap: 9px; }

.page-viewer .tb-search {
  flex: 1 1 360px;
  max-width: 680px !important;
  margin-left: 4px !important;
}
.page-viewer #search {
  height: 30px !important;
  padding: 0 58px 0 31px !important;
  border-radius: 9px !important;
  font-size: 11.5px !important;
  background: rgba(10, 14, 22, 0.78) !important;
  border-color: rgba(255, 42, 133, 0.30) !important;
}
.page-viewer #search::placeholder { color: rgba(184, 164, 204, 0.62); }
.page-viewer #search:focus { border-color: rgba(255, 42, 133, 0.72) !important; }
.page-viewer .tb-search .search-ico {
  left: 10px !important;
  width: 13px !important;
  height: 13px !important;
  opacity: 0.9;
}
.page-viewer .search-kbd {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(217, 205, 238, 0.48);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 9px;
  line-height: 1;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.page-viewer .tb-search:focus-within .search-kbd { opacity: 0; }
.page-viewer .search-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid transparent;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(232, 222, 252, 0.72);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.page-viewer .search-clear:hover { background: rgba(255, 42, 133, 0.20); color: #fff; }

.page-viewer .search-drop {
  top: calc(100% + 7px) !important;
  left: 0;
  right: 0;
  z-index: 80;
  max-height: 370px;
  padding: 5px;
  border-radius: 12px;
  border-color: rgba(255, 42, 133, 0.30);
  background: rgba(8, 12, 20, 0.985);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.78), 0 0 18px rgba(255, 42, 133, 0.10);
}
.page-viewer .search-drop .d-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.page-viewer .search-drop .d-item:hover,
.page-viewer .search-drop .d-item.active {
  background: rgba(255, 42, 133, 0.10) !important;
  border-color: rgba(255, 42, 133, 0.16);
  transform: none !important;
}
.page-viewer .search-drop .d-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--dc, #ff2a85);
  box-shadow: 0 0 7px var(--dc, #ff2a85);
}
.page-viewer .search-drop .d-main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.page-viewer .search-drop .d-name {
  overflow: hidden;
  color: #f0e8fb;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-viewer .search-drop .d-sub {
  overflow: hidden;
  color: rgba(184, 164, 204, 0.62);
  font-size: 9.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-viewer .search-drop .d-go {
  flex: none;
  color: rgba(217, 205, 238, 0.35);
  font-size: 11px;
}
.page-viewer .search-drop .d-item.active .d-go { color: #ff6aac; }
.page-viewer .search-drop .d-empty {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 10px;
  color: rgba(217, 205, 238, 0.55);
  font-size: 10px;
}
.page-viewer .search-drop .d-empty b { color: #e8defc; font-size: 11px; font-weight: 600; }

.page-viewer .tb-filter { position: relative; flex: none; }
.page-viewer .filter-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 9px;
  background: rgba(10, 14, 22, 0.72);
  color: #d9cdee;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.page-viewer .filter-btn:hover { border-color: rgba(255, 255, 255, 0.22); color: #fff; }
.page-viewer .filter-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.055); }
.page-viewer .filter-btn.has-filter { border-color: var(--fc, #ff2a85); }
.page-viewer .fb-funnel { color: rgba(255, 42, 133, 0.82); flex: none; }
.page-viewer .filter-btn.has-filter .fb-funnel { color: var(--fc, #ff2a85); }
.page-viewer .fb-name { max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-viewer .fb-count {
  min-width: 17px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(217, 205, 238, 0.68);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  line-height: 13px;
  text-align: center;
}
.page-viewer .filter-btn.has-filter .fb-count { background: var(--fc, #ff2a85); color: #090b12; font-weight: 700; }
.page-viewer .fb-caret { opacity: 0.55; flex: none; transition: transform 0.18s ease; }
.page-viewer .filter-btn[aria-expanded="true"] .fb-caret { transform: rotate(180deg); }

.page-viewer .filter-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 81;
  width: 238px;
  padding: 6px;
  border: 1px solid rgba(255, 42, 133, 0.28);
  border-radius: 12px;
  background: rgba(8, 12, 20, 0.985);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.78), 0 0 18px rgba(255, 42, 133, 0.10);
}
.page-viewer .fm-title {
  padding: 5px 8px 7px;
  color: rgba(184, 164, 204, 0.46);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.page-viewer .filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #d9cdee;
  font-family: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.page-viewer .filter-option:hover { background: rgba(255, 255, 255, 0.05); }
.page-viewer .filter-option.active {
  border-color: rgba(255, 42, 133, 0.18);
  background: rgba(255, 42, 133, 0.10);
  color: #fff;
}
.page-viewer .fo-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--fc, #ff2a85);
  box-shadow: 0 0 7px var(--fc, #ff2a85);
}
.page-viewer .fo-name { flex: 1; }
.page-viewer .fo-count { color: rgba(217, 205, 238, 0.45); font-size: 9.5px; font-variant-numeric: tabular-nums; }
.page-viewer .filter-option.active .fo-count { color: rgba(255, 255, 255, 0.78); }
.page-viewer .fo-check { width: 14px; height: 14px; flex: none; color: var(--fc, #ff2a85); opacity: 0; }
.page-viewer .filter-option.active .fo-check { opacity: 1; }

.page-viewer .tb-right { gap: 5px; }
.page-viewer .tb-right .icon-btn {
  width: 30px;
  height: 30px;
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}
.page-viewer .tb-right .icon-btn:hover {
  border-color: rgba(255, 42, 133, 0.48);
  background: rgba(255, 42, 133, 0.10);
}
.page-viewer #keeper-help { opacity: 0.68; }
.page-viewer #keeper-help:hover,
.page-viewer #keeper-help.is-new { opacity: 1; }

.page-viewer #status { gap: 7px; padding: 6px 11px !important; }
.page-viewer #st-coords { font-size: 10.5px; }
.page-viewer #st-codes { font-size: 9.5px; }

@media (max-width: 760px) {
  .page-viewer .tb-search { flex: 1 1 55% !important; max-width: none !important; margin-left: 0 !important; }
  .page-viewer .tb-filter { order: 8; }
  .page-viewer .fb-name { display: none; }
  .page-viewer .filter-btn { gap: 5px; padding: 0 7px; }
  .page-viewer .filter-menu { right: 0; left: auto; }
  .page-viewer .tb-right .icon-btn { width: 28px; height: 28px; }
  .page-viewer .live-pill { padding: 0 6px; }
  .page-viewer .live-pill .lp-count { display: none; }
}

/* round 70: сколько людей на карте сейчас — маленький индикатор живого канала */
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(120, 214, 255, 0.22);
  border-radius: 999px;
  background: rgba(8, 12, 20, 0.55);
  color: #8fa3bd;
  font: 600 10.5px/1 system-ui, "Segoe UI", sans-serif;
  letter-spacing: 0.02em;
  cursor: default;
  user-select: none;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.live-pill .lp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #44506a;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.live-pill.is-live { color: #bfe9ff; border-color: rgba(120, 214, 255, 0.45); }
.live-pill.is-live .lp-dot {
  background: #35e0c0;
  box-shadow: 0 0 0 0 rgba(53, 224, 192, 0.55);
  animation: lp-pulse 2.6s ease-out infinite;
}
.live-pill.is-offline { color: #d8a2b4; border-color: rgba(255, 42, 133, 0.4); }
.live-pill.is-offline .lp-dot { background: #ff2a85; }
@keyframes lp-pulse {
  0% { box-shadow: 0 0 0 0 rgba(53, 224, 192, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(53, 224, 192, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 224, 192, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .live-pill.is-live .lp-dot { animation: none; }
}