@layer components {
  /* ============================================================
   * Shared Account Surfaces
   * ============================================================ */

  .d1-account-panel,
  .d1-account-empty {
    background: rgba(8, 24, 38, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  }

  .d1-account-panel {
    padding: 1.25rem;
  }

  .d1-account-panel h2 {
    margin: 0;
    color: var(--dig-color-text);
  }

  /* ============================================================
   * Shared Typography
   * ============================================================ */

  .d1-account-kicker {
    margin-bottom: 0.5rem;

    color: var(--dig-color-secondary);

    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .d1-account-muted {
    color: var(--dig-color-text-muted);
  }

  /* ============================================================
   * Shared Feedback
   * ============================================================ */

  .d1-account-form-message {
    font-size: clamp(0.78rem, 0.75rem + 0.1vw, 0.875rem);
    line-height: 1.45;
  }

  .d1-account-form-message:empty {
    display: none;
  }

  .d1-account-form-message[data-state="info"],
  .d1-account-form-message[data-state="success"] {
    color: var(--dig-color-info);
  }

  .d1-account-form-message[data-state="error"] {
    color: var(--dig-color-danger);
  }

  .d1-account-form-message[data-state="muted"] {
    color: var(--dig-color-text-muted);
  }

  .d1-account-alert {
    margin-top: 1rem;
    padding: 0.85rem 1rem;

    border-radius: 12px;

    font-size: 0.92rem;
  }

  .d1-account-alert-error {
    background: color-mix(
      in srgb,
      var(--dig-color-danger) 12%,
      transparent
    );

    border: 1px solid color-mix(
      in srgb,
      var(--dig-color-danger) 24%,
      transparent
    );

    color: color-mix(
      in srgb,
      var(--dig-color-danger) 38%,
      white
    );
  }

  .d1-account-alert-success {
    background: color-mix(
      in srgb,
      var(--dig-color-success) 12%,
      transparent
    );

    border: 1px solid color-mix(
      in srgb,
      var(--dig-color-success) 24%,
      transparent
    );

    color: color-mix(
      in srgb,
      var(--dig-color-success) 38%,
      white
    );
  }
}