/* ===== 英语场景学习手册 · 精读手册风 ===== */
:root{
  --paper:#f7f4ec;
  --paper-card:#fffdf6;
  --paper-sink:#f1ebdc;
  --ink:#23302c;
  --ink-soft:#5d6a63;
  --ink-faint:#8a938c;
  --brand:#1e5b4f;
  --brand-deep:#143d35;
  --brand-tint:#e7efe9;
  --gold:#b07d24;
  --gold-soft:#e9d7ab;
  --line:#e0d8c2;
  --line-strong:#cdc3a6;
  --mark:#f3df9a;
  --red:#c4453c;
  --serif:Georgia,"Times New Roman","Songti SC","SimSun",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;
  --shadow:0 1px 2px rgba(35,48,44,.05),0 6px 22px rgba(35,48,44,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* 非画布区域：允许单/双指垂直滚动，禁止双指捏合缩放与横向手势（画布自身 touch-action:none 覆盖） */
html,body,.reader-wrap,.reader-head,.reader-nav,.topbar{touch-action:pan-y;overscroll-behavior:none}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:var(--brand);text-decoration:none}
::selection{background:#d9e6dd}

/* ============ 顶部条 ============ */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(247,244,236,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar-in{
  max-width:1120px;margin:0 auto;padding:12px 28px;
  display:flex;align-items:center;gap:12px;
}
.brand-badge{
  width:34px;height:34px;border-radius:9px;
  background:var(--brand-deep);color:var(--paper);
  font-family:var(--serif);font-size:19px;
  display:flex;align-items:center;justify-content:center;
  flex:none;
}
.brand-name{font-family:var(--serif);font-size:17px;font-weight:700;letter-spacing:.02em}
.brand-sub{font-size:12px;color:var(--ink-faint);margin-left:2px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px;color:var(--ink-soft)}
.progress-pill{display:flex;align-items:center;gap:8px}
.progress-pill .bar{width:96px;height:6px;border-radius:99px;background:var(--paper-sink);overflow:hidden}
.progress-pill .bar i{display:block;height:100%;background:var(--gold);border-radius:99px}
.progress-pill b{font-family:var(--serif);color:var(--brand-deep);font-size:14px}

/* ============ 首页 ============ */
.home{max-width:1120px;margin:0 auto;padding:0 28px 72px}
.hero{padding:40px 0 28px;border-bottom:1px solid var(--line);margin-bottom:28px;
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.hero h1{
  font-family:var(--serif);font-size:38px;line-height:1.18;font-weight:700;
  color:var(--brand-deep);letter-spacing:.01em;
}
.hero h1 .accent{color:var(--gold)}
.hero p{margin-top:12px;font-size:15.5px;color:var(--ink-soft);max-width:600px}
.hero-stats{display:flex;gap:34px;padding-bottom:6px}
.hero-stat .num{font-family:var(--serif);font-size:32px;color:var(--brand);line-height:1}
.hero-stat .lbl{font-size:12.5px;color:var(--ink-faint);margin-top:7px}

.cat-section{margin-bottom:46px}
.cat-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.cat-head h2{font-family:var(--serif);font-size:24px;color:var(--brand-deep);font-weight:700}
.cat-head .count{font-size:13px;color:var(--ink-faint)}
.cat-head .rule{flex:1;height:1px;background:var(--line)}

.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mod-grid.cols-2{grid-template-columns:repeat(2,1fr)}
/* 首页：全部模块在同一个连续网格里并列 */
.mod-grid-flat{grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px}
.mod-card{
  position:relative;display:block;
  background:var(--paper-card);border:1px solid var(--line);
  border-radius:12px;padding:18px 18px 15px;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
  color:var(--ink);overflow:hidden;
}
.mod-card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.mod-card .ctag{
  display:inline-block;font-size:11px;letter-spacing:.03em;color:var(--brand);
  background:rgba(30,91,79,.08);border-radius:99px;padding:2px 9px;margin-bottom:11px;
}
.mod-card .code{
  font-family:var(--serif);font-size:26px;font-weight:700;color:var(--gold);
  line-height:1;letter-spacing:.01em;
}
.mod-card .mtitle{margin-top:10px;font-size:16.5px;font-weight:600;color:var(--brand-deep);line-height:1.45}
.mod-card .meta{margin-top:14px;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-faint)}
.mod-card .mini-bar{flex:1;height:4px;border-radius:99px;background:var(--paper-sink);overflow:hidden}
.mod-card .mini-bar i{display:block;height:100%;background:var(--brand);border-radius:99px}
.mod-card.done .code{color:var(--brand)}
.mod-card .tick{
  position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--line-strong);color:transparent;font-size:12px;
  display:flex;align-items:center;justify-content:center;
}
.mod-card.done .tick{background:var(--brand);border-color:var(--brand);color:#fff}

/* ============ 首页：文件列表（一级 = 源 Markdown 文件） ============ */
.file-list{display:flex;flex-direction:column;gap:14px}
.file-row{
  display:flex;align-items:center;gap:22px;text-decoration:none;color:var(--ink);
  background:var(--paper-card);border:1px solid var(--line);border-radius:14px;
  padding:20px 24px;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.file-row:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.file-badge{
  flex:0 0 auto;width:70px;height:70px;border-radius:12px;
  background:linear-gradient(150deg,var(--brand),var(--brand-deep));
  color:#f1e6c8;font-family:var(--serif);font-size:27px;font-weight:700;
  display:flex;align-items:center;justify-content:center;letter-spacing:.02em;
}
.file-main{flex:1;min-width:0}
.ftitle{font-family:var(--serif);font-size:21px;font-weight:700;color:var(--brand-deep);line-height:1.3}
.fsub{margin-top:7px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.frange{
  flex:0 0 auto;font-size:11.5px;letter-spacing:.03em;color:var(--brand);
  background:rgba(30,91,79,.08);border-radius:99px;padding:2px 9px;
}
.fname{
  font-size:12px;color:var(--ink-faint);
  font-family:ui-monospace,Consolas,"Courier New",monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.file-progress{margin-top:13px}
.fp-bar{display:block;height:5px;border-radius:99px;background:var(--paper-sink);overflow:hidden}
.fp-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--gold));border-radius:99px}
.file-meta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:118px}
.fm-num{font-family:var(--serif);font-size:23px;font-weight:700;color:var(--brand);line-height:1}
.fm-num small{font-size:12px;font-weight:400;color:var(--ink-faint);font-family:var(--sans)}
.file-go{margin-top:5px;font-size:13px;color:var(--gold);font-weight:600;white-space:nowrap}
.file-row.done .file-badge{background:linear-gradient(150deg,var(--gold),#8a6116)}

/* ============ 文件页（二级目录 = 章节模块） ============ */
.cat-hero{margin:8px 0 26px}
.cat-hero .ch-range{
  display:inline-block;font-size:12px;letter-spacing:.05em;color:var(--gold);
  border:1px solid var(--line-strong);border-radius:99px;padding:3px 12px;margin-bottom:14px;
}
.cat-hero h1{font-family:var(--serif);font-size:32px;color:var(--brand-deep);font-weight:700;line-height:1.25}
.cat-hero .ch-file{
  margin-top:8px;font-size:12.5px;color:var(--ink-faint);
  font-family:ui-monospace,Consolas,"Courier New",monospace;
}
.cat-hero .ch-sub{margin-top:12px;font-size:14.5px;color:var(--ink-soft)}
.cat-hero .ch-sub b{color:var(--brand);font-weight:700}

/* ============ 模块页（文章目录） ============ */
.page{max-width:900px;margin:0 auto;padding:0 28px 80px}
.crumb{display:flex;align-items:center;gap:10px;padding:22px 0 6px;font-size:13.5px;color:var(--ink-faint)}
.crumb a{color:var(--ink-soft)}
.crumb a:hover{color:var(--brand)}
.crumb .sep{color:var(--line-strong)}
.mod-hero{padding:26px 0 34px;border-bottom:1px solid var(--line);margin-bottom:30px}
.mod-hero .mcode{font-family:var(--serif);font-size:19px;color:var(--gold);font-weight:700;letter-spacing:.04em}
.mod-hero h1{font-family:var(--serif);font-size:38px;color:var(--brand-deep);margin-top:8px;line-height:1.2}
.mod-hero .msub{margin-top:12px;font-size:14px;color:var(--ink-soft)}
.mod-hero .msub b{color:var(--brand);font-family:var(--serif)}

.sec-group{margin-bottom:30px}
.sec-title{
  display:flex;align-items:center;gap:12px;
  font-family:var(--serif);font-size:18px;color:var(--brand-deep);font-weight:700;
  margin:22px 0 10px;
}
.sec-title .n{
  width:26px;height:26px;border-radius:7px;background:var(--brand-tint);color:var(--brand);
  font-size:13px;display:flex;align-items:center;justify-content:center;flex:none;
  font-family:var(--sans-serif);font-weight:700;
}
.sec-title .rule{flex:1;height:1px;background:var(--line)}
.art-list{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper-card)}
.art-item{
  display:flex;align-items:center;gap:14px;
  padding:13px 18px;border-bottom:1px solid var(--line);
  color:var(--ink);transition:background .14s ease;
}
.art-item:last-child{border-bottom:none}
.art-item:hover{background:var(--paper)}
.art-item .anum{
  font-family:var(--serif);font-size:15px;color:var(--gold);font-weight:700;
  min-width:42px;flex:none;
}
.art-item .atitle{flex:1;font-size:15px}
.art-item .astatus{
  width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-strong);
  flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;color:transparent;
}
.art-item.done .astatus{background:var(--brand);border-color:var(--brand);color:#fff}
.art-item .go{color:var(--ink-faint);font-size:16px;flex:none;margin-left:2px}
.art-item:hover .go{color:var(--brand)}

/* ============ 文章阅读页 ============ */
.reader-wrap{max-width:860px;margin:0 auto;padding:0 22px 90px;position:relative}
.reader-head{padding:20px 4px 18px;position:relative;z-index:30}
.reader-head .rcrumb{font-size:13px;color:var(--ink-faint);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.reader-head .rcrumb a{color:var(--ink-soft)}
.reader-head .rcrumb a:hover{color:var(--brand)}
.annotate-stage{
  position:relative;
  z-index:1;
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:44px 52px 52px;
  min-height:70vh;
}
.annotate-text{position:relative;z-index:1}
.annotate-text h1{
  font-family:var(--serif);font-size:30px;color:var(--brand-deep);
  line-height:1.3;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid var(--gold-soft);
}
.annotate-text .art-kicker{font-size:13px;color:var(--gold);font-weight:600;margin-bottom:8px;letter-spacing:.04em}
/* 一整课：页内部分目录 + 大节/小节标题 */
.annotate-text .part-toc{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  background:var(--paper-sink);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;margin:0 0 28px;
}
.annotate-text .pt-label{font-size:12.5px;font-weight:700;color:var(--gold);letter-spacing:.05em;margin-right:2px}
.annotate-text .part-toc a{
  font-size:13px;color:var(--brand-deep);background:var(--paper-card);
  border:1px solid var(--line);border-radius:999px;padding:4px 12px;white-space:nowrap;
  transition:border-color .14s,color .14s;
}
.annotate-text .part-toc a:hover{border-color:var(--brand);color:var(--brand)}
.annotate-text .part-h{
  font-family:var(--serif);font-size:23px;line-height:1.4;font-weight:700;color:var(--brand-deep);
  margin:36px 0 16px;padding:8px 0 8px 14px;border-left:4px solid var(--gold);
  scroll-margin-top:80px;
}
.annotate-text .part-h:first-of-type{margin-top:10px}
.annotate-text .sub-h{
  font-size:17px;line-height:1.5;font-weight:700;color:var(--brand);
  margin:22px 0 10px;scroll-margin-top:80px;
}
.annotate-text p{margin:0 0 13px;font-size:16.5px;line-height:1.95}
.annotate-text .ln-title{font-weight:700;color:var(--brand-deep);margin-top:20px}
.annotate-text ul,.annotate-text ol{margin:4px 0 16px;padding-left:26px}
.annotate-text li{margin-bottom:7px;font-size:16px;line-height:1.9}
.annotate-text ol li::marker{color:var(--gold);font-family:var(--serif);font-weight:700}
.annotate-text ul li::marker{color:var(--brand)}
.annotate-text strong{color:var(--brand-deep)}
.annotate-text mark{background:var(--mark);color:inherit;padding:0 2px;border-radius:2px}
.annotate-text pre{
  font-family:Consolas,"Courier New",monospace;font-size:14px;line-height:1.7;
  white-space:pre-wrap;word-break:break-word;
  background:var(--paper-sink);border-radius:8px;padding:14px 16px;margin-bottom:14px;
}
.annotate-text .empty-note{color:var(--ink-faint);font-style:italic}
/* 画布挂到 #app，覆盖整个界面（顶部条/面包屑/底部导航仍可点） */
#app{position:relative}
#annotate-canvas{position:absolute;inset:0;z-index:20;touch-action:none}
/* 荧光层高亮层：在纸张背景之上、文字之下，故文字始终压在颜色上方且清晰 */
#annotate-hl{position:absolute;left:0;top:0;z-index:0;pointer-events:none;touch-action:none}

/* 文字删改模式 */
.annotate-text[contenteditable="true"]{
  outline:2px dashed rgba(176,125,36,.55);outline-offset:10px;
  border-radius:8px;background:#fffef9;cursor:text;
}
.edit-banner{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative;z-index:30;
  background:rgba(176,125,36,.1);border:1px solid #d8c48a;color:var(--brand-deep);
  border-radius:10px;padding:10px 14px;margin:0 4px 14px;font-size:13px;line-height:1.5;
}
.edit-banner .eb-title{font-weight:700;color:#8a6116;flex:0 0 auto}
.edit-banner .eb-tip{color:var(--ink-soft);flex:1 1 240px;min-width:200px}
.edit-banner .eb-actions{flex:0 0 auto;display:flex;gap:8px;margin-left:auto}
.edit-banner button{border-radius:8px;padding:7px 14px;font-size:13px;font-weight:600;white-space:nowrap}
.eb-reset{border:1px solid #cbb977;color:var(--brand-deep);background:var(--paper-card)}
.eb-reset:hover{border-color:var(--gold)}
.eb-done{background:var(--brand);color:#fff}
.eb-done:hover{background:var(--brand-deep)}

.reader-nav{
  display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;
  margin-top:26px;position:relative;z-index:30;
}
.rnav-btn{
  border:1px solid var(--line);background:var(--paper-card);border-radius:10px;
  padding:12px 16px;font-size:14px;color:var(--ink-soft);
  transition:border-color .14s,background .14s;min-width:0;
}
.rnav-btn:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.rnav-btn:disabled{opacity:.4;cursor:default}
.rnav-btn.next{text-align:right}
.rnav-btn .dir{display:block;font-size:11.5px;color:var(--ink-faint)}
.rnav-btn .t{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rnav-center{display:flex;gap:10px}
.reader-nav-single{display:block;text-align:center;margin-top:18px}
.reader-nav-single .rnav-center{justify-content:center}
.btn-learn{
  background:var(--brand);color:#fff;border-radius:10px;padding:11px 22px;font-size:14px;font-weight:600;
  transition:background .14s;
}
.btn-learn:hover{background:var(--brand-deep)}
.btn-learn.is-done{background:var(--paper-sink);color:var(--brand-deep);border:1px solid var(--line-strong)}
.btn-mod-back{
  border:1px solid var(--line);background:var(--paper-card);border-radius:10px;padding:11px 16px;font-size:14px;color:var(--ink-soft);
}
.btn-mod-back:hover{border-color:var(--brand);color:var(--brand)}

/* 章节快跳条（指到相邻的具体章节） */
.chapter-nav{
  display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;
  margin-top:20px;position:relative;z-index:30;
}
.cn-side{
  display:block;min-width:0;border:1px solid var(--line);background:var(--paper-card);
  border-radius:10px;padding:9px 14px;transition:border-color .14s,box-shadow .14s;
}
.cn-side:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.cn-side.prev{text-align:left}
.cn-side.next{text-align:right}
.cn-side.disabled{opacity:.45;pointer-events:none}
.cn-dir{display:block;font-size:11.5px;color:var(--gold);font-weight:700;letter-spacing:.03em;line-height:1.4}
.cn-name{
  display:block;font-size:13px;font-weight:600;color:var(--brand-deep);line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;
}
.cn-now{font-size:12.5px;color:var(--ink-faint);text-align:center;white-space:nowrap;line-height:1.4}

/* ============ 批注工具栏 ============ */
.annotate-toolbar{
  position:fixed;z-index:50;
  display:flex;align-items:center;gap:2px;
  background:rgba(20,61,53,.96);
  border-radius:999px;padding:5px 7px;
  box-shadow:0 8px 28px rgba(20,61,53,.28);
  cursor:grab;user-select:none;
  max-width:calc(100vw - 24px);
  overflow-x:auto;scrollbar-width:none;
}
.annotate-toolbar::-webkit-scrollbar{display:none}
.annotate-toolbar.dragging{cursor:grabbing}
.at-btn{
  display:inline-flex;align-items:center;gap:0;
  color:#eef4f0;font-size:13px;
  padding:7px 9px;border-radius:999px;
  white-space:nowrap;transition:background .13s,color .13s;
}
/* 默认只显示图标；仅当前选中的工具露出名称 */
.at-btn .lbl{display:none}
.at-btn.active{gap:5px;padding:6px 11px}
.at-btn.active .lbl{display:inline}
.at-btn:hover{background:rgba(255,255,255,.13)}
.at-btn.active{background:var(--gold);color:#1d2c28}
.at-btn svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.at-sep{width:1px;height:20px;background:rgba(255,255,255,.22);margin:0 2px;flex:none}
.at-ctl{display:inline-flex;align-items:center;gap:0;color:#eef4f0;font-size:12px;cursor:default;padding:0 2px}
.at-ctl > span{display:none}
.at-ctl input[type=range]{width:58px;cursor:pointer;accent-color:var(--gold)}
.at-ctl input[type=color]{
  width:24px;height:24px;padding:0;border:1px solid rgba(255,255,255,.3);
  border-radius:6px;background:none;cursor:pointer;
}
.at-export{background:var(--gold);color:#1d2c28;font-weight:600}
.at-export:hover{background:#d39c3e}

/* ============ 响应式 ============ */
@media(max-width:900px){
  .mod-grid{grid-template-columns:repeat(2,1fr)}
  .mod-grid.cols-2{grid-template-columns:repeat(2,1fr)}
  .hero{grid-template-columns:1fr;align-items:start}
  .hero h1{font-size:36px}
  .annotate-stage{padding:32px 26px 38px}
  .file-row{gap:16px;padding:18px}
  .file-badge{width:60px;height:60px;font-size:23px}
  .file-meta{min-width:96px}
}
@media(max-width:600px){
  .topbar-in{padding:10px 16px}
  .home,.page{padding-left:16px;padding-right:16px}
  .reader-wrap{padding-left:12px;padding-right:12px}
  .mod-grid{grid-template-columns:1fr}
  .hero{padding:40px 0 30px}
  .hero h1{font-size:30px}
  .hero-stats{gap:22px}
  .mod-hero h1{font-size:29px}
  .annotate-stage{padding:26px 18px 32px;border-radius:10px}
  .annotate-text h1{font-size:24px}
  .annotate-text p,.annotate-text li{font-size:15.5px}
  .reader-nav{grid-template-columns:1fr;gap:10px}
  .chapter-nav{grid-template-columns:1fr 1fr;gap:8px}
  .cn-now{display:none}
  .cn-side{padding:8px 10px}
  .cn-name{font-size:12px}
  .rnav-btn.next{text-align:left}
  .rnav-center{justify-content:stretch}
  .file-row{flex-wrap:wrap;padding:16px}
  .file-badge{width:52px;height:52px;font-size:20px}
  .file-main{flex:1 1 calc(100% - 68px)}
  .file-meta{flex:1 1 100%;flex-direction:row;align-items:center;gap:18px;min-width:0}
  .file-go{margin-top:0;margin-left:auto}
  .cat-hero h1{font-size:26px}
  .rnav-center button{flex:1}
  .annotate-toolbar{padding:4px;gap:1px}
  .at-btn .lbl,.at-btn.active .lbl{display:none}
  .at-btn,.at-btn.active{padding:6px;gap:0}
  .at-btn svg{width:14px;height:14px}
  .at-ctl{padding:0 1px}
  .at-ctl input[type=range]{width:28px}
  .at-ctl input[type=color]{width:22px;height:22px}
  .at-sep{margin:0 1px;height:18px}
  .brand-sub{display:none}
}

/* 添加到主屏幕（standalone）时，为底部 Home 指示条留白 */
body{ padding-bottom: env(safe-area-inset-bottom, 0px); }