.credential-room { width: min(1160px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); padding: 0; margin: auto; color: #eee; border: 1px solid #ffffff16; border-top: 1px solid #ef444455; border-radius: 16px; background: #0b0b0e; box-shadow: 0 32px 120px #000b; color-scheme: dark; }
.credential-room::backdrop { background: #000c; backdrop-filter: blur(12px); }
.credential-room[open] { animation: credential-enter .22s ease-out; }
.credential-room[open]::backdrop { animation: credential-backdrop-in .24s ease-out; }
.credential-room[open].is-closing { animation: credential-exit .18s ease-in both; pointer-events: none; }
.credential-room[open].is-closing::backdrop { animation: credential-backdrop-out .18s ease-in both; }
.credential-room * { box-sizing: border-box; }
.credential-header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 30px 34px 24px; background: #0b0b0ef5; border-bottom: 1px solid #ffffff0c; }
.credential-kicker { color: #f87171; font: 10px/1.5 monospace; letter-spacing: .22em; margin: 0 0 10px; }
.credential-header h2 { font: 700 clamp(26px, 4vw, 38px)/1.15 var(--font-display, sans-serif); letter-spacing: -.04em; margin: 0; }
.credential-intro { font: 12px/1.7 sans-serif; color: #8f8f99; margin: 10px 0 0; }
.credential-close { flex-shrink: 0; width: 36px; height: 36px; border: 1px solid #ffffff1a; border-radius: 50%; background: #ffffff05; color: #bdbdc7; cursor: pointer; font: 24px/1 sans-serif; }
.credential-close:hover { color: #fff; border-color: #ef444488; }
.credential-content { padding: 26px 34px; }
.credential-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.credential-card { display: flex; flex-direction: column; text-align: left; padding: 0; background: #111114; color: inherit; border: 1px solid #ffffff12; border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color .2s, transform .2s; }
.credential-card:hover { border-color: #ef444466; transform: translateY(-3px); }
.credential-room[open] .credential-card { animation: credential-card-in .28s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--credential-order, 0) * 30ms); }
.credential-mat { width: 100%; aspect-ratio: 1.5; padding: 16px; background: #1b1b20; border-bottom: 1px solid #ffffff0a; display: flex; align-items: center; justify-content: center; }
.credential-mat img { width: 100%; height: 100%; object-fit: contain; filter: brightness(.88); box-shadow: 0 5px 15px #0006; transition: filter .2s; }
.credential-card:hover img { filter: brightness(1); }
.credential-meta { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.credential-issuer { color: #f87171; font: 9px/1.5 monospace; letter-spacing: .12em; }
.credential-name { font: 600 15px/1.5 sans-serif; margin: 9px 0 15px; }
.credential-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #85858f; font: 9px/1.5 monospace; }
.credential-bottom span:first-child { border: 1px solid #ffffff15; padding: 3px 6px; border-radius: 3px; }
.credential-footer { padding: 0 34px 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #73737f; font: 10px/1.6 monospace; }
.credential-room a { color: #c3c3cd; text-decoration: none; border-bottom: 1px solid #ffffff30; padding-bottom: 3px; }
.credential-room a:hover { color: #f87171; border-color: #ef444466; }
.credential-back { border: 0; background: transparent; color: #b6b6c1; font: 10px/1.5 monospace; padding: 0 0 20px; cursor: pointer; }
.credential-detail-image { display: block; width: 100%; max-height: 58dvh; object-fit: contain; border: 1px solid #ffffff12; background: #19191d; padding: 12px; border-radius: 8px; }
.credential-detail-info { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 18px; padding-top: 20px; }
.credential-detail-info h3 { font: 600 19px/1.4 sans-serif; margin: 6px 0; }
.credential-detail-info p { max-width: 640px; color: #94949f; font: 12px/1.7 sans-serif; margin: 8px 0; }
.credential-detail-info a { font: 10px/1.6 monospace; }
.credential-room button:focus-visible, .credential-room a:focus-visible { outline: 2px solid #f87171; outline-offset: 4px; }
@keyframes credential-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes credential-exit { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } }
@keyframes credential-card-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes credential-backdrop-in { from { background-color: #0000; backdrop-filter: blur(0); } to { background-color: #000c; backdrop-filter: blur(12px); } }
@keyframes credential-backdrop-out { from { background-color: #000c; backdrop-filter: blur(12px); } to { background-color: #0000; backdrop-filter: blur(0); } }
#open-credentials { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease, border-color .24s ease, color .2s ease; }
#open-credentials::after { transform: none; content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(100px circle at var(--credential-glow-x, 50%) var(--credential-glow-y, 50%), #ef444430, transparent 75%); opacity: 0; transition: opacity .22s ease; }
#open-credentials:hover, #open-credentials:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 22px #ef444418; }
#open-credentials:hover::after, #open-credentials:focus-visible::after { opacity: 1; }
#open-credentials > span { display: inline-block; transition: transform .24s cubic-bezier(.2,.7,.2,1); }
#open-credentials:hover > span, #open-credentials:focus-visible > span { transform: translate(2px, -2px); }
#open-credentials:active { transform: translateY(0) scale(.97); transition-duration: .12s; }
@media(max-width: 900px) { .credential-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width: 520px) { .credential-room { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 12px; } .credential-header { padding: 24px 20px 20px; } .credential-content { padding: 20px; } .credential-grid { grid-template-columns: 1fr; } .credential-footer { padding: 0 20px 22px; flex-wrap: wrap; } }
@media(prefers-reduced-motion: reduce) { .credential-room[open] { animation: none; } .credential-card, .credential-mat img { transition: none; } .credential-card:hover { transform: none; } }
@media(prefers-reduced-motion: reduce) {
  .credential-room[open] .credential-card, .credential-room[open]::backdrop, .credential-room[open].is-closing, .credential-room[open].is-closing::backdrop { animation: none; }
  #open-credentials, #open-credentials::after, #open-credentials > span { transition: none; }
  #open-credentials:hover, #open-credentials:focus-visible, #open-credentials:active, #open-credentials:hover > span, #open-credentials:focus-visible > span { transform: none; }
}