/* IBM Carbon Design System v11 tokens. Light = Gray 10 theme, dark = Gray 100 theme. Zero radius, Plex type, 8px spacing scale. */
:root {
  color-scheme: light;
  --cds-background: #f4f4f4; --cds-layer-01: #ffffff; --cds-layer-02: #f4f4f4; --cds-layer-hover-01: #e8e8e8; --cds-layer-selected-01: #e0e0e0; --cds-layer-accent-01: #e0e0e0;
  --cds-field-01: #ffffff; --cds-field-02: #f4f4f4; --cds-border-subtle-01: #e0e0e0; --cds-border-strong-01: #8d8d8d; --cds-border-interactive: #0f62fe;
  --cds-text-primary: #161616; --cds-text-secondary: #525252; --cds-text-placeholder: #a8a8a8; --cds-text-on-color: #ffffff; --cds-text-inverse: #ffffff;
  --cds-interactive: #0f62fe; --cds-link-primary: #0f62fe; --cds-focus: #0f62fe; --cds-button-primary: #0f62fe; --cds-button-primary-hover: #0353e9; --cds-button-secondary: #393939; --cds-button-secondary-hover: #4c4c4c; --cds-button-tertiary: #0f62fe;
  --cds-layer-selected-inverse: #161616; --cds-icon-primary: #161616; --cds-overlay: rgba(22, 22, 22, .5); --cds-shell: #161616; --cds-support-info: #0043ce;
  --cds-tag-gray-bg: #e0e0e0; --cds-tag-gray-text: #161616; --cds-tag-blue-bg: #d0e2ff; --cds-tag-blue-text: #0043ce; --cds-tag-teal-bg: #9ef0f0; --cds-tag-teal-text: #004144; --cds-tag-purple-bg: #e8daff; --cds-tag-purple-text: #6929c4; --cds-tag-magenta-bg: #ffd6e8; --cds-tag-magenta-text: #9f1853;
  --wood: #c9b48d; --front: #e6dfd0; --edge: #8d8d8d; --grid: #c6c6c6;
  --font-sans: "IBM Plex Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
  --sp-02: .25rem; --sp-03: .5rem; --sp-04: .75rem; --sp-05: 1rem; --sp-06: 1.5rem; --sp-07: 2rem; --sp-09: 3rem;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--cds-background); color: var(--cds-text-primary); font-family: var(--font-sans); font-size: .875rem; line-height: 1.28572; letter-spacing: .16px; }
button, select, input, textarea { font-family: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }

/* UI Shell header */
.shell { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 4; height: 3rem; background: var(--cds-shell); color: #f4f4f4; display: flex; align-items: center; padding-inline: var(--sp-05); border-bottom: 1px solid #393939; }
.shell .name { font-size: .875rem; font-weight: 600; letter-spacing: .16px; }
.shell .name span { font-weight: 400; margin-left: .35rem; }

.page { position: relative; max-width: 99rem; margin: 0 auto; padding-block: var(--sp-07) var(--sp-09); padding-inline: var(--sp-05); }
@media (min-width: 66rem) { .page { padding-inline: var(--sp-07); } }
h1 { font-size: 2rem; line-height: 1.25; font-weight: 400; letter-spacing: 0; margin: 0 0 var(--sp-06); text-wrap: balance; }

/* Controls: dropdown, content switcher, selectable tags */
.controls { display: flex; flex-wrap: wrap; gap: var(--sp-05) var(--sp-07); align-items: flex-end; margin-bottom: var(--sp-07); }
.controls label { display: grid; gap: var(--sp-03); font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; color: var(--cds-text-secondary); }
select { height: 2.5rem; padding: 0 2.5rem 0 var(--sp-05); border: 0; border-bottom: 1px solid var(--cds-border-strong-01); background: var(--cds-field-01); color: var(--cds-text-primary); font-size: .875rem; border-radius: 0; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cds-icon-primary) 50%), linear-gradient(135deg, var(--cds-icon-primary) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; min-width: 14rem; cursor: pointer; }
select:hover { background-color: var(--cds-layer-hover-01); }
.toggle { display: inline-flex; height: 2.5rem; }
.toggle button { height: 100%; padding: 0 var(--sp-05); border: 1px solid var(--cds-border-strong-01); border-left-width: 0; background: transparent; color: var(--cds-text-secondary); font-size: .875rem; cursor: pointer; }
.toggle button:first-child { border-left-width: 1px; }
.toggle button:hover { background: var(--cds-layer-hover-01); color: var(--cds-text-primary); }
.toggle button.active { background: var(--cds-layer-selected-inverse); border-color: var(--cds-layer-selected-inverse); color: var(--cds-text-inverse); }
.chips { display: inline-flex; flex-wrap: wrap; gap: var(--sp-03); min-height: 2.5rem; align-items: center; }
.chip { height: 1.5rem; padding: 0 var(--sp-03); border: 1px solid var(--cds-border-strong-01); border-radius: .75rem; background: transparent; color: var(--cds-text-primary); font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; cursor: pointer; }
.chip:hover { background: var(--cds-layer-hover-01); }
.chip.active { background: var(--cds-layer-selected-inverse); border-color: var(--cds-layer-selected-inverse); color: var(--cds-text-inverse); }

/* Sections and clickable tiles */
section { margin-bottom: var(--sp-09); }
.sec-head { display: flex; align-items: baseline; gap: var(--sp-03); margin-bottom: var(--sp-05); }
.sec-head h2 { font-size: 1.25rem; line-height: 1.4; font-weight: 400; letter-spacing: 0; margin: 0; }
.sec-head span { font-size: .75rem; color: var(--cds-text-secondary); letter-spacing: .32px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--sp-05); }
.card { display: grid; grid-template-rows: auto 1fr; background: var(--cds-layer-01); border: 0; border-radius: 0; overflow: hidden; cursor: pointer; text-align: left; padding: 0; color: inherit; min-width: 0; transition: background-color 110ms; }
.card:hover { background: var(--cds-layer-hover-01); }
.view { aspect-ratio: 4 / 3; max-width: 100%; position: relative; }
.badge { position: absolute; left: var(--sp-05); top: var(--sp-05); height: 1.5rem; display: inline-flex; align-items: center; padding: 0 var(--sp-03); border-radius: .75rem; font-size: .75rem; letter-spacing: .32px; background: var(--cds-tag-gray-bg); color: var(--cds-tag-gray-text); }
.badge.tall { background: var(--cds-tag-blue-bg); color: var(--cds-tag-blue-text); } .badge.wall { background: var(--cds-tag-teal-bg); color: var(--cds-tag-teal-text); } .badge.open { background: var(--cds-tag-purple-bg); color: var(--cds-tag-purple-text); } .badge.drawer { background: var(--cds-tag-magenta-bg); color: var(--cds-tag-magenta-text); }
.meta { padding: var(--sp-05); display: grid; gap: var(--sp-02); min-width: 0; }
.meta h3 { margin: 0 0 var(--sp-02); font-size: 1rem; line-height: 1.375; font-weight: 600; letter-spacing: 0; }
.dims, .spec { font-size: .75rem; line-height: 1.33333; letter-spacing: .32px; color: var(--cds-text-secondary); font-variant-numeric: tabular-nums; }
.dims { font-family: var(--font-mono); letter-spacing: 0; }
.price { margin-top: var(--sp-03); font-size: 1.25rem; line-height: 1.4; font-weight: 400; color: var(--cds-text-primary); font-variant-numeric: tabular-nums; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 5; background: var(--cds-overlay); display: grid; place-items: center; padding: var(--sp-05); }
.sheet { width: min(84vw, 96rem); max-height: 100%; overflow: hidden; background: var(--cds-layer-01); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.sheet .stage { min-width: 0; background: var(--cds-layer-02); align-self: start; }
.sheet .view { aspect-ratio: 4 / 3; cursor: grab; }
.sheet .view:active { cursor: grabbing; }
.sheet .side { padding: 0 var(--sp-05) var(--sp-07); display: grid; gap: var(--sp-05); align-content: start; min-width: 0; min-height: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.sheet .head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-05); margin-inline: calc(-1 * var(--sp-05)); padding: var(--sp-05) 0 var(--sp-05) var(--sp-05); }
.sheet h3 { font-size: 1.25rem; line-height: 1.4; font-weight: 400; margin: 0; padding-top: var(--sp-03); }
.close { width: 3rem; height: 3rem; flex: none; border: 0; background: transparent; color: var(--cds-icon-primary); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.close:hover { background: var(--cds-layer-hover-01); }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-05); }
.kpi { background: var(--cds-layer-02); padding: var(--sp-05); min-width: 0; min-height: 4rem; }
.kpi small { display: block; font-size: .75rem; letter-spacing: .32px; color: var(--cds-text-secondary); margin-bottom: var(--sp-03); }
.kpi b { font-size: 1rem; line-height: 1.375; font-weight: 400; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi.price b { font-size: 1.25rem; }
fieldset { border: 0; border-top: 1px solid var(--cds-border-subtle-01); padding: var(--sp-05) 0 0; margin: 0; display: grid; gap: var(--sp-05); min-width: 0; }
legend { font-size: .75rem; letter-spacing: .32px; color: var(--cds-text-secondary); padding: 0; padding-right: var(--sp-03); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-03) var(--sp-05); font-size: .875rem; }
.row > span:first-child, .row .lbl { min-width: 3rem; font-size: .75rem; letter-spacing: .32px; color: var(--cds-text-secondary); }
.row input[type="range"] { flex: 1 1 8rem; min-width: 0; height: 2.5rem; margin: 0; accent-color: var(--cds-interactive); }
.row output { display: inline-flex; align-items: center; justify-content: flex-end; height: 2.5rem; min-width: 5.5rem; padding: 0 var(--sp-05); background: var(--cds-field-02); border-bottom: 1px solid var(--cds-border-strong-01); font-family: var(--font-mono); font-size: .875rem; font-variant-numeric: tabular-nums; }
.row label { display: inline-flex; align-items: center; gap: var(--sp-03); font-size: .875rem; }
input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--cds-layer-selected-inverse); }
.step { display: inline-flex; height: 2.5rem; background: var(--cds-field-02); border-bottom: 1px solid var(--cds-border-strong-01); }
.step button { width: 2.5rem; height: 100%; border: 0; background: transparent; color: var(--cds-icon-primary); font-size: 1rem; cursor: pointer; }
.step button:hover { background: var(--cds-layer-hover-01); }
.step button:disabled { color: var(--cds-text-placeholder); cursor: not-allowed; background: transparent; }
.step b { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; padding: 0 var(--sp-03); font-family: var(--font-mono); font-weight: 400; font-size: .875rem; font-variant-numeric: tabular-nums; }
.row select { min-width: 10rem; background-color: var(--cds-field-02); }
.seg-chips { min-height: 0; }
.matbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--sp-05); align-items: end; margin-bottom: var(--sp-05); }
.matbar label { display: grid; gap: var(--sp-03); font-size: .75rem; letter-spacing: .32px; color: var(--cds-text-secondary); min-width: 0; }
.matbar select, .matbar input[type="search"], .matbar input[type="number"] { width: 100%; min-width: 0; }
input[type="number"] { height: 2.5rem; padding: 0 var(--sp-05); border: 0; border-bottom: 1px solid var(--cds-border-strong-01); background: var(--cds-field-01); color: var(--cds-text-primary); font-size: .875rem; border-radius: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
input[type="search"] { height: 2.5rem; padding: 0 var(--sp-05); border: 0; border-bottom: 1px solid var(--cds-border-strong-01); background: var(--cds-field-01); color: var(--cds-text-primary); font-size: .875rem; border-radius: 0; -webkit-appearance: none; }
.matinfo { display: flex; align-items: center; gap: var(--sp-05); padding: var(--sp-03) 0 var(--sp-05); border-bottom: 1px solid var(--cds-border-subtle-01); margin-bottom: var(--sp-07); min-width: 0; }
.swatch { width: 3rem; height: 3rem; flex: none; background: var(--cds-layer-02); object-fit: cover; }
.matinfo .t { display: grid; gap: 2px; min-width: 0; }
.matinfo .t b { font-weight: 600; font-size: .875rem; }
.matinfo .t span { font-size: .75rem; letter-spacing: .32px; color: var(--cds-text-secondary); }
.matinfo .t a { color: var(--cds-link-primary); text-decoration: none; }
.matinfo .t a:hover { text-decoration: underline; }
.matinfo .p { margin-left: auto; font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.matinfo .p small { display: block; font-size: .7rem; color: var(--cds-text-secondary); white-space: normal; max-width: 18rem; }
.sheet .matbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sheet .matinfo { margin-bottom: 0; }
.gridmap { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 3px; width: 100%; max-height: 15rem; min-height: 4rem; overflow: hidden; background: var(--cds-border-subtle-01); padding: 3px; }
.gridmap .gcol { display: flex; flex-direction: column-reverse; gap: 3px; min-width: 0; min-height: 0; }
.gridmap .gcell { border: 0; background: var(--cds-layer-02); color: var(--cds-text-primary); font-size: .7rem; line-height: 1.2; letter-spacing: 0; padding: 2px; min-height: 1.6rem; cursor: pointer; overflow: hidden; text-align: center; }
.gridmap .gcell:hover { background: var(--cds-layer-hover-01); }
.gridmap .gcell.active { background: var(--cds-interactive); color: var(--cds-text-on-color); }
.gridhint { font-size: .75rem; letter-spacing: .32px; color: var(--cds-text-secondary); }
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 40rem) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-05); }
.trio label { display: grid; gap: var(--sp-03); font-size: .75rem; letter-spacing: .32px; color: var(--cds-text-secondary); }
.trio .step { width: 100%; justify-content: space-between; }
.trio .step b { flex: 1; }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-03); align-items: center; }
.btn { height: 2.5rem; padding: 0 var(--sp-05); border: 1px solid var(--cds-button-tertiary); background: transparent; color: var(--cds-button-tertiary); font-size: .875rem; text-align: left; cursor: pointer; border-radius: 0; }
.btn:hover { background: var(--cds-button-tertiary); color: var(--cds-text-inverse); }
.btn:disabled { border-color: var(--cds-border-subtle-01); color: var(--cds-text-placeholder); background: transparent; cursor: not-allowed; }
.btn.primary { background: var(--cds-button-primary); border-color: var(--cds-button-primary); color: var(--cds-text-on-color); }
.btn.primary:hover { background: var(--cds-button-primary-hover); }
.status { font-size: .75rem; letter-spacing: .32px; color: var(--cds-text-secondary); }
details { border-top: 1px solid var(--cds-border-subtle-01); }
details:last-of-type { border-bottom: 1px solid var(--cds-border-subtle-01); }
summary { display: flex; align-items: center; min-height: 2.5rem; padding: 0 var(--sp-05) 0 0; font-size: .875rem; color: var(--cds-text-primary); cursor: pointer; list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: .35rem; width: .5rem; height: .5rem; border-right: 1.5px solid var(--cds-icon-primary); border-bottom: 1.5px solid var(--cds-icon-primary); transform: rotate(45deg); transition: transform 110ms; }
details[open] summary::after { transform: rotate(-135deg); }
summary:hover { background: var(--cds-layer-hover-01); }
details > :not(summary) { padding-bottom: var(--sp-05); }
table { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
thead th { background: var(--cds-layer-accent-01); color: var(--cds-text-primary); font-weight: 600; height: 2rem; text-align: left; padding: 0 var(--sp-05); }
td { height: 2rem; padding: 0 var(--sp-05); border-bottom: 1px solid var(--cds-border-subtle-01); color: var(--cds-text-secondary); }
td:first-child { color: var(--cds-text-primary); }
td.n, th.n { text-align: right; font-family: var(--font-mono); letter-spacing: 0; }
.table-wrap { overflow-x: auto; }
textarea { width: 100%; min-height: 8rem; font-family: var(--font-mono); font-size: .75rem; background: var(--cds-field-02); color: var(--cds-text-primary); border: 0; border-bottom: 1px solid var(--cds-border-strong-01); border-radius: 0; padding: var(--sp-04) var(--sp-05); resize: vertical; }
@media (max-width: 66rem) { .sheet { width: 100%; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } .sheet .stage { position: sticky; top: 0; z-index: 1; } }
@media (prefers-reduced-motion: reduce) { .card, summary::after { transition: none; } }