:root{
  --bg:#031b16;
  --bg2:#0a3f2c;
  --panel:#0b3a2d;
  --line:rgba(203,174,83,.42);
  --text:#fbfaf2;
  --muted:#b8c9bd;
  --gold:#e7c35a;
  --gold2:#f4d77c;
  --green:#38d778;
  --green2:#0d8f52;
  --danger:#ff7474;
  --shadow:0 28px 70px rgba(0,0,0,.34);
  --card-w:53.98;
  --card-h:85.60;
  --safe-x:9.263%;
  --safe-y:5.841%;
}
*{box-sizing:border-box}
html [hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 50% -10%,rgba(27,112,72,.42) 0,transparent 31%),
    linear-gradient(180deg,#05261e,#01100d 78%);
}
.wrap{width:min(1180px,calc(100% - 32px));margin:auto}
.topbar{position:sticky;top:0;z-index:30;background:rgba(3,28,22,.92);border-bottom:1px solid rgba(231,195,90,.18);backdrop-filter:blur(14px)}
.topbar-inner{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{font-size:13px;font-weight:900;letter-spacing:.4px;color:#fff;text-decoration:none}
.topnav{display:flex;align-items:center;gap:14px}.topnav a{font-size:11px;color:#d3dfd7;text-decoration:none}
.hero{padding:62px 0 38px}.hero-copy{max-width:900px}
.eyebrow,.badge{display:inline-flex;align-items:center;border:1px solid rgba(56,215,120,.34);border-radius:999px;background:rgba(56,215,120,.08);color:#adf4ca;font-size:9px;font-weight:900;letter-spacing:1.5px;padding:7px 10px}
.hero h1{margin:16px 0 12px;font-size:clamp(38px,6vw,68px);line-height:1;letter-spacing:-2.7px}.hero h1 span{color:var(--gold2)}
.hero p{max-width:840px;margin:0;color:#c0d0c5;font-size:14px;line-height:1.75}
.content{padding:0 0 76px}
.state-card,.card-toolbar,.verification-panel,.card-spec-note{border:1px solid rgba(203,174,83,.28);border-radius:18px;background:linear-gradient(145deg,rgba(11,58,45,.96),rgba(3,33,27,.96));box-shadow:var(--shadow)}
.state-card{display:flex;align-items:center;gap:16px;padding:24px}.state-card p{margin:5px 0 0;color:var(--muted);font-size:12px}.state-error{border-color:rgba(255,116,116,.4)}
.state-error .state-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(255,116,116,.12);color:#ffd5d5;font-weight:900}.state-error .btn{margin-left:auto}
.loader{width:32px;height:32px;border:3px solid rgba(255,255,255,.16);border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.card-view{display:grid;gap:20px}.card-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px}.card-toolbar h2{margin:9px 0 7px;font-size:30px}.card-toolbar p{margin:0;color:var(--muted);font-size:12px;max-width:700px}
.toolbar-actions{display:flex;gap:9px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:10px;border:1px solid transparent;font:inherit;font-size:11px;font-weight:900;text-decoration:none;cursor:pointer}.btn.primary{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#241b05}.btn.outline{border-color:rgba(231,195,90,.44);background:rgba(4,40,31,.7);color:#f5f2df}
.card-spec-note{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px;box-shadow:none;color:#d9e2dc;font-size:11px;text-align:center}.card-spec-note strong{color:var(--gold2)}
.cards-stage{display:grid;grid-template-columns:repeat(2,minmax(0,360px));justify-content:center;gap:clamp(36px,6vw,86px);align-items:start;padding:18px 0}
.member-card{
  position:relative;
  width:min(100%,360px);
  aspect-ratio:53.98/85.60;
  border:2px solid rgba(235,204,110,.92);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 30px 74px rgba(0,0,0,.43),inset 0 0 0 1px rgba(255,244,192,.20);
  isolation:isolate;
  color:#fff8df;
  background:#0a3526;
}
.card-bg{position:absolute;inset:0;z-index:-3;background:url('./assets/member-card-background.webp') center/cover no-repeat;transform:scale(1.008)}
.card-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(2,24,17,.22) 0%,rgba(2,29,21,.48) 28%,rgba(2,26,19,.66) 55%,rgba(2,27,19,.37) 100%),radial-gradient(circle at 50% 42%,rgba(10,68,45,.14),rgba(0,0,0,.30) 76%)}
.card-safe-area{position:absolute;inset:var(--safe-y) var(--safe-x);display:flex;flex-direction:column;min-width:0;min-height:0}
.card-brand-row{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);align-items:center;gap:8px;min-height:50px}
.brand-logo{display:block;max-width:100%;height:48px;object-fit:contain;object-position:center;filter:drop-shadow(0 3px 7px rgba(0,0,0,.30))}.brand-logo-super{justify-self:center}.brand-logo-ay{justify-self:center}.brand-divider{width:1px;height:34px;background:linear-gradient(180deg,transparent,var(--gold2),transparent);justify-self:center}
.front-heading{text-align:center;margin-top:6px}.front-heading>span{display:block;color:#e4d28a;font-size:6.5px;font-weight:850;letter-spacing:1.15px}.front-heading h3{margin:5px 0 2px;color:#f8d976;font-family:Georgia,"Times New Roman",serif;font-size:18px;line-height:1.04;letter-spacing:.15px;text-shadow:0 2px 8px rgba(0,0,0,.46)}.front-heading p{margin:0;color:#fbf7df;font-size:7px;letter-spacing:.2px}
.member-core{display:grid;grid-template-columns:44% minmax(0,1fr);gap:9px;align-items:center;margin-top:14px}.member-photo-frame{position:relative;display:grid;place-items:center;aspect-ratio:4/5;border:1.5px solid var(--gold2);border-radius:10px;overflow:hidden;background:linear-gradient(145deg,#c8c8bd,#5c665f);box-shadow:0 7px 16px rgba(0,0,0,.32);color:#173527;font-weight:900;font-size:22px}.member-photo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;background:#d7dccf}.member-photo-frame img:not([hidden])+span{display:none}
.member-data{min-width:0}.data-label{display:block;color:#e9deb4;font-size:6.5px;font-weight:800}.member-data>strong{display:block;margin-top:2px;color:#f4d579;font-size:13px;line-height:1.05;overflow-wrap:anywhere}.member-data dl{margin:8px 0 0;display:grid;gap:6px}.member-data dl div{display:grid;gap:1px}.member-data dt{color:#dfd7bb;font-size:5.8px;letter-spacing:.2px}.member-data dd{margin:0;color:#fff;font-size:7px;font-weight:850;line-height:1.2;overflow-wrap:anywhere}.member-data dd.status-active{color:#9df3b8}
.front-bottom-row{display:grid;grid-template-columns:minmax(0,1fr) 42%;gap:8px;align-items:center;margin-top:14px}.verified-seal{display:flex;align-items:center;gap:6px;padding:6px 7px;border:1px solid rgba(237,207,113,.85);border-radius:9px;background:rgba(4,55,36,.76);box-shadow:0 5px 14px rgba(0,0,0,.24);color:#f7e2a0;font-size:6.5px;font-weight:900;letter-spacing:.45px;line-height:1.15}.seal-check{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:linear-gradient(145deg,#55df88,#138c50);border:1px solid #e6d171;color:white;font-size:14px}
.qr-mini{justify-self:end;text-align:center;min-width:0}.qr-mini canvas{display:block;width:54px;height:54px;margin:0 auto;border:3px solid #fff;border-radius:5px;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.28)}.qr-mini span{display:block;margin-top:3px;color:#f6e8b7;font-size:5.2px;font-weight:850;letter-spacing:.35px;line-height:1.2}
.card-slogan{margin:auto 0 0;text-align:center;color:#f1d176;font-family:"Brush Script MT","Segoe Script",cursive;font-size:13px;line-height:1.05;text-shadow:0 2px 8px rgba(0,0,0,.65);transform:rotate(-2deg)}
.back-brand-row{min-height:46px}.card-back .card-shade{background:linear-gradient(180deg,rgba(2,27,18,.28),rgba(2,26,19,.64) 35%,rgba(2,25,18,.68) 68%,rgba(2,27,18,.38)),radial-gradient(circle at 50% 50%,rgba(12,86,57,.18),rgba(0,0,0,.32) 78%)}
.back-heading{text-align:center;margin-top:7px}.back-heading h3{margin:0;color:#f4d579;font-family:Georgia,"Times New Roman",serif;font-size:19px;letter-spacing:.8px}.back-heading p{margin:5px auto 0;color:#f3f0df;font-size:6px;line-height:1.45;max-width:98%}
.benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}.benefit-item{display:grid;grid-template-columns:24px minmax(0,1fr);gap:6px;align-items:center;padding:6px;border:1px solid rgba(231,195,90,.54);border-radius:8px;background:rgba(4,42,31,.58);min-width:0}.benefit-icon{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--gold2);border-radius:50%;color:#f6d770;background:rgba(16,84,53,.58);font-size:11px}.benefit-item strong{display:block;color:#f7d979;font-size:5.7px;line-height:1.1}.benefit-item small{display:block;margin-top:2px;color:#f4f2e6;font-size:4.8px;line-height:1.2}
.privacy-note{display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px;align-items:center;margin-top:7px;padding:6px;border:1px solid rgba(231,195,90,.42);border-radius:8px;background:rgba(4,36,28,.72)}.privacy-note>span{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;color:#f1ce66;background:rgba(15,84,54,.8);font-size:11px}.privacy-note p{margin:0;color:#f0eee2;font-size:4.9px;line-height:1.25}.privacy-note strong{color:#f4d579}
.back-bottom-row{display:grid;grid-template-columns:minmax(0,1fr) 40%;gap:7px;align-items:center;margin-top:8px}.member-meta{display:grid;gap:3px}.member-meta span{color:#d9d2b8;font-size:4.8px;font-weight:800;letter-spacing:.35px}.member-meta strong{color:#fff;font-size:5.7px;line-height:1.2;overflow-wrap:anywhere}.back-qr canvas{width:49px;height:49px}.back-slogan{font-size:11.5px;margin-top:auto}
.verification-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px}.verification-panel h3{margin:9px 0 7px;font-size:24px}.verification-panel p{max-width:760px;margin:0;color:var(--muted);font-size:12px;line-height:1.7}
footer{border-top:1px solid rgba(203,174,83,.18);background:#020f0c}.footer-inner{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:18px;color:#8ea99a;font-size:10px}.footer-inner div{display:grid;gap:3px}.footer-inner strong{color:#e7eee9;font-size:11px}
@media(max-width:900px){.cards-stage{grid-template-columns:1fr;gap:28px}.member-card{justify-self:center}.card-toolbar,.verification-panel{align-items:flex-start;flex-direction:column}.toolbar-actions{width:100%}.toolbar-actions .btn{flex:1}.card-spec-note{flex-direction:column;gap:4px}}
@media(max-width:620px){.wrap{width:min(100% - 22px,1180px)}.topbar-inner{min-height:60px}.topnav a:last-child{display:none}.hero{padding:46px 0 28px}.hero h1{font-size:40px;letter-spacing:-1.8px}.hero p{font-size:13px}.card-toolbar{padding:19px}.card-toolbar h2{font-size:25px}.toolbar-actions{display:grid}.cards-stage{padding:6px 0 16px}.member-card{width:min(100%,340px);border-radius:18px}.brand-logo{height:44px}.front-heading h3{font-size:17px}.member-data>strong{font-size:12px}.verification-panel{padding:19px}.verification-panel h3{font-size:21px}.footer-inner{padding:22px 0;align-items:flex-start;flex-direction:column;justify-content:center}}
@media print{
  @page{size:A4 portrait;margin:0}
  html,body{width:210mm!important;height:297mm!important;margin:0!important;padding:0!important;background:#fff!important}
  body{display:flex!important;align-items:center!important;justify-content:center!important;color:#000!important;overflow:hidden!important}
  .topbar,.hero,#loadingState,#errorState,.state-card,.card-toolbar,.verification-panel,.card-spec-note,footer{display:none!important}
  main,.content,.wrap,.card-view{width:210mm!important;height:297mm!important;margin:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}
  .cards-stage{width:auto!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:18mm!important}
  .member-card{width:53.98mm!important;height:85.60mm!important;aspect-ratio:auto!important;flex:0 0 auto!important;border:0.45mm solid rgba(235,204,110,.96)!important;border-radius:3mm!important;box-shadow:none!important;break-inside:avoid!important;page-break-inside:avoid!important}
  .card-safe-area{inset:5mm!important}
  .brand-logo{height:9mm!important}.brand-divider{height:7mm!important}.card-brand-row{min-height:9mm!important;gap:1.5mm!important}
  .front-heading{margin-top:1.5mm!important}.front-heading>span{font-size:1.35mm!important;letter-spacing:.25mm!important}.front-heading h3{font-size:3.2mm!important;margin:.9mm 0 .35mm!important}.front-heading p{font-size:1.35mm!important}
  .member-core{gap:1.7mm!important;margin-top:2.4mm!important}.member-photo-frame{border-radius:1.6mm!important}.member-data>strong{font-size:2.45mm!important}.data-label{font-size:1.3mm!important}.member-data dl{gap:1.1mm!important;margin-top:1.5mm!important}.member-data dt{font-size:1.15mm!important}.member-data dd{font-size:1.38mm!important}
  .front-bottom-row{gap:1.5mm!important;margin-top:2.2mm!important}.verified-seal{gap:1mm!important;padding:1mm!important;border-radius:1.5mm!important;font-size:1.25mm!important}.seal-check{width:4.7mm!important;height:4.7mm!important;flex-basis:4.7mm!important;font-size:2.5mm!important}.qr-mini canvas{width:10.5mm!important;height:10.5mm!important;border-width:.55mm!important;border-radius:.8mm!important}.qr-mini span{font-size:1mm!important;margin-top:.6mm!important}.card-slogan{font-size:2.45mm!important}
  .back-heading{margin-top:1.2mm!important}.back-heading h3{font-size:3.3mm!important}.back-heading p{font-size:1.12mm!important;margin-top:.8mm!important}.benefit-grid{gap:1mm!important;margin-top:1.5mm!important}.benefit-item{grid-template-columns:4.4mm minmax(0,1fr)!important;gap:1mm!important;padding:1mm!important;border-radius:1.2mm!important}.benefit-icon{width:4.4mm!important;height:4.4mm!important;font-size:2mm!important}.benefit-item strong{font-size:1.12mm!important}.benefit-item small{font-size:.94mm!important}.privacy-note{grid-template-columns:4mm minmax(0,1fr)!important;gap:1mm!important;margin-top:1.1mm!important;padding:1mm!important;border-radius:1.2mm!important}.privacy-note>span{width:4mm!important;height:4mm!important;font-size:1.8mm!important}.privacy-note p{font-size:.93mm!important}.back-bottom-row{gap:1mm!important;margin-top:1.2mm!important}.member-meta{gap:.55mm!important}.member-meta span{font-size:.9mm!important}.member-meta strong{font-size:1.08mm!important}.back-qr canvas{width:9.8mm!important;height:9.8mm!important}.back-slogan{font-size:2.2mm!important}
  .member-card,.member-card *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
}