/* 官网样式。**移动优先**，桌面端只改排布不改内容取舍（§3.9 共同约束）。
   颜色取自 App 的设计令牌，不另起一套 —— 官网与 App 是同一个产品。 */

:root {
    --ink: #1C1917;
    --ink-soft: #57534E;
    --paper: #FFFFFF;
    --surface: #F5F3F0;
    --line: #E3DFDA;
    --accent: #A82A22;          /* accent.cn.text（light），与 App 一致 */
    --accent-ink: #FFFFFF;
    --focus: #0B5BB5;
    --measure: 34rem;           /* 正文行宽上限 */
}
@media (prefers-color-scheme: dark) {
    :root {
        --ink: #E7E5E4;
        --ink-soft: #A8A29E;
        --paper: #16130F;
        --surface: #221E1A;
        --line: #3A342E;
        --accent: #EE8B82;      /* accent.cn.text（dark） */
        --accent-ink: #16130F;
        --focus: #6FB3F2;
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 1rem/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
          "PingFang SC", "Hiragino Sans", "Microsoft JhengHei", sans-serif;
}
h1, h2, h3 { line-height: 1.25; text-wrap: balance; }
h1 { font-size: 1.9rem; margin: 0 0 .5rem; }
h2 { font-size: 1.3rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1.05rem; margin: 1.25rem 0 .35rem; }
p, li { max-width: var(--measure); }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* 跳至内容 —— 键盘用户的第一个可聚焦元素 */
.skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--paper); padding: .6rem 1rem;
}
.skip:focus { left: 0; }

/* —— 顶栏：常驻吸顶 */
.top {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem 1rem;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.brand { font-weight: 650; text-decoration: none; color: var(--ink); margin-inline-end: auto; }
.top-nav { display: none; gap: 1rem; }
.top-nav a, .menu-panel a { color: var(--ink); text-decoration: none; }
.top-nav a[aria-current], .menu-panel a[aria-current] {
    text-decoration: underline; text-underline-offset: 4px; color: var(--accent);
}
.lang > summary, .menu > summary {
    list-style: none; cursor: pointer; padding: .35rem .6rem;
    border: 1px solid var(--line); border-radius: 999px; font-size: .85rem;
    min-height: 44px; display: inline-flex; align-items: center;
}
.lang > summary::-webkit-details-marker, .menu > summary::-webkit-details-marker { display: none; }
.lang, .menu { position: relative; }
.lang-menu, .menu-panel {
    position: absolute; inset-inline-end: 0; top: calc(100% + .4rem);
    background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
    padding: .4rem; display: grid; min-width: 12rem; box-shadow: 0 8px 24px rgb(0 0 0 / .12);
}
.lang-menu a, .menu-panel a {
    padding: .6rem .75rem; border-radius: 8px; text-decoration: none;
    min-height: 44px; display: flex; align-items: center;
}
.lang-menu a[aria-current] { font-weight: 650; color: var(--accent); }
.lang-menu a:hover, .menu-panel a:hover { background: var(--surface); }

/* —— 主内容 */
main { padding: 1.5rem 1rem 3rem; }
section { margin-block: 2.5rem; }
section:first-child { margin-block-start: 1rem; }
.lede { font-size: 1.1rem; color: var(--ink-soft); }
.note {
    font-size: .9rem; color: var(--ink-soft);
    border-inline-start: 3px solid var(--line); padding-inline-start: .75rem;
}

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: .7rem 1.2rem; border-radius: 12px;
    background: var(--accent); color: var(--accent-ink);
    text-decoration: none; font-weight: 600; border: 1px solid transparent;
}
.btn[aria-disabled="true"] { background: var(--surface); color: var(--ink-soft); cursor: default; }
.btn-quiet { background: transparent; color: var(--accent); border-color: var(--accent); }

.cards { display: grid; gap: 1rem; }
.card { background: var(--surface); border-radius: 14px; padding: 1rem 1.1rem; }
.card h3 { margin-top: 0; }
.card p { max-width: none; }

.shots { display: grid; grid-auto-flow: column; gap: .75rem;
         overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: .5rem; }
.shot { scroll-snap-align: start; width: 70vw; max-width: 18rem; }
.shot img, .shot .ph {
    width: 100%; aspect-ratio: 9 / 19.5; border-radius: 14px;
    border: 1px solid var(--line); background: var(--surface);
    display: grid; place-items: center; color: var(--ink-soft); font-size: .85rem;
    text-align: center; padding: 1rem;
}
.shot figcaption { font-size: .85rem; color: var(--ink-soft); margin-top: .35rem; }

details.faq { border-block-end: 1px solid var(--line); padding-block: .75rem; }
details.faq > summary { cursor: pointer; font-weight: 600; min-height: 44px;
                        display: flex; align-items: center; }

/* —— 页脚 */
.foot { border-top: 1px solid var(--line); padding: 2rem 1rem 3rem; background: var(--surface); }
.foot-cols { display: grid; gap: 1.5rem; }
.foot h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em;
           color: var(--ink-soft); margin: 0 0 .5rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.foot a { color: var(--ink); text-decoration: none; display: inline-flex;
          align-items: center; min-height: 40px; }
.foot a:hover { text-decoration: underline; }
.foot-entity { margin-top: 2rem; font-size: .85rem; color: var(--ink-soft); }
.foot-entity .label { display: block; font-weight: 600; color: var(--ink); }

/* —— Cookie Banner：底部升起，**不遮挡、不阻断**（§3.1） */
.cookie {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
    background: var(--paper); border-top: 1px solid var(--line);
    padding: 1rem; box-shadow: 0 -8px 24px rgb(0 0 0 / .12);
}
.cookie h2 { margin: 0 0 .35rem; font-size: 1rem; }
.cookie p { margin: 0 0 .75rem; font-size: .9rem; }
/* 三按钮同尺寸、同字重、同层级 —— 合规红线，不是样式偏好 */
.cookie-actions { display: grid; gap: .5rem; }
.cookie-actions button {
    font: inherit; font-weight: 600; min-height: 48px; padding: .7rem 1rem;
    border-radius: 12px; border: 1px solid var(--accent);
    background: var(--paper); color: var(--accent); cursor: pointer; width: 100%;
}
.cookie-links { margin-top: .75rem; font-size: .85rem; display: flex; gap: 1rem; }

/* —— 桌面端：只改排布（§3.9） */
@media (min-width: 48rem) {
    .top { padding: .7rem 2rem; }
    .top-nav { display: flex; }
    .menu { display: none; }
    main { padding: 2rem 2rem 4rem; max-width: 62rem; margin-inline: auto; }
    .cards { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
    .shots { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
             overflow: visible; }
    .shot { width: auto; max-width: none; }
    .foot-cols { grid-template-columns: repeat(4, 1fr); max-width: 62rem; margin-inline: auto; }
    .foot-entity { max-width: 62rem; margin-inline: auto; }
    .cookie { padding: 1rem 2rem; }
    .cookie-inner { max-width: 62rem; margin-inline: auto;
                    display: flex; align-items: center; gap: 1.5rem; }
    .cookie-actions { grid-auto-flow: column; grid-auto-columns: 1fr;
                      min-width: 28rem; margin-inline-start: auto; }
}

/* —— 打印：目录与页脚导航隐藏，正文保留（§3.5 状态表） */
@media print {
    .top, .foot-cols, .cookie, .skip, .toc { display: none !important; }
    body { background: #fff; color: #000; }
    a[href^="/"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* —— 法律页（§3.5） */
.legal-dates { font-size: .9rem; color: var(--ink-soft); }
.toc { background: var(--surface); border-radius: 12px; padding: .75rem 1rem; }
.toc > summary { cursor: pointer; font-weight: 600; min-height: 44px;
                 display: flex; align-items: center; }
.toc ol { margin: .5rem 0 0; padding-inline-start: 1.25rem; }
.toc a { min-height: 40px; display: inline-flex; align-items: center; }
.legal-sec { scroll-margin-top: 5rem; }
/* 锚点直达时高亮标题，**不只靠颜色** —— 加一条前导色条，色盲用户同样看得见 */
.legal-sec:target > h2 {
    border-inline-start: 4px solid var(--accent);
    padding-inline-start: .6rem; color: var(--accent);
}
.pill { font-size: .7rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px;
        background: var(--accent); color: var(--accent-ink); vertical-align: middle; }
label { display: flex; gap: .6rem; align-items: start; }
label input { margin-top: .35rem; width: 1.1rem; height: 1.1rem; flex: none; }
code { background: var(--surface); padding: .1rem .35rem; border-radius: 5px; }

@media (min-width: 48rem) {
    /* 桌面端：左侧常驻目录 + 右侧正文（§3.9） */
    .toc { position: sticky; top: 5rem; }
}

/* 待拍板占位：页面上也要看得出「这是待填」，不能与正文混成一片 */
.pending {
    border-bottom: 2px dotted var(--accent); color: var(--accent);
    font-style: normal;
}