:root {
  --finance-ink: #20354b;
  --finance-green: #34bf49;
  --finance-mist: #f3f6f4;
  --finance-line: #e2e8e4;
}

body.finance-shell { background: var(--finance-mist); color: #4d5b68; }
.finance-header { background: rgba(255, 255, 255, .94); }
.brand { color: var(--finance-ink); font-size: 1.18rem; font-weight: 300; text-decoration: none; }
.brand strong { font-weight: 700; }
.brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: var(--finance-green); font-size: .95rem; }
.finance-nav a { color: #65717c; font-size: .88rem; font-weight: 600; text-decoration: none; }
.finance-nav a:hover, .finance-nav a.active { color: var(--finance-green); }
.icon-button { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--finance-line); border-radius: 50%; color: var(--finance-ink); background: #fff; text-decoration: none; }
.user-chip { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: var(--finance-ink); font-weight: 700; }
.page-heading { color: var(--finance-ink); font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 400; letter-spacing: 0; }
.eyebrow { display: block; color: var(--finance-green); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.metric-card, .section-card { border: 1px solid var(--finance-line); border-radius: 8px; background: #fff; padding: clamp(1.25rem, 2.5vw, 2rem); }
.metric-card-dark { border-color: var(--finance-ink); color: #fff; background: var(--finance-ink); }
.card-heading { color: var(--finance-ink); font-size: 1.35rem; font-weight: 500; }
.metric-card-dark .display-4 { color: #fff; }
.sparkline { display: flex; align-items: end; gap: 1.2%; height: 55px; border-bottom: 1px solid rgba(255,255,255,.2); }
.sparkline span { flex: 1; border-radius: 4px 4px 0 0; background: var(--finance-green); opacity: .8; }
.score-ring { display: grid; place-items: center; width: 76px; height: 76px; border: 7px solid #bdebc5; border-right-color: var(--finance-green); border-radius: 50%; color: var(--finance-ink); font-size: 1.25rem; font-weight: 700; }
.text-link { color: var(--finance-green); font-size: .85rem; font-weight: 700; text-decoration: none; }
.allocation-row { margin-top: 1.4rem; font-size: .9rem; }
.progress { height: 7px; background: #edf1ee; }
.task-row { display: flex; align-items: center; gap: .85rem; padding: 1rem 0; }
.task-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--finance-green); background: #e9f8ec; }
.finance-table { margin: -.5rem 0; }
.finance-table th { color: #87929b; border-bottom-color: var(--finance-line); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.finance-table td { color: #52616e; border-color: var(--finance-line); padding: 1rem .5rem; }
.finance-table strong { color: var(--finance-ink); font-weight: 600; }
.tag { display: inline-block; border-radius: 30px; padding: .25rem .65rem; color: #5e6c77; background: #edf1ee; font-size: .72rem; font-weight: 700; }
.analysis-card { line-height: 1.8; }
.analysis-card h3 { color: var(--finance-ink); font-size: 1.05rem; }
.disclaimer { border-left: 3px solid var(--finance-green); padding: .8rem 1rem; color: #64717a; background: #f5faf6; font-size: .82rem; line-height: 1.5; }
.auth-page { display: grid; min-height: 100vh; place-items: center; padding: 2rem; background: linear-gradient(135deg, #f3f6f4 0%, #e4f2e7 100%); }
.auth-panel { width: min(100%, 460px); padding: clamp(1.5rem, 5vw, 3.5rem); border: 1px solid var(--finance-line); border-radius: 8px; background: #fff; box-shadow: 0 25px 70px rgba(32,53,75,.08); }
.auth-panel h1 { color: var(--finance-ink); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 400; line-height: 1.08; margin: .8rem 0 1rem; }
.auth-divider { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0; color: #a1abb3; font-size: .8rem; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--finance-line); }
.form-control, .form-select { border-color: var(--finance-line); border-radius: 4px; padding: .75rem .9rem; }
.form-control:focus, .form-select:focus { border-color: var(--finance-green); box-shadow: 0 0 0 .2rem rgba(52,191,73,.15); }
.btn-primary { border-color: var(--finance-green); background: var(--finance-green); }
.btn-primary:hover { border-color: #2da940; background: #2da940; }
@media (max-width: 575px) { .finance-table { min-width: 650px; } }