/* =====================================================================
   iReceive Bank — Classic online-banking theme (shared)
   Horizontal tab nav, gradient title bars, zebra tables, glossy buttons.
   Light institutional theme. Responsive.
   ===================================================================== */
:root{
  --navy:#003A70; --navy-d:#002850; --blue:#0A5AA8; --blue-l:#2F7FC0;
  /* Text colours darkened to meet WCAG AA on white.
     --ink-3 was #8593a1 at 3.1:1, below the 4.5:1 needed for body text —
     the meta lines under each transaction were the worst affected.
     --gold and --amber were also under, at 3.2 and 3.7. */
  --gold:#8A6A18; --green:#2E7D32; --red:#B23A3A; --amber:#8A5C10;
  --ink:#1D2B3A; --ink-2:#566677; --ink-3:#63748A;

  /* Kept light on purpose: borders are not text, and the 3:1 non-text
     threshold applies. --line-2 is decorative only. */
  --line:#BFCBD8; --line-2:#DDE5EE; --panel:#FFFFFF; --stripe:#F4F8FC;

  /* Brighter gold for use ON navy, where the dark gold disappears. */
  --gold-on-dark:#E3B44A;
  --btn-a:#FBFDFF; --btn-b:#DCE8F5;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,Verdana,sans-serif;font-size:12.5px;line-height:1.5;color:var(--ink);
  background:#e4ebf2;background:linear-gradient(#eef3f8,#dfe7f0 240px,#e4ebf2 240px)}
a{color:#0754a6;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
h1,h2,h3,h4{margin:0}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
.serif{font-family:Georgia,'Times New Roman',serif}
.num{font-family:'Lucida Console',Consolas,monospace}

/* ---- utility bar ---- */
.utility{background:var(--navy-d);color:#c6d4e2;font-size:11px}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;height:28px}
.utility a{color:#eaf1f8}
.utility .u-links a{margin-left:14px}
.utility .u-links a:first-child{margin-left:0}

/* ---- masthead ---- */
.masthead{background:#fff;border-bottom:3px solid var(--navy)}
.masthead .wrap{display:flex;align-items:center;gap:18px;padding:12px 12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .em{width:34px;height:34px;flex:none;border-radius:4px;background:linear-gradient(135deg,var(--blue),var(--navy));
  display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.brand .em svg{width:20px;height:20px}
.brand .wm{font-family:Georgia,serif;font-size:23px;color:var(--navy);font-weight:700;letter-spacing:-.5px}
.brand .wm b{color:var(--blue)}
.brand .wm span{display:block;font-family:Arial,sans-serif;font-size:9.5px;font-weight:bold;letter-spacing:2px;
  color:var(--ink-3);text-transform:uppercase;margin-top:-2px}
.mast-sp{flex:1}
.segbar{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;font-size:11px}
.segbar a{padding:5px 12px;color:var(--ink-2);border-right:1px solid var(--line);background:linear-gradient(#fff,#eef3f8)}
.segbar a:last-child{border-right:none}
.segbar a.on{background:linear-gradient(var(--blue),var(--navy));color:#fff;text-decoration:none}
.msearch{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#fff}
.msearch input{border:none;outline:none;padding:6px 8px;font-size:12px;width:150px}
.msearch button{border:none;background:linear-gradient(var(--btn-a),var(--btn-b));border-left:1px solid var(--line);
  padding:0 10px;cursor:pointer;color:var(--navy)}
.msearch button svg{width:14px;height:14px;vertical-align:middle}

/* ---- main nav (blue tab bar) ---- */
.mainnav{background:linear-gradient(var(--blue),var(--navy));border-top:1px solid #2f6faa;border-bottom:3px solid var(--gold);
  box-shadow:0 2px 4px rgba(0,0,0,.18)}
.mainnav .wrap{display:flex;flex-wrap:wrap;padding:0}
.mainnav a{color:#eaf2fb;font-size:12.5px;font-weight:bold;padding:11px 16px;border-right:1px solid rgba(255,255,255,.14);
  border-left:1px solid rgba(0,0,0,.10);text-shadow:0 1px 1px rgba(0,0,0,.3)}
.mainnav a:hover{background:rgba(255,255,255,.12);text-decoration:none}
.mainnav a.on{background:linear-gradient(#f6f9fc,#e7eef6);color:var(--navy);text-shadow:none;box-shadow:inset 0 2px 4px rgba(0,0,0,.18)}
.navtoggle{display:none}

/* ---- breadcrumb ---- */
.crumb{background:#dde7f1;border-bottom:1px solid var(--line)}
.crumb .wrap{padding:6px 12px;font-size:11px;color:var(--ink-2)}
.crumb b{color:var(--ink)}
.crumb a{color:#0754a6}

/* ---- app layout: dark sidebar + main + right rail ---- */
.app{max-width:1340px;margin:0 auto;display:flex;gap:20px;padding:18px 16px;align-items:flex-start}
.side-col{width:234px;flex:none;position:sticky;top:16px}
.main-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}
.right-col{width:268px;flex:none;display:flex;flex-direction:column;gap:16px}
.welcome{padding:0 2px 2px}
.welcome h1{font-family:Georgia,serif;font-size:23px;color:var(--navy);font-weight:700}
.welcome p{margin:4px 0 0;color:var(--ink-2);font-size:12px}
.two-eq{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.two-eq > *{flex:1;min-width:240px}
.main-col > .panel,.main-col > .notice,.main-col > .statgrid,.main-col > .two-eq{margin-bottom:0}

/* ---- dark sidebar menu ---- */
.sidebar{background:#0b2038;border:1px solid #08172a;border-radius:10px;padding:10px 10px 12px;box-shadow:0 5px 16px rgba(10,25,50,.20)}
.sidebar .brand{display:flex;align-items:center;gap:9px;padding:6px 6px 12px;border-bottom:1px solid rgba(255,255,255,.09);margin-bottom:8px;text-decoration:none}
.sidebar .brand .em{width:30px;height:30px;border-radius:6px;flex:none;background:linear-gradient(135deg,#2F80ED,#0B3D91);display:grid;place-items:center}
.sidebar .brand .em svg{width:17px;height:17px}
.sidebar .brand .wm{font-family:Georgia,serif;font-size:16px;color:#fff;font-weight:700}
.sidebar .brand .wm b{color:#6aa9ee}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:7px;color:#b3c3d8;font-size:13px;font-weight:bold;
  width:100%;text-align:left;background:none;border:none;cursor:pointer;text-decoration:none}
.nav-item svg{width:18px;height:18px;flex:none;color:#7d93b4;stroke-width:1.9}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.nav-item.active{background:linear-gradient(#1d58a3,#0e3b73);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.nav-item.active svg{color:#fff}
.nav-item .chev{margin-left:auto;display:flex;transition:transform .2s}
.nav-item .chev svg{width:14px;height:14px}
.nav-group.open .chev{transform:rotate(180deg)}
/* ---------------------------------------------------------------------
   Payments & Transfers submenu — flyout, not accordion.

   Expanding in place pushed Cards, Statements, Reports and everything
   below it down the page, so the item you were aiming for moved as the
   menu opened. The panel now floats beside the sidebar: it overlays the
   page instead of displacing it, and nothing else shifts.
   --------------------------------------------------------------------- */
.sidebar .group,
.snav .group {
  position: relative;
  display: block;
  width: 100%;      /* left:100% below measures from this box — if the group
                       shrink-wraps its content the panel opens inside the
                       sidebar instead of beside it */
}

.sidebar .sub,
.snav .sub {
  position: absolute;
  /* Pushed clear of the sidebar's own padding as well as its width, so the
     panel never sits on top of the menu it belongs to. */
  left: calc(100% + 22px); top: -6px;
  min-width: 216px; padding: 7px;
  background: #12233C; border: 1px solid rgba(255,255,255,.13);
  border-radius: 11px; box-shadow: 0 16px 40px rgba(2,10,24,.5);
  z-index: 80;
  opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.sidebar .group.open .sub,
.snav .group.open .sub {
  opacity: 1; visibility: visible; transform: none;
}

/* Small pointer back to the parent item. */
.sidebar .sub::before,
.snav .sub::before {
  content: ""; position: absolute; left: -5px; top: 17px;
  width: 9px; height: 9px; background: #12233C;
  border-left: 1px solid rgba(255,255,255,.13);
  border-bottom: 1px solid rgba(255,255,255,.13);
  transform: rotate(45deg);
}

.sidebar .sub a, .snav .sub a, .sub-item {
  display: block; padding: 8px 11px; color: #B7C6DC;
  font-size: 12.5px; border-radius: 7px; text-decoration: none;
  white-space: nowrap;
}
.sidebar .sub a:hover, .snav .sub a:hover, .sub-item:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
.sidebar .sub a.on, .snav .sub a.on, .sub-item.active { color: #6aa9ee; font-weight: bold; background: rgba(106,169,238,.1); }

/* The chevron points right when the panel opens sideways. */
.sidebar .group.open .chev,
.snav .group.open .chev { transform: rotate(-90deg); }

/* Narrow screens have no room beside the sidebar, so fall back to the
   in-place accordion there. */
@media (max-width: 1024px) {
  .sidebar .sub,
  .snav .sub {
    position: static; min-width: 0; padding: 0;
    background: none; border: 0; box-shadow: none;
    transform: none; visibility: visible; opacity: 1;
    max-height: 0; overflow: hidden;
    transition: max-height .25s ease;
  }
  .sidebar .sub::before,
  .snav .sub::before { display: none; }
  .sidebar .group.open .sub,
  .snav .group.open .sub { max-height: 340px; }
  .sidebar .sub a, .snav .sub a, .sub-item { padding-left: 40px; }
  .sidebar .group.open .chev,
  .snav .group.open .chev { transform: rotate(180deg); }
}
.nav-sep{font-size:10px;font-weight:bold;letter-spacing:1.5px;color:#5f7495;text-transform:uppercase;padding:14px 11px 6px}
.signout{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.09)}
.signout a{display:flex;align-items:center;gap:9px;justify-content:center;padding:9px;border-radius:7px;color:#fff;font-size:12.5px;font-weight:bold;
  background:linear-gradient(#c0453b,#9a342c);border:1px solid #7e241d;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.3)}
.signout a:hover{background:linear-gradient(#cf5147,#8f2d25);text-decoration:none}
.signout a svg{width:16px;height:16px}
.securitybox{margin-top:14px}

/* ---- right rail specifics ---- */
.avatar-panel{text-align:center}
.avatar-panel img{width:118px;height:118px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 3px 10px rgba(10,25,50,.25)}
.acctno-box{background:#fff;border:1px solid var(--line);border-radius:4px;padding:9px 12px;margin-top:12px;font-size:12.5px;box-shadow:0 1px 2px rgba(20,40,70,.08)}
.acctno-box div{padding:2px 0}
.acctno-box b{color:var(--navy)}
.cardpanel{background:#0b2038;border:1px solid #08172a;border-radius:8px;padding:12px;box-shadow:0 2px 8px rgba(10,25,50,.2)}
.cardpanel .cp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.cardpanel .cp-head b{color:#fff;font-size:12.5px}
.cardpanel .cp-head a{color:#6aa9ee;font-size:11.5px}

/* ---- mobile bar (shown only on small screens) ---- */
.mobilebar{display:none;align-items:center;justify-content:space-between;background:#0b2038;padding:10px 14px;position:sticky;top:0;z-index:50}
.mobilebar .brand{display:flex;align-items:center;gap:8px;text-decoration:none}
.mobilebar .brand .em{width:26px;height:26px;border-radius:5px;background:linear-gradient(135deg,#2F80ED,#0B3D91);display:grid;place-items:center}
.mobilebar .brand .em svg{width:15px;height:15px}
.mobilebar .brand .wm{font-family:Georgia,serif;font-size:15px;color:#fff;font-weight:700}
.mobilebar .brand .wm b{color:#6aa9ee}
.mobilebar button{background:none;border:none;color:#fff;cursor:pointer;padding:4px}
.mobilebar button svg{width:24px;height:24px}
.scrim{display:none}

/* ---- panels ---- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:3px;margin-bottom:16px;box-shadow:0 1px 2px rgba(20,40,70,.10)}
.panel > .ttl{background:linear-gradient(var(--blue),var(--navy));color:#fff;font-size:11.5px;font-weight:bold;letter-spacing:.6px;
  text-transform:uppercase;padding:7px 11px;border-bottom:1px solid var(--navy-d);border-radius:3px 3px 0 0;
  display:flex;align-items:center;justify-content:space-between;text-shadow:0 1px 1px rgba(0,0,0,.3)}
.panel > .ttl a{color:#dbe8f6;font-size:11px;font-weight:normal;text-transform:none;letter-spacing:0}
.panel > .bd{padding:11px 12px}
.panel > .bd.flush{padding:0}
.sidebox .ttl{background:linear-gradient(#e9eff6,#d7e2ee);color:var(--navy);text-shadow:none;border-bottom:1px solid var(--line)}
.linklist{list-style:none;margin:0;padding:0}
.linklist li{border-bottom:1px solid var(--line-2)}
.linklist li:last-child{border-bottom:none}
.linklist a{display:block;padding:8px 11px;color:#0754a6;font-size:12px;background:linear-gradient(#fff,#fbfdff)}
.linklist a:hover{background:#eef4fb;text-decoration:none}
.linklist a::before{content:"\00BB";color:var(--gold);font-weight:bold;margin-right:7px}
.linklist a.on{background:#eaf3fd;font-weight:bold;color:var(--navy)}
.tipbox{font-size:11.5px;color:var(--ink-2)}
.tipbox b{color:var(--navy)}

/* ---- tables ---- */
.table-wrap{overflow-x:auto}
table.grid{width:100%;border-collapse:collapse;font-size:12.5px}
table.grid th{background:linear-gradient(#eef3f9,#dde7f1);color:var(--navy);text-align:left;font-size:11px;text-transform:uppercase;
  letter-spacing:.4px;padding:7px 9px;border:1px solid var(--line);border-left:none}
table.grid th:first-child{border-left:1px solid var(--line)}
table.grid th.r{text-align:right}
table.grid td{padding:8px 9px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.grid tbody tr:nth-child(even){background:var(--stripe)}
table.grid tbody tr:hover{background:#eaf3fd}
table.grid .r{text-align:right}
table.grid .acctname b{color:var(--navy)}
table.grid .acctname span{color:var(--ink-3);font-size:11px}
.bal{font-weight:bold;font-family:'Lucida Console',Consolas,monospace}
.pos{color:var(--green)} .neg{color:var(--red)}
.flag{font-size:10.5px;color:var(--amber);font-weight:bold}
.act a{color:#0754a6;font-size:11.5px}
.act a+a{margin-left:8px;padding-left:8px;border-left:1px solid var(--line)}
.name{display:flex;align-items:center;gap:9px}
.avatar-sm{width:28px;height:28px;border-radius:50%;background:linear-gradient(#5aa0e6,#0B3D91);color:#fff;
  display:grid;place-items:center;font-weight:bold;font-size:11px;flex:none;text-shadow:0 1px 1px rgba(0,0,0,.3)}

/* ---- buttons ---- */
.btn{display:inline-block;font-size:12px;font-weight:bold;color:var(--navy);text-decoration:none;cursor:pointer;
  padding:7px 14px;border:1px solid #a9bccf;border-radius:3px;background:linear-gradient(var(--btn-a),var(--btn-b));
  box-shadow:inset 0 1px 0 #fff;text-shadow:0 1px 0 #fff}
.btn:hover{background:linear-gradient(#fff,#cfe0f1);text-decoration:none}
.btn:active{box-shadow:inset 0 2px 3px rgba(0,0,0,.2)}
.btn.primary{color:#fff;border-color:var(--navy-d);text-shadow:0 1px 1px rgba(0,0,0,.35);background:linear-gradient(var(--blue-l),var(--navy))}
.btn.primary:hover{background:linear-gradient(#3f8bcb,var(--navy-d))}
.btn.block{display:block;width:100%;text-align:center}
.btn.sm{padding:5px 10px;font-size:11.5px}
.btnrow{display:flex;flex-wrap:wrap;gap:8px}
.btnrow .btn{display:inline-flex;align-items:center;gap:7px}
.btnrow .btn svg{width:15px;height:15px}

/* ---- forms ---- */
.field{margin-bottom:13px}
.field:last-child{margin-bottom:0}
.field > label{display:block;font-size:11.5px;font-weight:bold;color:var(--navy);margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:12.5px;color:var(--ink);
  padding:7px 8px;border:1px solid #9fb3c6;border-radius:2px;background:#fff;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);outline:none}
.field textarea{min-height:84px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:inset 0 1px 2px rgba(0,0,0,.08),0 0 0 2px #cfe0f3}
.field .hint{font-size:11px;color:var(--ink-3);margin-top:4px}
.field-row{display:flex;gap:12px}
.field-row .field{flex:1}
.inline-input{display:flex;border:1px solid #9fb3c6;border-radius:2px;overflow:hidden;background:#fff;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.inline-input .pre{padding:7px 10px;background:linear-gradient(#eef3f9,#dde7f1);color:var(--navy);font-weight:bold;border-right:1px solid #9fb3c6}
.inline-input input{border:none;box-shadow:none;flex:1}

/* ---- review rows (summaries) ---- */
.review{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dotted var(--line-2);font-size:12px}
.review:last-child{border-bottom:none}
.review span{color:var(--ink-2)} .review b{color:var(--navy)}
.divider{height:1px;background:var(--line-2);margin:12px 0}

/* ---- chips / status ---- */
.chip{display:inline-block;font-size:10.5px;font-weight:bold;padding:2px 8px;border-radius:2px;border:1px solid}
.chip.ok{background:#e7f3ea;color:var(--green);border-color:#b6d8bd}
.chip.pend{background:#fbf1dd;color:var(--amber);border-color:#e7cd8f}
.chip.info{background:#e7eff8;color:var(--blue);border-color:#bcd2ea}
.chip.neg{background:#f7e7e7;color:var(--red);border-color:#e0b6b6}

/* ---- tabs ---- */
.tabs{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-bottom:12px}
.tabs button{font-size:11.5px;font-weight:bold;color:var(--ink-2);padding:6px 14px;border:none;border-right:1px solid var(--line);
  background:linear-gradient(#fff,#eef3f8);cursor:pointer}
.tabs button:last-child{border-right:none}
.tabs button.on{background:linear-gradient(var(--blue),var(--navy));color:#fff}

/* ---- toggle ---- */
.toggle{width:42px;height:22px;border-radius:12px;background:#c3cfdb;border:1px solid #9fb3c6;position:relative;cursor:pointer;flex:none;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}
.toggle.on{background:linear-gradient(var(--green),#256a28);border-color:#256a28}
.toggle::after{content:"";position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
.toggle.on::after{left:21px}

/* ---- setting rows ---- */
.setrow{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.setrow:last-child{border-bottom:none}
.setrow .si{width:32px;height:32px;border-radius:3px;flex:none;display:grid;place-items:center;color:var(--navy);
  background:linear-gradient(#eef3f9,#dde7f1);border:1px solid var(--line)}
.setrow .si svg{width:16px;height:16px}
.setrow .sm{flex:1;min-width:0}
.setrow .sm b{display:block;font-size:12px;color:var(--navy)}
.setrow .sm span{font-size:11px;color:var(--ink-2)}

/* ---- asset bars ---- */
.abar{margin-bottom:9px}
.abar .top{display:flex;justify-content:space-between;font-size:11.5px;margin-bottom:3px}
.abar .top b{color:var(--navy)}
.abar .track{height:12px;background:#e6edf4;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.abar .fill{height:100%;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.total{border-top:1px solid var(--line);margin-top:6px;padding-top:8px;display:flex;justify-content:space-between;font-weight:bold;color:var(--navy);font-size:13px}

/* ---- transactions / list rows ---- */
table.tx td{font-size:12px}
.tx .desc b{color:var(--ink);font-weight:bold}
.tx .desc span{color:var(--ink-3);font-size:11px;display:block}
.listrow{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.listrow:last-child{border-bottom:none}
.listrow .li{width:30px;height:30px;border-radius:3px;flex:none;display:grid;place-items:center;color:var(--navy);
  background:linear-gradient(#eef3f9,#dde7f1);border:1px solid var(--line)}
.listrow .li svg{width:15px;height:15px}
.listrow .lm{flex:1;min-width:0}
.listrow .lm b{font-size:12px;color:var(--ink)}
.listrow .lm span{display:block;font-size:11px;color:var(--ink-3)}
.listrow .la{font-weight:bold;font-family:'Lucida Console',Consolas,monospace;font-size:12px}

/* ---- contact / messages ---- */
.contact div{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dotted var(--line-2);font-size:11.5px}
.contact div:last-child{border-bottom:none}
.contact span{color:var(--ink-2)} .contact b{color:var(--navy)}
.msg{display:flex;gap:8px;padding:8px 0;border-bottom:1px solid var(--line-2);cursor:pointer}
.msg:last-child{border-bottom:none}
.msg:hover{background:#f4f8fc}
.msg .dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none;margin-top:4px}
.msg .dot.a{background:var(--amber)}
.msg b{display:block;font-size:11.5px;color:var(--navy)}
.msg p{margin:1px 0 0;font-size:11px;color:var(--ink-2)}

/* ---- stat panels ---- */
.stat .bd{padding:12px}
.stat .k{font-size:11px;color:var(--ink-2);font-weight:bold;text-transform:uppercase;letter-spacing:.3px}
.stat .v{font-size:20px;font-weight:bold;color:var(--navy);margin-top:4px;font-family:'Lucida Console',Consolas,monospace}
.stat .delta{font-size:11px;font-weight:bold;margin-top:3px}
.stat .delta.up{color:var(--green)} .stat .delta.dn{color:var(--red)}
.statgrid{display:flex;gap:16px;flex-wrap:wrap}
.statgrid .panel{flex:1;min-width:150px;margin-bottom:0}

/* ---- virtual card ---- */
.vcard{border-radius:8px;padding:16px;color:#fff;position:relative;overflow:hidden;min-height:150px;
  display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 2px 6px rgba(0,0,0,.25);
  background:linear-gradient(135deg,#1a1f71,#15277a 42%,#0e63c4)}
.vcard.alt{background:linear-gradient(135deg,#a3122a,#6e0c1a 55%,#2e060b)}
.vcard .vc-top{display:flex;justify-content:space-between;align-items:center}
.vcard .vc-brand{font-family:Georgia,serif;font-weight:bold}
.vcard .chipimg{width:34px;height:24px;border-radius:4px;background:linear-gradient(135deg,#f5d58a,#c99b3b)}
.vcard .vc-no{font-family:'Lucida Console',monospace;font-size:15px;letter-spacing:2px}
.vcard .vc-foot{display:flex;justify-content:space-between;font-size:11px;opacity:.95}

/* ---- faq ---- */
.faq{border-bottom:1px solid var(--line-2)}
.faq summary{padding:9px 2px;font-weight:bold;color:var(--navy);cursor:pointer;list-style:none;font-size:12.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"\002B";color:var(--gold);font-weight:bold;margin-right:8px}
.faq[open] summary::before{content:"\2212"}
.faq p{padding:0 2px 11px 18px;color:var(--ink-2);font-size:12px;margin:0}

/* ---- notice ---- */
.notice{background:#FFF7E1;border:1px solid #E7CE86;border-radius:3px;padding:8px 11px;font-size:11.5px;color:#7A5B12;
  margin-bottom:14px;display:flex;align-items:center;gap:9px}
.notice svg{width:16px;height:16px;flex:none;color:#B4791A}
.notice b{color:#7A5B12}
.notice .x{margin-left:auto;cursor:pointer;border:none;background:none;color:#9a7a2a;font-weight:bold}

/* ---- footer ---- */
.footer{background:linear-gradient(#eef3f8,#dbe4ee);border-top:3px solid var(--navy);margin-top:8px}
.footer .fcols{display:flex;gap:26px;padding:20px 0 14px}
.fcol{flex:1}
.fcol h4{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--navy);margin:0 0 8px;border-bottom:1px solid var(--line);padding-bottom:5px}
.fcol a{display:block;color:#0754a6;font-size:11.5px;padding:2px 0}
.social{display:flex;gap:6px;margin-top:4px}
.social a{width:26px;height:26px;border:1px solid var(--line);border-radius:3px;display:grid;place-items:center;background:#fff;color:var(--navy)}
.social a svg{width:14px;height:14px}
.legal{background:var(--navy-d);color:#b9c8d8;font-size:10.5px}
.legal .wrap{padding:10px 12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}
.legal a{color:#dbe8f6}
.legal .seal{color:#9fb3c8}

/* ---- toasts ---- */
#ir-toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:200}
.ir-toast{background:var(--navy-d);color:#fff;font-size:12px;font-weight:bold;padding:10px 14px;border-radius:3px;
  border:1px solid #001a38;box-shadow:0 4px 10px rgba(0,0,0,.3);opacity:0;transform:translateY(8px);transition:.2s;max-width:300px}
.ir-toast.show{opacity:1;transform:none}

/* ---- chart wrap ---- */
.chart-wrap{position:relative;height:230px}

/* ============================ responsive ============================ */
@media (max-width:1080px){
  .right-col{width:240px}
}
@media (max-width:920px){
  .app{gap:14px;padding:14px 12px}
  .mobilebar{display:flex}
  .side-col{position:fixed;left:0;top:0;height:100%;width:250px;z-index:60;padding:12px;overflow-y:auto;
    transform:translateX(-100%);transition:transform .25s;background:#081525}
  .side-col.open{transform:none}
  .scrim.show{display:block;position:fixed;inset:0;background:rgba(6,14,26,.55);z-index:55}
  .app{flex-direction:column}
  .main-col{width:100%}
  .right-col{width:100%;display:flex}
}
@media (max-width:560px){
  table.grid .hide-sm{display:none}
  .btnrow .btn{flex:1;justify-content:center}
  .field-row{flex-direction:column;gap:0}
  .welcome h1{font-size:20px}
}
@media (max-width:460px){
  .avatar-panel img{width:96px;height:96px}
}

/* =====================================================================
   Sidebar redesign (dark left menu + right rail)
   ===================================================================== */
.shell{max-width:1240px;margin:0 auto;padding:22px 16px 30px;display:grid;grid-template-columns:242px 1fr 288px;gap:20px;align-items:start}
.shell.no-rail{grid-template-columns:242px 1fr}
.sidecol{display:flex;flex-direction:column;gap:14px}
.content{min-width:0}
.rail{display:flex;flex-direction:column;gap:14px}

/* dark sidebar */
.sidebar{background:#0e1b30;border:1px solid #0a1526;border-radius:8px;padding:10px;display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(10,20,40,.2)}
.sidebar .brand2{display:flex;align-items:center;gap:9px;padding:8px 10px 12px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px}
.sidebar .brand2 .em{width:30px;height:30px;border-radius:5px;flex:none;background:linear-gradient(135deg,#2F80ED,#0B3D91);display:grid;place-items:center}
.sidebar .brand2 .em svg{width:17px;height:17px}
.sidebar .brand2 .wm{font-family:Georgia,serif;font-size:16px;color:#fff;font-weight:700}
.sidebar .brand2 .wm b{color:#6aa9ee}
.snav a,.snav button.grp{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 12px;border-radius:6px;color:#c2cfe0;font-size:12.5px;font-weight:bold;border:none;background:none;cursor:pointer;font-family:inherit}
.snav a{text-decoration:none}
.snav a svg,.snav button.grp svg{width:17px;height:17px;flex:none;color:#7f93ad}
.snav a:hover,.snav button.grp:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.snav a.on{background:linear-gradient(#1c50a0,#0d3168);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.snav a.on svg{color:#fff}
.snav .grp .chev{margin-left:auto;transition:transform .2s}
.snav .grp .chev svg{width:13px;height:13px}
.snav .group.open .grp .chev{transform:rotate(180deg)}
.snav .group.open .grp{color:#fff}
/* .snav is the sidebar's own wrapper, not a separate mobile nav — the
   accordion rules that used to live here overrode the flyout, which is why
   the menu appeared unchanged. Layout for .sub is defined once, above. */
.snav .group{position:relative}
.snav .sub a{padding:8px 12px 8px 40px;font-weight:normal;color:#9fb0c6;font-size:12px}
.snav .sub a.on{background:none;color:#6aa9ee;font-weight:bold;box-shadow:none}
.snav .seclabel{padding:14px 12px 6px;font-size:10px;font-weight:bold;letter-spacing:1.2px;color:#6f819a}
.signout{margin-top:10px;border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
.signout button{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:6px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#e7b7b7;font-size:12.5px;font-weight:bold;cursor:pointer;font-family:inherit}
.signout button:hover{background:rgba(190,60,60,.2);color:#ffd7d7}
.signout button svg{width:16px;height:16px}

/* right rail extras */
.rail-ava{width:118px;height:118px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 2px;border:4px solid #fff;box-shadow:0 2px 8px rgba(20,40,70,.22)}
.acctbox{background:#fff;border:1px solid var(--line);border-radius:4px;padding:10px 12px;font-size:12px;box-shadow:0 1px 2px rgba(20,40,70,.08)}
.acctbox div{padding:2px 0}
.acctbox b{color:var(--navy)}
.sendmsg{display:block;width:100%;text-align:center;background:#fff;border:1px solid #9fb9d6;border-radius:4px;padding:12px;color:var(--blue);font-weight:bold;font-size:12.5px}
.sendmsg:hover{background:#eef4fb;text-decoration:none}
.cardpanel{background:#0e1b30;border:1px solid #0a1526;border-radius:6px;overflow:hidden;box-shadow:0 2px 6px rgba(10,20,40,.2)}
.cardpanel .ttl2{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;color:#fff;font-weight:bold;font-size:12.5px}
.cardpanel .ttl2 a{color:#6aa9ee;font-weight:normal}
.cardpanel .cbody{padding:0 14px 16px}

/* mobile top bar */
.mtopbar{display:none;align-items:center;gap:12px;background:#0e1b30;color:#fff;padding:11px 14px}
.mtopbar button{background:none;border:none;color:#fff;cursor:pointer;display:flex;align-items:center}
.mtopbar button svg{width:22px;height:22px}
.mtopbar .wm{font-family:Georgia,serif;font-weight:700;font-size:16px}
.mtopbar .wm b{color:#6aa9ee}
.scrim2{display:none}

@media(max-width:1040px){
  .shell,.shell.no-rail{grid-template-columns:242px 1fr}
  .rail{grid-column:1 / -1;display:flex;flex-direction:row;flex-wrap:wrap;gap:14px}
  .rail > *{flex:1;min-width:230px}
  .rail-ava{margin:0 auto}
}
@media(max-width:760px){
  .mtopbar{display:flex}
  .shell,.shell.no-rail{grid-template-columns:1fr;padding-top:14px}
  .sidecol{position:fixed;top:0;left:0;bottom:0;z-index:60;width:252px;transform:translateX(-100%);transition:transform .25s;
    background:#0a1526;padding:12px;overflow:auto;gap:12px}
  .sidecol.open{transform:none}
  .sidebar{border-radius:6px}
  .scrim2.show{display:block;position:fixed;inset:0;background:rgba(8,16,32,.55);z-index:55}
  .rail{flex-direction:column}
  .rail > *{min-width:100%}
}

/* header + sidebar together: masthead hamburger (mobile), hide tab nav on small screens */
.mast-burger{display:none;background:linear-gradient(var(--btn-a),var(--btn-b));border:1px solid var(--line);border-radius:3px;padding:6px 9px;cursor:pointer;color:var(--navy);margin-right:6px}
.mast-burger svg{width:18px;height:18px;display:block}
@media(max-width:760px){
  .mainnav{display:none}
  .mast-burger{display:inline-flex;align-items:center}
  .utility .u-links a{margin-left:9px}
  .masthead .wrap{flex-wrap:nowrap;gap:8px}
  .segbar{display:none}
  .msearch input{width:88px}
}

/* send-money 3-step wizard */
.stepper{display:flex;align-items:center;margin:2px 0 16px;padding:12px 16px;background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 1px 2px rgba(20,40,70,.08)}
.stepper .st{display:flex;align-items:center;gap:8px}
.stepper .num{width:26px;height:26px;border-radius:50%;background:#c3cfdb;color:#fff;display:grid;place-items:center;font-weight:bold;font-size:12px;flex:none}
.stepper .st.active .num{background:linear-gradient(var(--blue),var(--navy))}
.stepper .st.done .num{background:var(--green)}
.stepper .lbl{font-size:12px;font-weight:bold;color:var(--ink-3);white-space:nowrap}
.stepper .st.active .lbl,.stepper .st.done .lbl{color:var(--navy)}
.stepper .line{flex:1;height:2px;background:#c3cfdb;margin:0 10px;min-width:18px}
.stepper .line.done{background:var(--green)}
.step{display:none}
.step.on{display:block}
.wizbtns{display:flex;justify-content:space-between;align-items:center;margin-top:16px;gap:10px}
.otp{display:flex;gap:8px;justify-content:center;margin:16px 0}
.otp input{width:44px;height:52px;text-align:center;font-size:20px;font-weight:bold;color:var(--navy);border:1px solid #9fb3c6;border-radius:4px;background:#fff;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.otp input:focus{border-color:var(--blue);box-shadow:inset 0 1px 2px rgba(0,0,0,.08),0 0 0 2px #cfe0f3;outline:none}
@media(max-width:460px){.otp input{width:36px;height:46px;font-size:17px}.stepper .lbl{display:none}}

/* send-money: processing spinner */
.spinner{width:46px;height:46px;border:4px solid #d6e0ec;border-top-color:var(--blue);border-radius:50%;margin:0 auto;animation:irspin .8s linear infinite}
@keyframes irspin{to{transform:rotate(360deg)}}
.otp-alt{text-align:center;font-size:12px;color:var(--ink-2);margin-top:2px}
.otp-alt a{white-space:nowrap}

/* cards: network marks (Visa wordmark + Mastercard circles) */
.vcard .vc-foot{align-items:flex-end}
.vcard .vc-foot small{display:block;font-size:9.5px;letter-spacing:.4px;opacity:.8;margin-top:3px;font-weight:normal}
.visa-mark{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:bold;font-size:23px;letter-spacing:1px;color:#fff;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.mc-mark{display:block;line-height:0}

/* ============ LOGIN PAGE (standalone, modern floating inputs) ============ */
.login-body{background:linear-gradient(135deg,#001a33,#003A70 55%,#0A5AA8);min-height:100vh;margin:0;display:flex;align-items:center;justify-content:center;padding:24px;font-family:Arial,Helvetica,sans-serif}
.login-card{background:#fff;width:100%;max-width:400px;border-radius:14px;box-shadow:0 18px 50px rgba(0,10,30,.45);padding:30px 28px;position:relative}
.login-head{text-align:center;margin-bottom:22px}
.login-head .em{width:54px;height:54px;border-radius:13px;background:linear-gradient(135deg,var(--navy),var(--blue));display:grid;place-items:center;margin:0 auto 10px;box-shadow:0 3px 8px rgba(10,40,80,.3)}
.login-head h1{font-family:Georgia,serif;color:var(--navy);font-size:22px;margin:0}
.login-head p{color:#8a97a6;font-size:11px;letter-spacing:2px;text-transform:uppercase;margin:3px 0 0}
.flabel{position:relative;margin-bottom:16px}
.flabel input{width:100%;height:54px;padding:20px 14px 6px;border:1px solid #c3cfdb;border-radius:9px;font-size:15px;background:#fff;outline:none;transition:border-color .15s,box-shadow .15s;box-sizing:border-box}
.flabel input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #cfe0f3}
.flabel label{position:absolute;left:14px;top:17px;color:#8a97a6;font-size:15px;pointer-events:none;transition:all .15s}
.flabel input:focus+label,.flabel input:not(:placeholder-shown)+label{top:8px;font-size:11px;color:var(--blue);font-weight:bold}
.flabel .peek{position:absolute;right:10px;top:15px;cursor:pointer;color:#8a97a6;background:none;border:none;padding:4px;line-height:0}
.login-btn{width:100%;height:48px;border:none;border-radius:9px;background:linear-gradient(var(--blue),var(--navy));color:#fff;font-weight:bold;font-size:15px;cursor:pointer;box-shadow:0 2px 6px rgba(10,40,80,.3)}
.login-btn:hover{filter:brightness(1.07)}
.login-alt{text-align:center;margin-top:14px;font-size:12.5px}
.login-alt a{color:var(--blue);text-decoration:none}
.login-note{text-align:center;color:#9aa7b4;font-size:11px;margin-top:18px}
.login-profile{text-align:center;margin-bottom:18px}
.login-profile img{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid #e3ebf3;box-shadow:0 3px 8px rgba(0,0,0,.15)}
.login-profile b{display:block;color:var(--navy);font-size:16px;margin-top:9px}
.login-profile span{color:#8a97a6;font-size:12px}
.secq{background:#f2f6fb;border:1px solid #dce6f1;border-radius:8px;padding:11px 13px;margin-bottom:16px;color:var(--navy)}
.secq b{display:block;font-size:10.5px;color:#8a97a6;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.secq span{font-size:14px}
.lstep{display:none}.lstep.on{display:block}
.login-back{background:none;border:none;color:#8a97a6;font-size:12.5px;cursor:pointer;margin-top:12px;display:block;width:100%;text-align:center}

/* ============ REGISTRATION PAGE (standalone, modern multi-step) ============ */
.reg-card{background:#fff;width:100%;max-width:540px;border-radius:14px;box-shadow:0 18px 50px rgba(0,10,30,.45);padding:28px 30px 0;position:relative}
.reg-head{display:flex;align-items:center;gap:12px}
.reg-head .em{width:46px;height:46px;border-radius:11px;background:linear-gradient(135deg,var(--navy),var(--blue));display:grid;place-items:center;flex:none;box-shadow:0 3px 8px rgba(10,40,80,.3)}
.reg-head h1{font-family:Georgia,serif;color:var(--navy);font-size:20px;margin:0;line-height:1.1}
.reg-head p{color:#8a97a6;font-size:11px;margin:2px 0 0}
.reg-prog{height:6px;background:#e6edf4;border-radius:4px;margin:16px 0 6px;overflow:hidden}
.reg-prog i{display:block;height:100%;background:linear-gradient(var(--blue),var(--navy));width:12.5%;transition:width .25s}
.reg-stepno{color:var(--blue);font-weight:bold;font-size:12px;letter-spacing:.6px;text-transform:uppercase;margin-bottom:14px}
.reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.reg-grid .full{grid-column:1/-1}
.rfield label{display:block;font-size:12.5px;color:#5a6b7b;margin-bottom:5px;font-weight:bold}
.rfield input,.rfield select,.rfield textarea{width:100%;height:44px;border:1px solid #c3cfdb;border-radius:8px;padding:0 12px;font-size:14px;background:#fff;box-sizing:border-box;outline:none;transition:border-color .15s,box-shadow .15s}
.rfield textarea{height:auto;padding:10px 12px;resize:vertical;min-height:60px;font-family:inherit}
.rfield input:focus,.rfield select:focus,.rfield textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #cfe0f3}
.rfield input[type=file]{height:auto;padding:9px 12px;font-size:13px}
.reg-terms{max-height:220px;overflow:auto;background:#f7f9fc;border:1px solid #e2e9f1;border-radius:8px;padding:14px 16px;font-size:12.5px;color:#5a6b7b;line-height:1.65}
.reg-terms b{color:var(--navy)}
.reg-titles{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}
.reg-titles label{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--navy);cursor:pointer}
.reg-btns{display:flex;gap:10px;margin-top:18px}
.reg-btns .login-btn{flex:1}
.reg-back2{width:auto;padding:0 20px;background:#eef2f7;color:var(--navy);border:1px solid #d5dfe9;border-radius:9px;font-weight:bold;cursor:pointer;height:48px;font-size:14px}
.rstep{display:none}.rstep.on{display:block}
.reg-note{font-size:11.5px;color:#8a97a6;margin-top:10px}
.reg-review .rr{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed #e2e9f1;font-size:13px}
.reg-review .rr span{color:#8a97a6}.reg-review .rr b{color:var(--navy);text-align:right;word-break:break-word}
.reg-review h4{color:var(--navy);font-family:Georgia,serif;margin:16px 0 2px;font-size:14px}
.reg-success{background:#e7f6e1;border:1px solid #bfe3b0;border-radius:10px;padding:22px;text-align:center}
.reg-success h3{color:#1e6b2e;margin:0 0 6px;font-size:18px}
.reg-success p{color:#3a6b45;margin:0 0 12px;font-size:13.5px}
.reg-success a{color:var(--blue);font-weight:bold;text-decoration:none;font-size:15px}
.reg-foot{background:#f2f5f9;margin:20px -30px 0;padding:14px 30px;border-top:1px solid #e2e9f1;font-size:13px;color:#5a6b7b}
.reg-foot a{color:var(--blue);text-decoration:none;font-weight:bold}
.reg-lang{text-align:center;padding:16px 0 22px}
.reg-lang b{display:block;color:#5a6b7b;margin-bottom:8px;font-size:14px}
.reg-lang select{height:40px;border:1px solid #c3cfdb;border-radius:8px;padding:0 12px;font-size:14px;background:#fff}

/* login: first-time setup steps */
.ltitle{font-family:Georgia,serif;color:var(--navy);font-size:19px;margin:0 0 12px;text-align:center}
.lnotice{background:#fff7e6;border:1px solid #f0dca6;color:#8a6b1e;border-radius:8px;padding:9px 12px;font-size:12.5px;margin-bottom:14px;line-height:1.45}
.lsub{color:#5a6b7b;font-size:13px;margin:0 0 14px;text-align:center;line-height:1.45}
.pwreq{list-style:none;padding:0;margin:6px 2px 14px;font-size:12px;color:#8a97a6}
.pwreq li{display:flex;align-items:center;gap:7px;margin:4px 0}
.pwreq li::before{content:'\25CB';color:#c3cfdb;font-size:12px}
.pwreq li.ok{color:var(--green)}
.pwreq li.ok::before{content:'\2713';color:var(--green)}

/* ---- account activation alert + avatar status indicator ---- */
.acct-alert{display:flex;align-items:flex-start;gap:10px;background:#FDECEC;border:1px solid #F0B4B4;border-left:4px solid #D8332A;border-radius:8px;padding:12px 14px;margin:0 0 14px;color:#8A211B;font-size:13px;line-height:1.5}
.acct-alert svg{width:18px;height:18px;flex:none;color:#D8332A;margin-top:1px}
.acct-alert b{color:#7A1611}
.acct-alert.ok{background:#E9F8EE;border-color:#AEE3C1;border-left-color:#1E9E5A;color:#155E37}
.acct-alert.ok svg{color:#1E9E5A}
.acct-alert.ok b{color:#0F4A2B}
.acct-alert.hide{display:none}
.ava-wrap{position:relative;display:inline-block;line-height:0}
.ava-ring{border-color:#F1B3B0 !important;box-shadow:0 0 0 4px rgba(216,51,42,.16) !important}
.ava-dot{position:absolute;right:4px;bottom:4px;width:16px;height:16px;border-radius:50%;background:#D8332A;border:2.5px solid #fff}
.ava-dot.pulse{animation:avaPulse 1.6s infinite}
.ava-dot.active{background:#1E9E5A;animation:none}
@keyframes avaPulse{0%{box-shadow:0 0 0 0 rgba(216,51,42,.55)}70%{box-shadow:0 0 0 9px rgba(216,51,42,0)}100%{box-shadow:0 0 0 0 rgba(216,51,42,0)}}
.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 11px;border-radius:999px;margin-top:8px}
.status-pill.off{background:#FDECEC;color:#B4231C}
.status-pill.on{background:#E9F8EE;color:#177544}
.status-pill .d{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}

/* account welcome / under-review notice (informational) */
.acct-welcome{display:flex;align-items:flex-start;gap:10px;background:#EAF3FC;border:1px solid #BBD9F3;border-left:4px solid #0A5AA8;border-radius:8px;padding:12px 14px;margin:0 0 14px;color:#123C63;font-size:13px;line-height:1.55}
.acct-welcome svg{width:18px;height:18px;flex:none;color:#0A5AA8;margin-top:1px}
.acct-welcome b{color:#0B3D91}
.acct-welcome.hide{display:none}

/* ---- locked Payments menu + "under review" popup ---- */
.nav-locked{opacity:.6}
.lockico{display:inline-flex;align-items:center;margin-left:6px;vertical-align:middle}
.lockico svg{width:13px;height:13px}
.lock-scrim{position:fixed;inset:0;background:rgba(6,15,28,.55);z-index:120;display:flex;align-items:center;justify-content:center;padding:20px}
.lock-modal{background:#fff;border-radius:14px;max-width:400px;width:100%;padding:26px 24px;text-align:center;box-shadow:0 20px 60px rgba(0,10,30,.4)}
.lock-ic{width:52px;height:52px;border-radius:50%;background:#FDECEC;color:#D8332A;display:grid;place-items:center;margin:0 auto 12px}
.lock-ic svg{width:24px;height:24px}
.lock-modal h3{margin:0 0 8px;color:var(--navy);font-size:18px}
.lock-modal p{margin:0 0 18px;color:#5a6b7b;font-size:13.5px;line-height:1.55}
.lock-modal .lock-ok{background:var(--brand,#0A5AA8);color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer}
.lock-modal .lock-ok:hover{filter:brightness(1.06)}

/* initials avatar (replaces the hardcoded stock photo) */
.avatar-fallback{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;border:3px solid #e3ebf3;box-sizing:border-box;line-height:1;text-transform:uppercase;vertical-align:middle}

/* inactive card badge */
.vcard{position:relative}
.vcard.card-locked{filter:grayscale(.35) brightness(.9)}
.card-lock-badge{position:absolute;top:12px;right:12px;z-index:3;background:#D8332A;color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.4px;text-transform:uppercase;box-shadow:0 2px 6px rgba(0,0,0,.28)}

/* admin impersonation (read-only "view as customer") banner */
.imp-bar{position:fixed;top:0;left:0;right:0;height:40px;z-index:400;background:#7A1611;color:#fff;display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.imp-bar b{color:#fff}
.imp-bar .ro{background:#fff;color:#7A1611;font-weight:800;font-size:10.5px;letter-spacing:.6px;padding:2px 7px;border-radius:999px}
.imp-bar a{color:#fff;text-decoration:underline;font-weight:700}
.imp-spacer{height:40px}

/* transfer OTP autofill popup (on-screen delivery) */
.otp-pop{position:fixed;inset:0;z-index:500;background:rgba(11,26,44,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.otp-pop[hidden]{display:none}
.otp-pop-card{background:#fff;border-radius:14px;max-width:340px;width:100%;padding:24px 22px;text-align:center;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.otp-pop-x{position:absolute;top:8px;right:12px;border:0;background:none;font-size:24px;line-height:1;color:#8a97a6;cursor:pointer}
.otp-pop-title{font-size:12px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.otp-pop-code{font-size:34px;font-weight:800;letter-spacing:8px;color:var(--navy,#003A70);margin:6px 0 16px;cursor:pointer}
.otp-pop .btn{width:100%}
.otp-pop-note{font-size:11px;color:#8a97a6;margin-top:12px;line-height:1.5}

/* confirm-transfer modal + invoice */
.cfm-ov{position:fixed;inset:0;background:rgba(0,12,32,.55);display:none;align-items:center;justify-content:center;z-index:600;padding:16px}
.cfm-ov.on{display:flex}
.cfm-card{background:#fff;border-radius:14px;max-width:460px;width:100%;box-shadow:0 24px 70px rgba(0,0,0,.35);overflow:hidden;animation:cfmIn .18s ease}
@keyframes cfmIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cfm-head{background:var(--navy,#003A70);color:#fff;padding:15px 20px;font-weight:700;font-size:16px}
.cfm-body{padding:18px 20px 20px}
.cfm-row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid #eef2f6;font-size:13.5px}
.cfm-row:last-of-type{border-bottom:0}
.cfm-row span{color:#5a6b7b}.cfm-row b{color:#0b2540;text-align:right;word-break:break-word}
.cfm-total{font-size:15px}.cfm-total b{color:var(--navy,#003A70)}
.cfm-ask{margin:14px 0 2px;font-weight:700;color:#0b2540;text-align:center}
.cfm-btns{display:flex;gap:10px;margin-top:16px}
.cfm-btns .btn{flex:1}
.inv-note{background:#fff8e8;border:1px solid #e7cd8f;color:#7a5b12;border-radius:10px;padding:12px 14px;font-size:13px;margin-top:14px;text-align:left}

/* transfer pop-up: admin message banner + PIN entry */
.cfm-msg{border-radius:10px;padding:12px 14px;font-size:13px;margin-bottom:14px;line-height:1.5}
.cfm-msg b{display:block;margin-bottom:3px;font-size:13.5px}
.cfm-msg.info{background:#eaf3fb;border:1px solid #b8d6f0;color:#0b3c6b}
.cfm-msg.warning{background:#fff4e5;border:1px solid #f0cf9a;color:#8a5a10}
.cfm-msg.kyc{background:#fff8e8;border:1px solid #e7cd8f;color:#7a5b12}
.cfm-msg.promo{background:#e9f8f4;border:1px solid #a6e3d5;color:#0d6e5f}
.cfm-pinlabel{text-align:center;font-size:13px;color:#5a6b7b;margin-top:6px}
.cfm-pin{display:flex;gap:8px;justify-content:center;margin:8px 0 2px}
.cfm-pin input{width:40px;height:46px;text-align:center;font-size:20px;font-weight:600;border:1px solid var(--line,#d5dde6);border-radius:8px;-webkit-appearance:none}
.cfm-pinerr{color:#c0392b;font-size:12.5px;text-align:center;min-height:16px;margin-top:2px}

/* credential verification card */
.verify-badge{display:inline-block;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600}
.verify-badge.ok{background:#d4f1d4;color:#0d6e32}
.verify-badge.fail{background:#f8d7d7;color:#7a0d0d}
.verify-row{display:grid;grid-template-columns:140px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #eef2f6;font-size:13px}
.verify-row:last-of-type{border-bottom:0}
.verify-row label{color:var(--mut);font-weight:500}
.verify-row input{height:36px;border:1px solid var(--line,#dfe6ee);border-radius:8px;padding:0 10px}

/* modern searchable dropdown */
.search-dropdown{position:relative;width:100%}
.search-dropdown input{width:100%;padding-right:36px;background:#fff;border:1px solid var(--line,#dfe6ee);border-radius:8px;height:44px;padding-left:12px;font-size:14px;color:#0b2540}
.search-dropdown input:focus{outline:2px solid #1F9E93;outline-offset:0;border-color:#1F9E93}
.search-dropdown-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:none;background:none;cursor:pointer;color:#8a97a6;display:flex;align-items:center;justify-content:center;transition:color .2s}
.search-dropdown-btn:hover{color:#0b2540}
.search-dropdown-popup{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line,#dfe6ee);border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.15);margin-top:6px;z-index:1000;overflow:hidden}
.search-dropdown-popup[hidden]{display:none}
.search-dropdown-input{width:100%;padding:10px 12px;border:none;border-bottom:1px solid #eef2f6;font-size:14px;background:#fff;box-sizing:border-box}
.search-dropdown-input:focus{outline:none;background:#f8fafb}
.search-dropdown-list{max-height:200px;overflow-y:auto;overflow-x:hidden}
.search-dropdown-group{padding:8px 0}
.search-dropdown-group-label{padding:8px 14px 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#8a97a6;background:#f8fafb}
.search-dropdown-item{padding:10px 14px;font-size:14px;color:#0b2540;cursor:pointer;transition:background .15s;border-bottom:1px solid #f5f7fa}
.search-dropdown-item:hover{background:#f0f6f9;color:#003A70}
.search-dropdown-item.selected{background:#e8f5f2;color:#1F9E93;font-weight:600}
.search-dropdown-item.selected::before{content:'✓';margin-right:8px;font-weight:700}
.search-dropdown-empty{padding:20px 14px;text-align:center;color:#8a97a6;font-size:13px}

/* =====================================================================
   Available balance panel
   ===================================================================== */
.bal-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
}
.bal-amt {
  font-size: 27px; font-weight: 700; color: var(--navy);
  letter-spacing: -.3px; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
/* Masked state keeps the same height, so nothing jumps when it toggles. */
.bal-amt.is-hidden { letter-spacing: 2px; color: var(--ink-2); }

.bal-eye {
  flex: none; width: 38px; height: 38px; border-radius: 9px;
  display: grid; place-items: center; cursor: pointer;
  background: var(--stripe); border: 1px solid var(--line);
  color: var(--ink-2); transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bal-eye:hover  { background: #E8F0FA; color: var(--navy); border-color: var(--blue-l); }
.bal-eye:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Which eye shows is driven by a class on the button, not the `hidden`
   attribute. `.bal-eye` is a grid container, and grid item placement wins
   over the [hidden] attribute's default display:none — so both icons
   rendered, stacked. A class rule is explicit and cannot be outranked. */
.bal-eye svg        { display: none; }
.bal-eye .eye-open  { display: block; }
.bal-eye.is-off .eye-open { display: none; }
.bal-eye.is-off .eye-shut { display: block; }

.bal-bar {
  margin-top: 14px; height: 8px; border-radius: 5px;
  background: var(--line-2); overflow: hidden;
}
.bal-bar span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--blue-l), var(--navy));
}

@media (max-width: 560px) {
  .bal-amt { font-size: 23px; }
  .bal-eye { width: 34px; height: 34px; }
}

/* =====================================================================
   Transaction processing overlay
   Covers the page while a transfer is submitted, so nobody presses back
   or refreshes half way through.
   ===================================================================== */
.ir-proc {
  position: fixed; inset: 0; z-index: 4000;
  display: grid; place-items: center;
  background: rgba(8, 24, 45, .72);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .22s ease;
}
.ir-proc.on { opacity: 1; }
.ir-proc[hidden] { display: none; }

.ir-proc-card {
  background: #fff; border-radius: 16px; padding: 32px 30px 26px;
  width: min(400px, calc(100vw - 36px)); text-align: center;
  box-shadow: 0 26px 60px rgba(4, 18, 38, .42);
  transform: translateY(10px) scale(.985);
  transition: transform .26s cubic-bezier(.2,.7,.3,1);
}
.ir-proc.on .ir-proc-card { transform: none; }

.ir-proc-ring { position: relative; width: 112px; height: 112px; margin: 0 auto 18px; }
.ir-proc-ring svg { transform: rotate(-90deg); display: block; }
.ir-proc-ring .ring-bg {
  fill: none; stroke: #E3EBF5; stroke-width: 9;
}
.ir-proc-ring .ring-fg {
  fill: none; stroke: var(--blue); stroke-width: 9;
  stroke-linecap: round; transition: stroke-dashoffset .12s linear;
}
.ir-proc-pct {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 27px; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}
.ir-proc-pct small { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-left: 1px; }

.ir-proc-card h3 { margin: 0 0 6px; font-size: 18px; color: var(--navy); }
.ir-proc-card p  { margin: 0 0 20px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }

.ir-proc-steps { text-align: left; display: flex; flex-direction: column; gap: 10px; }
.ir-proc-step {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-3); transition: color .2s ease;
}
.ir-proc-step i {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2px solid #D4DEEA; background: #fff; position: relative;
  transition: background .2s ease, border-color .2s ease;
}
.ir-proc-step.done { color: var(--ink); }
.ir-proc-step.done i { background: var(--green); border-color: var(--green); }
.ir-proc-step.done i::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .ir-proc, .ir-proc-card, .ir-proc-ring .ring-fg { transition: none; }
}

/* =====================================================================
   Language picker (Google Translate)
   The widget ships its own styling, most of which does not fit. These
   rules tame it: no floating banner, no logo bar, and a select that
   matches the rest of the sidebar.
   ===================================================================== */
.ir-lang {
  margin-top: 12px; padding: 11px 12px 12px;
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 10px;
}
.ir-lang-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-2);
  margin-bottom: 8px;
}
.ir-lang-label svg { flex: none; color: var(--blue); }
.ir-lang-off { font-size: 12px; color: var(--ink-2); }

/* The widget's own chrome. */
.goog-te-gadget {
  font-family: inherit !important; font-size: 0 !important;   /* hides "Powered by" text node */
  color: transparent !important;
}
/* Google's own select is kept in the DOM — the widget needs it — but taken
   out of view. With 130 languages it opens as a full-height native list
   that covers the screen, which is what the custom picker replaces. */
#google_translate_element {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.goog-logo-link, .goog-te-gadget img { display: none !important; }

/* Google pushes the whole document down by the height of its banner frame
   and pins a toolbar to the top. Both fight a fixed header, so they are
   suppressed. */
body { top: 0 !important; position: static !important; }
.skiptranslate iframe.goog-te-banner-frame,
.goog-te-banner-frame { display: none !important; visibility: hidden !important; }

/* The hover balloon it injects over translated text is noise on a
   banking screen. */
#goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* Account numbers, references and amounts must never be machine
   translated — a "translated" reference is a wrong reference. Anything
   marked notranslate is left alone. */
.notranslate { unicode-bidi: isolate; }


/* =====================================================================
   Language picker
   ===================================================================== */
.ir-lp { position: relative; }

.ir-lp-btn {
  width: 100%; height: 38px; padding: 0 11px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 13px; color: var(--ink);
  cursor: pointer; text-align: left;
}
.ir-lp-btn:hover { border-color: var(--blue-l); }
.ir-lp-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ir-lp-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ir-lp-btn svg { flex: none; color: var(--ink-2); }

/* Fixed, not absolute: the sidebar column has its own stacking and
   overflow, and an absolutely positioned panel was being clipped by it.
   Fixed takes the panel out of that entirely; its coordinates are set in
   JS from the button's position. */
.ir-lp-panel {
  position: fixed;
  width: 248px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 36px rgba(10, 34, 66, .22);
  padding: 8px; z-index: 9000;
}
.ir-lp-panel[hidden] { display: none; }

.ir-lp-search {
  width: 100%; height: 34px; padding: 0 10px; margin-bottom: 7px;
  border: 1px solid var(--line); border-radius: 7px;
  font-family: inherit; font-size: 13px; color: var(--ink);
}
.ir-lp-search:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* Scrolls rather than growing: 130 languages must not push the page. */
.ir-lp-list { max-height: 236px; overflow-y: auto; overscroll-behavior: contain; }

.ir-lp-item {
  display: block; width: 100%; text-align: left;
  padding: 7px 9px; border: 0; background: none; border-radius: 6px;
  font-family: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
}
.ir-lp-item:hover { background: var(--stripe); }
.ir-lp-item:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.ir-lp-item[hidden] { display: none; }

.ir-lp-none { padding: 12px 9px; font-size: 12.5px; color: var(--ink-2); }
.ir-lp-none[hidden] { display: none; }

/* A slim scrollbar, so the list does not look like a system window. */
.ir-lp-list::-webkit-scrollbar { width: 8px; }
.ir-lp-list::-webkit-scrollbar-thumb { background: #C9D6E4; border-radius: 4px; }
.ir-lp-list::-webkit-scrollbar-track { background: transparent; }


/* Waiting on the translation script after a language is chosen. */
.ir-lp.is-working .ir-lp-btn { opacity: .65; pointer-events: none; }
.ir-lp.is-working .ir-lp-cur::after {
  content: " …"; color: var(--ink-2);
}


/* =====================================================================
   Recipients list — six rows, then scroll
   ===================================================================== */
.rcp-search {
  width: 100%; height: 38px; padding: 0 11px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 13px; color: var(--ink);
}
.rcp-search:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* 6 rows at ~58px each. A fixed pixel height rather than a row count so
   the cut is always mid-row — that half-visible row is what tells you the
   list scrolls. */
.rcp-list {
  max-height: 352px; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 -4px; padding: 0 4px;
}
.rcp-row[hidden] { display: none; }
.rcp-none { padding: 22px 4px; color: var(--ink-2); font-size: 13px; text-align: center; }
.rcp-none[hidden] { display: none; }

.rcp-list::-webkit-scrollbar { width: 9px; }
.rcp-list::-webkit-scrollbar-thumb { background: #C9D6E4; border-radius: 5px; }
.rcp-list::-webkit-scrollbar-track { background: transparent; }

.ttl-count {
  display: inline-block; margin-left: 7px; padding: 1px 8px;
  background: rgba(255,255,255,.18); border-radius: 999px;
  font-size: 11.5px; font-weight: 700; vertical-align: 1px;
}


/* =====================================================================
   Page transitions
   ---------------------------------------------------------------------
   The header and sidebar are injected by classic.js, so the browser paints
   the page without them and then everything jumps as they appear. Two
   fixes: reserve their space up front so nothing moves, and fade the
   content in so the change of page reads as one motion rather than a
   flicker.
   ===================================================================== */

/* Cross-document page transition disabled — it made every navigation
   cross-fade, which read as the page opening slowly. Pages now switch
   instantly. (Space is still reserved below so nothing jumps.) */
@view-transition { navigation: none; }

/* Reserve the header's height before it exists.
   Measured from its parts: 28 utility bar + 62 masthead + 40 nav +
   30 breadcrumb = 160. Reserving too little still lets the page jump, so
   this is worth keeping in step if the header changes. */
#ir-header { min-height: 160px; }

/* Reserve the sidebar column. Without this the content starts full width
   and snaps left when the sidebar arrives. */
#ir-side { min-height: 520px; }

/* Content settles in. Kept short and opacity-only: a translate on every
   page load reads as the page moving under you, which is the opposite of
   what this is for. */
.content, .rail {
  /* fade-in removed so the page content shows immediately */
}

/* The injected shell fades in together, once classic.js signals it is
   built — otherwise the header appears, then the sidebar, then the rail,
   in three separate steps. */
/* Shell shows the instant classic.js builds it — no opacity gate, no fade,
   so a slow script load can never leave the header/sidebar blank. The
   min-height reservations above still stop the layout from jumping. */
#ir-header > *, #ir-side > * { opacity: 1; }
@keyframes ir-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (max-width: 980px) {
  #ir-header { min-height: 64px; }
  #ir-side   { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .content, .rail, #ir-header > *, #ir-side > * { animation: none; }
  @view-transition { navigation: none; }
}


/* Parent highlighted while you are on one of its pages, without the panel
   being open. */
.sidebar .grp.on, .snav .grp.on { color: #fff; background: rgba(255,255,255,.06); }
.sidebar .grp.on svg, .snav .grp.on svg { color: #6aa9ee; }


/* =====================================================================
   Admin notice on the confirmation screen
   Subject and sign-off in red; body in normal ink so the message stays
   readable — red for a whole paragraph is harder to read and stops the
   red meaning anything.
   ===================================================================== */
.cfm-msg-title {
  color: #A32B2B;            /* 6.3:1 on the notice background */
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 8px;
}
.cfm-msg-body {
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.6;
}
.cfm-msg-body p { margin: 0 0 10px; }
.cfm-msg-body p:last-child { margin-bottom: 0; }
.cfm-msg-body ul, .cfm-msg-body ol { margin: 0 0 10px; padding-left: 20px; }
.cfm-msg-body li { margin: 3px 0; }
.cfm-msg-body a { color: var(--blue); text-decoration: underline; }
.cfm-msg-body b, .cfm-msg-body strong { color: var(--ink); }

.cfm-msg-from {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(163, 43, 43, .22);
  color: #A32B2B; font-weight: 700; font-size: 13px;
}


/* =====================================================================
   Confirmation modal — fits the viewport
   ---------------------------------------------------------------------
   A long admin notice pushed the modal past the bottom of the screen, so
   the Confirm button sat below the fold. The card is now capped at the
   viewport height with only the middle scrolling; the title and the
   buttons stay put.
   ===================================================================== */
.cfm-card {
  max-height: min(92vh, 860px);
  display: flex; flex-direction: column;
}
.cfm-head { flex: none; }
.cfm-body { overflow-y: auto; overscroll-behavior: contain; }
.cfm-card > .cfm-actions,
.cfm-card > .cfm-btns { flex: none; }

/* ---- Admin notice, clamped ---- */
.cfm-msg-body.is-clamped {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cfm-msg-more {
  margin-top: 6px; padding: 0; border: 0; background: none;
  color: #A32B2B; font-family: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; text-decoration: underline;
}
.cfm-msg-more:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---- Secondary detail rows ---- */
.cfm-more[hidden] { display: none; }
.cfm-toggle {
  display: flex; align-items: center; gap: 6px;
  margin: 2px 0 6px; padding: 6px 0;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--blue);
}
.cfm-toggle svg { transition: transform .16s ease; }
.cfm-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.cfm-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }


/* A field the wizard is waiting on. Cleared as soon as it is edited, so it
   marks what is missing rather than nagging. */
.field input.is-bad,
.field select.is-bad,
input.is-bad {
  border-color: var(--red) !important;
  background: #FEF6F6;
  box-shadow: 0 0 0 3px rgba(178, 58, 58, .12);
}


/* The exchange step between the two amounts. The arrow and the rate make
   it obvious that the second figure is a conversion of the first, rather
   than two unrelated numbers the customer has to reconcile. */
.cfm-fx {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 0 6px 2px;
  font-size: 12px; color: var(--ink-2);
}
.cfm-fx svg { flex: none; color: var(--blue); }


/* ---- Success state on the processing overlay ---- */
.ir-proc-tick {
  position: absolute; inset: 0; margin: auto;
  color: var(--green);
  opacity: 0; transform: scale(.6);
  transition: opacity .22s ease, transform .28s cubic-bezier(.2,.9,.3,1.4);
  pointer-events: none;
}
.ir-proc-card.is-done .ir-proc-tick { opacity: 1; transform: scale(1); }

/* The percentage gives way to the tick rather than sitting behind it. */
.ir-proc-card.is-done .ir-proc-pct { opacity: 0; transition: opacity .18s ease; }

/* Ring turns green once complete. */
.ir-proc-card.is-done .ring-fg {
  stroke: var(--green);
  transition: stroke .3s ease;
}

.ir-proc-card.is-done h3 { color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  .ir-proc-tick { transition: none; }
}


/* =====================================================================
   Transfer receipt — mobile-banking style
   ===================================================================== */
.rcpt {
  max-width: 420px; margin: 0 auto;
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 16px; padding: 22px 20px 20px;
  box-shadow: 0 4px 20px rgba(15, 40, 80, .07);
  text-align: center;
}

.rcpt-to { margin: 4px 0 10px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.rcpt-to b { color: var(--ink); font-weight: 600; }

.rcpt-amt {
  font-size: 30px; font-weight: 700; color: var(--navy);
  letter-spacing: -.5px; font-variant-numeric: tabular-nums;
}
.rcpt-state {
  margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--green);
}

/* ---- Progress track ---- */
.rcpt-track {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin: 20px 0 0; padding: 0;
}
.rcpt-track li { position: relative; padding: 0 4px; }
.rcpt-track i {
  display: block; width: 17px; height: 17px; margin: 0 auto 8px;
  border-radius: 50%; background: #fff;
  border: 2px solid var(--line); position: relative; z-index: 1;
}
.rcpt-track li.done i { background: var(--green); border-color: var(--green); }
.rcpt-track li.done i::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* Connector, drawn between the dots rather than through them. */
.rcpt-track li::before {
  content: ""; position: absolute; top: 8px; left: -50%; width: 100%;
  height: 2px; background: var(--line);
}
.rcpt-track li:first-child::before { display: none; }
.rcpt-track li.done::before { background: var(--green); }

.rcpt-track span { display: block; font-size: 11.5px; color: var(--ink); line-height: 1.35; }
.rcpt-track li:not(.done) span { color: var(--ink-2); }
.rcpt-track time { display: block; font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }

.rcpt-note {
  margin: 18px 0 0; padding: 10px 12px; text-align: left;
  background: var(--stripe); border-radius: 9px;
  font-size: 11.5px; color: var(--ink-2); line-height: 1.55;
}
.rcpt-note b { color: var(--ink); }

/* ---- Summary ---- */
.rcpt-sum {
  display: grid; grid-template-columns: 1fr auto; gap: 9px 12px;
  margin: 18px 0 0; padding: 16px 0 0; text-align: left;
  border-top: 1px solid var(--line-2); font-size: 13px;
}
.rcpt-sum dt { color: var(--ink-2); }
.rcpt-sum dd { margin: 0; text-align: right; color: var(--ink); font-weight: 600;
               font-variant-numeric: tabular-nums; }
.rcpt-sum dd.recv { color: var(--green); }
.rcpt-sum dt.tot, .rcpt-sum dd.tot {
  padding-top: 9px; border-top: 1px solid var(--line-2);
  font-size: 14px; color: var(--navy); font-weight: 700;
}

/* ---- Details ---- */
.rcpt-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); text-align: left; }
.rcpt-block h4 { margin: 0 0 12px; font-size: 13px; color: var(--navy); }

.rcpt-det { display: grid; grid-template-columns: auto 1fr; gap: 11px 14px; margin: 0; font-size: 12.5px; }
.rcpt-det dt { color: var(--ink-2); }
.rcpt-det dd { margin: 0; text-align: right; color: var(--ink); font-weight: 500; }
.rcpt-det dd span { color: var(--ink-2); font-weight: 400; font-size: 12px; }

.copyrow { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.copyrow span { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: var(--ink); }
.rcpt-copy {
  border: 0; background: none; padding: 2px; cursor: pointer; color: var(--blue);
  display: inline-flex; line-height: 0;
}
.rcpt-copy.done { color: var(--green); }
.rcpt-copy:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---- Actions ---- */
.rcpt-btns { display: flex; gap: 9px; margin-top: 20px; }
.rcpt-btns .btn { flex: 1; text-align: center; }

@media (max-width: 420px) {
  .rcpt { padding: 18px 15px 16px; }
  .rcpt-amt { font-size: 26px; }
  .rcpt-track span { font-size: 10.5px; }
}
/* Unread-message count badge on the Messages sidebar item. */
.snav a .nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;display:inline-flex;
  align-items:center;justify-content:center;background:#D8332A;color:#fff;font-size:11px;font-weight:800;
  border-radius:999px;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.snav a.on .nav-badge{background:#e0483f}