/* route: Contatore — Blocco 8 · B7B1. Estratto da utility-counter.html inline. */
[data-route="counter"] .modi { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
[data-route="counter"] .modo {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 12px; padding: 8px 13px; font: 600 .8rem 'Poppins', Arial, sans-serif; cursor: pointer;
}
[data-route="counter"] .modo.on { border-color: var(--green); background: var(--green-soft); color: var(--ink); }

[data-route="counter"] .param { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; margin-bottom: 12px; }
[data-route="counter"] .param .t { font-size: .78rem; color: var(--muted); margin-bottom: 9px; }
[data-route="counter"] .param .r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
[data-route="counter"] .param input {
  width: 82px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; text-align: right;
  font: 700 1rem 'Poppins', Arial, sans-serif; color: var(--ink); background: #fdfdfc; font-variant-numeric: tabular-nums;
}
[data-route="counter"] .param input:focus { outline: none; border-color: var(--green); background: #fff; }
[data-route="counter"] .param .um { font-size: .82rem; color: var(--muted); margin-right: 4px; }
[data-route="counter"] .param .chips { display: flex; gap: 6px; }
[data-route="counter"] .param .chips button {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 9px; padding: 6px 10px; font: 600 .78rem 'Poppins', Arial, sans-serif; cursor: pointer;
}
[data-route="counter"] .param .chips button.on { border-color: var(--green); background: var(--green-soft); color: var(--ink); }

[data-route="counter"] .big-tap {
  -webkit-user-select: none; user-select: none;
  width: 100%; border: none; cursor: pointer;
  background: var(--green); color: #fff; border-radius: 24px;
  padding: 30px 14px 20px; box-shadow: 0 10px 30px rgba(60, 90, 60, .16);
  transition: transform .06s ease, filter .06s ease;
}
[data-route="counter"] .big-tap:active { transform: scale(.985); filter: brightness(.95); }
[data-route="counter"] .bt-cols { display: flex; align-items: stretch; }
[data-route="counter"] .bt-cols .side { flex: 1; text-align: center; padding: 4px 6px; min-width: 0; }
[data-route="counter"] .bt-cols .side.split { border-left: 1px solid rgba(255, 255, 255, .28); }
[data-route="counter"] .bt-cols .n { font: 700 4.4rem/1 'Poppins', Arial, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-route="counter"] .bt-cols .has-split .n, [data-route="counter"] .bt-cols .side.split .n { font-size: 3.5rem; }
[data-route="counter"] .bt-cols .lab { font-size: .9rem; font-weight: 600; opacity: .88; margin-top: 4px; }
[data-route="counter"] .bt-cue { text-align: center; font-size: .78rem; opacity: .7; margin-top: 14px; }

[data-route="counter"] .sotto { display: flex; gap: 10px; margin-top: 14px; }
[data-route="counter"] .sotto button {
  flex: 1; border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 16px; padding: 15px 10px; font: 700 1rem 'Poppins', Arial, sans-serif; cursor: pointer;
}
[data-route="counter"] .sotto button:active { background: #eef3ea; }
[data-route="counter"] .sotto .reset.arm { border-color: #c0453d; color: #c0453d; }

[data-route="counter"] .hint { font-size: .74rem; color: var(--muted); line-height: 1.5; margin: 16px 2px 2px; }