.design-3d-viewer {
    overflow: hidden;
    border: 1px solid rgba(254,2,2,.16);
    background: #E6F0EF;
    box-shadow: 0 28px 70px rgba(0,0,0,.16);
}

.design-3d-stage {
    position: relative;
    display: grid;
    min-height: clamp(440px, 58vw, 720px);
    place-items: center;
    overflow: hidden;
    perspective: 1400px;
    cursor: grab;
    touch-action: none;
    background:
        radial-gradient(circle at 50% 44%, rgba(255,255,255,.96), rgba(230,240,239,.9) 54%, #E6F0EF 100%);
}
.design-3d-stage:active { cursor: grabbing; }
.design-3d-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .42;
    background:
        linear-gradient(rgba(254,2,2,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(254,2,2,.08) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, transparent, #000000 38%);
}
.design-3d-stage::after {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 9%;
    height: 12%;
    border-radius: 50%;
    background: rgba(0,0,0,.25);
    filter: blur(24px);
    transform: rotateX(70deg);
}

.design-3d-object {
    --rotate-x: -2deg;
    --rotate-y: -8deg;
    --viewer-scale: 1;
    position: relative;
    z-index: 2;
    width: min(84%, 900px);
    aspect-ratio: 3 / 2;
    transform-style: preserve-3d;
    transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) scale(var(--viewer-scale));
    transition: transform .12s ease-out;
    will-change: transform;
}
.design-3d-object img {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 8px solid rgba(255,255,255,.94);
    box-shadow: 0 28px 56px rgba(0,0,0,.24);
    user-select: none;
    transform: translateZ(32px);
}
.design-3d-depth {
    position: absolute;
    inset: 2%;
    background: #fe0202;
    box-shadow: 0 20px 45px rgba(0,0,0,.22);
}
.design-3d-depth--back { transform: translateZ(-24px); opacity: .78; }
.design-3d-depth--mid { transform: translateZ(6px); background: #6D6D6D; }
.design-3d-sheen {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: .26;
    background: linear-gradient(118deg, transparent 20%, rgba(255,255,255,.9) 46%, transparent 70%);
    transform: translateZ(35px);
    mix-blend-mode: screen;
}
.design-3d-drag-hint {
    position: absolute;
    z-index: 7;
    left: 50%;
    bottom: 18px;
    display: inline-flex;
    gap: 8px;
    margin: 0;
    padding: 8px 13px;
    border-radius: 999px;
    color: #FFFFFF;
    background: rgba(0,0,0,.76);
    font-size: 12px;
    font-weight: 800;
    transform: translateX(-50%);
    backdrop-filter: blur(8px);
}

.design-3d-toolbar {
    position: relative;
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) repeat(5, auto);
    gap: 8px;
    align-items: center;
    padding: 14px 16px;
    color: #FFFFFF;
    background: #000000;
}
.design-3d-toolbar > div { display: flex; flex-direction: column; }
.design-3d-toolbar strong { font-size: 13px; }
.design-3d-toolbar span { color: rgba(255,255,255,.6); font-size: 11px; }
.design-3d-toolbar button {
    min-width: 42px;
    min-height: 42px;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 0;
    color: #FFFFFF;
    background: rgba(255,255,255,.08);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.design-3d-toolbar button:hover { background: #fe0202; }

@media (max-width: 640px) {
    .design-3d-stage { min-height: 390px; }
    .design-3d-object { width: 92%; }
    .design-3d-object img { border-width: 5px; }
    .design-3d-toolbar { grid-template-columns: repeat(5, 1fr); }
    .design-3d-toolbar > div { grid-column: 1 / -1; margin-bottom: 4px; }
    .design-3d-toolbar button { min-width: 0; padding-inline: 5px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .design-3d-object { transition: none; }
}