.preview-card-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; padding: 9px 11px; min-height: 40px; border: 1px solid #0f3d2e; border-radius: 9px; background: #0f3d2e; color: #fffefd; font-size: 11px; font-weight: 750; line-height: 1.4; }
.preview-card-button:hover { background: #0b3024; }
.preview-card-button svg { width: 14px; height: 14px; }
html.custom-preview-open { overflow: hidden; scrollbar-gutter: stable; }
.card-inspection { width: min(96vw, 920px); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: clamp(16px, 3vw, 28px); border: 1px solid #0f3d2e2e; border-radius: 24px; background: #f5f6f2; color: #141815; box-shadow: 0 24px 90px #10251c26; overflow: auto; }
.card-inspection::backdrop { background: #10251c99; }
.inspection-heading, .inspection-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.inspection-kicker { margin: 0 0 5px; color: #0f3d2e; font-size: 12px; font-weight: 700; }
.inspection-heading h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.04em; }
.inspection-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #0f3d2e2e; border-radius: 50%; background: #fffefd; color: #0f3d2e; }
.inspection-close:hover { background: #e2ebe0; }
.inspection-stage { display: grid; place-items: center; width: 100%; padding: 30px 24px; perspective: 1600px; }
.inspection-frame { --card-radius: clamp(24px, 4vw, 44px); --card-frame-edge: #0f3d2e; --inspect-x: 0deg; --inspect-y: 0deg; width: min(640px, calc(100dvh - 250px), 100%); aspect-ratio: 1; position: relative; perspective: 1600px; }
.inspection-frame:focus-visible { outline: 2px solid #469671; outline-offset: 12px; border-radius: var(--card-radius); }
.inspection-card, .inspection-flip, .inspection-front, .inspection-back { position: absolute; inset: 0; display: block; transform-style: preserve-3d; }
.inspection-card { transform: rotateX(var(--inspect-x)) rotateY(var(--inspect-y)); transition: transform .18s ease-out; }
.inspection-flip { transform: rotateY(0deg); transition: transform .65s cubic-bezier(.4, 0, .2, 1); }
.inspection-frame.is-back .inspection-flip { transform: rotateY(180deg); }
.inspection-front, .inspection-back { border-radius: var(--card-radius); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.inspection-front { transform: translateZ(2px); }
.inspection-front > .designer-face { transform: none; box-shadow: 0 0 0 1px #0f3d2e55, 0 20px 36px #10251c24; }
.inspection-card * { pointer-events: none; user-select: none; }
.inspection-back { transform: rotateY(180deg) translateZ(2px); overflow: hidden; background: #080b09; box-shadow: 0 0 0 1px #0f3d2e55, 0 20px 36px #10251c24; }
.inspection-back img { width: 100%; height: 100%; display: block; object-fit: cover; }
.inspection-bare { display: grid; place-items: center; height: 100%; padding: 15%; color: #62c393; font-size: clamp(24px, 4vw, 42px); font-weight: 800; line-height: 1.25; letter-spacing: -.04em; text-align: center; }
.inspection-footer { border-top: 1px solid #0f3d2e21; padding-top: 18px; }
.inspection-footer p { margin: 0; max-width: 430px; color: #5e6962; font-size: 12px; line-height: 1.7; }
.inspection-footer button { flex-shrink: 0; }
@media (max-width: 600px) {
  .card-inspection { width: calc(100vw - 20px); padding: 16px; border-radius: 20px; }
  .inspection-stage { padding: 24px 0; }
  .inspection-footer { flex-wrap: wrap; justify-content: center; text-align: center; }
}
@media (hover: none) { .inspection-footer p { display: none; } }
@media (prefers-reduced-motion: reduce) { .inspection-card, .inspection-flip { transition: none; } }