@font-face{font-family:Syne;src:url('/assets/brand/fonts/Syne-Variable.ttf') format('truetype');font-display:swap}@font-face{font-family:Saira;src:url('/assets/brand/fonts/Saira-Variable.ttf') format('truetype');font-display:swap}
:root{--black:#100c08;--carbon:#1b1814;--yellow:#f4d21f;--red:#e52521;--white:#f7f5ed;--muted:#a7a198}*{box-sizing:border-box}html{background:var(--black)}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -10%,#454035,transparent 34%),var(--black);color:var(--white);font-family:Saira,Arial,sans-serif}.credential-shell{width:min(100%,500px);min-height:100vh;margin:auto;padding:max(18px,env(safe-area-inset-top)) 16px max(22px,env(safe-area-inset-bottom));display:grid;align-content:center;gap:16px}.credential{position:relative;isolation:isolate;overflow:hidden;min-height:min(720px,calc(100vh - 130px));border:1px solid #454038;border-radius:32px;background:linear-gradient(155deg,#1f1c18,#0d0b09 55%);box-shadow:0 32px 80px #000b}.credential:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:28px 28px;z-index:-1;mask-image:linear-gradient(to bottom,#000,transparent 72%)}.credential-brand{height:118px;padding:25px 27px;display:flex;align-items:flex-start;justify-content:space-between;background:var(--yellow)}.credential-brand img{width:190px;height:78px;object-fit:contain;object-position:left center}.credential-brand span{padding:7px 9px;background:var(--black);color:var(--yellow);font:800 .66rem Syne,sans-serif;letter-spacing:.12em}.brand-slash{position:absolute;top:91px;left:-10%;width:120%;height:46px;background:var(--red);transform:rotate(-4deg);z-index:1;box-shadow:0 13px 0 var(--black)}.credential-content{position:relative;z-index:2;padding:45px 28px 22px;text-align:center}.eyebrow{color:var(--yellow);font:800 .72rem Syne,sans-serif;letter-spacing:.17em;margin:0 0 8px}.credential h1{margin:0;font:750 clamp(2.15rem,10vw,3.8rem)/.95 Syne,sans-serif;letter-spacing:-.055em}.credential h1+p{margin:8px 0 20px;color:var(--muted);font-weight:600}.qr-frame{width:min(320px,88%);margin:0 auto;background:#fff;border-radius:24px;padding:18px 18px 13px;box-shadow:0 14px 35px #0007}.qr-frame img{display:block;width:100%;aspect-ratio:1}.qr-frame span{display:block;margin-top:8px;color:var(--black);font:800 .69rem Syne,sans-serif;letter-spacing:.105em}.scan-copy{color:#c7c2b9;font-size:.82rem;line-height:1.45}.credential footer{display:flex;justify-content:space-between;align-items:center;padding:0 28px 24px;color:var(--muted);font-size:.64rem;letter-spacing:.1em}.credential footer strong{color:var(--yellow);font-family:Syne,sans-serif}.credential-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.credential-actions button{border:1px solid var(--yellow);border-radius:13px;background:var(--yellow);color:var(--black);padding:13px 10px;font:800 .83rem Syne,sans-serif;cursor:pointer}.credential-actions .secondary{background:transparent;color:var(--white);border-color:#615a50}.credential-actions button:focus-visible,.dialog-close:focus-visible{outline:3px solid #fff;outline-offset:3px}.credential-error{text-align:center;color:#ff8682}dialog{width:min(420px,calc(100% - 34px));border:1px solid #4c463d;border-radius:24px;background:#1c1915;color:var(--white);padding:28px;box-shadow:0 30px 80px #000c}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}dialog h2{font:750 1.8rem Syne,sans-serif;margin:0 35px 16px 0}dialog p{color:#d0cbc1;line-height:1.55}.dialog-close{position:absolute;right:18px;top:16px;border:0;background:transparent;color:#fff;font-size:1.8rem;cursor:pointer}@media(max-height:760px){.credential{min-height:620px}.credential-brand{height:96px;padding:18px 23px}.credential-brand img{height:62px}.brand-slash{top:75px;height:38px}.credential-content{padding-top:37px}.qr-frame{width:min(270px,82%)}.credential footer{padding-bottom:17px}}@media(max-width:360px){.credential-shell{padding-inline:9px}.credential{border-radius:24px}.credential-content{padding-inline:18px}.credential-brand img{width:160px}.credential-actions{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}