/* 福斯特培训学校 · 学生版视觉「集印册」
 *
 * 一句话：这个 app 是孩子的一本集印册。学满就盖一个「读」印，作业被评优
 * 就多一枚「优」印 —— 校徽本来就是一方篆印，书法又是学校自己教的科目，
 * 而集章这件事正好是现在小学生初中生最上头的事。
 *
 * 所以颜色不用那套人人都在用的糖果色（天蓝/薄荷/珊瑚/明黄），
 * 换成一套取自文房的颜料色：院墨、朱砂印泥、石青、青瓷、赭石、洒金。
 * 朱砂只留给「印」和老师的朱批，是全场唯一的强调色，别处一概不用。
 * 宣纸色只铺在集印册那张卡上 —— 整页铺纸就成了千篇一律的"古风模板"。
 */
:root{
  --ink:#2B1A6E;   --ink-deep:#1C1147; --ink-shade:#1A0F4A;
  /* 朱砂印泥：盖印、朱批、要你动手的地方。全场唯一的强调色 */
  --seal:#C8402F;  --seal-deep:#A83324; --seal-wash:#FBEDE9;
  /* 宣纸：只用在集印册和喜报这类"纸"上 */
  --rice:#FBF7EE;  --rice-2:#F2EADA;    --rice-line:#E3D8C2;
  /* 科目颜料：石青=英语 朱砂=语文 松烟=数学 赭石=书法 院墨=作业班 */
  --sky:#3A6EA5;   --sky-shade:#2C567F;  --sky-wash:#E9F0F7;
  --mint:#5B8C7B;  --mint-shade:#456B5D; --mint-wash:#EAF2EE;
  --coral:#C8402F; --coral-shade:#A83324;--coral-wash:#FBEDE9;
  --star:#E0A82E;  --star-shade:#B88620;--star-wash:#FBF2DE;
  --umber:#9A6B4F; --umber-shade:#7A5440; --umber-wash:#F4EDE7;
  --wash:#F1EEFB;  --wash-2:#E4DFF5;
  --paper:#FFFFFF; --bg:#F4F2FC; --line:#E8E4F3;
  --text:#1E1B2E;  --text-2:#6B6880;     --text-3:#A6A3B8;
  --danger:#C8402F;

  --serif:"Songti SC","Noto Serif SC","Noto Serif CJK SC","Source Han Serif SC","STSong",Georgia,serif;
  --sans:-apple-system,"PingFang SC","HarmonyOS Sans SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
  --en:Georgia,"Times New Roman","Noto Serif",serif;

  --r:20px; --r-s:14px;
  --tab-h:64px;

  /* 兼容旧类名引用的变量 */
  --primary:var(--ink); --primary-d:var(--ink-deep); --primary-l:var(--wash);
  --accent:var(--star); --accent-l:var(--star-wash);
  --ink-2:var(--text-2); --ink-3:var(--text-3); --card:var(--paper);
  --ok:var(--mint); --warn:var(--star-shade); --bad:var(--danger);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* hidden 属性必须真正隐藏：否则 .tabbar{display:flex} 会盖过它 */
[hidden]{display:none !important}
html,body{margin:0;padding:0;height:100%;overscroll-behavior-x:none}
body{
  font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--text);
  background:#E6E2F4;display:flex;justify-content:center;align-items:stretch;
  -webkit-font-smoothing:antialiased;
}
#app{
  width:100%;max-width:430px;background:var(--bg);position:relative;
  display:flex;flex-direction:column;min-height:100dvh;overflow:hidden;
}
@media(min-width:900px){
  body{align-items:center;padding:24px 0}
  #app{min-height:min(900px,96dvh);height:min(900px,96dvh);border-radius:28px;box-shadow:0 0 0 1px var(--line)}
}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
svg.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ---------- 顶栏 ---------- */
.topbar{
  flex:0 0 auto;background:var(--paper);padding:12px 16px;display:flex;align-items:center;gap:10px;
  position:relative;z-index:5;min-height:58px;box-shadow:0 1px 0 var(--line);
}
.topbar h1{font-size:18px;font-weight:800;margin:0;flex:1;color:var(--ink-deep);
  display:flex;align-items:center;gap:8px;min-width:0;letter-spacing:.01em}
.topbar h1 img{width:30px;height:30px;flex:0 0 auto}
.topbar .sub{font-size:12.5px;color:var(--text-3);font-weight:500}
.back{border:0;background:var(--wash);width:36px;height:36px;border-radius:50%;font-size:22px;color:var(--ink);
  cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0 0 3px}
.star-pill{display:inline-flex;align-items:center;gap:4px;background:var(--star-wash);color:#8A5A00;
  font-weight:800;font-size:14px;padding:4px 10px 4px 6px;border-radius:999px}
.star-pill svg{width:18px;height:18px;color:var(--star)}

.view{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px;padding-bottom:calc(var(--tab-h) + 24px)}
.view.no-tab{padding-bottom:28px}

/* ---------- 通用 ---------- */
.card{background:var(--paper);border-radius:var(--r);padding:16px;margin-bottom:14px;box-shadow:0 2px 0 var(--line)}
.card.tight{padding:12px 14px}
.row{display:flex;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.muted{color:var(--text-2);font-size:13px}
.small{font-size:12.5px}
.strong{font-weight:700}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt{margin-top:12px}.mb{margin-bottom:12px}
.center{text-align:center}
.hr{height:1px;background:var(--line);margin:14px 0}
.section-title{font-size:17px;font-weight:800;color:var(--ink-deep)}

/* 实体按钮：底边同色深一号，按下时下沉 */
.btn{
  appearance:none;border:0;border-radius:var(--r-s);background:var(--ink);color:#fff;
  font:700 16px/1.2 var(--sans);padding:13px 18px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 4px 0 var(--ink-shade);transform:translateY(0);transition:transform .06s,box-shadow .06s;
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink-shade)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.block{display:flex;width:100%}
.btn.sm{padding:8px 14px;font-size:14px;border-radius:12px;box-shadow:0 3px 0 var(--ink-shade)}
.btn.sm:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink-shade)}
.btn.ghost,.btn.grey{background:var(--paper);color:var(--ink);box-shadow:0 3px 0 var(--wash-2),inset 0 0 0 2px var(--wash-2)}
.btn.grey{color:var(--text-2)}
.btn.ghost:active,.btn.grey:active{box-shadow:0 1px 0 var(--wash-2),inset 0 0 0 2px var(--wash-2)}
.btn.sky{background:var(--sky);box-shadow:0 3px 0 var(--sky-shade)}
.btn.mint{background:var(--mint);box-shadow:0 3px 0 var(--mint-shade)}
.btn.coral,.btn.accent{background:var(--coral);box-shadow:0 3px 0 var(--coral-shade)}
.btn.star{background:var(--star);color:#5C3B00;box-shadow:0 3px 0 var(--star-shade)}
.btn.danger{background:var(--paper);color:var(--danger);box-shadow:0 3px 0 var(--coral-wash),inset 0 0 0 2px var(--coral-wash)}
.btn.is-playing,.iconbtn.is-playing{background:var(--mint);color:#fff;box-shadow:0 3px 0 var(--mint-shade)}

input,select,textarea{
  width:100%;font:16px/1.4 var(--sans);color:var(--text);
  border:2px solid var(--line);border-radius:var(--r-s);padding:12px 14px;background:var(--paper);outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--sky)}
/* 多行输入框只许竖着拉。浏览器默认两个方向都能拉，横着一拉就戳出容器 ——
 * 在手机上还会把整页顶出一条横向滚动条。高度想拉多长拉多长，宽度跟着版面走。
 * 放在这条公共规则上，全站十几个 textarea（预约留言、老师评语、批量建档、
 * 测评建议…）一起管住，不是只修家长看见的那一个。 */
textarea{resize:vertical;min-height:3.2em}
label.field{display:block;margin-bottom:14px}
label.field > span{display:block;font-size:13px;font-weight:700;color:var(--text-2);margin-bottom:6px}

.pill{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;padding:3px 10px;
  border-radius:999px;background:var(--wash);color:var(--text-2);white-space:nowrap}
.pill.todo{background:var(--coral-wash);color:var(--coral-shade)}
.pill.warn{background:var(--star-wash);color:#8A5A00}
.pill.ok{background:var(--mint-wash);color:var(--mint-shade)}
.pill.blue{background:var(--sky-wash);color:var(--sky-shade)}

.tabbar{position:absolute;left:0;right:0;bottom:0;height:var(--tab-h);background:var(--paper);
  display:flex;z-index:20;box-shadow:0 -1px 0 var(--line);padding:0 6px}
.tabbar button{flex:1;border:0;background:transparent;font:600 11px var(--sans);color:var(--text-3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}
/* 选中的那一格是一枚小印：用院墨不用朱砂 —— 朱砂留给"盖上的印"和要动手的地方，
 * 到处都红就等于哪儿都不红了。校徽是圆印，日常是方印，这里是导航的小方印。 */
.tabbar button .tab-ic{width:36px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  transition:background .16s,transform .16s}
.tabbar button .tab-ic svg{width:22px;height:22px}
.tabbar button.on{color:var(--ink-deep);font-weight:700}
.tabbar button.on .tab-ic{background:var(--ink);color:#fff;transform:rotate(-4deg);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.tabbar button.on .tab-ic svg{stroke-width:2.2}
@media(prefers-reduced-motion:reduce){.tabbar button .tab-ic{transition:none}}

.empty{text-align:center;padding:48px 24px;color:var(--text-3);font-size:14px;line-height:1.9}

#toast{position:fixed;left:50%;top:76px;transform:translate(-50%,-10px);background:var(--ink-deep);
  color:#fff;padding:10px 18px;border-radius:14px;font-size:14px;font-weight:600;z-index:999;opacity:0;
  pointer-events:none;transition:.2s;max-width:80vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 登录 ---------- */
.login-brand{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 0 18px}
.login-brand img{width:108px;height:108px;background:var(--paper);border-radius:50%;padding:6px;box-shadow:0 4px 0 var(--wash-2)}
.login-brand .name{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--ink-deep);margin-top:14px;letter-spacing:.12em}
.login-brand .en{font-size:11px;letter-spacing:.24em;color:var(--text-3);margin-top:2px}
/* 登录页不列功能清单：一句话说清为什么每天要来，再给三枚印做个样子 */
.login-line{margin-top:16px;font-size:13.5px;color:var(--text-2);letter-spacing:.02em}
.login-seals{display:flex;gap:7px;margin-top:12px}
.login-seals i{width:34px;height:34px;border-radius:8px;background:var(--seal);color:#fff;
  font:700 18px/34px var(--serif);text-align:center;font-style:normal;transform:rotate(-5deg);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.login-seals i:nth-child(2){transform:rotate(4deg)}
.login-seals i.ghost{background:transparent;color:#D8CCB4;border:1.5px dashed var(--rice-line);
  line-height:31px;transform:none}

/* ---------- 抬头（老师端、我的） ---------- */
.hero{background:var(--paper);border-radius:var(--r);padding:18px 16px;margin-bottom:14px;box-shadow:0 2px 0 var(--line)}
.hero h2{font-size:22px;font-weight:800;color:var(--ink-deep);margin:0 0 2px}
.hero .small{color:var(--text-2)}
.hero .stats{display:flex;gap:8px;margin-top:14px}
/* 三个数字是同一类东西，就用同一种底；数字用宋体，像碑上的数，不像仪表盘 */
.hero .stats > div{flex:1;border-radius:14px;padding:10px 10px 8px;background:var(--wash);text-align:center}
.hero .stats b{display:block;font:700 26px/1.15 var(--serif);color:var(--ink-deep);font-variant-numeric:tabular-nums}
.hero .stats > div:nth-child(1) b{color:var(--seal-deep)}
.hero .stats span{font-size:11.5px;color:var(--text-2)}

/* ---------- 首页 ---------- */
.hello{padding:4px 2px 12px}
.hello h2{font-size:24px;font-weight:800;color:var(--ink-deep);margin:0}
.hello .level{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:13px;color:var(--text-2)}
.hello .level b{background:var(--ink);color:#fff;font-size:12px;padding:1px 8px;border-radius:999px}


.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.tile{position:relative;border:0;border-radius:var(--r);padding:14px 14px 12px;text-align:left;cursor:pointer;
  color:#fff;font-family:var(--sans);min-height:108px;display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .06s,box-shadow .06s}
.tile:active{transform:translateY(3px)}
.tile .t-ic{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center}
.tile .t-ic svg{width:24px;height:24px;stroke-width:2.2}
.tile b{font-size:17px;font-weight:800;display:block;margin-top:10px}
.tile span{font-size:12px;opacity:.92}
.tile.sky{background:var(--sky);box-shadow:0 4px 0 var(--sky-shade)}
.tile.mint{background:var(--mint);box-shadow:0 4px 0 var(--mint-shade)}
.tile.coral{background:var(--coral);box-shadow:0 4px 0 var(--coral-shade)}
.tile.star{background:var(--star);color:#5C3B00;box-shadow:0 4px 0 var(--star-shade)}
.tile.star .t-ic{background:rgba(255,255,255,.45)}
.tile.sky:active{box-shadow:0 1px 0 var(--sky-shade)}
.tile.mint:active{box-shadow:0 1px 0 var(--mint-shade)}
.tile.coral:active{box-shadow:0 1px 0 var(--coral-shade)}
.tile.star:active{box-shadow:0 1px 0 var(--star-shade)}
.tile .badge{position:absolute;top:10px;right:10px;min-width:24px;height:24px;border-radius:12px;background:#fff;
  color:var(--coral-shade);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;padding:0 6px}

/* ---------- 首页：集印册 + 今天要做 + 随时可以 ---------- */
.sb-title{font-family:var(--serif);font-size:16px;font-weight:700;color:#6B4A2E;letter-spacing:.08em}
.sb-streak{font-size:12.5px;color:#8A7A60}
.sb-streak b{font-family:var(--serif);font-size:17px;color:var(--seal-deep);margin:0 1px}
.sb-foot{margin-top:14px;padding-top:12px;border-top:1px dashed var(--rice-line)}
.sb-done{font-size:13.5px;font-weight:700;color:var(--seal-deep)}
.sb-need{font-size:13.5px;color:#6B5B44}
.sb-need b{font-family:var(--serif);font-size:19px;color:var(--seal);margin:0 2px}
.sb-bar{height:5px;border-radius:99px;background:var(--rice-2);overflow:hidden;margin:8px 0 6px}
.sb-bar i{display:block;height:100%;border-radius:99px;background:var(--seal);transition:width .4s ease}
.sb-hint{font-size:11.5px;color:#A2947C}

/* 今天有课：一条窄带，不占一整张卡 */
.todaycls{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:14px;font-size:12.5px;color:var(--text-2)}
.tc-tag{background:var(--ink);color:#fff;font-weight:700;font-size:11.5px;padding:2px 8px;border-radius:999px}
.tc-one{display:inline-flex;align-items:center;gap:4px}
.tc-one i{font-style:normal;color:var(--text-3)}

/* 作业是唯一带紧迫感的东西，所以它单独成块，用朱砂 */
.todo-box{background:var(--paper);border-radius:var(--r);padding:14px 14px 14px 18px;margin-bottom:16px;
  box-shadow:0 2px 0 var(--line);position:relative;overflow:hidden}
.todo-box::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--seal)}
.todo-box.done::before{background:var(--mint)}
.todo-box .pill.todo{background:var(--seal-wash);color:var(--seal-deep)}
.todo-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  border:0;background:transparent;padding:9px 0;border-top:1px solid var(--line);font:inherit;color:inherit}
.todo-row:first-of-type{border-top:0}
.todo-row .td-ic{width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--seal-wash);color:var(--seal);
  display:flex;align-items:center;justify-content:center}
.todo-row .td-ic svg{width:19px;height:19px}
.todo-row b{display:block;font-size:15px;font-weight:700}
.todo-row i{display:flex;align-items:center;gap:6px;font-style:normal;font-size:12px;color:var(--text-2);margin-top:2px}
.todo-row .td-go{flex:0 0 auto;font-size:13px;font-weight:700;color:#fff;background:var(--seal);
  padding:5px 12px;border-radius:999px;box-shadow:0 2px 0 var(--seal-deep)}
.todo-row:active .td-go{transform:translateY(2px);box-shadow:0 0 0 var(--seal-deep)}
.todo-more{width:100%;border:0;background:transparent;color:var(--seal-deep);font:700 13px var(--sans);
  padding:10px 0 2px;cursor:pointer;border-top:1px solid var(--line);margin-top:2px}
.td-clear{display:flex;align-items:center;gap:10px;margin-top:10px;color:var(--mint-shade)}
.td-clear svg{width:22px;height:22px;flex:0 0 auto}
.td-clear b{font-size:15px}
.td-clear span{font-size:12.5px;color:var(--text-2);margin-left:auto;text-align:right}

/* 随时可以：三个入口分量相同，做成安静的纸片，不跟作业抢眼 */
.entries{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 4px}
.entry{border:0;background:var(--paper);border-radius:var(--r-s);padding:14px 8px 12px;cursor:pointer;
  box-shadow:0 2px 0 var(--line);display:flex;flex-direction:column;align-items:center;gap:6px;
  font:inherit;color:var(--text);text-align:center}
.entry:active{transform:translateY(2px);box-shadow:0 0 0 var(--line)}
.entry .e-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.entry .e-ic svg{width:22px;height:22px;stroke-width:2.1}
.entry .e-ic.sky{background:var(--sky-wash);color:var(--sky)}
.entry .e-ic.mint{background:var(--mint-wash);color:var(--mint-shade)}
.entry .e-ic.star{background:var(--star-wash);color:var(--star-shade)}
.entry b{font-size:13.5px;font-weight:700}
.entry i{font-style:normal;font-size:11px;color:var(--text-3);line-height:1.35}

/* 「我的」里的整本册子 */
.seal-book.big{padding:16px 14px 14px}
.sb-count{font-size:12.5px;color:#8A7A60}
.sb-count b{font-family:var(--serif);font-size:20px;color:var(--seal-deep);margin:0 2px}
.sb-week{margin-bottom:10px;opacity:.72}
.sb-week.now{opacity:1;margin-bottom:2px}      /* 这周最亮，往前的几周退到背景里 */
.sb-week .seal{width:32px;height:32px;font-size:16px}
.sb-week.now .seal{width:38px;height:38px;font-size:19px}
.sb-wk{display:block;font-size:10.5px;color:#B3A78E;letter-spacing:.06em;margin-bottom:5px}
.sb-week .seal-row{gap:6px}
.seal-book.big .sb-hint{padding-top:10px;border-top:1px dashed var(--rice-line)}

/* 星星要有个看得见的去处，不然攒着没意思 */
.reward-strip{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit;
  border:0;background:var(--paper);border-radius:var(--r);padding:12px 14px;margin-top:14px;box-shadow:0 2px 0 var(--line)}
.reward-strip:active{transform:translateY(2px);box-shadow:0 0 0 var(--line)}
.reward-strip .rs-ic{width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--star-wash);
  color:var(--star);display:flex;align-items:center;justify-content:center}
.reward-strip .rs-ic svg{width:20px;height:20px}
.reward-strip b{display:block;font-size:13.5px;font-weight:700}
.reward-strip i{font-style:normal;font-size:12px;color:var(--text-2)}
.reward-strip .rs-bar{display:block;height:5px;border-radius:99px;background:var(--wash);overflow:hidden;margin-top:6px}
.reward-strip .rs-bar i{display:block;height:100%;border-radius:99px;background:var(--star)}
.reward-strip .rs-num{flex:0 0 auto;font:700 17px/1 var(--serif);color:var(--star-shade)}
.reward-strip .rs-num em{font:600 11px var(--sans);font-style:normal;color:var(--text-3)}
.reward-strip.can{background:var(--star-wash);box-shadow:0 2px 0 #EBDCB6}
.reward-strip.can .rs-ic{background:#fff}
.reward-strip .rs-go{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--star-shade)}

/* ---------- 集印册 ----------
 * 全站的招牌。一方印不是圆点：是略带圆角的方印，朱砂色，轻微歪一点，
 * 边上有一点"没按匀"的缺口 —— 那点不完美才像真的盖上去的。
 * 空位只画极淡的虚线方框，不能画得像"没做到"的红叉。 */
.seal-book{background:var(--rice);border:1px solid var(--rice-line);border-radius:var(--r);
  padding:16px 14px 14px;margin-bottom:14px;position:relative;overflow:hidden}
.seal-book::after{                      /* 纸的纤维感，很淡，凑近才看得见 */
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(circle at 20% 30%,rgba(154,107,79,.05) 0 1px,transparent 1px),
             radial-gradient(circle at 70% 60%,rgba(154,107,79,.05) 0 1px,transparent 1px);
  background-size:22px 22px,31px 31px}
.seal-book > *{position:relative;z-index:1}
.seal-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.seal-cell{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;color:#9A8F7A}
.seal{width:38px;height:38px;border-radius:9px;border:1.5px solid var(--rice-line);
  display:flex;align-items:center;justify-content:center;font:700 19px/1 var(--serif);color:#D8CCB4;
  background:rgba(255,255,255,.55)}
.seal.ghost::after{content:'读'}           /* 只有本周的空格写「读」：这是下一枚要盖的位置 */
.seal.today{border-color:var(--seal);border-width:2px;border-style:dashed;color:#E8B5AC}
.seal.on{
  border:none;color:#fff;background:var(--seal);
  border-radius:8px;transform:rotate(-5deg);
  /* 印泥没按匀：内侧一圈淡淡的深色，边角略微发白 */
  /* 印泥没按匀：内圈一道白边，边角略微发虚。收着点，别做成立体按钮 */
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3),inset 0 -3px 7px -5px rgba(0,0,0,.28)}
.seal.on.gold{background:var(--star)}          /* 优秀作业那一枚 */
.seal-cell:nth-child(even) .seal.on{transform:rotate(4deg)}
.seal-cell.is-today{color:var(--seal-deep);font-weight:700}
@keyframes sealdrop{0%{transform:scale(2.2) rotate(-16deg);opacity:0}
  55%{transform:scale(.92) rotate(-5deg);opacity:1}100%{transform:scale(1) rotate(-5deg)}}
.seal.fresh{animation:sealdrop .42s cubic-bezier(.2,1.4,.5,1) both}
@media(prefers-reduced-motion:reduce){.seal.fresh{animation:none}}

/* ---------- 列表与书 ---------- */
.booktile{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.booktile:last-child{border-bottom:0}
.booktile .cv{width:50px;height:64px;border-radius:6px 12px 12px 6px;background:var(--sky);color:#fff;
  box-shadow:inset 6px 0 0 rgba(0,0,0,.14),0 3px 0 var(--sky-shade);
  display:flex;align-items:center;justify-content:center;font:800 22px var(--sans);flex:0 0 auto}
.booktile:nth-child(3n+2) .cv{background:var(--mint);box-shadow:inset 6px 0 0 rgba(0,0,0,.14),0 3px 0 var(--mint-shade)}
.booktile:nth-child(3n) .cv{background:var(--coral);box-shadow:inset 6px 0 0 rgba(0,0,0,.14),0 3px 0 var(--coral-shade)}

.listitem{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.listitem:last-child{border-bottom:0}
.listitem .n{width:34px;height:34px;border-radius:12px;background:var(--wash);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font:800 14px var(--sans);flex:0 0 auto}

/* ---------- 点读器 ---------- */
.reader{flex:1;overflow:auto;background:var(--bg);position:relative;padding-bottom:150px}
.pagewrap{position:relative;width:100%;line-height:0;background:var(--paper)}
.pagewrap img{width:100%;display:block}
.hs{position:absolute;border-radius:6px;border:2px solid transparent;transition:background .15s,border-color .15s}
.hs.show{border:2px dashed rgba(61,139,255,.6)}
.hs.hw{box-shadow:inset 0 0 0 2px rgba(255,107,87,.7)}
/* 荧光笔：像在课本上画重点 */
.hs.active{background:rgba(255,194,61,.38);border:2px solid var(--star-shade)}

.playbar{position:absolute;left:0;right:0;bottom:0;background:var(--paper);border-radius:22px 22px 0 0;
  box-shadow:0 -2px 0 var(--line);padding:14px 16px 16px;z-index:30}
.subtitle{font:500 17px/1.4 var(--en);color:var(--ink-deep);min-height:24px;margin-bottom:2px}
.subtitle-cn{font-size:13px;color:var(--text-2);min-height:18px;margin-bottom:12px}
.ctrls{display:flex;align-items:center;gap:8px}
.ctrls .btn{flex:0 0 auto}
.iconbtn{width:44px;height:44px;border-radius:14px;border:0;background:var(--wash);
  color:var(--ink);font:800 14px var(--sans);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  box-shadow:0 3px 0 var(--wash-2)}
.iconbtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--wash-2)}
.iconbtn.on{background:var(--sky);color:#fff;box-shadow:0 3px 0 var(--sky-shade)}
.iconbtn svg{width:22px;height:22px}
.iconbtn.rec{background:var(--coral);color:#fff;box-shadow:0 3px 0 var(--coral-shade)}
.iconbtn.rec.recording{animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,107,87,.25),0 3px 0 var(--coral-shade)}}

/* ---------- 作业 ---------- */
.hwitem{background:var(--paper);border-radius:var(--r);padding:14px 16px;margin-bottom:12px;cursor:pointer;box-shadow:0 2px 0 var(--line)}
/* 一眼要能分出"该我动手"和"已经过去了"：前者带朱砂边和一个去做的按钮，后者整体退一层 */
.hwitem.act{position:relative;overflow:hidden;padding-left:20px}
.hwitem.act::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--seal)}
.hwitem.done{background:#FCFBFE;box-shadow:0 1px 0 var(--line)}
.hwitem.done .strong{font-weight:600;color:var(--text-2)}
.hw-go{flex:0 0 auto;font-size:12.5px;font-weight:700;color:#fff;background:var(--seal);
  padding:4px 11px;border-radius:999px;box-shadow:0 2px 0 var(--seal-deep)}
.hwitem.act:active .hw-go{transform:translateY(2px);box-shadow:0 0 0 var(--seal-deep)}
.hw-head{display:flex;align-items:baseline;gap:8px;padding:2px 2px 10px}
.hw-head b{font-size:16px;color:var(--ink-deep)}
.hw-head span{font-size:12.5px;color:var(--text-3)}
.hw-head.act b{color:var(--seal-deep)}
.pill.excellent{background:var(--seal);color:#fff;font-family:var(--serif);font-weight:700;
  border-radius:6px;padding:1px 9px;transform:rotate(-4deg);display:inline-block}
.sentence{background:var(--paper);border-radius:var(--r);padding:16px;margin-bottom:12px;box-shadow:0 2px 0 var(--line)}
.sentence.done{box-shadow:0 2px 0 var(--line),inset 4px 0 0 var(--mint)}
.sentence .en{font:500 18px/1.45 var(--en);color:var(--ink-deep);margin-bottom:2px}
.sentence .cn{font-size:13px;color:var(--text-2);margin-bottom:12px}
.stars{font-size:22px;letter-spacing:2px;color:var(--star);cursor:pointer;user-select:none;text-shadow:0 2px 0 var(--star-shade)}
.stars .off{color:var(--wash-2);text-shadow:none}
.rank{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:var(--wash);color:var(--text-2);font:800 11px var(--sans);font-style:normal;margin-right:8px}
.rank.top{background:var(--star);color:#5C3B00}

/* ---------- 听力模式 ---------- */
.view.listen-view{display:flex;flex-direction:column;overflow:hidden;padding:0;background:var(--paper)}
.listen-head{flex:0 0 auto;padding:16px 20px 14px;background:var(--mint);color:#fff}
.listen-head .muted{color:rgba(255,255,255,.88)}
.listen-title{font-size:21px;font-weight:800;margin-top:2px}
.listen-lines{flex:1 1 auto;overflow-y:auto;padding:10px 12px 24px;-webkit-overflow-scrolling:touch}
.ln{display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  padding:12px 14px;border-radius:14px;font:inherit;color:inherit;margin-bottom:2px}
.ln-en{display:block;font:400 17px/1.5 var(--en);color:var(--text-3);transition:color .2s}
.ln-cn{display:block;font-size:12.5px;color:var(--text-3);margin-top:2px}
.ln.on{background:var(--mint-wash)}
.ln.on .ln-en{color:var(--ink-deep);font-size:19px}
.ln.on .ln-cn{color:var(--text-2)}
.hide-cn .ln-cn{display:none}
.listen-bar{flex:0 0 auto;padding:10px 18px 16px;background:var(--paper);box-shadow:0 -2px 0 var(--line)}
.listen-bar input[type=range]{width:100%;padding:0;border:0;accent-color:var(--mint);height:22px}
.listen-ctrls{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.listen-ctrls .btn.sm{min-width:74px}
.ls-play{width:68px;height:68px;border-radius:50%;border:0;background:var(--mint);color:#fff;
  font:800 16px var(--sans);cursor:pointer;flex:0 0 auto;box-shadow:0 5px 0 var(--mint-shade)}
.ls-play:active{transform:translateY(3px);box-shadow:0 2px 0 var(--mint-shade)}

/* ---------- 学习海报 ---------- */
.poster-mask{position:absolute;inset:0;z-index:100;background:rgba(28,17,71,.6);
  display:flex;align-items:center;justify-content:center;padding:20px}
.poster-sheet{background:var(--paper);border-radius:var(--r);padding:14px;width:100%;max-width:360px;
  display:flex;flex-direction:column;gap:12px;max-height:100%;overflow:auto}
.poster-sheet img{width:100%;display:block;border-radius:12px;box-shadow:0 0 0 1px var(--line);-webkit-touch-callout:default}

/* ---------- 庆祝：印章盖下 + 星星迸出 ---------- */
.celebrate{position:absolute;inset:0;z-index:120;background:rgba(28,17,71,.55);display:flex;align-items:center;justify-content:center;padding:28px}
.celebrate .box{background:var(--paper);border-radius:28px;padding:30px 22px 20px;width:100%;max-width:320px;text-align:center;position:relative}
/* 攒到一枚印的那一刻：和册子里的印是同一方印，只是放大了盖下来 */
.celebrate .stamp{width:124px;height:124px;margin:0 auto 16px;border-radius:26px;background:var(--seal);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;
  box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.34),inset 0 -8px 16px -10px rgba(0,0,0,.4);
  animation:slam .55s cubic-bezier(.2,1.5,.4,1) both}
.celebrate .stamp b{font:700 56px/1 var(--serif)}
.celebrate .stamp span{font-size:12px;font-weight:700;margin-top:6px;opacity:.9;letter-spacing:.08em}
.celebrate h3{margin:0;font-size:22px;font-weight:800;color:var(--ink-deep)}
.celebrate p{margin:6px 0 16px;color:var(--text-2);font-size:14px}
.celebrate .gain{display:inline-flex;align-items:center;gap:6px;background:var(--star-wash);color:#8A5A00;font-weight:800;
  padding:6px 14px;border-radius:999px;margin-bottom:18px}
.celebrate .gain svg{width:20px;height:20px;color:var(--star)}
.celebrate .spark{position:absolute;left:50%;top:89px;width:18px;height:18px;margin:-9px;color:var(--star);
  animation:spark .7s ease-out .25s both}
.celebrate .spark svg{width:18px;height:18px}
@keyframes slam{0%{transform:scale(2.2) rotate(-24deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(-6deg);opacity:1}}
@keyframes spark{0%{transform:translate(0,0) scale(.3);opacity:0}30%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .celebrate .stamp{animation:none;transform:rotate(-6deg)}
  .celebrate .spark{display:none}
  .iconbtn.rec.recording{animation:none}
}

/* ---------- 后台（宽屏） ---------- */
body.admin{align-items:stretch;background:var(--paper);padding:0}
body.admin #app{max-width:none;border-radius:0;height:100dvh;box-shadow:none}
.admin-wrap{display:flex;height:100%;overflow:hidden}
.side{width:280px;flex:0 0 auto;border-right:1px solid var(--line);background:#FBFAFE;overflow-y:auto;padding:14px}
.main{flex:1;overflow:auto;padding:18px;min-width:0}
.tree-book{font-weight:800;color:var(--ink-deep);margin:14px 0 4px}
.tree-lesson{font-size:13px;color:var(--text-2);margin:8px 0 2px;padding-left:8px}
.tree-page{font-size:13px;padding:6px 10px;border-radius:8px;cursor:pointer;margin-left:14px;color:var(--text-2)}
.tree-page:hover{background:var(--wash)}
.tree-page.on{background:var(--wash);color:var(--ink);font-weight:700}
.canvas-wrap{position:relative;display:inline-block;line-height:0;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;background:#fff;cursor:crosshair;user-select:none}
.canvas-wrap img{display:block;max-width:100%}
.abox{position:absolute;border:2px solid var(--sky);background:rgba(61,139,255,.1);border-radius:4px}
.abox.sel{border-color:var(--coral);background:rgba(255,107,87,.14)}
.abox .lbl{position:absolute;top:-19px;left:-2px;background:var(--sky);color:#fff;font-size:10px;
  padding:1px 5px;border-radius:4px;line-height:1.5}
.abox.sel .lbl{background:var(--coral)}
.hs-row{display:flex;gap:8px;align-items:flex-start;padding:8px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.hs-row:hover{background:#FBFAFE}
.hs-row.sel{background:var(--star-wash);border-color:#FFE3A3}
.hs-row .idx{width:22px;height:22px;border-radius:50%;background:var(--wash);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:2px}
table.mini{width:100%;border-collapse:collapse;font-size:13px}
table.mini th,table.mini td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}
table.mini th{color:var(--text-3);font-weight:700;font-size:12px}

/* 我的：头像与等级 */
.avatar{width:58px;height:58px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:18px;flex:0 0 auto;box-shadow:0 3px 0 var(--ink-shade)}
.level-line b{display:inline-block;margin-top:4px;background:var(--star);color:#5C3B00;font-size:12px;padding:1px 9px;border-radius:999px}
.btn svg.i{width:18px;height:18px}
/* 标题过长时单行省略，不把顶栏撑成两行 */
.topbar h1 > .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.topbar h1 > .sub{flex:0 0 auto}
/* 点读页翻页 */
.pagenav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
.pagenav .btn.sm{min-width:88px}
.pagenav .muted{flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 点读页左右滑动用来翻页：横向手势由页面处理，避免浏览器把右滑当成"返回上一页"直接离开应用 */
.reader{touch-action:pan-y pinch-zoom;overscroll-behavior:contain}
/* 微信里保存海报的提示：微信不支持下载按钮，只能长按图片 */
.save-tip{background:var(--star-wash);color:#6B4700;border-radius:14px;padding:10px 12px;font-size:14px;line-height:1.6;text-align:center}
.save-tip b{color:var(--ink-deep)}

/* ---------- 公开宣传页：分享页、作品展、预约试听 ---------- */
body.pub{align-items:flex-start}
#app.pub-app{min-height:100dvh;height:auto;overflow:visible}
@media(min-width:900px){ body.pub{padding:24px 0} #app.pub-app{height:auto;min-height:auto} }
.pub-head{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--paper);box-shadow:0 1px 0 var(--line)}
.pub-head img{width:36px;height:36px}
.pub-school{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--ink-deep);letter-spacing:.08em}
.pub-en{font-size:10px;letter-spacing:.2em;color:var(--text-3)}
.pub-main{padding:16px}
.pub-hero{margin-bottom:14px}
.pub-poster{width:100%;display:block;border-radius:var(--r);box-shadow:0 2px 0 var(--line)}
.pub-comment{margin:8px 0;font-size:15px;line-height:1.7}
.pub-photos{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.pub-photo{border:0;padding:0;background:var(--wash);border-radius:12px;overflow:hidden;cursor:zoom-in;aspect-ratio:3/4}
.pub-photo img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.pub-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:200;display:flex;align-items:center;justify-content:center;
  padding:max(12px,env(safe-area-inset-top,0px)) 12px max(12px,env(safe-area-inset-bottom,0px));
  cursor:zoom-out;animation:lbIn .16s ease-out}
.pub-lightbox img{max-width:100%;max-height:100%}
.pub-intro{padding:8px 2px 14px}
.pub-intro h1{font-size:26px;font-weight:800;color:var(--ink-deep);margin:0 0 4px}
.pub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px}
.pub-work{background:var(--paper);border-radius:var(--r);overflow:hidden;box-shadow:0 2px 0 var(--line);text-decoration:none;color:var(--text);display:flex;flex-direction:column}
.pub-work img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--wash)}
.pub-work b{padding:8px 10px 0;font-size:14px}
.pub-work span{padding:2px 10px 10px;font-size:12px;color:var(--text-2)}
.pub-form .field > span{display:block;font-size:13px;font-weight:700;color:var(--text-2);margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;padding:7px 14px;border-radius:999px;background:var(--wash);color:var(--text-2);font-weight:700;font-size:14px}
.chip span{transition:background .12s,color .12s,box-shadow .12s}
.chip input:checked + span{color:#fff;background:var(--ink);box-shadow:0 2px 0 rgba(28,17,71,.18)}
.chip.sky input:checked + span{background:var(--sky)} .chip.coral input:checked + span{background:var(--coral)}
.chip.mint input:checked + span{background:var(--mint)} .chip.star input:checked + span{background:var(--star);color:#5C3B00}
.chip.umber input:checked + span{background:var(--umber)}
.chip input:focus-visible + span{outline:3px solid var(--sky);outline-offset:2px}
.agree{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--text-2);margin:4px 0 14px;line-height:1.6}
.agree input{width:18px;height:18px;margin-top:2px;flex:0 0 auto}
.pub-done{text-align:center;padding:10px 0}
.pub-done b{font-size:18px;color:var(--mint-shade)}
.pub-links{padding:12px}

/* 分享引导：箭头指向微信右上角的「···」 */
.share-guide{position:fixed;inset:0;z-index:150;background:rgba(28,17,71,.82);color:#fff;display:flex;flex-direction:column;align-items:flex-end;padding:18px 22px}
.share-guide .arrow{width:64px;height:64px;margin-right:4px;border-top:4px solid var(--star);border-right:4px solid var(--star);border-radius:0 40px 0 0;transform:rotate(-12deg)}
.share-guide .tip{align-self:center;margin-top:28px;text-align:center;font-size:20px;line-height:1.7}
.share-guide .tip b{color:var(--star)}
.share-guide .btn{align-self:center;margin-top:24px;min-width:140px}

/* ---------- 多科目：科目标签、筛选 ---------- */
.subj{display:inline-block;vertical-align:1px;font-size:11.5px;font-weight:800;padding:1px 7px;border-radius:6px;margin-right:6px;
  background:var(--wash);color:var(--ink)}
.subj.sky{background:var(--sky-wash);color:var(--sky-shade)} .subj.coral{background:var(--coral-wash);color:var(--coral-shade)}
.subj.mint{background:var(--mint-wash);color:var(--mint-shade)} .subj.star{background:var(--star-wash);color:#8A5A00}
.subj.umber{background:var(--umber-wash);color:var(--umber-shade)}
.fchip{border:0;font:700 14px var(--sans);padding:7px 14px;border-radius:999px;background:var(--paper);color:var(--text-2);cursor:pointer;box-shadow:0 2px 0 var(--line)}
.fchip.on{background:var(--ink);color:#fff;box-shadow:0 2px 0 var(--ink-shade)}
.fchip.sky.on{background:var(--sky);box-shadow:0 2px 0 var(--sky-shade)} .fchip.coral.on{background:var(--coral);box-shadow:0 2px 0 var(--coral-shade)}
.fchip.mint.on{background:var(--mint);box-shadow:0 2px 0 var(--mint-shade)} .fchip.star.on{background:var(--star);color:#5C3B00;box-shadow:0 2px 0 var(--star-shade)}
.score{font:800 20px var(--sans);color:var(--ink-deep)} .score small{font-size:12px;font-weight:600;color:var(--text-3)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer;line-height:1.5}
.check input{width:20px;height:20px;flex:0 0 auto;margin:2px 0 0;accent-color:var(--ink)}

/* ---------- 老师出题 ---------- */
.seg{display:flex;background:var(--wash-2);border-radius:14px;padding:4px}
.seg button{flex:1;border:0;background:transparent;font:700 15px var(--sans);color:var(--text-2);padding:9px;border-radius:10px;cursor:pointer}
.seg button.on{background:var(--paper);color:var(--ink);box-shadow:0 2px 0 var(--line)}
.qtypes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.qtypes .btn{padding:8px 0}
.opt-ed{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.opt-ed input{padding:10px 12px}
.optk{flex:0 0 auto;width:40px;height:40px;border-radius:12px;border:2px solid var(--line);background:var(--paper);
  font:800 15px var(--sans);color:var(--text-3);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.optk.on{background:var(--mint);border-color:var(--mint);color:#fff}
span.optk{cursor:default;background:var(--wash);border-color:var(--wash);color:var(--ink)}
.x{flex:0 0 auto;width:34px;height:34px;border:0;border-radius:50%;background:var(--wash);color:var(--text-2);font-size:20px;line-height:1;cursor:pointer}
.stem-img img{width:100%;display:block;border-radius:12px;margin-bottom:8px;box-shadow:0 0 0 1px var(--line)}

/* ---------- 老师批改 ---------- */
details.rv > summary{list-style:none;cursor:pointer}
details.rv > summary::-webkit-details-marker{display:none}
details.rv > summary::after{content:'›';color:var(--text-3);font-size:20px;margin-left:4px;transition:transform .15s}
details.rv[open] > summary::after{transform:rotate(90deg)}
.rv-body{margin-top:10px}
.rv-q{padding:12px 0;border-top:1px solid var(--line)}
.rv-head{display:flex;gap:6px;align-items:center;margin-bottom:4px}
.rv-stem{font-size:14px;color:var(--text-2);white-space:pre-wrap;margin-bottom:6px}
.rv-text{white-space:pre-wrap;background:var(--wash);border-radius:12px;padding:10px 12px;font-size:15px}
.mark{font:800 13px var(--sans);padding:2px 9px;border-radius:999px;white-space:nowrap}
.mark.ok{background:var(--mint-wash);color:var(--mint-shade)} .mark.bad{background:var(--coral-wash);color:var(--coral-shade)}
.mark.mid{background:var(--star-wash);color:#8A5A00}
.grade{display:flex;align-items:center;gap:4px;flex:0 0 auto;font-size:13px;color:var(--text-3)}
.grade input{width:64px;padding:10px 8px;text-align:center;font-weight:700}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.thumb{position:relative;border:0;padding:0;border-radius:12px;overflow:hidden;background:var(--wash);aspect-ratio:1;cursor:zoom-in;display:block}
.thumb.sm{width:96px;margin-bottom:6px}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .x{position:absolute;top:4px;right:4px;width:28px;height:28px;background:rgba(28,17,71,.7);color:#fff;font-size:17px}
/* 简介照片：每张右上角一个叉（照片删了就没了，按下去先问一句），
 * 左下角标一下哪几张会上门户首页 —— 不标的话没人知道这里的顺序决定了首页 */
.thumb-wrap{position:relative}
.thumb-wrap .thumb{width:100%}
.thumb-x{position:absolute;top:4px;right:4px;width:28px;height:28px;border:0;border-radius:50%;
  background:rgba(28,17,71,.72);color:#fff;font:400 18px/1 var(--sans);cursor:pointer;
  display:grid;place-items:center}
.thumb-tag{position:absolute;left:4px;bottom:4px;font-style:normal;font-size:11px;letter-spacing:.06em;
  background:rgba(28,17,71,.72);color:#fff;border-radius:6px;padding:1px 6px}
.thumb.pick{cursor:pointer;display:grid;place-items:center;border:1px dashed var(--line)}
.thumb.pick .pick-hint{font-size:12px;color:var(--text-3)}
.thumb.add{cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:2px dashed var(--wash-2);background:var(--paper);color:var(--ink);font-size:12.5px;font-weight:700;text-align:center;padding:6px}
.thumb.add svg{width:28px;height:28px}

/* ---------- 咨询 ---------- */
.minis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.minis > div{background:var(--wash);border-radius:14px;padding:10px;text-align:center}
.minis b{display:block;font:800 24px var(--sans);color:var(--ink-deep)} .minis span{font-size:12px;color:var(--text-2)}
.lead.new{box-shadow:0 2px 0 var(--line),inset 4px 0 0 var(--coral)}
.lead.enrolled{box-shadow:0 2px 0 var(--line),inset 4px 0 0 var(--mint)}
.lead.invalid{opacity:.6}
.lead-phone{font-size:19px;color:var(--ink);text-decoration:none;letter-spacing:.02em}
.lead-st{width:auto;padding:6px 10px;font-size:14px}

/* ---------- 学生做题 ---------- */
.qcard{background:var(--paper);border-radius:var(--r);padding:16px;margin-bottom:12px;box-shadow:0 2px 0 var(--line)}
.q-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.q-no{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font:800 14px var(--sans);display:inline-flex;align-items:center;justify-content:center}
.q-stem{font-size:17px;line-height:1.6;color:var(--ink-deep);white-space:pre-wrap;margin-bottom:10px}
.stem-pic{border:0;padding:0;background:none;display:block;width:100%;margin-bottom:10px;cursor:zoom-in}
.stem-pic img{width:100%;display:block;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:2px solid var(--line);background:var(--paper);
  border-radius:14px;padding:10px 12px;font:500 16px/1.4 var(--sans);color:var(--text);cursor:pointer}
.opt i{font-style:normal;flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--wash);color:var(--ink);
  font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.opt.on{border-color:var(--sky);background:var(--sky-wash)}
.opt.on i{background:var(--sky);color:#fff}
.judge .opt{justify-content:center;font-weight:700}
.blanks{display:flex;flex-direction:column;gap:8px}
.blank{display:flex;align-items:center;gap:8px}
.blank > span{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:var(--wash);color:var(--ink);font-weight:800;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
.blank input{padding:10px 12px}
.q-my{font-size:15px}
.q-my.pre{white-space:pre-wrap;background:var(--wash);border-radius:12px;padding:10px 12px}
.q-key{font-size:14px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.btn.recording{animation:pulse 1s infinite}
.result{position:relative}
.bigscore{font:800 44px/1.1 var(--sans);color:var(--ink-deep)} .bigscore small{font-size:16px;font-weight:600;color:var(--text-3)}
.seal-ex{width:72px;height:72px;border:4px solid #D93A2B;color:#D93A2B;border-radius:10px;transform:rotate(-10deg);
  font:900 42px/64px var(--serif);text-align:center;flex:0 0 auto}
.result.excellent{box-shadow:0 2px 0 var(--line),inset 0 4px 0 #D93A2B}
.teacher-say{margin-top:12px;background:var(--wash);border-radius:14px;padding:10px 12px;font-size:15px}
.teacher-say b{display:block;font-size:12px;color:var(--text-3)}
.warnbox{box-shadow:0 2px 0 var(--line),inset 4px 0 0 var(--coral)}
.share-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.share-row:first-of-type{margin-top:10px}
.share-row img,.share-row .ph{width:48px;height:64px;object-fit:cover;border-radius:8px;flex:0 0 auto;background:var(--wash)}
.share-row .ph{font-size:11px;color:var(--text-3);display:flex;align-items:center;justify-content:center}
.share-row.revoked{opacity:.6}
.poster-sheet .check{margin:12px 0 6px}
@media (prefers-reduced-motion: reduce){ .btn.recording{animation:none} }
div.field{margin-bottom:14px}
div.field > span{display:block;font-size:13px;font-weight:700;color:var(--text-2);margin-bottom:6px}
.qed .btn.grey + label.field,.qed div.field > .btn{margin-top:2px}
.share-acts{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.share-acts .btn{padding:6px 12px}

/* ---------- 班级按科目分组 ---------- */
.group-title{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:800;color:var(--ink-deep);margin:18px 2px 10px}
.group-title:first-child{margin-top:2px}
.group-title::before{content:'';width:6px;height:18px;border-radius:3px;background:var(--ink)}
.group-title.sky::before{background:var(--sky)} .group-title.coral::before{background:var(--coral)} .group-title.mint::before{background:var(--mint)} .group-title.star::before{background:var(--star)}
.group-title.umber::before{background:var(--umber)}
.group-title .muted{margin-left:auto;font-weight:400}
.card.cls.sky{box-shadow:0 2px 0 var(--line),inset 4px 0 0 var(--sky)} .card.cls.coral{box-shadow:0 2px 0 var(--line),inset 4px 0 0 var(--coral)}
.card.cls.mint{box-shadow:0 2px 0 var(--line),inset 4px 0 0 var(--mint)} .card.cls.star{box-shadow:0 2px 0 var(--line),inset 4px 0 0 var(--star)}
.class-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line)}
.bigcode{font:800 44px/1.2 var(--sans);letter-spacing:.18em;color:var(--ink-deep);margin:10px 0 8px}
.picklist{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto}

/* ---------- 预约试听 ---------- */
/* 家长在微信里点开的第一屏：一方「试」印当抬头，比一行光秃秃的标题有记忆点 */
.pub-hero-trial{position:relative;padding:22px 2px 20px}
.pub-hero-trial h1{font-family:var(--serif);font-size:34px;line-height:1.25;font-weight:700;
  color:var(--ink-deep);margin:0 0 10px;letter-spacing:.02em}
.pub-hero-trial p{margin:0;font-size:13.5px;color:var(--text-2);letter-spacing:.04em}
.pub-hero-trial .ph-seal{position:absolute;right:6px;top:14px;width:64px;height:64px;border-radius:13px;
  background:var(--seal);color:#fff;font:700 38px/64px var(--serif);text-align:center;transform:rotate(-6deg);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}
.pub-hero-trial .ph-slogan{display:inline-block;margin-top:14px;font-family:var(--serif);font-size:15px;
  letter-spacing:.1em;color:var(--seal-deep);border-bottom:1.5px solid var(--seal-wash);padding-bottom:3px}

/* 科目摊成一行；勾中哪个，下面才出现那一科的课程 */
.subj-picker{display:flex;flex-direction:column;gap:10px}
.subj-row{display:flex;flex-wrap:wrap;gap:8px}
/* 课程用等宽网格，不用 flex 换行 ——
 * flex 会按名字长短排成「3 个 + 1 个」这种一头沉的样子。
 * 列数按数量挑：1～3 个一行排完，4 个排 2×2，再多就三列（6 个=3+3，5 个=3+2）。 */
.course-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  background:var(--wash);border-radius:12px;padding:10px 12px}
.course-chips[data-n="1"]{grid-template-columns:1fr}
.course-chips[data-n="2"]{grid-template-columns:repeat(2,1fr)}
.course-chips[data-n="4"]{grid-template-columns:repeat(2,1fr)}
.cc-label{grid-column:1/-1;font-size:12px;font-weight:700;color:var(--text-2)}
.chip.sm span{padding:5px 11px;font-size:13px;font-weight:600;background:#fff}
/* 网格里每格填满，字居中，长名字（初中精品数学）也不挤出格子 */
.course-chips .chip{display:block}
.course-chips .chip span{display:block;text-align:center;padding:7px 4px;
  font-size:12.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.sm input:checked + span{background:var(--ink);color:#fff}
.pub-slogan{margin:16px 0 2px;text-align:center;font-family:var(--serif);font-size:17px;letter-spacing:.08em;color:var(--ink)}
/* 全页唯一要家长动手的地方，用朱砂，别和满页的靛蓝混在一起 */
/* 不能叫 .seal：那是集印册里"一方印"的类名，会把按钮的字变成米色宋体、高度锁死 38px */
.btn.cta{background:var(--seal);box-shadow:0 3px 0 var(--seal-deep)}
.btn.cta:active{box-shadow:0 1px 0 var(--seal-deep)}
/* 作业班用品牌深紫：小标签是浅底深字，选中时是深底白字，和其他科目一样醒目 */
.subj.ink{background:var(--wash);color:var(--ink)}
.chip.ink input:checked + span{background:var(--ink);color:#fff}
.fchip.ink.on{background:var(--ink);color:#fff;box-shadow:0 2px 0 var(--ink-shade)}
.card.cls.ink{box-shadow:0 2px 0 var(--line),inset 4px 0 0 var(--ink)}
.group-title.ink::before{background:var(--ink)}
.lead-msg{margin-top:6px;background:var(--wash);border-radius:12px;padding:8px 10px;font-size:14px;line-height:1.55}

/* ---------- 作业班评分栏 ---------- */
.rubric{margin-top:12px;padding:12px;background:var(--wash);border-radius:14px}
.rub-row{padding:4px 0}
.rub-row .stars{font-size:19px}
.rubric .mins{width:92px;padding:8px 10px;text-align:center}
.rubric input:not(.mins){margin-top:8px;background:var(--paper)}
.symgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-height:44vh;overflow:auto}
.symgrid button{border:2px solid var(--line);background:var(--paper);border-radius:10px;padding:10px 0;
  font:600 17px var(--sans);color:var(--ink-deep);cursor:pointer}
.symgrid button:active{background:var(--wash)}

/* ---------- 星星奖品 ---------- */
.reward.off{opacity:.55}
.rw-pic{width:64px;height:64px;border-radius:12px;object-fit:cover;background:var(--wash);flex:0 0 auto}
.rw-pic.none{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-3)}
.rw-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.rw-row:first-child{border-top:0}
.rw-row img,.rw-none{width:52px;height:52px;border-radius:12px;object-fit:cover;background:var(--wash);flex:0 0 auto}
.rw-none{display:flex;align-items:center;justify-content:center;color:var(--star)}
.rw-none svg{width:26px;height:26px}
.rw-bar{margin-top:6px;height:6px;border-radius:3px;background:var(--wash-2);overflow:hidden}
.rw-bar i{display:block;height:100%;background:var(--star)}
.nowrap{white-space:nowrap}
.rubric-view{margin-top:10px;padding:10px 12px;background:var(--wash);border-radius:14px}
.rubric-view .stars{font-size:17px}

/* ---------- 教务档案 ---------- */
.card.stu{cursor:pointer}
.right{text-align:right}
.pkg.paused{opacity:.75;box-shadow:0 2px 0 var(--line),inset 4px 0 0 var(--star)}
.pkg.finished{opacity:.6}
.pkg.active{box-shadow:0 2px 0 var(--line),inset 4px 0 0 var(--mint)}
.logline{padding:5px 0;border-top:1px solid var(--line)}
.logline:first-child{border-top:0}
.logline .minus{color:var(--coral-shade)} .logline .plus{color:var(--mint-shade)}
.card.roll{padding:12px 14px}
input[type="date"]{padding:8px 10px;font-size:14px}
.about-photos{grid-template-columns:1fr}
.pub-photo.wide{aspect-ratio:auto}
.pub-photo.wide img{height:auto;object-fit:contain}
.about-text p{margin:0 0 10px;font-size:15.5px;line-height:1.8}

/* ---------- 教务台 ---------- */
.rollgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rollchip{border:0;text-align:left;border-radius:14px;padding:10px 12px;background:var(--wash);cursor:pointer;
  font-family:var(--sans);color:var(--ink-deep);box-shadow:inset 0 0 0 2px var(--wash-2)}
.rollchip b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rollchip span{font-size:12px;color:var(--coral-shade);font-weight:700}
.rollchip.done{background:var(--mint-wash);box-shadow:none}
.rollchip.done span{color:var(--mint-shade)}
.tile .t-num{font:800 26px/1 var(--sans);opacity:.9}
.alertline{padding:7px 0;border-top:1px solid var(--line);cursor:pointer}

/* ================= 电脑版教务后台 ================= */
body.office{display:block;background:var(--bg)}
body.office #app{max-width:none;width:100%;min-height:100dvh;border-radius:0;box-shadow:none;background:var(--bg);display:flex;flex-direction:column}
.of-top{display:flex;align-items:center;gap:14px;padding:10px 20px;background:var(--paper);box-shadow:0 1px 0 var(--line);position:sticky;top:0;z-index:20}
.of-name{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--ink-deep);letter-spacing:.06em}
.of-name span{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--text-3)}
.of-nav{display:flex;gap:6px;margin-left:18px}
.of-nav button{border:0;background:transparent;font:700 15px var(--sans);color:var(--text-2);padding:8px 14px;border-radius:12px;cursor:pointer}
.of-nav button:hover{background:var(--wash)}
.of-nav button.on{background:var(--ink);color:#fff}
.of-me{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-2)}
.of-me i{font-style:normal;margin-left:6px;font-size:12px;color:var(--text-3)}
.of-main{padding:18px 20px 40px;flex:1}
.of-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.of-bar select,.of-bar input[type="month"]{width:auto;padding:9px 12px}
.of-search{width:260px;padding:9px 12px}
.of-check{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text-2);white-space:nowrap}
.of-check input{width:16px;height:16px}
.of-split{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px;align-items:start}
@media(max-width:1100px){.of-split{grid-template-columns:1fr}}
.of-table{background:var(--paper);border-radius:var(--r);overflow:auto;box-shadow:0 2px 0 var(--line);max-height:calc(100dvh - 190px)}
.of-table table,.of-plain{width:100%;border-collapse:collapse;font-size:14px}
.of-table th,.of-plain th{position:sticky;top:0;background:var(--paper);text-align:left;font-weight:700;color:var(--text-2);
  padding:11px 12px;border-bottom:2px solid var(--line);white-space:nowrap;z-index:1}
.of-table td,.of-plain td{padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
.of-table tbody tr{cursor:pointer}
.of-table tbody tr:hover{background:var(--wash)}
.of-table tbody tr.on{background:var(--sky-wash)}
.num{text-align:right;font-variant-numeric:tabular-nums}
td.num.warn{color:var(--coral-shade);font-weight:800}
.of-side{background:var(--paper);border-radius:var(--r);box-shadow:0 2px 0 var(--line);padding:16px;max-height:calc(100dvh - 190px);overflow:auto}
.of-hint{color:var(--text-3);font-size:14px;text-align:center;padding:40px 10px}
.of-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.of-form{background:var(--wash);border-radius:14px;padding:12px}
.of-form .field{margin-bottom:8px}
.of-pkg{border:2px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:10px}
.of-pkg.active{border-color:var(--mint)} .of-pkg.paused{border-color:var(--star)} .of-pkg.finished{opacity:.6}
.of-mini{width:100%;border-collapse:collapse}
.of-mini td{padding:5px 0;border-bottom:1px solid var(--line)}
.of-mini .minus{color:var(--coral-shade);font-weight:700} .of-mini .plus{color:var(--mint-shade);font-weight:700}
.of-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--paper);border-radius:var(--r);padding:14px 16px;box-shadow:0 2px 0 var(--line)}
.kpi b{display:block;font:800 26px/1.2 var(--sans);color:var(--ink-deep)}
.kpi span{font-size:13px;color:var(--text-2)}
.of-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:900px){.of-cards{grid-template-columns:1fr}.of-grid2{grid-template-columns:1fr}}
.chart{display:flex;align-items:flex-end;gap:12px;height:180px;padding-top:10px}
.chart .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px}
.chart .bar i{display:block;width:100%;max-width:56px;background:var(--ink);border-radius:8px 8px 0 0;min-height:2px}
.chart.mint .bar i{background:var(--mint)}
.chart .bar b{font-size:12px;color:var(--ink-deep);order:-1}
.chart .bar span{font-size:12px;color:var(--text-3)}
.of-grid td.mark{text-align:center;width:38px;padding:8px 4px;font-weight:700}
.of-grid td.mark.present{background:var(--mint-wash);color:var(--mint-shade)}
.of-grid td.mark.leave{background:var(--star-wash);color:#8A5A00}
.of-grid td.mark.absent{background:var(--coral-wash);color:var(--coral-shade)}
.of-grid .sticky{position:sticky;left:0;background:var(--paper);z-index:2}
.of-modal{position:fixed;inset:0;background:rgba(28,17,71,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:60}
.of-table .lead-st,.of-table .lead-note{width:auto;min-width:120px;padding:6px 8px;font-size:13px}
.of-login .field span{font-size:13px}
.hwitem.hw-todo{box-shadow:0 2px 0 var(--line),inset 4px 0 0 var(--coral)}
.card.cls.dim,.group-title.dim{opacity:.62}
.card.cls.dim{box-shadow:0 2px 0 var(--line)}
.group-title.dim::before{background:var(--wash-2)}
.of-grid td.mark.edit{cursor:pointer}
.of-grid td.mark.edit:hover{outline:2px solid var(--ink);outline-offset:-2px}
.of-grid td.mark.edit:not(.present):not(.leave):not(.absent){color:var(--text-3)}
.of-grid th.today{color:var(--ink);text-decoration:underline}
.cellmenu{position:absolute;z-index:80;background:var(--paper);border-radius:12px;box-shadow:0 6px 24px rgba(28,17,71,.22);
  padding:6px;display:flex;flex-direction:column;min-width:140px}
.cellmenu button{border:0;background:transparent;text-align:left;padding:9px 12px;border-radius:8px;cursor:pointer;
  font:600 14px var(--sans);color:var(--ink-deep)}
.cellmenu button:hover{background:var(--wash)}
.trlist{display:flex;flex-direction:column;gap:8px;max-height:42vh;overflow:auto;margin-bottom:6px}
.trrow{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--wash);border-radius:12px}
.trrow select{width:auto;min-width:112px;padding:8px 10px;font-size:14px;background:var(--paper)}
.fchip.add{background:var(--paper);color:var(--ink);box-shadow:0 2px 0 var(--line);border:2px dashed var(--wash-2)}
.fchip.del{background:var(--paper);color:var(--seal-deep);box-shadow:0 2px 0 var(--line)}
.rollchip.off{opacity:.5}
.rollchip.off span{color:var(--text-3)}
.todaycls{box-shadow:0 2px 0 var(--line),inset 4px 0 0 var(--mint)}
.pub-contact .contact-line{margin:6px 0;display:flex;gap:10px;font-size:15px;line-height:1.7}
.pub-contact .contact-line b{flex:0 0 auto;color:var(--text-3);font-weight:700;font-size:13px;padding-top:2px}
.pub-contact a{color:var(--ink);font-weight:700}
.contact-qr{margin-top:10px;text-align:center}
.contact-qr img{width:180px;height:180px;object-fit:contain;background:#fff;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.contact-qr span{display:block;font-size:12px;margin-top:6px}
.ct-qr{width:96px;height:96px;object-fit:contain;border-radius:12px;background:var(--paper);box-shadow:0 0 0 1px var(--line)}
.ct-qr.none{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-3)}
.fchip.sm{font-size:13px;padding:5px 11px}

/* ---------- 家长咨询：转化漏斗与分组 ---------- */
.funnel{display:flex;align-items:center;gap:10px;background:var(--paper);border-radius:var(--r);padding:14px 16px;
  box-shadow:0 2px 0 var(--line);margin-bottom:12px;flex-wrap:wrap}
.funnel .fn{position:relative;padding-right:22px;min-width:84px}
.funnel .fn b{display:block;font:800 24px/1.2 var(--sans);color:var(--ink-deep)}
.funnel .fn span{font-size:12.5px;color:var(--text-2)}
.funnel .fn i{position:absolute;right:4px;top:8px;font-style:normal;color:var(--text-3)}
.funnel .fn.ok b{color:var(--mint-shade)}
.funnel .fn.rate{margin-left:auto;padding-right:0;text-align:right}
.funnel .fn.rate b{color:var(--ink)}
.todo-bar{background:var(--coral-wash);color:var(--coral-shade);border-radius:12px;padding:10px 14px;margin-bottom:14px;font-size:14px}
.todo-bar b{font-size:16px}
.todo-bar.done{background:var(--mint-wash);color:var(--mint-shade)}
.lead-group{margin-bottom:12px}
.lead-group > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:6px 2px;font-size:15px}
.lead-group > summary::-webkit-details-marker{display:none}
.lead-group > summary::before{content:'▸';color:var(--text-3);transition:transform .15s}
.lead-group[open] > summary::before{transform:rotate(90deg)}
.lead-list{display:flex;flex-direction:column;gap:8px}
.lead-card{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:'main side acts' 'note note note';
  gap:10px 14px;align-items:center;background:var(--paper);border-radius:14px;padding:12px 14px;box-shadow:0 2px 0 var(--line)}
.lead-card.urgent{box-shadow:0 2px 0 var(--line),inset 5px 0 0 var(--coral)}
.lead-card.warn{box-shadow:0 2px 0 var(--line),inset 5px 0 0 var(--star)}
.lead-card.blue{box-shadow:0 2px 0 var(--line),inset 5px 0 0 var(--sky)}
.lead-card.ok{box-shadow:0 2px 0 var(--line),inset 5px 0 0 var(--mint)}
.lead-card.dim{opacity:.6}
.lead-main{grid-area:main;min-width:0}
.lead-side{grid-area:side;text-align:right}
.lead-acts{grid-area:acts;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.lead-card .lead-note{grid-area:note;width:100%;padding:7px 10px;font-size:13px;background:var(--wash);border-color:transparent}
.lead-card .lead-phone{font:800 19px var(--sans);color:var(--ink);text-decoration:none;letter-spacing:.02em}
.lead-meta{display:block;font-size:12.5px;color:var(--text-2);margin-top:2px}
.lead-card .lead-msg{margin-top:6px;font-size:13.5px;color:var(--text);background:var(--wash);border-radius:10px;padding:6px 9px}
.lead-wait{font-size:13px;color:var(--text-2);white-space:nowrap}
.lead-wait.late{color:var(--coral-shade);font-weight:800}
.lead-date{display:block;font-size:11.5px;color:var(--text-3);white-space:nowrap}
.lead-date input{width:auto;padding:5px 8px;font-size:13px;margin-top:2px}
.lead-date.late{color:var(--coral-shade)} .lead-date.late input{border-color:var(--coral)}
.lead-date.today{color:#8A5A00} .lead-date.today input{border-color:var(--star)}
.lead-date.blue input{border-color:var(--sky)}
@media(max-width:900px){.lead-card{grid-template-columns:1fr;grid-template-areas:'main' 'side' 'acts' 'note'}
  .lead-side,.lead-acts{text-align:left;justify-content:flex-start}}
.namegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.namebtn{border:2px solid var(--line);background:var(--paper);border-radius:14px;padding:12px 8px;cursor:pointer;
  font:700 16px var(--sans);color:var(--ink-deep)}
.namebtn:active{background:var(--sky-wash);border-color:var(--sky)}

/* ---------- 学生口令 ----------
 * 四个格子像印谱里的四方小印，宋体数字；真正的输入框铺在上面、看不见。 */
.pinpad{text-align:center}
.pp-name{font:700 22px/1.3 var(--serif);color:var(--ink-deep);letter-spacing:.06em}
.pp-ask{font-size:13.5px;color:var(--text-2);margin:4px 0 18px}
.pp-boxes{position:relative;display:flex;justify-content:center;gap:10px;cursor:text}
.pp-boxes input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;border:0;padding:0;
  caret-color:transparent;color:transparent;background:transparent}
.pp-boxes i{width:54px;height:62px;border-radius:12px;border:2px solid var(--rice-line);background:var(--rice);
  display:flex;align-items:center;justify-content:center;font:700 30px/1 var(--serif);font-style:normal;
  color:var(--ink-deep);transition:border-color .12s}
.pp-boxes i.on{border-color:var(--seal)}
.pp-boxes.shake{animation:ppshake .36s}
@keyframes ppshake{20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.pp-boxes.shake{animation:none}}
.pp-msg{min-height:22px;margin:12px 0 4px;font-size:13.5px;font-weight:700;color:var(--seal-deep)}
.pp-help{font-size:12px;color:var(--text-3);line-height:1.6;margin-bottom:14px}
.mypin{display:flex;align-items:center;gap:12px}
.mypin .mp-code{font:700 26px/1 var(--serif);letter-spacing:.18em;color:var(--seal-deep);
  background:var(--rice);border:1px solid var(--rice-line);border-radius:10px;padding:8px 12px}
.stu-pin .pin-code{font:700 20px/1 var(--serif);letter-spacing:.14em;color:var(--seal-deep);margin-left:4px}
.pinsheet{max-height:82vh;display:flex;flex-direction:column}
.ps-list{overflow:auto;border-top:1px solid var(--line)}
.ps-row{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line)}
.ps-row span{flex:1;font-weight:600}
.ps-row b{font:700 19px/1 var(--serif);letter-spacing:.14em;color:var(--seal-deep)}
.ps-row i{flex:0 0 46px;font-style:normal;font-size:11px;color:var(--mint-shade);text-align:right}
.ps-warn{font-size:12px;line-height:1.55;color:var(--seal-deep);background:var(--seal-wash);
  border-radius:10px;padding:8px 10px;margin-bottom:10px}
.ps-row .ps-link{flex:0 0 auto;padding:3px 10px;font-size:12px}
/* 扫登录条后的"你是某某吗" */
.slipask{text-align:center}
.sa-q{font-size:14px;color:var(--text-2)}
.sa-name{font:700 34px/1.25 var(--serif);color:var(--ink-deep);letter-spacing:.08em;margin:4px 0 2px}
.sa-cls{font-size:13px;color:var(--text-3)}
.sa-note{font-size:12px;color:var(--text-3);margin-top:12px}
.sa-warn{font-size:15px;line-height:1.7;color:var(--seal-deep);font-weight:600;text-align:left;
  background:var(--seal-wash);border-radius:12px;padding:12px 14px}

/* ---------- 内容后台：上传课件 + 逐句录音 ---------- */
.wiz{max-width:440px}
.wiz .seg{margin-top:2px}
.wiz-bar{height:6px;border-radius:99px;background:var(--wash);overflow:hidden;margin:12px 0 6px}
.wiz-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--seal);transition:width .25s}
/* 录音块：没录时是朱砂"该你动手"，录好了转成青瓷"已完成" */
.rec-box{border:1px solid var(--seal-wash);background:var(--seal-wash);border-radius:12px;padding:10px 12px;margin-bottom:12px}
.rec-box.has{border-color:var(--mint-wash);background:var(--mint-wash)}
.rec-box .strong{font-size:14px;color:var(--seal-deep)}
.rec-box.has .strong{color:var(--mint-shade)}
#rec-btn.recording{background:var(--seal);color:#fff;box-shadow:0 3px 0 var(--seal-deep);animation:recpulse 1.1s infinite}
@keyframes recpulse{50%{opacity:.72}}
@media(prefers-reduced-motion:reduce){#rec-btn.recording{animation:none}}
.adv{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.adv summary{font-size:12.5px;color:var(--text-3);cursor:pointer}
.adv[open] summary{margin-bottom:6px}

/* 纯 HTTP 访问时的提示条（上了 HTTPS 就不会出现） */
.insecure-bar{position:fixed;left:0;right:0;top:0;z-index:300;display:flex;align-items:center;gap:10px;
  background:var(--seal);color:#fff;font-size:12.5px;line-height:1.5;padding:8px 12px;
  box-shadow:0 2px 8px rgba(0,0,0,.18)}
.insecure-bar span{flex:1}
.insecure-bar b{font-weight:800}
.insecure-bar button{flex:0 0 auto;border:0;background:rgba(255,255,255,.22);color:#fff;
  width:26px;height:26px;border-radius:8px;font-size:17px;line-height:1;cursor:pointer}

/* ================= 门户首页 =================
 * 其余公开页都是微信里打开的分享页，挤在 430px 的手机壳里刚好。
 * 门户不一样：家长可能在电脑上直接敲域名进来，得像个正经网站，
 * 所以这里把壳子撑开，再按屏宽重新排。
 *
 * 视觉沿用全站那套「集印册」：院墨作底、朱砂只留给印章和要你动手的地方、
 * 宣纸只铺在"纸"上。科目牌各用自己的颜料色，色号从 subjects.color 来。
 */
body.portal{background:var(--paper);align-items:flex-start;padding:0}
body.portal #app.pub-app{max-width:none;width:100%;background:var(--paper);
  min-height:100dvh;height:auto;border-radius:0;box-shadow:none;overflow:visible}
body.portal .pub-head{position:sticky;top:0;z-index:20;padding:14px 20px;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px)}
body.portal .pub-main{padding:0}
.pt-band{max-width:1040px;margin:0 auto;padding:46px 20px 0}
.pt-h2{font-family:var(--serif);font-size:23px;font-weight:700;color:var(--ink-deep);
  letter-spacing:.06em;margin:0 0 4px}
.pt-lead{margin:0 0 16px;color:var(--text-2);font-size:14px}
.pt-more{margin:16px 0 0;font-size:14px}
.pt-more a{color:var(--seal-deep);text-decoration:none;font-weight:700}
.pt-more a:hover{text-decoration:underline}

/* 扉页：宣纸铺底、朱砂印压在校名旁，像一页盖了章的卷首 */
/* 底纹用米字格 —— 书法练字的那种格子。这是这所学校自己的器物，
 * 比随便铺一层渐变有来历；压得很淡（4%），远看只是一层纸纹。 */
.pt-hero{background:var(--rice);border-bottom:1px solid var(--rice-line);
  background-image:
    radial-gradient(circle at 18% 22%,rgba(200,64,47,.05),transparent 42%),
    linear-gradient(rgba(43,26,110,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(43,26,110,.05) 1px,transparent 1px),
    linear-gradient(45deg,transparent calc(50% - .5px),rgba(43,26,110,.032) 50%,transparent calc(50% + .5px)),
    linear-gradient(-45deg,transparent calc(50% - .5px),rgba(43,26,110,.032) 50%,transparent calc(50% + .5px));
  background-size:auto,92px 92px,92px 92px,92px 92px,92px 92px}
.pt-hero-in{max-width:1040px;margin:0 auto;padding:60px 20px 56px;position:relative;
  display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.pt-seal{display:inline-flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:12px;background:var(--seal);color:#fff;
  font:700 34px/1 var(--serif);transform:rotate(-6deg);margin-bottom:22px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.32)}
@keyframes ptStamp{
  from{transform:rotate(-14deg) scale(1.18);opacity:0}
  60%{transform:rotate(-6deg) scale(.97);opacity:1}
  to{transform:rotate(-6deg) scale(1)}
}
.pt-seal{animation:ptStamp .26s cubic-bezier(.2,.9,.3,1) both}
.pt-hero h1{font-family:var(--serif);font-size:42px;line-height:1.2;font-weight:700;
  color:var(--ink-deep);letter-spacing:.08em;margin:0}
.pt-slogan{font-family:var(--serif);font-size:19px;letter-spacing:.14em;
  color:var(--seal-deep);margin:14px 0 0}
.pt-sub{margin:10px 0 0;color:var(--text-2);font-size:14px;letter-spacing:.04em}
/* 立轴：竖排写那句校训，底下压一方朱砂印，像挂在墙上的一幅字。
 * 书法是这里实打实开的课，这个形制比再放一张照片更说明这是家什么学校。 */
.pt-scroll{display:flex;flex-direction:column;align-items:center;gap:18px;
  background:var(--paper);border:1px solid var(--rice-line);border-radius:6px;
  padding:34px 26px;box-shadow:0 2px 0 var(--rice-line),0 14px 30px rgba(43,26,110,.07)}
.pt-scroll-text{writing-mode:vertical-rl;font-family:var(--serif);font-size:27px;font-weight:700;
  letter-spacing:.34em;color:var(--ink-deep);line-height:1}
.pt-scroll-seal{width:38px;height:38px;border-radius:7px;background:var(--seal);color:#fff;
  font:700 22px/38px var(--serif);text-align:center;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.pt-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.pt-cta .btn{min-width:168px}

/* 资质题签：一方小印 + 学校自己写的那句「经谁批准」。
 * 家长最先要确认的就是这个，所以提到扉页上，不埋在第二屏的正文里。 */
.pt-cred{display:inline-flex;align-items:flex-start;gap:10px;margin:18px 0 0;padding:9px 15px 9px 10px;
  max-width:34em;background:var(--paper);border:1px solid var(--rice-line);border-radius:var(--r-s);
  font-size:13px;line-height:1.65;color:var(--text-2);box-shadow:0 1px 0 var(--rice-line)}
.pt-cred-seal{flex:0 0 auto;width:22px;height:22px;border-radius:5px;background:var(--seal);color:#fff;
  font:700 13px/22px var(--serif);text-align:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}

/* 题跋：校训单独一栏，和测评报告里「老师的话」同一套形制 —— 宋体、一方朱砂印。
 * 这是整页上最像人说的一句话，混在正文段落里太可惜。 */
.pt-creedband{background:var(--rice);border-block:1px solid var(--rice-line);margin-top:46px}
.pt-creedband .pt-band{padding-block:40px}
.pt-creed{margin:0;text-align:center;position:relative}
.pt-creed-seal{display:inline-block;width:34px;height:34px;border-radius:8px;
  background:var(--seal);color:#fff;font:700 19px/34px var(--serif);
  transform:rotate(-5deg);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.pt-creed blockquote{margin:16px auto 0;max-width:22em;font-family:var(--serif);
  font-size:27px;line-height:1.75;font-weight:700;letter-spacing:.06em;color:var(--ink-deep)}
.pt-creed figcaption{margin:14px auto 0;max-width:34em;font-size:14px;line-height:1.9;color:var(--text-2)}

/* 科目牌：底色就是这一科的颜料 */
.pt-subjs{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}
.pt-subj{display:flex;flex-direction:column;gap:7px;padding:20px 18px;border-radius:var(--r);
  text-decoration:none;color:#fff;background:var(--ink);min-height:108px;
  transition:transform .16s ease,box-shadow .16s ease}
.pt-subj:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(43,26,110,.18)}
/* 颜色跟着科目走，色号存在 subjects.color 里，负责人加新科目时自己挑。
 * 眼下是：石青=英语 朱砂=语文 松烟=数学 藤黄=书法 院墨=作业班。 */
.pt-subj.sky{background:var(--sky)} .pt-subj.coral{background:var(--coral)}
.pt-subj.mint{background:var(--mint)} .pt-subj.umber{background:var(--umber)}
.pt-subj.star{background:var(--star);color:#4A2F00}
.pt-subj.ink{background:var(--ink)}
.pt-subj-name{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:.1em}
.pt-subj-courses{font-size:12.5px;line-height:1.6;opacity:.9}

/* 学校的样子：负责人在「学校信息」里传的简介照片，首页上直接摆出来。
 * 一律按 4:3 居中裁切 —— 竖着拍的照片取中间那一条，教室、书桌、书架都在那儿。
 * 不做"第一张放大"的拼贴：学校以后换几张照片、顺序一变，拼贴就塌了。
 * 四张一行刚好铺满，手机上两行两列，哪种宽度都没有落单的那一张。 */
.pt-photos{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.pt-photo{flex:0 1 calc((100% - 36px) / 4);min-width:0;
  margin:0;border:0;padding:0;cursor:zoom-in;
  border-radius:var(--r-s);overflow:hidden;background:var(--wash);
  box-shadow:0 0 0 1px var(--line)}
.pt-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}

/* 一角：一张方照片配一句话。照片带是一排同样大的方块，这一段故意不是 ——
 * 换个形状才像"另起一段"，而不是照片带多摆了一张。 */
.pt-culture{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:30px;align-items:center;margin:0}
.pt-culture img{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  border-radius:var(--r-s);box-shadow:0 0 0 1px var(--line);background:var(--wash)}
.pt-culture>button{border:0;padding:0;background:none;cursor:zoom-in;min-width:0;display:block}
.pt-culture figcaption{min-width:0}
.pt-culture h3{font-family:var(--serif);font-size:25px;font-weight:700;color:var(--ink-deep);
  letter-spacing:.04em;margin:0 0 12px;text-wrap:balance}
.pt-culture p{margin:0;font-size:15.5px;line-height:1.9;color:var(--text-2);max-width:26em}

/* 滚过首屏之后浮出来的「预约试听」。只在手机上出现：电脑上整页一眼能回到顶，
 * 再压一条就是挡路。*/
@keyframes ptBarIn{from{transform:translateY(100%)}to{transform:none}}
.pt-cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:10px max(14px,env(safe-area-inset-left,0px)) calc(10px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--rice) 94%,transparent);
  backdrop-filter:blur(8px);border-top:1px solid var(--rice-line);
  animation:ptBarIn .22s ease-out}
.pt-cta-bar[hidden]{display:none}
.pt-cta-bar a{display:block;text-align:center;text-decoration:none;
  background:var(--seal);color:#fff;border-radius:999px;padding:12px 18px;
  font-family:var(--serif);font-size:17px;letter-spacing:.1em}
@media(max-width:700px){ .pt-cta-bar:not([hidden]){display:block} }

/* 作品：横着一排，手机上可以划 */
.pt-works{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.pt-work{background:var(--paper);border-radius:var(--r-s);overflow:hidden;
  box-shadow:0 0 0 1px var(--line);text-decoration:none;color:var(--text);display:block}
.pt-work img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:var(--wash)}
.pt-work b{display:block;padding:9px 10px;font-size:13px;font-weight:700}
.pt-work:hover{box-shadow:0 6px 18px rgba(43,26,110,.14)}

/* 简介按后台写的小标题分块：第一段是总述，占满一行；
 * 办学宗旨、教育形式这些并排放，宽屏上才不会拖成一长条 */
.pt-about-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 34px;margin-top:14px}
.pt-about-blk.lead{grid-column:1/-1}
.pt-about-blk h3{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--seal-deep);
  letter-spacing:.08em;margin:0 0 7px}
.pt-about p{margin:0 0 10px;font-size:15.5px;line-height:1.85;color:var(--text)}
.pt-about-blk.lead p{max-width:40em}      /* 中文别用 ch：ch 按"0"的宽度算，一行只排得下一半字 */

/* 预约表单和联系方式是从微信分享页搬过来的，那边按 430px 画的。
 * 在宽屏上居中放会显得跟左对齐的正文脱节，所以给这两段铺满整行的底色，
 * 让"居中"看起来是有意为之的一段，而不是飘在那儿。 */
.pt-trialband,.pt-contactband{background:var(--rice);border-top:1px solid var(--rice-line);
  border-bottom:1px solid var(--rice-line);margin-top:52px;padding-bottom:46px;max-width:none}
.pt-contactband{background:var(--paper);border-bottom:0;margin-top:0}
.pt-trialband .pub-form,.pt-contactband .pub-contact{max-width:560px;margin-inline:auto}
.pt-trialband .pub-form,.pt-contactband .pub-contact{box-shadow:0 2px 0 var(--rice-line)}
.pt-about .pt-more{margin-top:26px}

.pt-foot{margin-top:0;padding:30px 20px 36px;background:var(--ink-deep);color:#CFC8EA;
  text-align:center;font-size:13px}
.pt-foot p{margin:6px 0}
.pt-foot-links{display:flex;gap:22px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.pt-foot-links a{color:#fff;text-decoration:none;font-weight:700;font-size:14px}
.pt-foot-links a:hover{text-decoration:underline}
.pt-beian{color:#8E86B8;font-size:12px}
/* 备案号得点得进工信部，但它不是请家长点的链接 —— 跟着页脚的字一个颜色，
 * 平时看不出是链接，鼠标放上去才给下划线。.pub-foot a 那条会把它画成正文链接，
 * 所以这里要盖掉。 */
.beian{color:inherit;text-decoration:none}
.beian:hover,.beian:focus-visible{text-decoration:underline;text-underline-offset:3px}
.pub-foot .beian{color:var(--text-3)}

/* 科目是单数时，最后一张会孤零零占半行。让它占满整行，看着是有意摆的，
 * 不是排版没排匀 —— 预约页那排课程名也是照这个道理处理的。 */
.pt-subjs > :last-child:nth-child(odd){grid-column:1/-1}
@media(min-width:901px){ .pt-subjs > :last-child:nth-child(odd){grid-column:auto} }
@media(max-width:900px){
  .pt-photo{flex-basis:calc((100% - 24px) / 3)}       /* 窄窗口退回三张一行 */
  .pt-hero-in{grid-template-columns:1fr;gap:0}
  .pt-scroll{display:none}                       /* 手机上那句话已经在上面了，不用再挂一幅 */
  .pt-about-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .pt-hero-in{padding:40px 18px 38px}
  .pt-hero h1{font-size:31px}
  .pt-slogan{font-size:16px}
  .pt-band{padding:36px 18px 0}
  .pt-h2{font-size:20px}
  .pt-cta .btn{flex:1 1 100%;min-width:0}
  .pt-subjs{grid-template-columns:repeat(2,1fr)}
  .pt-works{grid-template-columns:repeat(2,1fr)}
  .pt-photos{gap:10px}
  .pt-photo{flex-basis:calc((100% - 10px) / 2)}
  /* 手机上照片铺满、文字落在下面：限宽会在右边留一道对不齐的空白 */
  .pt-culture{grid-template-columns:1fr;gap:16px}
  .pt-culture h3{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  .pt-subj,.pt-work{transition:none} .pt-subj:hover{transform:none}
  .pt-seal,.pt-cta-bar,.pub-lightbox{animation:none}
  .pt-seal{transform:rotate(-6deg)}          /* 不放动画也要停在该在的角度上 */
}

/* ================= 测评报告 /r/<token> =================
 * 给家长看的一页。沿用全站的宣纸 + 院墨 + 朱砂，不另起一套配色 ——
 * 这是学校发出去的东西，换个样子就不像自家的了。
 * 分数做成一方朱砂印：门户的「福」、试听页的「试」，这里是第三方。
 */
.rp-hero{display:flex;align-items:flex-start;gap:14px;padding:20px 2px 18px}
.rp-hero-text{flex:1 1 auto;min-width:0}
.rp-kicker{margin:0 0 6px;font-size:12px;letter-spacing:.18em;color:var(--text-3)}
.rp-hero h1{font-family:var(--serif);font-size:34px;line-height:1.2;font-weight:700;
  color:var(--ink-deep);letter-spacing:.06em;margin:0}
.rp-sub{margin:10px 0 0;font-size:14px;color:var(--text-2);letter-spacing:.03em}
.rp-date{margin:4px 0 0;font-family:var(--en);font-size:12px;color:var(--text-3)}
/* 印：数字压满整方印面，所以用等宽数字 + 紧行高，别让 3 位数撑破 */
.rp-seal{flex:0 0 auto;width:92px;height:92px;border-radius:16px;background:var(--seal);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transform:rotate(-5deg);box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}
.rp-seal-num{font:700 40px/1 var(--serif);font-variant-numeric:tabular-nums}
.rp-seal-full{font-size:10.5px;letter-spacing:.06em;opacity:.85}

.rp-sum .rp-bars{display:flex;flex-direction:column;gap:9px}
.rp-bar{display:flex;align-items:center;gap:9px}
.rp-bar-k{flex:0 0 58px;font-size:12.5px;color:var(--text-2)}
.rp-track{flex:1 1 auto;height:9px;border-radius:5px;background:var(--rice-2);overflow:hidden}
.rp-track i{display:block;height:100%;border-radius:5px}
.rp-track .mine{background:var(--seal)}
.rp-track .peer{background:var(--ink);opacity:.38}
.rp-bar b{flex:0 0 40px;text-align:right;font:700 14px/1 var(--sans);font-variant-numeric:tabular-nums}
.rp-beat{margin:12px 0 0;font-size:14px;line-height:1.7;color:var(--text)}
.rp-beat b{color:var(--seal-deep)}
/* 样本不够时那段说明：说清楚为什么没有，别让家长以为是漏了 */
.rp-note{margin:12px 0 0;font-size:12.5px;line-height:1.75;color:var(--text-3);
  background:var(--rice);border-radius:10px;padding:10px 12px}

.rp-no{display:inline-block;font-family:var(--en);font-size:13px;color:var(--text-3);
  margin-right:8px;letter-spacing:.06em}

.rp-bands{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.rp-band{border-radius:12px;padding:12px 8px;text-align:center;background:var(--rice)}
.rp-band.b-low{background:var(--sky-wash)} .rp-band.b-mid{background:var(--star-wash)}
.rp-band.b-high{background:var(--seal-wash)}
.bd-name{display:block;font-size:11.5px;color:var(--text-2)}
.bd-score{display:block;margin:6px 0 2px;font:700 22px/1 var(--sans);color:var(--ink-deep);font-variant-numeric:tabular-nums}
.bd-score small{font-size:12px;font-weight:600;color:var(--text-3)}
.bd-level{display:block;font-size:12px;font-weight:700;color:var(--seal-deep)}
.bd-avg{display:block;margin-top:3px;font-size:10.5px;color:var(--text-3)}

.rp-radar-wrap{display:flex;justify-content:center;padding:6px 0 2px}
.radar{width:100%;max-width:320px;height:auto;overflow:visible}
.rd-ring,.rd-spoke{fill:none;stroke:var(--rice-line);stroke-width:1}
.rd-ring{stroke-dasharray:3 3}
.rd-peer{fill:var(--ink);fill-opacity:.1;stroke:var(--ink);stroke-opacity:.42;stroke-width:1.5}
.rd-mine{fill:var(--seal);fill-opacity:.2;stroke:var(--seal);stroke-width:2;stroke-linejoin:round}
.rd-label{font:600 11px var(--sans);fill:var(--text-2)}
.rd-legend text{font:600 10.5px var(--sans);fill:var(--text-2)}
.rd-legend .sw-mine{fill:var(--seal)} .rd-legend .sw-peer{fill:var(--ink);fill-opacity:.42}

.rp-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
.rp-table th{font-weight:700;color:var(--text-2);font-size:11.5px;text-align:center;
  padding:7px 5px;border-bottom:1.5px solid var(--rice-line);white-space:nowrap}
.rp-table td{padding:8px 5px;text-align:center;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums}
.rp-table .t-name{text-align:left;font-weight:600;color:var(--ink-deep)}
.rp-table .t-mine{font-weight:700;color:var(--seal-deep)}
.rp-table .t-peer{color:var(--text-3)}
.lv{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700}
.lv-a{background:var(--mint-wash);color:var(--mint-shade)}
.lv-b{background:var(--sky-wash);color:var(--sky-shade)}
.lv-c{background:var(--seal-wash);color:var(--seal-deep)}

/* 逐题表在手机上一定放不下，横向滚动而不是把字压小到看不清。
 * 右边必须留一道渐隐：家长不会凭空想到去横着划一张表，
 * 而被挡住的恰好是「平均得分率」—— 表格底下那句注解说的就是它。
 * 两层纯 CSS：local 的那层跟着内容走，当作遮板；scroll 的那层钉在框上，是影子。
 * 划到头时遮板正好盖住影子，影子自己就消失了，不用一行 JS。 */
.rp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;
  background:
    linear-gradient(to right, var(--card) 40%, rgba(255,255,255,0)) left center/22px 100% no-repeat local,
    linear-gradient(to left,  var(--card) 40%, rgba(255,255,255,0)) right center/22px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,   rgba(43,26,110,.22), rgba(43,26,110,0)) left center/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(43,26,110,.22), rgba(43,26,110,0)) right center/12px 100% no-repeat scroll}
.rp-items{min-width:396px}
.rp-items td,.rp-items th{padding-left:3px;padding-right:3px}
.rp-items .t-no{color:var(--text-3);font-size:12px}
.rp-items tr.ok .t-given{color:var(--mint-shade);font-weight:700}
.rp-items tr.bad .t-given{color:var(--seal);font-weight:700}
.rp-items .t-key{color:var(--ink-deep);font-weight:600}
.rp-items .blank{color:var(--text-3);font-weight:400;font-size:12px}
.rp-items .t-diff{color:var(--star-shade);letter-spacing:1px;font-size:9px}
.rp-items .t-diff .off{color:var(--rice-line)}
.rp-items .t-tag{font-size:12px;color:var(--text-2)}

/* 老师的话：题跋的样子 —— 左边一方小印，正文用宋体 */
.rp-say{position:relative;padding-top:18px}
.rp-say-seal{position:absolute;right:16px;top:16px;width:34px;height:34px;border-radius:8px;
  background:var(--seal);color:#fff;font:700 19px/34px var(--serif);text-align:center;
  transform:rotate(-5deg);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.rp-advice{margin:8px 0 0;font-family:var(--serif);font-size:15px;line-height:1.95;
  color:var(--text);text-indent:2em}
.rp-rec{display:flex;align-items:center;gap:10px;margin:14px 0 0;padding-top:12px;
  border-top:1px dashed var(--rice-line)}
.rp-rec span{font-size:12.5px;color:var(--text-2)}
.rp-rec b{font-family:var(--serif);font-size:17px;color:var(--seal-deep);letter-spacing:.06em}

@media(max-width:360px){
  .rp-hero h1{font-size:28px}
  .rp-seal{width:78px;height:78px}
  .rp-seal-num{font-size:34px}
  .rp-bands{grid-template-columns:1fr;gap:6px}
  .rp-band{display:flex;align-items:center;gap:10px;text-align:left;padding:9px 12px}
  .bd-score{margin:0;font-size:18px}
}
@media print{
  body.rp .pub-form,body.rp .pub-contact{display:none}
  body.rp .card{break-inside:avoid}
}

/* 学生端：老师开了测评时，首页上那张请帖 */
.assess-call{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:14px 16px;
  border-radius:var(--r);background:var(--paper);cursor:pointer;
  box-shadow:0 2px 0 var(--seal-wash),inset 0 0 0 1.5px var(--seal-wash)}
.assess-call:active{transform:translateY(1px)}
.ac-seal{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:var(--seal);color:#fff;
  font:700 22px/40px var(--serif);text-align:center;transform:rotate(-5deg);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.ac-text{flex:1 1 auto;min-width:0}
.ac-text b{display:block;font-size:15px;color:var(--ink-deep)}
.ac-text span{display:block;margin-top:2px;font-size:12px;color:var(--text-2)}
.ac-go{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--seal-deep)}

/* 出测评卷时多出来的那一行标签：手机上三个挤一行太窄，先让前两个各占一半 */
.qtag-row{flex-wrap:wrap}
.qtag-row .field{min-width:116px}

/* ================= 监护人同意 =================
 * 没登记时整块按"缺东西"的样子标出来（朱砂左边框 + 浅底），登记后转成静的。
 * 建档时这一步最容易被跳过，而跳过的后果不在界面上，在法律上。 */
.of-consent{margin-top:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  border-left:3px solid var(--line);background:var(--rice)}
.of-consent.miss{border-left-color:var(--seal);background:var(--seal-wash)}
.of-consent.ok{border-left-color:var(--mint-shade)}
.of-consent .of-grid2{margin-top:8px}
.of-consent p{margin:8px 0 0}
/* 勾选项：和 .agree 一个样子，但用在后台表单里，上下留白小一点 */
.ck{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;font-size:13px;
  color:var(--text);line-height:1.6;cursor:pointer}
.ck input{width:17px;height:17px;margin-top:2px;flex:0 0 auto}
.ck i{font-style:normal;font-size:12px}

/* ================= 个人信息处理规则 /privacy =================
 * 是一份要被人读完的文件，不是一屏营销页：正文给足行高，段落之间留白，
 * 小节号用院墨的小字编号 —— 和测评报告里的 01/02 同一套记号。 */
.privacy .pub-main{max-width:640px}
.pv-lead{font-size:14.5px;line-height:1.9}
.pv-lead p{margin:0 0 10px}
.pv-lead p:last-child{margin-bottom:0}
.pv-sec{line-height:1.9}
.pv-h{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;font-size:16px;
  font-family:var(--serif);color:var(--ink-deep)}
.pv-no{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--seal);letter-spacing:.1em}
.pv-sec p{margin:8px 0 0;font-size:14px;color:var(--text)}
.pv-list{margin:6px 0 0;padding-left:18px}
.pv-list li{margin:6px 0;font-size:14px;color:var(--text)}
.pv-strong{padding:10px 12px;border-radius:10px;background:var(--seal-wash);
  border-left:3px solid var(--seal)}
.pv-foot{margin:14px 4px 0;font-size:12.5px;color:var(--text-3);text-align:center}

/* 公开页的页脚：孩子的信息在哪一页上露面，哪一页就要够得着那份说明 */
.pub-foot{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;
  padding:18px 16px 26px;font-size:12.5px;color:var(--text-3)}
.pub-foot a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* 这一页也用 .contact-line，但那条 flex 规则挂在 .pub-contact 下面，这里够不着 */
.privacy .contact-line{margin:8px 0 0;display:flex;gap:10px;font-size:14px;line-height:1.8}
.privacy .contact-line b{flex:0 0 auto;color:var(--text-3);font-weight:700;font-size:13px;padding-top:2px}

/* 门户在手机上的收口：题跋的字要跟着缩，不然 27px 的宋体一行排不下三个字 */
@media(max-width:600px){
  .pt-creed blockquote{font-size:21px;letter-spacing:.04em}
  .pt-creedband .pt-band{padding-block:32px}
  .pt-cred{font-size:12.5px;margin-top:16px}
}