/* 理工科教材阅读器 主题 + 布局 + 教材内容样式 */
:root{
  --bg:#f4f6f9; --panel:#ffffff; --text:#1f2733; --soft:#6b7785;
  --line:#e3e8ef; --accent:#2f6fed; --accent-soft:#e8f0fe;
  --code-bg:#1e2430; --code-text:#e6edf3; --ex-bg:#f0f7ff; --ex-line:#2f6fed;
  --note-red:#ffd9d9; --note-yellow:#fff3bf; --note-green:#d3f9d8; --note-blue:#d0ebff;
}
body.theme-sepia{--bg:#f3ecd9; --panel:#fbf6e9; --text:#4a3f2f; --soft:#8a7a5c; --line:#e4d8bd; --accent:#9a6b2f; --accent-soft:#f3e7cd; --code-bg:#3a3022; --code-text:#f3e7cd; --ex-bg:#f7efdb; --ex-line:#9a6b2f;}
body.theme-dark{--bg:#12161c; --panel:#1a2029; --text:#dfe6ee; --soft:#8595a6; --line:#2a323d; --accent:#5b9bff; --accent-soft:#1e2c44; --code-bg:#0c0f14; --code-text:#cdd6e0; --ex-bg:#16202e; --ex-line:#5b9bff; --note-red:#5a2b2b; --note-yellow:#5a4d1f; --note-green:#274a2c; --note-blue:#1f3b52;}
*{box-sizing:border-box;}
html{overflow-x:clip;}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Noto Sans SC","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif;line-height:1.85;font-size:16px;overflow-x:clip;}
.tr-progress{position:fixed;top:0;left:0;height:3px;background:var(--accent);width:0;z-index:60;transition:width .1s;}
.tr-toolbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 1px 4px rgba(0,0,0,.04);}
.tr-title{font-weight:700;font-size:1.05rem;}
.tr-book-name{font-weight:400;color:var(--soft);font-size:.85rem;margin-left:4px;}
.tr-search-box{position:relative;flex:1;min-width:140px;max-width:300px;display:flex;align-items:center;}
.tr-search{flex:1;min-width:0;width:100%;padding:6px 28px 6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);}
.tr-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;display:none;align-items:center;justify-content:center;border:none;background:var(--soft);color:#fff;border-radius:50%;font-size:15px;line-height:1;cursor:pointer;opacity:.6;padding:0;}
.tr-search-clear:hover{opacity:1;}
.tr-search-wrap{display:flex;align-items:center;gap:8px;flex:1;min-width:220px;max-width:560px;}
.tr-search-modes{display:flex;gap:2px;flex:none;}
.tr-mode{padding:5px 9px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--soft);cursor:pointer;font-size:.78rem;white-space:nowrap;}
.tr-mode.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.tr-scope{padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font-size:.78rem;max-width:200px;}
.tr-btn{padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);cursor:pointer;font-size:.85rem;text-decoration:none;display:inline-block;}
.tr-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.tr-btn:hover{border-color:var(--accent);}
/* 主题下拉框 */
.tr-theme-label{color:var(--soft);font-size:.8rem;margin-left:4px;cursor:pointer;}
.tr-theme-select{padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);cursor:pointer;font-size:.85rem;}
.tr-theme-select:focus{outline:none;border-color:var(--accent);}
.tr-support-btn{border-color:var(--accent);color:var(--accent);}
.tr-support-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);}

/* ============ 支持一下：微信赞赏弹窗 ============ */
.tr-support-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:120;align-items:center;justify-content:center;}
.tr-support-modal.active{display:flex;}
.tr-support-box{position:relative;background:var(--panel);border-radius:14px;padding:24px;width:min(380px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.3);text-align:center;}
.tr-support-box h3{margin:0 0 12px;font-size:1.15rem;color:var(--accent);}
.tr-support-text{margin:0 0 16px;color:var(--text);font-size:.95rem;line-height:1.7;}
.tr-support-qr{width:220px;max-width:100%;height:auto;border:1px solid var(--line);border-radius:10px;margin:0 auto 12px;display:block;}
.tr-support-hint{margin:0;color:var(--soft);font-size:.82rem;}
.tr-support-close{position:absolute;top:10px;right:12px;width:28px;height:28px;border:none;background:var(--bg);color:var(--soft);border-radius:50%;font-size:1.2rem;line-height:1;cursor:pointer;}
.tr-support-close:hover{color:var(--text);}
.tr-file{display:none;}
.tr-book-picker{position:absolute;top:46px;right:14px;z-index:70;min-width:240px;max-height:60vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.12);padding:6px;}
.tr-picker-item{display:block;padding:8px 10px;border-radius:7px;color:var(--text);text-decoration:none;font-size:.86rem;cursor:pointer;}
.tr-picker-item:hover{background:var(--accent-soft);color:var(--accent);}
.tr-picker-loading{padding:10px;color:var(--soft);font-size:.82rem;text-align:center;}
.tr-layout{display:flex;align-items:flex-start;max-width:1100px;margin:0 auto;gap:0;overflow-x:clip;}
.tr-toc{position:sticky;top:56px;align-self:flex-start;width:240px;max-height:calc(100vh - 70px);overflow:auto;padding:18px 14px;background:var(--panel);border-right:1px solid var(--line);}
/* 桌面端：目录按钮可折叠/展开侧栏（默认显示，点击隐藏，再点显示） */
.tr-toc.collapsed{display:none;}
.tr-toc h3{margin:0 0 10px;font-size:.95rem;color:var(--soft);}
.tr-toc a{display:block;padding:5px 8px;border-radius:6px;color:var(--text);text-decoration:none;font-size:.86rem;border-left:2px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tr-toc a.level-1{font-weight:700;}
.tr-toc a.level-2{padding-left:18px;font-size:.82rem;color:var(--soft);}
.tr-toc a.level-3{padding-left:36px;font-size:.8rem;color:var(--soft, #888);}
.tr-toc a.level-4{padding-left:54px;font-size:.76rem;color:var(--soft, #aaa);}
.tr-toc a.active{background:var(--accent-soft);border-left-color:var(--accent);color:var(--accent);}
.tr-reader{flex:1;min-width:0;padding:26px 30px 120px;overflow-x:clip;}
.tr-content{max-width:760px;margin:0 auto;overflow-x:clip;}
/* 正文插图：采用「缩放」方案——等比缩放到容器宽度，完整显示（不裁剪/不截取）。
   仅做 max-width + height:auto，保持原始宽高比；不设置固定高 + object-fit:cover（那会裁掉边缘）。 */
.tr-content img{max-width:100%;height:auto;display:block;margin:1em auto;
  border:1px solid var(--line);border-radius:8px;background:var(--bg);
  box-shadow:0 1px 4px rgba(0,0,0,.05);}
.tr-content figure{margin:1.2em 0;text-align:center;}
.tr-content figure img{margin:0 auto;}
.tr-content figcaption{font-size:.82rem;color:var(--soft);margin-top:6px;}
.tr-empty{text-align:center;color:var(--soft);padding:60px 20px;}
.tr-empty code{background:var(--accent-soft);padding:2px 6px;border-radius:4px;color:var(--accent);}
.chapter-container{margin-bottom:40px;}
.chapter-title{font-size:1.7rem;font-weight:800;margin:.4em 0 .6em;padding-bottom:.3em;border-bottom:3px solid var(--accent);}
.section-title{font-size:1.32rem;font-weight:700;margin:1.6em 0 .7em;color:var(--accent);}
.subsection-title{font-size:1.1rem;font-weight:600;margin:1.3em 0 .5em;}
.content.paragraph{margin:.7em 0;text-align:justify;}

/* 代码块 */
.code-block{position:relative;background:var(--code-bg);color:var(--code-text);padding:16px 18px 16px 52px;border-radius:10px;overflow:auto;font-family:"JetBrains Mono","Fira Code",Consolas,Monaco,monospace;font-size:13.5px;line-height:1.6;margin:1em 0;white-space:pre;counter-reset:line;}
.code-block .code-ln{display:block;position:relative;}
.code-block .code-ln:before{content:counter(line);counter-increment:line;position:absolute;left:-44px;width:36px;text-align:right;color:var(--soft);opacity:.5;font-size:.72rem;user-select:none;}
.code-copy{position:absolute;top:8px;right:8px;padding:3px 9px;font-size:.72rem;border:none;border-radius:5px;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;}
.code-copy:hover{background:rgba(255,255,255,.3);}
.code-run{position:absolute;top:8px;right:62px;padding:3px 9px;font-size:.72rem;border:none;border-radius:5px;background:rgba(120,200,120,.28);color:#fff;cursor:pointer;}
.code-run:hover{background:rgba(120,200,120,.5);}

/* 例题 / 习题 卡片 */
.example-block,.exercise-block{background:var(--ex-bg);border-left:4px solid var(--ex-line);border-radius:0 10px 10px 0;padding:12px 18px;margin:1em 0;}
.example-title,.exercise-title{font-weight:700;color:var(--ex-line);margin-bottom:.3em;}

/* 表格 */
.table-wrap{overflow-x:auto;margin:1em 0;}
table.content{width:100%;border-collapse:collapse;font-size:.9rem;}
table.content th,table.content td{border:1px solid var(--line);padding:7px 10px;text-align:left;}
table.content th{background:var(--accent-soft);color:var(--accent);}

/* 公式行 */
.formula{text-align:center;font-style:italic;padding:.4em 0;font-size:1.05rem;}

/* 笔记高亮 */
.note{background:var(--note-red);border-bottom:2px solid #ff8787;cursor:help;border-radius:2px;padding:0 1px;}
.note.yellow{background:var(--note-yellow);border-bottom-color:#fab005;}
.note.green{background:var(--note-green);border-bottom-color:#51cf66;}
.note.blue{background:var(--note-blue);border-bottom-color:#339af0;}
.tr-mark{background:#fff3bf;border-radius:2px;padding:0 1px;}

/* 划词笔记弹窗 */
.tr-note-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:80;align-items:center;justify-content:center;}
.tr-note-modal.active{display:flex;}
.tr-note-box{background:var(--panel);border-radius:14px;padding:22px;width:min(420px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.3);}
.tr-note-box h3{margin:0 0 10px;font-size:1.05rem;}
.tr-note-sel{background:var(--accent-soft);padding:8px 10px;border-radius:8px;font-size:.85rem;color:var(--soft);margin-bottom:10px;max-height:80px;overflow:auto;}
.tr-note-box textarea{width:100%;min-height:80px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);resize:vertical;}
.tr-note-colors{display:flex;gap:8px;margin:10px 0;}
.note-color-btn{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);cursor:pointer;background:var(--note-red);}
.note-color-btn.yellow{background:var(--note-yellow);}
.note-color-btn.green{background:var(--note-green);}
.note-color-btn.blue{background:var(--note-blue);}
.note-color-btn.sel{border-color:var(--accent);transform:scale(1.12);}
.tr-note-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;}

/* 书签 */
.tr-bookmark-fab{position:fixed;right:18px;bottom:20px;width:48px;height:48px;border-radius:50%;border:none;background:var(--accent);color:#fff;font-size:1.3rem;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:70;}
.tr-bookmark-list{display:none;position:fixed;right:18px;bottom:76px;width:240px;max-height:50vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);z-index:100;}
.tr-bookmark-list.open{display:block;}
.tr-bookmark-list h4{margin:0 0 8px;font-size:.9rem;color:var(--soft);}
.tr-bookmark-list a{display:block;padding:6px 8px;border-radius:6px;color:var(--text);text-decoration:none;font-size:.83rem;position:relative;}
.tr-bookmark-list a:hover{background:var(--accent-soft);}
.bm-del{position:absolute;right:6px;top:6px;color:var(--soft);font-size:.7rem;}

/* 章节导航条 */
.tr-navbar{display:flex;justify-content:space-between;align-items:center;margin:30px 0 10px;padding:12px 16px;background:var(--panel);border:1px solid var(--line);border-radius:10px;position:sticky;bottom:14px;}
.nav-btn{padding:6px 14px;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:8px;cursor:pointer;}
.nav-progress{color:var(--soft);font-size:.85rem;}

/* ============ 共享笔记（划线 + 标注） ============ */
.tr-note{background:var(--note-red);border-bottom:2px solid #ff8787;cursor:pointer;border-radius:2px;padding:0 1px;transition:filter .15s;}
.tr-note:hover{filter:brightness(.95);}
.tr-note.yellow{background:var(--note-yellow);border-bottom-color:#fab005;}
.tr-note.green{background:var(--note-green);border-bottom-color:#51cf66;}
.tr-note.blue{background:var(--note-blue);border-bottom-color:#339af0;}

/* 从笔记/解惑列表跳转过来时闪烁提示；跨行内标签的分段会一起闪 */
@keyframes trFlash{0%,100%{box-shadow:0 0 0 0 rgba(255,146,43,0);}
  30%{box-shadow:0 0 0 4px rgba(255,146,43,.55);}}
.tr-flash{animation:trFlash 1.6s ease-in-out;border-radius:3px;}

/* 弹窗字段 */
.tr-note-field{margin:12px 0;}
.tr-note-field>label{display:block;font-size:.82rem;color:var(--soft);margin-bottom:6px;font-weight:600;}
.tr-note-types{display:flex;gap:8px;flex-wrap:wrap;}
.ntype-btn{flex:1;min-width:90px;padding:8px 6px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);cursor:pointer;font-size:.82rem;}
.ntype-btn.sel{background:var(--accent);color:#fff;border-color:var(--accent);}
.tr-note-hint{font-size:.74rem;color:var(--soft);margin-top:6px;}
.tr-note-box textarea{width:100%;min-height:90px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);resize:vertical;font-family:inherit;}

/* 笔记按钮：保留原有颜色选择 */
.tr-note-colors{display:flex;gap:8px;}
.note-color-btn{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);cursor:pointer;background:var(--note-red);}
.note-color-btn.yellow{background:var(--note-yellow);}
.note-color-btn.green{background:var(--note-green);}
.note-color-btn.blue{background:var(--note-blue);}
.note-color-btn.sel{border-color:var(--accent);transform:scale(1.12);}

/* 笔记 FAB + 面板 */
.tr-note-fab{position:fixed;right:18px;bottom:78px;width:48px;height:48px;border-radius:50%;border:none;background:#7048e8;color:#fff;font-size:1.3rem;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:70;}
.tr-note-fab:hover{background:#5f3dc4;}
.tr-note-list{display:none;position:fixed;right:18px;bottom:134px;width:340px;max-width:92vw;max-height:64vh;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.22);z-index:100;flex-direction:column;}
.tr-note-list.open{display:flex;}
.tr-note-list-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:700;font-size:.92rem;}
.tr-note-count{background:var(--accent);color:#fff;border-radius:10px;padding:1px 9px;font-size:.78rem;}
.tr-note-list-body{overflow:auto;padding:10px 12px;}
.tr-note-empty{color:var(--soft);font-size:.82rem;text-align:center;padding:20px 0;}
.tr-note-group{margin-bottom:14px;}
.tr-note-group-title{font-size:.8rem;color:var(--accent);font-weight:700;margin:6px 0;position:sticky;top:0;background:var(--panel);padding:4px 0;}
.tr-note-item{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;padding:8px 10px;margin-bottom:8px;cursor:pointer;background:var(--bg);}
.tr-note-item.type-insight{border-left-color:#4c6ef5;}
.tr-note-item.type-question{border-left-color:#f76707;}
.tr-note-item.type-material{border-left-color:#0ca678;}
.tr-note-quote{font-size:.78rem;color:var(--soft);margin-bottom:4px;font-style:italic;}
.tr-note-text{font-size:.86rem;line-height:1.6;word-break:break-word;}
.tr-note-text a{color:var(--accent);}
.tr-note-meta{display:flex;justify-content:space-between;font-size:.72rem;color:var(--soft);margin-top:6px;}
.tr-note-item-actions{text-align:right;font-size:.74rem;margin-top:4px;}
.tr-note-item-actions span{color:var(--accent);cursor:pointer;margin-left:10px;}
.tr-note-item-actions .tr-note-del{color:#e03131;}

/* 点击高亮弹出的气泡 */
.tr-note-pop{display:none;position:fixed;z-index:90;width:300px;max-width:90vw;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,.28);padding:12px 14px;}
.tr-note-pop.active{display:block;}
.tr-note-pop-type{font-size:.85rem;font-weight:700;color:var(--accent);margin-bottom:6px;}
.tr-note-pop-quote{font-size:.82rem;color:var(--soft);font-style:italic;margin-bottom:6px;}
.tr-note-pop-text{font-size:.95rem;line-height:1.7;word-break:break-word;}
.tr-note-pop-text a{color:var(--accent);}
.tr-note-pop-meta{display:flex;justify-content:space-between;font-size:.72rem;color:var(--soft);margin-top:8px;}
.tr-note-pop-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;}
.tr-note-pop-actions .tr-btn{padding:4px 12px;font-size:.8rem;}

/* ============ 选词操作条（笔记 / AI 解惑） ============ */
.tr-selbar{display:none;position:fixed;z-index:85;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:5px;}
.tr-selbar button{border:none;background:var(--bg);color:var(--text);padding:7px 12px;border-radius:7px;cursor:pointer;font-size:.82rem;white-space:nowrap;}
.tr-selbar button:hover{background:var(--accent);color:#fff;}

/* ============ AI 解惑 ============ */
.tr-explain-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:80;align-items:center;justify-content:center;}
.tr-explain-modal.active{display:flex;}
.tr-explain-box{background:var(--panel);border-radius:14px;padding:22px;width:min(520px,92vw);max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);}
.tr-explain-box h3{margin:0 0 10px;font-size:1.05rem;}
.tr-explain-field{margin:12px 0;}
.tr-explain-field>label{display:block;font-size:.82rem;color:var(--soft);margin-bottom:6px;font-weight:600;}
.tr-explain-q{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font-family:inherit;font-size:.88rem;}
.tr-explain-q:focus{outline:none;border-color:var(--accent);}
.tr-explain-answer{max-height:240px;overflow:auto;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);line-height:1.7;word-break:break-word;}
.tr-explain-answer:empty:before{content:"AI 的回答会显示在这里…";color:var(--soft);font-style:italic;}
.tr-exp-q{margin:0 0 4px;font-weight:700;color:var(--accent);}
.tr-exp-q:before{content:"❓ ";}
.tr-exp-a{margin:0 0 14px;}
.tr-exp-a:before{content:"🤖 ";}
.tr-exp-a h1,.tr-exp-a h2,.tr-exp-a h3,.tr-exp-a h4{margin:.4em 0 .3em;line-height:1.35;}
.tr-exp-a h1{font-size:1.1rem;}.tr-exp-a h2{font-size:1.02rem;}.tr-exp-a h3{font-size:.96rem;}
.tr-exp-a p{margin:.5em 0;}
.tr-exp-a ul,.tr-exp-a ol{margin:.4em 0;padding-left:1.4em;}
.tr-exp-a li{margin:.2em 0;}
.tr-exp-a code{background:var(--code-bg);color:var(--code-text);padding:1px 5px;border-radius:4px;font-family:"JetBrains Mono","Fira Code",Consolas,Monospace;font-size:.85em;}
.tr-exp-a pre{background:var(--code-bg);color:var(--code-text);padding:10px 12px;padding-left:48px;border-radius:8px;overflow:auto;font-family:"JetBrains Mono","Fira Code",Consolas,Monospace;font-size:.82rem;line-height:1.55;margin:.6em 0;position:relative;counter-reset:line;}
.tr-exp-a pre code{background:none;color:inherit;padding:0;display:block;}
.tr-exp-a pre .code-ln{display:block;position:relative;}
.tr-exp-a pre .code-ln:before{content:counter(line);counter-increment:line;position:absolute;left:-40px;width:32px;text-align:right;color:var(--soft);opacity:.5;font-size:.75rem;user-select:none;line-height:1.55;}
.tr-exp-a strong{color:var(--text);}
.tr-exp-loading{color:var(--soft);font-style:italic;}
.tr-explain-quote{background:var(--accent-soft);padding:8px 10px;border-left:3px solid var(--accent);border-radius:0 8px 8px 0;font-size:.85rem;color:var(--text);max-height:120px;overflow:auto;}
.tr-explain-box textarea{width:100%;min-height:150px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);resize:vertical;font-family:inherit;line-height:1.7;}
/* 编辑 / 预览双栏 */
.tr-explain-edit{display:flex;gap:12px;align-items:stretch;max-height:62vh;}
.tr-explain-edit textarea{flex:1;min-width:0;min-height:200px;max-height:62vh;}
.tr-explain-preview{flex:1;min-width:0;min-height:200px;max-height:62vh;overflow:auto;padding:10px 12px;border:1px dashed var(--line);border-radius:8px;background:var(--bg);color:var(--text);line-height:1.7;word-break:break-word;}
.tr-explain-preview-empty{color:var(--soft);font-size:.84rem;font-style:italic;}
.tr-explain-preview h1,.tr-explain-preview h2,.tr-explain-preview h3,.tr-explain-preview h4,.tr-explain-preview h5,.tr-explain-preview h6{margin:.4em 0 .3em;line-height:1.35;}
.tr-explain-preview h1{font-size:1.2rem;}.tr-explain-preview h2{font-size:1.1rem;}.tr-explain-preview h3{font-size:1rem;}
.tr-explain-preview p{margin:.5em 0;}
.tr-explain-preview ul,.tr-explain-preview ol{margin:.4em 0;padding-left:1.4em;}
.tr-explain-preview li{margin:.2em 0;}
.tr-explain-preview blockquote{margin:.5em 0;padding:.3em .8em;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 6px 6px 0;color:var(--soft);}
.tr-explain-preview code{background:var(--code-bg);color:var(--code-text);padding:1px 5px;border-radius:4px;font-family:"JetBrains Mono","Fira Code",Consolas,Monospace;font-size:.85em;}
.tr-explain-preview pre{background:var(--code-bg);color:var(--code-text);padding:10px 12px;padding-left:48px;border-radius:8px;overflow:auto;font-family:"JetBrains Mono","Fira Code",Consolas,Monospace;font-size:.82rem;line-height:1.55;margin:.6em 0;position:relative;counter-reset:line;}
.tr-explain-preview pre code{background:none;color:inherit;padding:0;display:block;}
.tr-explain-preview pre .code-ln{display:block;position:relative;}
.tr-explain-preview pre .code-ln:before{content:counter(line);counter-increment:line;position:absolute;left:-40px;width:32px;text-align:right;color:var(--soft);opacity:.5;font-size:.75rem;user-select:none;line-height:1.55;}
.tr-explain-preview a{color:var(--accent);}
.tr-explain-preview hr{border:none;border-top:1px solid var(--line);margin:.8em 0;}
.tr-explain-preview strong{color:var(--text);}
@media (max-width:680px){.tr-explain-edit{flex-direction:column;}.tr-explain-preview{min-height:160px;}}
.tr-explain-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;flex-wrap:wrap;}
.tr-explain-actions .tr-btn[disabled]{opacity:.6;cursor:default;}
/* 正文高亮：AI 解惑所在原文 */
.tr-exp{background:linear-gradient(transparent 70%, rgba(47,111,237,.18) 0);border-bottom:2px dashed var(--accent);cursor:pointer;border-radius:2px;padding:0 1px;transition:filter .15s;}
.tr-exp:hover{filter:brightness(.96);}

/* 代码块内的高亮：代码区是深底浅字，直接套用正文的浅色底会看不清，
   改成半透明色底 + 保留代码原色，并用左右边框标出范围。 */
.code-block .tr-note,.code-block .tr-exp,.code-block .tr-mark{
  background:rgba(255,212,59,.22);color:inherit;border-bottom:2px solid #ffd43b;
  border-radius:2px;padding:0;}
.code-block .tr-note{background:rgba(255,107,107,.24);border-bottom-color:#ff8787;}
.code-block .tr-note.yellow{background:rgba(255,212,59,.24);border-bottom-color:#fab005;}
.code-block .tr-note.green{background:rgba(81,207,102,.24);border-bottom-color:#51cf66;}
.code-block .tr-note.blue{background:rgba(51,154,240,.26);border-bottom-color:#339af0;}
.code-block .tr-exp{background:rgba(47,111,237,.28);border-bottom:2px dashed #74c0fc;}
/* 行号是 :before 计数器，高亮 span 不能触发新的计数 */
.code-block .tr-note:before,.code-block .tr-exp:before,.code-block .tr-mark:before{content:none;}
/* FAB + 面板 */
.tr-explain-fab{position:fixed;right:18px;bottom:136px;width:48px;height:48px;border-radius:50%;border:none;background:#12b886;color:#fff;font-size:1.3rem;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:70;}
.tr-explain-fab:hover{background:#0ca678;}
.tr-explain-list{display:none;position:fixed;right:18px;bottom:192px;width:340px;max-width:92vw;max-height:64vh;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.22);z-index:100;flex-direction:column;}
.tr-explain-list.open{display:flex;}
.tr-explain-list-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:700;font-size:.92rem;}
.tr-explain-count{background:#12b886;color:#fff;border-radius:10px;padding:1px 9px;font-size:.78rem;}
.tr-explain-list-body{overflow:auto;padding:10px 12px;}
.tr-explain-empty{color:var(--soft);font-size:.82rem;text-align:center;padding:20px 0;line-height:1.7;}
.tr-explain-item{border:1px solid var(--line);border-left:4px solid #12b886;border-radius:8px;padding:8px 10px;margin-bottom:8px;cursor:pointer;background:var(--bg);}
.tr-explain-quote{font-size:.78rem;color:var(--soft);margin-bottom:4px;font-style:italic;}
.tr-explain-text{font-size:.86rem;line-height:1.65;word-break:break-word;}
.tr-explain-text a{color:var(--accent);}
/* 粗略摘要后的「查看完整 ›」入口：跳转动态生成的完整内容页 */
.tr-explain-more{display:inline-block;margin-top:6px;font-size:.78rem;color:var(--accent);text-decoration:none;cursor:pointer;}
.tr-explain-more:hover{text-decoration:underline;}
.tr-explain-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:.72rem;color:var(--soft);margin-top:6px;}
.tr-explain-edited{color:#f76707;}
.tr-explain-item-actions{text-align:right;font-size:.74rem;margin-top:4px;}
.tr-explain-item-actions span{color:var(--accent);cursor:pointer;margin-left:10px;}
.tr-explain-item-actions .tr-explain-del{color:#e03131;}
/* 点击高亮弹出的气泡 */
.tr-explain-pop{display:none;position:fixed;z-index:90;width:320px;max-width:90vw;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,.28);padding:12px 14px;}
.tr-explain-pop.active{display:block;}
.tr-explain-pop-quote{font-size:.82rem;color:var(--soft);font-style:italic;margin-bottom:6px;}
.tr-explain-pop-text{font-size:.95rem;line-height:1.7;word-break:break-word;}
.tr-explain-pop-text a{color:var(--accent);}
.tr-explain-pop-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:.72rem;color:var(--soft);margin-top:8px;}
.tr-explain-pop-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;}
.tr-explain-pop-actions .tr-btn{padding:4px 12px;font-size:.8rem;}

@media (max-width:900px){
  .tr-toc{position:fixed;left:0;top:0;bottom:0;z-index:90;width:78vw;max-width:300px;transform:translateX(-100%);transition:transform .25s;box-shadow:4px 0 20px rgba(0,0,0,.2);}
  .tr-toc.open{transform:translateX(0);}
  .tr-reader{padding:18px 16px 100px;}
  .tr-search-box{max-width:none;}
}

/* ============ 正文搜索高亮 ============ */
mark.tr-search-hl{background:#ffe066;border-radius:2px;padding:0 1px;color:inherit;}
mark.tr-search-hl.active{background:#ff922b;color:#fff;box-shadow:0 0 0 2px rgba(255,146,43,.35);}

/* ============ AI 智能定位高亮 ============ */
.ai-locate-hl{background:linear-gradient(transparent 62%, rgba(255,146,43,.30) 0);border-radius:3px;box-shadow:0 0 0 2px rgba(255,146,43,.45);padding:2px 5px;}
.ai-locate-range{background:rgba(47,111,237,.07);border-radius:4px;}
.tr-ai-tip{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--panel);border:1px solid var(--accent);color:var(--text);padding:10px 16px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:.85rem;opacity:0;transition:.3s;z-index:95;max-width:90vw;}
.tr-ai-tip.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ============ AI 概念解答浮层 ============ */
.tr-ai-answer{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  max-width:560px;width:92vw;background:var(--panel);border:1px solid var(--accent);color:var(--text);
  padding:12px 44px 12px 16px;border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,.28);
  font-size:.9rem;line-height:1.7;opacity:0;transition:.3s;z-index:96;max-height:60vh;overflow:auto;}
.tr-ai-answer.show{opacity:1;transform:translateX(-50%) translateY(0);}
.tr-ai-answer h4{margin:0 0 6px;font-size:.85rem;color:var(--accent);}
.tr-ai-answer .tr-ai-close{position:absolute;top:8px;right:10px;cursor:pointer;border:none;
  background:none;font-size:1.2rem;line-height:1;color:var(--soft);}
.tr-ai-answer .tr-ai-close:hover{color:var(--text);}
.tr-ai-answer .tr-ai-body{white-space:pre-wrap;word-break:break-word;}

/* ============ 交互式流程图（Mermaid 渲染） ============ */
.fc{margin:1.1em 0;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;}
.fc-wrap{display:flex;flex-direction:column;gap:8px;}
.fc-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.fc-title{font-weight:700;color:var(--accent);font-size:.95rem;}
.fc-btns{display:flex;gap:4px;margin-left:auto;}
.fc-toggle{padding:3px 14px;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:7px;cursor:pointer;font-size:.78rem;transition:all .15s;}
.fc-toggle:hover{border-color:var(--accent);}
.fc-toggle.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.fc-run,.fc-reset{padding:4px 12px;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:7px;cursor:pointer;font-size:.78rem;}
.fc-run:hover,.fc-reset:hover{filter:brightness(1.06);}
.fc-src-panel{max-height:360px;overflow:auto;background:var(--bg);border-radius:8px;padding:10px 14px;}
.fc-src-code{margin:0;font-family:'Cascadia Code','Fira Code','Consolas',monospace;font-size:.82rem;color:var(--text);white-space:pre-wrap;word-break:break-all;line-height:1.6;}
.fc-svg-wrap{width:100%;overflow-x:auto;border-radius:8px;background:var(--bg);padding:4px;}
.fc-svg{width:100%;height:auto;display:block;max-width:720px;margin:0 auto;}
.fc-caption{font-size:.82rem;color:var(--soft);min-height:1.2em;}
/* 交互式走查的步进控制区：悬浮固定在视口底部，避免大图时需滚动到底部操作 */
.fc-step{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);display:none;align-items:center;flex-wrap:wrap;gap:8px;
  max-width:min(680px,92vw);padding:10px 16px;background:var(--panel);border:1px solid var(--accent);
  border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.26);z-index:75;}
.fc-step-info{flex:1;min-width:160px;font-size:.85rem;color:var(--text);line-height:1.5;}
.fc-step-msg{font-size:.85rem;color:var(--text);}
.fc-step-msg b{color:var(--accent);}
.fc-step-btn{padding:6px 16px;border:1px solid var(--accent);background:#fff;color:var(--accent);border-radius:8px;cursor:pointer;font-size:.85rem;font-weight:600;transition:all .15s;white-space:nowrap;}
.fc-step-btn:hover{background:var(--accent);color:#fff;}
.fc-step-btn.fc-step-reset{background:var(--bg);color:var(--soft);border-color:var(--line);}
.fc-step-btn.fc-step-reset:hover{background:var(--line);color:var(--text);}
.fc-step-input{padding:5px 10px;border:1px solid var(--accent);border-radius:8px;background:var(--bg);color:var(--text);font-size:.85rem;min-width:120px;flex:1;}
.fc-step-input:focus{outline:none;box-shadow:0 0 0 2px var(--accent-soft);}
.fc-step-input.fc-step-input-err{border-color:#e03131;box-shadow:0 0 0 2px rgba(224,49,49,.18);}
/* Mermaid 节点高亮 */
.fc-svg .node.fc-on .nodeLabel,
.fc-svg .node.fc-on rect,
.fc-svg .node.fc-on polygon,
.fc-svg .node.fc-on circle,
.fc-svg .node.fc-on ellipse,
.fc-svg .node.fc-on path{
  fill:var(--accent) !important;
  stroke:var(--accent) !important;
}
.fc-svg .node.fc-on .nodeLabel text,
.fc-svg .node.fc-on .label text,
.fc-svg .node.fc-on text{
  fill:#fff !important;
}
.fc-err{color:#e03131;font-size:.85rem;}

/* ============ N-S 盒图（injectNS 根据 .ns 占位块通用渲染） ============
   经典 Nassi-Shneiderman 盒图：每种控制结构都是有明确四边的矩形，
   嵌套通过「外框包内框」+ 左侧缩进线体现层次。 */
.ns-diagram{border:2px solid var(--line);border-radius:4px;overflow-x:auto;font-family:ui-monospace,Consolas,monospace;font-size:13px;background:var(--bg);color:var(--text);margin:0 auto;display:inline-block;min-width:260px;}
/* ---- 顺序 / 语句盒 ---- */
.ns-box{padding:10px 14px;text-align:center;border-bottom:1px solid var(--line);}
.ns-box:last-child{border-bottom:none;}
/* ---- 循环结构（当型 while / 直到型 until）：完整矩形框 ---- */
.ns-loop{margin:3px 6px;border:2px solid var(--line);border-radius:3px;overflow:hidden;}
.ns-loop-head{padding:6px 12px;text-align:center;font-weight:700;color:var(--accent);background:var(--bg2,#f0f4ff);border-bottom:1.5px solid var(--line);font-size:13px;}
/* 循环体：左侧缩进线表明嵌套层次 */
.ns-loop-body{padding:6px 0;border-left:3px solid var(--accent,#2563eb);margin-left:10px;padding-left:10px;}
.ns-until{display:flex;flex-direction:column;}
.ns-until .ns-loop-head{order:2;border-bottom:none;border-top:1.5px solid var(--line);}
.ns-until .ns-loop-body{order:1;}
/* 循环体内首元素不需要额外顶部分隔 */
.ns-loop-body>.ns-box:first-child,
.ns-loop-body>.ns-loop:first-child,
.ns-loop-body>.ns-sel:first-child{border-top:none;margin-top:0;}
/* ---- 选择结构（if-elif-else）：横向分割的矩形框 ---- */
.ns-sel{display:flex;margin:3px 6px;border:2px solid var(--line);border-radius:3px;overflow:hidden;}
.ns-branch{flex:1;min-width:170px;display:flex;flex-direction:column;}
.ns-sel-div{width:2px;background:var(--line);align-self:stretch;flex-shrink:0;}
.ns-branch-head{padding:5px 8px;text-align:center;font-size:12px;font-weight:600;color:var(--accent);background:var(--bg2,#f0f4ff);border-bottom:1px solid var(--line);}
.ns-branch-body{}
.ns-branch-body>.ns-box:first-child,
.ns-branch-body>.ns-loop:first-child,
.ns-branch-body>.ns-sel:first-child{border-top:none;}
/* 两个或多个 N-S 图并排对比 */
.ns-pair{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:flex-start;margin:1.1em 0;}
.ns-pair figure{margin:0 !important;flex:0 1 340px;}
/* ---- 教材整理：表格 / 类型树 / 列表 / 页脚 ---- */
.book-table{border-collapse:collapse;width:100%;max-width:720px;margin:1.1em auto;font-size:.86rem;}
.book-table caption{font-weight:700;color:var(--accent);margin-bottom:.5em;font-size:.9rem;text-align:center;}
.book-table th,.book-table td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top;}
.book-table th{background:var(--bg2,#f0f4ff);color:var(--text);}
.book-table tbody tr:nth-child(even){background:var(--panel);}
.type-tree,.type-list{margin:1em 0 1em 1.4em;padding:0;line-height:1.95;}
.type-tree li,.type-list li{margin:.25em 0;}
.type-tree ul{margin:.2em 0 .2em 1.4em;list-style:circle;}
.muted{color:var(--soft);font-size:.82em;}
.book-footer{color:var(--soft);font-size:.8rem;font-style:italic;text-align:right;margin-top:.4em;}