body { min-height: 100vh; }
.hero { padding: 2.75rem 0 2.25rem; background: var(--dark); }
.hero h1, .hero h2 { color: var(--text-on-dark); }
.hero p { color: var(--text-on-dark-sub); }
.demo-header { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1.5rem; }
.demo-header p { margin-top:.35rem; }
.stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.demo-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.demo-form .wide { grid-column:1/-1; }
.transaction-list { display:flex; flex-direction:column; }
.transaction-row { display:grid; grid-template-columns:1fr auto; gap:.3rem 1rem; padding:1rem 1.4rem; border-bottom:1px solid var(--border-light); }
.transaction-row:last-child { border-bottom:0; }
.transaction-meta { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; color:var(--text-muted); font-size:.78rem; }
.transaction-amount { grid-column:2; grid-row:1/3; align-self:center; text-align:right; font-weight:800; }
.income-text { color:var(--sage); }
.expense-text { color:var(--red); }
.goal-progress { height:.65rem; overflow:hidden; border-radius:99px; background:var(--bg-warm); }
.goal-progress span { display:block; height:100%; border-radius:inherit; background:var(--sage); }
.report-bars { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.65rem; align-items:end; min-height:190px; padding-top:1rem; }
.report-month { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:.4rem; height:180px; font-size:.7rem; color:var(--text-muted); }
.bar-pair { display:flex; align-items:flex-end; gap:4px; height:145px; }
.bar { width:14px; min-height:2px; border-radius:4px 4px 0 0; background:var(--sage-pale); }
.bar.expense { background:#f0b9b5; }
.quiz-option { display:flex; width:100%; align-items:center; gap:.8rem; margin-top:.7rem; padding:.9rem 1rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:white; text-align:left; color:var(--text-dark); cursor:pointer; font:inherit; }
.quiz-option:hover { border-color:var(--sage); background:#f5faf6; }
.quiz-option:disabled { cursor:default; }
.opt-key { display:grid; width:1.8rem; height:1.8rem; flex:0 0 auto; place-items:center; border-radius:50%; background:var(--bg); font-weight:800; }
.auth-intro, .auth-features { position:relative; z-index:1; }
.auth-features { display:flex; flex-direction:column; gap:1.25rem; }
.auth-feature { padding:1.25rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:.75rem; }
.auth-feature h3 { margin:0 0 .25rem; font-family:var(--font-heading); font-size:1.5rem; color:var(--text-on-dark); }
.auth-feature p { margin:0; color:rgba(255,255,255,.4); font-size:.8125rem; }
.auth-feature-goals h3 { color:#FDF4E1; }
.auth-description { margin:0 0 2rem; color:var(--text-muted); }
.auth-submit { margin-top:.75rem; }
.empty-state { padding:1.75rem; text-align:center; color:var(--text-muted); }
.button-row { display:flex; flex-wrap:wrap; gap:.65rem; }
.toast { position:fixed; right:1rem; bottom:1rem; z-index:200; max-width:min(26rem,calc(100vw - 2rem)); padding:.9rem 1rem; border-radius:var(--radius-sm); background:var(--dark); color:white; box-shadow:var(--shadow-md); }
.toast.error { background:var(--red-deep); }
.article-card h3 { margin:.8rem 0 .4rem; }
@media (max-width:760px) {
  .container { padding-left:1rem; padding-right:1rem; }
  .stat-grid { grid-template-columns:1fr; }
  .demo-header { align-items:flex-start; flex-direction:column; }
  .demo-form { grid-template-columns:1fr; }
  .demo-form .wide { grid-column:auto; }
}