:root {
  --sf-navy: #17324d;
  --sf-navy-deep: #10263a;
  --sf-blue: #27628f;
  --sf-gold: #d3a63f;
  --sf-surface: #f4f6f8;
  --sf-border: #d9e0e6;
}

body {
  background: var(--sf-surface);
  color: #17212b;
  min-height: 100vh;
  font-variant-numeric: tabular-nums;
}

.app-header { background: var(--sf-navy-deep); }
.brand { color: #fff; display: inline-flex; align-items: center; gap: .75rem; font-weight: 700; letter-spacing: .01em; }
.brand:hover { color: #fff; }
.brand-mark { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .35rem; background: var(--sf-gold); color: var(--sf-navy-deep); font-size: .85rem; }
.app-header .nav-link { color: rgba(255, 255, 255, .78); padding: .25rem 0; }
.app-header .nav-link:hover, .app-header .nav-link:focus { color: #fff; }
.app-header .nav-link:focus-visible { outline: 2px solid var(--sf-gold); outline-offset: 2px; }

.eyebrow { color: var(--sf-blue); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.auth-shell { max-width: 31rem; margin: 4vh auto; }
.card, .balance-card { border-color: var(--sf-border); border-radius: .6rem; }
.balance-card { background: #fff; border: 1px solid var(--sf-border); padding: 1.5rem; }
.balance-label { color: #52606d; font-size: .85rem; font-weight: 700; letter-spacing: .03em; margin-bottom: .4rem; text-transform: uppercase; }
.balance-amount { color: var(--sf-navy-deep); font-size: clamp(2rem, 6vw, 3rem); font-weight: 650; line-height: 1.1; margin-bottom: 1rem; }
.btn-primary { --bs-btn-bg: var(--sf-blue); --bs-btn-border-color: var(--sf-blue); --bs-btn-hover-bg: var(--sf-navy); --bs-btn-hover-border-color: var(--sf-navy); }
.btn-outline-primary { --bs-btn-color: var(--sf-blue); --bs-btn-border-color: var(--sf-blue); --bs-btn-hover-bg: var(--sf-blue); --bs-btn-hover-border-color: var(--sf-blue); }
.form-control:focus, .form-check-input:focus { border-color: var(--sf-blue); box-shadow: 0 0 0 .2rem rgba(39, 98, 143, .18); }
.amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.positive { color: #17663b; }
.register-table th { color: #53616f; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.status-label { background: #e8eef3; border-radius: 999px; color: #33475a; display: inline-block; font-size: .75rem; font-weight: 650; padding: .25rem .55rem; text-transform: capitalize; white-space: nowrap; }
.account-summary > div { align-items: baseline; border-bottom: 1px solid var(--sf-border); display: flex; justify-content: space-between; padding: .8rem 0; }
.account-summary > div:first-child { padding-top: 0; }
.account-summary > div:last-child { border-bottom: 0; padding-bottom: 0; }
.account-summary dt { color: #52606d; font-weight: 500; }
.account-summary dd { font-size: 1.25rem; font-weight: 650; margin: 0; }
.account-summary .total { margin-top: .4rem; }
.account-summary .total dt, .account-summary .total dd { color: var(--sf-navy-deep); font-weight: 700; }
.money-input { max-width: 16rem; }
main h1, main h2, main h3, main p, main dd, main td { overflow-wrap: break-word; }
.pin-reset { min-width: 8rem; max-width: 10rem; }
.debt-definition-card dt { color: var(--sf-navy-deep); }
.debt-definition-card dd { color: #52606d; margin-bottom: .65rem; }
.debt-definition-card dd:last-child { margin-bottom: 0; }
.debt-metric { background: #fff; border: 1px solid var(--sf-border); border-radius: .6rem; height: 100%; padding: 1rem; }
.debt-metric span { color: #52606d; display: block; font-size: .8rem; font-weight: 700; margin-bottom: .25rem; text-transform: uppercase; }
.debt-metric strong { color: var(--sf-navy-deep); display: block; font-size: 1.25rem; }
.debt-metric-total { border-top: .25rem solid var(--sf-gold); padding-top: .8rem; }
.debt-schedule, .debt-comparison { min-width: 42rem; }
.debt-schedule td, .debt-schedule th, .debt-comparison td { font-variant-numeric: tabular-nums; }

@media (max-width: 575.98px) {
  .app-header nav { align-items: flex-start !important; }
  .app-header nav > div { width: 100%; }
  .auth-shell { margin-top: 0; }
  .register-table { min-width: 48rem; }
}