/* VividHome shell and warm surface tokens; configurator layout stays shared. */
body.vh-canvas-visualizer {
    background: #faf8f5;
    color: #2c2825;
}
.vh-visualizer-page {
    background: radial-gradient(ellipse at 15% 0, rgba(249,115,22,.035), transparent 52%), #faf8f5;
    padding: 20px 0 56px;
}
.vh-visualizer-shell { width: min(1440px, calc(100% - 48px)); margin-inline: auto; }
.vh-visualizer-hero { padding: 26px 0 34px; }
.vh-visualizer-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; color: #78716c; font-size: 12px; }
.vh-visualizer-breadcrumb a { color: inherit; text-decoration: none; }
.vh-visualizer-breadcrumb a:hover { color: #2c2825; text-decoration: underline; }
.vh-visualizer-hero h1 { margin: 0; color: #2c2825; font: 800 clamp(32px,5vw,66px)/1.04 Geologica,Onest,sans-serif; letter-spacing: -.045em; }
.vh-visualizer-hero h1 span { background: linear-gradient(110deg,#2563eb,#06b6d4 23%,#7c3aed 48%,#db2777 67%,#f97316 84%,#f59e0b); background-clip: text; -webkit-background-clip: text; color: transparent; }
.vh-visualizer-hero h1 sup { font-size: .28em; vertical-align: super; margin-left: .2em; letter-spacing: 0; }
.vh-visualizer-hero p { max-width: 800px; margin: 22px 0 0; color: #6d6259; font: 400 1.02rem/1.78 Onest,sans-serif; }
.vh-canvas-visualizer .vv-root {
    --vv-accent: #78716c;
    --vv-accent-hover: #4a4440;
    --vv-accent-soft: #f5f0eb;
    --vv-bg: #fffdfa;
    --vv-surface: #faf8f5;
    --vv-surface-2: #f5f0eb;
    --vv-border: rgba(74,68,64,.11);
    --vv-border-strong: rgba(74,68,64,.25);
    --vv-text: #2c2825;
    --vv-text-muted: #6d6259;
    --vv-text-dim: #a89f95;
    --vv-shadow: 0 20px 60px rgba(44,40,37,.055);
}
.vh-canvas-visualizer .vv-root :is(.layout-btn,.wrap-btn,.detail-options button,.reset-position,.ratio-btn) { background-color: #faf8f5; color: #4a4440; border-color: #e5ddd4; }
.vh-canvas-visualizer .vv-root :is(.layout-btn,.wrap-btn,.material-btn,.detail-options button)[aria-pressed=true] { background: linear-gradient(135deg,rgba(245,240,235,.95),rgba(255,253,250,.96)); border-color: #a89f95; box-shadow: inset 0 0 0 1px #a89f95; color: #2c2825; }
.vh-canvas-visualizer .vv-root :is(.material-btn,.detail-toolbar,.controls-panel,.preview-info) { background-color: rgba(255,253,250,.94); color: #4a4440; }
.vh-canvas-visualizer .vv-root .composition-info { background: linear-gradient(135deg,#f5f0eb,#fffdfa 60%); color: #4a4440; border-color: #e5ddd4; }
.vh-canvas-visualizer .vv-root :is(.spec-layout,.spec-size,.info-value) { color: #2c2825; }
.vh-canvas-visualizer .vv-root :is(.spec-eyebrow,.spec-unit) { color: #78716c; }
.vh-canvas-visualizer .vv-root .preview-stage { background: #f5f0eb; }
.vh-canvas-visualizer .vv-root .preview-panel { top: 118px; }
@media (max-width: 900px) {
    .vh-visualizer-page { padding-top: 8px; }
    .vh-visualizer-shell { width: calc(100% - 32px); }
    .vh-visualizer-hero { padding: 18px 0 26px; }
    .vh-visualizer-breadcrumb { margin-bottom: 22px; }
    .vh-canvas-visualizer .vv-root .preview-panel { top: auto; }
}
@media (max-width: 480px) {
    .vh-visualizer-shell { width: calc(100% - 24px); }
    .vh-visualizer-hero h1 { font-size: clamp(30px,8vw,38px); }
    .vh-visualizer-hero p { font-size: .94rem; }
}