/* ========= UI (верхняя панель) ========= */
:root{
  --ui-bg: rgba(10,16,28,.92);
  --ui-fg: #eaf1ff;
  --ui-muted: #a9b7d0;

  /* ========= “Бланк” цвета (очень близко к фото) ========= */
  --ink: #1b1f26;
  --muted: #2a2f37;
  --line: #1b3e5a;      /* синие линии */
  --line-soft: rgba(27,62,90,.55);

  --blue-fill: #7ea3bd; /* синий прямоугольник */
  --blue-stroke: #2b5a7e;

  /* ========= Геометрия A4 ========= */
  --a4w: 210mm;
  --a4h: 297mm;

  /* ========= Позиции (если надо подвинуть “в ноль”) ========= */
  --mL: 14mm;
  --mR: 18mm;
  --mT: 10mm;
  --mB: 10mm;

  --cols-gap: 8mm;   /* расстояние между колонками */
  --colW: 38mm;      /* ширина колонки (под 4 шт) */
  --baseContentW: calc(4 * var(--colW) + 3 * var(--cols-gap));
  --contentW: var(--baseContentW);
  --contentExtraW: 0mm;
  --sheetW: calc(var(--contentW) + var(--mL) + var(--mR));

  --blueH: 28mm;
  --bluePad: 2.3mm;

  --subHeadYgap: 4mm;

  --diagramH: 195mm; /* высота вертикали/этажей */
  --levels: 10;      /* сколько линий (этажей) */
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background:#0a0f1a;
  color: var(--ui-fg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.topbar{
  position: sticky;
  top:0;
  z-index:50;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 10px 14px;
  background: var(--ui-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar-left{
  display:flex;
  gap:10px;
  align-items:center;
  flex: 1 1 auto;
  min-width: 0;
}
.hint{ color: var(--ui-muted); font-size: 13px; }
.selWrap{
  display:flex;
  align-items:center;
  gap:6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ui-fg);
}
.selWrap select{
  background: rgba(255,255,255,.12);
  color: var(--ui-fg);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  padding: 4px 6px;
}
.topbar-right{ display:flex; gap:10px; margin-left: 12px; }
.bindStatus{
  align-self: center;
  font-size: 12px;
  color: var(--ui-muted);
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.bindStatusMobile{
  display: none;
}
.btn{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--ui-fg);
  padding: 9px 12px;
  border-radius: 10px;
  cursor:pointer;
  font-weight: 700;
}
.btn:hover{ background: rgba(255,255,255,.10); }
.btn.primary{
  background: rgba(59,130,246,.22);
  border-color: rgba(59,130,246,.45);
}
.btn.primary:hover{ background: rgba(59,130,246,.32); }
.btn.ghost{ background: transparent; }
.btn.bind-active{
  background: rgba(34,197,94,.22);
  border-color: rgba(34,197,94,.55);
}

.stage{
  display:flex;
  justify-content:flex-start;
  padding: 16px 12px 28px;
  overflow-x: auto;
}