:root{font-family:Segoe UI,Arial,sans-serif;color:#1e283d;font-synthesis:none;--ink:#1e283d;--muted:#677183;--accent:#426bf8;--glass:rgba(246,249,251,.79);--line:rgba(44,60,83,.16)}
*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#d8e4e2}button,input{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #557dfb;outline-offset:3px}button{border:1px solid transparent;background:transparent;border-radius:9px;transition:background .16s,box-shadow .16s}button:hover{background:#fff8}button:disabled{opacity:.35;cursor:not-allowed}button.active{border-color:#5980ff;background:#eef2ffcc;box-shadow:0 0 0 1px #ffffff66}button:active{transform:translateY(1px)}[hidden]{display:none!important}#app,#viewport{position:fixed;inset:0}#viewport canvas{display:block;width:100%;height:100%;touch-action:none}.glass{background:var(--glass);backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);border:1px solid #fff8;box-shadow:0 4px 24px #1328200c}
.brand{position:absolute;left:20px;top:18px;padding:14px 19px;border-radius:13px;display:flex;align-items:center;gap:17px}.brand strong{font-size:25px;letter-spacing:-1.1px}.brand span{border-left:1px solid #85939a77;padding-left:17px;font-size:16px}.scenes{position:absolute;top:16px;left:50%;transform:translateX(-50%);padding:8px;display:flex;gap:7px;border-radius:15px}.scene{width:126px;padding:3px 3px 5px;font-size:13px;font-weight:550}.scene img{display:block;width:118px;height:62px;object-fit:cover;border-radius:7px;background:linear-gradient(150deg,#becfd5,#8ca278);margin-bottom:6px}.scene.active{background:#ffffffaa}.view-controls{position:absolute;right:20px;top:18px;display:flex;padding:5px;border-radius:22px;gap:3px}.view-controls button{padding:9px 14px;font-size:14px;border-radius:18px}.view-controls .icon{padding:5px 10px;font-size:22px}.hint{position:absolute;left:22px;bottom:231px;font-size:12px;color:#495367;padding:8px 12px;border-radius:20px;pointer-events:none;transition:opacity .4s}.hint.faded{opacity:0}.controls{position:absolute;bottom:18px;left:20px;right:20px;padding:17px 22px 9px;border-radius:17px}.control-main{display:flex;gap:20px;align-items:stretch}.control-main fieldset{margin:0;padding:0 20px 0 0;border:0;border-right:1px solid var(--line)}.control-main fieldset:last-child{border:0;padding:0}.control-main legend{font-size:14px;font-weight:650;margin:0 0 9px;padding:0}.surface-group{flex:1.08}.product-group{flex:1.4}.color-group{flex:.7}.layout-group{flex:1}#catalog-link{font-size:11px;color:#65718a;text-decoration:none;font-weight:450;margin-left:5px}#color-name{font-size:11px;color:var(--muted);font-weight:450}.segments{display:flex;gap:5px;align-items:center;height:59px}.segments button{padding:10px 13px;border:1px solid #aeb7c477;background:#fff3;font-size:13px}.segments button.active{border-color:#5980ff;background:#eef2ffcc}#products{display:flex;gap:6px}.product{flex:1;min-width:70px;padding:0 0 3px;border-radius:7px;font-size:12px}.product .product-tile{height:38px;margin:2px 2px 4px;border-radius:5px;background:linear-gradient(145deg,#d6d7d5,#a7aaa8);position:relative;overflow:hidden}.product .product-tile::after{content:'';position:absolute;inset:3px;opacity:.6;background-image:linear-gradient(#727b7780 1px,transparent 1px),linear-gradient(90deg,#727b7780 1px,transparent 1px);background-size:28px 13px}.product[data-product="napoli"] .product-tile::after{background-size:19px 13px}.product[data-product="oland"] .product-tile::after{background-size:43px 11px}.product small{display:block;font-size:10px;margin-top:2px;color:#607085}.product.active .product-tile{box-shadow:inset 0 0 0 1px #6790fc}.product>span{white-space:nowrap}#colors{display:flex;gap:8px;align-items:center;padding:8px 0}.color{width:40px;height:40px;padding:3px;border-radius:50%;border:1px solid #ffffffc0;box-shadow:0 1px 5px #0001}.color>span{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 6px #0002}.color.active{border:2px solid var(--accent);box-shadow:0 0 0 2px #fff8}.layouts{display:flex;gap:7px}.layouts>button{padding:3px 4px 2px;flex:1;font-size:12px}.pattern-swatch{display:block;width:65px;max-width:100%;height:36px;border:1px solid #a6aaa8;border-radius:5px;margin:auto auto 4px;background-color:#c8cbc8}.pattern-swatch.rows{background-image:linear-gradient(#eef0eb 2px,transparent 2px),linear-gradient(90deg,#eef0eb 2px,transparent 2px);background-size:22px 12px}.pattern-swatch.herringbone{background-image:repeating-linear-gradient(45deg,transparent 0 10px,#eef0eb 10px 12px),repeating-linear-gradient(-45deg,transparent 0 14px,#858e8b 14px 16px)}.pattern-swatch.custom{background:conic-gradient(#78827e 25%,#c7cbc5 0 50%,#a1a8a3 0 75%,#d5d8d2 0);background-size:24px 24px}
.calculator{display:flex;align-items:center;gap:23px;border-top:1px solid var(--line);margin-top:13px;padding-top:11px}.calculator label{font-size:12px;display:flex;align-items:center;gap:9px;white-space:nowrap}.input-wrap{display:flex;align-items:center;border:1px solid #bbc3c8;background:#ffffff99;border-radius:8px;height:37px;padding:0 9px;gap:2px}.input-wrap input{width:48px;min-width:0;border:0;background:transparent;font-size:16px;outline:none;appearance:textfield;-moz-appearance:textfield}.input-wrap input::-webkit-inner-spin-button{appearance:none}.input-wrap span{font-size:13px}.metric{padding-left:20px;border-left:1px solid var(--line);min-width:118px}.metric>span{display:block;font-size:11px;margin-bottom:3px}.metric output{font-size:20px;font-weight:650;white-space:nowrap}.metric.total{margin-left:auto}.metric.total output{font-size:23px}.price-field{margin-left:auto}.price-field input{width:51px}.calculator-note{display:flex;justify-content:space-between;margin-top:7px;font-size:10px;line-height:1.35;color:#727d8e;min-height:13px}#validation{color:#a22d34}.collapse{font-size:24px;padding:0 5px;color:#687588}.controls.collapsed{left:auto;width:auto;padding:8px 15px}.controls.collapsed .control-main,.controls.collapsed .calculator,.controls.collapsed .calculator-note{display:none}#expand{border:0;font-size:14px;padding:6px}.loading{position:fixed;inset:0;background:#dce5e8bd;backdrop-filter:blur(12px);display:grid;place-items:center;z-index:20}.loading-card{width:300px;border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:17px}.loading-card strong{font-size:29px;letter-spacing:-1.3px}.loading-card span{font-size:13px}.loading-track{height:3px;background:#cad2df;border-radius:5px;overflow:hidden}#loading-progress{width:8%;height:100%;background:#5f7cf1;transition:width .5s}.error{position:absolute;top:140px;left:50%;transform:translateX(-50%);max-width:600px;border-radius:15px;padding:22px;z-index:30;color:#8b2438}.pattern-heading{display:flex;align-items:center;justify-content:space-between;font-size:13px}.pattern-heading button{font-size:21px;padding:0 3px}#pattern-panel{position:absolute;right:22px;bottom:228px;width:220px;border-radius:12px;padding:12px}#pattern-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;margin-top:8px;padding:2px;background:#aaaeb0;border-radius:5px}#pattern-grid button{height:19px;border:1px solid #ffffff60;border-radius:2px;padding:0}.paint-mode{display:flex;gap:6px;margin-top:9px}.paint-mode button{flex:1;padding:5px;font-size:12px;border:1px solid #aeb7c488}#paint-hint{font-size:10px;color:#5e6a7a;line-height:1.45;margin:7px 0 0}.selection-overlay{position:fixed;border:1px solid #6486ff;background:#718ffc25;pointer-events:none;z-index:3}
@media(min-width:1600px){.controls{padding:19px 28px 10px}.calculator{gap:28px}.metric{min-width:160px}.segments button{font-size:14px}.product,.layouts>button{font-size:13px}.scene{width:140px}.scene img{width:132px;height:69px}.hint{bottom:242px}#pattern-panel{bottom:237px}.brand{padding:16px 21px}}
@media(max-width:1180px){.brand{gap:11px;padding:12px}.brand strong{font-size:22px}.brand span{font-size:13px;padding-left:11px}.scene{width:95px}.scene img{width:87px;height:46px}.control-main{gap:11px}.control-main fieldset{padding-right:11px}.segments{gap:3px}.segments button{padding:10px 7px;font-size:12px}.calculator{gap:12px}.calculator label{font-size:11px;gap:5px}.metric{min-width:98px;padding-left:12px}.metric output{font-size:18px}.metric.total output{font-size:21px}.pattern-swatch{width:54px}.color{width:34px;height:34px}#colors{gap:4px}.controls{left:14px;right:14px;padding:13px 14px 8px}}
@media(max-width:850px){.brand span{display:none}.scenes{top:12px;padding:5px;gap:3px}.scene{width:83px;font-size:11px}.scene img{width:75px;height:40px}.brand{top:13px;left:12px;padding:12px}.brand strong{font-size:20px}.view-controls{top:13px;right:12px;gap:0}.view-controls button{font-size:12px;padding:8px 10px}.view-controls .icon{display:none}.controls{bottom:10px;left:10px;right:10px}.control-main{display:grid;grid-template-columns:1fr 1.4fr;row-gap:12px}.control-main fieldset:nth-child(2){border:0}.control-main legend{margin-bottom:6px}.segments{height:48px}.control-main .color-group{border-right:1px solid var(--line);padding-right:11px}.control-main .layout-group{border:0}.layouts>button{display:flex;align-items:center;gap:7px;justify-content:center}.pattern-swatch{width:31px;height:25px;margin:0}.calculator{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.calculator label{justify-content:space-between;font-size:11px}.metric{min-width:0;padding-left:9px}.metric.total{margin:0}.price-field{margin:0}.collapse{position:absolute;right:6px;bottom:2px}.calculator-note{padding-right:18px;font-size:10px}#pattern-panel{bottom:323px;right:12px;width:195px}.hint{bottom:324px;left:12px;font-size:10px;max-width:calc(100% - 230px)}}
@media(max-width:520px){.brand{padding:10px;top:10px;left:9px}.brand strong{font-size:17px}.scenes{left:50%;top:63px;padding:5px}.scene{width:90px}.scene img{width:82px;height:42px}.view-controls{top:10px;right:9px}.controls{padding:12px 11px 6px;border-radius:13px}.control-main{gap:9px}.control-main legend{font-size:12px}.control-main fieldset{padding-right:8px}.surface-group{min-width:0}.segments{gap:2px;flex-wrap:wrap;height:50px;align-content:center}.segments button{font-size:11px;padding:7px 5px}.product{min-width:0;font-size:10px}.product small{font-size:8px}.product .product-tile{height:28px}.product-group legend a{font-size:9px}.color{width:30px;height:30px}#colors{padding:2px 0;gap:7px}.layouts{gap:2px}.layouts>button{display:block;font-size:10px}.pattern-swatch{width:39px;height:22px;margin:0 auto 3px}.calculator{gap:8px;margin-top:9px;padding-top:9px}.calculator label{display:block;font-size:10px}.input-wrap{height:31px;margin-top:3px;display:inline-flex;padding:0 6px}.input-wrap input{font-size:14px;width:36px}.input-wrap span{font-size:11px}.metric>span{font-size:9px}.metric output{font-size:17px}.metric.total output{font-size:19px}.price-field input{width:42px}.calculator-note{font-size:9px;max-width:100%}.hint{display:none}#pattern-panel{bottom:307px;width:172px;padding:9px}#pattern-grid button{height:17px}.pattern-heading{font-size:12px}}