/* Kelab Mystar e-Card — app design system (matches approved mockup) */
:root{
  --navy:#1a4b8c; --navy2:#2a6fc4; --navy-deep:#0f3266; --red:#b32027;
  --yellow:#f7c948; --amber:#f59331; --cyan:#29b6d8; --pink:#ed4b82; --green:#27ae8f;
  --ink:#16243a; --muted:#6b7a90; --line:#e7ecf3; --bg:#eef2f8; --card:#fff;
  --grad-pink-amber:linear-gradient(135deg,#ed4b82,#f59331);
  --grad-cyan-navy:linear-gradient(135deg,#29b6d8,#1a4b8c);
  --grad-navy-cyan:linear-gradient(135deg,#1a4b8c,#29b6d8);
  --grad-green-cyan:linear-gradient(135deg,#27ae8f,#29b6d8);
  --grad-amber-yellow:linear-gradient(135deg,#f59331,#f7c948);
  --grad-red-amber:linear-gradient(135deg,#b32027,#f59331);
  --grad-pink-navy:linear-gradient(135deg,#ed4b82,#1a4b8c);
  --grad-green-amber:linear-gradient(135deg,#27ae8f,#f7c948);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;background:var(--bg);
  color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.b>*,.baloo{font-family:'Baloo 2','Plus Jakarta Sans',sans-serif}

/* App shell — phone-width, centered on desktop */
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;
  display:flex;flex-direction:column;box-shadow:0 0 60px rgba(15,42,82,.12)}
.content{flex:1;padding-bottom:84px}
.pad{padding:0 18px}
.muted{color:var(--muted)} .center{text-align:center}
.mt{margin-top:14px}.mt2{margin-top:22px}

/* App bar */
.appbar{background:linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;padding:14px 18px;display:flex;align-items:center;gap:12px}
.appbar.simple{padding:16px 18px}
.appbar .back{font-size:20px;line-height:1}
.appbar h1{font-size:17px;font-weight:800}
.appbar .right{margin-left:auto;display:flex;align-items:center;gap:14px}

/* Bottom nav */
.bottomnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;
  display:flex;justify-content:space-around;padding:9px 6px 16px;border-top:1px solid var(--line);background:#fff;z-index:40}
.bottomnav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:600;color:var(--muted);flex:1}
.bottomnav a.act{color:var(--navy)}
.bottomnav svg{width:22px;height:22px}
.bottomnav a.fab{margin-top:-28px;flex:0 0 auto}
.bottomnav .fab .c{width:50px;height:50px;border-radius:50%;background:var(--grad-navy-cyan);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -4px rgba(26,75,140,.6);color:#fff}

/* Buttons */
.btn{display:block;width:100%;text-align:center;font-weight:700;font-size:15px;padding:14px;border-radius:14px;
  border:none;cursor:pointer;font-family:inherit;transition:transform .08s,box-shadow .2s}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--navy);color:#fff;box-shadow:0 10px 22px -8px rgba(26,75,140,.6)}
.btn.red{background:var(--red);color:#fff}
.btn.amber{background:var(--grad-amber-yellow);color:#5a3d00}
.btn.ghost{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.btn.sm{padding:10px;font-size:13px;width:auto;display:inline-block}
.btnrow{display:flex;gap:10px}

/* Forms */
.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:14.5px;font-family:inherit;color:var(--ink);background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(26,75,140,.1)}
.seg{display:flex;background:#eef2f8;border-radius:11px;padding:4px;margin-bottom:14px}
.seg button{flex:1;text-align:center;font-size:13px;font-weight:700;padding:9px;border-radius:8px;color:var(--muted);border:none;background:transparent;cursor:pointer;font-family:inherit}
.seg button.on{background:#fff;color:var(--navy);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.err{background:#fdecec;border:1px solid #f5c2c2;color:#a3262c;font-size:12.5px;font-weight:600;padding:10px 12px;border-radius:10px;margin-bottom:12px}
.note{font-size:11.5px;color:var(--amber);font-weight:700;text-align:center;margin:8px 0}
.flash{background:#e6f7f0;border:1px solid #bfe9da;color:#1d8a6c;font-size:13px;font-weight:600;padding:11px 13px;border-radius:11px;margin:14px 18px 0}

/* Cards */
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 16px;box-shadow:0 6px 18px -12px rgba(20,36,58,.2)}
.sectionhead{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 8px}
.sectionhead h4{font-size:15px;font-weight:800}
.sectionhead a{font-size:12px;font-weight:700;color:var(--red)}

/* ===== Login / guest ===== */
.guest{min-height:100vh;background:linear-gradient(165deg,#1a4b8c,#143c73 55%,#0f3266);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:36px 22px}
.guest .blob{position:absolute;border-radius:50%;opacity:.5;filter:blur(3px)}
.guest .b1{width:240px;height:240px;background:radial-gradient(circle,#29b6d8,transparent 70%);top:-50px;right:-60px}
.guest .b2{width:220px;height:220px;background:radial-gradient(circle,#ed4b82,transparent 70%);bottom:30px;left:-70px}
.guest .inner{position:relative;z-index:2;width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center}
.guest .bee{width:120px;filter:drop-shadow(0 12px 22px rgba(0,0,0,.3));margin-top:8px}
.guest h2{color:#fff;font-family:'Baloo 2';font-size:25px;margin-top:8px}
.guest .sub{color:#cfe1f7;font-size:13px;text-align:center;margin:4px 0 20px}
.authcard{background:#fff;border-radius:22px;padding:22px 18px;width:100%;box-shadow:0 24px 48px -14px rgba(0,0,0,.45)}
.otpwrap{display:flex;gap:9px;justify-content:center;margin:8px 0 14px}
.otpwrap input{width:44px;height:54px;text-align:center;font-size:22px;font-weight:800;color:var(--navy);border:1.5px solid var(--line);border-radius:12px}
.linkrow{text-align:center;font-size:13px;color:var(--muted);margin-top:14px}
.linkrow a{color:var(--navy);font-weight:700}

/* ===== Dashboard ===== */
.dashtop{background:linear-gradient(160deg,var(--navy),var(--navy2));padding:6px 18px 58px;color:#fff}
.dashtop .hi{display:flex;align-items:center;gap:11px;margin-top:6px}
.dashtop .av{width:44px;height:44px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.dashtop .av img{width:32px}
.dashtop .t{font-size:12px;color:#cfe1f7}
.dashtop .nm{font-size:16px;font-weight:800;line-height:1.1}
.dashtop .bell{margin-left:auto;position:relative;color:#fff}
.dashtop .bell .d{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--yellow);color:#5a4500;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--navy2)}
.minicard{position:relative;margin:-44px 18px 0;background:linear-gradient(125deg,#102a52,#1a4b8c 60%,#2a6fc4);border-radius:20px;padding:16px 17px;color:#fff;box-shadow:0 18px 36px -14px rgba(15,42,82,.7);overflow:hidden}
.minicard .beewm{position:absolute;right:-14px;bottom:-22px;width:110px;opacity:.22}
.minicard .lab{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#bcd3f1}
.minicard .acc{font-family:'Baloo 2';font-size:21px;letter-spacing:1px;margin:3px 0 9px}
.minicard .st{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}
.minicard .st.active{background:rgba(39,174,143,.22);border:1px solid rgba(39,174,143,.5);color:#7ef0c8}
.minicard .st.inactive{background:rgba(179,32,39,.25);border:1px solid rgba(179,32,39,.5);color:#ffb3b3}
.minicard .st i{width:7px;height:7px;border-radius:50%;background:currentColor}
.minicard .view{position:absolute;top:15px;right:15px;font-size:11px;font-weight:700;background:rgba(255,255,255,.16);padding:5px 10px;border-radius:9px}
.quick{display:flex;gap:10px;padding:16px 18px 4px}
.quick a{flex:1;background:#fff;border:1px solid var(--line);border-radius:15px;padding:12px 4px;text-align:center;font-size:11px;font-weight:700}
.quick .ic{width:40px;height:40px;border-radius:12px;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px}

.hscroll{display:flex;gap:12px;padding:0 18px 6px;overflow-x:auto;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.promo{flex:0 0 200px;border-radius:16px;overflow:hidden;color:#fff;padding:14px;min-height:108px;display:flex;flex-direction:column;justify-content:flex-end;position:relative}
.promo .pc{font-size:10px;font-weight:700;background:rgba(255,255,255,.25);align-self:flex-start;padding:3px 8px;border-radius:7px;position:absolute;top:12px;left:12px}
.promo h5{font-size:15px;font-weight:800;line-height:1.15}
.promo span{font-size:11.5px;opacity:.92;margin-top:2px}

.annlist{padding:4px 18px}
.ann{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.ann .ic{width:34px;height:34px;border-radius:10px;background:#eef2f8;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ann h5{font-size:13.5px;font-weight:800}.ann p{font-size:12px;color:var(--muted)}

/* ===== Flip card (front <-> back) ===== */
.flipcard{perspective:1400px;cursor:pointer;margin-top:6px}
.flipinner{position:relative;width:100%;aspect-ratio:720/480;transition:transform .65s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.flipcard.flipped .flipinner{transform:rotateY(180deg)}
.flipface{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flipface.back{transform:rotateY(180deg)}
.flipface .realcard{width:100%;height:100%;margin:0}
.flipface.front .realcard img{object-fit:cover}
.flipface.back .realcard{background:#fff;padding:2.5% 8% 1.5%}
.flipface.back .realcard img{object-fit:contain;background:#fff}

/* ===== Real physical-card face (cropped CBP template + dynamic overlay) ===== */
.realcard{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 22px 44px -16px rgba(15,42,82,.55);margin-top:6px}
.realcard > img{width:100%;height:100%;display:block}
.realcard .ov{position:absolute;left:62%;right:2.5%;top:33%;bottom:22%;display:flex;flex-direction:column;justify-content:center}
.realcard .ov .nm{font-weight:800;color:#152a4d;line-height:1.15;font-size:clamp(10px,2.7vw,13px);letter-spacing:.1px}
.realcard .ov .id{font-family:'Baloo 2',sans-serif;font-weight:700;color:#1a4b8c;margin-top:5px;font-size:clamp(11px,3vw,13.5px);letter-spacing:.6px}
.realcard .ov .tier{align-self:flex-start;margin-top:7px;font-size:9px;font-weight:800;background:var(--bee-yellow,#f7c948);color:#5a4500;padding:2px 8px;border-radius:999px;letter-spacing:.4px}

/* ===== E-Card ===== */
.ecardpage{padding:14px 18px 0}
.bigcard{border-radius:24px;padding:22px 20px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(125deg,#0f3266,#1a4b8c 55%,#2a6fc4);box-shadow:0 22px 44px -16px rgba(15,42,82,.8)}
.bigcard .ribbon{position:absolute;top:0;right:0;width:160px;height:160px;background:radial-gradient(circle at 80% 20%,rgba(41,182,216,.5),transparent 60%)}
.bigcard .top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.bigcard .top .cbpchip{background:#fff;border-radius:8px;padding:5px 9px;box-shadow:0 3px 10px rgba(0,0,0,.18);display:inline-flex}
.bigcard .top .cbpchip img{height:18px;display:block}
.bigcard .kelab{font-family:'Baloo 2';font-weight:800;font-size:14px;color:var(--yellow)}
.bigcard .who{position:relative;z-index:2;margin-top:20px}
.bigcard .who .l{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:#bcd3f1}
.bigcard .who .nm{font-size:20px;font-weight:800}
.bigcard .who .ac{font-family:'Baloo 2';letter-spacing:2px;font-size:16px;margin-top:10px}
.bigcard .tier{position:absolute;bottom:18px;right:20px;z-index:2;font-size:11px;font-weight:800;background:rgba(247,201,72,.9);color:#5a4500;padding:4px 11px;border-radius:999px}
.qrcard{background:#fff;border-radius:20px;margin-top:16px;padding:20px;text-align:center;box-shadow:0 10px 26px -10px rgba(15,42,82,.25)}
.qrcard .qrbox{width:200px;height:200px;margin:0 auto;padding:10px;border:1px solid var(--line);border-radius:14px}
.qrcard .qrbox svg{width:100%;height:100%}
.qrcard h5{font-size:15px;font-weight:800;margin-top:14px}
.qrcard p{font-size:12.5px;color:var(--muted);margin-top:4px}
.qrcard .li{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--green);margin-top:10px}

/* ===== Lists / offers ===== */
.list{padding:12px 18px}
.offer{background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px;display:flex;gap:13px;align-items:center;margin-bottom:11px;box-shadow:0 6px 16px -12px rgba(20,36,58,.18)}
.offer .lg{width:50px;height:50px;border-radius:14px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:18px;font-family:'Baloo 2'}
.offer .of{flex:1;min-width:0}
.offer .of h5{font-size:14px;font-weight:800}
.offer .of p{font-size:11.5px;color:var(--muted)}
.offer .of .pct{display:inline-block;font-size:11.5px;font-weight:800;color:var(--red);margin-top:3px}
.tabs{display:flex;gap:8px;padding:12px 18px 4px}
.tabs a{font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:999px;background:#eef2f8;color:var(--muted)}
.tabs a.on{background:var(--navy);color:#fff}
.empty{text-align:center;color:var(--muted);padding:40px 20px;font-size:13.5px}
.empty .e{font-size:40px;margin-bottom:8px}

/* badges / chips */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:#eef2f8;color:var(--navy)}
.chip.green{background:#e6f7f0;color:#1d8a6c}
.chip.amber{background:#fef3e0;color:#b5751a}

/* profile */
.profhead{background:linear-gradient(160deg,var(--navy),var(--navy2));padding:24px 18px 22px;color:#fff;text-align:center}
.profhead .ava{width:84px;height:84px;border-radius:26px;background:#fff;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.profhead .ava img{width:60px}
.profhead .nm{font-size:18px;font-weight:800}
.profhead .em{font-size:12.5px;color:#cfe1f7}
.row{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:#fff;border:1px solid var(--line);border-radius:13px;margin-bottom:9px}
.row .l{font-size:12px;color:var(--muted);font-weight:600}
.row .v{font-size:13.5px;font-weight:700}
.menu a{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:13px;margin-bottom:9px;font-size:14px;font-weight:700}
.menu a .ic{width:34px;height:34px;border-radius:10px;background:#eef2f8;display:flex;align-items:center;justify-content:center}
.menu a .ar{margin-left:auto;color:var(--muted)}

/* gradient utility classes (keys from seed data) */
.g-pink-amber{background:var(--grad-pink-amber)}
.g-cyan-navy{background:var(--grad-cyan-navy)}
.g-navy-cyan{background:var(--grad-navy-cyan)}
.g-green-cyan{background:var(--grad-green-cyan)}
.g-amber-yellow{background:var(--grad-amber-yellow)}
.g-red-amber{background:var(--grad-red-amber)}
.g-pink-navy{background:var(--grad-pink-navy)}
.g-green-amber{background:var(--grad-green-amber)}

/* ===== Staff scanner ===== */
.scanpage{min-height:100vh;background:#0c1830;display:flex;flex-direction:column;color:#fff}
.scanbar{padding:14px 18px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
.scanbar .mb{margin-left:auto;font-size:11px;font-weight:700;background:rgba(247,201,72,.2);color:var(--yellow);padding:5px 10px;border-radius:9px}
.scanbar .lo{margin-left:8px;color:#9fb4d6;font-size:12px}
.scanhint{text-align:center;color:#bcd3f1;font-size:13px;padding:0 24px 10px}
#reader{margin:6px 22px;border-radius:18px;overflow:hidden;border:2px solid rgba(41,182,216,.4)}
.viewf{flex:1;margin:6px 22px 0;border-radius:20px;position:relative;border:2px solid rgba(41,182,216,.4);overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:300px;
  background:repeating-linear-gradient(0deg,#0f2244,#0f2244 6px,#0c1830 6px,#0c1830 12px)}
.viewf .corner{position:absolute;width:34px;height:34px;border:3px solid var(--cyan)}
.viewf .c1{top:16px;left:16px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.viewf .c2{top:16px;right:16px;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.viewf .c3{bottom:16px;left:16px;border-right:0;border-top:0;border-radius:0 0 0 8px}
.viewf .c4{bottom:16px;right:16px;border-left:0;border-top:0;border-radius:0 0 8px 0}
.viewf .miniqr{width:120px;height:120px;border-radius:12px;background:conic-gradient(from 0deg,#16243a 25%,#dfe9f7 0 50%,#16243a 0 75%,#dfe9f7 0);background-size:11px 11px;opacity:.5}
.scanactions{padding:16px 22px 24px}
.scanactions .or{text-align:center;color:#6b82a8;font-size:12px;margin:12px 0}

/* verify result */
.vresult{min-height:100vh;background:#0c1830;color:#fff;display:flex;flex-direction:column}
.vsheet{margin-top:auto;background:#fff;color:var(--ink);border-radius:26px 26px 0 0;padding:22px 20px 26px;box-shadow:0 -16px 40px rgba(0,0,0,.3)}
.vbadge{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:-58px auto 10px;border:5px solid #fff}
.vbadge.ok{background:var(--green);color:#fff}
.vbadge.no{background:var(--red);color:#fff}
.vbadge.invalid{background:#8b98aa;color:#fff}
.vresult .vtop{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:30px}
.vresult .vtop .pulse{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(41,182,216,.3),transparent 70%);display:flex;align-items:center;justify-content:center;font-size:48px}
.vname{text-align:center;font-size:20px;font-weight:800}
.vacc{text-align:center;font-size:13px;color:var(--muted);margin-top:2px;font-family:'Baloo 2';letter-spacing:1px}
.vstat{text-align:center;margin:12px 0}
.vstat .pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;padding:7px 16px;border-radius:999px}
.vstat .pill.ok{background:#e6f7f0;color:#1d8a6c}
.vstat .pill.no{background:#fdecec;color:#a3262c}
.vmeta{display:flex;gap:10px;justify-content:center;margin-bottom:6px}
.vrewards{margin-top:14px}
.vrewards h4{font-size:13px;font-weight:800;margin-bottom:9px}
.vrw{display:flex;align-items:center;gap:11px;padding:10px;border:1px solid var(--line);border-radius:13px;margin-bottom:8px}
.vrw .lg{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-family:'Baloo 2';flex:0 0 auto}
.vrw .info{flex:1}.vrw .info h5{font-size:13px;font-weight:800}.vrw .info p{font-size:11px;color:var(--muted)}
.vrw button{font-size:12px;font-weight:800;color:#fff;background:var(--navy);border:none;padding:9px 14px;border-radius:10px;cursor:pointer}

/* notifications */
.notif{display:flex;gap:12px;padding:13px 16px;background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:10px}
.notif.unread{border-color:#bcd3f1;background:#f5f9ff}
.notif .ic{width:38px;height:38px;border-radius:11px;background:#eef2f8;display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:18px}
.notif h5{font-size:13.5px;font-weight:800}.notif p{font-size:12px;color:var(--muted);margin-top:2px}
.notif .tm{font-size:10.5px;color:var(--muted);margin-top:4px}