/* План квартиры для bronn.gurin.top — в стиле gurin.top: Work Sans, тёмная тема по умолчанию, акцент #729bff, тонкие рамки 10px.
   Каркас: 3D-сцена слева, панель справа (на телефоне — под сценой). */
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/worksans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
:root{
  --bg:#111318; --panel:#161920; --fg:#e8eaf0; --muted:#8b93a3; --line:#262b35;
  --accent:#729bff; --accent-fg:#0b0d12; --warn:#f0b955; --danger:#ff8a8a; --ok:#3ddc97;
  --scene-bg:#0e1014; --floor:#8c7757; --tile:#56615f; --wall:#c9ccc5; --wall-top:#1f2329;
  --slope:#b9b3a6; --floor-ink:#f3eadb; --door:#f0b955; --shade:#000000;
  --font-ui:'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-num:ui-monospace, 'Cascadia Mono', Consolas, monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#ffffff; --panel:#f7f8fa; --fg:#20242c; --muted:#8a8f99; --line:#e6e8ec;
  --accent:#2454e0; --accent-fg:#ffffff; --warn:#b8860b; --danger:#c42f2f; --ok:#1b9c5c;
  --scene-bg:#eef0f3; --floor:#d8c3a0; --tile:#cdd7d5; --wall:#f4f3ee; --wall-top:#59635d;
  --slope:#efe9dc; --floor-ink:#5c4b31; --door:#b8860b; --shade:#3b2f1e;
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-ui);font-size:14px;line-height:1.45}
a{color:inherit}
.back{color:var(--muted);text-decoration:none;font-size:13px}
.back:hover{color:var(--accent)}
.hdr-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.sync{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sync::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted)}
.sync[data-s="ok"]::before{background:var(--ok)}
.sync[data-s="saving"]::before{background:var(--accent)}
.sync[data-s="offline"]::before{background:var(--warn)}
.icon-btn{border:1px solid var(--line);background:var(--panel);color:var(--fg);width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.icon-btn svg{width:18px;height:18px}
.tbtn svg{width:15px;height:15px;vertical-align:-2px;margin-right:4px}
.tbtn:disabled{opacity:.4;cursor:default}
.toast{position:absolute;left:50%;transform:translateX(-50%);top:54px;z-index:6;background:var(--panel);border:1px solid var(--accent);border-radius:10px;padding:8px 12px;font-size:13px;max-width:min(520px,calc(100% - 20px))}
body.locked .edit-only{display:none!important}
body.public .back,body.public .priv-only{display:none!important}
.seg.mode button{display:inline-flex;align-items:center;gap:5px}
.seg.mode svg{width:15px;height:15px}
/* режим правки виден по рамке плана и по цветной подсказке внизу */
body:not(.locked) .stage{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
body:not(.locked) .hint span{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.toast-btn{margin-left:10px;font:inherit;font-size:13px;padding:4px 10px;border-radius:8px;border:0;background:var(--accent);color:var(--accent-fg);cursor:pointer}
.app{
  height:100%;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 340px;
  grid-template-rows:auto minmax(0,1fr);gap:12px;
  padding-block:12px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));
}
header{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
h1{font-size:20px;font-weight:600;margin:0;letter-spacing:-.01em;text-wrap:balance}
.sub{color:var(--muted);font-family:var(--font-num);font-size:12px}
.stage{position:relative;min-height:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--scene-bg)}
.stage canvas{display:block;width:100%;height:100%}
.tools{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100% - 20px)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--panel)}
.seg button,.tbtn{font:inherit;font-size:13px;border:0;background:var(--panel);color:var(--fg);padding:6px 11px;cursor:pointer}
.tbtn{border:1px solid var(--line);border-radius:7px}
.seg button[aria-pressed="true"],.tbtn[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg)}
.hint{position:absolute;left:10px;bottom:10px;right:10px;color:var(--muted);font-size:12px;pointer-events:none}
.hint span{background:var(--panel);padding:3px 8px;border-radius:6px;border:1px solid var(--line);display:inline-block}
aside{min-height:0;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:18px}
section{display:flex;flex-direction:column;gap:8px}
h2{margin:0;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.muted{color:var(--muted);margin:0}
label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
input,textarea{font:inherit;font-size:14px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:6px 8px;min-width:0}
input[type=number]{font-family:var(--font-num)}
textarea{font-family:var(--font-num);font-size:11px;height:70px;resize:vertical}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.btns{display:flex;flex-wrap:wrap;gap:6px}
.btn{font:inherit;font-size:13px;padding:6px 10px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn.danger{color:var(--danger)}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.cat button{font:inherit;font-size:13px;text-align:left;padding:7px 9px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;display:flex;justify-content:space-between;gap:6px}
.cat button:hover{border-color:var(--accent)}
.cat small{font-family:var(--font-num);color:var(--muted);font-size:11px;white-space:nowrap}
.num{font-family:var(--font-num);font-size:12px;color:var(--muted);margin:0;font-variant-numeric:tabular-nums}
ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
#warn{list-style:none;padding:0}
#warn li{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
#warn .pill{font-size:11px;padding:1px 7px;border-radius:99px;border:1px solid currentColor;white-space:nowrap}
#warn .hard{color:var(--danger)} #warn .soft{color:var(--warn)}
.ok{color:var(--accent);margin:0}
.assume li{color:var(--muted)}
.assume b{color:var(--fg);font-weight:500}
.views{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.views button{font:inherit;font-size:13px;text-align:left;padding:8px 10px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer}
.views button:hover,.views button[aria-pressed="true"]{border-color:var(--accent)}
.views button[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg)}
.secview{position:absolute;inset:0;z-index:5;background:var(--panel);overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.sv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.sv-head b{font-size:16px;font-weight:600}
.sv-head p{margin:2px 0 0;color:var(--muted);font-size:13px}
.sv-body svg{width:100%;height:auto;max-height:68vh;display:block}
.sv-notes{font-size:13px;color:var(--muted)}
.sv-room{fill:var(--bg);stroke:var(--fg);stroke-width:1.2}
.sv-hatch{stroke:var(--muted);stroke-width:1;opacity:.45}
.sv-win{fill:#bfe0ee;fill-opacity:.55;stroke:var(--fg);stroke-width:.8}
.sv-door{fill:none;stroke:var(--door);stroke-width:1;stroke-dasharray:4 3}
.sv-item{stroke:#1c231f;stroke-width:.7}
.sv-ic{font:600 8px var(--font-ui);fill:#1c231f}
.sv-ih{font:7px var(--font-num);fill:#1c231f;opacity:.75}
.sv-t{font:8px var(--font-ui);fill:var(--fg)}
.sv-dim{stroke:var(--muted);stroke-width:.6;fill:none}
.sv-dt{font:7.5px var(--font-num);fill:var(--muted)}
.sv-ref{stroke:var(--accent);stroke-width:.8;stroke-dasharray:5 3;fill:none}
.sv-band{fill:var(--accent);fill-opacity:.1;stroke:var(--accent);stroke-dasharray:4 3;stroke-width:.7}
.sv-rt{font:7.5px var(--font-ui);fill:var(--accent)}
.sv-dot{fill:var(--accent)}
.sv-fr{fill:#ffffff;fill-opacity:.6;stroke:#1c231f;stroke-width:.6;stroke-dasharray:3 2}
.std{display:flex;flex-direction:column;gap:10px}
.std-g{display:flex;flex-direction:column;gap:4px}
.std-t{font-size:13px;font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chips button{font-family:var(--font-num);font-size:12px;padding:4px 8px;border-radius:99px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer}
.chips button:hover{border-color:var(--accent);color:var(--accent)}
.norms{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.photos button{padding:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;cursor:pointer;background:var(--bg);aspect-ratio:4/3;max-width:100%}
.photos img{width:100%;height:100%;object-fit:cover;display:block}
.lightbox{position:fixed;inset:0;z-index:20;background:rgba(10,14,12,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:calc(16px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
.lightbox[hidden],.secview[hidden]{display:none}
.lightbox img{max-width:100%;max-height:80vh;border-radius:8px}
.lightbox p{color:#eef2ef;margin:0;text-align:center}
.lightbox .row{display:flex;gap:8px}
.lightbox button{font:inherit;padding:6px 14px;border-radius:6px;border:1px solid #6b7770;background:#1b211f;color:#eef2ef;cursor:pointer}
@media (max-width:760px){
  html,body{height:auto}
  .app{height:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 62vh auto}
  aside{overflow:visible}
}