/* =============================================================================
 * shell.css —— 统一外壳：状态栏 + 页头 + 左侧导航 + 内容区（+ 手机底部 Tab）
 * -----------------------------------------------------------------------------
 * 一套外壳，四种皮肤（body[data-shell]）：
 *   scene —— 学生首页 hub / 教师首页 hub：房间照 + 玻璃面板 + 悬浮图标导航（现状观感）
 *   flat  —— 浅色页（学情报告 / 班级学情等实体内容页）
 *   page  —— 二级页（独立跳转）：状态栏 + 页头(返回) + 全宽内容，无左侧导航
 *   bare  —— 欢迎页 / 登录页：无状态栏内容、无导航
 *
 * 结构（页面作者按此写，不要自创）：
 *   body.app[data-shell][data-tabbar?]
 *     div.app__room                        （scene 皮肤的房间照）
 *     header.statusbar                     （统一状态栏：时间 / 网络 / 电量）
 *     div.app__body
 *       div.panel
 *         aside.rail                       （左侧导航：账号块 + 星球 + 菜单）
 *         main.content
 *           header.appbar                  （页头：返回 / 标题 / 动作）
 *           div.content__scroll.scroll     （内容区，自身滚动）
 *     nav.tabbar                           （仅手机 + 有 data-tabbar 的页面）
 * ========================================================================== */

body.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: var(--surface-2);
  overflow: hidden;
}

/* ============================== 房间照（scene） ============================== */
.app__room {
  position: fixed;
  inset: 0;
  background: url('static/teacher-v2/bg-room.jpg') center / cover no-repeat;
  z-index: 0;
}
body.app:not([data-shell="scene"]) .app__room { display: none; }

/* ============================== 状态栏 ============================== */
.statusbar {
  position: relative;
  z-index: var(--z-appbar);
  flex: 0 0 auto;
  height: calc(var(--h-status) + var(--pad-safe-t));
  padding: var(--pad-safe-t) var(--s6) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  font-size: var(--f-xs);
  color: var(--ink-3);
  letter-spacing: var(--ls-tight);
}
.statusbar__side { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.statusbar__time { font-weight: 700; font-family: var(--font-num); color: var(--ink-1); }
.statusbar__date { color: var(--ink-4); }
.statusbar__ico { width: 16px; height: 16px; }
.statusbar__batt { display: flex; align-items: center; gap: 4px; font-family: var(--font-num); }
/* 场景/玻璃皮肤：白字 */
body.app[data-shell="scene"] .statusbar { color: var(--ink-inv-2); }
body.app[data-shell="scene"] .statusbar__time { color: #fff; }
body.app[data-shell="scene"] .statusbar__date { color: rgba(255, 255, 255, 0.8); }

/* ============================== 主体 ============================== */
.app__body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--s2) var(--s7, 28px) var(--s6);
}
.panel {
  height: 100%;
  display: grid;
  grid-template-columns: var(--w-rail) minmax(0, 1fr);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--sh-sm);
}
/* scene：玻璃面板（设计稿实测：只有背景模糊 + 一圈细描边，没有白色蒙版） */
body.app[data-shell="scene"] .panel {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 1.2px var(--glass-line-2), var(--glass-shadow);
  transform: translateZ(0);
}
/* page：无导航，内容独占 */
body.app[data-shell="page"] .panel { grid-template-columns: minmax(0, 1fr); background: transparent; box-shadow: none; }
body.app[data-shell="page"] .app__body { padding: 0; }
body.app[data-shell="bare"] .panel { grid-template-columns: minmax(0, 1fr); background: transparent; box-shadow: none; }
body.app[data-shell="bare"] .app__body { padding: 0; }

/* ============================== 左侧导航 ============================== */
.rail {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s6) var(--s3) var(--s5);
  min-width: 0;
  overflow: hidden;
}
body.app[data-shell="scene"] .rail {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.app[data-shell="flat"] .rail { background: var(--surface); border-right: 1px solid var(--line); }

.rail__acct {
  display: flex; align-items: flex-start; gap: var(--s2);
  width: 100%; padding: 0 var(--s2) 0 var(--s4);
  border-radius: var(--r-sm); text-align: left;
  color: var(--ink-1);
  transition: background var(--dur-2) var(--ease);
}
.rail__acct:hover { background: rgba(255, 255, 255, 0.14); }
body.app[data-shell="scene"] .rail__acct { color: #fff; }
.rail__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rail__name { font-size: var(--f-body); font-weight: 700; }
.rail__sub { display: flex; align-items: center; gap: 2px; font-size: var(--f-sm); color: inherit; opacity: 0.9; }
.rail__chev { width: 14px; height: 14px; flex: 0 0 auto; }
.rail__role { padding-left: var(--s4); font-size: var(--f-sm); color: inherit; opacity: 0.9; }

.rail__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.rail__nav { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding-bottom: var(--s4); }

/* ⚠️ 平板竖屏（701–1100）导航收成 88px 图标轨：账号块必须换成「头像 + 年级」竖排，
   否则「春田花花 / 四年级」会被逐字竖排（左上角崩坏 —— 用户实测反馈）。
   姓名在个人中心里看；图标轨保留头像、年级与导航项小字（3 字 × 11px 在 88px 里放得下）。 */
@media (max-width: 1100px) {
  .rail { padding: var(--s4) var(--s2) var(--s4); gap: var(--s3); }
  .rail__acct {
    flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 0; text-align: center;
  }
  .rail__acct .avatar { width: 44px; height: 44px; }
  .rail__who { align-items: center; width: 100%; gap: 0; }
  .rail__name { display: none; }
  .rail__sub { justify-content: center; max-width: 100%; font-size: var(--f-xs); }
  .rail__role { padding: 0; text-align: center; font-size: var(--f-xs); }
}

/* 星球（回首页） */
.rail__planet {
  display: grid; place-items: center;
  width: 100%; min-height: var(--tap); padding: var(--s2) 0;
  border-radius: var(--r-sm);
  transition: transform var(--dur-2) var(--ease);
}
.rail__planet:hover { transform: translateY(-2px) rotate(-6deg); }
.rail__planet img, .rail__planet svg { width: 60px; height: 44px; }

/* 导航项：统一几何（inactive = 细白描边圆；active = 白圆 + 弧光 + 蓝底标签） */
.navitem {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; padding: 2px 0;
  color: #fff;
  transition: transform var(--dur-2) var(--ease);
}
body.app[data-shell="flat"] .navitem { color: var(--ink-3); }
.navitem:hover { transform: translateY(-1px); }
.navitem:active { transform: scale(0.96); }
.navitem__ring {
  position: relative;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
body.app[data-shell="flat"] .navitem__ring { border-color: var(--line-2); }
.navitem__ring svg { width: 22px; height: 22px; }
.navitem__label { font-size: var(--f-cap); line-height: 1; padding: 2px 0; border-radius: var(--r-pill); white-space: nowrap; }
.navitem.is-on .navitem__ring {
  background: #fff; border-color: #fff; color: var(--brand-dd);
  box-shadow: 0 6px 16px rgba(9, 60, 110, 0.25);
}
body.app[data-shell="flat"] .navitem.is-on .navitem__ring { background: var(--brand); border-color: var(--brand); color: #fff; }
.navitem.is-on .navitem__label { background: var(--brand); color: #fff; font-weight: 700; padding: 3px 10px; }
/* active 的弧光：统一 5 色 conic 环（学生/教师同款，取代两套各自的切图） */
.navitem.is-on .navitem__ring::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(from 210deg, #FFC53D, #FF8A6B, #FF5A8A, #7B61FF, #35C7B6, #FFC53D);
  -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 80%);
  mask: radial-gradient(closest-side, transparent 78%, #000 80%);
  pointer-events: none;
}
.navitem__badge {
  position: absolute; top: -2px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--red); color: #fff; font-size: 10px; line-height: 18px; text-align: center; font-weight: 700;
}

/* ============================== 内容区 ============================== */
/* ⚠️ 必须写 grid-template-columns：隐式列是 auto，最小值取「子项 min-content 的最大值」，
   任一偏宽的子项都会把整列撑破（表现为 appbar / content__scroll / actionbar 一起比视口宽 2px）。 */
.content { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }

.appbar {
  display: flex; align-items: center; gap: var(--s3);
  min-height: var(--h-appbar); padding: var(--s2) var(--s5);
  flex: 0 0 auto;
}
body.app[data-shell="page"] .appbar { padding: var(--s2) var(--s6); border-bottom: 1px solid var(--line); }
.appbar__title { font-size: var(--f-h3); font-weight: 700; color: var(--ink-1); min-width: 0; }
body.app[data-shell="scene"] .appbar__title { color: #fff; }
.appbar__sub { font-size: var(--f-sm); color: var(--ink-4); }
body.app[data-shell="scene"] .appbar__sub { color: rgba(255, 255, 255, 0.85); }
.appbar__actions { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
/* 返回按钮：统一 44×44 触控区 + 22px 线性 chevron；场景页白描边，浅色页墨色 */
.appbar__back {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); border-radius: var(--r-sm);
  color: var(--ink-1); flex: 0 0 auto;
  transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.appbar__back:hover { background: rgba(82, 67, 55, 0.06); }
.appbar__back:active { transform: scale(0.94); }
.appbar__back svg { width: 22px; height: 22px; }
body.app[data-shell="scene"] .appbar__back { color: #fff; }
body.app[data-shell="scene"] .appbar__back:hover { background: rgba(255, 255, 255, 0.18); }

/* 科目切换（学生）/ 模块上下文（教师）：统一放在页头，页面内不再重复 */
.subjects { display: flex; align-items: center; gap: var(--s5); }
.subjects > button {
  position: relative; min-height: var(--tap); padding: 0 4px;
  font-size: var(--f-h3); font-weight: 500; color: rgba(255, 255, 255, 0.92);
  transition: color var(--dur-2) var(--ease);
}
.subjects > button.is-on { font-weight: 700; color: #fff; }
.subjects > button.is-on::after {
  content: ''; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 64px; height: 12px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 213, 107, 0.95) 50%, rgba(255, 255, 255, 0) 100%);
}
body.app[data-shell="flat"] .subjects > button { color: var(--ink-3); }
body.app[data-shell="flat"] .subjects > button.is-on { color: var(--brand-dd); }

.content__scroll {
  min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: 0 var(--s5) var(--s5);
  scroll-behavior: smooth;
}
body.app[data-shell="page"] .content__scroll { padding: var(--s6) var(--s6) var(--s10); }
.page { max-width: var(--content-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--gap); }
/* 玻璃皮肤下的浅色文字 */
body.app[data-shell="scene"] .page :is(.t-h1, .t-h2, .t-h3, .t-lg) { color: #fff; }
body.app[data-shell="scene"] .page :is(.t-body, .t-sm, .t-muted) { color: rgba(255, 255, 255, 0.88); }

/* 页面级 Tab（hub 内切换模块时用；不改 URL） */
.hubtabs { display: flex; gap: var(--s2); }
.hubtabs > button {
  min-height: 38px; padding: 0 var(--s4); border-radius: var(--r-pill);
  font-size: var(--f-sm); font-weight: 600; color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.16);
}
.hubtabs > button[aria-selected="true"] { background: #fff; color: var(--brand-dd); box-shadow: var(--sh-sm); }

/* 底部提示条（设计稿之外的开发说明，可删） */
.devbar {
  position: fixed; left: 50%; bottom: 8px; transform: translateX(-50%);
  z-index: var(--z-probe); display: flex; align-items: center; gap: var(--s3);
  padding: 6px var(--s4); border-radius: var(--r-pill);
  background: rgba(21, 38, 56, 0.86); color: #fff; font-size: var(--f-xs);
}
.devbar a { color: #9FD8FF; }

/* ============================== 底部 Tab（手机） ============================== */
.tabbar { display: none; }

@media (max-width: 700px) {
  /* 手机：状态栏交给系统（用 env() 安全区让位），左侧导航换底部 Tab，画布不再整体缩放 */
  .statusbar { display: none; }
  .app__body { padding: 0; }
  .panel { grid-template-columns: minmax(0, 1fr); border-radius: 0; box-shadow: none; background: var(--surface-2); }
  .rail { display: none; }
  body.app[data-shell="scene"] .app__room { display: none; }
  body.app[data-shell="scene"] { background: var(--surface-2); }
  body.app[data-shell="scene"] .panel { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
  /* 手机 hub 只保留一条品牌渐变头 */
  body.app[data-shell="scene"] .content { background: linear-gradient(180deg, var(--brand) 0%, var(--brand-l) 96px, var(--surface-2) 96px); }
  body.app[data-shell="scene"] .appbar { padding: calc(var(--pad-safe-t) + var(--s2)) var(--s3) var(--s2); }
  body.app[data-shell="page"] .appbar { padding: calc(var(--pad-safe-t) + var(--s2)) var(--s3) var(--s2); }
  .content__scroll { padding: 0 var(--s4) var(--s4); }
  body.app[data-shell="page"] .content__scroll { padding: var(--s4) var(--s4) var(--s10); }
  .appbar { flex-wrap: nowrap; min-height: var(--h-appbar); padding: var(--s2) var(--s3); gap: var(--s2); }
  .appbar__title { font-size: var(--f-lg); }
  .subjects { flex: 1 1 auto; min-width: 0; gap: var(--s4); overflow-x: auto; }
  .subjects > button { font-size: var(--f-lg); white-space: nowrap; flex: 0 0 auto; }
  .appbar__actions { flex: 0 0 auto; margin-left: auto; }

  /* —— 场景皮肤在手机上转浅色：同一套组件，只换配色与导航形态 —— */
  body.app[data-shell="scene"] :is(.t-h1, .t-h2, .t-h3, .t-lg, .t-inv, .card__title) { color: var(--ink-1); }
  body.app[data-shell="scene"] :is(.t-body, .t-sm, .t-muted) { color: var(--ink-3); }
  body.app[data-shell="scene"] .t-xs { color: var(--ink-4); }
  body.app[data-shell="scene"] .card--glass { background: var(--surface); color: var(--ink-3); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--sh-sm); }
  body.app[data-shell="scene"] .badge--glass { background: var(--brand-100); color: var(--brand-dd); }
  body.app[data-shell="scene"] .chip--glass { background: var(--surface-3); color: var(--ink-3); }
  body.app[data-shell="scene"] .segment--glass { background: var(--surface-3); }
  body.app[data-shell="scene"] .segment--glass > button { color: var(--ink-3); }
  body.app[data-shell="scene"] .segment--glass > button[aria-selected="true"] { background: #fff; color: var(--brand-dd); }
  body.app[data-shell="scene"] .btn--ghost { background: var(--surface-3); color: var(--ink-1); box-shadow: none; }
  body.app[data-shell="scene"] .sd-hello__day { color: var(--ink-1); }
  body.app[data-shell="scene"] .sd-hello__num { color: var(--orange-d); }
  body.app[data-shell="scene"] .sd-hello__meta { color: var(--ink-4); }
  body.app[data-shell="scene"] .sd-review__row { background: var(--surface-2); color: var(--ink-1); }
  body.app[data-shell="scene"] .sd-review__sub { color: var(--ink-4); }
  body.app[data-shell="scene"] .sd-bar { background: var(--surface-3); }
  body.app[data-shell="scene"] .sd-bar__hint { color: var(--ink-4); }
  body.app[data-shell="scene"] .sd-overview__title { color: var(--ink-1); }
  body.app[data-shell="scene"] .sd-shortcut { background: var(--surface-2); color: var(--ink-1); }
  body.app[data-shell="scene"] .sd-shortcut__note { background: var(--brand-100); color: var(--brand-dd); }
  body.app[data-shell="scene"] .sd-module { background: var(--surface-2); color: var(--ink-1); }
  body.app[data-shell="scene"] .sd-module__desc { color: var(--ink-4); }
  body.app[data-shell="scene"] .sd-video__title { color: var(--ink-1); }
  body.app[data-shell="scene"] .sd-video__sub { color: var(--ink-4); }
  body.app[data-shell="scene"] .task-card { background: var(--surface-2); color: var(--ink-1); }
  body.app[data-shell="scene"] .task-card__sub { color: var(--ink-4); }
  body.app[data-shell="scene"] .task-card__ring .ring__track { stroke: var(--surface-4); }
  body.app[data-shell="scene"] .task-card__ring .ring__val { stroke: var(--brand); }
  body.app[data-shell="scene"] .task-card__ring .ring__text { fill: var(--ink-1); }
  body.app[data-shell="scene"] .tch-module, body.app[data-shell="scene"] .tch-stat { background: var(--surface-2); color: var(--ink-1); }
  body.app[data-shell="scene"] .tch-stat__ico, body.app[data-shell="scene"] .task-card__ico { background: var(--brand-50); }
  /* 页头仍在蓝渐变上 → 保持白字 */
  body.app[data-shell="scene"] .appbar__title,
  body.app[data-shell="scene"] .appbar__sub,
  body.app[data-shell="scene"] .appbar__back,
  body.app[data-shell="scene"] .appbar__actions .icon-btn { color: #fff; }
  body.app[data-shell="scene"] .subjects > button { color: rgba(255, 255, 255, 0.92); }
  body.app[data-shell="scene"] .subjects > button.is-on { color: #fff; }

  .tabbar {
    display: flex; flex: 0 0 auto;
    padding: 6px var(--s2) calc(6px + var(--pad-safe-b));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    z-index: var(--z-rail);
  }
  .tabbar__item {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 0; border-radius: var(--r-sm);
    color: var(--ink-4); font-size: 10px;
  }
  .tabbar__item svg { width: 22px; height: 22px; }
  .tabbar__item.is-on { color: var(--brand-dd); font-weight: 700; }
  .tabbar__item.is-on::before {
    content: ''; position: absolute; margin-top: -6px; width: 26px; height: 3px; border-radius: 3px; background: var(--brand);
  }
  .tabbar__item { position: relative; }
}

/* ============================== 欢迎页 / 登录页（bare） ============================== */
/* 这两页没有左侧导航、没有页头：内容整体居中，背景由页面自己给 */
.bare-stage {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  display: grid; place-items: center;
  padding: var(--s8) var(--s6) calc(var(--s8) + var(--pad-safe-b));
}
body.app[data-shell="bare"] .statusbar { color: rgba(255, 255, 255, 0.85); }
body.app[data-shell="bare"] .statusbar__time { color: #fff; }
body.app[data-shell="bare"] .statusbar__date { color: rgba(255, 255, 255, 0.8); }
/* 浅色版（登录页用）：状态栏深色字 */
body.app[data-shell="bare"][data-tone="light"] .statusbar,
body.app[data-shell="bare"][data-tone="light"] .statusbar__date { color: var(--ink-4); }
body.app[data-shell="bare"][data-tone="light"] .statusbar__time { color: var(--ink-1); }

/* ============================== 布局自检探针 ============================== */
.probe {
  position: fixed; left: 0; top: 0; right: 0; z-index: var(--z-probe);
  padding: 4px var(--s3); background: rgba(198, 46, 52, 0.92); color: #fff;
  font-size: 11px; letter-spacing: 0; font-family: ui-monospace, Consolas, monospace;
}
.probe-flag { outline: 2px solid red !important; outline-offset: -2px; }