/* Стили плана зала. Тёмная тема платформы; цвет столов = статус. */
.hp-wrap{background:var(--card,#1b1b1b);border:1px solid var(--line,#2c2c2c);border-radius:18px;padding:14px 12px 10px}
.hp-svg{display:block;width:100%;height:auto;touch-action:manipulation}

/* зона: неподвижные объекты */
.hp-fx rect{fill:#151515;stroke:#2e2e2e;stroke-width:.6}
.hp-fx line{stroke:#2a2a2a;stroke-width:.4}
.hp-fx .hp-arrow{fill:none;stroke:#3d3d3d;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.hp-fxlabel{fill:#6d6d6d;font-size:4.6px;font-weight:600;text-anchor:middle;dominant-baseline:central;
  letter-spacing:.2px;font-family:inherit}
.hp-door rect{fill:#2f9e44;stroke:none;opacity:.5}

/* столы */
.hp-t{cursor:pointer}
.hp-t .hp-top{stroke-width:.9;transition:fill .18s, stroke .18s}
.hp-chair{stroke-width:.5;transition:fill .18s, stroke .18s}
.hp-num{font-size:6px;font-weight:700;text-anchor:middle;dominant-baseline:central;font-family:inherit;
  pointer-events:none;transition:fill .18s}

.hp-free .hp-top{fill:#242424;stroke:#4a4a4a}
.hp-free .hp-chair{fill:#1e1e1e;stroke:#3a3a3a}
.hp-free .hp-num{fill:#e8e8e8}
.hp-t.hp-free:hover .hp-top{fill:#2c3a2e;stroke:#2f9e44}
.hp-t.hp-free:focus-visible .hp-top{fill:#2c3a2e;stroke:#2f9e44}

.hp-on .hp-top{fill:#2f9e44;stroke:#57c46c}
.hp-on .hp-chair{fill:#2a6b39;stroke:#3d8a4e}
.hp-on .hp-num{fill:#fff}

.hp-busy{cursor:not-allowed}
.hp-busy .hp-top{fill:#191919;stroke:#2b2b2b}
.hp-busy .hp-chair{fill:#161616;stroke:#242424}
.hp-busy .hp-num{fill:#4a4a4a}
.hp-x{stroke:#7a3030;stroke-width:1.2;stroke-linecap:round}

/* переключатель зон */
.hp-zones{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.hp-zones button{background:var(--card,#1b1b1b);border:1px solid var(--line,#2c2c2c);color:var(--muted,#8f8f8f);
  padding:11px 6px;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:3px;transition:background .15s,color .15s,border-color .15s}
.hp-zones button .n{font-size:11px;font-weight:400;opacity:.8}
.hp-zones button.on{background:#2f9e44;border-color:#2f9e44;color:#fff}
.hp-zones button.on .n{opacity:.9}

/* легенда и подпись выбранного стола */
.hp-legend{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:10px;
  font-size:12.5px;color:var(--muted,#8f8f8f)}
.hp-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-2px}
.hp-legend .lf i{background:#242424;border:1px solid #4a4a4a}
.hp-legend .lo i{background:#2f9e44;border:1px solid #57c46c}
.hp-legend .lb i{background:#191919;border:1px solid #2b2b2b}
.hp-pick{margin-top:10px;text-align:center;font-size:15px;min-height:22px}
.hp-pick b{color:#57c46c}
.hp-pick .s{color:var(--muted,#8f8f8f);font-size:13.5px}

/* светлая тема (админ-панель) */
.hp-light.hp-wrap{background:#fff;border-color:#e6e6e6}
.hp-light .hp-fx rect{fill:#f4f4f4;stroke:#e0e0e0}
.hp-light .hp-fx line{stroke:#e6e6e6}
.hp-light .hp-fx .hp-arrow{stroke:#c2c2c2}
.hp-light .hp-fxlabel{fill:#9a9a9a}
.hp-light .hp-free .hp-top{fill:#fff;stroke:#b9b9b9}
.hp-light .hp-free .hp-chair{fill:#fafafa;stroke:#cfcfcf}
.hp-light .hp-free .hp-num{fill:#1c1c1c}
.hp-light .hp-t.hp-free:hover .hp-top{fill:#e8f6ea;stroke:#2f9e44}
.hp-light .hp-busy .hp-top{fill:#f7f7f7;stroke:#e2e2e2}
.hp-light .hp-busy .hp-chair{fill:#fbfbfb;stroke:#ededed}
.hp-light .hp-busy .hp-num{fill:#bcbcbc}
.hp-lzones button{background:#fff;border:1px solid #e0e0e0;color:#666}
.hp-lzones button.on{background:#2f9e44;border-color:#2f9e44;color:#fff}