:root {
  color-scheme: light;
  --blue: #1267e8;
  --blue-dark: #0d55c5;
  --blue-soft: #eef5ff;
  --ink: #172033;
  --muted: #667085;
  --soft-muted: #98a2b3;
  --line: #e1e6ee;
  --surface: #ffffff;
  --canvas: #f7f9fc;
  --success: #20a66a;
  --shadow: 0 2px 8px rgba(22, 32, 51, .04), 0 12px 30px rgba(22, 32, 51, .04);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; overflow-x: hidden; background: var(--canvas); }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--canvas); font-size: 14px; }
button, input, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

.designer-topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  height: 65px; padding: 0 30px;
  background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.designer-brand { display: inline-flex; align-items: center; gap: 16px; font-size: 23px; font-weight: 750; letter-spacing: -.025em; }
.designer-brand svg { width: 34px; height: 34px; fill: none; stroke: var(--ink); stroke-width: 1.8; }
.topbar-actions, .topbar-link, .account-button { display: flex; align-items: center; }
.topbar-actions { gap: 27px; }
.topbar-link, .account-button { gap: 10px; border: 0; background: transparent; color: #344054; cursor: pointer; }
.topbar-link svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.circle-icon { display: grid; place-items: center; width: 23px; height: 23px; border: 1.5px solid #475467; border-radius: 50%; font-weight: 700; }
.topbar-separator { height: 30px; border-left: 1px solid var(--line); }
.account-avatar { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff 0 17%, transparent 18%), radial-gradient(circle at 50% 95%, #fff 0 34%, transparent 35%), #d0d5dd; }
.account-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.designer-shell { display: grid; grid-template-columns: 260px minmax(640px, 1fr) 350px; min-height: calc(100vh - 65px); }
.designer-sidebar, .project-overview { background: var(--surface); }
.designer-sidebar { position: sticky; top: 65px; align-self: start; height: calc(100vh - 65px); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.project-identity { min-height: 108px; padding: 31px 24px 21px; border-bottom: 1px solid var(--line); }
.project-identity > span { display: block; margin-bottom: 7px; color: var(--muted); }
.project-identity strong { display: inline-block; max-width: 175px; font-size: 16px; }
.project-identity button { margin-left: 7px; padding: 2px; border: 0; background: none; cursor: pointer; color: var(--muted); vertical-align: middle; }
.project-identity button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.sidebar-nav { padding: 12px 0; }
.sidebar-nav a, .sidebar-nav button { position: relative; width: 100%; min-height: 58px; padding: 0 25px; display: flex; align-items: center; gap: 18px; color: #475467; border: 0; background: none; cursor: pointer; text-align: left; }
.sidebar-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.sidebar-nav .active { color: var(--blue); background: linear-gradient(90deg, #f0f6ff, #eaf3ff); font-weight: 700; }
.sidebar-nav .active::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--blue); border-radius: 0 4px 4px 0; }
.sidebar-tip { margin: auto 20px 40px; padding: 19px 15px; border: 1px solid var(--line); border-radius: 12px; display: grid; grid-template-columns: 35px 1fr; gap: 12px; background: #fbfcfe; box-shadow: 0 8px 24px rgba(23,32,51,.03); }
.tip-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--blue); border: 1.5px solid var(--blue); border-radius: 9px; font-weight: 800; }
.sidebar-tip strong { display: block; margin: 2px 0 6px; }
.sidebar-tip p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

.designer-main { min-width: 0; }
.main-inner { max-width: 1080px; margin: 0 auto; padding: 27px 28px 30px; }
.main-inner > h1 { margin: 0 0 25px 38px; font-size: clamp(25px, 2vw, 32px); line-height: 1.15; letter-spacing: -.035em; }
.wizard-stepper { margin: 0 12px 28px; }
.wizard-stepper ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); list-style: none; }
.wizard-stepper li { position: relative; min-width: 0; text-align: center; }
.wizard-stepper li::before, .wizard-stepper li::after { content: ""; position: absolute; z-index: 0; top: 20px; height: 2px; width: 50%; background: #d7dce4; }
.wizard-stepper li::before { left: 0; }.wizard-stepper li::after { right: 0; }
.wizard-stepper li:first-child::before, .wizard-stepper li:last-child::after { display: none; }
.wizard-stepper li.is-before::after, .wizard-stepper li.step-state-completed::before, .wizard-stepper li.step-state-current::before { background: var(--blue); }
.wizard-stepper a, .wizard-stepper li > span { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wizard-stepper b { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #d0d5dd; border-radius: 50%; background: #eceef1; font-size: 20px; font-weight: 600; color: #344054; box-shadow: 0 2px 4px rgba(0,0,0,.03); }
.wizard-stepper em { max-width: 130px; color: #475467; font-style: normal; white-space: nowrap; font-size: 12px; }
.wizard-stepper .step-state-current b { color: white; background: var(--blue); border-color: var(--blue); box-shadow: 0 5px 14px rgba(18,103,232,.22); }
.wizard-stepper .step-state-current em { color: var(--blue); font-weight: 700; }
.wizard-stepper .step-state-completed b { color: white; background: var(--success); border-color: var(--success); }

.wizard-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }
.wizard-card-heading { display: flex; gap: 16px; align-items: flex-start; padding: 24px 26px 20px; }
.wizard-card-heading.compact { padding-bottom: 19px; }
.wizard-card-heading p { margin: 0 0 4px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.wizard-card-heading h2 { margin: 0; font-size: 23px; line-height: 1.1; letter-spacing: -.02em; }
.wizard-card-heading div > span { display: block; max-width: 650px; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.section-symbol { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; color: var(--blue); border: 2px solid var(--blue); border-radius: 10px; font-size: 19px; }

.basics-form { padding: 10px 32px 30px; }
.basics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: grid; gap: 7px; margin-bottom: 22px; }
.form-field > span, .area-field legend { font-weight: 700; }
.form-field input, .form-field select { width: 100%; height: 44px; padding: 0 13px; border: 1px solid #cfd6df; border-radius: 7px; background: white; outline: none; }
.form-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,103,232,.12); }
.form-field select:disabled { opacity: 1; color: #344054; background: #f7f9fc; }
.form-field small, .area-field p { color: var(--muted); font-size: 11px; }
.area-field { margin: 0 0 22px; padding: 0; border: 0; }
.range-row { display: grid; grid-template-columns: 1fr 90px; gap: 20px; align-items: center; margin: 15px 0 6px; }
.range-row input { width: 100%; accent-color: var(--blue); }
.range-row output { padding: 11px 12px; color: white; background: var(--ink); border-radius: 8px; text-align: center; font-weight: 750; }
.principle-note { display: flex; gap: 12px; padding: 16px; border: 1px solid #cfe0f8; border-radius: 9px; background: var(--blue-soft); }
.principle-note > span { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--blue); border-radius: 50%; color: var(--blue); font-weight: 800; }
.principle-note p { margin: 0; color: #475467; line-height: 1.45; }.principle-note strong { color: var(--ink); }

.envelope-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fafbfc; }
.envelope-tabs button { position: relative; min-height: 62px; border: 0; border-right: 1px solid var(--line); background: transparent; color: #475467; cursor: pointer; font-size: 15px; }
.envelope-tabs button:last-child { border-right: 0; }
.envelope-tabs button span { margin-right: 8px; font-size: 19px; vertical-align: -1px; }
.envelope-tabs button[aria-selected="true"] { color: var(--blue); background: white; font-weight: 750; }
.envelope-tabs button[aria-selected="true"]::before { content: ""; position: absolute; inset: -1px 0 auto; height: 3px; background: var(--blue); }
.envelope-panel { display: grid; grid-template-columns: minmax(470px, 1.13fr) minmax(350px, .87fr); min-height: 500px; }
.envelope-editor { min-width: 0; padding: 22px 23px 21px; border-right: 1px solid var(--line); }
.panel-intro { display: grid; gap: 4px; margin: 0 0 18px; padding: 12px 14px; border-radius: 8px; background: #f7f9fc; }.panel-intro span { color: var(--muted); font-size: 11px; }
.intent-group { min-width: 0; margin: 0 0 17px; padding: 0; border: 0; }
.intent-group legend { margin-bottom: 8px; padding: 0; font-size: 12px; font-weight: 700; }
.mini-info { position: relative; width: 16px; height: 16px; margin-left: 4px; padding: 0; color: #98a2b3; border: 1px solid #b7c0cc; border-radius: 50%; background: white; font-size: 10px; font-weight: 800; cursor: help; vertical-align: 1px; }
.mini-info::after { content: attr(data-info); position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 8px); width: 230px; padding: 9px 10px; border-radius: 7px; color: white; background: var(--ink); font-weight: 500; line-height: 1.35; text-align: left; opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: .15s; pointer-events: none; }
.mini-info:hover::after, .mini-info:focus::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.segmented-options { display: flex; flex-wrap: wrap; gap: 8px; }
.segmented-options label { flex: 1 1 110px; min-width: 0; cursor: pointer; }
.segmented-options input { position: absolute; opacity: 0; pointer-events: none; }
.segmented-options span { min-height: 35px; padding: 7px 10px; display: grid; place-items: center; border: 1px solid #cfd6df; border-radius: 6px; background: white; color: #344054; font-size: 11px; line-height: 1.15; text-align: center; transition: border-color .15s, background .15s, box-shadow .15s; }
.segmented-options input:checked + span { color: var(--blue); border-color: var(--blue); background: var(--blue-soft); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(18,103,232,.08); }
.segmented-options input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.four-options label { flex-basis: 90px; }
.compact-intent-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compact-intent-pair .segmented-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.compact-intent-pair .segmented-options label { min-width: 0; }
.compact-intent-pair .segmented-options span { height: 45px; padding: 5px 3px; font-size: 9px; }
.choice-cards { display: grid; gap: 8px; }.compact-choice-cards { grid-template-columns: 1fr 1fr; }
.choice-cards input { position: absolute; opacity: 0; }
.choice-cards label > span { display: grid; gap: 4px; min-height: 66px; padding: 12px; border: 1px solid #cfd6df; border-radius: 8px; cursor: pointer; }
.choice-cards small { color: var(--muted); font-size: 10px; line-height: 1.35; }.choice-cards input:checked + span { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.envelope-visual { min-width: 0; margin: 0; padding: 28px 20px 18px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(145deg, #fff, #f8fafc); }
.envelope-visual img { width: 100%; max-height: 390px; object-fit: contain; }
.envelope-visual figcaption { margin-top: 5px; color: var(--muted); font-size: 11px; font-style: italic; text-align: center; }
.form-status { min-height: 0; margin: 0; padding: 0 24px; color: var(--muted); font-size: 12px; }.form-status:not(:empty) { min-height: 42px; padding-top: 12px; border-top: 1px solid var(--line); }.form-status.is-error { color: #b42318; }.form-status.is-success { color: #087443; }

.design-equipment-form { border-top: 1px solid var(--line); }
.design-drift-note { display: grid; gap: 4px; padding: 13px 22px; color: #7a4b16; border-bottom: 1px solid #e5b47b; background: #fff8ef; }.design-drift-note strong { font-size: 11px; }.design-drift-note span { font-size: 10px; }
.bound-context { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.bound-context > div { padding: 16px 22px; background: #f8fafc; }
.context-kicker { display: block; margin-bottom: 5px; color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bound-context strong { font-size: 13px; }.bound-context p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.design-workspace { display: grid; grid-template-columns: minmax(480px, 1.35fr) minmax(290px, .65fr); align-items: start; }
.design-choice-column { padding: 22px; border-right: 1px solid var(--line); }
.design-dimension { margin: 0 0 22px; padding: 0; border: 0; }.design-dimension:last-child { margin-bottom: 0; }
.design-dimension legend { margin-bottom: 9px; padding: 0; font-size: 12px; font-weight: 750; }
.design-option-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }.design-option-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.design-option-card { min-width: 0; cursor: pointer; }.design-option-card input { position: absolute; opacity: 0; pointer-events: none; }
.design-option-card > span { display: flex; }.design-option-card { display: flex; min-height: 91px; padding: 7px; flex-direction: column; gap: 7px; border: 1px solid #d4dae2; border-radius: 8px; background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.design-option-card:hover { transform: translateY(-1px); border-color: #aab7c7; }.design-option-card:has(input:checked) { border-color: var(--blue); background: #f7faff; box-shadow: inset 0 0 0 1px var(--blue), 0 3px 10px rgba(18,103,232,.08); }
.design-option-card:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.option-swatch { height: 20px; overflow: hidden; border-radius: 4px; }.option-swatch i { flex: 1; }.option-swatch i:nth-child(1) { background: var(--swatch-1); }.option-swatch i:nth-child(2) { background: var(--swatch-2); }.option-swatch i:nth-child(3) { background: var(--swatch-3); }.option-swatch i:nth-child(4) { background: var(--swatch-4); }
.option-copy { display: grid !important; gap: 3px; }.option-copy strong { font-size: 10px; line-height: 1.25; }.option-copy small { color: var(--muted); font-size: 8px; line-height: 1.3; }
.design-live-profile { position: sticky; top: 86px; min-height: 520px; padding: 24px; background: linear-gradient(155deg, #fff, #f7f9fc); }
.mood-composition { --mood-1:#f2eee8; --mood-2:#d8c8b4; --mood-3:#8b8277; --mood-4:#34403e; height: 190px; display: grid; grid-template-columns: 1.35fr .65fr; grid-template-rows: 1fr .72fr; gap: 7px; margin-bottom: 20px; }
.mood-composition span { border-radius: 9px; }.mood-composition span:nth-child(1) { grid-row: 1 / 3; background: linear-gradient(145deg, var(--mood-1), var(--mood-2)); }.mood-composition span:nth-child(2) { background: var(--mood-3); }.mood-composition span:nth-child(3) { background: linear-gradient(135deg, var(--mood-2), var(--mood-1)); }.mood-composition span:nth-child(4) { position: absolute; width: 48px; height: 48px; margin: 120px 0 0 20px; border: 8px solid rgba(255,255,255,.82); background: var(--mood-4); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.design-live-profile h3 { margin: 0 0 7px; font-size: 19px; }.design-live-profile > p:not(.context-kicker) { margin: 0 0 17px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.impact-list { margin: 0 0 18px; display: grid; gap: 7px; }.impact-list div { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }.impact-list dt { color: var(--muted); font-size: 10px; }.impact-list dd { margin: 0; font-size: 10px; font-weight: 750; }
.design-boundary-note, .design-conflict-preview, .saved-conflict-note { padding: 12px; border-radius: 8px; }.design-boundary-note { border: 1px solid #dbe4e0; background: #f1f6f4; }.design-boundary-note strong, .design-boundary-note span { display: block; }.design-boundary-note strong { margin-bottom: 3px; font-size: 10px; }.design-boundary-note span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.design-conflict-preview, .saved-conflict-note { margin-top: 12px; border: 1px solid #e5b47b; background: #fff8ef; }.design-conflict-preview > span, .saved-conflict-note > span { display: block; margin-bottom: 5px; color: #a55b13; font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }.design-conflict-preview strong, .saved-conflict-note strong { font-size: 10px; }.design-conflict-preview p, .saved-conflict-note p { margin: 5px 0 0; color: #76502b; font-size: 9px; line-height: 1.45; }
.prerequisite-actions { display: flex; justify-content: center; gap: 10px; }.detail-action.secondary { color: var(--blue); border: 1px solid var(--blue); background: white; }

.budget-review-form { border-top: 1px solid var(--line); }.six-step-review { padding: 20px 23px; border-bottom: 1px solid var(--line); background: #fafbfc; }
.review-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 13px; }.review-section-heading span { color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.review-section-heading h3 { margin: 3px 0 0; font-size: 18px; }.review-section-heading > strong { padding: 7px 10px; color: #087443; border-radius: 99px; background: #e9f7ef; font-size: 10px; }
.review-step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.review-step-item { min-width: 0; min-height: 63px; padding: 9px; display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; border: 1px solid #dfe4e9; border-radius: 7px; background: white; }.review-step-item > b { width: 24px; height: 24px; display: grid; place-items: center; color: white; border-radius: 50%; background: var(--success); font-size: 10px; }.review-step-item div strong, .review-step-item div span { display: block; }.review-step-item div strong { font-size: 10px; }.review-step-item div span { margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.3; }.review-step-item a, .review-step-item em { color: var(--blue); font-size: 8px; font-style: normal; font-weight: 700; }.review-step-item.has-ux-debt { border-color: #dfc58e; }.review-step-item.has-ux-debt > b { background: #bd7b27; }
.review-correction-grid { max-width: 680px; margin: 25px auto 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }.review-correction-grid a { padding: 10px 7px; display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 7px; background: white; }.review-correction-grid b { color: var(--blue); }.review-correction-grid span { font-size: 9px; }.review-correction-grid em { color: var(--muted); font-size: 8px; font-style: normal; }
.budget-workspace { display: grid; grid-template-columns: minmax(510px, 1.3fr) minmax(280px, .7fr); align-items: start; }.budget-input-column { padding: 23px; border-right: 1px solid var(--line); }.budget-input-column fieldset { margin: 0 0 23px; padding: 0; border: 0; }.budget-input-column legend { margin-bottom: 9px; padding: 0; font-size: 12px; font-weight: 750; }
.budget-state-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.budget-state-options input, .budget-choice-grid input { position: absolute; opacity: 0; pointer-events: none; }.budget-state-options label > span { min-height: 58px; padding: 11px 12px; display: grid; gap: 4px; border: 1px solid #cfd6df; border-radius: 8px; cursor: pointer; }.budget-state-options small, .budget-choice-grid small { color: var(--muted); font-size: 9px; line-height: 1.35; }.budget-state-options input:checked + span, .budget-choice-grid input:checked + span { color: var(--blue); border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.budget-number-row { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; transition: opacity .15s; }.budget-number-row.is-disabled { opacity: .42; }.budget-number-row label > span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; }.budget-number-row label > div { height: 40px; display: flex; align-items: center; border: 1px solid #cfd6df; border-radius: 7px; background: white; }.budget-number-row input { min-width: 0; width: 100%; height: 100%; padding: 0 10px; border: 0; outline: 0; background: transparent; }.budget-number-row em { padding-right: 10px; color: var(--muted); font-size: 9px; font-style: normal; }.budget-corridor-fieldset > p, .priority-order-fieldset > p { margin: 7px 0 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.budget-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.budget-choice-grid label > span { min-height: 112px; padding: 10px; display: grid; align-content: start; gap: 4px; border: 1px solid #cfd6df; border-radius: 8px; cursor: pointer; }.budget-choice-grid strong { font-size: 10px; line-height: 1.25; }.budget-choice-grid em { margin-top: 4px; color: #6b5b49; font-size: 8px; font-style: normal; line-height: 1.35; }
.budget-priority-list { margin: 12px 0 0; padding: 0; display: grid; gap: 6px; list-style: none; }.budget-priority-list li { min-height: 48px; padding: 7px 8px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; border: 1px solid #d9dfe6; border-radius: 7px; background: white; }.budget-priority-list li > b { width: 25px; height: 25px; display: grid; place-items: center; color: var(--blue); border-radius: 50%; background: var(--blue-soft); font-size: 10px; }.budget-priority-list li span strong, .budget-priority-list li span small { display: block; }.budget-priority-list li span strong { font-size: 10px; }.budget-priority-list li span small { margin-top: 2px; color: var(--muted); font-size: 8px; }.budget-priority-list li div { display: flex; gap: 3px; }.budget-priority-list button { width: 27px; height: 27px; padding: 0; border: 1px solid #cfd6df; border-radius: 5px; background: white; cursor: pointer; }.budget-priority-list button:disabled { opacity: .3; cursor: default; }
.review-confirmation { padding: 13px; display: grid; grid-template-columns: 20px 1fr; gap: 10px; border: 1px solid #bed5f5; border-radius: 8px; background: #f5f9ff; cursor: pointer; }.review-confirmation input { margin-top: 2px; accent-color: var(--blue); }.review-confirmation strong, .review-confirmation small { display: block; }.review-confirmation strong { font-size: 10px; }.review-confirmation small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.budget-result-column { position: sticky; top: 86px; padding: 22px; display: grid; gap: 12px; }.budget-readiness-card, .budget-conflict-card, .calculation-lock-card { padding: 17px; border: 1px solid var(--line); border-radius: 9px; background: white; }.budget-readiness-card h3, .budget-conflict-card h3, .calculation-lock-card h3 { margin: 3px 0 7px; font-size: 16px; }.budget-readiness-card p, .budget-conflict-card p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }.budget-display { margin-top: 12px; padding: 9px 10px; display: block; color: #0c6843; border-radius: 6px; background: #eaf7f0; font-size: 11px; }
.budget-conflict-card { border-color: #e5b47b; background: #fff8ef; }.budget-conflict-card > span { color: #a55b13; font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }.budget-conflict-card ul, .calculation-lock-card ul { margin: 9px 0 0; padding-left: 16px; color: #76502b; font-size: 8px; line-height: 1.5; }
.calculation-lock-card { display: grid; grid-template-columns: 33px 1fr; column-gap: 10px; background: #f6f7f9; }.lock-symbol { width: 31px; height: 31px; display: grid; place-items: center; color: #667085; border-radius: 50%; background: #e5e8ed; font-size: 17px; }.calculation-lock-card ul, .calculation-lock-card button { grid-column: 1 / -1; }.calculation-lock-card ul { color: var(--muted); }.calculation-lock-card button { min-height: 41px; margin-top: 12px; border: 0; border-radius: 6px; color: #98a2b3; background: #e1e4e9; font-weight: 750; }

/* Shared customer shell for the released comfort and space-program domains. */
.customer-shell-form { border-top: 1px solid var(--line); }
.customer-shell-workspace { display: grid; grid-template-columns: minmax(500px, 1.3fr) minmax(300px, .7fr); align-items: start; }
.customer-choice-column { min-width: 0; padding: 22px; border-right: 1px solid var(--line); }
.shell-intro-note { margin-bottom: 18px; padding: 12px 14px; display: grid; grid-template-columns: 23px 1fr; gap: 10px; border: 1px solid #cfe0f8; border-radius: 8px; background: #f5f9ff; }
.shell-intro-note > span { width: 21px; height: 21px; display: grid; place-items: center; color: var(--blue); border: 1px solid var(--blue); border-radius: 50%; font-size: 10px; font-weight: 800; }
.shell-intro-note p { margin: 1px 0 0; color: #475467; font-size: 10px; line-height: 1.45; }
.comfort-dimension-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shell-choice-fieldset { min-width: 0; margin: 0; padding: 13px; border: 1px solid #d9e0e8; border-radius: 9px; background: #fff; }
.shell-choice-fieldset legend { padding: 0 3px; font-size: 11px; font-weight: 750; }
.shell-choice-fieldset > p { min-height: 30px; margin: 0 0 9px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.shell-choice-options { display: grid; gap: 5px; }.shell-choice-options.horizontal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shell-choice-options label { min-width: 0; cursor: pointer; }.shell-choice-options input { position: absolute; opacity: 0; pointer-events: none; }
.shell-choice-options label > span { min-height: 54px; padding: 8px 9px; display: grid; align-content: center; gap: 3px; border: 1px solid #d3dae3; border-radius: 7px; background: white; transition: border-color .15s, background .15s, box-shadow .15s; }
.shell-choice-options strong, .shell-choice-options small { display: block; }.shell-choice-options strong { font-size: 9px; line-height: 1.25; }.shell-choice-options small { color: var(--muted); font-size: 7px; line-height: 1.35; }
.shell-choice-options input:checked + span { color: var(--blue); border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px rgba(18,103,232,.12); }.shell-choice-options input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.conditional-comfort-stack { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.conditional-shell-question { border-color: #e4d5bd; background: #fffbf5; }
.customer-result-column { position: sticky; top: 86px; padding: 22px; display: grid; gap: 12px; background: linear-gradient(155deg, #fff, #f7f9fc); }
.shell-result-card, .shell-details, .shell-conflict-list, .shell-proposal-list { padding: 17px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.shell-result-card h3, .shell-proposal-list h3 { margin: 3px 0 7px; font-size: 18px; line-height: 1.2; }.shell-result-card > p, .shell-proposal-list p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }.primary-result { border-color: #c7d9f3; background: linear-gradient(145deg, #f8fbff, #eef5ff); }
.comfort-band-grid { margin-top: 14px; display: grid; gap: 5px; }.comfort-band-grid article { padding: 8px; display: grid; grid-template-columns: 24px 1fr; gap: 2px 8px; align-items: center; border: 1px solid #dbe5f3; border-radius: 6px; background: rgba(255,255,255,.82); }.comfort-band-grid article > span { grid-row: 1 / 3; width: 22px; height: 22px; display: grid; place-items: center; color: white; border-radius: 50%; background: var(--blue); font-size: 8px; }.comfort-band-grid strong { font-size: 9px; }.comfort-band-grid small { color: var(--muted); font-size: 7px; }
.shell-details summary { cursor: pointer; font-size: 10px; font-weight: 750; }.shell-impact-list { margin-top: 11px; display: grid; gap: 7px; }.shell-impact-list article { padding: 9px; border-radius: 6px; background: #f7f9fc; }.shell-impact-list strong { font-size: 9px; }.shell-impact-list p { margin: 3px 0 0; color: var(--muted); font-size: 8px; line-height: 1.45; }.shell-impact-list .open-evidence { border-left: 3px solid #d59645; background: #fff9f1; }
.comfort-orbit { position: relative; height: 155px; margin-bottom: 15px; border-radius: 9px; background: radial-gradient(circle at center, #fff 0 22%, transparent 23%), radial-gradient(circle at center, transparent 0 36%, #cfe0f8 37% 38%, transparent 39% 53%, #dce9fa 54% 55%, transparent 56%), #f5f9ff; }.comfort-orbit i { position: absolute; width: 15px; height: 15px; border: 4px solid white; border-radius: 50%; background: var(--blue); box-shadow: 0 2px 8px rgba(18,103,232,.2); }.comfort-orbit i:nth-child(1) { left: 25%; top: 29%; }.comfort-orbit i:nth-child(2) { right: 20%; top: 50%; }.comfort-orbit i:nth-child(3) { left: 46%; bottom: 16%; }
.shell-conflict-list, .shell-proposal-list { border-color: #e5b47b; background: #fffaf4; }.shell-conflict-card + .shell-conflict-card { margin-top: 11px; padding-top: 11px; border-top: 1px solid #ead4b9; }.shell-conflict-card h4 { margin: 0 0 5px; font-size: 11px; }.shell-conflict-card > p, .shell-conflict-card li, .shell-proposal-list li { color: #76502b; font-size: 8px; line-height: 1.45; }.shell-conflict-card ul, .shell-proposal-list ul { padding-left: 17px; }.shell-conflict-card > div { display: grid; gap: 5px; }.shell-conflict-card button, .shell-proposal-list button { padding: 9px; display: grid; gap: 3px; border: 1px solid #dcb888; border-radius: 6px; background: white; cursor: pointer; text-align: left; }.shell-conflict-card button strong { font-size: 8px; }.shell-conflict-card button span { color: var(--muted); font-size: 7px; }.shell-prerequisite { min-height: 390px; display: grid; place-items: center; align-content: center; }

.space-shell-inputs { padding: 22px; }.space-program-questions, .space-priority-section, .space-relation-section { margin-bottom: 24px; }.space-program-questions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.space-program-questions > .review-section-heading { grid-column: 1 / -1; }
.shell-number-field { min-height: 92px; padding: 13px; display: grid; grid-template-columns: 1fr 74px; gap: 12px; align-items: center; border: 1px solid #d9e0e8; border-radius: 9px; background: white; }.shell-number-field span strong, .shell-number-field span small { display: block; }.shell-number-field span strong { font-size: 11px; }.shell-number-field span small { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.4; }.shell-number-field input { width: 100%; height: 42px; padding: 0 8px; border: 1px solid #cfd6df; border-radius: 7px; text-align: center; outline: none; }.shell-number-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18,103,232,.12); }
.shell-priority-list { margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; list-style: none; }.shell-priority-list li { min-height: 50px; padding: 7px 8px; display: grid; grid-template-columns: 27px 1fr auto; gap: 8px; align-items: center; border: 1px solid #d9dfe6; border-radius: 7px; background: white; }.shell-priority-list li > b { width: 25px; height: 25px; display: grid; place-items: center; color: var(--blue); border-radius: 50%; background: var(--blue-soft); font-size: 9px; }.shell-priority-list strong, .shell-priority-list small { display: block; }.shell-priority-list strong { font-size: 9px; }.shell-priority-list small { margin-top: 2px; color: var(--muted); font-size: 7px; }.shell-priority-list li div { display: flex; gap: 3px; }.shell-priority-list button { width: 25px; height: 25px; padding: 0; border: 1px solid #cfd6df; border-radius: 5px; background: white; cursor: pointer; }.shell-priority-list button:disabled { opacity: .3; }
.shell-relation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.shell-relation-grid > label { padding: 9px; display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: center; border: 1px solid #d9dfe6; border-radius: 7px; background: white; }.shell-relation-grid strong, .shell-relation-grid small { display: block; }.shell-relation-grid strong { font-size: 9px; }.shell-relation-grid small { margin-top: 2px; color: var(--muted); font-size: 7px; line-height: 1.3; }.shell-relation-grid select { width: 100%; height: 34px; padding: 0 6px; border: 1px solid #cfd6df; border-radius: 6px; background: white; font-size: 8px; }
.space-shell-results { padding: 22px; border-top: 1px solid var(--line); background: #fafbfc; }.space-summary-result { margin-bottom: 20px; }.room-function-pills { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 5px; }.room-function-pills span { padding: 5px 7px; color: #24518a; border-radius: 99px; background: #fff; font-size: 8px; }
.shell-candidate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }.shell-candidate-card { min-width: 0; padding: 13px; border: 1px solid #d8dfe7; border-radius: 9px; background: white; }.shell-candidate-card.is-preferred { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }.shell-candidate-card header { min-height: 44px; display: flex; justify-content: space-between; gap: 7px; }.shell-candidate-card header span { color: var(--blue); font-size: 7px; font-weight: 800; text-transform: uppercase; }.shell-candidate-card h4 { margin: 3px 0 0; font-size: 12px; }.shell-candidate-card header > b { align-self: start; padding: 4px 6px; color: #087443; border-radius: 99px; background: #e9f7ef; font-size: 6px; }.shell-candidate-card > p { color: var(--muted); font-size: 8px; line-height: 1.4; }
.shell-schematic-canvas { position: relative; height: 150px; margin: 11px 0; border: 1px solid #cfd8e3; border-radius: 6px; background: repeating-linear-gradient(0deg, transparent 0 19px, #edf1f5 20px), repeating-linear-gradient(90deg, transparent 0 19px, #edf1f5 20px), #f9fbfd; }.shell-schematic-canvas > span { position: absolute; padding: 4px; display: grid; place-items: center; overflow: hidden; color: #24518a; border: 1px solid #8db9ee; border-radius: 4px; background: rgba(224,238,255,.9); text-align: center; }.shell-schematic-canvas b { font-size: 6px; line-height: 1.2; }.candidate-summary { min-height: 34px; }.shell-candidate-card details { margin: 9px 0; }.shell-candidate-card summary { cursor: pointer; font-size: 8px; font-weight: 700; }.shell-candidate-card details ul { padding-left: 15px; }.shell-candidate-card details li { margin-bottom: 4px; font-size: 7px; }.shell-candidate-card details li span { display: block; color: var(--muted); }.shell-candidate-card > button { width: 100%; min-height: 34px; padding: 5px; color: var(--blue); border: 1px solid var(--blue); border-radius: 6px; background: white; cursor: pointer; font-size: 8px; font-weight: 750; }.shell-candidate-card > button:disabled { color: #087443; border-color: #93d0b2; background: #e9f7ef; cursor: default; }
.empty-space-result { min-height: 300px; display: grid; grid-template-columns: 280px 1fr; gap: 0 25px; align-items: center; }.empty-space-result .bubble-preview { grid-row: 1 / 4; }.empty-space-result h3 { margin: 0; }.empty-space-result p { margin: 0; }

.handoff-card, .future-card { min-height: 480px; }
.handoff-content { margin: 15px 32px 34px; padding: 35px; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 35px; border-radius: 12px; background: linear-gradient(135deg, #f6f9ff, #edf5ff); }
.handoff-content h3 { margin: 0 0 9px; font-size: 23px; }.handoff-content p { margin: 0 0 22px; color: var(--muted); line-height: 1.6; }
.detail-action { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; padding: 0 17px; color: white; background: var(--blue); border-radius: 7px; font-weight: 700; }.detail-action span { font-size: 20px; }
.handoff-visual { display: flex; justify-content: center; gap: 12px; }.handoff-visual span { width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid #bed5f5; border-radius: 50%; color: var(--blue); background: white; font-size: 26px; }
.bubble-preview { position: relative; min-height: 210px; }.bubble-preview i { position: absolute; display: grid; place-items: center; border: 2px solid var(--blue); border-radius: 50%; color: #24518a; background: rgba(255,255,255,.8); font-style: normal; font-size: 11px; }.bubble-preview i:nth-child(1) { width: 115px; height: 115px; left: 15px; top: 35px; }.bubble-preview i:nth-child(2) { width: 90px; height: 90px; left: 135px; top: 5px; }.bubble-preview i:nth-child(3) { width: 76px; height: 76px; left: 135px; top: 110px; }.bubble-preview i:nth-child(4) { width: 70px; height: 70px; left: 45px; top: 0; }
.future-message { margin: 35px; padding: 65px 40px; border: 1px dashed #b9c4d2; border-radius: 12px; text-align: center; background: #fafbfc; }.future-message strong { display: block; font-size: 22px; }.future-message p { max-width: 620px; margin: 12px auto 20px; color: var(--muted); line-height: 1.6; }.status-chip { display: inline-block; padding: 7px 12px; border-radius: 99px; color: #475467; background: #e9edf2; font-weight: 700; font-size: 11px; }

.wizard-bottom-nav { min-height: 76px; padding: 22px 6px 0; display: grid; grid-template-columns: 190px 1fr 270px; align-items: center; gap: 18px; }
.wizard-bottom-nav > p { margin: 0; color: var(--muted); font-size: 11px; text-align: center; }
.inline-info { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border: 1px solid #98a2b3; border-radius: 50%; font-weight: 700; }
.button-back, .button-next { min-height: 49px; padding: 0 20px; display: flex; align-items: center; justify-content: center; gap: 16px; border-radius: 7px; font-weight: 700; cursor: pointer; }
.button-back { justify-self: start; min-width: 135px; border: 1px solid #cfd6df; background: white; }.button-back span, .button-next span { font-size: 22px; font-weight: 400; }
.button-next { justify-self: end; min-width: 238px; border: 0; color: white; background: var(--blue); box-shadow: 0 7px 18px rgba(18,103,232,.18); }.button-next:hover { background: var(--blue-dark); }.button-next:disabled { color: #98a2b3; background: #e5e8ed; box-shadow: none; cursor: not-allowed; }

.project-overview { position: sticky; top: 65px; align-self: start; height: calc(100vh - 65px); border-left: 1px solid var(--line); }
.overview-scroll { height: 100%; overflow-y: auto; padding: 27px 21px; }
.overview-title-row { display: flex; justify-content: space-between; align-items: center; }.overview-title-row h2 { margin: 0 5px 17px; font-size: 17px; }.overview-close { display: none; border: 0; background: none; font-size: 28px; }
.overview-card, .calculate-card { margin-bottom: 15px; padding: 16px 17px; border: 1px solid var(--line); border-radius: 9px; background: white; box-shadow: 0 3px 12px rgba(23,32,51,.05); }
.summary-row { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; min-height: 48px; }.summary-icon { color: #344054; font-size: 25px; text-align: center; }.summary-row small, .summary-row strong { display: block; }.summary-row small { color: #475467; font-size: 11px; }.summary-row strong { margin-top: 2px; font-size: 13px; line-height: 1.3; }.summary-card hr { border: 0; border-top: 1px solid var(--line); }
.progress-card h3 { margin: 0 0 15px; font-size: 16px; }.progress-card ol { margin: 0; padding: 0; list-style: none; }.progress-card li { min-height: 37px; display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; color: var(--muted); font-size: 11px; }.progress-card li b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #475467; background: #e5e7eb; }.progress-card .progress-completed b { color: white; background: var(--success); }.progress-card .progress-completed { color: #344054; }.progress-card .progress-current { color: var(--blue); font-weight: 700; }.progress-card .progress-current b { color: white; background: var(--blue); }
.calculate-card button { width: 100%; min-height: 48px; border: 0; border-radius: 7px; color: #98a2b3; background: #e4e7ec; font-size: 15px; font-weight: 700; }.calculate-card p { margin: 10px 0 1px; color: var(--muted); font-size: 11px; text-align: center; }
.mobile-overview-button, .overview-backdrop { display: none; }
.wizard-toast { position: fixed; z-index: 100; right: 24px; bottom: 24px; max-width: 390px; padding: 13px 17px; color: white; background: var(--ink); border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.wizard-toast.is-error { background: #9f251c; }

@media (max-width: 1320px) {
  .designer-shell { grid-template-columns: 78px minmax(600px, 1fr) 310px; }
  .project-identity { padding: 24px 10px; text-align: center; }.project-identity > span, .project-identity strong, .project-identity button { display: none; }
  .project-identity::after { content: "Projekt"; color: var(--muted); font-size: 10px; }
  .sidebar-nav a, .sidebar-nav button { justify-content: center; padding: 0; }.sidebar-nav span { display: none; }.sidebar-tip { display: none; }
  .main-inner { padding-inline: 22px; }.main-inner > h1 { margin-left: 15px; }
  .envelope-panel { grid-template-columns: minmax(420px, 1.15fr) minmax(280px, .85fr); }
  .overview-scroll { padding-inline: 14px; }
}

@media (max-width: 1050px) {
  .designer-shell { grid-template-columns: 70px minmax(0, 1fr); }
  .project-overview { position: fixed; z-index: 85; top: 65px; right: 0; width: min(360px, 92vw); height: calc(100vh - 65px); transform: translateX(105%); transition: transform .22s ease; box-shadow: -18px 0 45px rgba(23,32,51,.15); }
  .project-overview.is-open { transform: translateX(0); }.overview-close { display: block; }
  .overview-backdrop { position: fixed; z-index: 80; inset: 65px 0 0; background: rgba(23,32,51,.28); }
  .overview-backdrop:not([hidden]) { display: block; }
  .mobile-overview-button { position: fixed; z-index: 70; top: 78px; right: 18px; bottom: auto; min-width: 170px; min-height: 46px; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; gap: 14px; border: 0; border-radius: 24px; color: white; background: var(--ink); box-shadow: 0 9px 25px rgba(23,32,51,.24); }
  .mobile-overview-button strong { color: #a9c9ff; }
  .envelope-panel { grid-template-columns: minmax(390px, 1.1fr) minmax(260px, .9fr); }
  .topbar-actions .topbar-link span:not(.circle-icon), .account-button span:not(.account-avatar) { display: none; }
  .design-workspace { grid-template-columns: minmax(430px, 1.25fr) minmax(250px, .75fr); }.design-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.design-option-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .budget-workspace { grid-template-columns: minmax(450px, 1.2fr) minmax(255px, .8fr); }.review-step-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
  .designer-topbar { height: 58px; padding: 0 16px; }.designer-brand { font-size: 18px; gap: 10px; }.designer-brand svg { width: 28px; }.topbar-actions { gap: 11px; }.topbar-separator { display: none; }.account-avatar { width: 30px; height: 30px; }
  .designer-shell { display: block; min-height: calc(100vh - 58px); }.designer-sidebar { display: none; }.project-overview { top: 58px; height: calc(100vh - 58px); }.overview-backdrop { inset-top: 58px; }
  .main-inner { padding: 20px 14px 86px; }.main-inner > h1 { margin: 0 3px 18px; font-size: 24px; }
  .wizard-stepper { margin: 0 -14px 20px; overflow-x: auto; scrollbar-width: none; }.wizard-stepper ol { width: 630px; padding: 0 12px; }.wizard-stepper b { width: 36px; height: 36px; font-size: 16px; }.wizard-stepper li::before, .wizard-stepper li::after { top: 17px; }.wizard-stepper em { font-size: 10px; }
  .wizard-card { border-radius: 10px; }.wizard-card-heading { padding: 20px 18px 17px; }.wizard-card-heading h2 { font-size: 21px; }
  .envelope-tabs { display: flex; overflow-x: auto; }.envelope-tabs button { flex: 0 0 145px; }
  .envelope-panel { display: flex; flex-direction: column; min-height: auto; }.envelope-editor { order: 2; padding: 18px 16px; border-right: 0; }.envelope-visual { order: 1; padding: 15px; border-bottom: 1px solid var(--line); }.envelope-visual img { max-height: 275px; }.envelope-visual figcaption { font-size: 10px; }
  .segmented-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }.segmented-options label { min-width: 0; }.compact-choice-cards { grid-template-columns: 1fr; }
  .compact-intent-pair { grid-template-columns: 1fr; }
  .basics-form { padding: 8px 18px 23px; }.basics-grid { grid-template-columns: 1fr; gap: 0; }
  .bound-context { grid-template-columns: 1fr; }.design-workspace { display: flex; flex-direction: column; }.design-choice-column { order: 2; width: 100%; padding: 18px 16px; border-right: 0; }.design-live-profile { position: static; order: 1; width: 100%; min-height: 0; border-bottom: 1px solid var(--line); }.design-option-grid, .design-option-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }.mood-composition { height: 150px; }.prerequisite-actions { flex-direction: column; align-items: stretch; }
  .customer-shell-workspace { display: flex; flex-direction: column; }.customer-choice-column { order: 2; width: 100%; padding: 18px 16px; border-right: 0; }.customer-result-column { position: static; order: 1; width: 100%; border-bottom: 1px solid var(--line); }.comfort-dimension-grid { grid-template-columns: 1fr; }.conditional-comfort-stack { grid-template-columns: 1fr; }
  .space-shell-inputs, .space-shell-results { padding: 18px 16px; }.space-program-questions, .shell-priority-list, .shell-relation-grid { grid-template-columns: 1fr; }.shell-choice-options.horizontal { grid-template-columns: 1fr; }.shell-candidate-grid { grid-template-columns: 1fr; }.shell-schematic-canvas { height: 210px; }.empty-space-result { display: block; min-height: 0; }.empty-space-result .bubble-preview { display: none; }
  .review-step-grid { grid-template-columns: 1fr; }.budget-workspace { display: flex; flex-direction: column; }.budget-input-column { order: 2; width: 100%; padding: 18px 16px; border-right: 0; }.budget-result-column { position: static; order: 1; width: 100%; border-bottom: 1px solid var(--line); }.budget-choice-grid { grid-template-columns: 1fr; }.review-correction-grid { grid-template-columns: repeat(2, 1fr); }
  .handoff-content { margin: 8px 18px 25px; padding: 24px; grid-template-columns: 1fr; }.handoff-visual, .bubble-preview { display: none; }.future-message { margin: 18px; padding: 40px 20px; }
  .wizard-bottom-nav { padding-top: 15px; grid-template-columns: 1fr 1fr; gap: 9px; }.wizard-bottom-nav > p { grid-column: 1 / -1; grid-row: 1; }.button-back, .button-next { width: 100%; min-width: 0; padding: 0 12px; }.button-back { grid-column: 1; }.button-next { grid-column: 2; }
  .mobile-overview-button { top: auto; right: 18px; bottom: 16px; }
}

@media (max-width: 450px) {
  .designer-brand span { font-size: 17px; }.topbar-link:nth-child(2) { display: none; }.topbar-actions { gap: 7px; }
  .main-inner { padding-inline: 10px; }.main-inner > h1 { font-size: 22px; }
  .wizard-card-heading div > span { font-size: 11px; }.section-symbol { width: 34px; height: 34px; }
  .envelope-tabs button { flex-basis: 124px; min-height: 55px; font-size: 13px; }
  .envelope-visual img { max-height: 235px; }
  .segmented-options { grid-template-columns: 1fr 1fr; gap: 6px; }.segmented-options span { min-height: 41px; padding: 7px 5px; }
  .range-row { grid-template-columns: 1fr 77px; gap: 10px; }.principle-note { font-size: 12px; }
  .shell-number-field { grid-template-columns: 1fr 64px; }.shell-relation-grid > label { grid-template-columns: 1fr; }.shell-schematic-canvas { height: 175px; }
  .wizard-bottom-nav { position: sticky; z-index: 20; bottom: -86px; margin: 0 -10px; padding: 12px 10px; background: rgba(247,249,252,.95); border-top: 1px solid var(--line); backdrop-filter: blur(12px); }.wizard-bottom-nav > p { display: none; }
  .button-back, .button-next { min-height: 45px; font-size: 12px; }.button-next span { display: none; }
  .mobile-overview-button { right: 10px; bottom: 70px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }