/* ── MezanCash Design System v6 ──────────────────────── */
:root{
  /* Lighter background palette */
  --brand:#05D890;--brand-dark:#03A86E;--brand-dim:rgba(5,216,144,0.09);
  --brand-glow:rgba(5,216,144,0.20);--brand-border:rgba(5,216,144,0.22);
  --bg:#F5F7FA;--s1:#FFFFFF;--s2:#FFFFFF;--s3:#F0F3F8;--s4:#E8EDF5;--s5:#D8E0EE;
  --t1:#0D1526;--t2:#5A6480;--t3:#9AA3BB;
  --b1:rgba(13,21,38,0.07);--b2:rgba(13,21,38,0.11);--b3:rgba(13,21,38,0.18);
  --red:#FF4560;--red-d:rgba(255,69,96,0.10);
  --amber:#F59E0B;--amb-d:rgba(245,158,11,0.10);
  --blue:#4B9EFF;--blue-d:rgba(75,158,255,0.10);
  --violet:#9B7EFF;--vio-d:rgba(155,126,255,0.10);
  --pink:#F06ABA;--pink-d:rgba(240,106,186,0.10);
  --r1:8px;--r2:12px;--r3:18px;--r4:24px;--r5:32px;
  --font:'Inter',system-ui,sans-serif;--font2:'Space Grotesk',sans-serif;
  --shadow:0 8px 48px rgba(0,0,0,0.45);
  --shadow-brand:0 0 48px rgba(5,216,144,0.12);
  --ease:cubic-bezier(0.4,0,0.2,1);--spring:cubic-bezier(0.34,1.3,0.64,1);
  --sidebar:240px;--topbar:60px;--nav-mob:0px;
}

html{
  -webkit-tap-highlight-color:transparent;
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  /* Prevent rubber-band scroll bounce on iOS */
  height:100%;
}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--t1);
  /* Base font 15px — slightly larger than before */
  font-size:15px;
  line-height:1.65;
  min-height:100dvh;
  overflow-x:hidden;
  /* Prevent overscroll bounce */
  overscroll-behavior-y:contain;
  height:100%;
}
body{animation:pi .22s ease both}
@keyframes pi{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
a{color:var(--brand);text-decoration:none;transition:opacity .15s}
a:hover{opacity:.8}
button,input,select,textarea{font-family:var(--font)}
img{max-width:100%;display:block}
h1,h2,h3,h4,h5{font-family:var(--font2);font-weight:700;line-height:1.25;color:var(--t1)}
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--s5);border-radius:4px}

/* ── Layout ───────────────────────────────────────────── */
.sidebar{display:none;width:var(--sidebar);flex-shrink:0;background:#FFFFFF;border-right:1px solid var(--b2);position:fixed;top:0;left:0;bottom:0;z-index:200;flex-direction:column;overflow-y:auto}
.main-area{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:none;height:var(--topbar);background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--b2);align-items:center;padding:0 32px;gap:16px;position:sticky;top:0;z-index:100}
.app-bar{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);border-bottom:1px solid rgba(5,216,144,0.15);padding:0 14px;height:56px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 8px rgba(13,21,38,0.07)}
.page-wrap{flex:1;padding:14px 16px 28px}
.bottom-nav{display:none}

@media(min-width:900px){
  .sidebar{display:flex}
  .app-bar{display:none!important}
  .topbar{display:flex}
  .main-area{margin-left:var(--sidebar)}
  .page-wrap{padding:28px 36px;max-width:900px}
  .page-wrap.wide{max-width:100%}
  .quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:4px}
  .stats-row{grid-template-columns:repeat(4,1fr)}
  .hide-desktop{display:none!important}
}
@media(max-width:899px){.hide-mobile{display:none!important}}

/* ── Sidebar ──────────────────────────────────────────── */
.sb-header{padding:18px 18px 12px;border-bottom:1px solid var(--b1)}
.sb-logo{font-family:var(--font2);font-size:1.25rem;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:8px}
.sb-logo-dot{width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 14px var(--brand-glow)}
.sb-user{margin-top:10px;padding:10px 12px;background:var(--s3);border-radius:var(--r2);border:1px solid var(--b1)}
.sb-user-name{font-size:.85rem;font-weight:600;color:var(--t1)}
.sb-user-tag{font-size:.74rem;color:var(--brand);margin-top:1px}
.sb-balance{font-family:var(--font2);font-size:.98rem;font-weight:700;color:var(--t1);margin-top:6px}
.sb-section{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);padding:14px 18px 5px}
.sb-link{display:flex;align-items:center;gap:10px;padding:9px 18px;font-size:.86rem;font-weight:500;color:var(--t2);border-left:2px solid transparent;transition:all .15s}
.sb-link:hover{color:var(--t1);background:var(--s3);opacity:1}
.sb-link.active{color:var(--brand);background:var(--brand-dim);border-left-color:#047a52}
.sb-link-icon{width:16px;text-align:center;font-size:.9rem}
.sb-badge{margin-left:auto;background:var(--red);color:#fff;font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:20px;min-width:18px;text-align:center}

/* ── Topbar ───────────────────────────────────────────── */
.topbar-logo{font-family:var(--font2);font-size:1.1rem;font-weight:700;display:flex;align-items:center;gap:6px}
.topbar-logo-dot{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.topbar-search{flex:1;max-width:300px;background:var(--s2);border:1px solid var(--b2);border-radius:var(--r2);padding:8px 14px;color:var(--t1);font-size:.84rem;outline:none;transition:border-color .2s}
.topbar-search:focus{border-color:#047a52}
.topbar-search::placeholder{color:var(--t3)}

/* ── App bar (mobile top) ─────────────────────────────── */
.app-bar-logo{font-family:var(--font2);font-size:1.08rem;font-weight:700;color:var(--t1);flex:1}
.back-btn{width:36px;height:36px;border-radius:var(--r2);background:var(--s3);border:1px solid var(--b2);display:flex;align-items:center;justify-content:center;color:var(--t1);font-size:.88rem;cursor:pointer;flex-shrink:0;transition:all .15s}
.back-btn:hover{background:var(--s4)}
.app-bar-title{font-family:var(--font2);font-size:.96rem;font-weight:700;flex:1;text-align:center}

/* ── Bottom nav (mobile) ──────────────────────────────── */
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--t3);transition:color .2s;position:relative;padding:0 4px}
.nav-item.active{color:#047a52}
.nav-item-icon{font-size:1.2rem;transition:transform .2s var(--spring)}
.nav-item.active .nav-item-icon{transform:scale(1.12)}
.nav-item-label{font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.nav-badge{position:absolute;top:5px;right:14px;width:7px;height:7px;background:var(--red);border-radius:50%;border:1.5px solid var(--bg)}

/* ── Buttons ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--font);font-size:.86rem;font-weight:600;border:none;border-radius:var(--r2);cursor:pointer;padding:11px 20px;transition:all .18s var(--ease);white-space:nowrap;position:relative;overflow:hidden}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--brand);color:#000}
.btn-primary:hover{background:#07f5a0}
.btn-danger{background:var(--red-d);color:var(--red);border:1px solid rgba(255,69,96,0.2)}
.btn-danger:hover{background:rgba(255,69,96,.18)}
.btn-secondary{background:var(--s3);color:var(--t1);border:1px solid var(--b2)}
.btn-ghost{background:transparent;color:var(--t2);border:1px solid var(--b2)}
.btn-ghost:hover{color:var(--t1);border-color:var(--b3);background:var(--s3)}
.btn-brand-outline{background:var(--brand-dim);color:var(--brand);border:1px solid var(--brand-border)}
.btn-full{width:100%}
.btn-sm{padding:7px 14px;font-size:.78rem;border-radius:var(--r1)}
.btn-lg{padding:14px 28px;font-size:.92rem;border-radius:var(--r3)}
.btn-xl{padding:16px 32px;font-size:1rem;border-radius:var(--r3)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ── Forms ────────────────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t2);margin-bottom:7px}
.form-control{width:100%;background:var(--s2);border:1px solid var(--b2);border-radius:var(--r2);color:var(--t1);font-family:var(--font);font-size:.88rem;padding:12px 14px;outline:none;transition:border-color .18s,box-shadow .18s;-webkit-appearance:none}
.form-control:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-dim)}
.form-control::placeholder{color:var(--t3)}
.form-control option{background:var(--s3);color:var(--t1)}
.form-hint{font-size:.72rem;color:var(--t3);margin-top:5px;line-height:1.4}
.form-error{font-size:.72rem;color:var(--red);margin-top:5px}
.input-wrap{position:relative}
.input-wrap .form-control{padding-left:38px}
.input-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:.88rem;pointer-events:none}
.upload-zone{border:1.5px dashed var(--b3);border-radius:var(--r2);padding:26px 16px;text-align:center;cursor:pointer;background:var(--s2);transition:all .2s}
.upload-zone:hover{border-color:var(--brand);background:var(--brand-dim)}
.upload-zone-icon{font-size:1.6rem;margin-bottom:8px}
.upload-zone-text{font-size:.82rem;color:var(--t2)}
.upload-zone-hint{font-size:.72rem;color:var(--t3);margin-top:4px}
.upload-preview{max-height:80px;margin:10px auto 0;border-radius:var(--r1)}

/* ── Cards ────────────────────────────────────────────── */
.card{background:var(--s2);border:1px solid var(--b1);border-radius:var(--r3);padding:20px}
.card-sm{padding:14px 16px;border-radius:var(--r2)}
.section-eyebrow{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-bottom:10px}
.section-title{font-family:var(--font2);font-size:1rem;font-weight:700;color:var(--t1)}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.section-link{font-size:.76rem;color:var(--brand);font-weight:600}

/* ── Balance card ─────────────────────────────────────── */
.balance-card{background:linear-gradient(135deg,#05D890 0%,#04C882 50%,#02A86D 100%);border:1px solid rgba(5,216,144,0.3);border-radius:var(--r4);padding:24px;position:relative;overflow:hidden;box-shadow:0 8px 40px rgba(5,216,144,0.35),0 0 0 1px rgba(255,255,255,0.15) inset;transition:box-shadow .3s,transform .3s}
.balance-card:hover{box-shadow:0 12px 60px rgba(5,216,144,0.5),0 0 0 1px rgba(255,255,255,0.2) inset;transform:translateY(-2px)}
.balance-card::before{content:'';position:absolute;top:-40px;right:-40px;width:220px;height:220px;background:radial-gradient(circle,rgba(255,255,255,0.18),transparent 70%);pointer-events:none}
.bal-eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(0,50,30,0.65);margin-bottom:8px}
.bal-amount{font-family:var(--font2);font-size:2.9rem;font-weight:800;color:#002818;letter-spacing:-.03em;line-height:1;margin-bottom:6px}
.bal-amount sup{font-size:1.1rem;vertical-align:super;opacity:.7}
.bal-tag{font-size:.8rem;color:rgba(0,50,30,0.6);margin-bottom:14px}
.bal-tag strong{color:#047a52}
.bal-change{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:20px}
.bal-change.up{background:rgba(5,216,144,0.12);color:#047a52}
.bal-change.dn{background:rgba(255,69,96,0.12);color:var(--red)}

/* ── Virtual card ─────────────────────────────────────── */
.vcard{background:linear-gradient(135deg,#0F1628 0%,#161E34 50%,#0A1020 100%);border:1px solid rgba(255,255,255,0.07);border-radius:var(--r4);padding:22px;position:relative;overflow:hidden;aspect-ratio:1.586;transition:transform .3s var(--spring)}
.vcard:hover{transform:scale(1.01)}
.vcard::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(5,216,144,0.04),transparent 60%)}
.vcard-chip{width:34px;height:26px;border-radius:4px;border:1px solid rgba(255,255,255,0.15);margin-bottom:18px;display:grid;grid-template-columns:1fr;padding:3px}
.vcard-chip-inner{background:rgba(255,255,255,0.08);border-radius:2px}
.vcard-number{font-family:var(--font2);font-size:.9rem;letter-spacing:.22em;color:var(--t1);margin-bottom:16px}
.vcard-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.vcard-label{font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,0.32);margin-bottom:3px}
.vcard-value{font-size:.8rem;font-weight:600;color:var(--t1);letter-spacing:.03em}
.vcard-network{font-family:var(--font2);font-size:.98rem;font-weight:700;color:var(--brand);letter-spacing:.02em}
.vcard-status{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:4px;font-size:.62rem;font-weight:700;padding:3px 9px;border-radius:20px}
.vcard-status.active{background:rgba(5,216,144,0.12);color:#047a52}
.vcard-status.frozen{background:rgba(75,158,255,0.12);color:var(--blue)}

/* ── Quick actions ────────────────────────────────────── */
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:4px}
.quick-btn{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;cursor:pointer;background:none;border:none;padding:6px 2px}
.quick-icon{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s}
.quick-btn:hover .quick-icon,.quick-btn:active .quick-icon{transform:scale(1.1)}
.quick-icon.green{background:rgba(5,216,144,0.14);color:#047a52}
.quick-icon.blue{background:rgba(75,158,255,0.14);color:var(--blue)}
.quick-icon.amber{background:rgba(245,158,11,0.14);color:var(--amber)}
.quick-icon.violet{background:rgba(155,126,255,0.14);color:var(--violet)}
.quick-icon.red{background:rgba(255,69,96,0.14);color:var(--red)}
.quick-icon.pink{background:rgba(240,106,186,0.14);color:var(--pink)}
.quick-icon.brand{background:var(--brand-dim);color:#047a52}
.quick-icon.neutral{background:var(--s4);color:var(--t2)}
.quick-label{font-size:.7rem;font-weight:600;color:var(--t2);text-align:center;letter-spacing:.01em;margin-top:2px}

/* ── Amount input ─────────────────────────────────────── */
.amount-wrap{background:var(--s3);border:1.5px solid var(--b2);border-radius:var(--r3);padding:18px 20px;transition:border-color .2s;display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.amount-wrap:focus-within{border-color:#047a52}
.amount-input{background:none;border:none;outline:none;font-family:var(--font2);font-size:2rem;font-weight:700;color:var(--t1);width:100%;caret-color:#047a52}
.amount-symbol{font-family:var(--font2);font-size:1.4rem;font-weight:700;color:var(--t3);margin-right:4px}
.amount-hint{font-size:.74rem;color:var(--t3)}

/* ── Transaction list ─────────────────────────────────── */
.tx-list{display:flex;flex-direction:column;gap:2px}
.tx-item{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--b1);transition:background .15s;border-radius:var(--r1)}
.tx-item:last-child{border-bottom:none}
.tx-item:hover{background:var(--s3);padding-left:8px;padding-right:8px}
.tx-avatar{width:38px;height:38px;border-radius:50%;background:var(--s3);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;border:1px solid var(--b2)}
.tx-info{flex:1;min-width:0}
.tx-name{font-size:.86rem;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-sub{font-size:.74rem;color:var(--t3);margin-top:1px}
.tx-right{text-align:right;flex-shrink:0}
.tx-amount{font-family:var(--font2);font-size:.92rem;font-weight:700}
.tx-amount.pos{color:#047a52}
.tx-amount.neg{color:var(--t1)}
.tx-status{font-size:.68rem;color:var(--t3);margin-top:2px}
.tx-status.pending{color:var(--amber)}
.tx-status.failed{color:var(--red)}

/* ── Stat cards ───────────────────────────────────────── */
.stats-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}
.stat-card{background:var(--s2);border:1px solid var(--b1);border-radius:var(--r3);padding:16px}
.stat-num{font-family:var(--font2);font-size:1.5rem;font-weight:800;margin-bottom:3px}
.stat-lbl{font-size:.72rem;color:var(--t3)}
.stat-card.brand{background:rgba(5,216,144,0.07);border-color:var(--brand-border)}.stat-card.brand .stat-num{color:#047a52}
.stat-card.blue{background:rgba(75,158,255,0.07);border-color:rgba(75,158,255,0.2)}.stat-card.blue .stat-num{color:var(--blue)}
.stat-card.amber{background:rgba(245,158,11,0.07);border-color:rgba(245,158,11,0.2)}.stat-card.amber .stat-num{color:var(--amber)}
.stat-card.red{background:rgba(255,69,96,0.07);border-color:rgba(255,69,96,0.2)}.stat-card.red .stat-num{color:var(--red)}
.stat-card.violet{background:rgba(155,126,255,0.07);border-color:rgba(155,126,255,0.2)}.stat-card.violet .stat-num{color:var(--violet)}
.stat-card.pink{background:rgba(240,106,186,0.07);border-color:rgba(240,106,186,0.2)}.stat-card.pink .stat-num{color:var(--pink)}
.stat-card.neutral{background:var(--s3);border-color:var(--b2)}.stat-card.neutral .stat-num{color:var(--t1)}

/* ── Badges ───────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:.68rem;font-weight:700;letter-spacing:.03em}
.badge-success{background:rgba(5,216,144,0.12);color:#047a52}
.badge-warning{background:rgba(245,158,11,0.12);color:var(--amber)}
.badge-danger{background:rgba(255,69,96,0.12);color:var(--red)}
.badge-info{background:rgba(75,158,255,0.12);color:var(--blue)}
.badge-neutral{background:var(--s4);color:var(--t2)}
.badge-brand{background:var(--brand-dim);color:var(--brand);border:1px solid var(--brand-border)}

/* ── Alerts ───────────────────────────────────────────── */
.alert{padding:13px 16px;border-radius:var(--r2);font-size:.84rem;line-height:1.5;margin-bottom:16px;border:1px solid transparent}
.alert-success{background:rgba(5,216,144,0.09);border-color:var(--brand-border);color:#047a52}
.alert-danger{background:rgba(255,69,96,0.09);border-color:rgba(255,69,96,0.22);color:#cc1733}
.alert-warning{background:rgba(245,158,11,0.09);border-color:rgba(245,158,11,0.22);color:var(--amber)}
.alert-info{background:rgba(75,158,255,0.09);border-color:rgba(75,158,255,0.22);color:var(--blue)}

/* ── Fee breakdown ────────────────────────────────────── */
.fee-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--b1)}
.fee-row:last-child{border-bottom:none}
.fee-label{font-size:.8rem;color:var(--t2)}
.fee-val{font-size:.86rem;font-weight:600;color:var(--t1);font-family:var(--font2)}
.fee-highlight{color:var(--amber)}
.fee-total{font-size:.92rem;font-weight:700;color:var(--t1);font-family:var(--font2)}

/* ── Steps ────────────────────────────────────────────── */
.steps{display:flex;gap:0;margin-bottom:24px}
.step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px;position:relative}
.step::after{content:'';position:absolute;top:15px;left:calc(50% + 14px);right:calc(-50% + 14px);height:1px;background:var(--b2)}
.step:last-child::after{display:none}
.step-dot{width:30px;height:30px;border-radius:50%;background:var(--s3);border:1.5px solid var(--b2);display:flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:700;color:var(--t3);margin-bottom:8px;transition:all .2s;position:relative;z-index:1}
.step.active .step-dot{background:var(--brand-dim);border-color:var(--brand);color:#047a52}
.step.done .step-dot{background:var(--brand);border-color:var(--brand);color:#000}
.step-label{font-size:.7rem;color:var(--t3);font-weight:500}
.step.active .step-label{color:#047a52}
.step.done .step-label{color:var(--t2)}

/* ── Modals ───────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.78);backdrop-filter:blur(8px);z-index:500;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-sheet{background:#FFFFFF;border:1px solid var(--b2);border-radius:var(--r4) var(--r4) 0 0;padding:24px 20px calc(20px + env(safe-area-inset-bottom,0px));width:100%;max-width:520px;max-height:92dvh;overflow-y:auto;transform:translateY(100%);transition:transform .3s var(--ease)}
.modal-overlay.open .modal-sheet{transform:translateY(0)}
.modal-handle{width:36px;height:4px;background:var(--b3);border-radius:2px;margin:0 auto 18px}
.modal-title{font-family:var(--font2);font-size:1.08rem;font-weight:700;color:var(--t1);margin-bottom:18px}
@media(min-width:900px){.modal-overlay{align-items:center}.modal-sheet{border-radius:var(--r4);max-width:480px}}

/* ── PIN pad ──────────────────────────────────────────── */
.pin-display{display:flex;justify-content:center;gap:14px;margin-bottom:24px}
.pin-dot{width:14px;height:14px;border-radius:50%;background:var(--s4);border:1.5px solid var(--b3);transition:all .15s}
.pin-dot.filled{background:var(--brand);border-color:var(--brand);box-shadow:0 0 10px var(--brand-glow)}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:260px;margin:0 auto}
.pin-key{height:58px;background:var(--s3);border:1px solid var(--b2);border-radius:var(--r2);font-family:var(--font2);font-size:1.2rem;font-weight:700;color:var(--t1);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;-webkit-tap-highlight-color:transparent;user-select:none}
.pin-key:active{background:var(--s5);transform:scale(.94)}
.pin-key.del{font-size:.9rem}

/* ── Tab bar ──────────────────────────────────────────── */
.tab-bar{display:flex;gap:3px;background:var(--s3);border-radius:var(--r2);padding:4px;margin-bottom:20px;border:1px solid var(--b1)}
.tab-btn{flex:1;padding:9px 10px;border-radius:var(--r1);border:none;background:transparent;color:var(--t3);font-family:var(--font);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.tab-btn.active{background:var(--s4);color:var(--t1)}

/* ── KYC / Upload zone ────────────────────────────────── */
.kyc-steps{display:flex;gap:0;margin-bottom:20px}

/* ── Auth page ────────────────────────────────────────── */
.auth-page{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:32px 20px;max-width:420px;margin:0 auto}
.auth-logo{font-family:var(--font2);font-size:1.75rem;font-weight:700;text-align:center;margin-bottom:4px;color:var(--t1);display:flex;align-items:center;justify-content:center;gap:9px}
.auth-logo-dot{width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 14px var(--brand-glow)}
.auth-sub{text-align:center;font-size:.86rem;color:var(--t2);margin-bottom:32px}
.divider{text-align:center;color:var(--t3);font-size:.76rem;margin:18px 0;display:flex;align-items:center;gap:10px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--b2)}

/* ── Prose ────────────────────────────────────────────── */
.prose h2{font-size:1.02rem;margin:24px 0 9px}
.prose h3{font-size:.9rem;margin:18px 0 7px;color:var(--t2)}
.prose p{font-size:.85rem;color:var(--t2);margin-bottom:12px;line-height:1.75}
.prose ul{font-size:.85rem;color:var(--t2);margin-bottom:12px;padding-left:18px}
.prose ul li{margin-bottom:4px}
.prose a{color:#047a52}

/* ── Admin table ──────────────────────────────────────── */
.admin-table{width:100%;border-collapse:collapse;font-size:.82rem}
.admin-table th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--b2);font-size:.67rem;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);font-weight:700;white-space:nowrap}
.admin-table td{padding:12px 12px;border-bottom:1px solid var(--b1);vertical-align:middle}
.admin-table tr:hover td{background:var(--s3)}

/* ── Utils ────────────────────────────────────────────── */
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}
.items-start{align-items:flex-start}.justify-between{justify-content:space-between}
.justify-center{justify-content:center}.flex-1{flex:1}.flex-wrap{flex-wrap:wrap}
.ml-auto{margin-left:auto}
.gap-1{gap:6px}.gap-2{gap:12px}.gap-3{gap:18px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:20px}.mt-4{margin-top:28px}
.mb-1{margin-bottom:6px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:20px}
.text-center{text-align:center}.text-right{text-align:right}
.fw-6{font-weight:600}.fw-7{font-weight:700}
.text-sm{font-size:.8rem}.text-xs{font-size:.72rem}
.text-brand{color:#047a52}.text-muted{color:var(--t2)}.text-faint{color:var(--t3)}
.text-amber{color:var(--amber)}.text-red{color:var(--red)}.text-blue{color:var(--blue)}
.pointer{cursor:pointer}.select-none{user-select:none}
.mono{font-family:var(--font2)}
.fw-7{font-weight:700}
.mb-0{margin-bottom:0!important}

/* ── Skeleton loader ──────────────────────────────────── */
.skeleton{background:linear-gradient(90deg,var(--s3) 0%,var(--s4) 50%,var(--s3) 100%);background-size:200%;animation:sk 1.4s ease infinite;border-radius:var(--r1)}
@keyframes sk{0%{background-position:200%}100%{background-position:-200%}}

/* ── Toast ────────────────────────────────────────────── */
.toast-wrap{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:999;display:flex;flex-direction:column;gap:8px;width:calc(100% - 32px);max-width:420px;pointer-events:none}

.toast{padding:12px 16px;border-radius:var(--r2);font-size:.84rem;font-weight:500;display:flex;align-items:center;gap:10px;pointer-events:all;backdrop-filter:blur(16px);animation:toast-in .25s var(--spring) both;box-shadow:0 8px 32px rgba(0,0,0,0.4)}
@keyframes toast-in{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}}
.toast.success{background:rgba(5,216,144,0.12);border:1px solid var(--brand-border);color:#047a52}
.toast.error{background:rgba(255,69,96,0.10);border:1px solid rgba(255,69,96,.25);color:#cc1733}
.toast.info{background:rgba(75,158,255,0.10);border:1px solid rgba(75,158,255,.25);color:#1a6fd4}

/* ── Referral ─────────────────────────────────────────── */
.ref-card{background:linear-gradient(135deg,var(--s2),var(--s3));border:1px solid var(--b1);border-radius:var(--r3);padding:20px}
.ref-code{font-family:var(--font2);font-size:1.4rem;font-weight:800;color:var(--brand);letter-spacing:.08em;text-align:center;padding:14px;background:var(--brand-dim);border-radius:var(--r2);border:1px solid var(--brand-border);margin:14px 0}

/* ── Mobile-specific ──────────────────────────────────── */
@media(max-width:899px){
  .hide-mobile{display:none!important}
  .page-wrap{flex:1;padding:14px 16px 28px}
}
@media(max-width:380px){
  .quick-icon{width:46px;height:46px}
  .quick-label{font-size:.6rem}
}

/* ── Smooth rendering ─────────────────────────────────── */
.balance-card,.vcard,.card,.modal-sheet,.sidebar,.app-bar,.topbar{-webkit-transform:translateZ(0);transform:translateZ(0)}
.app-bar,.topbar,.bottom-nav,.modal-overlay{
  -webkit-backface-visibility:hidden;backface-visibility:hidden
}

/* ── Tap highlight fix ────────────────────────────────── */
a,button,.quick-btn,.nav-item,.pin-key{-webkit-tap-highlight-color:transparent}

/* ── Scrollbar track ──────────────────────────────────── */
.modal-sheet::-webkit-scrollbar{width:3px}
.modal-sheet::-webkit-scrollbar-thumb{background:var(--s5);border-radius:4px}

/* ── v5 feature additions ─────────────────────────────── */
.vcard-mini{width:36px;height:22px;background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid rgba(255,255,255,.15);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#047a52}
.vcard-mini.frozen{color:var(--blue)}
.balance-card .bal-meta{display:flex;align-items:center;justify-content:space-between;margin-top:10px;flex-wrap:wrap;gap:6px}
.balance-card .bal-stats{display:flex;gap:8px;font-size:.72rem;color:rgba(0,40,25,0.55)}
.savings-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;font-size:.7rem;font-weight:700}
.savings-pill.usd{background:rgba(5,216,144,0.12);color:#047a52}
.savings-pill.htg{background:rgba(155,126,255,0.12);color:var(--violet)}

/* ── Light theme specific fixes ───────────────────────── */

/* Shadow needs to be softer on light bg */
.card { box-shadow: 0 1px 4px rgba(13,21,38,0.06); }

.modal-sheet { box-shadow: 0 -8px 40px rgba(13,21,38,0.12); }

/* Sidebar active state */
.sb-link.active { background: rgba(5,216,144,0.08); color: var(--brand); border-left-color: var(--brand); }
.sb-link:hover  { background: var(--s3); color: var(--t1); }

/* Bottom nav text needs to be dark on white */
.nav-item { color: var(--t3); }
.nav-item.active { color: var(--brand); }

/* Pin pad keys */
.pin-key { color: var(--t1); }

/* Form controls on white */
.form-control { color: var(--t1); }
.form-control:focus { border-color: var(--brand); }

/* Alert text dark enough on light bg */
.alert-success { color: #047a52; }
.alert-danger  { color: #cc1733; }
.alert-warning { color: #92680a; }
.alert-info    { color: #1a6fd4; }

/* Tab bar active */
.tab-btn.active { background: #FFFFFF; color: var(--t1); box-shadow: 0 1px 4px rgba(13,21,38,0.1); }
.tab-btn { color: var(--t3); }

/* Topbar on light */
.topbar, .app-bar { box-shadow: 0 1px 12px rgba(13,21,38,0.10); border-bottom: 1px solid rgba(5,216,144,0.15) !important; }

/* Quick action labels dark */
.quick-label { color: var(--t2); }

/* Transaction items */
.tx-name { color: var(--t1); }
.tx-sub  { color: var(--t3); }

/* Skeleton on light */
.skeleton { background: linear-gradient(90deg, var(--s3) 0%, var(--s4) 50%, var(--s3) 100%); }

/* Auth page white */
.auth-page { background: var(--bg); }

/* ── v7 additions ─────────────────────────────────────── */

/* Gold color for referrals */
:root { --gold:#F5C842; --teal:#0DCFB8; }
.quick-icon.gold { background:rgba(245,200,66,0.14); color:#d4a800; }
.quick-icon.teal { background:rgba(13,207,184,0.14); color:var(--teal); }
.text-gold { color:var(--gold); }

/* Neon hover effect on cards */
.neon-hover { transition: box-shadow .25s, border-color .25s, transform .2s; }
.neon-hover:hover {
  box-shadow: 0 0 0 1px rgba(5,216,144,0.3), 0 4px 24px rgba(5,216,144,0.15);
  border-color: rgba(5,216,144,0.3) !important;
  transform: translateY(-1px);
}

/* Quick action neon glow on hover */
.quick-btn:hover .quick-icon.green  { box-shadow: 0 0 16px rgba(5,216,144,0.4); }
.quick-btn:hover .quick-icon.blue   { box-shadow: 0 0 16px rgba(75,158,255,0.4); }
.quick-btn:hover .quick-icon.violet { box-shadow: 0 0 16px rgba(155,126,255,0.4); }
.quick-btn:hover .quick-icon.amber  { box-shadow: 0 0 16px rgba(245,158,11,0.4); }
.quick-btn:hover .quick-icon.gold   { box-shadow: 0 0 16px rgba(245,200,66,0.4); }
.quick-btn:hover .quick-icon.teal   { box-shadow: 0 0 16px rgba(13,207,184,0.4); }
.quick-btn:hover .quick-icon.neutral{ box-shadow: 0 0 16px rgba(90,100,128,0.25); }

/* Button neon glow */
.btn-primary { box-shadow: 0 2px 12px rgba(5,216,144,0.25); }
.btn-primary:hover { box-shadow: 0 0 24px rgba(5,216,144,0.45); }

/* Balance card hover */
.balance-card:hover {
  box-shadow: 0 14px 60px rgba(5,216,144,0.5), 0 0 0 1px rgba(255,255,255,0.2) inset;
  transform: translateY(-2px);
}

/* Sidebar links neon hover */
.sb-link:hover {
  color: var(--t1);
  background: rgba(5,216,144,0.07);
  border-left-color: var(--brand);
  box-shadow: inset 3px 0 0 var(--brand), inset 0 0 20px rgba(5,216,144,0.05);
}
.sb-link.active {
  color: var(--brand);
  background: rgba(5,216,144,0.08);
  border-left-color: var(--brand);
  box-shadow: inset 3px 0 0 var(--brand);
}

/* Transaction items neon on hover */
.tx-item:hover {
  background: rgba(5,216,144,0.04);
  box-shadow: inset 3px 0 0 var(--brand);
}

/* App bar subtle green border bottom */
.app-bar { border-bottom: 1px solid rgba(5,216,144,0.12) !important; }
.topbar  { border-bottom: 1px solid rgba(5,216,144,0.1) !important; }

/* Exchange modal direction buttons */
#exchange-modal .btn-primary { background: var(--brand); color:#000; }