/* White architectural model, with the portal's red accents in controls only. */
.three-view { display:grid; grid-template-columns:minmax(0,1fr) 280px; flex:1; min-height:0; background:#f6f6f4; }
.three-scene-column { display:flex; flex-direction:column; min-height:0; min-width:0; overflow:hidden; }
.workspace:has(.inline-editor:not([hidden])) .three-view { grid-template-columns:minmax(0,1fr) 336px; }
.three-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; padding:7px 10px; background:#fff; border-bottom:1px solid var(--line); flex-shrink:0; }
.three-caption { display:flex; align-items:center; gap:9px; min-width:0; }
.three-badge { display:grid; place-items:center; width:31px; height:31px; border:1px solid #e9e4e1; border-radius:8px; color:#a22943; background:#fff7f8; font-size:11px; font-weight:700; flex-shrink:0; }
.three-caption strong { display:block; font-size:12px; line-height:1.4; }
.three-caption>div>span { display:block; color:var(--brand-muted); font-size:10px; margin-top:2px; }
.three-actions { display:flex; gap:6px; align-items:center; flex-shrink:0; }
.three-actions .secondary { font-size:10px; min-height:30px; padding:6px 10px; border-radius:7px; }
.three-actions .icon-button { width:30px; height:30px; border:1px solid var(--line); border-radius:7px; background:#fff; }
.three-actions button:disabled { opacity:.35; cursor:default; }
.three-actions { margin-left:auto; }
#threeCut[aria-pressed="true"] { color:#a2203d; border-color:#e9afbc; background:#fff0f3; }
.three-stage { position:relative; flex:1; min-height:0; overflow:hidden; }
.three-canvas { position:absolute; inset:0; }
.three-canvas canvas { display:block; width:100%; height:100%; touch-action:none; overscroll-behavior:contain; cursor:grab; }
.three-canvas canvas:active { cursor:grabbing; }
.three-canvas canvas:focus-visible { outline:2px solid var(--brand-red); outline-offset:-3px; }
.three-device-labels { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.three-device-label { position:absolute; transform:translate(-50%,-100%); pointer-events:auto; touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; white-space:nowrap; border:1px solid #c5b8be; background:#ffffffed; border-radius:4px; padding:3px 5px; font:700 9px Arial,sans-serif; color:#5d4e55; box-shadow:0 1px 4px #29141b20; }
.three-device-label::before { content:''; display:inline-block; width:4px; height:4px; margin:0 3px 1px 0; border-radius:50%; background:#949097; }
.three-device-label.selected,.three-device-label:focus-visible { border-color:#e81035; color:#9b2140; background:#fff0f3; outline:1px solid #e81035; }
.three-device-label.locked { cursor:pointer; }
.three-canvas.card-drop-ready { outline:2px dashed #dba7b5; outline-offset:-4px; }
.three-canvas.card-drop-active { outline-color:#e81035; }
.three-status { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:13px; padding:30px; text-align:center; background:#f8f8f6; }
.three-status-icon { display:grid; place-items:center; width:52px; height:52px; border:1px solid #e6e4e1; border-radius:14px; background:#fff; color:#a7a0a2; }
.three-status-icon svg { width:26px; height:26px; }
.three-status h2 { margin:0; font-size:18px; }
.three-status p { margin:0; max-width:440px; line-height:1.65; color:var(--brand-muted); font-size:12px; }
.three-status .secondary { margin-top:8px; }
.three-model-note { position:absolute; bottom:12px; left:14px; pointer-events:none; padding:6px 9px; border:1px solid #e6e3e0; border-radius:6px; background:#ffffffe8; font-size:10px; color:#777174; }
.three-bottom { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 12px; border-top:1px solid var(--line); background:#fff; flex-shrink:0; }
.three-bottom>span { font-size:10px; color:var(--brand-muted); line-height:1.5; }
.three-bottom .text-button { font-size:10px; white-space:nowrap; }
.three-view[hidden],.three-status[hidden],.three-canvas[hidden],.three-model-note[hidden] { display:none; }
@media (max-width:1350px) { .three-view { grid-template-columns:minmax(0,1fr) 260px; } }
@media (max-width:1200px) { .tabs { gap:2px; } .three-caption>div>span { font-size:9px; } }
@media (max-width:760px) {
 .three-view,.workspace:has(.inline-editor:not([hidden])) .three-view { grid-template-columns:1fr; flex:none; }
 .three-stage { flex:none; height:clamp(310px,55dvh,600px); }
 .three-toolbar { padding:8px; gap:7px; flex-wrap:wrap; }
 .three-caption strong { font-size:11px; }
 .three-caption>div>span { font-size:9px; }
 .three-actions { margin-left:auto; }
 .three-actions .secondary { padding:5px 8px; }
 .three-actions { gap:4px; }
 .three-bottom { flex-wrap:wrap; padding:7px 9px; }
 .three-bottom>span { font-size:9px; }
 .workspace-toolbar { gap:4px; }
 .tab { padding:5px 7px; gap:4px; white-space:nowrap; }
 .tabs { gap:0; }
 .toolbar-actions { gap:2px; }
}
.three-rotate-handle { position:absolute; transform:translate(-50%,-50%); pointer-events:auto; touch-action:none; user-select:none; border:1px solid #e81035; border-radius:18px; background:#fff6f8; color:#a2203d; font:700 11px Arial,sans-serif; padding:6px 8px; min-width:48px; min-height:30px; box-shadow:0 2px 8px #42132122; cursor:ew-resize; }
.three-rotate-handle:focus-visible { outline:2px solid #e81035; outline-offset:2px; }
.three-rotate-handle[hidden] { display:none; }
.model-heading { display:block; width:100%; height:100%; transform-origin:50% 50%; }