* {margin: 0; padding: 0; box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif; background: #ffffff; color: #1f2937; min-height: 100vh; padding-bottom: 4rem;}
a {color: inherit; text-decoration: none;}

/* ===== Top nav ===== */
.topnav {background: #ffffff; border-bottom: 1px solid #e5e7eb; padding: 0.875rem 2rem; display: flex; align-items: center; justify-content: space-between;}
.brand {display: flex; align-items: center; gap: 0.625rem; font-weight: 800; color: #4f46e5; font-size: 1.125rem;}
.brand-logo {width: 32px; height: 32px; background: linear-gradient(135deg, #4f46e5, #6366f1); border-radius: 9px; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.95rem; font-weight: 700;}
.brand-tag {background: #1f2937; color: white; font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.075em; margin-left: 0.375rem;}
.user-menu {display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.875rem; border-radius: 8px;}
.user-menu:hover {background: #f3f4f6;}
.user-name {font-size: 0.95rem; color: #4f46e5; font-weight: 600;}
.user-caret {color: #6366f1; font-size: 0.75rem;}

/* ===== Strips ===== */
.strip {background: #ffffff; border-bottom: 1px solid #e5e7eb; padding: 1.25rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;}
.strip-message {font-size: 1.25rem; font-weight: 700; color: #1f2937; flex: 1; min-width: 280px;}
.strip-stats {display: flex; align-items: center; gap: 2rem;}
.strip-stat {display: flex; align-items: center; gap: 0.625rem;}
.strip-stat-icon {width: 38px; height: 38px; background: #fef3c7; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem;}
.strip-stat-text {display: flex; flex-direction: column; line-height: 1.1;}
.strip-stat-value {font-size: 1.375rem; font-weight: 800; color: #1f2937;}
.strip-stat-label {font-size: 0.7rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.125rem;}
.strip-divider {width: 1px; height: 36px; background: #e5e7eb;}
.strip-cycle {display: flex; flex-direction: column; gap: 0.25rem; min-width: 200px;}
.strip-cycle-row {display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8rem;}
.strip-cycle-name {font-weight: 700; color: #1f2937; font-size: 0.95rem;}
.strip-cycle-progress {color: #6b7280; font-size: 0.75rem;}
.strip-bar {height: 8px; background: #ede9fe; border-radius: 999px; overflow: hidden;}
.strip-bar-fill {height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 999px;}

/* ===== Profile strip ===== */
.profile {background: #f9fafb; border-bottom: 1px solid #e5e7eb; padding: 1.5rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;}
.profile-left {display: flex; align-items: center; gap: 1.25rem; min-width: 0;}
.avatar {width: 72px; height: 72px; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.75rem; font-weight: 800; flex-shrink: 0; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);}
.avatar.admin {background: linear-gradient(135deg, #1f2937, #374151); box-shadow: 0 4px 12px rgba(31, 41, 55, 0.3);}
.profile-info {min-width: 0;}
.profile-name-row {display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap;}
.profile-name {font-size: 1.625rem; font-weight: 800; color: #1f2937; line-height: 1.1;}
.profile-role {background: #1f2937; color: white; font-size: 0.7rem; font-weight: 700; padding: 0.25rem 0.5rem; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.05em;}
.profile-sub {font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem;}
.profile-sub strong {color: #4f46e5;}
.profile-right {display: flex; align-items: center; gap: 0.875rem;}
.profile-money {background: #ffffff; border: 2px solid #d1fae5; border-radius: 12px; padding: 0.75rem 1.125rem; text-align: right; min-width: 180px; display: block;}
.profile-money.neg {border-color: #fecaca;}
.profile-money-value {font-size: 1.5rem; font-weight: 800; color: #10b981; line-height: 1;}
.profile-money-value.neg {color: #ef4444;}
.profile-money-label {font-size: 0.7rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.25rem;}
.profile-money-breakdown {font-size: 0.7rem; color: #6b7280; margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px dashed #e5e7eb; line-height: 1.4;}
.profile-money-breakdown strong {color: #1f2937; font-weight: 700;}

/* ===== Bill alert ===== */
.bill-alert {background: linear-gradient(90deg, #b45309, #d97706); color: white; padding: 0.875rem 2rem; display: flex; align-items: center; gap: 0.875rem; font-size: 0.9rem;}
.bill-alert-icon {width: 32px; height: 32px; background: rgba(255,255,255,0.25); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; backdrop-filter: blur(8px);}
.bill-alert-text {flex: 1; min-width: 0; line-height: 1.5;}
.bill-alert-text strong {font-weight: 800;}
.bill-alert-cta {background: white; color: #b45309; font-size: 0.825rem; font-weight: 800; padding: 0.45rem 0.875rem; border-radius: 8px; flex-shrink: 0; white-space: nowrap;}

/* ===== Negative state banner ===== */
.neg-banner {background: linear-gradient(90deg, #991b1b, #dc2626); color: white; padding: 0.875rem 2rem; display: flex; align-items: center; gap: 0.875rem; font-size: 0.9rem;}
.neg-banner strong {font-weight: 800;}

/* ===== Layout ===== */
.layout {display: grid; grid-template-columns: 240px 1fr; gap: 0; min-height: calc(100vh - 240px);}
.sidebar {border-right: 1px solid #e5e7eb; padding: 2rem 0; background: #ffffff;}
.sidebar-section {margin-bottom: 2rem;}
.sidebar-heading {font-size: 0.7rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.1em; padding: 0 1.5rem; margin-bottom: 0.5rem;}
.sidebar-link {display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 1.5rem; font-size: 0.95rem; color: #4b5563; transition: all 0.15s; border-left: 3px solid transparent;}
.sidebar-link:hover {background: #f9fafb; color: #1f2937;}
.sidebar-link.active {background: #f5f3ff; color: #4f46e5; font-weight: 600; border-left-color: #6366f1;}
.sidebar-link-icon {font-size: 1rem; width: 20px; text-align: center;}
.sidebar-badge {margin-left: auto; background: #ede9fe; color: #4f46e5; font-size: 0.7rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 999px;}
.sidebar-link.active .sidebar-badge {background: #6366f1; color: white;}
.sidebar-badge.alert {background: #f59e0b; color: white;}

/* Main */
.main {padding: 0;}
.crumbs {padding: 1rem 2.5rem 0; font-size: 0.875rem; color: #6b7280;}
.crumbs a {color: #6366f1; font-weight: 600;}
.page-head {padding: 1.5rem 2.5rem 0; max-width: 1100px;}
.page-title {font-size: 1.875rem; font-weight: 800; color: #1f2937; line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 0.4rem;}
.page-sub {font-size: 1rem; color: #6b7280; line-height: 1.5;}

/* Tabs */
.tabs {margin: 1.5rem 2.5rem 0; max-width: 1100px; display: flex; gap: 0.25rem; border-bottom: 1px solid #e5e7eb; flex-wrap: wrap;}
.tab {padding: 0.75rem 1.125rem; font-size: 0.9rem; font-weight: 600; color: #6b7280; border-bottom: 2px solid transparent; margin-bottom: -1px;}
.tab:hover {color: #1f2937;}
.tab.active {color: #4f46e5; border-bottom-color: #6366f1;}

/* Section */
.section {padding: 2rem 2.5rem 0; max-width: 1100px;}
.section-head {display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap;}
.section-title {font-size: 0.85rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 0.5rem;}
.section-link {font-size: 0.85rem; font-weight: 600; color: #6366f1;}
.section-link:hover {text-decoration: underline;}
.section-count {background: #ede9fe; color: #4f46e5; font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 999px;}

/* Cards */
.cards {display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem;}
.card {background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; transition: all 0.2s; display: flex; flex-direction: column;}
.card:hover {transform: translateY(-3px); box-shadow: 0 12px 24px -8px rgba(0,0,0,0.12); border-color: #c7d2fe;}
.card.locked {cursor: not-allowed; opacity: 0.6;}
.card-banner {height: 140px; position: relative; display: flex; align-items: center; justify-content: center; color: white; overflow: hidden;}
.card-banner::before {content: ''; position: absolute; top: -30%; right: -20%; width: 80%; height: 160%; background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 60%); pointer-events: none;}
.card-banner-day {font-size: 3.5rem; font-weight: 900; opacity: 0.95; letter-spacing: -0.05em; line-height: 1; z-index: 1;}
.card-banner-tag {position: absolute; top: 0.75rem; left: 0.75rem; background: rgba(255,255,255,0.25); backdrop-filter: blur(8px); color: white; font-size: 0.7rem; font-weight: 700; padding: 0.25rem 0.625rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; z-index: 1;}
.card-banner-status {position: absolute; top: 0.75rem; right: 0.75rem; background: rgba(255,255,255,0.95); color: #10b981; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 800; z-index: 1;}
.card-banner-lock {position: absolute; top: 0.75rem; right: 0.75rem; background: rgba(255,255,255,0.2); color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; z-index: 1;}
.card-body {padding: 1rem 1.25rem; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem;}
.card-title {font-size: 1.05rem; font-weight: 700; color: #1f2937; line-height: 1.3;}
.card-meta {font-size: 0.825rem; color: #6b7280;}
.card-meta strong {color: #1f2937; font-weight: 700;}
.card-score {color: #10b981; font-weight: 700;}
.card-score.partial {color: #f59e0b;}

.banner-money-basics {background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);}
.banner-banking {background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);}
.banner-earning {background: linear-gradient(135deg, #047857 0%, #10b981 100%);}
.banner-spending {background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);}
.banner-investing {background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);}
.banner-stockmarket {background: linear-gradient(135deg, #be123c 0%, #f43f5e 100%);}
.banner-refresher {background: linear-gradient(135deg, #1e293b 0%, #475569 100%);}

/* Buttons */
.btn {display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.625rem 1rem; border-radius: 9px; border: 1px solid #e5e7eb; background: white; color: #1f2937; font-size: 0.9rem; font-weight: 700; cursor: pointer; text-align: center; line-height: 1;}
.btn:hover {background: #f9fafb;}
.btn-primary {background: #6366f1; border-color: #6366f1; color: white;}
.btn-primary:hover {background: #4f46e5; border-color: #4f46e5;}
.btn-success {background: #10b981; border-color: #10b981; color: white;}
.btn-success:hover {background: #059669; border-color: #059669;}
.btn-danger {background: white; color: #ef4444; border-color: #fecaca;}
.btn-danger:hover {background: #fef2f2;}
.btn-block {display: flex; width: 100%; justify-content: center;}

/* Form */
.form-row {display: flex; gap: 0.5rem; align-items: stretch;}
.input {flex: 1; border: 1px solid #e5e7eb; border-radius: 9px; padding: 0.625rem 0.875rem; font-size: 1rem; outline: none;}
.input:focus {border-color: #6366f1;}
.label {display: block; font-size: 0.75rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem;}

/* Bank tiles */
.tiles {margin: 1.5rem 2.5rem 0; max-width: 1100px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.875rem;}
.tile {background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 1.125rem 1.25rem; transition: all 0.15s; display: flex; flex-direction: column; gap: 0.25rem;}
.tile:hover {border-color: #c7d2fe; transform: translateY(-2px); box-shadow: 0 8px 16px -6px rgba(0,0,0,0.08);}
.tile-head {display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem;}
.tile-icon {width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 700;}
.tile-icon.cash {background: #d1fae5; color: #047857;}
.tile-icon.savings {background: #dbeafe; color: #1e40af;}
.tile-icon.sp500 {background: #fef3c7; color: #92400e;}
.tile-icon.btc {background: #fed7aa; color: #c2410c;}
.tile-name {font-size: 0.7rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.08em;}
.tile-value {font-size: 1.625rem; font-weight: 800; color: #1f2937; line-height: 1.05; letter-spacing: -0.02em;}
.tile-value.neg {color: #ef4444;}
.tile-meta {font-size: 0.78rem; color: #6b7280; line-height: 1.4;}
.tile-meta strong {color: #1f2937; font-weight: 700;}
.tile-delta {font-size: 0.78rem; font-weight: 700;}
.tile-delta.up {color: #10b981;}
.tile-delta.down {color: #ef4444;}

/* Net worth hero */
.networth {margin: 1.75rem 2.5rem 0; max-width: 1100px; background: linear-gradient(135deg, #4f46e5 0%, #6366f1 60%, #8b5cf6 100%); border-radius: 18px; padding: 1.875rem 2rem; color: white; box-shadow: 0 12px 32px -8px rgba(99, 102, 241, 0.45); position: relative; overflow: hidden;}
.networth.neg {background: linear-gradient(135deg, #991b1b, #dc2626 100%); box-shadow: 0 12px 32px -8px rgba(220, 38, 38, 0.45);}
.networth::before {content: ''; position: absolute; top: -40%; right: -10%; width: 60%; height: 180%; background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 60%); pointer-events: none;}
.networth-label {font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.85; margin-bottom: 0.5rem;}
.networth-value {font-size: 3rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1;}
.networth-sub {margin-top: 0.625rem; font-size: 0.9rem; opacity: 0.92; line-height: 1.5;}

/* Flash */
.flash {margin: 1rem 2.5rem 0; max-width: 1100px; padding: 0.75rem 1rem; border-radius: 9px; font-size: 0.9rem; font-weight: 600;}
.flash.ok {background: #d1fae5; color: #047857;}
.flash.err {background: #fee2e2; color: #991b1b;}

/* Predatory loan ad — sidebar */
.loan-ad {display: block; margin: 1.5rem 1rem; padding: 1rem; border-radius: 12px; background: linear-gradient(135deg, #facc15 0%, #f97316 50%, #ef4444 100%); color: #1f2937; box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35); position: relative; overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; cursor: pointer;}
.loan-ad:hover {transform: translateY(-2px) rotate(-0.5deg); box-shadow: 0 8px 22px rgba(239, 68, 68, 0.5);}
.loan-ad::before {content: '💵💵💵'; position: absolute; top: -10px; right: -10px; font-size: 2rem; opacity: 0.25; transform: rotate(15deg); pointer-events: none;}
.loan-ad-tag {font-size: 0.55rem; font-weight: 800; color: rgba(31,41,55,0.6); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.4rem;}
.loan-ad-headline {font-size: 1rem; font-weight: 900; line-height: 0.95; letter-spacing: -0.02em; margin-bottom: 0.625rem; text-shadow: 1px 1px 0 rgba(255,255,255,0.4);}
.loan-ad-pitch {font-size: 0.7rem; font-weight: 700; line-height: 1.5; margin-bottom: 0.625rem;}
.loan-ad-cta {background: white; color: #ef4444; font-size: 0.75rem; font-weight: 800; padding: 0.45rem 0.625rem; border-radius: 7px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.1);}
.loan-ad-fineprint {margin-top: 0.5rem; font-size: 0.55rem; font-weight: 600; color: rgba(31,41,55,0.6); text-align: center;}

/* Generic util */
.muted {color: #6b7280;}
.small {font-size: 0.825rem;}
.right {text-align: right;}
.gap-1 {gap: 1rem;}
.up {color: #10b981;}
.down {color: #ef4444;}
.spacer {height: 2rem;}

/* Responsive */
@media (max-width: 900px) {
  .layout {grid-template-columns: 1fr;}
  .sidebar {border-right: none; border-bottom: 1px solid #e5e7eb; padding: 1rem 0; display: flex; overflow-x: auto; gap: 0;}
  .sidebar-section {margin-bottom: 0; display: flex;}
  .sidebar-heading {display: none;}
  .sidebar-link {border-left: none; border-bottom: 3px solid transparent; padding: 0.5rem 1rem; white-space: nowrap;}
  .sidebar-link.active {border-left: none; border-bottom-color: #6366f1; background: transparent;}
  .tiles {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 720px) {
  .topnav, .strip, .profile, .bill-alert, .neg-banner {padding-left: 1rem; padding-right: 1rem;}
  .strip-divider {display: none;}
  .strip-cycle {min-width: 100%;}
  .profile-name {font-size: 1.25rem;}
  .avatar {width: 56px; height: 56px; font-size: 1.4rem;}
  .crumbs, .page-head, .tabs, .networth, .tiles, .section, .flash {margin-left: 1rem; margin-right: 1rem;}
  .tabs {overflow-x: auto;}
  .tab {white-space: nowrap;}
  .networth-value {font-size: 2.25rem;}
}