DataScope26/WEB

1.area-step {2  width: 100%;3  max-width: 28.75rem;4  margin: 0 auto;5  padding-top: 6rem; /* clears the fixed header */6  padding-bottom: 2.5rem;7}8 9.area-step__card {10  background: var(--color-card);11  border: 0.0625rem solid var(--color-border);12  border-radius: 1rem;13  padding: 2rem 1.75rem;14  box-shadow: 0 0.5rem 1.875rem rgba(0, 0, 0, 0.16);15}16 17.area-step__card h1 {18  font-family: var(--font-display);19  font-size: 1.4rem;20  font-weight: 600;21  line-height: 1.3;22  margin: 0 0 0.5rem;23  color: var(--color-text);24}25 26.area-step__card--success {27  text-align: center;28}29 30.area-step__check {31  width: 3.25rem;32  height: 3.25rem;33  margin: 0 auto 1rem;34  display: flex;35  align-items: center;36  justify-content: center;37  border-radius: 50%;38  background: var(--green-20);39  color: var(--green);40}41 42.area-step__subtitle {43  color: var(--color-muted);44  font-size: 0.9rem;45  margin: 0 0 1.5rem;46}47 48.area-step__form {49  display: flex;50  flex-direction: column;51  gap: 1rem;52}53 54.area-step__field {55  display: flex;56  flex-direction: column;57  gap: 0.375rem;58}59 60.area-step__form label {61  font-size: 0.72rem;62  font-weight: 600;63  letter-spacing: 0.04em;64  text-transform: uppercase;65  color: var(--color-muted);66}67 68.area-step__form input,69.area-step__search input {70  width: 100%;71  background: var(--color-surface);72  border: 0.0625rem solid var(--color-border);73  color: var(--color-text);74  padding: 0.75rem 0.875rem;75  font-size: 0.95rem;76  border-radius: 0.625rem;77  outline: none;78  transition: border-color 0.2s ease, box-shadow 0.2s ease;79}80 81.area-step__form input:focus,82.area-step__search input:focus {83  border-color: var(--color-accent);84}85 86.area-step__form input::placeholder {87  color: var(--color-muted);88  opacity: 0.8;89}90 91.area-step__form button,92.area-step__search button {93  padding: 0.75rem 1rem;94  border-radius: 0.625rem;95}96 97.area-step__search {98  display: flex;99  gap: 0.5rem;100  margin-bottom: 1rem;101}102 103.area-step__search input {104  flex: 1;105}106 107.area-step__error {108  color: var(--color-danger);109  background: var(--color-danger-bg);110  border: 0.0625rem solid var(--color-danger-border, transparent);111  padding: 0.5rem 0.75rem;112  border-radius: 0.5rem;113  font-size: 0.85rem;114  margin: -0.25rem 0 0;115}116 117.area-step__empty {118  color: var(--color-muted);119  font-size: 0.9rem;120}121 122.area-step__results {123  list-style: none;124  padding: 0;125  display: flex;126  flex-direction: column;127  gap: 0.5rem;128}129 130.area-step__results li {131  display: flex;132  justify-content: space-between;133  align-items: center;134  padding: 0.5rem 0.75rem;135  border: 0.0625rem solid var(--color-border);136  border-radius: 0.5rem;137  background: var(--color-card);138}139 140.area-step__results button {141  padding: 0.25rem 0.625rem;142  border-radius: 0.375rem;143  border: none;144  background: var(--color-accent);145  color: var(--cta-text);146  cursor: pointer;147}148 149.area-step__added {150  list-style: none;151  padding: 0;152  margin-top: 0.75rem;153  font-size: 0.9rem;154  color: var(--color-muted);155}156 157.area-step__actions {158  display: flex;159  justify-content: center;160  margin-top: 1.25rem;161}162 163.area-step__actions--stacked {164  flex-direction: column;165  gap: 0.75rem;166  margin-top: 1.75rem;167}168 169.area-step__skip,170.area-step__another {171  background: none;172  border: none;173  padding: 0.25rem;174  color: var(--color-muted);175  font-size: 0.9rem;176  transition: color 0.2s ease;177}178 179.area-step__skip:hover,180.area-step__another:hover {181  color: var(--color-accent);182}183 184.area-step__next {185  width: 100%;186  padding: 0.75rem 1.25rem;187  border-radius: 0.625rem;188}189 190.area-step__next:disabled {191  opacity: 0.5;192  cursor: not-allowed;193}