@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap");/* ============================================================
   NAVBAR — the "lid" of the glass room. background-color is
   fully opaque on its own (not just the backdrop-filter blur) —
   blur has no CSS fallback, so on any browser/GPU path where it
   doesn't render, a translucent base would let scrolled content
   show straight through underneath the bar. The blur is still
   applied on top for the frosted look where it IS supported; it
   just isn't load-bearing for legibility anymore. Gains .scrolled
   once the page moves: shadow deepens so the bar visibly "settles".
   ============================================================ */
.premium-navbar-blur {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #fbfdff;
  background-image:
    var(--grain),
    /* light-catch on the left, where the logo sits */
    radial-gradient(120% 160% at 0% 0%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 40%, transparent 70%),
    /* cool pool on the right, under the action links */
    radial-gradient(100% 160% at 100% 100%, rgba(207, 230, 250, 0.4) 0%, transparent 65%),
    linear-gradient(115deg, rgba(31, 143, 107, 0.04) 0%, transparent 40%, rgba(26, 110, 181, 0.05) 100%);
  backdrop-filter: blur(var(--blur-nav)) saturate(var(--sat-nav));
  -webkit-backdrop-filter: blur(var(--blur-nav)) saturate(var(--sat-nav));
  border-bottom: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(15, 37, 68, 0.04);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

/* Brand-gradient hairline along the bottom edge — the navbar's
   version of the card cap, at 1px so it reads as an edge, not a bar */
.premium-navbar-blur::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--brand-navy) 12%,
    var(--blue) 50%,
    var(--brand-emerald) 88%,
    transparent 100%
  );
  opacity: 0.55;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}

/* Settled state after the page scrolls: contact + ambient shadows
   switch on and the hairline sharpens, so the bar visibly "lifts"
   off the page — background is already opaque at rest, so there's
   no opacity step here. */
.premium-navbar-blur.scrolled {
  background-color: #fbfdff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(15, 37, 68, 0.06),
    0 12px 32px -12px rgba(15, 37, 68, 0.16),
    0 4px 20px -8px rgba(26, 110, 181, 0.12);
}
.premium-navbar-blur.scrolled::after {
  opacity: 0.85;
}

.navbar-container-core {
  margin: 0 auto;
  padding: 0 24px;
  max-width: 2000px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.navbar-brand-anchor {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: opacity 0.2s ease;
  min-width: 0;
}
.navbar-brand-anchor:hover {
  opacity: 0.85;
}

.navbar-logo-lens-capsule {
  position: relative;
  height: 40px;
  width: auto;
  border-radius: 8px;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.navbar-lens-flare {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.navbar-lens-image {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.navbar-brand-typography {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.navbar-brand-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f2544;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.navbar-brand-tagline {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  color: #1a6eb5;
  letter-spacing: 0.05em;
  margin-top: 1px;
  white-space: nowrap;
}

.navbar-actions-deck {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Nav links: quiet at rest, soft tint on hover; the active link
   gets a pill tint + gradient underline — clear but understated
   so it never competes with the logo. */
.navbar-deck-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  color: #475569;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: var(--transition-base);
  white-space: nowrap;
}
.navbar-deck-link:hover {
  color: #0f2544;
  background: rgba(26, 110, 181, 0.06);
}
.navbar-deck-link.active {
  color: #1a6eb5;
  background: rgba(26, 110, 181, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.navbar-link-active-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #1a6eb5, #3b97e3);
  transform: translateX(-50%);
  transition: width 0.3s ease;
  border-radius: 100px;
  pointer-events: none;
}
.navbar-deck-link.active .navbar-link-active-indicator,
.navbar-deck-link:hover .navbar-link-active-indicator {
  width: 60%;
}

.navbar-exit-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: var(--radius-sm);
  color: #dc2626;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition-base);
}
.navbar-exit-trigger:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(153, 27, 27, 0.3), var(--glow-red);
}

/* ============================================================
   NAV DROPDOWN PANEL — glass panel primitive for any future
   user-menu / notifications flyout. Matches card depth
   conventions (top-tier blur, bevel, 3-layer stack) with a soft
   scale/fade entrance from the anchor point.
   Usage: <div class="nav-dropdown-panel"> under a relatively-
   positioned trigger inside the navbar.
   ============================================================ */
.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  padding: 8px;
  border-radius: var(--radius-lg);
  background-color: rgba(255, 255, 255, 0.78);
  background-image: var(--glass-layers);
  border: 1px solid;
  border-color: var(--bevel-border);
  backdrop-filter: blur(var(--blur-top)) saturate(var(--sat-top));
  -webkit-backdrop-filter: blur(var(--blur-top)) saturate(var(--sat-top));
  box-shadow: var(--shadow-contact), var(--shadow-ambient), var(--glow-blue), var(--edge-lip);
  transform-origin: top right;
  animation: navDropIn 0.22s var(--ease-spring) both;
  z-index: 1001;
}
@keyframes navDropIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--gray-600);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-base);
}
.nav-dropdown-item:hover {
  background: rgba(26, 110, 181, 0.08);
  color: var(--blue-dark);
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown-panel {
    animation: none;
  }
}

@media (max-width: 640px) {
  .navbar-container-core {
    padding: 0 16px;
    height: 60px;
    gap: 8px;
  }
  .navbar-logo-lens-capsule {
    height: 34px;
  }
  .navbar-brand-name {
    font-size: 14px;
  }
  .navbar-brand-tagline {
    display: none;
  }
  .navbar-deck-link span,
  .navbar-exit-trigger span {
    display: none;
  }
  .navbar-deck-link,
  .navbar-exit-trigger {
    padding: 8px 10px;
  }
  .navbar-actions-deck {
    gap: 4px;
  }
}
@media (max-width: 360px) {
  .navbar-container-core {
    padding: 0 12px;
  }
  .navbar-brand-name {
    font-size: 13px;
    max-width: 110px;
  }
  .navbar-deck-link,
  .navbar-exit-trigger {
    padding: 7px 8px;
  }
}
/* ==========================================================================
   1. Viewport Structure & Layout Systems
   ========================================================================== */

.home-page.dashboard-viewport {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

/* Full-viewport brand sweep — the hero opens on the boldest version of
   the theme's mint→sky "glass atrium" sweep: same stops as the html rule
   in theme-light-glass.css but pushed a touch more saturated, plus its
   own grain layer, so the landing page pops without breaking material.
   Pinned to the viewport (not the content box) so it always covers
   exactly 100vw x 100vh regardless of how tall the content gets. */
.home-bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--grad-pearl);
  background-image:
    var(--grain),
    radial-gradient(120% 120% at 8% 6%, var(--grad-mint) 0%, var(--grad-seafoam) 34%, transparent 62%),
    radial-gradient(130% 130% at 100% 100%, var(--grad-azure) 0%, var(--grad-sky) 40%, transparent 68%),
    radial-gradient(70% 55% at 55% 42%, var(--grad-gold) 0%, transparent 72%),
    linear-gradient(125deg, var(--grad-mint) 0%, var(--grad-seafoam) 42%, var(--grad-sky) 74%, var(--grad-azure) 100%);
  background-size: 160px 160px, cover, cover, cover, cover;
  background-position: center center;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

.home-split-layout {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 60px 24px;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 56px;
  align-items: center;
}

/* ==========================================================================
   2. Brand Logo Lockup
   ========================================================================== */

.home-brand-logo-frame {
  display: inline-flex;
  margin-bottom: 22px;
}

.home-brand-logo-img {
  height: 45px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(15, 37, 68, 0.14));
}

/* ── Eyebrow label above the headline ── */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  margin-bottom: 16px;
  border-radius: 20px;
  background: rgba(26, 110, 181, 0.08);
  border: 1px solid rgba(26, 110, 181, 0.18);
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.hero-eyebrow svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* ==========================================================================
   4. Left Column Content
   ========================================================================== */

.brand-hero-column {
  display: flex;
  flex-direction: column;
}

.main-display-headline {
  font-size: 54px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #0f2544;
  margin-bottom: 20px;
}

.gradient-text-block {
  display: block;
  font-family: "Sora", sans-serif;
  font-size: 38px;
  font-weight: 700;
  background: linear-gradient(120deg, var(--navy) 0%, var(--blue) 55%, var(--blue-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.editorial-sub-headline {
  font-size: 17px;
  color: #475569;
  line-height: 1.65;
  max-width: 540px;
  margin-bottom: 40px;
}

/* ==========================================================================
   5. Asymmetric Feature Matrix Component
   ========================================================================== */

.asymmetric-feature-matrix {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
}

.matrix-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  /* Nested-tier glass (the workspace card is this page's top surface):
     lighter blur so the feature rows don't compete with it. */
  background-color: rgba(255, 255, 255, 0.6);
  background-image: var(--glass-layers);
  backdrop-filter: blur(var(--blur-nested)) saturate(var(--sat-nested));
  -webkit-backdrop-filter: blur(var(--blur-nested)) saturate(var(--sat-nested));
  border: 1px solid;
  border-color: var(--bevel-border-soft);
  border-radius: var(--radius-lg);
  transition: border-color 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-spring), transform 0.3s var(--ease-spring);
  box-shadow: var(--stack-nested), var(--edge-lip);
  animation: matrixItemIn 0.55s var(--ease-spring) backwards;
}

.matrix-item:nth-child(1) { animation-delay: 0.05s; }
.matrix-item:nth-child(2) { animation-delay: 0.15s; }
.matrix-item:nth-child(3) { animation-delay: 0.25s; }

@keyframes matrixItemIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .matrix-item {
    animation: none;
  }
}

.matrix-item:hover {
  border-color: rgba(255, 255, 255, 0.95) rgba(26, 110, 181, 0.3) rgba(26, 110, 181, 0.34) rgba(255, 255, 255, 0.75);
  transform: translateX(4px) translateY(-2px);
  box-shadow: var(--shadow-contact), var(--shadow-ambient-sm), var(--glow-blue), var(--edge-lip);
}

.matrix-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--blue);
  color: #ffffff;
  flex-shrink: 0;
}

.matrix-icon-wrapper.tone-blue {
  background: var(--blue);
}

.matrix-icon-wrapper.tone-medium {
  background: var(--blue-light);
}

.matrix-icon-wrapper.tone-teal {
  background: #0e7490;
}

.matrix-body {
  flex: 1;
}

.matrix-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.matrix-body h4 {
  font-size: 15px;
  font-weight: 600;
  color: #1e3a5f;
}

.matrix-micro-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 20px;
}

.matrix-micro-badge.tone-blue {
  color: var(--blue);
  background: rgba(26, 110, 181, 0.09);
}

.matrix-micro-badge.tone-medium {
  color: var(--blue-dark);
  background: rgba(59, 130, 246, 0.1);
}

.matrix-micro-badge.tone-teal {
  color: #0e7490;
  background: rgba(14, 116, 144, 0.1);
}

.matrix-body p {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
}

/* ==========================================================================
   5b. Partner Bank Trust Strip
   ========================================================================== */

.partner-strip {
  margin-top: 28px;
  max-width: 560px;
}

.partner-strip-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #000000;
  margin-bottom: 12px;
}

.partner-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 40px;
  padding: 6px 10px;
  /* Near-opaque — these hold partner banks' own logo colors, which need a
     neutral white backdrop rather than a tint from the brand gradient
     behind them to stay recognizable/on-brand for the partner. */
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.partner-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.partner-logo:hover {
  border-color: rgba(26, 110, 181, 0.3);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ==========================================================================
   6. Right Column: Workspace Architecture Setup
   ========================================================================== */

.interactive-panel-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.glass-workspace-card {
  position: relative;
  width: 100%;
  max-width: 500px;
  padding: 40px;
  /* Top-tier glass, but with a raised base opacity (0.75) — the star card
     of the page holds a full login form, so legibility outranks
     translucency here. Still the full 4-layer recipe + bevel + cap. */
  background-color: rgba(255, 255, 255, 0.75);
  background-image: var(--glass-layers);
  backdrop-filter: blur(var(--blur-top)) saturate(var(--sat-top));
  -webkit-backdrop-filter: blur(var(--blur-top)) saturate(var(--sat-top));
  border: 1px solid;
  border-color: var(--bevel-border);
  border-radius: var(--radius-2xl);
  box-shadow:
    var(--shadow-contact),
    0 50px 90px -20px rgba(15, 37, 68, 0.35),
    var(--glow-blue),
    var(--edge-lip);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Brand-gradient cap — same convention as .card/.section-panel, so the
   login card visibly belongs to the same family as the app's panels. */
.glass-workspace-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--brand-cap);
}

.text-center {
  text-align: center;
}

/* ==========================================================================
   7. Role Toggle (Student / Lender) & Login ↔ Register Switch Links
   ========================================================================== */

.role-toggle-row {
  display: flex;
  gap: 8px;
  padding: 5px;
  margin-bottom: 20px;
  background: rgba(26, 110, 181, 0.06);
  border: 1px solid rgba(26, 110, 181, 0.12);
  border-radius: 12px;
}

.role-toggle-pill {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #475569;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.role-toggle-pill:hover {
  color: var(--blue);
}

.role-toggle-pill.active {
  background: #ffffff;
  color: var(--blue);
  box-shadow:
    0 1px 2px rgba(15, 37, 68, 0.06),
    0 4px 12px rgba(26, 110, 181, 0.16);
}

/* Lender sub-role radio (Executive Manager / Sales Manager) — same visual
   language as the role-toggle-row above, one tier down. */
.lender-role-radio-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.lender-role-radio {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid rgba(26, 110, 181, 0.16);
  border-radius: 10px;
  background: #ffffff;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.lender-role-radio:hover {
  border-color: rgba(26, 110, 181, 0.32);
  color: var(--blue);
}

.lender-role-radio.active {
  border-color: var(--blue);
  background: rgba(26, 110, 181, 0.08);
  color: var(--blue-dark);
  box-shadow: 0 4px 12px rgba(26, 110, 181, 0.14);
}

.lender-role-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.auth-switch-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: #475569;
  margin-top: 18px;
}

.auth-switch-link {
  display: inline-flex;
  align-items: center;
  border: none;
  padding: 6px 16px;
  border-radius: 20px;
  background: #0f2544;
  color: #ffffff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 37, 68, 0.25);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-switch-link:hover {
  background: var(--blue);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(26, 110, 181, 0.35);
}

/* ==========================================================================
   8. Form Structures & Modular Elements
   ========================================================================== */

.workspace-form-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.workspace-form-header {
  margin-bottom: 24px;
}

.minimal-back-action {
  background: none;
  border: none;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  margin-bottom: 14px;
  font-family: inherit;
  transition: color 0.15s ease;
}

.minimal-back-action:hover {
  color: var(--blue);
}

.workspace-form-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: #0f2544;
  margin-bottom: 6px;
}

.workspace-form-header p {
  font-size: 13px;
  color: #475569;
}

.form-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.form-header-row h2 {
  margin-bottom: 0;
}

.step-pill {
  font-size: 11px;
  font-weight: 700;
  color: var(--success-dark);
  background: rgba(22, 163, 74, 0.1);
  border: 1px solid rgba(22, 163, 74, 0.2);
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.modular-form-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.interactive-input-block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.interactive-input-block label {
  font-size: 13px;
  font-weight: 500;
  color: #334155;
}

.required-accent {
  color: var(--blue);
  margin-left: 2px;
}

/* Inline field-level error state — flags exactly which field failed
   validation instead of leaving the user to guess from a banner alone. */
.interactive-input-block.field-error label {
  color: #dc2626;
}

.interactive-input-block.field-error .premium-styled-input {
  border-color: #dc2626;
  /* whole-well tint, not just the border — the field itself reads as
     the thing that failed */
  background: rgba(220, 38, 38, 0.05);
  box-shadow:
    inset 0 2px 4px rgba(220, 38, 38, 0.06),
    0 0 0 3px rgba(220, 38, 38, 0.12);
  animation: fieldErrorShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes fieldErrorShake {
  10%,
  90% {
    transform: translateX(-1px);
  }
  20%,
  80% {
    transform: translateX(2px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-4px);
  }
  40%,
  60% {
    transform: translateX(4px);
  }
}

.name-fields-row {
  display: flex;
  gap: 12px;
}

.name-fields-row .salutation-block {
  flex: 0 0 34%;
}

.name-fields-row .first-name-block {
  flex: 1;
  min-width: 0;
}

.input-icon-wrap {
  position: relative;
}

.input-icon-wrap .field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--blue);
  opacity: 0.55;
  pointer-events: none;
}

.input-icon-wrap .premium-styled-input {
  padding-left: 40px;
}

/* Password fields also carry a right-side show/hide toggle — symmetric
   padding so typed text never runs under either icon. */
.input-icon-wrap.has-password-toggle .premium-styled-input {
  padding-right: 40px;
}

.password-toggle-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.password-toggle-btn:hover {
  color: var(--blue);
}

/* ── Forgot password ── */
/* Right-aligned under the password field, pulled up tight against it so it
   reads as belonging to that field rather than as a separate form row. */
.forgot-password-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -8px;
  margin-bottom: 18px;
}

.forgot-password-link {
  background: none;
  border: none;
  padding: 2px 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  transition: var(--transition-base);
}

.forgot-password-link:hover {
  color: var(--blue-dark);
  text-decoration: underline;
}

/* Only appears after GetLoggedInUser reports this account already has an
   active session elsewhere ("ALREADY LOGGED IN") — an explicit opt-in the
   person checks before a retry sends forceLogin: true, rather than that
   ever happening silently. */
.force-logout-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: -4px 0 16px;
  padding: 10px 12px;
  background: rgba(180, 83, 9, 0.06);
  border: 1px solid rgba(180, 83, 9, 0.22);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--warning);
  cursor: pointer;
}

.force-logout-check input[type="checkbox"] {
  margin-top: 2px;
  width: 15px;
  height: 15px;
  accent-color: var(--warning);
  flex-shrink: 0;
  cursor: pointer;
}

.password-mismatch-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -8px 0 16px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--warning);
}

/* Shallow glass well, matching .input-field's recess logic: inverted
   bevel (dim top/left, bright bottom/right) + soft inset shadow. */
.premium-styled-input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid;
  border-color: rgba(26, 110, 181, 0.24) rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.8) rgba(26, 110, 181, 0.16);
  border-radius: 10px;
  font-size: 14px;
  color: #0f2544;
  font-family: inherit;
  outline: none;
  transition: all 0.2s ease;
  box-shadow:
    inset 0 2px 4px rgba(15, 37, 68, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.7);
}

.premium-styled-input::placeholder {
  color: #94a3b8;
}

.premium-styled-input:focus {
  background: #ffffff;
  border-color: var(--blue);
  box-shadow:
    inset 0 1px 2px rgba(15, 37, 68, 0.04),
    0 0 0 4px rgba(26, 110, 181, 0.12),
    0 2px 12px -2px rgba(26, 110, 181, 0.16);
}

select.premium-styled-input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

select.premium-styled-input option {
  background-color: #ffffff;
  color: #0f2544;
  padding: 8px 14px;
}

.input-focus-border-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
  transition: all 0.3s ease;
  transform: translateX(-50%);
  pointer-events: none;
}

.premium-styled-input:focus ~ .input-focus-border-line {
  width: 80%;
  border-radius: 100px;
}

/* ==========================================================================
   9. Buttons, Handlers, & Feedback Node Overlays
   ========================================================================== */

.action-submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 6px;
  position: relative;
  overflow: hidden;
}

/* Loading spinner shown beside a submit button's label while a request is
   in flight (Login, OTP, registration, password reset). */
.spin {
  animation: homeSpin 0.85s linear infinite;
}
@keyframes homeSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Bright royal-blue gradient for the primary "new application" action. */
.action-submit-button.call-to-action {
  background: linear-gradient(135deg, #0f2544 0%, var(--blue) 55%, var(--blue-light) 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(26, 110, 181, 0.3);
}

.action-submit-button.call-to-action:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(26, 110, 181, 0.42);
}

.action-submit-button.otp-action {
  background: linear-gradient(
    115deg,
    #22b37f 0%,
    var(--success) 50%,
    var(--success-dark) 100%
  );
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.3);
}

.action-submit-button.otp-action:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(22, 163, 74, 0.42);
}

/* Subtle sheen sweep on hover, echoing the premium-interactive-card glint */
.action-submit-button.call-to-action::after,
.action-submit-button.otp-action::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  transform: translateX(-120%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.action-submit-button.call-to-action:hover:not(:disabled)::after,
.action-submit-button.otp-action:hover:not(:disabled)::after {
  transform: translateX(120%);
}

.action-submit-button:active:not(:disabled) {
  transform: translateY(0);
}

.action-submit-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.panel-error-alert {
  padding: 12px 16px;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 10px;
  color: #991b1b;
  font-size: 13px;
  line-height: 1.4;
}

/* ==========================================================================
   8b. OTP Verification — boxed digit entry
   ========================================================================== */

.otp-verify-form {
  align-items: center;
}

.otp-verify-form .icon-badge {
  margin-bottom: 2px;
}

.otp-verify-form .interactive-input-block {
  width: 100%;
  align-items: center;
}

.otp-label {
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  text-align: center;
}

.otp-box-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.otp-box {
  width: 46px;
  height: 56px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  font-family: inherit;
  color: #0f2544;
  background: #ffffff;
  border: 1.5px solid rgba(22, 163, 74, 0.22);
  border-radius: 12px;
  outline: none;
  caret-color: var(--success);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(15, 37, 68, 0.04);
}

.otp-box:hover {
  border-color: rgba(22, 163, 74, 0.4);
}

.otp-box:focus {
  border-color: var(--success);
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.14);
  transform: translateY(-2px);
}

.otp-box.filled {
  border-color: var(--success);
  background: rgba(22, 163, 74, 0.05);
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.1);
}

@keyframes otpShake {
  10%,
  90% {
    transform: translateX(-1px);
  }
  20%,
  80% {
    transform: translateX(2px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-5px);
  }
  40%,
  60% {
    transform: translateX(5px);
  }
}

.otp-box-row.otp-shake .otp-box {
  border-color: #dc2626;
  animation: otpShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.otp-change-identifier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  margin-top: 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.panel-success-alert {
  padding: 12px 16px;
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.22);
  border-radius: 10px;
  color: #15803d;
  font-size: 13px;
  line-height: 1.4;
}

/* ==========================================================================
   10. Media Adaptation Layer (Responsive Controls)
   ========================================================================== */

/* ── Tablet: single column, text on top ── */
@media (max-width: 1100px) {
  .home-split-layout {
    grid-template-columns: 1fr;
    gap: 48px;
    max-width: 640px;
    padding: 40px 24px 100px;
  }

  .brand-hero-column {
    text-align: center;
    align-items: center;
  }

  .main-display-headline {
    font-size: 42px;
  }

  .editorial-sub-headline {
    margin-left: auto;
    margin-right: auto;
  }

  .asymmetric-feature-matrix {
    max-width: 100%;
    width: 100%;
  }

  .matrix-item:hover {
    transform: translateY(-2px);
  }

  .glass-workspace-card {
    max-width: 100%;
  }

  .partner-strip {
    max-width: 100%;
  }

  .partner-logos {
    justify-content: center;
  }
}

/* ── Mobile: card on top, compact hero below ── */
@media (max-width: 768px) {
  .home-split-layout {
    gap: 20px;
    padding: 20px 16px 72px;
    max-width: 480px;
  }

  /* Login / registration card floats to top on mobile */
  .interactive-panel-column {
    order: -1;
  }
  .brand-hero-column {
    order: 1;
  }

  /* Compact headline */
  .main-display-headline {
    font-size: 26px;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
  }

  .gradient-text-block {
    font-size: 22px;
  }

  .editorial-sub-headline {
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 18px;
    color: #64748b;
  }

  /* Glass card: tighter, stronger presence */
  .glass-workspace-card {
    min-height: unset;
    padding: 24px 20px;
    border-radius: 20px;
    border-color: rgba(26, 110, 181, 0.14);
    box-shadow:
      0 0 0 1px rgba(26, 110, 181, 0.08),
      0 16px 40px rgba(15, 37, 68, 0.12),
      0 4px 16px rgba(26, 110, 181, 0.06);
  }

  /* Feature matrix → compact 3-column icon grid */
  .asymmetric-feature-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .matrix-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 8px;
    gap: 8px;
    border-radius: 12px;
    background: #ffffff;
    border-color: rgba(26, 110, 181, 0.1);
  }

  .matrix-item:hover {
    transform: translateY(-2px);
  }

  .matrix-header-row {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .matrix-micro-badge {
    display: none;
  }

  .matrix-body p {
    display: none;
  }

  .matrix-body h4 {
    font-size: 11px;
    font-weight: 600;
    color: #1e3a5f;
    line-height: 1.3;
    margin-top: 4px;
  }

  .matrix-icon-wrapper {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  /* Form */
  .name-fields-row {
    flex-direction: column;
    gap: 16px;
  }

  .name-fields-row .salutation-block {
    flex: 1;
  }

  .otp-box {
    width: 38px;
    height: 48px;
    font-size: 19px;
  }

  .otp-box-row {
    gap: 7px;
  }

  .action-submit-button {
    width: 100%;
    justify-content: center;
    padding: 12px 18px;
  }

  /* Logo strip */
  .home-brand-logo-img {
    height: 36px;
  }

  .home-brand-logo-frame {
    margin-bottom: 14px;
  }

  .hero-eyebrow {
    font-size: 11px;
    padding: 5px 12px;
    margin-bottom: 12px;
  }

  /* Partner strip → smaller chips, tighter rhythm */
  .partner-strip {
    margin-top: 20px;
  }

  .partner-logo {
    width: 52px;
    height: 34px;
    padding: 5px 8px;
  }
}

/* ── Small phones ── */
@media (max-width: 420px) {
  .home-split-layout {
    padding: 16px 14px 64px;
    gap: 16px;
  }

  .home-brand-logo-img {
    height: 38px;
  }

  .main-display-headline {
    font-size: 23px;
  }

  .gradient-text-block {
    font-size: 20px;
  }

  .glass-workspace-card {
    padding: 20px 16px;
    border-radius: 18px;
  }

  .otp-box {
    width: 32px;
    height: 44px;
    font-size: 17px;
  }

  .otp-box-row {
    gap: 5px;
  }

  .matrix-item {
    padding: 10px 6px;
  }

  .matrix-icon-wrapper {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .matrix-body h4 {
    font-size: 10px;
  }
}

/* ── Very small phones ── */
@media (max-width: 360px) {
  .main-display-headline {
    font-size: 21px;
  }

  .gradient-text-block {
    font-size: 18px;
  }

  .glass-workspace-card {
    padding: 16px 12px;
  }

  .home-split-layout {
    padding: 14px 12px 60px;
  }

  .asymmetric-feature-matrix {
    gap: 6px;
  }
}


/* The entire "Glass Lobby" light theme — tokens, glass material
   recipe, and shared primitives (buttons, cards, modals, inputs,
   badges) — lives in theme-light-glass.css. Page/component files
   consume its custom properties and conventions. */

/* =================================================================
   STUDYLEND — "GLASS LOBBY" LIGHT THEME  (theme-light-glass.css)
   -----------------------------------------------------------------
   Direction: morning light through a glass banking atrium — pearl
   whites, a whisper of mint and sky-blue, warm gold used only as a
   premium accent thread. Brand navy/emerald survive as the action
   colors so the product still reads as StudyLend.

   MATERIAL SYSTEM — every glass surface in the app is built from
   the same recipe, lit from the upper-left:

   1. BACKGROUND: 4 stacked image layers over a translucent white
      base — grain (anti-banding) → light-catch bloom (upper-left)
      → cool shadow-pool (lower-right) → faint brand bleed
      (emerald→blue diagonal). Reused via --glass-layers; only the
      base background-color changes per hierarchy tier.
   2. BORDER: beveled — bright top, warm-bright left, cool-dim
      right, dimmest bottom — plus an inset white hairline "lip"
      just inside the edge (--edge-lip).
   3. SHADOW: 3-layer stack — tight contact shadow + soft ambient
      float + an accent-tinted glow. Never a single gray drop.
   4. BLUR/SATURATION tiers: modal (32px/190%) > top-level card
      (26px/180%) > navbar (20px/170%, lighter so scrolling content
      stays legible beneath it) > nested surface (14px/150%).
   ================================================================= */

:root {
  /* ── Core ink + brand action colors ── */
  --navy: #0f2544;
  --blue: #1a6eb5;
  --navy-light: #26507c;
  --navy-dark: #071528;
  --blue-light: #3b97e3;
  --blue-dark: #0d508c;
  --accent: #d3960a;
  /* Lighter, fresher emerald pairing than a plain forest green — used for
     every "complete" state (Dashboard's done icons/progress fills,
     Sanctioned status, success toasts), so it reads as a friendly
     confirmation color rather than a heavy, dark green. */
  --success: #10b981;
  --success-dark: #059669;
  --error: #dc2626;
  --warning: #b45309;
  --white: #ffffff;

  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #94a3b8;
  --gray-400: #64748b;
  --gray-500: #475569;
  --gray-600: #334155;
  --gray-700: #1e293b;
  --gray-800: #0f172a;

  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(26, 110, 181, 0.14);

  /* ── Brand marks (sampled from the StudyLend logo) ── */
  --brand-navy: #04275c;
  --brand-navy-soft: rgba(4, 39, 92, 0.08);
  --brand-emerald: #1f8f6b;
  --brand-emerald-soft: rgba(31, 143, 107, 0.1);
  --brand-cap: linear-gradient(90deg, var(--brand-navy) 0%, var(--blue) 45%, var(--brand-emerald) 100%);

  /* ── LIGHT gradient journey — pearl → mint-mist → sky-mist → a
     faint gold breath at the horizon ── */
  --grad-pearl: #fbfdfc;
  --grad-mint: #dff6ea;
  --grad-seafoam: #cfeee2;
  --grad-sky: #dcecfb;
  --grad-azure: #cfe6fa;
  --grad-gold: #fbeecb;

  /* ============================================================
     GLASS MATERIAL RECIPE
     ============================================================ */

  /* Grain tile — fractal noise at ~2% alpha; kills gradient banding
     on bright displays and makes glass read as material, not CSS. */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.02 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* The shared 4-layer image stack. Surfaces set their own
     background-color (the translucency tier) underneath this. */
  --glass-layers:
    var(--grain),
    /* light-catch: white bloom anchored to the upper-left light source */
    radial-gradient(130% 100% at 0% 0%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.25) 46%, transparent 72%),
    /* shadow-pool: cool azure settling in the far corner */
    radial-gradient(120% 100% at 100% 100%, rgba(191, 219, 254, 0.5) 0%, rgba(207, 230, 250, 0.16) 48%, transparent 75%),
    /* brand bleed: a whisper of emerald→blue on the light's diagonal */
    linear-gradient(135deg, rgba(31, 143, 107, 0.05) 0%, transparent 42%, rgba(26, 110, 181, 0.06) 100%);

  /* Translucency tiers (background-color under --glass-layers) */
  --glass-base-modal: rgba(255, 255, 255, 0.78);
  --glass-base-top: rgba(255, 255, 255, 0.62);
  --glass-base-nested: rgba(255, 255, 255, 0.5);

  /* Beveled border — top/right/bottom/left. Bright top edge catches
     the light; left is warm-bright; right/bottom fall into cool
     slate shadow. One declaration fakes a whole light source. */
  --bevel-border: rgba(255, 255, 255, 0.92) rgba(148, 163, 184, 0.3) rgba(148, 163, 184, 0.42) rgba(255, 255, 255, 0.62);
  --bevel-border-soft: rgba(255, 255, 255, 0.8) rgba(148, 163, 184, 0.22) rgba(148, 163, 184, 0.3) rgba(255, 255, 255, 0.5);

  /* Inset hairline "lip" just inside the border — the glass edge
     highlight every surface shares. */
  --edge-lip: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.35);

  /* Blur / saturation hierarchy */
  --blur-modal: 32px;
  --blur-top: 26px;
  --blur-nav: 20px;
  --blur-nested: 14px;
  --sat-modal: 190%;
  --sat-top: 180%;
  --sat-nav: 170%;
  --sat-nested: 150%;

  /* ── Radius scale ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;

  /* ============================================================
     3-LAYER SHADOW STACKS — contact + ambient + tinted glow
     ============================================================ */
  --shadow-contact: 0 1px 2px rgba(15, 37, 68, 0.08);
  --shadow-ambient: 0 20px 48px -16px rgba(15, 37, 68, 0.18);
  --shadow-ambient-sm: 0 10px 24px -10px rgba(15, 37, 68, 0.12);

  --glow-blue: 0 10px 32px -10px rgba(26, 110, 181, 0.25);
  --glow-blue-strong: 0 14px 40px -10px rgba(26, 110, 181, 0.38);
  --glow-emerald: 0 10px 32px -10px rgba(31, 143, 107, 0.25);
  --glow-red: 0 10px 32px -10px rgba(220, 38, 38, 0.28);
  --glow-amber: 0 10px 32px -10px rgba(180, 83, 9, 0.26);
  --glow-gold: 0 10px 32px -10px rgba(211, 150, 10, 0.24);

  --stack-card: var(--shadow-contact), var(--shadow-ambient), var(--glow-blue);
  --stack-nested: 0 1px 2px rgba(15, 37, 68, 0.05), var(--shadow-ambient-sm), 0 8px 24px -12px rgba(26, 110, 181, 0.14);
  --stack-modal: 0 2px 6px rgba(15, 37, 68, 0.12), 0 48px 100px -24px rgba(15, 37, 68, 0.38), 0 16px 48px -12px rgba(26, 110, 181, 0.3);

  /* Legacy aliases kept for existing rules across the app */
  --shadow-sm: 0 1px 2px rgba(15, 37, 68, 0.04), 0 1px 1px rgba(15, 37, 68, 0.03);
  --shadow-md: 0 6px 20px -4px rgba(15, 37, 68, 0.09);
  --shadow-lg: 0 16px 40px -10px rgba(15, 37, 68, 0.14), 0 4px 14px -4px rgba(15, 37, 68, 0.06);
  --shadow-xl: 0 30px 70px -16px rgba(15, 37, 68, 0.22);
  --shadow-glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.4);

  /* ── Motion ── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: all 0.2s var(--ease);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  min-height: 100%;

  /* ============================================================
     LAYER 1 — Base sweep. A pale diagonal gradient (mint → sky →
     the faintest gold) so the page never reads as flat white, but
     stays airy enough that glass cards visibly float above it.
     ============================================================ */
  background-color: var(--grad-pearl);
  background-image:
    radial-gradient(120% 120% at 4% 2%, var(--grad-mint) 0%, rgba(223, 246, 234, 0.4) 38%, transparent 66%),
    radial-gradient(130% 130% at 100% 100%, var(--grad-azure) 0%, rgba(207, 230, 250, 0.35) 40%, transparent 68%),
    radial-gradient(80% 60% at 52% 46%, var(--grad-gold) 0%, transparent 70%),
    linear-gradient(128deg, var(--grad-mint) 0%, var(--grad-seafoam) 30%, var(--grad-sky) 62%, var(--grad-pearl) 100%);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ============================================================
   LAYER 2 — Page-level grain over the sweep.
   ============================================================ */

html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: var(--grain);
  background-size: 160px 160px;
}

body {
  font-family: "DM Sans", sans-serif;
  background: transparent;
  color: #0f2544;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ============================================================
   LAYER 3 — Drifting glass highlights: slow, oversized ellipses
   of white and pale gold drifting like sunlight on a glass floor.
   ============================================================ */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 10% 8%, rgba(255, 255, 255, 0.55) 0%, transparent 100%),
    radial-gradient(ellipse 46% 40% at 94% 92%, rgba(255, 255, 255, 0.4) 0%, transparent 100%),
    radial-gradient(ellipse 40% 34% at 58% 34%, rgba(251, 238, 203, 0.4) 0%, transparent 100%),
    radial-gradient(ellipse 36% 30% at 22% 70%, rgba(31, 143, 107, 0.07) 0%, transparent 100%);
  animation: lightShimmer 28s ease-in-out infinite alternate;
}

@keyframes lightShimmer {
  0% {
    opacity: 0.5;
    transform: scale(1) translate(0, 0);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.04) translate(1%, -1%);
  }
  100% {
    opacity: 0.6;
    transform: scale(0.98) translate(-1%, 1%);
  }
}

#root {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

@media (max-width: 768px) {
  html {
    background-attachment: scroll;
    background-position: center top;
    background-size: cover;
  }
  body::after {
    animation: none;
    opacity: 0.45;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Sora", sans-serif;
  color: var(--navy);
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(226, 232, 240, 0.5);
}

::-webkit-scrollbar-thumb {
  background: rgba(26, 110, 181, 0.28);
  border-radius: 3px;
}

/* ============================================================
   BUTTONS — full variant set. Every variant owns a tinted glow
   (blue for primary/secondary, red for danger, etc.); the sheen
   sweep is reserved for filled variants where it can catch light.
   Loading state (.is-loading) swaps label for a spinner without
   changing the button's footprint.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  border: none;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}

/* A lucide-react icon only sizes itself via HTML width/height attributes,
   not CSS — as a flex item (every .btn is display:inline-flex) that's not
   enough on its own in this browser engine, which can otherwise resolve
   the icon's flex-basis to 0 and render it invisible at 0 width (seen on
   Dashboard's close/view/download icon buttons). Applies to every button's
   icon app-wide, not just the ones already hit, since any icon-only button
   is equally exposed to the same collapse. */

.btn svg {
  flex-shrink: 0;
  width: auto;
  height: auto;
  overflow: hidden;
}

/* ── Primary: brand gradient fill + sweeping sheen + blue glow ── */

.btn-primary {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: white;
  box-shadow:
    0 1px 2px rgba(13, 80, 140, 0.35),
    0 6px 18px -4px rgba(26, 110, 181, 0.35),
    var(--glow-blue);
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s var(--ease);
}

.btn-primary:hover {
  /* transform: translateY(-2px); */
  box-shadow:
    0 2px 4px rgba(13, 80, 140, 0.3),
    0 10px 26px -4px rgba(26, 110, 181, 0.42),
    var(--glow-blue-strong);
}

/* .btn-primary:hover::after {
  transform: translateX(100%);
} */

/* ── Secondary: a true glass chip — full material recipe ── */

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.48);
  background-image: var(--glass-layers);
  color: var(--navy);
  border: 1px solid;
  border-color: var(--bevel-border-soft);
  backdrop-filter: blur(var(--blur-nested)) saturate(var(--sat-nested));
  -webkit-backdrop-filter: blur(var(--blur-nested)) saturate(var(--sat-nested));
  box-shadow: var(--shadow-contact), 0 6px 18px -8px rgba(15, 37, 68, 0.14), var(--edge-lip);
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.68);
  border-color: rgba(255, 255, 255, 0.95) rgba(26, 110, 181, 0.28) rgba(26, 110, 181, 0.32) rgba(255, 255, 255, 0.75);
  transform: translateY(-2px);
  transition: transform 0.5s var(--ease);
  box-shadow: var(--shadow-contact), var(--shadow-ambient-sm), var(--glow-blue), var(--edge-lip);
}

/* ── Outline: hairline brand border, fills faintly on hover ── */

.btn-outline {
  background: transparent;
  color: var(--blue-dark);
  border: 1px solid rgba(26, 110, 181, 0.4);
  box-shadow: none;
}

.btn-outline:hover {
  background: rgba(26, 110, 181, 0.07);
  border-color: var(--blue);
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(15, 37, 68, 0.06), var(--glow-blue);
}

/* ── Ghost: for toolbar/table actions — invisible until touched ── */

.btn-ghost {
  background: transparent;
  color: var(--gray-500);
  padding: 8px 14px;
  box-shadow: none;
}

.btn-ghost:hover {
  background: rgba(26, 110, 181, 0.08);
  color: var(--blue-dark);
}

/* ── Icon-only: square glass chip ── */

.btn-icon {
  padding: 0;
  width: 38px;
  height: 38px;
  justify-content: center;
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.5);
  background-image: var(--glass-layers);
  border: 1px solid;
  border-color: var(--bevel-border-soft);
  color: var(--gray-500);
  backdrop-filter: blur(var(--blur-nested)) saturate(var(--sat-nested));
  -webkit-backdrop-filter: blur(var(--blur-nested)) saturate(var(--sat-nested));
  box-shadow: var(--shadow-contact), var(--edge-lip);
}

.btn-icon:hover {
  color: var(--blue);
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.95) rgba(26, 110, 181, 0.3) rgba(26, 110, 181, 0.34) rgba(255, 255, 255, 0.75);
  box-shadow: var(--shadow-contact), var(--glow-blue), var(--edge-lip);
}

/* ── Danger: red-tinted glass; glow matches the accent, never gray ── */

.btn-danger {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.22);
  backdrop-filter: blur(12px);
}

.btn-danger:hover {
  background: rgba(220, 38, 38, 0.14);
  border-color: rgba(220, 38, 38, 0.38);
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.12), var(--glow-red);
}

/* ── Loading: label goes transparent (footprint preserved),
   spinner takes its place. ::before so filled variants keep
   their ::after sheen. ── */

.btn.is-loading {
  color: transparent !important;
  pointer-events: none;
}

.btn.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  animation: btnSpin 0.7s linear infinite;
}

.btn-secondary.is-loading::before,
.btn-outline.is-loading::before,
.btn-ghost.is-loading::before,
.btn-icon.is-loading::before {
  border-color: rgba(26, 110, 181, 0.25);
  border-top-color: var(--blue);
}

.btn-danger.is-loading::before {
  border-color: rgba(220, 38, 38, 0.25);
  border-top-color: var(--error);
}

@keyframes btnSpin {
  to {
    transform: rotate(360deg);
  }
}

.btn-sm {
  padding: 8px 16px;
  font-size: 13px;
}

.btn-lg {
  padding: 16px 32px;
  font-size: 16px;
}

/* ============================================================
   CARD — the core glass surface, full material recipe:
   4-layer background, beveled border + lip, contact/ambient/glow
   shadow stack, brand-gradient cap, and a specular sheen that
   sweeps across on hover (static glaze at rest).
   ============================================================ */

.card {
  position: relative;
  background-color: var(--glass-base-top);
  background-image: var(--glass-layers);
  border: 1px solid;
  border-color: var(--bevel-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(var(--blur-top)) saturate(var(--sat-top));
  -webkit-backdrop-filter: blur(var(--blur-top)) saturate(var(--sat-top));
  padding: 24px;
  box-shadow: var(--stack-card), var(--edge-lip);
  overflow: hidden;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--brand-cap);
  z-index: 1;
}

/* Specular sheen — faint diagonal glaze at rest; on hover the band
   sweeps across the pane like light moving over glass. */

.card::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -30%;
  width: 55%;
  height: 180%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 45%,
    rgba(255, 255, 255, 0.12) 62%,
    transparent 100%
  );
  transform: rotate(-8deg) translateX(0);
  transition: transform 0.9s var(--ease);
  pointer-events: none;
}

.card:hover::after {
  transform: rotate(-8deg) translateX(240%);
}

.card:hover {
  box-shadow: var(--shadow-contact), var(--shadow-ambient), var(--glow-blue-strong), var(--edge-lip);
}

/* ── Nested card: lighter blur/saturation so it never competes
   with its parent surface; softer bevel, smaller stack. ── */

.card-nested {
  position: relative;
  background-color: var(--glass-base-nested);
  background-image: var(--glass-layers);
  border: 1px solid;
  border-color: var(--bevel-border-soft);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--blur-nested)) saturate(var(--sat-nested));
  -webkit-backdrop-filter: blur(var(--blur-nested)) saturate(var(--sat-nested));
  padding: 16px;
  box-shadow: var(--stack-nested), var(--edge-lip);
}

/* ── Status variants: cap + glow shift together so the whole card
   reads as the status, not just a badge in the corner. ── */

.card-success::before {
  background: linear-gradient(90deg, var(--success-dark) 0%, var(--success) 55%, var(--brand-emerald) 100%);
}

.card-success {
  border-right-color: rgba(22, 163, 74, 0.3);
  border-bottom-color: rgba(22, 163, 74, 0.35);
  box-shadow: var(--shadow-contact), var(--shadow-ambient), var(--glow-emerald), var(--edge-lip);
}

.card-warning::before {
  background: linear-gradient(90deg, #92400e 0%, var(--warning) 55%, var(--accent) 100%);
}

.card-warning {
  border-right-color: rgba(180, 83, 9, 0.3);
  border-bottom-color: rgba(180, 83, 9, 0.35);
  box-shadow: var(--shadow-contact), var(--shadow-ambient), var(--glow-amber), var(--edge-lip);
}

.card-error::before {
  background: linear-gradient(90deg, #991b1b 0%, var(--error) 55%, #f87171 100%);
}

.card-error {
  border-right-color: rgba(220, 38, 38, 0.3);
  border-bottom-color: rgba(220, 38, 38, 0.35);
  box-shadow: var(--shadow-contact), var(--shadow-ambient), var(--glow-red), var(--edge-lip);
}

/* ============================================================
   RING PROGRESS — lightweight circular indicator for dashboard
   stat chips. Drive it with a CSS var: style="--ring: 72"

   The conic-gradient + mask (donut cutout) live on ::before, not
   on .ring-progress itself — a mask clips the WHOLE box it's
   applied to, including any real DOM children rendered inside it,
   not just its own background. With the mask on the element
   itself, a centered .ring-progress-value child sitting in that
   cutout area got masked away too (invisible, even though it was
   correctly in the DOM). Pushing the masked painting onto a
   pseudo-element leaves the actual child content unmasked.
   ============================================================ */

.ring-progress {
  --ring: 0;
  --ring-color: var(--blue);
  --ring-track: rgba(26, 110, 181, 0.12);
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ring-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--ring-color) calc(var(--ring) * 1%), var(--ring-track) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
}

.ring-progress.success {
  --ring-color: var(--success);
  --ring-track: rgba(22, 163, 74, 0.12);
}

.ring-progress.warning {
  --ring-color: var(--warning);
  --ring-track: rgba(180, 83, 9, 0.12);
}

.ring-progress.lg {
  width: 64px;
  height: 64px;
}

/* ============================================================
   Shared icon badge
   ============================================================ */

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(13, 80, 140, 0.3), 0 8px 20px -4px rgba(26, 110, 181, 0.28);
}

.icon-badge.sm {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
}

.icon-badge.md {
  width: 52px;
  height: 52px;
}

.icon-badge.lg {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
}

.icon-badge.soft {
  background: rgba(26, 110, 181, 0.08);
  border: 1px solid rgba(26, 110, 181, 0.2);
  color: var(--blue);
  box-shadow: none;
}

.icon-badge.success {
  background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
  box-shadow: 0 1px 2px rgba(13, 122, 55, 0.3), 0 8px 20px -4px rgba(22, 163, 74, 0.28);
}

.icon-badge.success.soft {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.2);
  color: var(--success-dark);
  box-shadow: none;
}

/* ============================================================
   Shared icon-prefixed input wrapper
   ============================================================ */

.input-icon-wrap {
  position: relative;
}

.input-icon-wrap .field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--blue);
  opacity: 0.6;
  pointer-events: none;
}

.input-icon-wrap .input-field {
  padding-left: 40px;
}

/* ============================================================
   MODALS — the heaviest glass in the system: deepest blur and
   saturation, tallest shadow stack, same brand cap as cards, and
   a soft scale/fade entrance.
   ============================================================ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(15, 37, 68, 0.32);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-box {
  background-color: var(--glass-base-modal);
  background-image: var(--glass-layers);
  border: 1px solid;
  border-color: var(--bevel-border);
  border-radius: 20px;
  padding: 36px 32px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  backdrop-filter: blur(var(--blur-modal)) saturate(var(--sat-modal));
  -webkit-backdrop-filter: blur(var(--blur-modal)) saturate(var(--sat-modal));
  box-shadow: var(--stack-modal), var(--edge-lip);
  position: relative;
  overflow: hidden;
  animation: modalIn 0.28s var(--ease-spring) both;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--brand-cap);
}

.modal-box h3 {
  font-size: 21px;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.modal-box p {
  font-size: 14px;
  color: #475569;
  line-height: 1.65;
  margin-bottom: 28px;
}

.modal-box p strong {
  color: #0f2544;
}

.modal-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  margin: 0 auto 22px;
  background: rgba(26, 110, 181, 0.08);
  border: 1px solid rgba(26, 110, 181, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a6eb5;
}

.modal-icon.danger {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.26);
  color: #dc2626;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* Send-to-bank / change-password style modal */

.bank-modal-box {
  max-width: 460px;
  max-height: 85vh;
  overflow-y: auto;
  text-align: left;
}

.bank-modal-title {
  text-align: center;
}

.bank-modal-desc {
  text-align: center;
  color: #475569;
  font-size: 14px;
  line-height: 1.5;
}

.bank-modal-loading {
  padding: 20px 0;
}

.bank-modal-empty {
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
  padding: 12px 0;
}

.bank-checklist {
  margin-bottom: 16px;
  max-height: 240px;
  overflow-y: auto;
}

.bank-check-row {
  cursor: pointer;
}

.bank-checkbox {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

@media (max-width: 480px) {
  .bank-modal-box {
    max-height: 90vh;
    padding: 28px 20px;
  }
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.settings-msg {
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
  line-height: 1.4;
}

.settings-msg.ok {
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.22);
  color: #16a34a;
}

.settings-msg.err {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.22);
  color: #dc2626;
}

.settings-msg.warn {
  background: rgba(180, 83, 9, 0.08);
  border: 1px solid rgba(180, 83, 9, 0.22);
  color: #b45309;
  text-align: left;
}

.password-wrap {
  position: relative;
}

.password-wrap .input-field {
  padding-right: 40px;
}

.show-pass {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.show-pass:hover {
  color: #1a6eb5;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

.input-group label span.required {
  color: #dc2626;
  margin-left: 3px;
}

/* ============================================================
   INPUTS — a shallow glass well: light sinks INTO the field
   (soft inset shadow from the top edge, i.e. the light source
   casts down into the recess) instead of the field floating.
   Focus = the well fills with light + a blue glow ring.
   Error/warn states tint the whole well, not just the border.
   ============================================================ */

.input-field {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid;
  /* inverted bevel — dim top/left, bright bottom/right — reads as
     a recess under an upper-left light instead of a raised chip */
  border-color: rgba(26, 110, 181, 0.22) rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.75) rgba(26, 110, 181, 0.16);
  border-radius: 10px;
  color: #0f2544;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  transition: all 0.2s ease;
  outline: none;
  backdrop-filter: blur(6px);
  box-shadow:
    inset 0 2px 4px rgba(15, 37, 68, 0.06),
    inset 0 1px 2px rgba(15, 37, 68, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.7);
}

.input-field:focus {
  border-color: var(--blue);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 2px rgba(15, 37, 68, 0.04),
    0 0 0 4px rgba(26, 110, 181, 0.13),
    0 2px 12px -2px rgba(26, 110, 181, 0.18);
}

.input-field::placeholder {
  color: var(--gray-400);
}

.input-field option {
  background: #ffffff;
  color: #0f2544;
}

/* Whole-well state tints — apply .err / .warn to the field, or
   .has-error / .has-warning to the wrapping .input-group */

.input-field.err,
.input-group.has-error .input-field {
  border-color: rgba(220, 38, 38, 0.5);
  background: rgba(220, 38, 38, 0.05);
  box-shadow:
    inset 0 2px 4px rgba(220, 38, 38, 0.06),
    0 0 0 3px rgba(220, 38, 38, 0.1);
}

.input-field.warn,
.input-group.has-warning .input-field {
  border-color: rgba(180, 83, 9, 0.45);
  background: rgba(180, 83, 9, 0.05);
  box-shadow:
    inset 0 2px 4px rgba(180, 83, 9, 0.06),
    0 0 0 3px rgba(180, 83, 9, 0.1);
}

.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--gray-400);
  letter-spacing: 0.2px;
}

.field-hint.err {
  color: var(--error);
}

.field-hint-link {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dashed rgba(26, 110, 181, 0.45);
  transition:
    color 0.15s,
    border-color 0.15s;
}

.field-hint-link:hover {
  color: var(--blue-light);
  border-bottom-color: var(--blue-light);
}

/* ============================================================
   BADGES & STATUS PILLS — deliberately FLAT. These must scan at
   a glance across long tables, so they opt out of the glass
   detailing: solid tint, solid border, no blur/shadow/gradient.
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.badge-success {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
  border: 1px solid rgba(22, 163, 74, 0.22);
}

.badge-warning {
  background: rgba(180, 83, 9, 0.1);
  color: #b45309;
  border: 1px solid rgba(180, 83, 9, 0.22);
}

.badge-error {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.badge-info {
  background: rgba(26, 110, 181, 0.08);
  color: var(--blue-dark);
  border: 1px solid rgba(26, 110, 181, 0.2);
}

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
  margin: 24px 0;
}

.page-bg {
  min-height: 100vh;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .btn {
    font-size: 13px;
    padding: 11px 18px;
  }

  .btn-lg {
    padding: 13px 22px;
    font-size: 14px;
  }
}

.animate-fade-in {
  animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ── Shared loan-status badge — flat on purpose (see BADGES note) ── */

.loan-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.loan-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

.loan-pending    { background: rgba(148,163,184,0.10); color: #64748b; border-color: rgba(148,163,184,0.25); }

.loan-inprocess  { background: rgba(234,88,12,0.08);   color: #ea580c; border-color: rgba(234,88,12,0.25); }

.loan-sanctioned { background: rgba(13,148,136,0.08);  color: #0d9488; border-color: rgba(13,148,136,0.25); }

.loan-rejected   { background: rgba(220,38,38,0.08);   color: #dc2626; border-color: rgba(220,38,38,0.22); }

/* ============================================================
   Reduced motion — all ambient/decorative motion off
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none;
  }
  .btn-primary::after,
  .card::after {
    display: none;
  }
  .modal-box {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}