/* ===== DEKOART — Devor vizualizatori ===== */
:root{
  --ink:#181B2E; --bronze:#2C3E80; --bronze-dark:#1E2C5E; --stone:#6C7088;
  --beige:#EEEFF6; --white:#FFFFFF; --text:#5B6270;
  --line:#E2E2EE; --line-soft:#ECECF5;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --shadow-sm:0 6px 18px rgba(26,26,26,.06);
  --shadow-md:0 18px 50px rgba(26,26,26,.10);
  --shadow-lg:0 40px 90px rgba(20,22,45,.18);
  --container:1320px; --gut:clamp(20px,4vw,56px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --f-head:'Montserrat',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
}
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gut);}

/* ---- Hero ---- */
.vzhero{padding:clamp(28px,5vw,60px) 0 8px;}
.vzhero .crumbs{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--stone);margin-bottom:18px;}
.vzhero .crumbs a{color:var(--stone);text-decoration:none;}
.vzhero .crumbs a:hover{color:var(--bronze);}
.vzhero .crumbs .i{width:15px;height:15px;}
.vzhero .eyebrow{display:inline-block;font-family:var(--f-head);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);}
.vzhero h1{font-family:var(--f-head);font-weight:800;line-height:1.04;letter-spacing:-.02em;color:var(--ink);font-size:clamp(30px,5vw,54px);margin:12px 0 14px;}
.vzhero p{max-width:640px;color:var(--text);font-size:clamp(15px,1.4vw,17px);line-height:1.6;}

/* ---- Layout ---- */
.vz{display:grid;grid-template-columns:1fr minmax(320px,380px);gap:clamp(18px,2.4vw,34px);padding:clamp(20px,3vw,40px) 0 clamp(60px,8vw,120px);align-items:start;}
@media(max-width:920px){.vz{grid-template-columns:1fr;}}

/* ======================================================
   STAGE — bo'yalayotgan devor
   ====================================================== */
.stage{
  position:relative;aspect-ratio:4/3;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow-lg);isolation:isolate;cursor:ew-resize;
  background:#e4e0d9;user-select:none;-webkit-user-select:none;touch-action:none;
}
@media(max-width:520px){.stage{aspect-ratio:3/3.4;}}

/* Devor teksturalari (prosessual — rasmsiz ham chiroyli) */
.stage__wall{position:absolute;inset:0;background-size:cover,cover;background-position:center;transition:opacity .5s var(--ease),filter .6s var(--ease);}
.wall--plaster{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23f)'/%3E%3C/svg%3E"),
    radial-gradient(130% 110% at 30% 22%, #f6f4f0 0%, #e6e2db 62%, #d8d3ca 100%);
  background-size:340px 340px, cover;background-blend-mode:soft-light,normal;
}
.wall--travertine{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.03' numOctaves='5' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='360' height='360' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #f1ece3 0%, #e4dccd 55%, #d6cab5 100%);
  background-size:380px 380px, cover;background-blend-mode:soft-light,normal;
}
.wall--concrete{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='340' height='340' filter='url(%23f)'/%3E%3C/svg%3E"),
    radial-gradient(120% 120% at 40% 28%, #ecebec 0%, #dadadc 60%, #c9cacc 100%);
  background-size:300px 300px, cover;background-blend-mode:soft-light,normal;
}
.wall--stucco{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='2' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)'/%3E%3C/svg%3E"),
    radial-gradient(130% 110% at 35% 20%, #f2efe9 0%, #e2ddd3 60%, #d2ccc0 100%);
  background-size:220px 220px, cover;background-blend-mode:soft-light,normal;
}

/* Canvas — piksel darajasida qayta ranglash (rasm rejimi) */
.stage__canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;z-index:2;
  clip-path:inset(0 0 0 var(--split));transition:clip-path .05s linear;}
.stage.mode-target .stage__canvas{display:block;}
.stage.mode-target #paintColor,.stage.mode-target #paintMul{display:none;}

/* Bo'yoq qatlamlari — teksturaga blend qilinadi, o'ng tomonga clip qilingan */
.stage__paint{
  position:absolute;inset:0;background:var(--paint,transparent);
  clip-path:inset(0 0 0 var(--split));
  transition:background-color .65s var(--ease), opacity .4s var(--ease), clip-path .05s linear;
  will-change:clip-path,background-color;pointer-events:none;
}
#paintColor{mix-blend-mode:color;opacity:var(--pc,0);}
.stage__paint--mul{mix-blend-mode:multiply;opacity:var(--pm,0);}

/* Yorug'lik pardasi (realizm uchun) — chapdan-yuqoridan yorug' */
.stage__sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(80% 70% at 26% 14%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
             linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.14));}
/* Splash — rang tanlanganda tarqaladigan to'lqin */
.stage__splash{position:absolute;left:var(--sx,50%);top:var(--sy,50%);width:10px;height:10px;
  border-radius:50%;background:var(--paint,#fff);transform:translate(-50%,-50%) scale(0);
  opacity:0;pointer-events:none;mix-blend-mode:color;z-index:3;}
.stage__splash.go{animation:splash .9s var(--ease) forwards;}
@keyframes splash{0%{transform:translate(-50%,-50%) scale(0);opacity:.9;}
  70%{opacity:.55;}100%{transform:translate(-50%,-50%) scale(60);opacity:0;}}

/* Before / After ajratgich */
.divider{position:absolute;top:0;bottom:0;left:var(--split);transform:translateX(-50%);
  width:40px;display:flex;align-items:center;justify-content:center;z-index:5;cursor:ew-resize;}
.divider__line{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);
  background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(20,22,45,.12),0 2px 12px rgba(0,0,0,.25);}
.divider__grip{position:relative;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.96);
  display:flex;align-items:center;justify-content:center;color:var(--bronze);
  box-shadow:0 8px 26px rgba(20,22,45,.28);transition:transform .25s var(--ease-spring);}
.divider__grip .i{width:20px;height:20px;}
.divider:hover .divider__grip,.divider:focus-visible .divider__grip{transform:scale(1.12);}
.divider:active .divider__grip{transform:scale(.96);}
.stage.dragging .stage__wall{cursor:ew-resize;}

/* Sahna teglari */
.stage__tag{position:absolute;top:14px;z-index:4;font-family:var(--f-head);font-weight:700;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill);
  backdrop-filter:blur(6px);background:rgba(20,22,45,.42);color:#fff;pointer-events:none;
  opacity:0;transition:opacity .35s var(--ease);}
.stage.painted .stage__tag{opacity:1;}
.stage__tag--before{left:14px;}
.stage__tag--after{right:14px;background:rgba(44,62,128,.6);}

/* Boshlang'ich maslahat */
.stage__hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;
  display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#fff;
  padding:9px 16px;border-radius:var(--r-pill);background:rgba(20,22,45,.5);backdrop-filter:blur(6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);animation:hintPulse 2.4s ease-in-out infinite;}
.stage__hint .i{width:16px;height:16px;}
.stage.painted .stage__hint{opacity:0;transform:translate(-50%,10px);pointer-events:none;animation:none;}
@keyframes hintPulse{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,-5px);}}

/* ---- Asboblar ---- */
.tools{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:space-between;margin-top:18px;}
.tool--slider{display:flex;align-items:center;gap:12px;flex:1 1 240px;min-width:220px;}
.tool--slider label{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;}
.tool--slider label .i{width:16px;height:16px;color:var(--bronze);}
.tool--btns{display:flex;gap:10px;flex-wrap:wrap;}

input[type=range]#strength{-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--bronze),var(--bronze) var(--fill,80%),var(--line) var(--fill,80%));cursor:pointer;}
#strength::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--white);
  border:2px solid var(--bronze);box-shadow:var(--shadow-sm);transition:transform .15s var(--ease-spring);}
#strength::-webkit-slider-thumb:active{transform:scale(1.25);}
#strength::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--white);border:2px solid var(--bronze);}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-head);font-weight:700;font-size:14px;
  border-radius:var(--r-pill);padding:12px 22px;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),color .2s var(--ease);}
.btn .i{width:17px;height:17px;}
.btn--sm{padding:9px 15px;font-size:13px;}
.btn--bronze{background:var(--bronze);color:#fff;box-shadow:0 10px 24px rgba(44,62,128,.28);}
.btn--bronze:hover{background:var(--bronze-dark);transform:translateY(-2px);box-shadow:0 16px 32px rgba(44,62,128,.34);}
.btn--outline{background:var(--white);color:var(--ink);border-color:var(--line);}
.btn--outline:hover{border-color:var(--bronze);color:var(--bronze);transform:translateY(-2px);}

/* ---- Sahna tanlash ---- */
.scenes{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap;}
.scenes__label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);margin-right:4px;}
.scene{width:52px;height:40px;border-radius:10px;padding:0;border:2px solid transparent;background:none;cursor:pointer;
  overflow:hidden;position:relative;transition:transform .2s var(--ease-spring),border-color .2s var(--ease),box-shadow .2s var(--ease);}
.scene__sw{position:absolute;inset:0;background-size:cover;background-position:center;}
.scene:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);}
.scene.on{border-color:var(--bronze);box-shadow:0 6px 16px rgba(44,62,128,.22);}
.scene.on::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px #fff;border-radius:8px;}

/* ======================================================
   PANEL — palitra
   ====================================================== */
.vz__panel{position:sticky;top:24px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:18px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:14px;}
@media(max-width:920px){.vz__panel{position:static;}}

/* Tanlangan rang */
.picked{display:flex;align-items:center;gap:14px;padding:12px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#fbfbfe,#f3f4fa);border:1px solid var(--line-soft);}
.picked__chip{width:52px;height:52px;border-radius:14px;flex:none;background:var(--paint,#e6e2db);
  box-shadow:inset 0 0 0 1px rgba(20,22,45,.08),var(--shadow-sm);transition:background-color .5s var(--ease);}
.picked__meta{flex:1;min-width:0;}
.picked__name{font-family:var(--f-head);font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.picked__code{font-size:12.5px;color:var(--stone);font-variant-numeric:tabular-nums;margin-top:2px;}
.picked__custom{position:relative;width:40px;height:40px;flex:none;border-radius:12px;border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--stone);cursor:pointer;transition:.2s var(--ease);}
.picked__custom:hover{border-color:var(--bronze);color:var(--bronze);}
.picked__custom .i{width:18px;height:18px;pointer-events:none;}
.picked__custom input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer;}
.picked.flash{animation:pickedFlash .5s var(--ease);}
@keyframes pickedFlash{0%{transform:scale(1);}40%{transform:scale(1.02);}100%{transform:scale(1);}}

/* Qidiruv */
.vzsearch{position:relative;display:flex;align-items:center;}
.vzsearch .i{position:absolute;left:14px;width:17px;height:17px;color:var(--stone);pointer-events:none;}
.vzsearch input{width:100%;border:1px solid var(--line);border-radius:var(--r-pill);padding:11px 16px 11px 40px;
  font-family:var(--f-body);font-size:14px;color:var(--ink);outline:none;transition:.2s var(--ease);background:var(--white);}
.vzsearch input:focus{border-color:var(--bronze);box-shadow:0 0 0 4px rgba(44,62,128,.1);}

/* Oila chips */
.vzchips{display:flex;flex-wrap:wrap;gap:7px;}
.chip{font-family:var(--f-body);font-size:12.5px;font-weight:600;color:var(--text);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 13px;cursor:pointer;transition:.18s var(--ease);}
.chip:hover{border-color:var(--bronze);color:var(--bronze);}
.chip.on{background:var(--bronze);border-color:var(--bronze);color:#fff;}

/* Ranglar grid */
.swgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:9px;
  max-height:340px;overflow-y:auto;padding:4px 4px 6px;margin:-4px;scrollbar-width:thin;}
.swgrid::-webkit-scrollbar{width:6px;}
.swgrid::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;}
.sw{aspect-ratio:1;border-radius:12px;border:none;padding:0;cursor:pointer;position:relative;background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(20,22,45,.08);opacity:0;transform:translateY(8px) scale(.9);
  animation:swIn .4s var(--ease-spring) forwards;animation-delay:calc(var(--i,0)*14ms);
  transition:transform .2s var(--ease-spring),box-shadow .2s var(--ease);}
@keyframes swIn{to{opacity:1;transform:translateY(0) scale(1);}}
.sw:hover{transform:translateY(-3px) scale(1.06);box-shadow:inset 0 0 0 1px rgba(20,22,45,.12),var(--shadow-sm);z-index:2;}
.sw__dot{position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 0 var(--bronze);transition:box-shadow .2s var(--ease);}
.sw.on{transform:translateY(-2px) scale(1.06);}
.sw.on .sw__dot{box-shadow:inset 0 0 0 3px #fff,0 0 0 3px var(--bronze);}
.sw.on::after{content:"";position:absolute;top:50%;left:50%;width:14px;height:14px;transform:translate(-50%,-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));animation:tick .3s var(--ease-spring);}
@keyframes tick{from{transform:translate(-50%,-50%) scale(0);}to{transform:translate(-50%,-50%) scale(1);}}
.sw[hidden]{display:none;}

.sw-empty{display:flex;align-items:center;gap:8px;justify-content:center;color:var(--stone);font-size:14px;padding:24px 0;}
.sw-empty .i{width:18px;height:18px;}

.vz__cta{justify-content:center;margin-top:2px;}

@media(prefers-reduced-motion:reduce){
  *,.sw,.stage__splash{animation:none!important;transition:none!important;}
}