/* RB Fintech visual system: blue-first, responsive, app-like surfaces. */
:root {
  --primary-blue: #1769ff !important;
  --primary-dark: #071a3d !important;
  --primary-light: #eef5ff !important;
  --secondary-teal: #1fb6ff !important;
  --secondary-purple: #5b7cfa !important;
  --accent-green: #20c997 !important;
  --accent-orange: #1769ff !important;
  --accent-red: #315efb !important;
  --neutral-gray: #f4f7fb !important;
  --neutral-mid: #dbe6f5 !important;
  --neutral-text: #60708a !important;
  --shadow-sm: 0 4px 16px rgba(7, 26, 61, 0.06) !important;
  --shadow-md: 0 12px 28px rgba(7, 26, 61, 0.10) !important;
  --shadow-lg: 0 22px 60px rgba(7, 26, 61, 0.14) !important;
  --radius-sm: 10px !important;
  --radius-md: 16px !important;
  --radius-lg: 24px !important;
}

html { background: #f4f7fb; }
body { background: #f4f7fb !important; color: #14213d; }
a { color: #1769ff; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(23, 105, 255, 0.24) !important;
  outline-offset: 2px;
}

header { background: rgba(255, 255, 255, 0.97) !important; border-bottom: 1px solid #e7eef8; backdrop-filter: blur(16px); isolation: isolate; }
.logo-img, .footer-logo-img, .logo { background: linear-gradient(135deg, #1769ff, #0b3fae) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(23, 105, 255, .22); }
.logo-text span, .footer-logo-text span, .brand-text span { color: #1769ff !important; }
.btn, button { border-radius: 12px !important; }
.btn-primary, .btn.primary, #loginBtn, button#loginBtn, .hero-buttons .btn:first-child { background: linear-gradient(135deg, #1769ff, #0b3fae) !important; box-shadow: 0 10px 22px rgba(23, 105, 255, .20) !important; color: #fff !important; }
.btn-primary:hover, .btn.primary:hover, #loginBtn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.btn-secondary, .btn.outline { border-color: #1769ff !important; color: #1769ff !important; background: #fff !important; }

.hero { background: radial-gradient(circle at 80% 15%, rgba(31,182,255,.22), transparent 30%), linear-gradient(135deg, #f7fbff 0%, #eaf2ff 100%) !important; }
.bank_card, .bank_card_two { background: linear-gradient(135deg, #071a3d 0%, #0b3fae 52%, #1769ff 100%) !important; box-shadow: 0 24px 44px rgba(7, 26, 61, .24) !important; border: 1px solid rgba(255,255,255,.22); }
.feature-card, .service-card, .testimonial-card, .value-card, .initiative-card, .benefit-card, .award-card, .tier-card, .tool-card, .case-study-card, .resource-card { border: 1px solid #e3ebf7 !important; box-shadow: var(--shadow-sm) !important; background: #fff !important; border-radius: 18px !important; }
.feature-card:hover, .service-card:hover, .value-card:hover, .tier-card:hover, .tool-card:hover { border-color: #9fc0ff !important; box-shadow: 0 16px 32px rgba(23,105,255,.12) !important; transform: translateY(-4px); }
.section-subtitle { color: #1769ff !important; }
.icon-wrapper, .feature-icon, .service-icon { background: #eaf2ff !important; color: #1769ff !important; }

.form-section > div:first-child, .login-card, .signup-card { border: 1px solid #e3ebf7; border-radius: 24px !important; box-shadow: var(--shadow-md) !important; background: #fff !important; }
input, select, textarea { border-color: #d4e1f2 !important; border-radius: 12px !important; }
input:focus, select:focus, textarea:focus { border-color: #1769ff !important; box-shadow: 0 0 0 4px rgba(23,105,255,.12) !important; }

/* Auth and app surfaces */
.app-shell { background: #f4f7fb !important; }
.sidebar { background: linear-gradient(180deg, #071a3d, #0b3fae) !important; }
.sidebar .menu-item.active, .sidebar .menu-item:hover { background: rgba(255,255,255,.16) !important; color: #fff !important; }
.topbar { background: rgba(255,255,255,.94) !important; border-bottom: 1px solid #e3ebf7 !important; backdrop-filter: blur(16px); }
.card, .panel, .content .box, .stat-card { border: 1px solid #e3ebf7 !important; border-radius: 18px !important; box-shadow: var(--shadow-sm) !important; background: #fff !important; }
.balance { background: linear-gradient(135deg, #071a3d, #1769ff) !important; border-radius: 16px !important; box-shadow: 0 12px 24px rgba(23,105,255,.2) !important; }
.admin-app { background: #f4f7fb !important; }
.admin-header { background: linear-gradient(135deg, #071a3d, #0b3fae) !important; }
.admin-side { background: #fff !important; border-right: 1px solid #e3ebf7 !important; }
.side-item.active, .side-item:hover { background: #eaf2ff !important; color: #1769ff !important; }
.admin-card, .table-wrap, .status-bar, .admin-note { border-radius: 18px !important; border-color: #e3ebf7 !important; box-shadow: var(--shadow-sm) !important; }

@media (max-width: 760px) {
  body { font-size: 15px; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  header { position: sticky; top: 0; z-index: 40; }
  .navbar { min-height: 64px; }
  .nav-links { display: none !important; position: fixed !important; top: 64px !important; left: 12px !important; right: 12px !important; width: auto !important; max-height: calc(100dvh - 84px); overflow-y: auto; padding: 10px !important; background: rgba(255,255,255,.98) !important; border: 1px solid #e3ebf7; border-radius: 18px !important; box-shadow: 0 24px 60px rgba(7,26,61,.18) !important; }
  .nav-links.active { display: flex !important; }
  .nav-links a { display: flex !important; align-items: center; min-height: 48px; padding: 12px 14px !important; border: 0 !important; border-radius: 12px; color: #14213d !important; font-weight: 600; }
  .nav-links a:hover, .nav-links a:focus-visible { background: #eaf2ff !important; color: #1769ff !important; }
  .mobile-menu-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid #dbe6f5 !important; background: #fff !important; color: #071a3d !important; }
  .nav-buttons { gap: 8px !important; }
  .nav-buttons .btn { padding: .65rem .85rem !important; font-size: .82rem !important; }
  .hero { padding: 34px 0 28px !important; }
  .hero-content, .page-header-content { width: 100%; }
  .hero h1 { font-size: clamp(2rem, 9vw, 3rem) !important; line-height: 1.05 !important; }
  .hero-buttons { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
  .hero-buttons .btn { width: 100%; padding: .82rem .6rem !important; }
  .hero-visual { margin-top: 24px; transform: scale(.94); }
  .section { padding: 3.5rem 0 !important; }
  .section-header { margin-bottom: 2rem !important; }
  .section-header h2, h2 { font-size: 1.85rem !important; }
  .feature-card, .service-card, .value-card, .initiative-card, .benefit-card, .award-card, .tier-card, .tool-card, .case-study-card, .resource-card { padding: 18px !important; }
  .form-section { margin: 28px auto !important; min-height: calc(100vh - 100px); align-items: stretch !important; }
  .form-section > div:first-child { width: 100% !important; padding: 24px 20px !important; }
  .form-section .btn, #loginBtn, #signupBtn { width: 100%; }
  .main { width: 100%; }
  .topbar { min-height: 66px; position: sticky; top: 0; z-index: 30; }
  .welcome .clock { display: none; }
  .top-actions { margin-left: auto; }
  .balance { padding: 8px 10px !important; }
  .balance-label { font-size: .68rem !important; }
  .balance-amount { font-size: .92rem !important; }
  .content { padding: 16px !important; }
  .sidebar { width: min(86vw, 300px) !important; box-shadow: 12px 0 40px rgba(7,26,61,.2); }
  .grid.cards { gap: 12px !important; }
  .card { padding: 18px !important; }
  .admin-main { display: block !important; }
  .admin-side { border-right: 0 !important; border-bottom: 1px solid #e3ebf7; overflow-x: auto; }
  .admin-side nav { display: flex; gap: 8px; min-width: max-content; }
  .side-item { white-space: nowrap; border-radius: 10px !important; }
  .admin-content { padding: 16px !important; }
}

@media (max-width: 420px) {
  .logo-text { font-size: .86rem !important; }
  .logo-img { width: 34px !important; height: 34px !important; }
  .hero-buttons { grid-template-columns: 1fr; }
  .hero-visual { transform: scale(.88); margin-left: -6%; margin-right: -6%; }
  .top-actions { display: none; }
}