.model-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); list-style: none; margin: 0; padding: 0; }
.model-card { min-width: 0; }
.model-card__button { background: linear-gradient(140deg, rgba(100, 217, 255, 0.06), rgba(183, 243, 107, 0.025)); border: 1px solid var(--line); border-radius: 8px; color: var(--paper); cursor: pointer; display: flex; flex-direction: column; font: inherit; height: 100%; overflow: hidden; padding: 0; text-align: left; transition: border-color 180ms ease, transform 180ms ease; width: 100%; }
.model-card__button:hover, .model-card__button:focus-visible { border-color: var(--acid); transform: translateY(-3px); }
.model-card__button:focus-visible { outline: 2px solid #64d9ff; outline-offset: 4px; }
.model-card__media { aspect-ratio: 1; background: radial-gradient(circle at 50% 42%, rgba(100, 217, 255, 0.2), rgba(16, 27, 26, 0) 65%), #0b1514; display: block; position: relative; }
.model-card__media img { display: block; height: 100%; object-fit: contain; transition: transform 300ms ease; width: 100%; }
.model-card__button:hover .model-card__media img { transform: scale(1.05); }
.model-card__placeholder { color: var(--acid); display: grid; font: 700 3rem var(--display); height: 100%; place-items: center; }
.model-card__badge { background: rgba(16, 27, 26, 0.85); border: 1px solid rgba(183, 243, 107, 0.4); border-radius: 30px; color: var(--acid); font: 0.75rem var(--mono); left: 14px; padding: 3px 10px; position: absolute; top: 14px; }
.model-card__body { display: grid; gap: 8px; padding: 18px 20px 20px; }
.model-card__title { font-size: 1.3rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.model-card__meta { color: #64d9ff; font-size: 0.88rem; line-height: 1.5; }
.model-card__cta { color: var(--acid); font-size: 0.9rem; font-weight: 600; }
.model-card__cta::after { content: " \2192"; }

.model-dialog { background: var(--ink); border: 1px solid var(--line); border-radius: 10px; color: var(--paper); height: min(860px, calc(100dvh - 32px)); max-height: none; max-width: none; padding: 0; width: min(1240px, calc(100vw - 32px)); }
.model-dialog::backdrop { background: rgba(4, 10, 9, 0.82); backdrop-filter: blur(4px); }
.model-dialog__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); height: 100%; }
.model-dialog__stage { background: radial-gradient(circle at 50% 40%, rgba(100, 217, 255, 0.16), rgba(16, 27, 26, 0) 60%), #0b1514; min-height: 0; position: relative; }
.model-viewer { --poster-color: transparent; background: transparent; display: block; height: 100%; width: 100%; }
.model-viewer:focus-visible { outline: 2px solid #64d9ff; outline-offset: -4px; }
.model-viewer__progress { background: rgba(232, 240, 232, 0.12); height: 4px; left: 0; position: absolute; right: 0; top: 0; transition: opacity 300ms ease; }
.model-viewer__progress span { background: var(--acid); display: block; height: 100%; transform: scaleX(var(--progress, 0)); transform-origin: left; transition: transform 150ms ease; }
.model-viewer__progress.is-done { opacity: 0; }
.model-viewer__ar { bottom: 18px; left: 50%; position: absolute; transform: translateX(-50%); }
.model-dialog__message { background: rgba(16, 27, 26, 0.85); border-radius: 4px; color: var(--muted); font-size: 0.9rem; left: 50%; margin: 0; padding: 6px 12px; pointer-events: none; position: absolute; text-align: center; top: 18px; transform: translateX(-50%); width: max-content; max-width: 90%; }
.model-dialog__message:empty { display: none; }
.model-dialog__message.is-error { background: rgba(16, 27, 26, 0.92); border-left: 3px solid #ffb1ad; color: #ffb1ad; padding: 12px 16px; pointer-events: auto; text-align: left; }
.model-dialog__info { border-left: 1px solid var(--line); overflow-y: auto; padding: 28px 28px 32px; position: relative; }
.model-dialog__info h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.15; margin: 8px 48px 12px 0; overflow-wrap: anywhere; }
.model-dialog__close { background: transparent; border: 1px solid var(--line); border-radius: 50%; color: var(--paper); cursor: pointer; font-size: 1.6rem; height: 44px; line-height: 1; position: absolute; right: 18px; top: 18px; width: 44px; }
.model-dialog__close:hover, .model-dialog__close:focus-visible { border-color: var(--acid); color: var(--acid); }
.model-dialog__creator { color: #64d9ff; margin: 0 0 12px; }
.model-dialog__description { color: var(--muted); line-height: 1.7; }
.model-dialog__facts { display: grid; gap: 10px; margin: 20px 0; }
.model-dialog__facts div { border-bottom: 1px solid var(--line); display: flex; gap: 16px; justify-content: space-between; padding-bottom: 8px; }
.model-dialog__facts dt { color: var(--muted); font: 0.8rem/1.6 var(--mono); text-transform: uppercase; }
.model-dialog__facts dd { margin: 0; text-align: right; }
.model-dialog__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 16px; }
.model-dialog__button { background: transparent; border: 1px solid var(--acid); border-radius: 4px; color: var(--acid); cursor: pointer; font: 600 0.95rem var(--display); min-height: 44px; padding: 10px 16px; }
.model-dialog__button:hover, .model-dialog__button:focus-visible { background: var(--acid); color: var(--ink); }
.model-dialog__button[aria-pressed="false"] { border-color: var(--line); color: var(--muted); }
.model-viewer__ar { background: var(--acid); color: var(--ink); }
.model-dialog__hint { color: var(--muted); font-size: 0.88rem; line-height: 1.6; }
.model-dialog__link a { color: #64d9ff; text-decoration: underline; text-underline-offset: 4px; }
.model-dialog :focus-visible { outline: 2px solid #64d9ff; outline-offset: 3px; }
.model-dialog [hidden] { display: none; }

@media (max-width: 820px) {
  .model-dialog { border-radius: 0; height: 100%; max-height: 100%; max-width: 100%; width: 100%; }
  .model-dialog__layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(300px, 58dvh) auto; overflow-x: hidden; overflow-y: auto; }
  .model-dialog__info { border-left: 0; border-top: 1px solid var(--line); overflow: visible; padding: 22px 20px 32px; }
  .model-dialog__close { background: rgba(16, 27, 26, 0.9); position: fixed; right: 12px; top: 12px; z-index: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .model-card__button, .model-card__media img { transition: none; }
  .model-card__button:hover, .model-card__button:focus-visible { transform: none; }
  .model-card__button:hover .model-card__media img { transform: none; }
}