/* ═══════════════════════════════════════════════════════════
   ITRACE BANK — premium theme (look only; no functions change)
   ═══════════════════════════════════════════════════════════ */
body{
  font-family:'Inter',Arial,sans-serif !important;
  background:
    radial-gradient(1100px 560px at 8% -12%, #E4EDFF 0%, transparent 60%),
    radial-gradient(900px 480px at 112% 8%, #FFF5D1 0%, transparent 55%),
    #F4F7FD !important;
}
@keyframes itraceFadeUp{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
.page.on, .pane.on{ animation: itraceFadeUp .38s ease both; }

/* Top bar */
.top{
  background:linear-gradient(120deg,#00195A 0%,#003087 55%,#0B4FB3 100%) !important;
  box-shadow:0 8px 30px rgba(0,25,90,.28) !important;
  border-bottom:1px solid rgba(255,215,0,.28) !important;
}
.brand-ic, .left-logo-icon{ box-shadow:0 6px 18px rgba(255,215,0,.25); }

/* Cards */
.card{
  border:1px solid #E3EAF7 !important;
  border-radius:18px !important;
  box-shadow:0 10px 30px rgba(0,25,90,.06) !important;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ box-shadow:0 16px 40px rgba(0,25,90,.10) !important; }
.card h3{ letter-spacing:.2px; }

/* Balance card */
.bal-card{
  background:linear-gradient(135deg,#00195A 0%,#003087 45%,#0B5BD3 100%) !important;
  position:relative; overflow:hidden;
  box-shadow:0 22px 50px rgba(0,25,90,.35) !important;
  border-radius:20px !important;
}
.bal-card:before{
  content:''; position:absolute; right:-70px; top:-70px; width:240px; height:240px;
  border-radius:50%; background:radial-gradient(circle, rgba(255,215,0,.35), transparent 70%);
}
.bal-card .amt{ text-shadow:0 2px 22px rgba(255,215,0,.25); }

/* Buttons */
.btn-main, .btn-submit{
  background:linear-gradient(135deg,#003087,#0B5BD3) !important;
  border-radius:12px !important;
  box-shadow:0 8px 22px rgba(0,48,135,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-main:hover, .btn-submit:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,48,135,.35); }
.btn{ border-radius:10px !important; transition:transform .15s ease, box-shadow .15s ease; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,25,90,.15); }

/* Inputs */
.fg input, .fg select, .fg textarea{ border-radius:12px !important; }
.fg input:focus, .fg select:focus, .fg textarea:focus{ box-shadow:0 0 0 4px rgba(11,91,211,.12) !important; }

/* Quick actions and product tiles */
.qa div, .prod{ border-radius:16px !important; transition:transform .2s ease, box-shadow .2s ease; }
.qa div:hover, .prod:hover{ transform:translateY(-3px); box-shadow:0 16px 30px rgba(0,25,90,.10); }

/* Side menu */
.nav{ border-radius:10px; margin:2px 10px; }
.nav:hover{ background:#F3F7FF !important; }
.nav.on{ background:linear-gradient(90deg,#EEF3FC,#FFF9E0) !important; border-left-color:transparent !important; }

/* Stats and small cards */
.stat{ border-radius:16px !important; box-shadow:0 8px 24px rgba(0,25,90,.06); }
.stat b{ background:linear-gradient(90deg,#00195A,#0B5BD3); -webkit-background-clip:text; background-clip:text; color:transparent; }
.item:hover, .tx:hover{ background:#FAFCFF; }
.receipt{ box-shadow:0 18px 40px rgba(0,25,90,.15) !important; }

/* Login and sign-up side panel */
.left{ background:linear-gradient(160deg,#00195A 0%,#003087 50%,#0B5BD3 100%) !important; }
.left-logo-icon{ border-radius:14px !important; }

/* ═══════════ HOMEPAGE ═══════════ */
nav{
  background:linear-gradient(120deg,#00195A 0%,#003087 60%,#0B4FB3 100%) !important;
  box-shadow:0 8px 30px rgba(0,25,90,.28) !important;
  border-bottom:1px solid rgba(255,215,0,.28);
}
.hero{
  background:linear-gradient(135deg,#00195A 0%,#003087 45%,#0B5BD3 100%) !important;
}
.hero h1 span{ text-shadow:0 2px 24px rgba(255,215,0,.35); }
.btn-hero-primary, .btn-open{
  background:linear-gradient(135deg,#FFE34D,#FFB300) !important;
  color:#00195A !important;
  box-shadow:0 10px 26px rgba(255,200,0,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-hero-primary:hover, .btn-open:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(255,200,0,.45); }
.hero-card, .rate-card{
  border-radius:22px !important;
  box-shadow:0 24px 60px rgba(0,0,30,.35);
}
.hs{ border-radius:14px !important; }
.feat-card, .cd-card{
  border-radius:20px !important;
  box-shadow:0 10px 30px rgba(0,25,90,.07) !important;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.feat-card:hover, .cd-card:hover{ transform:translateY(-5px); box-shadow:0 20px 44px rgba(0,25,90,.14) !important; }
.cd-card.featured{ background:linear-gradient(135deg,#00195A,#0B5BD3) !important; }
.section-badge{ border-radius:999px; }
.fico-display{ border-radius:22px; box-shadow:0 24px 60px rgba(0,25,90,.30); }
.security-section{
  background:linear-gradient(135deg,#00195A 0%,#003087 60%,#0B5BD3 100%) !important;
}
.sec-icon{ box-shadow:0 8px 22px rgba(0,0,30,.25); }
.cta-section{ background:linear-gradient(135deg,#F4F7FD 0%,#E6EEFF 60%,#FFF5D1 100%) !important; }
footer{ background:linear-gradient(135deg,#00195A,#002A7A) !important; }

/* ═══════════ PHOTO AND CARD ═══════════ */
.avatar-img{ background-size:cover !important; background-position:center !important; }
.virtual-card{
  border-radius:22px; padding:1.6rem; color:#fff; position:relative; overflow:hidden; max-width:420px;
  background:linear-gradient(135deg,#00195A 0%,#003087 45%,#0B5BD3 100%);
  box-shadow:0 22px 50px rgba(0,25,90,.35);
}
.virtual-card:before{ content:''; position:absolute; right:-70px; top:-70px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(255,215,0,.35), transparent 70%); }
.virtual-card .vc-chip{ width:44px; height:32px; border-radius:7px; background:linear-gradient(135deg,#FFE34D,#FFB300); }
.virtual-card .vc-num{ font-family:'Courier New',monospace; font-size:1.25rem; letter-spacing:.2em; margin:1.4rem 0 1rem; }
.virtual-card .vc-meta{ display:flex; justify-content:space-between; font-size:.7rem; opacity:.85; text-transform:uppercase; letter-spacing:.08em; }
.virtual-card .vc-meta b{ display:block; font-size:.92rem; text-transform:none; letter-spacing:0; margin-top:.2rem; opacity:1; }
.status-pill{ display:inline-block; font-size:.7rem; font-weight:800; padding:.25rem .65rem; border-radius:999px; }
.status-pill.on{ background:#D1FAE5; color:#065F46; }
.status-pill.off{ background:#FEF3C7; color:#92400E; }

/* ═══════════ ADMIN ALERT BADGES ═══════════ */
.tbadge{ display:none; background:#DC2626; color:#fff; font-size:.68rem; font-weight:800; border-radius:999px; padding:.05rem .45rem; margin-left:.3rem; vertical-align:middle; }

/* ═══════════ SETTINGS SWITCHES ═══════════ */
.switch-row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.9rem 0; border-bottom:1px solid #EEF2F8; }
.switch-row:last-child{ border-bottom:none; }
.switch-row b{ display:block; color:#00195A; font-size:.92rem; }
.switch-row small{ color:#6B7280; font-size:.78rem; }
.switch{ position:relative; display:inline-block; width:50px; height:28px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.switch span{ position:absolute; inset:0; background:#D1D9E6; border-radius:999px; transition:.2s; cursor:pointer; }
.switch span:before{ content:''; position:absolute; width:22px; height:22px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.switch input:checked + span{ background:linear-gradient(135deg,#003087,#0B5BD3); }
.switch input:checked + span:before{ transform:translateX(22px); }
.switch input:disabled + span{ opacity:.6; }

/* Hide balances */
.prefs-hide #heroBal, .prefs-hide #sbBal, .prefs-hide #trfBal, .prefs-hide #depBal, .prefs-hide #wdBal, .prefs-hide #analyticsBal, .prefs-hide .txn-amt, .prefs-hide .txn-bal{
  filter:blur(9px); user-select:none;
}

/* Larger text */
.prefs-big{ font-size:18px; }
.prefs-big .card h3, .prefs-big h2{ font-size:1.15em; }

/* Dark mode */
.prefs-dark{ background:#0B1220 !important; color:#E5E7EB; }
.prefs-dark body, body.prefs-dark{ background:#0B1220 !important; }
.prefs-dark .card, .prefs-dark .stat, .prefs-dark .prod, .prefs-dark .qa div, .prefs-dark .item{ background:#111B2E !important; border-color:#1F2A44 !important; color:#E5E7EB; }
.prefs-dark .card h3, .prefs-dark h2, .prefs-dark .switch-row b, .prefs-dark b{ color:#F3F4F6 !important; }
.prefs-dark .switch-row small, .prefs-dark .hint, .prefs-dark small{ color:#9CA3AF !important; }
.prefs-dark .info{ background:#16233D !important; border-color:#1F2A44 !important; color:#CFE0FF !important; }
.prefs-dark input, .prefs-dark select{ background:#0F1A2E !important; color:#E5E7EB !important; border-color:#1F2A44 !important; }
.prefs-dark .nav{ color:#CBD5E1; }
.prefs-dark .nav.on{ background:#16233D !important; }

/* ═══════════ HOME LAYOUT ═══════════ */
.home-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.home-greet{ font-size:.95rem; color:#6B7280; }
.home-name{ font-size:1.5rem; font-weight:900; color:#00195A; }
.icon-btn{ width:44px; height:44px; border-radius:14px; border:1px solid #E3EAF7; background:#fff; font-size:1.1rem; cursor:pointer; }
.acct-card{ background:linear-gradient(135deg,#00195A 0%,#003087 55%,#0B5BD3 100%); color:#fff; border-radius:22px; padding:1.3rem; box-shadow:0 22px 50px rgba(0,25,90,.3); margin-bottom:1rem; }
.acct-top{ display:flex; justify-content:space-between; align-items:center; font-size:.85rem; opacity:.92; }
.apy{ background:rgba(255,215,0,.2); color:#FFE34D; border-radius:999px; padding:.15rem .6rem; font-weight:800; font-size:.75rem; }
.acct-bal{ font-size:2.2rem; font-weight:900; color:#FFE34D; margin:.4rem 0; }
.acct-meta{ font-size:.85rem; opacity:.92; }
.copy-btn{ background:rgba(255,255,255,.15); border:0; border-radius:8px; color:#fff; padding:.2rem .45rem; cursor:pointer; margin-left:.3rem; }
.action-row, .quick-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-bottom:1rem; }
.action-row button, .quick-row button{ background:#fff; border:1px solid #E3EAF7; border-radius:16px; padding:.9rem .5rem; font-weight:800; color:#00195A; cursor:pointer; font-family:inherit; font-size:.9rem; box-shadow:0 8px 20px rgba(0,25,90,.06); }
.section-title{ font-weight:900; color:#00195A; margin:.4rem 0 .6rem; }
.section-head{ display:flex; justify-content:space-between; align-items:center; margin:1rem 0 .5rem; font-weight:900; color:#00195A; }
.link-btn{ background:none; border:0; color:#003087; font-weight:800; cursor:pointer; }

/* Phone bottom menu */
.bottom-nav{ display:none; }
@media (max-width:768px){
  .bottom-nav{ display:flex; position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid #E3EAF7; padding:.4rem 0 .6rem; z-index:40; justify-content:space-around; }
  .bottom-nav button{ background:none; border:0; display:flex; flex-direction:column; align-items:center; gap:.1rem; font-size:1.2rem; cursor:pointer; color:#6B7280; }
  .bottom-nav span{ font-size:.65rem; font-weight:800; }
  .main{ padding-bottom:90px; }
}
.sheet{ display:none; position:fixed; inset:0; background:rgba(0,25,90,.45); z-index:60; align-items:flex-end; justify-content:center; }
.sheet.open{ display:flex; }
.sheet-box{ background:#fff; width:100%; max-width:560px; border-radius:22px 22px 0 0; padding:1.2rem; display:flex; flex-direction:column; gap:.5rem; }
.sheet-box button{ text-align:left; background:#F4F7FD; border:0; border-radius:12px; padding:.85rem 1rem; font-weight:700; color:#00195A; cursor:pointer; font-family:inherit; font-size:.95rem; }
.sheet-box .out{ background:#FEF2F2; color:#B91C1C; }
.sheet-title{ font-weight:900; color:#00195A; font-size:1.1rem; margin-bottom:.3rem; }