:root{color-scheme:light;font-family:Arial,"Noto Sans Arabic",sans-serif;background:#fff;color:#171717;--line:#e7e7e7;--bar-height:68px;--actions-height:74px}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#fff;color:#171717}
body{position:relative;min-height:100dvh}
button{font:inherit}
.topbar{position:absolute;top:0;left:0;right:0;height:var(--bar-height);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);background:#fff;z-index:10}
.product-name{margin:0;flex:1;min-width:0;font-size:17px;font-weight:700;line-height:1.35;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn{border:1px solid #d7d7d7;border-radius:11px;background:#fff;color:#161616;min-height:43px;padding:10px 16px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.btn:focus-visible{outline:2px solid #333;outline-offset:2px}
.btn.primary{background:#171717;border-color:#171717;color:#fff}
.stage{position:absolute;top:var(--bar-height);bottom:var(--actions-height);left:0;right:0;background:#fff;overflow:hidden;touch-action:none}
.stage model-viewer{display:block;width:100%;height:100%;background:#fff!important;color-scheme:light;--poster-color:#fff;--progress-bar-color:#171717;--progress-bar-height:3px}
.actionbar{position:absolute;left:0;right:0;bottom:0;min-height:var(--actions-height);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;gap:12px;z-index:10}
.overlay-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:240px;max-width:85%;padding:18px;border:1px solid #e5e5e5;border-radius:14px;background:rgba(255,255,255,.98);box-shadow:0 8px 30px rgba(0,0,0,.07);display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;text-align:center;z-index:8}
.overlay-card strong{width:100%;font-size:14px}.overlay-card span{font-size:12px;color:#666}
.spinner{width:28px;height:28px;border:3px solid #eee;border-top-color:#222;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.hidden{display:none!important}
.fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:20px;background:#fff;z-index:7}
.fallback img{max-width:min(70vw,700px);max-height:65vh;object-fit:contain}
.fallback-box{max-width:600px;text-align:center;border:1px solid #eee;border-radius:12px;padding:12px 14px;background:#fafafa}
.fallback-box strong{display:block;font-size:14px;margin-bottom:4px}.fallback-box span{font-size:12px;color:#666}
.progress-wrap{position:absolute;left:0;right:0;bottom:0;height:3px;background:#eee}.progress-bar{height:100%;width:0;background:#171717;transition:width .12s linear}
@media(max-width:650px){:root{--bar-height:62px;--actions-height:78px}.topbar{gap:8px;padding:8px}.product-name{font-size:13px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2}.btn{font-size:12px;min-height:40px;padding:9px 11px}.actionbar{gap:8px;padding-left:8px;padding-right:8px}}