/* ============================================================
   启元.QIEAM UI V4 页面族样式 —— 法律文档壳 (v4/pages/legal.css)
   消费者：legal_base.html（privacy / terms 子页）。
   类名与模板契约不变；视觉切换刻度语态（平面底/发丝线/无胶囊）。
   纪律：100% 消费 v4/tokens.css 既有令牌，零 !important（@print 段的
   黑白印刷色为纸张排印例外）。
   ============================================================ */

/* 页面局部令牌：站头高度，粘性目录/滚动边距统一引用（body 域，不占全局命名） */
/* 盒模型基线由 v4/base.css 统一声明，此处只做页内间距 reset。 */
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    --lg-header-h: 58px;
    background-color: var(--scale-face);
    color: var(--scale-ink-1);
    font-family: var(--font-sans);
    font-size: var(--scale-t-body);
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
}

/* ── 顶部站头 ── */
.lg-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--scale-panel);
    border-bottom: 1px solid var(--scale-rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--scale-sp-3);
    padding: 0 var(--scale-sp-5);
    height: var(--lg-header-h);
}

.lg-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--scale-ink-1);
    font-weight: 600;
    font-size: var(--scale-t-body);
}

.lg-brand .logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.lg-brand .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 50%;
}

.lg-brand small {
    display: block;
    font-size: var(--scale-t-tick);
    font-weight: 600;
    color: var(--scale-ink-3);
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.lg-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lg-theme {
    width: 34px;
    height: 34px;
    cursor: pointer;
    border: 1px solid var(--scale-rule);
    border-radius: var(--scale-r-ctl);
    background: transparent;
    color: var(--scale-ink-2);
    font-size: var(--scale-t-title);
    display: grid;
    place-items: center;
}

.lg-theme:hover {
    background-color: var(--scale-recess);
    color: var(--scale-ink-1);
}

.lg-back {
    font-size: var(--scale-t-body);
    font-weight: 600;
    color: var(--scale-steel);
    text-decoration: none;
    padding: 7px 14px;
    border: 1px solid var(--scale-rule-strong);
    border-radius: var(--scale-r-ctl);
    background-color: var(--scale-panel);
}

.lg-back:hover { background-color: var(--scale-recess); }

/* ── 双栏壳：左目录 + 右内容 ── */
.lg-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px var(--scale-sp-5) 56px;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 52px;
    align-items: start;
}

/* 桌面目录：粘性侧栏 */
.legal-toc {
    position: sticky;
    top: 24px;
    z-index: 20;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background-color: var(--scale-panel);
    border: 1px solid var(--scale-rule);
    padding: var(--scale-sp-3) var(--scale-sp-2) 12px;
    font-size: var(--scale-t-body);
    line-height: 1.5;
}

.legal-toc b {
    display: block;
    color: var(--scale-ink-3);
    font-size: var(--scale-t-meta);
    letter-spacing: 2px;
    padding: 0 14px var(--scale-sp-2);
}

.legal-toc a {
    display: block;
    padding: var(--scale-sp-2) 14px;
    color: var(--scale-ink-2);
    text-decoration: none;
    border-left: 2px solid transparent;
    white-space: nowrap;
    transition: background-color var(--dur-inst) var(--ease-out),
                color var(--dur-inst) var(--ease-out);
}

.legal-toc a:hover {
    color: var(--scale-steel);
    background-color: var(--scale-recess);
}

.legal-toc a.on {
    color: var(--scale-steel);
    font-weight: 600;
    border-left-color: var(--scale-steel);
    background-color: var(--scale-steel-wash);
}

/* ── 内容列 ── */
.lg-main {
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    min-width: 0;
}

.legal-head {
    border-bottom: 1px solid var(--scale-rule);
    padding-bottom: 18px;
    margin-bottom: 20px;
}

.legal-head h1 {
    font-size: var(--scale-t-page);
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--scale-ink-1);
}

.legal-head .sub {
    color: var(--scale-ink-3);
    font-size: var(--scale-t-meta);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--scale-sp-1) 18px;
}

.legal-head .sub b {
    color: var(--scale-ink-2);
    font-weight: 600;
}

/* ── 提示框 ── */
.legal-notice {
    background-color: var(--scale-steel-wash);
    border: 1px solid var(--scale-rule-strong);
    padding: 12px var(--scale-sp-3);
    margin: 0 0 20px;
    color: var(--scale-ink-2);
    font-size: var(--scale-t-body);
    line-height: 1.9;
}

.legal-notice strong { color: var(--scale-ink-1); }

/* ── 正文排版体系：章（h3）＞条（h4）＞款（ol/li）＞段（p） ── */
.legal-body {
    font-size: var(--scale-t-body);
    line-height: 1.95;
    color: var(--scale-ink-2);
}

.legal-body h3 {
    font-size: var(--scale-t-title);
    font-weight: 600;
    color: var(--scale-ink-1);
    margin: 34px 0 10px;
    padding: 2px 0 2px 12px;
    border-left: 2px solid var(--scale-steel);
    line-height: 1.5;
    scroll-margin-top: calc(var(--lg-header-h) + 20px);
}

.legal-body h3:first-child { margin-top: 6px; }

.legal-body h4 {
    font-size: var(--scale-t-body);
    font-weight: 600;
    color: var(--scale-ink-1);
    margin: 20px 0 6px;
    line-height: 1.6;
}

.legal-body p { margin: 10px 0; }

.legal-body ol,
.legal-body ul {
    margin: 10px 0;
    padding-left: 28px;
}

.legal-body li {
    margin: var(--scale-sp-2) 0;
    padding-left: var(--scale-sp-1);
}

.legal-body li::marker {
    color: var(--scale-steel);
    font-weight: 600;
}

.legal-body ul { list-style: square; }

.legal-body strong {
    color: var(--scale-ink-1);
    font-weight: 600;
}

.legal-body a {
    color: var(--scale-steel);
    font-weight: 600;
    text-decoration: none;
}

.legal-body a:hover { text-decoration: underline; }

/* 表格（信息收集/用途对照） */
.legal-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: var(--scale-t-body);
    line-height: 1.7;
}

.legal-body th,
.legal-body td {
    border: 1px solid var(--scale-rule-strong);
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
}

.legal-body th {
    background-color: var(--scale-recess);
    color: var(--scale-ink-1);
    font-weight: 600;
    white-space: nowrap;
}

/* 窄屏：表格横向滚动，避免挤压 */
@media (max-width: 1024px) {
    .legal-body table {
        display: block;
        overflow-x: auto;
    }

    .legal-body td { white-space: nowrap; }
}

/* ── 文档尾交叉链接 ── */
.legal-doc-links {
    margin-top: 30px;
    padding: 18px 20px;
    border: 1px solid var(--scale-rule);
    background-color: var(--scale-panel);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    align-items: center;
    font-size: var(--scale-t-body);
}

.legal-doc-links a {
    color: var(--scale-steel);
    font-weight: 600;
    text-decoration: none;
}

.legal-doc-links a:hover { text-decoration: underline; }

.legal-doc-links .lg-copy {
    margin-left: auto;
    color: var(--scale-ink-3);
    font-size: var(--scale-t-body);
}

/* ── 页脚 ── */
.lg-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px var(--scale-sp-5) 40px;
    color: var(--scale-ink-3);
    font-size: var(--scale-t-body);
    border-top: 1px solid var(--scale-rule);
}

/* ── 平板/移动 <1000px：目录变顶部横向固定锚点条 ── */
@media (max-width: 1024px) {
    .lg-shell {
        display: block;
        padding: calc(var(--lg-header-h) + 68px) 20px 48px;
    }

    .legal-toc {
        position: fixed;
        top: var(--lg-header-h);
        left: 0;
        right: 0;
        z-index: 40;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        display: flex;
        align-items: center;
        gap: 2px;
        padding: var(--scale-sp-2) 12px;
        box-shadow: var(--scale-shadow-float);
        scrollbar-width: none;
    }

    .legal-toc::-webkit-scrollbar { display: none; }

    .legal-toc b {
        padding: 0 10px 0 var(--scale-sp-1);
        white-space: nowrap;
    }

    .legal-toc a {
        white-space: nowrap;
        padding: 6px 12px;
        border-left: none;
    }

    .legal-toc a.on { background-color: var(--scale-steel-wash); }
    .legal-body h3 { scroll-margin-top: calc(var(--lg-header-h) + 64px); }
    .lg-header { padding: 0 20px; gap: var(--scale-sp-2); }
    .lg-header .lg-doc-name { display: none; }

    .lg-brand { min-width: 0; }

    .lg-brand > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lg-right { flex-shrink: 0; }
    .lg-back { white-space: nowrap; }
}

/* ── 打印：仅正文（黑白纸张排印例外） ── */
@media print {
    .lg-header,
    .legal-toc,
    .legal-doc-links,
    .lg-theme,
    .lg-back { display: none !important; }

    .lg-shell {
        display: block;
        padding: 0;
        max-width: none;
    }

    body { background: #fff; color: #000; }

    .legal-body {
        font-size: 12pt;
        line-height: 1.8;
        color: #000;
    }

    .legal-body h3,
    .legal-body h4,
    .legal-body strong { color: #000; }
    .legal-body h3 { border-left-color: #000; scroll-margin-top: 0; }
    .legal-body li::marker { color: #000; }
    .legal-head { border-color: #000; }
    .legal-notice { background: none; border: 1px solid #000; color: #000; }
}