/* ═══════════════════════════════════════════════════════════════════════════
   登录门 v3「素白单色」—— 独立样式表
   ───────────────────────────────────────────────────────────────────────────
   为什么单独成文件而不是塞进 index.html 主样式块：
     主样式块已有 1846 行、承载整个工作台；登录门是自包含的一块，单独文件
     便于回滚（删掉一个 link 即可），diff 也看得清。

   为什么所有类名都带 .sg- 前缀：
     新登录页的原始类名与工作台大面积重名 —— 实测 .card 命中 88 处、
     .page / .brand(26) / .field / .reveal / .bar 同样命中。同优先级下后出现者
     胜出，不加前缀必然出现"某个元素样式莫名不对"的静默失效。
     .sg- 在 index.html style 块、redesign.css 与全部内联 JS 中均为 0 命中（已验）。

   加载顺序：redesign.css → gate.css。本文件在后，同优先级下本文件胜出。
   ═══════════════════════════════════════════════════════════════════════════ */

/* 容器：display:none 必须在这里重申。
   index.html 与 redesign.css 里各有一段旧的 .site-gate{display:none; ...}，
   那些规则仍在（只是其内部元素已不在 DOM 里）。这里显式重申，不依赖加载顺序。 */
.site-gate{display:none}
.site-gate.on{display:flex}
body.site-locked{overflow:hidden}

/* ⚠ align-items:stretch 是**必须**的，不是可选美化。
   实测踩到：旧规则里 .site-gate 是 display:flex; align-items:center ——
   旧版只有一个卡片子元素，居中没错；但新门是「顶栏 / 提示条 / 主体」纵向排布，
   父级 align-items:center 会把 .sg-page 这个 flex:0 1 auto 的子项**收缩成内容宽**，
   连带里面的 .sg-stage（main）只剩 349px、登录卡被压到 309px（应为 392px）。
   症状很像"卡片 max-width 没生效"，实际是父级对齐方式把宽度吃掉了。 */
.site-gate{align-items:stretch;justify-content:flex-start}
.site-gate > .sg-page{flex:1 1 auto;min-width:0;width:100%}


/* ═══════════ 1. 令牌：沿用项目的刻度，只保留中性色 ═══════════
   旧 :root 里的 --brand:#2E8FD2 / --accent:#B9502B / --warn 在这页不引用：
   单色体系里唯一的语义色只留给「错误」（陶土色，与项目原义一致）。 */
:root{
  --bg:#F7FAFD;
  --surface:#FFFFFF;
  --ink:#10192B;
  --ink-2:#3A4457;
  --muted:#76839B;
  --line:#E4EAF1;
  --line-strong:#C4D2E2;

  /* 单色层：整页视觉的骨架 */
  --mono-000:#FFFFFF;
  --mono-050:#FBFBFA;
  --mono-100:#F3F2F0;
  --mono-200:#E8E6E3;
  --mono-400:#B4B4B4;
  --mono-600:#767676;
  --mono-800:#3D3D3D;
  --mono-900:#171717;
  --mono-ink:rgba(23,23,23,.07);
  --mono-ink-2:rgba(23,23,23,.14);

  --accent:#B9502B;          /* 只用于错误态 */

  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-xl:18px;
  --radius-pill:999px;

  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-rise:cubic-bezier(.2,.8,.2,1);
  --shadow-1:0 1px 2px rgba(15,20,25,.05),0 4px 12px rgba(15,20,25,.03);
  --shadow-2:0 6px 24px rgba(23,23,23,.08),0 2px 6px rgba(23,23,23,.04);
  --shadow-3:0 18px 44px -24px rgba(23,23,23,.22);

  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;

  --card-w:392px;            /* 表单卡宽度 */
  --shell-w:1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button,input{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
a{color:var(--mono-900);text-decoration:none}
a:hover{text-decoration:underline}

/* ═══════════ 2. 底板：一条径向渐变 + 光斑场 ═══════════
   旧版这里是「径向渐变 + Sylva 照片 + 径向白纱 + 卡片底 + 品牌图」五层，
   层与层的遮罩边界对不齐，就是中部那道矩形硬边的来源。
   现在只剩两层：底色渐变（CSS）和光斑场（画布）。 */
.sg-page{
  position:relative;
  min-height:100%;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(130% 105% at 50% 34%, var(--mono-050) 0%, var(--mono-100) 34%, var(--mono-200) 68%, #DBD9D5 100%);
  overflow-x:hidden;
}
/* 光斑场：铺满视口，但**位置绝对**不影响布局 */
.sg-bokeh{
  position:fixed;inset:0;
  width:100%;height:100%;
  display:block;pointer-events:none;
  z-index:0;
}
/* 中心椭圆压暗光斑，保证表单区域文字始终清晰 —— 旧版靠一层径向白纱实现，
   那层纱的 inset 边界正是卡片硬边的来源；这里改用画布内的衰减（见 JS），
   不再叠任何 DOM 层，所以不可能产生边界。 */

/* ═══════════ 3. 顶栏：浅色、单色、四栏导航 ═══════════ */
.sg-bar-wrap{
  position:relative;z-index:3;
  flex:0 0 auto;
  display:flex;justify-content:center;
  padding:26px 20px 0;
}
.sg-bar{
  width:100%;max-width:var(--shell-w);
  display:flex;align-items:center;gap:18px;
  height:60px;
  padding:0 10px 0 18px;
  background:linear-gradient(rgba(255,255,255,.90),rgba(255,255,255,.76));
  border:1px solid var(--mono-ink);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-3),0 1px 0 rgba(255,255,255,.9) inset;
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
}

/* 品牌：纯文字字标。旧版是 236×62 的蓝紫渐变图片位 + 竖排 QI/DIAN + 深色徽章，
   最挤时三样叠在一起互相压字。这里只留一行字，多余的一律不要。 */
.sg-brand{
  display:flex;align-items:baseline;gap:9px;
  flex:0 0 auto;
  user-select:none;
}
.sg-brand b{
  font-size:17px;font-weight:600;letter-spacing:.02em;color:var(--mono-900);
}
.sg-brand span{
  font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mono-400);
}

/* 导航：四个真 button，天然可键盘聚焦 */
.sg-nav{
  display:flex;gap:4px;align-items:center;
  margin-left:auto;
}
.sg-nav button{
  height:38px;padding:0 15px;
  border-radius:var(--radius-md);
  font-size:13.5px;color:var(--mono-600);
  display:inline-flex;align-items:center;gap:7px;
  transition:background .18s,color .18s;
  white-space:nowrap;
}
.sg-nav button:hover{background:rgba(23,23,23,.05);color:var(--mono-900)}
.sg-nav button[aria-selected="true"]{
  background:var(--mono-900);color:#fff;font-weight:500;
  box-shadow:0 8px 20px -10px rgba(23,23,23,.55);
}
.sg-nav button:focus-visible,
.sg-link:focus-visible,
.sg-btn:focus-visible,
input:focus-visible{
  outline:2px solid var(--mono-900);
  outline-offset:2px;
}
.sg-nav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;opacity:.9}

/* ═══════════ 4. 主体：卡片垂直居中，尺寸随面板变 ═══════════
   ⚠ 旧版卡片从 y=365 才开始，上方空 235px，头重脚轻。
   这里用 flex:1 + 居中让卡片在「顶栏以下的剩余空间」里居中，
   并给上下留不对称内边距（下方略多），视觉重心略高于几何中心。 */
.sg-stage{
  position:relative;z-index:2;
  flex:1 1 auto;
  display:flex;align-items:center;justify-content:center;
  padding:34px 20px 56px;
  min-height:0;
}

.sg-card{
  width:100%;
  max-width:var(--card-w);
  background:var(--surface);
  border:1px solid var(--mono-ink);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-2);
  padding:30px 30px 24px;
  transition:max-width .3s var(--ease-out);
}
/* 产品 / 使用指引是宽面板 */
.sg-card.sg-wide{max-width:660px}

/* 面板切换：用 hidden 属性，不靠内联 style.display */
[hidden]{display:none !important}

.sg-panel-head{margin-bottom:22px}
.sg-panel-head h1{
  margin:0;font-size:21px;font-weight:600;letter-spacing:.01em;color:var(--mono-900);
  line-height:1.35;
}
.sg-panel-head p{
  margin:7px 0 0;font-size:13px;color:var(--mono-600);line-height:1.6;
}

/* ═══════════ 5. 表单 ═══════════ */
.sg-field{margin-bottom:14px}
.sg-field label{
  display:block;margin-bottom:6px;
  font-size:12.5px;font-weight:500;color:var(--ink-2);
}
.sg-field .sg-hint{
  font-weight:400;color:var(--mono-400);margin-left:6px;
  font-size:11.5px;
}
.sg-input{
  width:100%;height:47px;padding:0 15px;
  font-size:14px;color:var(--mono-900);
  background:var(--mono-050);
  border:1px solid var(--mono-ink);
  border-radius:var(--radius-md);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.sg-input::placeholder{color:var(--mono-400)}
.sg-input:hover{border-color:var(--mono-ink-2)}
.sg-input:focus{
  outline:none;
  background:#fff;
  border-color:rgba(23,23,23,.34);
  box-shadow:0 0 0 4px rgba(23,23,23,.06);
}
.sg-input[aria-invalid="true"]{
  border-color:rgba(185,80,43,.55);
  background:#FEFAF8;
}
.sg-input[aria-invalid="true"]:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(185,80,43,.10);
}
/* 密码可见性开关：绝对定位进输入框，不改 DOM 结构 */
.sg-input-wrap{position:relative}
.sg-input-wrap .sg-input{padding-right:46px}
.sg-reveal{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:8px;
  display:grid;place-items:center;color:var(--mono-400);
  transition:color .16s,background .16s;
}
.sg-reveal:hover{color:var(--mono-900);background:rgba(23,23,23,.05)}
.sg-reveal svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.sg-reveal .sg-eye-off{display:none}
.sg-reveal[aria-pressed="true"] .sg-eye-on{display:none}
.sg-reveal[aria-pressed="true"] .sg-eye-off{display:block}

/* 字段级错误：只在有内容时占位，不预占 20px 空白 */
.sg-field-err{
  margin-top:6px;font-size:12px;color:var(--accent);
  display:flex;align-items:center;gap:5px;
}
.sg-field-err:empty{display:none}

/* 验证码行：label 高 23px（12.5px 字 + 6px 下边距 + 行高），
   所以按钮用 align-self:flex-end 对齐输入框底边，不再靠手填 margin-top 猜数字。 */
.sg-code-row{display:flex;gap:8px;align-items:flex-end}
.sg-code-row .sg-field{flex:1;margin-bottom:0;min-width:0}
.sg-btn-code{
  flex:0 0 auto;height:47px;padding:0 15px;
  border-radius:var(--radius-md);
  font-size:13px;font-weight:500;color:var(--mono-800);
  background:#fff;border:1px solid var(--mono-ink-2);
  white-space:nowrap;
  transition:background .16s,border-color .16s,color .16s;
}
.sg-btn-code:hover:not(:disabled){background:var(--mono-050);border-color:rgba(23,23,23,.24)}
.sg-btn-code:disabled{color:var(--mono-400);cursor:not-allowed;background:var(--mono-050)}

/* 主按钮：近黑，全页唯一的强对比元素 */
.sg-btn{
  width:100%;height:47px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius-md);
  font-size:14px;font-weight:500;letter-spacing:.02em;color:#fff;
  background:var(--mono-900);
  box-shadow:0 6px 18px rgba(23,23,23,.20);
  transition:background .16s,box-shadow .16s,transform .1s;
}
.sg-btn:hover:not(:disabled){background:#000;box-shadow:0 8px 24px rgba(23,23,23,.26)}
.sg-btn:active:not(:disabled){transform:translateY(1px)}
.sg-btn:disabled{background:rgba(23,23,23,.42);box-shadow:none;cursor:not-allowed}
.sg-btn .sg-spin{
  width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .7s linear infinite;
  display:none;
}
.sg-btn.sg-loading .sg-spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.sg-form-actions{margin-top:20px}

/* 卡片内的次级链接 */
.sg-form-foot{
  margin-top:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:12.5px;color:var(--mono-600);
}
.sg-link{
  color:var(--mono-800);font-size:12.5px;
  border-bottom:1px solid var(--mono-ink-2);
  transition:border-color .16s,color .16s;
}
.sg-link:hover{color:var(--mono-900);border-color:var(--mono-900);text-decoration:none}

/* 表单级消息条：兼作错误/成功/说明。空时不占位。 */
.sg-form-msg{
  margin-top:16px;padding:11px 13px;
  border-radius:var(--radius-md);
  font-size:12.5px;line-height:1.6;
  display:flex;gap:8px;align-items:flex-start;
  background:var(--mono-050);border:1px solid var(--mono-ink);color:var(--ink-2);
}
.sg-form-msg:empty{display:none;padding:0;margin:0;border:0}
.sg-form-msg.sg-err{background:#FDF3EF;border-color:rgba(185,80,43,.22);color:#8E3D1F}
.sg-form-msg.sg-ok{background:#F1F7F2;border-color:rgba(31,157,85,.22);color:#1F6B44}
.sg-form-msg b{font-weight:600}

/* ═══════════ 6. 产品 / 使用指引（宽面板） ═══════════ */
.sg-stats{
  display:flex;justify-content:center;gap:0;
  margin:0 0 22px;
  border-top:1px solid var(--mono-ink);
  border-bottom:1px solid var(--mono-ink);
}
.sg-stats > div{
  flex:1;padding:16px 8px;text-align:center;
  border-right:1px solid var(--mono-ink);
}
.sg-stats > div:last-child{border-right:0}
.sg-stats b{display:block;font-size:24px;font-weight:600;line-height:1;color:var(--mono-900)}
.sg-stats b i{font-style:normal;font-size:12px;color:var(--mono-400);margin-left:2px;font-weight:400}
.sg-stats span{display:block;margin-top:6px;font-size:11.5px;color:var(--mono-600)}

.sg-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sg-cards article{
  background:var(--mono-050);
  border:1px solid var(--mono-ink);
  border-radius:var(--radius-lg);
  padding:15px;
}
.sg-cards h3{
  margin:0 0 6px;font-size:13.5px;font-weight:600;color:var(--mono-900);
  display:flex;align-items:center;gap:8px;
}
/* 方块字标：旧版用浅蓝色底（rgba(103,180,236,.16)），是页面上少数几处彩色之一 */
.sg-cards h3 i{
  width:22px;height:22px;border-radius:7px;flex:0 0 auto;
  background:rgba(23,23,23,.06);color:var(--mono-800);
  display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;
}
.sg-cards p{margin:0;font-size:12px;line-height:1.7;color:var(--mono-600)}

.sg-steps{display:flex;flex-direction:column;gap:9px}
.sg-steps article{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--mono-050);border:1px solid var(--mono-ink);
  border-radius:var(--radius-lg);padding:13px 15px;
}
.sg-steps b{
  flex:0 0 auto;width:23px;height:23px;border-radius:8px;
  background:var(--mono-900);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:600;
}
.sg-steps h4{margin:0 0 3px;font-size:13px;font-weight:600;color:var(--mono-900)}
.sg-steps p{margin:0;font-size:12px;line-height:1.65;color:var(--mono-600)}
.sg-steps kbd{
  font:inherit;font-size:11px;padding:1px 5px;border-radius:4px;
  background:rgba(23,23,23,.07);color:var(--mono-800);
}

/* 页脚说明 */
.sg-foot-note{
  margin-top:22px;padding-top:16px;
  border-top:1px solid var(--mono-ink);
  font-size:11.5px;color:var(--mono-400);line-height:1.7;
}

/* ═══════════ 7. 部署提示条（仅当后端不可用时出现）═══════════
   本地 python -m http.server 没有 Pages Functions，/api/* 必然 404。
   不提示的话会被误读成"登录页坏了"。 */
.sg-env-note{
  position:relative;z-index:4;
  max-width:var(--shell-w);margin:14px auto 0;padding:0 20px;
  width:100%;
}
.sg-env-note[hidden]{display:none !important}
.sg-env-note div{
  background:#FDF3EF;border:1px solid rgba(185,80,43,.22);
  border-radius:var(--radius-md);padding:10px 13px;
  font-size:12px;line-height:1.6;color:#8E3D1F;
}
.sg-env-note code{
  font-family:var(--mono);font-size:11.5px;
  background:rgba(185,80,43,.10);padding:1px 5px;border-radius:4px;
}

/* ═══════════ 8. 响应式 ═══════════ */
@media (max-width:900px){
  .sg-bar-wrap{padding:16px 14px 0}
  .sg-bar{height:auto;flex-wrap:wrap;gap:10px;padding:12px 12px}
  .sg-nav{margin-left:0;width:100%;overflow-x:auto;padding-bottom:2px}
  .sg-nav button{padding:0 12px;flex:0 0 auto}
  .sg-stage{padding:24px 14px 40px}
}
@media (max-width:760px){
  /* 窄屏放不下「品牌 + 4 项」：隐藏按钮文字只留图标 */
  .sg-nav button span{display:none}
  .sg-nav button{padding:0 11px}
  .sg-nav svg{width:17px;height:17px}
  .sg-cards{grid-template-columns:1fr}
  .sg-stats > div{padding:13px 4px}
  .sg-stats b{font-size:20px}
}
@media (max-width:480px){
  .sg-card{padding:24px 20px 20px}
  .sg-panel-head h1{font-size:19px}
  .sg-brand span{display:none}
  .sg-env-note{padding:0 14px}
}

/* ═══════════ 9. 无障碍：减弱动效 / 自动填充修正 ═══════════ */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .sg-btn .sg-spin{animation:spin .7s linear infinite !important}  /* 加载态保留：它是状态指示不是装饰 */
}

/* Chrome 自动填充强制加 #E8F0FE 背景，优先级高于普通 CSS 且 background 无效，
   只能用超大 inset box-shadow 盖住。这是旧版踩过的坑，这里直接带上。 */
.sg-input:-webkit-autofill,
.sg-input:-webkit-autofill:hover,
.sg-input:-webkit-autofill:focus,
.sg-input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--mono-900) !important;
  caret-color:var(--mono-900);
  transition:background-color 999999s ease-out 0s;
  box-shadow:inset 0 0 0 1000px #fff !important;
}
.sg-input:autofill{
  filter:none;
  box-shadow:inset 0 0 0 1000px #fff !important;
}