/* ===== 班主任工作台 · 移动端样式 ===== */
:root{
  --bg:#f4f5f9;
  --card:#ffffff;
  --text:#1b1f2a;
  --text-2:#6b7280;
  --text-3:#9aa3b2;
  --line:#eceef4;
  --blue:#2f6bff;
  --green:#12b76a;
  --orange:#f59e0b;
  --purple:#7c5cff;
  --red:#ef4444;
  --teal:#0d9488;
  --side:#20253a;
  --side-2:#272d45;
  --radius:14px;
  --shadow:0 1px 2px rgba(24,32,64,.04), 0 6px 18px rgba(24,32,64,.05);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;
  overflow:hidden;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;outline:none}
button{cursor:pointer;border:none;background:none;padding:0}
img{max-width:100%}

/* ---------- 外壳 ---------- */
.app{
  position:relative;width:100%;height:100%;height:100dvh;
  background:var(--bg);overflow:hidden;
  display:flex;flex-direction:column;
}

/* ---------- 顶栏 ---------- */
.topbar{
  height:56px;flex:0 0 56px;display:flex;align-items:center;gap:10px;padding:0 10px;
  background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:20;
}
.icon-btn{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  font-size:19px;color:#3d4657;flex:0 0 auto;
}
.icon-btn:active{background:#f1f3f8}
.class-pill{
  display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;
  background:#eef2ff;color:var(--blue);font-weight:600;font-size:13.5px;border-radius:999px;
}
.class-pill .caret{font-size:10px;opacity:.7}
.clock{margin-left:auto;text-align:right;padding-right:6px;flex:0 0 auto}
.clock-date{font-size:11px;color:var(--text-2);line-height:1.2}
.clock-time{font-size:18px;font-weight:700;letter-spacing:.5px;font-variant-numeric:tabular-nums}

/* ---------- 顶栏同步状态点 ---------- */
.sync-dot{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 8px;
  border-radius:999px;background:#f4f6fa;flex:0 0 auto;
}
.sync-dot-i{width:9px;height:9px;border-radius:50%;background:#c3c9d6;flex:0 0 auto;transition:background .2s}
.sync-dot-t{font-size:11px;color:var(--text-2);white-space:nowrap}
.sync-dot.ok .sync-dot-i{background:#12b76a}
.sync-dot.dirty .sync-dot-i{background:#f59e0b}
.sync-dot.syncing .sync-dot-i{background:#2f6bff;animation:blink 1s infinite}
.sync-dot.offline .sync-dot-i,.sync-dot.error .sync-dot-i{background:#ef4444}
.sync-dot.syncing .sync-dot-t{color:var(--blue)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@media (max-width:560px){.sync-dot-t{display:none}.sync-dot{padding:0 8px}}

/* ---------- 开关 ---------- */
.sw{
  width:44px;height:25px;border-radius:999px;background:#d8dde8;position:relative;
  transition:background .2s;flex:0 0 auto;
}
.sw.on{background:var(--blue)}
.sw-knob{
  position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s;
}
.sw.on .sw-knob{transform:translateX(19px)}
.switch-line{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:13.5px}
.sync-state{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.link-btn{
  background:none;border:0;padding:0;color:#e0508f;font-size:11.5px;text-decoration:underline;
}

/* ---------- 抽屉导航 ---------- */
.drawer{
  position:absolute;top:0;bottom:0;left:0;width:78%;max-width:306px;background:var(--side);
  color:#fff;z-index:60;transform:translateX(-102%);transition:transform .26s ease;
  display:flex;flex-direction:column;
}
.drawer.open{transform:none}
.scrim{
  position:absolute;inset:0;background:rgba(12,16,30,.45);z-index:55;
  opacity:0;pointer-events:none;transition:opacity .26s ease;
}
.scrim.show{opacity:1;pointer-events:auto}
.dhead{display:flex;align-items:center;gap:10px;padding:20px 16px 14px}
.dlogo{
  width:40px;height:40px;border-radius:12px;flex:0 0 auto;
  background:linear-gradient(140deg,#5b7cff,#2f4bd0);display:grid;place-items:center;
  font-weight:800;font-size:19px;box-shadow:0 4px 12px rgba(47,75,208,.45);
}
.dname{font-size:15.5px;font-weight:700;letter-spacing:.3px}
.dsub{font-size:11px;color:#8e97b3;margin-top:1px}
.dnav{flex:1;overflow-y:auto;padding:6px 10px 12px}
.dnav::-webkit-scrollbar{width:0}
.nav-item{
  width:100%;display:flex;align-items:center;gap:11px;padding:0 10px;height:38px;margin-bottom:5px;
  border-radius:10px;color:#c9cfe3;font-size:13.5px;text-align:left;transition:background .15s;
}
.nav-item .nav-icon{width:22px;display:grid;place-items:center;font-size:16px;flex:0 0 auto}
.nav-item .nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-item .nav-badge{
  min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;
  font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1;
}
.nav-item.active{background:var(--side-2);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 #4d7cff}
.nav-item:active{background:#2c3350}
.dfoot{padding:10px 10px 20px;border-top:1px solid rgba(255,255,255,.07)}

/* ---------- 主区 ---------- */
.main{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative}
.main::-webkit-scrollbar{width:0}
.page{padding:16px clamp(14px,2.2vw,32px) 44px;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.page-title{font-size:21px;font-weight:800;letter-spacing:.2px}
.page-sub{font-size:12px;color:var(--text-2);margin-top:3px}
.head-actions{display:flex;gap:8px;flex:0 0 auto;padding-top:2px}

/* ---------- 按钮 ---------- */
.btn{
  height:32px;padding:0 12px;border-radius:8px;background:#fff;color:var(--text);
  border:1px solid var(--line);font-size:12.5px;font-weight:500;display:inline-flex;
  align-items:center;justify-content:center;gap:4px;white-space:nowrap;
}
.btn:active{background:#f3f5fa}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:600}
.btn-primary:active{background:#2559d8}
.btn-danger{background:#fff;color:var(--red);border-color:#f7d4d4}
.btn-block{width:100%;height:40px;font-size:14px;border-radius:10px}
.btn-sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:9px}
.btn-lg{height:36px;padding:0 16px;font-size:13px}

/* ---------- 卡片 ---------- */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card + .card{margin-top:12px}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:13px 14px 0}
.card-title{font-size:14.5px;font-weight:700}
.card-pad{padding:13px 14px}
.section{margin-top:14px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 9px}
.section-title{font-size:14.5px;font-weight:700}
.section-action{font-size:12px;color:var(--text-2)}

/* ---------- 统计卡 ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:10px}
.stat{
  position:relative;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:13px 12px 13px 16px;overflow:hidden;
}
.stat-bar{position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--blue)}
.stat-bar.green{background:var(--green)}
.stat-bar.orange{background:var(--orange)}
.stat-bar.purple{background:var(--purple)}
.stat-bar.red{background:var(--red)}
.stat-bar.teal{background:var(--teal)}
.stat-label{font-size:12px;color:var(--text-2)}
.stat-value{font-size:25px;font-weight:800;line-height:1.15;margin:4px 0 2px;color:var(--blue);letter-spacing:-.5px}
.stat-value.green{color:var(--green)}
.stat-value.orange{color:var(--orange)}
.stat-value.purple{color:var(--purple)}
.stat-value.red{color:var(--red)}
.stat-value.teal{color:var(--teal)}
.stat-value.text{font-size:19px;padding-top:5px;letter-spacing:0}
.stat-value small{font-size:13px;font-weight:600;margin-left:1px}
.stat-sub{font-size:11.5px;color:var(--text-3)}
/* 可点的统计卡：仪表盘那 8 张点了跳对应页面（小程序那边一早就可点，网页端补上）。
   是 <button> 不是 <div>，所以要把它按卡片样式重置回来，再加"能点"的反馈。 */
.stat.tap{
  display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  border:1px solid transparent;transition:transform .12s,box-shadow .12s,border-color .12s;
}
.stat.tap:hover{border-color:var(--blue);transform:translateY(-1px)}
.stat.tap:active{transform:translateY(0);box-shadow:none}
.stat.tap:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* 右上角那个小箭头：只提示"这里能点"，不抢数字的视线 */
.stat-go{float:right;color:var(--text-3);font-weight:700;font-size:14px;line-height:1}

/* ---------- 快捷操作 ---------- */
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(84px,100%),1fr));gap:6px;padding:6px 8px 14px}
.quick-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px;border-radius:12px}
.quick-item:active{background:#f4f6fb}
.quick-icon{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:20px;background:#f1f4ff;
}
.quick-label{font-size:11.5px;color:#4b5563;text-align:center;line-height:1.25}

/* ---------- chips / tabs ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{height:0}
.chip{
  flex:0 0 auto;height:30px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-size:12.5px;color:#4b5563;display:inline-flex;align-items:center;gap:5px;
}
.chip.active{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:600}
.chip.active-green{background:var(--green);color:#fff;border-color:var(--green);font-weight:600}
.tabs{
  display:flex;gap:4px;background:#fff;border-radius:12px;padding:4px;box-shadow:var(--shadow);margin-bottom:10px;
}
.tab{flex:1;height:32px;border-radius:9px;display:grid;place-items:center;font-size:12.5px;color:#4b5563;font-weight:500}
.tab.active{background:#eef2ff;color:var(--blue);font-weight:700}
.filterbar{display:flex;gap:8px;margin-bottom:10px;overflow-x:auto;scrollbar-width:none}
.filterbar::-webkit-scrollbar{display:none}

/* ---------- 列表 ---------- */
.list{display:flex;flex-direction:column;gap:9px}
.row{
  display:flex;align-items:center;gap:11px;padding:12px;background:#fff;border-radius:12px;
  box-shadow:var(--shadow);
}
.row.tap:active{background:#f8f9fc}
.row-main{flex:1;min-width:0}
.row-title{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.row-sub{font-size:11.5px;color:var(--text-2);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.row-right{flex:0 0 auto;text-align:right;font-size:12px;color:var(--text-2)}
.row-right .strong{font-size:14px;font-weight:700;color:var(--text)}
.avatar{
  width:40px;height:40px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:13px;letter-spacing:.5px;
}
.avatar.sm{width:32px;height:32px;border-radius:9px;font-size:11.5px}
.avatar.lg{width:46px;height:46px;border-radius:13px;font-size:15px}
.avatar.round{border-radius:50%}

/* ---------- 标签 ---------- */
.tag{display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:600;line-height:1}
.tag-blue{background:#e8efff;color:#2f6bff}
.tag-green{background:#e3faef;color:#0e9f5e}
.tag-orange{background:#fff2df;color:#d98107}
.tag-purple{background:#efeaff;color:#6d4ce0}
.tag-red{background:#fee9e9;color:#e0393e}
.tag-gray{background:#f0f2f7;color:#6b7280}
.tag-pink{background:#ffeaf4;color:#e0508f}
.tag-teal{background:#e2f7f4;color:#0d9488}

/* ---------- 今日提醒条（仪表盘顶部，只看当天、有事才出现） ---------- */
.today-bar{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:#fff;border:1px solid #d9e4ff;border-left:4px solid var(--blue);
  border-radius:12px;padding:13px 15px;margin-bottom:12px;
  box-shadow:var(--shadow);transition:transform .15s ease;
}
.today-bar:active{transform:scale(.995)}
.tb-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(47,107,255,.14)}
.tb-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tb-title{font-size:14.5px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.tb-sub{font-size:12px;color:var(--text-2)}
.tb-go{flex:0 0 auto;font-size:12.5px;font-weight:600;color:var(--blue);white-space:nowrap}

/* ---------- 待办提醒条（内容区顶部细条：打开就出现，点开才展开） ----------
 * 2026-10-09 张工从"底部弹出面板"改过来的 —— 底部 sheet 在手机上要占 40% 屏高，
 * 他的原话是「换成顶部细条：不贴底，只在顶部占一行，点开才展开」。
 * sticky 吸在 .main 顶部（.main 本身就是滚动容器），不用改 index.html 的结构。 */
.remind-bar{
  position:sticky;top:0;z-index:12;background:#fff;
  border-bottom:1px solid #f2e4e4;box-shadow:0 2px 10px rgba(20,30,60,.05);
}
.remind-head{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  padding:11px clamp(14px,2.2vw,32px);
}
.remind-head:active{background:#fafbfd}
.remind-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#ef4444}
.remind-main{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.remind-title{font-size:14px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.remind-sub{font-size:12px;color:#ef4444;font-weight:600}
.remind-sub.mute{color:var(--text-3);font-weight:400}
.remind-caret{flex:0 0 auto;font-size:11px;color:var(--text-3);transition:transform .18s ease}
.remind-bar.open .remind-caret{transform:rotate(180deg)}
.remind-x{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#9aa3b2;font-size:13px}
.remind-x:active{background:#f1f3f8}
.remind-list{padding:0 clamp(14px,2.2vw,32px) 12px;max-height:52vh;overflow-y:auto}
.remind-list .kv{padding:9px 0;border-top:1px solid var(--line);gap:10px}
.remind-more{font-size:12px;color:var(--text-3);padding:9px 0 0}
.remind-go{
  display:block;width:100%;margin-top:10px;height:38px;border-radius:10px;
  background:var(--blue);color:#fff;font-size:13.5px;font-weight:600;
}
.remind-go:active{opacity:.9}

/* ---------- 进度条 ---------- */
.track{height:7px;border-radius:4px;background:#eef0f6;overflow:hidden;width:100%}
.fill{height:100%;border-radius:4px;background:var(--blue);transition:width .3s ease}
.track.thin{height:5px}

/* ---------- 时间线 ---------- */
.tl{position:relative;padding-left:2px}
.tl-day{margin-bottom:4px}
.tl-day-head{display:flex;align-items:center;gap:8px;margin:14px 2px 8px}
.tl-date{font-size:14px;font-weight:700}
.tl-week{font-size:11.5px;color:var(--text-2)}
.tl-item{display:flex;gap:10px;background:#fff;border-radius:12px;padding:12px;box-shadow:var(--shadow);margin-bottom:9px}
.tl-time{flex:0 0 46px;font-size:11px;color:var(--text-3);padding-top:2px;font-variant-numeric:tabular-nums}
.tl-time .now{display:inline-block;background:var(--blue);color:#fff;padding:2px 6px;border-radius:6px;font-size:11px;font-weight:600}
.tl-body{flex:1;min-width:0}
.tl-title{font-size:13.5px;font-weight:600}
.tl-meta{font-size:11.5px;color:var(--text-2);margin-top:3px}
/* 分段小标题：即将到来 / 已过期 */
.tl-sec{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  color:var(--text-3);margin:18px 2px 2px}
.tl-sec:before{content:'';width:3px;height:12px;border-radius:2px;background:var(--blue);flex:0 0 auto}
.tl-sec.past:before{background:#c8cdd8}
/* 可点的分段头：整段收起 / 展开（日程一多，过期那一大坨默认收成一行） */
button.tl-sec{width:100%;background:none;border:0;padding:0;font-family:inherit;text-align:left;
  justify-content:flex-start;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* 标题后面紧跟一个小胶囊，而不是被 space-between 甩到屏幕最右边（宽屏下隔着 1000px 看不出是它管这一段） */
.tl-sec-t{flex:0 1 auto;min-width:0}
.tl-sec-x{font-size:11px;font-weight:600;white-space:nowrap;padding:2px 8px;border-radius:999px;
  background:#eef2ff;color:var(--blue)}
.tl-sec.past .tl-sec-x{background:#f1f3f7;color:var(--text-2)}
.tl-sec:hover .tl-sec-x{background:#e2e9ff;color:var(--blue)}
.tl-sec.closed{color:var(--text-2)}
/* 段尾的「展开剩余 N 项」 */
.tl-more{display:block;width:100%;margin:2px 0 4px;padding:9px;background:none;cursor:pointer;
  border:1px dashed #dcdfe9;border-radius:10px;color:var(--text-2);font-family:inherit;
  font-size:12px;font-weight:600;-webkit-tap-highlight-color:transparent}
.tl-more:hover{color:var(--blue);border-color:var(--blue)}
/* 已过期：整段压暗，未过期的保持明亮 */
.tl-day.past .tl-date{font-size:13px;font-weight:600;color:var(--text-2)}
.tl-day.past .tl-week{color:var(--text-3)}
.tl-item.past{background:#f8f9fc;box-shadow:none;border:1px solid var(--line);opacity:.6}
.tl-item.past .tl-title{color:var(--text-2)}
.tl-item.past .tl-meta{color:var(--text-3)}
.check{
  width:26px;height:26px;border-radius:50%;border:1.5px solid #d8dce6;flex:0 0 auto;
  display:grid;place-items:center;color:transparent;font-size:14px;margin-top:2px;
}
.check.on{background:var(--green);border-color:var(--green);color:#fff}

/* ---------- 课表 ---------- */
.tt-wrap{overflow-x:auto;padding:0 0 6px;max-width:1040px;margin:0 auto}
.tt{border-collapse:separate;border-spacing:0;width:100%;min-width:520px;font-size:12px}
.tt th{
  font-weight:600;color:#4b5563;font-size:11.5px;padding:8px 0;background:#fff;position:sticky;top:0;
}
.tt td{border-top:1px solid var(--line);padding:0}
/* 节次列要放得下"08:00-08:40"这个区间（比单写 08:00 宽一倍），
   52px 会折成两行；nowrap 保证它老老实实待在一行里。 */
.tt .slots{width:70px;text-align:center;color:var(--text-2);font-size:10.5px;line-height:1.25;padding:6px 2px;white-space:nowrap}
.tt .slot-name{font-size:11.5px;color:#374151;font-weight:600}
.tt .cell{text-align:center;height:40px;color:#374151}
.tt .cell.mine{background:#eaf0ff;font-weight:700;color:#2f4bd0}
.tt .cell.empty{color:#c7ccd8}
.tt .lunch td{background:#f7f8fc;color:var(--text-2);font-size:11px;height:34px}
.tt .tt-col-mine{background:#fbfcff}

/* 「节次设置」面板里的一行 = 课表里的一行。
   拆成两行（名称 + 删除 / 开始 → 结束 + 不排课），不挤成一行 ——
   挤一行手机上时间输入框会被压到连 08:00 都显示不全，而时间控件的宽度是压不动它的。 */
.tt-set-row{border:1px solid var(--line);border-radius:11px;padding:9px 10px;margin-bottom:8px;background:#fff}
.tt-set-row.is-brk{background:#f7f8fc}
.tt-set-top{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.tt-set-row .tt-set-name{flex:1;min-width:0;font-weight:600}
.tt-set-del{
  flex:0 0 28px;width:28px;height:28px;border:0;border-radius:8px;background:#f2f4f8;
  color:var(--text-2);font-size:13px;line-height:1;cursor:pointer;
}
.tt-set-del:hover{background:#fdeaea;color:var(--red)}
.tt-set-del.is-armed{flex:0 0 auto;width:auto;padding:0 9px;background:#fdeaea;color:var(--red);font-size:12px}
.tt-set-bot{display:grid;grid-template-columns:1fr 16px 1fr auto;align-items:center;gap:7px}
.tt-set-bot .input{min-width:0;padding:0 8px;height:36px}
.tt-set-brk{
  height:34px;padding:0 10px;border:1px solid #e3e6ef;border-radius:9px;background:#fff;
  color:var(--text-2);font-size:12px;white-space:nowrap;cursor:pointer;
}
.tt-set-brk.on{background:var(--blue);border-color:var(--blue);color:#fff}
.tt-time-sep{text-align:center;color:var(--text-3);font-size:12px}
@media (max-width:380px){
  .tt-set-bot{grid-template-columns:1fr 12px 1fr;gap:5px}
  .tt-set-bot .tt-set-brk{grid-column:1 / -1;height:30px;margin-top:2px}
}

/* ---------- 图表 ---------- */
.chart{width:100%;display:block}
.bar-chart{display:flex;align-items:flex-end;justify-content:space-around;gap:10px;height:172px;padding:6px 2px 0}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;min-width:0}
.bar-num{font-size:11.5px;font-weight:700;margin-bottom:4px;color:var(--text)}
.bar-area{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.bar-box{width:100%;max-width:44px;border-radius:8px 8px 0 0;transition:height .4s ease}
.bar-x{font-size:11px;color:var(--text-2);margin-top:7px;text-align:center;line-height:1.3;height:32px}
.hbar-row{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.hbar-name{width:56px;flex:0 0 auto;font-size:12px;color:#374151}
.hbar-track{flex:1;height:9px;border-radius:5px;background:#eef0f6;overflow:hidden}
.hbar-fill{height:100%;border-radius:5px}
.hbar-val{width:26px;text-align:right;font-size:12px;font-weight:700;flex:0 0 auto}
.donut-wrap{display:flex;align-items:center;gap:14px;padding:6px 4px 2px;max-width:920px}
.legend{flex:1;max-width:520px;display:flex;flex-direction:column;gap:7px}
.legend-item{display:flex;align-items:center;gap:7px;font-size:12px}
.legend-dot{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.legend-name{flex:1;color:#374151}
.legend-val{font-weight:700;color:var(--text)}

/* ---------- 排座位 ---------- */
.seat-tools{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.hint{font-size:11.5px;color:var(--text-2);line-height:1.6;padding:8px 2px 10px}
.podium{
  height:34px;border-radius:10px;background:#2b3557;color:#fff;display:grid;place-items:center;
  font-size:12.5px;font-weight:600;letter-spacing:3px;margin:0 0 10px;
}
.podium.at-bottom{margin:10px 0 0}
.seat-stage{max-width:1040px;margin:0 auto}
.seat-grid{display:flex;flex-direction:column;gap:6px}
.seat-row{display:flex;gap:5px;align-items:stretch}
.seat-rowno{
  flex:0 0 auto;display:grid;place-items:center;font-size:10.5px;color:#aab2c4;
  padding:0 2px;white-space:nowrap;
}
@media (max-width:720px){.seat-rowno{display:none}}
.seat{
  flex:1;min-width:0;min-height:52px;border-radius:9px;background:#fff;border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;
  font-size:11.5px;color:var(--text-3);position:relative;
}
.seat.filled{background:#eef3ff;border-color:#dbe5ff;color:#2f4bd0;font-weight:600}
.seat .seat-no{font-size:9.5px;color:#93a0bb;font-weight:500}
.seat.filled .seat-no{color:#7b8dbd}
/* ---------- 座位表按性别分色：粉=女生 · 蓝=男生 · 中性灰=未填 ----------
 * 🔴 「未填」必须是独立一档，绝不并进男女任一边（口径见 store.genderClass）。
 *    认不出来就上男生的色，会把"全班都变成男的"那种错误放大成"图上一片蓝"，
 *    反而更难看出来。未填给灰色，一眼就知道"这个人还没填性别"。
 * ⚠️ 这段必须写在 .seat.filled 之后（同权重靠后覆盖）；
 *    选中(.sel)和拖拽落点(.drop-target)写在更后面，所以不会被这里盖掉。 */
.seat.g-girl{background:#fce4f0;border-color:#efb0cb;color:#ab2f60}
.seat.g-girl .seat-no{color:#c06b93}
.seat.g-boy{background:#e3ecff;border-color:#b9cdf6;color:#2545c7}
.seat.g-boy .seat-no{color:#6f83b6}
.seat.g-unset{background:#eef1f5;border-color:#d5dbe4;color:#646b78}
.seat.g-unset .seat-no{color:#949aa6}
/* 图例：色块 + 人数。宽度跟座位表对齐，扫一眼就能对上颜色 */
.seat-legend{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;
  max-width:1040px;margin:0 auto 10px;font-size:11.5px;color:var(--text-2);
}
.seat-legend .lg{display:inline-flex;align-items:center;gap:5px}
.seat-legend .mini-note{font-size:10.5px}
.lg-dot{width:12px;height:12px;border-radius:3px;border:1px solid transparent;flex:none}
.lg-dot.g-girl{background:#fce4f0;border-color:#efb0cb}
.lg-dot.g-boy{background:#e3ecff;border-color:#b9cdf6}
.lg-dot.g-unset{background:#eef1f5;border-color:#d5dbe4}
.seat.sel{border-color:var(--blue);box-shadow:0 0 0 2px rgba(47,107,255,.25)}
.seat.drop-target{background:#e3f9ee;border-color:#12b76a}
.seat .plus{font-size:17px;color:#c7ccd8}
.aisle{flex:0 0 clamp(12px,1.2vw,20px);display:grid;place-items:center;font-size:9.5px;color:#b6bdcc;writing-mode:vertical-rl}
.aisle-h{height:12px}
.unseated{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 2px;min-height:40px}
.chip-seat{
  display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-size:12px;
}
/* 「未就座」那排也用同一套颜色（左侧一条），免得同一页出现两种说法。
 * 用 inset 阴影而不是 border-left —— 不动布局宽度，也不会跟选中态的 inline border-color 打架。 */
.chip-seat.g-girl{box-shadow:inset 4px 0 0 #f2749e}
.chip-seat.g-boy{box-shadow:inset 4px 0 0 #4f7cf7}
.chip-seat.g-unset{box-shadow:inset 4px 0 0 #a8b0bd}

/* ---------- 表单 ---------- */
.field{margin-bottom:12px}
.field-label{font-size:12.5px;color:#4b5563;font-weight:600;margin-bottom:6px;display:block}
.input,.select,.textarea{
  width:100%;height:40px;border-radius:10px;border:1px solid #e3e6ef;background:#fbfcfe;
  padding:0 11px;font-size:13.5px;color:var(--text);
}
.textarea{height:auto;min-height:76px;padding:9px 11px;resize:vertical;line-height:1.55}
.input:focus,.select:focus,.textarea:focus{border-color:var(--blue);background:#fff}
.form-2{display:flex;gap:10px}
.form-2 > *{flex:1;min-width:0}
.checkbox-line{display:flex;align-items:center;gap:9px;padding:10px 12px;background:#fff;border-radius:10px;margin-bottom:7px;font-size:13.5px}
.checkbox-line:active{background:#f7f9fd}
.cb{
  width:20px;height:20px;border-radius:6px;border:1.5px solid #d8dce6;flex:0 0 auto;
  display:grid;place-items:center;color:#fff;font-size:12px;
}
.cb.on{background:var(--blue);border-color:var(--blue)}
.cb.on.green{background:var(--green);border-color:var(--green)}

/* ---------- 弹层 ---------- */
.sheet-mask{
  position:fixed;inset:0;background:rgba(12,16,30,.42);z-index:200;display:flex;align-items:flex-end;
  justify-content:center;animation:fadein .18s ease;
}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.sheet{
  width:100%;max-width:430px;background:#fff;border-radius:18px 18px 0 0;max-height:88vh;
  display:flex;flex-direction:column;animation:up .24s ease;
}
@keyframes up{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
.sheet-head{
  padding:16px 16px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--line);
}
.sheet-title{font-size:16px;font-weight:700}
.sheet-close{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#8b93a5;font-size:17px}
.sheet-body{padding:14px 16px;overflow-y:auto}
.sheet-foot{padding:10px 16px 22px;display:flex;gap:10px;border-top:1px solid var(--line)}
.sheet-foot .btn{flex:1;height:42px;font-size:14.5px;border-radius:11px}
.sheet-msg{padding:22px 20px 6px;font-size:14.5px;line-height:1.6;text-align:center}
.sheet-msg b{color:var(--blue)}

/* ---------- 导入 / 导出面板 ---------- */
.io-desc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:10px}
.io-cols{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.io-col{
  font-size:11px;color:var(--blue);background:#eef2ff;border-radius:5px;padding:2px 6px;
  font-weight:600;white-space:nowrap;
}
.io-actions{display:flex;flex-direction:column;gap:8px}
.io-actions .btn{text-align:left;justify-content:flex-start;height:38px;font-size:13px}
.io-actions .btn:active{background:#eef2ff;border-color:#c7d6ff}
.io-or{font-size:11.5px;color:var(--text-3);margin:14px 0 7px;text-align:center}
.io-or::before,.io-or::after{content:'';display:inline-block;width:22%;height:1px;background:var(--line);vertical-align:middle;margin:0 8px}
.io-preview{margin-top:10px;min-height:34px}
/* 面板底部的"修正存量数据"入口（如学生性别全部改为未填）—— 和三个导入步骤拉开距离，
   不然会被当成第④步（它不是导入，是就地改数据） */
.io-extra{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.io-extra .btn{width:100%;height:38px;font-size:13px}
.io-extra .mini-note{margin-top:7px;display:block}
.io-preview-empty{font-size:12px;color:var(--text-3);line-height:1.6;padding:8px 10px;background:#f7f8fc;border-radius:9px}
.io-preview-ok{font-size:13px;color:var(--green);font-weight:600;margin-bottom:4px}
.io-preview-ok b{font-size:15px}
.io-preview-warn{font-size:11.5px;color:#d98107;background:#fff8ec;border-radius:8px;padding:6px 9px;margin-bottom:6px;line-height:1.6}
.io-preview-row{
  font-size:11.5px;color:var(--text-2);background:#f7f8fc;border-radius:8px;padding:6px 9px;margin-bottom:4px;
  display:flex;flex-wrap:wrap;gap:10px;
}
/* 输入框 + 按钮同一行（违纪类型管理里的"新类型 + 添加"） */
.io-line{display:flex;gap:8px}
.io-line .input{flex:1;min-width:0}
.io-line .btn{flex:0 0 auto;height:38px;font-size:13px}
/* 类型清单：默认 .chips 是横向滚动的胶囊条，这里要换行——
   "一共有哪些类型"必须一眼看全，横着藏起来等于没给看 */
.io-typelist{flex-wrap:wrap;overflow:visible;row-gap:8px}
.io-typelist .chip{cursor:default}
.io-typelist .chip .mini-note{margin-left:4px}
.chip-x{
  margin-left:6px;font-weight:400;font-size:12px;opacity:.75;cursor:pointer;
  padding:0 2px;border-radius:4px;
}
.chip-x:active{background:rgba(0,0,0,.08)}
.chip-danger{background:#fdeeee;border-color:#f3c0c0;color:#c0392b;font-weight:600}
.chip-danger .chip-x{opacity:1}
/* 学生列表里的备注行（📝 …）：比普通副标题再淡一点，别抢名字的注意力。
 * .empty 是"还没备注"的引导文案，再淡一档，别让人以为已经填了东西。 */
.row-note{color:#b08a3e}
.row-note.empty{color:#b9c0cc;font-size:11px}
/* 列表行右侧的铅笔：直接进编辑表单（备注在里面）。
 * 行本身是 tap（点它开档案），铅笔要吃掉自己那一下、不能冒泡到行上。 */
.btn-icon{
  width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:#fff;
  font-size:13px;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background .12s,border-color .12s;
}
.btn-icon:hover{background:#f3f6ff;border-color:#c9d8ff}
.row-right{display:flex;align-items:center;gap:6px}
.row-caret{font-size:16px;color:#c2c8d4}
/* 名单行上的行为分胶囊（张工 2026-10-13：要在名单外面就看得到，不用点进档案）。
   形态是**「行为分」字段名 + 净值胶囊**（他当晚补的："只有数字看不出是啥，要有字段名"）。
   挂在 .row-title 行尾 —— 那里是 flex-wrap，窄屏挤了会换行而不是把名字压没。
   三档配色与档案页一致：正绿 / 负红 / 相抵为 0 灰。 */
.score-wrap{display:inline-flex;align-items:center;gap:4px;min-width:0}
.score-field{font-size:11.5px;font-weight:500;color:var(--text-3);white-space:nowrap}
.score-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:19px;padding:0 7px;border-radius:999px;
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;
}
.score-pill.pos{background:#e7f8ef;color:#0b8f52}
.score-pill.neg{background:#fdeded;color:#d23c3c}
.score-pill.zero{background:#f1f3f8;color:var(--text-2)}
/* 档案面板里「备注」那一行：整行可点，点进去直接改备注 */
.kv-edit{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;border-radius:6px;
  padding:1px 5px;margin-left:-5px;transition:background .12s;
}
.kv-edit:hover{background:#eef3ff}
.kv-edit-pen{font-size:11px;opacity:.65}

/* ---------- toast ---------- */
#toastRoot{position:fixed;left:0;right:0;bottom:80px;z-index:300;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{
  background:rgba(26,31,48,.92);color:#fff;font-size:13px;padding:9px 16px;border-radius:999px;
  animation:toastin .2s ease;max-width:80%;text-align:center;
}
@keyframes toastin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 其他 ---------- */
.empty{text-align:center;padding:34px 10px;color:var(--text-3);font-size:13px}
.empty-icon{font-size:34px;margin-bottom:8px;opacity:.5}
.kv{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--text-2)}
.kv .v{font-weight:600;max-width:62%;text-align:right}
.mini-note{font-size:11.5px;color:var(--text-3);line-height:1.6}
.run-note{margin-top:5px;color:var(--teal)}
.input:disabled{background:#f2f4f8;color:var(--text-3);cursor:not-allowed}
.divider{height:1px;background:var(--line);margin:12px 0}
.pill-static{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;background:#f3f5fa;font-size:12px;color:#4b5563}
.scroll-x{overflow-x:auto;scrollbar-width:none}
.scroll-x::-webkit-scrollbar{display:none}

/* ---------- 宽屏：导航常驻 + 内容铺满 ---------- */
@media (min-width:900px){
  .app{display:grid;grid-template-columns:264px 1fr;grid-template-rows:56px 1fr}
  .drawer{
    position:relative;grid-column:1;grid-row:1 / 3;transform:none;
    width:264px;max-width:none;border-right:1px solid rgba(255,255,255,.06);
  }
  .topbar{grid-column:2;grid-row:1}
  .main{grid-column:2;grid-row:2}
  .scrim{display:none}
  #menuBtn{display:none}
  .dnav{padding:6px 12px 12px}
  .nav-item{height:40px;font-size:13.5px}
  .bar-chart{height:220px}
  .bar-box{max-width:64px}
  .kv{max-width:900px}
  .sheet-mask{align-items:center;padding:28px}
  .sheet{max-width:520px;border-radius:18px;max-height:84vh}
  .sheet-foot{padding:12px 18px 20px}
}
@media (min-width:1100px){
  .list{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));
    gap:10px;align-content:start;
  }
  .tl-item,.tl-day-head{max-width:900px}
}
@media (min-width:1500px){
  .drawer{width:288px}
  .app{grid-template-columns:288px 1fr}
}

/* ---------- 登录 / 注册页 ---------- */
.auth-gate{position:fixed;inset:0;z-index:120;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch}
.auth-gate.hidden{display:none}
.auth-wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px 18px 40px}
.auth-card{width:100%;max-width:400px;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:26px 22px 20px;box-shadow:0 8px 30px rgba(20,26,50,.08)}
.auth-logo{width:52px;height:52px;border-radius:14px;background:var(--side);color:#fff;font-size:24px;font-weight:700;
  display:grid;place-items:center;margin:0 auto 12px}
.auth-title{font-size:19px;font-weight:700;text-align:center;letter-spacing:.5px}
.auth-sub{font-size:12.5px;color:var(--text-2);text-align:center;margin:5px 0 16px}
.auth-tabs{display:flex;gap:6px;background:#f2f4f8;border-radius:11px;padding:4px;margin-bottom:16px}
.auth-tab{flex:1;height:34px;border:0;border-radius:8px;background:transparent;font-size:13.5px;font-weight:600;
  color:var(--text-2);cursor:pointer;font-family:inherit}
.auth-tab.on{background:#fff;color:var(--text);box-shadow:0 1px 4px rgba(20,26,50,.12)}
.auth-eye{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2);margin:-4px 0 12px;cursor:pointer}
.auth-eye input{width:14px;height:14px;margin:0}
.auth-err{background:#fef2f2;border:1px solid #fadcdc;color:var(--red);font-size:12.5px;
  padding:9px 11px;border-radius:9px;margin-bottom:12px;line-height:1.5;
  /* 报错里会带排查提示（含 JSON 片段、网址），得能换行、太长时可滚动，别撑破卡片 */
  word-break:break-word;overflow-wrap:anywhere;max-height:38vh;overflow-y:auto}
.auth-submit{width:100%;height:42px;font-size:15px;border-radius:11px;margin-top:2px}
.auth-submit:disabled{opacity:.6}
.auth-switch{text-align:center;font-size:12.5px;color:var(--text-2);margin-top:12px}
.auth-switch a{color:var(--blue);font-weight:600;cursor:pointer;text-decoration:none}
.auth-note{font-size:11.5px;color:var(--text-3);line-height:1.6;margin-top:14px;padding-top:12px;
  border-top:1px dashed var(--line)}
.auth-local{display:block;width:100%;margin-top:10px;padding:9px;border:0;background:transparent;
  color:var(--text-3);font-size:12px;text-decoration:underline;cursor:pointer;font-family:inherit}
/* 登录页里直接配云同步：不用先进入主页面，闭环 */
.auth-sync{margin-top:12px;text-align:center;font-size:12.5px;display:flex;justify-content:center;gap:8px;align-items:center;flex-wrap:wrap}
.auth-sync-col{flex-direction:column;gap:6px}
.auth-sync a.auth-sync-sub{font-weight:500;color:var(--text-3)}
.auth-sync a{color:var(--blue);font-weight:600;cursor:pointer;text-decoration:none}
.auth-sync-form{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:11px;background:#fafbfd;text-align:left}
.auth-sync-form .field{margin-bottom:9px}
.auth-forgot{display:block;text-align:center;margin-top:12px;font-size:12px;color:var(--text-3);
  text-decoration:underline;cursor:pointer}

/* ---------- 设置页账号卡片 ---------- */
.acct{display:flex;align-items:center;gap:12px}
.acct-av{width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:var(--side);color:#fff;
  font-size:18px;font-weight:700;display:grid;place-items:center}
.acct-main{flex:1;min-width:0}
.acct-name{font-size:15px;font-weight:700;display:flex;align-items:center;gap:6px}
.acct-phone{font-size:17px;font-weight:700;letter-spacing:.5px;font-variant-numeric:tabular-nums;margin-top:2px}
.acct-mask{font-size:11.5px;color:var(--text-3);margin-top:3px}
.acct-tag{font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:5px;background:#eef2ff;color:var(--blue)}

/* ---------- 首次使用引导卡（仪表盘顶部） ---------- */
.ob-card{border:1px solid #cfe0ff;background:linear-gradient(180deg,#f5f9ff,#ffffff)}
.ob-card .card-title{color:#1a4fd6}
.ob-tip{font-size:12.5px;color:var(--text-2);line-height:1.65}
.ob-tip b{color:var(--text)}
.ob-steps{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.ob-step{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:11px;background:#fff;cursor:pointer}
.ob-step:active{background:#f4f6fb}
.ob-step-main{flex:1;min-width:0}
.ob-step-title{font-size:13.5px;font-weight:700}
.ob-step-sub{font-size:11.5px;color:var(--text-3);margin-top:2px}
.ob-step-go{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--blue)}
/* 宽屏下三步并排，别让一行字横拉满整屏 */
@media (min-width:900px){
  .ob-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
}

/* ---------- 作业未交名单 · 每个学生一条（他哪几科没交；点开逐科写备注） ---------- */
/* 日期栏：它管着"下面所有数字和名单算哪一天"（张工 2026-10-08：选了日期才列学生；
   当晚又加了日程 / 违纪 / 请假 / 谈话四页，所以类名从 .hw-datebar 改成通用的 .datebar） */
.datebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 12px;padding:10px 12px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.datebar-label{font-size:12.5px;font-weight:600;color:var(--text-2)}
.date-input{width:158px;height:34px}
/* 批次分组：同一天里可能有两三次作业，组头写清"哪一次、几人、几科"，
   「✎ 改日期 / 名称」挂在组头上（导入时日期常常留空，整批补日期就靠它）。 */
.hw-group{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 8px;flex-wrap:wrap}
.hw-group:first-child{margin-top:0}
.hw-group-title{font-size:13.5px;font-weight:700;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.hw-group-title .mini-note{font-weight:400}
/* 宽屏下 .list 是自动多列栅格：卡片会被摊成一条条高塔、科目标签挤成一坨。
   名单要"一列扫下来"，所以这里禁掉栅格。 */
@media (min-width:900px){
  .list.hw-list{display:block}
  .list.hw-list .card{max-width:900px}
}
.hw-card{cursor:pointer;transition:box-shadow .15s,transform .15s}
.hw-card:hover{box-shadow:0 6px 18px rgba(31,41,55,.1)}
.hw-card:active{transform:scale(.995)}
.hw-card-top{display:flex;align-items:center;gap:10px}
.hw-card-who{flex:1;min-width:0}
.hw-card-name{font-size:15px;font-weight:700}
/* 右边那个「N 科未交」：一眼扫出谁欠得多 */
.hw-count{flex:0 0 auto;text-align:center;font-size:17px;font-weight:800;color:#e11d48;line-height:1.1}
.hw-count span{display:block;font-size:11px;font-weight:500;color:var(--text-3);margin-top:2px}
.hw-subs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.hw-sub{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:8px}
/* 🔴 标签配色按**状态**走（未交红 / 未完成橙 / 待标注灰 / **已补交绿**）——
   张工要的是"一眼分出未交和未完成"。别改回按科目配色：科目名本来就写在标签上，
   再拿颜色说科目就浪费了最抢眼的通道。
   四档的口径在 store（HW_STATES + 科目上的 made 标记），这里是颜色；小程序 index.wxss 里要对齐。 */
.hw-sub.s-miss{background:#fdeeee;color:#d92d20}
.hw-sub.s-undone{background:#fdf3e3;color:#b45309}
.hw-sub.s-unset{background:#f1f3f7;color:#5b6473}
/* 已补交：绿色 = 解决了，但**那一科还在记录里**（张工 2026-10-08 晚：
   "数据不要删掉 而是颜色变化"）。原来这里是"点一下就从记录里摘掉"，会把补交凭据抹掉。 */
.hw-sub.s-made{background:#eaf7f0;color:#0f9d63}
/* 整条都补交完的卡：整张压绿 + 左边一道绿边，和"还有问题"的卡一眼分得开 */
.hw-card.done{background:linear-gradient(180deg,#f6fdf9,#fff);box-shadow:inset 3px 0 0 #0f9d63,var(--shadow)}
.hw-count.ok{color:#0f9d63}
/* 状态字样（未交/未完成/待标注）：光靠颜色还得记图例，写上字谁看都明白 */
.hw-sub i{font-style:normal;font-size:11px;opacity:.75}
/* 这一科写了备注：给个边框，别让"有没有备注"要靠点进去才知道 */
.hw-sub.has-note{box-shadow:inset 0 0 0 1px rgba(180,83,9,.35)}
.hw-notecount{margin-top:8px;font-size:11.5px;color:#b45309}
/* 三档明细（只有同时存在两档以上时才出现，免得只有一档时跟标签重复） */
.hw-statline{margin-top:8px;font-size:11.5px;color:var(--text-3)}
/* 「未填日期」是待办，用暖色顶出来（写 × 的那种作业导进来时日期就是空的） */
.hw-nodate{color:#b45309;background:#fdf3e3;padding:1px 6px;border-radius:6px}
.hw-empty-hint{margin-top:10px;font-size:12.5px;line-height:1.7;color:var(--text-3);text-align:center}
/* 详情面板：一科一行（**科目可改的下拉** + 状态两选 + 「已补交」 + 备注框） */
.hw-row{padding:10px 0;border-top:1px solid var(--line)}
.hw-row:first-child{border-top:0}
.hw-row-head{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap}
.hw-row-sel{max-width:150px;font-weight:700}
/* 状态两选：**两个都不亮 = 待标注**（旁边写着"待标注"三个字，不用猜）；
   再点同一个 = 取消（回到待标注），标错了不用重开面板 */
.hw-sts{display:inline-flex;align-items:center;gap:4px}
.hw-sts-btn{height:24px;padding:0 9px;font-size:12px;border-radius:7px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--text-2)}
.hw-sts-btn.on.s-miss{background:#fdeeee;border-color:#f7c9c9;color:#d92d20;font-weight:700}
.hw-sts-btn.on.s-undone{background:#fdf3e3;border-color:#f2d9ad;color:#b45309;font-weight:700}
.hw-sts-now{font-size:11.5px;color:var(--text-3)}
.hw-row-btn{margin-left:auto;height:26px;padding:0 10px;font-size:12px;border-radius:8px;
  border:1px solid var(--line);background:#fff;color:var(--text-2);cursor:pointer}
/* 🔴 「已补交」**不删行**，只把那一行变绿（张工 2026-10-08 晚：「数据不要删掉 而是颜色变化」）。
   以前这里是 .off（压淡）+ 保存时把那一科摘掉 —— 结果是补交过的记录一个字都查不到。
   现在：整行染绿 + 科目名下面一条绿线（"这科已经了结了"），状态两选照常留着
   （那科当时是没交还是没做完，是历史，得看得见），再点一下就能撤销。 */
.hw-row.made{background:#f6fdf9;border-radius:10px;padding-left:10px;padding-right:10px}
.hw-row.made .hw-row-sel{color:#0f9d63}
.hw-row.made .hw-row-btn.on{background:#eaf7f0;color:#0f9d63;border-color:#cfe8db;font-weight:700}
.hw-row.made .hw-sts-btn{opacity:.55}
.hw-row.made .hw-sts-now{color:#0f9d63}
.hw-addrow{margin-top:12px}
.hw-addrow .btn{width:100%;height:34px;font-size:13px}
.hw-picks{display:flex;flex-wrap:wrap;gap:6px}
.hw-pick{font-size:12.5px;padding:5px 11px;border-radius:9px;border:1px solid var(--line);
  background:#fff;color:var(--text-2);cursor:pointer}
.hw-pick.on{background:#eef4ff;border-color:#bcd0ff;color:#2f6bff;font-weight:700}
/* 统计页：一行 = 名字/科目 + 三档堆叠条 + 三档数字 + 合计。
   不用公共 .hbar 是因为它的名字列只有 56px，塞不下三档明细（硬塞要动别的页面）。 */
.st3{font-size:12px}
.st3-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--line)}
.st3-row:first-child{border-top:0}
.st3-head{color:var(--text-3);font-size:11px;padding-bottom:3px}
.st3-name{width:64px;flex:0 0 auto;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st3-head .st3-name{font-weight:500}
.st3-track{flex:1;min-width:40px;height:10px;border-radius:5px;background:#eef0f6;overflow:hidden;display:flex}
.st3-track span{height:100%}
.st3-track span.s-miss{background:#e11d48}
.st3-track span.s-undone{background:#f59e0b}
.st3-track span.s-unset{background:#cbd5e1}
.st3-n{width:34px;flex:0 0 auto;text-align:right;font-weight:700}
.st3-n.s-miss{color:#d92d20}
.st3-n.s-undone{color:#b45309}
.st3-n.s-unset{color:#5b6473}
.st3-n.zero{color:#c3c9d4;font-weight:500}
.st3-sum{width:34px;flex:0 0 auto;text-align:right;font-weight:800;color:var(--text-1)}

/* ---------- 优等生管理（2026-10-09 新增页） ----------
   页面主体 = 这几个学生的名单；点开谁才展开"已有考试 + 那几科成绩"。
   展开块做成和 .row 同款的白卡（.list 有 9px 间距，两张卡叠着像"行 + 明细"，够清楚）。 */
.top-open{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:12px}
/* 选人弹层：已选中的那行高亮（点一下就地切，不重开弹层，所以靠这个 class 反映状态） */
.top-pick.on{background:#f2f8ff}
.top-pick.on .row-title{color:var(--blue)}
.top-pick-mark{font-size:12.5px;color:var(--text-3);white-space:nowrap}
.top-pick.on .top-pick-mark{color:var(--blue);font-weight:600}