/* 易创培训学习系统 — 移动端优先 */
:root {
  --primary: #1f5fa8;
  --primary-dark: #174a85;
  --primary-light: #e8f0fa;
  --bg: #f4f6f9;
  --card: #ffffff;
  --text: #24303f;
  --muted: #7b8794;
  --line: #e3e8ee;
  --ok: #1a9e6c;
  --warn: #d9840b;
  --danger: #cf4436;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.6;
}
.hidden { display: none !important; }
a { color: var(--primary); text-decoration: none; }

/* 顶栏 */
#topbar {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; padding: 10px 14px 0;
}
.brand { font-size: 17px; font-weight: 700; letter-spacing: .5px; display: flex; align-items: center; gap: 8px; }
.brand .who { font-size: 12px; font-weight: 400; opacity: .85; margin-left: auto; text-align: right; line-height: 1.3; }
.nav { display: flex; gap: 4px; overflow-x: auto; margin-top: 8px; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  color: rgba(255,255,255,.85); padding: 7px 14px; border-radius: 10px 10px 0 0;
  white-space: nowrap; font-size: 14px;
}
.nav a.active { background: var(--bg); color: var(--primary); font-weight: 600; }

main { max-width: 860px; margin: 0 auto; padding: 14px 12px 90px; }
.loading { text-align: center; color: var(--muted); padding: 60px 0; }

/* 卡片 */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(20,40,70,.04);
}
.card h2 { margin: 0 0 10px; font-size: 17px; }
.card h3 { margin: 0 0 8px; font-size: 15px; }
.muted { color: var(--muted); font-size: 13px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.stat { flex: 1; min-width: 100px; background: var(--primary-light); border-radius: 10px; padding: 10px 12px; }
.stat b { display: block; font-size: 20px; color: var(--primary); }
.stat span { font-size: 12px; color: var(--muted); }

/* 表单 */
input[type=text], input[type=password], select {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 15px; background: #fff; color: var(--text); outline: none;
}
input:focus, select:focus { border-color: var(--primary); }
/* 口令框 + 显示/隐藏小眼睛 */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }
.pw-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 6px 8px;
  font-size: 17px; line-height: 1; color: var(--muted); border-radius: 8px;
}
.pw-eye:active { background: var(--primary-light); }
.btn:disabled, .btn[disabled] { opacity: .7; cursor: default; }
/* 页面内常驻提示（错误/自检结果） */
.err-msg {
  margin-top: 12px; background: #fdf0ef; border: 1px solid #f3c9c5; color: #a4322a;
  border-radius: 10px; padding: 11px 13px; font-size: 13px; line-height: 1.65;
  white-space: pre-line; text-align: left; word-break: break-word;
}
label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 6px; }
.btn {
  display: inline-block; border: none; border-radius: 10px; cursor: pointer;
  background: var(--primary); color: #fff; font-size: 15px; font-weight: 600;
  padding: 11px 22px; margin-top: 14px; width: 100%;
}
.btn:active { opacity: .85; }
.btn.ghost { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
.btn.small { width: auto; padding: 8px 16px; font-size: 14px; margin-top: 0; }
.btn.danger { background: var(--danger); }
.btn:disabled { opacity: .5; cursor: default; }
.linkish { background: none; border: none; color: var(--primary); cursor: pointer; font-size: 13px; padding: 0; }

/* 列表项 */
.item {
  display: flex; align-items: center; gap: 10px; padding: 12px 4px;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.item:last-child { border-bottom: none; }
.item .t { flex: 1; min-width: 0; }
.item .t b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .t span { font-size: 12px; color: var(--muted); }
.tag {
  flex-shrink: 0; font-size: 12px; padding: 3px 8px; border-radius: 20px;
  background: var(--primary-light); color: var(--primary);
}
.tag.ok { background: #e2f6ee; color: var(--ok); }

/* 分类 chips */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; padding: 6px 14px; border-radius: 20px; font-size: 13px;
  background: #fff; border: 1px solid var(--line); color: var(--text); cursor: pointer;
}
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* 资料正文 */
.prose { font-size: 15px; }
.prose h3 { margin: 18px 0 6px; font-size: 16px; color: var(--primary-dark); }
.prose p { margin: 8px 0; }
.prose ul, .prose ol { padding-left: 22px; margin: 8px 0; }
.prose img { max-width: 100%; border-radius: 8px; }
.prose figure { margin: 14px 0; }
.prose figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; text-align: center; }
.prose table { border-collapse: collapse; width: 100%; margin: 10px 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: 6px 10px; font-size: 14px; }
.prose th { background: var(--primary-light); }
.sample-banner {
  background: #fdf3e3; color: #9a6a12; border: 1px solid #f0d9ad;
  border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px;
}

/* 问答 */
.qa-box { display: flex; gap: 8px; }
.qa-box input { flex: 1; }
.qa-box .btn { width: auto; margin-top: 0; padding: 11px 18px; }
.faq-card { border-left: 4px solid var(--ok); }
.faq-card .ans { margin: 6px 0 8px; }
.faq-card .src { font-size: 12px; color: var(--muted); }
.mark { color: var(--warn); font-size: 13px; }

/* 测验 */
.quiz-q { margin-bottom: 4px; }
.quiz-q .q-title { font-weight: 600; margin-bottom: 8px; }
.opt { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin: 8px 0; cursor: pointer; font-size: 14px; }
.opt.sel { border-color: var(--primary); background: var(--primary-light); }
.opt.right { border-color: var(--ok); background: #e2f6ee; }
.opt.wrong { border-color: var(--danger); background: #fbeae8; }
.verdict { font-size: 13px; margin-top: 4px; }
.verdict.ok { color: var(--ok); }
.verdict.no { color: var(--danger); }

/* 底部操作条 */
.bottombar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: #fff; border-top: 1px solid var(--line);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
}
.bottombar .info { font-size: 13px; color: var(--muted); }
.bottombar .btn { margin-top: 0; width: auto; flex-shrink: 0; }

/* 提示 */
.toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(30,40,55,.94); color: #fff; padding: 12px 20px; border-radius: 14px;
  font-size: 15px; line-height: 1.5; text-align: center;
  opacity: 0; pointer-events: none; transition: all .25s; z-index: 99; max-width: 90%;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 岗位学习地图 */
.plan-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pos-pill { background: var(--primary); color: #fff; border-radius: 20px; padding: 2px 12px; font-size: 13px; font-weight: 600; }
.prog { height: 8px; border-radius: 8px; background: var(--primary-light); overflow: hidden; margin: 12px 0 6px; }
.prog > i { display: block; height: 100%; background: var(--primary); border-radius: 8px; transition: width .3s; }
.prog.done > i { background: var(--ok); }
.stage { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 10px; }
.stage-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.stage-h .n { background: var(--primary-light); color: var(--primary); border-radius: 6px; padding: 1px 8px; font-size: 12px; }
.stage-h .m { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 400; }
.plan-item { display: flex; align-items: center; gap: 8px; padding: 9px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.plan-item:last-child { border-bottom: none; }
.plan-item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.plan-item .t span { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.plan-empty { font-size: 12px; color: var(--muted); margin-top: 10px; }

table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; }
table.data th { color: var(--muted); font-weight: 600; background: #fafbfc; }
.table-wrap { overflow-x: auto; }

/* 图片放大查看 */
.prose img { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(12,18,28,.93);
  display: flex; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 12px 48px rgba(0,0,0,.55); }
.lightbox .hint { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.7); font-size: 13px; }

/* ============================================================
   电脑端（≥1024px）—— 公司主要在电脑上学习：充分利用屏幕宽度
   ============================================================ */
@media (min-width: 1024px) {
  body { font-size: 16px; }

  #topbar { padding: 12px 30px 0; }
  .brand { font-size: 19px; }
  .brand .who { font-size: 13px; }
  .nav { gap: 6px; overflow-x: visible; }
  .nav a { font-size: 15px; padding: 9px 20px; }

  main { max-width: 1220px; padding: 20px 30px 48px; }

  .card { padding: 18px 22px; margin-bottom: 16px; border-radius: 14px; }
  .card h2 { font-size: 19px; }
  .card h3 { font-size: 16px; }

  /* 列表类内容 → 两列网格，一屏看更多 */
  .list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
  .item { padding: 13px 6px; }
  .item:hover { background: #f7f9fc; border-radius: 8px; }

  /* 正文阅读页：限宽居中保证可读行宽，字号放大 */
  .card.reader { max-width: 960px; margin-left: auto; margin-right: auto; }
  .prose { font-size: 16.5px; line-height: 1.85; }
  .prose h3 { font-size: 18.5px; margin: 26px 0 8px; }
  .prose p { margin: 10px 0; }
  .prose table { font-size: 15px; }
  .prose th, .prose td { padding: 9px 13px; }

  /* 结果类内容（问答命中）两列 */
  .result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-items: start; }
  .result-grid .card { margin-bottom: 16px; }

  /* 底部操作条：跟随正文宽度居中 */
  .bottombar { justify-content: center; }
  .bottombar .info { margin-right: auto; }
  .bottombar > * { max-width: 960px; }
  .bottombar { padding-left: 30px; padding-right: 30px; }

  /* 数据表格更宽松 */
  table.data { font-size: 14px; }
  table.data th, table.data td { padding: 10px 10px; }

  /* 统计块 */
  .stat { padding: 14px 16px; }
  .stat b { font-size: 24px; }

  /* 学习地图条目两列 */
  .plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
}

/* 超宽屏（≥1560px）：列表三列 */
@media (min-width: 1560px) {
  main { max-width: 1420px; }
  .list-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------- 账号管理（后台） ----------------
   后台是电脑上用的表单密集型界面：输入框并排、表格里放操作按钮。
   注意要覆盖全局的 input{width:100%}，否则每个输入框都会独占一行。 */
.acct-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acct-form input, .acct-form select {
  width: auto; flex: 1 1 175px; min-width: 155px;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
}
.acct-form .btn { flex: 0 0 auto; }
#acBulk {
  width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; font-family: inherit; font-size: 14px; line-height: 1.7;
  resize: vertical; color: var(--text); background: #fff;
}
.acct-out {
  margin-top: 12px; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 10px; padding: 12px;
}
.tag-init {
  display: inline-block; background: #fef3c7; color: #92400e;
  border-radius: 4px; padding: 0 5px; font-size: 11px; white-space: nowrap;
}
td.acct-ops { white-space: nowrap; }
td.acct-ops .linkish { margin-right: 8px; }
button.linkish.danger { color: var(--danger); }

/* 身份与数据范围标签：让人一眼知道自己"以什么身份在看"、
   "看到的数字是哪个范围"，避免把本部门人数误读成全公司人数 */
.role-pill {
  display: inline-block; background: rgba(255,255,255,.22); color: #fff;
  border: 1px solid rgba(255,255,255,.45); border-radius: 20px;
  padding: 0 8px; font-size: 11.5px; font-weight: 600; vertical-align: middle;
}
.scope-pill {
  display: inline-block; background: var(--primary-light); color: var(--primary);
  border-radius: 20px; padding: 1px 10px; font-size: 12.5px; font-weight: 600;
}