:root{
  --p1:#3a0e5e;--p2:#5b2590;--p3:#7c3aad;--p4:#f4effe;
  --g1:#166534;--g2:#22c55e;--g3:#f0fdf4;
  --a2:#d97706;--a3:#f5c518;--a4:#fef9e7;
  --r1:#dc2626;
  --n0:#0f172a;--n1:#1e293b;--n2:#475569;--n3:#94a3b8;--n4:#e2e8f0;--n5:#f8fafc;
  --w:#fff;--radius:10px;
  --sh:0 2px 12px rgba(58,14,94,.1);--sh2:0 12px 40px rgba(58,14,94,.18);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:'Inter',-apple-system,sans-serif;background:var(--n5);color:var(--n0);-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100vw}
img{max-width:100%;height:auto}
.hidden{display:none!important}
.fade-in{animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--n4);box-shadow:var(--sh)}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.nav-logo-img{height:40px;width:auto;display:block;flex-shrink:0}
.brand-text{min-width:0}
.brand-text strong{display:block;font-size:.88rem;font-weight:700;color:var(--p1);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-text span{font-size:.56rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--n3);white-space:nowrap}
.nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.btn-sm{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:7px;font-size:.72rem;font-weight:600;cursor:pointer;border:none;font-family:inherit;text-decoration:none;transition:all .18s;white-space:nowrap}
.btn-sm-ghost{background:transparent;border:1.5px solid var(--n4);color:var(--n2)}
.btn-sm-ghost:hover{background:var(--n5);border-color:var(--n3)}
.btn-sm-primary{background:var(--p1);color:#fff}
.btn-sm-primary:hover{background:var(--p2)}
.btn-sm-green{background:var(--g1);color:#fff}
@media(max-width:480px){
  .nav{padding:0 12px}
  .brand-text span{display:none}
  .brand-text strong{font-size:.78rem}
  .btn-sm .btn-label{display:none}
  .btn-sm{padding:7px 10px}
}

/* HERO SLIDESHOW */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:100px 20px 60px;text-align:center;overflow:hidden}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease}
.hero-slide.active{opacity:1}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(58,14,94,.88) 0%,rgba(91,37,144,.8) 50%,rgba(22,101,52,.75) 100%)}
.hero-content{position:relative;z-index:2;max-width:640px;width:100%}
.hero-tag{display:inline-flex;align-items:center;gap:7px;background:rgba(245,197,24,.15);border:1px solid rgba(245,197,24,.35);border-radius:50px;padding:5px 16px;margin-bottom:18px}
.hero-tag span{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--a3)}
.hero h1{font-size:clamp(1.7rem,5vw,3.2rem);font-weight:800;color:#fff;line-height:1.1;margin-bottom:14px}
.hero h1 em{color:var(--a3);font-style:normal}
.hero-desc{font-size:clamp(.85rem,2.5vw,1rem);color:rgba(255,255,255,.72);max-width:480px;margin:0 auto 32px;line-height:1.7;font-weight:300}
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.btn-hero{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:9px;font-size:.88rem;font-weight:700;cursor:pointer;border:none;font-family:inherit;transition:all .2s;min-width:160px}
.btn-hero-gold{background:var(--a3);color:var(--p1);box-shadow:0 4px 20px rgba(245,197,24,.35)}
.btn-hero-gold:hover{background:#f0bc10;transform:translateY(-2px)}
.btn-hero-outline{background:rgba(255,255,255,.1);color:#fff;border:2px solid rgba(255,255,255,.4)}
.btn-hero-outline:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.7)}
.hero-stats{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;padding-top:28px;border-top:1px solid rgba(255,255,255,.15)}
.hero-stat .num{font-size:1.6rem;font-weight:800;color:var(--a3);line-height:1}
.hero-stat .lbl{font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:3px}
/* Slide dots */
.slide-dots{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.slide-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;transition:all .3s;border:none;padding:0}
.slide-dot.active{background:#fff;width:20px;border-radius:4px}
@media(max-width:500px){
  .hero{padding:80px 16px 50px;min-height:auto}
  .hero-btns{flex-direction:column;align-items:center}
  .btn-hero{width:100%;max-width:260px;padding:13px 20px}
  .hero-stats{gap:14px}
  .hero-stat .num{font-size:1.3rem}
}

/* STEPS */
.steps-wrap{background:var(--w);border-bottom:1px solid var(--n4);padding:14px 20px;position:sticky;top:60px;z-index:50;overflow-x:auto}
.steps{display:flex;align-items:center;justify-content:center;min-width:fit-content;margin:0 auto}
.step-item{display:flex;align-items:center;gap:0;flex-shrink:0}
.step-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;border:2px solid var(--n4);color:var(--n3);background:var(--w);transition:all .25s;flex-shrink:0}
.step-lbl{font-size:.65rem;font-weight:600;color:var(--n3);margin-left:7px;white-space:nowrap;transition:color .25s}
.step-line{width:32px;height:2px;background:var(--n4);margin:0 2px;transition:background .25s;flex-shrink:0}
.step-item.active .step-dot{background:var(--p2);border-color:var(--p2);color:#fff}
.step-item.active .step-lbl{color:var(--p1);font-weight:700}
.step-item.done .step-dot{background:var(--g1);border-color:var(--g1);color:#fff}
.step-line.done{background:var(--g1)}
@media(max-width:500px){.step-lbl{display:none}.step-line{width:18px}}

/* MAIN CONTENT */
.main{max-width:660px;margin:0 auto;padding:28px 16px 80px;width:100%}
.card{background:var(--w);border-radius:var(--radius);border:1px solid var(--n4);box-shadow:var(--sh);padding:24px;margin-bottom:14px}
.card-hdr{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.card-ico{width:32px;height:32px;border-radius:7px;background:var(--p4);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.card-ico svg{width:15px;height:15px;stroke:var(--p2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card-hdr h2{font-size:.95rem;font-weight:700;color:var(--p1)}
.card-sub{font-size:.72rem;color:var(--n3);margin-bottom:20px;padding-left:42px;line-height:1.5}

/* FORM */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fg.one{grid-template-columns:1fr}
.field{display:flex;flex-direction:column;gap:5px}
.field.s2{grid-column:span 2}
label{font-size:.7rem;font-weight:600;color:var(--n1)}
.req{color:var(--r1);margin-left:2px}
input:not([type="checkbox"]):not([type="radio"]),select,textarea{width:100%;padding:10px 12px;border:1.5px solid var(--n4);border-radius:8px;font-family:inherit;font-size:.83rem;color:var(--n0);background:var(--n5);transition:border-color .18s,box-shadow .18s;outline:none;-webkit-appearance:none}
input[type="checkbox"],input[type="radio"]{
  width:17px;height:17px;flex-shrink:0;cursor:pointer;accent-color:var(--p1);
  /* Deliberately NOT -webkit-appearance:none here — that rule, applied
     to every <input> on the page including checkboxes, was stripping
     the entire native checkbox visual (box + checkmark) on WebKit
     browsers. The underlying checked state was always toggling
     correctly (confirmed by the bulk-select counter updating), but
     nothing ever appeared checked on screen — exactly the "I select it
     but the box still looks unchecked" report. Native rendering +
     accent-color is simpler and more reliable than rebuilding a custom
     checkbox skin here. */
}
input:focus,select:focus,textarea:focus{border-color:var(--p3);box-shadow:0 0 0 3px rgba(91,37,144,.07);background:var(--w)}
input::placeholder,textarea::placeholder{color:var(--n3)}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px;cursor:pointer}
textarea{resize:vertical;min-height:68px}
.hint{font-size:.65rem;color:var(--n3)}
@media(max-width:560px){.fg{grid-template-columns:1fr!important}.field.s2{grid-column:span 1!important}}

/* PHOTO */
.photo-row{display:flex;align-items:center;gap:14px;padding:14px;background:var(--n5);border-radius:8px;border:1.5px dashed var(--n4);cursor:pointer;transition:border-color .18s;margin-bottom:18px}
.photo-row:hover{border-color:var(--p3)}
.photo-thumb{width:76px;height:76px;border-radius:7px;background:var(--n4);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.photo-thumb img{width:100%;height:100%;object-fit:cover}
.photo-thumb svg{width:24px;height:24px;stroke:var(--n3);fill:none;stroke-width:1.5}
@media(max-width:400px){.photo-row{flex-direction:column;text-align:center}}

/* CATEGORY */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px}
.cat-card{border:2px solid var(--n4);border-radius:9px;padding:13px 11px;cursor:pointer;transition:all .18s;position:relative;background:var(--w)}
.cat-card:hover{border-color:var(--p3);background:var(--p4)}
.cat-card.sel{border-color:var(--p2);background:var(--p4)}
.cat-check{position:absolute;top:7px;right:7px;width:16px;height:16px;border-radius:50%;background:var(--p2);display:none;align-items:center;justify-content:center}
.cat-check svg{width:9px;height:9px;stroke:#fff;fill:none;stroke-width:2.5}
.cat-card.sel .cat-check{display:flex}
.cat-ico{width:32px;height:32px;border-radius:7px;background:var(--p4);display:flex;align-items:center;justify-content:center;margin-bottom:7px}
.cat-ico svg{width:16px;height:16px;stroke:var(--p2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cat-card.sel .cat-ico{background:var(--p2)}
.cat-card.sel .cat-ico svg{stroke:#fff}
.cat-name{font-size:.76rem;font-weight:700;color:var(--p1);margin-bottom:2px}
.cat-fee{font-size:.66rem;color:var(--a2);font-weight:600}
.cat-desc{font-size:.61rem;color:var(--n3);margin-top:3px;line-height:1.4}
@media(max-width:400px){.cat-grid{grid-template-columns:1fr 1fr}}

/* PAYMENT */
.fee-box{background:var(--a4);border:1px solid rgba(217,119,6,.2);border-radius:9px;padding:14px 16px;margin-bottom:16px}
.fee-row{display:flex;justify-content:space-between;font-size:.78rem;color:var(--n2);padding:4px 0}
.fee-row.tot{border-top:1px solid rgba(217,119,6,.25);margin-top:7px;padding-top:9px;font-weight:700;font-size:.88rem;color:var(--a2)}
.pay-tabs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.pay-tab{border:2px solid var(--n4);border-radius:9px;padding:13px 14px;cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:11px}
.pay-tab:hover{border-color:var(--p3);background:var(--p4)}
.pay-tab.on{border-color:var(--g1);background:var(--g3)}
.ptab-ico{width:36px;height:36px;border-radius:7px;background:var(--g3);border:1px solid #86efac;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pay-tab.on .ptab-ico{background:var(--g1);border-color:var(--g1)}
.ptab-ico svg{width:17px;height:17px;stroke:#166534;fill:none;stroke-width:1.8;stroke-linecap:round}
.pay-tab.on .ptab-ico svg{stroke:#fff}
.pay-tab strong{display:block;font-size:.78rem;font-weight:700;color:var(--n0)}
.pay-tab span{font-size:.65rem;color:var(--n3)}
.pay-form{background:var(--n5);border-radius:9px;padding:16px;border:1px solid var(--n4)}
@media(max-width:480px){.pay-tabs{grid-template-columns:1fr}}

/* STK PENDING */
.stk-pending{text-align:center;padding:24px 12px}
.stk-phone{width:60px;height:60px;border-radius:14px;background:linear-gradient(135deg,var(--g1),#16a34a);margin:0 auto 14px;display:flex;align-items:center;justify-content:center;animation:phonePing 1.6s ease-in-out infinite}
.stk-phone svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.8}
@keyframes phonePing{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.4)}60%{box-shadow:0 0 0 14px rgba(22,163,74,0)}}
.prog-bar{height:3px;background:var(--n4);border-radius:2px;overflow:hidden;margin:16px 0 6px}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--p2),var(--g2));animation:prog 7s ease-in-out forwards}
@keyframes prog{0%{width:0}80%{width:88%}100%{width:100%}}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 22px;border-radius:8px;font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;border:none;transition:all .18s}
.btn-lg{padding:12px 28px;font-size:.88rem}
.btn-full{width:100%}
.btn-purple{background:var(--p1);color:#fff;box-shadow:0 2px 10px rgba(58,14,94,.2)}
.btn-purple:hover{background:var(--p2);transform:translateY(-1px)}
.btn-purple:disabled{background:var(--n3);box-shadow:none;cursor:not-allowed;transform:none}
.btn-green{background:var(--g1);color:#fff;box-shadow:0 2px 10px rgba(22,101,52,.18)}
.btn-green:hover{background:#145c2e;transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1.5px solid var(--n4);color:var(--n2)}
.btn-ghost:hover{background:var(--n5);border-color:var(--n3)}
.btn-red{background:var(--r1);color:#fff}

/* ── ID CARD ── professional, driving-licence proportions ──────────────── */
.card-wrap{display:flex;justify-content:center;margin:16px 0;padding:0}
.id-card{
  width:min(380px,100%);
  aspect-ratio:85.6/54;
  background:linear-gradient(135deg,#3a0e5e 0%,#5b2590 60%,#166534 100%);
  border-radius:14px;
  padding:0;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  box-shadow:0 12px 40px rgba(58,14,94,.4),0 2px 8px rgba(0,0,0,.2);
  font-family:'Inter',Arial,sans-serif;
}
/* Top colour bar */
.ic-topbar{
  height:6px;
  background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,.1),rgba(255,255,255,.35));
  flex-shrink:0;
}
/* Inner padding container */
.ic-inner{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:10px 12px 8px;
  position:relative;
  z-index:1;
}
/* Decorative circles */
.id-card::before{content:'';position:absolute;top:-40px;right:-40px;width:150px;height:150px;background:rgba(255,255,255,.05);border-radius:50%}
.id-card::after{content:'';position:absolute;bottom:-30px;left:-20px;width:100px;height:100px;background:rgba(255,255,255,.03);border-radius:50%}
/* Header row */
.ic-hdr{display:flex;align-items:center;gap:7px;margin-bottom:9px;position:relative;z-index:1}
.ic-logo{width:26px;height:26px;flex-shrink:0;object-fit:contain;border-radius:3px;background:#fff}
.ic-org{flex:1;min-width:0;line-height:1}
.ic-org-name{font-size:5px;font-weight:800;color:rgba(255,255,255,.95);text-transform:uppercase;letter-spacing:.06em;display:block}
.ic-org-sub{font-size:3.8px;color:rgba(255,255,255,.45);display:block;margin-top:1px}
.ic-tag{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  font-size:4px;
  font-weight:800;
  letter-spacing:.08em;
  padding:3px 8px;
  border-radius:50px;
  text-transform:uppercase;
  flex-shrink:0;
}
/* Body */
.ic-body{display:flex;gap:10px;flex:1;position:relative;z-index:1;align-items:center}
/* Photo */
.ic-photo{
  width:58px;height:58px;
  border-radius:7px;
  background:rgba(255,255,255,.1);
  border:2px solid rgba(255,255,255,.3);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.ic-photo img{width:100%;height:100%;object-fit:cover}
.ic-photo svg{width:24px;height:24px;stroke:rgba(255,255,255,.35);fill:none;stroke-width:1.5}
/* Info */
.ic-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.ic-name{font-size:7.6px;font-weight:800;color:#fff;line-height:1.15;text-transform:uppercase;letter-spacing:.02em}
.ic-status{display:inline-flex;align-items:center;gap:2px;margin-top:2px;background:rgba(34,197,94,.18);border:.6px solid rgba(134,239,172,.5);border-radius:30px;padding:1.5px 5px;width:fit-content}
.ic-status-dot{width:3px;height:3px;border-radius:50%;background:#4ade80}
.ic-status-txt{font-size:3.2px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#dcfce7}
.ic-fields{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px}
.ic-f{display:flex;flex-direction:column;gap:1px}
.ic-fl{font-size:3.4px;color:rgba(255,255,255,.45);letter-spacing:.1em;text-transform:uppercase}
.ic-fv{font-size:4.8px;font-weight:600;color:rgba(255,255,255,.92);line-height:1.2}
/* QR */
.ic-qr-block{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;justify-content:flex-end}
.ic-qr{
  width:50px;height:50px;
  background:#fff;
  border-radius:6px;
  padding:3px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.ic-qr canvas,.ic-qr img{width:44px!important;height:44px!important}
.ic-qr-lbl{font-size:3px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);text-align:center}
/* Footer */
.ic-ftr{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:6px;padding-top:6px;
  border-top:1px solid rgba(255,255,255,.15);
  position:relative;z-index:1;
}
.ic-memno{font-size:4.2px;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.08em;font-family:monospace}
.ic-exp{font-size:3.8px;color:rgba(255,255,255,.85);text-align:right}
.ic-exp strong{color:#f5c518;font-weight:700}

/* CERTIFICATE */
.cert-wrap{background:var(--n4);border-radius:10px;padding:14px;margin:20px 0}
.certificate{background:#fff;border-radius:7px;padding:32px 28px;position:relative;overflow:hidden;max-width:540px;margin:0 auto}
.cert-border{position:absolute;inset:9px;border:2px solid var(--p1);border-radius:3px;pointer-events:none}
.cert-border::after{content:'';position:absolute;inset:5px;border:1px solid var(--a3);border-radius:2px}
.cert-hdr{text-align:center;margin-bottom:20px;position:relative;z-index:1}
.cert-logo-img{height:56px;width:auto;margin:0 auto 10px;display:block}
.cert-orgname{font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--p1)}
.cert-motto{font-size:.56rem;color:var(--n3);letter-spacing:.08em;margin-top:2px}
.cert-div{width:46px;height:2px;background:linear-gradient(90deg,var(--p2),var(--a3));margin:10px auto;border-radius:2px}
.cert-title{font-size:1.1rem;font-weight:800;color:var(--p1);margin-bottom:3px}
.cert-subtitle{font-size:.62rem;color:var(--n3);letter-spacing:.08em;text-transform:uppercase}
.cert-body{text-align:center;margin:16px 0;position:relative;z-index:1}
.cert-body p{font-size:.74rem;color:var(--n2);line-height:1.7}
.cert-name{font-size:1.2rem;font-weight:800;color:var(--p1);margin:5px 0}
.cert-dg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0;position:relative;z-index:1}
.cert-di{background:var(--n5);border-radius:6px;padding:9px 11px;text-align:center}
.cert-di .di-l{font-size:.54rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--n3);margin-bottom:3px}
.cert-di .di-v{font-size:.74rem;font-weight:700;color:var(--p1)}
.cert-ftr{display:flex;align-items:flex-end;justify-content:space-between;margin-top:20px;padding-top:16px;border-top:1px solid var(--n4);position:relative;z-index:1;flex-wrap:wrap;gap:12px}
.cert-sig{text-align:center}
.cert-sig .sig-l{width:100px;height:1.5px;background:var(--n1);margin-bottom:5px}
.cert-sig .sig-n{font-size:.58rem;font-weight:700;color:var(--n0)}
.cert-sig .sig-t{font-size:.52rem;color:var(--n3)}
.cert-qr canvas,.cert-qr img{width:56px!important;height:56px!important}
.cert-qr .qr-l{font-size:.5rem;color:var(--n3);margin-top:3px;text-align:center}
@media(max-width:500px){.cert-dg{grid-template-columns:1fr}.cert-ftr{justify-content:center}.certificate{padding:20px 14px}.cert-title{font-size:.95rem}}

/* SUCCESS */
.suc-icon{width:56px;height:56px;background:linear-gradient(135deg,var(--g1),#16a34a);border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center}
.suc-icon svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2.5}
.ref-badge{display:inline-block;background:var(--p4);border:1.5px solid var(--p3);border-radius:7px;padding:8px 18px;font-size:.95rem;font-weight:800;color:var(--p1);letter-spacing:.07em}
.action-btns{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:16px}
@media(max-width:400px){.action-btns{flex-direction:column;align-items:center}.action-btns .btn{width:100%;max-width:240px}}

/* MODALS */
.overlay{position:fixed;inset:0;z-index:1100;background:rgba(10,10,30,.68);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .25s}
.overlay.open{opacity:1;pointer-events:all}
.modal{background:#fff;border-radius:14px;max-width:500px;width:100%;max-height:92vh;overflow-y:auto;box-shadow:var(--sh2);transform:scale(.95) translateY(14px);transition:transform .25s}
.overlay.open .modal{transform:none}
.modal-hdr{padding:18px 22px 14px;border-bottom:1px solid var(--n4);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;z-index:1}
.modal-hdr h3{font-size:.92rem;font-weight:700;color:var(--p1)}
.modal-x{width:28px;height:28px;border:none;background:var(--n4);border-radius:6px;cursor:pointer;font-size:.85rem;color:var(--n2);display:flex;align-items:center;justify-content:center}
.modal-body{padding:18px 22px}
.modal-ftr{padding:12px 22px 18px;display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end;border-top:1px solid var(--n4);position:sticky;bottom:0;background:#fff}
@media(max-width:540px){
  .overlay{padding:0;align-items:flex-end}
  .modal{border-radius:16px 16px 0 0;max-height:calc(100vh - 16px);overflow-y:auto}
  .modal-hdr{position:sticky;top:0}
  .modal-ftr{position:sticky;bottom:0}
}

/* LOGIN SCREEN */
.login-screen{position:fixed;inset:0;z-index:1000;background:linear-gradient(160deg,var(--p1),var(--p2) 60%,var(--g1));display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{background:#fff;border-radius:16px;padding:36px 32px;width:100%;max-width:360px;box-shadow:0 24px 64px rgba(0,0,0,.25)}
.login-box .logo{text-align:center;margin-bottom:20px}
.login-box .logo img{height:56px;width:auto;margin:0 auto;display:block}
.login-box h2{font-size:1.15rem;font-weight:800;color:var(--p1);text-align:center;margin-bottom:4px}
.login-box p{font-size:.74rem;color:var(--n3);text-align:center;margin-bottom:24px}
.login-tabs{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--n4);border-radius:8px;overflow:hidden;margin-bottom:20px}
.login-tab{padding:9px;text-align:center;font-size:.74rem;font-weight:600;cursor:pointer;color:var(--n3);transition:all .18s;background:var(--w);border:none;font-family:inherit}
.login-tab.on{background:var(--p1);color:#fff}
.login-field{margin-bottom:14px}
.login-field label{display:block;font-size:.7rem;font-weight:600;color:var(--n1);margin-bottom:5px}
.login-err{background:#fef2f2;border:1px solid #fca5a5;color:#991b1b;font-size:.75rem;padding:9px 12px;border-radius:7px;margin-top:12px;display:none}
.login-err.show{display:block}

/* DASHBOARD */
.db-header{background:var(--p1);color:#fff;padding:24px 20px 20px;border-radius:var(--radius);margin-bottom:16px}
.db-header h2{font-size:1.1rem;font-weight:800;margin-bottom:4px}
.db-header p{font-size:.78rem;opacity:.65}
.db-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.db-stat{background:var(--w);border-radius:9px;padding:14px;border:1px solid var(--n4);text-align:center}
.db-stat .dsn{font-size:1.6rem;font-weight:800;color:var(--p1);line-height:1}
.db-stat.green .dsn{color:var(--g1)}
.db-stat.gold .dsn{color:var(--a2)}
.db-stat .dsl{font-size:.6rem;font-weight:600;color:var(--n3);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
@media(max-width:400px){.db-stats{grid-template-columns:1fr 1fr}}

/* TABLE */
.tbl-wrap{background:var(--w);border-radius:var(--radius);border:1px solid var(--n4);overflow:hidden}
.tbl-top{padding:14px 16px;border-bottom:1px solid var(--n4);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.tbl-top h3{font-size:.88rem;font-weight:700;color:var(--n0)}
.srch{padding:7px 12px;border:1.5px solid var(--n4);border-radius:7px;font-size:.76rem;font-family:inherit;outline:none;width:180px;transition:border-color .18s}
.srch:focus{border-color:var(--p3)}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:500px}
thead tr{background:var(--n5)}
th{padding:9px 14px;font-size:.65rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--n3);text-align:left;border-bottom:1px solid var(--n4);white-space:nowrap}
td{padding:11px 14px;font-size:.76rem;color:var(--n1);border-bottom:1px solid var(--n4);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--n5)}
.avatar{width:28px;height:28px;border-radius:6px;background:var(--p4);display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:var(--p2);overflow:hidden;flex-shrink:0}
.avatar img{width:100%;height:100%;object-fit:cover}
.m-cell{display:flex;align-items:center;gap:8px}
.m-name{font-weight:600;color:var(--n0);font-size:.78rem;white-space:nowrap}
.m-no{font-size:.64rem;color:var(--n3)}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:50px;font-size:.62rem;font-weight:700}
.b-pending{background:#fef3c7;color:#92400e}
.b-approved{background:#d1fae5;color:#065f46}
.b-printing{background:#dbeafe;color:#1e40af}
.b-done{background:#f0fdf4;color:var(--g1);border:1px solid #86efac}
.b-paid{background:#d1fae5;color:#065f46}
.b-unpaid{background:#fee2e2;color:#991b1b}
.b-cat{background:var(--p4);color:var(--p2)}
.b-active{background:#d1fae5;color:#065f46}
.b-pend{background:#fef3c7;color:#92400e}
.b-revoked{background:#fee2e2;color:#991b1b}
.b-red{background:#fee2e2;color:#991b1b}

/* PRINT */
.print-area{display:none}

/* TOAST */
.toast-wrap{position:fixed;top:72px;right:14px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:300px;pointer-events:none}
.toast{padding:11px 14px;border-radius:8px;font-size:.76rem;font-weight:500;display:flex;align-items:flex-start;gap:8px;box-shadow:var(--sh2);animation:tIn .3s ease;pointer-events:all}
.toast svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}
.toast.success{background:#f0fdf4;border:1px solid #86efac;color:#166534}.toast.success svg{stroke:#166534}
.toast.error{background:#fef2f2;border:1px solid #fca5a5;color:#991b1b}.toast.error svg{stroke:#991b1b}
.toast.info{background:var(--p4);border:1px solid var(--p3);color:var(--p1)}.toast.info svg{stroke:var(--p2)}
@keyframes tIn{from{transform:translateX(110%);opacity:0}to{transform:none;opacity:1}}

/* VERIFY */
.vr-ok{background:#f0fdf4;border:1.5px solid #86efac;border-radius:8px;padding:14px}
.vr-fail{background:#fef2f2;border:1.5px solid #fca5a5;border-radius:8px;padding:14px}

/* FOOTER */
.footer{background:var(--n1);color:rgba(255,255,255,.5);text-align:center;padding:24px 16px;font-size:.72rem}
.footer strong{color:#fff}
.footer-links{display:flex;gap:14px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.footer-links a{color:rgba(255,255,255,.4);text-decoration:none;font-size:.66rem}
.footer-links a:hover{color:var(--a3)}

/* ROLE DASHBOARD */
.dash-profile-hdr{background:linear-gradient(135deg,var(--p1),var(--p2));border-radius:var(--radius);padding:20px;display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.dash-avatar{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:800;color:#fff;flex-shrink:0;overflow:hidden}
.dash-avatar img{width:100%;height:100%;object-fit:cover}
.dash-profile-info{flex:1;min-width:0}
.dash-name{font-size:1rem;font-weight:800;color:#fff;line-height:1.2}
.dash-meta{display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap}
.dash-role-badge{background:var(--a3);color:var(--p1);font-size:.6rem;font-weight:800;padding:3px 9px;border-radius:50px;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.dash-profile-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.btn-dash-sm{padding:7px 14px;background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:7px;font-size:.72rem;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap;transition:all .18s}
.btn-dash-sm:hover{background:rgba(255,255,255,.25)}
.dash-tabs{display:flex;gap:4px;background:var(--n4);border-radius:9px;padding:4px;margin-bottom:14px;flex-wrap:wrap}
.dash-tab{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:7px;font-size:.76rem;font-weight:600;cursor:pointer;border:none;font-family:inherit;color:var(--n2);background:transparent;transition:all .18s;white-space:nowrap}
.dash-tab:hover{background:var(--w);color:var(--p1)}
.dash-tab.active{background:var(--w);color:var(--p1);box-shadow:0 1px 6px rgba(0,0,0,.08)}
.dash-tab svg{flex-shrink:0}
@media(max-width:520px){
  .dash-profile-hdr{gap:10px}
  .dash-profile-actions{width:100%;margin-left:0}
  .dash-tab span{display:none}
  .dash-tabs{gap:3px}
  .dash-tab{padding:8px 10px}
}
/* My Card inside dashboard */
.my-id-card{width:min(320px,100%);aspect-ratio:85.6/54;background:linear-gradient(135deg,#3a0e5e 0%,#5b2590 60%,#166534 100%);border-radius:11px;padding:12px 13px;display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(58,14,94,.35);margin:0 auto}
.invoice-table{width:100%;border-collapse:collapse;font-size:.8rem}
.invoice-table th{background:var(--n5);padding:9px 14px;text-align:left;font-size:.65rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--n3);border-bottom:1px solid var(--n4)}
.invoice-table td{padding:10px 14px;border-bottom:1px solid var(--n4);color:var(--n1)}
.invoice-table tr:last-child td{border-bottom:none}
.invoice-total td{font-weight:800;color:var(--p1);background:var(--p4);font-size:.88rem}


/* ── STAFF DASHBOARD FULL SCREEN ─────────────────────────────────────── */
.staff-layout{position:fixed;inset:0;z-index:800;display:flex;background:var(--n5);opacity:0;pointer-events:none;transition:opacity .3s}
.staff-layout.open{opacity:1;pointer-events:all}
/* Staff Sidebar */
.staff-sidebar{width:220px;background:var(--p1);flex-shrink:0;display:flex;flex-direction:column;height:100%;overflow-y:auto;transition:transform .25s;position:relative;z-index:1}
.staff-sb-brand{padding:22px 18px;border-bottom:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:14px}
.staff-sb-brand img{height:44px;width:auto}
.staff-sb-brand-fb{width:44px;height:44px;border-radius:9px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.staff-sb-brand-fb svg{stroke:#f5c518;fill:none;stroke-width:1.8;width:26px;height:26px}
.staff-sb-brand-text strong{font-size:1.05rem;font-weight:800;color:#fff;display:block;line-height:1.25;letter-spacing:.01em}
.staff-sb-brand-text span{font-size:.62rem;color:#f5c518;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.staff-sb-profile{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:10px}
.staff-sb-avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(245,197,24,.5);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--a3);font-size:.9rem;overflow:hidden;flex-shrink:0}
.staff-sb-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.staff-sb-profile-info{min-width:0}
.staff-sb-name{font-size:.78rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.staff-sb-role{font-size:.58rem;color:var(--a3);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-top:1px}
.staff-sb-memno{font-size:.52rem;color:rgba(255,255,255,.4);font-family:monospace;margin-top:1px}
.staff-nav{flex:1;padding:10px 0}
.staff-nav-section{padding:12px 16px 4px;font-size:.54rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.28)}
.staff-nav-item{display:flex;align-items:center;gap:9px;padding:9px 16px;font-size:.76rem;font-weight:500;color:rgba(255,255,255,.62);cursor:pointer;transition:all .18s;border-left:3px solid transparent;white-space:nowrap}
.staff-nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.staff-nav-item.on{background:rgba(255,255,255,.1);color:#fff;border-left-color:var(--a3)}
.staff-nav-item svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}
.staff-sb-footer{padding:12px 16px;border-top:1px solid rgba(255,255,255,.1)}
.staff-sb-footer p{font-size:.58rem;color:rgba(255,255,255,.28)}
/* Staff Main Area */
.staff-main{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.staff-topbar{background:#fff;border-bottom:1px solid var(--n4);height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;box-shadow:var(--sh);flex-shrink:0}
.staff-topbar-left{display:flex;align-items:center;gap:10px}
.staff-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--n2)}
.staff-menu-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}
.staff-page-title{font-size:.9rem;font-weight:700;color:var(--n0)}
.staff-topbar-right{display:flex;align-items:center;gap:8px}
.staff-content{flex:1;overflow-y:auto;padding:18px;background:var(--n5)}
/* Staff overlay (mobile) */
.staff-sb-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:0;display:none}
.staff-sb-overlay.show{display:block}
/* Card print area inside staff layout */
.staff-card-print{display:flex;justify-content:center;padding:12px 0}
/* Stats */
.staff-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.staff-stat{background:#fff;border-radius:9px;padding:14px;border:1px solid var(--n4);text-align:center;box-shadow:var(--sh)}
.staff-stat .sn{font-size:1.7rem;font-weight:800;color:var(--p1);line-height:1}
.staff-stat.g .sn{color:var(--g1)}
.staff-stat.a .sn{color:var(--a2)}
.staff-stat .sl{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--n3);margin-top:3px}
/* Staff table */
.staff-filter-sel{padding:6px 9px;border:1.5px solid var(--n4);border-radius:7px;font-size:.72rem;font-family:inherit;outline:none;background:#fff;color:var(--n1)}
.staff-tbl{background:#fff;border-radius:9px;border:1px solid var(--n4);overflow:hidden;box-shadow:var(--sh)}
.staff-tbl-top{padding:12px 16px;border-bottom:1px solid var(--n4);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.staff-tbl-top h3{font-size:.84rem;font-weight:700;color:var(--n0)}
.staff-tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.staff-tbl table{width:100%;border-collapse:collapse;min-width:480px}
.staff-tbl thead tr{background:var(--n5)}
.staff-tbl th{padding:8px 13px;font-size:.6rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--n3);text-align:left;border-bottom:1px solid var(--n4);white-space:nowrap}
.staff-tbl td{padding:9px 13px;font-size:.74rem;color:var(--n1);border-bottom:1px solid var(--n4);vertical-align:middle}
.staff-tbl tr:last-child td{border-bottom:none}
.staff-tbl tr:hover td{background:var(--n5)}
/* Card view in staff dash */
.staff-card-display{display:flex;justify-content:center;padding:8px 0 16px}
/* Password form */
.staff-pw-form{max-width:380px;background:#fff;border-radius:9px;padding:20px;border:1px solid var(--n4)}
/* Invoice view */
.staff-invoice{background:#fff;border-radius:9px;padding:20px;border:1px solid var(--n4);max-width:540px;box-sizing:border-box;overflow-x:hidden}
/* Responsive */
@media(max-width:768px){
  .staff-sidebar{position:absolute;top:0;left:0;bottom:0;z-index:2;transform:translateX(-100%);transition:transform .25s}
  .staff-sidebar.open{transform:translateX(0)}
  .staff-menu-btn{display:flex}
  .staff-stats{grid-template-columns:1fr 1fr}
  /* Topbar: three buttons + a page title genuinely don't fit a
     ~375px-wide phone screen in one row — collapse "Register Unit" to
     icon-only and shrink padding so the row stays on one line instead
     of silently overflowing (which made the dashboard look broken/cut
     off rather than just tight). */
  .staff-topbar{padding:0 10px;gap:6px}
  .staff-topbar-right{gap:4px}
  .staff-topbar-right .btn-outline span,
  .staff-topbar-right .btn-outline{font-size:0}
  .staff-topbar-right .btn-outline svg{font-size:initial;margin:0}
  .staff-page-title{font-size:.78rem;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:480px){
  .staff-stats{grid-template-columns:1fr}
  .staff-content{padding:12px}
  /* On the narrowest phones, drop the refresh icon button entirely —
     pull-to-refresh / browser refresh already covers this, and every
     pixel of topbar width matters at this size. */
  .staff-topbar-right .btn-sm-ghost[onclick*="loadDashboard"]{display:none}
}
/* PRINT: consolidated single block covering both print paths —
   .print-area (printOutput, used by the public registration success
   screen) and #staffPrintArea.printing (the staff dashboard's
   _doPrintStaffCard/printMyCard, which toggle the .printing class onto
   the element right before window.print() and remove it after). Each
   path only forces its own element visible, never the other's, so they
   can no longer stack on top of and blank out one another. */
@media print{
  html,body{margin:0!important;padding:0!important;background:#fff!important}
  body:not(.printing-report)>*:not(.print-area):not(#staffPrintArea){display:none!important}

  .print-area{display:flex!important;position:fixed;inset:0;background:#fff;align-items:center;justify-content:center}
  .print-area .id-card,.print-area .certificate{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  #staffPrintArea{display:none}
  #staffPrintArea.printing{
    display:flex!important;
    position:fixed!important;
    inset:0!important;
    background:#fff!important;
    align-items:center!important;
    justify-content:center!important;
    z-index:99999!important;
    width:100vw!important;
    height:100vh!important;
  }
  #staffPrintArea.printing *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important}
  #staffPrintArea.printing .id-card{
    width:85.6mm!important;
    height:54mm!important;
    border-radius:10px!important;
    box-shadow:none!important;
    flex-shrink:0!important;
  }
  #staffPrintArea.printing .certificate{
    width:180mm!important;
    max-width:180mm!important;
    padding:20mm!important;
  }

  /* Reports page print mode — toggled via the .printing-report class on
     <body> by printReport() right before window.print(), removed right
     after. Resets the fixed full-screen dashboard chrome to normal
     document flow so only the report content prints.

     Deliberately explicit rather than relying on the single blanket
     "hide every body child except X" rule above (which only applies
     when body does NOT have .printing-report) — that rule alone left
     every other top-level sibling of .staff-layout (the public landing
     page, toasts, every modal/overlay) with no print-mode override at
     all, so anything left in a visible JS-toggled state could blank out
     or push around the printed report depending on its own positioning. */
  body.printing-report{overflow:visible!important}
  body.printing-report .login-screen,
  body.printing-report .nav,
  body.printing-report .hero,
  body.printing-report .steps-wrap,
  body.printing-report .main,
  body.printing-report .footer,
  body.printing-report .overlay,
  body.printing-report .toast-wrap,
  body.printing-report #printArea,
  body.printing-report #staffPrintArea{display:none!important}
  body.printing-report .staff-layout{position:static!important;inset:auto!important;opacity:1!important;pointer-events:auto!important;display:block!important;height:auto!important;overflow:visible!important}
  body.printing-report .staff-sidebar,
  body.printing-report .staff-topbar,
  body.printing-report .staff-sb-overlay{display:none!important}
  body.printing-report .staff-content{padding:0!important;height:auto!important;overflow:visible!important;display:block!important}
  body.printing-report [id^="spage-"]:not(.print-target){display:none!important}
  body.printing-report .print-target{display:block!important;position:static!important}
  body.printing-report .print-target button,
  body.printing-report .print-target select{display:none!important}
  body.printing-report *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important}

  @page{margin:10mm;size:auto}
}