.container {
  width: 100%;
  max-width: @container-width;
  margin: 0 auto;
  padding: 0
    clamp(@spacing-base, calc((100% - @page-content) / 2), @page-gutter);
}

.container--home {
  padding: 0 @home-gutter;

  // 1:1 还原基准为 1920。仅当视口明显窄于 1920 时才收窄留白。
  @media (max-width: 1600px) {
    padding: 0 @spacing-lg;
  }
}

.auth-page {
  position: relative;
  display: flex;
  min-height: 100vh;
  background: @white;

  // 设计稿 #36/#38/#39 的左侧品牌区为固定 784px 渐变块。
  &__brand {
    .flex(column, flex-start, flex-start);
    flex: 0 0 @login-brand-width;
    padding: 304px 0 0 257px;
    background: linear-gradient(
      160deg,
      @auth-gradient-from 0%,
      @auth-gradient-to 100%
    );
    color: @white;
    text-align: left;
  }

  &__logo {
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 58px;
    color: @white;
  }

  &__key {
    margin: 26px 0 0;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: @white;
  }

  &__slogan {
    // logo(116) + key 上距 26 + key(20) = 162；设计稿 slogan 顶 715，
    // 故与 key 底(446+20=466) 间距 249px。
    margin: 249px 0 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 29px;
    letter-spacing: 8px;
    color: @white;
  }

  // 设计稿 #39：右上角「游客模式」12px，标注框 (1840,24) 64.2×16
  // （64.2 含 Sketch 文本框内边距，实际文字 48px），右留白 16px。
  &__guest {
    position: absolute;
    top: 24px;
    right: 16px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #1f2937;
    text-decoration: none;
    transition: color 0.2s;

    &:hover {
      color: @primary-strong;
    }
  }

  &__main {
    .flex(column, center, center);
    flex: 1;
    min-width: 0;
    // 设计稿三页的标题顶分别为 306/287/268，卡片在 1080 视口中居中后
    // 会比标注高 15px，用上内边距把内容整体下移补平。
    padding: 80px 0 40px;
  }

  // 设计稿表单区统一 693px 宽。标题/副标题按自身文字宽度相对表单居中，
  // 不额外内缩——设计稿标注的 714px 宽是 Sketch 文本框含内边距的值。
  &__card {
    .flex(column, flex-start, flex-start);
    width: @login-form-width;
    text-align: left;
  }

  &__title {
    margin: 0;
    font-size: 34px;
    font-weight: 700;
    line-height: 45px;
    color: #1f2937;
  }

  // 三页副标题样式一致且模板类名统一为 auth-page__subtitle，
  // 放在公共层，避免各页 scoped 选择器与模板类名不匹配。
  &__subtitle {
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 17px;
    color: #6b7280;
  }

  &__title,
  &__subtitle {
    align-self: center;
    text-align: center;
  }

  &__link {
    color: @primary-strong;

    &:hover {
      color: @primary-hover;
    }
  }
}

.link {
  cursor: pointer;
  transition: color 0.2s;

  &:hover {
    color: @primary-color;
  }
}

.text-ellipsis {
  .ellipsis();
}

.text-secondary {
  color: @text-color-secondary;
}