/* route: Calcolatrice — Blocco 8 · B7B1. Estratto da utility-calc.html inline. */
[data-route="calc"] .calc {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 8px 26px rgba(60, 90, 60, .09); padding: 16px; margin-bottom: 14px;
  max-width: 420px; margin-left: auto; margin-right: auto;
}
[data-route="calc"] .disp {
  background: #f4f7f1; border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; text-align: right;
  min-height: 84px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
}
[data-route="calc"] .disp .op { font-size: .9rem; color: var(--muted); min-height: 1.1em; font-variant-numeric: tabular-nums; }
[data-route="calc"] .disp .now { font: 700 2.4rem/1.15 'Poppins', Arial, sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; overflow: hidden; white-space: nowrap; }
[data-route="calc"] .disp .mem { font-size: .7rem; color: var(--green); font-weight: 700; min-height: 1em; text-align: left; }

[data-route="calc"] .keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
[data-route="calc"] .keys button {
  border: 1px solid var(--line); background: #fff; border-radius: 13px; padding: 15px 0;
  font: 600 1.15rem 'Poppins', Arial, sans-serif; color: var(--ink); cursor: pointer;
}
[data-route="calc"] .keys button:active { background: #eef3ea; }
[data-route="calc"] .keys .k-fn { background: #f1f4ef; color: var(--muted); font-size: .95rem; }
[data-route="calc"] .keys .k-op { background: var(--green-soft); color: var(--green-2, #3c7540); font-weight: 700; }
[data-route="calc"] .keys .k-eq { background: var(--green); color: #fff; }

[data-route="calc"] .fit-toggle {
  width: 100%; border: 1px dashed var(--line); background: #fff; color: var(--green);
  border-radius: 13px; padding: 12px; font: 700 .9rem 'Poppins', Arial, sans-serif; cursor: pointer;
  margin-bottom: 14px;
}
[data-route="calc"] .fit-toggle.on { background: var(--green-soft); border-style: solid; }

[data-route="calc"] .fit { display: grid; gap: 12px; margin-bottom: 14px; }
[data-route="calc"] .fbox { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
[data-route="calc"] .fbox h3 { margin: 0 0 10px; font-size: .9rem; }
[data-route="calc"] .frow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .92rem; color: var(--ink); }
[data-route="calc"] .frow input {
  width: 84px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; text-align: right;
  font: 600 1rem 'Poppins', Arial, sans-serif; color: var(--ink); background: #fdfdfc; font-variant-numeric: tabular-nums;
}
[data-route="calc"] .frow input:focus { outline: none; border-color: var(--green); background: #fff; }
[data-route="calc"] .frow input.pct { width: 62px; }
[data-route="calc"] .fout { margin-top: 10px; background: var(--green-soft); border-radius: 12px; padding: 11px 13px; font-weight: 600; font-size: .95rem; color: var(--ink); }
[data-route="calc"] .fout.warn { background: #fbeee0; font-weight: 500; }
[data-route="calc"] .macro-tab { margin-top: 10px; display: grid; gap: 6px; }
[data-route="calc"] .macro-tab .r { display: flex; justify-content: space-between; font-size: .86rem; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; }
[data-route="calc"] .macro-tab .r span { color: var(--muted); }
[data-route="calc"] .macro-tab .r b { color: var(--ink); font-variant-numeric: tabular-nums; }
[data-route="calc"] .hint { font-size: .74rem; color: var(--muted); line-height: 1.5; margin: 2px 2px; }