/* usernamegen — tool-specific components (loaded after the global /styles.css) */

.ug-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  align-items: end;
}

.ug-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 0;
}
.ug-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent, #6ea8fe); }
.ug-check label { margin: 0; cursor: pointer; }

.ug-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

#r-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .6rem;
}

.ug-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  padding: .7rem .85rem;
  border: 1px solid var(--border, #2a3344);
  border-radius: 10px;
  background: var(--card, transparent);
  color: inherit;
  transition: border-color .15s ease, background-color .15s ease, transform .05s ease;
}
.ug-item:hover, .ug-item:focus-visible {
  border-color: var(--accent, #6ea8fe);
  background: color-mix(in srgb, var(--accent, #6ea8fe) 7%, transparent);
  outline: none;
}
.ug-item:active { transform: translateY(1px); }

.ug-name {
  font-weight: 600;
  word-break: break-all;
}
.ug-copy {
  flex: 0 0 auto;
  font-size: .72rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted, #8b94a7);
  opacity: .8;
}
.ug-item.is-copied {
  border-color: var(--accent, #6ea8fe);
  background: color-mix(in srgb, var(--accent, #6ea8fe) 14%, transparent);
}
.ug-item.is-copied .ug-copy { color: var(--accent, #6ea8fe); opacity: 1; font-weight: 700; }