:root {
  --bg: #07080c;
  --bg2: #0d0f15;
  --panel: rgba(16, 18, 26, 0.86);
  --panel-solid: #11131b;
  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.14);
  --text: #eef0f5;
  --muted: #8b90a0;
  --dim: #5d6272;
  --orange: #ff8a3d;
  --orange2: #ffb347;
  --cyan: #44d4e6;
  --green: #3ddc84;
  --yellow: #ffd34d;
  --red: #ff5d5d;
  --violet: #a78bfa;
  --grad: linear-gradient(90deg, #ff8a3d, #e7a46f 45%, #44d4e6);
  --radius: 14px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
body:has(.office) { overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--cyan); }
.mono { font-family: var(--mono); }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 8px; }

/* boot */
.boot { height: 100vh; display: grid; place-content: center; gap: 14px; justify-items: center; color: var(--muted); }
.boot-logo { width: 46px; height: 46px; border-radius: 12px; background: var(--grad); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; transform: scale(.92); } }

/* ---------- buttons/inputs ---------- */
.btn { border: 1px solid var(--line2); background: rgba(255,255,255,.04); padding: 9px 14px; border-radius: 10px; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; transition: .15s; white-space: nowrap; }
.btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: linear-gradient(135deg, #ff8a3d, #ff6a2b); border-color: transparent; color: #1a0b02; box-shadow: 0 6px 24px -8px rgba(255,138,61,.7); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 6px 10px; font-size: 13px; border-radius: 8px; }
.btn.danger { color: #ff9b9b; border-color: rgba(255,93,93,.35); }
.btn.ok { background: rgba(61,220,132,.14); border-color: rgba(61,220,132,.4); color: #8ff0b8; }
.btn.icon { width: 38px; height: 38px; padding: 0; justify-content: center; position: relative; }
.badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--yellow); color: #1a1300; font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }
label.f { display: grid; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.inp, textarea.inp, select.inp { width: 100%; background: rgba(0,0,0,.35); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; font-size: 14px; color: var(--text); outline: none; transition: .15s; }
.inp:focus { border-color: rgba(255,138,61,.6); box-shadow: 0 0 0 3px rgba(255,138,61,.15); }
textarea.inp { resize: vertical; min-height: 64px; line-height: 1.45; }
select.inp { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.tag { font-family: var(--mono); font-size: 11px; color: var(--cyan); letter-spacing: .04em; }

/* ---------- setup ---------- */
.setup { min-height: 100vh; background:
  radial-gradient(900px 500px at 85% -10%, rgba(68,212,230,.10), transparent 60%),
  radial-gradient(900px 600px at 0% 0%, rgba(255,138,61,.12), transparent 60%),
  linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0/28px 28px,
  linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0/28px 28px,
  var(--bg); }
.setup-wrap { max-width: 980px; margin: 0 auto; padding: 36px 20px 120px; }
.setup-hero { display: grid; gap: 10px; margin-bottom: 26px; }
.setup-hero h1 { font-size: clamp(28px, 5vw, 46px); line-height: 1.05; margin: 0; letter-spacing: -.02em; }
.setup-hero p { color: var(--muted); margin: 0; font-size: 15px; max-width: 640px; line-height: 1.5; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px; backdrop-filter: blur(10px); }
.step { margin-bottom: 16px; }
.step-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.step-n { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: rgba(255,138,61,.15); color: var(--orange); border: 1px solid rgba(255,138,61,.35); flex: none; }
.step-h h2 { margin: 0; font-size: 17px; }
.step-h span { color: var(--muted); font-size: 13px; }
.grid2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; }
.tpls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tpl { text-align: left; border: 1px solid var(--line2); background: rgba(255,255,255,.025); border-radius: 14px; padding: 14px; display: grid; gap: 6px; transition: .15s; }
.tpl:hover { border-color: rgba(255,255,255,.25); }
.tpl.on { border-color: var(--orange); background: rgba(255,138,61,.08); box-shadow: 0 0 0 3px rgba(255,138,61,.12); }
.tpl b { font-size: 15px; }
.tpl .e { font-size: 22px; }
.tpl small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.team { display: grid; gap: 10px; }
.emp-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: rgba(0,0,0,.22); display: grid; gap: 10px; }
.emp-card.cos { border-color: rgba(68,212,230,.35); background: rgba(68,212,230,.04); }
.emp-top { display: grid; grid-template-columns: 34px 1fr 1fr 130px 34px; gap: 8px; align-items: end; }
.emp-av { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #10131a; }
.emp-mid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.emp-rt { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: start; }
.emp-rt .rt-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.x-btn { width: 34px; height: 38px; border-radius: 9px; border: 1px solid var(--line2); background: transparent; color: var(--muted); }
.x-btn:hover { color: var(--red); border-color: rgba(255,93,93,.4); }
.setup-cta { position: fixed; left: 0; right: 0; bottom: 0; padding: 14px 20px calc(14px + var(--safe-b)); background: linear-gradient(transparent, rgba(7,8,12,.92) 30%); display: flex; justify-content: center; z-index: 5; pointer-events: none; }
.setup-cta .btn { pointer-events: auto; }
html:has(.setup) { scroll-padding-bottom: 110px; scroll-padding-top: 20px; }
.setup-cta .btn { font-size: 16px; padding: 14px 26px; border-radius: 14px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid var(--line2); color: var(--muted); }

/* ---------- office layout ---------- */
.office { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; position: relative; background: radial-gradient(1200px 700px at 50% 30%, #121521, #07080c 70%); }
.topbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(7,8,12,.75); backdrop-filter: blur(12px); z-index: 4; min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.brand-logo { width: 32px; height: 32px; border-radius: 9px; background: var(--grad); flex: none; display: grid; place-items: center; font-weight: 900; color: #120a04; font-size: 14px; }
.brand-txt { min-width: 0; }
.brand-txt b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-txt small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); }
.live.on i { background: var(--green); box-shadow: 0 0 10px var(--green); }

.stage { position: relative; overflow: hidden; min-height: 0; }
.scene-scroll { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.scene-scroll::-webkit-scrollbar { display: none; }
.scene { display: block; width: 100%; height: 100%; }
@media (min-width: 1181px) { .scene-scroll { right: 352px; } }
@media (max-width: 1180px) and (min-width: 641px) { .scene { min-width: 760px; min-height: 480px; } }
.scene .av { cursor: pointer; }
.scene .av:hover .av-ring, .scene .av.sel .av-ring { opacity: 1; }
.scene .av-ring { opacity: 0; transition: opacity .2s; }
.scene .roomlbl { cursor: default; }
.scene .clickable { cursor: pointer; }
.scene text { font-family: var(--font); }
.av-bob { animation: bob 1.1s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-2.5px); } }
.screen-glow { animation: flicker 2.4s ease-in-out infinite; }
@keyframes flicker { 50% { opacity: .65; } }
.queued-dot { animation: pulse 1.6s ease-in-out infinite; }
.legend { position: absolute; left: 14px; bottom: 12px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--muted); z-index: 2; pointer-events: none; }
.legend span { display: inline-flex; gap: 5px; align-items: center; background: rgba(7,8,12,.7); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); }
.legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* team strip (mobile quick access) */
.strip { display: none; gap: 8px; overflow-x: auto; padding: 8px 12px 0; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.chip { flex: none; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line2); border-radius: 12px; padding: 6px 10px 6px 6px; background: rgba(255,255,255,.03); font-size: 13px; }
.chip .emp-av { width: 26px; height: 26px; font-size: 11px; border-radius: 7px; }
.chip small { display: block; color: var(--muted); font-size: 11px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }

/* command bar */
.cmdbar { padding: 10px 14px calc(12px + var(--safe-b)); border-top: 1px solid var(--line); background: rgba(7,8,12,.85); backdrop-filter: blur(12px); z-index: 4; }
.cmd { display: flex; gap: 8px; align-items: flex-end; max-width: 980px; margin: 0 auto; }
.cmd-box { flex: 1; position: relative; }
.cmd-box textarea { min-height: 46px; max-height: 120px; padding: 12px 14px; border-radius: 12px; resize: none; display: block; }
.cmd-lbl { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin: 0 auto 6px; max-width: 980px; font-weight: 600; }
.cmd-lbl b { color: var(--cyan); }
.cmd .btn.primary { height: 46px; border-radius: 12px; }
.quick { display: flex; gap: 6px; flex-wrap: wrap; max-width: 980px; margin: 8px auto 0; }
.quick button { font-size: 12px; border: 1px dashed var(--line2); background: transparent; border-radius: 999px; padding: 4px 10px; color: var(--muted); }
.quick button:hover { color: var(--text); border-color: rgba(255,255,255,.3); }

/* side panel */
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: var(--panel-solid); border-left: 1px solid var(--line2); z-index: 20; display: grid; grid-template-rows: auto auto 1fr; transform: translateX(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1); box-shadow: -30px 0 80px rgba(0,0,0,.5); }
.panel.open { transform: none; }
.panel-h { display: flex; gap: 12px; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); }
.panel-h .emp-av { width: 44px; height: 44px; font-size: 16px; border-radius: 12px; }
.panel-h .t { flex: 1; min-width: 0; }
.panel-h .t b { display: block; font-size: 16px; }
.panel-h .t small { color: var(--muted); font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabs { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { border: 0; background: transparent; padding: 9px 11px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tab.on { color: var(--text); border-bottom-color: var(--orange); }
.tab .n { font-size: 10px; background: rgba(255,255,255,.1); padding: 1px 6px; border-radius: 8px; margin-left: 4px; }
.panel-b { overflow-y: auto; padding: 16px; min-height: 0; overscroll-behavior: contain; }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 15; opacity: 0; pointer-events: none; transition: opacity .2s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.kv { display: grid; gap: 14px; }
.kv div small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.kv div p { margin: 0; line-height: 1.5; font-size: 14px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.06); }
.sec-h { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 8px; font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.empty { color: var(--dim); font-size: 13px; padding: 18px; text-align: center; border: 1px dashed var(--line2); border-radius: 12px; }

/* chat */
.chat { display: grid; gap: 12px; }
.msg { max-width: 92%; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; }
.msg.me { justify-self: end; background: rgba(255,138,61,.14); border: 1px solid rgba(255,138,61,.3); border-bottom-right-radius: 4px; }
.msg.bot { justify-self: start; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg .meta { font-size: 11px; color: var(--muted); margin-bottom: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.msg.status { justify-self: start; font-size: 12px; color: var(--muted); background: transparent; border: 1px dashed var(--line2); }
.chat-in { position: sticky; bottom: -16px; background: var(--panel-solid); padding: 12px 0 4px; margin-top: 10px; display: flex; gap: 8px; align-items: flex-end; }
.chat-in textarea { min-height: 44px; max-height: 140px; resize: none; }
.md h1, .md h2, .md h3, .md h4 { font-size: 15px; margin: 10px 0 4px; }
.md p { margin: 6px 0; }
.md ul, .md ol { margin: 6px 0; padding-left: 20px; }
.md li { margin: 2px 0; }
.md code { font-family: var(--mono); font-size: 12px; background: rgba(255,255,255,.07); padding: 1px 5px; border-radius: 4px; }
.md pre { background: rgba(0,0,0,.35); padding: 10px; border-radius: 8px; overflow-x: auto; }
.md table { border-collapse: collapse; font-size: 12px; display: block; overflow-x: auto; }
.md td, .md th { border: 1px solid var(--line2); padding: 4px 6px; }

/* task list */
.tlist { display: grid; gap: 8px; }
.titem { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: rgba(255,255,255,.02); display: grid; gap: 6px; }
.titem-h { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.titem-h b { font-size: 13.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titem small { color: var(--muted); font-size: 12px; }
.titem details summary { font-size: 12px; color: var(--cyan); cursor: pointer; }
.titem details .md { font-size: 13px; margin-top: 6px; max-height: 360px; overflow: auto; }
.st { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; flex: none; }
.st.queued { background: rgba(167,139,250,.15); color: #c4b5fd; }
.st.working { background: rgba(68,212,230,.15); color: #7de6f2; }
.st.review { background: rgba(255,179,71,.15); color: #ffc677; }
.st.awaiting_approval { background: rgba(255,211,77,.18); color: #ffe17f; }
.st.done { background: rgba(61,220,132,.13); color: #7ff0b0; }
.st.blocked { background: rgba(255,93,93,.15); color: #ff9b9b; }
.st.idle { background: rgba(255,255,255,.06); color: var(--muted); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.filters button { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--muted); }
.filters button.on { background: rgba(255,255,255,.08); color: var(--text); }

/* activity */
.acts { display: grid; gap: 0; }
.act { display: grid; grid-template-columns: 58px 10px 1fr; gap: 8px; font-size: 12.5px; padding: 6px 0; align-items: start; }
.act time { color: var(--dim); font-family: var(--mono); font-size: 11px; padding-top: 1px; }
.act i { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; }
.act span { color: #cfd3dc; line-height: 1.4; }
.act span em { color: var(--muted); font-style: normal; font-family: var(--mono); font-size: 11px; }

/* routines */
.rt { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 8px; }
.rt.paused { opacity: .6; }
.rt-h { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.rt-h b { font-size: 14px; }
.rt-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.switch { position: relative; width: 38px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: rgba(255,255,255,.12); border-radius: 22px; transition: .2s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { transform: translateX(16px); }
.form-grid { display: grid; gap: 10px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* missions rail (desktop) */
.rail { position: absolute; top: 12px; right: 12px; bottom: 12px; width: 340px; display: flex; flex-direction: column; gap: 10px; z-index: 3; pointer-events: none; }
.rail > * { pointer-events: auto; }
.rail-card { background: rgba(13,15,21,.82); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(14px); display: flex; flex-direction: column; min-height: 0; }
.rail-card.grow { flex: 1; }
.rail-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rail-b { overflow-y: auto; padding: 0 12px 12px; min-height: 0; }
.mission { border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 8px; background: rgba(255,255,255,.02); display: grid; gap: 8px; }
.mission-h { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.mission-h b { font-size: 13px; font-weight: 600; line-height: 1.35; }
.steps { display: grid; gap: 4px; }
.stp { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; font-size: 12px; color: #cfd3dc; }
.stp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stp em { font-style: normal; color: var(--muted); font-size: 11px; }
.mission .md { font-size: 12.5px; max-height: 220px; overflow: auto; border-top: 1px solid var(--line); padding-top: 6px; }

/* sheets (modal) */
.sheet { position: fixed; z-index: 30; left: 50%; top: 50%; width: min(620px, calc(100vw - 24px)); max-height: min(86vh, 860px); transform: translate(-50%, -46%) scale(.98); opacity: 0; pointer-events: none; transition: .22s; background: var(--panel-solid); border: 1px solid var(--line2); border-radius: 18px; display: grid; grid-template-rows: auto 1fr; box-shadow: 0 40px 120px rgba(0,0,0,.6); }
.sheet.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.sheet-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.sheet-h h3 { margin: 0; font-size: 16px; }
.sheet-b { overflow-y: auto; padding: 16px 18px 20px; min-height: 0; }
.appr { border: 1px solid rgba(255,211,77,.3); background: rgba(255,211,77,.04); border-radius: 14px; padding: 12px; display: grid; gap: 10px; margin-bottom: 10px; }
.appr .md { font-size: 13px; max-height: 260px; overflow: auto; background: rgba(0,0,0,.25); padding: 8px 10px; border-radius: 8px; }
.note { font-size: 12px; color: var(--muted); line-height: 1.5; background: rgba(255,255,255,.03); border: 1px solid var(--line); padding: 10px 12px; border-radius: 10px; }
.note.warn { border-color: rgba(255,211,77,.3); color: #f2dc9a; }
.code-box { font-family: var(--mono); font-size: 20px; letter-spacing: .2em; background: rgba(0,0,0,.35); border: 1px dashed var(--line2); padding: 10px 14px; border-radius: 10px; display: inline-block; }

#toast { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%) translateY(20px); background: #1b1e29; border: 1px solid var(--line2); padding: 10px 16px; border-radius: 12px; font-size: 14px; opacity: 0; transition: .25s; z-index: 50; pointer-events: none; max-width: calc(100vw - 32px); }
#toast.on { opacity: 1; transform: translateX(-50%); }
#toast.err { border-color: rgba(255,93,93,.5); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .rail { display: none; }
}
@media (max-width: 860px) {
  .tpls { grid-template-columns: repeat(2, 1fr); }
  .grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .setup-wrap { padding: 22px 14px 120px; }
  .card { padding: 14px; border-radius: 16px; }
  .emp-top { grid-template-columns: 34px 1fr 34px; }
  .emp-top .f-pos { grid-column: 1 / -1; }
  .emp-top .f-room { grid-column: 1 / -1; }
  .emp-top .f-pos, .emp-top .f-room { order: 5; }
  .emp-rt { grid-template-columns: 1fr; }
  .topbar { padding: 10px 12px; gap: 8px; }
  .top-actions { gap: 6px; }
  .top-actions .hide-m { display: none; }
  .btn.icon { width: 36px; height: 36px; }
  .strip { display: flex; }
  .office { grid-template-rows: auto 1fr auto auto; }
  .panel { top: auto; height: 88dvh; width: 100vw; border-left: 0; border-top: 1px solid var(--line2); border-radius: 18px 18px 0 0; transform: translateY(105%); }
  .panel.open { transform: none; }
  .sheet { left: 0; right: 0; top: auto; bottom: 0; width: 100vw; max-height: 88dvh; border-radius: 18px 18px 0 0; transform: translateY(40px); }
  .sheet.open { transform: none; }
  .quick { display: none; }
  .legend { display: none; }
  .scene { min-width: 720px; min-height: 440px; }
  #toast { bottom: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}