/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[13].use[5]!./components/phone-auth/styles.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.phone-auth,
html.intelligent-picture-light,
html.intelligent-picture-dark {
  --creation-canvas: #fcfbf8;
  --creation-surface: #ffffff;
  --creation-subtle: #f6f4ef;
  --creation-hover: #efede7;
  --creation-line: #e5e1d8;
  --creation-divider: rgba(37, 35, 31, .07);
  --creation-outline: rgba(37, 35, 31, .10);
  --creation-text: #25231f;
  --creation-muted: #706b62;
  --creation-brand: #df7f08;
  --creation-brand-hover: #cb7106;
  --creation-brand-ink: #a36506;
  --creation-brand-icon: var(--creation-brand);
  --creation-on-brand: #2b1d0b;
  --creation-action: #1c1c1c;
  --creation-action-hover: #35332f;
  --creation-action-text: #ffffff;
  --creation-action-icon: var(--creation-brand);
  --creation-selection: #fff9ef;
  --creation-selection-border: #ecd4a8;
  --creation-icon-tint: #fff0d4;
  --creation-control-text: #5c564d;
  --creation-control-icon: #918574;
  --creation-control-hover-border: #dacbb3;
  --creation-control-font-size: 14px;
  --creation-control-line-height: 20px;
  --creation-scrollbar-thumb: #c4c4c4;
  --creation-scrollbar-hover: #a6a6a6;
  --creation-focus: #c28318;
  --creation-disabled: #efede7;
  --creation-disabled-text: #8b857b;
  --creation-shadow: 0 8px 28px rgba(37, 35, 31, .055);
  --creation-menu-shadow: 0 12px 32px rgba(37, 35, 31, .13);
}

html.intelligent-picture-light {
  --creation-canvas: #f7f6f3;
  --creation-sidebar: #f1efea;
}

html.intelligent-picture-dark {
  --creation-canvas: #1b1a18;
  --creation-surface: #262420;
  --creation-subtle: #302d27;
  --creation-hover: #3a362e;
  --creation-line: #484238;
  --creation-divider: rgba(244, 240, 232, .08);
  --creation-outline: rgba(244, 240, 232, .12);
  --creation-text: #f4f0e8;
  --creation-muted: #bdb5a8;
  --creation-brand-hover: #f2911c;
  --creation-brand-ink: #f0b460;
  --creation-brand-icon: #f0b460;
  --creation-selection: #362c1e;
  --creation-selection-border: #73562d;
  --creation-icon-tint: #423320;
  --creation-control-text: #d9d1c4;
  --creation-control-icon: #b4a58e;
  --creation-control-hover-border: #6a5b43;
  --creation-scrollbar-thumb: #626262;
  --creation-scrollbar-hover: #818181;
  --creation-focus: #f0b460;
  --creation-disabled: #38342d;
  --creation-disabled-text: #a79e90;
  --creation-shadow: 0 8px 28px rgba(0, 0, 0, .16);
  --creation-menu-shadow: 0 12px 32px rgba(0, 0, 0, .3);
}

.phone-auth {
  --auth-canvas: #fdfbf8;
  --auth-panel: #ffffff;
  --auth-frame-line: #edeae5;
  --auth-story: #f7f7f5;
  --auth-input-surface: #f8f8f8;
  --auth-input-line: #e6e6e6;
  --auth-input-hover-line: #c9c7c2;
  --auth-tabs-surface: #fdfdfc;
  --auth-tab-selected: color-mix(in srgb, var(--creation-brand) 7%, #ffffff);
  --auth-tab-selected-line: color-mix(in srgb, var(--creation-brand) 20%, #ffffff);
  --auth-brand-text: color-mix(in srgb, var(--creation-brand) 74%, #000000);
  --auth-brand-text-hover: color-mix(in srgb, var(--creation-brand) 66%, #000000);
  --auth-hover: #eeeeee;
  --auth-focus: #94948f;
  --auth-error: #a43d2d;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 48px;
  background: var(--auth-canvas);
  background-image: url("/images/phone-auth/auth-waves.svg");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--creation-text);
  color-scheme: light;
  font-family: var(--font-geist-sans), "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.phone-auth ::-moz-selection {
  background: var(--creation-selection-border);
  color: var(--creation-text);
}
.phone-auth ::selection {
  background: var(--creation-selection-border);
  color: var(--creation-text);
}
.phone-auth button, .phone-auth input {
  font-family: inherit;
}
.phone-auth button {
  cursor: pointer;
  transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}
.phone-auth button:disabled {
  cursor: not-allowed;
}
.phone-auth button:focus-visible, .phone-auth a:focus-visible {
  outline: 2px solid var(--auth-focus) !important;
  outline-offset: 4px;
}
.phone-auth__shell {
  width: 100%;
  max-width: 1344px;
}
.phone-auth__brand {
  display: flex;
  align-items: center;
  min-height: 36px;
  margin-bottom: 24px;
  padding: 0 8px;
}
.phone-auth__logo {
  display: inline-flex;
  align-items: baseline;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--creation-text);
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: -0.7px;
}
.phone-auth__logo span {
  color: var(--creation-brand);
}
.phone-auth__frame {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
  min-height: clamp(640px, 100dvh - 180px, 700px);
  overflow: hidden;
  border: 1px solid var(--auth-frame-line);
  border-radius: 24px;
  background: var(--auth-panel);
  box-shadow: 0 20px 56px rgba(69, 48, 25, 0.065);
}
.phone-auth__story {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--auth-story);
}
.phone-auth__visual {
  position: absolute;
  inset: 0;
}
.phone-auth__visual img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.phone-auth__headline {
  position: relative;
  z-index: 1;
  padding: 72px 64px;
  pointer-events: none;
}
.phone-auth__headline h2 {
  margin: 0;
  font-size: clamp(36px, 3.1vw, 46px);
  line-height: 1.35;
  letter-spacing: -0.8px;
  font-weight: 500;
}
.phone-auth__headline p {
  margin-top: 20px;
  color: var(--creation-text);
  font-size: 17px;
  line-height: 1.8;
}
.phone-auth__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 48px 56px;
  background: var(--auth-panel);
}
.phone-auth__form-wrap {
  width: 100%;
  max-width: 410px;
}
.phone-auth__heading {
  margin-bottom: 32px;
}
.phone-auth__heading:has(+ .phone-auth__tabs) {
  margin-bottom: 24px;
}
.phone-auth__heading h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.5px;
}
.phone-auth__heading p {
  margin-top: 10px;
  color: var(--creation-muted);
  font-size: 15px;
}
.phone-auth__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 28px;
  padding: 0;
  border: 1px solid var(--auth-input-line);
  border-radius: 10px;
  background: var(--auth-tabs-surface);
}
.phone-auth__tabs button {
  min-width: 0;
  min-height: 50px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  color: var(--creation-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}
.phone-auth__tabs button[aria-selected=true] {
  background: var(--auth-tab-selected);
  border-color: var(--auth-tab-selected-line);
}
.phone-auth__tabs button:hover:not([aria-selected=true]) {
  background: var(--auth-hover);
  color: var(--creation-text);
}
.phone-auth__tabs button:focus-visible {
  outline-offset: -2px;
}
.phone-auth form > label {
  display: block;
  margin: 20px 0 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}
.phone-auth form > label:first-child {
  margin-top: 0;
}
.phone-auth__phone, .phone-auth__code, .phone-auth__password {
  display: flex;
  align-items: center;
  min-height: 54px;
  border: 1px solid var(--auth-input-line);
  border-radius: 10px;
  background: var(--auth-input-surface);
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.phone-auth__phone:hover, .phone-auth__code:hover, .phone-auth__password:hover {
  border-color: var(--auth-input-hover-line);
}
.phone-auth__phone:focus-within, .phone-auth__code:focus-within, .phone-auth__password:focus-within {
  background: var(--creation-surface);
  border-color: var(--auth-focus);
  outline: 0 !important;
  box-shadow: none;
}
.phone-auth__phone input, .phone-auth__code input, .phone-auth__password input {
  width: 100%;
  min-width: 0;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: var(--creation-text);
  caret-color: var(--creation-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  box-shadow: none;
}
.phone-auth__phone input::-moz-placeholder, .phone-auth__code input::-moz-placeholder, .phone-auth__password input::-moz-placeholder {
  color: var(--creation-muted);
  opacity: 1;
}
.phone-auth__phone input::placeholder, .phone-auth__code input::placeholder, .phone-auth__password input::placeholder {
  color: var(--creation-muted);
  opacity: 1;
}
.phone-auth__phone input:-webkit-autofill, .phone-auth__code input:-webkit-autofill, .phone-auth__password input:-webkit-autofill {
  -webkit-text-fill-color: var(--creation-text);
  box-shadow: 0 0 0 1000px var(--auth-input-surface) inset;
}
.phone-auth__phone input:-webkit-autofill:focus, .phone-auth__code input:-webkit-autofill:focus, .phone-auth__password input:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px var(--creation-surface) inset;
}
.phone-auth__phone button, .phone-auth__code button, .phone-auth__password button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  margin-right: 4px;
  padding: 10px;
  border-radius: 5px;
  color: var(--creation-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
}
.phone-auth__phone button:hover:not(:disabled), .phone-auth__code button:hover:not(:disabled), .phone-auth__password button:hover:not(:disabled) {
  background: var(--auth-hover);
}
.phone-auth__phone button:disabled, .phone-auth__code button:disabled, .phone-auth__password button:disabled {
  color: var(--creation-muted);
}
.phone-auth__phone button:focus-visible, .phone-auth__code button:focus-visible, .phone-auth__password button:focus-visible {
  outline-offset: -3px;
}
.phone-auth__code > button {
  color: var(--auth-brand-text);
  font-size: 14px;
}
.phone-auth__code > button:hover:not(:disabled) {
  color: var(--auth-brand-text-hover);
  background: var(--auth-tab-selected);
}
.phone-auth__password-toggle {
  color: var(--creation-muted) !important;
}
.phone-auth__password-toggle:hover, .phone-auth__password-toggle[aria-pressed=true] {
  color: var(--creation-text) !important;
}
.phone-auth__password-toggle svg {
  flex-shrink: 0;
}
.phone-auth__phone > span {
  padding: 0 16px;
  border-right: 1px solid var(--auth-input-line);
  color: var(--creation-muted);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}
.phone-auth__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  margin-top: 20px;
  padding: 14px 20px;
  border-radius: 8px;
  background: var(--creation-action);
  color: var(--creation-action-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}
.phone-auth__submit svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--creation-action-icon);
}
.phone-auth__submit:hover:not(:disabled) {
  background: var(--creation-action-hover);
}
.phone-auth__submit:active:not(:disabled) {
  background: var(--creation-text);
}
.phone-auth__submit:disabled {
  background: var(--creation-disabled);
  color: var(--creation-muted);
}
.phone-auth__submit:disabled svg {
  color: currentColor;
}
.phone-auth__error {
  margin-top: 12px;
  color: var(--auth-error);
  font-size: 13px;
  line-height: 1.6;
}
.phone-auth__switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--creation-muted);
  font-size: 14px;
}
.phone-auth__switch a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--auth-brand-text);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.phone-auth__switch a:hover {
  color: var(--auth-brand-text-hover);
  text-decoration-thickness: 2px;
}

@media (min-width: 801px) and (max-width: 1150px) {
  .phone-auth {
    padding: 32px;
  }
  .phone-auth__frame {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .phone-auth__headline {
    padding: 48px 32px;
  }
  .phone-auth__headline h2 {
    font-size: 36px;
  }
  .phone-auth__headline p {
    max-width: 19em;
    font-size: 15px;
  }
  .phone-auth__panel {
    padding: 36px 28px;
  }
}
@media (max-width: 800px) {
  .phone-auth {
    align-items: start;
    padding: 32px 16px;
    background-size: auto 100%;
  }
  .phone-auth__shell {
    max-width: 440px;
  }
  .phone-auth__logo {
    font-size: 24px;
    line-height: 32px;
  }
  .phone-auth__brand {
    margin-bottom: 24px;
    padding: 0 24px;
  }
  .phone-auth__frame {
    display: block;
    min-height: 0;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(69, 48, 25, 0.04);
  }
  .phone-auth__story {
    display: none;
  }
  .phone-auth__panel {
    padding: 32px 24px;
  }
  .phone-auth__form-wrap {
    max-width: none;
  }
  .phone-auth__heading {
    margin-bottom: 28px;
  }
  .phone-auth__heading h1 {
    font-size: 28px;
  }
  .phone-auth__heading p {
    font-size: 14px;
  }
  .phone-auth__tabs {
    margin-bottom: 24px;
  }
  .phone-auth__tabs button {
    min-height: 44px;
    padding: 9px 8px;
  }
}
@media (max-width: 360px) {
  .phone-auth__brand {
    padding: 0 18px;
  }
  .phone-auth__panel {
    padding: 28px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .phone-auth button, .phone-auth__phone, .phone-auth__code, .phone-auth__password {
    transition: none;
  }
}