/* TIER 1 — PRESENTATION
   Mobile-first. iPhone is the primary target: safe-area insets, 44px+ tap
   targets, dvh sizing, no hover-only interactions, no fixed heights that
   break when Safari's toolbars collapse. */

:root {
  --blue: #1f5ee0;
  --blue-press: #1a4fbd;
  --navy: #0a192b;
  --ink: #111318;
  --body: #33383f;
  --muted: #5b6472;
  --line: #e3e5ea;
  --bg: #f6f7f9;
  --card: #ffffff;
  --ok: #1f7a3a;
  --ok-bg: #e9f7ec;
  --warn-bg: #fff8e6;
  --warn-line: #f0d99e;
  --warn-ink: #7d5a0e;
  --radius: 14px;
  --tap: 44px;
  --shadow: 0 1px 2px rgba(10, 25, 43, .05), 0 8px 24px rgba(10, 25, 43, .05);
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* author display rules must never beat the hidden attribute */
[hidden] { display: none !important; }

html, body { height: 100%; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #0b1622;
  display: flex;
  justify-content: center;
  overscroll-behavior: none;
}

/* ---------- app shell ---------- */

.app {
  position: relative;
  padding-top: env(safe-area-inset-top);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  overflow: hidden;
}

@media (min-width: 560px) {
  body { padding: 24px 0; align-items: center; }
  .app {
    height: min(calc(100dvh - 48px), 940px);
    border-radius: 26px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  }
}


.view {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 16px calc(20px + env(safe-area-inset-bottom));
  scroll-behavior: smooth;
}

.view:focus { outline: none; }
.view--fixed { overflow: hidden; padding: 0; display: flex; flex-direction: column; }

@media (prefers-reduced-motion: reduce) {
  .view { scroll-behavior: auto; }
}

/* ---------- tab bar ---------- */

.tabs {
  flex: 0 0 auto;
  display: flex;
  background: #fff;
  border-top: 1px solid #edeef2;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab {
  flex: 1 1 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #6f7783;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tab[aria-current="page"] { color: var(--blue); }
.tab:active { background: #f3f5f9; }
.tab svg { display: block; }

/* ---------- typography ---------- */

h1, h2, h3 { margin: 0; letter-spacing: -.02em; }
h1 { font-size: 26px; font-weight: 700; line-height: 1.2; }
h2 { font-size: 17px; font-weight: 650; }
h3 { font-size: 15px; font-weight: 650; }
p { margin: 0; }

.lede {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 10px;
}

.help { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.fineprint {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
  margin-top: 20px;
}

.error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.4;
  color: #a3231b;
  background: #fdecea;
  border: 1px solid #f6c9c4;
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 12px;
}

.error[hidden] { display: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: #fff;
  color: var(--navy);
  padding: 12px 16px;
  border-radius: 0 0 10px 0;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus { left: 0; }

/* ---------- focus ---------- */

:focus-visible {
  outline: 3px solid #1447b8;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- header ---------- */

.appHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--navy);
}

.brand svg { flex: 0 0 auto; display: block; }

.iconBtn {
  width: var(--tap);
  height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.iconBtn:active { background: #e9ecf2; }

.backBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 10px 0 0;
  margin-left: -6px;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- cards ---------- */

.card {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

.balanceCard {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 20px;
  color: #fff;
  background: linear-gradient(135deg, #0a1a2e 0%, #132a44 100%);
  box-shadow: var(--shadow);
}

.balanceCard .balLabel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  opacity: .85;
}

.balanceCard .balAmount {
  font-size: clamp(34px, 9vw, 42px);
  font-weight: 700;
  letter-spacing: -1.4px;
  margin-top: 6px;
  line-height: 1.1;
}

.balanceCard .balSub {
  font-size: 12.5px;
  opacity: .7;
  margin-top: 10px;
}

.balanceCard .balMark {
  position: absolute;
  right: 12px;
  top: 16px;
  opacity: .16;
  pointer-events: none;
}

.sectionHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 10px;
}

.sectionHead h2 { font-size: 15px; color: var(--body); }

.textLink {
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- buttons ---------- */

.btn {
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 26px;
  background: var(--blue);
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: .1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s ease, transform .12s ease;
}

.btn:active { background: var(--blue-press); transform: scale(.985); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:active { transform: none; background: var(--blue); }

.btnGhost {
  background: #fff;
  color: var(--blue);
  border: 1.5px solid var(--line);
}

.btnGhost:active { background: #f0f3fa; }

.btnRow { display: grid; gap: 10px; margin-top: 18px; }

/* ---------- forms ---------- */

.field { display: block; }

.fieldLabel {
  display: block;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--body);
  margin-bottom: 8px;
}

input[type="email"],
input[type="text"] {
  width: 100%;
  min-height: 54px;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px; /* keeps iOS from zooming on focus */
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
}

input::placeholder { color: #9aa1ad; }

input[aria-invalid="true"] { border-color: #c0392b; }

/* ---------- entry ---------- */

.entry {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-top: 12px;
}

.entryCard {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  padding: 22px 20px;
  box-shadow: var(--shadow);
  margin-top: 20px;
}

.entryCard .btn { margin-top: 18px; }

/* ---------- amount field ---------- */

.amountField {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 0 14px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  margin-top: 8px;
}

.amountField.is-active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(31, 94, 224, .14);
}

.amountField .cur { font-size: 22px; color: #8f97a4; }

.amountField .value {
  flex: 1 1 auto;
  min-height: var(--tap);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.8px;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--ink);
  font-family: inherit;
  min-width: 0;
}

.amountField .value:focus { outline: none; }
.amountField.is-empty .value { color: #b6bcc7; }

.clearBtn {
  min-width: var(--tap);
  min-height: var(--tap);
  margin-right: -8px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.clearBtn[hidden] { display: none; }
.clearBtn:active { background: #eef1f6; }

/* ---------- option rows ---------- */

.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.opt + .opt { margin-top: 8px; }

.opt.is-selected {
  border-color: var(--blue);
  background: #eff4ff;
}

.opt input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.dot {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 2px solid #b9bfca;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  transition: border-color .12s ease;
}

.dot::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue);
  transform: scale(0);
  transition: transform .12s ease;
}

.opt input[type="radio"]:checked ~ .dot { border-color: var(--blue); }
.opt input[type="radio"]:checked ~ .dot::after { transform: scale(1); }
.opt input[type="radio"]:focus-visible ~ .dot {
  outline: 3px solid #1447b8;
  outline-offset: 3px;
}

.opt input[type="radio"]::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue);
  transform: scale(0);
  transition: transform .12s ease;
}

.opt input[type="radio"]:checked { border-color: var(--blue); }
.opt input[type="radio"]:checked::after { transform: scale(1); }

.optText { display: block; flex: 1 1 auto; min-width: 0; }

.optTitle {
  display: block;
  font-size: 15px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.optSub {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
}

.optPrice { display: block; text-align: right; flex: 0 0 auto; }
.optPrice .big { display: block; font-size: 15px; font-weight: 650; }
.optPrice .small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }

.badge {
  background: #d9f2d6;
  color: #17603a;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
}

/* ---------- bank row ---------- */

.bankRow {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.bankRow:active { background: #f5f7fb; }

.bankIcon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eef1f6;
  display: grid;
  place-items: center;
}

/* ---------- summary ---------- */

.summary { padding: 14px 16px; }

.srow {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: var(--body);
  padding: 7px 0;
}

.srow .v { font-weight: 550; }
.srow.total {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.notice {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #eceff4;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  margin-top: 12px;
}

.notice--warn {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn-ink);
}

/* ---------- transfer screen layout ---------- */

.screen {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.screenScroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 16px 20px;
}

.dock {
  flex: 0 0 auto;
  background: #fff;
  border-top: 1px solid #edeef2;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(10, 25, 43, .07);
}

/* ---------- keypad ---------- */

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.key {
  height: 56px;
  min-height: var(--tap);
  border: .5px solid rgba(0, 0, 0, .05);
  border-radius: 14px;
  background: #f2f3f7;
  color: var(--ink);
  font-family: inherit;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.key:active { background: #e3e6ee; transform: scale(.98); }
.key--icon { font-size: 20px; }

/* ---------- sheets / dialog ---------- */

.sheet {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(8, 14, 26, .42);
}

.sheet[hidden] { display: none; }

.sheetPanel {
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 12px 18px calc(16px + env(safe-area-inset-bottom));
  max-height: 90%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.grab {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: #d7dae0;
  margin: 0 auto 14px;
}

.sheetPanel h2 { font-size: 20px; }
.sheetPanel .sub { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.45; }

/* ---------- success ---------- */

.success {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: calc(20px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.successBody { margin: auto 0; }

.checkWrap { display: grid; place-items: center; margin-bottom: 18px; }

.success h1 { font-size: 25px; text-align: center; }

.success .sub {
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
  margin-top: 10px;
}

/* ---------- activity list ---------- */

.txList { list-style: none; margin: 0; padding: 0; }
.txList li + li { margin-top: 8px; }

.txRow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
}

.txIcon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eff4ff;
  color: var(--blue);
}

.txIcon--out { background: #fdf0ee; color: #a3231b; }
.txTitle { display: block; font-size: 14.5px; font-weight: 600; }
.txWhen { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.txAmt {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 14.5px;
  font-weight: 650;
  text-align: right;
  white-space: nowrap;
}
.txAmt--neg { color: #a3231b; }

/* ---------- loading ---------- */

.spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  height: 96px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, #eceef3 25%, #f5f6f9 37%, #eceef3 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---------- touch feedback ---------- */

.ripple {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(31, 94, 224, .28);
  transform: translate(-50%, -50%) scale(1);
  animation: rip .5s ease-out forwards;
  pointer-events: none;
}

@keyframes rip {
  to { transform: translate(-50%, -50%) scale(5); opacity: 0; }
}

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

/* ============================================================
   HOME — dashboard built to match the supplied Tapcheck screen
   ============================================================ */

.headerActions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: -6px;
}

/* sheets live outside the scroll container so they never scroll away */
.overlayHost {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

.overlayHost > * { pointer-events: auto; }

/* ---------- balance / greeting card ---------- */

.dashCard { padding: 18px; }

.greet {
  position: relative;
  z-index: 1;
  font-size: 14px;
  line-height: 1.3;
  color: #fff;
  opacity: .9;
}

.greet strong {
  display: block;
  margin-top: 2px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.35px;
  opacity: 1;
  color: #fff;
}

.paydayLine {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 2px 0 -4px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  opacity: .85;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.paydayLine:active { opacity: 1; }

.dashCard .balLabel { margin-top: 2px; }

.pillLink {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  margin-top: 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  touch-action: manipulation;
}

.pillLink:active { background: #eef1f6; }

/* ---------- quick actions ---------- */

.quickRow {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: 20px;
}

.quick {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-height: 82px;
  padding: 6px 2px;
  border: 0;
  border-radius: 14px;
  background: none;
  font-family: inherit;
  color: var(--body);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.quick:active { background: #eceff5; }

.quickIcon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eceff4;
  color: #28313d;
}

.quickIcon--primary { background: var(--blue); color: #fff; }

.quickLabel {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1px;
  text-align: center;
}

/* ---------- upcoming payday ---------- */

.paydayRow {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  margin-top: 18px;
  padding: 14px;
  background: #eef2fd;
  border: 1.5px solid #dde5fb;
  border-radius: var(--radius);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.paydayRow:active { background: #e5ebfb; }

.paydayIcon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--blue);
}

.paydayText { flex: 1 1 auto; min-width: 0; display: block; }

.paydayRowTitle {
  display: block;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--ink);
}

.paydayRowSub {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
}

/* ---------- earnings ---------- */

.earnCard { margin-top: 18px; padding: 16px 16px 12px; }

.earnHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.earnHead h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
}

.infoMark { display: inline-flex; opacity: .45; }

.textLink--sm { font-size: 13.5px; }

.earnSub {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

.earnRange {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
}

.chart {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.chartAxis {
  flex: 0 0 auto;
  height: 114px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 0;
  font-size: 10.5px;
  color: #8a92a0;
  text-align: right;
}

.chartPlot { position: relative; flex: 1 1 auto; min-width: 0; }

.chartPlot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 18px;
  background-image: linear-gradient(to top, #e9ecf2 1px, transparent 1px);
  background-size: 100% 50%;
  pointer-events: none;
}

.chartBars {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 132px;
}

.chartBars li {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.chartBarWrap {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

.chartBar {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 70%;
  max-width: 26px;
  min-height: 6px;
  border-radius: 5px 5px 2px 2px;
  background: #b7cdf3;
}

.chartDay {
  font-size: 10.5px;
  color: #6f7783;
  line-height: 1.2;
}

/* ---------- recent transfer rows ---------- */

.txText { display: block; flex: 1 1 auto; min-width: 0; }

.txRow--btn {
  width: 100%;
  gap: 12px;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.txRow--btn:active { background: #f5f7fb; }

.txIcon--bolt { background: #fdece2; color: #e2650f; }
.txIcon--in { background: #e6f6ea; color: #1f7a3a; }
.txAmt--pos { color: #1f7a3a; }

/* ---------- sheets: extra pieces ---------- */

.sheetBody { margin-top: 14px; }
.sheetList { display: grid; gap: 8px; }

.sheetRowText { flex: 1 1 auto; min-width: 0; display: block; }

.sheetAmount {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 2px 0 14px;
}

.sheetAmount.is-in { color: #1f7a3a; }

.helpList {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--body);
}

.helpList strong { color: var(--ink); }

.bankRow--select { padding-right: 12px; }

/* ---------- card screen ---------- */

.payCard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 196px;
  margin-top: 16px;
  padding: 18px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(140deg, #0a1a2e 0%, #16304f 100%);
  box-shadow: var(--shadow);
  transition: filter .2s ease;
}

.payCard.is-frozen { filter: grayscale(.6) brightness(.92); }

.payCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.payCardBrand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.4px;
}

.payCardChip {
  width: 34px;
  height: 26px;
  border-radius: 6px;
  background: linear-gradient(135deg, #ecdcae, #c6ad6a);
  opacity: .9;
}

.payCardNumber {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 2px;
}

.payCardBottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .8;
}

.payCardFrozen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 14, 26, .42);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.payCardFrozen > span {
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(6, 12, 22, .82);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.switchRow {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 74px;
  margin-top: 14px;
  padding: 14px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.switchRow:active { background: #f5f7fb; }

.switchText { flex: 1 1 auto; min-width: 0; display: block; }

.switch {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 32px;
  border-radius: 999px;
  background: #d5d9e2;
  transition: background-color .16s ease;
}

.switch .knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  transition: transform .16s ease;
}

.switchRow[aria-checked="true"] .switch { background: var(--blue); }
.switchRow[aria-checked="true"] .switch .knob { transform: translateX(20px); }

.spinner--dark {
  border-color: rgba(31, 94, 224, .25);
  border-top-color: var(--blue);
}

/* ---------- more screen ---------- */

.moreList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.moreRow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.moreRow:active { background: #f5f7fb; }

.moreIcon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eef1f6;
  color: #2f3b4d;
}

.moreText { flex: 1 1 auto; min-width: 0; display: block; }

/* ---------- tabs: five, with an active indicator ---------- */

.tab { position: relative; }

.tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 54%;
  max-width: 60px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--blue);
}
/* Reference dashboard: proportions measured from PAYROLL DASHBOARD.jpeg. */
:root { --blue: #1675ff; --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
body { background: #eef0f4; }
.app { max-width: 390px; background: #f9f9fb; }
.view:has(.dashboard) { padding: 0 15px 0; scrollbar-width: none; background: linear-gradient(#fff, #f9f9fb 44%); }
.dashboard .appHeader { height:54px; padding:0 0 12px; }
.dashboard .brand { gap:5px; font-size:22px; letter-spacing:-.8px; color:#0c1422; }
.dashboard .brand svg { width:26px; height:26px; }
.dashboard .headerActions { gap:9px; margin-right:-6px; }
.dashboard .iconBtn { width:29px; height:44px; }
.dashboard .iconBtn svg { width:25px; height:25px; }
.dashboard .dashCard { height:230px; border-radius:12px; padding:13px 15px 11px; background:linear-gradient(110deg,#0c1727,#1a2a3d); box-shadow:none; }
.dashboard .greet { font-size:14px; line-height:18px; opacity:1; }
.dashboard .greet strong { margin-top:0; font-size:18px; line-height:21px; font-weight:600; letter-spacing:-.5px; }
.dashboard .paydayLine { min-height:26px; margin:2px 0 12px; font-size:11.5px; gap:5px; opacity:.95; }
.dashboard .paydayLine svg { width:12px; height:12px; }
.dashboard .balLabel { margin:0; font-size:11.5px; gap:11px; opacity:1; }
.dashboard .balLabel svg { width:12px; height:12px; }
.dashboard .balAmount { margin-top:2px; font-size:29px; line-height:33px; font-weight:600; letter-spacing:-1px; }
.dashboard .balanceCents { font-size:20px; letter-spacing:0; }
.dashboard .balSub { margin-top:4px; font-size:10.5px; line-height:14px; opacity:.85; }
.dashboard .pillLink { min-height:44px; padding:10px 18px; margin-top:14px; font-size:12px; line-height:20px; font-weight:600; gap:9px; }
.dashboard .pillLink svg { width:7px; height:11px; stroke:#101522; }
.dashboard .balMark { right:0; top:7px; opacity:.24; }
.dashboard .balMark svg { width:124px; height:109px; }
.dashboard .quickRow { margin-top:12px; gap:0; }
.dashboard .quick { padding:0; gap:4px; min-height:61px; }
.dashboard .quickIcon { width:42px; height:42px; background:#f0f1f4; color:#101725; }
.dashboard .quickIcon--primary { background:#1675ff; color:white; }
.dashboard .quickIcon svg { width:23px; height:23px; }
.dashboard .quickLabel { font-size:10px; font-weight:400; letter-spacing:0; color:#12151d; }
.dashboard .paydayRow { margin-top:13px; padding:8px 14px; min-height:51px; gap:12px; background:#f3f4f8; border:1px solid #eff0f4; border-radius:12px; }
.dashboard .paydayIcon { width:35px; height:35px; background:#eaf2ff; border:1px solid #dce6f8; }
.dashboard .paydayIcon svg { width:22px; height:22px; }
.dashboard .paydayRowTitle { font-size:12px; font-weight:600; }
.dashboard .paydayRowSub { margin-top:3px; font-size:10px; }
.dashboard .paydayRow > svg { width:6px; height:10px; }
.dashboard .earnCard { margin-top:11px; height:167px; border:1px solid #edeef1; border-radius:13px; padding:12px 14px; }
.dashboard .earnHead h2 { font-size:14px; font-weight:600; gap:5px; }
.dashboard .infoMark { opacity:.65; }
.dashboard .infoMark svg { width:12px; height:12px; }
.dashboard .textLink--sm { font-size:10.5px; font-weight:400; min-height:20px; padding:0; }
.dashboard .textLink svg { stroke:#176eda; width:6px; height:10px; }
.dashboard .earnSub { margin-top:5px; font-size:10px; line-height:14px; white-space:nowrap; letter-spacing:-.15px; }
.dashboard .earnRange { margin-top:13px; font-size:10px; }
.dashboard .chart { margin-top:14px; gap:8px; }
.dashboard .chartAxis { height:48px; font-size:9px; color:#70717b; transform:translateY(-5px); }
.dashboard .chartBars { height:60px; gap:7px; }
.dashboard .chartBars li { gap:5px; }
.dashboard .chartPlot::before { bottom:15px; background-size:100% 50%; border-top:1px solid #f2f2f5; }
.dashboard .chartBar { max-width:24px; width:80%; border-radius:2px 2px 0 0; background:linear-gradient(90deg,#b8d5fc,#aecdf8); }
.dashboard .chartDay { font-size:9px; line-height:10px; }
.dashboard .sectionHead { margin:12px 0 7px; align-items:center; }
.dashboard .sectionHead h2 { font-size:14px; font-weight:600; color:#101520; }
.dashboard .txList { border:1px solid #edeef1; border-radius:12px 12px 0 0; overflow:hidden; background:white; }
.dashboard .txList li + li { margin-top:0; border-top:1px solid #f0f0f3; }
.dashboard .txRow { min-height:44px; padding:7px 12px; gap:12px; border:0; border-radius:0; }
.dashboard .txIcon { width:29px; height:29px; }
.dashboard .txIcon svg { width:20px; height:20px; }
.dashboard .txIcon--bolt { background:#fff0e8; color:#ef7627; }
.dashboard .txIcon--in { background:#e8f5f1; color:#329b7a; }
.dashboard .txTitle { font-size:11px; font-weight:400; }
.dashboard .txWhen { font-size:9px; margin-top:3px; color:#777984; }
.dashboard .txAmt { font-size:11.5px; font-weight:400; }
.dashboard .txAmt--neg { color:#11151e; }
.dashboard .txAmt--pos { color:#20845e; }
.dashboard .txRow > svg, .txChevronSpace { width:6px; height:10px; flex-shrink:0; }
.app:has(.dashboard) .tabs { min-height:65px; padding-bottom:17px; position:relative; }
.app:has(.dashboard) .tabs::after { content:""; position:absolute; bottom:7px; width:128px; height:4px; background:#0b0f19; border-radius:4px; left:50%; transform:translateX(-50%); }
.app:has(.dashboard) .tab { min-height:47px; font-size:8px; font-weight:400; gap:3px; }
.app:has(.dashboard) .tab svg { width:22px; height:22px; }
.app:has(.dashboard) .tab[aria-current]::before { width:100%; max-width:none; height:2px; }
.app:has(.dashboard) .tab[aria-current] svg { fill:currentColor; }
@media(min-width:560px) { .app { height:min(calc(100dvh - 32px),844px); border-radius:20px; box-shadow:0 16px 60px #16233b24; } body { padding:16px 0; } }
@media(max-width:374px) { .dashboard .earnSub { font-size:9px; } .dashboard .paydayRowSub { font-size:9px; } }
.dashboard .iconBtn { padding:0; }
.dashboard .iconBtn svg { flex-shrink:0; }
.dashboard .paydayIcon { width:33px; height:33px; }
.dashboard .greet { font-weight:400; }
/* Transfer reference, with native browser status chrome omitted. */
.app:has(.transferScreen) { background:#fff; }
.transferScreen .screenScroll { padding:0 16px 12px; scrollbar-width:none; }
.transferScreen .appHeader { height:52px; padding:0; position:relative; }
.transferScreen .appHeader h1 { position:absolute; left:50%; transform:translateX(-50%); font-size:14px; font-weight:600; }
.transferScreen .backBtn { font-size:14px; gap:9px; padding:0; margin:0; font-weight:400; }
.transferScreen .backBtn svg { width:10px; height:18px; }
.transferScreen .appHeader .iconBtn { padding:0; }
.transferScreen .appHeader .iconBtn svg { width:25px; height:25px; }
.transferScreen .transferBalance { height:109px; padding:15px 14px; border-radius:11px; background:linear-gradient(110deg,#0b182a,#102137); box-shadow:none; }
.transferScreen .balLabel { font-size:13px; gap:10px; opacity:.9; position:relative; z-index:1; }
.transferScreen .balAmount { font-size:36px; line-height:40px; margin-top:5px; font-weight:600; letter-spacing:-1px; position:relative; z-index:1; }
.transferScreen .balSub { margin-top:6px; font-size:11px; opacity:.8; position:relative; z-index:1; }
.transferMark { position:absolute; right:0; top:7px; width:115px; height:96px; fill:#497daf; opacity:.25; }
.transferScreen .sectionHead { margin:10px 2px 5px; align-items:center; min-height:21px; }
.transferScreen .sectionHead h2 { font-size:14px; color:#11151e; font-weight:600; display:flex; align-items:center; gap:6px; }
.transferScreen .sectionHead h2 span { display:inline-flex; color:#747984; }
.transferScreen .sectionHead h2 svg { width:12px; height:12px; }
.transferScreen .textLink { min-height:25px; font-size:11px; font-weight:400; padding:0 2px; }
.transferScreen .amountField { min-height:50px; height:50px; padding:0 13px; gap:12px; margin-top:0; border:1px solid #dedfe4; border-radius:9px; }
.transferScreen .amountField .cur { font-size:25px; font-weight:600; color:#818592; }
.transferScreen .amountField .value { font-size:26px; line-height:32px; letter-spacing:-.5px; }
.transferScreen .clearBtn { margin-right:-10px; }
.transferScreen .clearBtn svg { width:18px; height:18px; }
.transferScreen #amountHelp { display:flex; align-items:center; gap:3px; font-size:9.5px; color:#626570; margin-top:6px !important; }
.transferScreen #amountHelp > span:last-child { display:inline-flex; margin-left:5px; }
.transferScreen #amountHelp svg { width:12px; height:12px; }
.transferScreen .speedHead { margin-top:21px; margin-bottom:6px; }
.transferScreen .opt { min-height:56px; padding:10px 12px 10px 14px; border:1px solid #e5e5ea; border-radius:9px; gap:21px; }
.transferScreen .opt + .opt { margin-top:8px; }
.transferScreen .opt.is-selected { border-color:#347af4; background:#eff6ff; }
.transferScreen .dot { width:18px; height:18px; border-width:1.5px; border-color:#7d828d; }
.transferScreen .dot::after { width:10px; height:10px; }
.transferScreen .optTitle { font-size:13px; line-height:17px; font-weight:600; gap:10px; }
.transferScreen .optSub { font-size:10.5px; margin-top:3px; line-height:14px; display:flex; align-items:center; gap:6px; }
.transferScreen .optSub svg { width:12px; height:12px; }
.transferScreen .badge { font-size:9px; line-height:12px; font-weight:400; border-radius:9px; padding:1px 9px; background:#dff3de; }
.transferScreen .optPrice .big { font-size:13px; font-weight:600; }
.transferScreen .optPrice .small { font-size:10px; margin-top:4px; color:#777c87; }
.transferScreen #optStandard + .sectionHead { margin-top:17px; margin-bottom:6px; }
.transferScreen #bankRow { min-height:51px; padding:8px 11px; gap:12px; border:1px solid #e9e9ed; border-radius:9px; }
.transferScreen .bankIcon { width:34px; height:34px; background:#f1f3f6; }
.transferScreen .bankIcon svg { width:23px; height:23px; }
.transferScreen #bankRow > svg { width:7px; height:11px; }
.transferScreen .transferSummary { margin-top:9px; padding:8px 11px; background:#f7f8fb; border:1px solid #e9e9ed; border-radius:9px; }
.transferScreen .transferSummary .srow { font-size:11px; padding:5px 0; color:#707581; }
.transferScreen .transferSummary .v { font-weight:500; color:#171b23; }
.transferScreen .transferSummary .total { margin-top:4px; padding-top:8px; color:#11151c; font-weight:600; }
.transferScreen .notice { background:#f1f6ff; border:1px solid #e7edf8; padding:10px 12px; margin-top:8px; gap:11px; border-radius:9px; font-size:10px; line-height:14px; color:#565d68; }
.transferScreen .notice > span:first-child svg { width:19px; height:19px; }
.transferScreen .dock { border:0; box-shadow:none; background:white; padding:10px 16px 22px; }
.transferScreen #continueBtn { min-height:36px; padding:8px 16px; border-radius:999px; background:#1272fa; font-size:12px; font-weight:500; }
.app:has(.transferScreen) .tabs { min-height:65px; padding-bottom:17px; position:relative; }
.app:has(.transferScreen) .tabs::after { content:""; position:absolute; bottom:7px; width:128px; height:4px; background:#0b0f19; border-radius:4px; left:50%; transform:translateX(-50%); }
.app:has(.transferScreen) .tab { min-height:47px; font-size:8px; font-weight:400; gap:3px; }
.app:has(.transferScreen) .tab svg { width:22px; height:22px; }
.app:has(.transferScreen) .tab[aria-current]::before { display:none; }
.transferScreen .transferBalanceCents { font-size:25px; letter-spacing:0; }
/* Keep Continue directly below the transfer timing notice. */
.transferScreen .screenScroll { flex:0 1 auto; padding-bottom:0; }
.transferScreen .dock { padding-top:10px; }
/* Fill the transfer viewport and keep its action above navigation. */
.transferScreen .screenScroll { flex:1 1 auto; display:flex; flex-direction:column; padding-bottom:0; }
.transferScreen .screenScroll > * { flex-shrink:0; }
.transferScreen .screenScroll > .notice { margin-top:auto; }
.transferScreen .transferSummary { margin-bottom:8px; }
.transferScreen .dock { padding:10px 16px 12px; }
.transferScreen .transferBalance { height:120px; }
.transferScreen .amountField { height:56px; min-height:56px; }
.transferScreen .opt { min-height:60px; }
.transferScreen .speedHead { margin-top:25px; }
.transferScreen #optStandard + .sectionHead { margin-top:22px; }
.transferScreen .transferSummary .srow { padding-top:6px; padding-bottom:6px; }
.transferScreen .dock { padding-bottom:0; }
/* Card hub */
.view:has(.cardPage) { padding:0 18px 18px; scrollbar-width:none; background:#f7f9fc; }
.cardPageHeader { display:flex; align-items:center; justify-content:space-between; padding:23px 0 18px; }
.cardPage .eyebrow { font-size:8px; font-weight:700; letter-spacing:1.3px; color:#8290a5; margin-bottom:7px; }
.cardPage h1 { font-size:25px; letter-spacing:-1px; color:#142238; }
.secureBadge { display:flex; align-items:center; gap:4px; font-size:9px; color:#398271; background:#e8f5ef; padding:6px 8px; border-radius:20px; }
.secureBadge svg { width:13px; height:13px; }
.premiumCard { position:relative; isolation:isolate; overflow:hidden; min-height:197px; border-radius:19px; padding:20px; background:linear-gradient(120deg,#112943,#1f4871 66%,#316b97); color:#fff; box-shadow:0 15px 28px #1b406b26; transition:filter .2s; }
.premiumCard.is-paused { filter:grayscale(.9); }
.cardOrbit { position:absolute; z-index:-1; border:1px solid #b0d6fb25; width:285px; height:285px; border-radius:50%; right:-100px; top:-110px; box-shadow:0 0 0 28px #b0d6fb08,0 0 0 58px #b0d6fb07,0 0 0 89px #b0d6fb05; }
.cardOrbitTwo { width:200px; height:200px; right:100px; top:95px; opacity:.5; }
.premiumTop { display:flex; justify-content:space-between; align-items:center; }
.premiumBrand { display:flex; align-items:center; gap:5px; font-size:19px; letter-spacing:-.6px; font-weight:600; }
.premiumBrand svg { width:24px; height:24px; }
.cardState { font-size:9px; background:#ffffff16; border:1px solid #ffffff25; padding:4px 8px; border-radius:20px; color:#d5f7ec; }
.chipRow { display:flex; align-items:center; gap:10px; margin-top:19px; }
.premiumChip { width:31px; height:24px; border:1px solid #d0c498; border-radius:5px; background:linear-gradient(90deg,transparent 45%,#9c986b 47%,transparent 50%),linear-gradient(0deg,transparent 44%,#9c986b 47%,transparent 51%),linear-gradient(130deg,#f2e6b8,#c4b884); }
.contactlessSymbol { color:#e8edf5b0; font-size:14px; letter-spacing:-3px; transform:rotate(-10deg); }
.premiumNumber { font-size:19px; letter-spacing:2px; font-weight:500; margin-top:15px; white-space:nowrap; }
.premiumBottom { margin-top:16px; display:flex; align-items:end; justify-content:space-between; }
.cardMicro { display:block; font-size:6px; letter-spacing:1.4px; color:#b0c5de; margin-bottom:3px; }
.cardHolder { font-size:10px; letter-spacing:.7px; text-transform:uppercase; }
.debitWord { font-size:20px; font-style:italic; font-weight:600; text-align:right; line-height:18px; }
.debitWord span { display:block; font-size:5px; font-style:normal; letter-spacing:1px; font-weight:400; }
.cardBalance { display:flex; align-items:center; justify-content:space-between; padding:20px 2px 17px; }
.cardBalance > div > span { display:block; font-size:10px; color:#7e8898; margin-bottom:5px; }
.cardBalance strong { font-size:25px; letter-spacing:-.7px; color:#152a43; }
.cardBalance a { display:flex; align-items:center; gap:6px; font-size:10px; color:#2470d8; text-decoration:none; min-height:44px; }
.cardBalance a svg { width:6px; height:10px; stroke:currentColor; }
.cardActions { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:18px; }
.cardActions button { border:1px solid #e8edf4; border-radius:12px; background:white; color:#314761; min-height:76px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; font:10px var(--font); cursor:pointer; }
.cardActions button > span { display:grid; place-items:center; width:30px; height:28px; color:#3978c5; }
.cardActions svg { width:22px; height:22px; }
.cardActions b { font-weight:400; }
.cardActions button:hover { background:#edf5ff; }
.cardActions button[aria-checked=true] { background:#e9f1ff; border-color:#9bbdec; }
.cardFreezeNote { font-size:10px; line-height:15px; border-radius:8px; padding:9px; margin:-7px 0 12px; background:#fff4df; color:#826623; }
.spendingPanel,.securityPanel { border:1px solid #e8edf4; background:white; border-radius:14px; padding:15px; margin-bottom:13px; }
.panelTitle { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cardPage h2 { font-size:13px; font-weight:600; letter-spacing:-.2px; color:#24344b; }
.panelTitle > span { font-size:8px; color:#8c95a3; }
.panelTitle > svg { width:16px; height:16px; color:#8ca1ba; }
.spendingNumbers { display:flex; align-items:baseline; gap:7px; margin-top:13px; }
.spendingNumbers strong { font-size:22px; color:#213c5e; letter-spacing:-.6px; }
.spendingNumbers > span { font-size:9px; color:#8c95a3; }
.spendingNumbers b { font-weight:500; }
.spendTrack { height:5px; border-radius:8px; background:#edf2f8; overflow:hidden; margin-top:11px; }
.spendTrack span { display:block; height:100%; background:linear-gradient(90deg,#3a8df7,#79b7fd); border-radius:8px; transition:width .25s; }
.spendingPanel p { font-size:8px; color:#8b96a6; margin-top:8px; }
.securityPanel { padding-bottom:4px; }
.cardSetting { display:flex; align-items:center; width:100%; gap:10px; padding:12px 0; background:none; border:0; text-align:left; font-family:inherit; cursor:pointer; }
.cardSetting + .cardSetting { border-top:1px solid #f0f3f7; }
.settingIcon { width:30px; height:32px; border-radius:8px; background:#f2f6fb; display:grid; place-items:center; color:#587aa3; }
.settingIcon svg { width:17px; height:17px; }
.cardSetting strong { display:block; font-size:11px; font-weight:500; color:#35465e; }
.cardSetting small { display:block; font-size:8px; color:#8e98a7; margin-top:4px; }
.miniSwitch { margin-left:auto; width:30px; height:18px; border-radius:20px; background:#c9d1dd; padding:2px; flex-shrink:0; }
.miniSwitch::after { content:""; display:block; width:14px; height:14px; border-radius:50%; background:white; transition:transform .2s; box-shadow:0 1px 3px #0002; }
[aria-checked=true] > .miniSwitch { background:#297ef4; }
[aria-checked=true] > .miniSwitch::after { transform:translateX(12px); }
.cardActivity { padding:3px 0 0; }
.cardActivity .panelTitle a { display:flex; align-items:center; gap:6px; font-size:9px; color:#2c77d9; text-decoration:none; min-height:36px; }
.cardActivity .panelTitle a svg { width:5px; height:9px; }
.cardActivity ul { margin:0; padding:0; list-style:none; }
.cardActivity li { display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid #e9eef5; }
.purchaseIcon { background:#eaf0f8; border-radius:10px; width:33px; height:33px; display:grid; place-items:center; color:#587ca5; }
.purchaseIcon svg { width:18px; height:18px; }
.purchaseName { flex:1; }
.purchaseName strong { display:block; font-size:11px; font-weight:500; color:#2b3e56; }
.purchaseName small { display:block; font-size:8px; margin-top:4px; color:#8c97a7; }
.cardActivity li > strong { font-size:11px; font-weight:500; color:#2d4058; }
.cardDemoNote { font-size:8px; color:#909aaa; text-align:center; padding-top:16px; }
.cardDialog { border:1px solid #e1e8f1; border-radius:20px; padding:22px; width:calc(100% - 40px); max-width:350px; box-shadow:0 20px 80px #13233c30; color:#253c59; }
.cardDialog::backdrop { background:#0b1d36aa; backdrop-filter:blur(4px); }
.dialogHeading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.dialogHeading h2 { font-size:18px; }
.dialogHeading button { background:#f1f4f8; border:0; border-radius:50%; width:32px; height:32px; font-size:23px; color:#63758c; cursor:pointer; }
.dialogIntro,.dialogFootnote { color:#79899c; font-size:12px; line-height:1.6; margin:15px 0; }
.detailLine { display:flex; justify-content:space-between; gap:10px; padding:14px 0; border-bottom:1px solid #edf1f6; font-size:12px; }
.detailLine span { color:#8793a4; }
.detailLine strong { font-weight:500; }
.limitLabel { font-size:12px; display:block; margin-bottom:8px; }
.cardDialog select { width:100%; border:1px solid #d7e1ee; border-radius:9px; padding:12px; font:14px var(--font); background:white; color:#253c59; }
.cardDialog .saveLimit { margin-top:20px; border-radius:10px; font-size:13px; }
.app:has(.cardPage) .tabs { min-height:65px; padding-bottom:17px; position:relative; }
.app:has(.cardPage) .tabs::after { content:""; position:absolute; bottom:7px; width:128px; height:4px; background:#0b0f19; border-radius:4px; left:50%; transform:translateX(-50%); }
.app:has(.cardPage) .tab { min-height:47px; font-size:8px; font-weight:400; }
.app:has(.cardPage) .tab[aria-current]::before { width:100%; max-width:none; height:2px; }
@media(prefers-reduced-motion:reduce) { .premiumCard,.spendTrack span,.miniSwitch::after { transition:none; } }
.addCardLink { display:flex; align-items:center; justify-content:center; gap:7px; min-height:42px; margin-top:15px; border:1px dashed #b8cde6; background:#eef5ff; color:#2768b9; border-radius:11px; text-decoration:none; font-size:12px; font-weight:500; }
.addCardLink > span { font-size:21px; font-weight:300; }
.linkedCards { margin-top:16px; border:1px solid #e2eaf4; border-radius:12px; padding:13px; background:white; }
.linkedCards ul { list-style:none; padding:0; margin:7px 0 0; }
.linkedCards li { display:flex; flex-direction:column; gap:5px; padding:9px 0; font-size:11px; }
.linkedCards li + li { border-top:1px solid #eef1f6; }
.linkedCards li strong { font-weight:500; color:#29405f; }
.linkedCards li span { font-size:10px; color:#8291a6; }
.view:has(.addCardPage) { background:#f8fafd; padding:0 23px 24px; }
.addCardHeader { height:68px; display:flex; align-items:center; justify-content:space-between; }
.addCardHeader a { display:flex; align-items:center; gap:8px; color:#3976c8; font-size:12px; text-decoration:none; min-height:44px; }
.addCardHeader a svg { width:8px; height:14px; }
.addCardHeader > span { font-size:8px; color:#8a9ab0; letter-spacing:1.5px; }
.addCardArt { width:68px; height:68px; border-radius:20px; margin:16px 0 23px; display:grid; place-items:center; background:linear-gradient(140deg,#e0edff,#edf5ff); color:#3075d1; position:relative; }
.addCardArt > svg { width:35px; height:35px; }
.addCardArt > span { position:absolute; right:-5px; bottom:0; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#307df3; color:white; border:3px solid #f8fafd; font-size:19px; }
.addCardPage h1 { font-size:28px; letter-spacing:-1px; color:#152c48; }
.addCardIntro { font-size:12px; line-height:20px; color:#8390a3; margin-top:8px; }
#addCardForm { margin-top:30px; }
.cardFormField { margin-bottom:20px; min-width:0; }
.cardFormField label { display:block; font-size:12px; font-weight:500; color:#314761; margin-bottom:9px; }
.cardFormField input { width:100%; min-height:50px; border:1px solid #dfe6f0; border-radius:10px; padding:12px 14px; background:white; font:14px var(--font); color:#233e5b; outline-offset:2px; }
.cardFormField input::placeholder { color:#abb6c7; font-size:13px; }
.cardFormField input[aria-invalid=true] { border-color:#c0392b; }
.cardInputWrap { position:relative; }
.cardInputWrap input { padding-right:44px; }
.cardInputWrap svg { position:absolute; right:14px; top:15px; width:21px; height:21px; color:#91a7c2; pointer-events:none; }
.cardFormColumns { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cardFieldError { color:#b73939; font-size:10px; margin-top:6px; line-height:15px; }
.cardFormNote { color:#8996a9; font-size:10px; line-height:17px; margin:4px 0 23px; }
.cardProceed { width:100%; display:flex; justify-content:center; gap:10px; min-height:49px; border-radius:12px; background:#1b75ee; font-size:14px; font-weight:500; box-shadow:0 7px 15px #2679e625; }
.cardProceed svg { stroke:white; width:7px; height:12px; }
.addCardFooter { text-align:center; font-size:9px; color:#a0acbd; margin-top:22px; }
.cardFormField select { width:100%; min-height:50px; border:1px solid #dfe6f0; border-radius:10px; padding:12px; background:white; font:14px var(--font); color:#233e5b; }
.cardFormField select[aria-invalid=true] { border-color:#c0392b; }
.bankFormActions { display:grid; grid-template-columns:1fr 1.65fr; gap:12px; }
.bankCancel { min-height:49px; border:1px solid #dbe4f0; border-radius:12px; background:#fff; color:#637892; font:14px var(--font); cursor:pointer; }
.addBankPage .addCardArt { margin-top:7px; margin-bottom:17px; }
.addBankPage #addBankForm { margin-top:24px; }
.addBankPage .cardFormField { margin-bottom:17px; }
/* Consistent selectors and menus across forms and dialogs. */
.appSelect { position:relative; width:100%; }
.appSelectNative { position:absolute !important; width:1px !important; height:1px !important; min-height:0 !important; padding:0 !important; margin:0 !important; opacity:0; pointer-events:none; clip-path:inset(50%); }
.appSelectTrigger { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:50px; padding:12px 14px; border:1px solid #dce5f1; border-radius:11px; background:linear-gradient(180deg,#fff,#fcfdff); color:#29425f; font:14px var(--font); text-align:left; cursor:pointer; box-shadow:0 2px 3px #233e5b03; transition:border-color .15s,box-shadow .15s; }
.appSelectTrigger:hover { border-color:#b3cbed; background:#fbfdff; }
.appSelectTrigger[aria-expanded=true] { border-color:#4b91ee; box-shadow:0 0 0 3px #2f7def12; }
.appSelectTrigger:focus-visible { outline:2px solid #3a84ed; outline-offset:3px; }
.appSelectTrigger.is-placeholder { color:#97a6bc; }
.appSelectTrigger[aria-invalid=true] { border-color:#c0392b; }
.appSelectTrigger:disabled { opacity:.55; cursor:default; }
.appSelectArrow { width:7px; height:7px; flex-shrink:0; border-right:1.7px solid #7291b7; border-bottom:1.7px solid #7291b7; transform:rotate(45deg); margin:-4px 3px 0 0; transition:transform .15s; }
[aria-expanded=true] > .appSelectArrow { transform:rotate(225deg); margin-top:3px; }
.appSelectMenu { position:fixed; inset:auto; margin:0; padding:6px; border:1px solid #dfe8f5; border-radius:13px; background:#fff; box-shadow:0 14px 40px #17375924,0 3px 8px #1737590b; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#c9d9ec transparent; box-sizing:border-box; }
.appSelectMenu::backdrop { background:transparent; }
.appSelectOption { display:flex; align-items:center; min-height:43px; padding:10px 30px 10px 11px; border-radius:8px; color:#405975; font:13px var(--font); cursor:pointer; position:relative; }
.appSelectOption:hover,.appSelectOption.is-highlighted { background:#f0f6ff; color:#266ac4; }
.appSelectOption[aria-selected=true] { color:#226fd6; background:#eaf3ff; font-weight:600; }
.appSelectOption[aria-selected=true]::after { content:""; position:absolute; right:14px; width:5px; height:10px; border-right:2px solid #307be0; border-bottom:2px solid #307be0; transform:rotate(45deg); margin-top:-3px; }
.appSelectOption[aria-disabled=true] { opacity:.5; cursor:default; }
@media(prefers-reduced-motion:reduce) { .appSelectTrigger,.appSelectArrow { transition:none; } }
.activityPage .txRow--btn { gap:10px; }
.activityPage .txRow--btn > svg { width:6px; height:11px; flex-shrink:0; }
.activityPage .txRow--btn:hover { border-color:#a9c7f0; background:#f9fbff; }
.activityDetailIcon { display:grid; place-items:center; margin:24px auto 12px; width:48px; height:48px; border-radius:16px; background:#edf4ff; color:#4381d1; }
.activityDetailIcon svg { width:25px; height:25px; }
.activityDetailIcon.txIcon--bolt { background:#fff0e8; color:#ec7d38; }
.activityDetailIcon.txIcon--in { background:#e7f6ee; color:#338969; }
.activityDetailAmount { text-align:center; font-size:30px; letter-spacing:-.7px; font-weight:600; color:#213d5e; }
.activityDetailAmount.is-incoming { color:#27825e; }
.activityDetailName { text-align:center; font-size:13px; color:#8190a3; margin:7px 0 20px; overflow-wrap:anywhere; }
.activityDialog .detailLine strong { text-align:right; overflow-wrap:anywhere; max-width:65%; }
/* Approval states and administrator workspace. */
.approvalBadge { display:inline-flex; width:fit-content; align-items:center; border-radius:20px; padding:4px 8px; font-size:9px; font-weight:500; white-space:nowrap; }
.approvalBadge.pending { background:#fff4db; color:#946b1a; }
.approvalBadge.approved { background:#e5f6ed; color:#2c8060; }
.approvalBadge.rejected { background:#ffeded; color:#b04d4d; }
.bankRow:disabled { cursor:default; opacity:.7; }
.opt:has(input:disabled) { opacity:.6; cursor:default; }
.linkedCards li small { color:#9c6060; font-size:10px; }
.adminEntryLink { display:block; margin:25px auto 15px; font-size:12px; color:#7c91ac; text-align:center; text-decoration:none; min-height:44px; padding:12px; }
.adminLogin form { margin-top:28px; }
.view:has(.adminLogin) { background:#f8fafd; }
.app:has(.adminPage) { max-width:1080px; background:#f5f7fb; }
.view:has(.adminPage) { padding:25px; scrollbar-width:thin; }
.adminHeader { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:24px; }
.adminHeader h1 { font-size:24px; color:#193354; letter-spacing:-.7px; margin-top:7px; }
.adminHeader .eyebrow { font-size:8px; letter-spacing:1.4px; color:#7e94ae; }
.adminQuiet { border:1px solid #dae3ef; border-radius:9px; background:white; min-height:36px; padding:7px 12px; color:#587394; font:11px var(--font); cursor:pointer; }
.adminStats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.adminStats > div { padding:16px; border:1px solid #e4eaf3; border-radius:13px; background:white; }
.adminStats span { display:block; font-size:10px; color:#7d8fa5; }
.adminStats strong { display:block; font-size:26px; color:#25496f; margin-top:8px; }
.adminToolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.adminPage h2 { font-size:15px; color:#314d6e; font-weight:600; }
.adminAccountPicker { margin-bottom:18px; }
.adminAccountPicker label { display:block; font-size:11px; color:#69809d; margin-bottom:8px; }
.adminColumns { display:grid; grid-template-columns:.9fr 1.1fr; gap:18px; align-items:start; }
.adminPanel { background:white; border:1px solid #e2e9f3; border-radius:14px; padding:20px; min-width:0; }
.adminBalance { display:block; font-size:30px; color:#203e62; letter-spacing:-.8px; margin:17px 0 22px; }
.adminPage textarea { width:100%; min-height:80px; padding:12px; border:1px solid #dfe6f0; border-radius:10px; resize:vertical; font:12px var(--font); }
.adminPage .btn { font-size:12px; min-height:43px; border-radius:10px; margin-top:12px; }
.adminHint { font-size:11px; color:#8594a7; line-height:1.6; margin:10px 0 16px; }
.adminEmpty { background:#f7f9fc; border:1px dashed #e2e8f1; border-radius:9px; padding:16px; font-size:11px; color:#8a9bb0; line-height:1.6; }
.approvalRequest { padding:15px; border:1px solid #e5ebf4; border-radius:11px; margin-top:12px; }
.requestHeading { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:13px; }
.requestHeading > span { font-size:10px; color:#8195ae; }
.approvalRequest h3 { font-size:13px; color:#334f71; overflow-wrap:anywhere; }
.approvalRequest p { margin-top:5px; font-size:10px; line-height:1.6; color:#7c8da3; overflow-wrap:anywhere; }
.approvalRequest label { display:block; font-size:10px; margin:14px 0 7px; color:#587393; }
.approvalRequest small { font-size:9px; color:#95a3b6; }
.approvalRequest .reviewReason { font:11px var(--font); min-height:39px; padding:9px; border-radius:7px; width:100%; }
.approvalActions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; }
.approvalActions button { min-height:37px; border:0; border-radius:8px; background:#2277ed; color:white; font:11px var(--font); cursor:pointer; }
.approvalActions button[data-decision=rejected] { background:#fff0ef; color:#b16363; }
.approvalActions button:disabled { opacity:.5; cursor:wait; }
.adminMessage { border:1px solid #cce7db; background:#eaf8f0; border-radius:10px; padding:12px; color:#368264; font-size:12px; margin-bottom:18px; }
.adminMessage.is-error { background:#fff1f1; border-color:#efd0d0; color:#ad5f5f; }
.adminAudit { margin-top:18px; }
.adminAudit ul { list-style:none; padding:0; margin:0; }
.adminAudit li { padding:14px 0; border-bottom:1px solid #edf1f7; font-size:11px; color:#8a9ab0; }
.adminAudit li > div { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.adminAudit strong { color:#4a6587; font-weight:500; }
.adminAudit time { font-size:9px; color:#9caabd; }
.adminAudit li p { margin-top:6px; color:#7187a4; overflow-wrap:anywhere; }
@media(max-width:650px) { .adminColumns { grid-template-columns:1fr; } .view:has(.adminPage) { padding:18px; } .adminHeader h1 { font-size:20px; } .adminPanel { padding:16px; } .adminStats { gap:8px; } .adminStats > div { padding:12px; } .adminStats span { font-size:9px; } }

.approvalRequest .reviewReason { border:1px solid #dfe6f0; background:#fbfcff; }
.bankReviewNote { display:block; font-size:10px; line-height:15px; margin-top:5px; color:#a16666; overflow-wrap:anywhere; }
/* Authentication layouts measured from the supplied screenshots. */
.app:has(.referenceAuth) { max-width:472px; border-radius:0; box-shadow:none; background:#fff; }
.view:has(.referenceAuth) { padding:0; background:white; scrollbar-width:thin; }
.referenceAuth { position:relative; container-type:inline-size; min-height:100%; color:#233245; background:#fff; }
.referenceHeader { display:flex; align-items:center; justify-content:space-between; padding:12.3cqw 12.3cqw 0; }
.referenceBrand { display:inline-flex; align-items:center; gap:8px; font-size:5.5cqw; font-weight:750; letter-spacing:-.8px; color:#1d2d42; }
.referenceBrand svg { display:block; width:8.5cqw; height:7.2cqw; }
.referenceHeader > a { font-size:3.7cqw; color:#5c6470; text-decoration:none; }
.referenceContent { padding:0 12.3cqw; }
.referenceAuth h1 { font-size:6.6cqw; line-height:1.3; letter-spacing:-.6px; font-weight:600; margin:12.4cqw 0 0; }
.referenceSubtitle { color:#8c969c; font-size:3.4cqw; line-height:1.5; margin-top:2.9cqw; }
.referenceAuth form { margin-top:6.2cqw; }
.referenceField { position:relative; margin-bottom:6.3cqw; }
.referenceField input { display:block; width:100%; min-height:11.7cqw; padding:2.7cqw 10cqw 2.7cqw 3cqw; border:1px solid #e6e7e8; border-radius:1.6cqw; background:white; color:#253346; font:500 3.7cqw var(--font); box-shadow:0 0 2px #22314205; }
.referenceField input::placeholder { color:#243043; opacity:1; font-size:3.7cqw; font-weight:500; }
.referenceField > svg,.referenceField > button { position:absolute; right:4cqw; top:3.1cqw; width:6.2cqw; height:5cqw; padding:0; border:0; background:none; color:#abb1b6; }
.referenceField > button { cursor:pointer; display:grid; place-items:center; }
.referenceField > button svg { width:100%; height:100%; }
.referenceField input:focus { border-color:#4dbed2; outline:2px solid #e1f7fb; outline-offset:1px; }
.referenceField input[aria-invalid=true] { border-color:#c97c7c; }
.referenceRecovery { font-size:3.45cqw; color:#8e989e; margin-top:1cqw; line-height:1.6; white-space:nowrap; }
.referenceRecovery button { background:none; padding:0; border:0; color:#233245; font:inherit; cursor:pointer; }
.referenceSubmit { width:100%; min-height:11.3cqw; margin-top:7.3cqw; padding:2cqw 4cqw; border:1px solid #56c4d7; border-radius:1.7cqw; background:linear-gradient(25deg,#5bcbbf,#2bb2ed); color:#fff; font:500 3.45cqw var(--font); cursor:pointer; }
.referenceSubmit:hover { filter:brightness(.98); }
.referenceSubmit:disabled { opacity:.6; cursor:wait; }
.referenceLinks { margin-top:7.5cqw; color:#8d989d; font-size:3.9cqw; line-height:1.65; }
.referenceLinks a,.referenceLinks button { display:block; width:fit-content; color:#6fc6b7; margin-top:3.8cqw; padding:0; border:0; background:none; font:500 4cqw var(--font); line-height:1.5; text-decoration:none; cursor:pointer; }
.referenceLinks button { margin-top:4.8cqw; }
.referenceIdentity { margin-top:6cqw; padding-bottom:4cqw; font-size:2cqw; line-height:1.6; color:#9aa6ad; }
.signinReference .referenceSheet { min-height:159cqw; }
.loginArtwork { display:block; width:100%; height:auto; }
.referenceChat { position:fixed; right:max(16px,calc((100vw - 472px)/2 + 16px)); bottom:24px; z-index:15; border:0; border-radius:6.5cqw; width:16.4cqw; max-width:80px; height:16.4cqw; max-height:80px; display:grid; place-items:center; background:#09beb9; color:#164c52; box-shadow:0 10px 24px #2a8b8614; cursor:pointer; }
.referenceChat > span { width:47%; height:25%; border-radius:20px; background:#174e52; position:relative; }
.referenceChat > span::after { content:''; position:absolute; right:2px; bottom:-5px; border-top:7px solid #174e52; border-left:7px solid transparent; }
.referenceAuth .authError { color:#aa5353; background:#fff3f3; padding:10px; font-size:12px; line-height:1.5; margin-top:16px; border-radius:6px; }
.app:has(.signupReference) { max-width:590px; background:#17106b; }
.signupReference { padding:0 4.25cqw; background:linear-gradient(125deg,#090e4c,#3316a3); }
.signupReference .referenceSheet { background:#fff; min-height:100dvh; padding-bottom:8cqw; }
.signupReference .referenceHeader { padding:14.7cqw 6cqw 0; }
.signupReference .referenceBrand { font-size:4cqw; gap:6px; }
.signupReference .referenceBrand svg { width:6.8cqw; height:5.7cqw; }
.signupReference .referenceContent { padding:0 6cqw; }
.signupReference h1 { margin-top:5cqw; font-size:5.7cqw; font-weight:650; line-height:1.3; letter-spacing:-.5px; }
.signupReference .referenceSubtitle { margin-top:4.5cqw; color:#5d6472; font-size:3.8cqw; line-height:1.5; max-width:74cqw; }
.signupReference form { margin-top:4.5cqw; }
.signupReference .referenceField { margin-bottom:4cqw; }
.signupReference .referenceField input { min-height:11.4cqw; padding:2.5cqw 4cqw; border:1px solid #727b85; border-radius:1cqw; font:3.7cqw Georgia,'Times New Roman',serif; letter-spacing:.3px; }
.signupReference .referenceField input::placeholder { font:3.7cqw Georgia,'Times New Roman',serif; color:#303741; letter-spacing:.4px; }
.referenceStrength { display:flex; gap:1.2cqw; height:.8cqw; margin-top:-1.5cqw; }
.referenceStrength i { flex:1; display:block; background:#ddd; }
.referenceStrength i.met { background:#61c5b6; }
.referencePasswordHelp { margin-top:5.7cqw; color:#29374b; font-size:3.55cqw; line-height:1.75; }
.referenceDisclosure { margin-top:9cqw; font-size:3.15cqw; line-height:1.5; color:#96a0ac; }
.referenceDisclosure button { display:inline; color:#384757; font:inherit; border:0; background:none; padding:0; text-decoration:underline; cursor:pointer; }
.signupReference .referenceSubmit { margin-top:6cqw; background:#1974f8; border-color:#1974f8; border-radius:2cqw; min-height:14.3cqw; font-size:3.6cqw; font-weight:600; }
.signupReference .referenceIdentity { padding:0; margin-top:5cqw; font-size:2.2cqw; }
.signupReference .referenceChat { right:max(16px,calc((100vw - 590px)/2 + 16px)); width:16.4cqw; height:16.4cqw; max-width:96px; max-height:96px; }
.profileIntro { font-size:3.8cqw; color:#627286; margin-bottom:5cqw; }
.referenceBack { border:0; padding:8px 0; background:none; color:#6684ac; font:inherit; font-size:3.2cqw; cursor:pointer; }
@media(min-width:560px) { .app:has(.referenceAuth) { height:calc(100dvh - 32px); } }
.view:has(.referenceAuth) { container-type:inline-size; }
.referenceAuth { container-type:normal; }
.signupReference { padding-left:4.25%; padding-right:4.25%; }
.view:has(.referenceAuth) { scrollbar-width:none; }

.referenceAffiliation { font-size:11px; line-height:1.5; color:#63758a; margin-top:14px; }
.referenceAuth:has(.referenceAffiliation) h1 { margin-top:7cqw; }
.signupReference:has(.referenceAffiliation) h1 { margin-top:3cqw; }
/* Account security and verified recovery. */
.view:has(.securityPage) { background:#f8fafd; padding:0 23px 24px; scrollbar-width:none; }
.securityHeader { display:flex; align-items:center; justify-content:space-between; height:67px; gap:10px; }
.securityHeader a { display:flex; align-items:center; gap:8px; min-height:44px; color:#3c7acd; font-size:12px; text-decoration:none; }
.securityHeader a svg { width:8px; height:14px; }
.securityHeader > span { font-size:8px; letter-spacing:1.3px; color:#93a2b7; }
.securityHero { width:53px; height:53px; display:grid; place-items:center; border-radius:16px; background:#e9f1ff; color:#427bc0; margin:13px 0 21px; }
.securityHero svg { width:29px; height:29px; }
.securityPage h1 { font-size:26px; letter-spacing:-.7px; color:#1b3555; }
.securityIntro { font-size:12px; line-height:1.7; color:#8b9bb0; margin-top:10px; }
.securityEmail { padding:17px 0 13px; }
.securityEmail span { display:block; color:#96a3b5; font-size:9px; margin-bottom:6px; }
.securityEmail strong { font-size:12px; font-weight:500; color:#425e7f; overflow-wrap:anywhere; }
.securityTabs { display:grid; grid-template-columns:1fr 1fr; padding:4px; gap:4px; border:1px solid #e0e8f3; border-radius:11px; background:#edf2f9; margin:8px 0 24px; }
.securityTabs button { min-height:37px; border:0; background:none; border-radius:8px; color:#7e91aa; font:11px var(--font); cursor:pointer; }
.securityTabs [aria-pressed=true] { background:white; color:#377cd7; box-shadow:0 2px 5px #264e7c0a; }
.securityPage form { margin-top:25px; }
.securityPage .cardFormField input { font-size:16px; }
.securityPage .help { font-size:10px; line-height:1.6; margin-top:7px; color:#8c9bb0; }
.securityPage .securitySubmit { width:100%; min-height:47px; border-radius:11px; font-size:12px; font-weight:500; margin-top:9px; }
.securityNotice,.securityCodeNotice { padding:12px 14px; border:1px solid #dfE9f8; background:#eff5ff; border-radius:10px; font-size:11px; line-height:1.7; color:#647f9f; margin:18px 0; }
.securityNotice { background:#fff8eb; border-color:#f1e5cd; color:#9d845a; }
.securityPage #securityCode { font-size:22px; letter-spacing:5px; }
.securityResend,.securityStartOver { border:0; background:none; padding:9px 0; min-height:37px; color:#397bd5; font:11px var(--font); cursor:pointer; }
.securityResend { margin:-8px 0 16px; }
.securityResend:disabled { color:#9caabe; cursor:default; }
.securityStartOver { display:block; margin:10px auto 0; }
.securitySiteNote { font-size:9px; color:#9eabbd; line-height:1.6; text-align:center; margin-top:25px; }
.securitySignInNotice { color:#3b816c; background:#edf8f2; border:1px solid #d8ecdf; padding:12px; border-radius:8px; font-size:12px; line-height:1.6; margin-top:15px; }
.referenceRecovery a { color:#233245; font:inherit; text-decoration:none; }
.accountDetails .detailLine { font-size:11px; gap:14px; padding:12px 0; }
.accountDetails .detailLine > span { flex-shrink:0; max-width:45%; }
.accountDetails .detailLine strong { text-align:right; overflow-wrap:anywhere; max-width:60%; line-height:1.6; }
.accountDetailsNote { color:#8a9bb0; font-size:10px; line-height:1.7; margin-top:17px; }
.cardDialog:has(.accountDetails) { max-height:calc(100dvh - 36px); overflow-y:auto; }
.linkedCardDetails { align-self:flex-start; background:#edf4ff; border:1px solid #dce8f9; color:#3775c7; font:11px var(--font); border-radius:8px; padding:9px 12px; min-height:36px; cursor:pointer; margin-top:5px; }
.view:has(.banksPage) { background:#f8fafd; padding:0 20px 20px; scrollbar-width:none; }
.banksPage h1 { font-size:26px; color:#203e60; }
.bankDetailsList { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:12px; }
.bankDetailsButton { width:100%; display:flex; align-items:center; gap:12px; padding:15px 12px; border:1px solid #e1e8f3; background:white; border-radius:13px; text-align:left; font:inherit; cursor:pointer; }
.bankDetailsSummary { flex:1; min-width:0; }
.bankDetailsSummary strong { display:block; font-size:12px; color:#344e6e; overflow-wrap:anywhere; }
.bankDetailsSummary small { display:block; margin:5px 0 8px; font-size:10px; color:#8c9bb0; }
.bankDetailsHint { color:#3577ce; font-size:9px; display:flex; align-items:center; gap:6px; flex-shrink:0; }
.bankDetailsHint svg { width:5px; height:9px; }
.bankDetailsDialog .btn { margin-top:20px; border-radius:10px; font-size:12px; }
.bankDetailsDialog .bankReviewNote { margin-top:14px; }
.sampleDetailsNotice { padding:10px 12px; border-radius:9px; background:#edf6ff; color:#4b7ba9; font-size:10px; line-height:1.7; margin:15px 0 6px; }
/* Transfer receipt, following the supplied in-app reference. */
.receiptPage { padding:0 16px 12px; background:#fff; gap:0; }
.receiptHeader { display:flex; align-items:center; justify-content:space-between; min-height:66px; flex-shrink:0; }
.receiptHeader .brand { font-size:22px; gap:5px; letter-spacing:-.7px; }
.receiptHeader .brand svg { width:27px; height:27px; }
.receiptHeaderActions { display:flex; gap:4px; }
.receiptHeaderActions .iconBtn { width:34px; height:40px; padding:0; color:#182438; }
.receiptHeaderActions .iconBtn svg { width:25px; height:25px; }
.receiptHero { text-align:center; margin-top:18px; }
.receiptHero .checkWrap { margin-bottom:17px; }
.receiptHero .checkWrap svg { width:76px; height:76px; }
.receiptPage h1 { font-size:24px; color:#101824; font-weight:650; letter-spacing:-.6px; }
.receiptPage .sub { font-size:12px; color:#657080; margin:6px 0 0; line-height:1.6; }
.receiptAmount { margin-top:20px; color:#080f19; font-size:37px; font-weight:650; letter-spacing:-1.3px; line-height:1.2; }
.receiptAmount > span { color:#737b87; }
.receiptDestination { color:#566273; font-size:14px; margin:8px 0 19px; }
.receiptSummary { border:1px solid #e2e6ec; padding:0 12px; border-radius:12px; flex-shrink:0; }
.receiptRow { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0; font-size:12px; color:#576170; line-height:1.4; }
.receiptRow + .receiptRow { border-top:1px solid #e8ebf0; }
.receiptRow strong { font-weight:500; color:#233044; text-align:right; overflow-wrap:anywhere; }
.receiptRow > span { display:inline-flex; align-items:center; gap:9px; }
.receiptInfo { display:inline-flex; color:#7d8795; }
.receiptInfo svg { width:14px; height:14px; }
.receiptTotal,.receiptTotal strong { font-weight:650; color:#142034; }
.receiptTiming { display:flex; align-items:center; gap:11px; background:#f0f3f7; border:1px solid #e7ebf0; border-radius:12px; padding:11px 13px; margin-top:12px; flex-shrink:0; }
.receiptBankIcon { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; background:#e4e9ef; border-radius:50%; }
.receiptBankIcon svg { width:24px; height:24px; }
.receiptTiming p { font-size:11px; color:#5b6779; line-height:1.6; }
.receiptPage .receiptDone { margin-top:12px; border-radius:99px; min-height:43px; padding:11px 15px; font-size:13px; font-weight:500; background:#106bfc; flex-shrink:0; }
.receiptMore { margin-top:6px; flex-shrink:0; }
.receiptMore summary { cursor:pointer; color:#226bd1; font-size:12px; text-align:center; padding:12px; list-style:none; min-height:44px; font-weight:600; }
.receiptMore summary::-webkit-details-marker { display:none; }
.receiptExtra { border:1px solid #e2e9f2; padding:0 12px 12px; border-radius:12px; margin-top:6px; background:#f9fbfe; }
.receiptExtra .receiptRow { font-size:10px; }
.receiptRecordNote { font-size:10px; line-height:1.6; color:#8a98ab; }
.app:has(.receiptPage:not([hidden])) .tab[aria-current]::before { display:block; width:25px; height:2px; }
@media(max-height:740px) { .receiptHero { margin-top:8px; } .receiptHero .checkWrap svg { width:60px; height:60px; } .receiptHero .checkWrap { margin-bottom:12px; } .receiptAmount { margin-top:14px; } .receiptRow { padding:11px 0; } }
.view:has(.installPage) { background:#f8fafd; padding:0 24px 28px; }
.installIcon { display:block; border-radius:20px; margin:20px 0; }
.installPage h1 { font-size:27px; color:#203d5e; }
.installSteps { padding-left:22px; color:#356cae; margin:25px 0; }
.installSteps li { padding:0 0 17px 9px; }
.installSteps strong { font-size:13px; color:#3e5b7c; }
.installSteps p { font-size:11px; color:#8a9bb1; line-height:1.7; margin-top:7px; }
.installEntryLink { display:block; color:#4a86cd; text-decoration:none; margin-top:10px; font-size:11px; padding:6px 0; }
@media(display-mode:standalone) { body { padding:0; background:#f8fafd; } .app { width:100%; max-width:none; height:100dvh; border-radius:0; box-shadow:none; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); } .app:has(.referenceAuth),.app:has(.signupReference) { max-width:none; height:100dvh; } .referenceChat { bottom:calc(24px + env(safe-area-inset-bottom)); } }
@media(display-mode:standalone) and (min-width:560px) { .app { max-width:520px; } .app:has(.referenceAuth) { max-width:472px; } .app:has(.signupReference) { max-width:590px; } }
@media(display-mode:standalone) { .tabs { padding-bottom:0!important; } .tabs::after { display:none!important; } }
.paypalBrand { display:flex; align-items:center; gap:10px; margin:17px 0 25px; color:#163b78; font-size:28px; font-weight:750; font-style:italic; letter-spacing:-1px; }
.paypalBrand > span > span { color:#289ec9; }
.paypalMark { display:grid; place-items:center; width:48px; height:50px; border-radius:14px; background:#e8f2ff; font-size:36px; color:#1b4d95; }
.paypalPage #addPayPalForm { margin-top:27px; }
.paypalPage .cardFormField input { font-size:16px; }
.paypalOwnership { display:flex; align-items:flex-start; gap:10px; font-size:11px; color:#6f8198; line-height:1.7; cursor:pointer; }
.paypalOwnership input { width:17px; height:17px; min-height:17px; margin:2px 0 0; flex-shrink:0; accent-color:#2275e9; padding:0; }
.paypalPrivacy { color:#94a2b5; font-size:10px; line-height:1.7; margin:18px 0 23px; }
.paypalMini { color:#1d58a0; font-style:italic; font-size:24px; font-weight:750; }
.destinationActions { display:flex; align-items:center; gap:13px; }
.transferScreen #bankLabel { overflow-wrap:anywhere; }
.paypalAddLink { color:#24639e; background:#edf5ff; }
.withdrawalAddActions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bankDetailsSummary strong { overflow-wrap:anywhere; }
.adminSelectedAccount { color:#7790ad; font-size:11px; line-height:1.6; margin:8px 0; overflow-wrap:anywhere; }
.adminPage .adminMessage { overflow-wrap:anywhere; }
.adminPage .adminQuiet:disabled,.adminPage .btn:disabled { opacity:.55; cursor:wait; }
.adminPage [aria-invalid=true] { border-color:#c97373!important; }