yoo-model-viewer { display: block; width: 100%; }
.ymv-surface { position: relative; width: 100%; min-height: 200px; }
.ymv-stage, .ymv-stage model-viewer { display: block; width: 100%; height: 100%; }
.ymv-stage canvas { display: block; max-width: 100%; touch-action: none; }
.ymv-status { position: absolute; top: 10px; left: 10px; right: 10px; padding: 10px; background: #fff; color: #222; }
.ymv-status[hidden] { display: none; }
.ymv-toolbar { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 8px; }
.ymv-button, .ymv-trigger { cursor: pointer; border: 1px solid #bbb; border-radius: 4px; background: #fff; color: #222; padding: 8px 14px; font: inherit; }
.ymv-trigger { display: inline-flex; flex-direction: column; gap: 8px; max-width: 100%; }
.ymv-trigger img { max-width: 100%; height: auto; }
.ymv-dialog { box-sizing: border-box; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); padding: 16px; border: 0; border-radius: 6px; background: #fff; color: #222; }
.ymv-dialog::backdrop { background: rgb(0 0 0 / .7); }
.ymv-dialog .ymv-surface { max-height: calc(100dvh - 120px); }
.ymv-surface:fullscreen { height: 100vh !important; max-height: none; background: var(--mv-bg, #fff) !important; }