html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--surface-page); color: var(--text-primary); font-family: var(--font-sans); }
.building-shell { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.building-header { margin: 0; flex: 0 0 auto; }
.building-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.dirty-state { color: var(--state-warning-strong); font-size: var(--font-size-xs); }
.building-body { display: flex; flex: 1 1 auto; min-height: 0; padding: var(--space-4); }
.building-sidebar { flex: 0 0 232px; overflow: auto; }
.building-main { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; margin: 0; padding: var(--space-4); overflow: auto; }
.building-nav { display: grid; gap: var(--space-1); margin: 0; padding: var(--space-2); overflow: visible; background: transparent; border: 0; border-radius: 0; }
.building-nav button { width: 100%; border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer; white-space: nowrap; }
.building-nav button.active { box-shadow: none; }
.building-nav .nav-icon { color: var(--text-tertiary); }
.building-nav .nav-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.building-nav button.active .nav-icon { color: var(--brand-blue-600); }
.page-heading { display: flex; justify-content: space-between; gap: var(--space-4); align-items: start; margin-bottom: var(--space-4); }
.page-heading h2 { margin: 0 0 var(--space-1); }
.page-heading p { margin: 0; color: var(--text-secondary); }
.project-identification { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
label { display: grid; gap: var(--space-1); font-size: var(--font-size-sm); }
input, select { width: 100%; min-width: 0; min-height: 36px; padding: var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-raised); color: inherit; box-sizing: border-box; }
.building-summary { display: grid; grid-template-columns: repeat(3, minmax(120px, 180px)); gap: var(--space-2); margin-bottom: var(--space-4); }
.building-summary div { display: flex; justify-content: space-between; padding: var(--space-2) var(--space-3); background: var(--surface-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.building-status { min-height: 20px; color: var(--state-success-strong); font-size: var(--font-size-sm); }
.building-status.is-error { color: var(--state-danger-strong); }
.branches-list { display: grid; gap: var(--space-3); }
.branch-card { padding: 0; overflow: clip; }
.branch-card > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; background: var(--surface-subtle); }
.branch-card > summary > span:first-child { display: grid; gap: 2px; }
.branch-card summary small { color: var(--text-secondary); }
.branch-fields { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) auto; gap: var(--space-3); align-items: end; padding: var(--space-3) var(--space-4); }
.fixture-table-wrap { overflow-x: auto; }
.fixture-table { width: 100%; border-collapse: collapse; }
.fixture-table th, .fixture-table td { padding: var(--space-2) var(--space-3); border-block: 1px solid var(--border-subtle); text-align: left; }
.fixture-table th { background: var(--surface-subtle); color: var(--text-secondary); font-size: var(--font-size-xs); }
.fixture-table .number-cell { text-align: right; white-space: nowrap; }
.fixture-table td:nth-child(2) { width: 120px; }
.icon-button { width: 34px; height: 34px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-raised); cursor: pointer; color: var(--state-danger-strong); }
.branch-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.branch-result { display: flex; gap: var(--space-4); }
.branch-warnings { margin: 0; padding: var(--space-3) var(--space-4) var(--space-3) 2.5rem; color: var(--state-danger-strong); background: var(--state-danger-soft); }
.result-table-wrap { overflow: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); }
.result-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.result-table th, .result-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); text-align: left; white-space: nowrap; }
.result-table th { position: sticky; top: 0; background: var(--surface-subtle); color: var(--text-secondary); }
.result-table .number-cell { text-align: right; font-variant-numeric: tabular-nums; }
.result-table tr.has-warning td { background: var(--state-warning-soft); }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.summary-grid article { display: grid; gap: var(--space-1); }
.summary-grid span { color: var(--text-secondary); font-size: var(--font-size-sm); }
.summary-grid strong { font-size: var(--font-size-2xl); }
.diameter-summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.diameter-summary h3 { flex-basis: 100%; margin: 0; }
.diameter-summary span { display: flex; gap: var(--space-2); padding: var(--space-2); background: var(--surface-subtle); border-radius: var(--radius-sm); }
.checks-summary { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); padding: var(--space-3); color: var(--state-danger-strong); background: var(--state-danger-soft); border: 1px solid var(--state-danger-border); border-radius: var(--radius-md); }
.checks-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-3); }
.check-card { display: grid; gap: var(--space-2); align-content: start; }
.check-card > div { display: flex; align-items: center; gap: var(--space-2); }
.check-card p { margin: 0; }
.check-card small { color: var(--text-secondary); }
.check-card button { justify-self: start; }
.checks-ok { display: grid; gap: var(--space-1); color: var(--state-success-strong); background: var(--state-success-soft); }
@media (max-width: 900px) { .building-actions { justify-content: flex-start; } .project-identification, .branch-fields { grid-template-columns: 1fr; } .summary-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px) { .building-sidebar { flex-basis: 54px; width: 54px; } .building-sidebar .ui-navigation__group, .building-sidebar .nav-label { display: none; } .building-nav .nav-item { justify-content: center; padding-inline: var(--space-2); } }
@media (max-width: 600px) { .summary-grid { grid-template-columns: 1fr; } .building-body { padding: var(--space-2); } .building-main { padding: var(--space-3); } }