/* ===== 内容管理（Quill.js 富文本编辑 + 章节侧栏） ===== */
/* ★★★ grid-template-rows / columns 必须写 minmax(0, 1fr)，不能只写 1fr（2026-09-21 修）：
   `1fr` 的最小值是 `auto` ⇒ 行/列会被**内容撑开**。实测左目录 52 项把行高撑到 1980px，
   而容器只有 700px ⇒ 两个滚动区（.doc-chapter-list / .ql-editor）自身也被拉到 ~1900px 高、
   内容永远不溢出 ⇒ **一根滚动条都不出现**；超出容器的那 1282px 被 overflow:hidden 裁掉，
   页面本身又刚好不高（scrollHeight == clientHeight）⇒ 后面的分类**彻底够不到、也滚不到**。
   minmax(0,1fr) 把最小值钉成 0，行高 = 容器高度，内部滚动这才成立。 */
.doc-editor-wrap{display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:0;height:calc(100vh - 180px);min-height:420px;border:1px solid #2a3340;border-radius:10px;overflow:hidden;background:#0f172a}

/* 左侧：章节侧栏 */
.doc-sidebar{display:flex;flex-direction:column;min-height:0;border-right:1px solid #2a3340;background:#0a0e14}
.doc-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#111820;border-bottom:1px solid #2a3340;font-size:12px;color:#94A3B8;flex-shrink:0}
.doc-chapter-list{flex:1;overflow-y:auto;padding:6px}
.doc-chapter-card{display:flex;align-items:center;gap:6px;padding:9px 10px;margin-bottom:3px;border-radius:6px;cursor:pointer;font-size:13px;color:#94A3B8;transition:background .15s,color .15s;border:1px solid transparent}
.doc-chapter-card:hover{background:rgba(129,140,248,.08);color:#CBD5E1}
.doc-chapter-card.active{background:rgba(129,140,248,.15);color:#E2E8F0;border-color:rgba(129,140,248,.3)}
.doc-chapter-card .ch-drag{cursor:grab;color:#475569;font-size:16px;line-height:1;user-select:none;padding:0 2px;flex-shrink:0;align-self:center;font-family:ui-sans-serif,system-ui,sans-serif;letter-spacing:-2px;opacity:.5}
.doc-chapter-card:hover .ch-drag{opacity:.9}
.doc-chapter-card .ch-drag:active{cursor:grabbing;opacity:1}
.doc-chapter-card .ch-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-chapter-card .ch-delete{opacity:0;font-size:16px;color:#ef4444;cursor:pointer;line-height:1;padding:0 2px;transition:opacity .15s;flex-shrink:0}
.doc-chapter-card:hover .ch-delete{opacity:.7}
.doc-chapter-card .ch-delete:hover{opacity:1}
/* 章节拖拽状态 */
.doc-chapter-card[draggable]{cursor:default}
.doc-chapter-card.dragging{opacity:.35;background:rgba(129,140,248,.1);border:1px dashed #818cf8;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.doc-chapter-card.drag-over{border-top:2px solid #818cf8}
/* 两级目录：一级分类（加粗 + 上方留白）+ 缩进二级子页。
   层级靠"缩进 + 字号 + 字重 + 圆角框"表达，不只靠颜色（阿君辨色偏弱） */
.doc-chapter-card.ch-group{margin-top:8px;font-weight:600;color:#CBD5E1;font-size:13px;letter-spacing:.02em}
.doc-chapter-card.ch-group.active{color:#E2E8F0}
.doc-chapter-card.ch-group .ch-name{letter-spacing:.06em}
.doc-chapter-card.ch-sub{margin-left:14px;padding:7px 8px 7px 12px;font-size:12.5px}
.doc-chapter-card.ch-sub .ch-drag{font-size:13px;opacity:.35}
.doc-chapter-card .ch-badge{flex-shrink:0;min-width:18px;text-align:center;font-size:11px;line-height:16px;padding:0 5px;border-radius:9px;background:rgba(148,163,184,.14);color:#94A3B8;font-weight:400}
.doc-chapter-card.active .ch-badge{background:rgba(129,140,248,.25);color:#C7D2FE}

/* 右侧：编辑器主区 */
.doc-editor-main{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.doc-editor-bar{padding:10px 14px;background:#161c26;border-bottom:1px solid #2a3340;font-size:13px;color:#CBD5E1;display:flex;align-items:center;gap:8px;flex-shrink:0}

/* ===== Quill.js 深色主题适配（实心深色，确保不被浅色后台冲淡） ===== */
.doc-quill-editor{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;background:#0f172a}
/* ★ 选择器坑（2026-09-21 修）：Quill 初始化时把 .ql-container 加在 #docEditor **自己身上**，
   所以旧写法 `.doc-quill-editor .ql-container`（后代选择器）**永远命中不了它自己** ⇒
   那条规则里的 flex:1 / display:flex 从来就没生效过。必须写成 `.doc-quill-editor.ql-container`。 */
.doc-quill-editor.ql-container{font-family:inherit;font-size:14px;line-height:1.7;border:none!important;background:#0f172a;color:#E2E8F0;flex:1;min-height:0;display:flex;flex-direction:column}
/* 编辑区自己要能滚：父级是 overflow:hidden，只给 flex:1 的话超出部分会被直接裁掉、不出滚动条 */
.doc-quill-editor .ql-editor{flex:1;min-height:0;overflow-y:auto}
.doc-quill-editor .ql-toolbar{border:none!important;border-bottom:1px solid #2a3340!important;background:#161c26;padding:6px 8px}
/* 工具栏按钮 */
.doc-quill-editor .ql-toolbar button svg{stroke:#94A3B8!important;fill:none}
.doc-quill-editor .ql-toolbar button:hover svg{stroke:#E2E8F0!important}
.doc-quill-editor .ql-toolbar .ql-active svg{stroke:#818cf8!important}
.doc-quill-editor .ql-toolbar button.ql-active{background:rgba(129,140,248,.18)!important;border-radius:4px}
/* 下拉选择器 */
.doc-quill-editor .ql-toolbar .ql-picker-label{color:#94A3B8!important}
.doc-quill-editor .ql-toolbar .ql-picker-label:hover{color:#E2E8F0!important}
.doc-quill-editor .ql-toolbar .ql-picker-options{background:#1E2530!important;border:1px solid #2a3340!important;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.5);padding:4px}
.doc-quill-editor .ql-toolbar .ql-picker-item{color:#CBD5E1;padding:4px 12px}
.doc-quill-editor .ql-toolbar .ql-picker-item:hover{background:rgba(129,140,248,.18);color:#E2E8F0}
.doc-quill-editor .ql-toolbar .ql-picker-item.ql-selected{color:#818cf8}
/* 分隔线 */
.doc-quill-editor .ql-toolbar .ql-separator{border-left:1px solid #2a3340}
/* 编辑区域（实心深色，文字高对比） */
.doc-quill-editor .ql-editor{background:#0f172a;color:#EAF0F7;padding:14px 18px;min-height:240px}
.doc-quill-editor .ql-editor.ql-blank::before{color:#64748B;font-style:normal;left:18px}
/* 编辑器内排版 */
.doc-quill-editor .ql-editor h1,.doc-quill-editor .ql-editor h2,.doc-quill-editor .ql-editor h3{color:#F8FAFC;margin-top:.8em;margin-bottom:.4em;font-weight:600}
.doc-quill-editor .ql-editor h1{font-size:1.7em}
.doc-quill-editor .ql-editor h2{font-size:1.4em}
.doc-quill-editor .ql-editor h3{font-size:1.15em}
.doc-quill-editor .ql-editor p{margin-bottom:.6em;color:#EAF0F7}
.doc-quill-editor .ql-editor ul,.doc-quill-editor .ql-editor ol{padding-left:1.6em;margin-bottom:.6em}
.doc-quill-editor .ql-editor li{margin-bottom:.25em;color:#EAF0F7}
.doc-quill-editor .ql-editor blockquote{border-left:3px solid #6366F1;padding:6px 12px;color:#A9B6C8;margin:10px 0;background:rgba(99,102,241,.06);border-radius:0 6px 6px 0}
.doc-quill-editor .ql-editor pre{background:#0a0e14;border:1px solid #2a3340;border-radius:6px;padding:10px 14px;font-family:ui-monospace,Menlo,Consolas,"Courier New",monospace;font-size:13px;color:#C4B5FD;white-space:pre-wrap}
.doc-quill-editor .ql-editor code{background:rgba(129,140,248,.14);color:#A5B4FC;padding:2px 5px;border-radius:3px;font-size:.9em}
.doc-quill-editor .ql-editor a{color:#818cf8;text-decoration:underline}
.doc-quill-editor .ql-editor img{max-width:100%;border-radius:6px;margin:6px 0;display:block}
.doc-quill-editor .ql-editor video{max-width:100%;border-radius:6px;margin:6px 0;display:block;background:#000}
.doc-quill-editor .ql-editor strong{color:#F8FAFC;font-weight:600}
.doc-quill-editor .ql-editor em{color:#CBD5E1}

/* 右侧预览已改为 iframe 直接复用公开页 /assets/css/style.css（见 admin/js/app.js updateDocPreview），
   iframe 内部是独立文档、不受父级 CSS 选择，故下方不再需要单独的 .docs-main 样式。 */

/* ===== 暗色滚动条（2026-09-21 随滚动修复一起加，对齐前台 /docs 的观感） =====
   ★ 必须写两套：::-webkit-scrollbar 系列（Edge/Chrome/Safari）+ scrollbar-width/scrollbar-color（Firefox），
     少一套就会有浏览器"没变"。★ 只作用于编辑器这两个滚动区，不动后台其它地方。 */
.doc-chapter-list::-webkit-scrollbar,
.doc-quill-editor .ql-editor::-webkit-scrollbar{width:10px;height:10px}
.doc-chapter-list::-webkit-scrollbar-track,
.doc-quill-editor .ql-editor::-webkit-scrollbar-track{background:transparent}
.doc-chapter-list::-webkit-scrollbar-thumb,
.doc-quill-editor .ql-editor::-webkit-scrollbar-thumb{background:#3a4149;border-radius:6px;border:2px solid transparent;background-clip:padding-box}
.doc-chapter-list::-webkit-scrollbar-thumb:hover,
.doc-quill-editor .ql-editor::-webkit-scrollbar-thumb:hover{background:#4a525c;background-clip:padding-box}
.doc-chapter-list::-webkit-scrollbar-corner,
.doc-quill-editor .ql-editor::-webkit-scrollbar-corner{background:transparent}
.doc-chapter-list,
.doc-quill-editor .ql-editor{scrollbar-width:thin;scrollbar-color:#3a4149 transparent}

@media (max-width:980px){
  .doc-editor-wrap{grid-template-columns:1fr;height:auto}
  .doc-sidebar{display:none}/* 小屏隐藏侧栏，用下拉选章节 */
  .doc-quill-editor{min-height:340px}
}

/* ===== 视频插入模态框 ===== */
#videoModal .modal-card{width:520px}
#videoModal .modal-card h3{font-size:18px;margin:0 0 16px;color:#0f172a}
.vm-tabs{display:flex;gap:8px;margin-bottom:16px}
.vm-tab{flex:1;padding:8px 10px;border:1px solid #e2e8f0;background:#f8fafc;color:#475569;border-radius:8px;cursor:pointer;font-size:13px;transition:all .15s}
.vm-tab.active{background:#4f46e5;color:#fff;border-color:#4f46e5}
.vm-panel{padding:6px 0}
.vm-file{width:100%;padding:8px;border:1px dashed #cbd5e1;border-radius:8px;background:#f8fafc}
.vm-input{width:100%;padding:9px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px}
.vm-input:focus{border-color:#4f46e5;outline:none}
.vm-hint{font-size:12px;color:#94a3b8;margin:8px 0 0;line-height:1.5}

/* ===== 媒体库弹窗 ===== */
#mediaModal .modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
#mediaModal .modal-head h3{font-size:18px;margin:0;color:#0f172a}
.modal-close{background:none;border:0;color:#94a3b8;font-size:18px;cursor:pointer;line-height:1;padding:2px 6px}
.modal-close:hover{color:#ef4444}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-top:14px;max-height:60vh;overflow-y:auto;padding:2px}
.media-card{position:relative;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;background:#fff;transition:box-shadow .15s,transform .15s}
.media-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.12);transform:translateY(-1px)}
.media-thumb{height:96px;display:flex;align-items:center;justify-content:center;background:#f1f5f9;cursor:pointer;overflow:hidden}
.media-thumb img,.media-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.media-meta{display:flex;flex-direction:column;gap:2px;padding:6px 8px;font-size:11px;color:#64748b}
.media-name{font-size:11px;color:#334155;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.media-del{position:absolute;top:4px;right:4px;width:20px;height:20px;border:0;border-radius:4px;background:rgba(15,23,42,.6);color:#fff;font-size:12px;line-height:20px;text-align:center;cursor:pointer;opacity:0;transition:opacity .15s}
.media-card:hover .media-del{opacity:1}
.media-del:hover{background:#ef4444}
.media-empty{margin-top:16px;padding:24px;text-align:center;color:#94a3b8;font-size:13px;border:1px dashed #cbd5e1;border-radius:8px}

/* 预览区 iframe 内部直接复用公开页 style.css（含 video/iframe 尺寸规则），此处无需再定义 */

/* ===== 首页设置（结构化可视化编辑，浅色表单与后台一致） ===== */
.home-form{display:flex;flex-direction:column;gap:18px;max-width:780px;margin-top:6px}
/* 下载页设置：左右双列网格，避免纵向太长 */
#view-download .home-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:none}
#view-download .home-block.dl-full{grid-column:1/-1}
#view-download .home-block .data-table{font-size:12px}
#view-download .home-block .data-table th,#view-download .home-block .data-table td{padding:6px 8px}
/* 版本表「更新说明」单元格：多行内容限高内滚，避免把表格行撑太长 */
.pv-notes{max-height:84px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;font-size:12px;color:#94a3b8;line-height:1.6;max-width:280px}
.pv-notes::-webkit-scrollbar{width:5px}
.pv-notes::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
/* 「插件更新记录」编辑列表：条目多时容器内滚，避免整页拉太长 */
#dlChangelog{max-height:440px;overflow-y:auto;padding-right:8px}
#dlChangelog::-webkit-scrollbar{width:6px}
#dlChangelog::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
/* 首页设置：同样左右双列网格 */
#view-home .home-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:none}
.home-block{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:18px 20px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.home-block h3{margin:0 0 14px;font-size:15px;color:#1e293b;border-bottom:1px solid #eef2f7;padding-bottom:10px}
.home-block .field{margin-bottom:12px}
.home-block .field label{display:block;font-size:13px;font-weight:600;color:#475569;margin-bottom:5px}
.home-block .field input,.home-block .field textarea{width:100%;max-width:600px;padding:8px 10px;border:1px solid #cbd5e1;border-radius:7px;font-size:13px;color:#1e293b;background:#fff;font-family:inherit;box-sizing:border-box}
.home-block .field input:focus,.home-block .field textarea:focus{outline:none;border-color:#4f46e5;box-shadow:0 0 0 2px rgba(79,70,229,.15)}
.home-rows{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.home-row{display:flex;gap:8px;align-items:flex-start}
.home-row input,.home-row textarea{padding:7px 9px;border:1px solid #cbd5e1;border-radius:7px;font-size:13px;color:#1e293b;background:#fff;font-family:inherit;box-sizing:border-box}
.home-row textarea{resize:vertical;min-height:38px}
.home-row .btn-sm.btn-danger{flex-shrink:0;align-self:center;padding:6px 10px}

/* ===== 拖拽排序（首页卡片 / 三步上手） ===== */
.drag-handle{cursor:grab;color:#94a3b8;font-size:18px;line-height:1;user-select:none;padding:2px 4px;border-radius:4px;flex-shrink:0;align-self:center;font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;letter-spacing:-1px}
.drag-handle:hover{color:#4f46e5;background:rgba(79,70,229,.08)}
.drag-handle:active{cursor:grabbing}
.home-row.dragging{opacity:.45;background:rgba(79,70,229,.06);border:1px dashed #818cf8;border-radius:8px;box-shadow:0 4px 16px rgba(79,70,229,.12)}
.home-row.drag-over{border-top:2px solid #4f46e5}
/* 下载卡片 / 时间轴编辑行（字段较长，允许换行对齐） */
.home-row-dl{flex-wrap:wrap;align-items:flex-start;padding:8px 10px;background:#f8fafc;border:1px solid #eef2f7;border-radius:8px}
.home-row-dl .di-desc,.home-row-dl .dc-desc{flex:1 1 200px;min-width:160px}
.home-row-dl select{padding:7px 9px;border:1px solid #cbd5e1;border-radius:7px;font-size:13px;color:#1e293b;background:#fff;font-family:inherit;box-sizing:border-box}
.home-btn-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:680px){.home-btn-row{grid-template-columns:1fr}}