:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--navy:#061326;--navy2:#102e55;--gold:#c79435;--pale:#e9c879;--ink:#09182d;--muted:#687282;--line:#d9dde2;background:#eef0f2;color:var(--ink)}
/* Approved equal action widths; min-width prevents long phone labels widening a track. */
.shell .primary-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.shell .secondary-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
.shell .primary-actions button,.shell .secondary-actions button{min-width:0;overflow-wrap:anywhere}
.refresh-help{margin:14px 0 0;text-align:center;color:#687282;font-size:11px}
.refresh-help button{min-height:40px;padding:8px 12px;border:1px solid #dadddf;border-radius:7px;background:#f6f7f8;color:#3e4c5e;font:inherit}
.refresh-help p{margin:7px 0;line-height:1.5}
.refresh-help p:empty{display:none}
/* R3: front frame only. Outer gold border and all existing artwork stay intact. */
.pocket-card.card-front{--front-radius:17px;box-shadow:0 18px 36px rgba(4,12,24,.23),0 3px 7px rgba(4,12,24,.14),inset 1px 1px 1px rgba(255,244,213,.17),inset -2px -2px 4px rgba(0,0,0,.35)}
.pocket-card.card-front:after{inset:7px;border-radius:calc(var(--front-radius) - 8px);border-color:rgba(233,200,121,.23);border-top-color:rgba(233,200,121,.31);border-left-color:rgba(233,200,121,.28);box-shadow:0 0 0 1px rgba(3,13,27,.55),inset 1px 1px 0 rgba(233,200,121,.035),inset -1px -1px 2px rgba(0,0,0,.25)}
.pocket-card.card-front .flip-hint{left:auto;right:5%;bottom:max(5%,12px);text-align:right}
@media(max-width:370px){.pocket-card.card-front{--front-radius:14px}}
/* End R3 front frame. */
/* Flip-only layout: all approved card artwork and existing design rules stay intact. */
.flip-card{position:relative;min-width:0}
.flip-card.is-flipping{perspective:1200px}
.flip-rotor{position:relative;width:100%;aspect-ratio:1.586/1}
.flip-rotor>.pocket-card{position:absolute;inset:0}
.flip-rotor.is-flipping>.pocket-card{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-rotor:not(.is-flipping)>.pocket-card[aria-hidden="true"]{visibility:hidden}
.flip-rotor.is-flipping{transform-style:preserve-3d}
.flip-rotor.is-flipping>.card-back{transform:rotateY(180deg)}
.flip-hint{position:absolute;z-index:1;left:5%;right:5%;bottom:5%;text-align:center;color:rgba(255,255,255,.76);font-size:clamp(9px,2.05vw,11px);font-weight:600;line-height:1.2;letter-spacing:.025em}
.front-number{position:absolute;left:5%;right:5%;bottom:23%;z-index:1}
.front-number .wallet-id{font-size:clamp(17px,5.7vw,27px)}
.pocket-card.card-back .barcode{margin-top:.5%}
.card-back .flip-hint{bottom:10.3%;font-size:clamp(8px,1.9vw,10px)}
.pocket-card.card-back:has(.store-logo:not(.hidden)) .merchant-block{margin-top:1%}
.pocket-card.card-back:has(.store-logo:not(.hidden)) .merchant-block small{display:block;line-height:1.2}
.flip-control{position:absolute;inset:0;z-index:10;width:100%;height:100%;padding:0;border:0;border-radius:17px;background:transparent;color:inherit;touch-action:manipulation}
button.flip-control:active{transform:none}
@keyframes show-card-back{from{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}
@keyframes show-card-front{from{transform:rotateY(180deg)}to{transform:rotateY(0deg)}}
@media(prefers-reduced-motion:no-preference){.flip-rotor.is-flipping{animation:show-card-front .5s ease}.flip-rotor.is-flipping.show-back{animation-name:show-card-back}}
@media(prefers-reduced-motion:reduce){.flip-rotor.is-flipping{animation:none}.flip-rotor.is-flipping>.card-back{transform:none}.flip-rotor>.pocket-card[aria-hidden="true"]{visibility:hidden}}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(180deg,#f7f8f9 0,#eef0f2 520px)}
.merchant-row{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr)!important}.merchant-row>div{min-width:0}.merchant-row strong{max-width:100%;font-size:11.3px!important}.contact-details strong,.contact-details span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-details span{margin-top:3px;color:#687282;font-size:10px}.card-information>header strong{color:#071426;font-size:13px!important;font-weight:800;letter-spacing:.045em}.balance-row{padding-block:11px!important}.balance-row strong{font-size:13.5px!important}.merchant-row{padding-block:11px!important}.rules{padding-block:10px!important;font-size:10px!important}.secondary-actions button{min-height:44px!important}.pocket-card.long-name-card .merchant-block{margin-top:1.5%}.pocket-card.long-name-card h1{font-size:clamp(15px,5vw,23px);line-height:.95}.pocket-card.long-name-card .account-block{margin-top:.8%}.pocket-card.long-name-card .barcode{height:14%;min-height:30px;margin-top:1.4%}
.page{width:min(calc(100% - 24px),500px);margin:0 auto;padding:max(12px,env(safe-area-inset-top)) 0 max(12px,env(safe-area-inset-bottom))}.hidden{display:none!important}.shell{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;gap:10px}
.pocket-card{position:relative;isolation:isolate;contain:size;overflow:hidden;width:100%;max-width:100%;aspect-ratio:1.586/1;min-width:0;min-height:0;padding:4.5% 5% 0;color:#fff;background-color:#061326;background-image:radial-gradient(circle at 90% 4%,rgba(226,185,91,.10),transparent 24%),linear-gradient(142deg,#102e55 0%,#07162a 46%,#020810 100%);border:1px solid rgba(233,200,121,.48);border-radius:17px;box-shadow:0 18px 36px rgba(4,12,24,.23),0 3px 7px rgba(4,12,24,.14)}
.pocket-card:before{content:"";position:absolute;z-index:-1;inset:0;opacity:.13;background:repeating-linear-gradient(118deg,transparent 0 18px,rgba(255,255,255,.045) 18px 19px)}.pocket-card:after{content:"";position:absolute;inset:7px;pointer-events:none;border:1px solid rgba(233,200,121,.16);border-radius:12px}.card-sheen{position:absolute;z-index:-1;top:-45%;right:-4%;width:44%;height:180%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);transform:rotate(18deg)}
.corner-chevrons{position:absolute;z-index:0;top:-4%;right:-5%;width:38%;height:43%;pointer-events:none}.corner-chevrons i{position:absolute;top:-34%;right:3%;width:80%;height:84%;transform:rotate(45deg);border-right:1.5px solid rgba(233,200,121,.78);border-bottom:1.5px solid rgba(233,200,121,.78)}.corner-chevrons i:nth-child(2){top:-22%;right:15%;opacity:.72}.corner-chevrons i:nth-child(3){top:-10%;right:27%;opacity:.48}
.card-header,.merchant-block,.account-block,.barcode,.card-footer,.store-logo{position:relative;z-index:1}.card-header{display:flex;align-items:flex-start;justify-content:space-between;height:15%}.logo-fallback{display:flex;align-items:flex-start;width:44%;height:100%;overflow:hidden}.logo-fallback img{display:block;width:100%;height:100%;object-fit:contain;object-position:left top;opacity:.96}.card-header>span{margin-top:1%;color:var(--pale);font-size:clamp(6px,1.9vw,9px);font-weight:750;letter-spacing:.18em}
.store-logo{display:block;width:auto;max-width:32%;height:auto;max-height:12%;margin:-1% 0 1%;object-fit:contain;filter:none}.merchant-block{margin-top:3%}.merchant-block small,.pin-note{color:rgba(255,255,255,.66);font-size:clamp(7px,1.85vw,9px);font-weight:700;letter-spacing:.16em}h1{display:-webkit-box;margin:.7% 0 0;max-width:82%;overflow:hidden;font-size:clamp(17px,5.7vw,27px);font-weight:620;line-height:1.02;letter-spacing:-.025em;-webkit-box-orient:vertical;-webkit-line-clamp:2}.account-block{margin-top:1.8%}.wallet-id{max-width:100%;overflow:hidden;font-family:"SFMono-Regular",Consolas,monospace;font-size:clamp(13px,4.05vw,19px);font-weight:460;letter-spacing:.025em;white-space:nowrap}.pin-note{margin-top:1%}
.barcode{width:74%;height:18%;min-height:38px;margin:3.2% auto 0;padding:4px 13px;background:#f7f7f4;border:1px solid rgba(255,255,255,.4);border-radius:3px;box-shadow:inset 0 0 0 1px rgba(5,18,36,.06)}.barcode svg{display:block;width:100%;height:100%;fill:#061326}.card-footer{position:absolute;right:5%;bottom:3.2%;left:5%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding-top:2%;border-top:1px solid rgba(233,200,121,.32);color:rgba(255,255,255,.66);font-size:clamp(4.8px,1.35vw,7px);font-weight:650;line-height:1.15;letter-spacing:.025em;text-transform:uppercase}.card-footer span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-footer span:last-child{text-align:right}.issued-by:empty{display:none}.trial{position:absolute;inset:42% -8% auto;z-index:4;display:grid;padding:5px;transform:rotate(-11deg);border:2px solid #ffb3b3;background:rgba(6,19,38,.92);color:#fff;text-align:center}.trial span{font-size:8px}
.primary-actions{display:grid;grid-template-columns:1.16fr .84fr;gap:9px}.primary-actions button{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 14px;color:var(--ink);background:#fff;border:1px solid #c7ccd2;border-radius:9px;font:680 13px inherit;box-shadow:0 5px 14px rgba(9,24,45,.05)}.primary-actions .primary-action{color:#fff;background:linear-gradient(135deg,#0b2444,#061326);border-color:var(--navy)}.primary-actions button>span{display:flex;flex-direction:column;align-items:flex-start;gap:1px}.primary-actions small{color:#858d98;font-size:7px;font-weight:750;letter-spacing:.12em}.primary-actions .primary-action small{color:rgba(255,255,255,.5)}.primary-actions b{color:var(--gold);font-size:17px;font-weight:500}
.card-information{padding:13px 15px;background:rgba(255,255,255,.96);border:1px solid #d4d9df;border-radius:10px;box-shadow:0 8px 22px rgba(9,24,45,.045)}.card-information>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}.card-information>header div{display:flex;align-items:center;gap:7px}.card-information>header i{width:7px;height:7px;background:var(--gold);border-radius:50%}.card-information>header strong{font-size:12px;letter-spacing:.04em}.card-information>header>span{color:var(--muted);font-size:7px;font-weight:750;letter-spacing:.11em}
.balance-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}.balance-row div{min-width:0}.balance-row small,.merchant-row small{display:block;margin-bottom:1px;color:var(--muted);font-size:8px;text-transform:uppercase}.balance-row strong{display:block;overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.balance-row>span{flex:0 0 auto;padding:4px 6px;color:#316b52;background:#eaf6ef;border:1px solid #cce8d9;border-radius:999px;font-size:7px;font-weight:800;letter-spacing:.06em}.merchant-row{display:grid;grid-template-columns:.9fr 1.4fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}.merchant-row strong{display:block;overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.rules{display:flex;flex-wrap:wrap;gap:3px 11px;padding:7px 0;color:#465467;font-size:8.5px}.rules span:before{content:"•";margin-right:4px;color:var(--gold)}
.secondary-actions{display:grid;grid-template-columns:.8fr .7fr 1.2fr;gap:6px}.secondary-actions button{min-height:44px;padding:5px;color:#3e4c5e;background:#f6f7f8;border:1px solid #dadddf;border-radius:7px;font:650 10px inherit}button{cursor:pointer}button:focus-visible{outline:3px solid #e6aa31;outline-offset:2px}button:disabled{cursor:wait;opacity:.7}.qr-panel{display:grid;justify-items:center;gap:6px;padding:12px;border-radius:10px;background:#fff}.qr-panel svg{width:min(220px,100%);height:auto}.error{display:grid;gap:5px;padding:16px;border:1px solid #e5cf9a;border-radius:16px;background:#fff}.error h1{margin:0;color:var(--ink);font-size:26px}.error p{margin:0;color:#5d6878;line-height:1.5}
@media(max-width:370px){.page{width:min(calc(100% - 16px),500px);padding-top:8px}.shell{gap:7px}.pocket-card{border-radius:14px}.primary-actions{gap:7px}.primary-actions button{min-height:46px;padding-inline:11px;font-size:11px}.card-information{padding:10px 11px}.card-information>header{padding-bottom:6px}.balance-row,.merchant-row{padding:6px 0}.rules{padding:5px 0}.secondary-actions button{font-size:9px}.barcode{min-height:34px}}@media(min-width:600px){.page{padding-top:24px}}@media(max-height:700px) and (min-width:371px){.page{padding-top:8px}.shell{gap:7px}.primary-actions button{min-height:46px}.card-information{padding-block:10px}.balance-row,.merchant-row{padding-block:6px}.rules{padding-block:5px}.secondary-actions button{min-height:42px}}@media(prefers-reduced-motion:no-preference){button{transition:transform .12s ease,box-shadow .12s ease}button:active{transform:translateY(1px)}}