/* ===== 补充样式（name.com 原样之外所需的少量定制）===== */

/* Google 登录按钮（name.com 原版视觉：白底灰边，非功能性仅显示）*/
.google-signin-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; max-width: 399px; height: 44px;
  background: #fff; color: #3c4043; border: 1px solid #dadce0; border-radius: 4px;
  font-family: "Google Sans", Roboto, Arial, sans-serif; font-size: 14px; font-weight: 500;
  letter-spacing: .25px; cursor: default; padding: 0 16px;
  transition: background .15s, box-shadow .15s;
}
.google-signin-btn:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(60,64,67,.12); }
.google-g-icon { width: 18px; height: 18px; flex-shrink: 0; }
.google-signin-text { white-space: nowrap; }

/* 错误提示 */
.login-error{
  display:none;color:#b42318;background:#fef3f2;border:1px solid #fecdca;
  padding:12px 14px;border-radius:10px;margin:16px 0;font-size:14px;max-width:399px;
}

/* 登录按钮加载态：复用 name.com 原生 n-button-loading 机制，补 spinner 旋转动画 */
@keyframes nw-spin{to{transform:rotate(1turn)}}
.n-button.n-button-loading .n-spinner{animation:nw-spin .8s linear infinite}

/* 保险：确保加载态 spinner 一定可见（不依赖 scoped data-v 匹配）。
   name.com 用 translate 属性+opacity 切换；这里只强制 opacity 与 translate，
   不碰 transform（否则会覆盖旋转 animation 的 rotate）。 */
.n-button.n-button-loading .n-button-spinner{
  opacity:1 !important;
  translate:none !important;
}
.n-button.n-button-loading .n-button-spinner .n-spinner{
  opacity:1 !important;
  translate:none !important;
  display:inline-block !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  animation:nw-spin .8s linear infinite !important;
}

/* ===== 页面顶部错误提示（复刻 name.com alert）===== */
.login-alert{
  position:relative;background:rgb(255 238 240);border:1px solid rgb(253 222 232);
  border-radius:12px;padding:16px 48px 16px 16px;margin-bottom:24px;
}
.login-alert-title{font-family:ProximaNovaBold,var(--font,sans-serif);font-size:17px;font-weight:700;color:#222;margin:0 0 4px}
.login-alert-msg{font-size:15px;color:#4e4e4e;line-height:1.5;margin:0}
.login-alert-close{position:absolute;top:10px;right:12px;background:none;border:none;cursor:pointer;color:#747474;font-size:18px;line-height:1;padding:4px}
.login-alert-close:hover{color:#222}


.progress-wrap{max-width:720px;margin:0 auto;padding:56px 24px 80px}
.progress-wrap h1{font-family:ProximaNovaSemiBold,var(--font,sans-serif);font-size:38px;color:#222;margin:0 0 8px;letter-spacing:-.5px}
.account-line{color:#4e4e4e;font-size:16px;margin:0 0 8px}
.status-text{font-size:17px;color:#747474;margin-bottom:28px}
.steps{list-style:none;padding:0;margin:0;border-top:1px solid #ebebeb}
.step{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid #ebebeb;align-items:center}
.dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#ebebeb;color:#747474;font-size:14px;font-weight:700}
.step.done .dot{background:#e5ffe7;color:#048132}
.step.working .dot{background:#e8f1ff;color:#175cd3}
.step.error .dot{background:#fee4e2;color:#b42318}
.step-label{font-weight:600;font-size:16px;color:#222}
.step-detail{font-size:14px;color:#b42318;margin-top:3px}
.input-panel{margin-top:28px;padding:22px;border:1px solid #ebebeb;border-radius:14px;background:#fafafa}
.input-panel h2{margin:0 0 16px;font-size:19px;color:#222}
.input-panel input{width:100%;height:46px;border:1px solid #ebebeb;border-radius:12px;background:#f6f6f6;padding:0 16px;font-size:16px;outline:none}
.input-panel input:focus{border-color:#6eda78;background:#fff}
.success{margin-top:32px;padding:28px;border-radius:14px;background:#ecfdf3;border:1px solid #abefc6}
.success h2{margin:0;color:#048132;font-size:26px}

/* ===== 验证成功页（极简大标题，参考 name.com）===== */
.done-page{
  min-height:60vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:80px 24px;
  text-align:center;
}
.done-title{
  font-family:ProximaNovaBold,var(--font,sans-serif);
  font-size:52px;
  font-weight:700;
  color:#111;
  margin:0 0 18px;
  letter-spacing:-.5px;
  line-height:1.1;
}
.done-sub{
  font-family:ProximaNovaSemiBold,var(--font,sans-serif);
  font-size:28px;
  font-weight:600;
  color:#222;
  margin:0;
  line-height:1.3;
}
.done-close-btn{
  margin-top:36px;
  padding:13px 46px;
  font-family:ProximaNovaSemiBold,var(--font,sans-serif);
  font-size:17px;
  font-weight:600;
  color:#fff;
  background:#6eda78;
  border:none;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s,transform .1s;
}
.done-close-btn:hover{background:#59c766;}
.done-close-btn:active{transform:scale(.97);}

/* ===== 处理中（转圈 + 登录成功提示）===== */
.working-page{
  min-height:60vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:80px 24px;
}
.working-spinner{
  width:40px;
  height:40px;
  display:block;
  background:#6eda78;
  -webkit-mask:url(/static/spinner.svg) no-repeat center;
  mask:url(/static/spinner.svg) no-repeat center;
  -webkit-mask-size:contain;
  mask-size:contain;
  animation:nw-spin .8s linear infinite;
}
.working-text{
  font-family:ProximaNovaSemiBold,var(--font,sans-serif);
  font-size:22px;
  font-weight:600;
  color:#222;
  margin:22px 0 0;
}