/* =============================================================================
 * 护学岗 · 超级管理后台 样式
 * -----------------------------------------------------------------------------
 * 视觉语言**完全沿用小程序前端**（同一套设计变量）：
 *   深蓝底 #071528 / #0B2545 · 金色强调 #E8B54B / #F5D98B
 *   卡片半透明白 · 边框 rgba(140,190,255,.16)
 *   正文 #EAF2FF · 次要 #8FA8C8 · 弱化 #64799A
 *
 * 零构建：原生 HTML + CSS + ES5 语法（不依赖任何框架与构建工具）。
 * ============================================================================= */

:root {
  --c-bg: #071528;
  --c-bg2: #0B2545;
  --c-card: rgba(255, 255, 255, 0.055);
  --c-card2: rgba(255, 255, 255, 0.09);
  --c-line: rgba(140, 190, 255, 0.16);
  --c-line2: rgba(140, 190, 255, 0.32);
  --c-txt: #EAF2FF;
  --c-muted: #8FA8C8;
  --c-dim: #64799A;
  --c-gold: #E8B54B;
  --c-gold2: #F5D98B;
  --c-cyan: #35D0E0;
  --c-danger: #F2707A;
  --c-ok: #5DD39E;
  --r: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(180deg, #071528 0%, #0A1F3C 45%, #071528 100%);
  background-attachment: fixed;
  color: var(--c-txt);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- 登录页 */
.login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 420px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.4);
}
.brand { text-align: center; margin-bottom: 26px; }
/* ★ 品牌红龙盾 LOGO
   · 图片原比例 205:243（竖长盾牌），不能塞进方形框里拉伸
     → 按比例给宽高；object-fit:contain 兜底
   · ★ 不再加外框：盾牌图本身自带深蓝底 + 金边，
     再套一层框会出现「框内还有一圈留白」→ 盾牌显得又小又缩在中间。
     直接让图铺满，视觉上更大更清楚。 */
.brand-logo {
  width: 88px; height: 104px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
}
.brand-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45));
}
.brand-title { font-size: 19px; font-weight: 600; letter-spacing: 1px; }
.brand-sub { font-size: 12px; color: var(--c-dim); margin-top: 6px; letter-spacing: 1px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; color: var(--c-muted); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  color: var(--c-txt); font-size: 14px;
  font-family: inherit;
  transition: border-color .16s, background .16s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--c-gold);
  background: rgba(0, 0, 0, 0.38);
}
.field input::placeholder { color: var(--c-dim); }
.field .req { color: var(--c-danger); margin-left: 3px; }
.field .hint { font-size: 11px; color: var(--c-dim); margin-top: 5px; }

.captcha-row { display: flex; gap: 10px; }
.captcha-row input { flex: 1; }
.captcha-box {
  width: 108px; height: 42px; flex: none;
  background: linear-gradient(135deg, #10294F, #0B1B33);
  border: 1px solid var(--c-line2);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: "SF Mono", Consolas, monospace;
  font-size: 19px; font-weight: 700; letter-spacing: 3px;
  color: var(--c-gold2); cursor: pointer; user-select: none;
}
.captcha-box:active { opacity: .75; }
/* ★ 验证码图片（服务端返回 SVG data URI）
   · 图片自撑满容器 → 用 object-fit:contain，避免非等比拉伸变形
   · 容器本身保留渐变底，图片加载前的瞬间不至于白一块 */
.captcha-box img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 9px;
  display: block;
}

.btn {
  width: 100%; padding: 12px;
  background: linear-gradient(135deg, #F5D98B, #E8B54B 55%, #D39B2E);
  color: #2A1D06; border: none; border-radius: 10px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  font-family: inherit; letter-spacing: 1px;
  transition: opacity .16s, transform .1s;
}
.btn:hover { opacity: .92; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost {
  background: transparent; color: var(--c-muted);
  border: 1px solid var(--c-line2);
}
.btn-danger {
  background: linear-gradient(135deg, #F2707A, #D8455A);
  color: #fff;
}
.btn-sm { width: auto; padding: 7px 14px; font-size: 13px; border-radius: 8px; }

.alert {
  padding: 10px 13px; border-radius: 9px;
  font-size: 13px; margin-bottom: 14px;
  border: 1px solid transparent;
}
.alert-err { background: rgba(242, 112, 122, .12); border-color: rgba(242, 112, 122, .4); color: #FFB4BA; }
.alert-ok { background: rgba(93, 211, 158, .12); border-color: rgba(93, 211, 158, .4); color: #A6E9C8; }
.alert-warn { background: rgba(232, 181, 75, .12); border-color: rgba(232, 181, 75, .4); color: var(--c-gold2); }
.alert-info { background: rgba(53, 208, 224, .1); border-color: rgba(53, 208, 224, .35); color: #A5E9F0; }
.alert:empty { display: none; }

.login-foot { text-align: center; font-size: 11px; color: var(--c-dim); margin-top: 20px; line-height: 1.8; }

/* TOTP 绑定 */
.secret-box {
  background: rgba(0, 0, 0, .32);
  border: 1px dashed var(--c-line2);
  border-radius: 10px; padding: 14px;
  font-family: "SF Mono", Consolas, monospace;
  font-size: 15px; letter-spacing: 2px;
  color: var(--c-gold2); word-break: break-all;
  text-align: center; margin: 10px 0;
}
.otpauth { font-size: 11px; color: var(--c-dim); word-break: break-all; margin-top: 8px; }

/* ---------------------------------------------------------------- 滑块拼图验证
   ★ 替代原 TOTP 动态口令（2026-11-01 业主拍板）
   · 画布：背景图（服务端挖好缺口）+ 拼图块**本身就是拖动对象**
     —— 块直接可拖，鼠标位置与块位置一一对应，服务端拿到的落点
        就是块的左边缘，正好等于缺口坐标。
        （若用「下方手柄带动块」，鼠标与块差一个偏移，
          校验落点时得来回换算，容易出错。）
   · 轨道：只作进度指示
   · 拖动时**逐点记录轨迹**（x/y/时间戳）→ 提交给服务端做人机判别
     （只看最终落点的话，脚本一步到位就能过） */
.slider-box { margin: 4px 0 10px; }
.slider-canvas {
  position: relative;
  width: 100%;
  /* ★ 高度按服务端画布比例算（300:120 = 2.5:1）
     不能靠 img 的固有尺寸撑 —— 那依赖图片加载完成，
     加载前画布是 0 高 → 布局塌陷成一条线。 */
  aspect-ratio: 300 / 120;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--c-line2);
  background: #0A1420;
}
.slider-canvas img {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  display: block;
}
.slider-canvas #sliderPiece {
  /* 尺寸与位置由 JS 按服务端给的坐标算（宽度百分比 + transform） */
  height: auto;
  object-fit: fill;
  cursor: grab;
  touch-action: none;          /* 移动端拖动不滚动页面 */
  will-change: transform;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55));
  z-index: 2;
}
.slider-canvas #sliderPiece:active { cursor: grabbing; }
.slider-canvas #sliderPiece:focus-visible { outline: 2px solid var(--c-gold2); outline-offset: -2px; }
.slider-track {
  position: relative;
  height: 42px; margin-top: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--c-line2);
  border-radius: 21px;
  display: flex; align-items: center;
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
}
.slider-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, rgba(232, 181, 75, .30), rgba(232, 181, 75, .16));
  pointer-events: none;
}
.slider-tip {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--c-dim);
  pointer-events: none;
  transition: opacity .18s;
}
/* 验证通过 */
.slider-box.done .slider-canvas { opacity: .8; pointer-events: none; }
.slider-box.done .slider-fill { background: rgba(90, 200, 130, .28); }

/* ---------------------------------------------------------------- 主框架 */
.app { display: none; }
.app.on { display: block; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 21, 40, .94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line);
  padding: 12px 22px;
  display: flex; align-items: center; gap: 20px;
}
/* 顶栏品牌盾（小尺寸，比例同样按 205:243，避免压扁变形；图自带底与金边，不套外框） */
.topbar .logo {
  width: 24px; height: 28px;
  display: flex; align-items: center; justify-content: center;
}
.topbar .logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.topbar .title { font-size: 15px; font-weight: 600; letter-spacing: .5px; }
.topbar .role {
  font-size: 11px; padding: 2px 9px; border-radius: 20px;
  background: rgba(232, 181, 75, .16); color: var(--c-gold2);
  border: 1px solid rgba(232, 181, 75, .3);
}
.topbar .spacer { flex: 1; }
.topbar .who { font-size: 12px; color: var(--c-muted); }
.topbar .who b { color: var(--c-txt); font-weight: 500; }

.tabs {
  display: flex; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--c-line);
  background: rgba(7,21,40,.6);
  /* ★ 2026-11-02：导航项变多（加了「账户设置」）后，窄窗口下最后一个 tab
     会被**挤出容器**、飘到页面右上角（看着像渲染错乱）。
     改成：容器横向可滚动 + tab 不压缩 → 窄屏时左右滑动看全部，
     任何宽度都不会溢出到容器外。
     overflow-x:auto 必须配 overflow-y:hidden，否则纵向也会出滚动条。 */
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { height: 4px; }
.tabs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 2px; }
.tabs::-webkit-scrollbar-track { background: transparent; }
.tab {
  padding: 12px 16px; font-size: 13px; color: var(--c-muted);
  cursor: pointer; border-bottom: 2px solid transparent;
  white-space: nowrap; user-select: none;
  flex: 0 0 auto;            /* ★ 不被压扁（压扁会让文字断行、撑高导航） */
}
.tab:hover { color: var(--c-txt); }
.tab.on { color: var(--c-gold); border-bottom-color: var(--c-gold); }
.tab.deny { opacity: .35; cursor: not-allowed; }

.main { padding: 22px; max-width: 1400px; margin: 0 auto; }
.page { display: none; }
.page.on { display: block; }

.sec-title {
  font-size: 12px; color: var(--c-dim);
  letter-spacing: 1.6px; margin-bottom: 14px;
  text-transform: uppercase;
}

/* 卡片 */
.card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: 18px;
}
.card + .card { margin-top: 14px; }
.card-h {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
}
.card-h h3 { font-size: 15px; font-weight: 600; }
.card-h .spacer { flex: 1; }

/* 统计块 */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat {
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--r); padding: 16px 18px;
}
.stat .n { font-size: 26px; font-weight: 600; color: var(--c-gold); line-height: 1.2; }
.stat .t { font-size: 12px; color: var(--c-muted); margin-top: 4px; }

/* 表格 */
.tbl-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--c-line); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  background: rgba(255, 255, 255, .05);
  color: var(--c-muted); font-weight: 500; font-size: 12px;
  text-align: left; padding: 11px 14px; white-space: nowrap;
  border-bottom: 1px solid var(--c-line);
}
tbody td { padding: 11px 14px; border-bottom: 1px solid rgba(140, 190, 255, .07); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(255, 255, 255, .03); }
.empty { padding: 40px; text-align: center; color: var(--c-dim); font-size: 13px; }

/* 徽章 */
.tag {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 11px; border: 1px solid transparent; white-space: nowrap;
}
.tag-gold { background: rgba(232,181,75,.15); color: var(--c-gold2); border-color: rgba(232,181,75,.3); }
.tag-cyan { background: rgba(53,208,224,.13); color: #8FE4EE; border-color: rgba(53,208,224,.3); }
.tag-ok   { background: rgba(93,211,158,.13); color: #9EE7C4; border-color: rgba(93,211,158,.3); }
.tag-err  { background: rgba(242,112,122,.13); color: #FFA7AF; border-color: rgba(242,112,122,.3); }
.tag-gray { background: rgba(140,190,255,.1); color: var(--c-muted); border-color: var(--c-line); }

/* 工具条 */
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar input, .toolbar select {
  padding: 8px 11px; background: rgba(0,0,0,.28);
  border: 1px solid var(--c-line); border-radius: 8px;
  color: var(--c-txt); font-size: 13px; font-family: inherit;
}
.toolbar input:focus, .toolbar select:focus { outline: none; border-color: var(--c-gold); }
.toolbar .spacer { flex: 1; }

/* 弹层 */
.mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4, 8, 16, .78);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.mask.hide { display: none; }
.modal {
  width: 100%; max-width: 520px; max-height: 86vh; overflow-y: auto;
  background: #0B1B33; border: 1px solid var(--c-line2);
  border-radius: 16px; padding: 24px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.modal h3 { font-size: 17px; font-weight: 600; margin-bottom: 16px; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions .btn { flex: 1; }

/* 权限矩阵 */
.matrix { font-size: 13px; }
.matrix th, .matrix td { text-align: center; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.yes { color: var(--c-ok); font-weight: 600; }
.no { color: var(--c-dim); }
.own { color: var(--c-gold2); font-size: 12px; }

/* 详情 KV */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.kv .k { font-size: 11px; color: var(--c-dim); margin-bottom: 3px; }
.kv .v { font-size: 13px; word-break: break-all; }

/* 复选 */
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-muted); cursor: pointer; }
.chk input { width: 15px; height: 15px; accent-color: var(--c-gold); }

.mono { font-family: "SF Mono", Consolas, monospace; font-size: 12px; }
.muted { color: var(--c-muted); }
.dim { color: var(--c-dim); }
.gold { color: var(--c-gold2); }
.cyan { color: var(--c-cyan); }
.err { color: var(--c-danger); }
.ok { color: var(--c-ok); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt { margin-top: 14px; }
.mb { margin-bottom: 14px; }

@media (max-width: 720px) {
  .main { padding: 14px; }
  .topbar { padding: 10px 14px; gap: 10px; }
  .tabs { padding: 0 8px; overflow-x: auto; }
  .tab { padding: 10px 12px; }
  /* ★ 2026-11-02 窄屏顶栏：
     顶栏是 flex 不换行 → 窄窗口下「标题 / 角色徽章 / 当前登录 / 按钮」全挤成两行，
     按钮文字还被断开（「账户\n设置」「退\n出」），很难看。
     窄屏下的取舍：
       · 「当前登录：xxx」→ 隐藏（账户设置页里也有，信息不丢）
       · 角色徽章 → 保留但缩小（超管/普通管理员要一眼看到）
       · 按钮文字 → 不换行
       · 标题 → 允许截断，别把顶栏撑高 */
  .topbar .who { display: none; }
  .topbar .title {
    font-size: 15px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  .topbar .role { font-size: 11px; padding: 3px 8px; white-space: nowrap; }
  .topbar .btn { white-space: nowrap; flex: 0 0 auto; }
  .topbar .logo { flex: 0 0 auto; }
}
/* 超窄屏（≤420px，如 iPhone SE 的 375）：顶栏只留**能操作的东西**，
   装饰性的（角色徽章、标题）让位 —— 否则「退出」按钮会被挤出视口，
   页面出现横向滚动条。
   角色与账号在「账户设置」页里都能看到，藏起来不丢信息。 */
@media (max-width: 420px) {
  .topbar .role { display: none; }
}
@media (max-width: 360px) {
  .topbar .title { display: none; }
}

/* =============================================================================
 * 「查看资料」展开面板（用户资料管理）
 * -----------------------------------------------------------------------------
 * ★ 2026-11-02 新增：参考天河水官网后台的做法 —— 点「查看资料」原地展开，
 *   不跳页、不弹窗。运营点完还在列表上下文里，能连着看下一个用户。
 * ============================================================================= */
.u-drawer {
  margin-top: 14px;
  border: 1px solid var(--c-line2);
  border-radius: var(--r);
  background: var(--c-card);
  overflow: hidden;
}
.u-drawer-h {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid var(--c-line);
}
.u-drawer-h h3 { font-size: 15px; font-weight: 600; }
.u-drawer-body { padding: 18px; }

/* 档案字段网格 */
.u-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 20px; margin-bottom: 20px;
}
.u-grid > div { min-width: 0; }
.u-grid .k { font-size: 11px; color: var(--c-dim); margin-bottom: 3px; letter-spacing: .04em; }
.u-grid .v { font-size: 13px; word-break: break-word; }

/* 证件影像网格：6 个槽位（学生人像面/国徽面/本人照 + 监护人同三项） */
.u-docs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px; margin: 12px 0 20px;
}
.u-docs figure { margin: 0; }
.u-docs img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--c-line2);
  background: #05101F; display: block;
}
.u-docs .ph {
  width: 100%; aspect-ratio: 4 / 3;
  border-radius: 10px; border: 1px dashed var(--c-line);
  background: rgba(255, 255, 255, .03);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-dim); font-size: 12px;
}
.u-docs figcaption {
  margin-top: 7px; font-size: 11px; color: var(--c-muted); text-align: center;
}

/* 分节标题（抽屉内部） */
.u-sect {
  display: flex; align-items: center; gap: 10px;
  margin: 22px 0 12px;
}
.u-sect .k {
  font-family: "SF Mono", Consolas, monospace;
  font-size: 10px; letter-spacing: .22em; color: var(--c-cyan); text-transform: uppercase;
}
.u-sect h4 { font-size: 14px; font-weight: 600; }
.u-sect .line { flex: 1; height: 1px; background: var(--c-line); }

/* 礼包权益：8 项，已领的打勾并高亮 */
.u-bens { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.u-ben {
  border: 1px solid var(--c-line); border-radius: 10px;
  padding: 11px 13px; background: rgba(255, 255, 255, .025);
  display: flex; align-items: flex-start; gap: 10px;
}
.u-ben.claimed { border-color: rgba(232, 181, 75, .42); background: rgba(232, 181, 75, .07); }
.u-ben .n { flex: 1; font-size: 12.5px; }
.u-ben .v { font-size: 13px; font-weight: 600; color: var(--c-gold2); white-space: nowrap; }
.u-ben .st { font-size: 10.5px; margin-top: 3px; color: var(--c-dim); }

/* 退款试算条 */
.u-refund {
  border: 1px solid var(--c-line); border-radius: 10px;
  padding: 14px 16px; background: rgba(255, 255, 255, .03);
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center;
}
.u-refund .item { font-size: 12px; color: var(--c-muted); }
.u-refund .item b { color: var(--c-txt); font-size: 14px; margin-left: 6px; }
.u-refund .item.big b { font-size: 20px; color: var(--c-gold2); }

/* 登录信息表：设备列很长，限宽并换行 */
td.dev {
  max-width: 320px; font-size: 11px; color: var(--c-dim);
  word-break: break-all; line-height: 1.45;
}

/* ══════════════════════════════════════════════════════════════
   账户设置页（2026-11-02）
   长文本/长串（密钥、错误提示、说明）在任何宽度下都不撑破容器 ——
   窄窗口 + Windows 显示缩放时，浏览器默认的 white-space 规则
   会把长串顶出卡片，导致内容被裁、还得横向滚动才能看全。
   ══════════════════════════════════════════════════════════════ */
#p-account .muted,
#p-account p,
#p-account span { overflow-wrap: anywhere; }
#p-account input { max-width: 100%; }
#p-account .mono { word-break: break-all; }