.ve { margin-top: 18px; overflow: clip; }
.ve-inner { padding: 14px 14px 0; }
@media (min-width: 700px) { .ve-inner { padding: 20px 22px 0; } }
.ve-intro { margin: 12px 0 16px; color: var(--b-ink-soft); }
.ve-grid { padding-bottom: 20px; }
.ve-visual { display: grid; gap: 10px; }
@media (min-width: 960px) { .ve-visual { position: sticky; top: 130px; } }
.ve-cap { color: var(--b-ink-soft); margin: 0; }
.ve-controls { display: grid; gap: 4px; }
.ve-block { padding: 12px 0; border-bottom: 1px solid var(--b-line); }
.ve-block h3 { font-size: 1.02rem; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.ve-block h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--b-ink-soft); margin-bottom: 8px; font-family: var(--b-body); }
.stepn { width: 24px; height: 24px; border-radius: 50%; background: var(--b-accent); color: var(--b-accent-ink); display: inline-grid; place-items: center; font-size: .78rem; flex: 0 0 auto; }

.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--b-surface); border: 1px solid var(--b-line); max-width: 100%; }
.seg-wrap { flex-wrap: wrap; border-radius: 14px; }
.seg button { border: 0; background: transparent; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: .88rem; color: var(--b-ink-soft); min-height: 38px; }
.seg button[aria-selected="true"], .seg button[aria-checked="true"] { background: var(--b-accent); color: var(--b-accent-ink); }

.space-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.space { border: 1.5px solid var(--b-line); background: var(--b-surface); border-radius: 12px; padding: 0; overflow: hidden; text-align: left; }
.space[aria-pressed="true"] { border-color: var(--b-accent); box-shadow: 0 0 0 3px var(--b-accent-soft); }
.space-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #ddd; }
.space-img img { width: 100%; height: 100%; object-fit: cover; }
.space-name { display: block; padding: 7px 9px; font-weight: 600; font-size: .84rem; line-height: 1.2; }

.concepts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.concept { border: 1.5px solid var(--b-line); background: var(--b-surface); border-radius: 12px; padding: 10px 12px; text-align: left; display: grid; gap: 2px; min-height: 64px; }
.concept strong { font-size: .92rem; }
.concept span { font-size: .8rem; color: var(--b-ink-soft); line-height: 1.35; }
.concept[aria-pressed="true"] { border-color: var(--b-accent); box-shadow: 0 0 0 3px var(--b-accent-soft); }

.dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }

.ve-est { padding: 16px; margin-top: 14px; border-width: 2px !important; border-color: var(--b-accent) !important; }
.ve-range { font: 800 clamp(1.6rem, 6vw, 2.1rem)/1.1 var(--b-display); margin: 4px 0 8px; color: var(--b-ink); }
.ve-est details { margin-top: 6px; }
.ve-est summary { cursor: pointer; color: var(--b-accent); font-weight: 600; }
.ve-upsell { padding: 16px; margin-top: 14px; background: var(--b-accent-soft) !important; }
.ve-form { padding: 16px; margin-top: 14px; border-bottom: 0; }

.drop { display: grid; gap: 8px; justify-items: start; padding: 14px; border: 2px dashed var(--b-line); border-radius: 12px; cursor: pointer; }
.ve-photo { display: flex; gap: 12px; align-items: center; }
.ve-photo img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; }
.ve-done { margin: 16px 0 20px; }
.ve .note-warn { color: #5b3d0d; }
