/* Grafica ricavata dalla demo «Pergola — App demo»: Jost, nero con vetro, linee sottili, pulsanti a pillola, luce LED. */

:root{
  color-scheme: dark;
  --bg0:#040506; --bg1:#0f1114; --bg2:#181b1f;
  --glass:rgba(22,25,29,.62); --glass2:rgba(255,255,255,.04);
  --hair:rgba(255,255,255,.09); --hair2:rgba(255,255,255,.16);
  --text:#eceef0; --muted:#80868d; --dim:#53585e;
  --alu:#a3a8ae; --led:#f4f8ff; --warm:#c9a37d; --ok:#9fd3b4; --alert:#e3a08a;
  --r-s:12px; --r-m:20px; --r-l:28px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --font:'Jost','Avenir Next','Helvetica Neue',Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;height:100%;background:var(--bg0);color:var(--text);font-family:var(--font);font-weight:300;letter-spacing:.01em;-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:1px solid var(--led);outline-offset:3px}
svg{display:block}
#app{position:relative;margin:0 auto;max-width:460px;height:100%;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,#15181c 0%,var(--bg0) 62%)}
@media (min-width:600px){
  body{background:#020203;display:flex;align-items:center;justify-content:center}
  :root{padding:0}
  #app{height:min(920px,96vh);width:430px;border-radius:44px;border:1px solid var(--hair);box-shadow:0 40px 120px rgba(0,0,0,.7)}
}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:none;flex-direction:column;opacity:0;transition:opacity .45s var(--ease)}
.screen.on{display:flex}
.screen.vis{opacity:1}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 22px 120px}
.scroll::-webkit-scrollbar{display:none}

/* ---------- type ---------- */
.h1{font-size:34px;font-weight:200;line-height:1.08;letter-spacing:-.01em;margin:0}
.h2{font-size:22px;font-weight:300;margin:0;letter-spacing:0}
.h3{font-size:16px;font-weight:400;margin:0}
.sub{color:var(--muted);font-size:14px;line-height:1.55;margin:0}
.small{font-size:12px;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* ---------- common ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 10px;min-height:64px;flex:none}
.iconbtn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--hair);background:var(--glass2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:relative;transition:border-color .2s}
.iconbtn:active{transform:scale(.96)}
.iconbtn .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--warm);box-shadow:0 0 10px var(--warm)}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;height:54px;border-radius:999px;padding:0 26px;font-size:15px;font-weight:400;letter-spacing:.02em;transition:transform .15s,background .2s,border-color .2s;width:100%}
.btn:active{transform:scale(.985)}
.btn-pri{background:linear-gradient(180deg,#f6f7f8,#d6d9dc);color:#0b0c0e;box-shadow:0 10px 30px rgba(255,255,255,.08),inset 0 1px 0 #fff}
.btn-sec{border:1px solid var(--hair2);background:var(--glass2);color:var(--text)}
.btn-ghost{color:var(--muted);height:44px}
.btn[disabled]{opacity:.35;pointer-events:none}
.row{display:flex;align-items:center;gap:12px}
.between{justify-content:space-between}
.hairline{height:1px;background:linear-gradient(90deg,transparent,var(--hair2),transparent);border:0;margin:22px 0}
.chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--hair);font-size:13px;color:var(--alu);background:var(--glass2);white-space:nowrap}
.chip.on{border-color:var(--led);color:var(--text);box-shadow:0 0 0 1px rgba(244,248,255,.25),0 0 22px rgba(244,248,255,.08)}
.panel{border:1px solid var(--hair);border-radius:var(--r-m);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));padding:18px}
.ledline{height:1px;background:var(--led);box-shadow:0 0 6px var(--led),0 0 18px rgba(244,248,255,.6);border-radius:1px}

/* ---------- inputs ---------- */
.field{position:relative;margin-bottom:14px}
.field input{width:100%;height:56px;border-radius:16px;border:1px solid var(--hair);background:rgba(255,255,255,.03);padding:22px 18px 6px;font-size:15px;outline:none;transition:border-color .2s,background .2s}
.field input:focus{border-color:rgba(244,248,255,.5);background:rgba(255,255,255,.05)}
.field label{position:absolute;left:18px;top:18px;font-size:15px;color:var(--muted);pointer-events:none;transition:all .2s var(--ease)}
.field input:focus+label,.field input:not(:placeholder-shown)+label{top:9px;font-size:11px;letter-spacing:.04em}
.seg{display:flex;padding:4px;border-radius:999px;border:1px solid var(--hair);background:rgba(0,0,0,.35);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.seg button{flex:1;height:36px;border-radius:999px;font-size:13px;color:var(--muted);transition:all .25s var(--ease);padding:0 12px;white-space:nowrap}
.seg button.on{background:rgba(255,255,255,.1);color:var(--text);box-shadow:inset 0 0 0 1px var(--hair2)}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(90deg,var(--led) 0,var(--led) var(--p,50%),rgba(255,255,255,.12) var(--p,50%))}
input[type=range]::-moz-range-track{height:2px;background:rgba(255,255,255,.12)}
input[type=range]::-moz-range-progress{height:2px;background:var(--led)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;border-radius:50%;background:#f3f4f5;box-shadow:0 0 0 5px rgba(255,255,255,.07),0 4px 14px rgba(0,0,0,.5)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#f3f4f5}

.switch{position:relative;width:50px;height:30px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--hair);transition:background .25s;flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#8c9197;transition:all .3s var(--ease)}
.switch.on{background:rgba(244,248,255,.18);border-color:rgba(244,248,255,.45)}
.switch.on::after{left:23px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.7)}

/* ---------- login ---------- */
#s-login{background:radial-gradient(90% 60% at 50% 18%,#1d2126 0%,#0b0c0e 55%,#020203 100%)}
.login-art{position:relative;height:42%;min-height:260px;display:grid;place-items:center;flex:none}
.login-art svg{width:190px;height:190px;overflow:visible}
.diamond{fill:none;stroke:var(--led);stroke-width:1.2;stroke-dasharray:520;stroke-dashoffset:520;filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 14px rgba(230,240,255,.8));animation:draw 2.4s var(--ease) .3s forwards}
.diamond-floor{fill:url(#floorGlow);opacity:0;animation:fade 2s ease 1.6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
.login-body{flex:1;padding:0 26px 30px;display:flex;flex-direction:column;opacity:0;transform:translateY(14px);animation:rise 1s var(--ease) .9s forwards}
@keyframes rise{to{opacity:1;transform:none}}
.brand-ph{font-size:13px;letter-spacing:.42em;color:var(--alu);text-align:center;margin:0 0 30px;font-weight:300;padding-left:.42em}
.social{display:flex;gap:10px;margin-top:4px}
.social .btn{height:50px;font-size:14px}

/* ---------- home ---------- */
.greet{padding:4px 0 26px}
.hero-card{position:relative;border-radius:var(--r-l);overflow:hidden;height:300px;border:1px solid var(--hair);background:radial-gradient(80% 70% at 50% 85%,#1d2228,#0b0d10 70%);display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
.hero-card canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.hero-card .content{position:relative;z-index:2}
.hero-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,6,7,.85));pointer-events:none;z-index:1}
.section-t{display:flex;justify-content:space-between;align-items:baseline;margin:34px 0 14px}
.section-t a{font-size:13px;color:var(--muted);cursor:pointer}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{border:1px solid var(--hair);border-radius:var(--r-m);padding:18px;min-height:128px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.008))}
.tile:active{transform:scale(.985)}
.tile svg{opacity:.85}
.hscroll{display:flex;gap:12px;overflow-x:auto;margin:0 -22px;padding:0 22px 4px;scroll-snap-type:x mandatory}
.hscroll::-webkit-scrollbar{display:none}
.pcard{flex:none;width:72%;scroll-snap-align:start;border:1px solid var(--hair);border-radius:var(--r-m);overflow:hidden;text-align:left;background:var(--bg1)}
.pcard .thumb{aspect-ratio:4/3;background:#0c0e10 center/cover no-repeat}
.pcard .meta{padding:14px 16px}
.empty{border:1px dashed var(--hair2);border-radius:var(--r-m);padding:26px 20px;text-align:center}

/* ---------- nav ---------- */
#nav{position:absolute;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));height:70px;border-radius:26px;border:1px solid var(--hair);background:rgba(14,16,19,.72);backdrop-filter:blur(26px) saturate(140%);-webkit-backdrop-filter:blur(26px) saturate(140%);display:none;align-items:center;justify-content:space-around;z-index:40;padding:0 6px}
#nav.on{display:flex}
#nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;color:var(--dim);transition:color .2s;letter-spacing:.03em}
#nav button.on{color:var(--text)}
#nav button.on svg{filter:drop-shadow(0 0 6px rgba(255,255,255,.5))}
#nav .plus{flex:none;width:54px;height:54px;border-radius:50%;background:linear-gradient(180deg,#f6f7f8,#cfd3d7);color:#0b0c0e;display:grid;place-items:center;margin:0 4px;box-shadow:0 8px 24px rgba(255,255,255,.12)}

/* ---------- configurator ---------- */
#s-config{background:#07080a}
.viewer{position:absolute;inset:0;overflow:hidden;background:radial-gradient(90% 60% at 50% 40%,#1b1f24 0%,#0c0e10 55%,#060708 100%);touch-action:none}
.viewer.day{background:radial-gradient(90% 70% at 50% 30%,#3a4048 0%,#1d2126 55%,#121417 100%)}
.viewer.photo{background-size:cover;background-position:center}
.viewer canvas{display:block;width:100%!important;height:100%!important}
.cfg-top{position:absolute;top:0;left:0;right:0;z-index:10;padding:16px 16px 0;background:linear-gradient(180deg,rgba(4,5,6,.7),transparent)}
.cfg-top .row{gap:10px}
.cfg-name{flex:1;min-width:0;text-align:center}
.cfg-name input{background:transparent;border:0;outline:none;text-align:center;width:100%;font-size:15px;font-weight:400}
.cfg-views{margin-top:12px}
.plan{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:130px 10px 130px;background:radial-gradient(90% 60% at 50% 45%,#16191d,#08090b);z-index:3}
.plan.on{display:flex}
.plan svg{width:100%;height:100%}
.fab{position:absolute;right:18px;bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:25;width:66px;height:66px;border-radius:50%;background:linear-gradient(180deg,#f7f8f9,#cdd1d5);color:#0b0c0e;display:grid;place-items:center;box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 0 8px rgba(255,255,255,.05);transition:transform .35s var(--ease)}
.fab.open{transform:rotate(45deg)}
.price-pill{position:absolute;left:18px;bottom:calc(36px + env(safe-area-inset-bottom,0px));z-index:12;padding:10px 16px;border-radius:999px;border:1px solid var(--hair);background:rgba(8,9,11,.66);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.price-pill{text-align:left}.price-pill b{font-weight:400;font-size:17px;display:flex;align-items:center;gap:6px}.price-pill b::after{content:"";width:6px;height:6px;border-right:1px solid var(--alu);border-bottom:1px solid var(--alu);transform:rotate(-45deg);margin-left:2px}
.joy{position:absolute;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));width:98px;height:98px;margin-left:-49px;border-radius:50%;border:1px solid var(--hair2);background:rgba(10,12,14,.42);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:none;z-index:6;touch-action:none;cursor:grab}
.viewer.walk .joy{display:block}
.joy i{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px;border-radius:50%;background:linear-gradient(180deg,#f7f8f9,#cdd1d5);box-shadow:0 6px 18px rgba(0,0,0,.5);transition:transform .08s}
.joy.on i{transition:none}
.joy::before{content:"";position:absolute;inset:10px;border-radius:50%;border:1px dashed rgba(255,255,255,.12)}
.hint{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(136px + env(safe-area-inset-bottom,0px));z-index:9;font-size:12px;color:var(--alu);padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);white-space:nowrap;pointer-events:none;transition:opacity .4s}
.side-tools{position:absolute;right:18px;top:150px;z-index:9;display:flex;flex-direction:column;gap:10px}
.photo-cta{position:absolute;inset:0;z-index:8;display:none;flex-direction:column;align-items:center;justify-content:center;padding:40px 30px;text-align:center;background:radial-gradient(80% 50% at 50% 50%,rgba(20,23,27,.9),rgba(6,7,8,.96))}
.photo-cta.on{display:flex}
.photo-cta .frame{width:180px;height:220px;border-radius:24px;border:1px solid var(--hair2);display:grid;place-items:center;margin-bottom:30px;position:relative}
.photo-cta .frame::before,.photo-cta .frame::after{content:"";position:absolute;left:24px;right:24px;height:1px;background:var(--led);box-shadow:0 0 10px var(--led);opacity:.8}
.photo-cta .frame::before{top:-1px}.photo-cta .frame::after{bottom:-1px}

/* sheet */
.sheet-bg{position:absolute;inset:0;z-index:20;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .35s}
.sheet-bg.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:21;max-height:68%;display:flex;flex-direction:column;border-radius:30px 30px 0 0;border-top:1px solid var(--hair2);background:rgba(12,14,17,.9);backdrop-filter:blur(30px) saturate(140%);-webkit-backdrop-filter:blur(30px) saturate(140%);transform:translateY(105%);transition:transform .5s var(--ease);padding-bottom:env(safe-area-inset-bottom,0px)}
.sheet.on{transform:none}
.sheet .grab{width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.2);margin:10px auto 6px;flex:none}
.sheet .tabs{display:flex;gap:8px;overflow-x:auto;padding:8px 20px 14px;flex:none}
.sheet .tabs::-webkit-scrollbar{display:none}
.sheet .body{overflow-y:auto;padding:4px 22px 110px}
.opt{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--hair);gap:14px}
.opt:last-child{border-bottom:0}
.opt .l{min-width:0}
.opt .l .small{display:block;margin-top:3px}
.val{font-size:15px;font-weight:400;min-width:64px;text-align:right}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:36px;height:36px;border-radius:50%;border:1px solid var(--hair);display:grid;place-items:center}
.swatches{display:flex;gap:14px;flex-wrap:wrap;padding:6px 0 4px}
.sw{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);width:56px}
.sw i{width:46px;height:46px;border-radius:50%;border:1px solid var(--hair2);box-shadow:inset 0 6px 14px rgba(255,255,255,.18),inset 0 -8px 14px rgba(0,0,0,.4)}
.sw.on{color:var(--text)}
.sw.on i{box-shadow:0 0 0 2px #0c0e11,0 0 0 3px var(--led),inset 0 6px 14px rgba(255,255,255,.18),inset 0 -8px 14px rgba(0,0,0,.4)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:6px 0}
.card-opt{border:1px solid var(--hair);border-radius:18px;padding:14px;text-align:left;min-height:96px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;transition:all .2s}
.card-opt{position:relative}.card-opt.on{border-color:rgba(244,248,255,.7);background:rgba(255,255,255,.07);box-shadow:0 0 24px rgba(244,248,255,.07)}
.card-opt.on::after{content:"";position:absolute;top:14px;right:14px;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff}
.card-opt .small{font-size:11.5px}
.sides{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px 0}
.sides .chip{justify-content:center;padding:0 6px}

/* ---------- modal / toast ---------- */
.modal{position:absolute;inset:0;z-index:60;display:none;align-items:flex-end;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal.on{display:flex}
.modal .box{width:100%;border-radius:30px 30px 0 0;background:#0e1013;border-top:1px solid var(--hair2);padding:26px 22px calc(26px + env(safe-area-inset-bottom,0px));animation:up .45s var(--ease)}
@keyframes up{from{transform:translateY(60px);opacity:0}}
#toasts{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:14px;right:14px;z-index:80;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:20px;border:1px solid var(--hair2);background:rgba(20,22,26,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 20px 50px rgba(0,0,0,.5);animation:tin .5s var(--ease);pointer-events:auto}
.toast.out{opacity:0;transform:translateY(-12px);transition:all .35s}
@keyframes tin{from{opacity:0;transform:translateY(-16px)}}
.toast .ic{width:34px;height:34px;flex:none;border-radius:11px;background:rgba(255,255,255,.07);display:grid;place-items:center}
.toast b{font-weight:400;font-size:14px;display:block}
.toast span{font-size:12.5px;color:var(--muted);line-height:1.4}

/* ---------- projects ---------- */
.plist{display:flex;flex-direction:column;gap:14px}
.pitem{border:1px solid var(--hair);border-radius:var(--r-m);overflow:hidden;background:var(--bg1)}
.pitem .thumb{aspect-ratio:16/9;background:#0c0e10 center/cover no-repeat;position:relative}
.pitem .tag{position:absolute;top:12px;left:12px;font-size:11px;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--alu)}
.pitem .meta{padding:16px 18px 18px}
.pitem .actions{display:flex;gap:8px;margin-top:14px}
.pitem .actions .btn{height:42px;font-size:13.5px;padding:0 14px}

/* ---------- order ---------- */
.progress{height:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin:14px 0 8px}
.progress i{display:block;height:100%;background:var(--led);box-shadow:0 0 12px var(--led);transition:width 1.2s var(--ease);border-radius:3px}
.timeline{position:relative;margin-top:8px}
.tl{display:flex;gap:16px;position:relative;padding-bottom:22px}
.tl:last-child{padding-bottom:0}
.tl .mk{position:relative;width:14px;flex:none;display:flex;justify-content:center}
.tl .mk::before{content:"";width:9px;height:9px;border-radius:50%;margin-top:6px;border:1px solid var(--dim);background:var(--bg0);position:relative;z-index:2}
.tl .mk::after{content:"";position:absolute;top:18px;bottom:-22px;width:1px;background:var(--hair)}
.tl:last-child .mk::after{display:none}
.tl.done .mk::before{background:var(--alu);border-color:var(--alu)}
.tl.done .mk::after{background:rgba(255,255,255,.3)}
.tl.cur .mk::before{background:#fff;border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.1),0 0 14px #fff}
.tl .tx b{font-weight:400;font-size:15px;display:block}
.tl:not(.done):not(.cur) .tx{opacity:.45}
.kv{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--hair);font-size:14px;gap:16px}
.kv:last-child{border-bottom:0}
.kv span:first-child{color:var(--muted);flex:1;min-width:0}
.kv span:last-child{text-align:right;white-space:nowrap}
.delivery{display:flex;gap:16px;align-items:center}
.delivery .cal{width:62px;height:68px;border-radius:16px;border:1px solid var(--hair2);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.delivery .cal b{font-size:26px;font-weight:200;line-height:1}
.delivery .cal span{font-size:11px;color:var(--muted);margin-top:4px}

/* ---------- assembly ---------- */
.asm-view{position:relative;height:300px;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--hair);flex:none}
.asm-view .viewer{position:absolute}
.stepdots{display:flex;gap:4px;margin:18px 0 6px}
.stepdots i{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.1);transition:all .3s}
.stepdots i.done{background:var(--alu)}
.stepdots i.cur{background:#fff;box-shadow:0 0 8px #fff}
.asm-nav{position:absolute;left:0;right:0;bottom:0;padding:14px 22px calc(18px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;background:linear-gradient(180deg,transparent,rgba(5,6,7,.95) 35%);z-index:5}
.check{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;border:1px solid var(--hair);margin-top:18px;width:100%;text-align:left;transition:all .25s}
.check .box{width:24px;height:24px;border-radius:8px;border:1px solid var(--hair2);display:grid;place-items:center;flex:none;transition:all .25s}
.check.on{border-color:rgba(159,211,180,.45);background:rgba(159,211,180,.05)}
.check.on .box{background:var(--ok);border-color:var(--ok);color:#0b0c0e}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* ---------- remote ---------- */
.rc-view{position:relative;height:290px;margin:0 -22px;flex:none}
.rc-view .viewer{position:absolute;background:radial-gradient(70% 70% at 50% 60%,#1a1e23,#08090b 75%)}
.status{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--alu)}
.status i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.sensors{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 4px}
.sensor{border:1px solid var(--hair);border-radius:16px;padding:12px;text-align:left}
.sensor b{display:block;font-size:19px;font-weight:300;margin-top:4px}
.ctl{margin-top:14px}
.ctl .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.angle{font-size:44px;font-weight:200;line-height:1}
.scenes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.scene{border:1px solid var(--hair);border-radius:18px;padding:14px 6px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;color:var(--alu)}
.scene.on{border-color:rgba(244,248,255,.6);color:var(--text);background:rgba(255,255,255,.05)}
.side-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--hair)}
.side-row:last-child{border-bottom:0}

/* notifications panel */
.npanel .ni{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--hair)}
.npanel .ni:last-child{border-bottom:0}
.npanel .ni b{font-weight:400;font-size:14px;display:block}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .diamond{stroke-dashoffset:0}
  .login-body{opacity:1;transform:none}
}

/* ---------- v3 ---------- */
.iconbtn.sm{width:34px;height:34px}
.iconbtn.on{border-color:rgba(244,248,255,.6);background:rgba(255,255,255,.1);box-shadow:0 0 18px rgba(244,248,255,.12)}
.iconbtn[disabled]{opacity:.3;pointer-events:none}
.chip.sm{height:28px;padding:0 11px;font-size:12px}
.chip[disabled]{opacity:.4;pointer-events:none}
.avatar{width:100%;height:100%;display:grid;place-items:center;font-size:13px;letter-spacing:.06em;color:var(--text)}
.avatar.lg{width:64px;height:64px;border-radius:50%;border:1px solid var(--hair2);font-size:20px;font-weight:300;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.01));flex:none}
.nic{width:38px;height:38px;flex:none;border-radius:12px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:var(--text)}
.npanel .ni{align-items:flex-start}
.campaign{display:flex;align-items:center;gap:14px;width:100%;margin-top:18px;padding:16px 18px;border-radius:var(--r-m);border:1px solid rgba(201,163,125,.35);background:linear-gradient(120deg,rgba(201,163,125,.10),rgba(201,163,125,.02))}
.campaign b{font-weight:400;font-size:15px}
.cal-mini{width:48px;height:54px;border-radius:14px;border:1px solid var(--hair2);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.cal-mini b{font-size:20px;font-weight:300;line-height:1}.cal-mini span{font-size:10px;color:var(--muted)}
.tile .small{margin-top:3px}

/* onboarding */
.onb{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 26px}
.onb-art{display:grid;place-items:center;margin-bottom:26px}
.onb-dots{display:flex;gap:6px;justify-content:center;margin-bottom:22px}
.onb-dots i{width:18px;height:2px;border-radius:2px;background:rgba(255,255,255,.15)}
.onb-dots i.on{background:#fff;box-shadow:0 0 8px #fff;width:30px}
.faceid{width:110px;height:110px;margin:0 auto;border-radius:30px;display:grid;place-items:center;color:var(--alu);position:relative;overflow:hidden}
.faceid::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--led);box-shadow:0 0 12px var(--led);top:10%;animation:scan 1.2s ease-in-out infinite alternate}
.faceid.ok{color:var(--ok)}.faceid.ok::after{display:none}
@keyframes scan{to{top:88%}}

/* configuratore */
.live-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.viewer canvas{position:relative;z-index:1}
.undo-tools{position:absolute;left:16px;top:150px;z-index:9;display:flex;flex-direction:column;gap:8px}
.side-tools .iconbtn{background:rgba(10,12,14,.45)}
.sun-panel{position:absolute;left:16px;right:76px;top:150px;z-index:11;padding:16px;border-radius:22px;border:1px solid var(--hair2);background:rgba(12,14,17,.86);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:none}
.sun-panel.on{display:block;animation:up .35s var(--ease)}
.sun-panel .seg button{height:32px;font-size:12px;padding:0 6px}
.warn-chip{position:absolute;left:18px;bottom:calc(104px + env(safe-area-inset-bottom,0px));z-index:12;display:none;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;border:1px solid rgba(227,160,138,.4);background:rgba(20,14,12,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:12px;color:#f0c4b4}
.warn-chip i{width:6px;height:6px;border-radius:50%;background:var(--alert);box-shadow:0 0 8px var(--alert)}
.shutter{position:absolute;left:50%;margin-left:-38px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:12;width:76px;height:76px;border-radius:50%;border:3px solid rgba(255,255,255,.85);display:none;place-items:center}
.shutter i{width:60px;height:60px;border-radius:50%;background:#fff}
.measure-lbl{position:absolute;z-index:10;transform:translateX(-50%);padding:6px 12px;border-radius:999px;background:#fff;color:#0b0c0e;font-size:14px;display:none;pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.scanfx{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0;transition:opacity .3s;display:flex;align-items:flex-end;justify-content:center;padding-bottom:200px;background:linear-gradient(180deg,transparent 40%,rgba(244,248,255,.05))}
.scanfx.on{opacity:1}
.scanfx i{position:absolute;left:0;right:0;height:2px;background:var(--led);box-shadow:0 0 18px var(--led),0 0 40px rgba(244,248,255,.5);top:40%;animation:sweep 1.6s ease-in-out}
.scanfx span{font-size:13px;color:var(--text);padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.5)}
@keyframes sweep{from{top:38%}to{top:95%}}
.recfx{position:absolute;inset:0;z-index:30;display:none;align-items:flex-start;justify-content:center;padding-top:150px;pointer-events:none}
.recfx.on{display:flex}
.recfx>div{min-width:240px;padding:14px 18px;border-radius:18px;background:rgba(10,12,14,.8);border:1px solid var(--hair2);text-align:center;display:flex;flex-direction:column;gap:2px}
.recfx b{font-weight:400}.recfx b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff5a4f;margin-right:8px;box-shadow:0 0 10px #ff5a4f}
.actlist{display:flex;flex-direction:column;margin-top:10px}
.actlist button{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--hair);text-align:left}
.actlist button:last-child{border-bottom:0}
.actlist b{display:block;font-weight:400;font-size:15px}
.modal .box.full{max-height:88%;overflow-y:auto}
.modal .box{max-height:92%;overflow-y:auto}
.kv.hist{border-radius:0}
.wrow{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--hair)}.wrow:last-child{border-bottom:0}.wrow>i{width:8px;height:8px;border-radius:50%;margin-top:7px;flex:none;background:var(--alu)}.wrow>i.warn{background:var(--alert);box-shadow:0 0 8px var(--alert)}.wrow b{display:block;font-weight:400;font-size:15px}.wrow .small{display:block;margin-top:3px;line-height:1.45}

/* progetti, confronto */
.pitem.selectable{cursor:pointer}
.pitem.sel{border-color:rgba(244,248,255,.6)}
.selmark{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;border:1px solid #fff;background:rgba(0,0,0,.4);display:grid;place-items:center}
.pitem.sel .selmark{background:#fff;color:#0b0c0e}
.cmp-head{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cmp-head .thumb{aspect-ratio:4/3;border-radius:16px;background:#0c0e10 center/cover;border:1px solid var(--hair)}
.cmp-table{margin-top:18px;border-top:1px solid var(--hair)}
.cmp-row{display:grid;grid-template-columns:76px 1fr 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--hair);font-size:13.5px;color:var(--muted)}
.cmp-row.diff>div:not(.small){color:var(--text)}
.cmp-row.diff .small{color:var(--warm)}
.thumbbig{aspect-ratio:16/10;border-radius:18px;background:#0c0e10 center/cover;border:1px solid var(--hair)}

/* checkout */
.co-steps{display:flex;gap:6px;padding:0 22px 14px;flex:none}
.co-steps span{flex:1;font-size:12px;color:var(--dim);padding-top:10px;border-top:2px solid rgba(255,255,255,.1)}
.co-steps span.on{color:var(--text);border-color:#fff}
.co-steps span.done{color:var(--alu);border-color:var(--alu)}
.radio{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:16px;border:1px solid var(--hair);margin-bottom:8px;text-align:left}
.radio>i{width:20px;height:20px;border-radius:50%;border:1px solid var(--hair2);flex:none;position:relative}
.radio.on{border-color:rgba(244,248,255,.55);background:rgba(255,255,255,.04)}
.radio.on>i::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff}
.radio b{display:block;font-weight:400}
.spinner{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.15);border-top-color:#fff;margin:0 auto;animation:spin 1s linear infinite;display:block}
.spinner.sm{width:14px;height:14px;border-width:1.5px;display:inline-block;margin:0;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.daychip{flex:none;width:62px;padding:10px 0;border-radius:16px;border:1px solid var(--hair);display:flex;flex-direction:column;align-items:center;gap:2px}
.daychip b{font-size:20px;font-weight:300}
.daychip.on{border-color:#fff;background:rgba(255,255,255,.08)}
.sel,.ta{width:100%;border-radius:14px;border:1px solid var(--hair);background:rgba(255,255,255,.03);padding:14px 16px;font-size:15px;color:var(--text);outline:none}
.sel option{background:#121418}
.ta{min-height:96px;resize:vertical;font-family:var(--font)}
.ph-add{width:64px;height:64px;border-radius:14px;border:1px dashed var(--hair2);display:grid;place-items:center;cursor:pointer;color:var(--alu)}
.ph-mini{width:64px;height:64px;border-radius:14px;object-fit:cover;border:1px solid var(--hair)}
.sigpad{width:100%;height:150px;border-radius:16px;border:1px solid var(--hair2);background:rgba(255,255,255,.03);touch-action:none;display:block}
.signimg{width:100%;max-height:110px;object-fit:contain;margin-top:10px;border-radius:12px;background:rgba(255,255,255,.03)}
.map{height:220px;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--hair)}
.stars{color:var(--warm);letter-spacing:2px}
.starsel button{font-size:24px;color:var(--dim);padding:0 2px}
.starsel button.on{color:var(--warm)}
.offline-banner{display:none;margin:0 22px 10px;padding:10px 14px;border-radius:14px;background:rgba(201,163,125,.12);border:1px solid rgba(201,163,125,.3);font-size:12.5px;color:#e6cfb7}

/* remote */
.status i.bt{background:#8fb4ff;box-shadow:0 0 10px #8fb4ff}
.forecast{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.forecast>div{border:1px solid var(--hair);border-radius:14px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:6px}
.forecast b{font-weight:300;font-size:16px}
.hue{background:transparent}
input[type=range].hue::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,#ff7b7b,#ffd27b,#9dff7b,#7bf2ff,#7b8bff,#e07bff,#ff7b7b)}
input[type=range].hue::-webkit-slider-thumb{margin-top:-8px}
.widgets{display:flex;gap:10px}
.wdg{border-radius:24px;padding:16px;background:linear-gradient(160deg,#20242a,#121418);border:1px solid var(--hair2);display:flex;flex-direction:column}
.wdg.sm{width:130px;height:130px}.wdg.md{flex:1;height:130px}
.wdg b{font-size:34px;font-weight:200;margin:auto 0 0}
.hkcode{display:flex;align-items:center;gap:18px;margin-top:16px}
.hkcode b{font-size:22px;font-weight:300;letter-spacing:.06em}
.qr{width:96px;height:96px;display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:6px;background:#fff;border-radius:10px}
.qr i{background:#0b0c0e;border-radius:1px}

/* account */
.acc-group{margin-top:18px}
.acc-group>.small{margin-bottom:6px;color:var(--alu)}
.acc-row{display:flex;align-items:center;gap:14px;width:100%;padding:12px 0;border-bottom:1px solid var(--hair);text-align:left}
.acc-row b{display:block;font-weight:400;font-size:15px}
.paycard{margin-top:16px;padding:20px;border-radius:20px;background:linear-gradient(135deg,#2a2e35,#111316);border:1px solid var(--hair2);display:flex;flex-direction:column;gap:6px}
.paycard b{font-size:18px;font-weight:300;letter-spacing:.08em}
.refcode{font-size:26px;font-weight:300;letter-spacing:.12em;margin:8px 0 12px}

/* ispirazioni, guide, chat */
.fav{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center;color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.fav.on{color:#ff8fa0}.fav.on svg path{fill:currentColor}
.pal{display:flex;gap:4px}.pal i{width:14px;height:14px;border-radius:50%;border:1px solid var(--hair2)}
.moodgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.moodgrid>div{aspect-ratio:1;border-radius:14px;background:#0c0e10 center/cover;position:relative}
.moodgrid .iconbtn{position:absolute;top:6px;right:6px;width:26px;height:26px;background:rgba(0,0,0,.5)}
.guide{flex:none;width:150px;min-height:120px;border-radius:var(--r-m);border:1px solid var(--hair);padding:16px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;gap:8px;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.008))}
.guide b{font-weight:400;font-size:15px;line-height:1.25}
details.faq{border-bottom:1px solid var(--hair);padding:14px 0}
details.faq:last-child{border-bottom:0}
details.faq summary{cursor:pointer;list-style:none;font-size:15px;display:flex;justify-content:space-between;gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--muted);font-size:18px;line-height:1}
details.faq[open] summary::after{content:"−"}
details.faq p{margin-top:10px}
.chat-list{flex:1;overflow-y:auto;padding:8px 18px 12px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:82%;padding:12px 15px;border-radius:20px;font-size:14.5px;line-height:1.45;white-space:pre-wrap}
.msg.a{align-self:flex-start;background:rgba(255,255,255,.06);border:1px solid var(--hair);border-bottom-left-radius:6px}
.msg.u{align-self:flex-end;background:linear-gradient(180deg,#f6f7f8,#d6d9dc);color:#0b0c0e;border-bottom-right-radius:6px}
.chat-quick{display:flex;gap:8px;overflow-x:auto;padding:4px 18px 10px;flex:none}
.chat-quick::-webkit-scrollbar{display:none}
.chat-in{display:flex;gap:10px;padding:10px 18px calc(16px + env(safe-area-inset-bottom,0px));flex:none;border-top:1px solid var(--hair)}
.chat-in input{flex:1;height:46px;border-radius:999px;border:1px solid var(--hair);background:rgba(255,255,255,.04);padding:0 18px;font-size:15px;outline:none}
#insHost{position:absolute;left:-3000px;top:0;width:720px;height:540px;overflow:hidden}

/* accessibilità */
body.a11y-large #app{zoom:1.12}
body.a11y-contrast{--muted:#c3c8ce;--dim:#9ba1a8;--alu:#d4d8dc;--hair:rgba(255,255,255,.2);--hair2:rgba(255,255,255,.32)}
body.a11y-motion *{animation:none!important;transition:none!important}
body.a11y-motion .diamond{stroke-dashoffset:0}
body.a11y-motion .login-body{opacity:1;transform:none}


/* ---------- tendine ---------- */
.acc{border:1px solid var(--hair);border-radius:18px;margin-bottom:10px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008));transition:border-color .25s,background .25s}
.acc.open{border-color:var(--hair2);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012))}
.acc-h{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;text-align:left;min-height:62px}
.acc-h .nic{width:34px;height:34px;border-radius:11px}
.acc-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.acc-t b{font-weight:400;font-size:15px}
.acc-t .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-meta{font-size:14px;color:var(--alu);white-space:nowrap;display:flex;align-items:center;gap:6px}
.acc-chev{color:var(--muted);transition:transform .35s var(--ease);flex:none;display:grid;place-items:center}
.acc.open .acc-chev{transform:rotate(180deg);color:var(--text)}
.acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
.acc.open .acc-b{grid-template-rows:1fr}
.acc-in{overflow:hidden;min-height:0;padding:0 16px}
.acc.open .acc-in{padding-bottom:12px}
.acc-in>.opt:first-child,.acc-in>.side-row:first-child{border-top:1px solid var(--hair)}
.acc-in .opt:last-child,.acc-in .side-row:last-child{border-bottom:0}
.sw-dot{width:14px;height:14px;border-radius:50%;border:1px solid var(--hair2);display:inline-block}
.acc-head{display:flex;align-items:center;justify-content:space-between;margin:2px 0 12px}


.kv.rmable{align-items:center}
.rmx{width:28px;height:28px;flex:none;border-radius:50%;border:1px solid var(--hair2);display:grid;place-items:center;color:var(--muted);margin-left:2px;transition:all .2s}
.rmx:hover,.rmx:active{color:#fff;border-color:rgba(227,160,138,.7);background:rgba(227,160,138,.15)}
.kv.removing{opacity:0;transform:translateX(24px);transition:all .22s}
#s-home .acc .tiles{padding-bottom:4px}
.logo-hero{width:200px;height:auto;opacity:0;transform:translateY(8px);animation:logoIn 1.8s var(--ease) .2s forwards;filter:drop-shadow(0 0 28px rgba(255,214,170,.16))}
@keyframes logoIn{to{opacity:1;transform:none}}
body.a11y-motion .logo-hero{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.logo-hero{opacity:1;transform:none}}
.logo-sm{height:28px;width:auto;display:block}

/* =====================================================================
   Pergola Designer 3D — aggiunte alla grafica della demo
   ===================================================================== */
.hide{display:none!important}
.login-art{position:relative;height:42%;min-height:230px;display:grid;place-items:center;flex:none}
.logo-hero{width:210px;height:auto}
.logo-sm{height:30px;width:auto;display:block}
input.sel{width:auto}
input[type=number].sel{appearance:textfield;-moz-appearance:textfield}

/* ---------- il riquadro 3D (stage) ---------- */
#stage{position:absolute;inset:0;overflow:hidden;background:radial-gradient(90% 70% at 50% 30%,#3a4048 0%,#1d2126 55%,#121417 100%)}
#stage.dark{background:radial-gradient(90% 60% at 50% 40%,#1b1f24 0%,#0c0e10 55%,#060708 100%)}
#stage.garden{background:#0c0e10}
#photo{position:absolute;inset:0;background:#0c0e10 center/cover no-repeat;display:none}
#stage.garden #photo{display:block}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;z-index:1}
#front{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
#front.paint{pointer-events:auto;cursor:crosshair;z-index:6}
.labels{position:absolute;inset:0;pointer-events:none;z-index:4}
.lab{position:absolute;transform:translate(-50%,-50%);padding:5px 11px;border-radius:999px;background:#fff;color:#0b0c0e;font-size:12.5px;font-weight:400;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.4);font-variant-numeric:tabular-nums}
.lab.big{background:var(--led);font-size:13px}
.lab.sm{font-size:11.5px;padding:3px 9px;background:rgba(255,255,255,.88)}
.lab.dist{background:var(--warm);color:#0b0c0e;font-size:11.5px;padding:3px 9px}
.horizon{position:absolute;left:0;right:0;top:46%;height:30px;margin-top:-15px;cursor:ns-resize;display:none;touch-action:none;z-index:7}
#stage.garden .horizon{display:block}
.horizon::before{content:"";position:absolute;left:0;right:0;top:14px;height:1px;background:var(--led);box-shadow:0 0 6px var(--led),0 0 18px rgba(244,248,255,.6)}
.horizon span{position:absolute;left:14px;top:2px;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text);font-size:11.5px;border-radius:999px;padding:3px 11px;border:1px solid var(--hair2)}
.planbar{display:none}
.scalebar{position:absolute;left:18px;top:206px;display:none;align-items:center;gap:8px;color:#fff;font-size:12px;opacity:0;transition:opacity .25s;z-index:5}
.scalebar.show{opacity:1;display:flex}.scalebar i{display:block;height:7px;border:1px solid #fff;border-top:0;min-width:4px}
.selbar{position:absolute;left:50%;bottom:calc(150px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);display:flex;gap:6px;align-items:center;background:rgba(10,12,14,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--hair2);border-radius:999px;padding:5px 6px 5px 16px;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease);z-index:12;font-size:13px}
.selbar.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.selbar b{font-weight:400}.selbar button{height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--hair);background:var(--glass2);font-size:12.5px}.selbar button.x{color:var(--alert);border-color:rgba(227,160,138,.4)}
.calov{position:absolute;inset:0;z-index:13;cursor:crosshair;display:none}.calov.show{display:block}
.calbox{position:absolute;left:50%;top:150px;transform:translateX(-50%);background:rgba(10,12,14,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--hair2);border-radius:999px;padding:8px 8px 8px 18px;font-size:13px;display:flex;gap:10px;align-items:center;white-space:nowrap}
.calbox button{height:30px;border-radius:999px;padding:0 14px;border:1px solid var(--hair);font-size:12.5px}
.calov .mark{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--warm);border:2px solid #fff}
#stage:not(.main) .ov{display:none!important}
#stage:not(.main) .labels{display:none}

/* hero della home e vista del controllo: il riquadro 3D si sposta qui */
.hero-card #stage{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.hero-card::after{z-index:2}
.rc-view #stage{position:absolute;inset:0}
.rc-view{margin:0 -22px;overflow:hidden}

/* ---------- barra in alto del configuratore ---------- */
#s-config .cfg-top{pointer-events:none}
#s-config .cfg-top>*{pointer-events:auto}
.side-tools .iconbtn.on{border-color:rgba(244,248,255,.6);background:rgba(255,255,255,.1)}
.undo-tools{display:none}
.warn-chip{display:none!important}
.price-pill b{font-size:17px}

/* foglio configurazione */
.sheet .body{padding-bottom:130px}
.sheet .acc{margin-bottom:10px}
.sw-dot{display:inline-block}
.val{font-variant-numeric:tabular-nums}
.opt .l .h3{font-size:15px}
.chip.on{color:var(--text)}
.card-opt .thumbimg{width:100%;height:74px;object-fit:cover;border-radius:12px;background:#0c0e10;border:1px solid var(--hair);display:block}
.card-opt.st{min-height:0;padding:10px}
.card-opt .ic{width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:var(--alu)}
input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--led) 0,var(--led) var(--p,50%),rgba(255,255,255,.12) var(--p,50%))}

/* progetti */
.pitem .actions .btn{flex:1}
.pitem .thumb{background-color:#0c0e10}
.pitem .thumb .nothumb{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim)}

/* controllo */
.rc-view{position:relative;height:290px;flex:none}
.rc-view .small-note{position:absolute;left:0;right:0;bottom:10px;text-align:center}
.ctl.panel{margin-top:14px}
.ctl .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.side-row .small{display:block;margin-top:2px}

/* video */
dialog#vdlg{border:0;border-radius:30px 30px 0 0;background:#0e1013;color:var(--text);padding:14px 22px calc(24px + env(safe-area-inset-bottom,0px));width:min(430px,100%);max-width:100%;margin:auto auto 0;border-top:1px solid var(--hair2);font-family:var(--font)}
dialog#vdlg::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(6px)}
dialog#vdlg .grab{width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.2)}

.avatar.lg{display:grid;place-items:center}
#accActions .btn{margin-top:10px}
.check .box svg{display:none}
.check.on .box svg{display:block}
@media (min-width:600px){
  #app{height:min(920px,96vh)}
}
.check .box{position:relative}
.check.on .box::after{content:"";width:5px;height:9px;border:solid #0b0c0e;border-width:0 1.6px 1.6px 0;transform:rotate(45deg) translate(-1px,-1px)}
#s-config .viewer.stage{z-index:0}
.photo-cta.on~.hint,.photo-cta.on~.side-tools,.photo-cta.on~.price-pill,.photo-cta.on~.fab{display:none}
.photo-cta{z-index:14}
.photo-cta.on~.cfg-top{z-index:15}

/* =====================================================================
   Versione DESKTOP (schermi da 1024 px in su): niente cornice da telefono.
   Barra di navigazione laterale, contenuti centrati su più colonne,
   configuratore con il pannello delle opzioni fisso a destra.
   ===================================================================== */
@media (min-width:1024px){
  body{background:var(--bg0);display:block}
  #app{width:100%;max-width:none;height:100vh;border-radius:0;border:0;box-shadow:none}
  .screen{left:0}
  #app:has(#nav.on) .screen:not(#s-config){left:92px}
  #app:has(#nav.on) #s-config{left:92px}

  /* navigazione: barra verticale a sinistra */
  #nav{left:0;top:0;bottom:0;right:auto;width:92px;height:auto;border-radius:0;border:0;border-right:1px solid var(--hair);flex-direction:column;justify-content:flex-start;align-items:center;gap:6px;padding:26px 0;background:rgba(10,12,14,.92)}
  #nav button{flex:none;width:68px;padding:11px 0;border-radius:16px;font-size:11px}
  #nav button:hover{background:rgba(255,255,255,.05);color:var(--text)}
  #nav .plus{order:-1;width:52px;height:52px;margin:0 0 20px;padding:0}
  #nav .plus:hover{background:linear-gradient(180deg,#fff,#dde0e3)}

  /* contenuti: colonna centrale, più larga o stretta a seconda della schermata */
  .topbar{padding:30px max(36px,calc((100% - 1080px)/2)) 12px}
  .scroll{padding:0 max(36px,calc((100% - 1080px)/2)) 60px}
  #s-order .scroll,#s-checkout .scroll,#s-account .scroll,#s-help .scroll,#s-remote .scroll,#s-assembly .scroll{padding-left:max(36px,calc((100% - 680px)/2));padding-right:max(36px,calc((100% - 680px)/2))}
  #s-order .topbar,#s-checkout .topbar,#s-account .topbar,#s-help .topbar,#s-remote .topbar,#s-assembly .topbar{padding-left:max(36px,calc((100% - 680px)/2));padding-right:max(36px,calc((100% - 680px)/2))}
  .hero-card{height:380px;padding:34px}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .hscroll{margin:0;padding:0 0 6px}
  .hscroll .pcard,.hscroll .guide{flex:0 0 300px}
  #plist,#ordersBody,#insBody{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px;align-items:start}
  #plist>.empty,#ordersBody>.empty{grid-column:1/-1}
  #plist .pitem,#insBody .pitem{margin-bottom:0!important}
  .rc-view{height:380px;margin:0}
  .asm-view{height:380px}
  .modal{align-items:center;justify-content:center}
  .modal .box{width:min(560px,92vw);border-radius:28px;border:1px solid var(--hair2);padding:30px 30px 30px;max-height:90%}
  #toasts{left:auto;right:24px;width:380px}

  /* accesso: stessa composizione del telefono, centrata */
  #s-login{flex-direction:column;align-items:center}
  .login-art{height:40%;min-height:300px;flex:none;width:100%}
  .logo-hero{width:240px}
  .login-body{flex:1;width:100%;max-width:460px;padding:0 24px 40px;justify-content:flex-start}

  /* configuratore: scena a sinistra, pannello opzioni sempre aperto a destra */
  #s-config{--pan:410px}
  #s-config #stage{right:var(--pan)}
  #s-config .cfg-top{right:var(--pan)}
  #s-config .side-tools{right:calc(var(--pan) + 18px)}
  #s-config .photo-cta{right:var(--pan)}
  #s-config .price-pill{bottom:30px}
  #s-config .selbar{left:calc((100% - var(--pan))/2);bottom:96px}
  #s-config .hint{right:var(--pan)}
  #s-config .fab,#s-config .sheet-bg,#s-config .sheet .grab{display:none!important}
  #s-config .sheet{left:auto;top:0;bottom:0;right:0;width:var(--pan);max-height:none;transform:none;border-radius:0;border-top:0;border-left:1px solid var(--hair2);background:rgba(11,13,16,.97);padding-top:14px}
  #s-config .sheet .body{padding-bottom:60px}
}
@media (min-width:1500px){
  .tiles{grid-template-columns:repeat(4,1fr)}
  #s-config{--pan:450px}
}

/* accesso e registrazione sempre visibili */
.pill{height:38px;padding:0 18px;border-radius:999px;border:1px solid var(--hair2);background:rgba(255,255,255,.04);color:var(--text);font-size:14px;font-weight:400;cursor:pointer;white-space:nowrap}
.pill.pri{background:linear-gradient(180deg,#f6f7f8,#cfd3d7);color:#0b0c0e;border-color:transparent}
.pill:hover{border-color:rgba(255,255,255,.4)}
.navacct{display:none}
@media (max-width:420px){#authBtns .pill{height:34px;padding:0 13px;font-size:13px}}

/* desktop: testi più grandi */
@media (min-width:1024px){
  .navacct{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:auto;color:var(--dim);font-size:12.5px}
  .navacct:hover{color:var(--text)}
  .navacct .avatar{width:40px;height:40px}
  #nav button{font-size:13px;width:76px}
  .h1{font-size:44px}.h2{font-size:28px}.h3{font-size:19px}
  .sub{font-size:17px}.small{font-size:15px}
  .btn{height:58px;font-size:17px}
  .chip{height:40px;font-size:15px;padding:0 18px}.chip.sm{height:32px;font-size:14px}
  .kv{font-size:17px;padding:14px 0}
  .field input{height:62px;font-size:17px}.field label{font-size:17px}.field input:focus+label,.field input:not(:placeholder-shown)+label{font-size:12.5px}
  .acc-t b,.opt .l .h3{font-size:17.5px}
  .tile{min-height:150px;font-size:16px}
  .lab{font-size:14px}.lab.sm{font-size:13px}
  .topbar .h1{font-size:40px!important}
  .cfg-name input{font-size:17px}
  .price-pill b{font-size:20px}
  .sheet .tabs button,.seg button{font-size:15px}
  .selbar{font-size:15px}.selbar button{height:38px;font-size:14px}
  .pill{height:44px;font-size:16px;padding:0 22px}
  .modal .box .small{font-size:15px}
  .pitem .meta .h3{font-size:19px}
  .tl .tx b{font-size:17px}
  .toast,#toasts *{font-size:15px}
}

/* =====================================================================
   Accesso: movimento sobrio e curato (sfondo luminoso che segue il puntatore,
   titolo che si compone, bagliore sul logo, ingresso nell'app)
   ===================================================================== */
#s-login{overflow:hidden;--mx:0;--my:0}
.lg-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.lg-bg i{position:absolute;border-radius:50%;filter:blur(70px);opacity:0;will-change:transform}
.lg-bg .b1{width:46vmax;height:46vmax;left:-12vmax;top:-14vmax;background:radial-gradient(circle,rgba(255,214,170,.20),transparent 62%);animation:lgIn 2.4s ease .3s forwards,lgDrift1 8s ease-in-out infinite alternate;transform:translate3d(calc(var(--mx)*-70px),calc(var(--my)*-50px),0)}
.lg-bg .b2{width:40vmax;height:40vmax;right:-14vmax;bottom:-10vmax;background:radial-gradient(circle,rgba(150,190,255,.16),transparent 64%);animation:lgIn 2.8s ease .6s forwards,lgDrift2 10s ease-in-out infinite alternate;transform:translate3d(calc(var(--mx)*90px),calc(var(--my)*60px),0)}
.lg-bg .b3{width:24vmax;height:24vmax;left:calc(50% - 12vmax);top:calc(30% - 12vmax);background:radial-gradient(circle,rgba(244,248,255,.10),transparent 66%);animation:lgIn 3s ease .9s forwards;transform:translate3d(calc(var(--mx)*140px),calc(var(--my)*90px),0)}
@keyframes lgIn{to{opacity:1}}
@keyframes lgDrift1{to{margin:7vmax 0 0 9vmax}}
@keyframes lgDrift2{to{margin:-8vmax 7vmax 0 0}}
#s-login .login-art,#s-login .login-body{position:relative;z-index:1}
.login-art{transform:translate3d(calc(var(--mx)*10px),calc(var(--my)*8px),0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.logo-hero{animation:logoIn 1.8s var(--ease) .2s forwards,lgGlow 6s ease-in-out 2s infinite}
@keyframes lgGlow{0%,100%{filter:drop-shadow(0 0 22px rgba(255,214,170,.12))}50%{filter:drop-shadow(0 0 40px rgba(255,214,170,.34))}}
.lg-title{font-size:clamp(26px,5vw,32px);font-weight:300;letter-spacing:-.01em;line-height:1.12;margin:0 0 6px;text-align:center}
.lg-title .w{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(14px);animation:lgWord 1.1s var(--ease) forwards;animation-delay:calc(1s + var(--i)*110ms)}
@keyframes lgWord{to{opacity:1;filter:none;transform:none}}
.lg-sub{margin:0 0 24px;text-align:center;font-size:14px;color:var(--dim);opacity:0;animation:lgSub 1.2s ease 1.9s forwards}
@keyframes lgSub{to{opacity:1}}
.login-body .field input{transition:border-color .3s,box-shadow .4s,background .3s}
.login-body .field input:focus{border-color:rgba(244,248,255,.5);box-shadow:0 0 0 4px rgba(244,248,255,.06),0 0 30px rgba(244,248,255,.06);background:rgba(255,255,255,.05)}
.login-body .btn-pri{position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .35s}
.login-body .btn-pri::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-18deg)}
.login-body .btn-pri:hover::after{left:130%;transition:left .9s var(--ease)}
.login-body .btn-pri:hover{box-shadow:0 10px 36px rgba(255,255,255,.14)}
.login-body .btn-pri:active{transform:scale(.985)}
.btn.busy{pointer-events:none;color:transparent!important}
.btn.busy::before{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2px solid rgba(11,12,14,.25);border-top-color:#0b0c0e;animation:spin .8s linear infinite;z-index:2}
#f-log,#f-reg{animation:lgForm .5s var(--ease)}
@keyframes lgForm{from{opacity:0;transform:translateY(8px)}}
/* ingresso nell'app dopo l'accesso */
#arrive{position:absolute;inset:0;z-index:200;display:grid;place-items:center;background:#07080a;opacity:0;pointer-events:none;transition:opacity .45s ease}
#arrive.on{opacity:1;pointer-events:auto}
#arrive img{width:150px;opacity:0;transform:scale(.94);transition:opacity .5s ease .1s,transform 1.1s var(--ease)}
#arrive.on img{opacity:1;transform:scale(1)}
#arrive i{position:absolute;left:50%;top:calc(50% + 74px);height:1px;width:0;background:linear-gradient(90deg,transparent,#f4f8ff,transparent);box-shadow:0 0 12px rgba(244,248,255,.7);transform:translateX(-50%);transition:width .9s var(--ease) .15s}
#arrive.on i{width:min(280px,60vw)}
@media (prefers-reduced-motion:reduce){
  .lg-bg i,.logo-hero{animation:none}.lg-bg i{opacity:1}
  .lg-title .w{animation:none;opacity:1;filter:none;transform:none}.lg-sub{animation:none;opacity:1}
  .login-art{transition:none;transform:none}
}