:root {
  --trade-ink: #0d1b2f;
  --trade-ink-soft: #162842;
  --trade-paper: #f3f5ef;
  --trade-surface: #ffffff;
  --trade-line: rgba(13, 27, 47, 0.1);
  --trade-muted: #68758a;
  --trade-yellow: #f4bd3f;
  --trade-green: #62c670;
  --trade-blue: #4bb0d8;
  --trade-red: #e85d5d;
  --trade-radius: 24px;
  --trade-shadow: 0 24px 70px rgba(13, 27, 47, 0.1);
}

body {
  background: var(--trade-paper);
  color: var(--trade-ink);
}

.trade-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.trade-product-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid rgba(13, 27, 47, 0.1);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.trade-product-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--trade-yellow);
  box-shadow: 0 0 0 4px rgba(244, 189, 63, .16);
}

/* Authentication */
.trade-auth-shell {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(480px, .95fr);
  background:
    radial-gradient(circle at 72% 12%, rgba(75,176,216,.12), transparent 28%),
    var(--trade-paper);
}

.trade-auth-story {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: calc(100svh - 24px);
  margin: 12px;
  overflow: hidden;
  border-radius: 30px;
  padding: 34px;
  background: var(--trade-ink);
  color: white;
  isolation: isolate;
}

.trade-auth-story::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.trade-auth-story::after {
  content: "";
  position: absolute;
  right: -14%;
  bottom: -22%;
  z-index: -1;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(98,198,112,.28), rgba(75,176,216,.1) 45%, transparent 68%);
}

.trade-auth-story-inner {
  min-height: calc(100svh - 92px);
  display: flex;
  flex-direction: column;
}

.trade-auth-copy {
  margin-top: auto;
  margin-bottom: auto;
  max-width: 620px;
  padding: 50px 3vw;
}

.trade-auth-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.55);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.trade-auth-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

.trade-auth-heading {
  max-width: 590px;
  margin-top: 28px;
  font-size: clamp(3.4rem, 5.8vw, 6.8rem);
  line-height: .91;
  letter-spacing: -.07em;
  font-weight: 800;
}

.trade-auth-heading .accent { color: var(--trade-yellow); }
.trade-auth-description { max-width: 520px; margin-top: 28px; color: rgba(255,255,255,.58); font-size: 16px; line-height: 1.8; }

.trade-auth-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 38px;
}

.trade-auth-flow-item {
  padding: 16px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(12px);
}

.trade-auth-flow-item span { display: block; color: rgba(255,255,255,.36); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.trade-auth-flow-item strong { display: block; margin-top: 12px; font-size: 13px; line-height: 1.4; }

.trade-auth-form-side {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px clamp(24px, 5vw, 86px);
}

.trade-auth-form-wrap { width: 100%; max-width: 460px; }
.trade-auth-mobile-brand { display: none; }
.trade-auth-title { font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1; letter-spacing: -.045em; font-weight: 800; }
.trade-auth-subtitle { margin-top: 12px; color: var(--trade-muted); font-size: 14px; line-height: 1.6; }

.trade-outline-button,
.trade-submit-button {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 750;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.trade-outline-button { border: 1px solid var(--trade-line); background: rgba(255,255,255,.72); color: var(--trade-ink); }
.trade-outline-button:hover { transform: translateY(-2px); border-color: rgba(13,27,47,.2); background: white; box-shadow: 0 12px 30px rgba(13,27,47,.08); }
.trade-submit-button { border: 1px solid var(--trade-ink); background: var(--trade-ink); color: white; box-shadow: 0 14px 30px rgba(13,27,47,.18); }
.trade-submit-button:hover { transform: translateY(-2px); background: var(--trade-ink-soft); box-shadow: 0 18px 38px rgba(13,27,47,.24); }

.trade-divider { position: relative; display: flex; align-items: center; justify-content: center; margin: 24px 0; }
.trade-divider::before { content: ""; position: absolute; inset-inline: 0; height: 1px; background: var(--trade-line); }
.trade-divider span { position: relative; padding: 0 13px; background: var(--trade-paper); color: #8a94a4; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.trade-form { display: grid; gap: 17px; }
.trade-field label { display: block; margin-bottom: 8px; color: #334156; font-size: 12px; font-weight: 750; }
.trade-input-wrap { position: relative; }
.trade-input-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #95a0af; font-size: 14px; pointer-events: none; }
.trade-field input,
.trade-field select,
.trade-field textarea {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--trade-line);
  border-radius: 15px;
  background: rgba(255,255,255,.78);
  padding: 0 16px;
  color: var(--trade-ink);
  font-size: 14px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.trade-input-wrap input { padding-left: 45px; }
.trade-field input:focus,
.trade-field select:focus,
.trade-field textarea:focus { border-color: var(--trade-blue); background: white; box-shadow: 0 0 0 4px rgba(75,176,216,.12); }
.trade-form-meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; font-size: 12px; }
.trade-form-link { color: #317fa1; font-weight: 750; }
.trade-form-link:hover { color: var(--trade-ink); }
.trade-back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--trade-muted); font-size: 12px; font-weight: 650; }

.trade-simple-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  background:
    linear-gradient(rgba(13,27,47,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,27,47,.035) 1px, transparent 1px),
    radial-gradient(circle at 70% 12%, rgba(75,176,216,.14), transparent 28%),
    var(--trade-paper);
  background-size: 48px 48px, 48px 48px, auto, auto;
}

.trade-simple-wrap { width: 100%; max-width: 470px; }
.trade-simple-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 28px; }
.trade-simple-card { border: 1px solid var(--trade-line); border-radius: 28px; padding: clamp(24px, 5vw, 38px); background: rgba(255,255,255,.82); box-shadow: var(--trade-shadow); backdrop-filter: blur(18px); }
.trade-simple-icon { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 20px; background: rgba(244,189,63,.18); color: #a47716; font-size: 24px; }
.trade-simple-title { font-size: 32px; line-height: 1.05; letter-spacing: -.045em; font-weight: 800; }
.trade-simple-copy { margin-top: 11px; color: var(--trade-muted); font-size: 14px; line-height: 1.65; }

/* Dashboard shell */
.trade-app-shell {
  height: 100svh;
  display: flex;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% -10%, rgba(75,176,216,.12), transparent 28%),
    var(--trade-paper);
}

.trade-sidebar {
  width: 264px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  margin: 12px 0 12px 12px;
  overflow: hidden;
  border-radius: 26px;
  background: var(--trade-ink);
  color: white;
  box-shadow: 0 24px 60px rgba(13,27,47,.16);
}

.trade-sidebar-brand { padding: 25px 16px 21px; border-bottom: 1px solid rgba(255,255,255,.08); }
.trade-sidebar-brand img { width: auto; height: 17px; }
.trade-sidebar-brand .trade-product-pill { min-height: 24px; padding-inline: 8px; font-size: 8px; }
.trade-sidebar-nav { display: grid; gap: 5px; padding: 20px 14px; }
.trade-nav-link {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 11px;
  border-radius: 14px;
  color: rgba(255,255,255,.58);
  font-size: 13px;
  font-weight: 680;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.trade-nav-link:hover { color: white; background: rgba(255,255,255,.06); transform: translateX(2px); }
.trade-nav-link.is-active { color: var(--trade-ink); background: white; box-shadow: 0 12px 26px rgba(0,0,0,.15); }
.trade-nav-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: rgba(255,255,255,.07); font-size: 13px; }
.trade-nav-link.is-active .trade-nav-icon { background: rgba(244,189,63,.22); color: #8f6812; }
.trade-sidebar-footer { margin-top: auto; padding: 14px; border-top: 1px solid rgba(255,255,255,.08); }

.trade-main { min-width: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
/* An admin on their own customer screens. Deliberately plain and full width:
   it is a statement of whose account this is, not a warning about anything. */
.trade-admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 30px;
  background: #0d1b2f;
  color: #f4f6fa;
  font-size: 12.5px;
  font-weight: 600;
}
.trade-admin-bar a { color: #f5c451; text-decoration: underline; white-space: nowrap; }

/* The naira screens lean on this for their explanatory lines, and it was
   never defined, so it inherited whatever it landed in. Tailwind's reset
   takes colour and underline off every anchor, which left the one link that
   opens a customer's account number reading as ordinary prose. */
.trade-note-text { color: var(--trade-muted); font-size: 13px; line-height: 1.55; }
.trade-note-text a { color: #1c4f9c; font-weight: 700; text-decoration: underline; }
.trade-note-text a:hover { color: #0d1b2f; }

.trade-desktop-header {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 30px 10px;
}

.trade-page-kicker { color: var(--trade-muted); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.trade-page-title { margin-top: 4px; font-size: 24px; line-height: 1.1; letter-spacing: -.035em; font-weight: 800; }
.trade-user-chip { display: flex; align-items: center; gap: 11px; padding: 7px 8px 7px 13px; border: 1px solid var(--trade-line); border-radius: 999px; background: rgba(255,255,255,.64); }
.trade-user-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--trade-ink); color: white; font-size: 12px; font-weight: 800; }

.trade-mobile-header { display: none; }
.trade-content-scroll { flex: 1; overflow-y: auto; padding: 10px 30px 30px; overscroll-behavior: contain; }
.trade-content-scroll::-webkit-scrollbar { width: 6px; }
.trade-content-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(13,27,47,.16); }

.trade-announcement { margin: 0 30px 8px; overflow: hidden; border: 1px solid rgba(13,27,47,.08); border-radius: 18px; background: rgba(255,255,255,.66); }
.trade-announcement .ads-slider { min-height: 0; }
.trade-announcement-inner { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 18px; }
.trade-announcement-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; background: rgba(244,189,63,.18); color: #9b7115; }

.trade-bottom-nav { display: none; }

/* Shared content polish */
#dashboardContent { color: var(--trade-ink); }
#dashboardContent > .max-w-7xl { max-width: 1320px; }
#dashboardContent .bg-white.rounded-2xl,
#dashboardContent .bg-white.rounded-xl {
  border-color: rgba(13,27,47,.08) !important;
  box-shadow: 0 14px 40px rgba(13,27,47,.055);
}

#dashboardContent input:not([type="checkbox"]):not([type="radio"]),
#dashboardContent select,
#dashboardContent textarea {
  border-color: rgba(13,27,47,.1) !important;
  background-color: rgba(255,255,255,.76) !important;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

#dashboardContent input:not([type="checkbox"]):not([type="radio"]):focus,
#dashboardContent select:focus,
#dashboardContent textarea:focus {
  border-color: var(--trade-blue) !important;
  background-color: white !important;
  box-shadow: 0 0 0 4px rgba(75,176,216,.12) !important;
}

.trade-dashboard-home { display: grid; gap: 20px; }
.trade-home-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 20px; }
.trade-balance-card { position: relative; overflow: hidden; min-height: 260px; border-radius: 28px; padding: 28px; background: var(--trade-ink); color: white; box-shadow: 0 26px 60px rgba(13,27,47,.18); }
.trade-balance-card::before { content: ""; position: absolute; right: -90px; top: -105px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(75,176,216,.34), transparent 68%); }
.trade-balance-card::after { content: ""; position: absolute; left: 22%; bottom: -165px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(98,198,112,.22), transparent 68%); }
.trade-balance-value { font-size: clamp(2.45rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -.055em; font-weight: 800; }
.trade-action-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 28px; }
.trade-action { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; background: rgba(255,255,255,.09); color: white; font-size: 12px; font-weight: 750; transition: transform .2s ease, background-color .2s ease; }
.trade-action:hover { transform: translateY(-2px); background: rgba(255,255,255,.15); }
.trade-action.is-primary { background: var(--trade-yellow); color: var(--trade-ink); }
.trade-quick-card { min-height: 260px; display: flex; flex-direction: column; border: 1px solid var(--trade-line); border-radius: 28px; padding: 26px; background: rgba(255,255,255,.72); box-shadow: 0 18px 50px rgba(13,27,47,.07); backdrop-filter: blur(16px); }
.trade-quick-links { display: grid; gap: 9px; margin-top: auto; }
.trade-quick-link { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px; border: 1px solid var(--trade-line); border-radius: 15px; background: white; font-size: 13px; font-weight: 750; transition: transform .2s ease, border-color .2s ease; }
.trade-quick-link:hover { transform: translateX(3px); border-color: rgba(13,27,47,.18); }
.trade-panel { overflow: hidden; border: 1px solid var(--trade-line); border-radius: 25px; background: rgba(255,255,255,.72); box-shadow: 0 18px 50px rgba(13,27,47,.06); backdrop-filter: blur(16px); }
.trade-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.trade-stat { min-height: 128px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--trade-line); border-radius: 22px; padding: 18px; background: rgba(255,255,255,.68); }
.trade-stat-value { font-size: 27px; line-height: 1; letter-spacing: -.045em; font-weight: 800; }

@media (max-width: 1023px) {
  .trade-auth-shell { display: block; }
  .trade-auth-story { display: none; }
  .trade-auth-form-side { padding: max(28px, env(safe-area-inset-top)) 22px max(30px, env(safe-area-inset-bottom)); }
  .trade-auth-mobile-brand { display: flex; align-items: center; justify-content: space-between; margin-bottom: 44px; }
  .trade-sidebar { display: none; }
  .trade-desktop-header { display: none; }
  .trade-mobile-header {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: max(13px, env(safe-area-inset-top)) 18px 12px;
    border-bottom: 1px solid var(--trade-line);
    background: rgba(243,245,239,.88);
    backdrop-filter: blur(18px);
  }
  .trade-content-scroll { padding: 16px 15px calc(94px + env(safe-area-inset-bottom)); }
  .trade-announcement { margin: 0 15px 2px; }
  .trade-announcement-inner { min-height: 58px; padding: 10px 13px; }
  .trade-home-grid { grid-template-columns: 1fr; }
  .trade-quick-card { min-height: auto; }
  .trade-bottom-nav {
    position: fixed;
    z-index: 40;
    left: 10px;
    right: 10px;
    bottom: max(9px, env(safe-area-inset-bottom));
    min-height: 68px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 6px;
    border: 1px solid rgba(13,27,47,.1);
    border-radius: 22px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 20px 55px rgba(13,27,47,.16);
    backdrop-filter: blur(22px);
  }
  .trade-bottom-link { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 16px; color: #7d8898; font-size: 9px; font-weight: 750; }
  .trade-bottom-link i { font-size: 16px; }
  .trade-bottom-link.is-active { background: var(--trade-ink); color: white; box-shadow: 0 10px 20px rgba(13,27,47,.18); }
}

@media (max-width: 640px) {
  .trade-auth-form-side { align-items: flex-start; }
  .trade-auth-mobile-brand { margin-bottom: 38px; }
  .trade-auth-title { font-size: 2.35rem; }
  .trade-form { gap: 15px; }
  .trade-home-grid { gap: 14px; }
  .trade-balance-card { min-height: 240px; padding: 22px; border-radius: 24px; }
  .trade-action-grid { gap: 7px; }
  .trade-action { min-height: 46px; padding-inline: 6px; font-size: 11px; }
  .trade-quick-card { padding: 20px; border-radius: 24px; }
  .trade-stats { gap: 8px; }
  .trade-stat { min-height: 108px; padding: 13px; border-radius: 18px; }
  .trade-stat-value { font-size: 23px; }
}

html.wv .trade-auth-form-side {
  min-height: 100svh;
  padding-top: max(26px, env(safe-area-inset-top));
}

html.wv .trade-auth-mobile-brand { display: none; }
html.wv .trade-auth-form-wrap { max-width: none; }
html.wv .trade-auth-title { font-size: 2rem; }
html.wv .trade-auth-subtitle { font-size: 13px; }

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

/* Checkboxes: Tailwind preflight zeroes their border, which renders them
   invisible in iOS WebKit (the Flutter app's WebView). Draw them explicitly. */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 1.5px solid #9aa4b2;
  border-radius: 0.3rem;
  background: #fff center / 0.75rem no-repeat;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 0.15s, border-color 0.15s;
}
input[type="checkbox"]:checked {
  border-color: #0d1b2f;
  background-color: #0d1b2f;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid #4bb0d8;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Shared page components (dashboard sub-pages)
   --------------------------------------------------------------- */
.trade-page { display: grid; gap: 18px; max-width: 760px; }
.trade-page--wide { max-width: none; }
.trade-page-head { display: grid; gap: 7px; }
.trade-page-head h1 { font-size: clamp(1.45rem, 3.4vw, 1.9rem); line-height: 1.15; letter-spacing: -.035em; font-weight: 800; color: var(--trade-ink); }
.trade-page-head p { font-size: 13.5px; line-height: 1.6; color: var(--trade-muted); }
.trade-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #7d899a; }
.trade-eyebrow::before { content: ""; width: 22px; height: 1.5px; background: currentColor; opacity: .5; }

.trade-card { border: 1px solid var(--trade-line); border-radius: 22px; padding: 20px; background: rgba(255,255,255,.75); box-shadow: 0 16px 44px rgba(13,27,47,.06); backdrop-filter: blur(16px); }
.trade-card--flat { box-shadow: none; background: rgba(255,255,255,.6); }
.trade-card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; font-size: 14px; font-weight: 800; letter-spacing: -.01em; color: var(--trade-ink); }

.trade-summary { display: grid; gap: 11px; border: 1px solid rgba(244,189,63,.32); border-radius: 18px; padding: 17px; background: linear-gradient(140deg, rgba(244,189,63,.13), rgba(244,189,63,.04)); }
.trade-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 13px; color: var(--trade-muted); }
.trade-summary-row strong { font-size: 13.5px; font-weight: 800; color: var(--trade-ink); }
.trade-summary-total { padding-top: 11px; border-top: 1px solid rgba(244,189,63,.3); }
.trade-summary-total strong { font-size: 22px; letter-spacing: -.03em; color: var(--trade-ink); }

.trade-note { display: flex; align-items: flex-start; gap: 11px; border: 1px solid rgba(75,176,216,.26); border-radius: 17px; padding: 14px; background: rgba(75,176,216,.08); font-size: 12.5px; line-height: 1.6; color: #445468; }
.trade-note i { margin-top: 2px; color: var(--trade-blue); }
.trade-note--warn { border-color: rgba(244,189,63,.36); background: rgba(244,189,63,.1); }
.trade-note--warn i { color: #c9931f; }

.trade-steps { display: grid; gap: 13px; }
.trade-step { display: flex; align-items: flex-start; gap: 12px; }
.trade-step-num { flex: none; width: 29px; height: 29px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: rgba(98,198,112,.14); color: #3f9b52; font-size: 12px; font-weight: 800; }
.trade-step p { font-size: 13px; font-weight: 750; color: var(--trade-ink); }
.trade-step span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.55; font-weight: 500; color: var(--trade-muted); }

.trade-list { display: grid; gap: 9px; }
.trade-row { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 14px; border: 1px solid var(--trade-line); border-radius: 17px; background: white; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.trade-row:hover { transform: translateY(-1px); border-color: rgba(13,27,47,.18); box-shadow: 0 12px 26px rgba(13,27,47,.07); }
.trade-row-icon { flex: none; width: 41px; height: 41px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(13,27,47,.06); color: var(--trade-ink); font-size: 15px; }
.trade-row-body { min-width: 0; flex: 1; }
.trade-row-body p.trade-row-title { display: flex; align-items: center; gap: 8px; white-space: normal; }
.trade-row-body p.trade-row-title .trade-badge { flex: none; }
.trade-row-body p { font-size: 13.5px; font-weight: 750; color: var(--trade-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-row-body span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--trade-muted); }
.trade-row-meta { flex: none; text-align: right; }
.trade-row-meta strong { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; color: var(--trade-ink); }

.trade-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.trade-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.trade-badge--success { background: rgba(98,198,112,.15); color: #3f9b52; }
.trade-badge--pending { background: rgba(244,189,63,.18); color: #b5851c; }
.trade-badge--failed { background: rgba(232,93,93,.14); color: #c94b4b; }
.trade-badge--muted { background: rgba(13,27,47,.07); color: var(--trade-muted); }

.trade-empty { display: grid; justify-items: center; gap: 9px; padding: 42px 22px; text-align: center; }
.trade-empty-icon { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; border-radius: 20px; background: rgba(13,27,47,.05); color: #9aa5b4; font-size: 21px; }
.trade-empty p { font-size: 14.5px; font-weight: 800; color: var(--trade-ink); }
.trade-empty span { font-size: 12.5px; color: var(--trade-muted); max-width: 320px; }

.trade-tabs { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--trade-line); border-radius: 15px; background: rgba(255,255,255,.7); overflow-x: auto; scrollbar-width: none; }
.trade-tabs::-webkit-scrollbar { display: none; }
.trade-tab { flex: 1; min-width: max-content; padding: 9px 14px; border-radius: 11px; font-size: 12.5px; font-weight: 750; color: var(--trade-muted); white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.trade-tab.is-active { background: var(--trade-ink); color: white; }

.trade-copy-field { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border: 1px dashed rgba(13,27,47,.22); border-radius: 15px; background: rgba(13,27,47,.03); }
.trade-copy-field code { min-width: 0; flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; word-break: break-all; color: var(--trade-ink); }
.trade-icon-button { flex: none; width: 37px; height: 37px; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--trade-line); background: white; color: var(--trade-ink); transition: transform .2s ease, border-color .2s ease; }
.trade-icon-button:hover { transform: translateY(-1px); border-color: rgba(13,27,47,.2); }

.trade-chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
.trade-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 78px; padding: 11px; border: 1px solid var(--trade-line); border-radius: 16px; background: white; font-size: 12px; font-weight: 750; color: var(--trade-ink); text-align: center; transition: transform .2s ease, border-color .2s ease; }
.trade-chip:hover { transform: translateY(-2px); border-color: rgba(13,27,47,.2); }
.trade-chip.is-active { border-color: var(--trade-ink); background: var(--trade-ink); color: white; box-shadow: 0 14px 30px rgba(13,27,47,.18); }

@media (max-width: 1023px) {
  .trade-page { gap: 15px; }
  .trade-card { padding: 17px; border-radius: 20px; }
  .trade-row { padding: 13px; }
}

/* Show/hide control added to every password field by base.html */
.trade-password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: #8b96a5;
  font-size: 14px;
  background: transparent;
  transition: color .15s ease, background-color .15s ease;
}
.trade-password-toggle:hover { color: var(--trade-ink); background: rgba(13,27,47,.05); }
.trade-password-toggle:focus-visible { outline: 2px solid var(--trade-blue); outline-offset: 2px; }
.trade-has-toggle { padding-right: 52px !important; }

/* --- The naira account somebody transfers into -------------------------- */
/* Deliberately plain: an account number is copied by eye as often as by
   button, so it is set in a monospaced face at a size that survives a photo. */
.naira-account { border: 1px solid var(--trade-border, rgba(13,27,47,.12)); border-radius: 15px; overflow: hidden; }
.naira-account__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; font-size: 13.5px; }
.naira-account__row + .naira-account__row { border-top: 1px solid var(--trade-border, rgba(13,27,47,.12)); }
.naira-account__row span { color: var(--trade-muted, #68758a); }
.naira-account__row b { font-weight: 700; color: var(--trade-ink, #0d1b2f); text-align: right; }
.naira-account__number { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 17px; letter-spacing: .04em; }

/* ---------------------------------------------------------------------------
   Desktop.

   The workspace was drawn for a phone and then allowed to stretch: a balance
   set in 70px type, cards with 28px corners and the assets and the activity
   hidden behind tabs, which is how you cope with 390px of width, not 1440.
   On a real screen both lists fit side by side and the numbers do not need to
   shout. Below 1100px everything here simply does not apply and the phone
   layout stands.
   --------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  /* A figure you read, not a headline. */
  .trade-balance-value { font-size: 2.6rem; letter-spacing: -.04em; }
  .trade-balance-card { min-height: 0; padding: 26px 28px; border-radius: 20px; box-shadow: 0 14px 34px rgba(13,27,47,.14); }
  .trade-action-grid { margin-top: 22px; gap: 10px; }

  .trade-quick-card { min-height: 0; padding: 24px; border-radius: 20px; box-shadow: 0 10px 28px rgba(13,27,47,.05); }
  .trade-panel { border-radius: 20px; box-shadow: 0 10px 28px rgba(13,27,47,.05); }
  .trade-home-grid { gap: 18px; align-items: stretch; }

  /* Assets and activity, both at once. The tab bar is a phone control and the
     panel becomes two columns with a rule between them. `display` is forced
     because switchTab() toggles `hidden` on these and it must not be able to
     empty half the screen. */
  .trade-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .trade-split > .trade-split-tabs { display: none; }
  .trade-split > #assetsContent,
  .trade-split > #transactionsContent { display: block !important; padding: 22px 24px; }
  .trade-split > #transactionsContent { border-left: 1px solid var(--trade-line); }
  .trade-split .trade-split-title { display: block; margin-bottom: 16px; font-size: 13px; font-weight: 800; letter-spacing: -.01em; color: var(--trade-ink); }
}

/* The heading each column needs once the tabs are gone. The tab already names
   the list on a phone, so it would be the same word twice. */
.trade-split-title { display: none; }

/* ---------------------------------------------------------------------------
   Dialogs.

   Every one of these was assembled by hand out of utility classes, so they
   agreed on nothing: their own width, their own corner, their own close
   button in its own corner. One shell now, and a dialog is its content.
   --------------------------------------------------------------------------- */
.sr-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(9, 18, 32, .55);
  backdrop-filter: blur(6px);
}
.sr-modal.hidden { display: none; }
.sr-modal__card {
  position: relative;
  width: 100%;
  max-width: 430px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border-radius: 22px 22px 0 0;
  background: var(--trade-paper, #f7f8f2);
  box-shadow: 0 30px 80px rgba(9, 18, 32, .3);
}
.sr-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px 0;
}
.sr-modal__title { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--trade-ink); }
.sr-modal__lede { margin-top: 5px; font-size: 13px; line-height: 1.55; color: var(--trade-muted); }
.sr-modal__close {
  margin-left: auto;
  flex: none;
  display: flex;
  height: 32px;
  width: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  border: 1px solid var(--trade-line);
  background: white;
  color: var(--trade-muted);
}
.sr-modal__close:hover { color: var(--trade-ink); }
.sr-modal__body { padding: 18px 22px 22px; }

/* A row you choose, in a dialog that offers a few. */
.sr-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--trade-line);
  border-radius: 15px;
  background: white;
  text-align: left;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sr-choice + .sr-choice { margin-top: 10px; }
.sr-choice:hover { border-color: rgba(13,27,47,.34); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(13,27,47,.08); }
.sr-choice__icon {
  display: flex; height: 40px; width: 40px; flex: none;
  align-items: center; justify-content: center;
  border-radius: 13px; font-size: 15px;
}
.sr-choice__name { font-size: 14px; font-weight: 800; letter-spacing: -.01em; color: var(--trade-ink); }
.sr-choice__note { margin-top: 2px; font-size: 12.5px; color: var(--trade-muted); }
.sr-choice__go { margin-left: auto; color: #9aa5b4; font-size: 12px; }

@media (min-width: 640px) {
  .sr-modal { align-items: center; }
  .sr-modal__card { border-radius: 22px; }
}

@media (min-width: 1100px) {
  /* A strip restating the product name inside the product. It earns its place
     on a phone, where the sidebar is hidden and nothing else says where you
     are. Here the sidebar, the page title and the account chip all say it
     already, so it is a row of furniture between somebody and their money. */
  .trade-announcement { display: none; }

  /* The balance card sat top-aligned in a box stretched to the column beside
     it, so a third of it was empty navy. The actions go to the foot of the
     card instead, which is also where somebody looks for them. */
  .trade-balance-card { display: flex; flex-direction: column; }
  .trade-balance-card > .relative { display: flex; flex-direction: column; flex: 1; }
  .trade-balance-card .trade-action-grid { margin-top: auto; }

  /* Two lines of heading in a side panel is a headline, not a label. */
  .trade-quick-card h2 { font-size: 1.28rem; letter-spacing: -.03em; }
  .trade-quick-card p { font-size: 13px; }
}

@media (min-width: 1100px) {
  /* History, in columns.

     Flexed, every row set its own rhythm: the amount ended wherever the date
     before it stopped, and the status pill sat wherever the amount left it.
     Down a page of them nothing lined up, which is what made a list of money
     read as a stack of cards. A grid gives each part a column, so the eye can
     run down the amounts.

     `display: contents` drops the meta wrapper out of the layout so its two
     children become columns of the row itself, rather than a box that has to
     be sized. */
  #transactionList .trade-row {
    display: grid;
    grid-template-columns: 41px minmax(0, 1fr) minmax(120px, auto) 112px;
    align-items: center;
    gap: 18px;
    padding: 15px 18px;
  }
  #transactionList .trade-row-meta { display: contents; }
  #transactionList .trade-row-meta strong { text-align: right; font-size: 14px; }
  #transactionList .trade-row-meta .trade-badge { margin-top: 0; justify-self: start; }
  #transactionList .trade-row-body span { font-size: 12px; }

  /* Says what the columns are, once they are columns. */
  .trade-page .trade-list-head {
    display: grid;
    grid-template-columns: 41px minmax(0, 1fr) minmax(120px, auto) 112px;
    gap: 18px;
    padding: 0 18px 10px;
    color: #98a2b1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .trade-page .trade-list-head span:nth-child(3) { text-align: right; }
}

.trade-list-head { display: none; }

/* ---------------------------------------------------------------------------
   Flat.

   Every surface carried a large soft shadow, so nothing was above anything:
   a drop shadow means "this floats over that", and when the balance, the
   quick links, the panels, each row and each dialog all say it at once, the
   page reads as a pile of loose cards rather than a screen. Borders do the
   separating. The only things left with a shadow are the two that really are
   above the page: a dialog, and a row while the pointer is on it.
   --------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  .trade-balance-card,
  .trade-quick-card,
  .trade-panel,
  .trade-card,
  .trade-stat,
  .trade-row,
  .trade-quick-link,
  .sr-choice { box-shadow: none; }

  .trade-row:hover,
  .trade-quick-link:hover,
  .sr-choice:hover { box-shadow: 0 2px 10px rgba(13,27,47,.06); }

  /* Which leaves the borders doing the work, so they have to be visible. */
  .trade-quick-card,
  .trade-panel,
  .trade-card { background: var(--trade-surface); border-color: rgba(13,27,47,.09); }
}

@media (min-width: 1100px) {
  /* The balance, across the top.

     It was a tall navy block holding one number, and the quick links were a
     second tall block beside it, so a third of the first screen was spent
     before any of this person's money appeared. Laid out as a banner the same
     facts take a strip: the figure on the left, the three things you can do
     with it on the right, and the lists start near the top of the window.

     The navy stays. It is the one surface that matches the sidebar, and
     making everything pale would have lost the only anchor the page has. */
  .trade-home-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .trade-balance-card > .relative { flex-direction: row; align-items: center; gap: 32px; }
  .trade-balance-card .mb-4 { margin-bottom: 0; }
  .trade-balance-card .trade-action-grid {
    margin-top: 0;
    margin-left: auto;
    grid-template-columns: repeat(3, minmax(126px, auto));
  }

  /* The quick links become a row of three under the banner, not a column in a
     box with a headline over it. */
  .trade-quick-card { border: 0; background: none; padding: 0; }
  .trade-quick-card > div:first-child { display: none; }
  .trade-quick-card .trade-quick-links { margin-top: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .trade-quick-link { border: 1px solid rgba(13,27,47,.09); border-radius: 15px; background: var(--trade-surface); padding: 15px 16px; }
}