.cfg-recovery {
  position: fixed; inset: 0; z-index: 10000; overflow-y: auto;
  display: flex; justify-content: center; align-items: safe center;
  padding: max(var(--sp-24), var(--safe-top))
    max(var(--sp-16), var(--safe-left), var(--safe-right))
    max(var(--sp-24), var(--safe-bottom));
  background: var(--bg-primary); color: var(--label-primary); font-family: var(--font-ui);
}
.cfg-recovery-card {
  width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: var(--sp-12);
  padding: var(--sp-24); border-radius: var(--sy-radius-window);
  background: var(--bg-secondary); border: 0.5px solid var(--separator);
}
.cfg-recovery-body, .cfg-recovery-more { display: flex; flex-direction: column; gap: var(--sp-12) }
.cfg-recovery-title {
  margin: 0; font-size: var(--fs-title-2); line-height: var(--lh-title-2); letter-spacing: var(--tr-title-2); font-weight: 700;
}
.cfg-recovery-title:focus { outline: none }
.cfg-recovery-why, .cfg-recovery-safe, .cfg-recovery-steps, .cfg-recovery-status, .cfg-recovery-help {
  margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--tr-body);
}
.cfg-recovery-safe, .cfg-recovery-help { color: var(--label-secondary) }
.cfg-recovery-steps-title {
  margin: var(--sp-8) 0 0; font-size: var(--fs-headline); line-height: var(--lh-headline); letter-spacing: var(--tr-headline);
  font-weight: var(--fw-headline);
}
.cfg-recovery-steps { padding-inline-start: var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-8) }
.cfg-recovery code {
  font-family: monospace;
  direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere;
}
.cfg-recovery-btn {
  align-self: flex-start; margin-top: var(--sp-8); min-height: 48px; padding: var(--sp-12) var(--sp-24);
  border: none; border-radius: 999px; background: var(--accent); color: var(--on-fill); cursor: pointer;
  font-family: inherit; font-size: var(--fs-headline); line-height: var(--lh-headline); letter-spacing: var(--tr-headline);
  font-weight: var(--fw-headline);
}
.cfg-recovery-btn:active:not(:disabled) { opacity: 0.8 }
.cfg-recovery-btn:disabled { opacity: 0.6; cursor: default }
.cfg-recovery-btn:focus-visible, .cfg-recovery-help a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.cfg-recovery-status:empty { display: none }
.cfg-recovery-setup { display: flex; flex-direction: column; gap: var(--sp-12) }
.cfg-recovery-form { display: flex; flex-direction: column; gap: var(--sp-12) }
.cfg-recovery-label {
  display: flex; flex-direction: column; gap: var(--sp-8);
  font-size: var(--fs-callout); line-height: var(--lh-callout); letter-spacing: var(--tr-callout); font-weight: 600;
}
.cfg-recovery-input {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 var(--sp-16); border: 0; border-radius: 24px;
  background: var(--fill-tertiary); color: var(--label-primary); outline: none;
  font-family: inherit; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--tr-body); font-weight: 400;
}
.cfg-recovery-field { position: relative; display: flex; align-items: center }
.cfg-recovery-field .cfg-recovery-input { padding-inline-end: 52px }
.cfg-recovery-reveal {
  position: absolute; inset-inline-end: 6px; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--label-secondary); cursor: pointer;
}
.cfg-recovery-reveal[aria-pressed="true"] { color: var(--accent) }
.cfg-recovery-reveal:active { background: var(--fill-tertiary) }
.cfg-recovery-reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px }
.cfg-recovery-code { font-family: monospace; text-transform: uppercase; direction: ltr }
.cfg-recovery-input:focus-visible { box-shadow: 0 0 0 2px var(--accent) }
.cfg-recovery-input[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--danger) }
.cfg-recovery-error { color: var(--danger) }
.cfg-recovery-btn-secondary { background: var(--fill-tertiary); color: var(--label-primary) }
.cfg-recovery-help a { color: var(--label-primary); text-decoration: underline }

@media (forced-colors: active) {
  .cfg-recovery-card { border-color: CanvasText }
  .cfg-recovery-btn { border: 1px solid ButtonText }
  .cfg-recovery-input { border: 1px solid CanvasText }
  .cfg-recovery-input:focus-visible { outline: 2px solid Highlight }
  .cfg-recovery-reveal[aria-pressed="true"] { color: Highlight }
}