.htpasswd-generator {
  --r: 0.5rem;
  --p: 0.6rem 0.75rem;
  --g: 0.8rem;
  --g-lg: 1rem;

  display: grid;
  gap: var(--g-lg);
  padding: 1rem;
  background: var(--md-default-bg-color--lightest);
  border: 1px solid var(--md-default-bg-color--lighter);
  border-radius: 0.75rem;
  box-shadow: var(--md-shadow-z1);
}

/* Layout */
.htpasswd-generator__grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--g);
  align-items: end;
}

@media (max-width: 640px) {
  .htpasswd-generator__grid {
    grid-template-columns: 1fr;
  }
}

/* Labels & Inputs */
.htpasswd-generator label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.64rem;
  color: var(--md-default-fg-color--light);
}

.htpasswd-generator input,
.htpasswd-generator textarea {
  width: 100%;
  padding: var(--p);
  border: 1px solid var(--md-default-bg-color--lighter);
  border-radius: var(--r);
  background: var(--md-code-bg-color);
  color: var(--md-typeset-color);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.htpasswd-generator ::placeholder {
  color: var(--md-default-fg-color--lighter);
}

.htpasswd-generator input:focus,
.htpasswd-generator textarea:focus {
  border-color: var(--md-typeset-a-color);
  box-shadow: 0 0 0 0.2rem var(--md-accent-fg-color--transparent);
}

/* Output */
.htpasswd-generator__output {
  display: grid;
  gap: var(--g);
}

.htpasswd-generator textarea {
  resize: vertical;
  color: var(--md-code-fg-color);
  box-shadow: inset var(--md-shadow-z1);
}

/* Buttons */
.htpasswd-generator__actions {
  display: flex;
  gap: 0.5rem;
}

.htpasswd-generator__actions button {
  appearance: none;
  padding: 0.55rem 0.9rem;
  font-weight: 600;
  border-radius: 0.6rem;
  border: 1px solid var(--md-primary-fg-color);
  background: transparent;
  color: var(--md-primary-fg-color);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s,
    box-shadow 0.15s;
  box-shadow: var(--md-shadow-z1);
}

.htpasswd-generator__actions button[type="submit"] {
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}

.htpasswd-generator__actions button:hover {
  box-shadow: var(--md-shadow-z2);
}

.htpasswd-generator__actions button[type="submit"]:hover {
  filter: brightness(1.05);
}

.htpasswd-generator__actions button:focus-visible {
  box-shadow: 0 0 0 0.2rem var(--md-accent-fg-color--transparent),
    var(--md-shadow-z2);
}

.htpasswd-generator__actions button:disabled,
.htpasswd-generator__actions button[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

.htpasswd-generator__feedback {
  font-size: 0.64rem;
  color: var(--md-default-fg-color--light);
}

[data-htpasswd-output][readonly] {
  user-select: all;
}