.lc-container {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 860px) { .lc-container { grid-template-columns: 1fr; } }

.lc-inputs-card { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.lc-card-title { font-size: 1rem; font-weight: 700; margin: 0 0 0.25rem; }

.lc-field { display: flex; flex-direction: column; gap: 0.3rem; }
.lc-field label { font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.5; font-weight: 600; }
.lc-optional { font-weight: 400; opacity: 0.5; text-transform: none; letter-spacing: 0; }

.lc-input-wrap { position: relative; display: flex; align-items: center; }
.lc-affix {
  position: absolute; font-size: 0.9rem; opacity: 0.5; font-weight: 600;
  pointer-events: none; z-index: 1;
}
.lc-prefix .lc-affix { left: 0.7rem; }
.lc-suffix .lc-affix { right: 0.7rem; }
.lc-input-wrap input,
.lc-field input[type="number"],
.lc-field input[type="month"] {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px; padding: 0.5rem 0.75rem;
  color: inherit; font-family: inherit; font-size: 0.95rem; font-weight: 600;
  outline: none;
}
.lc-prefix input { padding-left: 1.6rem; }
.lc-suffix input { padding-right: 1.6rem; }
.lc-input-wrap input:focus,
.lc-field input:focus { border-color: rgba(96,213,250,0.4); }

.lc-term-row { display: flex; align-items: center; gap: 0.5rem; }
.lc-term-row input { width: 70px; text-align: center; padding: 0.5rem 0.4rem; }
.lc-term-sep { opacity: 0.5; font-size: 0.85rem; }

/* Summary row */
.lc-summary-row {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0.75rem; margin-bottom: 0.75rem;
}
@media (max-width: 640px) { .lc-summary-row { grid-template-columns: repeat(2,1fr); } }
.lc-sum-card {
  border-radius: 14px; padding: 0.9rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}
.lc-sum-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.55; margin-bottom: 0.3rem; }
.lc-sum-val { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.lc-monthly .lc-sum-val { color: #60d5fa; }
.lc-total-int .lc-sum-val { color: #ff8fa3; }
.lc-total-pay .lc-sum-val { color: #c08bff; }
.lc-payoff .lc-sum-val { color: #5cd98a; font-size: 1rem; }

/* Extra payment savings */
.lc-extra-card {
  padding: 1rem 1.25rem; margin-bottom: 0.75rem;
  border-color: rgba(92,217,138,0.25) !important;
  background: rgba(92,217,138,0.04) !important;
}
.lc-extra-inner { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.lc-extra-stat { display: flex; flex-direction: column; gap: 0.2rem; }
.lc-extra-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.55; }
.lc-extra-val { font-size: 1.2rem; font-weight: 700; color: #5cd98a; }

/* Chart */
.lc-chart-card { padding: 1.25rem; margin-bottom: 0.75rem; }
.lc-chart-title { font-size: 0.82rem; font-weight: 600; opacity: 0.6; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.lc-chart { width: 100%; height: 180px; display: block; }
.lc-chart-legend { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.78rem; opacity: 0.65; margin-top: 0.5rem; }
.lc-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }

/* Table */
.lc-table-card { padding: 1.25rem; }
.lc-table-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.lc-table-title { font-size: 0.82rem; font-weight: 700; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em; }
.lc-toggle-table { font-size: 0.8rem; padding: 0.3rem 0.8rem; }
.lc-table-wrap { overflow-x: auto; max-height: 360px; overflow-y: auto; margin-top: 0.5rem; }
.lc-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.lc-table th { position: sticky; top: 0; background: var(--card, #1a1d2e); padding: 0.5rem 0.6rem; text-align: right; font-weight: 600; opacity: 0.6; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid rgba(255,255,255,0.08); }
.lc-table th:first-child, .lc-table td:first-child { text-align: left; }
.lc-table td { padding: 0.4rem 0.6rem; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.04); font-variant-numeric: tabular-nums; }
.lc-table tr:hover td { background: rgba(255,255,255,0.03); }
.lc-table .td-interest { color: #ff8fa3; }
.lc-table .td-principal { color: #60d5fa; }