/* Final contrast pass for the calculator and investment-tracking preview. */
.calculator-box {
  position: relative;
  overflow: hidden;
}

.calculator-box::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  top: -100px;
  inset-inline-end: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 214, 255, 0.2), transparent 68%);
  pointer-events: none;
}

.calculator-box > * { position: relative; }

.amount-min {
  display: block;
  margin: 8px 2px 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.duration-tabs button {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.duration-tabs button:hover {
  border-color: rgba(34, 214, 255, 0.65);
  transform: translateY(-1px);
}

.duration-tabs button.active,
html[data-theme="light"] .duration-tabs button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #ff28df, #8d35ff 52%, #2246ff);
  box-shadow: 0 9px 20px rgba(104, 56, 236, 0.26);
}

html[data-theme="light"] .duration-tabs button:not(.active) {
  color: #302d47;
  border-color: rgba(43, 39, 83, 0.18);
  background: rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] .calculator-box,
html[data-theme="light"] .calculator {
  border-color: rgba(43, 39, 83, 0.14);
  box-shadow: 0 18px 42px rgba(48, 42, 94, 0.1);
}

html[data-theme="light"] .result {
  background: linear-gradient(135deg, rgba(141, 53, 255, 0.1), rgba(34, 214, 255, 0.1));
  border: 1px solid rgba(43, 39, 83, 0.1);
}

html[data-theme="light"] .tracking-dashboard {
  color: #1a1830;
  border-color: rgba(43, 39, 83, 0.16);
  background: linear-gradient(145deg, #ffffff, #f3f4ff);
  box-shadow: 0 24px 60px rgba(51, 44, 104, 0.14);
}

html[data-theme="light"] .tracking-dashboard .dashboard-head > div > span,
html[data-theme="light"] .tracking-dashboard .dashboard-amount > span,
html[data-theme="light"] .tracking-dashboard .dashboard-amount small,
html[data-theme="light"] .tracking-dashboard .allocation-title span,
html[data-theme="light"] .tracking-dashboard .allocation-row > div,
html[data-theme="light"] .tracking-dashboard .route-list small,
html[data-theme="light"] .tracking-dashboard .route-list time,
html[data-theme="light"] .tracking-dashboard .dashboard-foot span {
  color: #68657d;
}

html[data-theme="light"] .tracking-dashboard .dashboard-amount,
html[data-theme="light"] .tracking-dashboard .allocation-card {
  border-color: rgba(43, 39, 83, 0.12);
  background: rgba(255, 255, 255, 0.86);
}

html[data-theme="light"] .tracking-dashboard .route-list > li > span {
  color: #68657d;
  border-color: rgba(43, 39, 83, 0.2);
  background: #fff;
}

html[data-theme="light"] .tracking-dashboard .route-list li.current > span {
  color: #fff;
  background: #2246ff;
}

html[data-theme="light"] .tracking-dashboard .route-list li.complete > span {
  color: #063c29;
  background: #56e9b2;
}

html[data-theme="light"] .tracking-dashboard .route-list li::before,
html[data-theme="light"] .tracking-dashboard .dashboard-head,
html[data-theme="light"] .tracking-dashboard .dashboard-foot {
  border-color: rgba(43, 39, 83, 0.13);
}

html[data-theme="light"] .tracking-dashboard .allocation-row i {
  background: rgba(43, 39, 83, 0.1);
}

@media (max-width: 520px) {
  .duration-tabs { grid-template-columns: repeat(3, 1fr); }
  .duration-tabs button { min-height: 50px; padding: 4px; font-size: 0.78rem; }
}