.gallery-heading { margin-bottom: 23px; }

.gallery-heading-actions,
.gallery-scopes,
.gallery-toolbar,
.gallery-mode,
.gallery-collections,
.collection-form-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.gallery-heading-actions { justify-content: flex-end; }
.gallery-heading .local-photo-note { color: #647053; font-size: 12px; line-height: 1.6; }

.gallery-picker {
  position: relative;
  min-height: 44px;
  background: #e5eadb;
  color: #44533b;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .35px;
}

.gallery-picker > #gallery-picker-label { font-size: inherit; }

.gallery-picker:focus-within,
.gallery-secondary:focus-visible,
.gallery-mode button:focus-visible,
.gallery-scopes button:focus-visible,
.gallery-collections select:focus-visible,
.collection-dialog input:focus-visible {
  outline: 2px solid #877052;
  outline-offset: 3px;
}

.gallery-picker input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.gallery-picker:has(input:disabled) { opacity: .6; }
.gallery-picker input:disabled { cursor: wait; }

.gallery-scopes { border-bottom: 1px solid #dddcd1; }
.gallery-scopes button {
  min-height: 44px;
  border-bottom: 2px solid transparent;
  padding: 8px 10px;
  background: transparent;
  color: #5e6656;
  font-weight: 600;
}
.gallery-scopes button[aria-pressed="true"] {
  color: #3e5135;
  border-color: #798b6c;
}

.gallery-toolbar {
  justify-content: space-between;
  padding: 16px 0;
}

.gallery-mode {
  gap: 2px;
  border: 1px solid #dcded1;
  border-radius: 8px;
  padding: 3px;
  background: #eeeee5;
}
.gallery-mode button,
.gallery-secondary,
.gallery-collections select {
  min-height: 40px;
  border: 1px solid #d9ddcf;
  border-radius: 6px;
  padding: 7px 11px;
  background: #fcfaf4;
  color: #52604a;
  font-size: 12px;
}
.gallery-mode button { min-height: 33px; border-color: transparent; background: transparent; }
.gallery-mode button[aria-pressed="true"] { border-color: #dce0d3; background: #fffdf8; }
.gallery-secondary:hover { background: #eef0e5; }
.gallery-collections label { color: #5e6954; font-size: 12px; }
.gallery-collections select { max-width: min(240px, 53vw); }
.gallery-collections select option { color: #3f463a; }
.gallery-dragging .gallery-picker { outline: 2px dashed #7c8f6f; outline-offset: 4px; }

.gallery-import-notice p,
.gallery-import-notice details,
#collection-status,
#gallery-login-status {
  margin: 0 0 13px;
  color: #53614a;
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.gallery-import-notice p:empty,
#collection-status:empty,
#gallery-login-status:empty,
#lightbox-status:empty { display: none; }
#photo-progress-bar { width: min(100%, 320px); accent-color: #728164; }
#photo-import-details summary { cursor: pointer; }
#photo-import-errors { padding-inline-start: 21px; }

.gallery-date-section + .gallery-date-section { margin-top: 35px; }
.gallery-date-section h2 {
  margin: 5px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #deded2;
  color: #596450;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
}
.photo-caption span:first-child { overflow-wrap: anywhere; }
#empty-gallery p { max-width: 87%; padding: 0 12px; text-align: center; }

.collection-dialog {
  width: min(600px, calc(100vw - 32px));
  max-height: min(720px, calc(100dvh - 32px));
  padding: 26px;
  border: 1px solid #d9ddcf;
  border-radius: 12px;
  background: #faf8f0;
  color: #3f463a;
  box-shadow: 0 12px 50px #323c322a;
}
.collection-dialog::backdrop { background: #373a3270; }
.collection-dialog h2 { margin: 0 33px 16px 0; font: 500 25px var(--serif); }
.collection-dialog form > label { display: block; margin-bottom: 7px; font-size: 13px; }
.collection-dialog form > input {
  width: 100%;
  min-height: 44px;
  margin-bottom: 16px;
  border: 1px solid #d1d7c6;
  border-radius: 6px;
  padding: 8px 10px;
  color: inherit;
  background: #fffdf8;
  font-size: 16px;
}
.collection-dialog fieldset { min-width: 0; border: 1px solid #d9ddcf; border-radius: 7px; margin: 0 0 16px; }
.collection-dialog legend { padding: 0 5px; font-size: 13px; }
.collection-photo-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 10px;
  max-height: min(35vh, 300px);
  overflow-y: auto;
  padding: 2px 3px;
}
.collection-photo-options:empty::before {
  content: "还没有照片，可以先创建空相册。";
  grid-column: 1 / -1;
  font-size: 12px;
  padding: 8px 4px;
  color: #5e6954;
}
.collection-photo-options label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 4px;
  border-radius: 5px;
  cursor: pointer;
}
.collection-photo-options label:hover,
.collection-photo-options label:has(input:checked) { background: #e7ebdf; }
.collection-photo-options input { flex: none; accent-color: #657a57; }
.collection-photo-options img { flex: none; width: 36px; height: 36px; border-radius: 4px; object-fit: cover; }
.collection-photo-options span { font-size: 12px; overflow-wrap: anywhere; }
.collection-form-actions { justify-content: flex-end; }
.collection-form-actions .primary-button { min-height: 40px; padding: 9px 13px; }
.collection-form-actions .gallery-danger { margin-right: auto; }
.gallery-danger { color: #8b473f; }
.gallery-login { width: min(430px, calc(100vw - 32px)); }
.gallery-login h2 + p { color: #58664d; font-size: 13px; line-height: 1.7; }
#lightbox-status { margin: 8px 0 0; }
.lightbox:has(.gallery-secondary:not([hidden])) figure img { max-height: calc(100dvh - 190px); }

@media (max-width: 600px) {
  .gallery-heading { align-items: flex-start; flex-direction: column; gap: 15px; }
  .gallery-heading-actions { justify-content: flex-start; }
  .gallery-toolbar { gap: 11px; }
  .gallery-collections { width: 100%; }
  .gallery-collections select { max-width: 48vw; }
  .collection-dialog { padding: 21px 16px; }
  .collection-photo-options { grid-template-columns: 1fr; }
  .lightbox:has(.gallery-secondary:not([hidden])) figure img { max-height: calc(100dvh - 220px); }
}

.photo-picker-help{margin:0 0 18px;padding:13px 15px;border:1px solid #deded1;border-radius:8px;color:#53614a;font-size:12px;line-height:1.7}
.photo-picker-help summary{cursor:pointer;min-height:24px}
.photo-picker-help p{max-width:600px;margin:10px 0}
.photo-picker-help .gallery-picker{display:inline-flex;margin:0 0 2px}
.photo-picker-help input{inset:0}