/* Random Team Generator — tool-specific styles */
.tg-input { width: 100%; min-height: 22vh; resize: vertical; background: var(--bg-soft); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; font-size: 1rem; line-height: 1.7; font-family: inherit; }
.tg-input:focus { outline: none; border-color: var(--accent); }
.tg-controls { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.tg-mode { display: flex; gap: 6px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.tg-mode-btn { background: none; border: none; color: var(--muted); border-radius: 999px; padding: 7px 13px;
  font-size: .82rem; font-weight: 600; font-family: inherit; cursor: pointer; }
.tg-mode-btn.active { background: color-mix(in srgb, var(--accent) 18%, var(--card-2)); color: var(--text); }
.tg-num { display: flex; align-items: center; gap: 6px; }
.tg-num input { width: 60px; text-align: center; background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px 6px; color: var(--text); font-family: inherit; font-size: .95rem; font-variant-numeric: tabular-nums; }
.tg-num input:focus { outline: none; border-color: var(--accent); }
.tg-step { width: 34px; height: 34px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.tg-step:hover { border-color: var(--accent); }
.tg-summary { margin: 14px 0 0; color: var(--muted-2); font-size: .85rem; }
.tg-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 10px; }
.tg-empty { color: var(--muted-2); font-size: .9rem; font-style: italic; }
.tg-team { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.tg-team h3 { margin: 0 0 8px; font-size: .92rem; display: flex; align-items: center; gap: 8px; }
.tg-team-n { font-size: .72rem; font-weight: 700; color: var(--muted-2); background: var(--card-2); border-radius: 999px; padding: 1px 8px; }
.tg-team ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.tg-team li { font-size: .88rem; color: var(--muted); padding: 3px 0; border-bottom: 1px dashed var(--line); }
.tg-team li:last-child { border-bottom: none; }
.tg-bar { display: flex; align-items: center; margin-top: 16px; }
.tg-bar .spacer { flex: 1; }