@trieb.work/payload-plugin-backup-mongodb 0.1.1

package/dist/backup-dashboard.css

@@ -0,0 +1,1132 @@
+@charset "UTF-8";
+@layer payload-default {}
+@layer payload-default {}
+.backup-dashboard {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  margin-top: 60px;
+  margin-inline: 5px;
+  padding-inline: 0;
+}
+.backup-dashboard h2 {
+  margin-bottom: 20px;
+}
+.backup-dashboard .experimental {
+  color: #909090;
+  font-size: 12px;
+}
+.backup-dashboard {
+  margin-bottom: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.backup-dashboard__collapsible-title {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--theme-elevation-900);
+  letter-spacing: -0.01em;
+  pointer-events: none;
+}
+.backup-dashboard__backup-list-toolbar {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 2px 0 7px;
+  /* Payload `.btn` often adds vertical margin — tighten only this toolbar */
+}
+.backup-dashboard__backup-list-toolbar > .btn {
+  margin-block: 0;
+}
+.backup-dashboard__filter-btn {
+  margin-block: 0;
+}
+.backup-dashboard__collapsible-checkbox {
+  display: flex;
+  /* center would vertically center the box against multi-line labels — looks misaligned */
+  align-items: flex-start;
+  gap: 7px;
+}
+.backup-dashboard__collapsible-checkbox .checkbox-input__input {
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--theme-elevation-300);
+  background: var(--theme-input-bg);
+  border-radius: 3px;
+  flex-shrink: 0;
+  /* Nudge into the first line’s cap-height vs. 12px / ~1.35–1.45 line box */
+  margin: 2px 0 0;
+  cursor: pointer;
+  position: relative;
+}
+.backup-dashboard__collapsible-checkbox .checkbox-input__input:checked {
+  border-color: var(--theme-elevation-800);
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.58333 7.5L0 3.91667L0.7 3.21667L3.58333 6.1L9.3 0.383333L10 1.08333L3.58333 7.5Z' fill='%23333333'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 10px 8px;
+}
+.backup-dashboard__collapsible-checkbox .checkbox-input__input:hover {
+  border-color: var(--theme-elevation-400);
+}
+.backup-dashboard__collapsible-checkbox .checkbox-input__input:focus {
+  outline: none;
+  border-color: var(--theme-elevation-400);
+}
+.backup-dashboard__collapsible-checkbox .field-label {
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--theme-elevation-800);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.backup-dashboard__filter-btn--active {
+  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.35);
+}
+.backup-dashboard__list-empty {
+  margin: 0 0 15px;
+  font-size: 13px;
+  color: var(--theme-elevation-600);
+}
+.backup-dashboard__setup-hint {
+  margin: 0 0 18px;
+  padding: 13px 18px;
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--theme-elevation-800);
+  background: var(--theme-warning-50, rgba(255, 193, 7, 0.12));
+  border: 1px solid var(--theme-warning-200, rgba(255, 152, 0, 0.35));
+  border-radius: 4px;
+}
+.backup-dashboard__setup-hint-code {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 12px;
+  font-weight: 500;
+}
+.backup-dashboard__toolbar {
+  margin: 0 0 15px;
+  padding: 2px 24px;
+  border: 1px solid var(--theme-elevation-100);
+  border-radius: 4px;
+  background: var(--theme-elevation-25, #fafafa);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.backup-dashboard__toolbar-meta {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 7px;
+  align-items: center;
+}
+.backup-dashboard__toolbar-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  padding: 4px 9px;
+  border-radius: 999px;
+  border: 1px solid var(--theme-elevation-150);
+  background: var(--theme-elevation-0);
+  color: var(--theme-elevation-800);
+}
+.backup-dashboard__toolbar-key {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--theme-elevation-500);
+  font-weight: 600;
+}
+.backup-dashboard .backup-item {
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: row;
+  gap: 15px;
+  justify-content: space-between;
+  align-items: flex-start;
+  background-color: var(--theme-elevation-50, #f5f5f5);
+  padding: 13px 20px;
+  border-radius: 5px;
+  border: 1px solid var(--theme-elevation-100);
+}
+@media (max-width: 768px) {
+  .backup-dashboard .backup-item {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+.backup-dashboard .backup-item__main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+.backup-dashboard .backup-item__primary {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 8px;
+}
+.backup-dashboard .backup-item__time {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--theme-elevation-900);
+  letter-spacing: -0.01em;
+}
+.backup-dashboard .backup-item__meta {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+.backup-dashboard .backup-item__pill {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  line-height: 1.25;
+  padding: 3px 9px;
+  border-radius: 999px;
+  background: var(--theme-elevation-100, #ebebeb);
+  color: var(--theme-elevation-800);
+  border: 1px solid transparent;
+  max-width: 100%;
+}
+.backup-dashboard .backup-item__pill-key {
+  font-weight: 500;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--theme-elevation-500);
+}
+.backup-dashboard .backup-item__pill--kind {
+  font-weight: 600;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.backup-dashboard .backup-item__pill--cron {
+  background: rgba(46, 125, 50, 0.12);
+  color: var(--theme-success-800, #1b5e20);
+  border-color: rgba(46, 125, 50, 0.22);
+}
+.backup-dashboard .backup-item__pill--manual {
+  background: rgba(25, 118, 210, 0.1);
+  color: var(--theme-elevation-900);
+  border-color: rgba(25, 118, 210, 0.2);
+}
+.backup-dashboard .backup-item__pill--media {
+  font-weight: 600;
+  font-size: 11px;
+  background: var(--theme-elevation-0, #fff);
+  border-color: var(--theme-elevation-150);
+}
+.backup-dashboard .backup-item__pill--collections {
+  background: var(--theme-elevation-0, #fff);
+  border-color: var(--theme-elevation-150);
+  font-variant-numeric: tabular-nums;
+}
+.backup-dashboard .backup-item__pill--label {
+  background: rgba(124, 58, 237, 0.1);
+  color: var(--theme-elevation-900);
+  border-color: rgba(124, 58, 237, 0.25);
+  font-weight: 600;
+  max-width: 24ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.backup-dashboard .backup-item__pill--label .backup-item__pill-key {
+  color: rgba(124, 58, 237, 0.9);
+}
+.backup-dashboard .backup-item__pill--size {
+  background: var(--theme-elevation-0, #fff);
+  border-color: var(--theme-elevation-150);
+}
+.backup-dashboard .backup-item__pill--warn {
+  background: var(--theme-warning-50, rgba(255, 193, 7, 0.12));
+  border-color: var(--theme-warning-200, rgba(255, 152, 0, 0.35));
+  color: var(--theme-warning-800, #8a5a00);
+}
+.backup-dashboard .backup-item__pill--warn .backup-item__pill-key {
+  color: var(--theme-warning-700, #a26a00);
+  font-weight: 700;
+}
+.backup-dashboard .backup-item__pill--danger {
+  background: var(--theme-error-50, rgba(220, 38, 38, 0.1));
+  border-color: var(--theme-error-200, rgba(220, 38, 38, 0.35));
+  color: var(--theme-error-800, #991b1b);
+  font-weight: 600;
+}
+.backup-dashboard .backup-item__pill--neutral {
+  background: var(--theme-elevation-50, #f4f4f4);
+  border-color: var(--theme-elevation-150);
+  color: var(--theme-elevation-700);
+}
+.backup-dashboard .backup-item__size-value {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--theme-elevation-900);
+}
+.backup-dashboard .make-backup-container {
+  padding-top: 7px;
+}
+.backup-dashboard .make-backup-actions {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+.backup-dashboard {
+  /* Filter modal: checkbox row uses shared checkbox styles; allow label wrap in dialog */
+}
+.backup-dashboard .backup-list-filters__scope-row .field-label {
+  white-space: normal;
+  line-height: 1.35;
+}
+
+.backup-item-actions {
+  flex-shrink: 0;
+}
+.backup-item-actions__buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+}
+
+.backup-confirm-dialog {
+  padding: 0;
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 6px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+  min-width: 320px;
+  max-width: 440px;
+  background: var(--theme-elevation-0);
+}
+.backup-confirm-dialog--restore, .backup-confirm-dialog--manual, .backup-confirm-dialog--settings, .backup-confirm-dialog--backup-list-filters {
+  min-width: 360px;
+  max-width: min(560px, 96vw);
+}
+.backup-confirm-dialog--settings .backup-confirm-dialog__body.restore-preview {
+  /* ~120px taller than default; cap keeps full dialog under the viewport */
+  max-height: min(100dvh - 10rem, 660px);
+}
+.backup-confirm-dialog--settings .backup-confirm-dialog__subtitle--with-help {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 7px;
+  padding-bottom: 7px;
+}
+.backup-confirm-dialog--settings .backup-confirm-dialog__subtitle-text {
+  flex: 1;
+  min-width: 0;
+}
+.backup-confirm-dialog--settings .restore-preview__sticky-heading--with-help {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 7px;
+  margin-top: 4px;
+  margin-bottom: 6px;
+  padding-top: 7px;
+  padding-bottom: 5px;
+}
+.backup-confirm-dialog--settings .restore-preview__sticky-heading--with-help > span:first-child {
+  flex: 1;
+  min-width: 0;
+}
+.backup-confirm-dialog--settings .restore-preview__intro {
+  margin-bottom: 7px;
+}
+.backup-confirm-dialog--settings .restore-preview__settings-fields {
+  margin-bottom: 10px;
+}
+.backup-confirm-dialog--settings .restore-preview__settings-block {
+  margin-bottom: 11px;
+}
+.backup-confirm-dialog--danger-confirm {
+  border-color: var(--theme-error-500, #c0392b);
+  box-shadow: 0 8px 28px rgba(192, 57, 43, 0.18);
+}
+.backup-confirm-dialog--danger-confirm .backup-confirm-dialog__actions .btn:first-of-type {
+  background-color: var(--theme-error-600, #c0392b);
+  border-color: var(--theme-error-600, #c0392b);
+  color: #fff;
+}
+.backup-confirm-dialog--danger-confirm .backup-confirm-dialog__actions .btn:first-of-type:hover:not([disabled]) {
+  background-color: var(--theme-error-700, #a93226);
+  border-color: var(--theme-error-700, #a93226);
+}
+.backup-confirm-dialog::backdrop {
+  background: rgba(0, 0, 0, 0.35);
+}
+.backup-confirm-dialog__title {
+  margin: 0;
+  padding: 16px 20px 6px;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--theme-elevation-1000);
+}
+.backup-confirm-dialog__subtitle {
+  margin: 0;
+  padding: 0 20px 10px;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--theme-elevation-600);
+}
+.backup-confirm-dialog__subtitle code {
+  font-size: 11px;
+}
+.backup-confirm-dialog__body {
+  margin: 0;
+  padding: 0 20px 16px;
+  font-size: 13px;
+  color: var(--theme-elevation-600);
+}
+.backup-confirm-dialog__body.restore-preview {
+  max-height: min(70vh, 520px);
+  overflow-y: auto;
+}
+.backup-confirm-dialog__actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 20px 16px;
+  border-top: 1px solid var(--theme-elevation-100);
+}
+
+.backup-list-filters__body {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+.backup-list-filters__fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+.backup-list-filters__legend {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--theme-elevation-600);
+  margin: 0 0 7px;
+  padding: 0;
+}
+.backup-list-filters__row {
+  display: grid;
+  grid-template-columns: 56px 1fr;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 7px;
+}
+.backup-list-filters__row:last-child {
+  margin-bottom: 0;
+}
+.backup-list-filters__label {
+  font-size: 12px;
+  color: var(--theme-elevation-700);
+}
+.backup-list-filters__date {
+  font-size: 13px;
+  padding: 6px 8px;
+  border-radius: 3px;
+  border: 1px solid var(--theme-elevation-200);
+  background: var(--theme-input-bg);
+  color: var(--theme-elevation-900);
+}
+.backup-list-filters__text {
+  font-size: 13px;
+  padding: 6px 8px;
+  border-radius: 3px;
+  border: 1px solid var(--theme-elevation-200);
+  background: var(--theme-input-bg);
+  color: var(--theme-elevation-900);
+  min-width: 0;
+  width: 100%;
+}
+.backup-list-filters__text::placeholder {
+  color: var(--theme-elevation-400);
+}
+.backup-list-filters__row--label {
+  grid-template-columns: 56px 1fr;
+}
+.backup-list-filters {
+  /* Payload-style radios (match checkbox-input sizing / borders, circular + dot) */
+}
+.backup-list-filters__radio-row {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin-bottom: 5.6px;
+  cursor: pointer;
+}
+.backup-list-filters__radio-row:last-child {
+  margin-bottom: 0;
+}
+.backup-list-filters__radio-row .radio-input__input {
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--theme-elevation-300);
+  background: var(--theme-input-bg);
+  border-radius: 50%;
+  margin: 0;
+  cursor: pointer;
+  flex-shrink: 0;
+  position: relative;
+}
+.backup-list-filters__radio-row .radio-input__input:checked {
+  border-color: var(--theme-elevation-800);
+  background-color: var(--theme-input-bg);
+  background-image: radial-gradient(circle at center, var(--theme-elevation-800) 0, var(--theme-elevation-800) 32%, transparent 33%);
+}
+.backup-list-filters__radio-row .radio-input__input:hover {
+  border-color: var(--theme-elevation-400);
+}
+.backup-list-filters__radio-row .radio-input__input:focus {
+  outline: none;
+  border-color: var(--theme-elevation-400);
+}
+.backup-list-filters__radio-row .radio-input__input:focus-visible {
+  outline: 2px solid var(--theme-elevation-400);
+  outline-offset: 2px;
+}
+.backup-list-filters__radio-row .field-label {
+  font-size: 12px;
+  color: var(--theme-elevation-800);
+  cursor: pointer;
+  line-height: 1.35;
+}
+.backup-list-filters__scope-row {
+  margin-bottom: 8px;
+}
+.backup-list-filters__scope-row:last-child {
+  margin-bottom: 0;
+}
+.backup-list-filters__hint {
+  font-weight: 400;
+  color: var(--theme-elevation-500);
+}
+
+.manual-backup-label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 0 20px;
+  margin: 5px 0 11px;
+}
+.manual-backup-label__label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--theme-elevation-800);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.manual-backup-label__hint {
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--theme-elevation-500);
+}
+.manual-backup-label__input {
+  font-size: 13px;
+  padding: 7px 10px;
+  border-radius: 3px;
+  border: 1px solid var(--theme-elevation-200);
+  background: var(--theme-input-bg);
+  color: var(--theme-elevation-900);
+}
+.manual-backup-label__input::placeholder {
+  color: var(--theme-elevation-400);
+}
+.manual-backup-label__input:focus {
+  outline: none;
+  border-color: var(--theme-elevation-400);
+}
+.manual-backup-label__input:focus-visible {
+  outline: 2px solid var(--theme-elevation-400);
+  outline-offset: 1px;
+}
+.manual-backup-label__help {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.35;
+  color: var(--theme-elevation-500);
+}
+
+.backup-task-action {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.backup-task-action .btn[disabled] {
+  opacity: 0.7;
+  cursor: wait;
+}
+.backup-task-action .btn--style-error {
+  background-color: var(--theme-error-600, #c0392b);
+  color: #fff;
+  border-color: var(--theme-error-600, #c0392b);
+}
+.backup-task-action .btn--style-error:hover:not([disabled]) {
+  background-color: var(--theme-error-700, #a93226);
+  border-color: var(--theme-error-700, #a93226);
+}
+
+.backup-task-status-slot {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+}
+.backup-task-status-slot .backup-task-status__message {
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--theme-elevation-700);
+}
+
+.restore-preview__blob-token-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  width: 100%;
+  align-self: stretch;
+}
+.restore-preview__blob-token-row .restore-preview__settings-input {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.restore-preview__blob-token-row .backup-item__pill {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+.restore-preview__blob-token-pill-slot {
+  flex: 0 0 86px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  min-height: 18px;
+}
+.restore-preview__blob-token-error {
+  margin: 4px 0 0;
+  font-size: 12px;
+  line-height: 1.35;
+  color: var(--theme-error-700, #b91c1c);
+}
+.restore-preview__loading-block {
+  padding: 10px 11px;
+  border-radius: 3px;
+  background: var(--theme-elevation-25, #fafafa);
+  border: 1px solid var(--theme-elevation-100);
+  margin-bottom: 12px;
+}
+.restore-preview__loading-block--section {
+  min-height: 132px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.restore-preview__loading-line {
+  height: 10px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--theme-elevation-100) 0%, var(--theme-elevation-150) 40%, var(--theme-elevation-100) 100%);
+  background-size: 240px 100%;
+  animation: backup-shimmer 1.2s linear infinite;
+  margin-bottom: 6px;
+}
+.restore-preview__loading-line--short {
+  width: 65%;
+}
+.restore-preview__sticky-heading {
+  position: sticky;
+  /* Must stay >= 0: negative top clips under overflow-y:auto on the dialog body */
+  top: 0;
+  z-index: 2;
+  margin: 7px 0 9px;
+  padding: 10px 0 7px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--theme-elevation-700);
+  background: var(--theme-elevation-0);
+  border-bottom: 1px solid var(--theme-elevation-100);
+}
+.restore-preview__sticky-heading-hint {
+  margin-left: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  text-transform: none;
+  color: var(--theme-elevation-500);
+}
+.restore-preview__status {
+  margin: 0 0 10px;
+  color: var(--theme-elevation-700);
+}
+.restore-preview__status--footer {
+  margin: 10px 0 0;
+}
+.restore-preview__settings-block {
+  margin: 0 0 15px;
+  padding: 9px 10px;
+  border-radius: 3px;
+  background: var(--theme-elevation-50, #fafafa);
+  border: 1px solid var(--theme-elevation-100);
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--theme-elevation-800);
+}
+.restore-preview__settings-block code {
+  font-size: 11px;
+}
+.restore-preview__settings-row {
+  margin: 0 0 5px;
+  word-break: break-all;
+}
+.restore-preview__settings-row:last-child {
+  margin-bottom: 0;
+}
+.restore-preview__settings-k {
+  font-weight: 600;
+  color: var(--theme-elevation-700);
+  margin-right: 4px;
+}
+.restore-preview__settings-human {
+  margin: 7px 0 0;
+  font-size: 13px;
+  color: var(--theme-elevation-900);
+}
+.restore-preview__settings-human--muted {
+  color: var(--theme-elevation-600);
+  font-size: 12px;
+}
+.restore-preview__settings-hint {
+  margin: 0 0 5px;
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--theme-elevation-600);
+}
+.restore-preview__settings-snippet {
+  margin: 3px 0 9px;
+  padding: 9px 11px;
+  border-radius: 3px;
+  background: var(--theme-elevation-900);
+  color: var(--theme-elevation-0);
+  font-size: 11px;
+  line-height: 1.45;
+  overflow-x: auto;
+  white-space: pre;
+}
+.restore-preview__settings-fields {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 7px;
+  margin: 0 0 17px;
+}
+.restore-preview__settings-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--theme-elevation-900);
+}
+.restore-preview__settings-input {
+  width: 5.5rem;
+  padding: 7px 9px;
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 3px;
+  font-size: 14px;
+  background: var(--theme-input-bg);
+  color: var(--theme-elevation-900);
+}
+.restore-preview__settings-input--wide {
+  width: 100%;
+  min-width: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 12px;
+  letter-spacing: 0.01em;
+}
+.restore-preview__settings-note {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--theme-elevation-600);
+  max-width: 48ch;
+}
+.restore-preview__settings-note code {
+  font-size: 11px;
+}
+.restore-preview__settings-note--warn {
+  color: var(--theme-warning-700, #a26a00);
+}
+.restore-preview__blob-transfer-row {
+  margin-top: 4px;
+  margin-bottom: 0;
+  max-width: min(48ch, 100%);
+}
+.restore-preview__blob-transfer-row .field-label {
+  white-space: normal;
+  line-height: 1.45;
+}
+.restore-preview__blob-transfer-row--with-help-tip .field-label {
+  flex: 1;
+  min-width: 0;
+}
+.restore-preview__blob-transfer-row--with-help-tip .backup-help-icon {
+  margin-top: 2px;
+}
+.restore-preview__transfer-panel {
+  width: 100%;
+  margin-top: 5px;
+  padding: 9px 10px;
+  border-radius: 3px;
+  background: var(--theme-elevation-50, #fafafa);
+  border: 1px solid var(--theme-elevation-100);
+}
+.restore-preview__transfer-bar-track {
+  height: 8px;
+  border-radius: 999px;
+  background: var(--theme-elevation-100);
+  overflow: hidden;
+}
+.restore-preview__transfer-bar-fill {
+  height: 100%;
+  min-width: 0;
+  border-radius: 999px;
+  background: var(--theme-success-600, #2e7d32);
+  transition: width 0.22s ease-out;
+}
+.restore-preview__transfer-meta {
+  margin: 8px 0 0;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--theme-elevation-800);
+  word-break: break-all;
+}
+.restore-preview__transfer-path {
+  font-size: 11px;
+  color: var(--theme-elevation-600);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+.restore-preview__intro, .restore-preview__note, .restore-preview__warn {
+  margin: 0 0 12px;
+  line-height: 1.45;
+}
+.restore-preview__media-block {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 9px;
+  margin: 0 0 13px;
+  padding: 9px 10px;
+  border-radius: 3px;
+  background: var(--theme-elevation-50, #fafafa);
+  border: 1px solid var(--theme-elevation-100);
+  cursor: pointer;
+}
+.restore-preview__media-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--theme-elevation-800);
+  line-height: 1.4;
+}
+.restore-preview__media-block--nested {
+  margin-top: 7px;
+  cursor: pointer;
+}
+.restore-preview__all-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0 0 13px;
+  padding: 11px 12px 10px;
+  border-radius: 3px;
+  background: var(--theme-elevation-50, #fafafa);
+  border: 1px solid var(--theme-elevation-100);
+}
+.restore-preview__all-block-head {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 9px;
+  cursor: pointer;
+  margin: 0;
+}
+.restore-preview__all-list {
+  list-style: none;
+  margin: 0;
+  padding: 7px 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border-top: 1px dashed var(--theme-elevation-150, #e5e5e5);
+}
+.restore-preview__all-item {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 7px 12px;
+  padding: 3px 2px 3px 32px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--theme-elevation-800);
+}
+.restore-preview__all-name {
+  flex: 1 1 12rem;
+  min-width: 0;
+  font-weight: 500;
+  color: var(--theme-elevation-900);
+  line-height: 1.45;
+}
+.restore-preview__all-count {
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+  color: var(--theme-elevation-600);
+}
+.restore-preview__all-count-sub {
+  color: var(--theme-elevation-500);
+}
+.restore-preview__note--media {
+  margin-top: 0;
+}
+.restore-preview__warn {
+  padding: 10px 12px;
+  border-radius: 4px;
+  background: var(--theme-warning-50, rgba(255, 193, 7, 0.12));
+  border: 1px solid var(--theme-warning-200, rgba(255, 152, 0, 0.35));
+  color: var(--theme-elevation-800);
+}
+.restore-preview__warn--auth {
+  background: var(--theme-error-50, rgba(192, 57, 43, 0.08));
+  border-color: var(--theme-error-200, rgba(192, 57, 43, 0.25));
+}
+.restore-preview__note code {
+  font-size: 12px;
+}
+.restore-preview__error {
+  margin-bottom: 12px;
+}
+.restore-preview__error p {
+  margin: 0 0 8px;
+}
+.restore-preview__error--inline {
+  margin: 7px 20px 10px;
+  color: var(--theme-error-700, #c0392b);
+  font-size: 13px;
+}
+.restore-preview__error-hint {
+  font-size: 12px;
+  color: var(--theme-elevation-600);
+}
+.restore-preview__empty {
+  margin: 0 0 10px;
+  font-size: 13px;
+  color: var(--theme-elevation-600);
+}
+.restore-preview__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.restore-preview__group {
+  padding: 9px 10px;
+  border-radius: 3px;
+  background: var(--theme-elevation-50, #fafafa);
+  border: 1px solid var(--theme-elevation-100);
+}
+.restore-preview__group--empty {
+  background: var(--theme-elevation-50, #fafafa);
+  border-color: var(--theme-elevation-100);
+}
+.restore-preview__group--empty .restore-preview__group-title {
+  color: var(--theme-elevation-500);
+}
+.restore-preview__group--empty .restore-preview__subline--empty {
+  color: var(--theme-elevation-500);
+  font-style: italic;
+}
+.restore-preview__group--disabled {
+  opacity: 0.55;
+  filter: saturate(0.7);
+}
+.restore-preview__group-head {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 7px;
+  width: 100%;
+  margin: 0 0 2px;
+}
+.restore-preview__group-label {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 9px;
+  cursor: pointer;
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+}
+.restore-preview__group-check {
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  margin-top: 3px;
+  border: 1px solid var(--theme-elevation-300);
+  background: var(--theme-input-bg);
+  border-radius: 3px;
+  cursor: pointer;
+  position: relative;
+}
+.restore-preview__group-check:checked {
+  border-color: var(--theme-elevation-800);
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.58333 7.5L0 3.91667L0.7 3.21667L3.58333 6.1L9.3 0.383333L10 1.08333L3.58333 7.5Z' fill='%23333333'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 10px 8px;
+}
+.restore-preview__group-check:hover {
+  border-color: var(--theme-elevation-400);
+}
+.restore-preview__group-check:focus {
+  outline: none;
+  border-color: var(--theme-elevation-400);
+}
+.restore-preview__group-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--theme-elevation-900);
+  line-height: 1.35;
+}
+.restore-preview__sublines {
+  margin: 6px 0 0 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.restore-preview__subline {
+  font-size: 12px;
+  color: var(--theme-elevation-600);
+  line-height: 1.4;
+}
+.restore-preview__pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-top: 4px;
+}
+.restore-preview__pill {
+  font-size: 11px;
+  line-height: 1.2;
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: var(--theme-elevation-150, #ececec);
+  color: var(--theme-elevation-700);
+  flex-shrink: 0;
+}
+.restore-preview__pill--signin {
+  background: var(--theme-warning-50, rgba(255, 193, 7, 0.28));
+  border: 1px solid var(--theme-warning-400, rgba(255, 152, 0, 0.55));
+  color: var(--theme-elevation-900);
+  font-weight: 500;
+}
+
+@keyframes backup-shimmer {
+  0% {
+    background-position: -220px 0;
+  }
+  100% {
+    background-position: 220px 0;
+  }
+}
+button.backup-help-icon {
+  margin: 0;
+  padding: 0;
+  border: none;
+  font: inherit;
+  appearance: none;
+}
+
+.backup-help-icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--theme-elevation-200);
+  color: var(--theme-elevation-600);
+  font-size: 11px;
+  font-style: normal;
+  cursor: help;
+  flex-shrink: 0;
+  user-select: none;
+}
+.backup-help-icon::after {
+  content: attr(data-tip);
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--theme-elevation-900);
+  color: var(--theme-elevation-0);
+  font-size: 11px;
+  line-height: 1.4;
+  white-space: nowrap;
+  padding: 4px 8px;
+  border-radius: 4px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  z-index: 100;
+}
+.backup-help-icon:hover::after {
+  opacity: 1;
+}
+.backup-help-icon {
+  /* Longer copy in settings / footers — wrap instead of one endless line */
+}
+.backup-help-icon--multiline::after {
+  white-space: normal;
+  text-align: left;
+  width: max-content;
+  max-width: min(280px, 85vw);
+}
+.backup-help-icon {
+  /* Settings modal body scrolls — absolute ::after gets clipped; anchor to viewport instead */
+}
+.backup-help-icon--settings-tooltip::after {
+  position: fixed;
+  left: var(--backup-tip-x, 50%);
+  top: var(--backup-tip-y, 0);
+  bottom: auto;
+  transform: translate(-50%, calc(-100% - 6px));
+  z-index: 2147483000;
+}