.frames-section { background: #0d0e10; }
.frames-section .frame-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.frames-section .frame-card { display: block; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.frames-section .frame-face { display: block; padding: 18px; border: 1px solid #ffffff20; border-radius: 12px; background: linear-gradient(145deg, #202126, #13151a); transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease; }
.frames-section .vip-art, .frames-section .vip-detail-art { background: radial-gradient(circle at 50% 47%, #32303780, #111318 70%); }
.frames-section .vip-art { overflow: visible; }
.frames-section .vip-card-caption { padding-top: 20px; }
.frames-section .frame-name { color: #ece8de; font-size: 18px; font-weight: 500; letter-spacing: 2px; }
.frames-section .frame-number { font-size: 10px; letter-spacing: 1px; color: #c2b59e; }
.frames-section .frame-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #aaa49a; font-size: 11px; }
.frames-section .vip-dialog[open]::before { background: radial-gradient(ellipse 520px 580px at 47% 46%, #d8ac6448, transparent 78%), radial-gradient(ellipse 400px 480px at 58% 55%, #82bcbb30, transparent 78%); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .frames-section .frame-card:hover .frame-face { transform: translateY(-9px); border-color: #dfc58bba; box-shadow: 0 15px 36px #0005, 0 0 22px #dfc58b24, inset 0 1px 0 #ffedc936; }
}
.frames-section .frame-card:focus-visible .frame-face { border-color: #dfc58b; }
@media (max-width: 999px) { .frames-section .frame-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .frames-section .frame-grid { gap: 20px 14px; }
  .frames-section .frame-face { padding: 10px; }
  .frames-section .frame-name { font-size: 15px; }
  .frames-section .vip-dialog[open]::before { background: radial-gradient(ellipse 300px 420px at center, #d8ac6448, transparent 80%); }
}
@media (prefers-reduced-motion: reduce) { .frames-section .frame-face { transition: none; } }