/* ============================================================
   手机端只读页面样式（移动优先）
   刻意与桌面端 style.css 分开：桌面那套导航和宽度在手机上很难用。
   ============================================================ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  background: #f5f6f8;
  color: #1f2328;
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}

.wrap { max-width: 720px; margin: 0 auto; padding: 14px; }

/* ---------- 登录 ---------- */
.login-box {
  max-width: 380px;
  margin: 12vh auto 0;
  background: #fff;
  border-radius: 14px;
  padding: 26px 22px 22px;
  box-shadow: 0 2px 16px rgba(16, 24, 40, .08);
}
.login-box .logo {
  width: 52px; height: 52px; border-radius: 14px;
  background: #2f6fed; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; margin: 0 auto 14px;
}
.login-box h1 { font-size: 19px; text-align: center; margin: 0 0 4px; }
.login-box .sub { text-align: center; color: #8b95a3; font-size: 13px; margin-bottom: 20px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13.5px; color: #5a6472; margin-bottom: 6px; }
input, select, textarea {
  width: 100%; padding: 12px 13px; font-size: 16px;
  border: 1px solid #e3e6ea; border-radius: 10px; background: #fff;
  font-family: inherit; color: inherit;
}
input:focus, select:focus { outline: none; border-color: #2f6fed; box-shadow: 0 0 0 3px rgba(47,111,237,.13); }
/* 复选框/单选框不要被上面那条 input{width:100%} 拉满整行 */
input[type="checkbox"], input[type="radio"] { width: auto; margin: 0 8px 0 0; vertical-align: middle; }
button {
  width: 100%; padding: 13px; font-size: 16px; font-weight: 600;
  border: none; border-radius: 10px; background: #2f6fed; color: #fff;
  font-family: inherit; cursor: pointer;
}
button:disabled { opacity: .6; }
button.ghost { background: #f0f2f5; color: #1f2328; font-weight: 500; }

.err { color: #d9453d; font-size: 13.5px; margin-top: 10px; min-height: 18px; text-align: center; }
.hint { color: #8b95a3; font-size: 12.5px; text-align: center; margin-top: 14px; line-height: 1.6; }

/* ---------- 顶栏 ---------- */
.hdr {
  position: sticky; top: 0; z-index: 10;
  background: #fff; border-bottom: 1px solid #e3e6ea;
  padding: 10px 14px calc(10px + env(safe-area-inset-top)) 14px;
  display: flex; align-items: center; gap: 10px;
}
.hdr .who { flex: 1; min-width: 0; }
.hdr .who b { display: block; font-size: 15px; }
.hdr .who span { font-size: 12.5px; color: #8b95a3; }
.hdr button { width: auto; padding: 7px 13px; font-size: 13.5px; }

/* ---------- 分段切换 ---------- */
.seg {
  display: flex; gap: 4px; background: #eceff3; border-radius: 10px;
  padding: 4px; margin: 14px 0 12px;
}
.seg button {
  flex: 1; background: transparent; color: #5a6472;
  font-weight: 500; font-size: 14.5px; padding: 9px;
}
.seg button.on { background: #fff; color: #1f2328; font-weight: 600; box-shadow: 0 1px 3px rgba(16,24,40,.08); }

/* ---------- 筛选 ---------- */
.chips { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; width: auto; padding: 6px 13px; font-size: 13.5px; font-weight: 500;
  background: #fff; color: #5a6472; border: 1px solid #e3e6ea; border-radius: 999px;
}
.chip.on { background: #2f6fed; border-color: #2f6fed; color: #fff; }

/* ---------- 卡片 ---------- */
.card {
  background: #fff; border-radius: 12px; padding: 14px;
  margin-bottom: 10px; box-shadow: 0 1px 3px rgba(16,24,40,.05);
}
.card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; line-height: 1.45; }
.card .body { white-space: pre-wrap; word-break: break-word; font-size: 15px; color: #333a44; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; font-size: 12.5px; color: #8b95a3; }
.tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: #eaf1fe; color: #2f6fed;
}
.tag.cat-作业 { background: #fdeceb; color: #d9453d; }
.tag.cat-考试 { background: #f3ecfd; color: #7a3fd9; }
.tag.cat-会议 { background: #e8f6ee; color: #17864a; }
.tag.cat-活动 { background: #fdf3e3; color: #b8730a; }
.tag.due { background: #fdf3e3; color: #b8730a; }
.tag.due.soon { background: #fdeceb; color: #d9453d; }
/* 学科标签：和"类别"用不同颜色，一眼能分开 */
.tag.subj { background: #e9f6f4; color: #12776a; }
/* 「改分类」按钮：长得像标签，是个按钮 */
.tag.edit {
  width: auto; padding: 2px 9px; border: 1px dashed #c3cbd6; background: #fff;
  color: #5a6472; font-weight: 600; cursor: pointer;
}

/* ---------- 上栏总结 ---------- */
.sum-card {
  background: #fff; border-radius: 14px; padding: 14px;
  margin-bottom: 12px; box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
}
.sum-tiles { display: flex; gap: 8px; }
/* ★ 小格是 <button>（可点，点一下只看这一类）——
   所以要把浏览器给按钮的默认外观（字体/边框/背景）全部覆盖掉，
   否则会长得跟原来的 div 不一样。 */
.sum-tile {
  flex: 1; text-align: center; background: #f6f8fb;
  border-radius: 10px; padding: 9px 4px;
  border: 1px solid transparent; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sum-tile .v { font-size: 20px; font-weight: 700; line-height: 1.2; color: #1f2328; }
.sum-tile .k { font-size: 11.5px; color: #8b95a3; margin-top: 2px; }
.sum-tile.hot { background: #fdeceb; }
.sum-tile.hot .v { color: #d9453d; }
.sum-tile:active { transform: scale(.97); }
/* 当前正"只看这一类"：描个蓝边，一眼知道筛着 */
.sum-tile.on { border-color: #2f6fed; background: #eaf1fe; }
.sum-tile.on .k { color: #2f6fed; font-weight: 600; }

/* ---------- 关键词检索 + 「只看……」提示条 ---------- */
#notices-tools { margin-bottom: 10px; }
.search-row { display: flex; gap: 8px; align-items: center; }
.search-row input[type="search"] {
  flex: 1; min-width: 0; font-family: inherit; font-size: 15px;
  padding: 9px 12px; border: 1px solid #dde2e9; border-radius: 10px;
  background: #fff; color: #1f2328;
}
.search-row input[type="search"]:focus { outline: none; border-color: #2f6fed; }
/* ★ 全局那条 `button { width: 100% }` 会把「清除」撑满整行、把输入框挤成一条 ——
   这里必须显式把宽度收回来（一开始漏了，渲染出来就是坏的）。 */
.search-row button {
  width: auto; flex: 0 0 auto;
  padding: 9px 14px; font-size: 14px; font-weight: 500;
}
.quick-line {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; flex-wrap: wrap;
}

.sum-subj { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.sum-label { font-size: 12.5px; color: #8b95a3; }
.muted-sm { font-size: 12px; color: #8b95a3; }
.chip.sm { padding: 5px 11px; font-size: 12.5px; }

.sum-due { margin-top: 12px; border-top: 1px solid #eef1f4; padding-top: 10px; }
.sum-due-row {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 0; font-size: 13.5px; line-height: 1.5;
}
.sum-due-title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #333a44;
}

/* ---------- 就地编辑分类 ---------- */
.edit-card { border: 1.5px solid #2f6fed; }
.edit-head { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.edit-field { display: block; margin-bottom: 10px; }
.edit-field > span { display: block; font-size: 12.5px; color: #5a6472; margin-bottom: 5px; }
.edit-field input, .edit-field select { padding: 10px 12px; font-size: 15px; }
.edit-help { font-size: 12px; color: #8b95a3; margin: -4px 0 10px; }
.edit-actions { display: flex; gap: 8px; margin-top: 4px; }
.edit-actions button { flex: 1; padding: 11px; font-size: 15px; }
.edit-actions button.primary { background: #2f6fed; color: #fff; }
.edit-err { color: #d9453d; font-size: 13px; margin-top: 8px; min-height: 17px; }

/* ---------- 任务面板 ---------- */
.board-item {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 12px; padding: 14px; margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(16,24,40,.05);
}
.board-item .icon { font-size: 22px; }
.board-item .txt { flex: 1; min-width: 0; }
.board-item .txt b { display: block; font-size: 15.5px; }
.board-item .txt span { font-size: 12.5px; color: #8b95a3; }
.board-item .arrow { color: #cdd3da; font-size: 18px; }

.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 8px; text-align: left; border-bottom: 1px solid #eef1f4; white-space: nowrap; }
th { background: #fafbfc; font-weight: 600; color: #5a6472; font-size: 13px; }
td.wrap-cell { white-space: normal; min-width: 160px; }
.done { color: #17864a; font-weight: 600; }
.todo { color: #8b95a3; }

/* ---------- 空态 / 提示 ---------- */
.empty { text-align: center; padding: 46px 20px; color: #8b95a3; }
.empty .big { font-size: 40px; margin-bottom: 10px; }
.empty h3 { font-size: 16px; color: #5a6472; margin: 0 0 8px; }
.empty p { font-size: 13.5px; margin: 4px 0; }

.notice-bar {
  background: #fdf3e3; color: #8a5a08; border-radius: 10px;
  padding: 11px 13px; font-size: 13.5px; margin-bottom: 12px; line-height: 1.6;
}

.loading { text-align: center; padding: 30px; color: #8b95a3; font-size: 14px; }
.row-actions { margin-top: 12px; display: flex; gap: 8px; }
.row-actions button { font-size: 14px; }

/* 保存成功后的短提示 */
.flash-ok {
  background: #e8f6ee; color: #17864a; border: 1px solid #cbe9d8;
  border-radius: 10px; padding: 10px 13px; font-size: 13.5px;
  font-weight: 600; margin-bottom: 12px;
}

/* 「这条通知说的那个表格」—— 从正文前面那几条消息里找出来的 */
.card .attach {
  margin-top: 8px; padding: 7px 10px; border-radius: 9px;
  background: #f6f8fb; border: 1px dashed #c3cbd6;
  font-size: 13px; color: #333a44; word-break: break-all;
}

/* 「又发了一条几乎一样的」（故意没合并）*/
.card .near {
  margin-top: 8px; padding: 8px 10px; border-radius: 9px;
  background: #fdf3e3; border: 1px solid #f0dcbb;
  font-size: 12.5px; color: #7a5209; line-height: 1.6;
}

/* 不可逆操作（删除）用红字，和旁边的普通按钮区分开 —— 避免误点 */
.danger { color: #d93025; }

/* 「待办事项」的小标题 + "点一条可以跳下去"的说明 */
.sum-due-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #333a44;
}
.sum-due-head .muted-sm { font-weight: 400; }

/* 待办的一行：整行可点（用 button 做，手机上点起来准） */
button.sum-due-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  text-align: left; font-family: inherit; font-size: 13.5px;
  background: #fff; border: 1px solid #e6eaf0; border-radius: 10px;
  padding: 9px 10px; margin-bottom: 6px; cursor: pointer;
}
button.sum-due-row:active { background: #f2f6ff; border-color: #b9cdf5; }
.sum-due-title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #1f2733; font-weight: 500;
}

/* 从待办跳过去后，那条公告闪一下，让人知道"就是它" */
@keyframes flash-target {
  0%   { box-shadow: 0 0 0 0 rgba(45,120,245,.55); background: #eef4ff; }
  70%  { box-shadow: 0 0 0 10px rgba(45,120,245,0); background: #eef4ff; }
  100% { box-shadow: 0 0 0 0 rgba(45,120,245,0); background: #fff; }
}
.card.flash-target { animation: flash-target 1.1s ease-out 2; border-color: #2d78f5; }
.danger.callout, .callout.danger { color: #a3231b; }

/* 管理员身份标记（顶栏那一小行） */
.admin-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 20px; background: #eaf1fe; color: #2f6fed;
  font-size: 11.5px; font-weight: 600; vertical-align: 1px;
}

/* ============================================================
   右上角头像 + 账号菜单
   ★ 头像不是图片，是「显示名的第一个字 + 一个由名字算出来的颜色」——
     见 view.js 的 avatarColor()。这样服务器上不用存任何文件。
   ★ 下面这几条都写成 `.me ...` 开头（比顶栏那条 `.hdr button` 更具体），
     否则会被 `.hdr button { width:auto }` 把圆形头像压成椭圆。
   ============================================================ */
.me { position: relative; flex: none; }

.me button.avatar {
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  background: #2f6fed; color: #fff;
  font-size: 15px; font-weight: 600; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .16);
}
.me button.avatar:active { transform: scale(.93); }

.me .me-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  min-width: 214px; background: #fff; border: 1px solid #e3e6ea;
  border-radius: 12px; box-shadow: 0 8px 28px rgba(16, 24, 40, .14);
  padding: 6px;
}
.me .me-menu[hidden] { display: none; }

.me .me-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 10px; margin-bottom: 6px;
  border-bottom: 1px solid #eef0f3;
}
.me .me-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: #2f6fed; color: #fff; font-size: 17px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.me .me-who { min-width: 0; }
.me .me-who b { display: block; font-size: 14.5px; }
.me .me-who span { display: block; font-size: 12px; color: #8b95a3; overflow-wrap: anywhere; }

.me .me-menu > button {
  display: block; width: 100%; text-align: left;
  background: transparent; color: #1f2328;
  font-size: 14.5px; font-weight: 500; padding: 10px; border-radius: 8px;
}
.me .me-menu > button:hover { background: #f4f6f9; }
.me .me-menu > button.danger { color: #d9453d; }

/* ============================================================
   弹窗（目前只有「修改密码」用）
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16, 24, 40, .42);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.modal[hidden] { display: none; }
.modal-box {
  width: 100%; max-width: 380px; background: #fff;
  border-radius: 14px; padding: 20px 18px 16px;
  box-shadow: 0 10px 40px rgba(16, 24, 40, .22);
}
.modal-box h3 { margin: 0 0 6px; font-size: 17px; }
.modal-sub { margin: 0 0 16px; color: #8b95a3; font-size: 12.5px; line-height: 1.6; }
.modal-btns { display: flex; gap: 10px; margin-top: 4px; }
.modal-btns button { flex: 1; padding: 12px; }

/* ============================================================
   任务：要求 / 附件 / 直接打勾
   ============================================================ */
.board-info { background: #f7f9fc; }
.bi-line { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; font-size: 14px; }
.bi-k {
  font-size: 12px; color: #8b95a3; background: #fff;
  border: 1px solid #e3e6ea; border-radius: 999px; padding: 1px 8px;
}
/* ★ 要求是手写的多行文字，pre-wrap 才能保住换行 */
.bi-req { white-space: pre-wrap; word-break: break-word; font-size: 14.5px; line-height: 1.7; color: #333a44; }

.attach-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.attach-thumb {
  display: flex; flex-direction: column; gap: 4px; width: 122px;
  border: 1px solid #e3e6ea; border-radius: 10px; overflow: hidden;
  background: #fff; text-decoration: none; color: inherit;
}
.attach-thumb img { width: 100%; height: 84px; object-fit: cover; display: block; background: #f0f2f5; }
.attach-name { font-size: 11.5px; color: #5a6472; padding: 0 6px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-link {
  display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
  font-size: 13.5px; color: #2f6fed; background: #fff;
  border: 1px solid #e3e6ea; border-radius: 10px; padding: 6px 11px;
}

/* 「完成」那一列：点一下就打勾，所以点按区域要大一点（手机上手指比鼠标粗） */
.chk-cell { text-align: center; width: 1%; }
.chk-cell input.row-chk { width: 21px; height: 21px; cursor: pointer; margin: 0; }

/* 新建面板里的「附件」字段。
   ★ 这几条都是"当按钮用的 label"：全局 button{width:100%} 管不到 label，
     但 label 默认是行内元素，必须显式行内块 + width:auto，否则会独占一整行。 */
.edit-field textarea { padding: 10px 12px; font-size: 15px; }
.nb-files { display: flex; flex-direction: column; gap: 8px; }
.nb-file-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 20px; }
.nb-file-pick {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start; width: auto; flex: 0 0 auto;
  background: #f0f2f5; color: #1f2328; border-radius: 10px;
  padding: 8px 13px; font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.nb-check { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  background: #fff; border: 1px solid #e3e6ea; border-radius: 999px;
  padding: 3px 6px 3px 10px; font-size: 12.5px;
}
.chip-x {
  width: auto; border: none; background: none; color: #8b95a3;
  font-size: 16px; line-height: 1; padding: 0 3px; cursor: pointer;
}