* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg-app); color: var(--fg1); font-family: var(--font-ui); }
button, input, select, textarea { font: inherit; }
button { min-height: 34px; padding: 0 12px; border: 1px solid var(--border-hair); border-radius: var(--r-sm); background: transparent; color: var(--fg3); cursor: pointer; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
button:hover:not(:disabled) { color: var(--fg1); background: var(--white-a05); border-color: var(--white-a25); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.primary { color: var(--on-brand); background: var(--teal); border-color: var(--teal); font-weight: 600; }
button.primary:hover:not(:disabled) { color: var(--gray-131); background: var(--teal-bright); }
button.selected { color: var(--teal-bright); border-color: var(--teal-a50); background: var(--teal-a10); }
.topbar { height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--border-hair); }
h1, h2, p { margin: 0; }
h1 { margin-top: 5px; font-size: 20px; letter-spacing: -0.02em; }
h2 { margin-top: 3px; font-size: var(--fs-pane); }
.eyebrow { color: var(--fg-muted); font: 600 11px/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: var(--ls-label); }
.header-actions, .view-buttons { display: flex; gap: 8px; }
.workspace { display: grid; grid-template-columns: 330px minmax(560px, 1fr) 370px; height: calc(100vh - 82px); }
.direction-pane, .inspector-pane { min-width: 0; overflow: auto; border-right: 1px solid var(--border-hair); }
.inspector-pane { border-right: 0; border-left: 1px solid var(--border-hair); }
.pane-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 8px 22px; border-bottom: 1px solid var(--border-hair); }
.state { color: var(--fg-muted); font: 11px/1 var(--font-mono); border: 1px solid var(--border-hair); border-radius: var(--r-full); padding: 5px 9px; }
.state.pass { color: var(--approved); border-color: color-mix(in oklab, var(--approved) 35%, transparent); }
.chat-section, .elements-section, .profiles-section, #selected-controls, .camera-section, .global-lighting, .evidence-section { padding: 20px 22px; border-bottom: 1px solid var(--border-hair); }
.chat-section label { display: block; margin-bottom: 8px; color: var(--fg3); font-size: 12px; }
textarea, input, select { width: 100%; border: 1px solid var(--border-hair); border-radius: var(--r-sm); background: var(--white-a05); color: var(--fg1); outline: 0; }
textarea { padding: 12px; resize: vertical; font: 12px/1.5 var(--font-mono); }
input, select { height: 34px; padding: 0 9px; }
textarea:focus, input:focus, select:focus { border-color: var(--white-a25); background: var(--bg-focus); }
#direct-scene { width: 100%; margin-top: 10px; }
.note { margin-top: 10px; color: var(--fg-muted); font-size: 11px; line-height: 1.45; }
.elements-section > .eyebrow, .profiles-section > .eyebrow, .camera-section > .eyebrow, .global-lighting > .eyebrow, .evidence-section > .eyebrow { margin-bottom: 12px; }
.element-row { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: space-between; text-align: left; padding: 9px 12px; border: 0; border-radius: 0; border-bottom: 1px solid var(--border-hair); }
.element-row strong, .profile-card strong { display: block; color: var(--fg2); font-size: 12.5px; }
.element-row small, .profile-card small { color: var(--fg-muted); font: 10.5px/1.4 var(--font-mono); }
.element-row.sel { color: inherit; background: var(--teal-a10); box-shadow: inset 2px 0 0 var(--teal); }
.profile-card { margin-bottom: 8px; padding: 11px 12px; border-radius: var(--r-md); background: var(--white-a05); }
.profile-card header { display: flex; justify-content: space-between; gap: 8px; }
.profile-card p { margin-top: 6px; color: var(--fg-muted); font-size: 10.5px; line-height: 1.4; }
.profile-card button { width: 100%; min-height: 28px; margin-top: 8px; font-size: 11px; }
.stage-pane { min-width: 0; min-height: 0; position: relative; background: var(--gray-1d); }
#world { width: 100%; height: 100%; display: block; }
.stage-toolbar { position: absolute; z-index: 5; top: 0; left: 0; right: 0; min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: rgba(19,19,19,0.86); border-bottom: 1px solid var(--border-hair); }
.stage-toolbar button { min-height: 30px; font-size: 11px; }
#loading { position: absolute; inset: 52px 0 38px; display: grid; place-items: center; color: var(--fg3); background: var(--gray-1d); font-size: 13px; }
#loading[hidden] { display: none; }
.stage-readout { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; min-height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; color: var(--fg-muted); background: rgba(19,19,19,0.9); border-top: 1px solid var(--border-hair); font: 11px/1 var(--font-mono); }
.field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.field-grid.two { grid-template-columns: repeat(2, 1fr); }
.field-grid label, .stack label { display: block; color: var(--fg-muted); font-size: 10.5px; }
.field-grid input, .stack input, .stack select { margin-top: 5px; }
.stack { display: grid; gap: 12px; }
.section-label { margin: 18px 0 9px; color: var(--fg-muted); font: 600 10px/1 var(--font-ui); text-transform: uppercase; letter-spacing: var(--ls-label); }
.joint-note { margin-top: 8px; color: var(--fg-faint); font: 10px/1.45 var(--font-mono); }
.check { display: flex !important; align-items: center; gap: 8px; margin-top: 12px; color: var(--fg3) !important; }
.check input { width: 15px; height: 15px; margin: 0; }
.rationale { color: var(--fg3); font-size: 12px; line-height: 1.5; }
#approximations { margin: 10px 0 0; padding-left: 17px; color: var(--contender); font-size: 11px; line-height: 1.5; }
@media (max-width: 1180px) { .workspace { grid-template-columns: 280px minmax(480px, 1fr) 320px; } }