/* Compound Interest — tool-specific styles */
.ci-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ci-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.ci-stat { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.ci-stat small { display: block; color: var(--muted-2); font-size: .76rem; text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700; }
.ci-stat b { display: block; margin-top: 4px; font-size: 1.35rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ci-stat-final { border-color: rgba(92,214,192,.45); background: rgba(92,214,192,.07); }
.ci-stat-final b { font-size: 1.6rem; background: var(--accent-grad); -webkit-background-clip: text;
  background-clip: text; color: transparent; }

.ci-chart { width: 100%; height: 280px; display: block; margin-top: 20px; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ci-legend { display: flex; gap: 22px; justify-content: center; margin-top: 12px;
  color: var(--muted); font-size: .88rem; font-weight: 600; }
.ci-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.ci-dot-c { background: #6c8bff; }
.ci-dot-i { background: #5cd6c0; }

.ci-tabledetails { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.ci-tabledetails summary { cursor: pointer; font-weight: 600; color: var(--muted); padding: 6px 0; }
.ci-tabledetails summary:hover { color: var(--text); }
.ci-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: 10px; }
.ci-table th, .ci-table td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; }
.ci-table thead th { color: var(--muted-2); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.ci-table .hc-right, .ci-table td:not(:first-child), .ci-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.hc-tablewrap { overflow-x: auto; max-height: 340px; overflow-y: auto; }

@media (max-width: 720px) { .ci-grid, .ci-results { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .ci-grid, .ci-results { grid-template-columns: 1fr; } }