.backup-button {
  width: 100%;
  margin-top: 8px;
  border: 1px solid rgba(116, 139, 126, 0.16);
  padding: 9px 12px;
  color: #687a70;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 13px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.backup-panel {
  width: min(420px, calc(100vw - 28px));
  padding: 0;
  border: 1px solid rgba(95, 114, 103, 0.18);
  border-radius: 22px;
  color: #536158;
  background: #fbf8f2;
  box-shadow: 0 24px 70px rgba(56, 68, 61, 0.2);
}

.backup-panel::backdrop { background: rgba(46, 54, 49, 0.35); backdrop-filter: blur(5px); }
.backup-card { padding: 24px; }
.backup-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.backup-card header p { margin: 0 0 3px; color: #91a097; font-size: 12px; }
.backup-card header h3 { margin: 0; font-size: 20px; font-weight: 600; }
.backup-card header button { width: 32px; height: 32px; border: 0; border-radius: 50%; color: #6d7c73; background: rgba(110,130,118,.1); font-size: 20px; }
.backup-card > p { margin: 16px 0; color: #78857e; font-size: 13px; line-height: 1.7; }
.backup-actions { display: grid; gap: 10px; }
.backup-actions button, .backup-actions label { display: block; width: 100%; box-sizing: border-box; border: 0; padding: 12px; border-radius: 14px; text-align: center; font: inherit; font-size: 13px; cursor: pointer; }
.backup-actions button { color: #fff; background: #708579; }
.backup-actions label { color: #687a70; background: rgba(112,133,121,.11); }
.backup-actions input { display: none; }
.backup-progress { min-height: 20px; margin-top: 12px; color: #9b8476; font-size: 12px; text-align: center; }