/* 雾校档案 V12-E｜互动练习纸与 Apple Pencil */
.workbook-entry{gap:7px}
.workbook-entry svg{width:17px;height:17px}
.workbook-entry .wb-entry-short{display:none}
.workbook-toolbar{
  width:min(980px,calc(100% - 32px));
  margin:0 auto 14px;
  position:sticky;top:8px;z-index:18;
  display:none;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 12px;border:1px solid var(--line);border-radius:17px;
  background:color-mix(in srgb,var(--surface-strong) 91%,transparent);
  backdrop-filter:blur(24px) saturate(150%);box-shadow:var(--shadow-sm)
}
.workbook-toolbar.show{display:flex}
.wb-group{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.wb-group + .wb-group{padding-left:9px;border-left:1px solid var(--line)}
.wb-tool,.wb-action{
  min-height:36px;border:1px solid var(--line);border-radius:11px;background:var(--surface);
  padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  color:var(--text-2);font-size:11px;white-space:nowrap
}
.wb-tool svg,.wb-action svg{width:16px;height:16px}
.wb-tool:hover,.wb-action:hover{background:var(--surface-soft)}
.wb-tool.active{background:var(--accent);border-color:var(--accent);color:#fff}
.wb-action:disabled{opacity:.4;cursor:not-allowed}
.wb-status{margin-left:auto;font-size:10px;color:var(--text-3);white-space:nowrap}
.wb-finger{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text-2);padding:0 4px}
.wb-finger input{accent-color:var(--accent)}

.story p.wb-block{position:relative;isolation:isolate}
.story p.wb-block > :not(.wb-canvas){position:relative;z-index:1}
.wb-canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:3;
  pointer-events:none;touch-action:pan-y pinch-zoom;
}
body.wb-drawing .wb-canvas{pointer-events:auto;cursor:crosshair}
body.wb-drawing.wb-finger-enabled .wb-canvas{touch-action:none}
body.wb-drawing .story p.wb-block{user-select:none;-webkit-user-select:none}
body.wb-drawing .word{pointer-events:none}
body.wb-eraser .wb-canvas{cursor:cell}
.wb-pen-cursor{
  position:fixed;z-index:90;width:18px;height:18px;border:1px solid var(--accent);border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;display:none;background:color-mix(in srgb,var(--accent) 8%,transparent)
}
body.wb-drawing .wb-pen-cursor.show{display:block}

.workbook-activities{
  max-width:760px;margin:34px auto 0;padding:26px;border:1px solid var(--line);border-radius:22px;
  background:color-mix(in srgb,var(--surface-strong) 78%,transparent);box-shadow:var(--shadow-sm)
}
.wb-activity-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}
.wb-kicker{font:10px Georgia,serif;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.wb-title{font:500 25px "Songti SC","STSong",serif;letter-spacing:.08em;margin-top:7px}
.wb-intro{font-size:12px;color:var(--text-2);line-height:1.7;margin-top:7px;max-width:540px}
.wb-progress{min-width:76px;text-align:right}
.wb-progress b{display:block;font:26px Georgia,serif;color:var(--accent)}
.wb-progress span{font-size:10px;color:var(--text-3)}
.wb-cloze-list{display:flex;flex-direction:column;gap:12px}
.wb-cloze{
  border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:15px 16px;
  transition:border-color .2s,background .2s
}
.wb-cloze.correct{border-color:color-mix(in srgb,var(--accent) 48%,var(--line));background:color-mix(in srgb,var(--accent-soft) 64%,var(--surface))}
.wb-cloze.wrong{border-color:color-mix(in srgb,var(--danger) 48%,var(--line));background:color-mix(in srgb,var(--danger) 7%,var(--surface))}
.wb-cloze-row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start}
.wb-cloze-no{font:16px Georgia,serif;color:var(--text-3);padding-top:4px}
.wb-cloze-prompt{font-family:"Songti SC","STSong",serif;font-size:16px;line-height:1.8}
.wb-blank{
  display:inline-block;min-width:126px;max-width:230px;width:clamp(126px,27vw,230px);
  margin:0 5px;border:0;border-bottom:1.5px solid var(--accent);border-radius:0;background:transparent;
  padding:2px 7px 3px;text-align:center;outline:none;font:16px Georgia,"Times New Roman",serif;color:var(--accent)
}
.wb-blank:focus{border-bottom-width:2px;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.wb-cloze-actions{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 0 38px}
.wb-mini-btn{height:31px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface-strong);font-size:10px;color:var(--text-2)}
.wb-mini-btn:hover{background:var(--surface-soft)}
.wb-feedback{font-size:11px;line-height:1.6;margin:8px 0 0 38px;color:var(--text-3);min-height:18px}
.wb-cloze.correct .wb-feedback{color:var(--accent)}
.wb-cloze.wrong .wb-feedback{color:var(--danger)}
.wb-activity-footer{display:flex;align-items:center;gap:9px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
.wb-primary,.wb-secondary{height:40px;padding:0 15px;border-radius:11px;border:1px solid var(--line);background:var(--surface);font-size:11px}
.wb-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.wb-empty{text-align:center;color:var(--text-3);font-size:12px;line-height:1.8;padding:22px}
.wb-save-note{margin-right:auto;color:var(--text-3);font-size:10px}

@media(max-width:1180px){
  .workbook-entry span{display:none}.workbook-entry .wb-entry-short{display:inline}
}
@media(max-width:820px){
  .workbook-toolbar{top:74px;width:calc(100% - 20px);margin-bottom:6px;padding:8px;gap:6px;border-radius:15px}
  .wb-group + .wb-group{padding-left:0;border-left:0}
  .wb-status{width:100%;margin-left:0;text-align:center;order:10}
  .wb-tool,.wb-action{min-height:38px;padding:0 9px}
  .workbook-activities{margin-top:24px;padding:20px 16px;border-radius:18px}
  .wb-activity-head{gap:10px}.wb-title{font-size:22px}.wb-progress{min-width:60px}
  .wb-cloze-row{grid-template-columns:24px minmax(0,1fr)}
  .wb-cloze-prompt{font-size:15px}.wb-blank{width:150px;min-width:100px}
  .wb-cloze-actions,.wb-feedback{margin-left:34px}
  .workbook-entry .wb-entry-short{display:none}
}
@media(max-width:460px){
  .workbook-toolbar{top:70px;justify-content:center}
  .wb-tool span,.wb-action span{display:none}
  .wb-tool,.wb-action{width:38px;padding:0}
  .wb-finger{width:auto;padding:0 4px}.wb-finger span{display:inline}
  .wb-activity-head{display:block}.wb-progress{text-align:left;margin-top:12px}
  .wb-cloze{padding:13px 12px}.wb-cloze-prompt{line-height:2}
  .wb-blank{width:130px;font-size:15px}
}