/* ═══════════════════════════════════════════════
   教程页面专用样式（依赖 legal.css 基础变量）
   ═══════════════════════════════════════════════ */

/* ── 导航胶囊栏 ── */
.lp-tut-nav-pill { display:flex; align-items:stretch; flex-wrap:nowrap; justify-content:center; background:var(--lp-surface); border:1px solid var(--lp-border); border-radius:50rem; box-shadow:0 .125rem .375rem rgba(0,0,0,.04); margin-bottom:14px; overflow:hidden; }
[data-bs-theme="dark"] .lp-tut-nav-pill { box-shadow:0 .125rem .375rem rgba(0,0,0,.2); }
.lp-tut-tab { display:flex; align-items:center; padding:9px 15px; font-size:13px; font-weight:400; color:var(--lp-text-muted); text-decoration:none; white-space:nowrap; cursor:pointer; transition:color .2s,background .2s; flex-shrink:0; border-radius:50rem; margin:3px 2px; }
.lp-tut-tab:hover { color:var(--lp-accent); background:var(--lp-accent-glow); text-decoration:none; }
.lp-tut-tab.active { color:var(--lp-accent); font-weight:600; background:var(--lp-accent-glow); }
.lp-tut-divider { width:1px; min-height:14px; background:var(--lp-border); flex-shrink:0; align-self:center; margin:0 2px; }

/* ── 进度条 ── */
.lp-tut-progress { height:3px; background:var(--lp-border); border-radius:3px; overflow:hidden; margin-bottom:20px; }
.lp-tut-progress-bar { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--lp-accent),var(--lp-accent-dim)); transition:width .5s cubic-bezier(.4,0,.2,1); }

/* ── 分页 ── */
.lp-pagination { display:flex; gap:12px; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--lp-border); }
.lp-page-link { flex:1; display:flex; flex-direction:column; gap:4px; padding:16px 18px; background:var(--lp-surface); border:1px solid var(--lp-border); border-radius:10px; text-decoration:none; transition:all .2s; min-width:0; }
.lp-page-link:hover { border-color:var(--lp-accent); box-shadow:0 2px 12px var(--lp-accent-glow); transform:translateY(-1px); text-decoration:none; }
.lp-page-link.lp-pg-next { text-align:right; align-items:flex-end; }
.lp-pg-dir { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--lp-text-muted); display:flex; align-items:center; gap:4px; }
.lp-page-link.lp-pg-next .lp-pg-dir { flex-direction:row-reverse; }
.lp-pg-title { font-size:14px; font-weight:600; color:var(--lp-accent); display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lp-page-link.lp-pg-next .lp-pg-title { flex-direction:row-reverse; }
.lp-pg-ch { font-size:11px; color:var(--lp-text-muted); }
.lp-page-link.lp-pg-disabled { opacity:.35; pointer-events:none; }

/* ── 响应式 ── */
@media (max-width:600px) {
    .lp-tut-nav-pill { border-radius:12px; margin-bottom:12px; justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:none; }
    .lp-tut-nav-pill::-webkit-scrollbar { display:none; }
    .lp-tut-tab { padding:8px 11px; font-size:12px; }
    .lp-tut-divider { min-height:12px; margin:0 1px; }
    .lp-pagination { flex-direction:column; gap:8px; }
    .lp-page-link { padding:12px 14px; }
    .lp-page-link.lp-pg-next { text-align:left; align-items:flex-start; }
    .lp-page-link.lp-pg-next .lp-pg-dir,.lp-page-link.lp-pg-next .lp-pg-title { flex-direction:row; }
}