.account-header{background:white;color:var(--deep)}
.account-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.account-header a:first-child{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:800}
.account-header a:last-child,.account-links a{text-decoration:underline;text-underline-offset:4px}
body:has(.account-main){min-height:100svh;background:var(--mist)}
.account-main{display:grid;justify-items:center;padding-block:clamp(24px,6vh,60px)}
.account-panel,.pass-area{width:min(100%,456px)}
.account-panel{background:var(--paper);padding:clamp(20px,5vw,38px);display:grid;gap:13px}
.account-panel h1{font-size:clamp(28px,5.5vw,40px);line-height:1.15;color:var(--deep)}
.account-panel > p:not(.form-error),.pass-help,.pass-message{color:var(--muted)}
.account-form{display:grid;gap:8px;margin-block:9px 0}
.account-form label{font-weight:700}
.account-form input{font:inherit;min-height:48px;min-width:0;padding:8px 12px;background:var(--warm);border:1px solid #aebad0;border-radius:0;color:var(--ink)}
.account-form input:not([type=tel]){text-align:right}
.account-form button,.pass-actions button{width:100%}
.account-form :disabled{opacity:.55;cursor:default}
.account-links{display:flex;flex-wrap:wrap;gap:9px 20px;font-size:16px;color:var(--deep);margin-block-start:7px}
.pass-area{display:grid;gap:13px}
.pass-card{background:white}
.pass-card canvas{display:block;width:100%;height:auto}
.pass-cover{position:relative;overflow:hidden;aspect-ratio:720/316;background:radial-gradient(ellipse at 17% 54%,#416fb5,var(--deep))}
.pass-tile{position:absolute;left:-8.9%;top:20%;width:46.1%;transform:rotate(-32.5deg)}
.pass-logo,.pass-wordmark{position:absolute;right:7.78%}
.pass-logo{width:8.06%;top:10.76%}
.pass-wordmark{width:51.94%;top:42.09%}
.pass-cover-title{position:absolute;right:19.17%;top:13.5%;color:white;font-size:clamp(14px,4vw,20px);font-weight:700}
.pass-details{padding:20px;display:grid;gap:6px}
.pass-identity{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;gap:12px;margin-block-end:8px}
.pass-identity h2{font-size:clamp(17px,4.5vw,26px);overflow-wrap:anywhere}
.pass-identity p{font-size:clamp(13px,3.4vw,16px);color:var(--muted)}
.pass-attendance{text-align:left;color:var(--deep)}
.pass-attendance :is(time,strong){font-size:clamp(13px,3.6vw,18px);font-weight:700}
.pass-qr{margin-inline:auto}
.pass-details code{font-size:14px;overflow-wrap:anywhere}
.pass-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pass-actions button{justify-content:center}
.pass-logout{grid-column:1/-1}
.pass-actions button:disabled{opacity:.55}
.card-loading-page{display:grid;place-items:center;min-block-size:100svh;padding:24px}
.card-loading{display:grid;justify-items:center;text-align:center;gap:16px;width:min(100%,460px)}
.card-loading h1{font-size:clamp(24px,5vw,32px)}
.card-loading .loading-tile{grid-area:auto;width:min(74vw,290px);aspect-ratio:1.2;translate:none;--hero-tile-scale:.95}
.loading-tile .hero-tile{position:absolute;inset:0;height:100%;object-fit:contain;transform:rotate(-32.5deg) scale(.84)}
.card-loading-page .loading-tile:not(.tile-ready) .hero-tile{animation:loading-poster-in .25s var(--ease) 1.6s backwards}
@keyframes loading-poster-in{from{opacity:0}}