DataScope26/WEB

1.recovery-modal {2  width: 32.5rem;3  max-width: 95%;4  background: var(--surface-2);5  border-radius: 1.75rem;6  padding: 3.75rem 3.5rem;7  color: var(--color-text);8  font-family: var(--font-body);9  position: fixed;10  top: 50%;11  left: 50%;12  transform: translate(-50%, -50%);13  z-index: 1000;14  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.12);15}16 17.recovery-modal__header {18  margin-bottom: 1.5rem;19}20 21.recovery-modal__badge {22  display: inline-flex;23  align-items: center;24  gap: 0.5rem;25  background: rgba(46, 232, 138, 0.1);26  border: 1px solid var(--green-40);27  color: var(--green);28  border-radius: 999px;29  padding: 0.45rem 0.8rem;30  font-size: 0.625rem;31  font-weight: 600;32  letter-spacing: 0.0625rem;33  text-transform: uppercase;34}35 36.recovery-modal__badge.success-badge {37  background: rgba(46, 232, 138, 0.1);38  color: var(--green);39}40 41.recovery-modal h2 {42  margin: 1rem 0 0;43  font-size: 1.75rem;44  font-weight: 700;45  font-family: var(--font-display);46}47 48.recovery-modal__description {49  margin: 0 0 1.5rem;50  color: var(--color-muted);51  line-height: 1.6;52  font-size: 0.95rem;53}54 55.recovery-input-group {56  margin-bottom: 1.125rem;57}58 59.recovery-input-group label {60  display: block;61  font-size: 0.625rem;62  color: var(--color-muted);63  margin-bottom: 0.375rem;64  letter-spacing: 0.0625rem;65  text-transform: uppercase;66  font-weight: 600;67}68 69.recovery-input-group input {70  width: 100%;71  background: var(--surface);72  border: 1px solid rgba(180, 180, 180, 0.2);73  color: var(--color-text);74  padding: 0.875rem 1rem;75  border-radius: 0.625rem;76  font-size: 0.95rem;77  font-family: var(--font-body);78  transition: all 150ms ease;79  box-sizing: border-box;80}81 82.recovery-input-group input:focus {83  outline: none;84  border-color: var(--green);85  background: var(--surface-2);86  box-shadow: 0 0 8px rgba(46, 232, 138, 0.2);87}88 89.recovery-input-group input::placeholder {90  color: var(--color-muted);91  opacity: 0.6;92}93 94.input-icon {95  position: relative;96  display: flex;97  align-items: center;98}99 100.input-icon input {101  padding-right: 2.5rem;102}103 104.input-icon .icon {105  position: absolute;106  right: 1rem;107  color: var(--color-muted);108  cursor: pointer;109  transition: color 150ms ease;110}111 112.input-icon:focus-within .icon {113  color: var(--green);114}115 116.recovery-code-grid {117  display: grid;118  grid-template-columns: repeat(6, 1fr);119  gap: 0.75rem;120  margin-bottom: 1.5rem;121}122 123.recovery-code-input {124  width: 100%;125  aspect-ratio: 1;126  background: var(--surface);127  border: 2px solid rgba(180, 180, 180, 0.2);128  border-radius: 0.625rem;129  color: var(--color-text);130  font-size: 1.25rem;131  font-weight: 700;132  font-family: 'Courier New', monospace;133  text-align: center;134  transition: all 150ms ease;135  box-sizing: border-box;136}137 138.recovery-code-input:focus {139  outline: none;140  border-color: var(--green);141  background: var(--surface-2);142  box-shadow: 0 0 8px rgba(46, 232, 138, 0.2);143}144 145.recovery-code-input::placeholder {146  color: var(--color-muted);147  opacity: 0.5;148}149 150.password-checklist {151  display: flex;152  flex-direction: column;153  gap: 0.5rem;154  margin-bottom: 1.5rem;155  padding: 0.75rem 1rem;156  background: rgba(46, 232, 138, 0.05);157  border: 1px solid var(--green-40);158  border-radius: 0.625rem;159  font-size: 0.85rem;160}161 162.password-checklist__ok {163  color: var(--green);164  font-weight: 500;165}166 167.password-checklist__warn {168  color: var(--color-muted);169  font-weight: 500;170}171 172.recovery-actions {173  display: flex;174  flex-direction: column;175  gap: 0.75rem;176  margin-top: 1.5rem;177}178 179.recovery-btn {180  width: 100%;181  padding: 0.875rem 1rem;182  font-size: 0.95rem;183  border-radius: 0.625rem;184  font-weight: 500;185}186 187.error-text {188  color: var(--color-danger);189  font-size: 0.875rem;190  margin-bottom: 1rem;191}192 193.error-text--animated {194  animation: fadeInUp 0.4s ease-out forwards;195}196 197@keyframes fadeInUp {198  from {199    opacity: 0;200    transform: translateY(0.5rem);201  }202  to {203    opacity: 1;204    transform: translateY(0);205  }206}207 208.loader-icon-animation {209  animation: spin 3s linear infinite;210}211 212@keyframes spin {213  from {214    transform: rotate(0deg);215  }216  to {217    transform: rotate(360deg);218  }219}220 221/* Light theme overrides */222html[data-theme='light'] .recovery-modal__description {223  color: var(--color-muted);224}225 226html[data-theme='light'] .recovery-input-group label {227  color: var(--color-muted);228}229 230html[data-theme='light'] .recovery-input-group input::placeholder {231  color: var(--color-muted);232}233 234html[data-theme='light'] .input-icon .icon {235  color: var(--color-muted);236}237