.configurator-page { margin: 0; min-height: 100vh; overflow-x: hidden; background: #111315; color: #f7f5ef; }
.config-header { position: fixed; z-index: 20; inset: 0 0 auto; height: 76px; padding: 0 clamp(18px,3vw,46px); display: flex; align-items: center; justify-content: space-between; background: rgba(17,19,21,.9); border-bottom: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(16px); }
.config-header .brand { color: #fff; }
.config-header-actions { display: flex; align-items: center; gap: 18px; }
.language-link { color: #fff; font-weight: 900; }
.btn-outline-light { color: #fff; border: 1px solid rgba(255,255,255,.4); }
.config-shell { min-height: 100vh; padding-top: 76px; display: grid; grid-template-columns: minmax(0,1.55fr) minmax(410px,.72fr); }
.viewer-panel { position: sticky; top: 76px; height: calc(100vh - 76px); min-height: 620px; overflow: hidden; background: radial-gradient(circle at 60% 35%,#465050 0,#252a2b 48%,#17191a 100%); }
#project-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#project-canvas:active { cursor: grabbing; }
.viewer-fallback { position: absolute; z-index: 3; inset: 0; padding: 60px 28px 90px; display: grid; align-content: center; justify-items: center; gap: 20px; text-align: center; background: radial-gradient(circle at 55% 40%,rgba(74,84,82,.92),rgba(17,19,21,.96)); }
.viewer-fallback[hidden] { display: none; }
.viewer-fallback strong,.viewer-fallback span { display: block; }
.viewer-fallback strong { margin-bottom: 8px; color: var(--orange); font-size: 1.15rem; }
.viewer-fallback span { color: rgba(255,255,255,.7); font-size: .86rem; line-height: 1.5; }
.fallback-copy { width: min(520px,100%); padding: 16px 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(17,19,21,.58); }
.iso-scene { --wall:#d9d2c6; position: relative; width: min(470px,80vw); height: 290px; perspective: 900px; filter: drop-shadow(0 28px 28px rgba(0,0,0,.34)); }
.iso-ground { position:absolute; left:8%; right:3%; bottom:18px; height:125px; border-radius:50%; background:radial-gradient(ellipse,#77827a 0,#4e5a54 56%,transparent 58%); transform:rotateX(66deg); }
.iso-building { position:absolute; left:50%; bottom:68px; width:230px; height:145px; transform:translateX(-50%) rotateX(-4deg) rotateY(-24deg); transform-style:preserve-3d; }
.iso-front,.iso-side,.iso-roof { position:absolute; transform-style:preserve-3d; }
.iso-front { inset:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:30px 26px; background:var(--wall); border-bottom:8px solid rgba(0,0,0,.12); }
.iso-side { left:100%; top:0; width:78px; height:100%; padding:32px 18px; background:var(--wall); filter:brightness(.78); transform-origin:left; transform:rotateY(90deg); }
.iso-front i,.iso-side i { display:inline-block; width:38px; height:42px; margin:0 3px; border:5px solid rgba(255,255,255,.68); background:linear-gradient(135deg,#91b9c6,#456774); box-shadow:inset 0 0 0 2px rgba(0,0,0,.08); }
.iso-side i { width:28px; margin:0 2px; }
.iso-front b { position:absolute; left:92px; bottom:0; width:46px; height:67px; background:#3f4544; }
.iso-roof { left:-8px; right:-8px; top:-16px; height:20px; background:#292c2d; transform:translateZ(1px); }
.roof-pitched .iso-roof { top:-44px; height:58px; clip-path:polygon(50% 0,100% 100%,0 100%); background:#343839; }
.roof-green .iso-roof { background:linear-gradient(90deg,#607854,#8aa276); }
.facade-wood { --wall:#a87351; }.facade-stone { --wall:#8d918b; }
.floors-1 .iso-building { height:105px; }.floors-3 .iso-building { height:175px; }.floors-4 .iso-building { height:205px; }.floors-5 .iso-building { height:232px; bottom:45px; }
.iso-roof [data-iso-solar] { position:absolute; left:45px; top:-5px; width:82px; height:28px; background:repeating-linear-gradient(90deg,#1e3a4c 0 18px,#7593a2 19px 20px); border:2px solid #bccbd0; transform:rotateX(8deg); }
.iso-terrace { position:absolute; right:5%; bottom:50px; width:150px; height:55px; border:8px solid #ba8a5d; background:repeating-linear-gradient(90deg,#d0a77c 0 9px,#b88558 10px 11px); transform:skewY(-16deg); }
.iso-pool { position:absolute; left:2%; bottom:12px; width:190px; height:92px; border:10px solid #e1d7c7; border-radius:4px; background:linear-gradient(155deg,#8de0e5,#3194aa); transform:rotateX(62deg) rotateZ(-10deg); transform-origin:center; box-shadow:inset 0 0 0 3px rgba(255,255,255,.3),0 12px 16px rgba(0,0,0,.22); }
.iso-pool::after { content:""; position:absolute; inset:14px 18px; border-top:2px solid rgba(255,255,255,.5); border-bottom:2px solid rgba(255,255,255,.32); transform:skewX(-18deg); }
.viewer-topline,.viewer-help,.viewer-badge { position: absolute; z-index: 2; }
.viewer-topline { top: 28px; left: 30px; display: flex; align-items: center; gap: 9px; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 900; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px rgba(242,106,46,.15); }
.viewer-help { left: 30px; bottom: 30px; color: rgba(255,255,255,.68); font-size: .82rem; }
.viewer-badge { right: 28px; bottom: 28px; min-width: 220px; padding: 18px 20px; display: flex; justify-content: space-between; gap: 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(17,19,21,.72); backdrop-filter: blur(12px); }
.viewer-badge span { color: var(--orange); font-weight: 900; }
.config-panel { min-height: calc(100vh - 76px); padding: clamp(36px,5vw,72px) clamp(24px,4vw,56px); background: #f3f0e8; color: var(--ink); }
.config-intro h1 { max-width: 560px; font-size: clamp(2.4rem,4vw,4.4rem); line-height: .97; }
.config-intro > p:last-child { color: var(--muted); max-width: 560px; }
.config-step { margin: 34px 0 0; padding: 0 0 30px; border: 0; border-bottom: 1px solid var(--line); }
.config-step legend { width: 100%; display: flex; gap: 14px; align-items: center; margin-bottom: 18px; font-size: 1.02rem; }
.config-step legend span { color: var(--orange); font-size: .76rem; letter-spacing: .12em; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.segmented-projects { grid-template-columns: repeat(3,1fr); }
.segmented input,.swatches input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label > span { display: block; padding: 15px; text-align: center; border: 2px solid #d5d1c8; border-radius: 12px; font-weight: 850; cursor: pointer; }
.segmented input:checked + span { border-color: var(--orange); color: var(--orange-dark); background: rgba(242,106,46,.08); }
.range-control { display: grid; grid-template-columns: 1fr 92px; gap: 20px; align-items: center; }
.range-control input { width: 100%; accent-color: var(--orange); }
.range-control output { padding: 12px; text-align: center; border-radius: 10px; background: #fff; font-weight: 900; }
.area-total { display:block; margin-top:10px; color:var(--orange-dark); font-size:.75rem; font-weight:850; }
.material-group { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 0; }
.material-group > span,.material-group > label { font-weight: 800; }
.swatches { display: flex; gap: 10px; }
.swatches label > span { display: block; width: 35px; height: 35px; border-radius: 50%; background: var(--swatch); border: 3px solid #fff; box-shadow: 0 0 0 1px #c9c5bc; cursor: pointer; }
.swatches input:checked + span { box-shadow: 0 0 0 3px var(--orange); }
.material-select select { width: 170px; min-height: 46px; padding: 8px 12px; border: 2px solid #d5d1c8; border-radius: 10px; background: #fff; }
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.option-grid label { display: grid; gap: 7px; color: #4b514e; font-size: .78rem; font-weight: 850; }
.option-grid label[hidden] { display: none !important; }
.option-help { min-height: 2.4em; color: var(--muted); font-size: .67rem; font-weight: 600; line-height: 1.25; }
.option-grid select { width: 100%; min-height: 46px; padding: 8px 12px; border: 2px solid #d5d1c8; border-radius: 10px; background: #fff; color: var(--ink); }
.config-price { margin-top: 30px; padding: 24px; display: grid; gap: 20px; border-radius: 18px; background: var(--ink); color: #fff; }
.config-price span,.config-price small,.config-price strong { display: block; }
.config-price span { color: rgba(255,255,255,.68); font-size: .84rem; }
.config-price strong { margin: 6px 0; color: var(--orange); font-size: clamp(1.55rem,2.5vw,2.25rem); letter-spacing: -.04em; }
.config-price small { color: rgba(255,255,255,.54); }
.option-impact { margin-top: 14px; padding: 18px 20px; border: 1px solid #d8d3ca; border-radius: 14px; background: rgba(255,255,255,.72); }
.option-impact > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.option-impact span { color:var(--muted); font-size:.78rem; font-weight:800; }
.option-impact > div:first-child strong { color:var(--orange-dark); text-align:right; }
.impact-list { margin-top:12px; display:grid; gap:7px; }
.impact-list:empty { display:none; }
.impact-list > div { display:flex; justify-content:space-between; gap:18px; padding-top:7px; border-top:1px solid var(--line); }
.impact-list strong { font-size:.78rem; white-space:nowrap; }
.cost-breakdown { margin-top: 18px; padding: 22px; border: 1px solid #d8d3ca; border-radius: 18px; background: #fff; }
.breakdown-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.breakdown-heading span { display: block; color: var(--orange-dark); text-transform: uppercase; letter-spacing: .1em; font-size: .67rem; font-weight: 900; }
.breakdown-heading h2 { margin: 4px 0 0; font-size: 1.32rem; }
.breakdown-heading > strong { color: var(--ink); white-space: nowrap; font-size: 1.18rem; }
.breakdown-bar { height: 10px; margin: 18px 0; display: flex; overflow: hidden; border-radius: 99px; background: #e9e5dc; }
.breakdown-bar span { height: 100%; }
.breakdown-bar [data-cfc-bar="1"],.cfc-1 { background: #f26a2e; }
.breakdown-bar [data-cfc-bar="2"],.cfc-2 { background: #262b2b; }
.breakdown-bar [data-cfc-bar="4"],.cfc-4 { background: #a7afa9; }
.breakdown-bar [data-cfc-bar="5"],.cfc-5 { background: #d6aa87; }
.breakdown-list { display: grid; gap: 11px; }
.breakdown-list > div { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.cfc-dot { width: 8px; height: 8px; border-radius: 50%; }
.breakdown-list span,.breakdown-list b,.breakdown-list small { display: block; }
.breakdown-list b { font-size: .82rem; }
.breakdown-list small { margin-top: 2px; color: var(--muted); font-size: .7rem; }
.breakdown-list strong { white-space: nowrap; font-size: .82rem; }
.cost-breakdown > p { margin: 17px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; line-height: 1.45; }
.config-method { margin: 18px 0 8px; padding-left: 14px; border-left: 3px solid var(--orange); color: #4b514e; font-size: .8rem; line-height: 1.55; }
.config-disclaimer { margin-top: 8px; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.loaded-project { margin-top: 18px; padding: 14px 16px; display: flex; justify-content: space-between; gap: 20px; border-radius: 10px; background: rgba(31,106,83,.1); color: var(--green); }
.loaded-project strong { letter-spacing: .05em; }
.save-dialog { width: min(620px,calc(100% - 32px)); padding: 0; border: 0; border-radius: 22px; color: var(--ink); box-shadow: 0 30px 90px rgba(0,0,0,.4); }
.save-dialog::backdrop { background: rgba(9,11,12,.72); backdrop-filter: blur(5px); }
.dialog-card { position: relative; padding: clamp(28px,6vw,54px); }
.dialog-card h2 { margin-bottom: 12px; font-size: clamp(2rem,5vw,3.25rem); }
.dialog-card > p:not(.eyebrow,.dialog-status) { color: var(--muted); }
.dialog-close { position: absolute; top: 16px; right: 18px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--paper); font-size: 1.5rem; cursor: pointer; }
.dialog-status { min-height: 26px; margin: 15px 0 0; color: var(--muted); font-weight: 800; }
.dialog-status.error { color: #9f2f16; }
.share-result { margin-top: 24px; padding: 20px; border-radius: 14px; background: var(--paper); }
.share-result > span,.share-result > strong,.share-result > label { display: block; }
.share-result > span,.share-result > label { color: var(--muted); font-size: .78rem; }
.share-result > strong { margin: 4px 0 18px; color: var(--orange-dark); font-size: 1.45rem; letter-spacing: .06em; }
.share-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: 7px; }
.share-row input { min-width: 0; padding: 10px 12px; border: 2px solid #d5d1c8; border-radius: 10px; }
.social-share-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.saved-versions { margin-top:22px; padding-top:20px; border-top:1px solid #dedad2; }
.saved-versions>div:first-child { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.saved-versions>div:first-child span { font-weight:900; }
.saved-versions>div:first-child small { color:var(--muted); }
[data-version-list] { display:grid; gap:8px; margin-top:12px; }
.version-item { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; padding:11px 12px; border-radius:10px; background:var(--paper); }
.version-item span { display:grid; gap:2px; min-width:0; }
.version-item strong,.version-item small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.version-item small { color:var(--muted); }
.version-item a,.version-item button { border:0; background:transparent; color:var(--orange-dark); font-weight:800; cursor:pointer; text-decoration:none; }
@media (max-width:1000px) { .config-shell { grid-template-columns: 1fr; } .viewer-panel { position: relative; top: 0; height: 58vh; min-height: 480px; } .config-panel { min-height: 0; } }
@media (max-width:600px) { .config-header { height: 68px; } .config-header .btn { display:none; } .config-shell { padding-top:68px; } .viewer-panel { height:52vh; min-height:390px; } .viewer-help { display:none; } .viewer-badge { left:18px; right:18px; bottom:18px; } .config-panel { padding:36px 20px; } .range-control { grid-template-columns:1fr 82px; } .option-grid { grid-template-columns: 1fr; } .segmented-projects { grid-template-columns:1fr 1fr; } .breakdown-heading { align-items:flex-start; flex-direction:column; gap:8px; } .breakdown-list > div { grid-template-columns:10px minmax(0,1fr); } .breakdown-list > div > strong { grid-column:2; margin-top:-5px; } .option-impact > div:first-child { align-items:flex-start; flex-direction:column; gap:6px; } .option-impact > div:first-child strong { text-align:left; } .iso-scene { transform:scale(.78); margin:-25px 0; } }
@media (max-width:520px) { .share-row { grid-template-columns: 1fr; } .share-row .btn,.social-share-row .btn { width: 100%; } .version-item{grid-template-columns:1fr auto}.version-item a{grid-column:1}.saved-versions>div:first-child{align-items:flex-start;flex-direction:column} }