/* ═══════════════════════════════════════════════
   法律页面 & 教程页面共享样式
   privacy / terms / tutorial 共用
   ═══════════════════════════════════════════════ */

/* ── 亮色变量 ── */
.legal-page,
.lp-tutorial {
    --lp-surface: #ffffff;
    --lp-surface-raised: #f7f8fa;
    --lp-border: #e5e7eb;
    --lp-text: #1f2937;
    --lp-text-sec: #6b7280;
    --lp-text-muted: #9ca3af;
    --lp-accent: #0d9488;
    --lp-accent-dim: #ccfbf1;
    --lp-accent-glow: rgba(13, 148, 136, 0.06);
    --lp-icon-bg: rgba(13, 148, 136, 0.08);
    --lp-icon-bd: rgba(13, 148, 136, 0.2);
    --lp-warn-bg: #fffbeb;   --lp-warn-bd: #fde68a;   --lp-warn-tx: #92400e;
    --lp-dang-bg: #fef2f2;   --lp-dang-bd: #fecaca;   --lp-dang-tx: #991b1b;
    --lp-info-bg: #eff6ff;   --lp-info-bd: #bfdbfe;   --lp-info-tx: #1e40af;
    --lp-ok-bg: #f0fdfa;     --lp-ok-bd: #99f6e4;     --lp-ok-tx: #115e59;
    --lp-th-bg: #f9fafb;
    --lp-tr-alt: #fafbfc;
}

/* ── 暗色变量 ── */
[data-bs-theme="dark"] .legal-page,
[data-bs-theme="dark"] .lp-tutorial {
    --lp-surface: #252a33;
    --lp-surface-raised: #2d333d;
    --lp-border: #3a404a;
    --lp-text: #e5e7eb;
    --lp-text-sec: #9ca3af;
    --lp-text-muted: #6b7280;
    --lp-accent: #2dd4bf;
    --lp-accent-dim: #134e4a;
    --lp-accent-glow: rgba(45, 212, 191, 0.08);
    --lp-icon-bg: rgba(45, 212, 191, 0.1);
    --lp-icon-bd: rgba(45, 212, 191, 0.25);
    --lp-warn-bg: rgba(251,191,36,.08);  --lp-warn-bd: rgba(251,191,36,.2);  --lp-warn-tx: #fbbf24;
    --lp-dang-bg: rgba(248,113,113,.08); --lp-dang-bd: rgba(248,113,113,.2); --lp-dang-tx: #f87171;
    --lp-info-bg: rgba(96,165,250,.08);  --lp-info-bd: rgba(96,165,250,.2);  --lp-info-tx: #60a5fa;
    --lp-ok-bg: rgba(52,211,153,.08);    --lp-ok-bd: rgba(52,211,153,.2);    --lp-ok-tx: #34d399;
    --lp-th-bg: #2d333d;
    --lp-tr-alt: #282e38;
}

/* ── 容器 ── */
.legal-page,
.lp-tutorial {
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    color: var(--lp-text);
    font-size: 15px;
    line-height: 1.8;
}

/* ── 页头 ── */
.lp-header { text-align:center; margin-bottom:1.75rem; padding-bottom:1.5rem; border-bottom:1px solid var(--lp-border); position:relative; }
.lp-header::after { content:''; position:absolute; bottom:-1px; left:50%; transform:translateX(-50%); width:100px; height:2px; background:linear-gradient(90deg,transparent,var(--lp-accent),transparent); }
.lp-badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--lp-accent); background:var(--lp-accent-glow); border:1px solid var(--lp-icon-bd); padding:4px 14px; border-radius:100px; margin-bottom:12px; }
.lp-header h1 { font-size:clamp(22px,4vw,32px); font-weight:700; color:var(--lp-text); margin:0 0 8px; }
.lp-subtitle { font-size:14px; color:var(--lp-text-sec); max-width:500px; margin:0 auto; }
.lp-meta { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; margin-top:12px; font-size:12px; color:var(--lp-text-muted); }
.lp-meta span { display:flex; align-items:center; gap:4px; }

/* ── 章节卡片 ── */
.lp-sec { background:var(--lp-surface); border:1px solid var(--lp-border); border-radius:10px; padding:22px 20px; margin-bottom:12px; transition:border-color .2s,box-shadow .2s; opacity:0; transform:translateY(10px); animation:lp-up .4s ease forwards; }
.lp-sec:nth-child(1){animation-delay:.02s}.lp-sec:nth-child(2){animation-delay:.04s}.lp-sec:nth-child(3){animation-delay:.06s}.lp-sec:nth-child(4){animation-delay:.08s}.lp-sec:nth-child(5){animation-delay:.10s}.lp-sec:nth-child(6){animation-delay:.12s}.lp-sec:nth-child(7){animation-delay:.14s}.lp-sec:nth-child(8){animation-delay:.16s}.lp-sec:nth-child(9){animation-delay:.18s}.lp-sec:nth-child(10){animation-delay:.20s}
@keyframes lp-up { to { opacity:1; transform:translateY(0) } }
.lp-sec:hover { border-color:var(--lp-accent-dim); box-shadow:0 2px 12px var(--lp-accent-glow); }
@media (prefers-reduced-motion:reduce) { .lp-sec { opacity:1; transform:none; animation:none; } }

/* ── 章节头 ── */
.lp-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--lp-border); }
.lp-ico { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; background:var(--lp-icon-bg); border:1px solid var(--lp-icon-bd); }
.lp-head h2 { font-size:16px; font-weight:700; color:var(--lp-text); margin:0; }

/* ── 内容 ── */
.lp-body p { color:var(--lp-text-sec); margin-bottom:8px; font-size:14px; line-height:1.85; }
.lp-body p:last-child { margin-bottom:0; }
.lp-body strong { color:var(--lp-text); font-weight:600; }

/* ── 列表 ── */
.lp-ul { list-style:none; padding:0; margin:4px 0 8px; }
.lp-ul li { position:relative; padding:4px 0 4px 18px; font-size:14px; color:var(--lp-text-sec); line-height:1.8; }
.lp-ul li::before { content:''; position:absolute; left:2px; top:14px; width:5px; height:5px; border-radius:50%; background:var(--lp-accent-dim); }
.lp-ul li strong { color:var(--lp-text); font-weight:600; }
.lp-hl { color:var(--lp-accent); font-weight:600; }
.lp-dng { color:var(--lp-dang-tx); font-weight:600; }

/* ── 表格 ── */
.lp-tbl { width:100%; border-collapse:collapse; margin:10px 0; font-size:13px; }
.lp-tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:10px 0; }
.lp-tbl thead th { text-align:left; padding:8px 12px; font-weight:600; color:var(--lp-text); background:var(--lp-th-bg); border-bottom:2px solid var(--lp-border); font-size:12px; letter-spacing:.03em; white-space:nowrap; }
.lp-tbl thead th:first-child { border-radius:6px 0 0 0; }
.lp-tbl thead th:last-child { border-radius:0 6px 0 0; }
.lp-tbl tbody td { padding:8px 12px; color:var(--lp-text-sec); border-bottom:1px solid var(--lp-border); }
.lp-tbl tbody tr:nth-child(even) { background:var(--lp-tr-alt); }
.lp-tbl tbody tr:last-child td { border-bottom:none; }

/* ── 提示框 ── */
.lp-box { border-radius:8px; padding:11px 13px; margin:8px 0; font-size:13px; line-height:1.75; display:flex; gap:8px; align-items:flex-start; }
.lp-box-e { font-size:14px; flex-shrink:0; margin-top:1px; }
.lp-box-warn  { background:var(--lp-warn-bg);  border:1px solid var(--lp-warn-bd);  color:var(--lp-warn-tx); }
.lp-box-dang  { background:var(--lp-dang-bg);  border:1px solid var(--lp-dang-bd);  color:var(--lp-dang-tx); }
.lp-box-info  { background:var(--lp-info-bg);  border:1px solid var(--lp-info-bd);  color:var(--lp-info-tx); }
.lp-box-ok    { background:var(--lp-ok-bg);    border:1px solid var(--lp-ok-bd);    color:var(--lp-ok-tx); }

/* ── 代码块 ── */
.lp-code { background:var(--lp-surface-raised); border:1px solid var(--lp-border); border-radius:8px; padding:14px 16px; margin:10px 0; font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace; font-size:13px; line-height:1.7; color:var(--lp-text); overflow-x:auto; white-space:pre; }
.lp-code-tag { display:inline-block; font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--lp-accent); background:var(--lp-accent-glow); border:1px solid var(--lp-icon-bd); padding:2px 8px; border-radius:4px; margin:6px 0 4px; }

/* ── 步骤编号 ── */
.lp-step { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--lp-accent); color:#fff; font-size:11px; font-weight:700; flex-shrink:0; margin-right:5px; position:relative; top:1px; }

/* ── 图片 ── */
.lp-figure { margin:14px 0; border-radius:8px; overflow:hidden; border:1px solid var(--lp-border); background:var(--lp-surface-raised); }
.lp-figure img { display:block; width:100%; height:auto; }
.lp-figcaption { padding:8px 14px; font-size:12px; color:var(--lp-text-muted); text-align:center; border-top:1px solid var(--lp-border); background:var(--lp-surface); }

/* ── 视频 ── */
.lp-video-wrap { position:relative; width:100%; padding-bottom:56.25%; margin:14px 0; border-radius:8px; overflow:hidden; border:1px solid var(--lp-border); background:#000; }
.lp-video-wrap iframe,.lp-video-wrap video { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

/* ── 响应式 ── */
@media (max-width:600px) {
    .legal-page,.lp-tutorial { padding:1rem .75rem; }
    .lp-sec { padding:16px 14px; }
    .lp-meta { flex-direction:column; gap:3px; }
    .lp-tbl { font-size:12px; }
    .lp-tbl thead th,.lp-tbl tbody td { padding:6px 8px; }
    .lp-header h1 { font-size:20px; }
    .lp-badge { font-size:10px; padding:3px 10px; }
    .lp-box { padding:9px 11px; font-size:12px; }
    .lp-code { padding:10px 12px; font-size:12px; }
    .lp-ul li { font-size:13px; }
    .lp-body p { font-size:13px; }
}