.account-pass-groups { display: grid; gap: 22px; }
.account-pass-person h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; color: #5c737d; font-size: 13px; }
.account-pass-person h3 span { color: #6b7f87; font-size: 11px; font-weight: 700; text-align: right; }
.account-pass-stack { --pass-width: min(240px, 70vw); display: flex; gap: 16px; align-items: flex-start; min-height: 376px; padding: 4px 4px 14px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 4px; scroll-snap-type: inline proximity; }
.account-pass { position: relative; width: var(--pass-width); aspect-ratio: 2 / 3; flex: 0 0 var(--pass-width); border: 1px solid rgba(255,255,255,.42); border-radius: 18px 18px 7px 18px; color: #fff; background: #073147 center / cover no-repeat; box-shadow: 0 12px 23px rgba(6,43,64,.17); isolation: isolate; cursor: pointer; perspective: 900px; scroll-snap-align: start; }
.account-pass::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: repeating-linear-gradient(135deg,transparent 0 18px,rgba(255,255,255,.055) 18px 20px); }
.account-pass__face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 22px 20px 17px; border-radius: inherit; backface-visibility: hidden; transition: transform .45s ease; }
.account-pass__face--back { overflow: hidden; color: #063147; background: #f7f0d8; transform: rotateY(180deg); }
.account-pass.is-flipped .account-pass__face--front { transform: rotateY(180deg); }
.account-pass.is-flipped .account-pass__face--back { transform: rotateY(360deg); }
.account-pass p { margin: 0; color: #f0d91c; font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.account-pass h4 { margin: 7px 0 44px; font-size: 25px; line-height: 1.02; }
.account-pass .account-pass-owner { margin: -31px 0 29px; color: rgba(255,255,255,.82); font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: none; }
.account-pass__face--front > div { display: grid; gap: 7px; }
.account-pass__face--front > div span { font-size: 11px; font-weight: 800; }
.account-pass strong { font-size: 39px; line-height: .8; white-space: nowrap; }
.account-pass strong small { font-size: 14px; }
.account-pass footer { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.3); font-size: 11px; font-weight: 800; }
.account-pass footer small { display: block; margin-top: 5px; opacity: .72; font-size: 9px; }
.account-pass-history__meta { display: grid; gap: 3px; margin: 2px 0 10px; color: #536b73; font-size: 10px; font-weight: 700; }
.account-pass-history { display: grid; gap: 8px; min-height: 0; margin: 0; padding: 0; overflow: auto; list-style: none; }
.account-pass__face--back .account-pass-history { flex: 1 1 auto; }
.account-pass__payment { display: grid; grid-template-columns:1fr auto; column-gap:8px; align-items:center; margin-top:10px; padding-top:9px; border-top:1px solid rgba(6,49,71,.22); }
.account-pass__payment>span { color:#a64b00; font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.account-pass__payment>strong { color:#063147; font-size:10px; letter-spacing:.025em; line-height:1.25; }
.account-pass__payment button { grid-row:1 / span 2; grid-column:2; display:inline-flex; align-items:center; gap:4px; border:1px solid rgba(6,43,64,.25); border-radius:999px; padding:6px 8px; background:#fff; color:#063147; font:inherit; font-size:10px; font-weight:900; cursor:pointer; }
.account-pass__payment button:is(:hover,:focus-visible){border-color:#d8450d;color:#b74700}
.account-pass__payment button svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.account-pass__payment p { grid-column:1 / -1; min-height:1.1em; margin:4px 0 0; color:#176047; font-size:9px; font-weight:800; letter-spacing:0; text-transform:none; }
.account-pass-history li { display: grid; grid-template-columns: 56px 1fr; gap: 7px; padding-bottom: 7px; border-bottom: 1px solid rgba(6,49,71,.15); color: #4d636b; font-size: 10px; }
.account-pass-history time { font-weight: 900; }
.account-pass-history span { display: grid; gap: 2px; }
.account-pass-history strong { font-size: 11px; color: #063147; }
.account-pass__face--back p { color: #b74700; }
.account-pass__face--back h4 { margin: 7px 0 12px; font-size: 20px; }
.account-pass__face--back footer { border-top-color: rgba(6,49,71,.22); }
.account-pass--start { color: #063147; background-image: url("assets/passes/bg-front-start.png"); }
.account-pass--start p { color: #b74700; }
.account-pass--start .account-pass-owner { color: rgba(6,49,71,.78); }
.account-pass--start footer { border-top-color: rgba(6,49,71,.28); }
.account-pass--regular { background-image: url("assets/passes/bg-front-regular.png"); }
.account-pass--active { background-image: url("assets/passes/bg-front-active.png"); }
.account-pass--flex { background-image: url("assets/passes/bg-front-flex.png"); }
.account-pass--debt { color: #063147; background: #fff7e3; border: 2px dashed #c56b00; box-shadow: none; cursor: default; }
.account-pass--debt::after { display: none; }
.account-pass--debt p { color: #a95100; }
.account-pass--debt .account-pass-owner { margin-bottom: 8px; color: #536b73; }
.account-pass--debt .account-pass__face > div { grid-template-columns: max-content minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: start; }
.account-pass--debt .account-pass__face > div > strong { text-align: right; }
.account-pass--debt footer { border-top-color: rgba(125, 65, 0, .28); }
.account-pass--debt footer strong { color: #a95100; font-size: 19px; }
.account-pass--debt .account-pass-debt__dates { padding-left: 8px; color: #063147; font-size: 15px; line-height: 1.25; }
.account-pass--debt .account-pass-debt__payment { display:grid; grid-template-columns:1fr auto; gap:4px 8px; align-items:center; margin-top:12px; padding:10px; border:1px solid #9f2117; border-radius:10px; color:#fff; background:#bb2d1d; box-shadow:0 4px 10px rgba(104,26,16,.2); }
.account-pass--debt .account-pass-debt__payment > span { color:#fff; font-size:9px; font-weight:900; letter-spacing:.065em; text-transform:uppercase; }
.account-pass--debt .account-pass-debt__payment > strong { color:#fff; font-size:11px; line-height:1.25; letter-spacing:.015em; }
.account-pass--debt .account-pass-debt__payment button { grid-row:1 / span 2; grid-column:2; display:inline-flex; align-items:center; gap:4px; border:1px solid rgba(255,255,255,.7); border-radius:999px; padding:6px 8px; background:#fff; color:#9f2117; font:inherit; font-size:10px; font-weight:900; cursor:pointer; }
.account-pass--debt .account-pass-debt__payment button:is(:hover,:focus-visible) { border-color:#fff; background:#ffe9e5; color:#78150d; }
.account-pass--debt .account-pass-debt__payment button svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.account-pass--debt .account-pass-debt__payment p { grid-column:1 / -1; min-height:1.1em; margin:2px 0 0; color:#fff; font-size:9px; font-weight:800; letter-spacing:0; text-transform:none; }
@media (max-width: 680px) { .account-pass-stack { --pass-width: min(198px, 68vw); gap: 12px; min-height: 310px; } .account-pass { padding: 19px; } .account-pass h4 { margin-bottom: 36px; font-size: 22px; } .account-pass strong { font-size: 35px; } .account-pass .account-pass__payment>strong { font-size:10px; } .account-pass footer { margin-top: 28px; } }