:root {
  color-scheme: dark;
  --bg: #0b0e11;
  --panel: #151b20;
  --line: #2c343b;
  --text: #eaf0f2;
  --muted: #9aadb7;
  --accent: #efcd8b;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
body {
  margin: 0;
  height: 100dvh;
  display: grid;
  grid-template-rows: 60px minmax(0, 1fr) 36px;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 system-ui, sans-serif;
}
.symbols { position: absolute }
header, footer {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 0 20px; background: #101418;
}
header { border-bottom: 1px solid var(--line) }
footer { border-top: 1px solid var(--line); font-size: 12px; color: var(--muted) }
.identity, .brand, .actions { display: flex; align-items: center; gap: 10px }
.brand { color: var(--accent); font: 700 15px var(--mono); letter-spacing: .01em }
#map-floor {
  position: absolute; top: 16px; left: 16px; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 5px; padding: 5px 8px;
  background: var(--panel); color: var(--muted); font-size: 11px; pointer-events: none;
}
#map-floor b { color: var(--text); font: 650 12px var(--mono) }
button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 5px; min-height: 36px;
  padding: 0 11px; background: transparent; color: var(--muted); cursor: pointer; font: inherit;
}
button:hover { background: #1b282f; color: var(--text) }
button:disabled { opacity: .5; cursor: default }
button.primary { background: var(--accent); color: #221b10; font-weight: 650 }
button.primary:hover:not(:disabled) { background: #a8f4df }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.square { width: 38px; padding: 0 }
.icon { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round }
main {
  position: relative; isolation: isolate; overflow: hidden;
  background-image: linear-gradient(#5b687012 1px, transparent 1px), linear-gradient(90deg, #5b687012 1px, transparent 1px);
  background-size: 36px 36px; background-position: center;
}
#map { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; cursor: grab }
#map.placing { cursor: crosshair }
#map.dragging { cursor: grabbing }
#map .floor { fill: #252e35 }
.outline { fill: none; stroke: #d4d9d6; stroke-width: 2.1; stroke-linejoin: round; pointer-events: none }
.cad { pointer-events: none }
.cad { fill: none; stroke-linejoin: round; stroke-linecap: round }
.cad .structure { stroke: #b6c1c3; stroke-width: .68 }
.cad .partitions, .cad .movable { stroke: #98a9ae; stroke-width: .58 }
.cad .glazing { stroke: #7d9ba4; stroke-width: .49 }
.cad .stairs, .cad .doorways { stroke: #768b91; stroke-width: .40 }
.cad .structure-solid { fill: #a3b2b6 }
.cad .partitions-solid { fill: #83979d }
.cad .glazing-solid, .cad .stairs-solid, .cad .doorways-solid { fill: #71868d }
/* Visible room boundaries traced from the updated screenshot. */
.photo-wing { pointer-events: none; stroke: #a5acbc; stroke-width: 3; stroke-linejoin: round }
.wing-room { fill: #454153 }
.wing-service { fill: #3a4046 }
.wing-hall { fill: #4d4338 }
.wing-stairs { fill: #344945 }
.wing-detail { fill: none; stroke: #7e9995; stroke-width: 2 }
.sectors { opacity: .56; pointer-events: none }
.sectors .solid { fill: #171d22 }
.sectors .public { fill: #383a38 }
.sectors .service { fill: #303d45 }
.sectors .workshop { fill: #35424a }
.sectors .classrooms { fill: #3c4a4c }
#target { fill: var(--accent); stroke: #101a1b; stroke-width: 2; pointer-events: none }
#layers[aria-pressed=true] { color: var(--accent) }
#markers { position: absolute; inset: 0; pointer-events: none }
#stage.placing .marker { pointer-events: none }
.marker {
  --size: 17px;
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
  display: grid; place-items: center; width: max(32px, calc(var(--size) + 12px)); height: max(32px, calc(var(--size) + 12px));
  min-height: 0; padding: 0; color: var(--person); border: 0;
  border-radius: 50%; background: transparent;
  transition: opacity .9s linear;
}
.marker:hover, .marker[aria-pressed=true], .marker:focus-visible {
  background: transparent; opacity: 1 !important; z-index: 260 !important;
}
.marker[aria-pressed=true] .stamp { border-color: var(--person); color: var(--person) }
.flame { fill: var(--heat, #ffc36e); stroke: var(--person, #ffc36e); stroke-width: 1.6; paint-order: stroke }
.marker .flame {
  width: var(--size); height: var(--size);
  filter: drop-shadow(0 0 var(--glow) color-mix(in srgb, var(--heat) var(--shine), transparent));
  transition: width .2s, height .2s, fill .9s linear;
}
.marker .portrait {
  position: absolute; top: 50%; left: 50%; width: calc(var(--size) * .39); height: calc(var(--size) * .39);
  transform: translate(-50%, -5%); object-fit: cover; border-radius: 50%; border: 1px solid var(--heat);
}
.marker .stamp {
  position: absolute; top: 0; left: calc(50% + var(--size) * .38); padding: 1px 3px;
  background: #12181d; color: #e7e9e6; border: 1px solid #3c454a;
  border-radius: 3px; font: 9px var(--mono); white-space: nowrap;
}
.marker .bearing { position: absolute; inset: 0; transform: rotate(var(--bearing)); pointer-events: none }
.bearing .icon {
  width: 10px; height: 10px; position: absolute; top: -3px; left: calc(50% - 5px);
  color: var(--person); stroke-width: 2.8; filter: drop-shadow(0 1px 2px #000);
}
.dock {
  display: grid; gap: 3px; padding: 4px; position: absolute; right: 16px; bottom: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 7px; z-index: 270;
}
.panel, dialog {
  border: 1px solid #34464f; border-radius: 8px; background: var(--panel);
  box-shadow: 0 8px 30px #0006; color: var(--text);
}
.panel { position: absolute; z-index: 280; top: 16px; right: 16px; width: min(355px, calc(100% - 32px)); max-height: calc(100% - 154px); overflow: auto }
.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 10px 9px 16px; border-bottom: 1px solid var(--line) }
h1 { margin: 0; font-size: 16px; overflow-wrap: anywhere }
h2 { margin: 0 0 10px; font-size: 13px }
.admin-body, .form-body { padding: 14px 16px }
.admin-body section + section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line) }
.compact, .form-actions { display: flex; align-items: center; gap: 6px }
.compact > input:not([type=color]) { flex: 1 }
#invite-output { margin-top: 8px }
input, select {
  min-width: 0; min-height: 36px; padding: 0 8px; background: #0b1216; color: var(--text);
  border: 1px solid #34464f; border-radius: 5px; font: inherit;
}
input[type=color] { padding: 3px; width: 38px }
input[type=checkbox] { min-height: 0; accent-color: var(--accent); width: 16px; height: 16px; margin: 0 }
input[type=file] { width: 100%; padding: 6px }
ul { list-style: none; padding: 0; margin: 6px 0 0 }
li { display: flex; align-items: center; gap: 8px; padding: 4px 0; min-height: 40px; border-bottom: 1px solid #25333a }
li:last-child { border: 0 }
li .entry-name { flex: 1; overflow-wrap: anywhere }
li .swatch { width: 11px; height: 11px; border-radius: 50%; flex: none }
li small, label, #gate p { color: var(--muted) }
#detail { width: min(320px, calc(100% - 32px)); border-top: 2px solid var(--person, var(--accent)) }
.report-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 15px 11px 15px 17px }
.report-eyebrow {
  display: flex; align-items: center; gap: 5px; margin-bottom: 4px;
  color: var(--person, var(--accent)); font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase;
}
.report-eyebrow .icon { width: 13px; height: 13px }
#detail-name { font-size: 24px; line-height: 1.15; letter-spacing: -.025em }
#detail-photo { display: block; width: calc(100% - 34px); max-height: 170px; margin: 0 17px 15px; object-fit: contain; border-radius: 4px; background: #0c1013 }
.report-stats { display: grid; grid-template-columns: 1fr .7fr; margin: 0; border-block: 1px solid var(--line); background: #101519 }
.report-stats > div { min-width: 0; padding: 11px 17px }
.report-stats > div + div { border-left: 1px solid var(--line) }
.report-stats dt { color: var(--muted); font-size: 11px }
.report-stats dd { margin: 3px 0 0; font: 650 22px var(--mono); font-variant-numeric: tabular-nums }
#detail-votes { color: var(--person, var(--accent)) }
.report-status {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 12px 17px; font-size: 12px; color: var(--muted);
}
.fresh-track { display: block; width: 72px; height: 4px; flex: none; border-radius: 2px; background: #30373d }
.fresh-track i { display: block; height: 100%; border-radius: inherit; background: var(--heat, var(--accent)); transition: width .9s linear }
.report-direction { display: flex; gap: 10px; align-items: center; padding: 10px 17px; border-top: 1px solid var(--line) }
.report-direction .icon { color: var(--person, var(--accent)) }
.report-direction span { display: block; color: var(--muted); font-size: 11px }
.report-direction strong { display: block; font-size: 13px; font-weight: 650 }
.report-action { position: sticky; bottom: 0; padding: 11px 17px; border-top: 1px solid var(--line); background: var(--panel) }
#vote { width: 100% }
#detail-voted { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px }
#detail-voted .icon { width: 15px; height: 15px; color: var(--person, var(--accent)) }
#gate { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(350px, calc(100% - 32px)); padding: 20px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 8px }
#gate strong { font-size: 16px }
#gate p { margin: 6px 0 0 }
#scale { font: 11px var(--mono) }
#connection { min-width: 100px }
#connection::before { content: ""; width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #65777f; margin-right: 7px; vertical-align: 2px }
#connection.online::before { background: var(--accent) }
#hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
#cancel-place, #notice {
  position: absolute; z-index: 270; bottom: 16px; left: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 5px;
}
#notice { padding: 8px 10px; max-width: calc(100% - 92px) }
#stage.placing #notice { bottom: 62px }
dialog { width: min(400px, calc(100% - 24px)); max-height: 95dvh; padding: 0 }
dialog::backdrop { background: #05080ac7 }
.form-body { display: grid; gap: 12px }
label { display: grid; gap: 4px; font-size: 13px }
label small { display: inline; font-size: 11px }
.check { display: flex; gap: 8px; align-items: center }
#person-active-label { padding: 8px 0 }
.form-actions { justify-content: flex-end }
#report-error { color: #ffb1aa; margin: 0; font-size: 13px }
@media (max-width: 580px) {
  body { grid-template-rows: 53px minmax(0,1fr) }
  footer { display: none }
  body.choosing-point footer { display: flex; position: absolute; left: 0; right: 0; bottom: 0; justify-content: center; pointer-events: none; padding-block: 6px }
  footer #connection, footer #scale { display: none }
  #cancel-place { bottom: 38px }
  header, footer { padding: 0 12px }
  #connection { min-width: auto }
  #connection.online { font-size: 0 }
  #connection.online::before { margin-right: 0; vertical-align: 2px }
  .panel { top: 10px; right: 10px; width: min(355px,calc(100% - 20px)); max-height: calc(100% - 150px) }
  #detail { top: auto; right: 0; left: 0; bottom: 0; width: 100%; max-height: 57%; border-radius: 12px 12px 0 0; overscroll-behavior: contain }
  .dock { top: 10px; bottom: auto; right: 10px }
  #map-floor { top: 10px; left: 10px }
}
@media (prefers-reduced-motion: reduce) { .marker, .marker .flame, .fresh-track i { transition: none } }

body.telegram-app {
  height: var(--tg-viewport-stable-height, 100dvh);
  padding: var(--tg-content-safe-area-inset-top, 0px)
           var(--tg-content-safe-area-inset-right, 0px)
           max(var(--tg-content-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom))
           var(--tg-content-safe-area-inset-left, 0px);
}