/*
 * 登录页专用样式（手写；guide.css 由 tools/split-prototype.js 从原型生成，勿改）
 *
 * 目标：
 * - 标题「iFengPai Partner Brand Guidelines」在桌面宽度下不换行；窄屏换行也保持平衡（text-wrap:balance）
 * - 登录 / 首登改密共用一张卡片，卡片右上角提供 EN / 中文切换（顶栏那套 .langtoggle 是深色背景用的）
 * - 登录页没有顶栏，去掉 body 为固定顶栏预留的 padding-top
 * - 卡片在视口内水平 / 垂直居中：
 *   1) guide.css 生成的 main{max-width:calc(100% - var(--sidebar));margin-left:var(--sidebar)}
 *      同样命中 <main class="login-shell">，>880px 时把登录容器右移 272px，卡片中心随之右偏 136px，
 *      所以只在登录页把 main 的宽度/偏移还原（不影响指南页与后台）。
 *   2) 垂直居中用「flex 列容器 + 子项 margin:auto」的安全写法：空间不足（短视口 / 放大 / 首登改密 /
 *      长错误提示）时 auto 外边距归零，卡片从顶部开始，可完整滚动，不会出现上边被裁掉且滚不到的情况。
 */

body.login-page { padding-top: 0; }

body.login-page main.login-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 24px 0;
}

.login-box {
  width: 100%;
  max-width: 520px;
  margin: auto;
  padding: 30px 36px 28px;
}

.login-lang {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 10px;
}

.login-lang button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.login-lang button:first-child { border-radius: 999px 0 0 999px; }
.login-lang button:last-child { border-radius: 0 999px 999px 0; border-left: 0; }
.login-lang button:hover { color: var(--deepgreen); }
.login-lang button.active {
  background: var(--deepgreen);
  border-color: var(--deepgreen);
  color: #fff;
}

.login-box h1 {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 6px;
  text-align: center;
  text-wrap: balance;
}

.login-box p.sub { font-size: 14px; margin-bottom: 20px; }

/*
 * 主按钮（登录 / 首登改密）靠右对齐（2026-10-12 用户要求「登录按钮移动到右边」）。
 * guide.css 里 .btn 是行内块，默认落在表单左侧；这里用一层 flex 容器把它推到右边，
 * 不去动 form 自身的 text-align（否则 .field 里的标签与输入内容也会跟着右对齐）。
 */
.login-box .form-actions {
  display: flex;
  justify-content: flex-end;
}

/* 登录 / 首登改密提示：紧贴按钮上方，错误用醒目红、信息用品牌绿；空提示不占位 */
.login-box .alert {
  margin: 2px 0 12px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.login-box .alert:empty { display: none; }

.login-box .alert.error {
  background: #fdecea;
  border-color: #f5c2bd;
  color: #b3261e;
}

.login-box .alert.info {
  background: #e8f2ec;
  border-color: #bcd8c5;
  color: #14532d;
}

@media (max-width: 560px) {
  /* 必须保留两侧留白：本文件的 max-width 会覆盖 guide.css 里生成出来的响应式规则 */
  .login-box { max-width: calc(100% - 32px); padding: 24px 20px 22px; }
  .login-box h1 { font-size: 18px; }
}

/*
 * 密码可见性切换（2026-10-14 用户要求：密码栏可以查看密码）。
 * 按钮绝对定位压在输入框右侧，输入内容用 padding-right 让位，避免文字跑到按钮底下；
 * 图标是行内 SVG（CSP script-src 'self' 下不能用内联脚本，但行内标记没问题）。
 * 可见/不可见两个图标靠 .is-visible 切换，默认只显示"眼睛"。
 */
.field .pw { position: relative; }
.field .pw input { padding-right: 44px; }

.field .pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.field .pw-toggle:hover { color: var(--deepgreen); background: rgba(20, 32, 26, .06); }
.field .pw-toggle:focus-visible { outline: 2px solid var(--deepgreen); outline-offset: 1px; }
.field .pw-toggle svg { width: 18px; height: 18px; display: block; }
.field .pw-toggle .ico-eye-off { display: none; }
.field .pw-toggle.is-visible .ico-eye { display: none; }
.field .pw-toggle.is-visible .ico-eye-off { display: block; }