.card-model {
  height: 240px;
  position: relative;
  margin: 12px -16px 18px;
  background: radial-gradient(ellipse at 58% 37%, #29475780, transparent 75%), linear-gradient(160deg, #0d1a2580, #070f1770);
  border: 1px solid #ffffff08;
  border-radius: 8px;
  touch-action: pan-y;
  cursor: grab;
}
.card-model:active { cursor: grabbing; }
.card-model::before { content: ""; position: absolute; bottom: 20%; left: 10%; width: 80%; height: 28%; background: radial-gradient(ellipse, #00000048, transparent 70%); pointer-events: none; }
.card-model canvas { position: relative; display: block; width: 100%; height: 100%; touch-action: pan-y; }
.card-model:focus-visible { outline: 2px solid #53dbc9; outline-offset: 2px; }
.model-status { position: absolute; z-index: 1; left: 12px; top: 12px; color: #9cb4ba; font-size: 12px; pointer-events: none; }
.model-status:empty { display: none; }
.model-hint { position: absolute; z-index: 1; bottom: 5px; left: 12px; right: 12px; color: #91a9b0; font-size: 10px; line-height: 1.5; pointer-events: none; opacity: 0; transition: opacity .2s; }
.card-model:hover .model-hint, .card-model:focus-within .model-hint { opacity: 1; }
@media (max-width: 650px) {
  .card-model { height: 240px; }
  .model-hint { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .model-hint { transition: none; } }