/* Mortgage Calculator — Theme: Emerald (#10B981) */
:root { --accent: #10B981; --accent-dim: rgba(16,185,129,0.15); --accent-glow: rgba(16,185,129,0.3); }
.accent-text { color: var(--accent); }

.inputs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }

.results-summary { margin-top: var(--space-5); text-align: center; }
.monthly-payment { margin-bottom: var(--space-5); }
.payment-label { display: block; font-size: var(--text-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); }
.payment-amount { font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; color: var(--accent); }

.payment-breakdown { display: flex; justify-content: center; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.breakdown-item { text-align: center; }
.breakdown-val { display: block; font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; }
.breakdown-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; }
.breakdown-item:nth-child(1) .breakdown-val { color: #3B82F6; }
.breakdown-item:nth-child(2) .breakdown-val { color: #F59E0B; }
.breakdown-item:nth-child(3) .breakdown-val { color: #8B5CF6; }
.breakdown-item:nth-child(4) .breakdown-val { color: #EC4899; }

.loan-summary { display: flex; justify-content: center; gap: var(--space-6); flex-wrap: wrap; }
.summary-item { text-align: center; }
.summary-val { display: block; font-weight: 700; font-size: var(--text-lg); color: var(--text-primary); }
.summary-label { font-size: var(--text-xs); color: var(--text-muted); }

.amort-section { margin-top: var(--space-5); }
.amort-section h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.amort-table-wrap { max-height: 400px; overflow-y: auto; }
.amort-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.amort-table th { position: sticky; top: 0; background: var(--bg-secondary); padding: var(--space-3); text-align: left; font-size: var(--text-xs); text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; border-bottom: 1px solid var(--border-medium); }
.amort-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); font-family: var(--font-mono); }
.amort-table tr:hover td { background: var(--accent-dim); }

.tips-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.tips-list li::before { content: '→ '; color: var(--accent); }

@media (max-width: 768px) { .payment-breakdown { gap: var(--space-3); } .loan-summary { gap: var(--space-3); } }