/* ============================================================
   auth.css —— 登录门 / 强制改密 / 管理后台 的补充样式
   复用 style.css 的变量与基础类（.card/.btn/.chip 等），仅新增页面级样式。
   ============================================================ */

/* ---------- 登录门：居中卡片 ---------- */
/* 登录/改密阶段隐藏课程壳的侧栏、取消内容区上下边距，让卡片在整个视口内垂直水平居中；
   课程/控制台启动后由前端脚本移除 auth-gate 类。
   authwrap 左右加 16px 内边距（阶段5 计划 5.5：320px 屏上卡片不再贴边） */
body.auth-gate .side{display:none}
/* 阶段2 §4.2：登录/改密/选课改为整页分区——内容区放开宽度限制，居中交给各 auth 页
   自管（.authwrap 垂直居中、.authsplit 左右分区、.selwrap 水平居中，均自带收窄）。
   不改 body 状态类契约，course 页启动后仍由前端脚本移除 auth-gate。 */
body.auth-gate .content{max-width:none;margin:0;padding:0}
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.authcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 26px;width:100%;max-width:400px}
.authcard h1{font-size:20px;margin-bottom:4px}
.authcard .sub{font-size:13.5px;color:var(--mut);margin-bottom:18px}
.authfield{margin-bottom:14px}
.authfield label{display:block;font-size:var(--fs-aux);font-weight:600;margin-bottom:6px;color:var(--ink)}
/* 输入框触控高度 ≥44px（v4 执行书 6.2.2）+ select 同观感同高度 */
.authfield input{width:100%;padding:10px 12px;border-radius:var(--r-ctl);border:1.5px solid var(--line);font-size:14.5px;font-family:inherit;outline:none;min-height:44px}
.authfield input:focus{border-color:var(--pri)}
/* 基础规则移除了 outline（计划 6.4 红线：focus 不能只靠 border），键盘/点击聚焦补回描边 */
.authfield input:focus-visible{outline:2px solid var(--pri);outline-offset:1px}
/* 下拉框与输入框同观感（阶段5 计划 4.6 管理台一致性）：管理台「初始状态/提问筛选」
   用到 .authfield select，此前无样式呈原生外观，与相邻输入框不一致；只补观感，不改行为 */
.authfield select{width:100%;padding:10px 12px;border-radius:var(--r-ctl);border:1.5px solid var(--line);font-size:14.5px;font-family:inherit;outline:none;background:var(--card);color:var(--ink);min-height:44px}
.authfield select:focus{border-color:var(--pri)}
.authfield select:focus-visible{outline:2px solid var(--pri);outline-offset:1px}
/* 错误提示：出现/消失不引起横向溢出（长文案换行）；
   登录卡里错误框位于说明文字之后（卡片末尾），.authnote+.autherr 补上间距——
   出错时只向下扩展卡片底部，不把表单往下顶（阶段5 计划 5.5） */
.autherr{display:none;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-size:13.5px;border-radius:var(--r-ctl);padding:9px 12px;margin-bottom:14px;word-break:break-word}
.autherr.show{display:block}
.authnote+.autherr{margin-top:12px}
.authcard .btn.pri{width:100%;padding:11px}
.authnote{font-size:var(--fs-aux);color:var(--mut);margin-top:14px;line-height:1.6}
.authnote a{color:var(--prid);font-weight:600;text-decoration:none}
.authnote a:hover{text-decoration:underline}
.authloading{text-align:center;color:var(--mut);padding:60px 0}

/* ---------- 登录页整页分区（阶段2 计划 4.2）----------
   桌面 ≥960px：整页左右分区取代原「两张卡拼接」——左品牌区落在暖纸面(--bg)、右表单区
   落在卡纸面(--card)，中缝一条细分隔线；两侧用对齐与留白区分。品牌侧只保留一个青柠印记
   + 课程定位 + 三条真实特点，删除淡网格与大号低透明装饰；表单单列（最大 340px）居中。
   手机 <960px：紧凑品牌头部（印记+名称+一句定位）压成上栏，特点与装饰隐藏，表单全宽。
   行为契约不变：login-form / login-username / login-password / login-submit / login-err
   五节点、autocomplete、401/429 处理与登录后路由全部沿用（见 auth-app.js renderLogin）。 */
.authsplit{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,520px)}
.authbrand{background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:18px;padding:48px clamp(28px,7vw,96px)}
.ab-head{display:flex;align-items:center;gap:10px;color:var(--prid)}
.ab-head svg{flex:none;color:var(--pri)}
.ab-name{font-size:21px;font-weight:600;color:var(--prid);letter-spacing:1px}
/* v3 计划 4.2：两级品牌主张——主主张为品牌侧最大文字（36px，<br> 在逗号后定行位，
   不靠断行运气，杜绝「练。」式孤字）；补充说明降一级，不与主主张同级 */
.ab-claim{font-size:36px;line-height:1.35;font-weight:600;color:var(--ink);margin:6px 0 0;letter-spacing:.5px}
.ab-sub{font-size:15.5px;line-height:1.8;color:var(--mut);margin:0}
/* 三条真实特点：纯文字行 + 细分隔线，不再用图标框（v3：短标题 + 一行短说明） */
.ab-feats{list-style:none;margin:8px 0 0;padding:0;max-width:42ch}
.ab-feats li{padding:12px 0;border-top:1px solid var(--pri-line)}
.ab-ftext b{display:block;font-size:14.5px;color:var(--ink);line-height:1.5}
.ab-ftext span{display:block;font-size:13px;color:var(--mut);line-height:1.6;margin-top:2px}
.authpane{display:flex;align-items:center;justify-content:center;background:var(--card);border-left:1px solid var(--line);padding:48px 36px}
/* 分区后表单不再套卡：去掉 .authcard 的边框/底色/圆角，纸面直接承载表单 */
.authsplit .authcard{border:none;background:transparent;border-radius:0;padding:0;width:100%;max-width:340px}
/* v3 计划 4.3：表单下方拆两层——.authnote 只讲账号说明；.authtry 体验入口独立分组，
   上虚线分隔拉开层次；试学加粗文字链比介绍链接醒目，但不与「登录」形成双实心主按钮 */
.authtry{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:6px}
.authtry .trylink{font-size:15px;font-weight:600;color:var(--prid);text-decoration:none}
.authtry .trylink:hover{text-decoration:underline}
.authtry .trysub{font-size:13px;color:var(--mut)}
.authtry .trysub a{color:var(--prid);font-weight:600;text-decoration:none}
.authtry .trysub a:hover{text-decoration:underline}
@media (max-width:959px){
  /* 手机端：紧凑品牌头部（印记+名称+缩档主主张）+ 全宽表单；特点列表隐藏；
     主主张手机端降到 20px，不把登录表单挤到过长首屏之后 */
  .authsplit{grid-template-columns:1fr}
  .authbrand{padding:26px 20px 20px;gap:8px;justify-content:flex-start}
  .ab-name{font-size:18px}
  .ab-claim{font-size:20px;line-height:1.4;margin-top:2px}
  .ab-sub{font-size:13.5px;line-height:1.7}
  .ab-feats{display:none}
  .authpane{border-left:none;border-top:1px solid var(--line);padding:24px 20px 44px;align-items:flex-start}
  .authsplit .authcard{max-width:none}
  /* 移动端输入 16px（v4 执行书 6.2.2）：防 iOS 聚焦自动放大（登录/改密/选课壳/管理台共用） */
  .authfield input,.authfield select{font-size:16px}
}

/* ---------- 一次性密码展示框（创建账号/重置密码） ---------- */
.pwbox{background:var(--brand-soft);border:1px solid var(--pri-line);border-radius:var(--r-md);padding:14px 16px;margin:12px 0}
.pwbox .pwlabel{font-size:var(--fs-aux);color:var(--prid);font-weight:600;margin-bottom:4px}
.pwbox code{font-family:var(--mono);font-size:17px;font-weight:700;letter-spacing:.5px;color:var(--prid);word-break:break-all}
.pwbox .pwhint{font-size:12px;color:var(--mut);margin-top:6px}

/* ---------- 管理后台 ---------- */
.statrow{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.statrow .stat{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 18px;text-align:center;min-width:130px}
.statrow .stat b{display:block;font-size:20px;color:var(--prid);font-variant-numeric:tabular-nums}
.statrow .stat span{font-size:var(--fs-aux);color:var(--mut)}
.utable{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:13.5px}
.utable th,.utable td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap}
.utable th{background:var(--brand-pale);font-size:var(--fs-aux);color:var(--mut);font-weight:600}
.utable tr:last-child td{border-bottom:none}
.utable .uname{font-weight:600}
.badge{display:inline-block;font-size:12px;font-weight:600;border-radius:6px;padding:2px 8px}
.badge.on{background:var(--brand-soft);color:var(--prid)}
.badge.off{background:#f1f5f9;color:var(--mut)}
.badge.warn{background:#fef3c7;color:var(--warning)}
.badge.role{background:#ede9fe;color:#6d28d9}
.rowbtns{display:flex;gap:6px;flex-wrap:wrap}
.setrow{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:8px}
.setrow .authfield{margin-bottom:0;max-width:200px}
.overwarn{background:#fff7ed;border:1px solid #fdba74;color:#9a3412;font-size:var(--fs-aux);border-radius:var(--r-ctl);padding:9px 12px;margin:10px 0}

/* ---------- 阶段5：内联 SVG 状态图标对齐（管理台/登录门 emoji 已换统一线性 SVG） ---------- */
.authcard h1 svg{vertical-align:-4px;color:var(--prid)}
.pwbox .pwlabel svg{vertical-align:-3px;color:var(--prid)}
.overwarn svg{vertical-align:-3px;color:#9a3412}

/* ---------- 选课封面（阶段2 计划 4.2）：差异改由符号/章数/进度构成 ----------
   v4 阶段3（执行书 6.3.3）：封面行不再展示内部 slug（.selcode 已随卡片 a 化一并移除），
   封面行 = 课程符号 + 章数徽标纯文字；课程差异由符号、名称与进度表达，
   进度仍由 .selprog 呈现（ai-tools 的蓝色进度条等 style.css 规则不覆盖）。
   auth.css 在 style.css 之后加载，此处覆盖生效；管理台不使用这些类。 */
.selcover{background:transparent;border:none;border-bottom:1px solid var(--line);border-radius:0;padding:0 0 10px;gap:10px;justify-content:space-between;color:var(--mut);margin-bottom:12px}
.selcard[data-slug="python-ecom"] .selcover,
.selcard[data-slug="ai-tools"] .selcover{background:transparent;border-bottom-color:var(--line);color:var(--mut)}
.selcover .selsym{color:var(--pri)}
.selcover .selbadge{margin-left:auto;background:transparent;border:none;padding:0;color:var(--mut);font-size:12px;font-weight:600}
/* style.css 对 ai-tools 徽标有更高特异度的着色（蓝底胶囊），此处同维度覆盖为纯文字，
   保证所有课程封面行统一为「符号……章数」纯文字构成。 */
.selcard[data-slug="ai-tools"] .selcover .selbadge{background:transparent;border:none;color:var(--mut)}
/* 课程卡改真实 <a>（v4 执行书 6.3.2）：去链接默认样式、整卡可点（右键/中键新开为原生行为），
   卡内「开始/继续学习」为 <span class="btn pri"> 非交互元素（不再是链接内按钮，审计 P2-4） */
a.selcard{display:block;text-decoration:none;color:inherit}
a.selcard:hover{border-color:var(--pri)}
a.selcard:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
