@charset "UTF-8";
/* figma链接：https://www.figma.com/design/TsbiNbOIh0vhJVX5TnRkVb/%E5%8F%AF%E7%81%B5%E5%93%81%E7%89%8C%E5%8D%87%E7%BA%A7---web%E7%AB%AFUI%E8%A7%84%E8%8C%83?node-id=1-3&p=f&t=ZNVaBYKP49nZs8DO-0 */
/* 默认暗黑模式 */
:root {
  /* 主题色 */
  --color-theme-1: #fff;
  --color-theme-2: #74ff52ff;
  --color-theme-3: #74ff521f;
  --color-theme-4: #74ff522e;
  --color-theme-hover: #9fff75ff;
  /* 文字颜色 */
  --color-text-1: #f9fbfcff;
  --color-text-2-light: #ced2d6ff;
  --color-text-2: #b6bbc2ff;
  --color-text-3-light: #8a9099ff;
  --color-text-3: #777e85ff;
  --color-text-4: #595d61ff;
  --color-text-5: #000000ff;
  /* 背景颜色 */
  --color-bg-page: #0a0a0a;
  --color-bg-primary: #111214;
  --color-bg-secondary: #1a1c1f;
  --color-bg-tertiary: #1f2124ff;
  --color-bg-popover: #2d2f33ff;
  --color-bg-popover-1: #383a3dff;
  --color-bg-dialog: #1e1f21ff;
  --color-bg-contrary: #ffffffff;
  --color-bg-deepseek: #5fe03fff;
  /* 边框颜色 */
  --color-border-frame: #1a1b1fff;
  --color-border-container: #242629ff;
  --color-border-component: #3a3c3dff;
  --color-border-hover: #76787aff;
  --color-border-focused: #e1e6ebff;
  --color-border-line: #3c4147ff;
  /* 填充颜色 */
  --color-fill-success: #2feb48;
  --color-fill-warning: #faca5aff;
  --color-fill-error: #f04b22ff;
  --color-fill-error-24: #f04b223d;
  --color-fill-error-8: #f04b2214;
  --color-fill-link: #5cbeffff;
  --color-fill-disabled: #ffffff0f;
  --color-fill-dark: #00000033;
  --color-fill-light: #ffffff0a;
  --color-fill-white: #ffffffff;
  --color-fill-black: #000000ff;
  --color-fill-black-1: #00000066;
  --color-fill-black-2: #000000cc;
  --color-fill-black-3: #000000a3;
  --color-fill-red: #e92a1bff;
  --color-fill-green: #00b831ff;
  --color-fill-o1-video: #572d43ff;
  --color-fill-o1-image: #334d25ff;
  --color-fill-o1-element: #2f4675ff;
  --color-fill-o1-voice: #6b3d27ff;
  /* 其他颜色 */
  --color-other-1: #ffffff14;
  --color-other-2: #ffffff1f;
  --color-other-3: #ffffff29;
  --color-other-4: #ffffff33;
  --color-other-5: #ffffff3d;
  --color-other-6: #00000052;
  --color-other-7: #0000007a;
  --color-other-8: #090a0a7a;
  --color-other-9: #ffffff7a;
  --color-other-10: #ffffff52;
  /* 渐变颜色 */
  --color-gradient-button: linear-gradient(148deg, #d3e2f0 0%, #fff 100%);
  --color-gradient-basic: linear-gradient(148deg, #abbbcc 0%, #ffffff 100%);
  --color-gradient-standard: linear-gradient(148deg, #e0d4bc 0%, #f0efeb 100%);
  --color-gradient-pro: linear-gradient(148deg, #c2deff 0%, #ebf6ff 100%);
  --color-gradient-premier: linear-gradient(148deg, #ceccff 0%, #ebecff 100%);
  --color-gradient-ultra: linear-gradient(148deg, #ffba6b 0%, #ffd685 40%, #fff5eb 100%);
  --color-gradient-hot: linear-gradient(90deg, #ff3300 0%, #ff2200 100%);
  --color-gradient-black: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.64) 100%);
  --color-gradient-black-revert: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.48) 100%);
  --color-gradient-container: linear-gradient(180deg, rgba(15, 15, 15, 0) 0%, #0f0f0f 100%);
  --color-gradient-standard-bg: linear-gradient(135deg, #332f2d 0%, #141413 100%);
  --color-gradient-pro-bg: linear-gradient(136deg, #2c333b 0%, #141414 101.27%);
  --color-gradient-premier-bg: linear-gradient(136deg, #3e3a49 0%, #212b37 32.75%, #1a1a1a 65.5%, #1a1a1a 102.34%);
  --color-gradient-ultra-bg: linear-gradient(
    136deg,
    #472f14 0%,
    #292115 12.28%,
    #14120e 49.12%,
    #141210 65.5%,
    #1f1a10 102.34%
  );
  --color-gradient-commercialization: linear-gradient(148deg, #ffe4ad 0%, #fff7eb 100%);
  --color-gradient-black-normal: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.48) 100%);
  --color-gradient-credits-bg: linear-gradient(135deg, #262e27 0%, #131413 100%);
  /* 投影 */
  --box-shadow-container: 0px 4px 40px 0px rgba(0, 0, 0, 0.4);
  --box-shadow-component: 0px 2px 16px 0px rgba(0, 0, 0, 0.24);
  --box-shadow-component-table-fixed-left: 10px 0px 10px -10px #00000066 inset;
  --box-shadow-component-table-fixed-right: -10px 0px 10px -10px #00000066 inset;
  /* chart */
  --color-chart-1: #f5c045;
  --color-chart-2: #48e05c;
  --color-chart-3: #8b61ff;
  --color-chart-4: #5fb2fa;
  --color-chart-5: #ff8edf;
  --color-chart-6: #fa7250;
  --color-chart-7: #1bf6fd;
  --color-chart-8: #a3476c;
  --color-chart-9: #f5459d;
  --color-chart-10: #b223c2;
}

/* 白天 */
.light {
  /* 主题色 */
  --color-theme-1: #000000ff;
  --color-theme-2: #0b8a1bff;
  --color-theme-3: #0b8a1b29;
  --color-theme-4: #0b8a1b2e;
  --color-theme-hover: #46b842ff;
  /* 文字颜色 */
  --color-text-1: #121314ff;
  --color-text-2: #56585cff;
  --color-text-3: #939699ff;
  --color-text-4: #bec0c2ff;
  --color-text-5: #ffffffff;
  /* 背景颜色 */
  --color-bg-page: #f7f8faff;
  --color-bg-primary: #f2f3f5ff;
  --color-bg-secondary: #ffffffff;
  --color-bg-tertiary: #ffffffff;
  --color-bg-popover: #ffffffff;
  --color-bg-popover-1: #ffffffff;
  --color-bg-dialog: #ffffffff;
  --color-bg-contrary: #000000ff;
  --color-fill-back-1: #00000066;
  --color-bg-deepseek: #54e031ff;
  /* 边框颜色 */
  --color-border-frame: #e6e7ebff;
  --color-border-container: #e3e4e5ff;
  --color-border-component: #c8caccff;
  --color-border-hover: #9da0a3ff;
  --color-border-focused: #4b4e52ff;
  --color-border-line: #c4c8ccff;
  /* 填充颜色 */
  --color-fill-success: #0ead38;
  --color-fill-warning: #eb9109ff;
  --color-fill-error: #c21711ff;
  --color-fill-link: #1c7cebff;
  --color-fill-disabled: #00000014;
  --color-fill-dark: #ffffff3d;
  --color-fill-light: #0000000a;
  --color-fill-white: #ffffffff;
  --color-fill-black: #000000ff;
  --color-fill-black-1: #00000066;
  --color-fill-black-2: #000000cc;
  --color-fill-black-3: #000000a3;
  --color-fill-red: #e92a1bff;
  --color-fill-error-24: #f04b223d;
  --color-fill-green: #00b831;
  /* 其他颜色 */
  --color-other-1: #09090a0a;
  --color-other-2: #09090a0f;
  --color-other-3: #09090a14;
  --color-other-4: #09090a1f;
  --color-other-5: #09090a24;
  --color-other-6: #ffffff52;
  --color-other-7: #ffffff7a;
  --color-other-8: #ffffffd1;
  --color-other-9: #ffffff7a;
  /* 渐变颜色 */
  --color-gradient-button: linear-gradient(148deg, #1c2129 0%, #101114 100%);
  --color-gradient-basic: linear-gradient(148deg, #565e66 0%, #8996a3 100%);
  --color-gradient-standard: linear-gradient(91deg, #523710 0%, #331f12 100%);
  --color-gradient-pro: linear-gradient(91deg, #102a52 0%, #122433 100%);
  --color-gradient-premier: linear-gradient(91deg, #2b1d52 0%, #252a47 100%);
  --color-gradient-ultra: linear-gradient(148deg, #ffbc70 0%, #ffd685 40%, #fff5eb 100%);
  --color-gradient-hot: linear-gradient(90deg, #f60 0%, #f40 100%);
  --color-gradient-black: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.64) 100%);
  --color-gradient-black-revert: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.48) 100%);
  --color-gradient-container: linear-gradient(180deg, rgba(239, 240, 242, 0) 0%, #eff0f2 100%);
  --color-gradient-standard-bg: linear-gradient(99deg, #f1eadc 2.49%, #f1ede1 24.04%, #eff0f2 100.46%);
  --color-gradient-pro-bg: linear-gradient(99deg, #def2f3 0%, #daeef4 32%, #eff0f2 100%);
  --color-gradient-premier-bg: linear-gradient(99deg, #e4ecf5 0%, #ecf2ff 32%, #efe6fb 56%, #dff1f6 100%);
  --color-gradient-ultra-bg: linear-gradient(
    136deg,
    #472f14 0%,
    #292115 12.28%,
    #14120e 49.12%,
    #141210 65.5%,
    #1f1a10 102.34%
  );
  --color-gradient-commercialization: linear-gradient(91deg, #523710 0%, #331f12 100%);
  /* 投影 */
  --box-shadow-container: 0px 4px 40px 0px rgba(0, 0, 0, 0.4);
  --box-shadow-component: 0px 2px 16px 0px rgba(0, 0, 0, 0.24);
  --box-shadow-component-table-fixed-left: 10px 0px 10px -10px #0000001f inset;
  --box-shadow-component-table-fixed-right: -10px 0px 10px -10px #0000001f inset;
  /* chart */
  --color-chart-1: #2261f5;
  --color-chart-2: #28c792;
  --color-chart-3: #fabf00;
  --color-chart-4: #f06d0a;
  --color-chart-5: #7b34eb;
  --color-chart-6: #09c5db;
  --color-chart-7: #7679a3;
  --color-chart-8: #8fc204;
  --color-chart-9: #f5459d;
  --color-chart-10: #b223c2;
}

@font-face {
  font-family: PP Editorial New Regular;
  src: url("https://s16-kling.klingai.com/kos/s101/nlav112918/kling-web-federation-core/PPEditorialNew-Regular-CHymeRq6.otf");
}.kling-toast-fade-enter-active[data-v-efb396c2] {
  transition: opacity 0.3s ease, transform 0.4s ease;
}
.kling-toast-fade-leave-active[data-v-efb396c2] {
  transition: opacity 0.3s ease, transform 0.4s ease;
}
.kling-toast-fade-enter-from[data-v-efb396c2],
.kling-toast-fade-leave-to[data-v-efb396c2] {
  opacity: 0;
  transform: translateY(-100%);
}
.kling-toast[data-v-efb396c2] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 24px;
  border-radius: 56px;
  background: var(--color-bg-popover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: all;
}
.kling-toast__icon[data-v-efb396c2] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-text-1);
}
.kling-toast__icon.icon-success[data-v-efb396c2] {
  color: var(--color-fill-success);
}
.kling-toast__icon.icon-error[data-v-efb396c2] {
  color: var(--color-fill-error);
}
.kling-toast__icon.icon-warning[data-v-efb396c2] {
  color: var(--color-fill-warning);
}
.kling-toast__icon.icon-info[data-v-efb396c2] {
  color: var(--color-text-1);
}
.kling-toast__content[data-v-efb396c2] {
  margin: 0 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  color: var(--color-text-1);
}
.kling-toast__close[data-v-efb396c2] {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-2);
  transition: color 0.2s;
}
.kling-toast__close[data-v-efb396c2]:hover {
  color: var(--color-text-1);
}
body.mobile .kling-toast {
  width: calc(100vw - 32px);
}.svg-icon[data-v-30a94e64] {
  display: inline-block;
  overflow: hidden;
}
.dialog-fullscreen-overlay[data-v-d44d878b] {
  position: fixed;
  inset: 0;
  background: var(--color-bg-page);
  display: flex;
  flex-direction: column;
}
.dialog-fullscreen-content[data-v-d44d878b] {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.back-icon[data-v-d44d878b] {
  position: absolute;
  z-index: 1;
  cursor: pointer;
  top: 32px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  color: var(--color-text-1);
  background-color: var(--color-other-1);
  transition: all 0.2s;
}
.back-icon[data-v-d44d878b]:hover {
  background-color: var(--color-other-2);
}
.back-icon.left[data-v-d44d878b] {
  left: 32px;
}
.back-icon.right[data-v-d44d878b] {
  right: 32px;
}

/* 移动端适配 */
@media (max-width: 768px) {
.back-icon[data-v-d44d878b] {
    top: 16px;
}
.back-icon.left[data-v-d44d878b] {
    left: 16px;
}
.back-icon.right[data-v-d44d878b] {
    right: 16px;
}
}
.kling-tooltip[data-v-642282c3] {
  position: relative;
  display: inline-block;
  width: 100%;
}
.tooltip-content[data-v-642282c3] {
  position: absolute;
  padding: 6px 12px;
  background: var(--color-bg-popover, #2d2f33);
  color: var(--color-text-1, #f9fbfc);
  font-size: 14px;
  line-height: 24px;
  border-radius: 8px;
  word-break: break-all;
  width: max-content;
  white-space: normal;
}
.tooltip-content.top[data-v-642282c3]::before, .tooltip-content.top-start[data-v-642282c3]::before, .tooltip-content.top-end[data-v-642282c3]::before {
  bottom: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.tooltip-content.bottom[data-v-642282c3]::before, .tooltip-content.bottom-start[data-v-642282c3]::before, .tooltip-content.bottom-end[data-v-642282c3]::before {
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.tooltip-content.left[data-v-642282c3]::before {
  right: -12px;
  top: 0;
  bottom: 0;
  width: 12px;
}
.tooltip-content.right[data-v-642282c3]::before {
  left: -12px;
  top: 0;
  bottom: 0;
  width: 12px;
}
.tooltip-content:not(.is-teleported).top[data-v-642282c3] {
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
}
.tooltip-content:not(.is-teleported).bottom[data-v-642282c3] {
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
}
.tooltip-content:not(.is-teleported).left[data-v-642282c3] {
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
}
.tooltip-content:not(.is-teleported).right[data-v-642282c3] {
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
}
.tooltip-content:not(.is-teleported).top-start[data-v-642282c3] {
  bottom: calc(100% + 12px);
  left: 0;
}
.tooltip-content:not(.is-teleported).top-end[data-v-642282c3] {
  bottom: calc(100% + 12px);
  right: 0;
}
.tooltip-content:not(.is-teleported).bottom-start[data-v-642282c3] {
  top: calc(100% + 12px);
  left: 0;
}
.tooltip-content:not(.is-teleported).bottom-end[data-v-642282c3] {
  top: calc(100% + 12px);
  right: 0;
}
.tooltip-arrow[data-v-642282c3] {
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
}
.top .tooltip-arrow[data-v-642282c3], .top-start .tooltip-arrow[data-v-642282c3], .top-end .tooltip-arrow[data-v-642282c3] {
  bottom: -11px;
  border-top-color: var(--color-bg-popover, #2d2f33);
}
.bottom .tooltip-arrow[data-v-642282c3], .bottom-start .tooltip-arrow[data-v-642282c3], .bottom-end .tooltip-arrow[data-v-642282c3] {
  top: -11px;
  border-bottom-color: var(--color-bg-popover, #2d2f33);
}
.top .tooltip-arrow[data-v-642282c3], .bottom .tooltip-arrow[data-v-642282c3] {
  left: 50%;
  transform: translateX(-50%);
}
.top-start .tooltip-arrow[data-v-642282c3], .bottom-start .tooltip-arrow[data-v-642282c3] {
  left: 12px;
}
.top-end .tooltip-arrow[data-v-642282c3], .bottom-end .tooltip-arrow[data-v-642282c3] {
  right: 12px;
}
.left .tooltip-arrow[data-v-642282c3] {
  right: -11px;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--color-bg-popover, #2d2f33);
}
.right .tooltip-arrow[data-v-642282c3] {
  left: -11px;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--color-bg-popover, #2d2f33);
}
.tooltip-fade-enter-active[data-v-642282c3],
.tooltip-fade-leave-active[data-v-642282c3] {
  transition: opacity 0.2s;
}
.tooltip-fade-enter-from[data-v-642282c3],
.tooltip-fade-leave-to[data-v-642282c3] {
  opacity: 0;
}.content[data-v-9702d1cc] {
  width: 456px;
  min-height: 426px;
  color: var(--color-text-1);
  font-size: 14px;
}
.content h1[data-v-9702d1cc] {
  color: var(--color-text-1);
  line-height: normal;
  font-style: normal;
  font-size: 40px;
  font-weight: 500;
  text-align: center;
  font-family: PP Editorial New Regular;
}
.select-workspace p.select-workspace-notice[data-v-9702d1cc] {
  margin-top: 32px;
  font-size: 14px;
  line-height: 24px;
  text-align: left;
}
.select-workspace .workspaces[data-v-9702d1cc] {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.select-workspace .workspaces .workspace[data-v-9702d1cc] {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--color-border-component);
  padding: 12px 16px;
  gap: 12px;
}
.select-workspace .workspaces .workspace.disabled[data-v-9702d1cc] {
  opacity: 0.5;
  cursor: not-allowed;
}
.select-workspace .workspaces .workspace .avatar-wrapper[data-v-9702d1cc] {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  overflow: hidden;
}
.select-workspace .workspaces .workspace .avatar[data-v-9702d1cc] {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.select-workspace .workspaces .workspace .name[data-v-9702d1cc] {
  color: var(--color-text-1);
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.select-workspace .workspaces .workspace .workspace-tag[data-v-9702d1cc] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  padding: 0 6px 1px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-2, #b0b4b8);
  flex-shrink: 0;
  margin-left: auto;
}
.select-workspace .workspaces .workspace[data-v-9702d1cc]:hover:not(.disabled) {
  border: 1px solid var(--color-border-hover);
}
.select-workspace .workspaces .workspace .arrow[data-v-9702d1cc] {
  flex-shrink: 0;
}.kling-input[data-v-96fbae1e] {
  width: 100%;
  display: inline-flex;
  box-sizing: border-box;
}
.kling-input .kling-input__wrapper[data-v-96fbae1e] {
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  padding: 1px 11px;
  background: transparent;
  border: solid 1px var(--color-border-component);
  border-radius: 8px;
  transition: border-color 0.2s;
  box-sizing: border-box;
  height: 40px;
}
.kling-input .kling-input__wrapper[data-v-96fbae1e]:hover {
  border-color: var(--color-border-hover);
}
.kling-input.is-focused .kling-input__wrapper[data-v-96fbae1e] {
  border-color: var(--color-border-focused);
}
.kling-input.is-error .kling-input__wrapper[data-v-96fbae1e] {
  border-color: var(--color-fill-error);
}
.kling-input.is-disabled .kling-input__wrapper[data-v-96fbae1e] {
  background: var(--color-fill-disabled);
  border-color: var(--color-border-component);
  cursor: not-allowed;
}
.kling-input.is-disabled .kling-input__wrapper .kling-input__inner[data-v-96fbae1e] {
  color: var(--color-text-4);
  cursor: not-allowed;
}
.kling-input.is-disabled .kling-input__wrapper .kling-input__inner[data-v-96fbae1e]::placeholder {
  color: var(--color-text-3);
  -webkit-text-fill-color: var(--color-text-3);
}
.kling-input__inner[data-v-96fbae1e] {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.kling-input__inner[data-v-96fbae1e]::placeholder {
  color: var(--color-text-3);
}
.kling-input__prefix[data-v-96fbae1e] {
  display: inline-flex;
  align-items: center;
  margin-right: 17px;
  color: var(--color-text-1);
  white-space: nowrap;
  flex-shrink: 0;
}
.kling-input__prefix-inner[data-v-96fbae1e] {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.kling-input__prefix-inner[data-v-96fbae1e]::after {
  content: "";
  width: 1px;
  height: 18px;
  position: absolute;
  right: -9px;
  top: calc(50% - 9px);
  background: var(--color-text-3);
}
.kling-input__suffix[data-v-96fbae1e] {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  flex-shrink: 0;
  height: auto;
}
.kling-input__suffix-inner[data-v-96fbae1e] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kling-input__clear[data-v-96fbae1e],
.kling-input__password[data-v-96fbae1e] {
  cursor: pointer;
  color: var(--color-text-3);
  transition: color 0.2s;
}
.kling-input__clear[data-v-96fbae1e]:hover,
.kling-input__password[data-v-96fbae1e]:hover {
  color: var(--color-text-1);
}
.kling-input__count[data-v-96fbae1e] {
  font-size: 12px;
  color: var(--color-text-3);
  white-space: nowrap;
}.tabs-box[data-v-bd69c624] {
  position: relative;
  height: fit-content;
}
.tabs-box .tabs[data-v-bd69c624] {
  display: flex;
  gap: 24px;
  font-size: 14px;
  line-height: 24px;
}
.tabs-box .tabs .tab[data-v-bd69c624] {
  cursor: pointer;
  position: relative;
  color: var(--color-text-2);
}
.tabs-box .tabs .tab.active[data-v-bd69c624] {
  color: var(--color-theme-1);
  font-weight: 600;
}
.tabs-box .tabs .tab[data-v-bd69c624]:hover {
  color: var(--color-text-1);
}
.tabs-box .bar[data-v-bd69c624] {
  height: 3px;
  border-radius: 4px;
  width: var(--bar-width);
  position: absolute;
  left: var(--bar-left);
  transition: var(--bar-transition);
  margin-top: 5px;
  z-index: 2;
  background: var(--color-theme-1);
}
.tabs-box[data-v-bd69c624]:after {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  background: var(--color-border-container);
  bottom: -7px;
  z-index: 1;
}.content[data-v-ffde6bd7] {
  width: 456px;
  min-height: 426px;
  color: var(--color-text-1);
  font-size: 14px;
}
.content h1[data-v-ffde6bd7] {
  color: var(--color-text-1);
  line-height: normal;
  font-style: normal;
  font-size: 40px;
  font-weight: 500;
  text-align: center;
  font-family: PP Editorial New Regular;
}
.content p[data-v-ffde6bd7] {
  margin-top: 4px;
}
.select-account[data-v-ffde6bd7] {
  color: var(--color-text-1);
}
.select-account p.select-account-notice[data-v-ffde6bd7] {
  margin-top: 32px;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
}
.select-account .accounts[data-v-ffde6bd7] {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.select-account .accounts .account[data-v-ffde6bd7] {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--color-border-component);
  padding: 12px 16px;
  gap: 12px;
}
.select-account .accounts .account .avatar-wrapper[data-v-ffde6bd7] {
  width: 40px;
  height: 40px;
  overflow: hidden;
}
.select-account .accounts .account .avatar[data-v-ffde6bd7] {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.select-account .accounts .account .name[data-v-ffde6bd7] {
  color: var(--color-text-1);
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0%;
  flex-grow: 1;
}
.select-account .accounts .account[data-v-ffde6bd7]:hover {
  border: 1px solid var(--color-border-hover);
}.desc a[data-v-f511fd01] {
  color: var(--color-theme-2);
  text-decoration: none;
}
.desc a[data-v-f511fd01]:hover {
  text-decoration: underline;
}.scancode-container[data-v-ed3d846d] {
  margin-top: 38px;
}
.scancode-container .demo[data-v-ed3d846d] {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.scancode-container .qr[data-v-ed3d846d] {
  line-height: 0;
  background-color: black;
  border-radius: 4px;
  float: left;
  overflow: hidden;
}
.scancode-container .qr .wait-confirm[data-v-ed3d846d] {
  position: absolute;
  margin-top: -125px;
}
.scancode-container .qr .wait-confirm .back[data-v-ed3d846d] {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  width: 125px;
  height: 125px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.scancode-container .qr .wait-confirm .fore[data-v-ed3d846d] {
  position: absolute;
  font-size: 12px;
  width: 125px;
  height: 125px;
  text-align: center;
  padding-top: 64px;
  color: white;
}
.scancode-container .desc[data-v-ed3d846d] {
  text-align: center;
  margin-top: 24px;
  margin-bottom: 0;
}
.scancode-container .desc.notice[data-v-ed3d846d] {
  color: var(--color-text-3);
}
.scancode-container .desc b[data-v-ed3d846d] {
  font-weight: normal;
}.teaser[data-v-2b20488b] {
  width: 50%;
  height: 100%;
  aspect-ratio: 1;
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
}
.teaser .video[data-v-2b20488b] {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
}
/* KlingInput 的 suffix 高度 */
[data-v-71a36ad9] .kling-input__suffix {
  height: auto;
}

/* tel 样式 - prefix 分隔线 */
[data-v-71a36ad9] .tel .kling-input__prefix {
  margin-right: 17px;
}
[data-v-71a36ad9] .tel .kling-input__prefix-inner {
  color: var(--color-text-1);
  position: relative;
}
[data-v-71a36ad9] .tel .kling-input__prefix-inner::after {
  content: "";
  width: 1px;
  height: 18px;
  position: absolute;
  right: -9px;
  top: calc(50% - 9px);
  background: var(--color-text-3);
}
.custom-padding[data-v-71a36ad9] .kling-input__wrapper {
  padding: 1px 1px 1px 11px;
}
.container[data-v-71a36ad9] {
  margin-top: 38px;
}
.field[data-v-71a36ad9] {
  display: flex;
  flex-direction: column;
}
.field[data-v-71a36ad9]:not(:first-child) {
  margin-top: 24px;
}
.dropdown[data-v-71a36ad9] {
  position: relative;
  display: flex;
  align-items: center;
}
.dropdown[data-v-71a36ad9]:hover {
  z-index: 2;
}
.dropdown[data-v-71a36ad9]::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}
.dropdown-btn[data-v-71a36ad9] {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-2);
}
.dropdown-btn[data-v-71a36ad9]:hover {
  color: var(--color-text-1);
}
.dropdown-menu[data-v-71a36ad9] {
  position: absolute;
  top: calc(100% + 18px);
  right: -12px;
  background: var(--color-bg-popover);
  border: 1px solid var(--color-border-component);
  border-radius: 8px;
  box-shadow: var(--box-shadow-component);
  z-index: 1000;
  width: 456px;
}
.dropdown-item[data-v-71a36ad9] {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-1);
}
.dropdown-item[data-v-71a36ad9]:hover {
  background: var(--color-other-1);
}
.recent-tag[data-v-71a36ad9] {
  background: var(--color-text-3);
  border-radius: 4px;
  margin-left: 8px;
  padding: 0 6px;
  line-height: 20px;
  font-size: 12px;
  color: var(--color-text-1);
}
.code-btn[data-v-71a36ad9] {
  width: 102px;
  height: 36px;
  background: var(--color-other-2);
  color: var(--color-text-1);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  transition: background-color 0.2s;
}
.code-btn[data-v-71a36ad9]:hover:not(:disabled) {
  background: var(--color-other-3);
}
.code-btn[data-v-71a36ad9]:disabled {
  background: var(--color-fill-disabled);
  color: var(--color-text-3);
  cursor: not-allowed;
}
.countdown[data-v-71a36ad9] {
  width: 102px;
  height: 36px;
  background-color: var(--color-other-2);
  color: var(--color-text-1);
  border-radius: 4px;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0%;
  line-height: 36px;
  text-align: center;
  white-space: nowrap;
}
.policy-wrap[data-v-71a36ad9] {
  margin-top: 24px;
  margin-bottom: 32px;
}
.login-btn[data-v-71a36ad9] {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.2s;
}
.login-btn.critical[data-v-71a36ad9] {
  background: var(--color-theme-2);
  color: var(--color-text-5);
}
.login-btn.critical[data-v-71a36ad9]:hover:not(:disabled) {
  background: var(--color-theme-hover);
}
.login-btn.critical[data-v-71a36ad9]:disabled {
  background: var(--color-fill-disabled);
  color: var(--color-text-3);
  cursor: not-allowed;
}
/* body.mobile 时的适配（非 scoped，使用唯一类名前缀） */
body.mobile .fc-login-dropdown-menu {
  width: 364px;
}
.signin-container[data-v-f2581e4c] {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  background: var(--color-bg-page);
}
.right-panel[data-v-f2581e4c] {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.content[data-v-f2581e4c] {
  width: 456px;
  min-height: 426px;
  color: var(--color-text-1);
  font-size: 14px;
}
.content h1[data-v-f2581e4c] {
  color: var(--color-text-1);
  line-height: normal;
  font-style: normal;
  font-size: 40px;
  font-weight: 500;
  text-align: center;
  font-family: PP Editorial New Regular;
}
.content p[data-v-f2581e4c] {
  margin-top: 4px;
}

/* 平板/移动端适配：宽度不足以双栏展示时，隐藏视频改为单栏 */
@media (max-width: 1024px) {
.signin-container[data-v-f2581e4c] {
    flex-direction: column;
}
.right-panel[data-v-f2581e4c] {
    padding: 40px 24px;
}
.content[data-v-f2581e4c] {
    width: 100%;
    max-width: 456px;
}
.content h1[data-v-f2581e4c] {
    font-size: 36px;
}
}
.login-tabs[data-v-f2581e4c] {
  margin-top: 32px;
}
.policy-wrap[data-v-f2581e4c] {
  margin-top: 24px;
}
.policy-wrap--center[data-v-f2581e4c] {
  display: flex;
  justify-content: center;
}
/* body.mobile 时的适配（非 scoped，使用唯一类名前缀） */
body.mobile .fc-login-right-panel {
  padding: 0 24px;
  width: 100%;
}
body.mobile .fc-login-content {
  width: 100%;
}.button-back[data-v-09dc12b2] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.button-back svg[data-v-09dc12b2] {
  width: 16px;
  height: 16px;
}
.content[data-v-51ddc40f] {
  width: 456px;
  height: 520px;
  color: var(--color-text-1);
  font-size: 14px;
  display: flex;
  flex-direction: column;
}
.content h1[data-v-51ddc40f] {
  color: var(--color-text-1);
  font-family: PP Editorial New Regular;
  font-size: 40px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.8px;
  text-align: center;
}
.content a[data-v-51ddc40f] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
}
.content a[data-v-51ddc40f]:hover {
  color: var(--color-theme-hover);
}
.sign-in-button[data-v-51ddc40f] {
  width: 100%;
  height: 48px;
  border: 1px solid var(--color-border-container);
  background: var(--color-gradient-button);
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--color-text-5);
  cursor: pointer;
  padding: 16px 40px;
}
.sign-in-button.mt-32[data-v-51ddc40f] {
  margin-top: 32px;
}
.sign-in-button.mt-24[data-v-51ddc40f] {
  margin-top: 24px;
}
.sign-in-button .sign-in-icon[data-v-51ddc40f] {
  margin-right: 10px;
}
.sign-in-button .recent-way[data-v-51ddc40f] {
  font-size: 12px;
  color: var(--color-text-3);
  line-height: 18px;
}
.separator[data-v-51ddc40f] {
  width: 100%;
  height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.separator.mt-24[data-v-51ddc40f] {
  margin-top: 24px;
}
.separator .separator-line[data-v-51ddc40f] {
  height: 1px;
  background: var(--color-border-container);
  flex-grow: 100;
  flex-shrink: 1;
}
.separator .separator-text[data-v-51ddc40f] {
  margin-left: 24px;
  margin-right: 24px;
  flex-grow: 0;
  flex-shrink: 0;
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: var(--color-text-2);
}
.sign-in-agreements[data-v-51ddc40f] {
  font-family: PingFang SC;
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin-top: 24px;
}
.bottom-info[data-v-51ddc40f] {
  margin-top: 32px;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
.notice[data-v-51ddc40f] {
  color: var(--color-text-1);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  margin-top: 32px;
}
.login-btn[data-v-51ddc40f] {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.2s;
}
.login-btn.critical[data-v-51ddc40f] {
  background: var(--color-theme-2);
  color: var(--color-text-5);
}
.login-btn.critical[data-v-51ddc40f]:hover:not(:disabled) {
  background: var(--color-theme-hover);
}
.login-btn.critical[data-v-51ddc40f]:disabled {
  background: var(--color-other-2);
  cursor: not-allowed;
}
.back-btn[data-v-51ddc40f] {
  border: none;
  background: none;
  color: var(--color-theme-2);
  cursor: pointer;
  font-size: 16px;
  transition: color 0.2s;
}
.back-btn[data-v-51ddc40f]:hover {
  color: var(--color-theme-hover);
}
.forgot-password[data-v-51ddc40f] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.forgot-password[data-v-51ddc40f]:hover {
  color: var(--color-theme-hover);
}
.highlight[data-v-51ddc40f] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.highlight[data-v-51ddc40f]:hover {
  color: var(--color-theme-hover);
}

/* 移动端适配（panel 宽度与字号） */
@media (max-width: 768px) {
.content[data-v-51ddc40f] {
    width: 100%;
}
.content h1[data-v-51ddc40f] {
    font-size: 36px;
}
.sign-in-button[data-v-51ddc40f] {
    height: 48px;
    font-size: 14px;
}
.login-btn[data-v-51ddc40f] {
    height: 48px;
    font-size: 16px;
}
}
.input-with-validate[data-v-51ddc40f] {
  position: relative;
}
.input-with-validate input[data-v-51ddc40f] {
  width: 100%;
  height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--color-border-component);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  background: transparent;
  color: var(--color-text-1);
}
.input-with-validate input[data-v-51ddc40f]::placeholder {
  color: var(--color-text-3);
}
.input-with-validate input[data-v-51ddc40f]:hover {
  border-color: var(--color-border-hover);
}
.input-with-validate input[data-v-51ddc40f]:focus {
  border-color: var(--color-border-focused);
}
.clear-btn[data-v-51ddc40f] {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-2);
  transition: color 0.2s;
  pointer-events: auto;
  z-index: 1;
}
.clear-btn[data-v-51ddc40f]:hover {
  color: var(--color-text-1);
}
.password-btn[data-v-51ddc40f] {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-2);
  user-select: none;
  z-index: 1;
}
.password-btn[data-v-51ddc40f]:hover {
  color: var(--color-text-1);
}
.el-input__count[data-v-51ddc40f] {
  position: absolute;
  right: 16px;
  bottom: -18px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-3);
  user-select: none;
}
.dropdown[data-v-51ddc40f] {
  position: relative;
  display: flex;
  align-items: center;
  height: 24px;
}
.dropdown[data-v-51ddc40f]::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}
.dropdown-btn[data-v-51ddc40f] {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-2);
}
.dropdown-btn[data-v-51ddc40f]:hover {
  color: var(--color-text-1);
}
.dropdown-menu[data-v-51ddc40f] {
  position: absolute;
  top: calc(100% + 12px);
  right: -16px;
  background: var(--color-bg-popover);
  border: 1px solid var(--color-border-component);
  border-radius: 12px;
  box-shadow: var(--box-shadow-component);
  z-index: 1000;
  width: 456px;
}
.dropdown-item[data-v-51ddc40f] {
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-1);
}
.dropdown-item[data-v-51ddc40f]:hover {
  background: var(--color-other-1);
}
.recent-tag[data-v-51ddc40f] {
  background: var(--color-text-3);
  border-radius: 4px;
  margin-left: 8px;
  padding: 0 6px;
  line-height: 20px;
  font-size: 12px;
  color: var(--color-text-1);
}
@media (max-width: 768px) {
.input-with-validate input[data-v-51ddc40f] {
    height: 40px;
    font-size: 14px;
}
}
.mt-8[data-v-51ddc40f] {
  margin-top: 8px;
}
.mt-24[data-v-51ddc40f] {
  margin-top: 24px;
}
.mt-32[data-v-51ddc40f] {
  margin-top: 32px;
}
.input-wrapper[data-v-51ddc40f] {
  position: relative;
}
.content[data-v-235e3356] {
  width: 456px;
  height: 520px;
  color: var(--color-text-1);
  font-size: 14px;
  display: flex;
  flex-direction: column;
}
.content h1[data-v-235e3356] {
  color: var(--color-text-1);
  font-family: PP Editorial New Regular;
  font-size: 40px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.8px;
  text-align: center;
}
.content a[data-v-235e3356] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
}
.content a[data-v-235e3356]:hover {
  color: var(--color-theme-hover);
}
.sign-in-button[data-v-235e3356] {
  width: 100%;
  height: 48px;
  border: 1px solid var(--color-border-container);
  background: var(--color-gradient-button);
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--color-text-5);
  cursor: pointer;
  padding: 16px 40px;
}
.sign-in-button.mt-32[data-v-235e3356] {
  margin-top: 32px;
}
.sign-in-button.mt-24[data-v-235e3356] {
  margin-top: 24px;
}
.sign-in-button .sign-in-icon[data-v-235e3356] {
  margin-right: 10px;
}
.sign-in-button .recent-way[data-v-235e3356] {
  font-size: 12px;
  color: var(--color-text-3);
  line-height: 18px;
}
.separator[data-v-235e3356] {
  width: 100%;
  height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.separator.mt-24[data-v-235e3356] {
  margin-top: 24px;
}
.separator .separator-line[data-v-235e3356] {
  height: 1px;
  background: var(--color-border-container);
  flex-grow: 100;
  flex-shrink: 1;
}
.separator .separator-text[data-v-235e3356] {
  margin-left: 24px;
  margin-right: 24px;
  flex-grow: 0;
  flex-shrink: 0;
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: var(--color-text-2);
}
.sign-in-agreements[data-v-235e3356] {
  font-family: PingFang SC;
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin-top: 24px;
}
.bottom-info[data-v-235e3356] {
  margin-top: 32px;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
.notice[data-v-235e3356] {
  color: var(--color-text-1);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  margin-top: 32px;
}
.login-btn[data-v-235e3356] {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.2s;
}
.login-btn.critical[data-v-235e3356] {
  background: var(--color-theme-2);
  color: var(--color-text-5);
}
.login-btn.critical[data-v-235e3356]:hover:not(:disabled) {
  background: var(--color-theme-hover);
}
.login-btn.critical[data-v-235e3356]:disabled {
  background: var(--color-other-2);
  cursor: not-allowed;
}
.back-btn[data-v-235e3356] {
  border: none;
  background: none;
  color: var(--color-theme-2);
  cursor: pointer;
  font-size: 16px;
  transition: color 0.2s;
}
.back-btn[data-v-235e3356]:hover {
  color: var(--color-theme-hover);
}
.forgot-password[data-v-235e3356] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.forgot-password[data-v-235e3356]:hover {
  color: var(--color-theme-hover);
}
.highlight[data-v-235e3356] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.highlight[data-v-235e3356]:hover {
  color: var(--color-theme-hover);
}

/* 移动端适配（panel 宽度与字号） */
@media (max-width: 768px) {
.content[data-v-235e3356] {
    width: 100%;
}
.content h1[data-v-235e3356] {
    font-size: 36px;
}
.sign-in-button[data-v-235e3356] {
    height: 48px;
    font-size: 14px;
}
.login-btn[data-v-235e3356] {
    height: 48px;
    font-size: 16px;
}
}
.input-with-validate[data-v-235e3356] {
  position: relative;
}
.input-with-validate input[data-v-235e3356] {
  width: 100%;
  height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--color-border-component);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  background: transparent;
  color: var(--color-text-1);
}
.input-with-validate input[data-v-235e3356]::placeholder {
  color: var(--color-text-3);
}
.input-with-validate input[data-v-235e3356]:hover {
  border-color: var(--color-border-hover);
}
.input-with-validate input[data-v-235e3356]:focus {
  border-color: var(--color-border-focused);
}
.clear-btn[data-v-235e3356] {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-2);
  transition: color 0.2s;
  pointer-events: auto;
  z-index: 1;
}
.clear-btn[data-v-235e3356]:hover {
  color: var(--color-text-1);
}
.password-btn[data-v-235e3356] {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-2);
  user-select: none;
  z-index: 1;
}
.password-btn[data-v-235e3356]:hover {
  color: var(--color-text-1);
}
.el-input__count[data-v-235e3356] {
  position: absolute;
  right: 16px;
  bottom: -18px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-3);
  user-select: none;
}
.dropdown[data-v-235e3356] {
  position: relative;
  display: flex;
  align-items: center;
  height: 24px;
}
.dropdown[data-v-235e3356]::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}
.dropdown-btn[data-v-235e3356] {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-2);
}
.dropdown-btn[data-v-235e3356]:hover {
  color: var(--color-text-1);
}
.dropdown-menu[data-v-235e3356] {
  position: absolute;
  top: calc(100% + 12px);
  right: -16px;
  background: var(--color-bg-popover);
  border: 1px solid var(--color-border-component);
  border-radius: 12px;
  box-shadow: var(--box-shadow-component);
  z-index: 1000;
  width: 456px;
}
.dropdown-item[data-v-235e3356] {
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-1);
}
.dropdown-item[data-v-235e3356]:hover {
  background: var(--color-other-1);
}
.recent-tag[data-v-235e3356] {
  background: var(--color-text-3);
  border-radius: 4px;
  margin-left: 8px;
  padding: 0 6px;
  line-height: 20px;
  font-size: 12px;
  color: var(--color-text-1);
}
@media (max-width: 768px) {
.input-with-validate input[data-v-235e3356] {
    height: 40px;
    font-size: 14px;
}
}
.mt-8[data-v-235e3356] {
  margin-top: 8px;
}
.mt-24[data-v-235e3356] {
  margin-top: 24px;
}
.input-wrapper[data-v-235e3356] {
  position: relative;
}
.content[data-v-9ddbd77c] {
  width: 456px;
  height: 520px;
  color: var(--color-text-1);
  font-size: 14px;
  display: flex;
  flex-direction: column;
}
.content h1[data-v-9ddbd77c] {
  color: var(--color-text-1);
  font-family: PP Editorial New Regular;
  font-size: 40px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.8px;
  text-align: center;
}
.content a[data-v-9ddbd77c] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
}
.content a[data-v-9ddbd77c]:hover {
  color: var(--color-theme-hover);
}
.sign-in-button[data-v-9ddbd77c] {
  width: 100%;
  height: 48px;
  border: 1px solid var(--color-border-container);
  background: var(--color-gradient-button);
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--color-text-5);
  cursor: pointer;
  padding: 16px 40px;
}
.sign-in-button.mt-32[data-v-9ddbd77c] {
  margin-top: 32px;
}
.sign-in-button.mt-24[data-v-9ddbd77c] {
  margin-top: 24px;
}
.sign-in-button .sign-in-icon[data-v-9ddbd77c] {
  margin-right: 10px;
}
.sign-in-button .recent-way[data-v-9ddbd77c] {
  font-size: 12px;
  color: var(--color-text-3);
  line-height: 18px;
}
.separator[data-v-9ddbd77c] {
  width: 100%;
  height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.separator.mt-24[data-v-9ddbd77c] {
  margin-top: 24px;
}
.separator .separator-line[data-v-9ddbd77c] {
  height: 1px;
  background: var(--color-border-container);
  flex-grow: 100;
  flex-shrink: 1;
}
.separator .separator-text[data-v-9ddbd77c] {
  margin-left: 24px;
  margin-right: 24px;
  flex-grow: 0;
  flex-shrink: 0;
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: var(--color-text-2);
}
.sign-in-agreements[data-v-9ddbd77c] {
  font-family: PingFang SC;
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin-top: 24px;
}
.bottom-info[data-v-9ddbd77c] {
  margin-top: 32px;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
.notice[data-v-9ddbd77c] {
  color: var(--color-text-1);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  margin-top: 32px;
}
.login-btn[data-v-9ddbd77c] {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.2s;
}
.login-btn.critical[data-v-9ddbd77c] {
  background: var(--color-theme-2);
  color: var(--color-text-5);
}
.login-btn.critical[data-v-9ddbd77c]:hover:not(:disabled) {
  background: var(--color-theme-hover);
}
.login-btn.critical[data-v-9ddbd77c]:disabled {
  background: var(--color-other-2);
  cursor: not-allowed;
}
.back-btn[data-v-9ddbd77c] {
  border: none;
  background: none;
  color: var(--color-theme-2);
  cursor: pointer;
  font-size: 16px;
  transition: color 0.2s;
}
.back-btn[data-v-9ddbd77c]:hover {
  color: var(--color-theme-hover);
}
.forgot-password[data-v-9ddbd77c] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.forgot-password[data-v-9ddbd77c]:hover {
  color: var(--color-theme-hover);
}
.highlight[data-v-9ddbd77c] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.highlight[data-v-9ddbd77c]:hover {
  color: var(--color-theme-hover);
}

/* 移动端适配（panel 宽度与字号） */
@media (max-width: 768px) {
.content[data-v-9ddbd77c] {
    width: 100%;
}
.content h1[data-v-9ddbd77c] {
    font-size: 36px;
}
.sign-in-button[data-v-9ddbd77c] {
    height: 48px;
    font-size: 14px;
}
.login-btn[data-v-9ddbd77c] {
    height: 48px;
    font-size: 16px;
}
}
.input-with-validate[data-v-9ddbd77c] {
  position: relative;
}
.input-with-validate input[data-v-9ddbd77c] {
  width: 100%;
  height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--color-border-component);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  background: transparent;
  color: var(--color-text-1);
}
.input-with-validate input[data-v-9ddbd77c]::placeholder {
  color: var(--color-text-3);
}
.input-with-validate input[data-v-9ddbd77c]:hover {
  border-color: var(--color-border-hover);
}
.input-with-validate input[data-v-9ddbd77c]:focus {
  border-color: var(--color-border-focused);
}
.clear-btn[data-v-9ddbd77c] {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-2);
  transition: color 0.2s;
  pointer-events: auto;
  z-index: 1;
}
.clear-btn[data-v-9ddbd77c]:hover {
  color: var(--color-text-1);
}
.password-btn[data-v-9ddbd77c] {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-2);
  user-select: none;
  z-index: 1;
}
.password-btn[data-v-9ddbd77c]:hover {
  color: var(--color-text-1);
}
.el-input__count[data-v-9ddbd77c] {
  position: absolute;
  right: 16px;
  bottom: -18px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-3);
  user-select: none;
}
.dropdown[data-v-9ddbd77c] {
  position: relative;
  display: flex;
  align-items: center;
  height: 24px;
}
.dropdown[data-v-9ddbd77c]::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}
.dropdown-btn[data-v-9ddbd77c] {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-2);
}
.dropdown-btn[data-v-9ddbd77c]:hover {
  color: var(--color-text-1);
}
.dropdown-menu[data-v-9ddbd77c] {
  position: absolute;
  top: calc(100% + 12px);
  right: -16px;
  background: var(--color-bg-popover);
  border: 1px solid var(--color-border-component);
  border-radius: 12px;
  box-shadow: var(--box-shadow-component);
  z-index: 1000;
  width: 456px;
}
.dropdown-item[data-v-9ddbd77c] {
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-1);
}
.dropdown-item[data-v-9ddbd77c]:hover {
  background: var(--color-other-1);
}
.recent-tag[data-v-9ddbd77c] {
  background: var(--color-text-3);
  border-radius: 4px;
  margin-left: 8px;
  padding: 0 6px;
  line-height: 20px;
  font-size: 12px;
  color: var(--color-text-1);
}
@media (max-width: 768px) {
.input-with-validate input[data-v-9ddbd77c] {
    height: 40px;
    font-size: 14px;
}
}
.mt-8[data-v-9ddbd77c] {
  margin-top: 8px;
}
.mt-24[data-v-9ddbd77c] {
  margin-top: 24px;
}
.input-wrapper[data-v-9ddbd77c] {
  position: relative;
}
.content[data-v-84903017] {
  width: 456px;
  height: 520px;
  color: var(--color-text-1);
  font-size: 14px;
  display: flex;
  flex-direction: column;
}
.content h1[data-v-84903017] {
  color: var(--color-text-1);
  font-family: PP Editorial New Regular;
  font-size: 40px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.8px;
  text-align: center;
}
.content a[data-v-84903017] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
}
.content a[data-v-84903017]:hover {
  color: var(--color-theme-hover);
}
.sign-in-button[data-v-84903017] {
  width: 100%;
  height: 48px;
  border: 1px solid var(--color-border-container);
  background: var(--color-gradient-button);
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--color-text-5);
  cursor: pointer;
  padding: 16px 40px;
}
.sign-in-button.mt-32[data-v-84903017] {
  margin-top: 32px;
}
.sign-in-button.mt-24[data-v-84903017] {
  margin-top: 24px;
}
.sign-in-button .sign-in-icon[data-v-84903017] {
  margin-right: 10px;
}
.sign-in-button .recent-way[data-v-84903017] {
  font-size: 12px;
  color: var(--color-text-3);
  line-height: 18px;
}
.separator[data-v-84903017] {
  width: 100%;
  height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.separator.mt-24[data-v-84903017] {
  margin-top: 24px;
}
.separator .separator-line[data-v-84903017] {
  height: 1px;
  background: var(--color-border-container);
  flex-grow: 100;
  flex-shrink: 1;
}
.separator .separator-text[data-v-84903017] {
  margin-left: 24px;
  margin-right: 24px;
  flex-grow: 0;
  flex-shrink: 0;
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: var(--color-text-2);
}
.sign-in-agreements[data-v-84903017] {
  font-family: PingFang SC;
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin-top: 24px;
}
.bottom-info[data-v-84903017] {
  margin-top: 32px;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
.notice[data-v-84903017] {
  color: var(--color-text-1);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  margin-top: 32px;
}
.login-btn[data-v-84903017] {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.2s;
}
.login-btn.critical[data-v-84903017] {
  background: var(--color-theme-2);
  color: var(--color-text-5);
}
.login-btn.critical[data-v-84903017]:hover:not(:disabled) {
  background: var(--color-theme-hover);
}
.login-btn.critical[data-v-84903017]:disabled {
  background: var(--color-other-2);
  cursor: not-allowed;
}
.back-btn[data-v-84903017] {
  border: none;
  background: none;
  color: var(--color-theme-2);
  cursor: pointer;
  font-size: 16px;
  transition: color 0.2s;
}
.back-btn[data-v-84903017]:hover {
  color: var(--color-theme-hover);
}
.forgot-password[data-v-84903017] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.forgot-password[data-v-84903017]:hover {
  color: var(--color-theme-hover);
}
.highlight[data-v-84903017] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.highlight[data-v-84903017]:hover {
  color: var(--color-theme-hover);
}

/* 移动端适配（panel 宽度与字号） */
@media (max-width: 768px) {
.content[data-v-84903017] {
    width: 100%;
}
.content h1[data-v-84903017] {
    font-size: 36px;
}
.sign-in-button[data-v-84903017] {
    height: 48px;
    font-size: 14px;
}
.login-btn[data-v-84903017] {
    height: 48px;
    font-size: 16px;
}
}
.input-with-validate[data-v-84903017] {
  position: relative;
}
.input-with-validate input[data-v-84903017] {
  width: 100%;
  height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--color-border-component);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  background: transparent;
  color: var(--color-text-1);
}
.input-with-validate input[data-v-84903017]::placeholder {
  color: var(--color-text-3);
}
.input-with-validate input[data-v-84903017]:hover {
  border-color: var(--color-border-hover);
}
.input-with-validate input[data-v-84903017]:focus {
  border-color: var(--color-border-focused);
}
.clear-btn[data-v-84903017] {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-2);
  transition: color 0.2s;
  pointer-events: auto;
  z-index: 1;
}
.clear-btn[data-v-84903017]:hover {
  color: var(--color-text-1);
}
.password-btn[data-v-84903017] {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-2);
  user-select: none;
  z-index: 1;
}
.password-btn[data-v-84903017]:hover {
  color: var(--color-text-1);
}
.el-input__count[data-v-84903017] {
  position: absolute;
  right: 16px;
  bottom: -18px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-3);
  user-select: none;
}
.dropdown[data-v-84903017] {
  position: relative;
  display: flex;
  align-items: center;
  height: 24px;
}
.dropdown[data-v-84903017]::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}
.dropdown-btn[data-v-84903017] {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-2);
}
.dropdown-btn[data-v-84903017]:hover {
  color: var(--color-text-1);
}
.dropdown-menu[data-v-84903017] {
  position: absolute;
  top: calc(100% + 12px);
  right: -16px;
  background: var(--color-bg-popover);
  border: 1px solid var(--color-border-component);
  border-radius: 12px;
  box-shadow: var(--box-shadow-component);
  z-index: 1000;
  width: 456px;
}
.dropdown-item[data-v-84903017] {
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-1);
}
.dropdown-item[data-v-84903017]:hover {
  background: var(--color-other-1);
}
.recent-tag[data-v-84903017] {
  background: var(--color-text-3);
  border-radius: 4px;
  margin-left: 8px;
  padding: 0 6px;
  line-height: 20px;
  font-size: 12px;
  color: var(--color-text-1);
}
@media (max-width: 768px) {
.input-with-validate input[data-v-84903017] {
    height: 40px;
    font-size: 14px;
}
}
.mt-8[data-v-84903017] {
  margin-top: 8px;
}
.mt-24[data-v-84903017] {
  margin-top: 24px;
}
.mt-32[data-v-84903017] {
  margin-top: 32px;
}
.input-wrapper[data-v-84903017] {
  position: relative;
}
.content[data-v-ad690831] {
  width: 456px;
  height: 520px;
  color: var(--color-text-1);
  font-size: 14px;
  display: flex;
  flex-direction: column;
}
.content h1[data-v-ad690831] {
  color: var(--color-text-1);
  font-family: PP Editorial New Regular;
  font-size: 40px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.8px;
  text-align: center;
}
.content a[data-v-ad690831] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
}
.content a[data-v-ad690831]:hover {
  color: var(--color-theme-hover);
}
.sign-in-button[data-v-ad690831] {
  width: 100%;
  height: 48px;
  border: 1px solid var(--color-border-container);
  background: var(--color-gradient-button);
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--color-text-5);
  cursor: pointer;
  padding: 16px 40px;
}
.sign-in-button.mt-32[data-v-ad690831] {
  margin-top: 32px;
}
.sign-in-button.mt-24[data-v-ad690831] {
  margin-top: 24px;
}
.sign-in-button .sign-in-icon[data-v-ad690831] {
  margin-right: 10px;
}
.sign-in-button .recent-way[data-v-ad690831] {
  font-size: 12px;
  color: var(--color-text-3);
  line-height: 18px;
}
.separator[data-v-ad690831] {
  width: 100%;
  height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.separator.mt-24[data-v-ad690831] {
  margin-top: 24px;
}
.separator .separator-line[data-v-ad690831] {
  height: 1px;
  background: var(--color-border-container);
  flex-grow: 100;
  flex-shrink: 1;
}
.separator .separator-text[data-v-ad690831] {
  margin-left: 24px;
  margin-right: 24px;
  flex-grow: 0;
  flex-shrink: 0;
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: var(--color-text-2);
}
.sign-in-agreements[data-v-ad690831] {
  font-family: PingFang SC;
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin-top: 24px;
}
.bottom-info[data-v-ad690831] {
  margin-top: 32px;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
.notice[data-v-ad690831] {
  color: var(--color-text-1);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  margin-top: 32px;
}
.login-btn[data-v-ad690831] {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.2s;
}
.login-btn.critical[data-v-ad690831] {
  background: var(--color-theme-2);
  color: var(--color-text-5);
}
.login-btn.critical[data-v-ad690831]:hover:not(:disabled) {
  background: var(--color-theme-hover);
}
.login-btn.critical[data-v-ad690831]:disabled {
  background: var(--color-other-2);
  cursor: not-allowed;
}
.back-btn[data-v-ad690831] {
  border: none;
  background: none;
  color: var(--color-theme-2);
  cursor: pointer;
  font-size: 16px;
  transition: color 0.2s;
}
.back-btn[data-v-ad690831]:hover {
  color: var(--color-theme-hover);
}
.forgot-password[data-v-ad690831] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.forgot-password[data-v-ad690831]:hover {
  color: var(--color-theme-hover);
}
.highlight[data-v-ad690831] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.highlight[data-v-ad690831]:hover {
  color: var(--color-theme-hover);
}

/* 移动端适配（panel 宽度与字号） */
@media (max-width: 768px) {
.content[data-v-ad690831] {
    width: 100%;
}
.content h1[data-v-ad690831] {
    font-size: 36px;
}
.sign-in-button[data-v-ad690831] {
    height: 48px;
    font-size: 14px;
}
.login-btn[data-v-ad690831] {
    height: 48px;
    font-size: 16px;
}
}
.input-with-validate[data-v-ad690831] {
  position: relative;
}
.input-with-validate input[data-v-ad690831] {
  width: 100%;
  height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--color-border-component);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  background: transparent;
  color: var(--color-text-1);
}
.input-with-validate input[data-v-ad690831]::placeholder {
  color: var(--color-text-3);
}
.input-with-validate input[data-v-ad690831]:hover {
  border-color: var(--color-border-hover);
}
.input-with-validate input[data-v-ad690831]:focus {
  border-color: var(--color-border-focused);
}
.clear-btn[data-v-ad690831] {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-2);
  transition: color 0.2s;
  pointer-events: auto;
  z-index: 1;
}
.clear-btn[data-v-ad690831]:hover {
  color: var(--color-text-1);
}
.password-btn[data-v-ad690831] {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-2);
  user-select: none;
  z-index: 1;
}
.password-btn[data-v-ad690831]:hover {
  color: var(--color-text-1);
}
.el-input__count[data-v-ad690831] {
  position: absolute;
  right: 16px;
  bottom: -18px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-3);
  user-select: none;
}
.dropdown[data-v-ad690831] {
  position: relative;
  display: flex;
  align-items: center;
  height: 24px;
}
.dropdown[data-v-ad690831]::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}
.dropdown-btn[data-v-ad690831] {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-2);
}
.dropdown-btn[data-v-ad690831]:hover {
  color: var(--color-text-1);
}
.dropdown-menu[data-v-ad690831] {
  position: absolute;
  top: calc(100% + 12px);
  right: -16px;
  background: var(--color-bg-popover);
  border: 1px solid var(--color-border-component);
  border-radius: 12px;
  box-shadow: var(--box-shadow-component);
  z-index: 1000;
  width: 456px;
}
.dropdown-item[data-v-ad690831] {
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-1);
}
.dropdown-item[data-v-ad690831]:hover {
  background: var(--color-other-1);
}
.recent-tag[data-v-ad690831] {
  background: var(--color-text-3);
  border-radius: 4px;
  margin-left: 8px;
  padding: 0 6px;
  line-height: 20px;
  font-size: 12px;
  color: var(--color-text-1);
}
@media (max-width: 768px) {
.input-with-validate input[data-v-ad690831] {
    height: 40px;
    font-size: 14px;
}
}
.mt-8[data-v-ad690831] {
  margin-top: 8px;
}
.mt-24[data-v-ad690831] {
  margin-top: 24px;
}
.input-wrapper[data-v-ad690831] {
  position: relative;
}
.content[data-v-387de1ee] {
  width: 456px;
  height: 520px;
  color: var(--color-text-1);
  font-size: 14px;
  display: flex;
  flex-direction: column;
}
.content h1[data-v-387de1ee] {
  color: var(--color-text-1);
  font-family: PP Editorial New Regular;
  font-size: 40px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.8px;
  text-align: center;
}
.content a[data-v-387de1ee] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
}
.content a[data-v-387de1ee]:hover {
  color: var(--color-theme-hover);
}
.sign-in-button[data-v-387de1ee] {
  width: 100%;
  height: 48px;
  border: 1px solid var(--color-border-container);
  background: var(--color-gradient-button);
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--color-text-5);
  cursor: pointer;
  padding: 16px 40px;
}
.sign-in-button.mt-32[data-v-387de1ee] {
  margin-top: 32px;
}
.sign-in-button.mt-24[data-v-387de1ee] {
  margin-top: 24px;
}
.sign-in-button .sign-in-icon[data-v-387de1ee] {
  margin-right: 10px;
}
.sign-in-button .recent-way[data-v-387de1ee] {
  font-size: 12px;
  color: var(--color-text-3);
  line-height: 18px;
}
.separator[data-v-387de1ee] {
  width: 100%;
  height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.separator.mt-24[data-v-387de1ee] {
  margin-top: 24px;
}
.separator .separator-line[data-v-387de1ee] {
  height: 1px;
  background: var(--color-border-container);
  flex-grow: 100;
  flex-shrink: 1;
}
.separator .separator-text[data-v-387de1ee] {
  margin-left: 24px;
  margin-right: 24px;
  flex-grow: 0;
  flex-shrink: 0;
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: var(--color-text-2);
}
.sign-in-agreements[data-v-387de1ee] {
  font-family: PingFang SC;
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin-top: 24px;
}
.bottom-info[data-v-387de1ee] {
  margin-top: 32px;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
.notice[data-v-387de1ee] {
  color: var(--color-text-1);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  margin-top: 32px;
}
.login-btn[data-v-387de1ee] {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.2s;
}
.login-btn.critical[data-v-387de1ee] {
  background: var(--color-theme-2);
  color: var(--color-text-5);
}
.login-btn.critical[data-v-387de1ee]:hover:not(:disabled) {
  background: var(--color-theme-hover);
}
.login-btn.critical[data-v-387de1ee]:disabled {
  background: var(--color-other-2);
  cursor: not-allowed;
}
.back-btn[data-v-387de1ee] {
  border: none;
  background: none;
  color: var(--color-theme-2);
  cursor: pointer;
  font-size: 16px;
  transition: color 0.2s;
}
.back-btn[data-v-387de1ee]:hover {
  color: var(--color-theme-hover);
}
.forgot-password[data-v-387de1ee] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.forgot-password[data-v-387de1ee]:hover {
  color: var(--color-theme-hover);
}
.highlight[data-v-387de1ee] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.highlight[data-v-387de1ee]:hover {
  color: var(--color-theme-hover);
}

/* 移动端适配（panel 宽度与字号） */
@media (max-width: 768px) {
.content[data-v-387de1ee] {
    width: 100%;
}
.content h1[data-v-387de1ee] {
    font-size: 36px;
}
.sign-in-button[data-v-387de1ee] {
    height: 48px;
    font-size: 14px;
}
.login-btn[data-v-387de1ee] {
    height: 48px;
    font-size: 16px;
}
}
.content[data-v-44805ea8] {
  width: 456px;
  height: 520px;
  color: var(--color-text-1);
  font-size: 14px;
  display: flex;
  flex-direction: column;
}
.content h1[data-v-44805ea8] {
  color: var(--color-text-1);
  font-family: PP Editorial New Regular;
  font-size: 40px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.8px;
  text-align: center;
}
.content a[data-v-44805ea8] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
}
.content a[data-v-44805ea8]:hover {
  color: var(--color-theme-hover);
}
.sign-in-button[data-v-44805ea8] {
  width: 100%;
  height: 48px;
  border: 1px solid var(--color-border-container);
  background: var(--color-gradient-button);
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--color-text-5);
  cursor: pointer;
  padding: 16px 40px;
}
.sign-in-button.mt-32[data-v-44805ea8] {
  margin-top: 32px;
}
.sign-in-button.mt-24[data-v-44805ea8] {
  margin-top: 24px;
}
.sign-in-button .sign-in-icon[data-v-44805ea8] {
  margin-right: 10px;
}
.sign-in-button .recent-way[data-v-44805ea8] {
  font-size: 12px;
  color: var(--color-text-3);
  line-height: 18px;
}
.separator[data-v-44805ea8] {
  width: 100%;
  height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.separator.mt-24[data-v-44805ea8] {
  margin-top: 24px;
}
.separator .separator-line[data-v-44805ea8] {
  height: 1px;
  background: var(--color-border-container);
  flex-grow: 100;
  flex-shrink: 1;
}
.separator .separator-text[data-v-44805ea8] {
  margin-left: 24px;
  margin-right: 24px;
  flex-grow: 0;
  flex-shrink: 0;
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: var(--color-text-2);
}
.sign-in-agreements[data-v-44805ea8] {
  font-family: PingFang SC;
  font-size: 10px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  margin-top: 24px;
}
.bottom-info[data-v-44805ea8] {
  margin-top: 32px;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
.notice[data-v-44805ea8] {
  color: var(--color-text-1);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  margin-top: 32px;
}
.login-btn[data-v-44805ea8] {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.2s;
}
.login-btn.critical[data-v-44805ea8] {
  background: var(--color-theme-2);
  color: var(--color-text-5);
}
.login-btn.critical[data-v-44805ea8]:hover:not(:disabled) {
  background: var(--color-theme-hover);
}
.login-btn.critical[data-v-44805ea8]:disabled {
  background: var(--color-other-2);
  cursor: not-allowed;
}
.back-btn[data-v-44805ea8] {
  border: none;
  background: none;
  color: var(--color-theme-2);
  cursor: pointer;
  font-size: 16px;
  transition: color 0.2s;
}
.back-btn[data-v-44805ea8]:hover {
  color: var(--color-theme-hover);
}
.forgot-password[data-v-44805ea8] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.forgot-password[data-v-44805ea8]:hover {
  color: var(--color-theme-hover);
}
.highlight[data-v-44805ea8] {
  color: var(--color-theme-2);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.highlight[data-v-44805ea8]:hover {
  color: var(--color-theme-hover);
}

/* 移动端适配（panel 宽度与字号） */
@media (max-width: 768px) {
.content[data-v-44805ea8] {
    width: 100%;
}
.content h1[data-v-44805ea8] {
    font-size: 36px;
}
.sign-in-button[data-v-44805ea8] {
    height: 48px;
    font-size: 14px;
}
.login-btn[data-v-44805ea8] {
    height: 48px;
    font-size: 16px;
}
}
.login-container[data-v-db0e2888] {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  background: var(--color-bg-page);
}
.teaser[data-v-db0e2888] {
  width: 50%;
  height: 100%;
  aspect-ratio: 1;
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
}
.teaser .video[data-v-db0e2888] {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
}
.right-panel[data-v-db0e2888] {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 平板/移动端适配：宽度不足以双栏展示时，隐藏视频改为单栏 */
@media (max-width: 1024px) {
.login-container[data-v-db0e2888] {
    flex-direction: column;
}
.right-panel[data-v-db0e2888] {
    padding: 40px 24px;
}
}
/* body.mobile 时的适配（非 scoped，使用唯一类名前缀） */
body.mobile .fc-login-right-panel {
  width: 100%;
  padding: 0 24px;
}