/* 遮罩层：负责控制层级、背景模糊和入场动画。 */
.ppt-login-layer {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgb(10 15 27 / 0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: ppt-login-scrim-in 0.24s ease-out both;
}

.ppt-login-layer[hidden] {
  display: none;
}

/* 主体弹窗：两栏布局，承接新版登录弹窗视觉稿。 */
.ppt-login-dialog {
  position: relative;
  width: min(1060px, calc(100vw - 64px));
  min-height: min(660px, calc(100dvh - 64px));
  max-height: calc(100dvh - 64px);
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 54%);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.72);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 36px 120px rgb(7 12 24 / 0.34);
  animation: ppt-login-dialog-in 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ppt-login-close {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0 0 2px;
  border: 1px solid #ebecef;
  border-radius: 50%;
  color: #6d7280;
  background: rgb(255 255 255 / 0.9);
  box-shadow: 0 8px 20px rgb(23 32 51 / 0.08);
  cursor: pointer;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.ppt-login-close:hover {
  color: #ff6b57;
  border-color: rgb(255 107 87 / 0.35);
  transform: rotate(4deg);
}

/* 左侧品牌展示区。 */
.ppt-login-promo {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #fff4ec;
  isolation: isolate;
}

.ppt-login-promo::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgb(255 250 246 / 0.97) 0%, rgb(255 250 246 / 0.68) 21%, transparent 39%);
  pointer-events: none;
}

.ppt-login-promo-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 50%;
}

.ppt-login-promo-copy {
  position: relative;
  z-index: 2;
  padding: 34px 38px;
}

.ppt-login-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #172033;
  font-size: 18px;
  font-weight: 780;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.ppt-login-brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #ff9d2f, #ff6b57);
  box-shadow: 0 8px 18px rgb(228 95 72 / 0.2);
  font-size: 20px;
  font-weight: 800;
}

.ppt-login-promo-copy h2 {
  margin: 30px 0 10px;
  color: #1c2233;
  font-size: clamp(32px, 3vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.055em;
}

.ppt-login-promo-copy h2 span {
  color: #ff6b57;
  white-space: nowrap;
}

.ppt-login-promo-copy p {
  max-width: 380px;
  margin: 0;
  color: #596276;
  font-size: 15px;
  line-height: 1.72;
}

/* 右侧登录表单区。 */
.ppt-login-auth-panel {
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 64px 58px 52px;
  background: #fff;
}

.ppt-login-auth-wrap {
  width: min(410px, 100%);
}

.ppt-login-auth-head {
  margin-bottom: 30px;
}

.ppt-login-auth-head h3 {
  margin: 0;
  color: #1c2233;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.04em;
}

.ppt-login-auth-head p {
  margin: 9px 0 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.65;
}

.ppt-login-form {
  display: grid;
  gap: 18px;
}

.ppt-login-form-row {
  display: grid;
  gap: 8px;
}

.ppt-login-form-row label {
  color: #343a4a;
  font-size: 14px;
  font-weight: 690;
}

.ppt-login-phone-field {
  height: 52px;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #dcdfe6;
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ppt-login-phone-field:focus-within {
  border-color: #ff6b57;
  box-shadow: 0 0 0 4px rgb(255 107 87 / 0.1);
}

.ppt-login-country-code {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #eceef2;
  color: #343a4a;
  font-size: 15px;
  font-weight: 620;
}

.ppt-login-form input[type="tel"],
.ppt-login-form input[type="text"] {
  width: 100%;
  height: 52px;
  padding: 0 15px;
  border: 1px solid #dcdfe6;
  border-radius: 12px;
  color: #172033;
  background: #fff;
  outline: 0;
  font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ppt-login-phone-field input {
  height: 50px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ppt-login-form input::placeholder {
  color: #a5a9b3;
}

.ppt-login-form input[type="text"]:focus {
  border-color: #ff6b57;
  box-shadow: 0 0 0 4px rgb(255 107 87 / 0.1);
}

.ppt-login-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 126px;
  gap: 10px;
}

.ppt-login-code-btn {
  min-height: 52px;
  border: 1px solid rgb(255 107 87 / 0.35);
  border-radius: 12px;
  color: #e85f4c;
  background: #fff8f5;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.ppt-login-code-btn:hover {
  border-color: rgb(255 107 87 / 0.62);
  background: #fff2ed;
  transform: translateY(-1px);
}

.ppt-login-code-btn:disabled {
  color: #9a9eaa;
  border-color: #e4e6eb;
  background: #f6f7f9;
  cursor: not-allowed;
  transform: none;
}

/* 来源提示和消息框：结构、语义与独立 login.html 对齐。 */
.ppt-login-source-note,
.ppt-login-msg {
  display: none;
  min-height: 40px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
}

.ppt-login-source-note.is-visible {
  display: flex;
  color: #66521b;
  background: #fff9df;
  border: 1px solid #f4e39b;
}

.ppt-login-msg.msg-error {
  display: flex;
  color: #b42318;
  background: #fff3f2;
  border: 1px solid #f6c2bd;
}

.ppt-login-msg.msg-success {
  display: flex;
  color: #237c57;
  background: #effaf5;
  border: 1px solid #afe2cf;
}

.ppt-login-agreement {
  margin: 0;
  color: #777d8c;
  font-size: 12px;
  line-height: 1.65;
  text-align: center;
}

.ppt-login-agreement a {
  color: #e55e4b;
  font-weight: 620;
}

/* 主提交按钮：视觉保持新版，文案和状态切换按真实登录流程。 */
.ppt-login-submit-btn {
  min-height: 52px;
  margin-top: 2px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #f18454 0%, #ec704f 54%, #e45f48 100%);
  box-shadow: 0 12px 24px rgb(228 95 72 / 0.22);
  cursor: pointer;
  font-size: 16px;
  font-weight: 740;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ppt-login-submit-btn:hover {
  background: linear-gradient(135deg, #ed774a 0%, #e56547 54%, #d9533e 100%);
  box-shadow: 0 15px 30px rgb(217 83 62 / 0.26);
  transform: translateY(-1px);
}

.ppt-login-submit-btn:disabled {
  opacity: 0.72;
  cursor: wait;
}

.ppt-login-submit-btn:active,
.ppt-login-code-btn:active {
  transform: translateY(1px);
}

.ppt-login-auth-foot {
  margin: 22px 0 0;
  color: #9a9eaa;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
}

@keyframes ppt-login-scrim-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ppt-login-dialog-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 响应式布局：让这个组件以后在其他页面复用时也能直接适配小屏。 */
@media (max-width: 980px) {
  .ppt-login-dialog {
    grid-template-columns: minmax(0, 43%) minmax(0, 57%);
  }

  .ppt-login-promo-copy {
    padding-inline: 30px;
  }

  .ppt-login-auth-panel {
    padding-inline: 42px;
  }
}

@media (max-width: 820px) {
  .ppt-login-layer {
    align-items: end;
    padding: 18px 12px 0;
  }

  .ppt-login-dialog {
    width: min(560px, 100%);
    min-height: 0;
    max-height: 94dvh;
    grid-template-columns: 1fr;
    grid-template-rows: 190px auto;
    overflow-y: auto;
    border-radius: 26px 26px 0 0;
  }

  .ppt-login-close {
    top: 14px;
    right: 14px;
    background: rgb(255 255 255 / 0.86);
  }

  .ppt-login-promo {
    min-height: 190px;
  }

  .ppt-login-promo-art {
    object-position: center 46%;
    transform: scale(1.02);
  }

  .ppt-login-promo::after {
    background: linear-gradient(90deg, rgb(255 250 246 / 0.98) 0%, rgb(255 250 246 / 0.78) 58%, transparent 100%);
  }

  .ppt-login-promo-copy {
    width: 72%;
    padding: 24px;
  }

  .ppt-login-brand {
    font-size: 16px;
  }

  .ppt-login-brand-mark {
    width: 30px;
    height: 30px;
    font-size: 17px;
  }

  .ppt-login-promo-copy h2 {
    margin: 18px 0 0;
    font-size: 27px;
  }

  .ppt-login-promo-copy p {
    display: none;
  }

  .ppt-login-auth-panel {
    padding: 32px 24px 38px;
  }

  .ppt-login-auth-head {
    margin-bottom: 24px;
  }

  .ppt-login-auth-head h3 {
    font-size: 27px;
  }
}

@media (max-width: 390px) {
  .ppt-login-layer {
    padding-inline: 0;
  }

  .ppt-login-dialog {
    border-radius: 24px 24px 0 0;
  }

  .ppt-login-auth-panel {
    padding-inline: 20px;
  }

  .ppt-login-code-row {
    grid-template-columns: minmax(0, 1fr) 114px;
  }

  .ppt-login-code-btn {
    font-size: 13px;
  }
}

@media (max-height: 700px) and (min-width: 821px) {
  .ppt-login-dialog {
    min-height: calc(100dvh - 36px);
    max-height: calc(100dvh - 36px);
  }

  .ppt-login-layer {
    padding: 18px;
  }

  .ppt-login-promo-copy {
    padding-top: 26px;
  }

  .ppt-login-promo-copy h2 {
    margin-top: 22px;
  }

  .ppt-login-auth-panel {
    padding-top: 44px;
    padding-bottom: 38px;
  }

  .ppt-login-auth-head {
    margin-bottom: 22px;
  }

  .ppt-login-form {
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 尊重系统减少动态效果设置。 */
  .ppt-login-layer,
  .ppt-login-dialog,
  .ppt-login-close,
  .ppt-login-code-btn,
  .ppt-login-submit-btn,
  .ppt-login-form input,
  .ppt-login-phone-field {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}