/* ===================================================================
   第一章 集合与常用逻辑用语 —— 课堂页
   视觉参照人教A版教科书本身：白纸、宋体正文、红小节号、
   蓝术语与定义框、暖黄思考框、右侧旁注栏。
   =================================================================== */

:root{
  --paper:     #FCFCFA;
  --paper-2:   #FFFFFF;
  --ink:       #1A1A1A;
  --ink-2:     #4A4A46;
  --ink-3:     #8C8C86;
  --rule:      #DCDCD6;
  --rule-2:    #EDEDE8;

  --red:       #D93A26;   /* 小节号、强调 */
  --blue:      #1B62B5;   /* 术语、定义 */
  --blue-bg:   #EAF2FB;
  --blue-line: #B9D3EE;
  --amber:     #B07A1E;   /* 思考/探究 */
  --amber-bg:  #FBF3E0;
  --amber-line:#E3C07A;
  --green:     #2E7D45;
  --green-bg:  #E7F3EA;
  --wrong:     #C0392B;
  --wrong-bg:  #FBEAE7;
  --sel:       #FFF1A8;   /* 荧光笔 */

  --song: "Songti SC","SimSun","STSong","Noto Serif CJK SC","Source Han Serif SC",serif;
  --hei:  "Heiti SC","SimHei","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --math: "Cambria Math","STIX Two Math",Cambria,"Times New Roman",Georgia,serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:     #14161A;
    --paper-2:   #1A1D22;
    --ink:       #E6E6E1;
    --ink-2:     #B0B0A9;
    --ink-3:     #7C7C75;
    --rule:      #2E323A;
    --rule-2:    #23262C;
    --red:       #F0705C;
    --blue:      #79B0EE;
    --blue-bg:   #17293D;
    --blue-line: #2E4E70;
    --amber:     #E0B65E;
    --amber-bg:  #2F2818;
    --amber-line:#5C4B24;
    --green:     #6FC98C;
    --green-bg:  #16301F;
    --wrong:     #EE8175;
    --wrong-bg:  #35201C;
    --sel:       #5C5320;
  }
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--song);
  font-size:17px;
  line-height:1.95;
}

/* ============ 页面骨架 ============ */
.page{
  max-width:1160px;
  margin:0 auto;
  padding:0 20px 30vh;
}

/* 正文 + 旁注 双栏 */
.body-col{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0 34px;
}
@media (min-width:1000px){
  .body-col{ grid-template-columns:minmax(0,660px) 240px; }
}

.flow{ min-width:0; }
.margin-col{ display:none; }
@media (min-width:1000px){ .margin-col{ display:block; } }

/* ============ 顶栏 ============ */
.bar{
  position:sticky; top:0; z-index:60;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  display:flex; align-items:center; gap:12px;
  padding:9px 20px;
  max-width:1160px; margin:0 auto;
  font-family:var(--hei); font-size:13px; color:var(--ink-2);
}
.bar .sep{ width:1px; height:18px; background:var(--rule); }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--ink-3); flex:0 0 auto; }
.dot.on{ background:var(--green); }
.dot.off{ background:var(--wrong); }
.grow{ flex:1 1 auto; }
.room{ font-family:var(--math); font-weight:700; letter-spacing:.1em; color:var(--ink); }

/* ============ 章标题 ============ */
.chapter{
  padding:44px 0 26px;
  border-bottom:3px double var(--rule);
  margin-bottom:34px;
}
.chapter .no{
  font-family:var(--hei); font-size:13px; letter-spacing:.3em;
  color:var(--red); margin-bottom:6px;
}
.chapter h1{
  font-family:var(--hei); font-weight:700;
  font-size:clamp(24px,5vw,34px); line-height:1.35;
  margin:0 0 10px;
}
.chapter p{ margin:0; color:var(--ink-2); font-size:15.5px; }

/* ============ 小节 ============ */
.sec{ padding-top:26px; scroll-margin-top:56px; }
.sec + .sec{ margin-top:46px; border-top:1px solid var(--rule-2); }

.sec-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:6px; }
.sec-head .num{
  font-family:var(--math); font-size:clamp(24px,5vw,32px);
  font-weight:700; color:var(--red); line-height:1;
}
.sec-head h2{
  font-family:var(--hei); font-weight:700;
  font-size:clamp(19px,3.6vw,24px); margin:0; line-height:1.3;
}
.sec-sub{
  font-family:var(--hei); font-weight:700; font-size:16.5px;
  margin:30px 0 8px; color:var(--ink);
  padding-left:11px; border-left:4px solid var(--blue);
}

/* ============ 正文块 ============ */
.flow p{ margin:0 0 14px; text-align:justify; }
.flow p.lead{ text-indent:2em; }
b, strong{ font-weight:700; }
.t{ color:var(--blue); font-weight:700; }      /* 术语 */
.hl{ background:linear-gradient(transparent 60%, var(--sel) 60%); }
.m{ font-family:var(--math); font-size:1.05em; }

/* 定义框 */
.def{
  background:var(--blue-bg);
  border:1px solid var(--blue-line);
  border-radius:2px;
  padding:15px 18px;
  margin:18px 0;
}
.def .cap{
  font-family:var(--hei); font-size:12.5px; font-weight:700;
  color:var(--blue); letter-spacing:.08em; margin-bottom:5px;
}
.def p:last-child{ margin-bottom:0; }

/* 思考 / 探究 */
.think{
  background:var(--amber-bg);
  border:1px solid var(--amber-line);
  border-radius:2px;
  padding:14px 17px;
  margin:18px 0;
}
.think .cap{
  font-family:var(--hei); font-size:12.5px; font-weight:700;
  color:var(--amber); letter-spacing:.08em; margin-bottom:5px;
}
.think p:last-child{ margin-bottom:0; }

/* 例题 */
.eg{ margin:20px 0; }
.eg .cap{
  font-family:var(--hei); font-weight:700; font-size:15px;
  color:var(--red); margin-bottom:4px;
}
.eg .sol{
  border-left:2px solid var(--rule);
  padding-left:15px; margin-top:8px; color:var(--ink-2);
}
.eg .sol .lbl{ font-family:var(--hei); color:var(--ink); font-weight:700; margin-right:6px; }

/* 公式行 */
.fx{
  font-family:var(--math); font-size:1.12em;
  text-align:center; margin:14px 0; padding:4px 0;
  overflow-x:auto;
}

/* 表格 */
.tbl-wrap{ overflow-x:auto; margin:18px 0; }
table{ border-collapse:collapse; width:100%; font-size:15.5px; }
th,td{ border:1px solid var(--rule); padding:8px 11px; text-align:left; }
th{ background:var(--rule-2); font-family:var(--hei); font-weight:700; font-size:14px; }
td .m, th .m{ font-size:1.05em; }

/* 旁注 */
.mnote{
  font-family:var(--hei); font-size:13px; line-height:1.8;
  color:var(--ink-2);
  border-left:2px solid var(--amber-line);
  padding-left:11px; margin-bottom:26px;
}
.mnote b{ color:var(--ink); }
/* 窄屏时旁注内联 */
.mnote-inline{
  font-family:var(--hei); font-size:13.5px; line-height:1.8;
  color:var(--ink-2); background:var(--rule-2);
  border-left:3px solid var(--amber-line);
  padding:9px 13px; margin:16px 0;
}
@media (min-width:1000px){ .mnote-inline{ display:none; } }

/* ============ 交互件容器 ============ */
.w{
  border:1px solid var(--rule);
  background:var(--paper-2);
  border-radius:2px;
  margin:20px 0;
  padding:15px 16px;
  display:flex; flex-direction:column; gap:12px;
}
.w-cap{
  font-family:var(--hei); font-size:12.5px; font-weight:700;
  color:var(--ink-3); letter-spacing:.06em;
  display:flex; align-items:center; gap:8px;
}
.w-cap::after{ content:""; flex:1; height:1px; background:var(--rule); }
.w-hint{ font-family:var(--hei); font-size:13.5px; color:var(--ink-2); margin:0; }

/* 按钮 */
button{
  font-family:var(--hei); font-size:14px; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--rule);
  border-radius:2px; padding:9px 14px; min-height:42px;
  cursor:pointer; touch-action:manipulation;
  transition:background .12s, border-color .12s, color .12s;
}
button:active{ transform:translateY(1px); }
button:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
@media (hover:hover){ button:hover{ border-color:var(--blue); } }
button.on{ background:var(--blue); border-color:var(--blue); color:#fff; }
@media (prefers-color-scheme: dark){ button.on{ color:#10151C; } }
button.mini{ min-height:34px; padding:5px 11px; font-size:13px; }
button.mono{ font-family:var(--math); font-size:16px; }
.row{ display:flex; flex-wrap:wrap; gap:7px; }
.row-tight{ gap:5px; }

/* ============ 通用反馈 ============ */
.fb{
  font-family:var(--hei); font-size:14px; line-height:1.8;
  padding:10px 13px; border-radius:2px;
  border:1px solid var(--rule); background:var(--rule-2); color:var(--ink-2);
  min-height:3em;
}
.fb.ok{ border-color:var(--green); background:var(--green-bg); color:var(--ink); }
.fb.no{ border-color:var(--wrong); background:var(--wrong-bg); color:var(--ink); }
.fb .mk{ font-family:var(--math); font-weight:700; margin-right:7px; }
.fb.ok .mk{ color:var(--green); }
.fb.no .mk{ color:var(--wrong); }

/* ============ 题目 ============ */
.quiz{ display:flex; flex-direction:column; gap:11px; }
.q{
  border:1px solid var(--rule); border-radius:2px;
  background:var(--paper-2); padding:13px 15px;
  display:flex; flex-direction:column; gap:10px;
}
.q-stem{ font-size:16px; }
.q-stem .m{ font-size:1.08em; }
.q-no{
  font-family:var(--hei); font-size:12px; font-weight:700;
  color:var(--ink-3); margin-right:8px;
}
.q-opts{ display:flex; flex-wrap:wrap; gap:7px; }
.q-opts button{ flex:1 1 auto; min-width:64px; }
.q-opts button.pick-ok{ background:var(--green-bg); border-color:var(--green); color:var(--green); font-weight:700; }
.q-opts button.pick-no{ background:var(--wrong-bg); border-color:var(--wrong); color:var(--wrong); font-weight:700; }
.q-why{
  font-family:var(--hei); font-size:13.5px; line-height:1.85;
  color:var(--ink-2); border-left:2px solid var(--rule);
  padding-left:12px; display:none;
}
.q-why.show{ display:block; }
.q-why b{ color:var(--ink); }

/* ============ 各交互件 ============ */
/* 袋子 */
.bag{
  border:1.5px solid var(--blue); border-radius:2px 2px 18px 18px;
  background:var(--blue-bg); min-height:86px; padding:13px;
  display:flex; flex-wrap:wrap; gap:7px; align-content:flex-start; position:relative;
}
.bag::after{
  content:"集合 A"; position:absolute; top:-10px; left:11px;
  background:var(--paper-2); padding:0 7px;
  font-family:var(--hei); font-size:11.5px; font-weight:700; color:var(--blue);
}
.bag .ph{ color:var(--ink-3); font-family:var(--hei); font-size:13.5px; margin:auto; }
.chip-in{
  font-family:var(--math); font-size:17px; font-weight:600;
  padding:5px 12px; background:var(--paper-2);
  border:1px solid var(--blue); border-radius:2px;
}
.chip-in[data-cjk]{ font-family:var(--song); font-size:15px; }
.out{
  font-family:var(--math); font-size:17px; min-width:52px; text-align:center;
}
.out[data-cjk]{ font-family:var(--song); font-size:15px; }
.out.used{ opacity:.32; border-style:dashed; }
.notation{
  font-family:var(--math); font-size:19px;
  padding:10px 13px; background:var(--rule-2);
  border:1px solid var(--rule); border-radius:2px;
  overflow-x:auto; white-space:nowrap;
}
.rels{ display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:5px; font-family:var(--math); font-size:15px; }
.rel{ padding:4px 8px; border:1px solid var(--rule); border-radius:2px; color:var(--ink-3); }
.rel.y{ color:var(--green); border-color:var(--green); background:var(--green-bg); }
.rel [data-cjk]{ font-family:var(--song); }

/* 数集套娃 */
.ring{
  border:1.5px solid var(--rule); border-radius:3px;
  padding:23px 9px 10px; position:relative;
  transition:border-color .25s, background .25s;
}
.ring > .tg{
  position:absolute; top:3px; left:9px;
  font-family:var(--math); font-size:15px; font-weight:700; color:var(--ink-3);
  transition:color .25s;
}
.ring > .tg em{ font-family:var(--hei); font-style:normal; font-size:11px; margin-left:5px; }
.ring.lit{ border-color:var(--green); background:var(--green-bg); }
.ring.lit > .tg{ color:var(--green); }
.slot{ display:flex; justify-content:center; min-height:0; }
.slot .chip{
  font-family:var(--math); font-size:22px; font-weight:700; color:var(--blue);
  padding:2px 14px; background:var(--paper-2);
  border:1.5px solid var(--blue); border-radius:2px;
}
.verdict{
  font-family:var(--math); font-size:15px;
  padding:9px 12px; border:1px solid var(--rule); border-radius:2px;
  background:var(--rule-2); overflow-x:auto;
}
.verdict .why{ font-family:var(--hei); font-size:13.5px; color:var(--ink-2); }

/* 描述法拆解 */
.anat{
  display:flex; align-items:stretch; gap:4px; flex-wrap:nowrap;
  font-family:var(--math); font-size:clamp(17px,4.4vw,23px);
  padding:12px 9px; background:var(--rule-2);
  border:1px solid var(--rule); border-radius:2px; overflow-x:auto;
}
.anat .br{ display:flex; align-items:center; color:var(--ink-3); }
.anat .pt{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:5px 10px; border-radius:2px; white-space:nowrap; }
.anat .pt .lb{ font-family:var(--hei); font-size:10.5px; font-weight:700; }
.pt-e{ background:var(--blue-bg); color:var(--blue); }
.pt-r{ background:var(--amber-bg); color:var(--amber); }
.pt-c{ background:var(--green-bg); color:var(--green); }
.readout div{ font-family:var(--hei); font-size:14px; margin-bottom:5px; }
.readout .k{ font-size:11.5px; font-weight:700; color:var(--ink-3); margin-right:8px; }

/* 代数字滑块 */
.calc{
  font-family:var(--math); font-size:clamp(18px,4.6vw,24px); text-align:center;
  padding:14px 8px; background:var(--rule-2); border:1px solid var(--rule);
  border-radius:2px; overflow-x:auto; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.calc .r{ color:var(--blue); font-weight:700; }
.slid{ display:flex; align-items:center; gap:13px; }
.slid label{ font-family:var(--math); font-size:17px; font-weight:700; color:var(--blue); min-width:3.4em; font-variant-numeric:tabular-nums; }
input[type=range]{ flex:1; accent-color:var(--blue); height:42px; touch-action:manipulation; }
.harvest{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; min-height:44px; padding:9px; background:var(--rule-2); border:1px dashed var(--rule); border-radius:2px; }
.harvest .ph{ color:var(--ink-3); font-family:var(--hei); font-size:13.5px; }
.got{ font-family:var(--math); font-size:16px; font-weight:600; padding:3px 10px; border-radius:2px; background:var(--green-bg); color:var(--green); border:1px solid var(--green); }
.reveal{ padding:11px 14px; border-radius:2px; background:var(--amber-bg); border:1px solid var(--amber-line); font-family:var(--hei); font-size:14px; line-height:1.85; }

/* 子集枚举 */
.subsets{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:6px; }
.ss{
  font-family:var(--math); font-size:15px; text-align:center;
  padding:7px 4px; border:1px solid var(--rule); border-radius:2px;
  background:var(--paper-2); color:var(--ink-3);
}
.ss.hit{ border-color:var(--blue); background:var(--blue-bg); color:var(--blue); font-weight:700; }
.ss.proper{ border-style:dashed; }

/* Venn 图 */
.venn-wrap{ display:flex; justify-content:center; }
svg.venn{ width:100%; max-width:340px; height:auto; display:block; }
svg.venn .reg{ cursor:pointer; fill:transparent; transition:fill .18s; }
svg.venn .reg:hover{ fill:var(--blue-line); }
svg.venn .reg.sel{ fill:var(--blue); }
svg.venn .outline{ fill:none; stroke:var(--ink); stroke-width:1.6; }
svg.venn .lbl{ font-family:var(--math); font-size:17px; fill:var(--ink); }
svg.venn .ubox{ fill:none; stroke:var(--ink-3); stroke-width:1.2; }
.venn-expr{
  font-family:var(--math); font-size:19px; text-align:center;
  padding:9px; background:var(--rule-2); border:1px solid var(--rule); border-radius:2px;
}

/* 数轴 */
.axis-wrap{ overflow-x:auto; }
svg.axis{ width:100%; min-width:300px; height:96px; display:block; }
svg.axis .ln{ stroke:var(--ink); stroke-width:1.4; }
svg.axis .tick{ stroke:var(--ink-3); stroke-width:1; }
svg.axis .tx{ font-family:var(--math); font-size:12px; fill:var(--ink-2); }
svg.axis .barA{ stroke:var(--blue); stroke-width:5; stroke-linecap:round; }
svg.axis .barB{ stroke:var(--amber); stroke-width:5; stroke-linecap:round; }
svg.axis .barR{ stroke:var(--green); stroke-width:7; stroke-linecap:round; }

/* 充分必要：箭头 */
.pq{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; padding:8px 0; }
.pq .box{
  flex:1 1 190px; padding:10px 13px; border:1px solid var(--rule);
  border-radius:2px; background:var(--rule-2); font-size:15px; min-width:0;
}
.pq .box .tag{ font-family:var(--math); font-weight:700; color:var(--blue); margin-right:7px; }
.pq .arr{ font-family:var(--math); font-size:26px; color:var(--ink-3); min-width:44px; text-align:center; }
.pq .arr.yes{ color:var(--green); }
.pq .arr.no{ color:var(--wrong); }

/* 量词否定 */
.neg-line{
  font-family:var(--math); font-size:clamp(15px,3.8vw,18px);
  padding:10px 13px; border:1px solid var(--rule); border-radius:2px;
  background:var(--rule-2); overflow-x:auto;
}
.neg-line .hi{ color:var(--red); font-weight:700; }

/* ============ 老师工具栏 ============ */
.tools{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--paper-2); border-top:1px solid var(--rule);
  padding:7px 12px calc(7px + env(safe-area-inset-bottom));
  display:none; gap:7px; flex-wrap:wrap; align-items:center;
  box-shadow:0 -3px 14px -8px rgba(0,0,0,.4);
}
body.teacher .tools{ display:flex; }
.tools .lbl{ font-family:var(--hei); font-size:12px; color:var(--ink-3); margin-right:2px; }
.tools .grow{ flex:1 1 auto; }
.swatch{ width:26px; height:26px; min-height:26px; border-radius:50%; padding:0; border:2px solid var(--rule); }
.swatch.on{ border-color:var(--ink); transform:scale(1.12); }
.pen-panel{
  position:absolute; left:10px; bottom:calc(100% + 8px); width:min(310px,calc(100vw - 20px));
  padding:12px 14px; background:var(--paper-2); border:1px solid var(--rule);
  border-radius:3px; box-shadow:0 8px 28px rgba(0,0,0,.22);
  font-family:var(--hei); color:var(--ink); z-index:72;
}
.pen-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.pen-panel label{ display:grid; grid-template-columns:1fr auto; gap:2px 10px; font-size:13px; margin-top:7px; }
.pen-panel label input{ grid-column:1 / -1; width:100%; }
.pen-panel output{ font-family:var(--math); color:var(--blue); font-weight:700; }
.pen-panel p{ margin:7px 0 0; color:var(--ink-3); font-size:11.5px; line-height:1.6; }
.tool-toast{
  position:fixed; left:50%; bottom:76px; transform:translateX(-50%); z-index:75;
  padding:6px 13px; border-radius:18px; background:var(--ink); color:var(--paper);
  font-family:var(--hei); font-size:12px; opacity:0; pointer-events:none; transition:opacity .15s;
}
.tool-toast.show{ opacity:.92; }

/* 画布 */
#board{
  position:fixed; inset:0; width:100vw; height:100vh;
  pointer-events:none; z-index:5;
}
body.drawing #board{ pointer-events:auto; cursor:crosshair; touch-action:none; }
.page{ position:relative; }

/* 老师可编辑 */
body.teacher.editing [data-edit]{ outline:1px dashed var(--blue-line); transition:outline-color .15s; border-radius:2px; }
body.teacher.editing [data-edit]:hover{ outline-color:var(--blue); }
body.teacher.editing [data-edit]:focus{ outline:2px solid var(--blue); outline-offset:2px; background:var(--blue-bg); }

/* 跟随提示 */
.follow-tip{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:16px; z-index:65;
  background:var(--ink); color:var(--paper);
  font-family:var(--hei); font-size:12.5px;
  padding:6px 14px; border-radius:20px;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.follow-tip.show{ opacity:.9; }
body.teacher .follow-tip{ display:none; }

/* 目录 */
.toc{
  position:fixed; right:14px; top:64px; z-index:55;
  display:none; flex-direction:column; gap:2px;
}
@media (min-width:1240px){ .toc{ display:flex; } }
.toc a{
  font-family:var(--hei); font-size:12.5px; color:var(--ink-3);
  text-decoration:none; padding:3px 9px; border-right:2px solid var(--rule);
}
.toc a:hover{ color:var(--blue); }
.toc a.cur{ color:var(--red); border-right-color:var(--red); font-weight:700; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}