:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers).screen{padding:0;height:100%;overflow:hidden}
/* Home screen — ported 1:1 from cb-services-screen/styles.css.
   Every selector is scoped under :is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh so nothing leaks out and
   app.css cannot restyle it (the id gives it higher specificity). */
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh{
  --page:#dcdde0;--crimson:#C31352;--hd-top:#C31352;--hd-bot:#C31352;
  --ink:#1f1f1f;--green:#149a14;--band:#f3f3f3;--line:#cfcfcf;
  width:100%;height:100%;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh *{box-sizing:border-box;margin:0;padding:0;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .app{
  position:relative;
  width:100%;max-width:430px;height:100%;margin:0 auto;
  background:linear-gradient(180deg,var(--hd-top),var(--hd-bot));
  overflow:hidden;
  color:#fff;
}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .status{
  position:absolute;top:0;left:0;right:0;height:50px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 26px 0 52px;
}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .clock{font-size:19px;font-weight:700;letter-spacing:.2px;font-family:-apple-system,'SF Pro Text','Segoe UI',Roboto,sans-serif;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .sicons{display:flex;align-items:center;gap:9px;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .batt{
  position:relative;width:31px;height:18px;border-radius:5px;
  background:rgba(255,255,255,.38);
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:800;color:#fff;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;
}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .batt::after{content:"";position:absolute;right:-3px;top:6px;width:2px;height:6px;border-radius:0 2px 2px 0;background:rgba(255,255,255,.5);}

:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .hrow{
  /* was top:55px, sized to clear the fake status bar (now removed, see .status{display:none!important}
     in cb-auth.css) -- that left 55px of dead space above the header row. */
  position:absolute;top:16px;left:14px;right:14px;height:52px;
  display:flex;align-items:center;gap:9px;
}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .avatar{width:46px;height:46px;border-radius:50%;border:2px solid #fff;overflow:hidden;flex-shrink:0;background:#e8b4bd;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .avatar img{display:block;width:100%;height:100%;object-fit:cover;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .who{flex:1;min-width:0;line-height:15.6px;font-size:12.5px;font-weight:500;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .who .login{font-size:11.5px;white-space:nowrap;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .hact{display:flex;align-items:center;gap:15px;padding-right:2px;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .hact svg{display:block;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .bell{position:relative;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .bell .n{
  position:absolute;top:-8px;right:-9px;width:15px;height:15px;border-radius:50%;
  background:#f7941d;color:#fff;font-size:9.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}

:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .sheet{
  /* was top:110px -- sized for the old .hrow (top:55px + 52px tall) plus room for the fake status
     bar, both since removed/shrunk. That left a big block of plain maroon below the header text. */
  position:absolute;left:0;right:0;top:78px;bottom:0;
  background:#fff;border-radius:14px 14px 0 0;
  overflow-y:auto;color:var(--ink);
  padding:1px 14px 108px;
  scrollbar-width:none;
}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .sheet::-webkit-scrollbar{display:none;}

:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;margin-bottom:13px;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .card:last-child{margin-bottom:0;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .grid{display:grid;grid-template-columns:repeat(4,1fr);padding:0 4px;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .main .grid{padding-top:21px;padding-bottom:24px;row-gap:32px;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .cell{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .ic{height:32px;display:flex;align-items:center;justify-content:center;color:var(--crimson);}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .ic svg{height:32px;width:auto;display:block;fill:currentColor;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .lb{margin-top:10px;font-size:12px;line-height:15.6px;font-weight:400;color:var(--ink);}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .r2 .lb{font-size:11.2px;line-height:14.4px;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .new{position:absolute;top:-3px;left:calc(50% + 15px);font-size:10.5px;color:var(--green);font-weight:500;line-height:1;}

:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .band{height:34px;background:var(--band);display:flex;align-items:center;justify-content:space-between;padding:0 21px 0 14px;font-size:13px;font-weight:600;letter-spacing:.1px;color:var(--ink);}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .sec .grid{padding-top:19px;padding-bottom:22px;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .cbc{font-weight:800;font-size:19.5px;letter-spacing:-1.4px;color:var(--crimson);white-space:nowrap;font-family:'Poppins',sans-serif;transform:scaleY(1.05);}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .cbc.wrap{position:relative;height:32px;display:flex;align-items:center;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .cbc.wrap .new{top:-14px;left:auto;right:-2px;letter-spacing:0;}

:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .nav{
  position:absolute;left:0;right:0;bottom:0;height:93px;
  background:linear-gradient(180deg,#C71255,#BF134F);
  border-radius:23px 23px 0 0;
  display:grid;grid-template-columns:repeat(5,1fr);
  padding-top:17px;
}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .ni{display:flex;flex-direction:column;align-items:center;font-size:11.5px;font-weight:500;color:#fff;gap:9px;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .ni svg{height:26px;width:auto;display:block;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .ni .u{height:2px;width:27px;background:transparent;margin-top:-3px;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .ni.on .u{background:#fff;}

:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh [data-action],:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh [data-tab]{cursor:pointer;-webkit-tap-highlight-color:transparent;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh [data-action]:focus-visible,:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh [data-tab]:focus-visible,:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .band:focus-visible{outline:2px solid #f7941d;outline-offset:2px;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .band{cursor:pointer;user-select:none;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .band svg{transition:transform .2s;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .card.collapsed .grid{display:none;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .card.collapsed .band svg{transform:rotate(180deg);}

/* ---- accounts home (ported from accounts.css) ---- */

#s-home .cbh .home .status{height:40px;padding-left:47px;}
#s-home .cbh .home .hrow{top:14px;}   /* same fake-status-bar-clearance fix, see base .hrow rule above */
#s-home .cbh .home .who{font-size:11.2px;line-height:14px;}
#s-home .cbh .home .who .login{font-size:10.4px;}
#s-home .cbh .home .sheet{top:72px;padding:0 0 108px;}   /* same header-shrink fix, see base .sheet rule above */
#s-home .cbh .tabs{display:flex;height:48px;background:#f6f6f6;}
#s-home .cbh .tab{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 4px;
  font-size:12.3px;line-height:1.15;color:var(--ink);border-left:1px solid #dcdcdc;flex:1 1 0;min-width:0;border-radius:0;font-weight:400;transition:none;}
#s-home .cbh .tab svg{height:14px;width:auto;flex-shrink:0;fill:var(--crimson);display:block;}
#s-home .cbh .tab:nth-child(1){flex:0 0 82px;border-left:0;font-weight:800;color:#C31352;letter-spacing:.2px;}
#s-home .cbh .tab:nth-child(2){flex:0 0 108px;}
#s-home .cbh .tab:nth-child(3){flex:0 0 96px;}
#s-home .cbh .tab.on::after{content:"";position:absolute;left:8px;right:9px;bottom:0;height:3px;background:var(--crimson);border-radius:3px 3px 0 0;}
#s-home .cbh .pad{padding:13px 15px 0;}
#s-home .cbh .quick{display:flex;gap:4px;margin-bottom:13px;}
#s-home .cbh .qb{height:44px;border-radius:5px;color:#fff;display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:12.5px;font-weight:500;background:linear-gradient(180deg,#C71255,#BF134F);box-shadow:0 2px 3px rgba(80,0,20,.35);}
#s-home .cbh .qb svg{height:18px;width:auto;fill:#fff;display:block;}
#s-home .cbh .qb:nth-child(1){flex:117 1 0;}
#s-home .cbh .qb:nth-child(2){flex:123 1 0;}
#s-home .cbh .qb:nth-child(3){flex:115 1 0;}
#s-home .cbh .band.lg{padding:0 21px 0 17px;font-size:13.5px;font-weight:500;letter-spacing:0;}
#s-home .cbh .bt{display:flex;align-items:center;gap:7px;}
#s-home .cbh .bt svg{display:block;}
#s-home .cbh .arow{display:flex;justify-content:space-between;align-items:center;padding:6px 19px 17px 16px;}
#s-home .cbh .arow .an1{font-size:12.6px;line-height:18px;color:var(--crimson);}
#s-home .cbh .arow .an1.an1-mono{color:var(--text);}   /* NAIRO Saving row -- black, not the crimson brand accent the wallet row uses */
#s-home .cbh .arow .an2{font-size:13.6px;line-height:18px;font-weight:500;color:var(--ink);letter-spacing:.2px;}
#s-home .cbh .arow .an3{font-size:12.4px;line-height:16px;color:var(--ink);}
#s-home .cbh .arow .amt{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;}
#s-home .cbh .arow .amt svg{display:block;}
#s-home .cbh .inv{margin:13px 12px;padding:11px 17px 11px 11px;border:1px solid #e0e0e0;background:#f6f6f6;border-radius:9px;
  display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;line-height:15px;color:var(--ink);}
#s-home .cbh .inv .or{margin-left:83px;}
#s-home .cbh .guide{position:absolute;right:0;top:560px;width:21px;padding:16px 0;border-radius:18px 0 0 18px;z-index:6;
  background:linear-gradient(180deg,#C71255,#BF134F);box-shadow:-1px 1px 4px rgba(0,0,0,.25);
  display:flex;flex-direction:column;align-items:center;gap:5px;color:#fff;}
#s-home .cbh .guide i{display:block;width:2px;height:19px;border-radius:1px;background:#fff;}
#s-home .cbh .guide span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;font-weight:800;letter-spacing:.3px;white-space:nowrap;}
#s-home .cbh .card.collapsed .cbody{display:none;}
#s-home .cbh .tab span{white-space:nowrap;}
#s-home .cbh .tab:nth-child(2) span{white-space:normal;}
#s-home .cbh .tab:nth-child(4){letter-spacing:-.2px;padding:0 2px;gap:5px;}


/* ---- payments screen (ported from payments.css) ---- */

#s-payments .cbh .pay .sheet{padding:9px 14px 92px 16px;}
#s-payments .cbh .pay .card{margin-bottom:12px;}
#s-payments .cbh .pay .card:last-child{margin-bottom:0;}
#s-payments .cbh .pay .band{height:33px;font-weight:500;letter-spacing:.2px;}
#s-payments .cbh .pay .grid{padding:18px 4px 6px;row-gap:37px;}
#s-payments .cbh .pay .grid:empty{padding:0;}
#s-payments .cbh .pay .ic{height:33px;}
#s-payments .cbh .pay .ic svg{height:33px;}
#s-payments .cbh .pay .lb{font-size:12.5px;min-height:31.2px;}
#s-payments .cbh .pay .p2p .grid{padding:16px 4px 11px;row-gap:22px;}
#s-payments .cbh .pay .p2p .ic svg{height:31px;}
#s-payments .cbh .pay .p2p .lb{font-size:11.5px;line-height:14.4px;min-height:28.8px;}
#s-payments .cbh .pay .nav{height:76px;padding-top:15px;}


/* ---- transfers screen (ported from transfers.css) ---- */

#s-transfers .cbh .tr .sheet{padding:4px 16px 92px;}
#s-transfers .cbh .tr .card{margin-bottom:12px;}
#s-transfers .cbh .tr .card:last-child{margin-bottom:0;}
#s-transfers .cbh .tr .band{height:31px;font-weight:500;letter-spacing:.2px;}
#s-transfers .cbh .tr .grid:empty{padding:0;}
#s-transfers .cbh .tr .ic{height:35px;}
#s-transfers .cbh .tr .ic svg{height:35px;}
#s-transfers .cbh .tr .lb{margin-top:9px;font-size:11.5px;line-height:14.5px;white-space:nowrap;}
#s-transfers .cbh .tr .manage .grid{padding:17px 4px 7px;grid-template-rows:94px auto;}
#s-transfers .cbh .tr .manage .ic,#s-transfers .cbh .tr .manage .ic svg{height:31px;}
#s-transfers .cbh .tr .nav{height:81px;padding-top:10px;}
#s-transfers .cbh .tr .ni{gap:0;}
#s-transfers .cbh .tr .ni .u{margin-top:3px;}


/* ---- avatar dropdown (Profile / Settings) ---- */
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .avatar{cursor:pointer;-webkit-tap-highlight-color:transparent;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .avatar:focus-visible{outline:2px solid #f7941d;outline-offset:2px;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .avmenu{position:absolute;z-index:20;min-width:150px;background:#fff;color:var(--ink);border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.28);overflow:hidden;display:none;font-size:13px;font-weight:600;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .avmenu.open{display:block;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .avitem{padding:12px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .avitem + .avitem{border-top:1px solid var(--line);}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .avitem:active,:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .avitem:focus-visible{background:var(--band);outline:none;}

/* ---- settings screen (ported from settings.css) ---- */

#s-settings .cbh .set .sheet{padding:8px 14px 92px 15px;}
#s-settings .cbh .set .card{margin-bottom:12px;}
#s-settings .cbh .set .card:last-child{margin-bottom:0;}
#s-settings .cbh .set .band{height:33px;font-weight:500;letter-spacing:.2px;}
#s-settings .cbh .set .grid{padding:16px 4px 20px;}
#s-settings .cbh .set .grid:empty{padding:0;}
#s-settings .cbh .set .ic{height:31px;}
#s-settings .cbh .set .ic svg{height:31px;}
#s-settings .cbh .set .lb{margin-top:8.6px;font-size:11.2px;line-height:14.4px;white-space:nowrap;}
#s-settings .cbh .set .st1 .grid{grid-template-rows:110.6px auto;}
#s-settings .cbh .set .st2 .grid{padding:15px 4px 8px;grid-template-rows:106px 86.6px auto;}
#s-settings .cbh .set .nav{height:91px;padding-top:15px;}
#s-settings .cbh .set .gs .grid{padding:17.5px 4px 18px;grid-template-rows:95.4px auto;}
#s-settings .cbh .set .gs .ic,#s-settings .cbh .set .gs .ic svg{height:34px;}
#s-settings .cbh .set .gs .lb{margin-top:9px;font-size:12px;line-height:15.2px;}


/* ---- CARD SERVICES card on the Cards screen (same values as the Settings card it came from) ---- */
#s-cards .cbh{--crimson:#C31352;--ink:#1f1f1f;--green:#149a14;--band:#f3f3f3;--line:#cfcfcf;
  margin:12px 14px 0 15px;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;}
#s-cards .cbh *{box-sizing:border-box;margin:0;padding:0;}
#s-cards .cbh .card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;color:var(--ink);}
#s-cards .cbh .band{height:33px;background:var(--band);display:flex;align-items:center;justify-content:space-between;padding:0 21px 0 14px;font-size:13px;font-weight:500;letter-spacing:.2px;color:var(--ink);cursor:pointer;user-select:none;}
#s-cards .cbh .band svg{transition:transform .2s;}
#s-cards .cbh .grid{display:grid;grid-template-columns:repeat(4,1fr);padding:20px 4px 20px;grid-template-rows:103.7px 110.6px auto;}
#s-cards .cbh .cell{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;}
#s-cards .cbh .ic{height:30px;display:flex;align-items:center;justify-content:center;color:var(--crimson);}
#s-cards .cbh .ic svg{height:30px;width:auto;display:block;fill:currentColor;}
#s-cards .cbh .lb{margin-top:11.9px;font-size:12px;line-height:15.2px;font-weight:400;color:var(--ink);white-space:nowrap;}
#s-cards .cbh .new{position:absolute;top:-3px;left:calc(50% + 15px);font-size:10.5px;color:var(--green);font-weight:500;line-height:1;}
#s-cards .cbh [data-action]:focus-visible,#s-cards .cbh .band:focus-visible{outline:2px solid #f7941d;outline-offset:2px;}
#s-cards .cbh .card.collapsed .grid{display:none;}
#s-cards .cbh .card.collapsed .band svg{transform:rotate(180deg);}


/* ---- Home: quick services card (below the accounts card) ---- */
#s-home .cbh .qs .grid{padding:18px 4px 16px;row-gap:20px;}

/* ---- Transfers: To Nairo / To Bank / Request row, under Favourite Beneficiaries ---- */
#s-transfers .cbh .tr .qp .grid{grid-template-columns:repeat(3,1fr);padding:16px 4px 14px;}

/* ---- CBQ bottom nav on the Cards tab (same values as the nav on the CBQ screens) ---- */
#cards-nav{flex:none;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;}
#cards-nav *{box-sizing:border-box;margin:0;padding:0;}
#cards-nav .nav{position:relative;height:93px;background:linear-gradient(180deg,#C71255,#BF134F);border-radius:23px 23px 0 0;display:grid;grid-template-columns:repeat(5,1fr);padding-top:17px;}
#cards-nav .ni{display:flex;flex-direction:column;align-items:center;font-size:11.5px;font-weight:500;color:#fff;gap:9px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
#cards-nav .ni svg{height:26px;width:auto;display:block;}
#cards-nav .ni .u{height:2px;width:27px;background:transparent;margin-top:-3px;}
#cards-nav .ni.on .u{background:#fff;}
#cards-nav .ni:focus-visible{outline:2px solid #f7941d;outline-offset:2px;}

/* ---- CBQ header on the Cards tab (same values as the Home screen header) ---- */
#app.cbq-hdr #screens{border-radius:14px 14px 0 0;position:relative;}
#cards-hdr{flex:none;position:relative;z-index:6;height:116px;margin-bottom:-14px;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;color:#fff;}
#cards-hdr *{box-sizing:border-box;margin:0;padding:0;}
#cards-hdr .app{position:relative;height:116px;background:linear-gradient(180deg,#C71255,#BF134F);color:#fff;}
#cards-hdr .status{position:absolute;top:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 26px 0 47px;}
#cards-hdr .clock{font-size:19px;font-weight:700;letter-spacing:.2px;font-family:-apple-system,'SF Pro Text','Segoe UI',Roboto,sans-serif;}
#cards-hdr .sicons{display:flex;align-items:center;gap:9px;}
#cards-hdr .batt{position:relative;width:31px;height:18px;border-radius:5px;background:rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;color:#fff;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;}
#cards-hdr .batt::after{content:"";position:absolute;right:-3px;top:6px;width:2px;height:6px;border-radius:0 2px 2px 0;background:rgba(255,255,255,.5);}
#cards-hdr .hrow{position:absolute;top:14px;left:14px;right:14px;height:52px;display:flex;align-items:center;gap:9px;}   /* same fake-status-bar-clearance fix */
#cards-hdr .avatar{width:46px;height:46px;border-radius:50%;border:2px solid #fff;overflow:hidden;flex-shrink:0;background:#e8b4bd;cursor:pointer;-webkit-tap-highlight-color:transparent;}
#cards-hdr .avatar img{display:block;width:100%;height:100%;object-fit:cover;}
#cards-hdr .avatar:focus-visible{outline:2px solid #f7941d;outline-offset:2px;}
#cards-hdr .who{flex:1;min-width:0;line-height:14px;font-size:11.2px;font-weight:500;}
#cards-hdr .who .login{font-size:10.4px;white-space:nowrap;}
#cards-hdr .hact{display:flex;align-items:center;gap:15px;padding-right:2px;}
#cards-hdr .hact svg{display:block;cursor:pointer;}
#cards-hdr .bell{position:relative;cursor:pointer;}
#cards-hdr .bell .n{position:absolute;top:-8px;right:-9px;width:15px;height:15px;border-radius:50%;background:#f7941d;color:#fff;font-size:9.5px;font-weight:800;display:flex;align-items:center;justify-content:center;}
#cards-hdr [data-action]:focus-visible{outline:2px solid #f7941d;outline-offset:2px;}
#cards-hdr .avmenu{position:absolute;z-index:20;min-width:150px;background:#fff;color:#1f1f1f;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.28);overflow:hidden;display:none;font-size:13px;font-weight:600;}
#cards-hdr .avmenu.open{display:block;}
#cards-hdr .avitem{padding:12px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
#cards-hdr .avitem + .avitem{border-top:1px solid #cfcfcf;}
#cards-hdr .avitem:active,#cards-hdr .avitem:focus-visible{background:#f3f3f3;outline:none;}

/* ---- inner-page header (back arrow + title), from biometric.css's .bar ---- */
#app.cbq-sub #screens{border-radius:14px 14px 0 0;position:relative;}
#sub-hdr{flex:none;position:relative;z-index:6;height:94px;margin-bottom:-14px;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;color:#fff;}
#sub-hdr *{box-sizing:border-box;margin:0;padding:0;}
#sub-hdr .app{position:relative;height:94px;background:linear-gradient(180deg,#C71255,#BF134F);color:#fff;}
#sub-hdr .status{position:absolute;top:0;left:0;right:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 26px 0 47px;}
#sub-hdr .clock{font-size:19px;font-weight:700;letter-spacing:.2px;font-family:-apple-system,'SF Pro Text','Segoe UI',Roboto,sans-serif;}
#sub-hdr .sicons{display:flex;align-items:center;gap:9px;}
#sub-hdr .batt{position:relative;width:31px;height:18px;border-radius:5px;background:rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;color:#fff;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;}
#sub-hdr .batt::after{content:"";position:absolute;right:-3px;top:6px;width:2px;height:6px;border-radius:0 2px 2px 0;background:rgba(255,255,255,.5);}
#sub-hdr .bar{position:absolute;left:0;right:0;top:40px;height:44px;display:flex;align-items:center;padding:0 14px 0 14px;}
#sub-hdr .back{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-right:2px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
#sub-hdr h1{flex:1;min-width:0;font-size:17px;font-weight:600;letter-spacing:.1px;margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#sub-hdr .acts{display:flex;align-items:center;gap:6px;}
#sub-hdr .sub-act{box-sizing:content-box;width:22px;height:22px;padding:7px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
#sub-hdr [data-action]:focus-visible{outline:2px solid #f7941d;outline-offset:2px;}

/* ---- Home tab strip: Accounts + Help ---- */
#s-home .cbh .tab.help{flex:0 0 76px;margin-left:auto;flex-direction:column;gap:3px;justify-content:center;padding:0 8px;color:var(--crimson);}
#s-home .cbh .tab.help svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:currentColor;}
#s-home .cbh .tab.help .help-tag{background:#C31352;color:#fff;font-size:8px;font-weight:800;letter-spacing:.4px;line-height:1;padding:3px 6px;border-radius:99px;white-space:nowrap;}

/* shorter, uniform bottom bar on every screen */
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .nav,#cards-nav .nav{height:70px !important;padding-top:10px !important;border-radius:20px 20px 0 0;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .ni,#cards-nav .ni{gap:5px !important;font-size:11px;}
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .ni svg,#cards-nav .ni svg{height:22px !important;}

/* History tab sits next to Help, right-aligned */
#s-home .cbh .tab.hist{flex:0 0 76px;margin-left:auto;flex-direction:column;gap:3px;justify-content:center;padding:0 8px;color:var(--crimson);font-size:11px;font-weight:700;}
#s-home .cbh .tab.hist svg{width:20px;height:20px;flex-shrink:0;}
#s-home .cbh .tab.help{margin-left:0;}
#s-home .cbh .tab.hist{flex:0 0 auto;padding:0 14px;}

/* accounts: copy + hide-balance */
#s-home .cbh .arow .an2{display:flex;align-items:center;gap:8px;}
#s-home .cbh .arow .cp{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin:-4px 0;color:var(--crimson);border-radius:6px;cursor:pointer;}
#s-home .cbh .eye-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:28px;cursor:pointer;}
#s-home .cbh .eye-btn .ec{display:none;}
#s-home .cbh .eye-btn.off .eo{display:none;}
#s-home .cbh .eye-btn.off .ec{display:block;}

/* favourite beneficiaries */
#s-transfers .cbh .fav-av{width:38px;height:38px;border-radius:50%;background:#f7d6e2;color:#C31352;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;}
#s-transfers .cbh .fav-cell .ic{height:38px;}
#s-transfers .cbh .fav-empty{grid-column:1/-1;text-align:center;font-size:12px;color:var(--ink);padding:8px 0;}
#s-transfers .cbh .card.fav .grid{padding:14px 14px 16px;row-gap:14px;}

/* App settings screen (opened from the Profile gear) */
#s-app-settings .as-grid{display:grid;grid-template-columns:repeat(4,1fr);row-gap:28px;padding:24px 8px 96px;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;}
#s-app-settings .as-cell{display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;}
#s-app-settings .as-ic{height:32px;display:flex;align-items:center;justify-content:center;color:var(--g2,#C31352);}
#s-app-settings .as-ic svg{height:32px;width:auto;display:block;fill:currentColor;}
#s-app-settings .as-lb{margin-top:10px;font-size:12px;line-height:15.6px;color:var(--text);}
#s-home .cbh .arow .an3{line-height:19px;padding-bottom:2px;}

#s-app-settings .as-frame{background:var(--n0);border-radius:18px;margin:14px 16px 0;box-shadow:var(--e1);}
#s-app-settings .as-grid{padding:22px 4px 22px;}

/* bottom bar: square top corners */
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .nav,#cards-nav .nav{border-radius:0 !important;}

/* bottom bar: square top edge on every screen */
:is(#s-home,#s-services,#s-settings,#s-payments,#s-transfers) .cbh .nav,#cards-nav .nav{border-radius:0 !important;}
#s-services .cbh .sheet{padding-top:14px;}

/* quick-services + bill tiles: one icon box height, every icon centred in it, labels on one line */
#s-home .cbh .qs .ic,#s-payments .cbh .bill .ic{height:44px;display:flex;align-items:center;justify-content:center;}
#s-home .cbh .qs .ic svg,#s-payments .cbh .bill .ic svg{height:34px;width:auto;}
#s-home .cbh .qs .ic img,#s-payments .cbh .bill .ic img{height:44px;width:auto;}
#s-home .cbh .qs .lb,#s-payments .cbh .bill .lb{margin-top:8px;}
#s-home .cbh .qs .grid{align-items:start;}
#s-home .cbh .qs .ic svg,#s-payments .cbh .bill .ic svg{height:36px;width:auto;}
#s-home .cbh .tab.hist{white-space:nowrap;padding:0 12px;}
#s-home .cbh .tab.hist span{font-size:11.5px;}

/* Uniform icon size across Payments, Cards and More (services) screens -- these three had
   drifted to different sizes (32/33/31/30/36px) over separate edits; appended last so these
   win the cascade over the older same-specificity rules above without having to touch them. */
#s-payments .cbh .ic,#s-cards .cbh .ic,#s-services .cbh .ic{height:30px;}
#s-payments .cbh .ic svg,#s-cards .cbh .ic svg,#s-services .cbh .ic svg{height:30px;width:auto;}
#s-payments .cbh .pay .ic,#s-payments .cbh .pay .ic svg{height:30px;}
#s-payments .cbh .pay .p2p .ic svg{height:30px;}
#s-payments .cbh .bill .ic svg{height:30px;}

/* Apple Pay's logo+wordmark viewBox is almost 3x as wide as tall, so a uniform SVG
   HEIGHT makes it render much wider than every other Card Services icon. Constrain it
   by width instead so its footprint matches the rest. */
#s-cards .cell[data-action="apple-pay"] .ic svg{height:auto;width:32px;}