/* Percentage presentation only; exact-numbers.js owns the calculations. */
.percent-page .up-button { font-size: 16px; }
.percent-page .calc-panel { display: none; }
.percent-page .calc-panel.active { display: block; }
.percent-page .calc-panel[hidden] { display: none; }
.percent-page .calc-result-value { color: #fff !important; overflow-wrap: anywhere; }
.percent-page .calc-result-formula { font-size: 14px; line-height: 1.6; margin-top: 12px; overflow-wrap: anywhere; }
.percent-page .calc-result-formula:empty { display: none; }
.percent-page .calc-history { margin-top: 24px; border-top: 1px solid var(--up-border); padding-top: 16px; }
.percent-page .calc-history-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.percent-page .calc-history-title h2 { font-size: 16px; }
.percent-page .calc-history-list { display: grid; gap: 8px; }
.percent-page .calc-history-item { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--up-border); font-size: 14px; }
.percent-page .calc-history-expr { color: var(--up-muted); }
.percent-page .calc-history-result { color: var(--up-green); font-weight: 650; font-variant-numeric: tabular-nums; }
.percent-page .calc-history-list > p { color: var(--up-muted); font-size: 14px; }
.percent-page .calc-tabs .up-button, .percent-page .quick-percent-btn { font-size: 16px; }
@media (max-width: 767px) {
  .percent-page .calc-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .percent-page .calc-tab:first-child { grid-column: 1 / -1; }
  .percent-page .up-tool-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .percent-page .quick-percent { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .percent-page .quick-percent-btn { padding-inline: 8px; }
  .percent-page .calc-result-value { font-size: 40px; letter-spacing: -1px; }
  .percent-page .calc-history-item { flex-direction: column; gap: 4px; }
}