/* ============================================================================
   布局：顶栏 + 三栏骨架（模块 → 页面 → 内容）
   ============================================================================ */
.top{
  height:var(--top);display:flex;align-items:center;gap:14px;padding:0 16px;
  background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:30;
  /* ⚠️ min-width:0 必填。
     flex 容器的默认 min-width 是 auto —— 子项内容再宽也不会收缩。
     实测手机 390px 时顶栏里「版本号+倒计时+账号+退出」挤不下，
     最后那个 .tbtn（退出）被顶到 right=413，把**整个视口的 innerWidth 撑成 413**，
     于是页面出现横向滚动，而 .top 自己量出来还是 390（元凶很难一眼看出）。
     min-width:0 + overflow:hidden 让它老老实实按宽度裁，不允许撑宽视口。 */
  min-width:0;overflow:hidden;
}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.brand .mark{
  width:28px;height:28px;border-radius:7px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.brand b{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.brand em{font-style:normal;font-size:11.5px;color:var(--ink3);display:block;line-height:1.2}
.top .sp{flex:1}
.tbtn{
  height:32px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--line2);
  background:var(--surface);font-size:13px;color:var(--ink2);font-weight:500;
  display:inline-flex;align-items:center;gap:7px;transition:background .12s var(--move);
}
.tbtn:hover{background:var(--surface3)}

/* 环境徽标：一眼看出「这是在打线上真数据」，避免误操作 */
.env{
  font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;
  color:var(--brand-ink);background:var(--brand-w);border:1px solid var(--brand-t);
}
.env.live{color:var(--warn);background:var(--warn-w);border-color:#e8d9b8}
/* 顶栏版本号：出问题时截图即可看出跑的是哪一版 */
.ver-chip{
  font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:999px;
  color:var(--ink3);background:var(--surface3);border:1px solid var(--line);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.who{font-size:12.5px;color:var(--ink3)}

/* 会话倒计时：空闲登出前的提示，放在顶栏一直可见 */
.session-chip{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:3px 9px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2);
  font-variant-numeric:tabular-nums;
}
.session-chip.warn{color:var(--warn);border-color:#e8d9b8;background:var(--warn-w)}
.session-chip.danger{color:var(--danger);border-color:#e6c6c1;background:var(--danger-w)}

.shell{display:grid;grid-template-columns:var(--nav-w) var(--list-w) 1fr;height:calc(100vh - var(--top))}

/* ---------- 第一级：模块栏 ---------- */
.nav{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.nav-t{
  padding:14px 16px 8px;font-size:11px;font-weight:700;color:var(--ink3);
  letter-spacing:.08em;text-transform:uppercase;
}
.mod{
  display:flex;align-items:center;gap:10px;width:calc(100% - 16px);text-align:left;
  padding:9px 12px;margin:0 8px;border-radius:var(--r-sm);
  color:var(--ink2);font-size:13.5px;font-weight:500;position:relative;
  transition:background .12s var(--move),color .12s var(--move);
}
.mod:hover{background:var(--surface3);color:var(--ink)}
.mod .mi{width:17px;height:17px;flex:0 0 auto;color:var(--ink3)}
.mod .mn{margin-left:auto;font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}
.mod[aria-current="true"]{background:var(--brand-w);color:var(--brand-ink);font-weight:600}
.mod[aria-current="true"] .mi,.mod[aria-current="true"] .mn{color:var(--brand)}
.mod[aria-current="true"]::before{
  content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--brand);
}
.mod-ops{margin-top:auto;padding:8px;border-top:1px solid var(--line)}
.mod-ops .mod{margin:0;width:100%}
.mod.danger .mi,.mod.danger .mn{color:var(--danger)}
.mod.danger[aria-current="true"]{background:var(--danger-w);color:var(--danger)}
.mod.danger[aria-current="true"]::before{background:var(--danger)}

/* ---------- 第二级：页面列表 ---------- */
.pages{background:var(--surface2);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.pages-t{
  padding:14px 16px 10px;font-size:14.5px;font-weight:700;color:var(--ink);
  display:flex;align-items:baseline;gap:8px;
}
.pages-t span{font-size:11.5px;font-weight:500;color:var(--ink3)}
.pages-l{flex:1;overflow:auto;padding:0 8px 12px;display:flex;flex-direction:column;gap:1px}
.pg{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:8px 10px;border-radius:var(--r-sm);color:var(--ink2);font-size:13px;
  position:relative;transition:background .12s var(--move),color .12s var(--move);
}
.pg:hover{background:var(--surface3);color:var(--ink)}
.pg[aria-current="true"]{background:var(--brand);color:#fff;font-weight:600}
.pg .pgi{width:15px;height:15px;flex:0 0 auto;opacity:.75}
.pg[aria-current="true"] .pgi{opacity:1}
.pg .pgn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg .pgdot{width:6px;height:6px;border-radius:50%;background:var(--danger);flex:0 0 auto}
.pg.dg{color:var(--danger)}
.pg.dg:hover{background:var(--danger-w)}
.pg.dg[aria-current="true"]{background:var(--danger);color:#fff}
.pg-sep{
  margin:12px 10px 6px;font-size:10.5px;font-weight:700;color:var(--ink3);
  letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:7px;
}
.pg-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.pg-note{
  margin:10px 10px 0;padding:9px 10px;border-radius:var(--r-sm);font-size:11.5px;line-height:1.65;
  color:var(--danger);background:var(--danger-w);border:1px solid #e6c6c1;
}

/* ---------- 内容区 ---------- */
.work{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--bg)}
.bar{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:var(--surface);border-bottom:1px solid var(--line);flex:0 0 auto;
}
.bar h1{font-size:16px;font-weight:700;letter-spacing:-.01em}
.bar .crumb{font-size:12px;color:var(--ink3)}
.bar .sp{flex:1}
.listwrap{flex:1;overflow:auto;padding:14px 16px}

/* 顶栏「教学信息」：学期 / 第几周 / 日期范围。默认隐藏，由页面填。 */
.term-chip{
  display:none;
  font-size:11.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:2px 9px;border-radius:999px;background:var(--brand-w);color:var(--brand-ink);
  max-width:46vw;
}
@media (max-width:1180px){ .term-chip{display:none !important} }