* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background: #fff;
}

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.page-enter body,
.page-enter .phone-shell {
  opacity: 0;
}

.page-enter.page-enter-active body,
.page-enter.page-enter-active .phone-shell {
  opacity: 1;
  transition: opacity .18s ease;
}

button,
input,
a {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:active,
a:active,
.is-pressing {
  transform: scale(.98);
  transition: transform .12s ease, opacity .12s ease;
}

.phone-shell {
  position: relative;
  width: 100vw;
  max-width: 540px;
  min-height: 100vh;
  min-height: max(100svh, calc(var(--shell-w) * 2.16));
  overflow-x: hidden;
  overflow-y: auto;
  color: #111;
  background: #408ddc url("../background.png") center top / 100% 100% no-repeat;
  --shell-w: min(100vw, 540px);
}

.language-btn {
  position: absolute;
  top: calc(var(--shell-w) * 0.0523077);
  right: calc(var(--shell-w) * 0.0461538);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--shell-w) * 0.0092308);
  width: calc(var(--shell-w) * 0.2030769);
  height: calc(var(--shell-w) * 0.0769231);
  border-radius: calc(var(--shell-w) * 0.0153846);
  color: #343434;
  background: #f6f7fb;
  font-size: calc(var(--shell-w) * 0.0369231);
  line-height: 1;
}

.language-btn svg {
  width: calc(var(--shell-w) * 0.04);
  height: calc(var(--shell-w) * 0.04);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.language-layer {
  position: fixed;
  inset: 0;
  z-index: 160;
  pointer-events: none;
}

.language-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .66);
  opacity: 0;
  transition: opacity .18s ease;
}

.language-sheet {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  max-width: 720px;
  max-height: min(64vh, 520px);
  overflow-y: auto;
  padding: 10px 16px calc(9px + env(safe-area-inset-bottom));
  background: #f8f9fb;
  transform: translate(-50%, 100%);
  transition: transform .22s ease;
}

.language-layer.open {
  pointer-events: auto;
}

.language-layer.open .language-backdrop {
  opacity: 1;
}

.language-layer.open .language-sheet {
  transform: translate(-50%, 0);
}

.language-search {
  display: flex;
  align-items: center;
  height: 39px;
  margin-bottom: 11px;
  padding: 0 13px;
  border: 1px solid #68778d;
  border-radius: 10px;
  background: #fff;
}

.language-search svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-right: 9px;
  fill: none;
  stroke: #637287;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.language-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #12204a;
  font-size: 15px;
}

.language-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.language-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  height: 39px;
  padding: 0 11px;
  border-radius: 10px;
  color: #8490a0;
  background: #eef0f3;
  font-size: 15px;
  line-height: 1;
  text-align: left;
}

.language-option span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.language-option.active {
  color: #06113d;
}

.language-check {
  display: none;
  flex: 0 0 auto;
  margin-left: 8px;
  color: #06113d;
  font-size: 18px;
}

.language-option.active .language-check {
  display: block;
}

.brand {
  position: absolute;
  top: calc(var(--shell-w) * 0.1815385);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-card {
  width: calc(var(--shell-w) * 0.28);
  height: calc(var(--shell-w) * 0.28);
  overflow: hidden;
  border-radius: calc(var(--shell-w) * 0.0276923);
  background: #fff;
}

.logo-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-name {
  margin-top: calc(var(--shell-w) * 0.0307692);
  color: #333;
  font-size: calc(var(--shell-w) * 0.0584615);
  font-weight: 400;
  line-height: calc(var(--shell-w) * 0.0738462);
  text-align: center;
}

.login-tabs {
  position: absolute;
  top: calc(var(--shell-w) * 0.7292308);
  left: calc(var(--shell-w) * 0.1169231);
  display: flex;
  width: calc(var(--shell-w) * 0.7661538);
  height: calc(var(--shell-w) * 0.1169231);
  padding: 0;
  border-radius: calc(var(--shell-w) * 0.0615385);
  background: #f6f6f7;
  box-shadow: 0 4px 9px rgba(15, 37, 78, 0.22);
}

.tab-btn {
  width: 50%;
  height: 100%;
  border-radius: calc(var(--shell-w) * 0.0615385);
  color: #77767c;
  background: transparent;
  font-size: calc(var(--shell-w) * 0.0430769);
  font-weight: 400;
}

.tab-btn.active {
  color: #fff;
  background: #07174e;
  box-shadow: 0 4px 8px rgba(5, 18, 61, 0.38);
}

.login-form {
  position: absolute;
  top: calc(var(--shell-w) * 0.9076923);
  left: calc(var(--shell-w) * 0.12);
  width: calc(var(--shell-w) * 0.7630769);
}

.input-pill {
  display: flex;
  align-items: center;
  width: calc(var(--shell-w) * 0.7630769);
  height: calc(var(--shell-w) * 0.1353846);
  margin-bottom: calc(var(--shell-w) * 0.0646154);
  padding: 0 calc(var(--shell-w) * 0.0338462);
  border: 1px solid #1d1d1d;
  border-radius: calc(var(--shell-w) * 0.0707692);
  background: #f8f8fa;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.input-pill > svg {
  flex: 0 0 auto;
  width: calc(var(--shell-w) * 0.0523077);
  height: calc(var(--shell-w) * 0.0523077);
  margin-right: calc(var(--shell-w) * 0.0307692);
  fill: none;
  stroke: #5e6167;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.input-pill input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #3e4148;
  background: transparent;
  font-size: calc(var(--shell-w) * 0.0492308);
}

.input-pill input::placeholder {
  color: #777982;
  opacity: 1;
}

.password-pill {
  margin-bottom: calc(var(--shell-w) * 0.1046154);
}

.eye-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: calc(var(--shell-w) * 0.0830769);
  height: calc(var(--shell-w) * 0.0830769);
  margin-right: calc(var(--shell-w) * -0.0092308);
  color: #0b0b0b;
  background: transparent;
}

.eye-btn svg {
  grid-area: 1 / 1;
  width: calc(var(--shell-w) * 0.0646154);
  height: calc(var(--shell-w) * 0.0646154);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eye-on,
.show-password .eye-off {
  display: none;
}

.show-password .eye-on {
  display: block;
}

.sign-in-btn {
  width: calc(var(--shell-w) * 0.7630769);
  height: calc(var(--shell-w) * 0.1415385);
  border-radius: calc(var(--shell-w) * 0.0769231);
  color: #000;
  background: linear-gradient(180deg, #d0e22c 0%, #f6d11b 52%, #ffc030 100%);
  box-shadow: 0 8px 14px rgba(92, 134, 34, 0.2);
  font-size: calc(var(--shell-w) * 0.0430769);
  font-weight: 700;
}

.secondary-actions {
  position: absolute;
  top: calc(var(--shell-w) * 1.5507692);
  left: calc(var(--shell-w) * 0.12);
  width: calc(var(--shell-w) * 0.7630769);
}

.outline-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--shell-w) * 0.7630769);
  height: calc(var(--shell-w) * 0.1384615);
  margin-bottom: calc(var(--shell-w) * 0.0584615);
  border: 1px solid #ffc200;
  border-radius: calc(var(--shell-w) * 0.0738462);
  color: #ffc42b;
  background: rgba(14, 72, 123, 0.28);
  font-size: calc(var(--shell-w) * 0.0646154);
  font-weight: 400;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.toast {
  position: absolute;
  left: 50%;
  bottom: 24px;
  max-width: 230px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.back-btn {
  position: absolute;
  top: calc(var(--shell-w) * 0.0523077);
  left: calc(var(--shell-w) * 0.0584615);
  z-index: 2;
  display: grid;
  place-items: center;
  width: calc(var(--shell-w) * 0.08);
  height: calc(var(--shell-w) * 0.08);
  border-radius: 50%;
  color: #fff;
  background: #07174e;
  text-decoration: none;
}

.back-btn svg {
  width: calc(var(--shell-w) * 0.0523077);
  height: calc(var(--shell-w) * 0.0523077);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.register-shell .login-tabs {
  top: calc(var(--shell-w) * 0.7292308);
}

.register-shell .tab-btn {
  font-size: calc(var(--shell-w) * 0.0384615);
}

.register-shell .login-form {
  top: calc(var(--shell-w) * 0.9076923);
}

.register-form .input-pill,
.register-form .register-password {
  margin-bottom: calc(var(--shell-w) * 0.0646154);
}

.register-form .invite-pill {
  margin-bottom: calc(var(--shell-w) * 0.0830769);
}

.register-actions {
  top: calc(var(--shell-w) * 1.9215385);
}

.secondary-actions a.outline-btn {
  text-decoration: none;
}