/* ── Reset & Base ──────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{
  font-family:'Poppins','Noto Naskh Arabic',system-ui,-apple-system,sans-serif;
  background:#F2F4F7;color:#222222;
  overflow:hidden;height:100dvh;width:100vw;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  user-select:none;-webkit-user-select:none;
}
input,button,textarea{font-family:inherit;outline:none;border:none}
button{cursor:pointer;background:none}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

/* ── App Container ─────────────────────────────────────────── */
#app{position:relative;width:100%;height:100dvh;overflow:hidden}

/* ── Screen System ─────────────────────────────────────────── */
.screen{
  position:absolute;inset:0;
  display:none;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.screen.active{display:flex}
.screen-transition{animation:screenIn .3s ease-out}
@keyframes screenIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── Colors / Vars ─────────────────────────────────────────── */
:root{
  --bg-primary:#FFFFFF;
  --bg-secondary:#F2F4F7;
  --bg-card:#FFFFFF;
  --bg-input:#F8F8F8;
  --primary:#46B093;
  --primary-light:#56B89D;
  --primary-dark:#24866B;
  --primary-surface:rgba(70,176,147,.08);
  --primary-surface-2:rgba(70,176,147,.14);
  --primary-25:#DEFAF8;
  --fib-blue:#0173B4;
  --text-primary:#222222;
  --text-secondary:#475467;
  --text-muted:#555555;
  --text-on-primary:#FFFFFF;
  --text-service:#475466;
  --link-blue:#235DFF;
  --divider:#E3E3E3;
  --danger:#E85B59;
  --danger-dark:#CC2944;
  --danger-light:#FEE2E2;
  --success:#42A489;
  --success-light:#ECFDF5;
  --warning:#F59E0B;
  --warning-light:#FFFBEB;
  --text-error:#BF0402;
  --text-cancel:#F23836;
  --ripple-color:#DDF1EB;
  --border:#EAECF0;
  --border-light:#F3F4F6;
  --gradient-start:#4EB59F;
  --gradient-end:#41B09F;
  --gradient-dark-start:#31A99B;
  --gradient-dark-end:#08918C;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 2px 8px rgba(0,0,0,.08);
  --shadow-lg:0 4px 16px rgba(0,0,0,.1);
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-full:9999px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

/* ── SVG icon helper ───────────────────────────────────────── */
.svg-icon{display:inline-flex;align-items:center;justify-content:center}
.svg-icon svg{display:block}

/* ── Splash Screen ─────────────────────────────────────────── */
.splash-content{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--gradient-start) 0%,var(--gradient-dark-end) 100%);
  padding:40px 24px;gap:12px;
}
.splash-logo{
  display:flex;align-items:center;justify-content:center;
}
.splash-logo svg{width:100px;height:108px}
.splash-title{font-size:28px;font-weight:700;color:#FFFFFF;margin-top:16px;letter-spacing:1px}
.splash-subtitle{font-size:14px;color:rgba(255,255,255,.75);margin-top:2px}
.splash-spinner{
  width:32px;height:32px;border:3px solid rgba(255,255,255,.3);
  border-top-color:#FFFFFF;border-radius:50%;
  animation:spin .8s linear infinite;margin-top:40px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Welcome Screen ────────────────────────────────────────── */
.welcome-content{
  flex:1;display:flex;flex-direction:column;
  justify-content:flex-end;padding:0 24px calc(40px + var(--safe-bottom));
  background:#FFFFFF;
}
.welcome-hero{
  flex:1;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:12px;padding:40px 0;
}
.welcome-logo{display:flex;align-items:center;justify-content:center}
.welcome-logo svg{width:30vw;max-width:120px;height:auto}
.welcome-brand{font-size:22px;font-weight:700;color:var(--text-primary);margin-top:12px}
.welcome-tagline{
  font-size:14px;color:var(--text-secondary);text-align:center;
  max-width:300px;line-height:1.6;margin-top:4px;
}
.welcome-stats{display:flex;gap:20px;margin-top:28px}
.stat-item{text-align:center;padding:12px 0}
.stat-value{font-size:18px;font-weight:700;color:var(--primary)}
.stat-label{font-size:11px;color:var(--text-muted);margin-top:4px}
.welcome-actions{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.welcome-actions .btn-primary,.welcome-actions .btn-secondary{text-transform:uppercase;letter-spacing:.5px;font-family:'Poppins',sans-serif;font-weight:700}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary{
  width:100%;padding:10px 24px;min-height:56px;border-radius:30px;
  background:var(--primary);color:#fff;
  font-size:16px;font-weight:600;
  transition:all .2s;border:none;
  box-shadow:0 2px 8px rgba(70,176,147,.25);
  display:flex;align-items:center;justify-content:center;
}
.btn-primary:active{transform:scale(.98);background:var(--primary-dark)}
.btn-primary:disabled{opacity:.4;pointer-events:none;box-shadow:none}
.btn-secondary{
  width:100%;padding:10px 24px;min-height:56px;border-radius:30px;
  background:transparent;color:var(--primary);
  font-size:16px;font-weight:600;
  border:1.5px solid var(--primary);
  transition:all .2s;
  display:flex;align-items:center;justify-content:center;
}
.btn-secondary:active{background:var(--primary-surface)}
.btn-ghost{
  width:100%;padding:10px 24px;min-height:56px;border-radius:30px;
  background:var(--bg-input);color:var(--text-primary);
  font-size:15px;font-weight:500;
  transition:all .2s;border:none;
  display:flex;align-items:center;justify-content:center;
}
.btn-ghost:active{background:#EBEBEB}
.btn-back{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-full);background:var(--bg-input);
  color:var(--text-primary);font-size:20px;flex-shrink:0;
  transition:background .2s;
}
.btn-back:active{background:#E0E0E0}
.btn-link{color:var(--primary);font-size:14px;font-weight:500;background:none;border:none;padding:8px 0}

/* ── Login Screen ──────────────────────────────────────────── */
.login-content{
  flex:1;display:flex;flex-direction:column;
  padding:calc(60px + var(--safe-top)) 24px 40px;
  background:#FFFFFF;
}
.login-header{margin-bottom:40px}
.login-logo{display:flex;align-items:center;margin-bottom:20px}
.login-logo svg{width:48px;height:52px}
.login-title{font-size:24px;font-weight:700;color:var(--text-primary);margin-bottom:6px}
.login-subtitle{font-size:14px;color:var(--text-secondary);line-height:1.5}
.phone-group{margin-bottom:24px}
.phone-label{font-size:13px;color:var(--text-secondary);margin-bottom:8px;display:block;font-weight:500}
.phone-row{
  display:flex;gap:0;background:#FFFFFF;
  border-radius:var(--radius-md);
  border:1.5px solid var(--border);
  transition:border-color .2s;overflow:hidden;
}
.phone-row:focus-within{border-color:var(--primary)}
.country-code{
  display:flex;align-items:center;gap:6px;
  padding:14px;color:var(--text-secondary);
  font-size:15px;font-weight:500;flex-shrink:0;
  border-left:1px solid var(--border);
  background:var(--bg-input);
}
.country-flag{display:inline-flex;align-items:center}
.country-flag svg{width:15px;height:16px}
.phone-input{
  flex:1;background:transparent;color:var(--text-primary);
  font-size:16px;font-weight:500;padding:14px 12px;
  direction:ltr;text-align:right;letter-spacing:.5px;
}
.phone-input::placeholder{color:var(--text-muted);font-weight:400}
.error-text{color:var(--danger);font-size:12px;margin-top:8px;display:none}
.error-text.visible{display:block}
.login-footer{margin-top:auto;text-align:center}
.login-footer-text{font-size:12px;color:var(--text-muted);line-height:1.6}
.password-row{position:relative}
.password-field{
  flex:1;background:transparent;color:var(--text-primary);
  font-size:16px;font-weight:500;padding:14px 12px;
  letter-spacing:2px;direction:ltr;text-align:right;
}
.password-field::placeholder{color:var(--text-muted);letter-spacing:0;font-weight:400}
.password-toggle{
  display:flex;align-items:center;justify-content:center;
  padding:10px 12px;color:var(--text-muted);
  background:none;border:none;cursor:pointer;flex-shrink:0;
}
.password-toggle svg{width:22px;height:22px}
.forgot-link{text-align:left;margin-bottom:16px}

/* ── OTP Screen ────────────────────────────────────────────── */
.otp-content{
  flex:1;display:flex;flex-direction:column;
  padding:calc(24px + var(--safe-top)) 24px 40px;
  background:#FFFFFF;
}
.otp-header{display:flex;align-items:center;gap:12px;margin-bottom:36px}
.otp-title{font-size:20px;font-weight:700;color:var(--text-primary)}
.otp-subtitle{font-size:14px;color:var(--text-secondary);margin-bottom:32px;line-height:1.5}
.otp-phone-highlight{color:var(--primary);font-weight:600;direction:ltr;unicode-bidi:embed}
.otp-inputs{display:flex;gap:10px;justify-content:center;margin-bottom:20px}
.otp-digit{
  width:48px;height:56px;background:#FFFFFF;
  border:1.5px solid var(--border);border-radius:var(--radius-md);
  color:var(--text-primary);font-size:22px;font-weight:600;
  text-align:center;transition:border-color .2s;
}
.otp-digit:focus{border-color:var(--primary);background:var(--primary-surface)}
.otp-digit.filled{border-color:var(--primary)}
.otp-timer{text-align:center;margin:16px 0;font-size:13px;color:var(--text-muted)}
.otp-timer strong{color:var(--primary);font-weight:600}
.otp-method{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;background:#FFFFFF;
  border-radius:var(--radius-md);margin-bottom:12px;
  border:1.5px solid var(--border);cursor:pointer;
  transition:border-color .2s;
}
.otp-method.selected{border-color:var(--primary);background:var(--primary-surface)}
.otp-method-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.otp-method-label{flex:1;font-size:14px;font-weight:500;color:var(--text-primary)}
.otp-method-radio{
  width:20px;height:20px;border-radius:50%;
  border:2px solid var(--border);display:flex;
  align-items:center;justify-content:center;
}
.otp-method.selected .otp-method-radio{border-color:var(--primary)}
.otp-method.selected .otp-method-radio::after{
  content:'';width:10px;height:10px;background:var(--primary);border-radius:50%;
}

/* ── PIN Screen ────────────────────────────────────────────── */
.pin-content{
  flex:1;display:flex;flex-direction:column;
  align-items:center;padding:calc(60px + var(--safe-top)) 24px 24px;
  background:#FFFFFF;
}
.pin-logo{display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.pin-logo svg{width:48px;height:52px}
.pin-title{font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.pin-subtitle{font-size:13px;color:var(--text-secondary);margin-bottom:32px}
.pin-dots{display:flex;gap:8px;margin-bottom:40px}
.pin-dot{
  width:44px;height:44px;border-radius:50%;
  background:#EEEEEE;border:2px solid var(--border);
  transition:all .2s;display:flex;align-items:center;justify-content:center;
}
.pin-dot::after{
  content:'';width:14px;height:14px;border-radius:50%;
  background:transparent;transition:all .2s;
}
.pin-dot.filled::after{background:var(--primary)}
.pin-dot.filled{border-color:var(--primary);transform:scale(1.05)}
.pin-dot.error{background:var(--danger);border-color:var(--danger);animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:300px}
.numpad-key{
  height:64px;border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:600;color:var(--text-primary);
  background:var(--bg-input);transition:all .15s;
}
.numpad-key:active{background:var(--primary-surface-2);color:var(--primary);transform:scale(.95)}
.numpad-empty{visibility:hidden}
.numpad-delete{font-size:18px;color:var(--text-secondary)}
.pin-biometric{color:var(--primary);cursor:pointer}
.pin-biometric svg{width:28px;height:28px}

/* ── Dashboard Screen ──────────────────────────────────────── */
.dashboard-content{
  flex:1;display:flex;flex-direction:column;
  padding:calc(12px + var(--safe-top)) 0 calc(56px + var(--safe-bottom));
  background:var(--bg-secondary);overflow-y:auto;
}
.dash-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:#FFFFFF;
}
.dash-greeting{display:flex;align-items:center;gap:12px}
.dash-hamburger{
  width:48px;height:48px;border-radius:50%;
  background:#FAFAFA;display:flex;
  align-items:center;justify-content:center;
}
.dash-hamburger svg{width:24px;height:24px}
.dash-avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--primary-surface);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.dash-avatar svg{width:32px;height:32px}
.dash-name{font-size:18px;font-weight:600;color:var(--text-primary)}
.dash-welcome{font-size:14px;color:var(--text-secondary)}
.dash-actions-top{display:flex;gap:8px}
.dash-icon-btn{
  width:48px;height:48px;border-radius:50%;
  background:var(--bg-input);display:flex;
  align-items:center;justify-content:center;
}
.dash-icon-btn svg{width:24px;height:24px}

/* Balance Card */
.balance-card{
  margin:12px 16px 16px;padding:24px 20px;
  background:linear-gradient(135deg,var(--gradient-start) 0%,var(--gradient-dark-start) 50%,var(--gradient-dark-end) 100%);
  border-radius:10px;position:relative;overflow:hidden;
  box-shadow:0 4px 20px rgba(70,176,147,.3);
}
.balance-card::before{
  content:'';position:absolute;top:-30%;right:-20%;
  width:200px;height:200px;border-radius:50%;
  background:rgba(255,255,255,.06);
}
.balance-card::after{
  content:'';position:absolute;bottom:-40%;left:-10%;
  width:160px;height:160px;border-radius:50%;
  background:rgba(255,255,255,.04);
}
.balance-label{font-size:13px;color:rgba(255,255,255,.75);margin-bottom:4px}
.balance-amount{font-size:30px;font-weight:700;color:#fff;letter-spacing:.5px;direction:ltr;text-align:right}
.balance-currency{font-size:13px;color:rgba(255,255,255,.65);margin-top:4px}
.balance-row{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
.balance-toggle{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.15);display:flex;
  align-items:center;justify-content:center;
  color:#fff;margin-top:4px;
}
.balance-toggle svg{width:20px;height:20px}
.balance-iban{
  margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.15);
  font-size:12px;color:rgba(255,255,255,.55);direction:ltr;text-align:right;
  display:flex;align-items:center;gap:8px;position:relative;z-index:1;
}
.balance-iban-copy{display:flex;align-items:center;cursor:pointer}
.balance-iban-copy svg{width:16px;height:16px}

/* Quick Actions — 3-button action bar (matches fragment_home.xml weightSum=3.0) */
.quick-actions{
  display:flex;gap:0;padding:0;margin:0 16px 16px;
  background:#FFFFFF;border-radius:10px;
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.action-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 8px;transition:all .2s;
  border-left:1px solid var(--border-light);
}
.action-item:last-child{border-left:none}
.action-item:active{background:var(--ripple-color)}
.action-icon{
  width:44px;height:44px;border-radius:var(--radius-md);
  background:var(--primary-surface);display:flex;
  align-items:center;justify-content:center;
}
.action-icon svg{width:22px;height:22px}
.action-label{font-size:13px;color:var(--text-primary);font-weight:500;text-align:center;line-height:1.3}

/* Services Grid */
.services-section{padding:0 16px;margin-bottom:16px}
.section-title{
  font-size:18px;font-weight:600;color:var(--text-primary);
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;
}
.section-title span{font-family:'Poppins',sans-serif}
.section-more{font-size:13px;color:var(--primary);font-weight:500}
.services-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:0;background:#FFFFFF;
  border-radius:10px;
  padding:4px 8px;
  box-shadow:var(--shadow-sm);
}
.service-item{
  display:flex;flex-direction:row;align-items:center;gap:10px;
  padding:8px 6px;
  border-bottom:1px solid var(--border-light);
}
.service-item:nth-last-child(-n+2){border-bottom:none}
.service-item:nth-child(odd){border-left:1px solid var(--border-light)}
.service-item:active{background:var(--ripple-color)}
.service-icon{
  width:40px;height:40px;border-radius:var(--radius-sm);
  background:var(--bg-secondary);display:flex;
  align-items:center;justify-content:center;flex-shrink:0;
  padding:5px;
}
.service-icon svg{width:24px;height:24px}
.service-label{font-size:13px;color:var(--text-service);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Transactions List */
.tx-section{padding:0 16px;flex:1;margin-top:14px;margin-bottom:16px}
.tx-list{display:flex;flex-direction:column;background:#FFFFFF;border-radius:10px;box-shadow:var(--shadow-sm);overflow:hidden}
.tx-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  transition:all .2s;border-bottom:1px solid var(--border-light);
}
.tx-item:last-child{border-bottom:none}
.tx-item:active{background:var(--bg-input)}
.tx-icon{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.tx-icon svg{width:12px;height:12px}
.tx-icon.tx-out{background:var(--danger-light)}
.tx-icon.tx-in{background:var(--success-light)}
.tx-icon.tx-bill{background:var(--warning-light)}
.tx-details{flex:1;min-width:0}
.tx-name{font-size:14px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:12em}
.tx-date{font-size:12px;color:var(--text-muted);margin-top:2px}
.tx-date .tx-dot{margin:0 4px;color:var(--text-muted)}
.tx-amount{font-size:14px;font-weight:600;text-align:left;white-space:nowrap;direction:ltr}
.tx-amount.negative{color:var(--danger)}
.tx-amount.positive{color:var(--success)}

/* ── Cards Screen ──────────────────────────────────────────── */
.cards-content{
  flex:1;display:flex;flex-direction:column;
  padding:calc(16px + var(--safe-top)) 16px calc(56px + var(--safe-bottom) + 8px);
  background:var(--bg-secondary);overflow-y:auto;
}
.page-title{font-size:22px;font-weight:700;color:var(--text-primary);margin-bottom:16px}
.card-visual{
  width:100%;aspect-ratio:1.586;border-radius:var(--radius-xl);
  background:linear-gradient(135deg,var(--gradient-start) 0%,var(--gradient-dark-end) 100%);
  padding:24px;display:flex;flex-direction:column;
  justify-content:space-between;position:relative;overflow:hidden;
  margin-bottom:16px;box-shadow:0 6px 24px rgba(70,176,147,.25);
}
.card-visual::before{
  content:'';position:absolute;top:-20%;right:-15%;
  width:180px;height:180px;border-radius:50%;
  background:rgba(255,255,255,.06);
}
.card-chip{
  width:40px;height:30px;background:linear-gradient(135deg,#FFD700,#FFA000);
  border-radius:6px;margin-bottom:auto;
}
.card-number{
  font-size:18px;font-weight:500;letter-spacing:3px;
  color:rgba(255,255,255,.9);direction:ltr;margin-bottom:16px;
}
.card-bottom{display:flex;justify-content:space-between;align-items:flex-end}
.card-holder{font-size:11px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.5px}
.card-holder-name{font-size:14px;font-weight:600;color:#fff;margin-top:2px}
.card-expiry-label{font-size:10px;color:rgba(255,255,255,.6)}
.card-expiry-val{font-size:14px;font-weight:600;color:#fff;margin-top:2px;direction:ltr}
.card-brand{display:flex;align-items:center}
.card-brand svg{width:53px;height:17px}
.card-actions-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.card-action{
  padding:14px 8px;background:#FFFFFF;
  border-radius:var(--radius-md);text-align:center;
  font-size:12px;font-weight:500;color:var(--text-secondary);
  transition:all .2s;box-shadow:var(--shadow-sm);
}
.card-action:active{background:var(--bg-input);transform:scale(.97)}
.card-action-icon{display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.card-action-icon svg{width:24px;height:24px}

/* ── Send/Transfer Screen ─────────────────────────────────── */
.transfer-content{
  flex:1;display:flex;flex-direction:column;
  padding:calc(24px + var(--safe-top)) 24px 40px;
  background:#FFFFFF;
}
.transfer-header{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.transfer-title{font-size:20px;font-weight:700;color:var(--text-primary)}
.amount-display{text-align:center;padding:32px 0}
.amount-value{font-size:36px;font-weight:700;color:var(--text-primary);direction:ltr}
.amount-currency{font-size:14px;color:var(--text-secondary);margin-top:4px}
.amount-label{
  display:inline-block;padding:6px 16px;
  background:var(--bg-input);border-radius:var(--radius-full);
  font-size:12px;color:var(--text-secondary);margin-top:12px;
}
.recipient-card{
  display:flex;align-items:center;gap:12px;
  padding:16px;background:var(--bg-input);
  border-radius:var(--radius-md);margin-bottom:16px;
}
.recipient-avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--primary-surface);display:flex;
  align-items:center;justify-content:center;
  font-size:18px;color:var(--primary);font-weight:600;
}
.recipient-name{font-size:15px;font-weight:600;color:var(--text-primary)}
.recipient-phone{font-size:12px;color:var(--text-muted);direction:ltr}
.transfer-input-group{margin-bottom:16px}
.transfer-label{font-size:13px;color:var(--text-secondary);margin-bottom:8px;display:block;font-weight:500}
.transfer-input{
  width:100%;padding:14px 16px;background:#FFFFFF;
  border:1.5px solid var(--border);border-radius:var(--radius-md);
  color:var(--text-primary);font-size:15px;transition:border-color .2s;
}
.transfer-input:focus{border-color:var(--primary)}
.transfer-input::placeholder{color:var(--text-muted)}
.fee-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--border-light);
  font-size:14px;
}
.fee-label{color:var(--text-secondary)}
.fee-value{font-weight:600;color:var(--text-primary);direction:ltr}
.fee-total{color:var(--primary);font-size:16px}

/* ── Profile Screen ────────────────────────────────────────── */
.profile-content{
  flex:1;display:flex;flex-direction:column;
  padding:calc(16px + var(--safe-top)) 16px calc(56px + var(--safe-bottom));
  background:var(--bg-secondary);overflow-y:auto;
}
.profile-header{
  display:flex;flex-direction:column;align-items:center;
  padding:24px 0;gap:6px;background:#FFFFFF;
  border-radius:6px;margin-bottom:16px;
  box-shadow:var(--shadow-sm);
}
.profile-avatar{
  width:80px;height:80px;border-radius:40px;
  background:var(--primary-surface);border:3px solid var(--primary);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.profile-avatar svg{width:60px;height:60px}
.profile-name{font-size:18px;font-weight:700;color:var(--text-primary)}
.profile-phone{font-size:13px;color:var(--text-secondary);direction:ltr}
.profile-iban{font-size:12px;color:var(--text-muted);direction:ltr;margin-top:2px}
.menu-section{margin-bottom:16px}
.menu-section-title{
  font-size:12px;color:var(--text-muted);text-transform:uppercase;
  margin-bottom:8px;padding:0 4px;font-weight:600;letter-spacing:.5px;
}
.menu-group{
  background:#FFFFFF;border-radius:6px;
  overflow:hidden;box-shadow:var(--shadow-sm);
}
.menu-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--border-light);
  transition:background .2s;cursor:pointer;
}
.menu-item:last-child{border-bottom:none}
.menu-item:active{background:var(--bg-input)}
.menu-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.menu-icon svg{width:20px;height:20px}
.menu-label{flex:1;font-size:14px;font-weight:500;color:var(--text-primary)}
.menu-value{font-size:13px;color:var(--text-muted)}
.menu-arrow{display:flex;align-items:center}
.menu-arrow svg{width:8px;height:13px;transform:scaleX(-1)}
.menu-item.danger .menu-label{color:var(--danger-dark)}
.menu-item.danger .menu-icon svg{color:var(--danger-dark)}

/* ── Tab Bar ───────────────────────────────────────────────── */
.tab-bar{
  position:fixed;bottom:0;left:0;right:0;
  height:calc(56px + var(--safe-bottom));
  display:none;align-items:center;justify-content:space-around;
  background:#FFFFFF;
  border-top:1px solid var(--border-light);
  padding:8px 0 var(--safe-bottom);
  z-index:100;
  box-shadow:0 -2px 12px rgba(0,0,0,.06);
}
.tab-item{
  display:flex;flex-direction:column;align-items:center;
  gap:4px;padding:4px 14px;min-width:60px;
  transition:all .2s;cursor:pointer;
}
.tab-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}
.tab-icon svg{width:24px;height:24px}
.tab-item .icon-active{display:none}
.tab-item .icon-default{display:inline-flex}
.tab-item.active .icon-active{display:inline-flex}
.tab-item.active .icon-default{display:none}
.tab-label{font-size:12px;color:var(--text-muted);font-weight:500;transition:color .2s}
.tab-item.active .tab-label{color:var(--primary);font-weight:600;font-size:14px}

/* ── Success Screen ────────────────────────────────────────── */
.success-content{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:40px 24px;background:#FFFFFF;
}
.success-icon{
  width:80px;height:80px;display:flex;
  align-items:center;justify-content:center;
  margin-bottom:24px;
  animation:successPop .5s cubic-bezier(.68,-.55,.265,1.55);
}
.success-icon svg{width:80px;height:80px}
@keyframes successPop{from{transform:scale(0)}to{transform:scale(1)}}
.success-title{font-size:22px;font-weight:700;color:var(--text-primary);margin-bottom:8px}
.success-amount{font-size:28px;font-weight:700;color:var(--primary);margin-bottom:4px;direction:ltr}
.success-detail{font-size:14px;color:var(--text-secondary);margin-bottom:24px;text-align:center;line-height:1.5}
.success-receipt{
  width:100%;padding:16px;background:var(--bg-input);
  border-radius:var(--radius-md);margin-bottom:24px;
}
.receipt-row{
  display:flex;justify-content:space-between;
  padding:10px 0;font-size:13px;
  border-bottom:1px solid var(--border-light);
}
.receipt-row:last-child{border-bottom:none}
.receipt-label{color:var(--text-muted)}
.receipt-value{font-weight:500;color:var(--text-primary);direction:ltr}

/* ── Notification Badge ────────────────────────────────────── */
.notif-badge{
  position:absolute;top:-2px;right:-2px;
  min-width:16px;height:16px;padding:0 4px;
  background:var(--danger);border-radius:var(--radius-full);
  font-size:10px;font-weight:700;color:#fff;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #FFFFFF;
}

/* ── Loading Overlay ───────────────────────────────────────── */
.loading-overlay{
  position:fixed;inset:0;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;
  z-index:200;flex-direction:column;gap:16px;
}
.loading-overlay.active{display:flex}
.loading-spinner{
  width:40px;height:40px;border:3px solid #E0E0E0;
  border-top-color:var(--primary);border-radius:50%;
  animation:spin .7s linear infinite;
}
.loading-text{font-size:14px;color:var(--text-secondary)}

/* ── Approval Overlay ──────────────────────────────────────── */
.approval-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;
  z-index:250;
}
.approval-overlay.active{display:flex}
.approval-box{
  background:#FFFFFF;border-radius:var(--radius-xl);
  padding:40px 32px;text-align:center;
  box-shadow:0 8px 40px rgba(0,0,0,.15);
  max-width:300px;width:85%;
}
.approval-spinner{
  width:48px;height:48px;border:4px solid #E0E0E0;
  border-top-color:var(--primary);border-radius:50%;
  animation:spin .8s linear infinite;margin:0 auto 20px;
}
.approval-title{font-size:17px;font-weight:700;color:var(--text-primary);margin-bottom:8px}
.approval-subtitle{font-size:13px;color:var(--text-secondary);line-height:1.5}

/* ── Card Number Entry Screen ──────────────────────────────── */
.card-entry-content{
  flex:1;display:flex;flex-direction:column;
  padding:calc(24px + var(--safe-top)) 24px 40px;
  background:#FFFFFF;
}
.card-entry-header{display:flex;align-items:center;gap:12px;margin-bottom:36px}
.card-entry-title{font-size:20px;font-weight:700;color:var(--text-primary)}
.card-entry-subtitle{font-size:14px;color:var(--text-secondary);margin-bottom:32px;line-height:1.5}
.card-input-group{margin-bottom:24px}
.card-input-row{position:relative}
.card-input-icon{
  display:flex;align-items:center;justify-content:center;
  padding:10px 12px;flex-shrink:0;
  background:var(--bg-input);border-left:1px solid var(--border);
}
.card-input-icon svg{width:22px;height:22px}
.card-number-field{
  flex:1;background:transparent;color:var(--text-primary);
  font-size:17px;font-weight:500;padding:14px 12px;
  direction:ltr;text-align:right;letter-spacing:2px;
  font-family:'Poppins',monospace;
}
.card-number-field::placeholder{color:var(--text-muted);letter-spacing:1px;font-weight:400}
.card-extra-fields{display:flex;gap:12px;margin-bottom:8px}
.card-field-half{flex:1;margin-bottom:0}
.card-extra-input{
  flex:1;background:transparent;color:var(--text-primary);
  font-size:16px;font-weight:500;padding:14px 12px;
  direction:ltr;text-align:center;letter-spacing:2px;
  font-family:'Poppins',monospace;width:100%;
}
.card-extra-input::placeholder{color:var(--text-muted);letter-spacing:1px;font-weight:400}

/* ── Toast ─────────────────────────────────────────────────── */
.toast{
  position:fixed;top:calc(20px + var(--safe-top));left:20px;right:20px;
  padding:14px 20px;border-radius:var(--radius-md);
  font-size:14px;font-weight:500;
  transform:translateY(-120%);transition:transform .3s;z-index:300;
  display:flex;align-items:center;gap:10px;
  box-shadow:var(--shadow-lg);
}
.toast.active{transform:translateY(0)}
.toast.success{background:#42A489;color:#fff}
.toast.error{background:#E85B59;color:#fff}
.toast.info{background:#FFFFFF;color:var(--text-primary);border:1px solid var(--border)}

/* ── Utilities ─────────────────────────────────────────────── */
.text-center{text-align:center}
.text-rtl{direction:rtl}
.text-ltr{direction:ltr}
.mt-auto{margin-top:auto}
.gap-sm{gap:8px}
.gap-md{gap:16px}
.hidden{display:none!important}

/* ── Responsive ────────────────────────────────────────────── */
@media(min-width:480px){
  #app{max-width:430px;margin:0 auto;box-shadow:0 0 40px rgba(0,0,0,.08);border-left:1px solid var(--border-light);border-right:1px solid var(--border-light)}
}