/* 专项培训教程 · 共享样式（与 OMS/WMS/ERP 同款设计语言） */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 56px; }
html, body { height: 100%; overflow: hidden; }
body { font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif; background: #f0f2f5; color: #1a1a1a; font-size: 15px; line-height: 1.75; }
.layout { display: flex; height: 100vh; }

/* topbar */
.topbar { position: fixed; top: 0; left: 0; right: 0; height: 52px; background: #0f172a; z-index: 40; display: flex; align-items: center; padding: 0 20px; gap: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.tb-title { font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-title span { color: #94a3b8; font-weight: 400; font-size: 12px; margin-left: 8px; }
.tb-tabs { display: flex; gap: 4px; flex-shrink: 0; }
.tb-tabs a { padding: 6px 14px; border-radius: 20px; cursor: pointer; color: rgba(255,255,255,0.7); font-size: 13px; text-decoration: none; transition: all .2s; white-space: nowrap; }
.tb-tabs a:hover { background: rgba(255,255,255,0.1); color: #fff; }
.tb-tabs a.active { background: #2563eb; color: #fff; font-weight: 700; }
.tb-search { flex: 1; max-width: 280px; min-width: 140px; }
.tb-search input { width: 100%; padding: 7px 14px; border-radius: 8px; border: 1px solid #334155; background: #1e293b; color: #e2e8f0; font-size: 13px; outline: none; font-family: inherit; }
.tb-search input:focus { border-color: #2563eb; }
.tb-search input::placeholder { color: #64748b; }
.menu-btn { display: none; position: fixed; top: 10px; left: 10px; z-index: 45; background: #1e293b; color: #fff; border: none; border-radius: 7px; padding: 7px 12px; font-size: 18px; cursor: pointer; }

/* sidebar */
.sidebar { position: fixed; top: 52px; left: 0; bottom: 0; width: 280px; background: #fff; border-right: 1px solid #e3e8ef; overflow-y: auto; z-index: 30; padding-bottom: 80px; }
.sb-block { border-bottom: 1px solid #f1f5f9; padding-bottom: 6px; }
.sb-block + .sb-block { border-top: 6px solid #f1f5f9; }
.sb-head { padding: 14px 18px; font-size: 12px; font-weight: 700; color: #64748b; letter-spacing: .6px; text-transform: uppercase; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.sb-toc-block .sb-head { position: sticky; top: 0; z-index: 1; }
.sb { list-style: none; padding: 6px 0; }
.sb li { list-style: none; }
.sb a { display: block; padding: 8px 14px 8px 18px; color: #475569; text-decoration: none; font-size: 13px; line-height: 1.45; transition: background .15s, color .15s, border-color .15s; border-left: 3px solid transparent; border-radius: 0 6px 6px 0; margin: 1px 6px 1px 0; }
.sb a:hover { background: #f1f5f9; color: #2563eb; border-left-color: #2563eb; }
.sb-subs a.active { background: #eff6ff; color: #2563eb; font-weight: 600; border-left-color: #2563eb; }
.sb a.l1 { font-weight: 700; color: #0f172a; padding: 7px 12px 7px 14px; background: #f8fafc; border-left: 3px solid #0f172a; border-radius: 0 8px 8px 0; cursor: pointer; display: flex; align-items: center; gap: 6px; -webkit-user-select: none; user-select: none; }
.sb a.l1 .arrow { display: inline-block; transition: transform .2s; font-size: 10px; width: 14px; text-align: center; }
.sb a.l1.open .arrow { transform: rotate(90deg); }
.sb a.l1:hover { background: #eef2ff; border-left-color: #4f46e5; color: #4f46e5; }
.sb a.l2 { font-weight: 600; color: #1e2938; padding-left: 28px; }
.sb a.l3 { padding-left: 44px; font-size: 12.5px; color: #6b7280; }
.sb-toc a.active { background: #dbeafe; color: #1d4ed8; font-weight: 700; border-left-color: #2563eb; }
.ch-hidden { display: none; }

/* main */
.main { flex: 1; margin-left: 280px; margin-top: 52px; height: calc(100vh - 52px); overflow-y: auto; padding: 24px 40px 80px; }
.main::-webkit-scrollbar { width: 8px; }
.main::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 4px; }

/* title */
.l2-title { font-size: 26px; color: #0f172a; padding: 8px 0 12px; border-bottom: 2px solid #e3e8ef; margin-bottom: 24px; }

/* sections */
.l3-section { background: #fff; border-radius: 8px; padding: 18px 22px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); transition: transform .2s, box-shadow .2s; }
.l3-section:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }

/* headings */
.main h2, .main .doc-h1 { font-size: 20px; color: #0f172a; margin: 24px 0 12px; padding: 10px 14px; background: linear-gradient(90deg,#dbeafe,#fff); border-left: 4px solid #2563eb; border-radius: 6px; scroll-margin-top: 60px; }
.main h3, .main .doc-h2 { font-size: 15px; color: #374151; margin: 16px 0 8px; padding: 6px 12px; background: #f1f5f9; border-left: 3px solid #94a3b8; border-radius: 4px; scroll-margin-top: 60px; }
.main h4, .main .doc-h3 { font-size: 14px; color: #475569; margin: 12px 0 6px; padding: 4px 10px; border-left: 2px solid #cbd5e1; font-weight: 700; }
.doc-substep { font-weight: 700; color: #1e3a5f; background: #f0f7ff; border-left: 3px solid #38bdf8; padding: 8px 12px; border-radius: 4px; margin: 14px 0 8px; }

/* paragraphs */
.l3-section p { margin: 12px 0; color: #374151; line-height: 1.85; word-wrap: break-word; }

/* images + lightbox trigger */
.main img, .l3-section img { max-width: 100%; height: auto; border: 1px solid #e3e8ef; border-radius: 10px; margin: 12px 0; cursor: zoom-in; display: block; background: #f8fafc; box-shadow: 0 2px 8px rgba(20,40,80,.06); transition: box-shadow .15s, transform .15s; }
.main img:hover, .l3-section img:hover { box-shadow: 0 4px 16px rgba(20,40,80,.15); transform: translateY(-1px); }
.doc-img { text-align: center; margin: 14px 0; }
.doc-img img { display: inline-block; }

/* tables */
.l3-section table, .main table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13.5px; background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid #e3e8ef; }
.l3-section table th, .main table th { background: #f8fafc; color: #1e2938; font-weight: 600; padding: 8px 12px; border: 1px solid #e3e8ef; text-align: left; }
.l3-section table td, .main table td { padding: 8px 12px; border: 1px solid #e3e8ef; word-break: break-word; }
.l3-section table tr:nth-child(even), .main table tr:nth-child(even) { background: #fafbfc; }
.l3-section table tbody tr:hover, .main table tbody tr:hover { background: #eff6ff !important; transition: background .15s; }

/* lightbox（与 OMS/WMS/ERP 一致：点击放大 1→2→1，右上角 ✕ 关闭，底部提示） */
#lbClose { position: fixed; top: 15px; right: 20px; color: #fff; font-size: 28px; cursor: pointer; z-index: 10000; padding: 5px 12px; background: rgba(0,0,0,0.55); border-radius: 6px; transition: background .2s, transform .2s; }
#lbClose:hover { background: rgba(0,0,0,0.8); transform: rotate(90deg); }
#lbHint { position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 12px; opacity: 0.75; background: rgba(0,0,0,0.55); padding: 5px 14px; border-radius: 4px; pointer-events: none; }
.lb-img { transition: max-width .3s, transform .3s; }

/* float buttons */
#toTop, #toBottom { position: fixed; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; background: #2563eb; color: #fff; font-size: 20px; box-shadow: 0 4px 14px rgba(37,99,235,.35); opacity: 0; pointer-events: none; transition: background .2s, transform .15s, box-shadow .2s, opacity .3s; z-index: 60; display: flex; align-items: center; justify-content: center; }
/* 按需求：右上角=直达底部，右下角=返回顶部 */
#toBottom { top: 64px; }     /* 右上角（紧贴顶栏下方） */
#toTop { bottom: 24px; }     /* 右下角 */
#toTop.show, #toBottom.show { opacity: 1; pointer-events: auto; }
#toTop:hover, #toBottom:hover { transform: scale(1.08); }

/* meta */
.doc-meta { color: #64748b; font-size: 12px; margin-bottom: 18px; }
.cell-text { font-size: 13px; color: #475569; }

/* search highlight */
mark { background: #fde68a; color: #7c2d12; border-radius: 3px; padding: 0 2px; }

/* responsive */
@media (max-width: 900px) {
  .menu-btn { display: block; }
  .sidebar { transform: translateX(-100%); transition: transform 0.3s; box-shadow: 4px 0 16px rgba(0,0,0,.1); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0 !important; padding: 20px 16px 80px; max-width: 100%; }
  .tb-title span { display: none; }
  /* .tb-tabs 不再隐藏 —— mobile.css 统一管理移动端标签栏显示 */
}