.model-viewer{border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-bottom:24px;background:var(--surface)}.model-stage{height:440px;max-height:65vh;min-height:280px;position:relative;background:linear-gradient(180deg,#080808 0%,#181818 48%,#484848 100%)}.model-stage canvas{display:block;max-width:100%;touch-action:none}.model-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;color:#191919}.model-placeholder>span{font-size:70px;color:#ad8e12}.model-placeholder h2{margin:8px}.model-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px}.model-status{font-size:12px;color:var(--muted)}.model-upload{padding:18px;border:1px dashed var(--line);border-radius:12px;margin:20px 0}.model-upload p{font-size:13px}.work-card-3d .work-card-image{background:#eaeae5}.work-card-3d img{object-fit:contain}@media(max-width:760px){.model-stage{height:330px}.model-toolbar .chip{flex:1}.model-status{width:100%}}
.model-upload{display:grid;gap:10px;min-width:0;padding:14px;border:1px dashed var(--line);border-radius:12px}.model-upload input[type=file]{max-width:100%;width:100%}.model-upload>small,.model-upload>[role=status]{font-size:12px;color:var(--muted);overflow-wrap:anywhere}.model-upload>div:not([data-model-preview-host]){display:flex;flex-wrap:wrap;gap:8px}.model-upload .button{margin:0}.model-upload [data-model-preview-host]:empty{display:none}.model-upload .model-stage{min-height:280px}.model-upload [data-model-upload-status]{margin:0}
.model-appearance{border:1px solid var(--line);background:var(--white);border-radius:12px;padding:16px;margin-top:12px}.model-appearance header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.model-appearance header label{display:flex;align-items:center;gap:8px;font-size:12px}.model-appearance header input{width:auto}.model-appearance>p,.model-appearance>small{font-size:12px;color:var(--muted)}.model-material-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.model-color-row{display:grid!important;grid-template-columns:minmax(90px,1fr) 38px 90px;align-items:center;gap:8px;margin:10px 0}.model-color-row input[type=color]{padding:2px;width:38px;height:34px;min-height:0;border-radius:8px;cursor:pointer}.model-color-row input[type=text]{width:100%;min-width:0;min-height:34px;padding:5px 8px;font-size:12px}.model-material-range{display:grid!important;grid-template-columns:minmax(95px,1fr) minmax(70px,1fr) 35px;gap:8px;align-items:center;margin:12px 0}.model-material-range input{padding:0;min-height:0;width:100%;accent-color:#f5cd28}.model-appearance label>span,.model-appearance output{font-size:12px}.model-material-type{display:grid;gap:6px}.model-appearance>small{display:block;margin:14px 0}.model-appearance [hidden]{display:none!important}@media(max-width:700px){.model-material-grid{grid-template-columns:1fr;gap:8px}}
.model-editor-visual{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}.model-editor-visual>.model-appearance{margin:0;padding:12px}.model-editor-visual .model-material-grid{grid-template-columns:1fr;gap:8px}.model-editor-visual .model-color-row{grid-template-columns:minmax(70px,1fr) 32px 80px;gap:5px}.model-editor-visual .model-material-range{grid-template-columns:100px minmax(40px,1fr) 28px;gap:6px}.model-editor-visual .model-appearance header{gap:8px}.model-editor-visual .model-color-row input[type=color]{width:32px}.model-editor-visual .model-material-type select{width:100%;max-width:none}.model-editor-visual .model-appearance .button{width:100%;min-height:34px;padding:6px}@media(max-width:900px){.model-editor-visual{grid-template-columns:1fr}.model-editor-visual .model-material-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.model-editor-visual .model-material-grid{grid-template-columns:1fr}}
.model-viewer{position:relative}.model-local-controls{position:absolute;right:12px;top:12px;z-index:5;max-width:calc(100% - 24px);max-height:calc(100% - 80px);overflow:auto;border-radius:10px;background:var(--white,#fff);box-shadow:0 3px 18px #0002}.model-local-controls>summary{list-style:none;cursor:pointer;padding:9px 14px;background:#f9d737;color:#202020;font-size:12px;font-weight:600;text-align:right}.model-local-controls .model-appearance{width:280px;max-width:100%;box-sizing:border-box;padding:12px;margin:0;border:0}.model-local-controls .model-material-grid{grid-template-columns:1fr;gap:6px}.model-local-controls .model-color-row{grid-template-columns:minmax(65px,1fr) 32px 80px;gap:5px}.model-local-controls .model-color-row input[type=color]{width:32px}.model-local-controls .model-material-range{grid-template-columns:100px minmax(40px,1fr) 28px;gap:5px}.model-local-controls select{max-width:100%;width:100%;padding:7px}.model-local-controls button{width:100%;padding:7px}.model-local-controls header label{font-size:11px}.model-local-controls [hidden]{display:none!important}

/* Keep appearance controls below the canvas, never over the model. */
.model-local-controls{position:static;flex:none;max-width:none;max-height:none;overflow:visible;margin:0 10px 10px;box-shadow:none;border:1px solid var(--line,#ddd)}.model-local-controls>summary{text-align:center}.model-local-controls .model-appearance{width:100%;max-width:none}.model-local-controls .model-material-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}.model-local-controls .model-material-range{grid-template-columns:minmax(95px,1fr) minmax(55px,1fr) 30px}

.model-toolbar .model-help-button{flex:0 0 36px;width:36px;height:36px;min-width:36px;border-radius:50%;border:1px solid #aaa;background:#fff;color:#222;font-size:20px;font-weight:700;padding:0;cursor:pointer}.model-control-help{box-sizing:border-box;width:440px;max-width:calc(100% - 24px);max-height:calc(100% - 24px);overflow:auto;border:1px solid #ddd;border-radius:14px;padding:18px;background:#fff;color:#222;font:14px/1.6 system-ui;box-shadow:0 12px 40px #0004}.model-control-help::backdrop{background:#0007}.model-control-help header{display:flex;align-items:center;justify-content:space-between;gap:12px}.model-control-help header button{width:36px;height:36px;border:1px solid #ddd;border-radius:50%;background:#fff;color:#222;font-size:22px;cursor:pointer;padding:0}.model-control-help h3{font-size:15px;margin:16px 0 6px}.model-control-help ul{padding-left:22px;margin:0}.model-control-help li{margin:7px 0}.model-control-help p{font-size:12px;color:#666;border-top:1px solid #ddd;padding-top:12px}
/* Viewer controls and idle gesture guidance. */
.model-stage{background:radial-gradient(ellipse at 50% 70%,#394047 0%,#202528 48%,#101213 100%)}
.model-idle-hint{position:absolute;bottom:22px;left:12px;right:12px;display:flex;align-items:center;justify-content:center;gap:9px;color:#d0d2d3;font:12px/1.7 system-ui;text-align:center;pointer-events:none;text-shadow:0 1px 3px #000}
.model-idle-hint[hidden]{display:none}.model-idle-hint>span:first-child{font-size:24px}.hint-touch{display:none}
.model-full-button{position:absolute;right:12px;top:12px;border:1px solid #ffffff35;border-radius:8px;background:#ffffff12;color:white;font-size:22px;padding:4px 9px;cursor:pointer}
.model-toolbar{background:#fff;color:#171a1c;display:flex;flex-wrap:nowrap;justify-content:center;gap:0;padding:12px 8px;min-height:68px}
.model-toolbar>button{border:0!important;border-right:1px solid #ececef!important;border-radius:0!important;background:transparent!important;color:#171a1c!important;padding:3px 18px;font-size:12px;cursor:pointer;min-height:40px}
.model-toolbar>button:before{display:block;font-size:23px;line-height:28px;font-weight:400}.model-toolbar [data-model-reset]:before{content:'◎'}.model-toolbar [data-model-spin]:before{content:'▷'}.model-toolbar [data-model-spin][aria-pressed=true]:before{content:'Ⅱ'}.model-toolbar .model-appearance-button:before{content:'☼'}.model-toolbar .model-status{display:none}.model-toolbar .model-help-button{margin-left:8px;font-size:20px;min-width:35px;padding:0}
.model-appearance-sheet{width:460px;max-width:calc(100vw - 24px);max-height:85dvh;padding:18px;border:1px solid #e3e4e8;border-radius:18px;background:white;color:#171a1c;overflow:auto;box-shadow:0 10px 50px #0004;font:14px system-ui}.model-appearance-sheet::backdrop{background:#0007}.model-appearance-sheet>header{display:flex;justify-content:space-between;align-items:center}.model-appearance-sheet>header strong{font-size:20px}.model-appearance-sheet>header small{display:block;color:#777;margin-top:6px}.model-appearance-sheet>header button{border:0;background:none;font-size:24px;cursor:pointer}.model-appearance-sheet .model-appearance{border:0;padding:0}.model-appearance-sheet .model-material-grid{grid-template-columns:1fr;gap:12px}.model-appearance-sheet .model-material-grid>div{border:1px solid #e4e5e9;border-radius:8px;padding:12px}.model-appearance-sheet footer{position:sticky;bottom:-18px;background:white;padding:12px 0 0}.model-appearance-sheet [data-sheet-done]{width:100%;background:#ffda24;border:0;border-radius:8px;padding:13px;font-weight:700;cursor:pointer}.model-appearance-sheet input{accent-color:#ffd52d}.model-viewer:fullscreen{width:100%;height:100%;margin:0;display:flex;flex-direction:column}.model-viewer:fullscreen .model-stage{flex:1;max-height:none;height:auto}
@media(max-width:700px){.hint-touch{display:inline}.hint-mouse{display:none}.model-stage{height:65dvh;max-height:none}.model-toolbar>button{flex:1;padding:3px 7px;font-size:11px}.model-toolbar .model-help-button{flex:0 0 30px}.model-appearance-sheet{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:100%;max-height:85dvh;border-radius:20px 20px 0 0;padding:24px 16px 16px}.model-appearance-sheet:before{content:'';display:block;width:34px;height:4px;border-radius:4px;background:#cdd0d5;position:absolute;top:8px;left:calc(50% - 17px)}.model-appearance-sheet footer{bottom:-16px}}
/* Slide-up panels reserve space instead of covering the live model. */
.model-appearance-sheet[open]{position:relative;inset:auto;margin:0;display:flex;flex-direction:column;flex:0 1 auto;width:100%;max-width:none;max-height:52%;min-height:0;border-radius:18px 18px 0 0;box-shadow:0 -4px 18px #0001;padding:20px 16px 12px;animation:model-slide-up .22s ease-out;overflow:auto}
.model-viewer.model-sheet-open{display:flex;flex-direction:column;height: min(850px,90dvh)}.model-sheet-open>.model-stage{flex:1 1 auto;height:auto;max-height:none;min-height:180px}.model-sheet-open>.model-toolbar{order:3}.model-sheet-open>.model-appearance-sheet{order:2}.model-appearance-sheet .model-appearance>header,.model-appearance-sheet .model-appearance>p,.model-appearance-sheet [data-material-note]{display:none}.model-sheet-tabs{display:flex;gap:3px;background:#f1f2f4;border-radius:8px;margin:14px 0 8px}.model-sheet-tabs button{flex:1;padding:10px;background:none;border:0;border-radius:8px;cursor:pointer}.model-sheet-tabs button[aria-pressed=true]{background:#ffdb27}.model-appearance-sheet .model-appearance{margin:0}.model-appearance-sheet footer{flex-shrink:0}.model-appearance-sheet [data-material-reset]{background:#fff;border:1px solid #ddd;border-radius:8px;padding:10px;margin-top:10px;cursor:pointer}
@keyframes model-slide-up{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.model-appearance-sheet[open]{animation:none}}
@media(max-width:700px){.model-appearance-sheet[open]{max-height:56%;}.model-viewer.model-sheet-open{height:85dvh}.model-appearance-sheet>header strong{font-size:17px}.model-appearance-sheet .model-material-grid>div{padding:8px}.model-appearance-sheet:before{top:7px}.model-appearance-sheet .model-color-row{grid-template-columns:1fr 36px 90px}}
.model-idle-hint>.model-hint-icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:22px;height:22px;border:1.5px solid currentColor;border-radius:50%;font:600 15px/1 system-ui;color:#d0d2d3}
@media(max-width:220px){.model-idle-hint{font-size:9px;bottom:12px;left:5px;right:5px;gap:4px}.model-idle-hint>.model-hint-icon{width:16px;height:16px;font-size:11px}}
.shop-palette{margin:10px 0}.shop-color-source{display:flex;align-items:center;gap:10px;font-size:12px}.shop-color-source select{flex:1;min-width:0;min-height:32px;padding:6px;border:1px solid #ddd;border-radius:7px;background:#fff;color:#222;font:inherit}.shop-palette-list{display:grid;gap:6px;max-height:180px;overflow:auto;margin-top:8px;font-size:12px}.shop-color-choice{display:flex!important;align-items:center;gap:8px;text-align:left;width:100%;padding:8px!important;border:1px solid #ddd!important;border-radius:7px!important;background:white!important;color:#222!important;font:inherit!important}.shop-color-choice svg{width:24px;height:24px;flex:none}.shop-color-choice[aria-pressed=true]{border-color:#e8bf00!important;background:#fff9db!important}.shop-palette [hidden]{display:none!important}

.shop-environment{display:grid;gap:8px;margin:10px 0}.shop-environment label{display:flex;align-items:center;gap:8px}.shop-environment select{flex:1;min-width:0;padding:8px;border:1px solid #ddd;border-radius:7px;background:#fff;color:#222}.shop-environment small{color:#777;font-size:11px}

.material-environment{position:absolute!important;top:52px;right:10px;z-index:4;display:flex!important;align-items:center;justify-content:center;width:38px;height:38px;min-height:0!important;padding:7px!important;border:1px solid #ffffff55!important;border-radius:9px!important;background:#20252cdd!important;color:#fff!important;cursor:pointer;touch-action:manipulation}.material-environment svg{width:22px!important;height:22px!important}.material-environment[aria-pressed=true]{background:#ffd620!important;color:#171a20!important;border-color:#ffd620!important}.material-environment[hidden]{display:none!important}.model-embedded .model-stage>.material-environment{display:none!important}

.material-environments{position:absolute;top:52px;right:10px;z-index:4;display:flex;flex-direction:column;gap:7px}.material-environments .material-environment{position:static!important}.material-mode-notice{position:absolute;right:46px;top:0;white-space:nowrap;padding:7px 10px;border-radius:8px;background:#121820e8;color:#fff;font:12px system-ui;pointer-events:none}.material-mode-notice[hidden]{display:none!important}.model-embedded .model-stage>.material-environments{display:none!important}