/* ===== Irissat 学生个人页样式（1104 15:35 新建） =====
   设计语言沿用答题端：深蓝主色 #384cc0 / 深蓝带 #1c2260 / 黄色按钮 #f8dc4a。
   本页是学生唯一入口，只显示：作业列表、成绩、逐题对错与官方解析。
   🔴 不显示：难度、考点层级、互斥组、题目分析图等老师个人资产。
*/

.home-body {
  background: #f4f5f8;
  overflow: auto;
  height: auto;
  min-height: 100%;
}

/* 🔴 1104 15:58 [hidden] 必须压过作者样式里的 display:flex/block，
   否则 .rec-screen / .list 的 display 会把 hidden 属性废掉（元素照样显示）。 */
[hidden] { display: none !important; }

/* ---------- 顶栏 ---------- */
.home-top {
  background: var(--blue-deep);
  color: #fff;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
.home-top-inner {
  max-width: 940px;
  margin: 0 auto;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: baseline; gap: 9px; }
/* 🔴 1104 22:20 logo 里的 SAT 换成白色 */
.brand-mark {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #fff;
}
.brand-name {
  font-size: 13px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
/* 🔴 1105 用户裁定：右上角学生名前加字母头像（一到两个英文字母标识） */
.who { text-align: right; display: flex; align-items: center; gap: 9px; }
.who-name { font-size: 15px; font-weight: 700; line-height: 1.25; }
.who-ava {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #1c2260;
  font-size: 14.5px; font-weight: 800; font-family: var(--sans);
  letter-spacing: .3px;
}
.who-class { font-size: 11.5px; color: rgba(255, 255, 255, .62); }

/* ---------- 主体 ---------- */
.home-main { max-width: 940px; margin: 0 auto; padding: 30px 28px 60px; }

.state-box { padding: 90px 0; text-align: center; color: #6a6f7a; }
.state-txt { margin-top: 14px; font-size: 14px; }
.state-box.err .state-txt { color: #c62828; }
.spinner {
  width: 26px; height: 26px; margin: 0 auto;
  border: 3px solid #d8dbe4; border-top-color: var(--blue-primary);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Hero ---------- */
.hero { margin-bottom: 22px; }
.hero-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #1c2260;
}
.hero-sub { margin-top: 7px; font-size: 13.5px; color: #63687a; }

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid #d8dbe4;
  margin-bottom: 20px;
}
.tab {
  appearance: none;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  color: #6a6f7a;
  padding: 8px 4px 10px;
  margin-right: 26px;
  cursor: pointer;
  position: relative;
  /* 🔴 1105 用户裁定「写英文就行了」：tab 恢复单行（Active / Past），不再中英两行 */
  display: inline-flex;
  align-items: center;
}
.tab-main { display: inline-flex; align-items: center; gap: 7px; }
/* .tab-en 已随「中英两行」结构一起废除（1105） */
.tab:hover { color: var(--blue-primary); }
.tab.active { color: var(--blue-deep); }
.tab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--blue-primary);
}
.tab-num {
  font-size: 11px;
  font-weight: 700;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: #e3e6ee;
  color: #4a4f60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tab.active .tab-num { background: var(--blue-primary); color: #fff; }

/* ---------- 作业卡片 ---------- */
.list { display: flex; flex-direction: column; gap: 12px; }

.pack {
  background: #fff;
  border: 1px solid #e0e3ea;
  border-radius: 10px;
  padding: 17px 20px 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 1px 2px rgba(28, 34, 96, .04);
}
.pack:hover { border-color: #c3c8da; }

.pack-main { flex: 1; min-width: 0; }
.pack-name {
  font-size: 16px;
  font-weight: 600;
  color: #1c2260;
  line-height: 1.35;
  word-break: break-word;
}
.pack-meta {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 12.5px;
  color: #63687a;
}
.pack-meta span { display: inline-flex; align-items: center; gap: 5px; }
.pack-meta b { font-weight: 600; color: #2c3145; }
.kind-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: #eef1fb;
  color: var(--blue-primary);
  letter-spacing: .2px;
}
.kind-badge.err { background: #fdf0e3; color: #a75a12; }

.pack-act { flex: none; }

.btn-go {
  appearance: none;
  border: 1px solid #1a1a1a;
  background: var(--yellow);
  color: #1a1a1a;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 21px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-go:hover { background: #f7d32e; }
.btn-go:active { transform: translateY(1px); }

.btn-ghost {
  appearance: none;
  border: 1.5px solid var(--blue-primary);
  background: #fff;
  color: var(--blue-primary);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  /* 🔴 1105 按钮里带提醒小图标（眼睛），图标与文字横平竖直对齐 */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}
.btn-ghost svg { flex: 0 0 auto; }
.btn-ghost:hover { background: #f2f4fd; }

.score-pill {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--blue-deep);
  line-height: 1;
  white-space: nowrap;
}
.score-pill small { font-size: 13px; color: #8a8fa0; font-weight: 400; }

/* ---------- 空态 ---------- */
.empty { padding: 60px 0; text-align: center; color: #8a8fa0; }
.empty-ic { color: #c3c8da; margin-bottom: 12px; }
.empty-t { font-size: 15px; color: #4a4f60; font-weight: 600; }
.empty-s { margin-top: 5px; font-size: 13px; }

/* ══════════ 答题详情 ══════════ */
.rec-screen {
  position: fixed;
  inset: 0;
  background: #f4f5f8;
  z-index: 40;
  display: flex;
  flex-direction: column;
}
.rec-top {
  /* 🔴 1104 22:20 学生端各页面深色条高度统一（原来 56px，首页 62px） */
  height: 62px;
  background: var(--blue-deep);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 26px;
  flex: none;
  position: relative;   /* 🔴 22:45 标题绝对居中用 */
}
.rec-back {
  appearance: none;
  border: 0;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px 7px 10px;
  border-radius: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.rec-back:hover { background: rgba(255, 255, 255, .2); }
/* 🔴 1104 22:45 标题水平居中（用户标注图 12「版中间」＝放到中间） */
.rec-title { font-size: 15px; font-weight: 600; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.rec-scroll { flex: 1; overflow: auto; padding: 22px 0 60px; }
.rec-sum, .rec-list, .rec-foot { margin: 0 auto; padding: 0 28px; }

.rec-sum {
  background: #fff;
  border: 1px solid #e0e3ea;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}
/* 🔴 1104 22:20 统计条均等排版（原来 gap:26px 挤在左边，右边空一大片） */
.rs-item { display: flex; flex-direction: column; gap: 3px; flex: 1 1 0; min-width: 0; }
.rs-lab { font-size: 11.5px; color: #8a8fa0; letter-spacing: .3px; }
.rs-val { font-size: 19px; font-weight: 700; color: #1c2260; font-family: var(--serif); }
.rs-val small { font-size: 12.5px; color: #8a8fa0; font-weight: 400; font-family: var(--sans); }
.rs-sep { width: 1px; height: 34px; background: #e0e3ea; }

.rec-list { display: flex; flex-direction: column; gap: 10px; }

.qcard {
  background: #fff;
  border: 1px solid #e0e3ea;
  border-left: 4px solid #c3c8da;
  border-radius: 8px;
  overflow: hidden;
}
.qcard.ok { border-left-color: #2e9e5b; }
.qcard.wrong { border-left-color: #d9483b; }
.qcard.omit { border-left-color: #b9bdc9; }

.qc-head {
  /* 🔴 1104 22:20 学生端答题详情行改为「与老师端表格一致」的字段：
     Module | 题号 | Correct Answer | Your Answer | Time | 展开箭头 */
  display: grid;
  grid-template-columns: 46px 40px minmax(120px,1fr) minmax(140px,1fr) 92px 26px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}
.qc-head:hover { background: #fafbfd; }
/* 小标签（字段名） */
.qc-kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qc-kv i {
  font-style: normal; font-size: 10.5px; letter-spacing: .3px;
  color: #8a8fa0; font-weight: 600;
}
.qc-kv b { font-size: 13.5px; font-weight: 700; color: #1c2260; font-family: var(--sans); }
.qc-kv b.ok { color: #1f7a45; }
.qc-kv b.wrong { color: #b8322a; }
.qc-kv b.omit { color: #b45309; }
/* Module 列 */
.qc-mod {
  flex: none; font-size: 11.5px; font-weight: 700; color: #6a6f7a;
  background: #eef0f6; border-radius: 5px; padding: 3px 7px; text-align: center;
  font-family: var(--sans);
}
.qc-no {
  flex: none;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: #eef0f6;
  color: #4a4f60;
  font-size: 12.5px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.qcard.ok .qc-no { background: #e4f5ea; color: #1f7a45; }
.qcard.wrong .qc-no { background: #fdeceb; color: #b8322a; }
.qc-st {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
}
.qcard.ok .qc-st { background: #e4f5ea; color: #1f7a45; }
.qcard.wrong .qc-st { background: #fdeceb; color: #b8322a; }
.qcard.omit .qc-st { background: #eef0f6; color: #6a6f7a; }
.qc-prompt {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: #3a3f52;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qc-sp { flex: none; font-size: 12px; color: #8a8fa0; }
.qc-arrow {
  flex: none; color: #a8adbd;
  transition: transform .15s;
}
.qcard.open .qc-arrow { transform: rotate(180deg); }

.qc-body { display: none; padding: 0 16px 16px 16px; border-top: 1px solid #eef0f4; }
.qcard.open .qc-body { display: block; }

.qb-sec { margin-top: 14px; }
.qb-lab {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #8a8fa0;
  margin-bottom: 7px;
}
.qb-passage {
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.72;
  color: #22242e;
  background: #fbfbfd;
  border: 1px solid #eef0f4;
  border-radius: 6px;
  padding: 13px 15px;
  max-height: 340px;
  overflow: auto;
}
.qb-passage p { margin-bottom: 10px; }
.qb-passage p:last-child { margin-bottom: 0; }

.qb-opts { display: flex; flex-direction: column; gap: 6px; }
.qb-opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.55;
  padding: 9px 12px;
  border: 1px solid #e6e9f0;
  border-radius: 6px;
  background: #fff;
}
.qb-opt .k {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid #b9bdc9;
  color: #4a4f60;
  font-size: 11.5px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.qb-opt .t { flex: 1; color: #2c3145; }
.qb-opt.mine { border-color: #c3c8da; background: #f7f8fc; }
.qb-opt.mine .k { background: var(--blue-primary); border-color: var(--blue-primary); color: #fff; }
.qb-opt.correct { border-color: #7cc496; background: #f2fbf5; }
.qb-opt.correct .k { background: #2e9e5b; border-color: #2e9e5b; color: #fff; }
.qb-opt.mine.correct { border-color: #2e9e5b; background: #e4f5ea; }
/* 🔴 1104 22:20 学生端选项着色规则：
   选对了 → 该选项绿色；选错了 → 该选项红色；正确选项始终绿色标出 */
.qb-opt.mine.ok { border-color: #2e9e5b; background: #e4f5ea; }
.qb-opt.mine.ok .k { background: #2e9e5b; border-color: #2e9e5b; color: #fff; }
.qb-opt.mine.wrong { border-color: #d9483b; background: #fdeceb; }
.qb-opt.mine.wrong .k { background: #d9483b; border-color: #d9483b; color: #fff; }
.qb-tag {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: .3px;
}
.qb-opt.correct .qb-tag { background: #2e9e5b; color: #fff; }
.qb-opt.mine .qb-tag { background: var(--blue-primary); color: #fff; }
.qb-opt.mine.ok .qb-tag { background: #2e9e5b; color: #fff; }
.qb-opt.mine.wrong .qb-tag { background: #d9483b; color: #fff; }
.qb-opt.mine.correct .qb-tag { background: #2e9e5b; color: #fff; }

.qb-expl {
  font-size: 14px;
  line-height: 1.75;
  color: #22242e;
  font-family: var(--serif);
  white-space: pre-wrap;
  background: #fffdf5;
  border: 1px solid #f0e6c8;
  border-radius: 6px;
  padding: 13px 15px;
}
.qb-expl.none { color: #8a8fa0; font-family: var(--sans); font-size: 13px; background: #f7f8fa; border-color: #e6e9f0; }

.rec-foot { margin-top: 22px; }
.rec-tip { font-size: 12px; color: #8a8fa0; line-height: 1.7; }

/* ══════════ 🔴 1104 18:40 开始页 / 结束页（嵌套进个人页） ══════════
   说明页与结束页原在 exam.html，现搬进个人页：学生全程留在 /s/<token>，
   只有中间的答题界面才跳 exam.html。
   视觉沿用 style.css 的 .intro-* / .mode-* / .done-*（home.html 已引 style.css）。 */
#startView, #doneView {
  position: fixed; inset: 0; z-index: 60;
  width: 100%; height: 100vh;
}
#startView { background: #fafafa; }
#doneView {
  background: #2a2f7d; align-items: center; justify-content: center;
  overflow: hidden;
}
.done-inner { text-align: center; position: relative; z-index: 2; padding: 0 20px; }
.done-card { max-width: 92vw; width: 520px; }
.done-btn-ghost {
  background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55);
  margin-top: 12px; padding: 10px 22px;
}
.done-btn-ghost:hover { background: rgba(255,255,255,.12); }
/* 结束页彩带（与答题端结束页同款） */
.done-confetti { position: absolute; width: 7px; height: 10px; opacity: .85; border-radius: 1px; animation: done-fall linear infinite; }
@keyframes done-fall {
  0% { transform: translateY(-12vh) rotate(0deg); }
  100% { transform: translateY(112vh) rotate(720deg); }
}

/* 🔴 1105 需要完成日期（老师绑定作业时填） */
.pack-meta .due, .pack-meta .due b { color: #b42318; }

/* 🔴 1105 19:30 答题详情图表题的图（此前缺失） */
.qb-chart img { max-width: 100%; display: block; border: 1px solid #e2e4ea; border-radius: 8px; }