DataScope26/WEB

1form {2  width: 100%;3}4 5form .input-group {6  margin-bottom: 1.125rem;7}8 9form .input-group label {10  display: block;11  font-size: 0.625rem;12  color: var(--color-muted);13  margin-bottom: 0.375rem;14  letter-spacing: 0.0625rem;15  text-transform: uppercase;16  font-weight: 600;17}18 19form .input-group input {20  width: 100%;21  background: var(--surface);22  border: 1px solid rgba(180, 180, 180, 0.2);23  color: var(--color-text);24  padding: 0.875rem 1rem;25  border-radius: 0.625rem;26  font-size: 0.95rem;27  font-family: 'Roboto', sans-serif;28  transition: all 150ms ease;29  box-sizing: border-box;30}31 32form .input-group input:focus {33  outline: none;34  border-color: var(--green);35  background: var(--surface-2);36  box-shadow: 0 0 8px rgba(46, 232, 138, 0.2);37}38 39form .input-group input::placeholder {40  color: var(--color-muted);41  opacity: 0.6;42}43 44/* Input Icon Container */45form .input-icon {46  position: relative;47  display: flex;48  align-items: center;49}50 51form .input-icon input {52  padding-right: 2.5rem;53}54 55form .input-icon .icon {56  position: absolute;57  right: 1rem;58  color: var(--color-muted);59  cursor: pointer;60  transition: color 150ms ease;61  flex-shrink: 0;62}63 64form .input-icon .icon:hover {65  color: var(--green);66}67 68/* Password Checklist */69.password-checklist {70  background: rgba(46, 232, 138, 0.05);71  border: 1px solid rgba(46, 232, 138, 0.2);72  border-radius: 0.625rem;73  padding: 1rem;74  margin-top: 0.5rem;75  font-size: 0.8125rem;76  line-height: 1.5;77}78 79.password-checklist div {80  margin-bottom: 0.375rem;81  transition: color 200ms ease;82}83 84.password-checklist div:last-child {85  margin-bottom: 0;86}87 88/* Error Text */89form .error-text {90  color: var(--color-danger);91  font-size: 0.875rem;92  margin-bottom: 1.125rem;93  animation: fadeInUp 0.4s ease-out forwards;94}95 96.error-text--animated {97  animation: fadeInUp 0.4s ease-out forwards;98}99 100@keyframes fadeInUp {101  from {102    opacity: 0;103    transform: translateY(0.5rem);104  }105  to {106    opacity: 1;107    transform: translateY(0);108  }109}110 111/* Form Actions */112.form-actions {113  margin-top: 2rem;114}115 116.form-actions .full-width-btn {117  width: 100%;118  padding: 0.875rem;119  font-size: 1.375rem;120  font-weight: 600;121}122 123.form-actions .disabled-btn {124  opacity: 0.8;125  cursor: default;126}127 128/* Loader Animation */129.loader-icon-animation {130  animation: spin 3s linear infinite;131}132 133@keyframes spin {134  from {135    transform: rotate(0deg);136  }137  to {138    transform: rotate(360deg);139  }140}141 142/* Light Theme Overrides */143html[data-theme='light'] form .input-group input {144  background: var(--surface);145  border-color: var(--color-border);146  color: var(--color-text);147}148 149html[data-theme='light'] form .input-group input:focus {150  background: var(--surface-2);151  border-color: var(--green);152}153 154html[data-theme='light'] form .input-group input::placeholder {155  color: #9ca3af;156}157 158html[data-theme='light'] form .input-icon .icon {159  color: #6b7280;160}161 162html[data-theme='light'] form .input-icon .icon:hover {163  color: var(--green);164}165 166html[data-theme='light'] .password-checklist {167  background: rgba(46, 232, 138, 0.08);168  border-color: rgba(46, 232, 138, 0.3);169  color: #374151;170}171 172html[data-theme='light'] form .error-text {173  color: #b91c1c;174}175 176/* Autofill Styling */177form input:-webkit-autofill,178form input:-webkit-autofill:hover,179form input:-webkit-autofill:focus,180form input:-webkit-autofill:active {181  -webkit-box-shadow: 0 0 0 62.5rem var(--surface-2) inset;182  box-shadow: 0 0 0 62.5rem var(--surface-2) inset;183  -webkit-text-fill-color: var(--color-text);184  caret-color: var(--color-text);185  transition: background-color 5000s ease-in-out 0s;186}187