* { box-sizing: border-box; }
.apartment-embedded #projects-open,.apartment-embedded #apartment-open {display:none;}
.apartment-embedded #topbar h1 {font-size:15px;}
.variant-explanation { border:1px solid #cbd8d0; border-radius:8px; background:#fff; padding:10px; margin:12px 0; font-size:12px; line-height:1.45; }
.variant-explanation h3 { font-size:14px; margin:0 0 7px; color:#244c37; }
.variant-explanation p { margin:6px 0 10px; }
.variant-explanation ul { padding-left:17px; margin:5px 0 10px; }
.variant-explanation li { margin:4px 0; }
.variant-explanation .variant-tradeoffs { border-left:3px solid #d4aa65; padding-left:8px; }
.variant-explanation .variant-differences { border-top:1px solid #e2e8e4; padding-top:8px; }
.layout-comparison { margin:10px 0; padding:8px; border:1px solid #cbd8d0; border-radius:7px; background:#f3f7f4; }
.layout-comparison button { width:100%; margin:3px 0; font-size:12px; }
.layout-comparison button[hidden] { display:none; }
.layout-comparison-table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:11px; margin:8px 0; }
.layout-comparison-table th,.layout-comparison-table td { text-align:left; vertical-align:top; padding:6px 3px; border-bottom:1px solid #d7e0da; overflow-wrap:anywhere; }
.layout-comparison-table th:first-child { width:44%; }
.layout-comparison-table caption { text-align:left; margin-bottom:6px; font-weight:600; }
.comparison-delta { display:block; font-size:10px; color:#53645b; margin-top:3px; }
html, body { margin: 0; height: 100%; font-family: system-ui, sans-serif; font-size: 14px; color: #1a1a1a; }
#app { display: flex; flex-direction: column; height: 100vh; }

#topbar { display: flex; align-items: center; gap: 24px; padding: 8px 16px; background: #2b3a4a; color: white; flex-wrap: wrap; }
#topbar h1 { font-size: 18px; margin: 0; margin-right: 8px; }
.room-size-controls, .actions { display: flex; align-items: center; gap: 8px; }
.actions { flex-wrap: wrap; }
.room-size-controls label { display: flex; flex-direction: column; font-size: 11px; gap: 2px; }
.room-size-controls input { width: 80px; padding: 3px; }
button { padding: 6px 10px; border: 1px solid #ccc; background: #f5f5f5; cursor: pointer; border-radius: 3px; }
button:hover { background: #e8e8e8; }
.status { font-size: 12px; opacity: 0.85; }

#main { flex: 1; display: flex; min-height: 0; }
#left-panel, #right-panel { width: 230px; overflow-y: auto; padding: 10px; background: #fafafa; border-right: 1px solid #ddd; }
#right-panel { border-right: none; border-left: 1px solid #ddd; }
#left-panel h2, #right-panel h2 { font-size: 13px; text-transform: uppercase; color: #555; margin: 14px 0 6px; }
#left-panel h2:first-child, #right-panel h2:first-child { margin-top: 0; }

#canvas-wrap { position: relative; flex: 1; background: #e9e9e9; overflow: hidden; }
#room-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
#canvas-hint { position: absolute; bottom: 6px; left: 8px; font-size: 11px; color: #555; background: rgba(255,255,255,0.75); padding: 3px 6px; border-radius: 3px; pointer-events: none; }

.catalog-model { border: 1px solid #ddd; border-radius: 4px; padding: 6px; margin-bottom: 8px; background: white; }
.catalog-model .model-name { font-weight: 600; margin-bottom: 4px; }
.catalog-model select { width: 100%; margin-bottom: 4px; }
.catalog-model .dims { font-size: 11px; color: #666; margin-bottom: 4px; }
.catalog-model button { width: 100%; }

.muted { color: #888; font-style: italic; }

#selection-panel .field { display: flex; justify-content: space-between; margin-bottom: 4px; gap: 6px; }
#selection-panel .field b { font-weight: 600; text-align: right; }
#selection-panel .sel-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
#selection-panel .sel-actions button { flex: 1; min-width: 70px; }
#selection-panel .field-label { display: block; font-size: 11px; color: #555; margin-top: 8px; margin-bottom: 2px; }
#selection-panel input, #selection-panel select { width: 100%; padding: 4px; font-size: 13px; }
#selection-panel .field-error { color: #8a1c1c; font-size: 11px; min-height: 14px; margin-top: 2px; }
#selection-panel .note { font-size: 11px; color: #777; margin: 4px 0; line-height: 1.3; }
#selection-panel .note-inline { font-size: 11px; color: #777; }
#selection-panel .diag-badge { display: inline-block; padding: 3px 6px; border-radius: 3px; font-size: 11px; font-weight: 700; margin: 4px 0; }
#selection-panel .diag-badge.diag-FAIL { background: #fbdede; color: #c62828; }
#selection-panel .diag-badge.diag-UNKNOWN { background: #fff2dc; color: #e07b00; }

#validation-panel .verdict { font-weight: 700; padding: 6px; border-radius: 4px; margin-bottom: 8px; }
#validation-panel .verdict.ok { background: #d9f2d9; color: #1b5e20; }
#validation-panel .verdict.bad { background: #fbdede; color: #8a1c1c; }
#validation-panel ul { margin: 0; padding-left: 18px; font-size: 12px; }
#validation-panel li { margin-bottom: 4px; }
#validation-panel .error-box { background: #fbdede; color: #8a1c1c; padding: 6px; border-radius: 4px; font-size: 12px; }
#validation-panel .stale-banner { background: #fff2dc; color: #8a5a00; padding: 6px; border-radius: 4px; font-size: 12px; margin-bottom: 8px; font-weight: 600; }
#validation-panel .status-chip { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 10px; font-weight: 700; margin-right: 4px; }
#validation-panel .status-chip.status-PASS { background: #d9f2d9; color: #1b5e20; }
#validation-panel .status-chip.status-FAIL { background: #fbdede; color: #c62828; }
#validation-panel .status-chip.status-UNKNOWN { background: #fff2dc; color: #e07b00; }
#validation-panel .status-chip.status-NOT_APPLICABLE { background: #e0e0e0; color: #555; }

#validation-legend { margin-top: 10px; font-size: 11px; color: #555; border-top: 1px solid #ddd; padding-top: 8px; }
#validation-legend div { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.legend-swatch { display: inline-block; width: 16px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.legend-swatch.legend-fail { background: #c62828; }
.legend-swatch.legend-unknown { background: repeating-linear-gradient(45deg, #e07b00, #e07b00 3px, #fff2dc 3px, #fff2dc 6px); }
.legend-swatch.legend-pass { background: transparent; border: 1px solid #333; }
.catalog-rules { font-size: 11px; line-height: 1.45; color: #42634c; margin: 5px 0; }

#plan-overlays { flex-shrink: 0; border-bottom: 1px solid #ddd; background: rgba(255,255,255,.95); border-radius: 6px; padding: 8px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 8px 16px; }
#plan-overlays label { cursor: pointer; }
#kitchen-plan-view-note { font-size:11px; align-self:center; color:#466878; }
#overlay-status { flex-basis: 100%; color: #42634c; }
#layout-summary { font-size: 13px; line-height: 1.5; }
#layout-quality { font-size: 12px; line-height: 1.4; }
#autoplace-variant { width: 100%; }
.primary-action { background: #21624a; color: white; border: 1px solid #184b38; }
.primary-action:hover { background: #184b38; }
button:disabled { cursor: default; opacity: .45; }
.variant-navigation { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.variant-navigation button { flex: 1; padding: 8px; }
#variant-counter { white-space: nowrap; font-weight: 600; }
#layout-rating { border: 1px solid #b8cbbf; border-radius: 6px; background: #f3f8f5; padding: 10px; margin: 10px 0; font-size: 12px; }
#layout-rating .rating-heading { font-size: 14px; line-height: 1.5; }
#layout-rating strong { white-space: nowrap; }
#layout-rating meter { width: 100%; height: 12px; margin-top: 6px; }
#layout-rating p { margin: 6px 0; line-height: 1.4; }
.rating-card { border: 1px solid #b8cbbf; border-radius: 6px; background: #f3f8f5; padding: 10px; margin: 10px 0; font-size: 12px; }
.rating-card .rating-heading { font-size: 14px; line-height: 1.5; }
.rating-card p { margin: 6px 0; line-height: 1.4; }
.rating-card meter { width: 100%; }
.apply-variant-button { width: 100%; padding: 9px; background: #21624a; border-color: #184b38; color: white; font-weight: 600; }
.apply-variant-button:hover { background: #184b38; }
#kitchen-comparison table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 12px; }
#kitchen-comparison caption { text-align: left; font-weight: 600; margin-bottom: 4px; }
#kitchen-comparison th, #kitchen-comparison td { text-align: left; vertical-align: top; padding: 4px; border-bottom: 1px solid #ddd; overflow-wrap: anywhere; }
#kitchen-comparison td { width: 26%; }
#layout-composition { font-size: 12px; line-height: 1.5; }

#autoplace-panel details { margin: 10px 0; font-size: 12px; }
#autoplace-panel summary { cursor: pointer; }
#autoplace-panel .field { display: flex; justify-content: space-between; gap: 8px; margin: 5px 0; }
/* Bedroom wishes affect generation, independently of shortlist browsing. */
.bedroom-preferences-fields { display:grid; gap:10px; padding:10px 0; }
.bedroom-preferences-fields label { display:grid; gap:4px; }
.bedroom-preferences-fields select { width:100%; min-width:0; }
.compromise-card { border:1px solid #ccd8d1; border-radius:6px; padding:10px; margin:10px 0; background:#f5faf7; }
.compromise-card button { width:100%; }
.kitchen-shortlist { margin:10px 0; }
#kitchen-compositions { border:1px solid #bdcfc3; background:#f3f8f4; border-radius:8px; padding:10px; margin:8px 0 12px; }
#kitchen-compositions label { display:block; margin:8px 0 4px; font-size:12px; font-weight:600; }
#kitchen-compositions select { width:100%; min-width:0; }
#kitchen-compositions details { margin-top:8px; }
#kitchen-wishes label { display:block; margin:8px 0; }
#kitchen-wishes select { max-width:100%; }
#kitchen-wishes[open] { width:min(620px,calc(100vw - 32px)); padding:10px; background:#35495a; border-radius:6px; }
#kitchen-wishes[open] label { display:grid; grid-template-columns:130px minmax(0,1fr); gap:8px; align-items:center; }
#kitchen-wishes .note { color:#e0e9ef; max-width:580px; line-height:1.45; }
.kitchen-choice-card { border:1px solid #ccd8d1; border-radius:7px; padding:9px; margin:8px 0; background:#f6f9f7; }
.kitchen-choice-card.selected { border:2px solid #327956; padding:8px; }
.kitchen-choice-card p { margin:6px 0; font-size:12px; line-height:1.4; }
.kitchen-choice-card button { width:100%; }
#kitchen-elevation-panel { position:absolute; inset:0; z-index:5; background:#f2f5f1; padding:18px; overflow:auto; }
#kitchen-elevation-panel[hidden] { display:none; }
.elevation-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.elevation-toolbar button { margin-left:auto; }
.upper-settings-fields { display:flex; flex-wrap:wrap; gap:12px; padding:12px 0; }
.upper-settings-fields label { display:grid; gap:5px; max-width:220px; font-size:12px; }
.upper-settings-fields input[type=number] { width:110px; }
#kitchen-elevation-drawing svg { width:100%; height: min(58vh,620px); display:block; }
#kitchen-elevation-summary { font-size:13px; line-height:1.5; }
#kitchen-elevation-notes { font-size:13px; line-height:1.6; }
#kitchen-upper-comparison table { width:100%; border-collapse:collapse; font-size:12px; }
#kitchen-upper-comparison td, #kitchen-upper-comparison th { padding:7px; border-bottom:1px solid #ccd6ce; text-align:left; }

#kitchen-scenarios { margin:10px 0 16px; }
.kitchen-scenario { border:1px solid #cad6ce; border-radius:8px; margin:8px 0; padding:9px; background:#fafcf9; }
.kitchen-scenario.selected { border:2px solid #327956; padding:8px; background:#f0f7ef; }
.kitchen-scenario p { font-size:12px; line-height:1.4; margin:7px 0; }
.kitchen-scenario-preview { width:100%; text-align:left; border:0; padding:3px 0; background:transparent; color:#243e31; }
.kitchen-scenario-preview b,.kitchen-scenario-preview span { display:block; }
.kitchen-scenario-preview span { font-size:12px; margin-top:4px; }
.kitchen-scenario details { margin-top:7px; }
.kitchen-scenario summary { cursor:pointer; font-size:12px; }
.kitchen-scenario label { display:block; margin:10px 0 6px; font-size:12px; }
.kitchen-scenario select { display:block; width:100%; min-width:0; margin:5px 0; }
.scenario-tradeoffs { border-left:3px solid #d7ac68; padding-left:7px; }
.kitchen-goal { display:block; width:100%; text-align:left; border:1px solid #cad6ce; border-radius:7px; padding:8px; margin:6px 0; background:#fff; color:#243e31; font-size:12px; }
.kitchen-goal b,.kitchen-goal span { display:block; line-height:1.4; }
.kitchen-goal.selected { border:2px solid #327956; padding:7px; background:#f0f7ef; }
.kitchen-tradeoffs { display:flex; flex-wrap:wrap; gap:4px; margin:7px 0; }
.kitchen-tradeoffs span { font-size:11px; background:#fff1da; color:#67491e; border:1px solid #ead3ac; border-radius:4px; padding:3px 5px; }
#kitchen-goal-selection { border-left:3px solid #327956; padding:7px; margin:10px 0 14px; background:#f0f7ef; }
#kitchen-goal-selection p { font-size:12px; line-height:1.45; margin:5px 0; }
#planning-flow {padding:12px;background:#eef5f3;border:1px solid #ccdcd6;border-radius:9px;margin-bottom:18px;}
#planning-flow h2 {margin-top:0;}
#planning-flow label,#planning-flow select {display:block;width:100%;box-sizing:border-box;}
.planning-steps {padding-left:22px;margin:12px 0;}
.planning-steps li {margin:4px 0;}
.planning-steps button {border:0;background:transparent;text-align:left;padding:4px;color:#245b50;text-decoration:underline;cursor:pointer;}
#planning-flow p {font-size:12px;line-height:1.45;}
#planning-search,#planning-results {width:100%;margin:4px 0;white-space:normal;}
#planning-flow-status {border-top:1px solid #ccdcd6;padding-top:9px;margin-bottom:0;}
#planning-current {width:100%;margin:4px 0;white-space:normal;}
#planning-current[hidden] {display:none;}
#planning-check {border-top:1px solid #ccdcd6;margin-top:12px;padding-top:10px;}
#planning-check h3 {font-size:13px;margin:0 0 8px;}
#planning-check-result {border-left:3px solid #84938e;padding-left:8px;font-size:12px;}
#planning-check-result.planning-check-pass {border-color:#287d58;}
#planning-check-result.planning-check-warning {border-color:#ae7626;}
#planning-check-result p {margin:6px 0;}
#planning-check button {width:100%;white-space:normal;margin-top:5px;}
.verdict.stale {background:#fff4d8;color:#75500b;}
#topbar {gap:12px;flex-wrap:wrap;flex-shrink:0;}
.project-toolbar {display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
#active-project-name {max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#left-panel {width:280px;min-width:240px;}
#left-panel>details {margin:10px 0;padding:9px;border:1px solid #d1ddd6;border-radius:6px;background:#fafcfb;font-size:12px;}
#left-panel details summary {cursor:pointer;font-weight:600;}
#left-panel .room-size-controls,#left-panel .actions,#opening-tools {display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:8px;}
#left-panel .room-size-controls label {font-size:12px;}
#left-panel input:not([type=checkbox]):not([type=range]),#left-panel select,#left-panel textarea {max-width:100%;box-sizing:border-box;}
#left-panel .room-size-controls input,#contour-points {width:100%;}
#left-panel textarea {font:12px monospace;}
#left-panel details label {display:block;margin:7px 0;}
#left-panel details details {margin:10px 0;}
#left-panel fieldset {margin:10px 0;border:1px solid #d1ddd6;}
#left-panel .note,#left-panel [role=status] {font-size:12px;line-height:1.45;}
#left-panel #kitchen-wishes,#left-panel #bedroom-preferences,#left-panel #livingroom-preferences {position:static;width:100%;background:transparent;color:inherit;box-shadow:none;}
#left-panel .actions label {max-width:100%;}
#left-panel .actions button {white-space:normal;}
#contour-points,#obstacle-controls input,#obstacle-controls select,#document-list {width:100%;}
dialog {border:1px solid #bdcec5;border-radius:12px;padding:24px;max-width:min(700px,95vw);max-height:90vh;overflow:auto;box-shadow:0 14px 60px #1a332a40;}
dialog::backdrop {background:#17291f66;}
dialog label {display:block;margin:14px 0;}
dialog input:not([type=file]),dialog select {width:100%;padding:7px;}
.dialog-actions {display:flex;gap:8px;flex-wrap:wrap;margin:16px 0;}
#documents-status,#export-status {color:#745322;}
@media(max-width:850px){#left-panel{min-width:210px;width:230px}#right-panel{width:230px;min-width:210px}#topbar{padding:8px}#active-project-name{max-width:180px}}
#left-panel #kitchen-wishes .note {color:#65776c;}
#left-panel #kitchen-wishes[open] label {display:block;}
#left-panel #kitchen-wishes[open] {padding:0;}