/* ══════════════════════════════════════════════════════════════
   RABAR — single project-wide typeface
   ══════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Rabar';
  src:url('https://raw.githubusercontent.com/Zana-Sponsor/Zana-Sponsor/main/Rabar_021.woff2') format('woff2');
  font-weight:300 800;
  font-display:swap;
}

/* ══════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════════════════════════════ */
:root, [data-theme="dark"]{
  --bg:#0a0c11;
  --bg-elevated:#0e1117;
  --surface:#12161f;
  --surface-2:#181d28;
  --surface-hover:#1e2431;
  --border:#222937;
  --border-strong:#313a4b;
  --text:#eef1f6;
  --text-muted:#8a94a6;
  --text-faint:#5d6675;

  --primary:#38bdf8;
  --primary-hover:#5ecbfa;
  --primary-active:#1ea2df;
  --on-primary:#04202c;
  --secondary:#818cf8;
  --secondary-soft:rgba(129,140,248,.13);
  --accent:#f5b942;
  --accent-soft:rgba(245,185,66,.14);

  --success:#34d399;
  --success-soft:rgba(52,211,153,.14);
  --warning:#fbbf24;
  --warning-soft:rgba(251,191,36,.14);
  --error:#f8716f;
  --error-soft:rgba(248,113,111,.14);
  --info:#60a5fa;
  --info-soft:rgba(96,165,250,.14);
  --tg:#3ab2ea;
  --wa:#2fd669;

  --focus-ring:rgba(56,189,248,.26);
  --shadow-sm:0 1px 1px rgba(0,0,0,.24);
  --shadow-md:0 3px 10px rgba(0,0,0,.26);
  --shadow-lg:0 8px 24px rgba(0,0,0,.34);
  --shadow-glow:0 0 0 1px rgba(56,189,248,.30);

  --err:var(--error); --ok:var(--success);
}

[data-theme="light"]{
  --bg:#f6f7fa;
  --bg-elevated:#eff1f6;
  --surface:#ffffff;
  --surface-2:#f4f5f9;
  --surface-hover:#eaecf3;
  --border:#e4e7ee;
  --border-strong:#cfd4e0;
  --text:#10141c;
  --text-muted:#59616f;
  --text-faint:#88909e;

  --primary:#0369a1;
  --primary-hover:#0480c2;
  --primary-active:#025782;
  --on-primary:#ffffff;
  --secondary:#4f46e5;
  --secondary-soft:rgba(79,70,229,.10);
  --accent:#b9791f;
  --accent-soft:rgba(185,121,31,.10);

  --success:#0a9767;
  --success-soft:rgba(10,151,103,.10);
  --warning:#b45309;
  --warning-soft:rgba(180,83,9,.10);
  --error:#dc2626;
  --error-soft:rgba(220,38,38,.10);
  --info:#2563eb;
  --info-soft:rgba(37,99,235,.10);
  --tg:#0088cc;
  --wa:#22b558;

  --focus-ring:rgba(3,105,161,.20);
  --shadow-sm:0 1px 1px rgba(16,20,28,.05);
  --shadow-md:0 2px 8px rgba(16,20,28,.07);
  --shadow-lg:0 8px 22px rgba(16,20,28,.10);
  --shadow-glow:0 0 0 1px rgba(3,105,161,.22);

  --err:var(--error); --ok:var(--success);
}

:root{
  --radius-sm:8px; --radius-md:11px; --radius-lg:14px; --radius-xl:18px; --radius-full:999px;
  --space-1:4px; --space-2:7px; --space-3:10px; --space-4:14px; --space-5:18px; --space-6:22px; --space-7:28px; --space-8:34px;
  --fs-2xs:10.5px; --fs-xs:11.5px; --fs-sm:12.5px; --fs-base:13.5px; --fs-md:14.5px; --fs-lg:16px; --fs-xl:18.5px; --fs-2xl:23px; --fs-3xl:28px;
  --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --container-w:480px;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);
  --t:.14s var(--ease);
}

/* ══════════════════════════════════════════════════════════════
   RESET + BASE
   ══════════════════════════════════════════════════════════════ */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:'Rabar','Segoe UI',Tahoma,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  margin:0;
  min-height:100dvh;
  display:flex; flex-direction:column; align-items:center;
  padding:var(--space-4);
  font-size:var(--fs-base);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background var(--t), color var(--t);
}
h1,h2,h3,p{ margin:0; }
button,input,select,textarea{ font-family:inherit; }
a{ color:inherit; }
::selection{ background:var(--primary); color:var(--on-primary); }
::placeholder{ color:var(--text-faint); }

@media (min-width:640px){
  body{
    padding:var(--space-8) var(--space-5);
    background:
      radial-gradient(720px 420px at 12% -8%, var(--secondary-soft), transparent 60%),
      radial-gradient(760px 460px at 108% 15%, var(--accent-soft), transparent 55%),
      var(--bg);
    background-attachment:fixed;
  }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

:focus{ outline:none; }
:focus-visible{ outline:2.5px solid var(--primary); outline-offset:2px; border-radius:6px; }

/* ══════════════════════════════════════════════════════════════
   ICONS
   ══════════════════════════════════════════════════════════════ */
.icn{ width:20px; height:20px; display:inline-block; vertical-align:middle; flex-shrink:0; }
.icn-sm{ width:16px; height:16px; }
.icn-lg{ width:28px; height:28px; }
.icn-xl{ width:34px; height:34px; }
.icn-spin{ animation:spin .85s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes popUp{ from{ transform:scale(.92); opacity:0; } to{ transform:scale(1); opacity:1; } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
@keyframes stepIn{ from{ opacity:0; transform:translateX(-14px); } to{ opacity:1; transform:translateX(0); } }
@keyframes slideDown{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }

/* ══════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════ */
.btn{
  appearance:none; border:none; cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:50px; padding:13px 22px; border-radius:var(--radius-md);
  font-size:var(--fs-md); font-weight:var(--fw-semibold);
  transition:transform var(--t), box-shadow var(--t), background var(--t), opacity var(--t), filter var(--t);
  text-decoration:none;
}
.btn-block{ width:100%; }
.btn-primary{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-active) 100%);
  color:var(--on-primary);
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover{ filter:brightness(1.06); box-shadow:var(--shadow-glow); transform:translateY(-1px); }
.btn-primary:active{ transform:translateY(0) scale(.99); filter:brightness(.98); }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; filter:none; }

.btn-ghost{
  background:var(--surface-2); color:var(--text); border:1.5px solid var(--border);
}
.btn-ghost:hover{ background:var(--surface-hover); border-color:var(--border-strong); }
.btn-ghost:active{ transform:scale(.99); }

.btn-text{
  background:none; border:none; color:var(--text-faint); font-size:var(--fs-xs);
  font-weight:var(--fw-semibold); cursor:pointer; padding:6px 4px;
}
.btn-text:hover{ color:var(--text-muted); }

.icon-btn{
  width:44px; height:44px; border-radius:var(--radius-md); border:1.5px solid var(--border);
  background:var(--surface-2); color:var(--text-muted); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t);
  text-decoration:none;
}
.icon-btn:hover{ background:var(--surface-hover); color:var(--text); border-color:var(--border-strong); }
.icon-btn:active{ transform:scale(.94); }
.icon-btn.danger:hover{ color:var(--error); border-color:var(--error); background:var(--error-soft); }
.icon-btn.accent-tg{ color:var(--tg); }
.icon-btn.accent-wa{ color:var(--wa); }

/* ══════════════════════════════════════════════════════════════
   FORM FIELDS
   ══════════════════════════════════════════════════════════════ */
.field{ margin-bottom:var(--space-5); }
.field-label{ display:block; font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--text-muted); margin:0 2px var(--space-2); }

.input{
  width:100%; background:var(--surface-2); border:1.5px solid var(--border);
  border-radius:var(--radius-md); padding:16px; color:var(--text);
  font-family:inherit; font-size:var(--fs-base); outline:none; text-align:center;
  transition:border-color var(--t), box-shadow var(--t), background var(--t);
}
.input:hover{ border-color:var(--border-strong); }
.input:focus{ border-color:var(--primary); background:var(--surface); box-shadow:0 0 0 4px var(--focus-ring); }
.input:disabled{ opacity:.55; cursor:not-allowed; }
.input[dir="ltr"]{ text-align:center; direction:ltr; unicode-bidi:bidi-override; }

.input-wrap{ position:relative; margin-bottom:var(--space-5); }
.input-wrap .input{ padding-inline:46px; margin-bottom:0; }
.input-ico{ position:absolute; inset-inline-end:16px; top:50%; transform:translateY(-50%); color:var(--text-faint); pointer-events:none; }

.pass-wrap{ position:relative; }
.pass-wrap .input{ padding-inline-end:44px; }
.pass-eye{
  position:absolute; inset-inline-end:6px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; background:none; border:none; cursor:pointer; color:var(--text-faint);
  display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm);
}
.pass-eye:hover{ color:var(--text-muted); background:var(--surface-hover); }

.select-wrap{ position:relative; margin-bottom:var(--space-5); }
select.input{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-inline-end:42px; cursor:pointer;
}
.select-chevron{ position:absolute; inset-inline-end:15px; top:50%; transform:translateY(-50%); color:var(--text-faint); pointer-events:none; }

.file-field{ margin-bottom:var(--space-5); }
input[type="file"].input{
  padding:13px 14px; font-size:var(--fs-sm); color:var(--text-muted); cursor:pointer;
}
input[type="file"].input::file-selector-button{
  font-family:inherit; margin-inline-end:12px; border:none; cursor:pointer;
  background:var(--surface-hover); color:var(--text); font-weight:var(--fw-semibold);
  padding:9px 14px; border-radius:var(--radius-sm); font-size:var(--fs-xs); transition:background var(--t);
}
input[type="file"].input::file-selector-button:hover{ background:var(--border-strong); }

.formatted-amount{ font-size:var(--fs-xs); color:var(--primary); font-weight:var(--fw-semibold); display:block; text-align:center; margin:-8px 2px 12px; font-variant-numeric:tabular-nums; }

.quick-amounts{ display:flex; gap:8px; margin:-6px 0 var(--space-5); }
.quick-amount-btn{
  flex:1; background:var(--surface-2); border:1.5px solid var(--border); color:var(--text-muted);
  border-radius:var(--radius-sm); padding:9px 6px; font-family:inherit; font-size:var(--fs-xs);
  font-weight:var(--fw-semibold); cursor:pointer; direction:ltr; unicode-bidi:bidi-override;
  transition:border-color var(--t), color var(--t), background var(--t);
}
.quick-amount-btn:hover{ border-color:var(--primary); color:var(--primary); background:var(--surface-hover); }
.quick-amount-btn:active{ transform:translateY(1px); }

/* ══════════════════════════════════════════════════════════════
   SURFACES: panel / card / modal
   ══════════════════════════════════════════════════════════════ */
.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-5); margin-bottom:var(--space-5); box-shadow:var(--shadow-sm);
}

.wallet-row{
  background:var(--accent-soft); border:1px solid rgba(245,185,66,.3); border-inline-start:4px solid var(--accent);
  padding:16px; border-radius:var(--radius-md);
  margin-bottom:var(--space-5);
}
.wallet-row-line{ display:flex; align-items:center; gap:8px; }
.wallet-row .wallet-label{ display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:var(--text); flex-shrink:0; }
.wallet-value{
  color:var(--accent); font-weight:var(--fw-bold); font-variant-numeric:tabular-nums;
  direction:ltr; text-align:center; font-size:var(--fs-sm); line-height:1.4;
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.copy-btn{ background:none; border:none; cursor:pointer; color:var(--accent); display:flex; padding:4px; border-radius:8px; transition:background var(--t); flex-shrink:0; }
.copy-btn:hover{ background:rgba(245,185,66,.15); }
.phone-format-hint{ font-size:var(--fs-2xs); color:var(--text-faint); display:block; text-align:center; margin:-8px 2px 12px; }
.wallet-value.locked-text{
  color:var(--error); font-weight:var(--fw-semibold); font-size:var(--fs-xs);
  white-space:normal; overflow:visible; text-align:center;
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:var(--error-soft); border-radius:var(--radius-full); padding:6px 12px;
}
.wallet-value.locked-text .icn{ width:15px; height:15px; flex-shrink:0; }

.total-box{
  background:var(--accent-soft); border:1px solid rgba(245,185,66,.3); border-radius:var(--radius-md);
  text-align:center; padding:var(--space-6) var(--space-5); margin-bottom:var(--space-5);
}
.total-box .total-value{ font-size:var(--fs-2xl); font-weight:var(--fw-bold); color:var(--accent); font-variant-numeric:tabular-nums; text-align:center; }
.total-box .total-value.warn-text{ font-size:var(--fs-xl); }
.total-box .fee-note{ font-size:var(--fs-xs); color:var(--warning); font-weight:var(--fw-medium); margin-top:8px; min-height:16px; }

.modal-overlay{
  position:fixed; inset:0; background:rgba(4,6,10,.72); 
  z-index:2000; display:none; align-items:center; justify-content:center; padding:var(--space-5);
}
.modal-card{
  background:var(--surface); padding:32px 26px 26px; border-radius:var(--radius-xl); border:1px solid var(--border);
  text-align:center; max-width:340px; width:100%; box-shadow:var(--shadow-lg); animation:popUp .35s var(--ease);
}
.modal-ico-wrap{ width:76px; height:76px; background:rgba(58,178,234,.12); border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color:var(--tg); }
.modal-ico-wrap svg,
.modal-ico-wrap .icon--solar{ width:34px; height:34px; }
.modal-card h2{ font-size:var(--fs-xl); font-weight:var(--fw-bold); margin-bottom:8px; }
.modal-card p{ font-size:var(--fs-sm); color:var(--text-muted); line-height:1.6; margin-bottom:22px; }

/* ══════════════════════════════════════════════════════════════
   MESSAGES / STATUS
   ══════════════════════════════════════════════════════════════ */
.amsg{ font-size:var(--fs-xs); text-align:center; padding:11px 14px; border-radius:var(--radius-sm); display:none; margin-top:10px; font-weight:var(--fw-medium); animation:slideDown .2s var(--ease); }
.amsg.ok{ background:var(--success-soft); border:1px solid rgba(52,211,153,.3); color:var(--success); }
.amsg.err{ background:var(--error-soft); border:1px solid rgba(248,113,111,.3); color:var(--error); }

.status-badge{ font-size:var(--fs-2xs); padding:4px 12px; border-radius:var(--radius-full); font-weight:var(--fw-bold); border:1px solid var(--warning); color:var(--warning); background:var(--warning-soft); white-space:nowrap; }
.status-badge.status-success{ border-color:var(--success) !important; color:var(--success) !important; background:var(--success-soft) !important; }
.status-badge.status-danger{ border-color:var(--error) !important; color:var(--error) !important; background:var(--error-soft) !important; }
.status-badge.status-correction{ border-color:var(--error) !important; color:var(--error) !important; background:var(--error-soft) !important; }
.status-badge.status-corrected{ border-color:var(--info) !important; color:var(--info) !important; background:var(--info-soft) !important; }

/* ══════════════════════════════════════════════════════════════
   TOP BAR / IDENTITY (main app header)
   ══════════════════════════════════════════════════════════════ */
.topbar{ width:100%; display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-4); }
.topbar-group{ display:flex; align-items:center; gap:8px; position:relative; }

.user-info{ display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; margin-bottom:var(--space-5); margin-top:-10px; }
.user-profile-img{
  width:64px; height:64px; border-radius:var(--radius-full); border:2.5px solid var(--primary);
  box-shadow:0 0 0 5px var(--secondary-soft); background:var(--surface-2); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
}
#userName{ font-size:var(--fs-lg); font-weight:var(--fw-bold); }

.social-mini-icons{ display:flex; gap:10px; margin-top:2px; }

.brand-badge{
  width:42px; height:42px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:var(--shadow-sm); text-decoration:none; transition:transform var(--t), box-shadow var(--t);
}
.brand-badge:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.brand-badge:active{ transform:translateY(0) scale(.96); }
.brand-badge svg,
.brand-badge .icon--solar{ width:19px; height:19px; }
.brand-badge.tg{ background:linear-gradient(135deg,#37b3f5,#1c8fd1); }
.brand-badge.wa{ background:linear-gradient(135deg,#2fd669,#1fa855); }

/* ══════════════════════════════════════════════════════════════
   NOTIFICATIONS (bell badge / dropdown panel / inline bar)
   ══════════════════════════════════════════════════════════════ */
.notif-badge{
  position:absolute; top:1px; inset-inline-end:1px; min-width:16px; height:16px; padding:0 4px;
  border-radius:var(--radius-full); background:var(--error); color:#fff; font-size:9px; font-weight:var(--fw-bold);
  display:none; align-items:center; justify-content:center; line-height:1; box-shadow:0 0 0 2px var(--surface);
}

.notif-bar{
  width:100%; display:flex; align-items:flex-start; gap:10px; background:var(--surface); border:1px solid var(--border);
  border-inline-start:4px solid var(--info); border-radius:var(--radius-md); padding:12px 13px;
  margin-bottom:var(--space-4); box-shadow:var(--shadow-sm); animation:fadeUp .3s var(--ease); display:none;
}
.notif-bar.order_status{ border-inline-start-color:var(--primary); }
.notif-bar.admin{ border-inline-start-color:var(--secondary); }
.notif-bar.order_approved{ border-inline-start-color:var(--success); }
.notif-bar.order_rejected{ border-inline-start-color:var(--error); }
.notif-bar-ico{ width:30px; height:30px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; }
.notif-bar-ico svg,
.notif-bar-ico .icon--solar{ width:16px; height:16px; }
.notif-bar-text{ flex:1; min-width:0; }
.notif-bar-title{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text); }
.notif-bar-msg{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; line-height:1.5; }
.notif-bar-close{ background:none; border:none; color:var(--text-faint); cursor:pointer; padding:3px; border-radius:6px; flex-shrink:0; }
.notif-bar-close:hover{ color:var(--text-muted); background:var(--surface-hover); }

.notif-panel{
  position:absolute; top:52px; inset-inline-start:0; width:320px; max-width:85vw; max-height:70vh;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  z-index:1500; display:none; flex-direction:column; overflow:hidden; opacity:0;
  transform:translateY(-8px) scale(.98); transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.notif-panel.open{ display:flex; opacity:1; transform:translateY(0) scale(1); }
.notif-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); flex-shrink:0; }
.notif-panel-head h3{ font-size:var(--fs-sm); font-weight:var(--fw-bold); }
.notif-panel-body{ overflow-y:auto; padding:6px; }
.notif-item{ display:flex; gap:10px; padding:10px; border-radius:var(--radius-md); cursor:pointer; transition:background var(--t); }
.notif-item:hover{ background:var(--surface-hover); }
.notif-item.unread{ background:var(--secondary-soft); }
.notif-item-ico{ width:28px; height:28px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; }
.notif-item-ico svg,
.notif-item-ico .icon--solar{ width:14px; height:14px; }
.notif-item-text{ flex:1; min-width:0; }
.notif-item-title{ display:block; font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--text); }
.notif-item-msg{ display:block; font-size:var(--fs-2xs); color:var(--text-muted); margin-top:2px; line-height:1.5; }
.notif-item-time{ display:block; font-size:var(--fs-2xs); color:var(--text-faint); margin-top:4px; }
.notif-empty{ text-align:center; color:var(--text-faint); font-size:var(--fs-xs); padding:26px 10px; }

/* ══════════════════════════════════════════════════════════════
   NEWS BANNER
   ══════════════════════════════════════════════════════════════ */
#newsBanner{
  width:100%; background:linear-gradient(90deg, var(--primary), var(--secondary)); color:var(--on-primary);
  padding:13px 16px; border-radius:var(--radius-md); margin-bottom:var(--space-5); font-weight:var(--fw-semibold);
  font-size:var(--fs-sm); display:none; align-items:center; gap:10px; box-shadow:var(--shadow-sm); animation:fadeUp .3s var(--ease);
}
#newsBanner .icn{ flex-shrink:0; }
#newsText{ transition:opacity .25s ease; }

/* ══════════════════════════════════════════════════════════════
   ORDER HISTORY
   ══════════════════════════════════════════════════════════════ */
.section-title{ font-size:var(--fs-md); font-weight:var(--fw-bold); display:flex; align-items:center; gap:8px; color:var(--text); margin:var(--space-2) 2px var(--space-3); }
.section-title .icn{ color:var(--primary); }

/* ══ Transaction card — type · amount · date · status ══════════ */
.tx-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:13px 14px; margin-bottom:10px; cursor:pointer;
  transition:border-color var(--t), transform var(--t);
}
.tx-card:hover{ border-color:var(--border-strong); }
.tx-card:active{ transform:scale(.995); }
.tx-card:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.tx-card.needs-action{ border-color:color-mix(in srgb, var(--error) 45%, transparent); }
.tx-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tx-route{ display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text); min-width:0; }
.tx-route-arrow{ display:flex; color:var(--text-faint); }
.tx-route-arrow .icn{ width:14px; height:14px; }
.tx-card-main{ display:flex; align-items:baseline; gap:8px; margin-top:8px; flex-wrap:wrap; }
.tx-amount{
  font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--success);
  font-variant-numeric:tabular-nums; unicode-bidi:isolate; overflow-wrap:anywhere;
}
.tx-amount-sent{
  font-size:var(--fs-xs); color:var(--text-muted); font-variant-numeric:tabular-nums;
  unicode-bidi:isolate; overflow-wrap:anywhere;
}
.tx-amount-sent b{ font-weight:var(--fw-semibold); color:var(--text); }
.tx-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:7px; font-size:var(--fs-2xs); color:var(--text-faint); }
.tx-code{ font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; unicode-bidi:isolate; }
.tx-card-action{
  margin-top:10px; padding:7px 10px; border-radius:var(--radius-sm);
  background:var(--error-soft); color:var(--error);
  font-size:var(--fs-2xs); font-weight:var(--fw-semibold);
}
.empty-state{ text-align:center; color:var(--text-faint); font-size:var(--fs-sm); padding:28px 10px; }

/* ══ Transaction details sheet ═════════════════════════════════ */
.tx-sheet-backdrop{ position:fixed; inset:0; background:rgba(4,10,20,.55); z-index:4900; animation:fadeIn .15s var(--ease); }
.tx-sheet-backdrop[hidden]{ display:none; }
.tx-sheet{
  position:fixed; inset-inline:0; bottom:0; z-index:4901;
  max-height:88vh; overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface); border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  border-top:1px solid var(--border); padding:10px 16px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .22s var(--ease);
}
.tx-sheet.open{ transform:translateY(0); }
.tx-sheet[hidden]{ display:none; }
.tx-sheet-grip{ width:40px; height:4px; border-radius:2px; background:var(--border-strong); margin:2px auto 10px; }
.tx-sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.tx-sheet-head h3{ font-size:var(--fs-md); }
.tx-sheet-close{
  width:32px; height:32px; border-radius:var(--radius-full); flex:0 0 32px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); cursor:pointer;
}
.tx-dhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.tx-dcode{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--radius-full);
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted);
  font:inherit; font-size:var(--fs-2xs); font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; cursor:pointer;
}
.tx-dcode .icn, .tx-dcode svg{ width:13px; height:13px; opacity:.75; }
.tx-damounts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.tx-damounts > div{ background:var(--surface-2); border-radius:var(--radius-md); padding:11px 12px; min-width:0; }
.tx-damounts small{ display:block; font-size:var(--fs-2xs); color:var(--text-faint); margin-bottom:3px; }
.tx-damounts b{ font-size:var(--fs-md); font-variant-numeric:tabular-nums; unicode-bidi:isolate; overflow-wrap:anywhere; }
.tx-damounts b.recv{ color:var(--success); }
.tx-dgroup{ border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.tx-drow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; font-size:var(--fs-sm); }
.tx-drow + .tx-drow{ border-top:1px solid var(--border); }
.tx-dlbl{ color:var(--text-muted); flex-shrink:0; }
.tx-dval{ color:var(--text); font-weight:var(--fw-semibold); text-align:end; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; unicode-bidi:isolate; }
.tx-droute{ display:inline-flex; align-items:center; gap:6px; }
.tx-droute .tx-route-arrow .icn{ width:14px; height:14px; color:var(--text-faint); }
.tx-dnote{ margin-top:12px; padding:11px 12px; border-radius:var(--radius-md); background:var(--surface-2); border:1px solid var(--border); }
.tx-dnote.warn{ background:var(--error-soft); border-color:color-mix(in srgb, var(--error) 35%, transparent); }
.tx-dnote b{ display:block; font-size:var(--fs-2xs); color:var(--text-muted); margin-bottom:4px; }
.tx-dnote.warn b{ color:var(--error); }
.tx-dnote p{ margin:0; font-size:var(--fs-sm); line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; }
.tx-dnote .btn{ margin-top:10px; }
.tx-dreceipt{ margin-top:12px; }
.tx-dreceipt b{ display:block; font-size:var(--fs-2xs); color:var(--text-muted); margin-bottom:6px; }
.tx-dreceipt img{ width:100%; display:block; border-radius:var(--radius-md); border:1px solid var(--border); cursor:pointer; }
@media (min-width:700px){
  .tx-sheet{
    inset-inline:auto; inset-inline-start:50%; bottom:auto; top:50%;
    width:min(520px, calc(100vw - 40px)); transform:translate(50%, -46%) scale(.98);
    border-radius:var(--radius-xl); border:1px solid var(--border); opacity:0;
  }
  .tx-sheet.open{ transform:translate(50%, -50%) scale(1); opacity:1; }
  .tx-sheet-grip{ display:none; }
}

/* ══════════════════════════════════════════════════════════════
   AUTH SCREEN
   ══════════════════════════════════════════════════════════════ */
#authWrap{ position:fixed; inset:0; background:var(--bg); z-index:1000; display:flex; align-items:flex-start; justify-content:center; padding:40px 18px 60px; overflow-y:auto; transition:background var(--t); }
@media (min-width:640px){
  #authWrap{
    background:
      radial-gradient(720px 420px at 12% -8%, var(--secondary-soft), transparent 60%),
      radial-gradient(760px 460px at 108% 15%, var(--accent-soft), transparent 55%),
      var(--bg);
  }
}
.auth-inner{ width:100%; max-width:var(--container-w); }
.auth-topbar{ display:flex; justify-content:flex-end; margin-bottom:6px; }
.auth-brand{ text-align:center; margin-bottom:34px; }
.brand-mark{ width:58px; height:58px; border-radius:var(--radius-lg); background:linear-gradient(135deg, var(--primary), var(--secondary)); display:flex; align-items:center; justify-content:center; color:var(--on-primary); box-shadow:var(--shadow-glow); margin:0 auto 16px; }
.auth-brand h1{ font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--text); letter-spacing:.2px; }
.auth-brand p{ font-size:var(--fs-sm); color:var(--text-muted); margin-top:6px; }

.auth-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:30px 24px; box-shadow:var(--shadow-lg); }

.auth-steps{ display:flex; justify-content:center; margin-bottom:22px; }
.auth-steps-track{ display:flex; gap:8px; align-items:center; }
.auth-step-dot{ width:8px; height:8px; border-radius:var(--radius-full); background:var(--border-strong); transition:all .35s var(--ease); }
.auth-step-dot.done{ background:var(--primary); width:20px; border-radius:4px; }
.auth-step-dot.active{ background:var(--primary); width:16px; border-radius:4px; }
.auth-step{ animation:stepIn .3s var(--ease); }

.auth-step-icon{ width:66px; height:66px; border-radius:var(--radius-lg); background:var(--surface-2); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color:var(--primary); }
.auth-step-icon.success{ background:var(--success-soft); border-color:rgba(52,211,153,.35); color:var(--success); }
.auth-step-label{ text-align:center; margin-bottom:22px; }
.auth-step-label h3{ font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--text); margin-bottom:5px; }
.auth-step-label p{ font-size:var(--fs-xs); color:var(--text-muted); }

.auth-step-back{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:var(--fs-xs); color:var(--text-faint); cursor:pointer; margin-top:16px; padding:6px 0; user-select:none; font-weight:var(--fw-medium); }
.auth-step-back:hover{ color:var(--text-muted); }
.auth-link{ color:var(--primary); cursor:pointer; font-weight:var(--fw-medium); }
.auth-link:hover{ text-decoration:underline; }

/* OTP */
.otp-inputs{ display:flex; gap:9px; justify-content:center; margin:18px 0; direction:ltr; }
.otp-digit{ width:44px; height:54px; border-radius:var(--radius-sm); border:1.5px solid var(--border); background:var(--surface-2); font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--text); text-align:center; outline:none; transition:all var(--t); font-variant-numeric:tabular-nums; }
.otp-digit:focus{ border-color:var(--primary); background:var(--surface); box-shadow:0 0 0 4px var(--focus-ring); }
.otp-timer{ font-size:var(--fs-xs); color:var(--text-muted); text-align:center; margin-top:8px; }
.otp-timer span{ font-weight:var(--fw-bold); color:var(--accent); font-variant-numeric:tabular-nums; }
.otp-resend{ font-size:var(--fs-xs); color:var(--primary); text-align:center; margin-top:10px; cursor:pointer; display:none; align-items:center; justify-content:center; gap:6px; font-weight:var(--fw-semibold); }

/* ══════════════════════════════════════════════════════════════
   APP CONTAINER
   ══════════════════════════════════════════════════════════════ */
.app-wrapper{ width:100%; max-width:var(--container-w); display:none; }

@media (min-width:640px){
  .auth-card{ padding:36px 32px; }
  .panel{ padding:var(--space-6); }
}

/* ══════════════════════════════════════════════════════════════
   FIELD ERRORS (inline validation)
   ══════════════════════════════════════════════════════════════ */
.field-error{
  display:none; align-items:center; justify-content:center; gap:5px; font-size:var(--fs-2xs); color:var(--error);
  font-weight:var(--fw-medium); margin:8px auto 0; animation:slideDown .2s var(--ease); text-align:center;
  background:var(--error-soft); border-radius:var(--radius-sm); padding:6px 12px; width:fit-content; max-width:100%;
}
.field-error.show{ display:flex; }
.field-error svg,
.field-error .icon--solar{ width:14px; height:14px; flex-shrink:0; }
.input.has-error, .picker-trigger.has-error{ border-color:var(--error) !important; box-shadow:0 0 0 4px var(--error-soft) !important; }

/* ══════════════════════════════════════════════════════════════
   PICKER TRIGGER (replaces native <select> for method pickers)
   ══════════════════════════════════════════════════════════════ */
.sr-native-select{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Keep the anti-bot field available to form scanners without placing it
   thousands of pixels outside the RTL page.  Off-screen positioning with
   left:-9999px creates a huge horizontal canvas on Android Chrome, which in
   turn moves fixed sheets and the bottom navigation outside the viewport. */
.hp-field{
  position:fixed;
  inset:0 auto auto 0;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  opacity:0;
  pointer-events:none;
  contain:strict;
}
.picker-trigger{
  width:100%; display:flex; align-items:center; gap:14px; appearance:none; cursor:pointer;
  background:var(--surface-2); border:1.5px solid var(--border); border-radius:var(--radius-md);
  padding:14px 16px; color:var(--text); font-family:inherit; text-align:start;
  transition:border-color var(--t), box-shadow var(--t), background var(--t), transform var(--t);
}
.picker-trigger:hover{ border-color:var(--border-strong); }
.picker-trigger:active{ transform:scale(.995); }
.picker-trigger:focus-visible{ border-color:var(--primary); box-shadow:0 0 0 4px var(--focus-ring); }
.picker-trigger .method-icon{ width:34px; height:34px; }
.picker-trigger-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; text-align:center; }
.picker-trigger-label{ font-size:var(--fs-2xs); color:var(--text-faint); }
.picker-trigger-value{ font-size:var(--fs-base); font-weight:var(--fw-semibold); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.picker-trigger .select-chevron{ position:static; transform:none; }

.method-icon{
  width:36px; height:36px; border-radius:var(--radius-sm); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.method-icon svg,
.method-icon .icon--solar{ width:19px; height:19px; }
.method-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
.method-icon.has-img{ box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(0,0,0,.06); }
.method-icon.sz-sm{ width:28px; height:28px; border-radius:8px; }
.method-icon.sz-sm svg,
.method-icon.sz-sm .icon--solar{ width:15px; height:15px; }

/* ══════════════════════════════════════════════════════════════
   SHEETS (bottom-sheet on mobile / centered popover on desktop)
   ══════════════════════════════════════════════════════════════ */
.sheet-overlay{
  position:fixed; inset:0; background:rgba(4,6,10,.6); 
  z-index:2100; display:none; align-items:flex-end; justify-content:center;
  opacity:0; transition:opacity .16s var(--ease-soft);
}
.sheet-overlay.open{ display:flex; opacity:1; }
.sheet{
  width:100%; max-width:var(--container-w); background:var(--surface);
  border-radius:22px 22px 0 0; border:1px solid var(--border); border-bottom:none;
  padding:10px 0 max(18px, env(safe-area-inset-bottom)); box-shadow:var(--shadow-lg);
  transform:translateY(100%); transition:transform .24s var(--ease-soft);
  max-height:78vh; min-height:0; display:flex; flex-direction:column; overflow:hidden; will-change:transform;
}
.sheet-overlay.open .sheet{ transform:translateY(0); }
.sheet-grabber{ width:38px; height:4px; border-radius:var(--radius-full); background:var(--border-strong); margin:0 auto 14px; }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:0 var(--space-5) 12px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.sheet-head h3{ font-size:var(--fs-md); font-weight:var(--fw-bold); }
.sheet-close{ width:32px; height:32px; border-radius:var(--radius-full); border:none; background:var(--surface-2); color:var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.sheet-close:hover{ background:var(--surface-hover); color:var(--text); }
.sheet-body{
  flex:1 1 auto; min-height:0; max-height:100%; overflow-y:auto; overflow-x:hidden;
  padding:6px var(--space-3) var(--space-2);
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y;
  scrollbar-gutter:stable;
}

.sheet-option{
  width:100%; display:flex; align-items:center; gap:13px; padding:12px 12px; border:none;
  background:none; border-radius:var(--radius-md); cursor:pointer; text-align:start; font-family:inherit;
  transition:background var(--t); margin-bottom:2px;
}
.sheet-option:hover{ background:var(--surface-hover); }
.sheet-option:active{ transform:scale(.99); }
.sheet-option-text{ flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
.sheet-option-name{ font-size:var(--fs-base); font-weight:var(--fw-semibold); color:var(--text); }
.sheet-option-sub{ font-size:var(--fs-2xs); color:var(--text-faint); }
.sheet-option-check{ width:22px; height:22px; border-radius:var(--radius-full); border:1.5px solid var(--border-strong); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:transparent; transition:all var(--t); }
.sheet-option.selected{ background:var(--secondary-soft); }
.sheet-option.selected .sheet-option-check{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.sheet-option.selected .sheet-option-name{ color:var(--primary); }
.sheet-option.locked-option{ opacity:.5; cursor:not-allowed; }
.sheet-option.locked-option .sheet-option-sub{ color:var(--error); }
.picker-empty{ padding:22px 14px 26px; text-align:center; font-size:var(--fs-sm); color:var(--text-muted); line-height:1.8; }

@media (min-width:640px){
  .sheet-overlay{ align-items:center; }
  .sheet{
    border-radius:var(--radius-xl); border-bottom:1px solid var(--border);
    max-width:380px; transform:translateY(8px) scale(.98); opacity:0;
    transition:transform .2s var(--ease-soft), opacity .16s var(--ease-soft);
  }
  .sheet-overlay.open .sheet{ transform:translateY(0) scale(1); opacity:1; }
  .sheet-head{ padding:2px var(--space-5) 14px; }
  .sheet-grabber{ display:none; }
}

/* ══════════════════════════════════════════════════════════════
   TOASTS
   ══════════════════════════════════════════════════════════════ */
.toast-container{
  position:fixed; top:max(16px, env(safe-area-inset-top)); left:0; right:0; z-index:3000;
  display:flex; flex-direction:column; align-items:center; gap:10px; padding:0 16px; pointer-events:none;
}
.toast{
  pointer-events:auto; width:100%; max-width:400px; display:flex; align-items:flex-start; gap:11px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:13px 14px; box-shadow:var(--shadow-lg); animation:toastIn .28s var(--ease);
  border-inline-start:4px solid var(--info);
}
.toast.leaving{ animation:toastOut .22s var(--ease) forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(-14px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(-10px) scale(.97); } }
.toast-ico{ width:24px; height:24px; border-radius:var(--radius-full); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; margin-top:1px; }
.toast-ico svg,
.toast-ico .icon--solar{ width:14px; height:14px; }
.toast-text{ flex:1; min-width:0; }
.toast-title{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text); }
.toast-msg{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; line-height:1.5; }
.toast-x{ background:none; border:none; color:var(--text-faint); cursor:pointer; padding:2px; flex-shrink:0; border-radius:6px; display:flex; }
.toast-x:hover{ color:var(--text-muted); background:var(--surface-hover); }
.toast.success{ border-inline-start-color:var(--success); }
.toast.success .toast-ico{ background:var(--success); }
.toast.error{ border-inline-start-color:var(--error); }
.toast.error .toast-ico{ background:var(--error); }
.toast.warning{ border-inline-start-color:var(--warning); }
.toast.warning .toast-ico{ background:var(--warning); }
.toast.info{ border-inline-start-color:var(--info); }
.toast.info .toast-ico{ background:var(--info); }
@media (min-width:640px){
  .toast-container{ left:auto; right:max(20px, env(safe-area-inset-right)); align-items:flex-end; }
  .toast{ width:360px; }
}

/* ══════════════════════════════════════════════════════════════
   RESULT MODAL (success / error / warning dialogs)
   ══════════════════════════════════════════════════════════════ */
.result-modal-card{ position:relative; }
.result-order-chip{
  display:inline-flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-full); padding:8px 18px; font-size:var(--fs-sm); font-weight:var(--fw-bold);
  color:var(--primary); margin-bottom:18px; font-variant-numeric:tabular-nums;
}
.result-modal-actions{ display:flex; flex-direction:column; gap:10px; }
.modal-ico-wrap.success{ background:var(--success-soft); color:var(--success); }
.modal-ico-wrap.error{ background:var(--error-soft); color:var(--error); }
.modal-ico-wrap.warning{ background:var(--warning-soft); color:var(--warning); }

/* ══════════════════════════════════════════════════════════════
   CONFIRM SHEET (order summary before submit)
   ══════════════════════════════════════════════════════════════ */
.confirm-summary{ padding:2px 4px 4px; }
.confirm-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--border); font-size:var(--fs-sm); }
.confirm-row:last-child{ border-bottom:none; }
.confirm-row-label{ color:var(--text-muted); display:flex; align-items:center; gap:8px; }
.confirm-row-value{ color:var(--text); font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; text-align:end; }
.confirm-row-value.accent{ color:var(--accent); font-weight:var(--fw-bold); font-size:var(--fs-md); }
.confirm-actions{ display:flex; gap:10px; padding:16px var(--space-5) 4px; }
.confirm-actions .btn{ flex:1; }

/* ══════════════════════════════════════════════════════════════
   ROUTED PAGES  (/, /transactions, /changes, /rules, /profile)
   ══════════════════════════════════════════════════════════════ */
.page{ display:none; width:100%; }
.page.active{ display:block; animation:pageIn .24s var(--ease); }
@keyframes pageIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.page-head{ margin:2px 2px 18px; }
.page-head h2{ font-size:var(--fs-xl); font-weight:var(--fw-bold); display:flex; align-items:center; gap:9px; }
.page-head h2 .icn{ color:var(--primary); }
.page-head p{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:5px; line-height:1.6; }

/* ── top bar brand ─────────────────────────────────────────── */
.topbar-brand{ display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--text); white-space:nowrap; }
.tb-mark{
  width:27px; height:27px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--primary), var(--secondary)); color:var(--on-primary); box-shadow:var(--shadow-sm);
}
.tb-mark svg,
.tb-mark .icon--solar{ width:15px; height:15px; }

/* ── home greeting ─────────────────────────────────────────── */
.home-greet{ display:flex; align-items:center; gap:12px; margin:0 2px var(--space-5); }
.greet-av{
  width:46px; height:46px; border-radius:var(--radius-full); flex-shrink:0;
  background:var(--secondary-soft); border:1.5px solid var(--border); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:var(--fs-md); font-weight:var(--fw-bold);
}
.greet-txt{ flex:1; min-width:0; }
.greet-hi{ display:block; font-size:var(--fs-2xs); color:var(--text-faint); margin-bottom:1px; }
.greet-txt #userName{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ══════════════════════════════════════════════════════════════
   BOTTOM NAV
   ══════════════════════════════════════════════════════════════ */
body.has-nav{ padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }

.bottom-nav{
  position:fixed; inset-inline:0; bottom:0; z-index:900;
  display:flex; justify-content:center;
  background:var(--bg-elevated); border-top:1px solid var(--border);
  box-shadow:0 -6px 24px rgba(0,0,0,.18);
  padding:7px 12px calc(7px + env(safe-area-inset-bottom, 0px));
  
}
.bottom-nav-inner{ width:100%; max-width:var(--container-w); display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.bn-item{
  appearance:none; border:none; background:none; cursor:pointer; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 2px 4px;
  color:var(--text-faint); font-size:var(--fs-2xs); font-weight:var(--fw-medium);
  transition:color var(--t), transform var(--t); text-decoration:none; position:relative;
}
.bn-ico{
  width:46px; height:29px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center;
  transition:background var(--t), color var(--t); position:relative;
}
.bn-ico .icn{ width:21px; height:21px; }
.bn-item:active{ transform:scale(.94); }
.bn-item.on{ color:var(--primary); font-weight:var(--fw-bold); }
.bn-item.on .bn-ico{ background:var(--secondary-soft); color:var(--primary); }
.bn-dot{
  position:absolute; top:2px; inset-inline-end:9px; min-width:15px; height:15px; padding:0 4px;
  background:var(--error); color:#fff; border-radius:var(--radius-full); font-size:9px; font-weight:var(--fw-bold);
  display:none; align-items:center; justify-content:center; line-height:1; box-shadow:0 0 0 2px var(--bg-elevated);
}

/* ══════════════════════════════════════════════════════════════
   TRANSACTIONS PAGE — stats / search / horizontal filters
   ══════════════════════════════════════════════════════════════ */
/* ══ Transactions summary strip ════════════════════════════════ */
.tx-summary{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:11px 14px 12px; margin-bottom:12px;
}
.tx-summary[hidden]{ display:none; }
.tx-sum-cap{ display:block; font-size:var(--fs-2xs); color:var(--text-faint); margin-bottom:8px; }
.tx-sum-pair{ display:flex; align-items:baseline; gap:10px; }
.tx-sum-item{ flex:1; min-width:0; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.tx-sum-item.recv{ justify-content:flex-end; text-align:end; }
.tx-sum-lbl{ font-size:var(--fs-2xs); color:var(--text-faint); }
.tx-sum-val{ font-size:var(--fs-md); font-weight:var(--fw-bold); font-variant-numeric:tabular-nums; unicode-bidi:isolate; overflow-wrap:anywhere; }
.tx-sum-item.recv .tx-sum-val{ color:var(--success); }
.tx-sum-sub{ font-size:var(--fs-2xs); color:var(--text-faint); unicode-bidi:isolate; }

.search-wrap{ position:relative; margin-bottom:12px; }
.search-wrap .input{ padding-inline-start:44px; padding-inline-end:40px; margin:0; }
.search-ico{ position:absolute; inset-inline-start:15px; top:50%; transform:translateY(-50%); color:var(--text-faint); pointer-events:none; }
.search-clear{
  position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%);
  background:var(--surface-hover); border:none; cursor:pointer; color:var(--text-muted);
  width:24px; height:24px; border-radius:var(--radius-full); display:none; align-items:center; justify-content:center;
}
.search-clear.show{ display:flex; }

.filter-scroll{
  display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; margin:0 -2px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.filter-scroll::-webkit-scrollbar{ display:none; }
.filter-chip{
  appearance:none; cursor:pointer; font-family:inherit; white-space:nowrap; flex-shrink:0;
  background:var(--surface-2); border:1.5px solid var(--border); color:var(--text-muted);
  border-radius:var(--radius-full); padding:8px 15px; font-size:var(--fs-xs); font-weight:var(--fw-medium);
  display:inline-flex; align-items:center; gap:6px; transition:all var(--t);
}
.filter-chip .icn{ width:14px; height:14px; }
.filter-chip:hover{ border-color:var(--border-strong); color:var(--text); }
.filter-chip.on{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); font-weight:var(--fw-semibold); }
.filter-chip .chip-count{
  background:rgba(255,255,255,.22); border-radius:var(--radius-full); padding:1px 6px; font-size:10px; font-weight:var(--fw-bold);
}
.filter-chip:not(.on) .chip-count{ background:var(--surface-hover); color:var(--text-faint); }
.filter-chip .chip-count:empty{ display:none; }

.result-count{ font-size:var(--fs-2xs); color:var(--text-faint); margin:2px 2px 10px; }
.result-count:empty{ display:none; }

/* order id chip inside a card */

/* ══════════════════════════════════════════════════════════════
   CHANGE LOG PAGE
   ══════════════════════════════════════════════════════════════ */
.chg-item{
  display:flex; gap:11px; align-items:flex-start; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:12px 13px; margin-bottom:9px; box-shadow:var(--shadow-sm);
}
.chg-ico{ width:32px; height:32px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.chg-ico .icn{ width:16px; height:16px; }
.chg-ico.up{ background:var(--success-soft); color:var(--success); }
.chg-ico.down{ background:var(--error-soft); color:var(--error); }
.chg-ico.same{ background:var(--info-soft); color:var(--info); }
.chg-body{ flex:1; min-width:0; }
.chg-title{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.chg-route{ direction:ltr; unicode-bidi:isolate; }
.chg-field{ font-size:var(--fs-2xs); color:var(--text-faint); margin-top:3px; }
.chg-vals{ display:flex; align-items:center; gap:8px; margin-top:7px; font-size:var(--fs-xs); font-variant-numeric:tabular-nums; direction:ltr; }
.chg-old{ color:var(--text-faint); text-decoration:line-through; }
.chg-new{ color:var(--text); font-weight:var(--fw-bold); }
.chg-time{ font-size:var(--fs-2xs); color:var(--text-faint); margin-top:6px; }

/* ══════════════════════════════════════════════════════════════
   RULES PAGE
   ══════════════════════════════════════════════════════════════ */
.rule-item{
  display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:14px; margin-bottom:10px;
}
.rule-num{
  width:28px; height:28px; border-radius:9px; flex-shrink:0; background:var(--secondary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-weight:var(--fw-bold); font-size:var(--fs-xs);
}
.rule-txt h4{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); margin:0 0 4px; }
.rule-txt p{ font-size:var(--fs-xs); color:var(--text-muted); line-height:1.7; }
.rule-note{
  display:flex; gap:10px; align-items:flex-start; background:var(--warning-soft); border:1px solid var(--warning);
  border-radius:var(--radius-md); padding:13px; font-size:var(--fs-xs); color:var(--text); line-height:1.7; margin-top:4px;
}
.rule-note .icn{ color:var(--warning); flex-shrink:0; }

/* ══════════════════════════════════════════════════════════════
   PROFILE PAGE
   ══════════════════════════════════════════════════════════════ */
.pf-hero{
  display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl);
  padding:24px 18px 20px; box-shadow:var(--shadow-sm); margin-bottom:14px;
}
.pf-avatar{
  width:76px; height:76px; border-radius:var(--radius-full);
  background:linear-gradient(135deg, var(--primary), var(--secondary)); color:var(--on-primary);
  display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xl); font-weight:var(--fw-bold);
  box-shadow:var(--shadow-glow);
}
.pf-name{ font-size:var(--fs-lg); font-weight:var(--fw-bold); }
.pf-email{ font-size:var(--fs-xs); color:var(--text-muted); direction:ltr; }
.pf-chips{ display:flex; gap:7px; flex-wrap:wrap; justify-content:center; margin-top:3px; }
.pf-chip{
  font-size:var(--fs-2xs); padding:5px 12px; border-radius:var(--radius-full);
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted);
  display:inline-flex; align-items:center; gap:5px;
}
.pf-chip .icn{ width:13px; height:13px; }
.pf-chip.admin{ background:var(--secondary-soft); border-color:var(--secondary); color:var(--secondary); }

.pf-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px; margin-bottom:14px; box-shadow:var(--shadow-sm);
}
.pf-card-title{
  font-size:var(--fs-sm); font-weight:var(--fw-bold); display:flex; align-items:center; gap:8px;
  margin-bottom:14px; color:var(--text);
}
.pf-card-title .icn{ color:var(--primary); width:17px; height:17px; }

.pf-menu{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:14px; }
.pf-menu-item{
  display:flex; align-items:center; gap:12px; width:100%; padding:14px 15px; cursor:pointer;
  background:none; border:none; border-bottom:1px solid var(--border); font-family:inherit; color:var(--text);
  font-size:var(--fs-sm); text-align:start; transition:background var(--t);
}
.pf-menu-item:last-child{ border-bottom:none; }
.pf-menu-item:hover{ background:var(--surface-hover); }
.pf-menu-item:active{ background:var(--surface-2); }
.pf-menu-ico{
  width:34px; height:34px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--primary);
}
.pf-menu-ico .icn{ width:17px; height:17px; }
.pf-menu-txt{ flex:1; min-width:0; }
.pf-menu-txt b{ display:block; font-weight:var(--fw-semibold); font-size:var(--fs-sm); }
.pf-menu-txt span{ display:block; font-size:var(--fs-2xs); color:var(--text-faint); margin-top:2px; }
.pf-menu-arrow{ color:var(--text-faint); flex-shrink:0; }
.pf-menu-item.danger{ color:var(--error); }
.pf-menu-item.danger .pf-menu-ico{ background:var(--error-soft); color:var(--error); }

.pf-app-version{ text-align:center; font-size:var(--fs-2xs); color:var(--text-faint); padding:6px 0 4px; }

/* ══════════════════════════════════════════════════════════════
   NOTIFICATIONS — redesigned panel (bottom sheet on phones)
   ══════════════════════════════════════════════════════════════ */
.notif-backdrop{
  position:fixed; inset:0; background:rgba(4,7,13,.55); z-index:1400; opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease); 
}
.notif-backdrop.open{ opacity:1; pointer-events:auto; }

.notif-panel{
  position:fixed; inset-inline:0; bottom:0; top:auto; width:100%; max-width:100%; max-height:80vh;
  border-radius:var(--radius-xl) var(--radius-xl) 0 0; border:1px solid var(--border); border-bottom:none;
  background:var(--surface); box-shadow:var(--shadow-lg); z-index:1500;
  display:flex; flex-direction:column; overflow:hidden;
  opacity:1; transform:translateY(102%); transition:transform .28s var(--ease-soft), visibility .28s;
  padding-bottom:env(safe-area-inset-bottom, 0px);
  visibility:hidden; pointer-events:none;
}
.notif-panel.open{ display:flex; opacity:1; transform:translateY(0); visibility:visible; pointer-events:auto; }
.notif-grabber{ width:42px; height:4px; border-radius:var(--radius-full); background:var(--border-strong); margin:10px auto 2px; flex-shrink:0; }

.notif-panel-head{ display:flex; align-items:center; gap:10px; padding:12px 16px 12px; border-bottom:1px solid var(--border); }
.notif-panel-head h3{ font-size:var(--fs-md); font-weight:var(--fw-bold); display:flex; align-items:center; gap:8px; }
.notif-panel-head h3 .icn{ color:var(--primary); width:18px; height:18px; }
.notif-head-count{
  background:var(--error); color:#fff; font-size:10px; font-weight:var(--fw-bold);
  border-radius:var(--radius-full); padding:2px 7px; line-height:1.4;
}
.notif-head-spacer{ flex:1; }
.notif-panel-head .btn-text{ font-size:var(--fs-2xs); padding:6px 8px; }

.notif-panel-body{ overflow-y:auto; padding:8px 10px 16px; -webkit-overflow-scrolling:touch; }
.notif-day{ font-size:var(--fs-2xs); color:var(--text-faint); font-weight:var(--fw-semibold); margin:10px 6px 6px; }

.notif-item{
  display:flex; gap:11px; padding:12px 12px; border-radius:var(--radius-md); cursor:pointer;
  transition:background var(--t), transform var(--t); position:relative; align-items:flex-start;
  border:1px solid transparent;
}
.notif-item:active{ transform:scale(.99); }
.notif-item.unread{ background:var(--surface-2); border-color:var(--border); }
.notif-item.unread::before{
  content:''; position:absolute; inset-inline-start:0; top:14px; bottom:14px; width:3px;
  border-radius:var(--radius-full); background:var(--primary);
}
.notif-item.unread.ok::before{ background:var(--success); }
.notif-item.unread.no::before{ background:var(--error); }
.notif-item.unread.msg::before{ background:var(--secondary); }

.notif-item-ico{ width:36px; height:36px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.notif-item-ico svg,
.notif-item-ico .icon--solar{ width:17px; height:17px; }
.notif-item-ico.ok{ background:var(--success-soft); color:var(--success); }
.notif-item-ico.no{ background:var(--error-soft); color:var(--error); }
.notif-item-ico.upd{ background:var(--info-soft); color:var(--info); }
.notif-item-ico.msg{ background:var(--secondary-soft); color:var(--secondary); }

.notif-item-title{ display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text); }
.notif-item-msg{ display:block; font-size:var(--fs-xs); color:var(--text-muted); margin-top:3px; line-height:1.65; }
.notif-item-time{ display:flex; align-items:center; gap:5px; font-size:var(--fs-2xs); color:var(--text-faint); margin-top:6px; }
.notif-item-time .icn{ width:12px; height:12px; }
.notif-unread-dot{ width:7px; height:7px; border-radius:var(--radius-full); background:var(--primary); flex-shrink:0; }

.notif-empty{ text-align:center; color:var(--text-faint); font-size:var(--fs-xs); padding:34px 10px 40px; }
.notif-empty .icn{ width:38px; height:38px; color:var(--border-strong); display:block; margin:0 auto 12px; }

@media (min-width:640px){
  .notif-panel{
    position:absolute; inset-inline-start:0; inset-inline-end:auto; top:52px; bottom:auto;
    width:370px; max-width:88vw; max-height:72vh; border-radius:var(--radius-lg); border-bottom:1px solid var(--border);
    transform:translateY(-8px) scale(.98); opacity:0;
    transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  }
  .notif-panel.open{ transform:translateY(0) scale(1); opacity:1; }
  .notif-grabber{ display:none; }
  .notif-backdrop{ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* ── section title with a trailing link ─────────────────────── */
.section-title .title-link{
  margin-inline-start:auto; font-size:var(--fs-2xs); font-weight:var(--fw-semibold); color:var(--primary);
  cursor:pointer; display:inline-flex; align-items:center; gap:4px;
}
.section-title .title-link .icn{ width:13px; height:13px; }

/* inline notification bar — soft tinted icon tiles */
.notif-bar-ico.ok{  background:var(--success-soft); color:var(--success); }
.notif-bar-ico.no{  background:var(--error-soft);   color:var(--error); }
.notif-bar-ico.upd{ background:var(--info-soft);    color:var(--info); }
.notif-bar-ico.msg{ background:var(--secondary-soft); color:var(--secondary); }
.notif-bar{ cursor:default; }

/* ══════════════════════════════════════════════════════════════
   RATE BOARD + CHANGE LOG  (/changes)
   ══════════════════════════════════════════════════════════════ */
.method-icon.sz-xs{ width:22px; height:22px; border-radius:7px; }
.method-icon.sz-xs svg,
.method-icon.sz-xs .icon--solar{ width:12px; height:12px; }

.rates-now{ display:flex; flex-direction:column; gap:9px; margin-bottom:6px; }
.rate-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:13px 14px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:9px;
}
.rate-route{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--text); }
.rate-w{ display:inline-flex; align-items:center; gap:6px; }
.rate-arrow{ color:var(--text-faint); display:inline-flex; }
.rate-arrow .icn{ width:16px; height:16px; }

.rate-eq{
  display:flex; align-items:center; gap:10px; direction:ltr; justify-content:flex-start;
  background:var(--surface-2); border-radius:var(--radius-md); padding:10px 12px;
  font-variant-numeric:tabular-nums;
}
.rate-in{ font-size:var(--fs-sm); color:var(--text-muted); font-weight:var(--fw-medium); }
.rate-eqico{ color:var(--text-faint); display:inline-flex; }
.rate-eqico .icn{ width:15px; height:15px; }
.rate-out{ font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--success); }
.rate-fee{ font-size:var(--fs-2xs); color:var(--text-faint); }

.chg-item{
  display:flex; gap:11px; align-items:flex-start; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:13px; margin-bottom:9px; box-shadow:var(--shadow-sm);
}
.chg-ico{ width:34px; height:34px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.chg-ico .icn{ width:17px; height:17px; }
.chg-ico.good{ background:var(--success-soft); color:var(--success); }
.chg-ico.bad{ background:var(--error-soft); color:var(--error); }
.chg-ico.neutral{ background:var(--info-soft); color:var(--info); }
.chg-body{ flex:1; min-width:0; }
.chg-head{ display:flex; align-items:baseline; gap:8px; }
.chg-headline{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text); flex:1; min-width:0; }
.chg-time{ font-size:var(--fs-2xs); color:var(--text-faint); white-space:nowrap; flex-shrink:0; }

.chg-route{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:8px; font-size:var(--fs-xs); color:var(--text-muted); }
.chg-route b{ font-weight:var(--fw-semibold); color:var(--text); }
.chg-arrow{ color:var(--text-faint); display:inline-flex; }
.chg-arrow .icn{ width:15px; height:15px; }

.chg-vals{
  display:flex; align-items:center; gap:8px; margin-top:9px; direction:ltr;
  font-size:var(--fs-sm); font-variant-numeric:tabular-nums;
  background:var(--surface-2); border-radius:var(--radius-sm); padding:8px 11px; width:fit-content; max-width:100%;
}
.chg-old{ color:var(--text-faint); text-decoration:line-through; }
.chg-to{ color:var(--text-faint); display:inline-flex; }
.chg-to .icn{ width:14px; height:14px; }
.chg-new{ color:var(--text); font-weight:var(--fw-bold); }
.chg-delta{ font-size:var(--fs-2xs); font-weight:var(--fw-bold); border-radius:var(--radius-full); padding:2px 8px; }
.chg-delta.good{ background:var(--success-soft); color:var(--success); }
.chg-delta.bad{ background:var(--error-soft); color:var(--error); }
.chg-delta.neutral{ background:var(--info-soft); color:var(--info); }

.chg-meaning{ font-size:var(--fs-2xs); margin-top:8px; font-weight:var(--fw-medium); }
.chg-meaning.good{ color:var(--success); }
.chg-meaning.bad{ color:var(--error); }

/* ══════════════════════════════════════════════════════════════
   STICKY GLASS HEADER
   ══════════════════════════════════════════════════════════════ */
.site-header{
  position:sticky; top:0; z-index:850; width:100%;
  background:color-mix(in srgb, var(--bg-elevated) 82%, transparent);
  
  border-bottom:1px solid var(--border);
  padding:10px 0 10px; margin:0 0 var(--space-5);
  transition:box-shadow var(--t), border-color var(--t);
}
@supports not (backdrop-filter: blur(1px)){ .site-header{ background:var(--bg-elevated); } }
.site-header.scrolled{ box-shadow:0 6px 22px rgba(0,0,0,.14); }
.site-header-inner{ display:flex; align-items:center; gap:10px; width:100%; }

.hdr-logo{ display:flex; align-items:center; gap:9px; flex-shrink:0; text-decoration:none; color:var(--text); cursor:pointer; }
/* The mark is now the Proxo logo image. No gradient tile behind it — the
   logo is already blue, so a blue tile would swallow it. Sized to the same
   40px box as the header action buttons so the whole row lines up. */
.hdr-mark{
  width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:none; box-shadow:none; padding:0; overflow:hidden; flex-shrink:0;
}
.hdr-mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.hdr-mark svg,
.hdr-mark .icon--solar{ width:18px; height:18px; }
.hdr-word{ display:flex; flex-direction:column; line-height:1.15; }
.hdr-word b{ font-size:var(--fs-sm); font-weight:var(--fw-bold); letter-spacing:.2px; }
.hdr-word span{ font-size:9.5px; color:var(--text-faint); letter-spacing:.4px; }

/* live rate pill */
.hdr-rate{
  display:none; align-items:center; gap:7px; margin-inline-start:6px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-full);
  padding:6px 12px; font-size:var(--fs-2xs); color:var(--text-muted); white-space:nowrap;
}
.hdr-rate .live-dot{
  width:7px; height:7px; border-radius:var(--radius-full); background:var(--success); flex-shrink:0;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent); animation:livePulse 2s infinite;
}
@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.5); }
  70%{ box-shadow:0 0 0 7px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
.hdr-rate b{ color:var(--text); font-weight:var(--fw-bold); direction:ltr; font-variant-numeric:tabular-nums; }

.hdr-nav{ display:none; align-items:center; gap:2px; margin-inline-start:auto; }
.hdr-nav-link{
  background:none; border:none; cursor:pointer; font-family:inherit; color:var(--text-muted);
  font-size:var(--fs-xs); font-weight:var(--fw-medium); padding:8px 12px; border-radius:var(--radius-md);
  display:inline-flex; align-items:center; gap:6px; transition:color var(--t), background var(--t);
}
.hdr-nav-link .icn{ width:15px; height:15px; }
.hdr-nav-link:hover{ color:var(--text); background:var(--surface-hover); }
.hdr-nav-link.on{ color:var(--primary); background:var(--secondary-soft); font-weight:var(--fw-semibold); }

.hdr-actions{ display:flex; align-items:center; gap:6px; margin-inline-start:auto; }
/* Header buttons were 44px while the logo tile was 34px, which is what made
   the row look uneven. Everything in the appbar is one 40px box now.
   .icon-btn stays 44px everywhere else, where it is a standalone target. */
.hdr-actions .icon-btn{ width:40px; height:40px; flex:0 0 40px; }
.hdr-actions .icon-btn .icn{ width:19px; height:19px; }
/* .hdr-nav is display:none below 900px, but it is STILL the previous sibling
   in the DOM — so this adjacent selector used to match at every width and,
   being more specific than .hdr-actions, replaced the auto margin with 8px.
   The result on phones: the bell and theme buttons sat glued to the wordmark
   with the whole left half of the bar empty. Only apply it where the nav is
   actually on screen. */
.hdr-cta{
  display:none; align-items:center; gap:7px; border:none; cursor:pointer; font-family:inherit;
  background:linear-gradient(135deg, var(--primary), var(--secondary)); color:var(--on-primary);
  border-radius:var(--radius-full); padding:9px 16px; font-size:var(--fs-xs); font-weight:var(--fw-bold);
  box-shadow:var(--shadow-sm); transition:transform var(--t), box-shadow var(--t);
}
.hdr-cta:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); }
.hdr-cta:active{ transform:translateY(0) scale(.98); }
.hdr-cta .icn{ width:15px; height:15px; }

@media (min-width:560px){ .hdr-rate{ display:inline-flex; } }
@media (min-width:900px){
  .hdr-nav{ display:flex; }
  .hdr-cta{ display:inline-flex; }
  .hdr-nav + .hdr-actions{ margin-inline-start:8px; }
}

/* ══════════════════════════════════════════════════════════════
   EXCHANGE CARD  —  grouped "you send" / "you receive"
   ══════════════════════════════════════════════════════════════ */
.xc-head{ display:flex; align-items:flex-start; gap:11px; margin-bottom:var(--space-5); }
.xc-head-ico{
  width:38px; height:38px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--secondary-soft); color:var(--primary);
}
.xc-head-ico .icn{ width:19px; height:19px; }
.xc-head h2{ font-size:var(--fs-md); font-weight:var(--fw-bold); }
.xc-head p{ font-size:var(--fs-2xs); color:var(--text-muted); margin-top:3px; line-height:1.6; }

/* One calm form: the three parts are separated by space and a hairline,
   not by nested cards. */
.xc-step{ padding:0 0 2px; margin-bottom:var(--space-5); }
.xc-step + .xc-step{ border-top:1px solid var(--border); padding-top:var(--space-5); }
.xc-step.has-error .xc-step-head h3{ color:var(--error); }
.xc-step-head{
  display:flex; align-items:center; gap:8px; margin-bottom:11px;
  font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--text);
}
.xc-step-head h3{ font-size:var(--fs-sm); font-weight:var(--fw-bold); }
.xc-step-head .icn{ width:14px; height:14px; color:var(--primary); }
.xc-step-head .xc-badge{
  margin-inline-start:auto; text-transform:none; letter-spacing:0; font-weight:var(--fw-medium);
  font-size:10px; color:var(--text-faint); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-full); padding:3px 9px;
}

.xc-locked .field-label{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.xc-locked-tag{
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
  border-radius:var(--radius-full); background:var(--surface-2); border:1px solid var(--border);
  font-size:10px; font-weight:var(--fw-medium); color:var(--text-faint);
}
.xc-locked-tag .icn{ width:12px; height:12px; }
.xc-locked .input[readonly]{ color:var(--text-muted); }

/* helper micro-copy */
.xc-hint{ display:flex; align-items:flex-start; gap:6px; font-size:11px; color:var(--text-faint); line-height:1.6; margin-top:7px; }
.xc-hint .icn{ width:13px; height:13px; flex-shrink:0; margin-top:1px; }
.xc-hint.warn{ color:var(--warning); }
.xc-hint b{ color:var(--text-muted); font-weight:var(--fw-semibold); direction:ltr; unicode-bidi:isolate; }

/* input with an icon inside */
.xc-input-wrap{ position:relative; }.xc-input-wrap .input{ padding-inline-start:44px; margin:0; background:var(--surface); }
.xc-input-wrap .xc-in-suffix{
  position:absolute; inset-inline-end:14px; top:50%; transform:translateY(-50%);
  font-size:var(--fs-2xs); font-weight:var(--fw-bold); color:var(--text-faint); pointer-events:none; direction:ltr;
}
.xc-input-wrap .input.ok{ border-color:var(--success); }
.xc-input-wrap .input.bad{ border-color:var(--error); }

/* swap divider between the two groups */
.xc-swap{ display:flex; align-items:center; gap:10px; margin:calc(var(--space-5) * -1 + 2px) 0 var(--space-5); }
.xc-swap-line{ flex:1; height:1px; background:var(--border); }
.xc-swap-btn{
  width:34px; height:34px; border-radius:var(--radius-full); flex-shrink:0; cursor:pointer;
  background:var(--surface); border:1.5px solid var(--border); color:var(--primary);
  display:flex; align-items:center; justify-content:center; transition:transform var(--t), border-color var(--t);
}
.xc-swap-btn:hover{ border-color:var(--primary); }
.xc-swap-btn:active{ transform:rotate(180deg) scale(.92); }
.xc-swap-btn .icn{ width:17px; height:17px; }

/* live breakdown */
.xc-summary{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:12px 14px; margin:var(--space-5) 0 10px;
}
.xc-sum-row[hidden]{ display:none; }
.xc-sum-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:var(--fs-xs); color:var(--text-muted); padding:6px 0;
}
.xc-sum-row .v{ color:var(--text); font-weight:var(--fw-semibold); direction:ltr; font-variant-numeric:tabular-nums; }
.xc-sum-row.total{
  border-top:1px dashed var(--border); margin-top:6px; padding-top:11px;
  font-size:var(--fs-sm); color:var(--text);
}
.xc-sum-row.total .v{ font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--success); }
.xc-sum-row .lbl{ display:inline-flex; align-items:center; gap:6px; }
.xc-sum-row .lbl .icn{ width:14px; height:14px; color:var(--text-faint); }
.total-value.warn-text{ color:var(--warning); }
.btn-submit{ display:flex; align-items:center; justify-content:center; gap:9px; font-size:var(--fs-sm); padding:16px; }
.btn-submit .icn{ width:18px; height:18px; }

/* ══════════════════════════════════════════════════════════════
   SOCIAL PROOF + PUBLIC FEED
   ══════════════════════════════════════════════════════════════ */
.proof-card{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--primary), var(--secondary)); color:var(--on-primary);
  border-radius:var(--radius-xl); padding:20px; margin-bottom:12px; box-shadow:var(--shadow-md);
}
.proof-card::after{
  content:''; position:absolute; inset-inline-end:-30px; top:-30px; width:130px; height:130px;
  border-radius:var(--radius-full); background:rgba(255,255,255,.10);
}
.proof-top{ display:flex; align-items:center; gap:8px; font-size:var(--fs-2xs); opacity:.9; margin-bottom:9px; }
.proof-top .icn{ width:15px; height:15px; }
.proof-num{ font-size:25px; font-weight:var(--fw-bold); line-height:1.1; font-variant-numeric:tabular-nums; direction:ltr; }
.proof-sub{ font-size:var(--fs-2xs); opacity:.88; margin-top:5px; }
.proof-mini{ display:flex; gap:18px; margin-top:14px; position:relative; z-index:1; }
.proof-mini div b{ display:block; font-size:var(--fs-sm); font-weight:var(--fw-bold); direction:ltr; }
.proof-mini div span{ font-size:10px; opacity:.85; }

.feed-wrap{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.feed-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:10px 12px; align-items:center;
  padding:13px 14px; border-bottom:1px solid var(--border);
}
.feed-row:last-child{ border-bottom:none; }
.feed-route{ display:flex; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:var(--fw-semibold); }
.feed-route .icn{ width:14px; height:14px; color:var(--text-faint); }
.feed-id{
  grid-column:1 / -1; display:inline-flex; align-items:center; gap:6px; order:-1;
  font-family:'Inter',monospace; font-size:10.5px; font-weight:var(--fw-bold); letter-spacing:.5px;
  color:var(--primary); direction:ltr;
}
.feed-meta{ font-size:10.5px; color:var(--text-faint); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.feed-phone{ direction:ltr; font-variant-numeric:tabular-nums; }
.feed-amount{ text-align:end; font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--success); direction:ltr; font-variant-numeric:tabular-nums; }
.feed-amount small{ display:block; font-size:10px; font-weight:var(--fw-medium); color:var(--text-faint); margin-top:2px; }
.feed-skel{ height:62px; border-bottom:1px solid var(--border); background:linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size:200% 100%; animation:skel 1.3s infinite; }
@keyframes skel{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* auth screen trust strip */
.auth-proof{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px; width:100%; }
.auth-proof div{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:11px 6px; text-align:center;
}
.auth-proof b{ display:block; font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--primary); direction:ltr; }
.auth-proof span{ font-size:9.5px; color:var(--text-faint); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE  —  tablet & desktop
   ══════════════════════════════════════════════════════════════ */
@media (min-width:768px){
  :root{ --container-w:720px; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .feed-row{ grid-template-columns:150px 1fr auto auto; }
  .feed-id{ grid-column:auto; order:0; }
}
@media (min-width:1024px){
  :root{ --container-w:960px; }
  /* send | swap | receive on one row — a 2-column grid pushed "receive"
     onto a second row and left half the card empty */
  .xc-cols{ display:grid; grid-template-columns:1fr auto 1fr; gap:var(--space-5); align-items:start; }
  .xc-cols .xc-step{ margin-bottom:0; }
  /* side by side on desktop: the hairline that separates the stacked
     groups on mobile would cut across the top of the second column */
  .xc-cols .xc-step + .xc-step{ border-top:none; padding-top:0; }
  .xc-swap{ flex-direction:column; margin:0; align-self:center; }
  .xc-swap-line{ width:1px; height:24px; flex:none; }
  .rates-now{ display:grid; grid-template-columns:1fr 1fr; }
  .proof-wrap{ display:grid; grid-template-columns:300px 1fr; gap:14px; align-items:start; }
  .proof-card{ margin-bottom:0; }
  body.has-nav{ padding-bottom:var(--space-8); }
  .bottom-nav{ display:none; }
  .hdr-nav{ display:flex; }
}

/* ══════════════════════════════════════════════════════════════
   1 — SMOOTH, HARDWARE-ACCELERATED SCROLLING
   ══════════════════════════════════════════════════════════════ */
html{
  scroll-behavior:smooth;
  /* keeps scrollIntoView targets clear of the sticky header */
  scroll-padding-top:96px;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
.notif-panel-body,
.sheet-body,
.filter-scroll,
#authWrap{
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  will-change:scroll-position;
}
/* NOTE: do not add `transform` to .sheet / .notif-panel / .site-header.
   Those elements use transform to position themselves (translateY(100%)
   when closed), and a second transform rule silently replaces it. */
.filter-scroll{ scroll-snap-type:x proximity; }
.filter-chip{ scroll-snap-align:start; }

/* ── hard guard: nothing may ever push the page sideways ──
   overflow-x:clip (not hidden) — `hidden` would turn body into a scroll
   container and break the sticky header. */
body{ max-width:100%; overflow-x:clip; }
.app-wrapper, .site-header, .page, .panel, .xc-step, .feed-wrap{ max-width:100%; min-width:0; }
.site-header-inner, .bottom-nav-inner{ max-width:100%; }
img, svg, table, pre,
.icon--solar{ max-width:100%; }

/* ══════════════════════════════════════════════════════════════
   2 — SPACING / OVERLAP FIXES INSIDE THE EXCHANGE CARD
   ══════════════════════════════════════════════════════════════ */

/* the icon sits at the inline-start, the unit at the inline-end; the input
   reserves room for BOTH so a long number can never run underneath them */
.xc-input-wrap .input{
  padding-inline-start:48px;
  padding-inline-end:18px;
  text-align:center;
}#amt{ padding-inline-end:64px; }
.xc-input-wrap .xc-in-suffix{
  inset-inline-end:16px;
  max-width:46px; text-align:center; line-height:1;
  padding-inline-start:8px;
  border-inline-start:1px solid var(--border);
}

/* stack: label → input → helper → live value → error, each with real space */
.xc-step .field{ margin-bottom:0; }
.xc-step .field + .field{ margin-top:14px; }
.xc-step .select-wrap{ margin-bottom:0; }
.xc-step .field-label{ margin-bottom:7px; }
.xc-step .xc-hint{ margin-top:9px; padding-inline:2px; }
/* the live formatted amount used to sit on a negative margin and collided
   with the helper line — give it its own row */
.xc-step .formatted-amount{
  margin:10px 2px 0; text-align:center; display:block;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:7px 10px; direction:ltr;
}
.xc-step .field-error{ margin:10px auto 0; }
.xc-step .quick-amounts{ margin:12px 0 0; }
.xc-step .phone-format-hint{ margin:9px 2px 0; }

/* group header: badge never squeezes the title on narrow screens */
.xc-step-head{ flex-wrap:wrap; row-gap:7px; min-width:0; }
.xc-step-head .xc-badge{ white-space:nowrap; }

/* breakdown rows: labels and values keep their distance */
.xc-sum-row{ gap:14px; }
.xc-sum-row .lbl{ min-width:0; flex:1; }
.xc-sum-row .v{ flex-shrink:0; text-align:end; }
.xc-summary .fee-note{ margin-top:8px; text-align:center; }
.xc-summary .fee-note:empty{ display:none; margin:0; }

/* picker trigger: icon, two lines of text and the chevron never collide */
.picker-trigger{ gap:12px; }
.picker-trigger-text{ min-width:0; flex:1; }
.picker-trigger-value{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.select-chevron{ flex-shrink:0; }

/* wallet row: long wallet numbers wrap instead of pushing the copy button out */
.wallet-row-line{ flex-wrap:wrap; row-gap:6px; }
.wallet-value{ min-width:0; overflow-wrap:anywhere; }
.wallet-row .copy-btn{ flex-shrink:0; }

/* header: nothing overflows on small phones */
.site-header-inner{ min-width:0; }
.hdr-logo, .hdr-word, .hdr-rate{ min-width:0; }
.hdr-word b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hdr-actions{ flex-shrink:0; }
@media (max-width:420px){
  .hdr-word span{ display:none; }
  .site-header-inner{ gap:7px; }
  /* One step smaller, but the mark and the buttons stay the same box. */
  .hdr-mark{ width:36px; height:36px; }
  .hdr-actions .icon-btn{ width:36px; height:36px; flex:0 0 36px; }
  .hdr-actions{ gap:5px; }
}

/* feed rows: id, route, meta and amount each keep their own column space */
.feed-row{ gap:8px 14px; }
.feed-row > *{ min-width:0; }
.feed-route{ flex-wrap:wrap; row-gap:4px; }
.feed-amount{ flex-shrink:0; white-space:nowrap; }
.feed-meta{ overflow-wrap:anywhere; }.file-field{ margin-top:4px; }
.btn-submit{ margin-top:4px; }

/* ══════════════════════════════════════════════════════════════
   3 — LIGHT MODE POLISH  (crisp white cards, soft grey borders)
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"] .panel,
[data-theme="light"] .xc-summary,
[data-theme="light"] .feed-wrap,
[data-theme="light"] .rate-card,
[data-theme="light"] .pf-card,
[data-theme="light"] .pf-menu,
[data-theme="light"] .pf-hero,
[data-theme="light"] .tx-sum-item,
[data-theme="light"] .chg-item,
[data-theme="light"] .rule-item,
[data-theme="light"] .tx-card{
  background:#ffffff;
  border-color:#e4e8f1;
}
[data-theme="light"] .xc-step{ background:#fafbfe; border-color:#e4e8f1; }
[data-theme="light"] .xc-input-wrap .input,
[data-theme="light"] .xc-step .formatted-amount{ background:#ffffff; }
[data-theme="light"] .xc-input-wrap .input:hover{ border-color:#ccd3e2; }

/* softer elevation — the dark-mode shadows read as dirty smudges on white */
[data-theme="light"] .site-header.scrolled{ box-shadow:0 4px 18px rgba(20,24,38,.07); }
[data-theme="light"] .bottom-nav{ box-shadow:0 -3px 16px rgba(20,24,38,.06); }
[data-theme="light"] .notif-panel{ box-shadow:0 -8px 40px rgba(20,24,38,.12); }
[data-theme="light"] .proof-card{ box-shadow:0 8px 24px rgba(11,114,133,.18); }

/* text contrast on light surfaces */
[data-theme="light"] .xc-head p,
[data-theme="light"] .page-head p{ color:#525c6e; }
[data-theme="light"] .xc-hint{ color:#667083; }
[data-theme="light"] .notif-item.unread{ background:#f5f8fc; border-color:#e4e8f1; }
[data-theme="light"] .feed-row{ border-color:#eceff5; }
[data-theme="light"] .xc-sum-row.total{ border-top-color:#dfe4ee; }
[data-theme="light"] .filter-chip:not(.on){ background:#ffffff; }
[data-theme="light"] .quick-amount-btn{ background:#ffffff; }
[data-theme="light"] .wallet-row{ background:rgba(185,121,31,.08); border-color:rgba(185,121,31,.25); }

/* ══════════════════════════════════════════════════════════════
   PROXO BALANCE UI v3 — unified surfaces, SVG controls and
   compositor-only motion for smooth 60fps interaction
   ══════════════════════════════════════════════════════════════ */
:root{
  --motion-fast:140ms cubic-bezier(.2,.8,.2,1);
  --motion-sheet:190ms cubic-bezier(.2,.85,.25,1);
  --card-shadow:0 8px 28px rgba(3,12,24,.07);
  --card-shadow-dark:0 10px 30px rgba(0,0,0,.24);
}

html{ overscroll-behavior-x:none; }
body{
  background:
    radial-gradient(520px 260px at 100% -60px, var(--secondary-soft), transparent 72%),
    var(--bg);
}
button, a, input, label[for]{ -webkit-tap-highlight-color:transparent; }
button, .picker-trigger, .sheet-option, .file-picker, .bn-item, .pf-menu-item{ touch-action:manipulation; }
.icn, svg.icn,
.icon--solar.icn{ shape-rendering:geometricPrecision; }

/* one visual language across every page */
.panel, .auth-card, .page-head, .pf-card, .pf-menu, .pf-hero,
.tx-sum-item, .rate-card, .chg-item, .rule-item, .tx-card,
.feed-wrap, .proof-card, .xc-summary{
  border-color:var(--border);
  box-shadow:var(--card-shadow);
}
[data-theme="dark"] .panel,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .page-head,
[data-theme="dark"] .pf-card,
[data-theme="dark"] .pf-menu,
[data-theme="dark"] .pf-hero,
[data-theme="dark"] .tx-sum-item,
[data-theme="dark"] .rate-card,
[data-theme="dark"] .chg-item,
[data-theme="dark"] .rule-item,
[data-theme="dark"] .tx-card,
[data-theme="dark"] .feed-wrap,
[data-theme="dark"] .proof-card,
[data-theme="dark"] .xc-summary{ box-shadow:var(--card-shadow-dark); }

.page-head{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px 17px; margin:0 0 16px;
}
.page-head h2 .icn, .section-title > .icn{
  background:var(--secondary-soft); border-radius:9px; padding:5px;
  width:29px; height:29px; color:var(--primary);
}
.home-greet{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:13px 14px; margin:0 0 14px; box-shadow:var(--card-shadow);
}
.greet-hi{ display:flex; align-items:center; gap:5px; }
.greet-hi .icn{ width:14px; height:14px; color:var(--accent); }
.rule-num{ width:36px; height:36px; flex-basis:36px; border-radius:11px; }
.rule-num .icn{ width:19px; height:19px; }
.btn > .icn{ width:18px; height:18px; }

.panel{ border-radius:22px; }
.xc-step{ border-radius:var(--radius-lg); }
.input, .picker-trigger{
  min-height:52px; border-radius:13px;
  transition:border-color var(--motion-fast), box-shadow var(--motion-fast), background-color var(--motion-fast), transform var(--motion-fast);
}
.btn{
  min-height:48px; border-radius:13px;
  transition:transform var(--motion-fast), opacity var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast);
}
.icon-btn{ transition:transform var(--motion-fast), background-color var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast); }
.btn:active, .icon-btn:active, .picker-trigger:active, .quick-amount-btn:active{ transform:scale(.975); }
.filter-chip{ transition:transform var(--motion-fast), color var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast); }
.filter-chip:active{ transform:scale(.96); }

/* Custom SVG receipt picker */
.file-input-native{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap; border:0; opacity:0;
}
.file-picker{
  min-height:76px; width:100%; display:flex; align-items:center; gap:12px;
  background:var(--surface-2); border:1.5px dashed var(--border-strong); border-radius:var(--radius-md);
  padding:12px 13px; cursor:pointer; color:var(--text);
  transition:border-color var(--motion-fast), background-color var(--motion-fast), transform var(--motion-fast);
}
.file-picker:active{ transform:scale(.985); }
.file-input-native:focus-visible + .file-picker{ border-color:var(--primary); box-shadow:0 0 0 4px var(--focus-ring); }
.file-input-native.has-error + .file-picker{ border-color:var(--error); background:var(--error-soft); }
.file-picker.selected{ border-style:solid; border-color:var(--success); background:var(--success-soft); }
.file-picker-icon, .file-picker-action{
  width:40px; height:40px; flex:0 0 40px; display:flex; align-items:center; justify-content:center;
  border-radius:12px; background:var(--surface); color:var(--primary); border:1px solid var(--border);
}
.file-picker-icon .icn, .file-picker-action .icn{ width:20px; height:20px; }
.file-picker.selected .file-picker-icon{ background:var(--success); color:#fff; border-color:transparent; }
.file-picker-action{ width:34px; height:34px; flex-basis:34px; border-radius:10px; }
.file-picker-action .icn{ width:17px; height:17px; }
.file-picker-copy{ min-width:0; flex:1; }
.file-picker-copy b{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-sm); }
.file-picker-copy small{ display:block; color:var(--text-faint); font-size:var(--fs-2xs); margin-top:3px; direction:ltr; text-align:start; }
.inline-route-icon{ display:inline-flex; vertical-align:middle; color:var(--text-faint); margin-inline:4px; }
.inline-route-icon .icn{ width:15px; height:15px; }

/* Solid sticky bars scroll more smoothly than live backdrop blurs on phones. */
.site-header{
  background:var(--bg-elevated); -webkit-backdrop-filter:none; backdrop-filter:none;
  padding:9px 0; margin-bottom:14px; transition:box-shadow var(--motion-fast), border-color var(--motion-fast);
}
.hdr-rate .live-dot{ position:relative; animation:none; box-shadow:none; }
.hdr-rate .live-dot::after{
  content:''; position:absolute; inset:0; border-radius:inherit; background:var(--success);
  animation:livePulseGpu 2s cubic-bezier(.2,.7,.3,1) infinite; pointer-events:none;
}
@keyframes livePulseGpu{
  from{ opacity:.55; transform:scale(.8); }
  to{ opacity:0; transform:scale(2.6); }
}
.bottom-nav{
  background:transparent; border:0; box-shadow:none; padding:7px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  -webkit-backdrop-filter:none; backdrop-filter:none; pointer-events:none;
}
.bottom-nav-inner{
  pointer-events:auto; background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:5px; box-shadow:0 10px 30px rgba(5,15,30,.16);
}
.bn-item{ min-height:49px; border-radius:15px; transition:transform var(--motion-fast), color var(--motion-fast), background-color var(--motion-fast); }
.bn-item.on{ background:var(--secondary-soft); }
.bn-item.on .bn-ico{ background:transparent; }
body.has-nav{ padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }

/* Full-viewport notification surface. It is a sibling of the header, so
   transforms and filter-containing blocks can no longer crop it. */
.notif-backdrop{
  position:fixed; inset:0; z-index:1600; background:rgba(4,8,16,.52);
  opacity:0; visibility:hidden; pointer-events:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  transition:opacity var(--motion-fast), visibility 0s linear 140ms;
}
.notif-backdrop.open{ opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
.notif-panel{
  position:fixed; inset-inline:0; top:auto; bottom:0; z-index:1700;
  width:100%; max-width:100%; height:min(82dvh, 680px); max-height:calc(100dvh - 12px);
  display:flex; flex-direction:column; min-height:0; overflow:hidden;
  padding-bottom:env(safe-area-inset-bottom, 0px);
  background:var(--surface); border:1px solid var(--border); border-bottom:0;
  border-radius:26px 26px 0 0; box-shadow:0 -14px 50px rgba(3,10,20,.24);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate3d(0, calc(100% + 18px), 0);
  transition:transform var(--motion-sheet), opacity var(--motion-fast), visibility 0s linear 190ms;
  will-change:transform, opacity; contain:layout paint style;
}
.notif-panel.open{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate3d(0,0,0); transition-delay:0s;
}
.notif-grabber{ width:44px; height:5px; margin:9px auto 3px; background:var(--border-strong); opacity:.8; }
.notif-panel-head{
  min-height:64px; flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:9px 12px 11px; border-bottom:1px solid var(--border);
}
.notif-panel-head h3{ min-width:0; display:flex; align-items:center; gap:8px; font-size:var(--fs-md); }
.notif-title-icon{
  width:34px; height:34px; flex:0 0 34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; background:var(--secondary-soft); color:var(--primary);
}
.notif-title-icon .icn{ width:18px; height:18px; }
.notif-read-all, .notif-close-btn{
  border:0; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  color:var(--text-muted); background:var(--surface-2); border-radius:10px; min-height:36px;
  transition:transform var(--motion-fast), color var(--motion-fast), background-color var(--motion-fast);
}
.notif-read-all{ gap:6px; padding:7px 10px; font-size:var(--fs-2xs); font-weight:var(--fw-semibold); }
.notif-read-all .icn{ width:15px; height:15px; color:var(--success); }
.notif-close-btn{ width:36px; flex:0 0 36px; padding:0; }
.notif-close-btn .icn{ width:17px; height:17px; }
.notif-read-all:active, .notif-close-btn:active{ transform:scale(.93); }
.notif-panel-body{
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:8px 10px 20px;
  -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; touch-action:pan-y;
  scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent;
}
.notif-panel-body::-webkit-scrollbar{ width:5px; }
.notif-panel-body::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:99px; }
.notif-day{
  position:sticky; top:-8px; z-index:2; width:max-content; padding:6px 9px; margin:8px 4px 5px;
  background:var(--surface); border-radius:8px;
}
.notif-item{
  width:100%; text-align:start; font-family:inherit; color:inherit; background:transparent;
  margin-bottom:5px; padding:12px; border:1px solid transparent; border-radius:15px;
  transition:transform var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast);
}
.notif-item:active{ transform:scale(.985); }
.notif-item.unread{ background:var(--surface-2); border-color:var(--border); }
.notif-item-text{ min-width:0; }
.notif-item-msg{ overflow-wrap:anywhere; }
.notif-empty{ min-height:240px; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.9; }
.notif-head-count{ flex-shrink:0; }

@media (max-width:430px){
  .notif-read-all span{ display:none; }
  .notif-read-all{ width:36px; padding:0; }
  .notif-panel-head{ padding-inline:11px; }
}
@media (min-width:640px){
  .notif-panel{
    inset-inline:unset; bottom:auto; top:72px; left:16px; right:auto;
    width:min(390px, calc(100vw - 32px)); height:min(620px, calc(100dvh - 88px)); max-height:none;
    border:1px solid var(--border); border-radius:20px;
    opacity:0; transform:translate3d(0,-8px,0) scale(.985); transform-origin:top left;
  }
  .notif-panel.open{ opacity:1; transform:translate3d(0,0,0) scale(1); }
  .notif-backdrop{ background:rgba(4,8,16,.22); }
  .notif-grabber{ display:none; }
}

/* Fast sheets and modals: opacity + transform only, no live blur repaint. */
.sheet-overlay, .modal-overlay{
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.sheet-overlay{ transition:opacity var(--motion-fast); }
.sheet{
  transform:translate3d(0,100%,0); transition:transform var(--motion-sheet);
  will-change:transform; contain:layout paint style;
}
.sheet-overlay.open .sheet{ transform:translate3d(0,0,0); }
.modal-card{ animation-duration:var(--motion-sheet); }

/* Long history pages only paint rows close to the viewport. */
.tx-card, .rule-item, .chg-item, .rate-card, .feed-row{
  content-visibility:auto; contain-intrinsic-size:auto 84px;
}
.feed-skel{ position:relative; overflow:hidden; background:var(--surface); animation:none; }
.feed-skel::after{
  content:''; position:absolute; inset:0; width:60%;
  background:linear-gradient(90deg, transparent, var(--surface-2), transparent);
  transform:translate3d(-180%,0,0); animation:skelGpu 1.25s ease-in-out infinite;
}
@keyframes skelGpu{ to{ transform:translate3d(300%,0,0); } }
.notif-panel-body, .sheet-body, .filter-scroll, #authWrap{ will-change:auto; }

@media (hover:hover) and (pointer:fine){
  .notif-read-all:hover, .notif-close-btn:hover{ color:var(--text); background:var(--surface-hover); }
  .file-picker:hover{ border-color:var(--primary); }
}
@media (prefers-reduced-motion:reduce){
  .notif-panel, .notif-backdrop, .sheet, .sheet-overlay, .page.active, .toast{ transition:none !important; animation:none !important; }
}


/* ══════════════════════════════════════════════════════════════
   REFINEMENT LAYER — 2026 pass
   Appended last so it wins the cascade. Purely visual: no class or
   id is renamed, so app.js and admin.js keep working untouched.
   ══════════════════════════════════════════════════════════════ */

/* Copy sits tighter and lighter at the new smaller sizes. */
body{
  line-height:1.5;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.section-title{ letter-spacing:-.015em; line-height:1.3; }

/* Figures hold their column instead of jittering as they update. */
.wallet-value,.total-value,.xc-sum-row .v,.proof-num,.formatted-amount,
.hdr-rate,.tx-card .amt,.feed-row b{ font-variant-numeric:tabular-nums; }

/* One surface treatment: a hairline border, never a floating shadow. */
.panel,.proof-card,.tx-card,.rule-item,.chg-item,.rate-card,.feed-row{
  box-shadow:none;
  border:1px solid var(--border);
}
/* Section headings step back so the exchange card leads the page. */
.section-title{
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
  color:var(--text-muted);
  margin:var(--space-5) 2px var(--space-2);
}

/* Hints are support text, not body copy. */
.xc-hint{ font-size:var(--fs-2xs); line-height:1.45; color:var(--text-faint); }
.xc-hint .icn{ width:13px; height:13px; }

/* Controls: shorter and calmer, still comfortably tappable (>=44px). */
.input,.picker-trigger,.btn{ border-radius:var(--radius-md); }
.input{ min-height:44px; font-size:var(--fs-base); }
.btn{ min-height:44px; font-size:var(--fs-base); font-weight:var(--fw-semibold); }
.btn-primary{ box-shadow:none; }
.btn-primary:active{ transform:translateY(1px); }
.field-label{ font-size:var(--fs-2xs); color:var(--text-muted); margin-bottom:5px; }

/* Icons scale with the type instead of dominating it. */
.icn{ width:16px; height:16px; }
.icn-sm{ width:13px; height:13px; }

/* Off-screen routes cost nothing to keep in the DOM. */
.page:not(.active){ content-visibility:hidden; }

/* Follow the system setting rather than animating regardless. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   SKELETON LOADING — transactions
   Mirrors .tx-card so the layout does not jump when real rows
   replace it. One shared shimmer, GPU-only (transform), so a long
   list costs nothing to animate.
   ══════════════════════════════════════════════════════════════ */

.tx-skel{
  background:var(--surface);
  border:1px solid var(--border);
  border-inline-start:3px solid var(--border-strong);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  margin-bottom:var(--space-4);
}
.tx-skel-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:var(--space-4);
  border-bottom:1px solid var(--border);
  padding-bottom:var(--space-3);
}
.tx-skel-row{ display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.tx-skel-row:last-child{ margin-bottom:0; }

/* The shimmering pieces. */
.sk{
  position:relative; overflow:hidden;
  background:var(--surface-2);
  border-radius:6px;
  height:11px;
}
.sk::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, var(--surface-hover), transparent);
  transform:translate3d(-100%,0,0);
  animation:skShimmer 1.15s ease-in-out infinite;
}
@keyframes skShimmer{ to{ transform:translate3d(100%,0,0); } }

.sk-ico{ width:26px; height:26px; border-radius:8px; flex:0 0 26px; }
.sk-pill{ height:20px; border-radius:var(--radius-full); }
.sk-w30{ width:30%; } .sk-w45{ width:45%; } .sk-w60{ width:60%; } .sk-w75{ width:75%; }
.sk-num{ display:inline-block; width:56px; height:15px; vertical-align:-2px; }

/* Stagger the cards so the block reads as loading, not as frozen. */
.tx-skel:nth-child(2) .sk::after{ animation-delay:.12s; }
.tx-skel:nth-child(3) .sk::after{ animation-delay:.24s; }
.tx-skel:nth-child(4) .sk::after{ animation-delay:.36s; }

@media (prefers-reduced-motion:reduce){
  .sk::after{ animation:none; }
}

/* ══════════════════════════════════════════════════════════════
   EXCHANGE CARD — layout pass
   Pairs with the rewritten #exchangeCard markup. One vertical
   rhythm, one label style, one input height.
   ══════════════════════════════════════════════════════════════ */

#exchangeCard{ padding:var(--space-5) var(--space-4) var(--space-4); }

/* The wallet you pay into is the first fact on the card, so it reads
   as a header rather than as another form row. */
#exchangeCard .wallet-row{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:10px 12px;
  margin-bottom:var(--space-5);
}
#exchangeCard .wallet-row-line{ display:flex; align-items:center; gap:10px; }
#exchangeCard .wallet-label{
  font-size:var(--fs-2xs); color:var(--text-muted); font-weight:var(--fw-medium);
  flex:0 0 auto;
}
#exchangeCard .wallet-value{
  flex:1; min-width:0; text-align:start;
  font-size:var(--fs-md); font-weight:var(--fw-bold); letter-spacing:.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Group headings: a quiet label with the badge pushed to the end. */
.xc-step-head{
  display:flex; align-items:center; gap:8px;
  font-size:var(--fs-2xs); font-weight:var(--fw-semibold);
  color:var(--text-muted);
  margin-bottom:8px; padding:0 2px;
}
.xc-step-head .xc-badge{
  margin-inline-start:auto;
  font-size:var(--fs-2xs); font-weight:var(--fw-medium);
  padding:3px 8px; border-radius:var(--radius-full);
  background:var(--surface-2); color:var(--text-faint); border:1px solid var(--border);
}

/* One field rhythm throughout the card. */
#exchangeCard .field{ margin-top:var(--space-3) !important; }
#exchangeCard .field-label{
  display:block; font-size:var(--fs-2xs); font-weight:var(--fw-medium);
  color:var(--text-muted); margin-bottom:5px; padding:0 2px;
}

/* Inputs lost their leading icon, so the padding comes back. */
#exchangeCard .xc-input-wrap{ position:relative; }
#exchangeCard .xc-input-wrap .input{
  padding-inline:12px;
  font-size:var(--fs-md);
  font-weight:var(--fw-medium);
}
#exchangeCard #amt{ font-size:var(--fs-lg); font-weight:var(--fw-bold); }
#exchangeCard #userSenderName{
  font-size:var(--fs-base); font-weight:var(--fw-medium);
  color:var(--text-muted); background:var(--surface-2);
}
#exchangeCard .xc-in-suffix{
  position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%);
  font-size:var(--fs-2xs); font-weight:var(--fw-semibold);
  color:var(--text-faint); pointer-events:none;
}

/* Hints are one quiet line, no icon, no box. */
#exchangeCard .xc-hint{
  display:block; margin:5px 2px 0; padding:0; background:none; border:0;
  font-size:var(--fs-2xs); line-height:1.45; color:var(--text-faint);
}
#exchangeCard .xc-hint b{ color:var(--text-muted); font-weight:var(--fw-semibold); }
#exchangeCard .xc-hint.warn{ color:var(--warning); }

/* The live echo duplicated the breakdown total. Kept for app.js, hidden. */
#exchangeCard #formattedHint{ display:none; }

/* Quick amounts read as chips, not as three more buttons. */
.quick-amounts{ display:flex; gap:6px; margin-top:8px; }
.quick-amount-btn{
  flex:1; min-height:32px; padding:0 6px;
  font-size:var(--fs-2xs); font-weight:var(--fw-semibold);
  font-variant-numeric:tabular-nums;
  color:var(--text-muted); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  cursor:pointer; transition:color var(--motion-fast), border-color var(--motion-fast);
}
.quick-amount-btn:active{ color:var(--primary); border-color:var(--primary); }

/* A hairline divider with a small button, not a feature of its own. */
.xc-swap{ margin:var(--space-4) 0; gap:10px; }
.xc-swap-btn{
  width:32px; height:32px; border-radius:var(--radius-full);
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted);
}
.xc-swap-btn .icn{ width:15px; height:15px; }

/* Breakdown: a quiet ledger, with only the total carrying weight. */
.xc-summary{
  margin-top:var(--space-5);
  padding:12px 14px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.xc-sum-row{
  display:flex; align-items:center; justify-content:space-between;
  font-size:var(--fs-xs); padding:5px 0;
}
.xc-sum-row .lbl{ color:var(--text-muted); }
.xc-sum-row .v{ font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; }
.xc-sum-row.total{
  margin-top:5px; padding-top:10px;
  border-top:1px solid var(--border);
  font-size:var(--fs-sm);
}
.xc-sum-row.total .lbl{ color:var(--text); font-weight:var(--fw-semibold); }
.xc-sum-row.total .total-value{
  font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--primary);
}
.fee-note{ font-size:var(--fs-2xs); color:var(--text-faint); margin-top:6px; }

/* Receipt picker: compact row, meta line carries the warning. */
.file-field{ margin-top:var(--space-5); }
.file-picker{ padding:10px 12px; gap:10px; border-radius:var(--radius-md); }
.file-picker-icon{ width:34px; height:34px; flex-basis:34px; border-radius:9px; }
.file-picker-icon .icn{ width:17px; height:17px; }
.file-picker-copy b{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.file-picker-copy small{ font-size:var(--fs-2xs); color:var(--text-faint); direction:rtl; }

.btn-submit{ margin-top:var(--space-5); min-height:48px; font-size:var(--fs-md); }

/* ══════════════════════════════════════════════════════════════
   HOME HEADER — pairs with the rewritten .home-greet markup
   ══════════════════════════════════════════════════════════════ */

.home-greet{
  display:flex; align-items:center; gap:11px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:11px 13px;
  margin:0 0 var(--space-4);
  box-shadow:none;
}
.greet-av{
  width:38px; height:38px; flex:0 0 38px;
  border-radius:var(--radius-full);
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--primary);
  font-size:var(--fs-base); font-weight:var(--fw-bold);
  display:flex; align-items:center; justify-content:center;
}
.greet-txt{ flex:1; min-width:0; line-height:1.3; }
.greet-hi{
  display:block; font-size:var(--fs-2xs); color:var(--text-faint);
  margin-bottom:1px; font-weight:var(--fw-normal);
}
.greet-txt #userName{
  display:block; font-size:var(--fs-base); font-weight:var(--fw-semibold);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Status chip — quiet, sits at the end of the row. */
.greet-rate{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:var(--radius-full);
  background:var(--success-soft); border:1px solid transparent;
  font-size:var(--fs-2xs); font-weight:var(--fw-semibold); color:var(--success);
}
.greet-rate-dot{
  width:6px; height:6px; border-radius:var(--radius-full);
  background:currentColor; flex:0 0 6px;
}

/* Social badges are gone from the header. The rule stays so any
   leftover markup cannot reappear mid-layout. */
.home-greet .social-mini-icons{ display:none; }

/* ── Long lists: the reserved placeholder height was smaller than a
   real card, so rows could paint over one another while scrolling on
   Android Chrome. Reserving nothing is safer than reserving wrong. */
.tx-card, .rule-item, .chg-item, .rate-card, .feed-row{
  content-visibility:visible;
  contain-intrinsic-size:auto;
}


/* ══════════════════════════════════════════════════════════════
   LATEST COMPLETED EXCHANGES — compact receipt cards
   The route stays easy to scan while money and time get their own
   quiet summary panel. Markup and JS hooks remain unchanged.
   ══════════════════════════════════════════════════════════════ */

.feed-wrap{
  display:grid;
  gap:10px;
  background:transparent;
  border:0;
  border-radius:0;
  overflow:visible;
  box-shadow:none;
}

/* Give this section its own identity without affecting other page headings. */
.section-title:has(+ .proof-wrap),
.section-title:has(+ .feed-wrap){
  margin-top:24px;
  margin-bottom:11px;
  color:var(--text);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
}
.section-title:has(+ .proof-wrap) > .icn,
.section-title:has(+ .feed-wrap) > .icn{
  background:var(--success-soft);
  color:var(--success);
}

.feed-row{
  direction:ltr;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(138px,auto);
  align-items:stretch;
  gap:14px;
  padding:14px 14px 14px 17px;
  background:var(--surface);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--success) 5%, var(--surface)) 0%, var(--surface) 46%);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  content-visibility:visible;
  contain-intrinsic-size:auto;
  overflow:hidden;
  isolation:isolate;
  transition:border-color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}

/* A short status rail makes completion visible without adding another label. */
.feed-row::before{
  content:'';
  position:absolute;
  inset-inline-start:0;
  top:13px;
  bottom:13px;
  width:3px;
  border-radius:0 var(--radius-full) var(--radius-full) 0;
  background:var(--success);
  background:linear-gradient(180deg, var(--success), color-mix(in srgb, var(--success) 35%, var(--primary)));
}
.feed-row::after{ display:none; }

@media (hover:hover) and (pointer:fine){
  .feed-row:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb, var(--success) 34%, var(--border));
    box-shadow:0 12px 30px rgba(0,0,0,.12);
  }
}
.feed-row:active{ transform:scale(.992); }

.feed-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:9px;
}
.feed-side{
  min-width:138px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:5px;
  padding:10px 11px;
  text-align:right;
  background:var(--surface-2);
  background:color-mix(in srgb, var(--success) 6%, var(--surface-2));
  border:1px solid var(--border);
  border-color:color-mix(in srgb, var(--success) 18%, var(--border));
  border-radius:12px;
}

/* Completion + reference number. */
.feed-id{
  width:max-content;
  max-width:100%;
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 8px 4px 5px;
  border-radius:var(--radius-full);
  background:var(--success-soft);
  color:var(--success);
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:10.5px;
  font-weight:var(--fw-bold);
  letter-spacing:.55px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.feed-id .icn{
  width:17px;
  height:17px;
  flex:0 0 17px;
  padding:3px;
  border-radius:var(--radius-full);
  background:var(--success);
  color:var(--surface);
  stroke-width:3;
}

/* Payment route. */
.feed-route{
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:7px;
  overflow:hidden;
}
.feed-route .method-icon,
.feed-route img{
  width:30px;
  height:30px;
  flex:0 0 30px;
  padding:3px;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--surface-2);
  object-fit:contain;
}
.fr-name{
  min-width:0;
  max-width:110px;
  font-size:13.5px;
  font-weight:var(--fw-semibold);
  color:var(--text);
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fr-arrow{
  width:22px;
  height:22px;
  flex:0 0 22px;
  padding:4px;
  margin:0 1px;
  border-radius:var(--radius-full);
  background:var(--surface-2);
  color:var(--primary);
  border:1px solid var(--border);
  opacity:1;
}

.feed-phone{
  width:max-content;
  max-width:100%;
  padding:3px 8px;
  border-radius:7px;
  background:var(--surface-2);
  color:var(--text-muted);
  font-size:10.5px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.35px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.feed-time{
  direction:rtl;
  padding-bottom:6px;
  margin-bottom:1px;
  border-bottom:1px dashed color-mix(in srgb, var(--success) 20%, var(--border));
  color:var(--text-faint);
  font-size:10px;
  text-align:right;
  white-space:nowrap;
}

/* Amount summary: received amount leads, sent amount stays secondary. */
.fa-line{
  width:100%;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:9px;
  white-space:nowrap;
}
.fa-lbl{
  direction:rtl;
  color:var(--text-faint);
  font-size:9.5px;
  font-weight:var(--fw-medium);
}
.fa-val{
  direction:ltr;
  font-variant-numeric:tabular-nums;
}
.fa-in .fa-val{
  color:var(--success);
  font-size:16.5px;
  font-weight:var(--fw-bold);
  letter-spacing:-.02em;
}
.fa-out{ opacity:1; }
.fa-out .fa-val{
  color:var(--text-muted);
  font-size:11.5px;
  font-weight:var(--fw-semibold);
  letter-spacing:-.01em;
}

/* Fallback for older app.js markup. */
.feed-amount{
  align-self:center;
  direction:ltr;
  padding:10px 11px;
  border-radius:12px;
  background:var(--surface-2);
  background:color-mix(in srgb, var(--success) 6%, var(--surface-2));
  border:1px solid var(--border);
  border-color:color-mix(in srgb, var(--success) 18%, var(--border));
  color:var(--success);
  text-align:right;
  white-space:nowrap;
}
.feed-amount small{ color:var(--text-faint); }
.feed-meta{
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--text-faint);
  font-size:10.5px;
  overflow-wrap:anywhere;
}

[data-theme="light"] .feed-row{
  background:linear-gradient(135deg, #f3fcf8 0%, #fff 45%);
  border-color:#e1e8e6;
  box-shadow:0 7px 22px rgba(16,36,30,.06);
}
[data-theme="dark"] .feed-row{
  box-shadow:0 9px 26px rgba(0,0,0,.22);
}

/* Mobile keeps the two useful zones, but trims their minimum widths. */
@media (max-width:420px){
  .feed-row{
    grid-template-columns:minmax(0,1fr) minmax(122px,auto);
    gap:10px;
    padding:13px 12px 13px 15px;
  }
  .feed-side{ min-width:122px; padding:9px; }
  .feed-route{ gap:5px; }
  .feed-route .method-icon,
  .feed-route img{ width:27px; height:27px; flex-basis:27px; }
  .fr-name{ max-width:76px; font-size:12.5px; }
  .fr-arrow{ width:19px; height:19px; flex-basis:19px; padding:3px; }
  .fa-in .fa-val{ font-size:15.5px; }
}

@media (max-width:350px){
  .feed-row{ grid-template-columns:1fr; }
  .feed-side{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
  }
  .feed-time{ grid-column:1 / -1; }
}

/* Loading cards reserve the same geometry as real cards. */
.feed-skel{
  direction:ltr;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 138px;
  gap:14px;
  min-height:116px;
  padding:14px 14px 14px 17px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  animation:none;
}
.feed-skel::before{
  content:'';
  position:absolute;
  inset:0;
  width:48%;
  background:linear-gradient(90deg, transparent, var(--surface-hover), transparent);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-hover) 70%, transparent), transparent);
  transform:translate3d(-220%,0,0);
  animation:feedShimmer 1.25s var(--ease) infinite;
}
.feed-skel::after{ display:none; }
.fs-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}
.fs-side{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  gap:8px;
  padding:10px;
  border-radius:12px;
  background:var(--surface-2);
}
.fs-line{ display:flex; align-items:center; gap:8px; }
@keyframes feedShimmer{ to{ transform:translate3d(680%,0,0); } }

@media (max-width:420px){
  .feed-skel{ grid-template-columns:minmax(0,1fr) 122px; gap:10px; }
}
@media (prefers-reduced-motion:reduce){
  .feed-skel::before{ animation:none; }
}

/* ══════════════════════════════════════════════════════════════
   LATEST COMPLETED EXCHANGES — RTL card redesign
   Kurdish reading order leads from the right. Larger method icons
   and a two-part amount summary keep every detail easy to scan.
   ══════════════════════════════════════════════════════════════ */

.section-title:has(+ .proof-wrap),
.section-title:has(+ .feed-wrap){
  direction:rtl;
  gap:10px;
  margin:26px 0 12px;
  font-size:var(--fs-base);
  text-align:start;
}
.section-title:has(+ .proof-wrap) > .icn,
.section-title:has(+ .feed-wrap) > .icn{
  width:34px;
  height:34px;
  padding:7px;
  border:1px solid color-mix(in srgb, var(--success) 22%, var(--border));
  border-radius:11px;
}

.feed-wrap{ gap:12px; }

.feed-row{
  direction:rtl;
  grid-template-columns:minmax(0,1fr) minmax(230px,.78fr);
  align-items:stretch;
  gap:14px;
  padding:16px;
  padding-inline-start:19px;
  background:var(--surface);
  background:
    radial-gradient(240px 120px at 100% 0%, color-mix(in srgb, var(--success) 9%, transparent), transparent 72%),
    var(--surface);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.10);
}
.feed-row::before{
  inset-inline-start:0;
  top:16px;
  bottom:16px;
  width:4px;
  border-radius:var(--radius-full) 0 0 var(--radius-full);
  box-shadow:0 0 14px color-mix(in srgb, var(--success) 30%, transparent);
}

.feed-main{
  direction:rtl;
  align-items:flex-start;
  gap:11px;
}

.feed-id{
  direction:rtl;
  unicode-bidi:isolate;
  gap:7px;
  padding:5px 6px 5px 10px;
  font-size:11px;
  letter-spacing:.4px;
}
.feed-id .icn{
  width:21px;
  height:21px;
  flex-basis:21px;
  padding:4px;
}

.feed-route{
  direction:rtl;
  justify-content:flex-start;
  gap:8px;
}
.feed-route .method-icon,
.feed-route img{
  width:37px;
  height:37px;
  flex-basis:37px;
  padding:4px;
  border-radius:11px;
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}
.feed-route .method-icon svg,
.feed-route .method-icon .icn,
.feed-route .method-icon .icon--solar{
  width:22px;
  height:22px;
}
.fr-name{
  max-width:135px;
  font-size:14px;
  text-align:start;
}
.fr-arrow{
  width:27px;
  height:27px;
  flex-basis:27px;
  padding:5px;
  transform:scaleX(-1);
}

.feed-phone{
  direction:ltr;
  unicode-bidi:isolate;
  align-self:flex-start;
  padding:4px 9px;
  font-size:11px;
  letter-spacing:.45px;
}

.feed-side{
  direction:rtl;
  min-width:230px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  gap:8px;
  padding:9px;
  text-align:start;
  background:var(--surface-2);
  background:color-mix(in srgb, var(--success) 4%, var(--surface-2));
  border-radius:14px;
}
.feed-time{
  grid-column:1 / -1;
  direction:rtl;
  padding:1px 2px 7px;
  margin:0;
  text-align:start;
}
.feed-time::before{
  content:'•';
  display:inline-block;
  margin-inline-end:6px;
  color:var(--success);
  font-size:15px;
  line-height:0;
  vertical-align:-1px;
}

.fa-line{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  white-space:normal;
}
.fa-in{
  background:var(--success-soft);
  border-color:color-mix(in srgb, var(--success) 22%, var(--border));
}
.fa-lbl{
  width:100%;
  direction:rtl;
  text-align:start;
  font-size:10px;
}
.fa-val{
  width:100%;
  direction:ltr;
  unicode-bidi:isolate;
  text-align:right;
  white-space:nowrap;
}
.fa-in .fa-val{ font-size:16px; }
.fa-out .fa-val{ font-size:12px; }

[data-theme="light"] .feed-row{
  background:
    radial-gradient(240px 120px at 100% 0%, rgba(10,151,103,.09), transparent 72%),
    #fff;
  box-shadow:0 9px 26px rgba(16,36,30,.07);
}

/* On phones the route gets a full row and the two amounts sit below it. */
@media (max-width:767px){
  .feed-row{
    grid-template-columns:1fr;
    gap:13px;
    padding:15px;
    padding-inline-start:18px;
  }
  .feed-main{ gap:10px; }
  .feed-side{
    width:100%;
    min-width:0;
  }
  .feed-route .method-icon,
  .feed-route img{
    width:39px;
    height:39px;
    flex-basis:39px;
  }
  .fr-name{
    max-width:110px;
    font-size:13.5px;
  }
}

@media (max-width:360px){
  .feed-route{ gap:6px; }
  .feed-route .method-icon,
  .feed-route img{
    width:36px;
    height:36px;
    flex-basis:36px;
  }
  .fr-name{ max-width:78px; font-size:12.5px; }
  .fr-arrow{ width:24px; height:24px; flex-basis:24px; }
  .fa-line{ padding-inline:8px; }
  .fa-in .fa-val{ font-size:14.5px; }
}

.feed-skel{
  direction:rtl;
  grid-template-columns:minmax(0,1fr) 230px;
  min-height:132px;
  padding:16px;
  padding-inline-start:19px;
  border-radius:18px;
}
@media (max-width:767px){
  .feed-skel{
    grid-template-columns:1fr;
    min-height:205px;
  }
}

/* ══════════════════════════════════════════════════════════════
   COMPLETED EXCHANGES — calm neutral pass
   Flat surfaces and neutral hierarchy replace the green glow,
   gradient, rail and tinted amount boxes from the previous pass.
   ══════════════════════════════════════════════════════════════ */

.section-title:has(+ .proof-wrap),
.section-title:has(+ .feed-wrap){
  margin:22px 0 10px;
  color:var(--text);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
}
.section-title:has(+ .proof-wrap) > .icn,
.section-title:has(+ .feed-wrap) > .icn{
  width:32px;
  height:32px;
  padding:7px;
  color:var(--text-muted);
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:10px;
}

.feed-wrap{ gap:9px; }

.feed-row,
[data-theme="light"] .feed-row,
[data-theme="dark"] .feed-row{
  padding:15px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:none;
}
.feed-row::before{ display:none; }

@media (hover:hover) and (pointer:fine){
  .feed-row:hover{
    transform:none;
    background:var(--surface);
    border-color:var(--border-strong);
    box-shadow:none;
  }
}
.feed-row:active{
  transform:none;
  background:var(--surface-2);
}

.feed-main{ gap:10px; }

.feed-id{
  gap:6px;
  padding:0;
  color:var(--text-faint);
  background:transparent;
  border-radius:0;
  font-size:10.5px;
  font-weight:var(--fw-semibold);
}
.feed-id .icn{
  width:19px;
  height:19px;
  flex-basis:19px;
  padding:3px;
  color:var(--text-muted);
  background:var(--surface-2);
  border:1px solid var(--border);
}

.feed-route .method-icon,
.feed-route img{
  width:36px;
  height:36px;
  flex-basis:36px;
  padding:4px;
  background:var(--surface-2);
  border-color:var(--border);
  border-radius:10px;
  box-shadow:none;
}
.feed-route .method-icon svg,
.feed-route .method-icon .icn,
.feed-route .method-icon .icon--solar{
  width:21px;
  height:21px;
}
.fr-arrow{
  width:23px;
  height:23px;
  flex-basis:23px;
  padding:3px;
  color:var(--text-faint);
  background:transparent;
  border:0;
}

.feed-phone{
  padding:0;
  color:var(--text-faint);
  background:transparent;
  border-radius:0;
}

.feed-side{
  padding:10px;
  gap:7px 10px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:11px;
}
.feed-time{
  padding:0 1px 7px;
  border-bottom:1px solid var(--border);
}
.feed-time::before{ display:none; }

.fa-line,
.fa-in{
  gap:3px;
  padding:3px 4px;
  background:transparent;
  border:0;
  border-radius:0;
}
.fa-out{
  padding-inline-start:10px;
  border-inline-start:1px solid var(--border);
}
.fa-lbl{ color:var(--text-faint); }
.fa-in .fa-val{
  color:var(--text);
  font-size:15px;
}
.fa-out .fa-val{
  color:var(--text-muted);
  font-size:11.5px;
}

.feed-amount{
  color:var(--text);
  background:var(--surface-2);
  border-color:var(--border);
}

@media (max-width:767px){
  .feed-row{ padding:14px; }
  .feed-side{ padding:9px; }
  .feed-route .method-icon,
  .feed-route img{
    width:37px;
    height:37px;
    flex-basis:37px;
  }
}

   CUSTOMER SUPPORT CASES
   ══════════════════════════════════════════════════════════════ */
.support-page-head{
  display:flex; align-items:flex-start; gap:12px;
}
.support-page-head > div{ flex:1; min-width:0; }
.support-back{
  width:42px; height:42px; flex:0 0 42px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--surface); color:var(--text); cursor:pointer;
}
.support-back:active{ background:var(--surface-hover); }
.support-form-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:18px;
  box-shadow:var(--shadow-sm); margin-bottom:22px;
}
.support-form-title{
  display:flex; align-items:center; gap:12px;
  padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--border);
}
.support-form-icon{
  width:42px; height:42px; flex:0 0 42px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-md); color:var(--primary); background:var(--info-soft);
}
.support-form-icon .icn{ width:21px; height:21px; }
.support-form-title > div{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.support-form-title b{ font-size:var(--fs-md); }
.support-form-title span{ font-size:var(--fs-xs); color:var(--text-muted); }
.support-select{
  width:100%; appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:18px calc(50% - 3px),13px calc(50% - 3px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  padding-inline-start:34px;
}
.support-label-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.support-label-row small{ direction:ltr; color:var(--text-faint); font-weight:var(--fw-normal); }
.support-description{
  width:100%; min-height:130px; resize:vertical; line-height:1.8;
}
.support-image-picker{
  min-height:78px; padding:14px; display:flex; align-items:center; gap:12px;
  background:var(--surface-2); border:1.5px dashed var(--border-strong);
  border-radius:var(--radius-md); cursor:pointer; transition:all var(--t);
}
.support-image-picker:active,.support-image-picker.selected{
  border-color:var(--primary); background:var(--info-soft);
}
.support-image-picker-icon{
  width:42px; height:42px; flex:0 0 42px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); background:var(--surface); color:var(--primary);
}
.support-image-picker-icon .icn{ width:21px; height:21px; }
.support-image-picker > span:nth-child(2){ min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.support-image-picker b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-sm); }
.support-image-picker small{ color:var(--text-muted); font-size:var(--fs-2xs); }
.support-upload-arrow{ width:20px; height:20px; flex:0 0 20px; color:var(--text-muted); }
.support-image-preview{ position:relative; margin-top:10px; }
.support-image-preview img{
  display:block; width:100%; max-height:260px; object-fit:contain;
  border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-2);
}
.support-image-preview button{
  position:absolute; inset-block-start:9px; inset-inline-end:9px;
  width:32px; height:32px; border:0; border-radius:var(--radius-full);
  background:rgba(10,12,17,.78); color:#fff; font-size:22px; line-height:1; cursor:pointer;
}
.support-submit-btn{ margin-top:6px; }
.support-success{
  align-items:center; gap:11px; margin-top:14px; padding:13px;
  border:1px solid var(--success); border-radius:var(--radius-md);
  background:var(--success-soft); color:var(--success);
}
.support-success > .icn{ width:26px; height:26px; flex:0 0 26px; }
.support-success > div{ display:flex; flex-direction:column; gap:2px; color:var(--text); }
.support-success span{ font-size:var(--fs-xs); color:var(--text-muted); }
.support-success strong{ color:var(--success); }
.support-list-title{ display:flex; align-items:center; gap:8px; }
.support-list-title .icn{ width:19px; height:19px; color:var(--primary); }
.support-loading{ padding:28px 12px; text-align:center; color:var(--text-muted); }
.support-case-card{
  position:relative; overflow:hidden; margin-bottom:12px; padding:15px;
  background:var(--surface); border:1px solid var(--border);
  border-inline-start:4px solid var(--warning); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.support-case-card.progress{ border-inline-start-color:var(--info); }
.support-case-card.needs-correction{ border-inline-start-color:var(--error); }
.support-case-card.corrected{ border-inline-start-color:var(--secondary); }
.support-case-card.resolved{ border-inline-start-color:var(--success); }
.support-case-card.closed{ border-inline-start-color:var(--text-faint); }
.support-case-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.support-case-head > div{ direction:ltr; display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.support-case-head b{ font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:var(--fs-md); }
.support-case-head small{ font-size:var(--fs-2xs); color:var(--text-faint); }
.support-case-status{
  padding:5px 10px; border-radius:var(--radius-full); white-space:nowrap;
  background:var(--warning-soft); color:var(--warning); font-size:var(--fs-2xs); font-weight:var(--fw-bold);
}
.support-case-card.progress .support-case-status{ color:var(--info); background:var(--info-soft); }
.support-case-card.needs-correction .support-case-status{ color:var(--error); background:var(--error-soft); }
.support-case-card.corrected .support-case-status{ color:var(--secondary); background:var(--secondary-soft); }
.support-case-card.resolved .support-case-status{ color:var(--success); background:var(--success-soft); }
.support-case-card.closed .support-case-status{ color:var(--text-muted); background:var(--surface-2); }
.support-case-meta{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.support-case-meta span{
  padding:4px 8px; border-radius:var(--radius-full); background:var(--surface-2);
  color:var(--text-muted); font-size:var(--fs-2xs);
}
.support-case-description{
  margin:12px 0 0; color:var(--text); font-size:var(--fs-sm); line-height:1.8;
  overflow-wrap:anywhere; white-space:pre-wrap;
}
.support-case-image-link{
  position:relative; display:block; overflow:hidden; width:100%; margin-top:12px; padding:0;
  border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-2);
  color:inherit; font:inherit; text-align:inherit; cursor:pointer;
}
.support-case-image-link img{ display:block; width:100%; max-height:220px; object-fit:cover; }
.support-case-image-link span{
  position:absolute; inset-inline-end:8px; inset-block-end:8px;
  padding:5px 9px; border-radius:var(--radius-full);
  background:rgba(10,12,17,.76); color:#fff; font-size:var(--fs-2xs); font-weight:var(--fw-semibold);
}
.support-admin-reply{
  margin-top:12px; padding:11px 12px; border:1px solid var(--info);
  border-radius:var(--radius-md); background:var(--info-soft);
}
.support-admin-reply b{ display:block; margin-bottom:4px; color:var(--info); font-size:var(--fs-xs); }
.support-admin-reply p{ margin:0; color:var(--text); font-size:var(--fs-sm); line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; }
.support-correction-notice,.support-customer-response{
  margin-top:12px; padding:12px; border-radius:var(--radius-md);
}
.support-correction-notice{ border:1px solid var(--error); background:var(--error-soft); }
.support-customer-response{ border:1px solid var(--secondary); background:var(--secondary-soft); }
.support-correction-notice b,.support-customer-response b{ display:block; margin-bottom:4px; font-size:var(--fs-xs); }
.support-correction-notice b{ color:var(--error); }
.support-customer-response b{ color:var(--secondary); }
.support-correction-notice p,.support-customer-response p{
  margin:0; color:var(--text); font-size:var(--fs-sm); line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere;
}
.support-correction-action{ margin-top:10px; }

.support-image-modal{ padding:12px; }
.support-image-modal-card{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:min(100%,900px); max-height:92vh; padding:44px 10px 10px;
  border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-xl); background:#0b0f18;
}
.support-image-modal-card img{ display:block; max-width:100%; max-height:calc(92vh - 56px); object-fit:contain; border-radius:var(--radius-md); }
.support-modal-close{
  position:absolute; inset-block-start:10px; inset-inline-end:10px; z-index:2;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--radius-full); background:rgba(255,255,255,.12); color:#fff; cursor:pointer;
}
.support-modal-close .icn{ width:18px; height:18px; }
.support-modal-close.inline{ position:static; flex:0 0 34px; background:var(--surface-2); color:var(--text); }
.support-correction-modal{ align-items:center; overflow-y:auto; }
.support-correction-card{
  max-width:620px; max-height:92vh; overflow-y:auto; padding:22px; text-align:start;
}
.support-correction-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--border); margin-bottom:14px; }
.support-correction-head h2{ margin:0 0 3px; }
.support-correction-head span{ color:var(--text-muted); font-size:var(--fs-xs); }
.support-correction-request{ margin:0 0 16px; padding:12px; border:1px solid var(--error); border-radius:var(--radius-md); background:var(--error-soft); }
.support-correction-request b{ display:block; margin-bottom:5px; color:var(--error); font-size:var(--fs-xs); }
.support-correction-request p{ margin:0; color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere; }
.support-correction-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.support-correction-response{ width:100%; min-height:90px; resize:vertical; line-height:1.8; }
.support-current-image{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%; margin-bottom:9px; padding:10px 12px;
  border:1px solid var(--info); border-radius:var(--radius-md); background:var(--info-soft); color:var(--info);
  font:inherit; font-size:var(--fs-xs); font-weight:var(--fw-semibold); cursor:pointer;
}
.support-current-image .icn{ width:18px; height:18px; }

@media (min-width:700px){
  .support-form-card{ padding:22px; }
  .support-case-card{ padding:18px; }
}
@media (max-width:520px){
  .support-correction-card{ max-height:94vh; padding:18px 15px; }
  .support-correction-grid{ grid-template-columns:1fr; gap:0; }
}




/* ═══════════════ Solar icons (api.iconify.design) ═══════════════
   The Solar stylesheet already sets display, background-color and the
   mask properties on .icon--solar. Only add what it does not cover.
   NEVER write `mask:` or `--svg:` here — the shorthand wipes out
   mask-image and every icon turns into a solid coloured square. */
.icon--solar{ vertical-align:middle; flex-shrink:0; }
.icn.icon--solar{ width:20px; height:20px; }
.icn-sm.icon--solar{ width:16px; height:16px; }
.icn-lg.icon--solar{ width:28px; height:28px; }
.icn-xl.icon--solar{ width:34px; height:34px; }
/* icons injected by JS into a wrapper that is already sized */
.icn > .icon--solar{ width:100%; height:100%; }
@media (max-width:380px){
  .icn.icon--solar{ width:16px; height:16px; }
  .icn-sm.icon--solar{ width:13px; height:13px; }
}

/* ══════════════════════════════════════════════════════════════
   PROFILE v2 — identity header, @username, verification badge
   ══════════════════════════════════════════════════════════════ */
.pf2-hero{
  position:relative; overflow:hidden; padding:0 18px 20px; gap:8px;
}
.pf2-cover{
  align-self:stretch; height:88px; margin:0 -18px;
  background:
    radial-gradient(120px 80px at 18% 30%, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(160px 90px at 85% 80%, rgba(255,255,255,.12), transparent 70%),
    linear-gradient(135deg, var(--primary), var(--secondary));
}
.pf2-avatar-wrap{ position:relative; margin-top:-46px; }
.pf2-avatar{
  width:92px; height:92px; font-size:var(--fs-3xl);
  border:4px solid var(--surface); box-shadow:var(--shadow-md); overflow:hidden;
}
.pf-avatar.has-photo, .greet-av.has-photo{ background:var(--surface-2); padding:0; }
.pf-avatar.has-photo img, .greet-av.has-photo img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.pf2-verified-dot{
  position:absolute; inset-block-end:3px; inset-inline-end:1px;
  width:28px; height:28px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  background:var(--success); color:#fff; border:3px solid var(--surface);
}
.pf2-verified-dot[hidden]{ display:none; }
.pf2-verified-dot .icn{ width:15px; height:15px; }
.pf2-identity{ display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; max-width:100%; }
.pf2-identity .pf-name{ font-size:var(--fs-xl); line-height:1.3; overflow-wrap:anywhere; }
.pf2-handle{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  padding:4px 11px; border-radius:var(--radius-full);
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted);
  font:inherit; font-size:var(--fs-sm); font-weight:var(--fw-semibold); cursor:pointer;
  transition:background var(--t), border-color var(--t);
}
.pf2-handle span[dir="ltr"]{ font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; letter-spacing:.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf2-handle:hover{ border-color:var(--border-strong); color:var(--text); }
.pf2-handle:active{ transform:scale(.98); }
.pf2-handle .icn{ width:14px; height:14px; opacity:.75; }
.pf2-identity .pf-email{ overflow-wrap:anywhere; }

/* Verification badge — one compact pill, colour carries the state */
.kyc-badge{
  --kyc-c:var(--text-muted); --kyc-bg:var(--surface-2); --kyc-bd:var(--border);
  display:inline-flex; align-items:center; gap:8px; max-width:100%;
  margin-top:4px; padding:6px 14px 6px 8px; border-radius:var(--radius-full);
  background:var(--kyc-bg); border:1px solid var(--kyc-bd); color:var(--kyc-c);
  font:inherit; font-size:var(--fs-sm); font-weight:var(--fw-semibold); cursor:pointer;
  transition:transform var(--t), box-shadow var(--t);
}
.kyc-badge:hover{ box-shadow:0 0 0 3px var(--kyc-bg); }
.kyc-badge:active{ transform:scale(.98); }
.kyc-badge-ico{
  width:24px; height:24px; flex:0 0 24px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--kyc-c);
}
.kyc-badge-ico .icn{ width:15px; height:15px; }
:is(.kyc-badge,.kyc-card,.kyc-banner)[data-state="required"]{ --kyc-c:var(--warning); --kyc-bg:var(--warning-soft); --kyc-bd:color-mix(in srgb, var(--warning) 45%, transparent); }
:is(.kyc-badge,.kyc-card,.kyc-banner)[data-state="pending"] { --kyc-c:var(--info);    --kyc-bg:var(--info-soft);    --kyc-bd:color-mix(in srgb, var(--info) 45%, transparent); }
:is(.kyc-badge,.kyc-card,.kyc-banner)[data-state="approved"]{ --kyc-c:var(--success); --kyc-bg:var(--success-soft); --kyc-bd:color-mix(in srgb, var(--success) 45%, transparent); }
:is(.kyc-badge,.kyc-card,.kyc-banner)[data-state="rejected"]{ --kyc-c:var(--error);   --kyc-bg:var(--error-soft);   --kyc-bd:color-mix(in srgb, var(--error) 45%, transparent); }
:is(.kyc-badge,.kyc-card,.kyc-banner)[data-state="error"]   { --kyc-c:var(--error); }
.kyc-badge[data-state="required"] .kyc-badge-ico,
.kyc-badge[data-state="rejected"] .kyc-badge-ico{ animation:kycPulse 1.8s ease-in-out infinite; }
@keyframes kycPulse{ 0%,100%{ box-shadow:0 0 0 0 var(--kyc-bg); } 50%{ box-shadow:0 0 0 6px var(--kyc-bg); } }

/* Status card under the header */
.kyc-card{
  --kyc-c:var(--primary); --kyc-bg:var(--info-soft);
  background:var(--surface); border:1px solid var(--border);
  border-inline-start:4px solid var(--kyc-c); border-radius:var(--radius-lg);
  padding:15px; margin-bottom:14px; box-shadow:var(--card-shadow, var(--shadow-sm));
  animation:fadeUp .25s var(--ease);
}
.kyc-card[hidden]{ display:none; }
.kyc-card[data-state="none"]{ --kyc-c:var(--secondary); --kyc-bg:var(--secondary-soft); }
.kyc-card-head{ display:flex; align-items:flex-start; gap:12px; }
.kyc-card-ico{
  width:42px; height:42px; flex:0 0 42px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  background:var(--kyc-bg); color:var(--kyc-c);
}
.kyc-card-ico .icn{ width:22px; height:22px; }
.kyc-card-head > div{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.kyc-card-head b{ font-size:var(--fs-md); color:var(--text); }
.kyc-card-head small{ font-size:var(--fs-xs); color:var(--text-muted); line-height:1.7; }
.kyc-card-btn{ margin-top:13px; }
.kyc-note{
  margin-top:12px; padding:11px 12px; border-radius:var(--radius-md);
  background:var(--surface-2); border:1px solid var(--border);
}
.kyc-note.danger{ background:var(--error-soft); border-color:color-mix(in srgb, var(--error) 40%, transparent); }
.kyc-note b{ display:block; font-size:var(--fs-2xs); color:var(--text-muted); margin-bottom:3px; }
.kyc-note.danger b{ color:var(--error); }
.kyc-note p{ margin:0; font-size:var(--fs-sm); line-height:1.75; color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere; }
.kyc-facts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.kyc-facts span{ display:flex; flex-direction:column; gap:2px; padding:9px 11px; border-radius:var(--radius-md); background:var(--surface-2); min-width:0; }
.kyc-facts small{ font-size:var(--fs-2xs); color:var(--text-faint); }
.kyc-facts b{ font-size:var(--fs-sm); overflow-wrap:anywhere; }

.bn-dot-alert{ background:var(--warning); color:#1b1300; }

/* Desktop: header + status on one side, settings on the other */
@media (min-width:900px){
  #pageProfile.page.active{
    display:grid; grid-template-columns:minmax(300px,360px) minmax(0,1fr);
    column-gap:18px; align-items:start;
  }
  #pageProfile > .page-head, #pageProfile > .pf-app-version{ grid-column:1 / -1; }
  #pageProfile > .pf2-hero{ grid-column:1; grid-row:2; }
  #pageProfile > .kyc-card{ grid-column:1; grid-row:3; }
  #pageProfile > .pf-card{ grid-column:2; grid-row:2; }
  #pageProfile > .pf-menu{ grid-column:2; grid-row:3 / span 2; }
  #pageProfile > .pf-app-version{ grid-row:5; }
}

/* ══════════════════════════════════════════════════════════════
   IDENTITY VERIFICATION PAGE (/verify)
   ══════════════════════════════════════════════════════════════ */
.kyc-banner{
  --kyc-c:var(--text-muted); --kyc-bg:var(--surface-2); --kyc-bd:var(--border);
  display:flex; align-items:flex-start; gap:11px;
  padding:13px 14px; margin-bottom:14px; border-radius:var(--radius-lg);
  background:var(--kyc-bg); border:1px solid var(--kyc-bd); color:var(--kyc-c);
}
.kyc-banner[hidden]{ display:none; }
.kyc-banner[data-state="none"]{ --kyc-c:var(--secondary); --kyc-bg:var(--secondary-soft); --kyc-bd:color-mix(in srgb, var(--secondary) 35%, transparent); }
.kyc-banner > .icn{ width:24px; height:24px; flex:0 0 24px; margin-top:1px; }
.kyc-banner > div{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.kyc-banner b{ font-size:var(--fs-md); }
.kyc-banner p{ margin:0; color:var(--text); font-size:var(--fs-sm); line-height:1.75; overflow-wrap:anywhere; white-space:pre-wrap; }
.kyc-banner .kyc-mini-btn{ align-self:flex-start; margin-top:6px; }

.kyc-form-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl);
  padding:16px; box-shadow:var(--card-shadow, var(--shadow-sm)); margin-bottom:18px;
}
.kyc-form-card[hidden]{ display:none; }
.kyc-steps{
  list-style:none; margin:0 0 16px; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
}
.kyc-steps li{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:5px;
  font-size:var(--fs-2xs); color:var(--text-faint); text-align:center;
}
.kyc-steps li::after{
  content:''; position:absolute; top:13px; inset-inline-start:calc(50% + 17px); inset-inline-end:calc(-50% + 17px);
  height:2px; border-radius:2px; background:var(--border);
}
.kyc-steps li:last-child::after{ display:none; }
.kyc-steps li span{
  width:27px; height:27px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted);
  font-weight:var(--fw-bold); font-size:var(--fs-xs); transition:all var(--t);
}
.kyc-steps li.on{ color:var(--text); font-weight:var(--fw-semibold); }
.kyc-steps li.on span{ border-color:var(--primary); color:var(--primary); box-shadow:0 0 0 4px var(--focus-ring); }
.kyc-steps li.done{ color:var(--success); }
.kyc-steps li.done span{ background:var(--success); border-color:var(--success); color:#fff; }
.kyc-steps li.done::after{ background:var(--success); }

.kyc-sec{ padding:14px 0 4px; border-top:1px solid var(--border); transition:opacity var(--t); }
.kyc-sec:first-of-type{ border-top:none; padding-top:2px; }
.kyc-sec[data-locked="true"]{ opacity:.45; pointer-events:none; }
.kyc-sec-title{ display:flex; align-items:flex-start; gap:10px; margin-bottom:13px; }
.kyc-sec-title > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.kyc-sec-title b{ font-size:var(--fs-md); }
.kyc-sec-title small{ font-size:var(--fs-xs); color:var(--text-muted); line-height:1.6; }
.kyc-num{
  width:26px; height:26px; flex:0 0 26px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--secondary-soft); color:var(--primary); font-weight:var(--fw-bold); font-size:var(--fs-xs);
}

.kyc-doc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px; }
.kyc-doc{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:14px 13px; min-height:118px; text-align:start; cursor:pointer;
  background:var(--surface-2); border:1.5px solid var(--border); border-radius:var(--radius-lg);
  color:var(--text); font:inherit; transition:border-color var(--t), background var(--t), box-shadow var(--t), transform var(--t);
}
.kyc-doc:hover{ border-color:var(--border-strong); }
.kyc-doc:active{ transform:scale(.985); }
.kyc-doc.on{ border-color:var(--primary); background:var(--info-soft); box-shadow:0 0 0 4px var(--focus-ring); }
.kyc-doc-ico{
  width:42px; height:42px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--primary); border:1px solid var(--border);
}
.kyc-doc-ico .icn{ width:23px; height:23px; }
.kyc-doc-txt{ display:flex; flex-direction:column; gap:3px; }
.kyc-doc-txt b{ font-size:var(--fs-md); }
.kyc-doc-txt small{ font-size:var(--fs-2xs); color:var(--text-muted); line-height:1.55; }
.kyc-doc-check{
  position:absolute; top:10px; inset-inline-end:10px; color:var(--primary);
  opacity:0; transform:scale(.6); transition:all var(--t);
}
.kyc-doc.on .kyc-doc-check{ opacity:1; transform:scale(1); }
.kyc-doc[disabled]{ pointer-events:none; opacity:.7; }

.kyc-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#kycDob{ text-align:left; }

.kyc-upload-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.kyc-upload[hidden]{ display:none; }
.kyc-drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  min-height:168px; padding:16px 10px; text-align:center; cursor:pointer;
  background:var(--surface-2); border:1.5px dashed var(--border-strong); border-radius:var(--radius-lg);
  transition:border-color var(--t), background var(--t);
}
.kyc-drop[hidden]{ display:none; }
.kyc-drop:hover{ border-color:var(--primary); }
.kyc-drop:active{ background:var(--info-soft); }
.kyc-drop.busy{ opacity:.65; pointer-events:none; }
.kyc-drop.busy .kyc-drop-ico .icn{ animation:spin .9s linear infinite; }
.kyc-drop-ico{
  width:48px; height:48px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--primary); border:1px solid var(--border);
}
.kyc-drop-ico .icn{ width:24px; height:24px; }
.kyc-drop b{ font-size:var(--fs-sm); }
.kyc-drop small{ font-size:var(--fs-2xs); color:var(--text-muted); line-height:1.5; }
.kyc-preview{
  border:1.5px solid var(--success); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface-2);
}
.kyc-preview[hidden]{ display:none; }
.kyc-preview img{ display:block; width:100%; height:168px; object-fit:contain; background:#0b0f18; }
.kyc-preview-bar{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:7px 8px; flex-wrap:wrap; }
.kyc-preview-meta{ font-size:var(--fs-2xs); color:var(--text-muted); direction:ltr; unicode-bidi:isolate; }
.kyc-preview-actions{ display:flex; gap:5px; }
.kyc-mini-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  padding:5px 10px; min-height:30px; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  font:inherit; font-size:var(--fs-2xs); font-weight:var(--fw-semibold); cursor:pointer;
}
.kyc-mini-btn:active{ transform:scale(.97); }
.kyc-mini-btn.danger{ color:var(--error); border-color:color-mix(in srgb, var(--error) 35%, transparent); }
.kyc-mini-btn[disabled]{ pointer-events:none; opacity:.5; }
.kyc-upload .field-error{ margin-top:6px; }
.kyc-tips{ margin:12px 0 4px; padding:0 18px 0 0; color:var(--text-muted); font-size:var(--fs-2xs); line-height:1.9; }

.kyc-privacy{
  display:flex; align-items:flex-start; gap:9px; margin:14px 0 10px; padding:11px 12px;
  border-radius:var(--radius-md); background:var(--surface-2); border:1px solid var(--border);
}
.kyc-privacy .icn{ width:18px; height:18px; flex:0 0 18px; color:var(--success); margin-top:2px; }
.kyc-privacy p{ margin:0; font-size:var(--fs-xs); color:var(--text-muted); line-height:1.75; }
.kyc-consent{ display:flex; align-items:flex-start; gap:9px; padding:4px 2px; cursor:pointer; font-size:var(--fs-sm); line-height:1.7; }
.kyc-consent input{ width:18px; height:18px; flex:0 0 18px; margin:3px 0 0; accent-color:var(--primary); }
.kyc-form-error{
  display:flex; align-items:flex-start; gap:8px; margin-top:12px; padding:11px 12px;
  border-radius:var(--radius-md); background:var(--error-soft); color:var(--error);
  border:1px solid color-mix(in srgb, var(--error) 35%, transparent); font-size:var(--fs-sm); line-height:1.7;
}
.kyc-form-error[hidden]{ display:none; }
.kyc-form-error svg, .kyc-form-error .icon--solar{ width:16px; height:16px; flex:0 0 16px; margin-top:3px; }
.kyc-submit-btn{ margin-top:14px; }
.kyc-progress{ margin-top:12px; }
.kyc-progress[hidden]{ display:none; }
.kyc-progress-track{ height:6px; border-radius:var(--radius-full); background:var(--surface-2); overflow:hidden; }
.kyc-progress-track span{ display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg, var(--primary), var(--secondary)); transition:width .35s var(--ease); }
.kyc-progress small{ display:block; margin-top:6px; text-align:center; color:var(--text-muted); font-size:var(--fs-xs); }

.kyc-success{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:26px 18px; margin-bottom:18px; border-radius:var(--radius-xl);
  background:var(--surface); border:1px solid color-mix(in srgb, var(--success) 45%, transparent);
  box-shadow:var(--card-shadow, var(--shadow-sm)); animation:popUp .3s var(--ease-soft);
}
.kyc-success[hidden]{ display:none; }
.kyc-success-ico{
  width:72px; height:72px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  background:var(--success-soft); color:var(--success);
}
.kyc-success h3{ font-size:var(--fs-lg); }
.kyc-success p{ color:var(--text-muted); font-size:var(--fs-sm); line-height:1.8; max-width:420px; }
.kyc-success .btn{ margin-top:6px; max-width:320px; }

@media (max-width:420px){
  .kyc-doc-grid{ gap:8px; }
  .kyc-doc{ padding:12px 10px; min-height:112px; }
  .kyc-grid-2, .kyc-upload-grid{ grid-template-columns:1fr; gap:0 10px; }
  .kyc-upload + .kyc-upload{ margin-top:12px; }
  .kyc-facts{ grid-template-columns:1fr; }
}
@media (min-width:700px){
  .kyc-form-card{ padding:22px; }
  .kyc-drop, .kyc-preview img{ min-height:200px; height:auto; }
  .kyc-preview img{ height:200px; }
}
@media (prefers-reduced-motion:reduce){
  .kyc-badge-ico{ animation:none !important; }
}

/* KYC image source: Camera or Gallery only */
.kyc-drop{ cursor:default; }
.kyc-drop:active{ background:var(--surface-2); }
.kyc-src-btns{ display:flex; flex-direction:column; gap:7px; width:100%; margin-top:6px; }
.kyc-src-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:42px; padding:8px 12px; border-radius:var(--radius-md);
  background:var(--surface); border:1px solid var(--border-strong); color:var(--text);
  font-size:var(--fs-sm); font-weight:var(--fw-semibold); cursor:pointer; user-select:none;
  transition:transform var(--t), border-color var(--t), background var(--t);
}
.kyc-src-btn:hover{ border-color:var(--primary); }
.kyc-src-btn:active{ transform:scale(.97); }
.kyc-src-btn:focus-visible, .kyc-mini-btn:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--focus-ring); }
.kyc-src-btn.primary{
  background:linear-gradient(135deg, var(--primary), var(--secondary)); border-color:transparent; color:#fff;
}
.kyc-src-ico{ width:18px; height:18px; flex:0 0 18px; }
.kyc-mini-btn .kyc-src-ico{ width:14px; height:14px; flex-basis:14px; }
.kyc-upload.busy .kyc-src-btns, .kyc-upload.busy .kyc-preview-actions{ opacity:.55; pointer-events:none; }
.kyc-upload.busy .kyc-drop-ico .icn{ animation:spin .9s linear infinite; }
.kyc-upload .field-error.show{
  display:flex; width:100%; justify-content:flex-start; text-align:start;
  margin-top:8px; padding:10px 12px; border-radius:var(--radius-md);
  font-size:var(--fs-sm); font-weight:var(--fw-semibold); line-height:1.6;
  border:1px solid color-mix(in srgb, var(--error) 35%, transparent);
}
@media (min-width:700px){
  .kyc-src-btns{ flex-direction:row; }
  .kyc-src-btn{ flex:1 1 0; padding-inline:8px; font-size:var(--fs-xs); }
}


/* ══ Exchange blocked until admin-requested KYC is approved ══ */
#exchangeCard.kyc-locked > :not(.xc-head):not(#exchangeKycGate){ display:none !important; }
.xc-kyc-gate{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  margin-top:6px; padding:22px 16px 18px; border-radius:var(--radius-lg);
  background:var(--warning-soft); border:1px solid color-mix(in srgb, var(--warning) 45%, transparent);
  animation:fadeUp .25s var(--ease);
}
.xc-kyc-gate[hidden]{ display:none; }
.xc-kyc-gate-ico{
  width:56px; height:56px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--warning); border:1px solid color-mix(in srgb, var(--warning) 35%, transparent);
}
.xc-kyc-gate-ico .icn{ width:28px; height:28px; }
.xc-kyc-gate-msg{ margin:0; font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--text); line-height:1.7; }
.xc-kyc-gate-sub{ margin:0; font-size:var(--fs-sm); color:var(--text-muted); line-height:1.7; }
.xc-kyc-gate-sub:empty{ display:none; }
.xc-kyc-gate .btn{ margin-top:6px; max-width:360px; }

/* ══ Verified name ══ */
.pf-name-kyc-hint{
  display:flex; align-items:center; gap:6px; margin-top:7px;
  font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--success);
}
.pf-name-kyc-hint[hidden]{ display:none; }
.pf-name-kyc-hint .icn{ width:15px; height:15px; }
#pfName.is-locked{ background:var(--surface-2); color:var(--text-muted); cursor:not-allowed; }
.kyc-label-help{ font-weight:var(--fw-regular, 400); color:var(--text-faint); font-size:var(--fs-2xs); }
.kyc-name-note{
  margin:8px 0 0; padding:9px 11px; border-radius:var(--radius-md);
  background:var(--warning-soft); color:var(--text);
  border:1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  font-size:var(--fs-xs); line-height:1.75;
}
.kyc-name-note[hidden]{ display:none; }
/* Same name written in the other alphabet — informative, not a warning */
.kyc-name-note.ok{ background:var(--success-soft); border-color:color-mix(in srgb, var(--success) 40%, transparent); }

/* ══ Exchange steps — grouping instead of nested cards ═════════ */
.xc-flow{ display:flex; flex-direction:column; }
.xc-step-num{
  width:22px; height:22px; flex:0 0 22px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  background:var(--secondary-soft); color:var(--primary);
  font-size:var(--fs-2xs); font-weight:var(--fw-bold);
}
.xc-step-head h3{ font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--text); letter-spacing:0; text-transform:none; }
.xc-step-head{ text-transform:none; letter-spacing:0; }
#exchangeCard .wallet-row{ margin:var(--space-3) 0 0; }
#exchangeCard .file-field{ margin:0; }
.xc-summary .xc-sum-row .lbl{ color:var(--text-muted); }

/* Comfortable touch targets in the exchange card (was 24–32px). */
#exchangeCard .quick-amount-btn{ min-height:40px; padding-inline:14px; }
#exchangeCard .copy-btn{ width:40px; height:40px; flex:0 0 40px; display:inline-flex; align-items:center; justify-content:center; }
#exchangeCard .wallet-row-line{ gap:10px; min-height:44px; }
#exchangeCard .xc-swap-btn{ width:40px; height:40px; }

/* ══════════════════════════════════════════════════════════════
   HOME FEED — layout fixes
   The stats card that used to fill the first column of .proof-wrap is
   permanently hidden, so on desktop the feed was squeezed into that 300px
   column and its route collapsed. The feed now uses the full width, and the
   main column always keeps room for the route.
   ══════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  .proof-wrap{ display:block; }
}
@media (min-width:421px){
  .feed-row{ grid-template-columns:minmax(0,1fr) minmax(150px,auto); }
}

/* ══════════════════════════════════════════════════════════════════════
   PROXO DESIGN SYSTEM — final layer (pixel pass)
   Everything above this block is older, stacked layers. This block is the
   single source of truth for size, radius and spacing, using only the
   tokens defined in :root. One value per role:

     radius   --radius-xl 18px  page panels (exchange, forms, profile hero)
              --radius-lg 14px  content cards (transactions, feed, rates…)
              --radius-md 11px  controls (inputs, pickers, buttons)
              --radius-full     chips and badges
     padding  18px panels · 14px cards
     type     --fs-xl page title · --fs-lg panel title · --fs-md section
              --fs-base body/labels · --fs-xs meta · --fs-2xs micro
     controls inputs 50px (16px text on touch screens: no iOS zoom)
              buttons 48px
   ══════════════════════════════════════════════════════════════════════ */

/* ── Page headers: a title, not another card ── */
.page-head{
  background:none; border:0; box-shadow:none; border-radius:0;
  padding:0; margin:var(--space-2) 2px var(--space-5);
}
.page-head h2{ font-size:var(--fs-xl); font-weight:var(--fw-bold); line-height:1.35; gap:10px; }
.page-head h2 .icn{ width:32px; height:32px; padding:6px; border-radius:10px; flex:0 0 32px; }
.page-head p{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:6px; line-height:1.65; }
/* pages with a back button: button and title on one row */
.support-page-head{ display:flex; align-items:center; gap:12px; }
.support-page-head h2{ font-size:var(--fs-xl); }
.support-back{ width:40px; height:40px; flex:0 0 40px; border-radius:var(--radius-md); }

/* ── Headings inside a page ── */
.section-title{
  font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--text);
  margin:var(--space-6) 2px var(--space-3); gap:8px;
}
.section-title > .icn{ width:26px; height:26px; padding:5px; border-radius:8px; }
.xc-head h2{ font-size:var(--fs-lg); }
.xc-step-head h3{ font-size:var(--fs-base); font-weight:var(--fw-bold); }

/* ── Panels: the one big surface of a page ── */
.panel, .pf-card, .kyc-form-card, .support-form-card{
  border-radius:var(--radius-xl); padding:var(--space-5);
}
.pf-hero{ border-radius:var(--radius-xl); }

/* ── Content cards ── */
.tx-card, .feed-row, .rate-card, .rule-item, .kyc-card, .tx-summary,
.home-greet, .xc-summary, .chg-item{
  border-radius:var(--radius-lg);
}
.tx-card, .rate-card, .rule-item, .kyc-card, .chg-item{ padding:var(--space-4); }
.tx-card + .tx-card, .rule-item + .rule-item, .rate-card + .rate-card{ margin-top:10px; }
.pf-menu{ border-radius:var(--radius-lg); }

/* ── Controls ── */
.input, .picker-trigger, .wallet-row, .file-picker, .quick-amount-btn{ border-radius:var(--radius-md); }
.input, .picker-trigger{ min-height:50px; }
.input{ font-size:var(--fs-md); }
textarea.input{ min-height:110px; }
.btn{
  min-height:48px; border-radius:var(--radius-md);
  font-size:var(--fs-md); font-weight:var(--fw-semibold);
}
.quick-amount-btn{ height:40px; font-size:var(--fs-xs); }
/* iOS Safari zooms into any field under 16px when it is tapped */
@media (hover:none) and (pointer:coarse), (max-width:768px){
  .input, textarea.input, select.input{ font-size:16px; }
}

/* ── Badges: one size ── */
.status-badge, .xc-badge, .xc-step-head .xc-badge{
  padding:3px 10px; font-size:var(--fs-2xs); font-weight:var(--fw-semibold);
  line-height:1.5; border-radius:var(--radius-full);
}

/* ── Money: a received amount is always green ── */
.xc-sum-row.total .v, .confirm-row-value.accent{ color:var(--success); }

/* ── Home feed: two zones side by side on phones too ── */
@media (max-width:767px){
  .feed-row{ grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:12px 12px 12px 14px; }
  .feed-main{ gap:7px; }
  .feed-side{ min-width:118px; padding:8px 10px; gap:3px; display:flex; }
  .feed-time{ padding-bottom:4px; }
  .fa-in .fa-val{ font-size:var(--fs-md); }
}
@media (max-width:359px){
  .feed-row{ grid-template-columns:1fr; }
}
/* stragglers: older rules with higher specificity */
.section-title:has(+ .proof-wrap),
.section-title:has(+ .feed-wrap),
.proof-wrap .section-title{
  font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--text);
}
@media (hover:none) and (pointer:coarse), (max-width:768px){
  .xc-input-wrap .input, .field .xc-input-wrap .input{ font-size:16px; }
}
@media (hover:none) and (pointer:coarse), (max-width:768px){
  #exchangeCard .xc-input-wrap .input{ font-size:16px; }
}
@media (hover:none) and (pointer:coarse), (max-width:768px){
  #exchangeCard #userSenderName{ font-size:16px; }
}
/* back-button pages: the back button is the only icon in the header */
.support-page-head h2 > .icn{ display:none; }

/* home feed on phones: compact amount panel, full wallet names */
@media (max-width:767px){
  .feed-side{ min-width:0; padding:8px 10px; gap:2px; align-items:flex-end; text-align:end; }
  .feed-side .fa-lbl{ display:none; }            /* + / colour already say received vs sent */
  .feed-side .fa-line{ justify-content:flex-end; }
  .feed-time{ border-bottom:0; padding-bottom:2px; }
  .feed-route{ flex-wrap:wrap; row-gap:4px; }
  .feed-route .method-icon, .feed-route img{ width:24px; height:24px; flex-basis:24px; padding:2px; border-radius:7px; }
  .fr-name{ max-width:none; font-size:var(--fs-sm); }
  .fr-arrow{ width:18px; height:18px; flex-basis:18px; padding:3px; }
}