html.auth-is-login:not(.portal-signed-in),
html.auth-is-login:not(.portal-signed-in) body,
html.auth-split:not(.portal-signed-in),
html.auth-split:not(.portal-signed-in) body {
  background: #f4f4f4;
}

html.auth-is-signup:not(.auth-split):not(.portal-signed-in),
html.auth-is-signup:not(.auth-split):not(.portal-signed-in) body {
  background: #0b0b0b;
}

.auth-pane-login,
html.auth-is-login .auth-screen {
  --auth-bg: #f4f4f4;
  --auth-ink: #111111;
  --auth-muted: #8a8a8a;
  --auth-field-bg: #ffffff;
  --auth-field-ink: #111111;
  --auth-field-border: #e4e4e4;
  --auth-btn-bg: #2a2a2a;
  --auth-btn-ink: #ffffff;
  --auth-icon: #9b9b9b;
}

.auth-pane-signup,
html.auth-is-signup:not(.auth-split) .auth-screen {
  --auth-bg: #0b0b0b;
  --auth-ink: #ffffff;
  --auth-muted: #8d8d8d;
  --auth-field-bg: #ffffff;
  --auth-field-ink: #111111;
  --auth-field-border: #ffffff;
  --auth-btn-bg: #2a2a2a;
  --auth-btn-ink: #ffffff;
  --auth-icon: #9b9b9b;
}

.auth-screen:not(.hidden) {
  background: var(--auth-bg, #f4f4f4) !important;
  color: var(--auth-ink, #111);
  overflow-x: hidden;
}

.auth-pane {
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  align-content: safe center;
  min-width: 0;
  min-height: 100dvh;
  max-width: 100%;
  padding: 32px 24px max(32px, env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overflow-y: auto;
}

.auth-pane-login {
  background: #f4f4f4;
  color: #111111;
}

.auth-pane-signup {
  background: #0b0b0b;
  color: #ffffff;
}

.auth-screen .auth-card,
.auth-screen .login-card {
  box-sizing: border-box;
  width: min(300px, 100%);
  max-width: 100%;
  min-width: min(300px, 100%);
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  display: block;
  overflow-x: hidden;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.auth-screen .auth-brand-block {
  text-align: center;
  margin: 0 0 56px;
  padding: 0;
  background: transparent;
  border: 0;
}

.auth-screen .auth-wordmark {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  font-family: "Syne", "DM Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: var(--auth-ink);
}

.auth-screen .auth-brand-block .auth-product {
  display: block;
  margin: 12px 0 0;
  max-width: 100%;
  overflow: visible;
  font-family: "Syne", "DM Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-indent: 0;
  text-transform: none;
  color: var(--auth-ink);
}

.auth-screen .auth-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  order: 8;
}

.auth-screen .auth-tabs .tab-btn {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--auth-muted) !important;
  box-shadow: none !important;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
}

.auth-screen .auth-tabs .tab-btn.active {
  display: none;
}

.auth-screen .auth-form:not(.hidden) {
  display: block;
}

.auth-screen .auth-card label,
.auth-screen .auth-form label {
  color: var(--auth-field-ink) !important;
  font-weight: 400;
}

.auth-screen .auth-field {
  position: relative;
  display: block;
  margin: 0 0 10px;
}

.auth-screen .auth-field::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 18px;
  width: 16px;
  height: 16px;
  background-color: var(--auth-icon);
  -webkit-mask: var(--auth-field-icon, var(--auth-icon-generic)) center / contain no-repeat;
  mask: var(--auth-field-icon, var(--auth-icon-generic)) center / contain no-repeat;
  pointer-events: none;
  z-index: 1;
}

.auth-screen .auth-field > input,
.auth-screen .auth-field > select,
.auth-screen .auth-card input,
.auth-screen .auth-form input,
.auth-screen .auth-form textarea {
  width: 100%;
  margin-top: 0 !important;
  height: 52px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--auth-field-border) !important;
  border-radius: 2px !important;
  background: var(--auth-field-bg) !important;
  color: var(--auth-field-ink) !important;
  font-size: 0.92rem;
  font-weight: 400;
  box-shadow: none !important;
}

.auth-screen .auth-field > input::placeholder,
.auth-screen .auth-form input::placeholder {
  color: #b0b0b0;
  opacity: 1;
}

.auth-screen .auth-field .auth-helper {
  margin: 6px 2px 0;
  color: var(--auth-muted);
}

:root {
  --auth-icon-generic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='12' cy='8' r='3.3'/%3E%3Cpath d='M5 19.2c0-3.3 3.1-5.6 7-5.6s7 2.3 7 5.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --auth-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='3.2' y='5.4' width='17.6' height='13.2' rx='1'/%3E%3Cpath d='M4 7 12 13l8-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --auth-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='5' y='11' width='14' height='9.2' rx='1'/%3E%3Cpath d='M8 11V8.2a4 4 0 0 1 8 0V11' stroke-linecap='round'/%3E%3C/svg%3E");
  --auth-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M6.2 3.8h3l1.2 3.6-2 1.2a12 12 0 0 0 6.2 6.2l1.2-2 3.6 1.2v3c0 .8-.7 1.4-1.5 1.3C9.4 17.8 6.2 14.6 5 7.3c-.1-.8.5-1.5 1.2-1.5Z' stroke-linejoin='round'/%3E%3C/svg%3E");
  --auth-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='3.6' y='5.2' width='16.8' height='15' rx='1'/%3E%3Cpath d='M8 3.2v4M16 3.2v4M3.8 10h16.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --auth-icon-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='4' y='9' width='16' height='10.4' rx='1'/%3E%3Cpath d='M7.6 9V6.6A4.4 4.4 0 0 1 16.4 6.6V9' stroke-linecap='round'/%3E%3C/svg%3E");
  --auth-icon-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='5' y='3.4' width='14' height='17.2' rx='1'/%3E%3Cpath d='M8.6 8h1.8M13.6 8h1.8M8.6 12h1.8M13.6 12h1.8M8.6 16h1.8M13.6 16h1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --auth-icon-car: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M4.4 15.2 6 9.8a2.4 2.4 0 0 1 2.3-1.7h7.4a2.4 2.4 0 0 1 2.3 1.7l1.6 5.4' stroke-linejoin='round'/%3E%3Crect x='3.2' y='14.8' width='17.6' height='5.4' rx='1'/%3E%3C/svg%3E");
}

.auth-screen .auth-field:has(input[type="email"]) { --auth-field-icon: var(--auth-icon-mail); }
.auth-screen .auth-field:has(input[type="password"]) { --auth-field-icon: var(--auth-icon-lock); }
.auth-screen .auth-field:has(input[type="tel"]) { --auth-field-icon: var(--auth-icon-phone); }
.auth-screen .auth-field:has(input[type="date"]) { --auth-field-icon: var(--auth-icon-calendar); }
.auth-screen .auth-field:has(input.twofa-code-input) { --auth-field-icon: var(--auth-icon-code); }
.auth-screen .auth-field:has(input#signup-name) { --auth-field-icon: var(--auth-icon-building); }
.auth-screen .auth-field:has(input[id^="signup-vehicle"]) { --auth-field-icon: var(--auth-icon-car); }

.auth-screen .primary-btn,
.auth-screen .auth-form .primary-btn,
.auth-screen button.primary-btn {
  display: block;
  width: 100%;
  height: 52px;
  margin: 6px 0 14px;
  background: var(--auth-btn-bg) !important;
  color: var(--auth-btn-ink) !important;
  border: 0 !important;
  border-radius: 2px !important;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: none !important;
}

.auth-screen .primary-btn + .primary-btn {
  margin-top: 0;
}

.auth-screen #login-password-panel .auth-helper,
.auth-screen .auth-form > .auth-helper {
  text-align: center;
  margin: 0 0 10px;
}

.auth-screen .auth-link,
.auth-screen .auth-helper .auth-link {
  color: var(--auth-muted) !important;
  font-size: 0.78rem;
  font-weight: 400;
  background: transparent;
  border: 0;
}

.auth-screen .auth-divider,
.auth-screen .account-type-hint,
.auth-screen #signup-person-name-hint {
  display: none;
}

.auth-screen .account-type-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

html.portal-dashboard .auth-screen #signup-entity-picker.auth-entity-toggle,
html.portal-dashboard .auth-screen #signup-entity-picker.account-type-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  height: 36px;
  min-height: 36px;
  margin: 0 0 10px;
  padding: 2px;
  background: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  box-shadow: none;
}

html.portal-dashboard .auth-screen #signup-entity-picker .auth-entity-toggle-btn,
html.portal-dashboard .auth-screen #signup-entity-picker .account-type-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 6px;
  background: transparent !important;
  color: #8d8d8d !important;
  border: 0 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap !important;
}

html.portal-dashboard .auth-screen #signup-entity-picker .auth-entity-toggle-btn.active,
html.portal-dashboard .auth-screen #signup-entity-picker .account-type-btn.active {
  background: #2a2a2a !important;
  color: #ffffff !important;
  border: 0 !important;
}

.auth-screen #signup-form {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.auth-screen .signup-entity-fields {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

html.auth-entity-sole .auth-screen .signup-entity-fields #signup-individual-fields {
  order: -1;
}

.auth-screen .signup-individual-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin: 0 0 10px;
}

.auth-screen .signup-individual-fields .auth-field {
  margin: 0;
}

html.portal-lane-personal #signup-kind-picker,
html.portal-lane-personal #signup-kind-hint,
html.portal-lane-personal #signup-entity-picker,
html.portal-lane-personal #signup-entity-hint,
html.portal-lane-personal #signup-name-label,
html.portal-lane-personal #signup-person-name-hint,
html.portal-lane-business #signup-kind-picker,
html.portal-lane-business #signup-kind-hint,
html.portal-lane-business #signup-dob-field {
  display: none !important;
}

html.portal-lane-personal #signup-dob-field {
  display: block !important;
}

.auth-screen .account-type-btn {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 8px 4px;
  background: transparent !important;
  color: var(--auth-muted) !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: normal !important;
  text-align: center;
}

.auth-screen .account-type-btn.active {
  color: var(--auth-ink) !important;
  border-bottom-color: var(--auth-ink) !important;
}

.auth-screen .auth-form.auth-is-busy .primary-btn[type="submit"] {
  opacity: 0.62;
  pointer-events: none;
}

.auth-screen .error-text {
  text-align: center;
  order: 9;
}

.auth-screen #auth-error,
.auth-screen .auth-error-text {
  order: 9;
}

html.auth-is-login .auth-pane-signup,
html.auth-is-signup .auth-pane-login,
html.auth-signup-locked .auth-pane-signup {
  display: none;
}

@media (min-width: 960px) {
  .auth-screen:not(.hidden) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: stretch;
    padding: 0;
    overflow-x: hidden;
  }

  html.auth-is-login .auth-screen:not(.hidden) {
    background: #f4f4f4 !important;
  }

  html.auth-is-signup .auth-screen:not(.hidden) {
    background: #0b0b0b !important;
  }

  .auth-screen .auth-tabs {
    display: none;
  }
}