DataScope26/WEB

1.field-error {2  display: block;3  color: var(--color-danger);4  font-size: 0.75rem;5  margin-top: 0.25rem;6}7 8.company-data-content {9  padding: 3rem;10  display: flex;11  flex-direction: column;12  height: 100%;13  min-height: 0;14  box-sizing: border-box;15  animation: fadeIn 0.8s ease forwards;16}17 18.company-data-subtitle-row {19  display: flex;20  align-items: center;21  gap: 0.75rem;22}23 24.company-data-content .step-back-button {25  align-self: flex-start;26  width: 2.75rem;27  height: 2.75rem;28  padding: 0;29  display: inline-flex;30  align-items: center;31  justify-content: center;32  border-radius: 50%;33}34 35@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }36 37.company-data-header { 38  margin-bottom: 2rem;39  display: flex;40  flex-direction: column;41  gap: 0.5rem;42  width: 100%;43}44 45.company-data-subtitle {46  color: var(--green);47  font-size: 0.875rem;48  font-weight: 600;49  letter-spacing: 0.0625rem;50  text-transform: uppercase;51  margin-bottom: 0;52}53 54.company-data-title {55  font-family: var(--font-body);56  font-size: 2rem;57  color: var(--color-text);58  margin: 0;59}60 61.company-data-form {62  display: flex;63  flex-direction: column;64  gap: 1.25rem;65  max-width: 31.25rem;66  width: 100%;67}68 69.form-input-group label {70  display: block;71  font-size: 0.75rem;72  color: var(--muted);73  margin-bottom: 0.5rem;74  text-transform: uppercase;75  letter-spacing: 0.0625rem;76}77 78.form-input-group input {79  width: 100%;80  background: var(--surface-2);81  border: 0.0625rem solid var(--color-border);82  color: var(--color-text);83  padding: 1rem;84  border-radius: 0.75rem;85  outline: none;86  transition: border-color 0.2s ease;87}88 89.form-input-group input:focus { border-color: var(--green); }90 91.company-data-actions {92  margin-top: auto;93  margin-bottom: 0.75rem;94  display: flex;95  justify-content: flex-end;96  flex-shrink: 0;97  width: 100%;98  padding-top: 1.5rem;99  padding-bottom: 1.5rem;100  border-top: 0.0625rem solid var(--color-border-soft);101}102 103.btn-next {104  padding: 0.875rem 2rem;105  font-size: 1rem;106}107 108.loader-icon-animation {109  animation: spin 3s linear infinite;110}111 112@keyframes spin {113  from {114    transform: rotate(0deg);115  }116 117  to {118    transform: rotate(360deg);119  }120}121 122.company-logo-upload-group {123  margin-top: 0.5rem;124}125 126.company-logo-picker {127  display: flex;128  align-items: center;129  gap: 1rem;130  margin-top: 0.5rem;131}132 133.company-logo-preview {134  width: 4.5rem;135  height: 4.5rem;136  border-radius: 50%;137  border: 0.0625rem solid var(--color-border);138  background: var(--surface);139  overflow: hidden;140  display: flex;141  align-items: center;142  justify-content: center;143  cursor: pointer;144  padding: 0;145}146 147.company-logo-image {148  width: 100%;149  height: 100%;150  object-fit: cover;151}152 153.company-logo-placeholder {154  width: 100%;155  height: 100%;156  display: flex;157  align-items: center;158  justify-content: center;159  color: var(--black);160  font-size: 2.125rem;161  font-weight: 700;162  background: #ffffff;163}164 165.company-logo-actions {166  display: flex;167  align-items: center;168  gap: 0.75rem;169  flex-wrap: wrap;170}171 172.company-logo-button,173.company-logo-remove {174  padding: 0.625rem 0.875rem;175  font-size: 0.8125rem;176  background: none;177}178 179.company-logo-button:hover {180  color: var(--green);181}182 183 184 185.cs-btn-primarya {186  width: 100%;187  border-radius: 0.5rem;188  padding: 0.625rem 0;189  font-size: 0.875rem;190}191 192.cs-btn-ghostt {193  font-size: 0.875rem;194  padding: 0.5rem 0.75rem;195}196 197.cs-logo-modal-overlay {198  position: fixed;199  top: 0;200  left: 0;201  right: 0;202  bottom: 0;203  background: rgba(0, 0, 0, 0.5);204  backdrop-filter: blur(0.125rem);205  display: flex;206  align-items: center;207  justify-content: center;208  z-index: 1000;209  box-shadow: 0 0.25rem 1.25rem var(--color-border-soft);210}211 212html[data-theme='light'] .cs-logo-modal {213  background: rgba(0, 0, 0, 0.2);214}215 216.cs-logo-modal-content {217  background: var(--surface-2);218  border-radius: 0.5rem;219  padding: 3.125rem;220  width: 31.25rem;221  max-width: 90vw;222  display: flex;223  flex-direction: column;224  align-items: center;225  gap: 1rem;226  box-shadow: 0 0.25rem 1.25rem var(--color-border-soft);227}228 229.cs-logo-modal-title {230  font-family: var(--font-body);231  font-weight: 700;232  font-size: 1.5rem;233  line-height: 1.625rem;234  color: var(--color-text);235  margin: 0;236}237 238.cs-logo-current-frame {239  width: 17.5rem;240  height: 17.5rem;241  border-radius: 50%;242  overflow: hidden;243  background: var(--color-surface);244  display: flex;245  align-items: center;246  justify-content: center;247  position: relative;248}249 250.cs-logo-current-image {251  width: 17.5rem;252  height: 17.5rem;253  border-radius: 50%;254  object-fit: cover;255}256 257.cs-logo-current-placeholder {258  width: 100%;259  height: 100%;260  display: flex;261  align-items: center;262  justify-content: center;263  font-size: 6rem;264  font-weight: 700;265  color: var(--black);266  background: linear-gradient(135deg, var(--surface-3) 0%, var(--white) 100%);267}268 269.cs-logo-crop-container {270  width: 17.5rem;271  height: 17.5rem;272  border-radius: 50%;273  overflow: hidden;274  touch-action: none;275  cursor: grab;276  background: var(--color-surface);277  position: relative;278}279 280.cs-logo-crop-container:active {281  cursor: grabbing;282}283 284.cs-logo-crop-grid {285  position: absolute;286  top: 0;287  left: 0;288  width: 100%;289  height: 100%;290  background-image:291    linear-gradient(0deg, transparent 24%, var(--color-border-soft) 25%, var(--color-border-soft) 26%, transparent 27%, transparent 74%, var(--color-border-soft) 75%, var(--color-border-soft) 76%, transparent 77%, transparent),292    linear-gradient(90deg, transparent 24%, var(--color-border-soft) 25%, var(--color-border-soft) 26%, transparent 27%, transparent 74%, var(--color-border-soft) 75%, var(--color-border-soft) 76%, transparent 77%, transparent);293  background-size: 2.9375rem 2.9375rem;294  border-radius: 50%;295  pointer-events: none;296}297 298.cs-logo-zoom-controls {299  width: 100%;300  display: flex;301  align-items: center;302  gap: 0.5rem;303}304 305.cs-logo-zoom-label {306  font-size: 0.75rem;307  color: var(--color-muted);308}309 310.cs-logo-zoom-slider {311  flex: 1;312}313 314.cs-logo-modal-actionss {315  display: flex;316  align-items: center;317  justify-content: center;318  gap: 0.75rem;319  width: 100%;320}321 322.cs-logo-modal-actionss .btn-save,323.cs-logo-modal-actionss .btn-logout {324  flex: 1;325  padding: 0.875rem 0;326  font-size: 0.875rem;327  line-height: 20%;328}329 330 331@media (max-width: 40rem) {332  .company-logo-picker {333    flex-direction: column;334    align-items: flex-start;335  }336 337  .cs-logo-modal-content {338    padding: 1.5rem 1.125rem;339  }340}341 342