/* 初中学习伴读 · 样式
   目标设备：华为 M6（10.8" / 约 1280×800 CSS px）与手机通用
*/

:root{
  /* 浅蓝水晶：底是极浅蓝，卡片半透明白带高光，主色是透亮的水晶蓝 */
  --btn-off-bg:#eef4fd;
  --btn-off-ink:#a9bcd8;
  --bg:#f8fbff;
  --paper:#ffffff;
  --glass:rgba(255,255,255,.96);
  --glass-2:rgba(255,255,255,.80);
  --glass-card:rgba(255,255,255,.88);
  --glass-tab:rgba(255,255,255,.64);
  --glass-on:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(234,243,255,.96) 100%);
  --surface-2:rgba(255,255,255,.92);
  --surface-solid:#ffffff;
  --card-line:rgba(255,255,255,.92);
  --bar:rgba(255,255,255,.88);
  --tab-bg:rgba(255,255,255,.84);
  --ghost-bg:linear-gradient(180deg,#ffffff 0%,#f2f8ff 100%);
  --tab-on:linear-gradient(180deg,#ffffff 0%,#eaf3ff 100%);
  --field:#f6faff;
  --track:#e6eefb;
  --mask:rgba(56,84,135,.32);
  --toast-bg:rgba(35,49,74,.95);
  --ring-bg:radial-gradient(circle at 34% 26%, #ffffff 0%, #f2f8ff 58%, #e3eeff 100%);
  --ring-line:rgba(122,172,250,.55);
  --lilac-ink:#5d5698;
  --on-accent:#ffffff;
  --ck-grad:linear-gradient(160deg,#93CDFF 0%,#63A9FB 50%,#4A93F3 100%);
  /* 问问题的橙色系：白天暖，夜里要能压下去，不能成为一块白板 */
  --ask-bg:linear-gradient(180deg,#fffaf3 0%,#fff3e4 100%);
  --ask-line:rgba(240,180,110,.5);
  --ask-ink:#8a5320;
  --ask-ink2:#b07c45;
  --ask-bub:linear-gradient(180deg,#fff9f2 0%,#fff3e6 100%);
  --ask-bub-line:rgba(240,180,110,.45);
  --ask-bub-ink:#3a2a18;
  --ask-shot:linear-gradient(180deg,#fffaf4 0%,#fff2e2 100%);
  --ask-shot-line:rgba(240,160,90,.72);
  --ask-shot-ink:#a26b31;
  /* 柔光：左上淡蓝、右上淡紫、底部冰蓝 */
  --glow:
    radial-gradient(720px 460px at 6% -8%, rgba(198,230,255,.75) 0%, rgba(198,230,255,0) 60%),
    radial-gradient(660px 400px at 98% 0%, rgba(238,226,255,.6) 0%, rgba(238,226,255,0) 58%),
    radial-gradient(700px 500px at 50% 108%, rgba(212,244,255,.66) 0%, rgba(212,244,255,0) 64%),
    linear-gradient(170deg,#fdfeff 0%,#f6faff 46%,#fbfdff 100%);
  /* 正文三档：全部按 AA 对比度校准，最小的辅助字不低于 4.4:1 */
  --ink:#1f2c44;
  --ink2:#4e6488;
  --ink3:#6b80a1;
  --line:rgba(150,186,236,.34);
  --accent:#4e93f7;
  --accent-deep:#3a76e0;
  --accent-soft:#eaf3ff;
  --accent-glow:rgba(78,147,247,.28);
  --lilac:#a99bf0;
  --lilac-soft:#f1edff;
  --pink:#ffaed0;
  --pink-soft:#fff0f7;
  --warn:#e07a9a;
  --warn-soft:#fff0f5;
  --ok:#3fb3a6;
  --ok-soft:#e4f8f6;
  --half:#d9903f;
  --half-soft:#fff3e4;
  --radius:20px;
  --shadow:0 10px 26px -20px rgba(84,132,214,.30), 0 2px 8px rgba(84,132,214,.045), inset 0 1px 0 #fff;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  background-color:var(--bg);
  background-image:var(--glow);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--ink);
  font-family:system-ui,-apple-system,"PingFang SC","HarmonyOS Sans SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.72;
  letter-spacing:.008em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:80px;
}
button{font-family:inherit;font-size:inherit;color:inherit;border:none;background:none;padding:0;cursor:pointer;}
input,textarea,select{font-family:inherit;font-size:16px;color:inherit;}
em{font-style:normal;}

.app{max-width:860px;margin:0 auto;padding:0 18px;}
/* 底部导航是 fixed 的，内容要自己让出这段高度，否则最后一张卡被压在导航下面 */
main{padding-bottom:calc(84px + env(safe-area-inset-bottom));}

/* 顶栏 */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 2px 12px;
}
.date-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
/* 日期：粉粉的贴纸字，底下压一条手绘波浪线 */
.date{
  position:relative;
  font-size:25px;font-weight:800;letter-spacing:-.01em;line-height:1.2;
  color:#f7749f;
  padding-bottom:5px;
  text-shadow:0 1px 0 #fff,0 2px 0 rgba(255,216,232,.85),0 6px 12px rgba(247,116,159,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='5' viewBox='0 0 26 5'%3E%3Cpath d='M1 3.4Q3.6 .5 6.4 3.4T11.8 3.4T17.2 3.4T22.6 3.4' fill='none' stroke='%23FF9EC4' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:left bottom;background-size:26px 5px;
}
/* 数字放大、月日缩小，像贴纸上的排版 */
.date .n{font-style:normal;font-size:1.14em;letter-spacing:-.02em;}
.date .u{font-style:normal;font-size:.6em;font-weight:700;opacity:.86;margin:0 1px;}
/* 星期：一小片贴歪了的粉色标签 */
.wd{
  display:inline-flex;align-items:center;gap:3px;
  height:23px;padding:0 9px 0 8px;border-radius:12px;
  background:linear-gradient(135deg,#FFEAF3 0%,#F3E9FF 100%);
  color:#c2558c;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 3px 9px -5px rgba(196,84,140,.6),inset 0 1px 0 #fff;
  transform:rotate(-1.6deg);
  white-space:nowrap;
}
.wd::before{content:'✦';font-size:9px;color:#FFA8C8;line-height:1;transform:translateY(-.5px);}
.week{font-size:13px;color:var(--ink2);margin-top:3px;}
.ring{
  width:64px;height:64px;border-radius:50%;
  background:var(--ring-bg);
  border:2px solid var(--ring-line);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;
  box-shadow:0 10px 22px -12px rgba(78,147,247,.95), inset 0 1px 2px #fff;
}
.ring-num{font-size:23px;font-weight:600;color:var(--accent-deep);line-height:1;}
.ring-unit{font-size:11px;color:var(--ink3);margin:2px 0 0;line-height:1;}

/* 视图 */
.view{display:none;}
.view.active{display:block;}

/* 卡片：半透明白玻璃 + 一圈白色高光边 */
.card{
  position:relative;
  background:var(--glass);
  border:1px solid var(--card-line);
  border-radius:var(--radius);
  padding:18px 18px 16px;
  margin-bottom:14px;
  box-shadow:var(--shadow);
}
.card.quiet{opacity:.62;box-shadow:none;}
.card-h{
  display:flex;align-items:center;
  font-size:15.5px;font-weight:600;
  margin-bottom:14px;
}
.card-h em{
  margin-left:auto;font-size:13px;font-weight:400;color:var(--ink2);
  white-space:nowrap;flex:none;
}
.step{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:9px;
  background:linear-gradient(160deg,#7db5ff 0%,#4e93f7 70%);
  color:var(--on-accent);
  font-size:13px;font-weight:600;margin-right:9px;
  box-shadow:0 5px 12px -6px rgba(78,147,247,.9), inset 0 1px 0 rgba(255,255,255,.5);
}
.step.alt{
  background:var(--accent-soft);color:var(--accent-deep);font-size:12px;box-shadow:none;
}

.foot-note{font-size:12.5px;color:var(--ink3);margin:10px 0 0;line-height:1.55;}

/* 科目切换条：五门课分开看，谁有到期谁头上带数字 */
.subbar{
  display:flex;overflow-x:auto;
  margin:0 -2px 12px;padding:2px;
  -webkit-overflow-scrolling:touch;
}
.subbar::-webkit-scrollbar{display:none;}
.sub-tab{
  flex:none;display:flex;align-items:center;
  height:40px;padding:0 15px;margin-right:8px;
  border-radius:999px;
  background:var(--glass-2);
  border:1px solid var(--card-line);
  font-size:15px;color:var(--ink2);
  box-shadow:0 5px 14px -9px rgba(84,132,214,.7);
}
.sub-tab.on{
  background:var(--tab-on);
  color:var(--accent-deep);font-weight:600;
  border-color:rgba(122,172,250,.85);
  box-shadow:0 9px 18px -11px rgba(78,147,247,.95), 0 0 0 1.5px rgba(122,172,250,.4) inset;
}
.sub-dot{width:8px;height:8px;border-radius:50%;margin-right:7px;flex:none;}
.sub-badge{
  margin-left:7px;min-width:18px;height:18px;line-height:18px;
  padding:0 5px;border-radius:9px;
  background:var(--pink);color:#fff;font-size:11px;font-weight:600;text-align:center;
}
.sub-tab.on .sub-badge{background:var(--accent);}

/* 天气：一条读完，不占地方，也不放图表 */
.wx{
  display:flex;align-items:center;
  margin:0 2px 12px;padding:11px 15px;
  border-radius:16px;text-align:left;
  background:var(--glass-card);
  border:1px solid var(--card-line);
  box-shadow:0 8px 18px -16px rgba(84,132,214,.85);
}
.wx[hidden]{display:none;}
.wx-ico{font-size:25px;line-height:1;margin-right:12px;flex:none;}
.wx-main{min-width:0;}
.wx-l1{display:flex;align-items:baseline;}
.wx-l1 b{font-size:16px;font-weight:600;color:var(--ink);}
.wx-t{margin-left:8px;font-size:16px;font-weight:600;color:var(--accent-deep);}
.wx-tip{margin-top:3px;font-size:13px;color:var(--ink2);line-height:1.5;}

/* 还没开的课：位置先占着，灰着，点不动 */
.sub-tab.soon{opacity:.52;}
.sub-soon{margin-left:6px;font-size:10.5px;color:var(--ink3);}

/* 打卡卡：今天全会就按这一下，别的都不用做 */
.checkin{padding:16px 16px 14px;text-align:center;overflow:hidden;}
.checkin-btn{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:88px;border-radius:20px;
  background:var(--ck-grad);
  color:#fff;font-size:23px;font-weight:600;letter-spacing:.03em;
  box-shadow:0 14px 26px -18px rgba(63,131,236,.9), inset 0 1px 0 rgba(255,255,255,.6);
}
.checkin-btn::after{
  content:'';position:absolute;left:-25%;top:-130%;
  width:150%;height:240%;
  background:linear-gradient(104deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 44%);
  pointer-events:none;
}
.checkin-btn:active{transform:scale(.99);}
.ck-ball{
  width:46px;height:46px;flex:none;margin-right:13px;display:block;
  position:relative;z-index:1;
  filter:drop-shadow(0 0 1.2px rgba(255,255,255,.7)) drop-shadow(0 6px 12px rgba(24,48,88,.34));
}
.ck-txt{position:relative;z-index:1;}
.checkin-hint{margin:10px 2px 0;font-size:14px;color:var(--ink2);line-height:1.6;}
.checkin.done .checkin-btn{
  background:linear-gradient(160deg,#f6fbff 0%,#e2f0ff 100%);
  color:var(--accent-deep);
  box-shadow:0 10px 24px -18px rgba(78,147,247,.95), inset 0 0 0 2px rgba(140,190,255,.75);
}
.checkin.done .ck-ball{animation:ballpop .5s ease;}
@keyframes ballpop{
  0%{transform:scale(.55) rotate(-20deg);}
  60%{transform:scale(1.14) rotate(8deg);}
  100%{transform:scale(1) rotate(0deg);}
}

/* 有题不会：嵌在打卡卡里的第二入口。比主按钮低一档，但比别的都靠前 */
.ask-bar{
  display:flex;align-items:center;width:100%;
  margin-top:18px;padding:11px 14px;
  background:var(--ask-bg);
  border:1px solid var(--ask-line);
  border-radius:16px;
  box-shadow:0 8px 18px -16px rgba(214,138,60,.9), inset 0 1px 0 rgba(255,255,255,.55);
  text-align:left;
}
.ask-bar:active{transform:scale(.994);}
.ask-bar[hidden]{display:none;}
.ask-ico{
  flex:none;width:34px;height:34px;border-radius:11px;margin-right:11px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#FFC062 0%,#F08F4A 100%);
  color:#fff;
  box-shadow:0 7px 14px -8px rgba(240,143,74,.95), inset 0 1px 0 rgba(255,255,255,.55);
}
.ask-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.ask-bar-t{font-size:16px;font-weight:600;color:var(--ask-ink);line-height:1.2;}
.ask-bar-t em{display:block;font-style:normal;font-size:12.5px;font-weight:400;color:var(--ask-ink2);margin-top:2px;}
.ask-n{
  margin-left:8px;min-width:19px;height:19px;line-height:19px;padding:0 5px;
  border-radius:10px;background:#F08F4A;color:#fff;font-size:11.5px;font-weight:600;text-align:center;
}
.ask-arrow{margin-left:auto;font-size:21px;color:var(--ask-ink2);line-height:1;padding-left:6px;}

/* 不是题目、想问问方法：一排小按钮，点一下就等于提问 */
.ask-mlab{margin:18px 0 8px;font-size:12.5px;color:var(--ink3);}
.ask-mrow{display:flex;flex-wrap:wrap;}
.ask-mchip{
  border:1px solid var(--line);background:var(--field);
  color:var(--ink2);font-family:inherit;font-size:13.5px;line-height:1;
  padding:9px 13px;border-radius:999px;margin:0 8px 8px 0;
  -webkit-tap-highlight-color:transparent;
}
.ask-mchip:active{background:var(--accent-soft);}

/* 问答面板 · 屏 A */
.ask-shot{
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  height:168px;border-radius:16px;cursor:pointer;overflow:hidden;
  border:1.6px dashed var(--ask-shot-line);
  background:var(--ask-shot);
  color:var(--ask-shot-ink);
}
.ask-shot:active{background:#ffeeda;}
.ask-shot img{width:100%;height:100%;object-fit:contain;background:#fff;}
.ask-shot b{display:block;font-size:16.5px;font-weight:600;margin-top:9px;color:var(--ask-ink);}
.ask-shot i{display:block;font-style:normal;font-size:12.5px;color:var(--ask-ink2);margin-top:4px;}
.ask-shot svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9;}
.ask-or{
  text-align:center;font-size:12.5px;color:var(--ink3);margin:14px 0 12px;
}
.ask-guess{
  display:flex;align-items:center;gap:8px;
  font-size:14px;color:var(--ink2);margin:16px 0 10px;
}
.ask-guess b{color:var(--accent-deep);font-weight:600;}
.ask-guess b.wait{color:var(--ink3);font-weight:400;}
.ask-guess button{
  margin-left:auto;flex:none;
  font-size:13px;color:var(--accent-deep);background:var(--accent-soft);
  padding:5px 11px;border-radius:12px;
}
.ask-ways{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.ask-way{
  text-align:left;padding:13px 14px;border-radius:14px;
  background:var(--field);border:1px solid var(--line);
}
.ask-way b{display:block;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.3;}
.ask-way i{display:block;font-style:normal;font-size:12px;color:var(--ink3);margin-top:3px;line-height:1.35;}
.ask-way:active{background:var(--accent-soft);border-color:rgba(122,172,250,.8);}

/* 换科目 / 换题型 */
.ask-pick{margin-top:6px;padding:12px;border-radius:14px;background:var(--field);border:1px solid var(--line);}
.ask-pick .s-label{margin:0 0 8px;}
.ask-pick .pills{margin:-3px;}
.ask-pick .pill{padding:7px 12px;font-size:13.5px;margin:3px;}

/* 屏 B / 屏 C */
.ask-thumb{
  width:100%;max-height:26vh;object-fit:contain;border-radius:14px;
  border:1px solid var(--card-line);margin-bottom:14px;background:#fff;
}
.ask-bubble{
  border-radius:16px;padding:16px 17px;margin-bottom:16px;
  background:var(--ask-bub);
  border:1px solid var(--ask-bub-line);
  position:relative;
}
.ask-bubble b{display:block;font-size:12.5px;font-weight:400;color:var(--ask-ink2);margin-bottom:7px;padding-right:92px;}

/* 朗读按钮：拇指一按就能听，不占地方 */
.tts-btn{
  position:absolute;top:11px;right:12px;
  border:1px solid var(--ask-bub-line);
  background:var(--field);
  color:var(--ask-ink2);
  font-family:inherit;font-size:12px;line-height:1;
  padding:7px 11px;border-radius:999px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.tts-btn.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.s-label-row{display:flex;align-items:center;justify-content:space-between;}
.s-label-row .tts-btn{position:static;flex:0 0 auto;margin-left:10px;}

/* 只给家长看的小标，孩子不用管 */
.for-parent{
  margin-left:8px;font-size:11px;font-weight:400;
  color:var(--ink3);background:var(--field);
  padding:2px 7px;border-radius:999px;
  border:1px solid var(--line);vertical-align:middle;
}

/* 等模型读照片：转个圈，让她知道在干活，不是卡住了 */
.ask-wait{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:52px 0 44px;}
.ask-spin{
  width:34px;height:34px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--accent);
  animation:askspin .8s linear infinite;
}
@keyframes askspin{to{transform:rotate(360deg);}}
.ask-wait b{font-size:17px;font-weight:600;color:var(--ink);margin-top:16px;}
.ask-wait i{font-style:normal;font-size:13px;color:var(--ink3);margin-top:6px;}

/* 拍糊了就直说哪里看不清，别硬编一道题 */
.ask-doubt{
  border-radius:13px;padding:11px 14px;margin-bottom:12px;
  font-size:14px;line-height:1.65;
  background:var(--warn-soft);color:var(--warn);
}
.ask-doubt b{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px;}
.ask-bubble p{margin:0;font-size:17px;line-height:1.8;color:var(--ask-bub-ink);}
.ask-steps{margin:0;padding:0;list-style:none;}
.ask-steps li{
  position:relative;padding:9px 0 9px 4px;font-size:15.5px;line-height:1.65;
  color:var(--ink);border-bottom:1px solid var(--line);
}
.ask-steps li:last-child{border-bottom:0;}
.ask-pit,.ask-one{
  margin-top:11px;border-radius:13px;padding:11px 14px;font-size:14.5px;line-height:1.65;
}
.ask-pit{background:var(--warn-soft);color:#8d4a63;}
.ask-pit b{display:block;font-size:12.5px;font-weight:400;opacity:.8;margin-bottom:3px;}
.ask-one{background:var(--ok-soft);color:#1f6b62;font-weight:600;}
.ask-one b{display:block;font-size:12.5px;font-weight:400;opacity:.8;margin-bottom:3px;}
.ask-acts{
  display:flex;margin-top:16px;
  position:sticky;bottom:0;
  background:var(--surface-solid);
  padding:12px 0 calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 20px -18px rgba(43,58,85,.45);
}
.ask-acts .big-btn{flex:1;margin-top:0;}
.ask-acts .big-btn + .big-btn{margin-left:9px;}
.ask-done{text-align:center;padding:8px 0 4px;}
.ask-done .ask-done-ico{
  width:56px;height:56px;border-radius:50%;margin:6px auto 16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ok-soft);color:var(--ok);
}
.ask-done .ask-done-ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.ask-done h3{margin:0 0 8px;font-size:18px;font-weight:600;color:var(--ink);}
.ask-done p{margin:0;font-size:14.5px;line-height:1.7;color:var(--ink2);}

/* 可选卡（没到期时淡一点，不催） */.card.off{box-shadow:none;}
/* 这科没到期：按钮退成一行动作提示，不要留一块灰砖 */
.card.off .big-btn.ghost:disabled{
  background:transparent;
  box-shadow:none;
  border:1px dashed var(--line);
  color:var(--ink3);
  font-weight:500;
  font-size:14.5px;
}

/* 空状态：一朵小云陪着，不用干巴巴 */
.empty-art{display:block;width:168px;height:168px;margin:0 auto 16px;flex:none;}

/* 大按钮：水晶糖果按钮 */
.big-btn{
  display:block;width:100%;
  height:52px;border-radius:15px;
  background:linear-gradient(180deg,#79b4ff 0%,#4e93f7 54%,#3f83ec 100%);
  color:#fff;
  font-size:16px;font-weight:500;
  margin-top:4px;
  box-shadow:0 9px 20px -9px rgba(78,147,247,.9), inset 0 1px 0 rgba(255,255,255,.45);
}
.big-btn:active{opacity:.9;}
.big-btn.ghost{
  background:var(--ghost-bg);
  color:var(--accent-deep);
  box-shadow:0 0 0 1.5px rgba(122,172,250,.45) inset, 0 6px 14px -10px rgba(78,147,247,.9);
}
.big-btn:disabled{
  background:var(--btn-off-bg);color:var(--btn-off-ink);
  box-shadow:0 0 0 1.5px rgba(160,190,230,.28) inset;
}

/* 进度行 */
.prog-list{margin:-4px 0 0;}
.prog-row{
  display:flex;align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}
.prog-row:last-child{border-bottom:none;}
.prog-dot{width:8px;height:8px;border-radius:50%;margin-right:10px;flex:none;}
.prog-main{flex:1;min-width:0;}
.prog-sub{font-size:12px;color:var(--ink3);}
.prog-val{font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.prog-edit{
  flex:none;font-size:13px;color:var(--accent);
  padding:6px 10px;border-radius:8px;background:var(--accent-soft);
  margin-left:8px;
}

/* 复习数 */
.review-line{display:flex;align-items:baseline;margin:2px 0 14px;}
.review-num{font-size:40px;font-weight:600;line-height:1;color:var(--accent);}
.review-lab{font-size:13px;color:var(--ink2);margin-left:8px;}

/* 台账 */
.filter-row{
  display:flex;overflow-x:auto;
  padding:4px 0 12px;-webkit-overflow-scrolling:touch;
}
.filter-row::-webkit-scrollbar{display:none;}
.chip{
  flex:none;padding:8px 15px;border-radius:20px;
  background:var(--paper);border:1px solid var(--line);
  font-size:14.5px;color:var(--ink2);margin-right:8px;
}
.chip.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}

.ledger-item{
  background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;margin-bottom:10px;
  display:flex;align-items:center;
}
.li-bar{width:4px;align-self:stretch;border-radius:2px;margin-right:13px;flex:none;}
.li-main{flex:1;min-width:0;}
.li-top{display:flex;align-items:center;margin-bottom:3px;}
.li-kp{font-size:15.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.li-meta{font-size:13px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.li-right{flex:none;margin-left:10px;text-align:right;}
.dots{margin-bottom:4px;}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--track);margin-left:3px;}
.dot.on{background:var(--accent);}
.li-due{font-size:12px;color:var(--ink2);}
.li-due.now{color:var(--warn);}
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--ink2);font-size:15px;
  min-height:48vh;padding:20px;line-height:2;
}

/* 统计 */
.stat-row{display:flex;margin-bottom:14px;}
.stat{
  flex:1;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:14px 12px;text-align:center;
}
.stat + .stat{margin-left:10px;}
.stat b{display:block;font-size:25px;font-weight:600;line-height:1.2;color:var(--accent-deep);}
.stat span{font-size:13px;color:var(--ink2);}

/* 章节条 */
.ch-bar-row{display:flex;align-items:center;padding:7px 0;font-size:13px;}
.ch-name{width:168px;flex:none;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ch-track{flex:1;height:12px;background:#eaf2fd;border-radius:6px;overflow:hidden;margin:0 10px;box-shadow:inset 0 1px 2px rgba(140,175,220,.18);}
.ch-fill{height:100%;background:linear-gradient(90deg,#94c5ff 0%,#4e93f7 100%);border-radius:6px;}
.ch-num{width:34px;flex:none;text-align:right;color:var(--ink3);font-size:12px;}

/* 周条 */
.week-strip{display:flex;flex-wrap:wrap;margin:-3px;}
.wk{
  width:calc(10% - 6px);margin:3px;height:44px;border-radius:8px;
  background:#eaf2fd;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.wk b{font-size:12px;font-weight:500;color:var(--ink2);}
.wk span{font-size:9px;color:var(--ink3);}
.wk.done{background:var(--accent-soft);}
.wk.done b{color:var(--accent);}
.wk.now{background:var(--accent);}
.wk.now b,.wk.now span{color:var(--on-accent);}

/* 设置 */
.field{display:block;margin-bottom:14px;}
.field span{display:block;font-size:14px;color:var(--ink2);margin-bottom:7px;}
.field input{
  width:100%;height:48px;padding:0 13px;font-size:16px;
  border:1px solid var(--line);border-radius:10px;
  background:var(--field);
}
.btn-row{display:flex;margin-top:12px;}
.small-btn{
  flex:1;height:44px;border-radius:10px;
  background:var(--accent-soft);color:var(--accent);
  font-size:14px;margin-right:8px;
}
.small-btn:last-child{margin-right:0;}
.small-btn.danger{background:var(--warn-soft);color:var(--warn);}

.task-list{display:flex;flex-wrap:wrap;margin-top:10px;}
.task{
  font-size:11.5px;padding:4px 9px;border-radius:6px;
  background:#eaf2fd;color:var(--ink3);margin:0 6px 6px 0;
  font-family:ui-monospace,Menlo,monospace;
}
.task.off{opacity:.7;}

/* 底部导航 */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;
  height:68px;background:var(--tab-bg);
  border-top:1px solid var(--line);
  box-shadow:0 -10px 28px -22px rgba(84,132,214,.9);
  display:flex;
  padding-bottom:env(safe-area-inset-bottom);
  z-index:50;
}
.tab{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  color:var(--ink2);font-size:12px;
}
.tab svg{
  width:23px;height:23px;margin-bottom:3px;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.65;
}
.tab svg .fill{fill:currentColor;stroke:none;}
.tab.active{color:var(--accent-deep);font-weight:600;}
.tab.active svg{opacity:1;stroke-width:2;}

/* 弹层 */
.mask{
  position:fixed;top:0;right:0;bottom:0;left:0;background:var(--mask);
  opacity:0;pointer-events:none;transition:opacity .18s;
  z-index:80;
}
.mask.on{opacity:1;pointer-events:auto;}
.sheet{
  position:fixed;left:50%;bottom:0;
  width:100%;max-width:860px;
  transform:translate(-50%,100%);
  transition:transform .22s ease;
  background:var(--surface-solid);
  border-radius:24px 24px 0 0;
  box-shadow:0 -24px 60px -34px rgba(43,58,85,.55);
  max-height:90vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  z-index:90;
  padding:0 20px calc(24px + env(safe-area-inset-bottom));
  display:none;
}
.sheet.on{display:block;transform:translate(-50%,0);}
.sheet-head{
  position:sticky;top:0;background:var(--paper);
  padding:18px 0 12px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;margin-bottom:16px;
}
.sheet-title{font-size:18px;font-weight:600;}
.sheet-close{margin-left:auto;font-size:15.5px;color:var(--ink2);padding:4px 8px;}

/* 表单 */
.s-label{display:block;font-size:14px;color:var(--ink2);margin:16px 0 8px;font-weight:500;}
.s-label:first-child{margin-top:0;}
.pills{display:flex;flex-wrap:wrap;margin:-4px;}
.pill{
  padding:9px 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--field);
  font-size:14.5px;color:var(--ink2);margin:4px;
}
.pill.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
.pill small{display:block;font-size:11.5px;opacity:.7;font-weight:400;}

.s-input,.s-area,.s-select{
  width:100%;border:1px solid var(--line);border-radius:10px;
  background:var(--field);padding:12px 13px;font-size:16px;
}
.s-area{min-height:76px;resize:vertical;line-height:1.6;}
.s-select{height:46px;padding:0 13px;}

.photo-box{
  width:100%;height:150px;border:1px dashed var(--line);border-radius:11px;
  background:var(--field);display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--ink3);overflow:hidden;
}
.photo-box img{width:100%;height:100%;object-fit:cover;}

.voice-btn{
  display:inline-flex;align-items:center;
  font-size:13px;color:var(--accent-deep);background:var(--accent-soft);
  padding:5px 11px;border-radius:14px;margin-left:8px;
}
.voice-btn.rec{background:var(--warn-soft);color:var(--warn);}

.s-actions{display:flex;margin-top:24px;}
.s-actions .big-btn{margin-top:0;}
.s-actions .big-btn + .big-btn{margin-left:10px;}

/* 复习模式 */
.reviewer{
  position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg);z-index:100;
  display:none;flex-direction:column;
}
.reviewer.on{display:flex;}
.rv-top{
  display:flex;align-items:center;padding:16px 20px;
  border-bottom:1px solid var(--line);background:var(--bar);
}
.rv-prog{font-size:13px;color:var(--ink2);}
.rv-bar{flex:1;height:6px;background:var(--track);border-radius:3px;margin:0 14px;overflow:hidden;}
.rv-bar i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .2s;}
.rv-body{
  flex:1;overflow-y:auto;padding:20px;
  max-width:860px;margin:0 auto;width:100%;
  display:flex;flex-direction:column;
}
.rv-inner{margin:auto 0;width:100%;}
.rv-meta{font-size:13.5px;color:var(--ink2);color:var(--ink3);margin-bottom:10px;}
.rv-photo{
  width:100%;max-height:46vh;object-fit:contain;border-radius:16px;
  background:var(--surface-solid);border:1px solid var(--card-line);margin-bottom:14px;
  box-shadow:0 12px 28px -22px rgba(84,132,214,.9);
}
.rv-q{background:var(--surface-2);border:1px solid var(--card-line);box-shadow:0 10px 24px -20px rgba(84,132,214,.9);border-radius:12px;padding:16px;margin-bottom:12px;}
.rv-q b{display:block;font-size:12.5px;color:var(--ink2);font-weight:400;margin-bottom:4px;}
.rv-q p{margin:0 0 12px;font-size:16.5px;line-height:1.78;}
.rv-q p:last-child{margin-bottom:0;}
.rv-actions{
  padding:14px 20px calc(18px + env(safe-area-inset-bottom));
  background:var(--bar);border-top:1px solid var(--line);
  box-shadow:0 -10px 26px -22px rgba(84,132,214,.8);
  display:flex;max-width:860px;margin:0 auto;width:100%;
}
.rv-btn{
  flex:1;height:58px;border-radius:14px;font-size:16px;font-weight:500;
  margin-right:9px;background:var(--field);color:var(--ink2);
}
.rv-btn:last-child{margin-right:0;}
.rv-btn.ok{background:var(--ok-soft);color:var(--ok);}
.rv-btn.half{background:var(--half-soft);color:var(--half);}
.rv-btn.no{background:var(--warn-soft);color:var(--warn);}

.done-box{text-align:center;padding:60px 20px;}
.done-box h3{font-size:20px;margin:0 0 8px;}
.done-box p{color:var(--ink2);font-size:15px;}

/* 提示条 */
.toast{
  position:fixed;left:50%;bottom:96px;transform:translateX(-50%);
  width:calc(100vw - 48px);max-width:420px;
  background:var(--toast-bg);color:#fff;
  font-size:15px;line-height:1.5;padding:11px 16px;border-radius:14px;
  box-shadow:0 14px 30px -14px rgba(43,58,85,.75);
  z-index:300;opacity:0;pointer-events:none;transition:opacity .2s;
  text-align:center;
}

/* 进度页：当前科目的补充信息 */
.prog-plan{
  margin-top:2px;padding:9px 13px;border-radius:13px;
  background:var(--lilac-soft);color:var(--lilac-ink);
  font-size:13.5px;
}
/* 学到哪儿：她自己点，不用家长问 */
.prog-act{display:flex;flex-wrap:wrap;align-items:center;margin-top:12px;}
.prog-step{
  flex:1;height:44px;border-radius:13px;
  border:1px solid var(--line);background:var(--field);
  color:var(--ink2);font-family:inherit;font-size:14.5px;
  -webkit-tap-highlight-color:transparent;
}
.prog-step + .prog-step{margin-left:9px;}
.prog-step.on{
  background:var(--accent-soft);border-color:rgba(122,172,250,.85);
  color:var(--accent-deep);font-weight:600;
}
.prog-when{margin-left:10px;flex:none;font-size:12px;color:var(--ink3);}

/* 会到哪儿：三个点 + 一句话，不出百分比 */
.prog-mast{display:flex;align-items:center;margin-top:15px;font-size:13.5px;color:var(--ink2);}
.pm-lab{margin-right:9px;}
.pm-dots{display:flex;align-items:center;margin-right:9px;}
.pm-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);margin-right:4px;}
.pm-dots i.on{background:var(--accent);}
.prog-mast b{color:var(--ink);font-weight:600;}
.prog-mnote{margin-top:6px;font-size:12.5px;color:var(--ink3);line-height:1.6;}
.card.wide{grid-column:1 / -1;}

/* “我的”收起来了，底部不占位 */
.tab[hidden]{display:none;}
.parent-note{background:var(--lilac-soft);border-color:transparent;}
.parent-note .foot-note{color:var(--lilac-ink);}
.parent-note .small-btn{margin-top:12px;}

/* 复习完成页 */
.done-emoji{font-size:44px;line-height:1;margin-bottom:6px;}

/* 支持毛玻璃时才开真玻璃，否则用接近不透明的白也不难看 */
@supports ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  .card,.sub-tab,.tabbar,.chip,.stat,.ledger-item,.rv-q{
    -webkit-backdrop-filter:blur(20px) saturate(150%);
    backdrop-filter:blur(20px) saturate(150%);
  }
  .card{background:var(--glass-card);}
  .sub-tab{background:var(--glass-tab);}
  .sub-tab.on{background:var(--glass-on);}
  .tabbar{background:var(--glass-tab);}
}
.toast.on{opacity:1;}

@media (max-width:420px){
  .app{padding:0 14px;}
  .date{font-size:22px;}
  .wd{height:21px;font-size:11.5px;padding:0 8px 0 7px;}
  .ch-name{width:96px;}
  .ring{width:56px;height:56px;}
  .ring-num{font-size:19px;}
}

/* ============================================================
   平板横屏
   目标机：华为 M6（10.8" 鸿蒙 2.0）默认 CSS 视口 1280×800；
   系统"显示大小"调大后可能降到 1067×667 / 853×533，故断点放宽到
   840×520 并限定 landscape，手机横屏（约 844×390）不会误触发。
   iPad 横屏 1024×768 / iPad Pro 1194×834 同样覆盖。
   ============================================================ */
@media (min-width:840px) and (min-height:520px) and (orientation:landscape){

  /* 横屏导航挪到左边，底部就不用留那么多了 */
  main{padding-bottom:28px;}

  body{
    font-size:17px;
    padding-bottom:0;
    padding-left:calc(104px + env(safe-area-inset-left));
    padding-right:env(safe-area-inset-right);
  }
  .app{max-width:1180px;padding:0 30px;}

  .topbar{padding:22px 2px 14px;}
  .date{font-size:28px;}
  .wd{height:25px;font-size:13px;}
  .week{font-size:14px;}
  .ring{width:68px;height:68px;}
  .ring-num{font-size:24px;}

  /* 科目条：横屏一行放得下五科，不用横滑 */
  .subbar{margin-bottom:14px;overflow:visible;}
  .sub-tab{height:44px;font-size:15.5px;padding:0 18px;margin-right:10px;}

  /* 今日顶部天气与底部两条通栏，不占网格列 */
  .wx{grid-column:1 / -1;margin-bottom:0;padding:12px 18px;}
  .wx-ico{font-size:28px;}
  .wx-l1 b,.wx-t{font-size:17px;}
  .wx-tip{font-size:13.5px;}
  .today-cls{grid-column:1 / -1;margin-bottom:0;}
  .next-line{grid-column:1 / -1;margin-bottom:0;}

  /* 打卡按钮在横屏给足存在感 */
  .checkin-btn{height:110px;font-size:27px;border-radius:24px;}
  .ck-ball{width:64px;height:64px;margin-right:16px;}
  .checkin-hint{font-size:13.5px;}

  /* 底部横向 tabbar → 左侧竖排导航（省下 76px 纵向空间） */
  .tabbar{
    right:auto;top:0;bottom:0;
    width:104px;height:auto;
    flex-direction:column;justify-content:center;
    border-top:none;border-right:1px solid var(--line);
    padding:0 0 0 env(safe-area-inset-left);
  }
  .tab{
    flex:0 0 auto;height:88px;
    margin:5px 12px;border-radius:13px;
    font-size:12.5px;
  }
  .tab svg{width:25px;height:25px;margin-bottom:5px;}
  .tab.active{background:var(--accent-soft);}

  /* 今日：两步一排；宽屏（≥1080）再变三列。853 这类窄横屏三列会挤成一条 */
  #view-today.active{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;align-items:stretch;
    padding-top:34px;
    align-content:start;
  }
  #view-today .card{
    margin-bottom:0;
    display:flex;flex-direction:column;
    justify-content:center;
    min-height:264px;
    padding:22px 22px 20px;
  }
  #view-today .card > .big-btn{margin-top:16px;}
  #view-today .card > .foot-note{margin-top:14px;padding-top:0;}
  #view-today .checkin{padding:24px;grid-column:1 / -1;}
  #view-today .card.quiet{
    grid-column:1 / -1;
    min-height:0;
    flex-direction:row;align-items:center;justify-content:center;
    padding:16px 20px;
  }
  #view-today .card.quiet .card-h{margin-bottom:0;margin-right:18px;flex:none;}
  #view-today .card.quiet .foot-note{color:var(--ink2);}
  #view-today .card.quiet .card-h em{margin-left:10px;}
  #view-today .card.quiet .foot-note{margin:0;padding-top:0;}
  .card-h{font-size:16px;}
  .foot-note{font-size:13.5px;}
  .big-btn{height:56px;font-size:17px;}
  .review-num{font-size:46px;}
  .prog-row{padding:12px 0;}
  .prog-val{
    font-size:15px;white-space:normal;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  }
  .prog-sub{font-size:13px;}

  /* 台账：两列，按时间纵向读（先读左列到底，再右列） */
  .ledger-list{column-count:2;column-gap:10px;}
  .ledger-item{
    margin-bottom:10px;break-inside:avoid;-webkit-column-break-inside:avoid;
    padding:15px 17px;
  }
  .ledger-list .empty{column-span:all;min-height:62vh;}
  .chip{padding:9px 17px;font-size:15px;}

  /* 进度：统计条通栏 + 两卡并排 */
  #view-timeline.active{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;align-items:start;
  }
  #view-timeline .stat-row{grid-column:1 / -1;margin-bottom:0;}
  #view-timeline .card{margin-bottom:0;}
  .ch-name{width:150px;}

  /* 我的：两列 */
  #view-settings.active{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;align-items:start;
  }
  #view-settings .card{margin-bottom:0;}

  /* 弹层：底部抽屉 → 居中面板（横屏抽屉会顶到屏幕顶） */
  .sheet{
    left:50%;top:50%;bottom:auto;
    width:960px;max-width:calc(100vw - 200px);
    max-height:90vh;
    border-radius:18px;
    padding:0 28px 22px;
    transform:translate(-50%,-46%);
    opacity:0;
    transition:transform .2s ease,opacity .2s ease;
  }
  .sheet.on{display:block;transform:translate(-50%,-50%);opacity:1;}
  .photo-box{height:104px;}
  .s-area{min-height:54px;}
  .s-label{margin:11px 0 5px;}
  .pills .pill{padding:7px 12px;font-size:13.5px;}
  .sheet-head{padding:14px 0 10px;margin-bottom:12px;}
  .sheet-body .s-label:first-child{margin-top:0;}
  .toast{bottom:124px;top:auto;}

  /* 表单：横屏两列，一屏填完不用滚 */
  .f-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:26px;}
  .f-cell{min-width:0;}
  .f-cell.span2,
  .f-grid > .s-actions{grid-column:1 / -1;}
  .f-grid > .s-actions{margin-top:16px;}

  /* 复习：有照片时左图右文，横屏不滚 */
  .rv-top{
    padding:14px max(30px, calc((100vw - 1180px) / 2));
  }
  .rv-body{max-width:1180px;padding:22px 30px;}
  .rv-actions{
    max-width:none;width:100%;margin:0;
    justify-content:center;
    padding-left:30px;padding-right:30px;
  }
  .rv-btn{flex:0 1 240px;height:60px;font-size:16px;margin-right:0;}
  .rv-actions .rv-btn + .rv-btn{margin-left:12px;}
  .rv-meta{font-size:13.5px;}
  .rv-q p{font-size:16px;}
  .rv-inner{max-width:1180px;margin:auto 0;}
  .rv-photo{max-height:56vh;}
  .rv-inner.has-photo{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:14px 26px;align-items:start;
  }
  .rv-inner.has-photo > .rv-meta{grid-column:1 / -1;}
  .rv-inner.has-photo > #rvPhoto{grid-column:1;grid-row:2 / span 3;align-self:start;}
  .rv-inner.has-photo > .rv-q,
  .rv-inner.has-photo > .foot-note{grid-column:2;}
  .rv-inner.has-photo .rv-photo{max-height:62vh;margin-bottom:0;}
}

/* 宽横屏（M6 默认 1280×800）今日页回到三列，一屏看完 */
@media (min-width:1080px) and (min-height:620px) and (orientation:landscape){
  #view-today.active{
    grid-template-columns:repeat(3,minmax(0,1fr));
    padding-top:0;
    min-height:calc(100vh - 150px);
    align-content:center;
  }
  #view-today .checkin{grid-column:auto;}
  /* 宽屏三列：卡片略高、主按钮做成大色块，整组在屏幕里居中 */
  #view-today .card{min-height:330px;}
  .checkin-btn{height:132px;font-size:26px;border-radius:24px;}
  .ck-ball{width:86px;height:86px;margin-right:20px;}
  .checkin-hint{font-size:14px;}
  /* 大屏上问题入口跟着放大，手指一按就到 */
  .ask-bar{margin-top:20px;padding:13px 16px;}
  .ask-ico{width:38px;height:38px;border-radius:12px;}
  .ask-ico svg{width:21px;height:21px;}
  .ask-bar-t{font-size:17px;}
  .ask-bar-t em{font-size:13px;}
}

/* 矮横屏（667 / 533px 高）：纵向间距收紧，保证一屏放下三步 + 复习包 */
@media (max-height:700px) and (orientation:landscape) and (min-width:840px){
  .topbar{padding:12px 2px 8px;}
  .date{font-size:23px;}
  .wd{height:21px;font-size:12px;}
  .ring{width:56px;height:56px;}
  .ring-num{font-size:20px;}
  .card-h{margin-bottom:10px;}
  .prog-row{padding:8px 0;}
  .prog-sub{display:none;}
  #view-today .card{min-height:158px;padding:14px 16px 12px;}
  #view-today.active{padding-top:6px;gap:12px;}
  .big-btn{height:50px;}
  .review-num{font-size:36px;}
  .foot-note{font-size:12.5px;}
  /* 矮屏别让打卡按钮把一屏吃掉 */
  .checkin{padding:14px 16px 12px;}
  .checkin-btn{height:78px;font-size:21px;border-radius:18px;}
  .ck-ball{width:38px;height:38px;margin-right:11px;}
  .checkin-hint{font-size:12px;margin-top:8px;line-height:1.5;}
  .subbar{margin-bottom:8px;}
  .sub-tab{height:36px;font-size:14px;padding:0 14px;margin-right:8px;}
  .sub-badge{min-width:16px;height:16px;line-height:16px;margin-left:5px;}
}

/* ============================================================
   夜间护眼主题
   乐宝晚上 7:30-10:00 用，近视戴镜，所以：
   底用深蓝而非纯黑（纯黑+白字会有光晕，读久了更累）
   正文 #e8eefb 对底 14.8:1，辅助字最低 5:1，全部过 AA
   主按钮做深蓝渐变，白字 6:1，不刺眼
   ============================================================ */
:root[data-theme="night"]{
  --btn-off-bg:rgba(255,255,255,.055);
  --btn-off-ink:rgba(178,200,232,.42);
  --bg:#0e1524;
  --glow:
    radial-gradient(760px 480px at 8% -6%, rgba(46,80,140,.42) 0%, rgba(46,80,140,0) 62%),
    radial-gradient(680px 420px at 96% 2%, rgba(74,60,132,.34) 0%, rgba(74,60,132,0) 60%),
    linear-gradient(168deg,#111b2e 0%,#0d1422 52%,#121d33 100%);
  --paper:#18223a;
  --glass:rgba(30,42,70,.88);
  --glass-card:rgba(28,40,66,.82);
  --glass-2:rgba(32,45,74,.74);
  --glass-tab:rgba(22,32,54,.9);
  --glass-on:linear-gradient(180deg,rgba(66,110,190,.62) 0%,rgba(40,66,116,.62) 100%);
  --surface-2:rgba(34,47,78,.94);
  --surface-solid:#161f34;
  --card-line:rgba(150,190,255,.15);
  --bar:rgba(20,29,49,.95);
  --tab-bg:rgba(20,29,49,.93);
  --ghost-bg:linear-gradient(180deg,rgba(64,98,158,.44) 0%,rgba(40,62,102,.44) 100%);
  --tab-on:linear-gradient(180deg,rgba(68,112,190,.58) 0%,rgba(42,70,124,.58) 100%);
  --field:rgba(26,37,60,.92);
  --track:rgba(255,255,255,.10);
  --mask:rgba(3,7,14,.66);
  --toast-bg:rgba(54,76,118,.97);
  --ring-bg:radial-gradient(circle at 34% 26%, #253457 0%, #1a2742 58%, #141d32 100%);
  --ring-line:rgba(125,180,255,.4);
  --line:rgba(140,178,235,.18);
  /* 正文三档，夜间提亮，全部 5:1 以上 */
  --ink:#e8eefb;
  --ink2:#bac9e4;
  --ink3:#90a5c7;
  --accent:#74a9f0;
  --accent-deep:#a9cdff;
  --accent-soft:rgba(90,140,220,.20);
  --on-accent:#0b1322;
  --ck-grad:linear-gradient(160deg,#4a86dc 0%,#3a71c8 52%,#2b5aa8 100%);
  --lilac-soft:rgba(150,130,240,.16);
  --lilac-ink:#c5baff;
  --pink:#e58fb5;
  --warn:#ff9fbd;
  --warn-soft:rgba(200,80,120,.18);
  /* 夜里的橙色：深棕底、暖字，绝不出现大块浅色 */
  --ask-bg:linear-gradient(180deg,#2b2118 0%,#241b13 100%);
  --ask-line:rgba(240,175,115,.30);
  --ask-ink:#F2C58C;
  --ask-ink2:#BE8D5C;
  --ask-bub:linear-gradient(180deg,#2a2318 0%,#251e14 100%);
  --ask-bub-line:rgba(240,175,115,.24);
  --ask-bub-ink:#EADCC6;
  --ask-shot:linear-gradient(180deg,#241c14 0%,#201810 100%);
  --ask-shot-line:rgba(240,175,115,.32);
  --ask-shot-ink:#C08F5E;
  --ok:#5fd3c2;
  --ok-soft:rgba(50,160,145,.18);
  --half:#f0b072;
  --half-soft:rgba(190,120,50,.2);
  --shadow:0 14px 30px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);
}
/* 夜间：足球保持亮度（按钮本身是亮蓝，压暗会显脏），只把投影换成深色 */
:root[data-theme="night"] .ck-ball{
  filter:drop-shadow(0 0 1.2px rgba(255,255,255,.5)) drop-shadow(0 6px 12px rgba(0,0,0,.5));
}
/* 夜里那行粉色要压下来，不能亮成小灯泡 */
:root[data-theme="night"] .date{
  color:#f2a0be;
  text-shadow:0 1px 0 rgba(0,0,0,.3),0 6px 14px rgba(0,0,0,.28);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='5' viewBox='0 0 26 5'%3E%3Cpath d='M1 3.4Q3.6 .5 6.4 3.4T11.8 3.4T17.2 3.4T22.6 3.4' fill='none' stroke='%23986C84' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
:root[data-theme="night"] .wd{
  background:linear-gradient(135deg,rgba(255,143,180,.15) 0%,rgba(178,142,255,.13) 100%);
  color:#eaa5c1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
:root[data-theme="night"] .wd::before{color:#c98aa6;}
:root[data-theme="night"] .empty-art{filter:brightness(.78) saturate(1.05);}
/* 夜间：毛玻璃背景本身就很深，减少模糊开销也更好读 */
:root[data-theme="night"] .card.quiet{opacity:.74;}

/* 亮度选择：三个并排的胶囊 */
.theme-row{display:flex;}
.theme-opt{
  flex:1;height:44px;border-radius:12px;
  border:1px solid var(--line);background:var(--field);
  font-size:14px;color:var(--ink2);
  margin-right:8px;
}
.theme-opt:last-child{margin-right:0;}
.theme-opt.on{
  background:var(--tab-on);color:var(--accent-deep);
  font-weight:600;border-color:var(--accent);
  box-shadow:0 7px 16px -12px rgba(78,147,247,.9);
}

/* ============================================================
   卡通图标：每个标题前一枚马卡龙色小方块 + 白色线条图标
   ============================================================ */
.step.ico{
  width:28px;height:28px;border-radius:9px;margin-right:10px;
  box-shadow:0 5px 12px -7px rgba(43,58,85,.55), inset 0 1px 0 rgba(255,255,255,.45);
}
.step.ico svg{
  width:17px;height:17px;display:block;
  fill:none;stroke:#fff;stroke-width:1.95;
  stroke-linecap:round;stroke-linejoin:round;
}
.co-mint{background:linear-gradient(160deg,#82e3d1 0%,#45c2ab 100%);}
.co-blue{background:linear-gradient(160deg,#98caff 0%,#5c9df5 100%);}
.co-amber{background:linear-gradient(160deg,#ffdc8c 0%,#f3b53c 100%);}
.co-lilac{background:linear-gradient(160deg,#c7bbff 0%,#9b8bf0 100%);}
.co-pink{background:linear-gradient(160deg,#ffb9d6 0%,#f487b2 100%);}
:root[data-theme="night"] .step.ico{
  box-shadow:0 5px 12px -8px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.28);
}

/* ============================================================
   进球动画：打卡成功时足球飞进来 + 星星炸开 + 一句鼓励
   ============================================================ */
.goal-fx{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76vw;max-width:420px;
  display:flex;flex-direction:column;align-items:center;
  pointer-events:none;z-index:400;
  animation:gxIn .3s ease-out both;
}
.goal-fx.out{animation:gxOut .5s ease-in both;}
.gx-wrap{position:relative;display:flex;align-items:center;justify-content:center;}
.gx-ball{
  width:86px;height:86px;display:block;
  animation:gxBall .85s cubic-bezier(.24,1.2,.4,1) both;
  filter:drop-shadow(0 16px 22px rgba(28,52,92,.34));
}
.gx-spark{position:absolute;left:50%;top:50%;width:0;height:0;}
.gx-spark i{
  position:absolute;width:9px;height:9px;border-radius:50%;
  animation:gxSpark .95s .22s ease-out both;
}
.gx-spark i:nth-child(1){background:#FFCF5C;--dx:-74px;--dy:-52px;}
.gx-spark i:nth-child(2){background:#63D6BE;--dx:66px;--dy:-58px;}
.gx-spark i:nth-child(3){background:#FF9DC4;--dx:-52px;--dy:58px;}
.gx-spark i:nth-child(4){background:#B39DEE;--dx:78px;--dy:34px;width:7px;height:7px;}
.gx-spark i:nth-child(5){background:#7FB8F5;--dx:-92px;--dy:8px;width:7px;height:7px;}
.gx-spark i:nth-child(6){background:#FFAE84;--dx:24px;--dy:-84px;width:6px;height:6px;}
.gx-msg{
  margin-top:16px;padding:11px 22px;border-radius:18px;
  background:var(--surface-solid);color:var(--ink);
  font-size:17px;font-weight:600;text-align:center;line-height:1.5;
  box-shadow:0 18px 38px -20px rgba(43,58,85,.55), inset 0 1px 0 rgba(255,255,255,.7);
  animation:gxMsg .45s .26s cubic-bezier(.2,1.3,.5,1) both;
}
@keyframes gxIn{from{opacity:0;}to{opacity:1;}}
@keyframes gxOut{from{opacity:1;}to{opacity:0;}}
@keyframes gxBall{
  0%{transform:translate(-56px,130px) scale(.36) rotate(-170deg);}
  58%{transform:translate(8px,-16px) scale(1.1) rotate(14deg);}
  100%{transform:translate(0,0) scale(1) rotate(0deg);}
}
@keyframes gxSpark{
  0%{transform:translate(0,0) scale(.3);opacity:0;}
  35%{opacity:1;}
  100%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0;}
}
@keyframes gxMsg{
  from{transform:translateY(12px) scale(.94);opacity:0;}
  to{transform:translateY(0) scale(1);opacity:1;}
}
.term-auto{
  height:48px;line-height:46px;padding:0 14px;
  border:1px dashed var(--line);border-radius:10px;
  background:var(--field);color:var(--ink);
  font-size:15.5px;font-weight:500;
}

/* 今日课程条：一行带过，不抢主按钮 */
.today-cls{
  display:flex;align-items:center;flex-wrap:wrap;
  margin:0 0 12px;padding:9px 12px;
  border-radius:15px;
  background:var(--glass-2);
  border:1px solid var(--line);
}
.today-cls[hidden]{display:none;}
.tc-lab{
  flex:none;margin-right:9px;
  font-size:12.5px;letter-spacing:.08em;color:var(--ink3);
}
.tc-p{
  flex:none;margin:2px 5px 2px 0;padding:4px 9px;
  border-radius:9px;background:var(--field);
  font-size:13px;color:var(--ink2);white-space:nowrap;
}
.tc-p i{font-style:normal;font-size:11.5px;color:var(--ink3);margin-right:3px;}
.tc-p b{font-weight:600;color:var(--ink);}
.tc-p.on{background:var(--accent-soft);}
.tc-p.on b{color:var(--accent-deep);}
.tc-note{font-size:13px;color:var(--ink2);}

/* 顶栏：近期安排入口（原先是"今天记了几张"的圆圈，孩子看不懂） */
.plan-btn{
  width:62px;height:62px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--accent-deep);
  -webkit-tap-highlight-color:transparent;
}
.plan-btn:active{transform:scale(.96);}
.plan-btn svg{width:29px;height:29px;}
.plan-n{
  position:absolute;top:-6px;right:-6px;
  min-width:21px;height:21px;line-height:21px;
  padding:0 5px;border-radius:11px;
  background:var(--accent);color:#fff;
  font-size:12.5px;font-weight:600;text-align:center;
  box-shadow:0 3px 8px rgba(78,147,247,.4);
}
.plan-n[hidden]{display:none;}

/* 今日页：七天内最近的考试/测验，一行话 */
.next-line{
  display:flex;align-items:center;flex-wrap:wrap;
  width:100%;text-align:left;
  margin:0 0 10px;padding:11px 15px;
  border-radius:15px;
  background:var(--accent-soft);
  border:1px solid rgba(78,147,247,.26);
  color:var(--accent-deep);
  font-size:14.5px;font-weight:600;
  -webkit-tap-highlight-color:transparent;
}
.next-line[hidden]{display:none;}
.next-line em{
  font-style:normal;font-weight:500;
  color:var(--ink2);margin-left:9px;font-size:13.5px;
}

/* 近期安排面板 */
.pl-list{margin:2px 0 6px;}
.pl-item{
  display:flex;align-items:center;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.pl-item:last-child{border-bottom:none;}
.pl-d{
  flex:none;width:76px;
  display:flex;flex-direction:column;
  line-height:1.3;
}
.pl-d b{font-size:15.5px;color:var(--ink);font-weight:600;}
.pl-d i{font-style:normal;font-size:12px;color:var(--ink3);}
.pl-t{flex:1;min-width:0;font-size:15.5px;color:var(--ink);}
.pl-t em{
  display:block;font-style:normal;
  font-size:12.5px;color:var(--ink3);margin-top:2px;
}
.pl-item.soon .pl-d b{color:var(--accent-deep);}
.pl-item.exam .pl-t{font-weight:600;}
.pl-del{
  flex:none;margin-left:10px;
  width:34px;height:34px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:var(--field);color:var(--ink3);font-size:17px;
}
.pl-empty{padding:18px 0;color:var(--ink2);font-size:14.5px;text-align:center;}
.pl-add{margin-top:14px;}

/* 加一条小测的表单 */
.qz-row{margin-top:12px;}
.qz-row:first-child{margin-top:0;}
.qz-lab{font-size:13.5px;color:var(--ink2);margin-bottom:6px;}
.qz-pills{display:flex;flex-wrap:wrap;}
.qz-pill{
  margin:0 8px 8px 0;padding:8px 15px;
  border-radius:12px;background:var(--field);
  border:1px solid var(--line);
  font-size:14.5px;color:var(--ink2);
}
.qz-pill.on{background:var(--accent-soft);border-color:rgba(78,147,247,.4);color:var(--accent-deep);font-weight:600;}
.qz-input,.qz-date{
  width:100%;height:48px;padding:0 14px;
  border-radius:13px;border:1px solid var(--line);
  background:var(--field);color:var(--ink);
  font-size:16px;
}

/* 打卡卡顶上一行：今天这一下是给哪一科打的 */
.ck-which{
  margin:0 0 12px;
  font-size:13.5px;font-weight:600;
  letter-spacing:.06em;
  color:var(--ink2);
}
.ck-which b{color:var(--accent-deep);font-weight:700;}

/* 夜间：角标换成浅蓝底深字，深蓝底白字在夜里发糊 */
:root[data-theme="night"] .plan-n{
  background:#7EB2F6;color:#0A1526;
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}

/* 窄手机（<560）：五科标签压到一行放得下，孩子不用去找怎么滑 */
@media (max-width:560px){
  /* 手机上七门课平铺一行、等宽平分：到初二加物理、初三加化学也不会挤成两行 */
  .subbar{margin-bottom:10px;padding-right:0;gap:0;}
  .sub-tab{
    flex:1 1 0;min-width:0;
    height:38px;padding:0 3px;margin-right:5px;font-size:13.5px;
    justify-content:center;
  }
  .sub-tab:last-child{margin-right:0;}
  .sub-dot{display:none;}
  .sub-tab{position:relative;}
  .sub-badge{
    position:absolute;top:-4px;right:-3px;
    margin-left:0;min-width:16px;height:16px;line-height:16px;
    font-size:10.5px;padding:0 4px;
    box-shadow:0 0 0 1.5px var(--surface-solid);
  }
  /* 窄屏放不下“初二”两个字，靠灰度和点不动的行为说明就够了 */
  .sub-soon{display:none;}
  /* 窄屏放不下日期就跟按钮换行，不挤成一条 */
  .prog-when{flex:1 0 100%;margin:6px 0 0;}
  .wx{padding:10px 13px;margin-bottom:10px;}
  .wx-ico{font-size:22px;margin-right:10px;}
  .wx-l1 b,.wx-t{font-size:15px;}
  .wx-tip{font-size:12.5px;}
}

/* ---------- 小学二年级：今天的任务清单 ----------
   二年级识字量有限：字要大、一行一句、方框要大到手指点得准。
   勾完的整行变薄荷绿并划掉文字，一眼看出"这个做过了"。 */
.pk-list{display:flex;flex-direction:column;gap:10px;}
.pk-row{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:15px 16px;border-radius:17px;
  border:1px solid var(--line);
  background:var(--glass-card);
  color:var(--ink);font:inherit;cursor:pointer;
  box-shadow:0 2px 8px rgba(84,132,214,.07),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .12s ease,background .16s ease,border-color .16s ease;
}
.pk-row:active{transform:scale(.985);}
.pk-box{
  width:32px;height:32px;flex:0 0 32px;border-radius:11px;
  border:2px solid rgba(120,166,232,.55);
  background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:800;line-height:1;color:#fff;
}
.pk-row.on{background:linear-gradient(180deg,rgba(242,253,251,.98) 0%,rgba(228,248,246,.98) 100%);border-color:rgba(63,179,166,.5);}
.pk-row.on .pk-box{background:linear-gradient(160deg,#5fd3c3,#219a8c);border-color:transparent;}
.pk-t{display:flex;flex-direction:column;gap:3px;min-width:0;}
.pk-t b{font-size:19.5px;font-weight:800;letter-spacing:.2px;}
.pk-t em{font-style:normal;font-size:14px;color:var(--ink3);}
.pk-row.on .pk-t b{color:var(--ink2);text-decoration:line-through;text-decoration-color:rgba(33,154,140,.55);}

:root[data-theme="night"] .pk-row{box-shadow:0 2px 10px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05);}
:root[data-theme="night"] .pk-row.on{background:linear-gradient(180deg,rgba(31,62,60,.9) 0%,rgba(26,50,49,.9) 100%);border-color:rgba(95,211,195,.34);}
:root[data-theme="night"] .pk-box{border-color:rgba(125,180,255,.42);}

/* 小学只留一屏：科目条、错题本、进度这些初二以上的东西都不出现 */
body[data-stage="primary"] .tabbar,
body[data-stage="primary"] .subbar,
body[data-stage="primary"] #cardReview,
body[data-stage="primary"] #cardAdd,
body[data-stage="primary"] #cardTest,
body[data-stage="primary"] #nextLine,
body[data-stage="primary"] #todayCls{display:none!important;}

/* 二年级：整体字号提一档，行距放开，读着不费劲 */
body[data-stage="primary"] .ck-txt{font-size:23px;}
body[data-stage="primary"] .checkin-hint{font-size:15.5px;line-height:1.6;}
body[data-stage="primary"] .card-h{font-size:17px;}
body[data-stage="primary"] .card-h em{font-size:14px;}
body[data-stage="primary"] .foot-note{font-size:14.5px;line-height:1.6;}
body[data-stage="primary"] .ask-bar-t{font-size:17px;}
body[data-stage="primary"] .pk .card-h{margin-bottom:12px;}