#shop-preview{--sp-ink:#eff0e6;--sp-muted:#a8b6b3;--sp-accent:#d7c49e;position:fixed;inset:0;z-index:90;pointer-events:none;font:12px 'Be Vietnam Pro',system-ui,sans-serif;color:var(--sp-ink)}
.sp-head{position:absolute;top:max(17px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));padding:12px 18px;background:#1a292bea;border:1px solid #69777066;border-radius:16px;box-shadow:0 5px 20px #10212722}
.sp-head small{display:block;font-size:9px;letter-spacing:.14em;color:var(--sp-accent);font-weight:700}.sp-head small span{color:var(--sp-muted)}.sp-title{display:block;font-size:22px;margin-top:5px;letter-spacing:-.04em}.sp-theme{font-size:11px;color:#c4cec8;margin:4px 0 0}
.sp-floor-indicator{position:absolute;top:max(17px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));display:flex;align-items:center;gap:12px;min-width:210px;padding:10px 13px;background:#17272aee;border:1px solid #687c7580;border-radius:15px;box-shadow:0 8px 24px #07181f4d;transition:border-color .15s,background .15s}.sp-floor-indicator.upper{background:#18313aee;border-color:#93c9c0aa}.sp-floor-indicator>div:last-child{display:grid;gap:2px}.sp-floor-indicator small{font-size:8px;letter-spacing:.15em;font-weight:800;color:#9aa9a5}.sp-floor-indicator.upper small{color:#8fd2c7}.sp-floor-indicator strong{font-size:15px;color:#fff3d6}.sp-floor-indicator>div>span{font-size:9px;color:#aec0bc}.sp-building{display:flex!important;flex-direction:column;gap:2px;width:31px;padding:3px;border:2px solid #70837d;border-radius:5px 5px 3px 3px;background:#0d1d21}.sp-building i{position:relative;display:block;height:6px;background:#394c4c;border-radius:1px}.sp-building i span{position:absolute;left:-9999px}.sp-building i.on{background:#e3ca93;box-shadow:0 0 8px #f2d793aa}.sp-floor-indicator.upper .sp-building i.on{background:#82d4c6;box-shadow:0 0 9px #75d5c7cc}
.sp-floor-transition{position:absolute;top:50%;left:50%;z-index:4;display:grid;place-items:center;gap:3px;min-width:118px;padding:12px 18px;border:1px solid #9ecdc4a8;border-radius:16px;background:#12272ced;box-shadow:0 14px 36px #06181fcc,0 0 0 4px #9ed1c817;color:#edf5e8;opacity:0;transform:translate(-50%,-50%) scale(.88);transition:opacity .14s,transform .2s;backdrop-filter:blur(8px)}.sp-floor-transition small{font-size:8px;font-weight:800;letter-spacing:.16em;color:#8fd2c7}.sp-floor-transition strong{font-size:21px;line-height:1}.sp-floor-transition strong i{display:inline-block;margin:0 7px;color:#e3ca93;font-style:normal}.sp-floor-transition span{font-size:9px;color:#b8c7c2}.sp-switching .sp-floor-transition{opacity:1;transform:translate(-50%,-50%) scale(1)}.sp-switching .sp-dock{pointer-events:none}.sp-going-up .sp-floor-transition strong i{animation:spLift .55s ease-in-out infinite}.sp-going-down .sp-floor-transition strong i{animation:spDrop .55s ease-in-out infinite}@keyframes spLift{50%{transform:translateY(-4px)}}@keyframes spDrop{50%{transform:translateY(4px)}}
.sp-dock{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:16px;right:16px;max-width:920px;margin:auto;padding:12px 14px;background:#1b2a2cf2;border:1px solid #74837980;border-radius:20px;box-shadow:0 14px 40px #091b2a77;pointer-events:auto;backdrop-filter:blur(12px)}
.sp-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.sp-toolbar>span{font-size:9px;font-weight:700;letter-spacing:.13em;color:var(--sp-accent)}.sp-layout{display:flex;gap:3px;padding:3px;border-radius:24px;background:#122024}.sp-layout button{min-height:40px;font:600 10px 'Be Vietnam Pro',sans-serif;background:transparent;border:0;color:#afbab5;padding:8px 13px;border-radius:20px;cursor:pointer}.sp-layout button.active{background:#425a53;color:#fff}
.sp-stages{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}.sp-stages button{flex:1;min-width:140px;min-height:48px;display:flex;align-items:center;gap:8px;background:#293a3c;border:1px solid #52676188;border-radius:12px;color:#c7d1cc;padding:10px 9px;cursor:pointer;font:700 10px 'Be Vietnam Pro',sans-serif;text-align:left;transition:background .15s,border-color .15s}.sp-number{font-size:19px;font-weight:500;color:#829b92}.sp-stages button.active{background:#4c625a;border-color:#b6c9a6;color:#fff5dc;box-shadow:inset 0 -3px #d8c394}.sp-stages button.active .sp-number{color:#e1caa1}.sp-stages button:hover{background:#3c524d}.sp-stages button:focus-visible,.sp-floors button:focus-visible,.sp-layout button:focus-visible{outline:2px solid #f5d8a4;outline-offset:2px}
.sp-bottom{display:flex;gap:15px;align-items:center;margin-top:9px}.sp-floors{display:flex;gap:5px;flex-shrink:0}.sp-floors button{min-height:44px;display:flex;gap:5px;align-items:center;border:1px solid #60787166;border-radius:10px;background:#203235;color:#b5c6bf;font:600 10px 'Be Vietnam Pro',sans-serif;padding:7px 10px;cursor:pointer}.sp-floors b{font-size:12px}.sp-floors button.active{background:#587168;color:#fff5d7;border-color:#c8d2b5;box-shadow:inset 0 -3px #e2c98f}.sp-note{font-size:10px;color:#afbbb6;margin:0;line-height:1.5}.shop-preview-on #title-screen{display:none!important}
@media(max-width:600px){.sp-head{top:8px;left:8px;right:auto;width:calc(55% - 12px);padding:8px 10px;border-radius:12px}.sp-head small{font-size:7px}.sp-head small span{display:none}.sp-title{font-size:15px;margin-top:2px}.sp-theme{font-size:8px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sp-floor-indicator{top:8px;right:8px;min-width:0;width:calc(45% - 12px);gap:7px;padding:7px 8px;border-radius:12px}.sp-floor-indicator>div>span{display:none}.sp-floor-indicator strong{font-size:12px}.sp-floor-indicator small{font-size:6px;letter-spacing:.09em}.sp-building{width:23px;flex-shrink:0}.sp-building i{height:4px}.sp-floor-transition{top:43%;min-width:102px;padding:10px 14px}.sp-floor-transition strong{font-size:18px}.sp-dock{left:8px;right:8px;bottom:8px;padding:9px;border-radius:16px}.sp-toolbar>span{display:none}.sp-toolbar{justify-content:center;margin-bottom:7px}.sp-layout{width:100%}.sp-layout button{flex:1;min-height:38px;font-size:9px;padding:6px}.sp-stages button{min-width:126px;min-height:46px;padding:8px}.sp-bottom{display:block;margin-top:7px}.sp-floors{justify-content:space-between}.sp-floors button{min-width:44px;min-height:44px;flex:1;justify-content:center;padding:6px 3px}.sp-floors button span{display:none}.sp-floors b{font-size:11px}.sp-note{font-size:8px;margin-top:6px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media(prefers-reduced-motion:reduce){.sp-stages button,.sp-floor-transition{transition:none}.sp-floor-transition strong i{animation:none!important}}