/* ============================================================
   NovaBank demo — design system (Richmond Fed inspired)
   ============================================================ */
:root{
  --nb-navy:#16243d; --nb-navy-2:#1f3357; --nb-navy-3:#2e4a78;
  --nb-ink:#1a2b4a; --nb-body:#46546b; --nb-muted:#8a94a6;
  --nb-gold:#c9a86a; --nb-gold-d:#b08d4d;
  --nb-teal:#2c7a7b; --nb-green:#1f9d6b; --nb-red:#c0392b;
  --nb-bg:#eef1f6; --nb-surface:#ffffff; --nb-line:#e4e8f0;
  --nb-radius:16px; --nb-radius-sm:10px;
  --nb-shadow:0 1px 2px rgba(22,36,61,.04),0 8px 24px rgba(22,36,61,.06);
  --nb-shadow-h:0 2px 4px rgba(22,36,61,.06),0 16px 40px rgba(22,36,61,.12);
  --nb-serif:"Open Sans","Helvetica Neue",Arial,sans-serif;
  --nb-sans:"Open Sans","Helvetica Neue",Arial,sans-serif;
}

/* layout shell */
.nb-dash{font-family:var(--nb-sans);color:var(--nb-body);max-width:1280px;margin:0 auto;}
.nb-dash *{box-sizing:border-box;}
.nb-section{margin:0 0 30px;}
.nb-section-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 16px;}
.nb-section-head h2{font-family:var(--nb-serif);font-size:20px;font-weight:700;color:var(--nb-ink);margin:0;letter-spacing:-.01em;}
.nb-section-head .nb-link{font-size:13px;color:var(--nb-gold-d);text-decoration:none;font-weight:600;}
.nb-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--nb-gold-d);}

.nb-card{background:var(--nb-surface);border:1px solid var(--nb-line);border-radius:var(--nb-radius);box-shadow:var(--nb-shadow);}
.nb-grid{display:grid;gap:18px;}
.nb-g-2{grid-template-columns:repeat(2,1fr);}
.nb-g-3{grid-template-columns:repeat(3,1fr);}
.nb-g-4{grid-template-columns:repeat(4,1fr);}
.nb-g-5{grid-template-columns:repeat(5,1fr);}

/* welcome / topbar */
.nb-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:6px 2px 22px;}
.nb-top .nb-hello{font-family:var(--nb-serif);font-size:26px;color:var(--nb-ink);font-weight:700;margin:0;letter-spacing:-.02em;}
.nb-top .nb-sub{font-size:13px;color:var(--nb-muted);margin-top:3px;}
.nb-avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--nb-navy),var(--nb-navy-2));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--nb-serif);box-shadow:var(--nb-shadow);}
.nb-userbox{display:flex;align-items:center;gap:12px;}
.nb-userbox .nb-logout{font-size:12px;color:var(--nb-muted);text-decoration:none;}

/* FRB app bar (dashboard) */
.nb-appbar{display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(135deg,var(--nb-navy) 0%,var(--nb-navy-2) 70%,#26406c 100%);border-radius:14px;padding:14px 24px;margin-bottom:24px;box-shadow:var(--nb-shadow-h);position:relative;overflow:hidden;}
.nb-appbar::after{content:"";position:absolute;right:-40px;top:-50px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(201,168,106,.18),transparent 70%);}
.nb-appbar-logo{height:50px !important;width:auto !important;max-width:300px;display:block;position:relative;z-index:1;}
.nb-appbar-right{display:flex;align-items:center;gap:14px;color:#fff;position:relative;z-index:1;}
.nb-appbar-right .nb-au{text-align:right;}
.nb-appbar-right .nb-au-name{font-size:13.5px;font-weight:700;}
.nb-appbar-right .nb-au-sub a{color:rgba(255,255,255,.7);font-size:11.5px;text-decoration:none;}
.nb-appbar-right .nb-avatar{background:rgba(255,255,255,.16);box-shadow:none;}

/* ===== Account Summary hero ===== */
.nb-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;}
.nb-hero-main{background:linear-gradient(135deg,var(--nb-navy) 0%,var(--nb-navy-2) 60%,#26406c 100%);color:#fff;border-radius:var(--nb-radius);padding:28px 30px;position:relative;overflow:hidden;box-shadow:var(--nb-shadow-h);}
.nb-hero-main::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(201,168,106,.25),transparent 70%);}
.nb-hero-main .nb-bal-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);}
.nb-hero-main .nb-bal{font-family:var(--nb-serif);font-size:42px;font-weight:700;margin:6px 0 2px;letter-spacing:-.02em;}
.nb-hero-main .nb-bal-sub{font-size:13px;color:rgba(255,255,255,.75);}
.nb-hero-rows{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;margin-top:26px;position:relative;z-index:1;}
.nb-hero-rows .nb-k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.nb-hero-rows .nb-v{font-size:15px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums;}
.nb-hero-side{display:grid;grid-template-rows:1fr 1fr;gap:18px;}
.nb-mini{padding:20px 22px;display:flex;flex-direction:column;justify-content:center;}
.nb-mini .nb-k{font-size:12px;color:var(--nb-muted);text-transform:uppercase;letter-spacing:.06em;}
.nb-mini .nb-v{font-family:var(--nb-serif);font-size:24px;color:var(--nb-ink);font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums;}
.nb-chip{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;background:rgba(201,168,106,.16);color:var(--nb-gold-d);letter-spacing:.04em;}

/* ===== Financial overview stat cards ===== */
.nb-stat{padding:20px 20px 18px;}
.nb-stat .nb-stat-top{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.nb-stat .nb-ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(22,36,61,.06);color:var(--nb-navy);font-size:17px;}
.nb-stat .nb-stat-k{font-size:12.5px;color:var(--nb-muted);font-weight:600;}
.nb-stat .nb-stat-v{font-family:var(--nb-serif);font-size:25px;color:var(--nb-ink);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.nb-bar{height:7px;border-radius:99px;background:var(--nb-line);margin-top:13px;overflow:hidden;}
.nb-bar > i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--nb-gold),var(--nb-gold-d));}
.nb-bar.nb-navybar > i{background:linear-gradient(90deg,#36568c,var(--nb-navy-2));}
.nb-stat .nb-meta{font-size:12px;color:var(--nb-muted);margin-top:9px;}
.nb-up{color:var(--nb-green);font-weight:700;} .nb-down{color:var(--nb-red);font-weight:700;}

/* ===== Quick actions ===== */
.nb-actions{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.nb-act{background:var(--nb-surface);border:1px solid var(--nb-line);border-radius:var(--nb-radius-sm);padding:18px 12px;text-align:center;cursor:pointer;transition:.18s;text-decoration:none;display:block;}
.nb-act:hover{transform:translateY(-3px);box-shadow:var(--nb-shadow-h);border-color:#d6cdb8;}
.nb-act .nb-ic{width:44px;height:44px;border-radius:13px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(201,168,106,.16),rgba(201,168,106,.06));color:var(--nb-gold-d);font-size:19px;}
.nb-act span{display:block;font-size:12.5px;font-weight:600;color:var(--nb-ink);}

/* ===== Transactions table ===== */
.nb-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.nb-table th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--nb-muted);font-weight:700;padding:12px 16px;border-bottom:1px solid var(--nb-line);}
.nb-table td{padding:14px 16px;border-bottom:1px solid var(--nb-line);color:var(--nb-ink);vertical-align:middle;}
.nb-table tr:last-child td{border-bottom:none;}
.nb-table tbody tr:hover{background:#f7f9fc;}
.nb-txn-ic{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:rgba(22,36,61,.05);color:var(--nb-navy);font-size:14px;margin-right:10px;vertical-align:middle;}
.nb-txn-desc{font-weight:600;}
.nb-tag{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:7px;background:#eef1f6;color:var(--nb-body);}
.nb-amt-d{color:var(--nb-red);font-weight:700;font-variant-numeric:tabular-nums;}
.nb-amt-c{color:var(--nb-green);font-weight:700;font-variant-numeric:tabular-nums;}
.nb-num{font-variant-numeric:tabular-nums;}

/* ===== Investments / Loans lists ===== */
.nb-list-card{padding:6px 0;}
.nb-row{display:flex;align-items:center;gap:14px;padding:15px 22px;border-bottom:1px solid var(--nb-line);}
.nb-row:last-child{border-bottom:none;}
.nb-row .nb-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(22,36,61,.05);color:var(--nb-navy);font-size:16px;flex:0 0 auto;}
.nb-row .nb-rmain{flex:1;min-width:0;}
.nb-row .nb-rt{font-weight:600;color:var(--nb-ink);font-size:14px;}
.nb-row .nb-rs{font-size:12px;color:var(--nb-muted);margin-top:2px;}
.nb-row .nb-rval{text-align:right;font-variant-numeric:tabular-nums;}
.nb-row .nb-rv1{font-weight:700;color:var(--nb-ink);}
.nb-row .nb-rv2{font-size:12px;margin-top:2px;}
.nb-prog{height:6px;border-radius:99px;background:var(--nb-line);margin-top:10px;overflow:hidden;}
.nb-prog > i{display:block;height:100%;background:linear-gradient(90deg,var(--nb-gold),var(--nb-gold-d));}

/* ===== Credit cards ===== */
.nb-cc{border-radius:16px;padding:22px 24px;color:#fff;position:relative;overflow:hidden;min-height:180px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--nb-shadow-h);}
.nb-cc.visa{background:linear-gradient(135deg,#16243d,#27406b);}
.nb-cc.mastercard{background:linear-gradient(135deg,#2a2118,#5a4124);}
.nb-cc.amex{background:linear-gradient(135deg,#0d4f4a,#13746b);}
.nb-cc.rupay{background:linear-gradient(135deg,#3a1d57,#6a3aa0);}
.nb-cc::after{content:"";position:absolute;right:-40px;bottom:-50px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.06);}
.nb-cc .nb-cc-net{font-family:var(--nb-serif);font-style:italic;font-weight:700;letter-spacing:.04em;font-size:18px;text-transform:uppercase;}
.nb-cc .nb-cc-no{font-size:17px;letter-spacing:.16em;font-variant-numeric:tabular-nums;margin:6px 0 2px;}
.nb-cc .nb-cc-foot{display:flex;justify-content:space-between;align-items:flex-end;position:relative;z-index:1;}
.nb-cc .nb-cc-k{font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;}
.nb-cc .nb-cc-v{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;}
.nb-cc-meta{padding:16px 6px 4px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.nb-cc-meta .nb-k{font-size:11px;color:var(--nb-muted);text-transform:uppercase;letter-spacing:.05em;}
.nb-cc-meta .nb-v{font-weight:700;color:var(--nb-ink);font-variant-numeric:tabular-nums;margin-top:2px;}

/* ===== Offers ===== */
.nb-offer{border-radius:var(--nb-radius);padding:22px;color:#fff;position:relative;overflow:hidden;min-height:172px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--nb-shadow);}
.nb-offer.navy{background:linear-gradient(135deg,#16243d,#2e4a78);}
.nb-offer.gold{background:linear-gradient(135deg,#9a7b3f,#c9a86a);}
.nb-offer.teal{background:linear-gradient(135deg,#13565a,#2c7a7b);}
.nb-offer.crimson{background:linear-gradient(135deg,#7a241b,#b3382b);}
.nb-offer .nb-obadge{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.2);padding:4px 10px;border-radius:999px;}
.nb-offer h3{font-family:var(--nb-serif);font-size:17px;font-weight:700;margin:12px 0 6px;line-height:1.25;}
.nb-offer p{font-size:12.5px;opacity:.85;margin:0 0 14px;line-height:1.4;}
.nb-offer .nb-cta{align-self:flex-start;background:#fff;color:var(--nb-ink);font-weight:700;font-size:12.5px;padding:8px 16px;border-radius:9px;text-decoration:none;}

/* ===== Notifications ===== */
.nb-notif{display:flex;gap:14px;padding:15px 20px;border-bottom:1px solid var(--nb-line);align-items:flex-start;}
.nb-notif:last-child{border-bottom:none;}
.nb-notif .nb-nic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:15px;}
.nb-notif.security .nb-nic{background:rgba(192,57,43,.1);color:var(--nb-red);}
.nb-notif.payment .nb-nic{background:rgba(201,168,106,.16);color:var(--nb-gold-d);}
.nb-notif.emi .nb-nic{background:rgba(22,36,61,.08);color:var(--nb-navy);}
.nb-notif.promo .nb-nic{background:rgba(44,122,123,.12);color:var(--nb-teal);}
.nb-notif.info .nb-nic{background:rgba(22,36,61,.06);color:var(--nb-navy);}
.nb-notif .nb-nt{font-weight:600;color:var(--nb-ink);font-size:13.5px;}
.nb-notif .nb-nd{font-size:12.5px;color:var(--nb-muted);margin-top:3px;line-height:1.4;}
.nb-notif .nb-ntime{font-size:11px;color:var(--nb-muted);white-space:nowrap;}
.nb-dot{width:8px;height:8px;border-radius:50%;background:var(--nb-gold);flex:0 0 auto;margin-top:6px;}

/* ===== Charts ===== */
.nb-chart-card{padding:20px 22px;}
.nb-chart-card h3{font-family:var(--nb-serif);font-size:15px;color:var(--nb-ink);margin:0 0 14px;font-weight:700;}
.nb-chart-wrap{position:relative;height:230px;}

/* ===== Section banner / notice ===== */
.nb-notice{background:linear-gradient(90deg,rgba(201,168,106,.12),rgba(201,168,106,.03));border:1px solid rgba(201,168,106,.35);border-radius:var(--nb-radius-sm);padding:12px 18px;font-size:12.5px;color:var(--nb-gold-d);display:flex;gap:10px;align-items:center;margin-bottom:24px;}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.nb-login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;font-family:var(--nb-sans);}
.nb-login-art{background:linear-gradient(150deg,var(--nb-navy) 0%,var(--nb-navy-2) 55%,#26406c 100%);color:#fff;padding:56px 60px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;}
.nb-login-art::after{content:"";position:absolute;right:-120px;top:-80px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(201,168,106,.22),transparent 68%);}
.nb-login-brand{display:flex;align-items:center;gap:12px;font-family:var(--nb-serif);font-size:22px;font-weight:700;letter-spacing:-.01em;}
.nb-login-brand .nb-logo{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,var(--nb-gold),var(--nb-gold-d));display:flex;align-items:center;justify-content:center;color:var(--nb-navy);font-weight:800;}
.nb-login-logo-img{height:70px !important;width:auto !important;max-width:340px;display:block;}
.nb-login-card-logo{height:46px !important;width:auto !important;max-width:260px;display:block;margin:0 auto 22px;}
.nb-login-art h1{font-family:var(--nb-serif);font-size:40px;line-height:1.12;font-weight:700;margin:0 0 16px;letter-spacing:-.02em;max-width:460px;}
.nb-login-art p{font-size:15px;color:rgba(255,255,255,.78);max-width:420px;line-height:1.6;}
.nb-login-feats{display:flex;gap:26px;position:relative;z-index:1;}
.nb-login-feats div{font-size:12.5px;color:rgba(255,255,255,.72);}
.nb-login-feats b{display:block;font-family:var(--nb-serif);font-size:22px;color:var(--nb-gold);}
.nb-login-form-wrap{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--nb-bg);}
.nb-login-card{width:100%;max-width:400px;background:#fff;border:1px solid var(--nb-line);border-radius:20px;box-shadow:var(--nb-shadow-h);padding:40px 38px;}
.nb-login-card h2{font-family:var(--nb-serif);font-size:26px;color:var(--nb-ink);margin:0 0 6px;font-weight:700;}
.nb-login-card .nb-lsub{font-size:13.5px;color:var(--nb-muted);margin:0 0 26px;}
.nb-field{margin-bottom:18px;}
.nb-field label{display:block;font-size:12.5px;font-weight:600;color:var(--nb-ink);margin-bottom:7px;}
.nb-field input[type=text],.nb-field input[type=password]{width:100%;border:1px solid var(--nb-line);border-radius:11px;padding:13px 15px;font-size:14px;color:var(--nb-ink);background:#fafbfd;transition:.15s;}
.nb-field input:focus{outline:none;border-color:var(--nb-gold);background:#fff;box-shadow:0 0 0 3px rgba(201,168,106,.16);}
.nb-login-opts{display:flex;align-items:center;justify-content:space-between;margin:4px 0 22px;font-size:12.5px;}
.nb-login-opts label{display:flex;align-items:center;gap:7px;color:var(--nb-body);cursor:pointer;}
.nb-login-opts a{color:var(--nb-gold-d);text-decoration:none;font-weight:600;}
.nb-btn{width:100%;border:none;background:linear-gradient(135deg,var(--nb-navy),var(--nb-navy-2));color:#fff !important;font-size:15px;font-weight:700;padding:14px;border-radius:11px;cursor:pointer;transition:.18s;font-family:var(--nb-sans);}
.nb-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(22,36,61,.22);}
.nb-secnote{display:flex;gap:9px;align-items:flex-start;margin-top:22px;padding:12px 14px;background:#f5f7fa;border-radius:11px;font-size:11.5px;color:var(--nb-muted);line-height:1.45;}
.nb-secnote svg{flex:0 0 auto;margin-top:1px;}
.nb-error{background:rgba(192,57,43,.08);border:1px solid rgba(192,57,43,.3);color:var(--nb-red);font-size:12.5px;padding:11px 14px;border-radius:10px;margin-bottom:18px;}
.nb-demohint{font-size:11.5px;color:var(--nb-muted);text-align:center;margin-top:18px;line-height:1.5;}
.nb-demohint code{background:#eef1f6;padding:2px 6px;border-radius:5px;color:var(--nb-ink);font-size:11px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ---- tablet ---- */
@media(max-width:1024px){
  .nb-g-4,.nb-g-5{grid-template-columns:repeat(2,1fr);}
  .nb-g-3{grid-template-columns:repeat(2,1fr);}
  .nb-hero{grid-template-columns:1fr;}
  .nb-actions{grid-template-columns:repeat(3,1fr);}
  .nb-login{grid-template-columns:1fr;}
  .nb-login-art{display:none;}
}

/* ---- phones (<=768px) ---- */
@media(max-width:768px){
  .nb-dash{max-width:100%;}
  .nb-section{margin-bottom:22px;}
  .nb-g-2,.nb-g-3,.nb-g-4,.nb-g-5{grid-template-columns:1fr;gap:14px;}
  .nb-actions{grid-template-columns:repeat(3,1fr);gap:10px;}

  /* welcome bar stacks */
  .nb-top{flex-direction:row;align-items:flex-start;padding-bottom:16px;}
  .nb-top .nb-hello{font-size:20px;}
  .nb-top .nb-sub{font-size:12px;}
  .nb-userbox{flex-direction:row-reverse;}

  /* hero */
  .nb-hero-main{padding:22px 20px;}
  .nb-hero-main .nb-bal{font-size:34px;}
  .nb-hero-rows{grid-template-columns:1fr 1fr;gap:12px 18px;margin-top:20px;}
  .nb-mini{padding:16px 18px;}

  /* section heads */
  .nb-section-head h2{font-size:18px;}

  /* stacked transaction table with labels */
  .nb-table thead{display:none;}
  .nb-table,.nb-table tbody,.nb-table tr,.nb-table td{display:block;width:100%;}
  .nb-table tr{padding:12px 4px;border-bottom:1px solid var(--nb-line);}
  .nb-table tr:last-child{border-bottom:none;}
  .nb-table td{border:none;padding:5px 16px;display:flex;justify-content:space-between;align-items:center;text-align:right;}
  .nb-table td::before{content:attr(data-label);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--nb-muted);font-weight:700;text-align:left;padding-right:12px;}
  .nb-table td[data-label="Description"]{justify-content:flex-start;text-align:left;padding-top:10px;}
  .nb-table td[data-label="Description"]::before{display:none;}
  .nb-table td[data-label="Description"] .nb-txn-desc{font-size:14px;}

  /* charts a touch shorter */
  .nb-chart-wrap{height:210px;}

  /* login card */
  .nb-login-form-wrap{padding:24px 16px;min-height:100vh;}
  .nb-login-card{padding:30px 22px;border-radius:16px;}
  .nb-login-card h2{font-size:23px;}
}

/* ---- small phones (<=480px) ---- */
@media(max-width:480px){
  .nb-actions{grid-template-columns:repeat(2,1fr);}
  .nb-hero-rows{grid-template-columns:1fr;}
  .nb-hero-main .nb-bal{font-size:30px;}
  .nb-cc-meta{grid-template-columns:repeat(3,1fr);gap:6px;}
  .nb-cc-meta .nb-v{font-size:13px;}
  .nb-cc{min-height:160px;padding:18px 18px;}
  .nb-cc .nb-cc-no{font-size:15px;letter-spacing:.1em;}
  .nb-top .nb-hello{font-size:18px;}
  .nb-avatar{width:40px;height:40px;}
  .nb-stat .nb-stat-v{font-size:23px;}
  .nb-offer{min-height:0;}
  .nb-row{padding:13px 16px;gap:11px;}
  .nb-row .nb-rt{font-size:13.5px;}
  .nb-notif{padding:13px 16px;}
}