/* Loan Visualizer Styles */
.app-grid { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-8); align-items: start; }
.form-group { display: flex; flex-direction: column; }
.preset-btn { font-size: var(--text-xs) !important; padding: var(--space-2) var(--space-3) !important; text-transform: none !important; }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.stat-card { text-align: center; padding: var(--space-6); }
.stat-label { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.stat-value { font-size: var(--text-2xl); font-weight: 800; font-family: var(--font-mono); }

.chart-card { padding: var(--space-6); }

.pie-chart { display: flex; align-items: center; gap: var(--space-8); justify-content: center; }
.pie-visual {
  width: 180px; height: 180px; border-radius: 50%; position: relative;
  background: conic-gradient(var(--color-primary) 0%, var(--color-primary) 50%, var(--color-error) 50%, var(--color-error) 100%);
  box-shadow: var(--shadow-md);
}
.pie-visual::after {
  content: ''; position: absolute; top: 30%; left: 30%; width: 40%; height: 40%;
  background: var(--color-bg-card); border-radius: 50%;
}
.pie-legend { display: flex; flex-direction: column; gap: var(--space-3); }
.legend-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.principal-dot { background: var(--color-primary); }
.interest-dot { background: var(--color-error); }

.table-wrap { max-height: 400px; overflow-y: auto; }
.amort-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.amort-table th { text-align: left; padding: var(--space-3); border-bottom: 2px solid var(--color-border); color: var(--color-text-secondary); font-weight: 600; position: sticky; top: 0; background: var(--color-bg-card); }
.amort-table td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); font-family: var(--font-mono); font-size: var(--text-xs); }
.amort-table tr:hover td { background: var(--color-surface); }

@media (max-width: 768px) {
  .app-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .pie-chart { flex-direction: column; }
  .stat-value { font-size: var(--text-xl); }
}