/* OyaSend Design System v2 — Futuristic Dark Fintech */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --brand:#05D890;--brand-dark:#03A86E;--brand-dim:rgba(5,216,144,0.08);
  --brand-glow:rgba(5,216,144,0.18);--brand-border:rgba(5,216,144,0.20);
  --bg:#060810;--s1:#0A0D18;--s2:#0F1220;--s3:#141828;--s4:#1A1F30;--s5:#212640;
  --t1:#EEF2FF;--t2:#7480A0;--t3:#3A4460;
  --b1:rgba(238,242,255,0.05);--b2:rgba(238,242,255,0.09);--b3:rgba(238,242,255,0.14);
  --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.55);
  --shadow-brand:0 0 48px rgba(5,216,144,0.10);
  --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:62px;
}
html{-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:var(--bg);color:var(--t1);font-size:14px;line-height:1.65;min-height:100dvh;overflow-x:hidden}
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 */
.app-shell{display:flex;min-height:100dvh}
.sidebar{display:none;width:var(--sidebar);flex-shrink:0;background:var(--s1);border-right:1px solid var(--b1);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(6,8,16,0.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--b1);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(6,8,16,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--b1);padding:0 16px;height:56px;display:flex;align-items:center;gap:12px}
.page-wrap{flex:1;padding:18px 16px calc(var(--nav-mob) + 16px)}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-mob);background:rgba(10,13,24,0.97);backdrop-filter:blur(24px);border-top:1px solid var(--b1);display:flex;z-index:200;padding-bottom:env(safe-area-inset-bottom,0px)}

@media(min-width:900px){
  .sidebar{display:flex}
  .bottom-nav,.app-bar{display:none}
  .topbar{display:flex}
  .main-area{margin-left:var(--sidebar)}
  .page-wrap{padding:32px 40px;max-width:1100px}
  .page-wrap.wide{max-width:100%}
  .quick-grid{grid-template-columns:repeat(6,1fr)}
  .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:22px 18px 16px;border-bottom:1px solid var(--b1);margin-bottom:6px}
.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:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 12px 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:.8rem;font-weight:600;color:var(--t1)}
.sb-user-tag{font-size:.7rem;color:var(--brand);margin-top:1px}
.sb-balance{font-family:var(--font2);font-size:.95rem;font-weight:700;color:var(--t1);margin-top:6px}
.sb-section{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);padding:12px 18px 5px}
.sb-link{display:flex;align-items:center;gap:10px;padding:8px 18px;font-size:.83rem;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:var(--brand)}
.sb-link-icon{width:15px;text-align:center;font-size:.85rem}
.sb-badge{margin-left:auto;background:var(--red);color:#fff;font-size:.58rem;font-weight:700;padding:2px 6px;border-radius:20px;min-width:18px;text-align:center}
.sb-footer{margin-top:auto;padding:14px 18px;border-top:1px solid var(--b1)}

/* App bar */
.app-bar-logo{font-family:var(--font2);font-size:1.05rem;font-weight:700;color:var(--t1);flex:1}
.app-bar-logo span{color:var(--brand)}
.back-btn{width:34px;height:34px;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:.85rem;cursor:pointer;flex-shrink:0;transition:all .15s}
.back-btn:hover{background:var(--s4);color:var(--brand)}
.app-bar-title{font-family:var(--font2);font-size:.93rem;font-weight:700;flex:1;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 span{color: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:.82rem;outline:none;transition:border-color .2s}
.topbar-search:focus{border-color:var(--brand)}
.topbar-search::placeholder{color:var(--t3)}
.topbar-right{display:flex;align-items:center;gap:10px;margin-left:auto}

/* Bottom nav */
.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:var(--brand)}
.nav-item-icon{font-size:1.15rem;transition:transform .2s var(--spring)}
.nav-item.active .nav-item-icon{transform:scale(1.1)}
.nav-item-label{font-size:.58rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.nav-item-dot{position:absolute;top:5px;width:14px;height:2px;border-radius:2px;background:var(--brand);box-shadow:0 0 8px var(--brand-glow);opacity:0;transition:opacity .2s}
.nav-item.active .nav-item-dot{opacity:1}
.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:.83rem;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:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{background:var(--brand);color:#000;font-weight:700;box-shadow:0 0 24px var(--brand-glow)}
.btn-primary:hover{background:var(--brand-dark)}
.btn-secondary{background:var(--s3);color:var(--t1);border:1px solid var(--b2)}
.btn-secondary:hover{background:var(--s4);border-color:var(--b3)}
.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-danger{background:var(--red-d);color:var(--red);border:1px solid rgba(255,69,96,0.22)}
.btn-danger:hover{background:rgba(255,69,96,0.18)}
.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:.76rem;border-radius:var(--r1)}
.btn-lg{padding:14px 28px;font-size:.9rem;border-radius:var(--r3)}
.btn-xl{padding:16px 32px;font-size:1rem;border-radius:var(--r3)}
.btn-icon{width:36px;height:36px;padding:0;border-radius:var(--r2)}

/* Forms */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:.7rem;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:.86rem;padding:11px 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.err{border-color:var(--red)}
select.form-control{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237480A0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
textarea.form-control{resize:vertical;min-height:90px}
.form-hint{font-size:.71rem;color:var(--t3);margin-top:5px;line-height:1.4}
.form-error{font-size:.71rem;color:var(--red);margin-top:5px}
.input-wrap{position:relative}
.input-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:.85rem;pointer-events:none}
.input-wrap .form-control{padding-left:36px}
.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,.upload-zone.over{border-color:var(--brand);background:var(--brand-dim)}
.upload-zone input{display:none}
.upload-zone-icon{font-size:1.6rem;margin-bottom:8px}
.upload-zone-text{font-size:.8rem;color:var(--t2)}
.upload-zone-hint{font-size:.7rem;color:var(--t3);margin-top:4px}
.upload-preview{width:100%;max-height:110px;object-fit:cover;border-radius:var(--r1);margin-top:10px;display:none}

/* Cards */
.card{background:var(--s2);border:1px solid var(--b1);border-radius:var(--r3);padding:20px}
.card-sm{border-radius:var(--r2);padding:14px 16px}
.card-lg{border-radius:var(--r4);padding:26px}
.card-ghost{background:transparent;border-color:var(--b2)}
.card-glow{box-shadow:var(--shadow-brand);border-color:var(--brand-border)}

/* Balance card */
.balance-card{background:linear-gradient(135deg,#041510 0%,#071B16 40%,#030C0A 100%);border:1px solid var(--brand-border);border-radius:var(--r4);padding:24px;position:relative;overflow:hidden}
.balance-card::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(5,216,144,0.14) 0%,transparent 70%);pointer-events:none}
.balance-card::after{content:'';position:absolute;bottom:-40px;left:-20px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(5,216,144,0.06) 0%,transparent 70%);pointer-events:none}
.bal-eyebrow{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(5,216,144,0.55);margin-bottom:8px}
.bal-amount{font-family:var(--font2);font-size:2.8rem;font-weight:700;color:#fff;letter-spacing:-.03em;line-height:1;margin-bottom:6px}
.bal-amount sup{font-size:1.1rem;vertical-align:super;opacity:.65}
.bal-tag{font-size:.77rem;color:rgba(255,255,255,0.4);margin-bottom:14px}
.bal-tag strong{color:var(--brand)}
.bal-change{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:20px}
.bal-change.up{background:rgba(5,216,144,0.12);color:var(--brand)}
.bal-change.dn{background:var(--red-d);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:translateY(-3px)}
.vcard::before{content:'';position:absolute;top:-50px;right:-50px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(5,216,144,0.16) 0%,transparent 70%)}
.vcard-chip{width:32px;height:24px;border-radius:5px;background:linear-gradient(135deg,#d4a843,#b8861f);margin-bottom:20px;display:flex;align-items:center;justify-content:center}
.vcard-chip-inner{width:18px;height:14px;border:1.5px solid rgba(0,0,0,0.3);border-radius:2px;background:rgba(255,255,255,0.2)}
.vcard-number{font-family:var(--font2);font-size:.88rem;letter-spacing:.22em;color:var(--t1);margin-bottom:16px}
.vcard-row{display:flex;justify-content:space-between;align-items:flex-end}
.vcard-label{font-size:.56rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,0.32);margin-bottom:3px}
.vcard-value{font-size:.78rem;font-weight:600;color:var(--t1);letter-spacing:.03em}
.vcard-network{font-family:var(--font2);font-size:.95rem;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.14);color:var(--brand)}
.vcard-status.frozen{background:var(--blue-d);color:var(--blue)}

/* Quick actions */
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.quick-btn{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;background:none;border:none;padding:0;text-decoration:none}
.quick-icon{width:52px;height:52px;border-radius:var(--r2);background:var(--s3);border:1px solid var(--b2);display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all .2s var(--spring)}
.quick-btn:hover .quick-icon,.quick-btn:active .quick-icon{transform:scale(.92)}
.quick-icon.green{background:var(--brand-dim);border-color:var(--brand-border)}
.quick-icon.blue{background:var(--blue-d);border-color:rgba(75,158,255,0.2)}
.quick-icon.violet{background:var(--vio-d);border-color:rgba(155,126,255,0.2)}
.quick-icon.amber{background:var(--amb-d);border-color:rgba(245,158,11,0.2)}
.quick-icon.red{background:var(--red-d);border-color:rgba(255,69,96,0.2)}
.quick-icon.pink{background:var(--pink-d);border-color:rgba(240,106,186,0.2)}
.quick-label{font-size:.65rem;font-weight:600;color:var(--t2);letter-spacing:.02em;text-align:center}

/* Transactions */
.tx-list{display:flex;flex-direction:column}
.tx-item{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--b1);text-decoration:none;transition:all .15s;cursor:pointer}
.tx-item:last-child{border-bottom:none}
.tx-item:hover{background:var(--s3);margin:0 -12px;padding:13px 12px;border-radius:var(--r2)}
.tx-avatar{width:40px;height:40px;border-radius:var(--r2);background:var(--s3);border:1px solid var(--b2);display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;flex-shrink:0;transition:transform .2s var(--spring)}
.tx-item:hover .tx-avatar{transform:scale(1.05)}
.tx-info{flex:1;min-width:0}
.tx-name{font-size:.84rem;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-sub{font-size:.7rem;color:var(--t3);margin-top:2px}
.tx-right{text-align:right;flex-shrink:0}
.tx-amount{font-family:var(--font2);font-size:.88rem;font-weight:700}
.tx-amount.pos{color:var(--brand)}
.tx-amount.neg{color:var(--t1)}
.tx-status{font-size:.63rem;margin-top:2px}
.tx-status.pending{color:var(--amber)}
.tx-status.failed{color:var(--red)}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:.65rem;font-weight:700;letter-spacing:.03em}
.badge-brand{background:var(--brand-dim);color:var(--brand);border:1px solid var(--brand-border)}
.badge-success{background:rgba(5,216,144,0.09);color:var(--brand);border:1px solid rgba(5,216,144,0.18)}
.badge-warning{background:var(--amb-d);color:var(--amber);border:1px solid rgba(245,158,11,0.2)}
.badge-danger{background:var(--red-d);color:var(--red);border:1px solid rgba(255,69,96,0.2)}
.badge-info{background:var(--blue-d);color:var(--blue);border:1px solid rgba(75,158,255,0.2)}
.badge-violet{background:var(--vio-d);color:var(--violet);border:1px solid rgba(155,126,255,0.2)}
.badge-neutral{background:var(--s3);color:var(--t2);border:1px solid var(--b2)}

/* Alerts */
.alert{padding:13px 16px;border-radius:var(--r2);font-size:.8rem;font-weight:500;display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;animation:alertIn .2s ease}
@keyframes alertIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.alert-success{background:rgba(5,216,144,0.07);color:#3FFFC0;border:1px solid rgba(5,216,144,0.16);border-left:3px solid var(--brand)}
.alert-danger{background:var(--red-d);color:#FF8099;border:1px solid rgba(255,69,96,0.2);border-left:3px solid var(--red)}
.alert-warning{background:var(--amb-d);color:#FFC847;border:1px solid rgba(245,158,11,0.2);border-left:3px solid var(--amber)}
.alert-info{background:var(--blue-d);color:#7DB8FF;border:1px solid rgba(75,158,255,0.2);border-left:3px solid var(--blue)}

/* Section */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section-title{font-family:var(--font2);font-size:.88rem;font-weight:700;color:var(--t1)}
.section-link{font-size:.73rem;font-weight:600;color:var(--brand)}
.section-eyebrow{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:10px}

/* KYC banner */
.kyc-banner{display:flex;align-items:center;gap:12px;background:rgba(245,158,11,0.06);border:1px solid rgba(245,158,11,0.16);border-radius:var(--r2);padding:13px;margin-bottom:18px;text-decoration:none;transition:background .15s}
.kyc-banner:hover{background:rgba(245,158,11,0.10);opacity:1}
.kyc-banner.ok{background:rgba(5,216,144,0.06);border-color:var(--brand-border)}

/* Amount input */
.amount-wrap{background:var(--s2);border:1px solid var(--b2);border-radius:var(--r3);padding:22px;text-align:center;transition:border-color .2s,box-shadow .2s;margin-bottom:14px}
.amount-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-dim)}
.amount-symbol{font-size:1.4rem;color:var(--t3);vertical-align:middle}
.amount-input{background:none;border:none;outline:none;font-family:var(--font2);font-size:2.8rem;font-weight:700;color:var(--t1);width:200px;text-align:center;letter-spacing:-.02em}
.amount-hint{font-size:.72rem;color:var(--t3);margin-top:8px}

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

/* Stats */
.stats-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:22px}
.stat-card{background:var(--s2);border:1px solid var(--b1);border-radius:var(--r2);padding:14px}
.stat-num{font-family:var(--font2);font-size:1.4rem;font-weight:700;margin-bottom:3px}
.stat-lbl{font-size:.68rem;color:var(--t3);font-weight:500}
.stat-card.brand .stat-num{color:var(--brand)}
.stat-card.blue .stat-num{color:var(--blue)}
.stat-card.amber .stat-num{color:var(--amber)}
.stat-card.red .stat-num{color:var(--red)}
.stat-card.violet .stat-num{color:var(--violet)}

/* Tabs */
.tab-bar{display:flex;gap:3px;background:var(--s2);border-radius:var(--r2);padding:4px;margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.tab-bar::-webkit-scrollbar{display:none}
.tab-btn{padding:7px 13px;border-radius:var(--r1);font-size:.76rem;font-weight:600;white-space:nowrap;background:none;border:none;color:var(--t2);cursor:pointer;transition:all .15s;flex-shrink:0}
.tab-btn.active{background:var(--s4);color:var(--t1)}
.tab-pane{display:none}
.tab-pane.active{display:block;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Menu items */
.menu-item{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--b1);text-decoration:none;cursor:pointer;transition:padding .15s}
.menu-item:last-child{border-bottom:none}
.menu-item:hover{padding-left:4px}
.menu-icon{width:36px;height:36px;border-radius:var(--r1);background:var(--s3);border:1px solid var(--b2);display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;transition:transform .2s var(--spring)}
.menu-item:hover .menu-icon{transform:scale(1.08)}
.menu-info{flex:1}
.menu-title{font-size:.83rem;font-weight:600;color:var(--t1)}
.menu-desc{font-size:.7rem;color:var(--t3);margin-top:1px}
.menu-arrow{color:var(--t3);font-size:.78rem;transition:transform .15s}
.menu-item:hover .menu-arrow{transform:translateX(3px);color:var(--brand)}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(6px);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:auto}
.modal-sheet{background:var(--s2);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:none}
.modal-handle{width:34px;height:3px;border-radius:3px;background:var(--s5);margin:0 auto 20px}
.modal-title{font-family:var(--font2);font-size:.98rem;font-weight:700;text-align:center;margin-bottom:18px}
@media(min-width:900px){.modal-overlay{align-items:center}.modal-sheet{border-radius:var(--r4);max-width:480px}}

/* PIN */
.pin-dots{display:flex;gap:14px;justify-content:center;margin:18px 0}
.pin-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--b3);background:transparent;transition:all .15s var(--spring)}
.pin-dot.filled{background:var(--brand);border-color:var(--brand);box-shadow:0 0 10px var(--brand-glow)}
.pin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pin-key{background:var(--s3);border:1px solid var(--b2);border-radius:var(--r2);padding:15px;font-family:var(--font2);font-size:1.2rem;font-weight:700;color:var(--t1);text-align:center;cursor:pointer;transition:all .12s var(--spring);user-select:none}
.pin-key:active{transform:scale(.9);background:var(--s4)}
.pin-key.del{font-size:.85rem;color:var(--t2)}

/* Steps */
.steps{display:flex;align-items:center;margin-bottom:24px}
.step{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.step:not(:last-child)::after{content:'';position:absolute;top:12px;left:50%;width:100%;height:1px;background:var(--b2)}
.step.done::after{background:var(--brand)}
.step-dot{width:24px;height:24px;border-radius:50%;background:var(--s3);border:1.5px solid var(--b3);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;z-index:1;color:var(--t3);transition:all .2s var(--spring)}
.step.active .step-dot{border-color:var(--brand);color:var(--brand);background:var(--brand-dim);box-shadow:0 0 12px var(--brand-glow)}
.step.done .step-dot{background:var(--brand);border-color:var(--brand);color:#000}
.step-label{font-size:.6rem;color:var(--t3);text-align:center;font-weight:500}
.step.active .step-label,.step.done .step-label{color:var(--t2)}

/* Toast */
.toast-wrap{position:fixed;bottom:calc(var(--nav-mob) + 12px);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}
@media(min-width:900px){.toast-wrap{bottom:24px}}
.toast{padding:12px 16px;border-radius:var(--r2);font-size:.8rem;font-weight:500;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);pointer-events:auto;animation:toastIn .25s var(--spring)}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}
.toast-success{background:#071812;border:1px solid rgba(5,216,144,0.28);color:var(--brand)}
.toast-error{background:#18070A;border:1px solid rgba(255,69,96,0.28);color:var(--red)}
.toast-info{background:#07101A;border:1px solid rgba(75,158,255,0.28);color:var(--blue)}

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

/* Toggle */
.toggle{position:relative;width:44px;height:24px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;border-radius:24px;background:var(--s4);border:1px solid var(--b2);cursor:pointer;transition:.2s}
.toggle-slider::before{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:var(--t2);left:3px;top:3px;transition:.2s var(--spring)}
.toggle input:checked+.toggle-slider{background:var(--brand-dim);border-color:var(--brand)}
.toggle input:checked+.toggle-slider::before{background:var(--brand);transform:translateX(20px)}

/* Avatar */
.avatar{border-radius:var(--r2);background:var(--brand-dim);border:1px solid var(--brand-border);display:flex;align-items:center;justify-content:center;font-family:var(--font2);font-weight:700;color:var(--brand);flex-shrink:0}
.avatar-sm{width:32px;height:32px;font-size:.72rem;border-radius:var(--r1)}
.avatar-md{width:42px;height:42px;font-size:.88rem}
.avatar-lg{width:56px;height:56px;font-size:1rem;border-radius:var(--r3)}
.avatar-xl{width:72px;height:72px;font-size:1.3rem;border-radius:var(--r3)}

/* Divider */
.divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--t3);font-size:.72rem}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--b2)}

/* Auth */
.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.7rem;font-weight:700;text-align:center;margin-bottom:4px;color:var(--t1);display:flex;align-items:center;justify-content:center;gap:8px}
.auth-logo-dot{width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 14px var(--brand-glow)}
.auth-sub{text-align:center;font-size:.82rem;color:var(--t2);margin-bottom:32px}

/* Prose */
.prose h2{font-size:1rem;margin:24px 0 9px}
.prose h3{font-size:.88rem;margin:18px 0 7px;color:var(--t2)}
.prose p{font-size:.83rem;color:var(--t2);margin-bottom:12px;line-height:1.7}
.prose ul{font-size:.83rem;color:var(--t2);margin-bottom:12px;padding-left:18px}
.prose ul li{margin-bottom:4px}
.prose a{color:var(--brand)}

/* Admin table */
.admin-table{width:100%;border-collapse:collapse;font-size:.8rem}
.admin-table th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--b2);font-size:.65rem;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}
.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:.78rem}.text-xs{font-size:.7rem}
.text-brand{color:var(--brand)}.text-muted{color:var(--t2)}.text-faint{color:var(--t3)}
.text-red{color:var(--red)}.text-amber{color:var(--amber)}.text-blue{color:var(--blue)}
.mono{font-family:var(--font2)}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-full{width:100%}.pointer{cursor:pointer}.select-none{user-select:none}
.notif-dot{width:7px;height:7px;border-radius:50%;background:var(--red);display:inline-block}
@media(max-width:380px){.bal-amount{font-size:2.4rem}.quick-icon{width:46px;height:46px}}

/* ── Chrome / cross-browser fixes ──────────────────────────── */
/* Force GPU rendering on cards and transitions */
.balance-card,.vcard,.card,.modal-sheet,.sidebar,.app-bar,.topbar,.bottom-nav {
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  will-change:transform;
}
/* Chrome sometimes ignores backdrop-filter without this */
.app-bar,.topbar,.bottom-nav,.modal-overlay {
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
}
/* Fix Chrome input appearance */
input,select,textarea,button {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  font-family:inherit;
}
select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237480A0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:34px;
  background-color:var(--s2);
  color:var(--t1);
}
/* Chrome date input color fix */
input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(1) opacity(0.4); }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
/* Chrome scrollbar */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:var(--s1); }
::-webkit-scrollbar-thumb { background:var(--s4); border-radius:4px; }
/* Tap highlight fix for Chrome mobile */
*,a,button { -webkit-tap-highlight-color:transparent; }
/* Chrome font smoothing */
body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
/* Fix Chrome not inheriting line-height on inputs */
input,textarea,select { line-height:normal; }
/* Chrome autofill dark mode fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow:0 0 0 100px var(--s2) inset !important;
  -webkit-text-fill-color:var(--t1) !important;
  border-color:var(--brand) !important;
  transition:background-color 9999s;
}

/* ── Lang toggle ────────────────────────────────────────────── */
.lang-toggle-sb {
  display:inline-flex;align-items:center;gap:5px;
  margin:8px 18px 0;
  padding:5px 10px;
  font-size:.72rem;font-weight:600;
  background:var(--s3);border:1px solid var(--b2);
  border-radius:var(--r1);color:var(--t2);
  text-decoration:none;transition:all .15s;
}
.lang-toggle-sb:hover{color:var(--t1);border-color:var(--b3);opacity:1}
.ml-1{margin-left:6px}