@layer components {
  .dialog-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: min(52rem, 80vw);

    & input[type="text"],
    & input[type="datetime-local"],
    & textarea,
    & select {
      width: 100%;
    }
  }

  .checkbox-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    & label {
      margin-bottom: 0;
    }
  }

  /* ---------------- PDF export dialog ---------------- */
  .pdf-export-summary {
    margin: 0 0 1rem 0;
    color: #444;
  }

  .pdf-export-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    cursor: pointer;
    user-select: none;
  }
  .pdf-export-option input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
  }

  .pdf-export-progress {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.5rem;
    min-width: min(22rem, 80vw);
  }

  .pdf-export-progress-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #333;
  }

  .pdf-export-progress-bar {
    background: #eef0f3;
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
  }
  .pdf-export-progress-bar-fill {
    background: #2563eb;
    height: 100%;
    transition: width 0.3s ease;
  }
  .pdf-export-progress-percent {
    text-align: right;
    font-size: 0.85em;
    color: #888;
    font-variant-numeric: tabular-nums;
  }

  .pdf-export-progress-done {
    display: flex;
    align-items: center;
    gap: 0.8rem;
  }

  .pdf-export-progress-failed {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    color: #b91c1c;
  }
  .pdf-export-error-detail {
    font-size: 0.85em;
    color: #888;
    margin-top: 0.25rem;
  }

  /* ---------------- Album download dialog ---------------- */
  .album-download-group {
    border: 0;
    padding: 0;
    margin: 0 0 1.1rem 0;
    min-width: min(20rem, 80vw);
  }
  .album-download-group legend {
    padding: 0;
    margin-bottom: 0.35rem;
    font-weight: 600;
    color: #333;
  }

  .album-download-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0;
    cursor: pointer;
    user-select: none;
  }
  .album-download-option input[type="radio"] {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
  }
  .album-download-option input[type="radio"]:disabled + span {
    color: #999;
  }

  .album-download-prefix {
    margin-bottom: 1.1rem;
  }
  .album-download-prefix label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    color: #333;
  }
  .album-download-prefix input[type="text"] {
    width: 100%;
  }
  .album-download-hint {
    margin: 0.4rem 0 0 0;
    font-size: 0.85em;
    color: #888;
  }
  .album-download-hint code {
    background: #f1f2f4;
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
  }

  /* ---------------- Album download progress ---------------- */
  .image-export-progress {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0 1rem 0;
    min-width: min(22rem, 80vw);
  }

  .image-export-progress-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #333;
  }

  .image-export-progress-bar {
    background: #eef0f3;
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
  }
  .image-export-progress-bar-fill {
    background: #2563eb;
    height: 100%;
    transition: width 0.3s ease;
  }
  .image-export-progress-percent {
    text-align: right;
    font-size: 0.85em;
    color: #888;
    font-variant-numeric: tabular-nums;
  }

  .image-export-progress-done {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
  }
  .image-export-progress-done .btn {
    margin-left: auto;
  }

  .image-export-progress-failed {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    color: #b91c1c;
  }
  .image-export-error-detail {
    font-size: 0.85em;
    color: #888;
    margin-top: 0.25rem;
  }
}