.tile-studio-page{background:#edf6f5;color:var(--ink)}
.tile-studio-page button,.tile-studio-page input,.tile-studio-page select{font:inherit}
.tile-studio-page button{cursor:pointer}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.tile-studio-page svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.studio-header{position:sticky;top:0;z-index:80;background:rgba(237,246,245,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(13,37,43,.08)}
.studio-header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.studio-header .brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.studio-header .brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:#fff;box-shadow:var(--shadow-soft)}
.studio-header .brand-mark svg{width:31px;height:29px;stroke:var(--green-dark)}
.studio-header .brand-mark .roof{stroke:var(--blue)}
.studio-header .brand-copy{display:flex;flex-direction:column;line-height:.9}.studio-header .brand-copy strong{font-size:1.15rem;letter-spacing:.13em}.studio-header .brand-copy small{margin-top:6px;font-size:.62rem;letter-spacing:.37em;color:var(--muted)}
.studio-header-badge{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.68);border:1px solid rgba(13,37,43,.08);color:var(--green-dark);font-size:.66rem;font-weight:900;letter-spacing:.13em}
.studio-header-badge span{width:8px;height:8px;border-radius:50%;background:#4ee0a4;box-shadow:0 0 0 6px rgba(78,224,164,.12)}
.studio-back{display:flex;align-items:center;gap:8px;padding:11px 15px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft);font-size:.78rem;font-weight:800;color:var(--ink)}
.studio-back svg{width:17px;height:17px}
.studio-hero{position:relative;overflow:hidden;padding:92px 0 74px;background:radial-gradient(circle at 82% 12%,rgba(139,203,212,.34),transparent 27%),radial-gradient(circle at 13% 80%,rgba(86,159,137,.17),transparent 30%),linear-gradient(145deg,#eff8f6,#eaf3f5)}
.studio-hero:before{content:"";position:absolute;inset:0;opacity:.2;background-image:linear-gradient(rgba(13,37,43,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(13,37,43,.08) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent)}
.studio-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:70px;align-items:end}
.studio-hero-copy h1{max-width:970px;margin:18px 0 22px;font-size:clamp(3.4rem,7vw,7.25rem);line-height:.91;letter-spacing:-.065em}.studio-hero-copy h1 em{display:block;color:var(--green-dark);font-style:normal}.studio-hero-copy>p{max-width:790px;color:var(--muted);font-size:1.04rem;line-height:1.75}
.studio-proof-row{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:28px}.studio-proof-row span{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800}.studio-proof-row svg{width:17px;height:17px;color:var(--green)}
.studio-tech-card{padding:30px;border-radius:29px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.92);box-shadow:var(--shadow);backdrop-filter:blur(18px)}.studio-tech-card>span{font-size:.66rem;font-weight:900;letter-spacing:.16em;color:var(--blue-dark)}.studio-tech-card strong{display:block;margin:13px 0 10px;font-size:1.42rem;line-height:1.2}.studio-tech-card p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.6}
.studio-workspace-section{padding:100px 0 110px;background:linear-gradient(#edf6f5,#f6faf9)}
.studio-section-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:70px;align-items:end;margin-bottom:42px}.studio-section-head h2{margin:13px 0 0;font-size:clamp(2.6rem,5vw,5.1rem);line-height:.97;letter-spacing:-.055em}.studio-section-head h2 em{display:block;color:var(--green-dark);font-style:normal}.studio-section-head>p{margin:0 0 7px;color:var(--muted);line-height:1.7}
.studio-app{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);gap:24px;align-items:start}
.studio-photo-column,.studio-controls{padding:27px;border-radius:32px;background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow)}
.studio-controls{position:sticky;top:96px}
.studio-step-heading{display:flex;align-items:center;gap:13px;margin-bottom:21px}.studio-step-heading>span{display:grid;place-items:center;width:39px;height:39px;flex:none;border-radius:14px;background:linear-gradient(135deg,var(--green),var(--blue));color:#fff;font-size:.7rem;font-weight:900}.studio-step-heading>div{display:flex;flex-direction:column}.studio-step-heading strong{font-size:1rem}.studio-step-heading small{margin-top:2px;color:var(--muted);font-size:.72rem}
.photo-uploader{position:relative;min-height:590px;overflow:hidden;border-radius:25px;background:#dbe9e8;border:1px solid rgba(13,37,43,.1)}
.upload-empty,.image-processing{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px;text-align:center;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.88),rgba(236,246,244,.8)),url('../images/bathroom-luxury.jpg') center/cover}
.upload-empty:before,.image-processing:before{content:"";position:absolute;inset:0;background:rgba(238,247,245,.84);backdrop-filter:blur(4px)}.upload-empty>* ,.image-processing>*{position:relative;z-index:1}
.upload-icon{display:grid;place-items:center;width:70px;height:70px;margin-bottom:18px;border-radius:23px;background:linear-gradient(135deg,var(--green),var(--blue));color:#fff;box-shadow:0 18px 40px rgba(30,104,112,.2)}.upload-icon svg{width:32px;height:32px}.upload-empty strong{font-size:1.7rem;letter-spacing:-.025em}.upload-empty p{max-width:480px;margin:10px 0 22px;color:var(--muted);font-size:.86rem;line-height:1.6}.upload-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.upload-actions .button{min-width:165px}
.upload-preview{position:absolute;inset:0}.upload-preview img{width:100%;height:100%;object-fit:contain;background:#10272c}.preview-overlay{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 13px 11px 16px;border-radius:16px;background:rgba(7,28,33,.78);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(12px);color:#fff}.preview-overlay span{font-size:.73rem;font-weight:800}.preview-overlay button{display:flex;align-items:center;gap:7px;padding:9px 11px;border:0;border-radius:11px;background:#fff;color:var(--ink);font-size:.7rem;font-weight:850}.preview-overlay svg{width:15px;height:15px}
.image-processing{z-index:5}.image-processing strong{margin-top:17px;font-size:1.2rem}.image-processing p{margin:6px 0 0;color:var(--muted);font-size:.8rem}
.studio-spinner{display:inline-block;width:43px;height:43px;border:4px solid rgba(50,138,160,.18);border-top-color:var(--blue);border-radius:50%;animation:studio-spin .85s linear infinite}@keyframes studio-spin{to{transform:rotate(360deg)}}
.photo-tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:13px}.photo-tips article{display:flex;align-items:flex-start;gap:9px;padding:13px;border-radius:16px;background:#f4f9f8;border:1px solid var(--line)}.photo-tips span{display:grid;place-items:center;width:25px;height:25px;flex:none;border-radius:8px;background:#e1f0ed;color:var(--green-dark);font-size:.59rem;font-weight:900}.photo-tips p{margin:1px 0 0;color:var(--muted);font-size:.68rem;line-height:1.45}
.control-section{padding:0 0 20px;margin-bottom:20px;border-bottom:1px solid var(--line)}.control-title{display:flex;align-items:center;gap:12px;margin-bottom:13px}.control-title>span{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,rgba(78,158,137,.15),rgba(50,138,160,.15));color:var(--blue-dark);font-size:.69rem;font-weight:900}.control-title div{display:flex;flex-direction:column}.control-title strong{font-size:.9rem}.control-title small{color:var(--muted);font-size:.68rem}
.segmented-control{display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:17px;background:#edf4f3}.segmented-control button{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border:0;border-radius:13px;background:transparent;color:var(--muted);font-weight:800}.segmented-control button.active{background:#fff;color:var(--blue-dark);box-shadow:0 8px 20px rgba(13,37,43,.08)}.segmented-control svg{width:18px;height:18px}
.material-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.material-option{display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px 5px 9px;border-radius:15px;border:1px solid var(--line);background:#fff;color:var(--muted);font-size:.64rem;font-weight:800;transition:.2s var(--ease)}button.material-option:hover,.material-option.active{border-color:rgba(50,138,160,.52);box-shadow:0 0 0 3px rgba(139,203,212,.16);color:var(--ink)}.material-option i{display:block;width:100%;height:42px;border-radius:10px;border:1px solid rgba(13,37,43,.08);overflow:hidden}.material-calacatta{background:linear-gradient(118deg,#efeee8 0 38%,#aaaeb0 39% 41%,#f6f4ed 42% 67%,#c6c7c5 68% 70%,#ebe9e2 71%)}.material-travertine{background:repeating-linear-gradient(176deg,#d7c9ae 0 8px,#b9a78c 9px 11px,#dccfb8 12px 19px)}.material-sage{background:linear-gradient(145deg,#78947a,#55745e)}.material-ocean{background:linear-gradient(145deg,#46788b,#244a5b)}.material-graphite{background:linear-gradient(145deg,#606567,#2d3234)}.material-terracotta{background:linear-gradient(145deg,#bb7057,#8c4737)}.material-mustard{background:linear-gradient(145deg,#e0bd27,#b88d0b)}.custom-color{position:relative;cursor:pointer}.custom-color input{position:absolute;opacity:0;pointer-events:none}.custom-color i{background:linear-gradient(135deg,#4d8d82,#6ab2a3)}
.control-grid-two,.custom-size-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.field-control{display:flex;flex-direction:column;gap:7px}.field-control>span{font-size:.73rem;font-weight:800;color:var(--ink-2)}.field-control select,.field-control input{width:100%;min-width:0;padding:12px;border-radius:14px;border:1px solid var(--line);background:#f8fbfa;color:var(--ink);outline:none}.field-control select:focus,.field-control input:focus{border-color:rgba(50,138,160,.45);box-shadow:0 0 0 4px rgba(139,203,212,.17)}.unit-input{display:flex;align-items:center;border-radius:14px;border:1px solid var(--line);background:#f8fbfa;overflow:hidden}.unit-input input{border:0;background:transparent}.unit-input b{padding:0 12px;color:var(--muted);font-size:.7rem}.custom-grout{margin:-8px 0 20px}.custom-grout input{height:46px;padding:5px}.finish-section{margin-bottom:15px}
.studio-summary{padding:16px;border-radius:19px;background:linear-gradient(145deg,#edf6f4,#eef5f8);border:1px solid rgba(50,138,160,.1)}.studio-summary>span{display:block;color:var(--green-dark);font-size:.61rem;font-weight:900;letter-spacing:.13em}.studio-summary strong{display:block;margin:7px 0 3px;font-size:.85rem}.studio-summary p{margin:0;color:var(--muted);font-size:.7rem;line-height:1.5}
.studio-consent{display:flex;align-items:flex-start;gap:10px;margin:14px 2px 0;color:var(--muted);font-size:.68rem;line-height:1.5;cursor:pointer}.studio-consent input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--green)}.studio-render-button{width:100%;margin-top:14px}.studio-render-button:disabled{opacity:.48;cursor:not-allowed;transform:none}.studio-disclaimer{margin:11px 2px 0;color:var(--muted);font-size:.65rem;line-height:1.5}.studio-secondary-button{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.render-status-section{padding:0 0 85px;background:#f6faf9}.render-status-card{display:flex;align-items:center;gap:19px;padding:25px 28px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft)}.render-status-card .studio-spinner{width:38px;height:38px;flex:none}.render-status-card strong{font-size:1rem}.render-status-card p{margin:4px 0 0;color:var(--muted);font-size:.78rem}
.studio-result-section{padding:100px 0 115px;background:#f6faf9;border-top:1px solid rgba(13,37,43,.06)}.result-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr);gap:22px;align-items:start}.compare-shell{position:relative;min-height:650px;overflow:hidden;border-radius:30px;background:#10272c;box-shadow:var(--shadow)}.compare-shell img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#10272c}.compare-after-wrap{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 50% 0 0)}.compare-after{max-width:none}.compare-shell input{position:absolute;inset:0;width:100%;height:100%;z-index:6;opacity:0;cursor:ew-resize}.compare-divider{position:absolute;z-index:5;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 18px rgba(0,0,0,.42);pointer-events:none}.compare-divider span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--ink);font-weight:900;box-shadow:0 10px 28px rgba(0,0,0,.25)}.compare-label{position:absolute;z-index:4;top:17px;padding:8px 11px;border-radius:10px;background:rgba(7,28,33,.72);backdrop-filter:blur(8px);color:#fff;font-size:.62rem;font-weight:900;letter-spacing:.12em}.compare-label.before{left:17px}.compare-label.after{right:17px}
.result-card{position:sticky;top:96px;padding:27px;border-radius:29px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}.result-card>span{font-size:.63rem;font-weight:900;letter-spacing:.14em;color:var(--green-dark)}.result-card h3{margin:13px 0 7px;font-size:1.55rem;line-height:1.16}.result-card>p{color:var(--muted);font-size:.78rem;line-height:1.55}.result-actions{display:grid;gap:9px;margin-top:22px}.result-actions .button{width:100%}.studio-whatsapp-button{background:#1ba45b;color:#fff;box-shadow:0 15px 32px rgba(27,164,91,.2)}.result-note{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0!important;font-size:.68rem!important}.result-note svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--blue-dark)}
.studio-marketing{padding:100px 0;background:linear-gradient(145deg,#12343d,#0c252b);color:#fff}.studio-section-head.light h2 em{color:#a7e2d8;background:none;-webkit-text-fill-color:initial}.studio-section-head.light>p{color:rgba(255,255,255,.66)}.studio-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.studio-benefits article{padding:26px;border-radius:25px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}.studio-benefits span{display:inline-grid;place-items:center;width:39px;height:39px;border-radius:13px;background:rgba(168,228,218,.11);color:#a8e4da;font-size:.72rem;font-weight:900}.studio-benefits strong{display:block;margin:17px 0 8px;font-size:1.15rem}.studio-benefits p{margin:0;color:rgba(255,255,255,.67);font-size:.86rem;line-height:1.55}
.studio-footer{padding:28px 0;background:#081b20;color:#fff}.studio-footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}.studio-footer-inner>div{display:flex;align-items:center;gap:15px}.studio-footer strong{letter-spacing:.08em}.studio-footer span,.studio-footer a{color:rgba(255,255,255,.62);font-size:.78rem}.studio-toast{position:fixed;left:50%;bottom:24px;z-index:120;transform:translate(-50%,25px);max-width:min(560px,calc(100% - 28px));padding:13px 17px;border-radius:16px;background:#0c252b;color:#fff;box-shadow:0 20px 50px rgba(0,0,0,.28);opacity:0;visibility:hidden;transition:.25s var(--ease);text-align:center;font-size:.8rem;font-weight:750}.studio-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
[hidden]{display:none!important}
@media(max-width:1100px){.studio-hero-grid,.studio-section-head,.studio-app,.result-layout{grid-template-columns:1fr}.studio-tech-card{max-width:620px}.studio-controls,.result-card{position:relative;top:auto}.photo-uploader{min-height:650px}.compare-shell{min-height:660px}}
@media(max-width:760px){.studio-header-badge{display:none}.studio-back{padding:10px 13px;font-size:.73rem}.studio-hero{padding:60px 0 46px}.studio-hero-copy h1{font-size:clamp(2.65rem,12vw,4.7rem)}.studio-workspace-section,.studio-result-section{padding:72px 0 84px}.studio-section-head{gap:18px;margin-bottom:28px}.studio-section-head h2{font-size:clamp(2.25rem,10vw,3.8rem)}.studio-photo-column,.studio-controls{padding:19px;border-radius:25px}.photo-uploader{min-height:62svh;border-radius:21px}.photo-tips{grid-template-columns:1fr}.photo-tips article{padding:11px 13px}.material-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.material-option i{height:36px}.material-option span{font-size:.59rem}.control-grid-two,.custom-size-grid{grid-template-columns:1fr 1fr}.upload-actions{width:100%;flex-direction:column}.upload-actions .button{width:100%}.compare-shell{min-height:62svh;border-radius:23px}.studio-benefits{grid-template-columns:1fr}.studio-footer-inner{align-items:flex-start;flex-direction:column}.studio-footer-inner>div{flex-wrap:wrap}}
@media(max-width:460px){.container{width:min(100% - 22px,1220px)}.studio-header .brand-copy strong{font-size:1.02rem}.studio-header .brand-mark{width:42px;height:42px}.studio-back svg{display:none}.studio-hero-copy>p{font-size:.92rem}.studio-proof-row{display:grid;gap:10px}.studio-photo-column,.studio-controls{padding:14px}.photo-uploader{min-height:58svh}.upload-empty{padding:24px}.upload-empty strong{font-size:1.42rem}.control-grid-two,.custom-size-grid{grid-template-columns:1fr}.material-grid{gap:6px}.material-option{padding-inline:3px}.preview-overlay{left:9px;right:9px;bottom:9px}.preview-overlay span{max-width:55%;font-size:.64rem}.compare-shell{min-height:56svh}.render-status-card{padding:20px}.studio-result-section{padding-top:70px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}