.card-inspector-stage { min-width: 0; align-self: start; border: 1px solid #bfa0b145; border-radius: 48% 48% 20px 20px / 12% 12% 20px 20px; background: radial-gradient(ellipse at 50% 40%, #684b5a52, #331927 72%); color: #efe4d8; overflow: hidden; }
.card-turntable { display: grid; place-items: center; height: clamp(350px, 58svh, 590px); min-height: 350px; perspective: 1200px; cursor: grab; touch-action: pan-y pinch-zoom; position: relative; isolation: isolate; }
.card-turntable::before { content: ''; width: 48%; height: 20px; position: absolute; bottom: 7%; border-radius: 50%; background: #160a10; filter: blur(16px); opacity: .6; }
.card-turntable.is-turning { cursor: grabbing; }
.card-turntable:focus-visible { outline: 2px solid #dbb2c8; outline-offset: -6px; border-radius: 18px; }
.inspection-card { position: relative; width: min(70%, 300px); aspect-ratio: 63 / 88; transform-style: preserve-3d; user-select: none; }
.inspection-face { position: absolute; inset: 0; border-radius: 4.5% / 3.2%; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #173f8c; overflow: hidden; box-shadow: 0 0 0 .65px #eee1d4; }
.inspection-front { transform: translateZ(.65px); }
.inspection-back { transform: rotateY(180deg) translateZ(.65px); display: grid; place-items: center; }
.inspection-face img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.inspection-edge { position: absolute; inset: 0; border-radius: 4.5% / 3.2%; background: #e7dfc5; }
.inspection-hint { margin: 0 12px 12px !important; text-align: center; color: #ccb9c3 !important; font-size: 12px !important; }
.inspection-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 0 14px 12px; }
.inspection-controls button { padding: 8px 13px; min-width: 44px; min-height: 44px; border: 1px solid #d3b6c54d; border-radius: 22px; color: #f0e5da; background: #d3b6c510; font: inherit; font-size: 12px; }
.inspection-controls button:hover { background: #d3b6c52a; }
.inspection-controls button:focus-visible { outline: 2px solid #dbb2c8; outline-offset: 3px; }
.inspection-controls button:disabled { opacity: .35; cursor: default; }
.inspection-controls output { min-width: 38px; text-align: center; font-size: 11px; color: #ccb9c3; }
.inspection-status { font-size: 11px !important; text-align: center; min-height: 18px; margin: 0 12px 12px !important; color: #d6becb !important; }
@media (max-width: 600px) { .card-turntable { height: 390px; } .inspection-card { width: min(66%, 240px); } }

.inspection-card { -webkit-user-select: none; }
.inspection-controls button { touch-action: manipulation; }
@media (max-width: 380px) {
  .inspection-controls { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .inspection-controls [data-inspect="flip"] { grid-column: 1 / 4; }
  .inspection-controls [data-inspect="reset"] { grid-column: 4 / 7; }
  .inspection-controls [data-inspect="out"] { grid-column: 1 / 3; }
  .inspection-controls output { grid-column: 3 / 5; }
  .inspection-controls [data-inspect="in"] { grid-column: 5 / 7; }
  .card-turntable { min-height: 280px; height: 330px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .card-turntable { min-height: 240px; height: 270px; }
  .inspection-card { width: min(65%, 150px); }
  .inspection-controls { gap: 6px; padding-inline: 8px; }
}

.inspection-front { isolation: isolate; }
.inspection-foil { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; mix-blend-mode: screen; mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-mode: alpha; }
.inspection-foil[hidden] { display: none !important; }
.inspection-foil > span, .foil-particles { position: absolute; inset: 0; width: 100%; height: 100%; }
.foil-particles { display: block; }
.foil-color { background: repeating-linear-gradient(var(--foil-angle, 115deg), #67e6ec 0%, #95a6ed 12%, #f8b4da 24%, #f3df9a 36%, #e2bcd0 48%, #67e6ec 60%); background-size: 240% 240%; background-position: var(--foil-x, 50%) var(--foil-y, 50%); opacity: .065; }
.foil-light { background: radial-gradient(ellipse at var(--foil-x, 50%) var(--foil-y, 50%), #ffffffd0 0%, #ffffff30 14%, transparent 45%); opacity: .07; }
.inspection-foil[data-effect="rainbow"] .foil-color { opacity: .14; }
.inspection-foil[data-effect="shining"] .foil-color { opacity: .035; }
.inspection-foil[data-effect="reverse"] .foil-color { opacity: .04; }
.inspection-finish { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0 20px; min-width: 0; text-align: center; color: #f1e5d9; }
.inspection-finish-label { flex: none; color: #c2a4b4; font-size: 10px; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; }
.inspection-finish-value { font-family: 'Fraunces', Georgia, serif; font-size: 15px; line-height: 1.5; text-wrap: balance; }
.inspection-finish label { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; max-width: 100%; }
.inspection-finish select { appearance: none; -webkit-appearance: none; min-width: 0; max-width: 260px; min-height: 44px; padding: 8px 30px 8px 13px; border: 1px solid #c2a4b445; border-radius: 24px; background: #391e2c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23b8c99d' stroke-linecap='round'/%3E%3C/svg%3E") right 12px center / 10px 6px no-repeat; color: #f1e5d9; font: inherit; font-size: 13px; text-overflow: ellipsis; cursor: pointer; }
.inspection-finish select:focus-visible, .inspection-finish-about summary:focus-visible { outline: 2px solid #c2a4b4; outline-offset: 3px; }
.inspection-finish-about { margin: 0 18px 4px; color: #c2a4b4; text-align: center; }
.inspection-finish-about summary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 12px; cursor: pointer; list-style: none; font-size: 11px; line-height: 1.4; border-radius: 18px; touch-action: manipulation; }
.inspection-finish-about summary::-webkit-details-marker { display: none; }
.inspection-finish-about summary::after { content: '+'; font-size: 15px; }
.inspection-finish-about[open] summary::after { content: '−'; }
.inspection-finish-about summary:hover { color: #f1e5d9; }
.inspection-finish-note { margin: 0 auto 14px !important; padding: 12px 14px; max-width: 43ch; border: 1px solid #c2a4b425; border-radius: 12px; background: #331826; text-align: left; font-size: 11px !important; line-height: 1.6 !important; color: #c2a4b4 !important; }
.inspection-finish-about[hidden], .inspection-status:empty { display: none; }
@media (pointer: coarse), (max-width: 600px) { .inspection-finish select { font-size: 16px; } }