:root{
  --bg:#0f172a; --panel:#ffffff; --ink:#1f2937; --muted:#6b7280;
  --brand:#2A4B89; --brand2:#35589B; --line:#e2e8f0; --soft:#f1f5f9;
  --finance:#2563eb; --passport:#0d9488; --org:#d97706;
  --ok:#16a34a; --warn:#dc2626;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{font-family:"Microsoft YaHei","微软雅黑","PingFang SC",system-ui,sans-serif;
  background:linear-gradient(160deg,#0f172a 0%,#1e293b 60%,#334155 100%);
  color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased;}
.hidden{display:none !important;}

/* ---------- 登录 ---------- */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;}
.login-card{width:380px;max-width:100%;background:var(--panel);border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);padding:34px 30px;}
.login-card h1{font-size:20px;margin:0 0 4px;color:var(--brand);letter-spacing:.5px;}
/* 原来标题下面有一行副标题，已按要求去掉，这里保留标题与表单的间距 */
.login-card h1 + form{margin-top:20px;}
.login-card .sub{font-size:12px;color:var(--muted);margin-bottom:22px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;}
.field input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;
  font-size:14px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s;}
.field input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(42,75,137,.12);}
.btn{width:100%;padding:12px;border:none;border-radius:8px;font-size:15px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:background .15s,opacity .15s;}
.btn.primary{background:var(--brand);color:#fff;}
.btn.primary:hover{background:var(--brand2);}
.btn.ghost{background:var(--soft);color:var(--brand);}
.btn.ghost:hover{background:#e2e8f0;}
.msg{font-size:13px;margin:4px 0 12px;min-height:18px;white-space:pre-line;}
.msg.err{color:var(--warn);}
.msg.ok{color:var(--ok);}
.hint{font-size:12px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.6;}
.hint a{color:var(--brand);font-weight:600;text-decoration:none;cursor:pointer;}
.hint a:hover{text-decoration:underline;}

/* ---------- 门户 ---------- */
/* 不用 flex gap（360 的 IE 内核不支持），改用外边距，间距在任何内核都一致 */
.topbar{background:rgba(255,255,255,.08);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.12);padding:12px 26px;
  display:flex;align-items:center;color:#fff;}
.topbar .logo{font-size:16px;font-weight:700;letter-spacing:.5px;margin-right:14px;}
.topbar .who{margin-left:auto;font-size:13px;display:flex;align-items:center;}
.topbar .who > *{margin-left:12px;}
.topbar .who .nm{opacity:.92;}
.chip{background:rgba(255,255,255,.16);padding:3px 10px;border-radius:999px;font-size:12px;}
.wall{max-width:980px;margin:0 auto;padding:46px 26px 60px;}
.wall h2{color:#fff;font-weight:600;font-size:22px;margin:0 0 6px;letter-spacing:.5px;}
.wall .lead{color:rgba(255,255,255,.7);font-size:13px;margin:0 0 30px;}
/* 图标墙：用 flex 而不是 grid —— grid 在 360 等浏览器的 IE 内核下会整块塌掉，
   flex 布局所有内核都认。间距用卡片外边距实现，不依赖 flex gap（IE 不支持）。 */
.cards{display:flex;flex-wrap:wrap;margin:-10px;}
.card{flex:1 1 260px;min-width:0;background:var(--panel);border-radius:14px;padding:26px 24px;cursor:pointer;
  box-shadow:0 12px 36px rgba(0,0,0,.25);transition:transform .15s,box-shadow .15s;margin:10px;
  border:1px solid transparent;display:flex;flex-direction:column;text-decoration:none;overflow-wrap:break-word;}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.32);}
/* 1.7.17：八个板块统一「浅蓝底 + 蓝色线性矢量图标」，取消彩色渐变方块 */
.card .ic{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:#E8F1FE;border:1px solid #D6E7FB;margin-bottom:14px;}
.card .ic img{width:36px;height:36px;display:block;}
.card h3{margin:0 0 8px;font-size:17px;color:var(--ink);}
.card p{margin:0 0 14px;font-size:13px;color:var(--muted);line-height:1.6;}
.card .tag{font-size:12px;color:#fff;background:var(--ok);padding:2px 9px;border-radius:999px;align-self:flex-start;margin-top:auto;}
.empty{color:rgba(255,255,255,.65);font-size:14px;text-align:center;padding:50px 0;}

/* ---------- 权限管理 ---------- */
/* inset 简写在老内核不认，显式写四边 */
.modal-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(15,23,42,.55);display:flex;align-items:flex-start;
  justify-content:center;padding:40px 16px;overflow:auto;z-index:50;-webkit-overflow-scrolling:touch;}
.modal{background:#fff;border-radius:14px;width:760px;max-width:100%;padding:24px 26px;box-shadow:0 24px 60px rgba(0,0,0,.4);}
/* 权限管理弹窗列数多（7 列），要有更宽的容器，否则会挤出格子 */
#admin-modal .modal{width:1000px;}
#admin-body{max-width:100%;}
/* 表格容器：PC 也要能横向滚动 —— 之前只有手机端才有这条，PC 上表格会溢出弹窗 */
.table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* 权限管理改成「一级精简 + 二级折叠」后只剩 4 列（账号 / 组别 / 已开通 / 操作），
   不需要再横着拖动；细项都收在展开面板里 */
#admin-body .utbl{min-width:0;}
/* 可横向滚动的表格：鼠标悬停为抓手，按住拖动时变成抓紧 */
#admin-body .table-wrap{cursor:grab;}
#admin-body .table-wrap.grabbing{cursor:grabbing;}
#admin-body .table-wrap.grabbing{user-select:none;-webkit-user-select:none;}
.modal h3{margin:0 0 4px;color:var(--brand);}
.modal .sub{font-size:12px;color:var(--muted);margin-bottom:16px;}
.modal .close{float:right;cursor:pointer;color:var(--muted);font-size:20px;line-height:1;border:none;background:none;}
.utbl{width:100%;border-collapse:collapse;font-size:13px;}
.utbl th,.utbl td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;}
.utbl th{color:var(--muted);font-weight:600;font-size:12px;}
.utbl select{padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-family:inherit;font-size:13px;max-width:140px;}
.utbl .nm{font-weight:600;}
.utbl .em{color:var(--muted);font-size:12px;}
.save-row{margin-top:16px;text-align:right;}
.save-row .btn{width:auto;padding:10px 22px;}
.note{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.6;}

/* ==================== 权限管理 2.0 ====================
   一级只显示「账号 / 组别 / 已开通 / 操作」，身份做成彩色徽章；
   点「权限设置」在下面展开该人的细项面板。窄表 + 折叠，不用再横向拖动。
   兼容注意：间距全用 margin，不用 gap（360 的 IE 内核不认）。 */
.adm-h{margin:18px 0 10px;font-size:15px;color:var(--brand);}
.adm-bar{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:10px;}
.adm-bar > *{margin-right:8px;}
.adm-kw{flex:1 1 240px;min-width:180px;padding:8px 12px;border:1px solid var(--line);
  border-radius:8px;font-family:inherit;font-size:13px;outline:none;}
.adm-kw:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(42,75,137,.1);}
.adm-flt{display:flex;flex-wrap:wrap;margin-bottom:8px;}
.afchip{display:inline-block;padding:4px 12px;margin:0 6px 6px 0;border:1px solid var(--line);
  border-radius:999px;background:#fff;color:var(--muted);font-size:12.5px;cursor:pointer;
  -webkit-user-select:none;user-select:none;}
.afchip i{font-style:normal;margin-left:5px;opacity:.65;font-size:11.5px;}
.afchip:hover{border-color:var(--brand);color:var(--brand);}
.afchip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;}

.adm-tbl th{font-size:12px;}
.adm-tbl td{padding:10px 8px;}
.acc{display:flex;align-items:center;}
.iav{width:34px;height:34px;border-radius:50%;flex:0 0 34px;margin-right:10px;
  text-align:center;line-height:34px;font-weight:600;font-size:14px;}
.amid{min-width:0;}
.anm{font-weight:600;font-size:13.5px;color:var(--ink);}
.ib{display:inline-block;font-size:11px;padding:1px 7px;border-radius:6px;margin-left:7px;
  font-weight:400;vertical-align:1px;}
.ime{font-size:11px;color:var(--brand);background:#E8F1FE;padding:1px 6px;border-radius:6px;margin-left:6px;}
.ipd{font-size:11px;color:#b45309;background:#FEF3C7;padding:1px 6px;border-radius:6px;margin-left:6px;}
.gtag{display:inline-block;font-size:11.5px;padding:1px 8px;border-radius:6px;
  background:#E8F1FE;color:#1E6FD9;margin:0 5px 4px 0;}
.dim{color:#9ca3af;}
.adm-empty{text-align:center;color:var(--muted);font-size:13px;padding:26px 0;}

/* 身份配色（与小程序 utils/perm.js 的 IDENT 一一对应） */
.i-admin{background:#F3E8FF;color:#7C3AED;}
.i-leader{background:#FDECEA;color:#C0392B;}
.i-director{background:#FEF3C7;color:#B45309;}
.i-staff{background:#E8F1FE;color:#1E6FD9;}
.i-teacher{background:#E6F7F4;color:#0F766E;}
.i-support{background:#EEF2F7;color:#475569;}
.i-none{background:#F1F5F9;color:#94A3B8;}

/* 二级面板 */
#admin-body tr.adm-sub > td{padding:0 !important;background:#F8FAFC;border-bottom:1px solid var(--line);}
.adm-panel{display:flex;flex-wrap:wrap;padding:14px 6px 16px;text-align:left;}
.pg{flex:1 1 300px;min-width:250px;padding:0 10px 12px 0;}
.pgt{font-size:12px;color:var(--brand);font-weight:600;letter-spacing:.5px;margin-bottom:6px;}
.pgb{background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 12px;}
.pf{padding:7px 0;border-bottom:1px dashed var(--line);}
.pf:last-child{border-bottom:none;}
.pfl{font-size:12px;color:var(--muted);margin-bottom:4px;}
.pfc select,.pfc input{width:100%;max-width:100%;padding:7px 9px;border:1px solid var(--line);
  border-radius:7px;font-family:inherit;font-size:13px;outline:none;background:#fff;}
.pfc select:focus,.pfc input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(42,75,137,.1);}
.pft{font-size:11px;color:#9ca3af;margin-top:3px;line-height:1.5;}
.adm-sub .grpwrap input{min-width:0;}
.adm-sub .gchips{margin-top:6px;}

/* ---------- 考勤负责组别：输入框 + 可点选标签 ---------- */
/* 不用 datalist —— 它在手机端和部分国产浏览器里会限制自由输入 */
.utbl .grpwrap input{width:100%;min-width:132px;padding:6px 8px;border:1px solid var(--line);
  border-radius:6px;font-family:inherit;font-size:13px;}
.grpwrap input{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:14px;outline:none;}
.grpwrap input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(42,75,137,.12);}
.gchips{margin-top:6px;line-height:1.9;}
.gchip{display:inline-block;padding:2px 9px;margin:0 5px 5px 0;border:1px solid var(--line);
  border-radius:999px;font-size:12px;color:var(--muted);background:var(--soft);cursor:pointer;
  -webkit-user-select:none;user-select:none;transition:background .12s,color .12s;}
.gchip:hover{border-color:var(--brand);color:var(--brand);}
.gchip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;}

/* 窄屏「一人一卡」的规则统一放在文件最末尾，
   否则会被后面的 640 断点（min-width / nowrap）反超而失效。 */

/* ==================== 手机端 ==================== */
@media (max-width: 640px) {
  .login-wrap { padding: 16px; }
  .login-card { padding: 26px 20px; }
  .login-card h1 { font-size: 18px; }

  /* 顶栏：标题独占一行，账号与按钮另起一行 —— 否则「权限管理 / 退出」会被挤出屏幕裁掉 */
  .topbar { flex-wrap: wrap; padding: 10px 14px; }
  .topbar .logo { font-size: 14px; margin-right: 0; flex: 1 1 100%; margin-bottom: 8px; }
  .topbar .who { margin-left: 0; width: 100%; font-size: 12px; flex-wrap: wrap; justify-content: flex-end; }
  .topbar .who > * { margin-left: 8px; }
  .topbar .who .nm { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #admin-btn, #logout-btn { padding: 8px 12px !important; }

  .wall { padding: 20px 14px 40px; }
  .wall h2 { font-size: 18px; }
  .wall .lead { font-size: 12.5px; margin-bottom: 16px; }
  /* 卡片保持 flex:1 1 260px，窄屏自然排成一行一张，不必写死 100%（写死会溢出） */
  .cards { margin: -7px; }
  .card { margin: 7px; padding: 18px 16px; }
  .card .ic { width: 46px; height: 46px; font-size: 22px; border-radius: 11px; margin-bottom: 10px; }
  .card h3 { font-size: 16px; }

  /* 权限管理：弹窗收边（表格已在 ≤820px 断点里改成卡片，这里不再设 min-width） */
  #admin-modal { padding: 10px 8px 0; }
  #admin-modal .modal { padding: 18px 14px !important; border-radius: 12px !important; }
  .utbl { font-size: 12.5px; }
  .modal { padding: 20px 16px !important; }
  .modal h3 { font-size: 17px; }
}

/* ==================== 窄屏（≤820px）：权限表改「一人一卡」 ==================== */
/* 必须排在 640 断点之后：同特异性下后者胜，排在前面会被 min-width / nowrap 反超。
   7 列的表格在手机上得左右滑动才能碰到「考勤登记」「考勤负责组别」，
   用户会以为压根没这个功能。这里把每行摊成一张卡，字段竖排、全部可见。 */
@media (max-width: 820px) {
  #admin-body .table-wrap { overflow-x: visible; }
  #admin-body .utbl { min-width: 0 !important; width: 100%; }
  #admin-body .utbl thead { display: none; }
  #admin-body .utbl th { display: none; }
  #admin-body .utbl,
  #admin-body .utbl tbody,
  #admin-body .utbl tr,
  #admin-body .utbl td { display: block; width: 100%; }
  #admin-body .utbl tr[data-id],
  #admin-body .utbl tr[data-req] {
    border: 1px solid var(--line); border-radius: 12px; background: #fff;
    padding: 12px 14px; margin-bottom: 12px;
  }
  #admin-body .utbl td { border: none; padding: 5px 0; white-space: normal; }
  #admin-body .utbl td[data-th]::before {
    content: attr(data-th); display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px;
  }
  #admin-body .utbl td[data-th="账号"] { padding-bottom: 8px; border-bottom: 1px dashed var(--line); margin-bottom: 6px; }
  #admin-body .utbl td[data-th="账号"]::before { display: none; }
  #admin-body .utbl td[data-th="操作"] { padding-top: 10px; }
  #admin-body .utbl select,
  #admin-body .utbl input[data-f="name"] { max-width: 100% !important; width: 100% !important; }
  #admin-body .utbl .btn { min-height: 36px; }

  /* 一级卡片 + 紧随其后的二级面板：连成一张卡，别看成两个人 */
  #admin-body .utbl tr.adm-sub {
    background: #F8FAFC; margin: -12px 0 14px; padding: 12px 14px 6px;
    border: 1px solid var(--line); border-top: none; border-radius: 0 0 12px 12px;
  }
  #admin-body .utbl tr.adm-sub > td { padding: 0 !important; background: transparent; }
  .adm-panel { display: block; padding: 4px 0 6px; }
  .pg { width: 100%; min-width: 0; padding: 0 0 12px; }
  .adm-bar .adm-kw { flex: 1 1 100%; margin-bottom: 8px; }
  #admin-body .utbl td[data-th="组别"]::before,
  #admin-body .utbl td[data-th="已开通"]::before { display: none; }
  #admin-body .utbl td[data-th="组别"],
  #admin-body .utbl td[data-th="已开通"] { display: inline-block; width: auto; margin-right: 10px; font-size: 12px; }

  /* 卡片模式下列表很长，把「保存」吸在弹窗底部，不用滚到底才点得到 */
  #admin-modal .save-row {
    position: sticky; bottom: 0; background: #fff; margin-top: 12px;
    padding: 10px 0; border-top: 1px solid var(--line);
  }
}

/* ================= 角色模型（2026-11-05） ================= */
/* 角色徽章 / 头像配色：与小程序 pages/perm 的 r-* 一一对应 */
.iav.leader,.ib.leader{background:#FDECEA;color:#C0392B;}
.iav.admin,.ib.admin{background:#E8F1FE;color:#1E6FD9;}
.iav.finance,.ib.finance{background:#E6F7F4;color:#0F766E;}
.iav.grade,.ib.grade{background:#FEF3C7;color:#B45309;}
.iav.staff,.ib.staff{background:#EEF2F7;color:#475569;}
.iav.logistics,.ib.logistics{background:#F3E8FF;color:#7C3AED;}
.isys{display:inline-block;font-size:11px;padding:1px 7px;border-radius:6px;margin-left:6px;
  background:#EEF2FF;color:#4338CA;border:1px solid #C7D2FE;font-weight:400;vertical-align:1px;}

/* 角色下拉下面那行「该角色自动带来什么」 */
.rprev{margin:8px 0 2px;padding:8px 10px;background:#F8FAFC;border:1px solid var(--line);
  border-radius:8px;font-size:12px;line-height:1.8;color:#475569;}

/* 角色权限设置弹窗 */
.rolem{width:1000px;max-height:84vh;overflow-y:auto;}
.rolem .rlm{border:1px solid var(--line);border-radius:10px;padding:12px 14px 8px;margin-bottom:10px;background:#fff;}
.rlm-h{display:flex;align-items:baseline;margin-bottom:6px;}
.rlm-h b{font-size:14px;color:var(--ink);}
.rlm-h span{font-size:12px;color:var(--muted);margin-left:8px;}
.rlm-b{display:flex;flex-wrap:wrap;}
.rlf{display:flex;align-items:center;width:33.33%;padding:4px 10px 4px 0;box-sizing:border-box;
  font-size:12.5px;color:#334155;margin-bottom:4px;}
.rlf span{width:92px;flex:0 0 92px;color:var(--muted);}
.rlf select{flex:1;min-width:0;padding:5px 6px;border:1px solid var(--line);border-radius:6px;
  font-size:12.5px;font-family:inherit;background:#fff;}
.rlf input[type=checkbox]{width:16px;height:16px;}

@media (max-width:760px){
  .rlf{width:100%;}
  .rolem{width:100%;}
}