/* Mobile steps and desktop scrolling share the responsive preview/editor layout. */
.mobile-only,.mobile-step-nav,.mobile-step-heading,.mobile-config-footer{display:none}
.cp-foot{position:static;box-shadow:none;display:flex;align-items:center;gap:10px;flex:none;padding:10px max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border-top:1px solid var(--line);background:#fff;z-index:5}
.cp-tot{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;line-height:1.3}
.cp-tot b{font:500 12px var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-tot span{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cp-foot .btn{max-width:57%;white-space:normal;text-align:left;font-size:13px;padding:12px 15px;min-height:46px;gap:14px;border-radius:8px;line-height:1.3;flex:none}
.cp-sec{padding-block:26px}
.cp-sec+.cp-sec{border-top:1px solid var(--line)}
.night-lighting-hint{position:absolute;z-index:3;left:18px;top:78px;display:inline-flex;align-items:center;gap:12px;min-height:40px;max-width:calc(100% - 36px);padding:8px 14px;background:rgba(22,29,43,.92);border:1px solid rgba(240,219,166,.45);border-radius:99px;color:#f8e4b4;font-size:13px;line-height:1.4;text-align:left}
.night-lighting-hint:hover{background:#28364b}
.night-mode .viewer,.night-mode .cp-stage{background:#101b30}
.night-mode #vNight{background:#23324a;color:#ffe2a0;box-shadow:0 0 0 1px rgba(255,226,160,.45)}
.night-mode .mobile-gesture{opacity:0}
@media(min-width:981px){
  .cp{height:100dvh}
  .cp-main{grid-template-columns:minmax(0,1fr) clamp(420px,34vw,520px)}
  .cp-scroll{padding:20px 28px 30px;overscroll-behavior:contain;scroll-padding:20px}
  .cp-scroll>.cp-sec:first-of-type{padding-top:4px}
  .cp-sec .cp-h{text-align:left;font-size:21px}
  .cp-sub{text-align:left}
  .cp-foot{padding:16px 24px;gap:12px}
  .cp-tot b{font-size:14px}
  .cp-tot span{font-size:12px}
  .cp-foot .btn{font-size:14px;min-height:48px}
  .cp-top .btn{max-width:240px;white-space:normal;text-align:center}
}
@media(min-width:981px) and (max-height:700px){
  .cp-scroll{padding-block:14px}
  .cp-foot{padding-block:10px}
}
@media(max-width:980px){
  html:has(body.cfg-mode){overflow:hidden;overscroll-behavior:none}
  body.cfg-mode{overflow:hidden;overscroll-behavior:none}
  .cp{position:fixed;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);height:100dvh;height:var(--studio-height,100dvh);overflow:hidden;background:var(--paper)}
  .cp .mobile-only{display:flex}
  .cp-top{position:relative;top:auto;min-height:52px;height:auto;padding:6px max(14px,env(safe-area-inset-right)) 6px max(14px,env(safe-area-inset-left));padding-top:max(6px,env(safe-area-inset-top));gap:12px;z-index:10}
  .cp-top .brand{display:block;position:absolute;left:50%;transform:translateX(-50%);padding:0;margin:0;border:0;pointer-events:none}
  .cp-top .brand img{height:28px;width:auto}
  .cp-back{margin:0;min-height:40px;padding:6px 0;gap:6px;font-size:13px}
  .cp-back .desktop-back{display:none}
  .cp-tr{margin-left:auto}
  .cp-tr>.btn{display:none}
  .cp-top .langs{display:none}
  .cp-main{display:grid;grid-template-rows:clamp(192px,33dvh,300px) minmax(0,1fr);grid-template-columns:minmax(0,1fr);overflow:hidden;min-height:0}
  .cp-stage{position:relative;top:auto;min-height:0;height:auto;z-index:1;box-shadow:none;overflow:hidden;background:#e8eaeb}
  .cp-panel{position:relative;min-height:0;overflow:hidden;display:flex;flex-direction:column;border:0;border-radius:20px 20px 0 0;margin-top:-12px;z-index:4;background:#fff;box-shadow:0 -5px 20px rgba(0,0,0,.05)}
  .cp-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px 20px 24px;scroll-padding:16px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;outline-offset:-3px}
  .cp-sec{padding-block:22px;gap:16px}
  .cp-sec .cp-h{text-align:left;font-size:20px}
  .cp-sub{text-align:left;font-size:13px;line-height:1.5}
  .seg2{border-radius:10px;padding:4px;gap:3px}
  .seg2 button{border-radius:7px;min-height:44px;padding:8px;font-size:13px;line-height:1.25}
  .mcards,.mcards.c3{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .mcards button{border-radius:10px;font-size:12px;aspect-ratio:1;grid-template-rows:minmax(0,1fr) 2.5em}
  .mcards.c3 button{grid-column:1/2}
  .kpis{padding:10px 2px;background:var(--paper);border-radius:8px;gap:8px}
  .kpis b{font-size:16px}.kpis span{font-size:11px;line-height:1.3;display:block}
  .rng .rr{grid-template-columns:minmax(0,1fr) 88px;gap:16px}
  .rng input[type=number],.selw select{font-size:16px;min-height:48px}
  .rng .rl{font-size:14px}.rng .rl small{font-size:12px}
  .rng input[type=range],.acts input[type=range]{height:44px;touch-action:pan-y}
  .sizes{gap:7px}.sizes button{min-height:40px;padding:8px 12px;font-size:12px}
  .sides{gap:8px;margin-bottom:2px;justify-content:space-between}
  .sides button{flex:1;min-width:0;font-size:12px;gap:6px}
  .sides button i{height:52px;width:100%;max-width:none}
  .sides button svg{width:38px;height:27px}
  .wopts{gap:8px}.wopts button{min-height:52px;font-size:13px;padding:10px;gap:8px;line-height:1.3}
  .wopts button i{width:18px;height:18px}
  .screen-toggle{min-height:48px;font-size:14px;line-height:1.4}
  .screen-controls .cp-sub{font-size:12px}
  .sw{gap:8px;justify-content:space-between}.sw button{flex:1;min-width:0;font-size:11px;padding:4px 0;overflow-wrap:normal}
  .sw button i{width:40px;height:40px}
  .fcards{gap:8px}.fcards button{min-width:0;padding:10px 6px;font-size:12px}.fcards button small{font-size:11px;line-height:1.4}
  .tgl button{padding:12px;min-height:56px;font-size:14px;line-height:1.4}.tgl button small{font-size:12px;line-height:1.4;margin-top:3px}
  .sum{font-size:14px;line-height:1.8;overflow-wrap:anywhere}
  .cp-copy{min-height:44px;padding-block:10px;font-size:13px}
  .vtl,.vtr{top:10px;gap:6px}.vtl{left:12px}.vtr{right:12px}
  .vbtn{height:42px;min-width:42px;padding:0 11px;border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 2px 12px rgba(20,20,20,.1)}
  .vbtn svg{width:18px;height:18px}.vbtn span{display:none}
  .vbot{display:none;left:12px;right:12px;bottom:23px;z-index:8}
  .show-view-actions .vbot{display:flex}
  .acts{display:grid;gap:0;max-height:calc(33dvh - 75px);overflow:auto;width:100%;padding:4px 12px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 5px 24px rgba(0,0,0,.13)}
  .acts button,.acts label{display:flex;justify-content:space-between;min-width:0;min-height:44px;height:auto;border-radius:0;padding:6px 0;background:transparent;box-shadow:none;font-size:13px;gap:12px;line-height:1.3}
  .acts button{justify-content:flex-start}
  .acts>*+*{border-top:1px solid var(--line)}
  .acts input[type=range]{flex:1;max-width:130px;min-width:65px}
  .mobile-gesture{position:absolute;left:50%;transform:translateX(-50%);bottom:23px;max-width:calc(100% - 24px);width:max-content;text-align:center;font-size:10px;line-height:1.35;color:#45443e;padding:6px 10px;border-radius:20px;background:rgba(255,255,255,.85);pointer-events:none;transition:opacity .25s}
  .mobile-gesture.gone,.show-view-actions .mobile-gesture{opacity:0}
  .cp .mobile-preview-return{display:none;position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);align-items:center;justify-content:center;gap:12px;padding:14px 22px;min-height:48px;max-width:calc(100% - 30px);white-space:nowrap;background:var(--black);color:#fff;border-radius:99px;font-size:14px;box-shadow:0 4px 16px rgba(0,0,0,.18);z-index:9}
  .preview-expanded .cp-main{display:block;position:relative}
  .preview-expanded .cp-stage{position:absolute;inset:0;height:100%}
  .preview-expanded .cp-panel{display:none}
  .preview-expanded .mobile-preview-return{display:flex}
  .preview-expanded .mobile-gesture{bottom:84px}
  .preview-expanded .vbot{bottom:84px}
  .preview-expanded .acts{max-height:35dvh}
  .keyboard-open:not(.preview-expanded) .cp-main{grid-template-rows:0 minmax(0,1fr)}
  .keyboard-open:not(.preview-expanded) .cp-panel{margin-top:0;border-radius:0}
  .keyboard-open:not(.preview-expanded) .cp-stage{visibility:hidden}
  .vl-card{width:140px}.vl-logo{margin-bottom:18px}.vl-row{font-size:10px}
  .vload.err .vl-card{width:min(360px,88%)}.vload.err .vl-logo{width:100px;margin-bottom:12px}.vl-err{font-size:12px!important;gap:10px!important}.vl-err .btn{min-height:40px;font-size:12px;padding:8px 14px}
}
@media(max-width:360px){
  .cp-scroll{padding-inline:16px}.cp-foot{padding-inline:12px;gap:8px}
  .mcards{gap:7px}.mcards button{font-size:11px}
  .cp-back{font-size:12px}.cp-top .brand img{height:25px}
  .cp-foot .btn{padding:12px;gap:9px;font-size:12px}
}
@media(max-width:980px) and (orientation:landscape){
  .cp-main{grid-template-columns:minmax(0,1fr) minmax(340px,46%);grid-template-rows:minmax(0,1fr)}
  .cp-panel{margin-top:0;border-radius:0;border-left:1px solid var(--line)}
  .cp-stage{height:auto;min-height:0}
  .cp-foot{padding-block:7px;padding-inline:12px}
  .mobile-gesture{bottom:15px}
  .acts{max-height:calc(100dvh - 135px)}
  .vbot{bottom:12px}
  .keyboard-open:not(.preview-expanded) .cp-main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  .keyboard-open:not(.preview-expanded) .cp-stage{display:none}
}
@media(min-width:600px) and (max-width:980px) and (orientation:portrait){
  .cp-scroll{padding-inline:32px}.mcards{max-width:570px}
  .cp-foot{padding-inline:28px}.cp-tot b{font-size:15px}
}
@media(max-width:740px) and (orientation:landscape){
  .vtl{flex-direction:column}
}
@media(max-width:980px){
  #mobileLanguage{
    appearance:none;-webkit-appearance:none;width:62px;min-height:40px;padding:8px 23px 8px 8px;
    background:#1e1e20 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23f4f1e9' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 8px center;
    color:#f4f1e9;border:1px solid var(--nav-line);border-radius:7px;font:400 16px var(--sans)
  }
  #mobileLanguage option{background:#fff;color:var(--ink)}
}
@media(max-width:980px){
  .night-lighting-hint{top:60px;left:12px;max-width:calc(100% - 24px);font-size:12px;padding:7px 12px;min-height:36px}
}
@media(max-width:740px) and (orientation:landscape){.night-lighting-hint{top:auto;bottom:16px}}
.preview-expanded .night-lighting-hint{top:60px;bottom:auto}

/* Step controls and section filtering apply only to the mobile layout. */
@media(max-width:980px){
.mobile-step-nav{display:flex;flex:none;gap:6px;padding:15px 16px 10px;overflow:auto;overscroll-behavior-x:contain;scrollbar-width:none;border-bottom:1px solid var(--line);position:relative}
.mobile-step-nav::-webkit-scrollbar{display:none}
.mobile-step-nav button{display:flex;align-items:center;gap:7px;flex:none;min-height:44px;padding:8px 13px;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--ink-2);font-size:13px;line-height:1.2}
.mobile-step-nav button i{display:grid;place-items:center;width:18px;height:18px;font-style:normal;font-size:10px;font-weight:600;border-radius:50%;background:var(--paper);color:var(--ink-3)}
.mobile-step-nav button[aria-current=step]{background:var(--black);color:#fff;border-color:var(--black)}
.mobile-step-nav button[aria-current=step] i{color:var(--black);background:var(--gold)}
.mobile-step-heading{display:flex;flex-direction:column;gap:3px;padding:10px 0 16px}
.mobile-step-heading p{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-d);font-weight:500}
.mobile-step-heading h2{font:400 clamp(23px,5.5vw,28px)/1.2 var(--display);letter-spacing:-.015em;outline:none}
.cp-sec[data-mobile-active=false]{display:none!important}
.cp-sec[data-mobile-step="1"]>.cp-h,.cp-sec[data-mobile-step="3"]>.cp-h,.cp-sec[data-mobile-step="5"]>.cp-h{display:none}
.cp-sec[data-mobile-step="0"]{padding-bottom:4px}
.cp-foot{display:none}
.mobile-config-footer{display:flex;align-items:center;gap:10px;flex:none;padding:10px max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border-top:1px solid var(--line);background:#fff;z-index:5}
#mobilePrevious{flex:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:8px;display:grid;place-items:center;color:var(--ink)}
#mobilePrevious:disabled{opacity:.25;cursor:default}
#mobilePrevious svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5}
.mobile-design-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;line-height:1.3}
.mobile-design-name b{font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-design-name span{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.mobile-config-footer .btn{font-size:13px;padding:12px 15px;min-height:46px;gap:14px;border-radius:8px;line-height:1.3;flex:none}
#mobileQuote{max-width:57%;white-space:normal;text-align:left;gap:10px}
.cp-sec{border:0;padding:0 0 22px}
.cp-sec+.cp-sec{border:0;padding-top:0}
  .cp-scroll{padding-top:8px}
  .keyboard-open .mobile-step-heading{padding-block:6px}
  .keyboard-open .mobile-step-heading h2{font-size:21px}
  .keyboard-open .mobile-step-nav{padding-block:5px}
}
@media(max-width:360px){
  .mobile-step-nav{padding-inline:12px}.mobile-config-footer{padding-inline:12px;gap:8px}
  .mobile-config-footer .btn{padding:12px;gap:9px;font-size:12px}
}
@media(max-width:980px) and (orientation:landscape){
  .mobile-step-nav{padding:8px 12px;gap:5px}
  .mobile-step-nav button{min-height:40px;padding:7px 11px;font-size:12px}
  .mobile-step-heading{padding:6px 0 12px}.mobile-step-heading h2{font-size:22px}
  .mobile-config-footer{padding-block:7px;padding-inline:12px}
}
@media(min-width:600px) and (max-width:980px) and (orientation:portrait){
  .mobile-step-heading h2{font-size:28px}
  .mobile-step-nav{padding-inline:28px}.mobile-step-nav button{padding-inline:15px}
  .mobile-config-footer{padding-inline:28px}.mobile-design-name b{font-size:15px}
}