/* Página Calculadora — paleta neutra, igual Home/Ajustes (spec-design-system.md
   seção 1+2). Porta a "Calculadora de Tempo" do v1 (../../index.html,
   #tab-calc): H:M:S → segundos e segundos → H:M:S, únicas conversões que
   existiam lá — usada pra lançar duração/watch-time manualmente na planilha. */

.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; } }

.calc-row { display: flex; align-items: flex-end; gap: var(--space-2); margin-bottom: var(--space-4); }
.calc-colon { font-size: 20px; font-weight: 700; color: var(--text-2); padding-bottom: 9px; }
.calc-field { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.calc-field label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.calc-field input {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 10px; font: inherit; font-size: 14px; color: var(--text-1);
  background: var(--page); width: 100%; font-variant-numeric: tabular-nums;
}
.calc-field input:focus { outline: 2px solid var(--c1); outline-offset: -1px; }

.calc-result {
  background: var(--page); border: 1px solid var(--grid); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
}
.calc-result-lbl { font-size: 12px; color: var(--text-2); }
.calc-result-val { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 4px; }

.calc-btn-row { display: flex; gap: var(--space-2); }
.calc-btn {
  border: none; background: var(--c1); color: #fff; font: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 16px; border-radius: var(--radius-sm); cursor: pointer;
}
.calc-btn.ghost { background: var(--page); color: var(--text-1); border: 1px solid var(--border); }
.calc-btn.copied { background: var(--good); }