.nickname-modal .dev-modal-card {
  max-width: 28rem;
}

.nickname-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.nickname-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary, #4b5563);
}

.nickname-input {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 0.5rem;
  font: inherit;
  color: var(--text, #111827);
  background: var(--surface, #fff);
}

.nickname-input:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 1px;
}

.nickname-error {
  margin: 0;
  font-size: 0.875rem;
  color: var(--danger, #b91c1c);
}

.nickname-error[hidden] {
  display: none;
}

.nickname-hint {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary, #6b7280);
}