/* Customer recovery uses the same brand and device appearance as the workspace. */
.recovery-screen {
  --recovery-bg: #f5f4ee;
  --recovery-card: #fffef9;
  --recovery-ink: #153e36;
  --recovery-muted: #596a60;
  --recovery-line: #d9dfd4;
  --recovery-gold: #87632d;
  --recovery-soft: #edf2e8;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 60px);
  background: radial-gradient(ellipse at 10% 0%, #dce9dc 0, transparent 60%), var(--recovery-bg);
  color: var(--recovery-ink);
}
:root[data-theme="dark"] .recovery-screen {
  --recovery-bg: #101d20;
  --recovery-card: #182f2d;
  --recovery-ink: #edf3e8;
  --recovery-muted: #becfc3;
  --recovery-line: #3b544a;
  --recovery-gold: #e1c28a;
  --recovery-soft: #234139;
  background: radial-gradient(ellipse at 10% 0%, #21473d 0, transparent 60%), var(--recovery-bg);
}
.recovery-card {
  width: min(100%, 640px);
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid var(--recovery-line);
  border-radius: 26px;
  background: var(--recovery-card);
  box-shadow: 0 20px 70px #10312812;
  overflow-wrap: anywhere;
}
.recovery-logo { display: inline-flex; width: 176px; max-width: 100%; margin-bottom: 30px; }
.recovery-logo .brand-asset { width: 100%; height: auto; }
.recovery-emblem { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--recovery-line); border-radius: 18px; background: var(--recovery-soft); color: var(--recovery-gold); margin-bottom: 24px; }
.recovery-eyebrow { margin: 0 0 10px; font-size: .75rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--recovery-gold); }
.recovery-card h1 { margin: 0 0 16px; color: var(--recovery-ink); font-size: clamp(1.85rem, 5vw, 2.7rem); font-weight: 650; line-height: 1.12; letter-spacing: -.035em; max-width: 14ch; }
.recovery-card h1:focus { outline: none; }
.recovery-intro { margin: 0 0 24px; color: var(--recovery-muted); font-size: 1rem; line-height: 1.65; }
.recovery-connection { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 26px; padding: 14px; border: 1px solid var(--recovery-line); border-radius: 12px; background: var(--recovery-soft); color: var(--recovery-ink); font-size: .875rem; line-height: 1.5; }
.recovery-connection svg { flex: 0 0 auto; margin-top: 1px; }
.recovery-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.recovery-actions .btn { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 48px; flex: 1 1 170px; padding: 12px 16px; font-size: .9375rem; border-radius: 12px; white-space: normal; }
.recovery-actions .btn-primary { background: var(--recovery-ink); color: var(--recovery-card); border: 1px solid var(--recovery-ink); }
.recovery-actions .btn-secondary { background: transparent; color: var(--recovery-ink); border: 1px solid var(--recovery-line); }
.recovery-care { margin: 0 0 22px; color: var(--recovery-muted); font-size: .8125rem; line-height: 1.65; }
.recovery-support { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--recovery-ink); font-weight: 600; font-size: .875rem; text-decoration: underline; text-underline-offset: 4px; }
.recovery-card :is(button, a):focus-visible { outline: 3px solid var(--focus-ring, #176e52); outline-offset: 4px; }
@media (max-width: 420px) { .recovery-screen { padding: 16px; } .recovery-card { padding: 24px 20px; border-radius: 20px; } .recovery-logo { margin-bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .recovery-screen *, .recovery-screen *::before, .recovery-screen *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }