/* 家校作业小程序 · 样式 v2（粒方品牌绿 · 参考课程大纲视觉） */
:root{
  --brand:#3fa87f; --brand-deep:#2d6a73; --brand-weak:#e4f1e8;
  --info:#3479d6; --info-weak:#e8f0fc;
  --green:#3fa87f; --green-weak:#e4f1e8;
  --orange:#c96a12; --orange-weak:#fdf0e2;
  --red:#d64545; --red-weak:#fbecec;
  --purple:#7a5af5; --purple-weak:#f0ecfe;
  --ink:#171d26; --sub:#87998d; --line:#d5ebdc;
  --wx-bg:#eaf5ee;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body{font-family:-apple-system,"SF Pro SC","PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
     background:linear-gradient(160deg,#e2f2e6 0%,#eef8f1 55%,#dcf0e2 100%);
     min-height:100vh;color:var(--ink);font-size:14px;
     display:flex;align-items:center;justify-content:center;padding:18px 0;}
svg.ic-s{display:inline-block;vertical-align:-.16em;flex:0 0 auto;}
/* ===== 手机壳 ===== */
.phone{width:375px;height:780px;background:var(--wx-bg);border-radius:40px;
  box-shadow:0 30px 70px rgba(23,32,48,.24),0 0 0 10px #161a22,0 0 0 12px #3a4152;
  overflow:hidden;position:relative;display:flex;flex-direction:column;}
.statusbar{height:34px;display:flex;justify-content:space-between;align-items:center;
  padding:0 22px;font-size:12px;font-weight:600;background:#fff;flex:0 0 auto;
  letter-spacing:.2px;}
.statusbar .sb-icons{display:flex;align-items:center;gap:4px;color:#232a35;}
.page-area{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:none;}
.page-area::-webkit-scrollbar{display:none;}
.screen{display:none;min-height:100%;padding-bottom:76px;}
.screen.act{display:block;animation:fadein .18s ease;}
@keyframes fadein{from{opacity:.35;transform:translateX(14px);}to{opacity:1;transform:none;}}
.navbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:flex;align-items:center;height:46px;padding:0 12px;border-bottom:.5px solid var(--line);}
.navbar .back{font-size:20px;width:30px;cursor:pointer;color:var(--ink);border:none;background:none;line-height:1;}
.navbar .ttl{flex:1;text-align:center;font-size:15.5px;font-weight:700;margin-right:30px;letter-spacing:.2px;}
/* 底部 tab */
.tabbar{position:absolute;bottom:0;left:0;right:0;height:66px;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:.5px solid var(--line);display:flex;z-index:30;}
.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;cursor:pointer;color:var(--sub);font-size:10.5px;font-weight:500;position:relative;
  transition:color .15s;}
.tabbar .tab .ic{font-size:21px;line-height:1;display:flex;}
.tabbar .tab .ic svg{transition:transform .15s;}
.tabbar .tab.on{color:var(--brand);font-weight:700;}
.tabbar .tab.on .ic svg{transform:translateY(-1px);}
.tabbar .tab .dot{position:absolute;top:6px;right:calc(50% - 17px);background:var(--red);
  color:#fff;font-size:9.5px;min-width:16px;height:16px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;}
/* 通用组件 */
.pad{padding:12px 14px;}
.card{background:#fff;border-radius:14px;padding:14px;margin-bottom:11px;
  border:.5px solid rgba(23,32,48,.04);
  box-shadow:0 1px 2px rgba(23,32,48,.03),0 2px 8px rgba(23,32,48,.04);}
.sec-title{font-size:12.5px;color:var(--sub);margin:14px 4px 8px;font-weight:600;letter-spacing:.5px;}
.btn{display:block;width:100%;padding:13px 0;border:none;border-radius:12px;font-size:15px;
  font-weight:600;cursor:pointer;text-align:center;letter-spacing:.3px;transition:filter .15s;}
.btn:active{filter:brightness(.94);}
.btn-p{background:linear-gradient(135deg,#3fa87f,var(--brand-deep));color:#fff;
  box-shadow:0 4px 12px rgba(45,106,115,.28);}
.btn-g{background:var(--brand);color:#fff;}
.btn-ghost{background:#fff;color:var(--brand);border:1.5px solid var(--brand);}
.btn-mini{display:inline-block;padding:5px 13px;border-radius:15px;font-size:12px;font-weight:600;cursor:pointer;border:none;}
.tag{display:inline-flex;align-items:center;font-size:10.5px;padding:2px 8px;border-radius:9px;font-weight:600;letter-spacing:.2px;}
.tag.o{background:var(--orange-weak);color:var(--orange);}
.tag.g{background:var(--green-weak);color:var(--green);}
.tag.b{background:var(--info-weak);color:var(--info);}
.tag.r{background:var(--red-weak);color:var(--red);}
.tag.p{background:var(--purple-weak);color:var(--purple);}
.row{display:flex;align-items:center;gap:10px;}
.grow{flex:1;min-width:0;}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.prog{height:6px;background:#e4f1e9;border-radius:3px;overflow:hidden;margin-top:8px;}
.prog i{display:block;height:100%;background:var(--brand);border-radius:3px;}
.avatar{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:18px;flex:0 0 auto;background:#e6f2ea;}
.avatar.av-txt{font-weight:700;color:var(--brand);background:var(--brand-weak);letter-spacing:0;}
.toast{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);
  background:rgba(23,29,38,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;padding:10px 20px;border-radius:11px;font-size:13.5px;z-index:99;display:none;
  animation:pop .2s ease;max-width:80%;text-align:center;}
@keyframes pop{from{opacity:0;transform:translateX(-50%) scale(.9);}to{opacity:1;transform:translateX(-50%) scale(1);}}
.empty{text-align:center;color:var(--sub);font-size:12.5px;padding:40px 0 20px;}
.empty .e-ic{display:flex;justify-content:center;margin-bottom:8px;color:#b6c8bd;}
/* 登录选身份 */
.login-hero{text-align:center;padding:42px 0 10px;position:relative;overflow:hidden;}
.login-hero .wm{position:absolute;top:6px;left:50%;transform:translateX(-50%);
  font-size:52px;font-weight:900;letter-spacing:2px;color:rgba(45,106,115,.07);
  white-space:nowrap;pointer-events:none;user-select:none;font-family:-apple-system,"Arial Black",sans-serif;}
.login-hero .lg{width:64px;height:64px;margin:0 auto;border-radius:19px;display:flex;
  align-items:center;justify-content:center;color:#fff;position:relative;
  background:linear-gradient(135deg,#3fa87f,var(--brand-deep));
  box-shadow:0 8px 20px rgba(45,106,115,.3);}
.login-hero h2{font-size:20px;margin-top:12px;font-weight:800;letter-spacing:1px;}
.login-hero p{font-size:12px;color:var(--sub);margin-top:5px;}
.acc{display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:14px;
  margin-bottom:10px;cursor:pointer;border:1.5px solid transparent;
  box-shadow:0 1px 2px rgba(23,32,48,.03),0 2px 8px rgba(23,32,48,.04);transition:.15s;}
.acc:hover{border-color:var(--brand);}
.acc .avatar{width:44px;height:44px;font-size:19px;border-radius:13px;}
.acc .nm{font-weight:700;font-size:14.5px;}
.acc .ds{font-size:11.5px;color:var(--sub);margin-top:2px;}
/* 家长首页头部 */
.p-head{background:linear-gradient(135deg,#3fa87f 0%,var(--brand-deep) 100%);position:relative;
  padding:16px 16px 46px;color:#fff;border-radius:0 0 24px 24px;overflow:hidden;}
.p-head::after{content:"LIFANG EDU";position:absolute;right:-8px;bottom:8px;
  font-size:34px;font-weight:900;letter-spacing:1px;color:rgba(255,255,255,.07);
  pointer-events:none;font-family:-apple-system,"Arial Black",sans-serif;}
.p-head .hi{font-size:17px;font-weight:800;letter-spacing:.5px;}
.p-head .sub{font-size:11.5px;opacity:.85;margin-top:2px;}
.child-sw{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.child-sw .c{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);
  padding:5px 12px;border-radius:15px;font-size:12px;cursor:pointer;transition:.15s;}
.child-sw .c.on{background:#fff;color:var(--brand-deep);font-weight:700;border-color:#fff;}
/* 上浮位现在归顶部的打卡折叠卡（.ck-float），待办区回到正常文档流 */
.todo-wrap{margin-top:0;padding:0 14px;position:relative;z-index:2;}
/* 待办区：顶部摘要 + 分组标题（待完成 / 待批改 / 已完成） */
.sec-hd{display:flex;align-items:center;margin:2px 4px 9px;}
.sec-hd .sec-title{margin:0;}
.sec-hd .pill{margin-left:auto;font-size:11px;font-weight:700;padding:3px 10px;border-radius:11px;
  background:var(--brand-weak);color:var(--brand);}
.sec-hd .pill.hot{background:var(--orange-weak);color:var(--orange);}
.grp{display:flex;align-items:center;gap:7px;margin:16px 4px 9px;}
.sec-hd + .grp{margin-top:2px;}
.grp .gt{font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:.3px;}
.grp .gn{font-size:10.5px;font-weight:700;color:#fff;background:#b6c8bd;border-radius:9px;
  padding:1px 7px;line-height:1.6;}
.grp.todo .gn{background:var(--orange);}
.grp.doing .gn{background:var(--info);}
.grp.done .gn{background:var(--brand);}
.grp .gl{flex:1;height:1px;background:var(--line);}
/* 作业卡：标题 / 元信息 / 动作三层，周期作业带进度条可展开 */
.hw-card{margin-top:0;cursor:pointer;}
.hw-top{display:flex;align-items:center;gap:11px;}
.hw-r1{display:flex;align-items:center;gap:7px;min-width:0;}
.hw-card .t1{font-size:14.5px;font-weight:700;min-width:0;}
.hw-t2{font-size:11.5px;color:var(--sub);margin-top:3px;}
.hw-t2 .srcdot{color:var(--brand);font-weight:700;}
.hw-t2 .duehot{color:var(--orange);font-weight:600;}
/* 截止日期单开一行（老师 2026-10-08：「为每个作业添加截止日期字段」）。
   上面那行 hw-t2 是单行省略号，老师名一长就把截止时间挤没了 —— 而它最该被看见。
   左边绝对时间答「哪一天」，右边小字相对时间答「急不急」：24 小时内变橙、已过期变红。 */
.hw-due{display:flex;align-items:center;gap:5px;margin-top:10px;padding-top:9px;
  border-top:.5px solid var(--line);font-size:11.5px;color:#3f5348;}
.hw-due > svg{color:var(--sub);flex:0 0 auto;}
.hw-due .hd-abs{font-weight:600;letter-spacing:.2px;}
.hw-due .hd-rel{font-size:10.5px;color:var(--sub);flex:0 0 auto;}
.hw-due.soon .hd-abs,.hw-due.soon .hd-rel{color:var(--orange);}
.hw-due.soon .hd-rel{font-weight:700;}
.hw-due.late .hd-abs,.hw-due.late .hd-rel{color:var(--red);}
.hw-due.late .hd-rel{font-weight:700;}
.hw-prog{margin-top:10px;}
.hw-prog .prog{margin-top:0;height:4px;}
.hw-prog-t{display:flex;align-items:center;font-size:10.5px;color:var(--sub);margin-top:5px;}
.hw-prog-t b{color:var(--brand);}
.hw-more{margin-left:auto;color:var(--brand);font-weight:600;cursor:pointer;padding:2px 0 2px 10px;}
.rdays{margin-top:7px;border-top:.5px solid var(--line);padding-top:3px;}
.rday{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:.5px solid var(--line);font-size:11.5px;}
.rday:last-child{border-bottom:none;}
.rday .rd-d{font-weight:600;color:var(--ink);}
.rday .rd-date{color:var(--sub);font-size:11px;}
.todo{display:flex;align-items:center;gap:11px;}
.todo .t1{font-size:14.5px;font-weight:700;}
.todo .t2{font-size:11.5px;color:var(--sub);margin-top:2px;}
.due{font-size:11px;color:var(--red);font-weight:600;display:flex;align-items:center;gap:4px;}
.ic-big{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;flex:0 0 auto;}
/* 科目色块：卡片左侧的识别锚点。实心深色底 + 白字，和「浅底彩字」的状态标签刻意分成两套语言 */
.subj-tile{display:flex;align-items:center;justify-content:center;border-radius:12px;flex:0 0 auto;
  color:#fff;font-weight:700;letter-spacing:.5px;line-height:1;text-align:center;overflow:hidden;
  -webkit-user-select:none;user-select:none;}
/* 科目小标：浅底 + 科目色字，用于列表/表格里不方便放色块的位置 */
.subj-pill{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:6px;
  font-size:11px;font-weight:700;letter-spacing:.3px;flex:0 0 auto;}
/* 九宫格上传 */
.grid9{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.grid9 .cell{aspect-ratio:1;border-radius:11px;background:#eaf4ee;border:1.5px dashed #c3dbc9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--sub);
  font-size:11px;gap:4px;cursor:pointer;overflow:hidden;}
.grid9 .cell img{width:100%;height:100%;object-fit:cover;}
.grid9 .cell .ph-ic{display:flex;color:#9db0a4;}
.grid9 .cell .rm{position:absolute;top:3px;right:3px;width:17px;height:17px;background:rgba(23,29,38,.6);
  color:#fff;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center;}
.vid-btn{display:flex;align-items:center;gap:8px;background:#eaf4ee;border-radius:11px;
  padding:11px 13px;font-size:13px;color:var(--ink);cursor:pointer;margin-top:8px;}
/* 播放条 */
.play{display:flex;align-items:center;gap:10px;background:var(--brand-weak);border-radius:11px;padding:10px 13px;}
.play .pb{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:14px;cursor:pointer;flex:0 0 auto;border:none;}
.wave{flex:1;height:22px;display:flex;align-items:center;gap:2.5px;}
.wave i{flex:1;background:#8fc7a5;border-radius:2px;}
/* 日历 */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;}
.cal .wd{font-size:10.5px;color:var(--sub);}
.cal .d{aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;position:relative;background:#eaf4ee;color:var(--ink);}
.cal .d.ok{background:var(--brand);color:#fff;font-weight:700;}
.cal .d.miss{background:var(--red-weak);color:var(--red);}
.cal .d.today{outline:2px solid var(--brand);outline-offset:1px;font-weight:700;}
/* 学生端：应打卡但确实漏了 → 红；老师设了周中/周末/每周几时，非应打卡日 → 灰（休息日，不用打卡） */
.cal .d.rest{background:#f1f9f3;color:#baccc0;}
/* 活动开始前 / 结束后：跟这段日历没关系，压到最淡 */
.cal .d.out{background:transparent;color:#dbe0e9;}
/* 老师端发布页：自由选日期模式下被点中的日子 */
.cal .d.sel{background:var(--brand);color:#fff;font-weight:700;cursor:pointer;}
.cal .d.off{opacity:.3;}
/* 重复规则选择器（发布打卡活动 / 布置周期作业共用）：六选一的规则 + 联动的长度摘要 */
.rp-rep .pk{font-size:11.5px;}
.rp-calnav{display:flex;align-items:center;justify-content:space-between;margin:4px 0 8px;
  font-size:12px;color:var(--sub);}
.rp-nav{border:0;background:#e8f4ec;border-radius:8px;width:28px;height:26px;font-size:14px;
  line-height:1;color:var(--ink);cursor:pointer;font-family:inherit;}
.rp-sum{font-size:11.5px;line-height:1.6;color:var(--ink);background:#eef7f1;border-radius:10px;
  padding:8px 11px;margin-top:12px;}
.rp-sum b{font-weight:700;}
.badges{display:flex;gap:10px;}
.badge{width:52px;text-align:center;font-size:10px;color:var(--sub);}
.badge .b-ic{width:44px;height:44px;margin:0 auto 4px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:#b47a10;background:linear-gradient(135deg,#ffedc7,#f7d488);}
.badge.lock .b-ic{background:#e6f2ea;color:#9db0a4;filter:grayscale(1);opacity:.6;}
/* 老师工作台 */
.t-head{background:linear-gradient(135deg,#33415c 0%,#1f2a40 100%);padding:16px 16px 40px;
  color:#fff;border-radius:0 0 24px 24px;display:flex;align-items:center;gap:12px;position:relative;overflow:hidden;}
.t-head::after{content:"LIFANG EDU";position:absolute;right:-6px;bottom:6px;
  font-size:28px;font-weight:900;letter-spacing:1px;color:rgba(255,255,255,.06);pointer-events:none;
  font-family:-apple-system,"Arial Black",sans-serif;}
.t-head .ava{width:46px;height:46px;border-radius:50%;background:#fff;color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;}
.stat-row{display:flex;gap:10px;margin-top:-24px;padding:0 14px;position:relative;z-index:2;}
.stat{flex:1;background:#fff;border-radius:13px;padding:12px;text-align:center;
  border:.5px solid rgba(23,32,48,.04);
  box-shadow:0 1px 2px rgba(23,32,48,.04),0 3px 10px rgba(23,32,48,.05);}
.stat .n{font-size:21px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums;}
.stat .n.warn{color:var(--red);}
.stat .l{font-size:11px;color:var(--sub);margin-top:2px;}
.fab{position:absolute;right:16px;bottom:84px;width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,#3fa87f,var(--brand-deep));color:#fff;font-size:26px;display:flex;
  align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(45,106,115,.4);cursor:pointer;z-index:25;transition:transform .15s;}
.fab:active{transform:scale(.94);}
/* 表单 */
.fi{margin-bottom:14px;}
.fi label{font-size:12.5px;color:var(--sub);display:block;margin-bottom:6px;font-weight:600;}
.fi input,.fi textarea{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:11px 12px;
  font-size:14px;font-family:inherit;outline:none;background:#fff;transition:border-color .15s;}
.fi input:focus,.fi textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(45,106,115,.08);}
.fi textarea{height:84px;resize:none;}
.pick{display:flex;flex-wrap:wrap;gap:8px;}
.pick .pk{padding:7px 14px;border-radius:17px;border:1.5px solid var(--line);font-size:12.5px;
  cursor:pointer;background:#fff;color:var(--sub);transition:.15s;}
.pick .pk.on{border-color:var(--brand);background:var(--brand-weak);color:var(--brand-deep);font-weight:700;}
/* 批改台 */
.std-list{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;}
.std-list::-webkit-scrollbar{display:none;}
.std{flex:0 0 auto;text-align:center;font-size:10.5px;color:var(--sub);cursor:pointer;width:52px;}
.std .sa{width:40px;height:40px;border-radius:50%;margin:0 auto 3px;display:flex;align-items:center;
  justify-content:center;font-size:16px;font-weight:700;color:var(--brand);background:var(--brand-weak);
  border:2px solid transparent;}
.std.on .sa{border-color:var(--brand);}
.std.on{color:var(--brand);font-weight:700;}
.std .st{font-size:10px;margin-top:1px;}
.photo-view{background:linear-gradient(135deg,#dff0e6,#cfe8da);border-radius:12px;height:190px;
  position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.photo-view img{width:100%;height:100%;object-fit:contain;background:#fff;}
.tools{display:flex;gap:14px;justify-content:center;background:#fff;border-radius:11px;padding:9px 0;margin-top:10px;}
.tools .tl{font-size:11px;color:var(--sub);display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;border:none;background:none;}
.tools .tl .ti{display:flex;height:20px;align-items:center;}
.tools .tl.on{color:var(--brand);font-weight:700;}
.score-chips{display:flex;gap:8px;}
.score-chips .sc{flex:1;text-align:center;padding:9px 0;border-radius:10px;border:1.5px solid var(--line);
  font-size:13px;cursor:pointer;background:#fff;color:var(--sub);font-weight:600;transition:.15s;}
.score-chips .sc.on-g{border-color:var(--brand);background:var(--green-weak);color:var(--brand);}
.score-chips .sc.on-r{border-color:var(--red);background:var(--red-weak);color:var(--red);}
.quick{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px;}
.quick span{font-size:11.5px;background:#eaf4ee;border-radius:13px;padding:5px 11px;cursor:pointer;color:var(--sub);transition:.15s;}
.quick span:hover{background:var(--brand-weak);color:var(--brand);}
/* 答疑 */
.qa-item{display:flex;gap:11px;align-items:flex-start;}
.qa-time{font-size:10.5px;color:var(--sub);margin-top:5px;}
.urgent{font-size:10.5px;color:var(--red);font-weight:700;display:inline-flex;align-items:center;gap:3px;}
.attach-row{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
.attach-row img{width:56px;height:56px;border-radius:8px;object-fit:cover;}
.file-card{display:flex;align-items:center;gap:10px;background:#eef7f1;border-radius:11px;padding:11px 13px;}
.file-card .fic{display:flex;color:var(--sub);}
/* 对话气泡（答疑详情） */
.bubble-wrap{display:flex;gap:8px;margin-bottom:12px;align-items:flex-start;}
.bubble-wrap.me{flex-direction:row-reverse;}
.bubble{max-width:78%;background:#fff;border-radius:12px;padding:11px 13px;font-size:13px;line-height:1.7;
  border:.5px solid rgba(23,32,48,.04);
  box-shadow:0 1px 3px rgba(23,32,48,.05);}
.bubble-wrap.me .bubble{background:var(--brand-weak);}
.bubble .who{font-size:10.5px;color:var(--sub);margin-bottom:3px;}
/* 通知列表 */
.notice-item{display:flex;gap:10px;align-items:flex-start;padding:12px 2px;border-bottom:.5px solid var(--line);}
.notice-item.unread .nt{font-weight:700;}
.notice-item .nt{font-size:13px;line-height:1.6;}
.notice-item .ntime{font-size:10.5px;color:var(--sub);margin-top:3px;}
.notice-item .ndot{width:8px;height:8px;border-radius:50%;background:var(--red);margin-top:6px;flex:0 0 auto;}
.notice-item .ndot.off{background:transparent;}
/* 批注画布层 */
.anno-layer{position:absolute;inset:0;cursor:crosshair;}
.anno-layer canvas{position:absolute;inset:0;width:100%;height:100%;}
/* 视频播放 */
.videobox{width:100%;border-radius:12px;background:#000;max-height:200px;}
/* 上传中 */
.uploading{opacity:.6;pointer-events:none;}
.fup-note{font-size:11px;color:var(--sub);margin-top:6px;}
/* ===== 分段控件（作业打卡/打卡活动、讲义库/补充卷库 这类二选一） ===== */
.seg{display:flex;gap:5px;background:#e6f2ea;border-radius:12px;padding:4px;margin-bottom:12px;}
.seg .sg{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 6px;border-radius:9px;
  font-size:12.5px;color:#516358;cursor:pointer;font-weight:600;transition:background .15s,color .15s;}
.seg .sg.on{background:#fff;color:var(--brand-deep);box-shadow:0 1px 4px rgba(23,48,23,.1);}

/* ===== 社群帖 ===== */
.post-body{white-space:pre-wrap;line-height:1.85;font-size:13.5px;}
.post-meta{display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--sub);margin-top:10px;}
.post-meta span{display:inline-flex;align-items:center;gap:4px;}

/* ===== 错题本条目 ===== */
.wq{padding:11px 0;border-bottom:.5px solid var(--line);}
.wq:last-child{border-bottom:none;}
.wq .wstem{font-size:13px;font-weight:600;line-height:1.55;}
.wq .wmine{font-size:12.5px;color:var(--red);margin-top:5px;}
.wq .wans{font-size:12.5px;color:var(--brand);font-weight:600;margin-top:2px;}
.wq .wana{font-size:12px;color:var(--sub);line-height:1.7;margin-top:4px;}

/* ===== 家长首页 · 两大区块 =================================================
   学生首页要回答两个完全不同的问题：
     ①「我报的课今天有什么作业」—— 分科目、有截止、要提交，属于课程内互动；
     ②「我没报名，能参与什么」—— 公开打卡活动，注册即可参加。
   两者混在一条列表里，家长分不清「哪些是我该交的、哪些是我自愿玩的」，
   所以拆成两块，各自有自己的标题、徽标和视觉语言。 */

/* 区块标题：图标 + 标题 + 右侧徽标，和普通 .sec-title 明确区分 */
.home-sec .sec-hd{display:flex;align-items:center;gap:7px;margin:18px 4px 9px;}
.home-sec .sec-ic{width:22px;height:22px;border-radius:7px;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;}
.home-sec .sec-ic svg{width:14px;height:14px;}
.home-sec .sec-title{margin:0;font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:.3px;}
/* 区块①「课程作业」= 主任务，用品牌绿 */
.home-sec.course .sec-ic{background:var(--brand-weak);color:var(--brand);}
/* 区块②「公开打卡活动」= 自愿参与，用橙色，和「待完成」的橙区分开靠位置与文案，不靠颜色叠 */
.home-sec.pub .sec-ic{background:var(--orange-weak);color:var(--orange);}
.home-sec .sec-hd .pill{margin-left:auto;font-size:11px;font-weight:700;padding:3px 10px;
  border-radius:11px;background:var(--brand-weak);color:var(--brand);}
.home-sec .sec-hd .pill.mute{background:#e6f2ea;color:#6f8377;}

/* 科目筛选条：只在≥2 科时出现。芯片本身就是「科目色」的复述，不再另加图标 */
.subj-filter{display:flex;gap:7px;padding:10px 2px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.subj-filter::-webkit-scrollbar{display:none;}
.subj-filter .sf{flex:0 0 auto;display:flex;align-items:center;gap:5px;background:#fff;
  border:1px solid #e3e7ee;border-radius:15px;padding:5px 11px;font-size:12px;font-weight:600;
  color:#516358;cursor:pointer;transition:.15s;}
.subj-filter .sf .n{font-size:10px;font-weight:700;background:#e6f2ea;color:#6f8377;
  border-radius:8px;padding:1px 5px;line-height:1.4;}
.subj-filter .sf.on{color:#fff;border-color:transparent;}
.subj-filter .sf.on .n{background:rgba(255,255,255,.26);color:#fff;}
/* 用科目自带的色点亮选中态，比统一绿色更有「我在看哪一科」的感觉 */
.subj-filter .sf .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;}

/* 「还没报名课程」空态：不说教，讲清原因 + 给下一步 */
.enroll-empty{text-align:left;background:linear-gradient(180deg,#fbfdfb,#fff);
  border:.5px dashed #cdd8d1;}
.enroll-empty .ee-top{display:flex;align-items:center;gap:10px;}
.enroll-empty .ee-t{font-size:14px;font-weight:800;color:var(--ink);}
.enroll-empty .ee-d{font-size:12px;color:var(--sub);line-height:1.75;margin-top:9px;}
.enroll-empty .ee-d b{color:var(--brand);font-weight:700;}

/* 公开活动卡：独立配色（橙色系），和课程作业卡一眼可分 */
.pub-card{background:linear-gradient(180deg,#fffaf4,#fff);border:1px solid #f7e2cc;
  box-shadow:0 1px 2px rgba(120,70,10,.03),0 2px 8px rgba(120,70,10,.05);}
.pub-card .pc-t1{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:7px;min-width:0;}
/* 活动简介最多两行：单行省略号会把「…。」这种半截标点显示出来，两行夹取更自然 */
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5;}
/* 公开活动进度：用橙色系，避免和「课程作业完成度」的绿色品牌条混淆 */
.pub-card .prog i{background:var(--orange);}

/* ===== 首页顶部「今日打卡」折叠卡 ==========================================
   打卡从 tab 撤下后落在这里：默认收起成一行（「今天还差几项」一眼可见），展开才看
   逐项明细，日历与徽章仍在打卡详情页。
   它是「上浮层」的第一块 —— 吃掉 .todo-wrap 原来的 -32px 上浮，压在绿色头部上；
   区块①「课程作业」因此回到白底，改用 .home-sec 的皮肤，和区块② 的标题风格对齐。 */
.ck-float{margin:-32px 14px 0;position:relative;z-index:3;min-height:56px;}
.ck-strip{background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(23,32,48,.04),0 6px 18px rgba(23,32,48,.07);}
.cks-hd{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;}
.cks-ic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;}
.cks-ic.hot{background:var(--orange-weak);color:var(--orange);}
.cks-ic.ok{background:var(--brand-weak);color:var(--brand);}
.cks-t{font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:.2px;}
.cks-s{font-size:11.5px;color:var(--sub);margin-top:1px;}
.cks-s b{font-weight:800;}
.cks-s b.no{color:var(--orange);}
.cks-s b.ok{color:var(--brand);}
.cks-chev{color:#b8c0cc;display:flex;flex:0 0 auto;transition:transform .2s;}
.ck-strip.open .cks-chev{transform:rotate(180deg);}
/* 展开用 max-height 过渡：行数不定，给个够用的上限即可 */
.cks-body{max-height:0;overflow:hidden;transition:max-height .22s ease;}
.ck-strip.open .cks-body{max-height:480px;border-top:.5px solid var(--line);}
.ck-row{display:flex;align-items:center;gap:9px;padding:10px 14px;cursor:pointer;
  border-bottom:.5px solid var(--line);}
.ck-row:last-of-type{border-bottom:none;}
.ck-dot{width:18px;height:18px;border-radius:50%;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;}
.ck-dot.ok{background:var(--brand);color:#fff;}
.ck-dot.no{background:#fff;border:1.5px solid #d5dbe4;}
.ck-n{font-size:12.5px;font-weight:600;color:var(--ink);}
.ck-s{font-size:10.5px;color:var(--sub);margin-top:1px;}
.ck-tag{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:9px;flex:0 0 auto;}
.ck-tag.ok{background:var(--brand-weak);color:var(--brand);}
.ck-tag.no{background:var(--orange-weak);color:var(--orange);}
/* 「今日休息」：这天不是应打卡日（周中活动遇到周六日），既不是完成也不是欠账 —— 一律用灰 */
.ck-dot.rest{background:#e8f4ec;border:1.5px solid #d7e8dd;}
.ck-tag.rest{background:#e8f4ec;color:var(--sub);}
.ck-empty{padding:13px 14px;font-size:11.5px;color:var(--sub);line-height:1.7;}
.ck-more{padding:11px 14px;font-size:12px;font-weight:700;color:var(--brand);
  border-top:.5px solid var(--line);text-align:center;cursor:pointer;}

/* ===== 错题本「拍照识别收录」============================================
   家长最常见的场景是：练习册上一道错题，拍一张，让系统认出来。
   这一页因此分成三段：选图（.wb-hero）→ 识别中 → 确认（.wb-item 卡片列）。
   识别结果一律当「草稿」处理：字段全部可改、每题可单独取舍，绝不直接入库。 */
.wb-hero{background:linear-gradient(180deg,#f6fbf7,#fff);border:.5px solid #cfe6d8;
  border-radius:16px;padding:18px 16px;text-align:center;}
.wb-hero .hi{width:56px;height:56px;border-radius:18px;background:var(--brand-weak);
  color:var(--brand);display:flex;align-items:center;justify-content:center;margin:2px auto 12px;}
.wb-hero .t{font-size:15.5px;font-weight:800;color:var(--ink);}
.wb-hero .d{font-size:12px;color:var(--sub);line-height:1.75;margin-top:7px;}
.wb-acts{display:flex;gap:10px;margin-top:15px;}
.wb-acts .btn-mini{flex:1;justify-content:center;display:flex;align-items:center;gap:6px;
  padding:12px 0;font-size:13px;}
.wb-tip{font-size:11.5px;color:var(--sub);line-height:1.8;margin-top:14px;padding:11px 13px;
  background:#f0f8f2;border-radius:11px;}
.wb-tip b{color:var(--ink);}
/* 识别中 */
.wb-wait{text-align:center;padding:44px 20px;}
.wb-wait .sp{width:34px;height:34px;border:3px solid var(--brand-weak);border-top-color:var(--brand);
  border-radius:50%;margin:0 auto 16px;animation:wbspin .8s linear infinite;}
@keyframes wbspin{to{transform:rotate(360deg);}}
.wb-wait .t{font-size:14px;font-weight:700;}
.wb-wait .d{font-size:11.5px;color:var(--sub);margin-top:6px;}
/* 原图 */
.wb-shot{margin-bottom:10px;}
.wb-shot img{width:100%;max-height:190px;object-fit:cover;border-radius:12px;
  border:.5px solid var(--line);cursor:zoom-in;display:block;}
.wb-shot .cap{font-size:11px;color:var(--sub);text-align:center;margin-top:6px;}
/* 逐题卡片 */
.wb-item{background:#fff;border:.5px solid var(--line);border-radius:14px;margin-bottom:11px;overflow:hidden;}
.wb-item.off{opacity:.5;}
.wb-item .wb-hd{display:flex;align-items:center;gap:9px;padding:12px 13px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;}
.wb-no{width:24px;height:24px;border-radius:8px;color:#fff;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.wb-h1{font-size:12.5px;font-weight:700;color:var(--ink);}
.wb-h2{font-size:10.5px;color:var(--sub);margin-top:2px;}
.wb-keep{font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:10px;flex:0 0 auto;
  background:var(--brand-weak);color:var(--brand);}
.wb-keep.off{background:#e6f2ea;color:#6f8377;}
.wb-item .wb-body{display:none;padding:2px 13px 14px;border-top:.5px solid var(--line);}
.wb-item.open .wb-body{display:block;}
.wb-body .fi{margin-top:12px;margin-bottom:0;}
.wb-body .fi textarea{height:70px;}
.wb-body .fi.opt textarea{height:92px;}
.wb-body .subj-filter{padding:2px 0 0;}
.wb-body .subj-filter .sf{padding:5px 10px;font-size:11.5px;}
/* 识别原文 */
.wb-raw{margin-top:4px;}
.wb-raw .h{display:flex;align-items:center;justify-content:space-between;font-size:12px;
  font-weight:700;color:var(--sub);padding:11px 13px;background:#fff;border-radius:12px;
  border:.5px solid var(--line);cursor:pointer;}
.wb-raw pre{margin:8px 0 0;padding:12px 13px;background:#f0f8f2;border-radius:12px;
  font-size:11.5px;line-height:1.85;color:#3f5348;white-space:pre-wrap;word-break:break-word;
  font-family:-apple-system,'PingFang SC',sans-serif;max-height:230px;overflow:auto;}
/* 错题本列表里的收录件：原图缩略图挂在题干左侧，点开看大图 */
.wb-thumb{width:70px;height:70px;object-fit:cover;border-radius:10px;border:.5px solid var(--line);
  flex:0 0 auto;cursor:zoom-in;background:#eaf5ee;}
.wb-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;
  padding:2px 7px;border-radius:8px;background:var(--purple-weak);color:var(--purple);}
.wb-cause{font-size:12px;color:#b45309;line-height:1.7;margin-top:3px;}
.wb-op{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:12px;background:#e6f2ea;
  color:#3f5348;cursor:pointer;display:inline-flex;align-items:center;gap:4px;}
.wb-foot{display:flex;margin-top:14px;}
.wb-foot .btn-mini{box-shadow:0 4px 14px rgba(45,106,115,.26);}

/* 老师端「作业列表」：顶部一排班级，点哪个只看哪个（不再把各班铺成一长条）。
   老师 2026-10-02 定的：不用分栏列开，点班级筛选就行。 */
#t-work-tabs{margin-bottom:11px;}
#t-work-tabs .pk b{font-weight:400;opacity:.6;margin-left:5px;font-size:11px;}
#t-work-tabs .pk.on{border-color:var(--brand);background:var(--brand-weak);color:var(--brand-deep);font-weight:700;}
.cls-sum{font-size:11.5px;color:var(--sub);margin:0 4px 9px;}
.cls-sum b{color:var(--red);font-weight:700;}

/* ===== 家长社区（小红书式）：双 tab + 双列瀑布流 =============================
   老师 2026-10-07：「社区要做得美观一点，参考小红书那种，打卡活动和社区文章要可以切换」。
   · 顶部两个 tab：打卡活动 / 社区文章；
   · 两个 tab 都是瀑布流（.comm-grid.two = 双列），卡片高度天然不同才不会排成表格；
   · 卡片统一 .tile 三段式：封面 → 标题 → 底部元信息/按钮。 */

/* 顶部 tab：选中态用品牌色浅底，右侧带数量。吸顶——翻到下面还能一键切回活动 */
.comm-tabs{position:sticky;top:46px;z-index:12;display:flex;gap:7px;
  background:var(--wx-bg);margin:-12px -14px 12px;padding:12px 14px 10px;}
.comm-tabs .ct{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:10px 6px;border-radius:13px;background:#fff;border:1.5px solid transparent;
  font-size:13.5px;font-weight:700;color:#516358;cursor:pointer;
  box-shadow:0 1px 2px rgba(23,32,48,.04);transition:background .15s,color .15s;}
.comm-tabs .ct b{font-weight:700;font-size:10.5px;color:#fff;background:#b6c8bd;
  border-radius:9px;padding:1px 6px;min-width:17px;text-align:center;line-height:1.5;}
.comm-tabs .ct.on{background:linear-gradient(135deg,#e4f6ec,#dcf2ee);color:var(--brand-deep);border-color:var(--brand);}
.comm-tabs .ct.on b{background:var(--brand);}

/* 瀑布流：.comm-grid 是横向 flex —— 少于 3 张时卡片直接并排/整行铺开（分列反而更空），
   3 张及以上由 app.js 的 masonry() 按「实测高度塞进较矮那列」分配进两个 .cg-col。
   ⚠️ 不要退回 column-count：它是「填满左列再填右列」，会把左列拖出一大片空白。 */
.comm-grid{display:flex;align-items:flex-start;gap:10px;}
.comm-grid > .tile{flex:1;min-width:0;margin-bottom:10px;}
.cg-col{flex:1;min-width:0;}
.cg-col .tile{margin-bottom:10px;}
.cg-col .tile:last-child{margin-bottom:0;}

.tile{position:relative;background:#fff;border-radius:14px;overflow:hidden;
  border:.5px solid rgba(23,32,48,.05);
  box-shadow:0 1px 2px rgba(23,32,48,.03),0 2px 8px rgba(23,32,48,.05);}
.post-tile{cursor:pointer;}
.tile-cov{position:relative;height:96px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#e6f2ea;}
.tile-cov img,.tile-cov video{width:100%;height:100%;object-fit:cover;display:block;}
.tile-cov .tc-wm{display:flex;color:rgba(255,255,255,.92);}
/* 活动封面：品牌暖色渐变 —— 和文章封面（真图 / 科目色）一眼分得开 */
.tile-cov.act{background:linear-gradient(140deg,#f3b06a,#dd8434);}
.tc-badge{position:absolute;left:7px;top:7px;font-size:10px;font-weight:700;letter-spacing:.2px;
  padding:2px 7px;border-radius:8px;background:rgba(23,29,38,.34);color:#fff;}
.tc-done{position:absolute;right:7px;top:7px;font-size:10px;font-weight:700;
  padding:2px 7px;border-radius:8px;background:rgba(255,255,255,.94);color:var(--brand);}
.tc-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;background:rgba(23,29,38,.24);}
.pin{position:absolute;right:0;top:0;z-index:2;font-size:10px;font-weight:700;color:#fff;
  padding:3px 8px;border-bottom-left-radius:10px;background:var(--orange);}

.tile-bd{padding:9px 10px 0;}
.tile-tt{font-size:13px;font-weight:700;line-height:1.45;color:var(--ink);}
.tile-sub{font-size:11px;color:var(--sub);margin-top:4px;}
/* 已经手动拆过行的片段（日期区间）不要再被折行 */
.tile-sub.nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tile-q{font-size:10.5px;color:#3f5348;line-height:1.55;margin-top:7px;padding:6px 8px;
  background:#eef7f1;border-radius:9px;}
.tile-q b{display:block;color:var(--brand);font-size:10px;font-weight:700;margin-bottom:2px;}
.tile-bd .hw-prog{margin-top:8px;}
.tile-ft{display:flex;align-items:center;gap:6px;padding:8px 10px 10px;}
.tile-ft .tf-who{font-size:10.5px;color:var(--sub);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tile-ft .tf-n{font-size:10.5px;color:var(--sub);display:inline-flex;align-items:center;gap:3px;}
/* 活动卡的底栏是按钮，占满整行 —— 它比「作者+互动数」更需要点击面积 */
.tile.act-tile .tile-ft{display:block;}
.tile.act-tile .tile-ft .btn-mini{padding:8px 0;border-radius:11px;font-size:12.5px;}

/* 文章 tab 的说明条与科目筛选（筛选只留科目：社区里只有讲解帖一种内容） */
.comm-hero{display:flex;gap:9px;align-items:flex-start;margin-bottom:10px;
  background:linear-gradient(140deg,#eaf5ec,#e8eefb);border-radius:13px;padding:11px 13px;
  font-size:11.5px;color:#3f5348;line-height:1.7;}
.comm-hero > svg{color:var(--brand);margin-top:1px;}
.comm-hero .grow > b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:3px;}
.comm-hero .grow span b{color:var(--ink);}
.comm-filter{display:flex;flex-wrap:wrap;gap:7px;margin:0 2px 12px;}
.comm-filter .pk{padding:5px 12px;border-radius:15px;border:1.5px solid var(--line);
  background:#fff;color:#516358;font-size:12px;font-weight:600;cursor:pointer;}
.comm-filter .pk.on{border-color:var(--brand);background:var(--brand-weak);color:var(--brand-deep);font-weight:700;}

/* ===== 历史作业（区块① 的二级页）==========================================
   老师 2026-10-07：「首页的作业要有历史作业，要能追溯」。
   首页区块①要短（只放现在要处理的），这一页要全（能按月翻回去查）。
   所以入口做成一行窄条、不抢首页版面；二级页按月分组，不摆按钮、不给进度条 ——
   历史上没有「要你做什么」，只回答哪一次、交没交、批没批、多少分。 */
.his-entry{display:flex;align-items:center;gap:9px;margin-top:4px;padding:11px 13px;
  background:#fff;border:.5px solid rgba(23,32,48,.05);border-radius:13px;cursor:pointer;
  box-shadow:0 1px 2px rgba(23,32,48,.03),0 2px 8px rgba(23,32,48,.04);}
.his-entry .he-ic{width:24px;height:24px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;background:var(--info-weak);color:var(--info);flex:0 0 auto;}
.his-entry .grow{font-size:13px;font-weight:700;color:var(--ink);line-height:1.35;}
.his-entry .grow em{display:block;font-style:normal;font-weight:400;font-size:10.5px;
  color:var(--sub);margin-top:1px;}
.his-entry .he-go{font-size:11px;font-weight:600;color:var(--brand);flex:0 0 auto;}
/* 「N 份过期还没交」+「还有 N 份未来作业」两行入口（老师 2026-10-08 的首页减量规则）。
   过期没交那行偏红（该做事了），未来作业那行中性（现在不用管）——
   两行都是一条窄带，比在首页多摆 4 张卡省地方，点一下都进历史作业。 */
.late-entry{display:flex;align-items:center;gap:9px;margin-top:8px;padding:11px 13px;cursor:pointer;
  background:var(--red-weak);border:1px solid rgba(214,60,60,.18);border-radius:13px;}
.late-entry .le-ic{width:24px;height:24px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;background:#fff;color:var(--red);flex:0 0 auto;}
.late-entry .grow{font-size:13px;font-weight:700;color:var(--ink);line-height:1.35;}
.late-entry .grow b{color:var(--red);}
.late-entry .grow em{display:block;font-style:normal;font-weight:400;font-size:10.5px;
  color:var(--sub);margin-top:1px;}
.late-entry .le-go{font-size:11px;font-weight:600;color:var(--red);flex:0 0 auto;}
.more-entry{display:flex;align-items:center;gap:9px;margin-top:8px;padding:11px 13px;cursor:pointer;
  background:#fff;border:.5px dashed var(--line);border-radius:13px;
  font-size:12.5px;font-weight:700;color:var(--ink);}
.more-entry .grow{line-height:1.35;}
.more-entry .grow b{color:var(--brand);}
.more-entry .grow em{display:block;font-style:normal;font-weight:400;font-size:10.5px;
  color:var(--sub);margin-top:1px;}
.more-entry > span:last-child{font-size:11px;font-weight:600;color:var(--brand);flex:0 0 auto;}

.his-hint{font-size:11.5px;color:var(--sub);line-height:1.65;margin:0 2px 11px;}
.his-hint b{color:var(--ink);}
.his-mon{display:flex;align-items:center;font-size:12px;font-weight:800;color:var(--ink);
  letter-spacing:.3px;margin:14px 4px 8px;}
.his-mon:first-of-type{margin-top:2px;}
.his-mon em{font-style:normal;font-weight:600;font-size:11px;color:var(--sub);}
.his-row{display:flex;align-items:center;gap:10px;padding:11px;margin-bottom:9px;cursor:pointer;}
.his-t{font-weight:700;font-size:13.5px;line-height:1.45;}
.his-m{font-size:11px;color:var(--sub);margin-top:3px;}
.his-r{flex:0 0 auto;display:flex;align-items:center;}

/* 打卡日历的月份回看：复用重复规则那套 .rp-nav 按钮，不另造一套控件 */
.ck-calnav{display:flex;align-items:center;justify-content:space-between;margin:14px 0 9px;}
.ck-calnav > span{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink);}
.ck-calnav .ck-tomon{font-size:10.5px;font-weight:600;color:var(--brand);cursor:pointer;
  background:var(--brand-weak);border-radius:9px;padding:2px 8px;}
.rp-nav:disabled{opacity:.3;cursor:default;}

/* ===== 公开活动详情（社区「打卡活动」点开）=================================
   老师 2026-10-07：「社区里的打卡活动点开要可以查看详情」。
   顶图沿用活动卡的橙色渐变（一眼认出是同一种东西），信息按
   「进度 → 规则 → 说明 → 徽章 → 动作」排，未参加的人看完就能决定要不要参加。 */
.act-hero{position:relative;overflow:hidden;border-radius:16px;padding:18px 15px 16px;
  margin-bottom:11px;background:linear-gradient(140deg,#f3b06a,#dd8434);
  box-shadow:0 3px 14px rgba(221,132,52,.28);}
.act-hero .ah-wm{position:absolute;right:-10px;bottom:-16px;color:rgba(255,255,255,.16);}
.act-hero .ah-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.3px;
  color:#8a4d12;background:rgba(255,255,255,.82);border-radius:9px;padding:3px 9px;}
.act-hero .ah-tt{position:relative;color:#fff;font-weight:800;font-size:18px;line-height:1.45;
  margin-top:9px;text-shadow:0 1px 3px rgba(140,70,10,.28);}
.act-hero .ah-by{position:relative;font-size:11.5px;color:rgba(255,255,255,.92);margin-top:6px;}

.act-foot{margin-top:4px;}
.act-foot .btn{font-weight:700;}
.act-foot .ah-foot-note{text-align:center;font-size:11px;color:var(--sub);margin-top:9px;}
/* 「退出活动」是个「去掉一个东西」的动作，不该长得跟主按钮一样重 —— 弱化成文字按钮，
   免得家长误点；但也别做成红色警示，退出是允许的，不是危险操作 */
.btn-quit{display:block;width:100%;padding:12px 0;margin-top:6px;background:none;border:none;
  color:var(--sub);font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;}
.btn-quit:active{color:var(--ink);}
.ah-note{font-size:11.5px;color:var(--sub);line-height:1.7;margin-top:9px;}
.ah-note b{color:var(--ink);}
.ah-joincard{background:linear-gradient(140deg,#fff,#fff8f1);}

/* 规则是「名称 + 值」的成对信息，用定义列表而不是一串逗号分隔的句子 */
.kv{margin-top:2px;}
.kv-r{display:flex;align-items:flex-start;gap:10px;padding:8px 0;
  border-bottom:.5px solid var(--line);font-size:12.5px;line-height:1.6;}
.kv-r:last-child{border-bottom:none;padding-bottom:0;}
.kv-k{flex:0 0 auto;width:66px;color:var(--sub);}
.kv-v{flex:1;min-width:0;color:var(--ink);font-weight:600;}
.kv-v.hi{color:var(--orange);font-weight:800;}

/* ===== 「计算打卡」的每日任务（老师排题 / 家长看今天的题）=====
   老师 2026-10-08：「一个打卡活动可配置总天数（例如 21 天），自动生成对应数量的每日任务，
   点某一天能为该日选择并添加题目」。下面这套既给老师端的任务列表与选题页用，
   也给家长端「今天的题」用 —— 同一件事在两端只是密度不同。 */

/* 家长端：今天要练的这几道题。放在打卡卡里，紧跟在进度条后面 */
.ck-today{margin:11px 0 2px;background:var(--orange-weak);border-radius:13px;padding:11px 12px;}
.ck-today .ct-hd{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;
  color:#8a5210;letter-spacing:.2px;}
.ck-today .ct-q{display:flex;gap:8px;margin-top:9px;}
.ck-today .ct-n{flex:0 0 auto;width:18px;height:18px;border-radius:6px;background:#fff;color:var(--orange);
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.ck-today .ct-s{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.55;}
.ck-today .ct-o{font-size:11.5px;color:#3f5348;margin-top:3px;}
.ck-today .ct-a{font-size:11px;color:var(--sub);margin-top:4px;}

/* 老师端：任务列表里那一行（点进去排题） */
.ckday-bar{display:flex;align-items:center;gap:9px;margin-top:11px;padding:10px 12px;cursor:pointer;
  background:var(--orange-weak);border-radius:12px;}
.ckday-bar .grow b{display:block;font-size:12.5px;color:#8a5210;}
.ckday-bar .grow span{font-size:11px;color:var(--sub);}
.ckday-bar .ckday-go{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--orange);}

/* 老师端：21 个每日任务，一天一行 —— 行高要压住，21 行不能变成一屏半 */
.ckday-row{display:flex;align-items:center;gap:11px;background:#fff;border-radius:13px;
  padding:11px 13px;margin-bottom:8px;cursor:pointer;border:.5px solid rgba(23,32,48,.05);
  box-shadow:0 1px 3px rgba(23,32,48,.04);}
.ckday-row.today{border-color:rgba(232,142,20,.45);background:linear-gradient(120deg,#fffaf3,#fff);}
.ckday-row .cd-idx{flex:0 0 auto;width:26px;height:26px;border-radius:9px;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:800;
  background:#e6f2ea;color:#6f8377;}
.ckday-row .cd-idx.has{background:var(--orange);color:#fff;}
.ckday-row .cd-t{font-size:13px;font-weight:700;line-height:1.4;}
.ckday-row .cd-s{font-size:11px;color:var(--sub);margin-top:2px;}
.ckday-row .cd-n{flex:0 0 auto;font-size:11px;font-weight:700;color:#8fa398;}
.ckday-row .cd-n.has{color:var(--orange);}

/* 选题页「已选题目」里的移除按钮：给它一个类名，别让测试靠 div:last-child 猜结构
   （猜错过一次：.grow 里的那行小字也是 div:last-child，点上去什么都不会发生） */
.ck-rm{color:var(--sub);cursor:pointer;padding:4px 6px;line-height:1;}

/* 提示条（每日任务页 / 发布页共用这一种观感） */
.ckday-tip,.ck-create-tip{display:flex;gap:9px;align-items:flex-start;margin-top:11px;padding:11px 13px;
  background:#fff;border:.5px dashed var(--line);border-radius:13px;
  font-size:11.5px;color:var(--sub);line-height:1.7;}
.ckday-tip .grow b,.ck-create-tip .grow b{color:var(--ink);}
.ckday-tip > svg,.ck-create-tip > svg{flex:0 0 auto;color:var(--orange);margin-top:2px;}
/* 活动范围（公开活动 / 本班活动）—— 老师 2026-10-08：「都选班级，那不就是布置作业了吗」 */
.ck-scope-note{display:flex;gap:8px;align-items:flex-start;margin-top:9px;padding:9px 11px;border-radius:11px;
  background:linear-gradient(120deg,#eef9f2,#f6fcf8);font-size:11.5px;color:#3f5348;line-height:1.7;}
.ck-scope-note > svg{flex:0 0 auto;color:var(--brand);margin-top:2px;}
.ck-scope-note .grow b{color:var(--ink);}
/* 每日任务里「直接上传图片 / PDF」的入口 */
.ck-up-btn{display:flex;align-items:center;gap:8px;border:1.5px dashed var(--brand);border-radius:12px;
  padding:11px 13px;font-size:12.5px;font-weight:700;color:var(--brand);cursor:pointer;background:var(--brand-weak);}
/* 「今天的内容」里的图片 / PDF 附件 */
.ck-today .ct-files{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;}
.ck-today .ct-fi{width:64px;height:64px;border-radius:9px;object-fit:cover;cursor:pointer;
  border:1px solid rgba(232,142,20,.28);background:#fff;}
.ck-today .ct-ff{display:flex;align-items:center;gap:7px;width:100%;background:#fff;border-radius:9px;
  padding:8px 10px;font-size:12px;color:var(--ink);cursor:pointer;border:1px solid rgba(232,142,20,.22);}
.ck-today .ct-ff svg{flex:0 0 auto;color:var(--orange);}
.ck-today .ct-fg{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--orange);}

/* ===== 「提交方式跟着题目走」新增的三块 ===== */
/* ① 作业 / 打卡作答页顶部：这份作业要交什么（由题目推出来的，不是老师选的） */
.qplan{display:flex;gap:8px;align-items:flex-start;background:var(--brand-weak);border-radius:12px;
  padding:11px 13px;font-size:12px;color:var(--brand-deep);line-height:1.7;margin-bottom:11px;}
.qplan > svg{flex:0 0 auto;color:var(--brand);margin-top:2px;}
.qplan b{color:var(--brand-deep);font-weight:700;}
/* ② 选择 / 填空 / 判断题下面的「附一张解题过程照片」（选填） */
.qap-hd{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--sub);margin-top:10px;}
.qap-cell{position:relative;display:inline-block;margin-top:6px;}
.qap-cell img{width:66px;height:66px;border-radius:10px;object-fit:cover;cursor:pointer;
  border:1px solid var(--line);display:block;}
.qap-cell .rm{position:absolute;top:-6px;right:-6px;width:19px;height:19px;border-radius:50%;
  background:rgba(23,29,38,.72);color:#fff;font-size:11px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;}
.qap-add{display:flex;align-items:center;gap:6px;margin-top:10px;border:1.5px dashed var(--line);
  border-radius:11px;padding:9px 12px;font-size:12px;color:var(--sub);cursor:pointer;background:#f4fbf6;}
.qap-add > svg{flex:0 0 auto;color:var(--sub);}
.qap-opt{font-size:11px;}
/* ③ 打卡「今天的内容」：未作答只给提示，作答后才出「我答的」与得分 */
.ck-today .ct-tip{display:flex;gap:6px;align-items:flex-start;background:#fff;border-radius:9px;
  padding:8px 10px;font-size:11.5px;color:var(--orange);line-height:1.6;margin-top:8px;
  border:1px solid rgba(232,142,20,.22);}
.ck-today .ct-tip > svg{flex:0 0 auto;margin-top:1px;}
.ck-today .ct-mine{font-size:11.5px;color:var(--brand);margin-top:5px;font-weight:600;}
.ck-today .ct-score{margin-top:9px;background:var(--green-weak);color:var(--green);border-radius:9px;
  padding:8px 11px;font-size:12px;font-weight:700;text-align:center;}
/* 打卡里「我交的朗读」：录音没法像照片那样一眼看完，给一条能直接播的 */
.ck-today .ct-mine-audio{display:flex;align-items:center;gap:8px;width:100%;background:#fff;
  border-radius:9px;padding:7px 10px;color:var(--orange);font-size:11.5px;font-weight:700;}
.ck-today .ct-mine-audio .ct-ma-lb{flex:0 0 auto;}
.ck-today .ct-mine-audio audio{flex:1;min-width:110px;height:32px;}

/* ===== 按住录音（朗读类作业的提交方式） =====
   手感照微信语音条来：按住变红 + 跳动的点 + 计时，松开就停。
   ⚠️ `touch-action:none` 和 `user-select:none` 不能省 —— 手机上按住不放时，
   浏览器会把这串手势当成长按选中文字 / 页面滚动，按钮会在指头底下跑掉。 */
.rec{display:flex;flex-direction:column;gap:9px;}
.rec-hold{display:flex;align-items:center;justify-content:center;gap:9px;padding:17px 0;
  border-radius:14px;font-size:15px;font-weight:700;letter-spacing:.4px;color:#fff;
  background:linear-gradient(135deg,#3fa87f,var(--brand-deep));
  box-shadow:0 4px 12px rgba(45,106,115,.28);
  cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;}
.rec-hold:active,.rec-hold.on{background:linear-gradient(135deg,#e0574f,#c2372f);
  box-shadow:0 4px 14px rgba(214,69,69,.32);}
.rec-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#fff;}
.rec-hold.on .rec-dot{animation:recpulse .9s ease-in-out infinite;}
@keyframes recpulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.3;transform:scale(1.5);}}
.rec-hold .rec-time{display:none;font-variant-numeric:tabular-nums;}
.rec-hold.on .rec-lb{display:none;}
.rec-hold.on .rec-time{display:inline;}
.rec-hold.warn .rec-time{text-decoration:underline;}
.rec-tip{font-size:11px;color:var(--sub);line-height:1.6;}
.rec-tip.busy{color:var(--brand);font-weight:700;}
.rec-no{display:flex;align-items:flex-start;gap:8px;background:var(--orange-weak);color:var(--orange);
  border-radius:11px;padding:10px 12px;font-size:11.5px;line-height:1.65;}
.rec-no > svg{flex:0 0 auto;margin-top:1px;}
.rec-file{display:flex;align-items:center;gap:7px;background:#eaf4ee;border-radius:11px;
  padding:10px 12px;font-size:12.5px;cursor:pointer;}
.rec-file > svg{flex:0 0 auto;color:var(--sub);}
.rec-opt{font-size:10.5px;color:var(--sub);}
.rec-item{display:flex;align-items:center;gap:9px;background:var(--brand-weak);border-radius:11px;padding:9px 11px;}
.rec-play{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:none;background:var(--brand);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.rec-name{font-size:12.5px;font-weight:600;}
.rec-meta{font-size:10.5px;color:var(--sub);margin-top:2px;}
.rec-rm{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:rgba(23,29,38,.45);color:#fff;
  font-size:11px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
/* 播放条藏起来 —— 外面那圈按钮就是它的控制器，否则会多出一个原生播放器 */
.rec-item audio{display:none;}
/* 提交物里的语音条：给个能直接播的，别只丢一个文件名 */
.sub-audio{display:flex;align-items:center;gap:7px;background:var(--brand-weak);color:var(--brand);
  border-radius:11px;padding:7px 11px;flex:1 1 100%;}
.sub-audio audio{flex:1;min-width:130px;height:32px;}

/* ===== 帖子详情的图片轮播（小红书式：图在最上面，左右滑动切下一张）=====
   多图时右下角给「2/3」、底部给圆点；只有一张图就只留图。
   框高按首图长宽比锁一次（见 pgalFit），所以这里先给个 3:4 的默认值兜底，
   图片没加载完时也不会跳成一条线。 */
.pgal{position:relative;background:#fff;border-radius:14px;overflow:hidden;margin-bottom:11px;
  border:.5px solid rgba(23,32,48,.04);
  box-shadow:0 1px 2px rgba(23,32,48,.03),0 2px 8px rgba(23,32,48,.04);}
.pgal-vp{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;aspect-ratio:3/4;background:#eaf4ee;}
.pgal-vp::-webkit-scrollbar{display:none;}
.pgal-s{flex:0 0 100%;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;}
/* ⚠️ 必须 width/height:100% + object-fit:contain，不能只写 max-width/max-height ——
   后者只缩不放，小图（截图、老手机拍的图）会缩在框中间一小块，四周一圈空。 */
.pgal-s img{width:100%;height:100%;object-fit:contain;display:block;cursor:pointer;}
.pgal-n{position:absolute;right:10px;top:10px;background:rgba(23,29,38,.5);color:#fff;
  font-size:11px;font-weight:600;line-height:1.5;padding:2px 9px;border-radius:11px;}
.pgal-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:5px;pointer-events:none;}
/* 圆点要点在图片上，图片可能是白底的板书截图 —— 光靠白点会消失，
   所以给每个点加一圈深色描边：深底浅底都看得见。 */
.pgal-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.72);
  box-shadow:0 0 0 1px rgba(23,29,38,.22),0 1px 3px rgba(23,29,38,.35);transition:width .18s;}
.pgal-dots i.on{background:#fff;width:16px;border-radius:3px;
  box-shadow:0 0 0 1px rgba(23,29,38,.3),0 1px 4px rgba(23,29,38,.45);}

/* ===== 2026-10-08 · UI 升级（对照参考图重做视觉）===============================
   参考图的设计语言：浅灰底 / 大圆角白卡 / 极弱的分层阴影 / 数字强字重对比 /
   胶囊分段 / 彩色状态格日历 / 浮动圆角底栏。
   整块写成「覆盖层」而不是散着改上面的基础规则：一处插入、一处可回退，
   而且**不动任何类名与文案** —— 回归套件盯的就是类名和文案（.cal / .seg .sg /
   .tabbar .tab 文案 / .ck-today .ct-* / #home-ck-strip .ck-*）。 */

:root{
  --bg:#f2f3f6;
  --r-lg:20px; --r-md:15px; --r-sm:11px;
  --sh-1:0 1px 2px rgba(17,24,39,.04);
  --sh-3:0 10px 28px rgba(17,24,39,.13),0 2px 8px rgba(17,24,39,.05);
  --grad:linear-gradient(140deg,#3fa87f 0%,#2d6a73 100%);
  --hero:linear-gradient(135deg,#e9f8f0 0%,#e2f1fb 100%);
  --ink-2:#4f6156;
}
.phone{background:var(--bg);}

/* ---- 卡片：圆角加大、阴影更柔、去掉那圈几乎看不见的描边 ---- */
.card{border-radius:var(--r-lg);padding:15px;margin-bottom:12px;border:none;
  box-shadow:var(--sh-1),0 4px 14px rgba(17,24,39,.045);}

/* ---- 按钮 ---- */
.btn{border-radius:15px;padding:14px 0;font-size:15.5px;font-weight:700;}

/* ---- 导航栏：去掉分割线，返回键做成圆形浮标（参考图 2 左上角那颗） ---- */
.navbar{background:rgba(244,252,246,.88);border-bottom:none;height:50px;padding:0 10px;}
.navbar .ttl{font-size:16px;font-weight:800;letter-spacing:-.2px;}
.navbar .back{width:32px;height:32px;border-radius:50%;background:#fff;display:flex;
  align-items:center;justify-content:center;font-size:19px;line-height:1;box-shadow:var(--sh-1);}

/* ---- 底部 tab：浮动圆角胶囊条，选中项带浅色药丸底（参考图 1 / 4 的底栏）---- */
.tabbar{left:10px;right:10px;bottom:9px;height:62px;border-top:none;border-radius:24px;
  background:rgba(255,255,255,.95);box-shadow:var(--sh-3);padding:0 5px;}
.tabbar .tab{gap:2px;}
.tabbar .tab .ic{font-size:20px;padding:4px 13px;border-radius:15px;transition:background .18s;}
.tabbar .tab.on .ic{background:var(--brand-weak);}
.tabbar .tab.on .ic svg{transform:none;}
.screen{padding-bottom:94px;}

/* ---- 分段控件：容器更深、选中项更亮（参考图 1/2 的 周/月/年）---- */
.seg{background:#e9ecf2;border-radius:15px;padding:4px;gap:4px;}
.seg .sg{border-radius:12px;padding:10px 6px;font-size:12.5px;color:var(--ink-2);}
.seg .sg.on{background:#fff;color:var(--brand-deep);font-weight:800;
  box-shadow:0 1px 2px rgba(17,24,39,.05),0 4px 12px rgba(17,24,39,.1);}

/* ════════ 首页头部（2026-10-08 二次设计）════════
   原来的问题：① 一整块平铺的绿，没有层次，右上两个图标裸着飘在绿底上；
   ② ::after 那行 "LIFANG EDU" 被上浮的打卡卡切掉半截，看着像一块脏印；
   ③ 孩子切换是两个重量差很大的散胶囊（选中=白底绿字、未选=描边白字），
      像两个不相干的标签，而不是「一组里选一个」。
   改法：背景叠三层（顶部柔光 + 左下压暗 + 斜向渐变）→ 有体积但不花；
   水印换成两团柔光，不再有文字残缺感；右上一对图标做成毛玻璃方片；
   左上角补一枚白底毕业帽品牌块，和「选中态白药丸」组成同一套白色强调；
   孩子切换收进一条玻璃轨，选中项是白色药丸（和参考图的分段控件同一语言）。 */
.p-head{
  /* ⚠️ 别用径向柔光做装饰：同一块绿底上叠两团 radial，渐变的分界会在 8bit 上
     显出**可见的椭圆接缝/色带**（2x 截图里就是几条竖线）。线性渐变永远平滑，
     装饰改用「几何干净的细圆弧」——刻意、清晰，不会糊成一坨。 */
  background:
    linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(158deg,#3fa87f 0%, #2f8b7a 52%, #2d6a73 100%);
  padding:20px 18px 48px;border-radius:0 0 30px 30px;}
/* 右上角一枚细圆弧（被头部圆角裁掉一段，只留弧线）—— 替代原来那行像脏印的文字水印 */
.p-head::after{content:"";right:-38px;top:-46px;bottom:auto;width:150px;height:150px;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.13);background:none;}
.p-head::before{display:none;}
.p-head .row{gap:9px;}
.p-head .hi{font-size:25px;font-weight:800;letter-spacing:-.6px;line-height:1.16;}
.p-head .sub{font-size:11.5px;color:rgba(255,255,255,.8);margin-top:5px;letter-spacing:.3px;}
/* 品牌块：吉祥物图，**透明底、不要白框**（2026-10-09 老师）——
   图自带轮廓，套个白方块反而像贴纸。用 drop-shadow 沿狐狸外形加一点层次，
   不是方形投影（方形投影会把「白框」的观感带回来）。 */
.p-mark{width:38px;height:38px;border-radius:13px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;background:none;box-shadow:none;
  filter:drop-shadow(0 2px 6px rgba(6,40,34,.30));}
/* 右上图标：毛玻璃方片，别裸着飘在绿底上 */
.p-ic{width:38px;height:38px;border-radius:13px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .16s;}
.p-ic:active{background:rgba(255,255,255,.3);}
/* 孩子切换：一条玻璃轨 + 白色药丸选中项 */
.child-sw{display:inline-flex;gap:3px;margin-top:14px;padding:3px;flex-wrap:wrap;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16);border-radius:16px;}
.child-sw .c{background:transparent;border:none;padding:7px 15px;border-radius:12px;
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.92);transition:.18s;}
.child-sw .c:active{background:rgba(255,255,255,.12);}
.child-sw .c.on{background:#fff;color:var(--brand-deep);font-weight:800;
  box-shadow:0 3px 10px rgba(4,48,26,.28);}

/* ---- 老师端头部：和 .p-head 同一套语言 ---- */
.t-head{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 48%),
    linear-gradient(158deg,#2f8b7a 0%, #276970 52%, #1d4a52 100%);
  border-radius:0 0 30px 30px;}
/* 同样去掉文字水印，换一枚细圆弧 */
.t-head::after{content:"";right:-38px;top:-46px;bottom:auto;width:150px;height:150px;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.11);background:none;}
.t-head .t-ic{width:38px;height:38px;border-radius:13px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .16s;}
.t-head .t-ic:active{background:rgba(255,255,255,.28);}
.t-head .ava{box-shadow:0 4px 12px rgba(6,12,24,.32);}

/* ---- 区块标题 ---- */
.home-sec .sec-hd{margin:20px 4px 10px;}
.home-sec .sec-title{font-size:14.5px;letter-spacing:-.1px;}

/* ---- 「今日打卡」折叠卡：抬得更高、圆角更大 ---- */
.ck-strip{border-radius:20px;box-shadow:var(--sh-3);}

/* ---- 作业卡文字层级 ---- */
.hw-card .t1,.todo .t1{font-size:15px;letter-spacing:-.2px;}

/* ---- 老师端「每日任务」的 21 行：和卡片同一套圆角阴影，今天那行描一圈橙 ---- */
.ckday-row{border-radius:15px;border:none;box-shadow:0 1px 2px rgba(17,24,39,.04);}
.ckday-row.today{border:none;background:linear-gradient(120deg,#fff8ee,#fff);
  box-shadow:0 0 0 1.5px rgba(232,142,20,.42),0 2px 8px rgba(17,24,39,.05);}
.ckday-tip,.ck-create-tip{border-radius:16px;}

/* ---- 工作台那三张浮在深色头上的白卡：只提圆角和阴影。
   ⚠️ 千万别在这里写 .stat-row 的 margin-top —— 上面 228 行靠 -24px 把它们抬到
   .t-head 的渐变上，覆盖掉就不是「上浮」了，整排会掉回标题下面。 */
.stat{border-radius:16px;border:none;box-shadow:0 6px 18px rgba(17,24,39,.10);}

/* ===== 新增：数据看板组件（打卡页 / 老师端每日任务共用）=================== */

/* 汇总 hero 卡：浅青绿渐变，和参考图 1 顶部那张同构 */
.hero-card{background:var(--hero);border-radius:var(--r-lg);padding:16px 16px 15px;margin-bottom:12px;}
.hero-card .ht{font-size:15.5px;font-weight:800;letter-spacing:-.2px;color:#0e3d27;}
.hero-card .hs{font-size:11.5px;color:#5f7d6e;margin-top:4px;line-height:1.65;}

/* 指标卡：大数字 + 小单位 + 灰标签，中间一条竖细线（参考图 1 的记录/开心/关照自己）
   ⚠️ 前缀必须是 .kpi 而不是 .stat —— 文件上方 228 行已有一组 .stat-row/.stat（老师工作台
   那排浮在深色头上的白卡，靠 margin-top:-24px 上浮），同名会被这份覆盖层顶掉上浮。 */
.kpi-row{display:flex;align-items:stretch;margin-top:13px;}
.kpi{flex:1;min-width:0;padding-right:9px;}
.kpi + .kpi{border-left:1px solid rgba(17,24,39,.07);padding-left:12px;}
.kpi .sv{font-size:25px;font-weight:800;letter-spacing:-1px;line-height:1.05;color:#0e3d27;}
.kpi .sv i{font-size:11.5px;font-weight:700;font-style:normal;letter-spacing:0;
  color:#5f7d6e;margin-left:2px;}
.kpi .sl{font-size:11px;color:#5f7d6e;margin-top:4px;}
/* 白卡里的指标换回中性色，免得和 hero 卡的深绿撞色 */
.card .kpi .sv{color:var(--ink);}
.card .kpi .sv i,.card .kpi .sl{color:var(--sub);}

/* 趋势折线：零依赖手写 SVG（见 app.js 的 trendSVG），这里只管容器 */
.trend{margin-top:14px;padding-top:13px;border-top:.5px solid var(--line);}
.trend-hd{display:flex;align-items:center;font-size:12.5px;font-weight:700;color:var(--ink);}
.trend-hd .tpill{margin-left:auto;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:9px;
  background:var(--brand-weak);color:var(--brand);}
.trend-hd .tpill.hot{background:var(--orange-weak);color:var(--orange);}
.trend svg{display:block;width:100%;height:66px;margin-top:6px;}
.trend .tx{display:flex;justify-content:space-between;font-size:10px;color:var(--sub);margin-top:3px;}

/* 日历图例 */
.cal-legend{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:12px;
  font-size:10.5px;color:var(--sub);}
.cal-legend span{display:inline-flex;align-items:center;gap:5px;}
.cal-legend i{width:11px;height:11px;border-radius:4px;display:inline-block;background:#eaf5ee;}
.cal-legend i.ok{background:#cdeedb;}
.cal-legend i.miss{background:#f9d8d8;}
.cal-legend i.rest{background:#e8f4ec;}
.cal-legend i.now{background:#fff;box-shadow:0 0 0 2px var(--brand) inset;}

/* ===== 日历：实心圆 → 方角状态格（参考图 2 的习惯日历）===================
   一格同时说三件事：几号（字）、打没打（底色）、是不是今天（描边）。
   底色统一走「浅底深字」，比原来的实心绿轻，一片绿压下来也不再糊成一块。 */
.cal{gap:5px;}
.cal .wd{font-weight:600;}
.cal .d{border-radius:11px;background:#eaf5ee;color:#8fa398;font-weight:600;}
.cal .d.ok{background:#cdeedb;color:#0d6b34;font-weight:800;}
.cal .d.miss{background:#fbe4e4;color:#c93b3b;font-weight:700;}
.cal .d.rest{background:#f4fbf6;color:#c9dbcf;}
.cal .d.out{background:transparent;color:#d8ecde;}
.cal .d.today{outline:2px solid var(--brand);outline-offset:0;}
/* 老师端发布页「自由选日期」被点中的日子：那边没有 ok 态，保持实心绿做选中反馈 */
.cal .d.sel{background:var(--brand);color:#fff;font-weight:800;}

/* ============================================================
   扁平插画风：马卡龙点缀 + 手写 SVG 插画（2026-10-08 第三轮）
   参考图：扁平插画 + 马卡龙色块卡 + 大号数字 + 圆形图标底座。
   原则：主色仍是品牌绿（头部 / 主按钮 / 选中态），马卡龙只做
   「图标底座 / 徽章 / 分区色 / 插画」的点缀 —— 一眼还是粒方。
   ============================================================ */

/* ---- 马卡龙调色板：浅底 + 中调 + 深墨，三档配套用 ---- */
:root{
  --mc-violet:#efe9ff; --mc-violet-2:#cfc2f7; --mc-violet-ink:#6b4fd8;
  --mc-orange:#fff1e2; --mc-orange-2:#ffd9a8; --mc-orange-ink:#b96f12;
  --mc-mint:#e2f6ec;   --mc-mint-2:#a9e2c9;   --mc-mint-ink:#0d7a45;
  --mc-pink:#ffe9f0;   --mc-pink-2:#ffc4d9;   --mc-pink-ink:#c2426e;
  --mc-sky:#e6f1ff;    --mc-sky-2:#b6d8ff;    --mc-sky-ink:#2f6bd4;
  --mc-lemon:#fff6d6;  --mc-lemon-2:#ffe79b;  --mc-lemon-ink:#96720f;
}

/* ---- 插画容器：绝对定位做装饰，永不拦截点击 ---- */
.art{position:absolute;pointer-events:none;line-height:0;z-index:0;}
.art svg{display:block;width:100%;height:100%;}

/* ---- 空状态：从「灰色小图标」升级成「马卡龙圆角底座」。
   这是全站空状态的唯一入口（.empty > .e-ic），改这一处所有页面一起生效。 ---- */
.empty .e-ic{display:flex;align-items:center;justify-content:center;
  width:72px;height:72px;margin:0 auto 12px;border-radius:24px;
  background:var(--mc-mint);color:var(--mc-mint-ink);
  box-shadow:0 8px 18px rgba(13,122,69,.12);}
/* 每块地界一个色：翻到哪一页，一眼就知道自己在哪 */
#p-home .empty .e-ic{background:var(--mc-mint);color:var(--mc-mint-ink);box-shadow:0 8px 18px rgba(13,122,69,.12);}
#p-hw-history .empty .e-ic{background:var(--mc-mint);color:var(--mc-mint-ink);box-shadow:0 8px 18px rgba(13,122,69,.12);}
#p-wrongbook .empty .e-ic,#p-wb-scan .empty .e-ic{background:var(--mc-violet);color:var(--mc-violet-ink);box-shadow:0 8px 18px rgba(107,79,216,.13);}
#p-qa .empty .e-ic,#p-qa-detail .empty .e-ic{background:var(--mc-sky);color:var(--mc-sky-ink);box-shadow:0 8px 18px rgba(47,107,212,.13);}
#p-community .empty .e-ic,#p-community-detail .empty .e-ic{background:var(--mc-pink);color:var(--mc-pink-ink);box-shadow:0 8px 18px rgba(194,66,110,.13);}
#p-checkin .empty .e-ic,#t-checkin-tasks .empty .e-ic{background:var(--mc-orange);color:var(--mc-orange-ink);box-shadow:0 8px 18px rgba(185,111,18,.13);}
#n-list .empty .e-ic{background:var(--mc-lemon);color:var(--mc-lemon-ink);box-shadow:0 8px 18px rgba(150,114,15,.13);}
#t-bank .empty .e-ic,#t-bank-import .empty .e-ic{background:var(--mc-violet);color:var(--mc-violet-ink);box-shadow:0 8px 18px rgba(107,79,216,.13);}
#t-routine .empty .e-ic,#t-checkin-days .empty .e-ic{background:var(--mc-sky);color:var(--mc-sky-ink);box-shadow:0 8px 18px rgba(47,107,212,.13);}

/* ---- 徽章：拿到的按序轮转马卡龙色（比一片绿更容易一眼数出拿了几个）---- */
.badge .b-ic{width:46px;height:46px;border-radius:16px;background:var(--mc-mint);color:var(--mc-mint-ink);}
.badges .badge:nth-child(5n+1) .b-ic{background:var(--mc-lemon);color:var(--mc-lemon-ink);}
.badges .badge:nth-child(5n+2) .b-ic{background:var(--mc-mint);color:var(--mc-mint-ink);}
.badges .badge:nth-child(5n+3) .b-ic{background:var(--mc-sky);color:var(--mc-sky-ink);}
.badges .badge:nth-child(5n+4) .b-ic{background:var(--mc-violet);color:var(--mc-violet-ink);}
.badges .badge:nth-child(5n+5) .b-ic{background:var(--mc-pink);color:var(--mc-pink-ink);}
/* 没拿到的压成灰：权限要比上面那组 nth-child 高，否则会被染色 */
.badges .badge.lock .b-ic{background:#eef1f5;color:#9db0a4;filter:grayscale(1);opacity:.62;}

/* ---- 首页头部：右下角一组扁平插画，贴着圆角出血 ---- */
.p-head .p-art{right:14px;bottom:34px;width:104px;height:68px;opacity:.98;}
.p-head .row,.p-head .child-sw{position:relative;z-index:1;}

/* ---- 打卡页汇总卡：右侧插画角标（参考图 3「A series of Olympiads」那张）---- */
.hero-card{position:relative;overflow:hidden;}
.hero-card .hero-art{right:6px;top:2px;width:92px;height:62px;}
.hero-card .ht,.hero-card .hs,.hero-card .kpi-row{position:relative;z-index:1;}
.hero-card .ht{padding-right:86px;}

/* ---- 社区「公开活动」卡封面：从「饱和橙底 + 白旗」换成「浅马卡龙橙 + 扁平插画」 ---- */
.tile-cov.act{background:linear-gradient(140deg,#fff3e2 0%,#ffdfb6 100%);}
.tile-cov.act .tc-wm{color:#d98a24;}

/* ---- 错题本四格统计：白底换马卡龙色块（参考图的 5 Certificates / 12 Courses）。
   ⚠️ 必须带 #p-wrongbook 前缀 —— .stat 与老师工作台那排浮卡同名（见上方 228/229 行）。 ---- */
#p-wrongbook .stat{border:none;border-radius:15px;box-shadow:0 4px 12px rgba(17,24,39,.06);}
#p-wrongbook .stat:nth-child(4n+1){background:var(--mc-lemon);}
#p-wrongbook .stat:nth-child(4n+2){background:var(--mc-mint);}
#p-wrongbook .stat:nth-child(4n+3){background:var(--mc-sky);}
#p-wrongbook .stat:nth-child(4n+4){background:var(--mc-violet);}
#p-wrongbook .stat .n{color:#17392c;}
#p-wrongbook .stat .n.warn{color:#c93b3b;}

/* ---- 首页头部：吸顶 + 上滑收缩（iOS「大标题折叠」那种手感）----
   静止：大标题 25px + 品牌块 + 插画 + 孩子胶囊独立一行；
   滑过 40px（.mini）：收成一条 70px 的紧凑栏 —— 标题 17px、孩子胶囊并到标题行右侧、插画淡出。
   ⚠️ 静止态的 .hi 字号 / .p-mark 尺寸 / .child-sw 底色都有断言盯着（jx-ui-skin.js A 段，
      它在 scrollTop=0 时量），所以这些值只允许写在 .mini 里，基础态一个都不能动。
   ⚠️ .child-sw 从「流式第二行」改成 absolute 是必须的：只有脱离文档流，
      头部高度才能靠 padding 收缩，left/top 也才是可过渡属性（用 margin 过渡会抖）。 ---- */
/* --p 由 JS 按滚动量连续写入（0→1）。高度用它插值，同时用 margin-bottom 把差值补回去，
   于是「文档总高恒定、下方内容位置恒定」—— scrollTop 不会反弹、内容不会跳。
   原来写法是过阈值翻 .mini 类 + padding 过渡，在首页这种「内容短、可滚动量只有几十 px」
   的页面上会无限翻转（收起→总高变少→scrollTop 被 clamp→又低于阈值→展开→…），就是闪动。 */
/* --ckh 承载「打卡卡展开后多出来的那段高度」，注册成 <length> 才能被 transition 插值。
   滚动驱动的 --h 必须逐帧跟随、绝不能过渡（一过渡就拖、就抖），所以只有 --ckh 上过渡。 */
@property --ckh{syntax:'<length>';inherits:false;initial-value:0px;}
#p-home .p-head{--p:0;--ckh:0px;--h:calc(202px - 140px * var(--p));
  position:sticky;top:0;z-index:15;overflow:hidden;
  height:calc(var(--h) + var(--ckh));margin-bottom:calc(202px - var(--h));
  transition:--ckh .22s ease;
  padding-top:calc(20px - 10px * var(--p));padding-bottom:20px;}
#p-home .p-head .child-sw{position:absolute;left:calc(18px + 172px * var(--p));
  top:calc(78px - 68px * var(--p));margin-top:0;
  transform:scale(calc(1 - .2 * var(--p)));transform-origin:left center;}
#p-home .p-head .grow{display:flex;align-items:center;gap:8px;}
#p-home .p-head .hi{font-size:calc(25px - 8px * var(--p));letter-spacing:calc(-.6px + .4px * var(--p));}
#p-home .p-head .p-mark{width:calc(38px - 7px * var(--p));height:calc(38px - 7px * var(--p));
  border-radius:calc(13px - 2px * var(--p));}
#p-home .p-head .p-art{opacity:calc(1 - 1.5 * var(--p));}
#p-home .p-head .ck-float{opacity:calc(1 - 1.7 * var(--p));}
#p-home .p-head.mini{box-shadow:0 8px 20px rgba(10,52,30,.20);}
/* 收缩后：姓名才亮出来、年级收起、其余孩子隐掉（突变发生在 --p>0.9 之后，看不出来） */
#p-home .p-head.mini .child-sw .c:not(.on){display:none;}
#p-home .p-head.mini .c-grade{display:none;}
#p-home .p-head.mini .mini-ck{pointer-events:auto;}

/* 标题旁那枚紧凑打卡图标：默认透明，随 --p 浮出来 */
#p-home .p-head .mini-ck{width:30px;height:30px;border-radius:11px;flex:0 0 auto;margin-right:auto;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.94);color:var(--brand-deep);
  opacity:calc(var(--p) * 1.6 - .6);pointer-events:none;}
/* 孩子胶囊里的年级：小一号、淡一点 */
#p-home .p-head .c-grade{font-style:normal;font-size:10.5px;font-weight:500;
  opacity:.72;margin-left:4px;}

/* 打卡卡在头部里靠外层 overflow 裁切，不再走 max-height 过渡（每帧跟随滚动，过渡只会拖） */
#p-home .p-head .ck-float{margin:68px -4px 0;position:relative;z-index:1;}
/* 打卡展开态：高度增量全部走 --ckh（JS 按 .cks-body 实高写入，见 syncCkHeight），
   这里不再动 height/margin-bottom —— 用 height:auto 是没法过渡的，那正是上一版的抖动来源。
   .ck-open 由模板与 toggleCkStrip 挂着，留给后续样式区分状态用。 */
#p-home .p-head.ck-open{--ck-open:1;}

/* ============================================================
   色系对齐（2026-10-09 深夜）：换成参考图「薄荷清风」那一套三色 ——
     薄荷绿 #D8F3DC（页面底）/ 青绿 #52B788（主色）/ 湖水蓝 #2D6A73（深色）。
   逐档落位：
     · 页面底 / 真机底 / 分隔线 / 阴影 / 展示底  → 薄荷绿系
     · 品牌主色（按钮 / 链接 / 徽章 / 选中态）    → 青绿
     · 深色（头部渐变收尾 / 选中药丸文字 / 主按钮按下）→ 湖水蓝
   ⚠️ 主色与深色都比参考图**压深一档**（#3FA87F / #2D6A73）：
      白字直接落在 #52B788 上对比度只有 2.6:1，标题和按钮会读不清。
   ⚠️ 这里是最晚定义的 :root，晚定义者胜 —— 改这一处就等于改全站。
      现有设计断言只测「透明度 / 几何」，不钉色相，所以换色不撞基线。
   ============================================================ */
:root{
  --brand:#3fa87f;                                                /* 青绿（#52B788 压深一档，白字可读） */
  --brand-deep:#2d6a73;                                           /* 湖水蓝 */
  --brand-weak:#e4f6ec;
  --green:#3fa87f; --green-weak:#e4f6ec;
  --bg:#d8f3dc;                                                   /* 页面底：薄荷绿 */
  --wx-bg:#e0f6e5;                                                /* 真机全屏底 */
  --line:#cbe7d4;                                                 /* 分隔线：薄荷调 */
  --hero:linear-gradient(135deg,#e8f9ec 0%,#dcf2ee 100%);          /* 打卡汇总卡：薄荷→浅青 */
  --sh-1:0 1px 2px rgba(16,52,44,.05);
  --sh-3:0 10px 28px rgba(16,52,44,.13),0 2px 8px rgba(16,52,44,.06);
}
/* 电脑端展示底（手机壳外面那层）也跟着换，否则壳里壳外两个色调 */
body{background:linear-gradient(160deg,#cdeccf 0%,#d8f3dc 55%,#cae9e4 100%);}
/* 分段控件、文章封面这类「灰蓝底」在薄荷调里会脏，跟着转薄荷绿 */
.seg{background:#cfe9d6;}
.tile-cov{background:#dcefe2;}

/* ---- 「今日打卡」折叠卡搬进绿色头部（2026-10-09 老师要求）----
   原来它是「上浮层」：.ck-float 靠 margin-top:-32px 压在头部下沿，卡片下半截露在白底上，
   看着像「绿头 + 白卡」两段式。现在它是 .p-head 的流式子块（模板里已移到 .child-sw 之后），
   整块卡片被绿色包住 —— 头部成了一个完整的 hero 区。
   margin-top:68px 是顶出来的：.child-sw 是 absolute 不占流，得靠这个把卡片推到它下面
   （20 + 50 + 68 = 138，和搬动前的 y139 几乎一致，视觉位置没跳）。
   头部收缩时（.mini）用 max-height 把它折起来，否则吸顶的头部会一直占着 200px。 */

/* 卡片搬进头部后的两处校正（2026-10-09）：
   ① 插画不能再按 bottom 定位 —— 头部现在连卡片一起算高度，bottom:34px 会把插画
      顶到卡片上被压住；改成从头部顶边往下量，位置和「卡片还没搬进来」时一致。
   ② .mini 里必须把 min-height 一起归零 —— 上面 382 行给了 .ck-float min-height:56px，
      只写 max-height:0 是折不干净的，头部会留一条 44px 的空档。 */
#p-home .p-head .p-art{top:56px;bottom:auto;}

/* ---- 首页广告位（banner）：A 位 · 绿头正下方 --------------------------
   老师 2026-10-09：「加一个 banner 广告位……左右自动轮播」。
   位置 = .p-head 之后、.todo-wrap 之前；左右各 14px 与下面的内容区对齐。
   空的时候 .banner 不渲染任何子节点，:empty 把外边距一起收掉，不留空档。 */
.banner{margin:12px 14px 0;}
.banner:empty{display:none;margin:0;}
.bn-card{position:relative;border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:var(--sh-3);}
.bn-track{display:flex;transition:transform .38s cubic-bezier(.22,.61,.36,1);will-change:transform;}
.bn-slide{flex:0 0 100%;position:relative;height:104px;display:flex;align-items:center;
  padding:16px 74px 16px 18px;box-sizing:border-box;cursor:pointer;overflow:hidden;}
.bn-txt{position:relative;z-index:1;min-width:0;}
.bn-t{font-size:15px;font-weight:800;color:#fff;letter-spacing:.2px;line-height:1.3;}
.bn-s{font-size:11.5px;color:rgba(255,255,255,.86);margin-top:3px;line-height:1.4;}
.bn-tag{position:absolute;top:11px;right:12px;z-index:2;font-size:10.5px;font-style:normal;
  color:#fff;background:rgba(255,255,255,.24);padding:2px 8px;border-radius:9px;}
.bn-ic{position:absolute;right:16px;bottom:6px;z-index:0;color:rgba(255,255,255,.26);}
.bn-dots{position:absolute;left:18px;bottom:11px;z-index:2;display:flex;gap:5px;}
.bn-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.42);
  transition:width .2s,background .2s;cursor:pointer;}
.bn-dots i.on{width:14px;border-radius:3px;background:#fff;}

/* ---- 品牌 logo：换成小括狐吉祥物（2026-10-09 老师要求）----
   原来 .p-mark / .login-hero .lg 里是 SVG 字形图标（i-logo 的毕业帽）。
   现在换成 public/img/logo.png。白底圆角块保留 —— 它是绿头上唯一的实心白，
   和「选中孩子」的白药丸是同一套强调。图按 contain 缩放：狐狸比正方形宽，不能拉变形。 */
.p-mark img{width:100%;height:100%;object-fit:contain;display:block;border-radius:inherit;}
/* 白框去掉后 logo 会和顶上那行 "LIFANG EDU" 背景字叠在一起（原来那行被白框压住了，
   看不出问题）。hero 的上内边距 + logo 的上外边距各加一点，让它落在背景字下面。 */
.login-hero{padding:52px 0 10px;}
.login-hero .lg{width:72px;height:72px;margin:16px auto 0;background:none;box-shadow:none;}
.login-hero .lg img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 6px 14px rgba(6,40,34,.20));}

/* ===== 真机（手机竖屏）下去掉模拟手机壳，全屏显示 ===== */
@media (max-width:500px){
  body{display:block;padding:0;background:var(--wx-bg);}
  .phone{width:100%;height:100vh;height:100dvh;border-radius:0;box-shadow:none;}
  .statusbar{display:none;} /* 真机有自己的系统状态栏 */
}