:root {
  --bg: #0a0d14;
  --bg2: #111622;
  --panel: #151b29;
  --line: #263046;
  --text: #eef1f7;
  --muted: #8d97ad;
  --gold: #d8b46a;
  --free: #2fd3a6;
  --reserved: #f5b544;
  --occupied: #5b6477;
  --danger: #ff6b6b;
  --r: 18px;
  font-family: "Segoe UI", Inter, Roboto, system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; color: var(--text); }
body { user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

/* Сцена фиксированного размера 1920×1080, масштабируется под экран */
#stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  transform-origin: 0 0; overflow: hidden;
  background: radial-gradient(1400px 900px at 30% 40%, #18213a 0%, var(--bg) 60%);
}

/* ---------- header ---------- */
.top { height: 104px; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 18px; }
.logo { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, var(--gold), #8a6a2c); box-shadow: 0 0 30px #d8b46a44; }
.name { font-size: 30px; font-weight: 700; letter-spacing: .3px; }
.city { font-size: 17px; color: var(--muted); }
.stats { display: flex; gap: 36px; font-size: 20px; color: var(--muted); }
.stats b { font-size: 30px; color: var(--text); margin-right: 8px; font-variant-numeric: tabular-nums; }
.stats .s i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 10px; vertical-align: 2px; }
.conn { font-size: 16px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.conn i { width: 10px; height: 10px; border-radius: 50%; background: var(--reserved); }
.conn.ok i { background: var(--free); box-shadow: 0 0 10px var(--free); }
.conn.bad i { background: var(--danger); }
.conn.bad span { color: var(--danger); }

.screen { position: absolute; top: 104px; left: 0; right: 0; bottom: 0; display: none; }
.screen.active { display: grid; animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- home ---------- */
#home { grid-template-columns: 1200px 1fr; }
.viewer { position: relative; }
#c3d { width: 100%; height: 100%; display: block; touch-action: none; }
.hint { position: absolute; left: 48px; bottom: 40px; font-size: 18px; color: var(--muted); padding: 12px 20px; border: 1px solid var(--line); border-radius: 40px; background: #0a0d14aa; }
.legend { display: flex; gap: 26px; font-size: 17px; color: var(--muted); }
.legend span i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 10px; vertical-align: -1px; }
.legend-3d { position: absolute; right: 40px; bottom: 50px; }
.info { padding: 56px 64px 40px 32px; display: flex; flex-direction: column; }
.kicker { font-size: 16px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.info h1 { font-size: 46px; line-height: 1.12; margin: 14px 0 18px; font-weight: 700; }
.concept { font-size: 20px; line-height: 1.5; color: #c3cad9; margin: 0 0 30px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; }
.kpi .v { font-size: 30px; font-weight: 700; white-space: nowrap; }
.kpi .v small { font-size: 16px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.kpi .l { font-size: 15px; color: var(--muted); margin-top: 4px; }
.features { list-style: none; padding: 0; margin: 0 0 auto; font-size: 18px; color: #c3cad9; }
.features li { padding: 7px 0 7px 26px; position: relative; }
.features li::before { content: ""; position: absolute; left: 0; top: 16px; width: 10px; height: 2px; background: var(--gold); }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0 16px; }
.quick button { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 10px; text-align: left; transition: .15s; }
.quick button:active, .quick button.hl { border-color: var(--gold); background: #1d2436; }
.quick b { display: block; font-size: 22px; }
.quick span { font-size: 14px; color: var(--free); }

.btn { border-radius: 16px; padding: 18px 28px; font-size: 20px; font-weight: 600; transition: transform .1s, background .15s; }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(135deg, #e6c47c, #b8914a); color: #1a1408; }
.btn.primary:disabled { background: #39404f; color: #8d97ad; }
.btn.big { padding: 26px; font-size: 26px; display: flex; justify-content: center; gap: 14px; }
.btn.ghost { border: 1px solid var(--line); background: var(--panel); }

/* ---------- floor ---------- */
#floor { grid-template-columns: 240px 1fr 540px; }
.floors { padding: 40px 0 40px 40px; display: flex; flex-direction: column; gap: 22px; }
.back { font-size: 18px; padding: 16px 18px; }
.floor-list { display: flex; flex-direction: column; gap: 12px; }
.floor-list button { text-align: left; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); transition: .15s; }
.floor-list button b { display: block; font-size: 26px; }
.floor-list button span { font-size: 15px; color: var(--free); }
.floor-list button.active { border-color: var(--gold); background: linear-gradient(135deg, #2a2516, #1b1f2c); box-shadow: 0 0 0 1px var(--gold) inset; }

.plan-wrap { padding: 36px 28px 30px; display: flex; flex-direction: column; min-width: 0; }
.plan-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; }
.plan-head h2 { font-size: 40px; margin: 0; }
.plan-head p { margin: 6px 0 0; color: var(--muted); font-size: 19px; }
.filters { display: flex; gap: 10px; }
.chip-btn { padding: 12px 20px; border-radius: 30px; border: 1px solid var(--line); font-size: 17px; color: var(--muted); }
.chip-btn.active { color: var(--text); border-color: var(--gold); background: #1d2436; }
#plan { flex: 1; width: 100%; min-height: 0; }
.legend-plan { justify-content: center; margin-top: 10px; }

#plan .outline { fill: #121827; stroke: #34405c; stroke-width: 2; }
#plan .atrium { fill: #0d1220; stroke: #3a4664; stroke-width: 1.5; stroke-dasharray: 6 6; }
#plan .atrium-label, #plan .entrance-label { fill: #5d6884; font-size: 13px; letter-spacing: 3px; text-anchor: middle; text-transform: uppercase; }
#plan .entrance { fill: var(--gold); }
#plan .u rect { stroke: #0a0d14; stroke-width: 3; transition: fill .3s, opacity .3s; }
#plan .u.free rect { fill: #1d6f5c; }
#plan .u.reserved rect { fill: #8a6526; }
#plan .u.occupied rect { fill: #2c3242; }
#plan .u text { pointer-events: none; text-anchor: middle; fill: #e9eef7; }
#plan .u .num { font-size: 15px; font-weight: 700; }
#plan .u .area { font-size: 11px; fill: #b9c2d6; }
#plan .u.occupied text { fill: #7b859b; }
#plan .u.dim { opacity: .25; }
#plan .u.sel rect { stroke: #fff; stroke-width: 4; filter: url(#glow); }
#plan .u.sel.free rect { fill: var(--free); }
#plan .u.sel.reserved rect { fill: var(--reserved); }
#plan .u.sel.occupied rect { fill: #59617a; }
#plan .u.flash rect { animation: flash 1.2s ease 2; }
@keyframes flash { 50% { fill: var(--reserved); } }

/* ---------- unit card ---------- */
.card { margin: 36px 40px 36px 0; background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 34px; display: flex; flex-direction: column; overflow: hidden; }
.card-empty { margin: auto; text-align: center; color: var(--muted); font-size: 22px; line-height: 1.5; }
.card-empty .ico { width: 84px; height: 84px; margin: 0 auto 20px; border: 2px dashed var(--line); border-radius: 22px; }
.unit-top { display: flex; justify-content: space-between; align-items: center; }
.unit-no { font-size: 50px; font-weight: 800; letter-spacing: -1px; }
.unit-no small { display: block; font-size: 16px; font-weight: 500; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; }
.status { padding: 10px 18px; border-radius: 30px; font-size: 18px; font-weight: 600; }
.status.free { background: #2fd3a622; color: var(--free); }
.status.reserved { background: #f5b54422; color: var(--reserved); }
.status.occupied { background: #5b647733; color: #a7afc2; }
.viz { height: 190px; border-radius: 18px; margin: 22px 0; position: relative; overflow: hidden; background-size: cover; background-position: center; }
.viz span { position: absolute; left: 18px; bottom: 14px; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: #fffc; }
.props { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 18px; }
.props div { background: var(--bg2); border-radius: 14px; padding: 14px 16px; }
.props dt { font-size: 14px; color: var(--muted); }
.props dd { margin: 4px 0 0; font-size: 22px; font-weight: 600; }
.card p.descr { font-size: 18px; line-height: 1.5; color: #c3cad9; margin: 0 0 10px; }
.card ul { margin: 0 0 auto; padding: 0; list-style: none; font-size: 17px; color: #c3cad9; }
.card ul li { padding: 5px 0 5px 22px; position: relative; }
.card ul li::before { content: ""; position: absolute; left: 0; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.card .note { margin-top: 18px; padding: 18px; border-radius: 14px; background: var(--bg2); font-size: 18px; color: var(--muted); text-align: center; }
.card .note b { color: var(--reserved); }
.card .btn.big { margin-top: 18px; }

/* ---------- modal / booking ---------- */
.modal { position: absolute; inset: 0; background: #05070bcc; backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 10; }
.modal.hidden { display: none; }
.sheet { width: 1500px; background: var(--panel); border: 1px solid var(--line); border-radius: 28px; padding: 36px 44px 30px; animation: fade .25s ease; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
.sheet-head h3 { font-size: 36px; margin: 0; }
.sheet-head p { margin: 6px 0 0; color: var(--muted); font-size: 19px; }
.close { width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--line); font-size: 30px; line-height: 1; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.field { display: block; background: var(--bg2); border: 2px solid var(--line); border-radius: 16px; padding: 12px 18px; }
.field.active { border-color: var(--gold); }
.field.err { border-color: var(--danger); }
.field label { display: block; font-size: 14px; color: var(--muted); }
.field input { width: 100%; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 26px; padding: 4px 0 0; caret-color: var(--gold); }
.form-foot { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 18px; }
.consent { display: flex; align-items: center; gap: 14px; font-size: 17px; color: var(--muted); text-align: left; max-width: 900px; }
.consent .box { flex: none; width: 34px; height: 34px; border-radius: 9px; border: 2px solid var(--line); display: grid; place-items: center; font-size: 22px; color: #1a1408; }
.consent.on .box { background: var(--gold); border-color: var(--gold); }
.consent.err .box { border-color: var(--danger); }
.form-foot .btn { min-width: 360px; }

.kb { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.kb .row { display: flex; gap: 8px; justify-content: center; }
.kb button { flex: 0 0 auto; width: 96px; height: 64px; border-radius: 12px; background: #222a3c; font-size: 24px; transition: background .08s; }
.kb button:active { background: var(--gold); color: #1a1408; }
.kb button.kz { background: #1b2232; color: #c9d1e2; width: 84px; }
.kb button.wide { width: 150px; font-size: 18px; }
.kb button.space { width: 520px; }
.kb button.on { background: #3a4460; }
.kb.num button { width: 150px; }

.result { text-align: center; padding: 50px 40px 30px; }
.result .big-ico { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 26px; display: grid; place-items: center; font-size: 64px; }
.result.ok .big-ico { background: #2fd3a622; color: var(--free); }
.result.fail .big-ico { background: #ff6b6b22; color: var(--danger); }
.result h3 { font-size: 42px; margin: 0 0 14px; }
.result p { font-size: 22px; color: #c3cad9; margin: 0 auto 34px; max-width: 900px; line-height: 1.5; }
.result .btn { min-width: 360px; margin: 0 auto; }

/* ---------- toasts ---------- */
#toasts { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 20; pointer-events: none; }
.toast { background: #1e2537ee; border: 1px solid var(--reserved); color: var(--text); padding: 16px 26px; border-radius: 40px; font-size: 19px; box-shadow: 0 10px 40px #0008; animation: toast 5s ease forwards; }
.toast b { color: var(--reserved); }
@keyframes toast { 0% { opacity: 0; transform: translateY(-10px); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.foot { position: absolute; right: 16px; bottom: 8px; font-size: 12px; color: #3b4459; }