/* =====================================================================
   MockBank Training — design system
   Palette: deep navy + electric blue, warm gold accent for emphasis.
   Type: Manrope (display/headings) + Inter (body/UI) + tabular figures
   for money. Structure: masthead + tab-strip nav, card-based overview,
   hero balance panel, quick actions — modeled on major-bank online
   banking UX (not any single institution's actual brand assets).
   ===================================================================== */

:root{
  /* brand */
  --navy-950:#081226;
  --navy-900:#0b1c3a;
  --navy-800:#122a52;
  --navy-700:#1a3a6b;
  --blue-600:#0b63d6;
  --blue-700:#0952b3;
  --blue-500:#2f7de0;
  --gold-500:#c9962e;
  --gold-600:#a97a1c;

  /* neutrals */
  --ink:#111827;
  --ink-soft:#3f4a5c;
  --paper:#eef1f6;
  --card:#ffffff;
  --line:#e2e6ee;
  --line-soft:#edf0f5;
  --grey:#64748b;
  --grey-soft:#94a1b5;

  /* semantic */
  --green:#0e8a53;
  --green-bg:#e4f6ec;
  --amber:#a1650a;
  --amber-bg:#fdf1dc;
  --red:#c0392f;
  --red-bg:#fdecea;
  --blue-bg:#e6f0fd;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(11,28,58,0.06);
  --shadow:0 6px 20px rgba(11,28,58,0.08);
  --shadow-lg:0 16px 40px rgba(11,28,58,0.14);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-font-smoothing:antialiased; overflow-x:hidden;}
body{
  font-family:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--paper); color:var(--ink); line-height:1.55; font-size:15px;
  overflow-x:hidden; width:100%;
}
h1,h2,h3,.brand,.masthead-brand,.hero-amount,.stat-card .v{
  font-family:'Manrope','Inter',-apple-system,sans-serif;
}
a{color:var(--blue-700); text-decoration:none;}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px;}
.tabular{font-variant-numeric:tabular-nums;}

.demo-strip{
  background:var(--gold-500); color:#3a2a06; text-align:center; font-size:0.82rem;
  font-weight:600; padding:8px 16px; letter-spacing:0.01em;
}

/* =============== MASTHEAD (public + admin shared) =============== */
.site-header{background:var(--card); border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm);}
.header-inner{display:flex; justify-content:space-between; align-items:center; height:68px;}
.brand{
  font-weight:800; font-size:1.2rem; color:var(--navy-900); letter-spacing:-0.01em;
  display:flex; align-items:center; gap:8px;
}

/* ---- THE MARK ----
   A rounded signet: navy-to-blue field, gold hairline rim, monogram in the
   display face. The letters come from the element's own text
   (BRAND_MONOGRAM, printed by the header), never from CSS `content`, so
   re-branding is a config change and never a stylesheet edit — and there is
   no logo image file to ship, scale or re-export.

   (The class is still called .logo-placeholder: it was a dashed stand-in
   box before this build had a brand, and renaming it across every template
   would be churn for nothing.) */
.logo-placeholder{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; position:relative;
  background:linear-gradient(145deg,var(--navy-800),var(--navy-950));
  border:none;
  color:var(--gold-500);
  font-family:'Manrope','Inter',sans-serif;
  font-size:0.84rem; font-weight:800; letter-spacing:0.01em; line-height:1;
  box-shadow:0 1px 3px rgba(11,28,58,0.22);
}
/* the gold hairline, inset so it reads as a rim rather than a border */
.logo-placeholder::after{
  content:''; position:absolute; inset:3px; border-radius:7px;
  border:1px solid rgba(201,150,46,0.55); pointer-events:none;
}
.masthead .logo-placeholder{width:38px; height:38px; font-size:0.94rem;}

/* ---- WORDMARK + TAGLINE ---- */
.wordmark-placeholder{
  font-family:'Manrope','Inter',sans-serif; font-weight:800;
  letter-spacing:-0.012em; line-height:1.15;
}
.brand-stack{display:flex; flex-direction:column; min-width:0;}
.brand-tagline{
  font-family:'Inter',sans-serif; font-size:0.6rem; font-weight:700;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--gold-500);
  margin-top:3px; white-space:nowrap;
}

/* ---- FOOTER CREST ---- */
.footer-crest{
  display:flex; align-items:center; justify-content:center; gap:11px;
  padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.footer-crest-mark{
  width:30px; height:30px; border-radius:9px; flex:0 0 auto; position:relative;
  display:grid; place-items:center;
  background:linear-gradient(145deg,var(--navy-800),var(--navy-950));
}
.footer-crest-mark::after{
  content:''; position:absolute; inset:3px; border-radius:6px;
  border:1px solid rgba(201,150,46,0.55);
}
.footer-crest-mark span{
  position:relative; z-index:1; font-family:'Manrope','Inter',sans-serif;
  font-size:0.74rem; font-weight:800; color:var(--gold-500); line-height:1;
}
.footer-crest-name{
  font-family:'Manrope','Inter',sans-serif; font-size:0.98rem; font-weight:800;
  color:var(--navy-900); letter-spacing:-0.01em;
}
.footer-est{
  font-size:0.64rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--gold-600); font-weight:700;
}
.site-nav{display:flex; gap:28px; font-size:0.9rem; align-items:center;}
.site-nav a{color:var(--ink-soft); font-weight:600; padding:6px 0; border-bottom:2px solid transparent;}
.site-nav a:hover{color:var(--navy-900);}
@media (max-width:900px){
  .site-nav{gap:14px; font-size:0.82rem;}
  .header-inner{flex-wrap:wrap; height:auto; padding:12px 0;}
}
@media (max-width:600px){
  .site-nav a:not(:last-child):not(.more-menu-wrap a){white-space:nowrap;}
  .site-nav{gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px;}
  .more-menu-btn span{display:none;}
}

.page-main{padding:40px 24px; min-height:60vh;}
main.wrap.page-main:has(.auth-shell){max-width:none; padding:0; min-height:0;}

.site-footer{border-top:1px solid var(--line); padding:26px; margin-top:60px; font-size:0.8rem; color:var(--grey); text-align:center; background:var(--card);}

/* =============== cards / generic =============== */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; margin-bottom:24px; box-shadow:var(--shadow-sm);}
.card h2{font-size:1.15rem; margin-bottom:16px; letter-spacing:-0.01em;}

/* =============== forms =============== */
.form-group{margin-bottom:18px;}
label{display:block; font-size:0.83rem; font-weight:700; margin-bottom:6px; color:var(--ink-soft);}
input, select, textarea{
  width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-size:0.95rem; font-family:inherit; background:#fff; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(11,99,214,0.14);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.help-text{font-size:0.8rem; color:var(--grey); margin-top:5px;}
.error-text{background:var(--red-bg); color:var(--red); padding:11px 14px; border-radius:var(--radius-sm); font-size:0.88rem; margin-bottom:18px; border:1px solid rgba(192,57,47,0.18);}
.success-text{background:var(--green-bg); color:var(--green); padding:11px 14px; border-radius:var(--radius-sm); font-size:0.88rem; margin-bottom:18px; border:1px solid rgba(14,138,83,0.18);}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:10px; border:none;
  font-size:0.92rem; font-weight:700; cursor:pointer; text-decoration:none;
  transition:transform .08s, box-shadow .15s, background .15s;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--blue-600); color:#fff; box-shadow:0 4px 14px rgba(11,99,214,0.28);}
.btn-primary:hover{background:var(--blue-700);}
.btn-secondary{background:#eef2f8; color:var(--navy-900);}
.btn-secondary:hover{background:#e3e9f2;}
.btn-danger{background:var(--red); color:#fff;}
.btn-danger:hover{background:#a52d25;}
.btn-block{width:100%; text-align:center;}
.btn-sm{padding:8px 14px; font-size:0.82rem;}

/* =============== tables =============== */
table{width:100%; border-collapse:collapse; font-size:0.9rem;}
th{text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--grey); padding:11px 12px; border-bottom:1.5px solid var(--line);}
td{padding:13px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top;}
tr.tx-row{cursor:pointer;}
tr.tx-row:hover{background:#f7f9fc;}
tr.tx-detail{display:none; background:#f7f9fc;}
tr.tx-detail.open{display:table-row;}
tr.tx-detail td{padding:18px 12px;}
.detail-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; font-size:0.85rem;}
.detail-grid .k{color:var(--grey); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em;}

/* =============== badges =============== */
.badge{display:inline-block; padding:4px 11px; border-radius:20px; font-size:0.73rem; font-weight:700; letter-spacing:0.01em;}
.badge-grey{background:#eceef3; color:var(--grey);}
.badge-amber{background:var(--amber-bg); color:var(--amber);}
.badge-blue{background:var(--blue-bg); color:var(--blue-700);}
.badge-green{background:var(--green-bg); color:var(--green);}
.badge-red{background:var(--red-bg); color:var(--red);}

/* =============== auth pages (split-screen) =============== */
.auth-shell{display:grid; grid-template-columns:1.1fr 1fr; min-height:calc(100vh - 68px);}
.auth-promo{
  background:
    radial-gradient(circle at 15% 20%, rgba(47,125,224,0.35), transparent 45%),
    radial-gradient(circle at 80% 75%, rgba(201,150,46,0.25), transparent 40%),
    linear-gradient(160deg,var(--navy-950),var(--navy-800) 70%);
  color:#eaf0fb; padding:64px 56px; display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
.auth-promo::before{
  content:''; position:absolute; inset:0; opacity:0.5; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 30% 30%, #000 0%, transparent 70%);
}
.auth-promo h2{font-size:2rem; line-height:1.2; letter-spacing:-0.02em; max-width:420px; position:relative;}
.auth-promo p{color:#b9c6e0; margin-top:14px; max-width:380px; font-size:0.95rem; position:relative;}
.auth-promo-stats{display:flex; gap:36px; margin-top:48px; position:relative;}
.auth-promo-stats div b{display:block; font-size:1.5rem; font-family:'Manrope',sans-serif;}
.auth-promo-stats div span{font-size:0.78rem; color:#a9b8d6;}
.auth-form-side{display:flex; align-items:center; justify-content:center; padding:40px 24px; background:var(--paper);}
.auth-wrap{max-width:400px; width:100%;}
.auth-wrap .card{padding:36px; box-shadow:var(--shadow);}
.auth-wrap h1{font-size:1.5rem; margin-bottom:6px; letter-spacing:-0.02em;}
.auth-wrap .sub{color:var(--grey); font-size:0.88rem; margin-bottom:24px;}
.auth-switch{text-align:center; margin-top:18px; font-size:0.88rem; color:var(--grey);}
@media (max-width:880px){
  .auth-shell{grid-template-columns:1fr;}
  .auth-promo{display:none;}
}

/* =============== otp =============== */
.otp-input{font-size:1.8rem; letter-spacing:0.55em; text-align:center; font-weight:800; padding-left:18px;}

/* =============== slip ===============  (styles live further down, in the dedicated receipt-design block) */
.print-hide{}
@media print{
  .site-header, .site-footer, .demo-strip, .print-hide, .masthead, .tabstrip, .ticker-bar, .shell-footer{display:none !important;}
  body{background:#fff;}
  .slip-banner{background:#fff !important; color:var(--ink) !important; border-bottom:2px solid var(--navy-900);}
  .slip-banner::before{display:none;}
  .slip-brand{color:var(--navy-900) !important;}
  .slip-status-label{color:var(--grey) !important;}
  .slip-card{box-shadow:none; border:1px solid var(--line);}
}

@media (max-width:700px){
  .form-row{grid-template-columns:1fr;}
  .detail-grid{grid-template-columns:1fr 1fr;}
  .site-nav{gap:14px; font-size:0.85rem;}
}

/* ================= APP SHELL (top nav + tab strip) ================= */
body.app-shell{background:var(--paper);}

.masthead{background:var(--navy-950); border-bottom:1px solid var(--navy-800);}
.masthead-inner{display:flex; align-items:center; justify-content:flex-start; height:64px; gap:12px;}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:68px;}
.topbar-right, .site-nav{margin-left:auto;}
.masthead-left{display:flex; align-items:center; gap:4px; min-width:0;}
.masthead-brand{
  font-weight:800; font-size:1.05rem; color:#fff; display:flex; align-items:center; gap:9px;
  letter-spacing:-0.01em; margin-left:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.masthead .logo-placeholder{
  background:linear-gradient(145deg,rgba(255,255,255,0.15),rgba(255,255,255,0.04));
  color:var(--gold-500);
}
.masthead .logo-placeholder::after{border-color:rgba(201,150,46,0.7);}
.masthead .wordmark-placeholder{color:#fff;}

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:50%; background:none; border:none; color:#dbe4f5; cursor:pointer; flex-shrink:0;
}
.icon-btn:hover{background:rgba(255,255,255,0.1); color:#fff;}
.icon-btn svg{width:20px; height:20px;}
.icon-btn .avatar-fallback{background:rgba(255,255,255,0.14); color:#fff;}

.more-menu-wrap{position:relative;}
.more-menu-btn{
  display:flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer;
  color:#dbe4f5; font-size:0.84rem; font-weight:600; padding:8px 12px; border-radius:20px;
}
.more-menu-btn:hover{background:rgba(255,255,255,0.1); color:#fff;}
.more-menu-dropdown{
  display:none; position:absolute; left:0; top:calc(100% + 10px); width:220px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); z-index:80; overflow:hidden; padding:6px;
}
.more-menu-dropdown.open{display:block;}
.more-menu-dropdown a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px;
  color:var(--ink); font-size:0.86rem; font-weight:600;
}
.more-menu-dropdown a:hover{background:#f0f3f8;}
.more-menu-dropdown a svg{width:17px; height:17px; color:var(--grey);}

.topbar-right{display:flex; align-items:center; gap:6px; justify-self:end;}
.signout-btn{
  background:#1a2338; color:#fff; font-size:0.82rem; font-weight:700;
  padding:9px 18px; border-radius:20px; margin-left:6px; white-space:nowrap; flex-shrink:0;
}
.signout-btn:hover{background:#28324a;}

@media (max-width:640px){
  .masthead .wrap{padding:0 12px;}
  .masthead-brand .wordmark-placeholder{display:none;}
  .brand-tagline{display:none;}
  .more-menu-btn{font-size:0;}
  .topbar-right [aria-label="Search"]{display:none;}
  .signout-btn{padding:9px 12px; font-size:0.74rem;}
  .topbar-username{display:none;}
}

.tabstrip{background:var(--blue-600);}
.tabstrip-inner{display:flex; align-items:center; gap:4px; height:48px; overflow-x:auto;}
.tabstrip a{
  display:flex; align-items:center; height:100%; padding:0 18px;
  color:#dbe9fd; font-size:0.86rem; font-weight:600; white-space:nowrap;
  border-bottom:3px solid transparent;
}
.tabstrip a:hover{color:#fff;}
.tabstrip a.active{color:#fff; border-bottom-color:#fff; font-weight:700;}
.nav-badge{
  background:var(--red); color:#fff; font-size:0.66rem; font-weight:800;
  border-radius:20px; padding:1px 6px; line-height:1.4; margin-left:6px;
}
@media (max-width:760px){
  .tabstrip-inner{display:none; flex-direction:column; height:auto; gap:0;}
  .tabstrip-inner a{height:44px; border-bottom:1px solid rgba(255,255,255,0.15); border-left:3px solid transparent;}
  .tabstrip-inner a.active{border-bottom-color:rgba(255,255,255,0.15); border-left-color:#fff;}
  .tabstrip.mobile-open .tabstrip-inner{display:flex;}
}

.shell-content{padding:32px 0 60px;}
.shell-footer{padding:24px; font-size:0.78rem; color:var(--grey); text-align:center; background:var(--card); border-top:1px solid var(--line);}

.topbar-title{font-size:1.4rem; letter-spacing:-0.02em; margin-bottom:4px;}
.page-head{margin-bottom:24px;}
.page-head .sub{color:var(--grey); font-size:0.92rem;}

.avatar{border-radius:50%; object-fit:cover; display:inline-flex; align-items:center; justify-content:center;}
.avatar-sm{width:36px; height:36px;}
.avatar-lg{width:96px; height:96px; font-size:1.8rem;}
.avatar-fallback{background:var(--blue-bg); color:var(--blue-700); font-weight:800;}

/* =============== hero balance panel + quick actions =============== */
.hero-balance{
  border-radius:var(--radius);
  background:
    radial-gradient(circle at 85% 0%, rgba(47,125,224,0.4), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(201,150,46,0.28), transparent 45%),
    linear-gradient(155deg,var(--navy-950),var(--navy-800));
  color:#fff; padding:20px 22px; margin-bottom:16px; position:relative; overflow:hidden;
  box-shadow:var(--shadow);
}
.hero-balance::before{
  content:''; position:absolute; inset:0; opacity:0.4; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(circle at 80% 10%, #000 0%, transparent 60%);
}
.hero-top{display:flex; justify-content:space-between; align-items:flex-start; position:relative; flex-wrap:wrap; gap:12px;}
.hero-label{font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color:#a9b8d6; font-weight:700;}
.hero-amount{font-size:1.7rem; font-weight:800; margin-top:4px; letter-spacing:-0.02em;}
.hero-sub{color:#a9b8d6; font-size:0.74rem; margin-top:2px;}
.hero-acct{
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius-sm); padding:8px 12px; font-size:0.74rem; color:#dbe4f5;
  text-align:right;
}
.hero-acct b{display:block; color:#fff; font-size:0.84rem; letter-spacing:0.04em; margin-top:1px;}

.quick-actions{display:flex; gap:8px; margin-top:16px; position:relative; flex-wrap:wrap;}
.qa-btn{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius-sm); padding:9px 13px; color:#fff; min-width:66px;
  font-size:0.7rem; font-weight:700; transition:background .15s, transform .1s;
}
.qa-btn:hover{background:rgba(255,255,255,0.16); transform:translateY(-1px);}
.qa-btn svg{width:15px; height:15px;}
.qa-btn.disabled{opacity:0.45; cursor:not-allowed;}

/* =============== stat cards / dashboard grid =============== */
.dash-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:24px; align-items:start;}
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-bottom:16px;}
.stat-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; box-shadow:var(--shadow-sm);}
.stat-card .k{font-size:0.68rem; color:var(--grey); text-transform:uppercase; letter-spacing:0.05em; font-weight:600;}
.stat-card .v{font-size:1.05rem; font-weight:800; margin-top:3px; transition:opacity .2s;}

.chart-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm);}
.chart-card h2{font-size:1.05rem; margin-bottom:18px;}
.chart-wrap{position:relative; height:220px;}

.promo-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:24px;}
.promo-card{
  position:relative; border-radius:var(--radius); overflow:hidden; height:150px;
  display:flex; align-items:flex-end; color:#fff; border:1px solid var(--line);
}
.promo-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.6);}
.promo-card .promo-text{position:relative; padding:18px; font-weight:700; font-size:0.95rem;}
.promo-card .promo-tag{position:relative; padding:4px 18px 0; font-size:0.7rem; opacity:0.85; text-transform:uppercase; letter-spacing:0.05em;}

/* ================= MARKET TICKER ================= */
.ticker-bar{
  background:var(--navy-950); color:#dfe6f3; overflow:hidden; white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.ticker-track{
  display:inline-flex; align-items:center; gap:36px; padding:7px 0;
  animation:ticker-scroll 38s linear infinite;
  will-change:transform;
}
.ticker-bar:hover .ticker-track{animation-play-state:paused;}
@keyframes ticker-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.ticker-item{display:inline-flex; align-items:center; gap:8px; font-size:0.76rem; font-family:'IBM Plex Mono',monospace;}
.tk-name{color:#8fa1c4; font-weight:700;}
.tk-val{color:#fff;}
.tk-chg.up{color:#4ade95;}
.tk-chg.down{color:#f38b7e;}
.ticker-note{color:#7686a3; font-style:italic; font-family:'Inter',inherit;}
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none; overflow-x:auto;}
}

.upload-btn{display:inline-block; margin-top:10px; font-size:0.82rem;}
.security-q-row{display:flex; gap:10px; align-items:center; margin-top:8px;}

/* notifications bell */
.bell-wrap{position:relative;}
.bell-btn{position:relative;}
.bell-dot{
  position:absolute; top:2px; right:2px; background:var(--red); color:#fff;
  font-size:0.62rem; font-weight:800; border-radius:20px; padding:1px 5px; line-height:1.3;
}
.bell-dropdown{
  display:none; position:absolute; right:0; top:calc(100% + 12px); width:330px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); z-index:80; overflow:hidden;
}
.bell-dropdown.open{display:block;}
.bell-dropdown-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-bottom:1px solid var(--line); font-weight:700; font-size:0.9rem;
}
.bell-dropdown-head a{font-size:0.8rem; font-weight:600;}
.bell-empty{padding:24px 16px; text-align:center; color:var(--grey); font-size:0.85rem;}
.bell-item{padding:12px 16px; border-bottom:1px solid var(--line-soft); font-size:0.85rem;}
.bell-item:last-child{border-bottom:none;}
.bell-item.unread{background:#f2f7ff;}
.bell-item-title{font-weight:700; margin-bottom:2px;}
.bell-item-body{color:var(--grey); font-size:0.82rem; line-height:1.4;}
.bell-item-time{color:var(--grey-soft); font-size:0.72rem; margin-top:4px;}

/* notifications full list page */
.notif-row{display:flex; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--line);}
.notif-row.unread{background:#f9fbff; margin:0 -16px; padding:16px; border-radius:var(--radius-sm);}
.notif-row .title{font-weight:700;}
.notif-row .body{color:var(--grey); font-size:0.9rem; margin-top:2px;}
.notif-row .time{color:var(--grey-soft); font-size:0.78rem; white-space:nowrap;}

@media (max-width:700px){
  .hero-top{flex-direction:column;}
  .hero-acct{text-align:left;}
  .dash-grid{grid-template-columns:1fr !important;}
  .stat-row{grid-template-columns:1fr;}
}

/* =============== filter chips (history) =============== */
.filter-chips{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;}
.chip{
  background:#eef2f8; color:var(--ink-soft); border:1px solid transparent; border-radius:20px;
  padding:7px 16px; font-size:0.82rem; font-weight:700; cursor:pointer;
}
.chip:hover{background:#e3e9f2;}
.chip.active{background:var(--navy-900); color:#fff;}

/* =============== type icon (history rows) =============== */
.type-cell{display:flex; align-items:center; gap:10px;}
.type-icon{
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; background:var(--blue-bg); color:var(--blue-700);
}
.type-icon.intl{background:var(--amber-bg); color:var(--amber);}
.type-icon svg{width:16px; height:16px;}

/* =============== empty state =============== */
.empty-state{text-align:center; padding:48px 20px; color:var(--grey);}
.empty-state svg{width:40px; height:40px; color:var(--grey-soft); margin-bottom:12px;}
.empty-state p{margin-bottom:4px;}

/* =============== segmented control (transfer type) =============== */
.segmented{display:flex; gap:8px; background:#eef2f8; border-radius:12px; padding:5px;}
.segmented input{display:none;}
.segmented label{
  flex:1; text-align:center; padding:10px 14px; border-radius:8px; font-size:0.86rem; font-weight:700;
  color:var(--ink-soft); cursor:pointer; transition:background .15s, color .15s;
}
.segmented input:checked + label{background:#fff; color:var(--navy-900); box-shadow:var(--shadow-sm);}

/* =============== info strip (transfer summary) =============== */
.info-strip{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  background:var(--blue-bg); color:var(--blue-700); border-radius:var(--radius-sm);
  padding:13px 16px; font-size:0.87rem; font-weight:600; margin-bottom:20px;
}
.transfer-layout{display:grid; grid-template-columns:1.5fr 1fr; gap:24px; align-items:start;}
.tips-card ul{padding-left:18px; color:var(--ink-soft); font-size:0.87rem; line-height:1.8;}
@media (max-width:800px){ .transfer-layout{grid-template-columns:1fr;} }

/* =============== profile banner =============== */
.profile-banner{
  height:96px; border-radius:var(--radius) var(--radius) 0 0; margin:-28px -28px 0;
  background:linear-gradient(120deg,var(--navy-950),var(--navy-800) 60%, var(--blue-700));
}
.profile-header{display:flex; align-items:flex-end; gap:20px; margin-top:-40px; padding:0 4px;}
.profile-header .avatar-lg{border:4px solid #fff; box-shadow:var(--shadow);}
.profile-header h2{margin-bottom:2px;}
.file-upload-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}

/* =============== account cards (My accounts) =============== */
.account-card{display:flex; flex-direction:column;}
.account-card-head{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.account-card-icon{
  width:42px; height:42px; border-radius:10px; flex-shrink:0;
  background:var(--blue-bg); color:var(--blue-700);
  display:flex; align-items:center; justify-content:center;
}
.account-card-icon svg{width:21px; height:21px;}
.account-card-type{font-weight:700; font-size:0.95rem;}
.account-card-balance{font-size:1.6rem; font-weight:800; font-family:'Manrope',sans-serif; margin-top:2px;}
.account-card-actions{display:flex; gap:10px; margin-top:auto; padding-top:18px;}
.account-card-add{
  align-items:center; justify-content:center; text-align:center; gap:8px;
  border:1.5px dashed var(--line); color:var(--grey); box-shadow:none; min-height:150px;
}
.account-card-add svg{width:26px; height:26px; color:var(--blue-600);}
.account-card-add span{font-weight:700; color:var(--ink);}
.account-card-add:hover{border-color:var(--blue-500); background:#f8fafd;}
@media (max-width:800px){ .dash-grid{grid-template-columns:1fr !important;} }

/* =============== row-list account layout (alt. to card-grid) =============== */
.accounts-layout{display:grid; grid-template-columns:1.6fr 1fr; gap:24px; align-items:start;}
.account-group-head{
  display:flex; justify-content:space-between; align-items:center; font-size:0.76rem;
  text-transform:uppercase; letter-spacing:0.05em; color:var(--grey); font-weight:700;
  padding-bottom:12px; margin-bottom:2px; border-bottom:1px solid var(--line);
}
.account-row{display:flex; justify-content:space-between; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line-soft); gap:18px; flex-wrap:wrap;}
.account-row:last-child{border-bottom:none; padding-bottom:4px;}
.account-row-main{min-width:170px;}
.account-row-type{color:var(--blue-700); font-weight:700; font-size:0.92rem;}
.account-row-balance{font-size:1.55rem; font-weight:800; font-family:'Manrope',sans-serif; margin-top:4px;}
.account-row-sub{color:var(--grey); font-size:0.78rem; margin-top:2px;}
.account-row-stats{display:flex; gap:32px; flex:1; min-width:220px; flex-wrap:wrap;}
.account-row-stat{font-size:0.8rem; color:var(--grey);}
.account-row-stat .amt{display:block; font-weight:700; color:var(--ink); margin-top:3px; font-size:0.9rem;}
.account-row-actions{display:flex; align-items:center; gap:16px; font-size:0.85rem; font-weight:700; white-space:nowrap;}
.account-row-menu{color:var(--grey-soft); font-size:1.2rem; letter-spacing:1px; cursor:pointer;}

.side-widget{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:18px; box-shadow:var(--shadow-sm);}
.side-widget h3{font-size:0.76rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--grey); font-weight:700; margin-bottom:14px;}
.side-widget .big{font-size:1.7rem; font-weight:800; font-family:'Manrope',sans-serif;}
.side-widget .big-label{font-size:0.78rem; color:var(--grey); margin-top:2px;}
.side-promo{padding:0; overflow:hidden;}
.side-promo img{width:100%; height:92px; object-fit:cover; display:block;}
.side-promo-body{padding:18px 20px;}
.side-promo-body strong{display:block; font-size:0.92rem; margin-bottom:4px;}
.side-promo-body p{font-size:0.82rem; color:var(--grey); margin-bottom:10px; line-height:1.5;}
.gauge-wrap{display:flex; align-items:center; gap:16px;}
.gauge-ring{width:56px; height:56px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.85rem; color:#fff;}

/* =============== dashboard account-chip strip =============== */
.acct-strip{display:flex; gap:8px; flex-wrap:wrap;}
.acct-chip{
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:7px 11px;
  display:flex; flex-direction:column; gap:1px; min-width:100px; color:var(--ink);
  transition:border-color .15s, background .15s;
}
.acct-chip:hover{border-color:var(--blue-500); background:#f8fafd;}
.acct-chip-type{font-size:0.66rem; color:var(--grey); text-transform:uppercase; letter-spacing:0.04em; font-weight:700;}
.acct-chip-balance{font-weight:800; font-size:0.86rem;}

/* =============== page grid: main content + right sidebar =============== */
.acct-page-grid{display:grid; grid-template-columns:1fr 320px; gap:24px; align-items:start;}
@media (max-width:900px){ .acct-page-grid{grid-template-columns:1fr;} }

/* =============== sidebar widgets (Perks / promo / verification) =============== */
.side-card{margin-bottom:20px; padding:24px;}
.side-card-label{font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--grey); margin-bottom:10px;}
.side-points{font-size:1.9rem; font-weight:800; font-family:'Manrope',sans-serif; line-height:1.1;}
.side-points-unit{font-size:0.85rem; color:var(--grey); margin-top:2px;}
.side-link{display:inline-block; margin-top:12px; font-size:0.86rem; font-weight:700; color:var(--blue-700);}

.side-promo-card{padding:0; overflow:hidden;}
.side-promo-img{display:block; width:100%; height:150px; object-fit:cover; background:var(--paper);}
.side-promo-body{padding:20px 24px;}
.side-promo-title{font-weight:800; font-size:1rem; margin-bottom:6px;}
.side-promo-text{color:var(--grey); font-size:0.86rem; line-height:1.5; margin-bottom:2px;}

.side-status-row{display:flex; align-items:center; gap:14px;}
.side-status-icon{
  width:48px; height:48px; border-radius:50%; flex-shrink:0; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.side-status-icon svg{width:22px; height:22px;}
.side-status-green{background:var(--green);}
.side-status-red{background:var(--red);}
.side-status-amber{background:var(--amber);}
.side-status-grey{background:var(--grey-soft);}
.side-status-title{font-weight:700; font-size:0.95rem;}
.side-status-sub{color:var(--grey); font-size:0.85rem; margin-top:2px;}

/* =============== recipient verify flow (Pay & transfer) =============== */
.verify-row{display:flex; gap:10px;}
.verify-row input{flex:1;}
.verify-row .btn{flex-shrink:0;}
#verify-status{min-height:18px; margin-top:6px;}
.recipient-confirm-card{
  border:1.5px solid var(--green); background:var(--green-bg); border-radius:var(--radius-sm);
  padding:16px 18px;
}
.recipient-confirm-row{display:flex; justify-content:space-between; padding:6px 0; font-size:0.9rem;}
.recipient-confirm-row .k{color:var(--grey); font-weight:600;}
.recipient-confirm-row span:last-child{font-weight:700; color:var(--ink);}

/* =============== sidebar: chart / news / market-cap widgets =============== */
.side-chart-wrap{position:relative; height:56px; margin-top:10px;}
.side-chg-up{color:var(--green);}
.side-chg-down{color:var(--red);}
.side-news-item{padding:10px 0; border-bottom:1px solid var(--line-soft);}
.side-news-item:last-of-type{border-bottom:none; padding-bottom:4px;}
.side-news-headline{font-size:0.86rem; font-weight:600; line-height:1.4;}
.side-news-region{
  display:inline-block; font-size:0.62rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em;
  background:var(--blue-bg); color:var(--blue-700); padding:1px 6px; border-radius:4px; margin-right:4px; vertical-align:1px;
}
.side-news-time{font-size:0.74rem; color:var(--grey); margin-top:2px;}

/* =============== transfer page: account picker + amount panel =============== */
.picker-label{font-size:0.83rem; font-weight:700; margin-bottom:8px; color:var(--ink-soft); display:block;}
.account-picker{display:grid; grid-template-columns:repeat(auto-fit, minmax(88px,1fr)); gap:6px; margin-bottom:14px;}
.account-picker input{display:none;}
.account-picker label{
  display:flex; flex-direction:column; gap:1px; padding:6px 7px; cursor:pointer;
  border:1.5px solid var(--line); border-radius:var(--radius-sm); background:#fff;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.account-picker label:hover{border-color:var(--blue-500);}
.account-picker input:checked + label{border-color:var(--blue-600); background:var(--blue-bg); box-shadow:0 0 0 3px rgba(11,99,214,0.12);}
.account-picker input:disabled + label{opacity:0.38; cursor:not-allowed; background:#f5f6f8;}
.ap-type{font-size:0.58rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--grey); display:flex; justify-content:space-between; align-items:center; gap:4px;}
.ap-check{width:11px; height:11px; border-radius:50%; border:1.5px solid var(--line); flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;}
.account-picker input:checked + label .ap-check{border-color:var(--blue-600); background:var(--blue-600);}
.account-picker input:checked + label .ap-check::after{content:''; width:4px; height:4px; border-radius:50%; background:#fff;}
.ap-number{font-size:0.62rem; color:var(--grey); margin-top:0;}
.ap-balance{font-weight:800; font-size:0.72rem; margin-top:2px;}

.transfer-arrow{display:flex; align-items:center; justify-content:center; margin:-6px 0 14px; color:var(--grey-soft);}
.transfer-arrow svg{width:16px; height:16px;}

.amount-panel{
  border:1.5px solid var(--line); border-radius:var(--radius); padding:18px 20px;
  margin-bottom:16px; background:#fbfcfe; text-align:center;
}
.amount-panel label{display:block; font-size:0.76rem; font-weight:700; color:var(--grey); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px;}
.amount-input-row{display:flex; align-items:center; justify-content:center; gap:4px;}
.amount-currency{font-size:1.6rem; font-weight:800; color:var(--grey-soft);}
.amount-input-row input{
  border:none; background:none; font-size:2.1rem; font-weight:800; text-align:center;
  width:100%; max-width:240px; padding:0; color:var(--ink); font-family:'Manrope',sans-serif;
}
.amount-input-row input::-webkit-outer-spin-button,
.amount-input-row input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.amount-input-row input[type=number]{-moz-appearance:textfield;}
.amount-input-row input:focus{outline:none; box-shadow:none;}
.amount-available{font-size:0.76rem; color:var(--grey); margin-top:6px;}

.tips-list{list-style:none; padding:0; margin:0; display:flex; align-items:stretch; gap:0;}
.tips-list li{
  flex:1 1 0; min-width:0; display:flex; gap:8px; align-items:flex-start;
  padding:2px 16px; border-right:1px solid var(--line-soft); border-bottom:none;
  font-size:0.78rem; color:var(--ink-soft); line-height:1.45;
}
.tips-list li:first-child{padding-left:0;}
.tips-list li:last-child{border-right:none; padding-right:0;}
.tips-list .ti{
  width:18px; height:18px; border-radius:50%; background:var(--blue-bg); color:var(--blue-700);
  flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.tips-list .ti svg{width:10px; height:10px;}
@media (max-width:1000px){
  .tips-list{flex-wrap:wrap;}
  .tips-list li{flex:1 1 45%; border-right:none; border-bottom:1px solid var(--line-soft); padding:8px 0;}
}
@media (max-width:640px){
  .tips-list li{flex:1 1 100%;}
}

/* =============== row-list account groups (My bank accounts / My credit cards) =============== */
.acct-group{padding:0; overflow:hidden;}
.acct-group-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; border-bottom:1px solid var(--line);
}
.acct-group-head h2{margin:0; font-size:0.86rem; font-weight:700; color:var(--ink-soft); display:flex; align-items:center; gap:7px;}
.acct-group-head h2::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--blue-600); flex-shrink:0;}
.kebab-btn{background:none; border:none; color:var(--grey); cursor:pointer; font-size:1.1rem; line-height:1; padding:4px 6px; border-radius:6px;}
.kebab-btn:hover{background:#f0f3f8;}

.acct-row{padding:16px 20px; border-bottom:1px solid var(--line-soft); display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px 28px;}
.acct-row:last-child{border-bottom:none;}
.acct-row-id{min-width:150px;}
.acct-row-id a{font-size:0.78rem; font-weight:700; color:var(--blue-700); letter-spacing:0.02em; text-transform:uppercase;}
.acct-row-balance{font-size:1.3rem; font-weight:800; margin-top:5px; font-family:'Manrope',sans-serif;}
.acct-row-balance-label{font-size:0.76rem; color:var(--grey); margin-top:1px;}

.acct-row-hold{
  display:flex; align-items:center; gap:6px; font-size:0.78rem; color:var(--amber);
  flex-basis:100%; order:1; margin-top:-6px;
}
.acct-row-hold svg{width:14px; height:14px; flex-shrink:0;}

.acct-row-stats{display:flex; gap:28px; flex-wrap:wrap;}
.acct-row-stats div{font-size:0.76rem; color:var(--grey);}
.acct-row-stats b{display:block; color:var(--ink); font-size:0.92rem; font-weight:700; font-family:'Manrope',sans-serif;}

.acct-row-actions{
  display:flex; align-items:center; gap:10px; font-size:0.82rem; font-weight:700;
  margin-left:auto; white-space:nowrap;
}
@media (max-width:640px){
  .acct-row{flex-direction:column; gap:10px;}
  .acct-row-actions{margin-left:0;}
}

/* =============== toggle switches (security & notification settings) =============== */
.settings-group{margin-bottom:22px;}
.settings-group:last-child{margin-bottom:0;}
.settings-group h3{font-size:0.95rem; margin-bottom:2px;}
.settings-group .help-text{margin-bottom:14px;}
.toggle-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--line-soft);
}
.toggle-row:last-child{border-bottom:none;}
.toggle-row-label{font-size:0.88rem; font-weight:600;}
.toggle-row-sub{font-size:0.78rem; color:var(--grey); margin-top:1px;}
.toggle-switch{position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0;}
.toggle-switch input{opacity:0; width:0; height:0;}
.toggle-slider{
  position:absolute; cursor:pointer; inset:0; background:var(--line);
  border-radius:24px; transition:background .15s;
}
.toggle-slider::before{
  content:''; position:absolute; width:18px; height:18px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider{background:var(--blue-600);}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(18px);}
.toggle-switch input:disabled + .toggle-slider{opacity:0.5; cursor:not-allowed;}

/* =============== OTP verification screens =============== */
.otp-shell{max-width:460px; margin:0 auto;}
.otp-icon{
  width:56px; height:56px; border-radius:50%; margin:0 auto 16px;
  background:linear-gradient(135deg,var(--navy-950),var(--blue-700)); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.otp-icon svg{width:26px; height:26px;}
.otp-digit-row{display:flex; gap:8px; justify-content:center; margin:20px 0 6px;}
.otp-digit-row input{
  width:44px; height:52px; text-align:center; font-size:1.5rem; font-weight:800;
  border:1.5px solid var(--line); border-radius:var(--radius-sm); font-family:'Manrope',sans-serif;
  padding:0;
}
.otp-digit-row input:focus{border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(11,99,214,0.14);}
.otp-summary{
  background:var(--paper); border-radius:var(--radius-sm); padding:14px 16px;
  margin:18px 0; text-align:left;
}
.otp-summary-row{display:flex; justify-content:space-between; padding:5px 0; font-size:0.88rem;}
.otp-summary-row .k{color:var(--grey);}
.otp-summary-row .v{font-weight:700;}

/* =============== transfer page: left menu + frame + horizontal tips =============== */
.transfer-shell{
  display:grid; grid-template-columns:212px 1fr 300px; grid-template-rows:auto auto;
  gap:20px; align-items:start;
}
.transfer-menu{grid-column:1; grid-row:1;}
.transfer-frame{grid-column:2; grid-row:1;}
.transfer-sidebar{grid-column:3; grid-row:1;}
.transfer-tips-strip{grid-column:1 / -1; grid-row:2;}
@media (max-width:1100px){
  .transfer-shell{grid-template-columns:200px 1fr;}
  .transfer-sidebar{grid-column:1 / -1; grid-row:3;}
  .transfer-tips-strip{grid-column:1 / -1;}
}
@media (max-width:760px){
  .transfer-shell{grid-template-columns:1fr;}
  .transfer-menu{grid-column:1; grid-row:1;}
  .transfer-frame{grid-column:1; grid-row:2;}
  .transfer-tips-strip{grid-column:1; grid-row:3;}
  .transfer-sidebar{grid-column:1; grid-row:4;}
}

.tmenu{padding:8px; display:flex; flex-direction:column; gap:2px;}
.tmenu input{display:none;}
.tmenu label{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--radius-sm);
  cursor:pointer; font-size:0.86rem; font-weight:700; color:var(--ink-soft);
  border-left:3px solid transparent; transition:background .15s, color .15s;
}
.tmenu label svg{width:18px; height:18px; flex-shrink:0; color:var(--grey);}
.tmenu label:hover{background:#f5f7fb;}
.tmenu input:checked + label{background:var(--blue-bg); color:var(--blue-700); border-left-color:var(--blue-600);}
.tmenu input:checked + label svg{color:var(--blue-700);}
.tmenu input:disabled:not(:checked) + label{opacity:0.4; cursor:default;}
.tmenu input:disabled:not(:checked) + label:hover{background:none;}

.transfer-frame-head{padding:20px 24px 0;}
.transfer-frame-head h2{font-size:1.05rem; margin-bottom:2px;}
.transfer-frame-head p{color:var(--grey); font-size:0.84rem;}
.transfer-frame-body{padding:16px 24px 24px;}

.tips-strip-inner{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px;}
.tips-strip-item{display:flex; gap:10px; align-items:flex-start; font-size:0.82rem; color:var(--ink-soft); line-height:1.45;}
.tips-strip-item .ti{
  width:22px; height:22px; border-radius:50%; background:var(--blue-bg); color:var(--blue-700);
  flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.tips-strip-item .ti svg{width:12px; height:12px;}

/* =============== transfer confirmation slip =============== */
.slip{max-width:520px; margin:0 auto;}
.slip-card{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); background:#fff;}
.slip-banner{
  background:
    radial-gradient(circle at 85% 0%, rgba(47,125,224,0.4), transparent 50%),
    linear-gradient(155deg,var(--navy-950),var(--navy-800));
  color:#fff; padding:28px 30px 24px; text-align:center; position:relative; overflow:hidden;
}
.slip-banner::before{
  content:''; position:absolute; inset:0; opacity:0.4; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size:36px 36px;
}
.slip-brand{position:relative; font-weight:800; font-size:1rem; letter-spacing:0.02em; margin-bottom:18px; opacity:0.9;}
.slip-status-icon{
  width:56px; height:56px; border-radius:50%; margin:0 auto 12px; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.slip-status-icon.ok{background:rgba(14,138,83,0.2); color:#4ade95;}
.slip-status-icon.pending{background:rgba(201,150,46,0.2); color:#f0c56b;}
.slip-status-icon.bad{background:rgba(192,57,47,0.2); color:#f38b7e;}
.slip-status-icon svg{width:28px; height:28px;}
.slip-amount{position:relative; font-size:2.3rem; font-weight:800; font-family:'Manrope',sans-serif;}
.slip-status-label{position:relative; font-size:0.82rem; color:#a9b8d6; margin-top:4px; text-transform:uppercase; letter-spacing:0.05em; font-weight:700;}

.slip-tear{height:14px; background:linear-gradient(-45deg, var(--navy-800) 7px, transparent 0), linear-gradient(45deg, var(--navy-800) 7px, transparent 0); background-size:14px 14px; background-repeat:repeat-x; background-position:left top;}

.slip-body{padding:26px 30px 8px;}
.slip-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--line); font-size:0.88rem; gap:16px;}
.slip-row:last-child{border-bottom:none;}
.slip-row .k{color:var(--grey); flex-shrink:0;}
.slip-row .v{font-weight:700; text-align:right;}
.slip-foot{padding:18px 30px 26px; text-align:center;}
.slip-foot p{color:var(--grey-soft); font-size:0.76rem; line-height:1.5;}

/* admin dashboard quick-links row */
.quick-links{display:flex; flex-wrap:wrap; gap:10px;}

/* =============== rich-text editor (messaging) =============== */
.rte-toolbar{display:flex; gap:4px; padding:6px; border:1px solid var(--line); border-bottom:none; border-radius:var(--radius-sm) var(--radius-sm) 0 0; background:#f7f9fc;}
.rte-toolbar button{
  width:30px; height:30px; border:none; background:none; border-radius:6px;
  font-size:0.86rem; font-weight:700; color:var(--ink-soft); cursor:pointer;
}
.rte-toolbar button:hover{background:#e9edf3;}
.rte-editable{
  min-height:160px; padding:12px 14px; border:1.5px solid var(--line); border-radius:0 0 var(--radius-sm) var(--radius-sm);
  font-size:0.9rem; line-height:1.6; background:#fff;
}
.rte-editable:empty:before{content:attr(data-placeholder); color:var(--grey-soft);}
.rte-editable:focus{outline:none; border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(11,99,214,0.14);}
.rte-editable ul{padding-left:20px;}
.rte-editable a{color:var(--blue-700); text-decoration:underline;}

/* =============== message thread =============== */
.msg-thread{display:flex; flex-direction:column; gap:14px; max-height:520px; overflow-y:auto; padding:4px 4px 14px;}
.msg-bubble{max-width:78%; padding:12px 16px; border-radius:14px; font-size:0.88rem; line-height:1.55;}
.msg-bubble.from-user{background:#f0f3f8; align-self:flex-start; border-bottom-left-radius:4px;}
.msg-bubble.from-admin{background:var(--blue-600); color:#fff; align-self:flex-end; border-bottom-right-radius:4px;}
.msg-bubble.from-admin a{color:#dbe9fd;}
.msg-meta{font-size:0.72rem; margin-top:6px; opacity:0.7;}
.msg-empty{text-align:center; color:var(--grey); padding:40px 20px;}
.msg-inbox-row{display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--line-soft); gap:12px;}
.msg-inbox-row:last-child{border-bottom:none;}
.msg-inbox-name{font-weight:700;}
.msg-inbox-preview{font-size:0.82rem; color:var(--grey); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:340px;}

/* =============== masthead: mobile fix (prevents sign-out overflowing off-screen) =============== */
@media (max-width:600px){
  .wrap{padding:0 12px;}
  .masthead-inner{gap:4px;}
  .masthead-left{gap:2px;}
  .wordmark-placeholder{display:none;}
  .brand-tagline{display:none;}
  .masthead-brand{margin-left:2px; gap:0;}
  .more-menu-btn span:not(.visually-hidden){display:none;}
  .more-menu-btn{padding:8px;}
  .icon-btn[aria-label="Search"]{display:none;}
  .topbar-right{gap:2px;}
  .signout-btn{padding:8px 10px; font-size:0.72rem; margin-left:2px;}
  .avatar-btn{width:30px; height:30px; font-size:0.72rem;}
}
@media (max-width:380px){
  .signout-btn span{display:none;}
  .signout-btn .signout-icon{display:inline-block !important;}
  .signout-btn{padding:8px; width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;}
}

/* =============== mobile: form/detail grids that had no override at all =============== */
@media (max-width:640px){
  .form-row{grid-template-columns:1fr; gap:0;}
  .detail-grid{grid-template-columns:1fr 1fr; gap:10px;}
  .verify-row{flex-direction:column; align-items:stretch;}
  .verify-row .btn{width:100%;}
  .amount-input-row input{max-width:160px; font-size:1.7rem;}
  .msg-bubble{max-width:92%;}
  .recipient-confirm-row{flex-wrap:wrap; gap:2px;}
}
@media (max-width:420px){
  .detail-grid{grid-template-columns:1fr;}
}

/* Tables: scroll horizontally instead of squeezing/overflowing on mobile.
   Wraps every table in a scrollable strip without needing to touch markup. */
@media (max-width:700px){
  table{display:block; width:100%; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;}
  table thead, table tbody, table tr{display:table; width:100%; table-layout:auto;}
}

/* =============== mobile: universal width safety net =============== */
img, canvas, svg, iframe, video{max-width:100%; height:auto;}
.chart-wrap canvas{width:100% !important;}
.card, .acct-page-grid > div, .dash-grid > div, .transfer-shell > div{min-width:0;}
@media (max-width:480px){
  .card{padding:14px 16px;}
  .stat-row{gap:8px;}
  .stat-card{padding:10px 12px;}
}

/* =============== bill pay: biller picker cards =============== */
.biller-picker{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:10px; margin-bottom:8px;}
.biller-picker input{display:none;}
.biller-picker label{
  display:flex; align-items:center; gap:10px; padding:12px 13px; cursor:pointer;
  border:1.5px solid var(--line); border-radius:var(--radius-sm); background:#fff;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.biller-picker label:hover{border-color:var(--blue-500);}
.biller-picker input:checked + label{border-color:var(--blue-600); background:var(--blue-bg); box-shadow:0 0 0 3px rgba(11,99,214,0.12);}
.biller-icon{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; background:var(--blue-bg); color:var(--blue-700);
}
.biller-icon svg{width:19px; height:19px;}
.biller-picker input:checked + label .biller-icon{background:var(--blue-600); color:#fff;}
.biller-label-text{min-width:0;}
.biller-name{font-size:0.86rem; font-weight:700; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.biller-cat{font-size:0.7rem; color:var(--grey); margin-top:1px;}
.biller-picker-more label{
  display:flex; align-items:center; justify-content:center; gap:8px; color:var(--blue-700); font-weight:700; font-size:0.84rem;
  border:1.5px dashed var(--line); background:#fbfcfe;
}
.biller-picker-more label:hover{border-color:var(--blue-500); background:var(--blue-bg);}

/* =====================================================================
   v2 FEATURE MODULES — cards, statements, scheduled transfers,
   savings goals, spending insights, security centre.
   Built on the same tokens as everything above; no new palette.
   ===================================================================== */

/* ---- shared table utilities ---- */
td.num, th.num{text-align:right;}
.nowrap{white-space:nowrap;}

.timeline{list-style:none; margin:10px 0 0; padding:0; border-left:2px solid var(--line-soft);}
.timeline li{position:relative; padding:0 0 14px 18px; font-size:0.86rem; color:var(--ink-soft);}
.timeline li:last-child{padding-bottom:0;}
.timeline li::before{
  content:''; position:absolute; left:-5px; top:6px; width:8px; height:8px;
  border-radius:50%; background:var(--blue-500); border:2px solid var(--card);
}
.timeline-time{display:block; font-size:0.74rem; color:var(--grey-soft); font-weight:600; letter-spacing:0.02em;}

.card-history{margin-top:16px; border-top:1px solid var(--line-soft); padding-top:12px;}
.card-history summary{cursor:pointer; font-size:0.84rem; font-weight:700; color:var(--blue-700); list-style:none;}
.card-history summary::-webkit-details-marker{display:none;}
.card-history summary::before{content:"\25B8  "; color:var(--grey-soft);}
.card-history[open] summary::before{content:"\25BE  ";}

.card-action-row{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0;}

/* ---- CARDS ---------------------------------------------------------- */
.card-wallet-item{display:grid; grid-template-columns:320px 1fr; gap:26px; align-items:start;}

.bank-card{
  position:relative; aspect-ratio:1.586; border-radius:16px; padding:20px;
  display:flex; flex-direction:column; justify-content:space-between;
  color:#fff; overflow:hidden; box-shadow:var(--shadow-lg);
  background:linear-gradient(135deg,var(--navy-950) 0%,var(--navy-800) 55%,var(--blue-700) 100%);
}
.bank-card::after{
  /* soft diagonal sheen */
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,0.16) 0%,rgba(255,255,255,0) 42%);
  pointer-events:none;
}
.bank-card-mastercard{background:linear-gradient(135deg,#1c1c22 0%,#39353d 50%,#6b4d16 100%);}
.bank-card-inactive{filter:saturate(0.35) brightness(0.8);}

.bank-card-top{display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:1;}
.bank-card-type{font-size:0.68rem; font-weight:800; letter-spacing:0.14em; opacity:0.78;}
.bank-card-network{font-family:'Manrope',sans-serif; font-size:0.95rem; font-weight:800; letter-spacing:0.02em;}

.bank-card-chip{
  width:42px; height:31px; border-radius:6px; position:relative; z-index:1;
  background:linear-gradient(135deg,#e7c77a,#bb9540 45%,#f1dca6 70%,#a97a1c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.12);
}
.bank-card-chip::after{
  content:''; position:absolute; inset:7px 5px;
  background:
    linear-gradient(to right,transparent 46%,rgba(0,0,0,0.22) 46%,rgba(0,0,0,0.22) 54%,transparent 54%),
    linear-gradient(to bottom,transparent 46%,rgba(0,0,0,0.22) 46%,rgba(0,0,0,0.22) 54%,transparent 54%);
}

.bank-card-number{
  font-size:1.18rem; font-weight:600; letter-spacing:0.06em; position:relative; z-index:1;
  text-shadow:0 1px 2px rgba(0,0,0,0.25);
}
.bank-card-bottom{display:flex; gap:22px; position:relative; z-index:1;}
.bank-card-label{display:block; font-size:0.6rem; letter-spacing:0.12em; opacity:0.68; font-weight:700;}
.bank-card-value{display:block; font-size:0.82rem; font-weight:700; letter-spacing:0.02em;}

.bank-card-overlay{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
  background:rgba(8,18,38,0.56); backdrop-filter:blur(1.5px);
  font-family:'Manrope',sans-serif; font-size:1.05rem; font-weight:800;
  letter-spacing:0.18em; text-transform:uppercase;
}

.card-wallet-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.card-controls{margin-top:18px; border-top:1px solid var(--line-soft); padding-top:16px;}
.card-toggle-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px; margin:6px 0 16px;}
.card-toggle{display:flex; align-items:center; gap:9px; font-size:0.86rem; color:var(--ink-soft); cursor:pointer;}
.card-toggle input{width:16px; height:16px; accent-color:var(--blue-600); cursor:pointer;}

/* ---- STATEMENTS ----------------------------------------------------- */
.stmt-toolbar{display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap;}
.stmt-toolbar-actions{display:flex; gap:8px; flex-wrap:wrap;}
.stmt-toolbar-actions .btn{display:inline-flex; align-items:center; gap:7px;}

.stmt-sheet{padding:0; overflow:hidden;}
.stmt-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap;
  padding:24px 26px; background:linear-gradient(135deg,var(--navy-950),var(--navy-800)); color:#fff;
}
.stmt-head h2{color:#fff;}
.stmt-head .help-text{color:rgba(255,255,255,0.72);}
.stmt-head-right{text-align:right;}
.stmt-head-label{display:block; font-size:0.68rem; letter-spacing:0.12em; font-weight:700; opacity:0.7;}
.stmt-head-balance{display:block; font-family:'Manrope',sans-serif; font-size:1.7rem; font-weight:800;}

.stmt-meta{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--line-soft); border-bottom:1px solid var(--line);
}
.stmt-meta > div{background:var(--card); padding:14px 26px;}
.stmt-meta span{display:block; font-size:0.7rem; letter-spacing:0.08em; font-weight:700; color:var(--grey-soft); text-transform:uppercase;}
.stmt-meta b{font-size:0.95rem;}

.stmt-table{font-size:0.86rem;}
.stmt-table th{
  background:#f6f8fc; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--navy-800); padding:11px 14px; text-align:left; border-bottom:1px solid var(--line);
}
.stmt-table td{padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top;}
.stmt-table tbody tr:hover td{background:#fafbfe;}
.stmt-opening td, .stmt-closing td{background:#f6f8fc !important; color:var(--navy-900);}
.stmt-credit{color:var(--green); font-weight:700;}
.stmt-debit{color:var(--red); font-weight:700;}
.stmt-ref a{font-size:0.78rem;}
.stmt-cat{
  display:inline-block; margin-left:7px; padding:1px 8px; border-radius:20px;
  font-size:0.66rem; font-weight:700; letter-spacing:0.02em;
  color:var(--cat,var(--grey)); background:#f4f6fa;
  border:1px solid var(--line);
}
.stmt-footnote{padding:18px 26px; border-top:1px solid var(--line); background:#fbfcfe; margin:0;}

@media print{
  .demo-strip,.ticker-bar,.masthead,.tabstrip,.stmt-toolbar,.site-footer,.app-footer,.shell-footer{display:none !important;}
  .stmt-sheet{box-shadow:none; border:none;}
  .stmt-head{background:#0b1c3a !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
}

/* ---- SCHEDULED TRANSFERS ------------------------------------------- */
.sched-dest{border:none; padding:0; margin:0;}
.sched-dest[hidden]{display:none;}

/* ---- SAVINGS GOALS -------------------------------------------------- */
.goals-summary{display:grid; grid-template-columns:1fr 1fr; gap:16px 26px;}
.goals-summary-label{display:block; font-size:0.72rem; letter-spacing:0.08em; font-weight:700; color:var(--grey-soft); text-transform:uppercase;}
.goals-summary-value{display:block; font-family:'Manrope',sans-serif; font-size:1.5rem; font-weight:800; color:var(--navy-900);}
.goals-summary-bar{grid-column:1 / -1; height:9px; border-radius:20px; background:var(--line-soft); overflow:hidden;}
.goals-summary-fill{height:100%; border-radius:20px; background:linear-gradient(90deg,var(--blue-600),var(--green));}

.goal-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:18px;}
.goal-card{display:flex; flex-direction:column;}
.goal-achieved{border-left:4px solid var(--green);}
.goal-card-head{display:flex; gap:13px; align-items:flex-start; margin-bottom:14px;}
.goal-card-head h3{font-size:1.02rem;}
.goal-icon{
  flex:0 0 auto; width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:var(--blue-bg); color:var(--blue-700);
}
.goal-icon svg{width:21px; height:21px;}

.goal-amounts{display:flex; align-items:baseline; gap:7px; margin-bottom:9px;}
.goal-amounts b{font-family:'Manrope',sans-serif; font-size:1.32rem; font-weight:800; color:var(--navy-900);}
.goal-amounts span{font-size:0.82rem; color:var(--grey);}

.goal-bar{height:8px; border-radius:20px; background:var(--line-soft); overflow:hidden;}
.goal-bar-fill{height:100%; border-radius:20px; background:linear-gradient(90deg,var(--blue-500),var(--blue-700)); transition:width 0.4s ease;}
.goal-achieved .goal-bar-fill{background:linear-gradient(90deg,var(--green),#0b6b41);}
.goal-progress-note{margin:8px 0 0;}
.goal-hint{margin:6px 0 0; color:var(--blue-700);}

.goal-actions{margin-top:auto; padding-top:14px; display:flex; flex-direction:column; gap:9px;}
.goal-amount-form{display:flex; gap:7px; align-items:center;}
.goal-amount-form input{flex:1 1 auto; min-width:0;}

.icon-picker{display:flex; flex-wrap:wrap; gap:9px;}
.icon-choice{cursor:pointer; position:relative;}
.icon-choice input{position:absolute; opacity:0; pointer-events:none;}
.icon-choice svg{
  width:40px; height:40px; padding:9px; border-radius:11px;
  border:1.5px solid var(--line); color:var(--grey); background:var(--card);
  transition:all 0.15s ease;
}
.icon-choice:hover svg{border-color:var(--blue-500); color:var(--blue-700);}
.icon-choice input:checked + svg{border-color:var(--blue-600); background:var(--blue-bg); color:var(--blue-700);}
.icon-choice input:focus-visible + svg{outline:2px solid var(--blue-500); outline-offset:2px;}

/* ---- SPENDING INSIGHTS --------------------------------------------- */
.insight-head{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap;}
.insight-total{font-family:'Manrope',sans-serif; font-size:2rem; font-weight:800; color:var(--navy-900); line-height:1.15; margin-top:6px;}
.insight-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.insight-donut-wrap{position:relative; height:220px; margin:6px 0 14px;}

.insight-legend{list-style:none; margin:0; padding:0;}
.insight-legend li{
  display:grid; grid-template-columns:12px 1fr auto auto; gap:10px; align-items:center;
  padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:0.86rem;
}
.insight-legend li:last-child{border-bottom:none;}
.insight-legend-name{color:var(--ink-soft);}
.insight-legend-amount{font-weight:700; color:var(--navy-900);}
.insight-legend-share{font-size:0.76rem; color:var(--grey-soft); min-width:34px; text-align:right;}

.insight-swatch{display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:-1px; margin-right:6px;}

.insight-list{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:9px;}
.insight-item{
  padding:11px 14px; border-radius:var(--radius-sm); font-size:0.88rem; line-height:1.5;
  border-left:3px solid var(--grey-soft); background:#f7f9fc; color:var(--ink-soft);
}
.insight-warning{border-left-color:var(--amber); background:var(--amber-bg); color:var(--amber);}
.insight-good{border-left-color:var(--green); background:var(--green-bg); color:var(--green);}
.insight-neutral{border-left-color:var(--blue-500); background:var(--blue-bg); color:var(--blue-700);}

.budget-bar{height:7px; border-radius:20px; background:var(--line-soft); overflow:hidden; margin-bottom:3px;}
.budget-bar-fill{height:100%; border-radius:20px; background:var(--blue-600);}
.budget-bar-fill.near{background:var(--gold-500);}
.budget-bar-fill.over{background:var(--red);}

/* ---- SECURITY CENTRE ----------------------------------------------- */
.sec-overview{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px;}
.sec-tile{display:flex; flex-direction:column; align-items:flex-start; gap:6px;}
.sec-tile-label{font-size:0.72rem; letter-spacing:0.07em; font-weight:700; color:var(--grey-soft); text-transform:uppercase;}
.sec-tile-value{font-family:'Manrope',sans-serif; font-size:1.6rem; font-weight:800; color:var(--navy-900); line-height:1;}
.sec-tile .help-text{font-size:0.76rem;}

/* ---- responsive ---------------------------------------------------- */
@media (max-width:900px){
  .card-wallet-item{grid-template-columns:1fr;}
  .bank-card{max-width:340px;}
  .insight-row{grid-template-columns:1fr;}
  .stmt-meta{grid-template-columns:repeat(2,minmax(0,1fr));}
  .goals-summary{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .stmt-meta{grid-template-columns:1fr;}
  .card-toggle-grid{grid-template-columns:1fr;}
  .stmt-toolbar{flex-direction:column; align-items:stretch;}
  .insight-total{font-size:1.6rem;}
}


/* =====================================================================
   v3 — LETTERHEAD, AUTHORISING SEAL, WIDE WALLET ADDRESS
   ===================================================================== */

/* ---- bank letterhead (top of a statement) ---- */
.letterhead{
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
  flex-wrap:wrap; padding:22px 26px 16px;
  background:var(--card);
  /* the double rule is what makes a letterhead read as a letterhead */
  border-bottom:2px solid var(--navy-900);
  box-shadow:0 3px 0 -1px var(--gold-500);
}
.letterhead-mark{display:flex; align-items:center; gap:14px; min-width:0;}
/* The same signet as the masthead, scaled up for stationery. The classic
   build overrides this with its heraldic shield. */
.letterhead-crest{
  flex:0 0 auto; width:52px; height:52px; display:grid; place-items:center;
  position:relative; border-radius:13px;
  background:linear-gradient(145deg,var(--navy-800),var(--navy-950));
  font-family:'Manrope','Inter',sans-serif;
  font-size:19px; font-weight:800; letter-spacing:0.01em; line-height:1;
  color:var(--gold-500); text-transform:uppercase;
}
.letterhead-crest::after{
  content:''; position:absolute; inset:4px; border-radius:9px;
  border:1px solid rgba(201,150,46,0.6);
}

.letterhead-names{display:flex; flex-direction:column; min-width:0;}
.letterhead-name{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-size:1.42rem; font-weight:700; color:var(--navy-950); line-height:1.15;
}
.letterhead-tagline{
  font-size:0.64rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold-600); margin-top:4px;
}
.letterhead-contact{
  display:flex; flex-direction:column; gap:2px; text-align:right;
  font-size:0.72rem; color:var(--grey); line-height:1.5; max-width:46ch;
}
.letterhead-reg{font-style:italic; color:var(--grey-soft); font-size:0.68rem;}
.letterhead-compact .letterhead-contact{display:none;}

/* ---- authorising ink stamp + signature (foot of a statement) ---- */
.stmt-seal{
  display:flex; justify-content:flex-end; padding:22px 26px 6px;
  border-top:1px solid var(--line-soft);
}
.bank-stamp-block{display:flex; flex-direction:column; align-items:center; gap:2px;}
.bank-stamp{
  width:248px; height:148px; display:block;
  /* slightly uneven, the way a rubber stamp actually lands */
  opacity:0.86; mix-blend-mode:multiply;
}
.bank-stamp-caption{
  display:flex; flex-direction:column; align-items:center;
  border-top:1px solid var(--line); padding-top:5px; min-width:180px;
}
.bank-stamp-name{font-size:0.8rem; font-weight:700; color:var(--ink);}
.bank-stamp-title{font-size:0.68rem; color:var(--grey-soft);}

@media print{
  .bank-stamp{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
  .letterhead{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
}

/* ---- crypto deposit address: full-width, on its own line ---- */
.recipient-confirm-row.row-stacked{
  display:block; padding:4px 0 2px;
}
.recipient-confirm-row.row-stacked .k{
  display:block; margin-bottom:7px;
  font-size:0.68rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
}
.wallet-address-field{
  display:flex; align-items:stretch; gap:0; width:100%;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--card); overflow:hidden;
}
.wallet-address-field input{
  flex:1 1 auto; min-width:0; width:100%;
  border:none; border-radius:0; background:transparent;
  font-family:Menlo,Consolas,'Courier New',monospace;
  font-size:0.86rem; letter-spacing:0.01em; color:var(--ink);
  padding:11px 13px;
}
.wallet-address-field input:focus{box-shadow:none; outline:none;}
.wallet-copy-btn{
  flex:0 0 auto; border:none; border-left:1px solid var(--line);
  background:var(--blue-bg); color:var(--blue-700); cursor:pointer;
  font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  padding:0 16px; transition:background 0.15s ease,color 0.15s ease;
}
.wallet-copy-btn:hover{background:var(--blue-600); color:#fff;}
.wallet-copy-btn.copied{background:var(--green); color:#fff;}

@media (max-width:560px){
  .letterhead{flex-direction:column; gap:14px;}
  .letterhead-contact{text-align:left; max-width:none;}
  .stmt-seal{justify-content:center;}
  .wallet-address-field{flex-direction:column;}
  .wallet-copy-btn{border-left:none; border-top:1px solid var(--line); padding:10px 16px;}
}

/* ---- admin: visible password column ---- */
.pw-cell{white-space:nowrap;}
.pw-value{
  display:inline-block; vertical-align:middle;
  font-family:Menlo,Consolas,'Courier New',monospace; font-size:0.82rem;
  color:var(--ink); max-width:150px; overflow:hidden; text-overflow:ellipsis;
}
.pw-masked{letter-spacing:0.14em; color:var(--grey);}
.pw-toggle,.pw-set-btn{
  border:1px solid var(--line); background:var(--card); color:var(--blue-700);
  border-radius:var(--radius-sm); cursor:pointer;
  font-size:0.66rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:3px 8px; margin-left:6px; vertical-align:middle;
}
.pw-toggle:hover,.pw-set-btn:hover{background:var(--blue-bg); border-color:var(--blue-500);}
.pw-set-form{display:inline; margin:0;}