.counter-label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.counter-editor {
  width: 100%; min-height: 260px; margin: 0; padding: 12px; resize: vertical;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink);
  font: 15px/1.55 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
.counter-editor:focus-visible { outline: none; box-shadow: var(--focus); }
.counter-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.counter-stat { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.counter-stat-label { display: block; min-height: 38px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.counter-stat strong { display: block; margin-top: 3px; font-size: 22px; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.counter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
#counter-feedback { color: var(--ok); font-size: 14px; font-weight: 600; }
@media (max-width: 680px) { .counter-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .counter-panel { padding: 16px; }
  .counter-editor { min-height: 220px; }
  .counter-actions .btn { flex: 1 1 calc(50% - 5px); }
}