/* 官网样式。**移动优先**，桌面端只改排布不改内容取舍（§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;           /* 正文行宽上限 */
    /* 标题用系统衬线 / 宋体。**不引网络字体**：本站承诺零第三方请求（隐私页、Cookie 页），
       引 Google Fonts 在欧盟即构成个人数据传输。ui-serif 在 Apple 上是 New York，CJK 字形逐字回落到宋体 */
    --serif: ui-serif, "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "STSong", Georgia, serif;
    /* 首页标本「今日历页」是一件实物：浅色下是白纸，深色下是压暗的纸 */
    --sheet: #FFFFFF;
    --sheet-ink: #1C1917;
    --sheet-soft: #57534E;
    --sheet-line: #E3DFDA;
}
:lang(zh-Hant), :lang(zh-HK) {
    --serif: ui-serif, "Songti TC", "Noto Serif CJK TC", "Source Han Serif TC", "PMingLiU", Georgia, serif;
}
/* 日文、韩文：只用系统自带字体（同样不引网络字体）。`lang` 属性让浏览器按日文 / 韩文字形取字 */
:lang(ja) {
    --serif: ui-serif, "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", "Source Han Serif JP", serif;
}
:lang(ko) {
    --serif: ui-serif, "AppleMyungjo", "Nanum Myeongjo", "Noto Serif CJK KR", "Source Han Serif KR", "Batang", serif;
    word-break: keep-all;       /* 韩文按词换行，不在词中间断开 */
}
@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;
        --sheet: #27221D;
        --sheet-ink: #E7E5E4;
        --sheet-soft: #A8A29E;
        --sheet-line: #3A342E;
    }
}

*, *::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: .15rem; }
.top-nav a, .menu-panel a { color: var(--ink); text-decoration: none; }
.top-nav a { font-size: .9rem; padding: .35rem .75rem; border-radius: 999px; opacity: .85; }
.top-nav a:hover { opacity: 1; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.top-nav a[aria-current] { color: var(--accent); opacity: 1; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.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); }
/* 语言按钮：地球图标 + 当前语言名；手机只留图标（点击区仍 ≥ 44×44） */
.lang > summary { gap: .35rem; min-width: 44px; justify-content: center; }
.globe { flex: none; display: block; }
.lang-now { white-space: nowrap; }
@media (max-width: 47.99rem) {
    .lang-now { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.foot h2 .globe { display: inline-block; vertical-align: -3px; margin-inline-end: .35rem; }
.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; }

/* —— 页脚（2026-10-11 改版：小字、小标签、语言胶囊、主体信息并入底栏） */
.foot { border-top: 1px solid var(--line); padding: 2.25rem 1rem 1.5rem; background: var(--surface); font-size: .875rem; }
.foot-main { display: grid; gap: 1.75rem; }
.foot-brand { display: grid; gap: .5rem; justify-items: start; align-content: start; }
.foot-logo { font-weight: 650; font-size: 1rem; color: var(--ink); text-decoration: none; }
.foot-brand p { margin: 0; color: var(--ink-soft); font-size: .82rem; max-width: 22rem; line-height: 1.5; }
.foot-brand .top-btn { margin-top: .35rem; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.foot h2 { font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .1em;
           color: var(--ink-soft); margin: 0 0 .6rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.foot-col a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center;
              min-height: 30px; font-size: .875rem; opacity: .85; }
.foot-col a:hover { opacity: 1; color: var(--accent); }
.foot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 1.5rem;
            margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.foot-entity { font-size: .75rem; color: var(--ink-soft); line-height: 1.5; }
.foot-entity p { margin: 0; max-width: none; }
.foot-entity .label { font-weight: 600; color: var(--ink); margin-inline-end: .35em; }
.foot-langs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.foot-langs .globe { color: var(--ink-soft); margin-inline-end: .15rem; width: 16px; height: 16px; }
.foot-langs a { font-size: .75rem; color: var(--ink-soft); text-decoration: none; padding: .25rem .6rem; min-height: 28px;
                display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.foot-langs a:hover { color: var(--ink); border-color: var(--ink-soft); }
.foot-langs a[aria-current] { color: var(--accent); border-color: var(--accent); font-weight: 600; }

/* —— 顶栏按钮：登录（描边）/ 注册（实心）；页脚的「下载」同一套 */
.top-auth { display: none; gap: .4rem; align-items: center; }
.top-btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 .95rem;
           border-radius: 999px; font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap;
           border: 1px solid var(--line); color: var(--ink); background: var(--paper); transition: border-color .12s, background .12s; }
.top-btn:hover { border-color: var(--ink-soft); }
.top-btn.solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.top-btn.solid:hover { background: color-mix(in srgb, var(--accent) 88%, black); }
.top-btn[aria-current] { border-color: var(--accent); color: var(--accent); }
.menu-panel hr { border: 0; border-top: 1px solid var(--line); margin: .3rem .4rem; }
/* 手机：顶栏只放一个小「登录」（注册在菜单里）；页脚法律一列占整行、链接横排 */
@media (max-width: 47.99rem) {
    .top { gap: .4rem; padding-inline: .75rem; }
    .brand { white-space: nowrap; font-size: 1rem; }
    .menu > summary { white-space: nowrap; padding: .35rem .55rem; }
    .top-auth { display: flex; }
    .top-auth .solid { display: none; }
    .brand-sub { display: none; }
    .top-btn { height: 32px; padding: 0 .75rem; font-size: .8rem; }
    .foot { padding: 1.5rem 1rem 1.25rem; }
    .foot-cols { grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
    .foot-col:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    .foot-col:nth-child(2) ul { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
    .foot-bar { margin-top: 1.25rem; }
}

/* —— 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: 68rem; 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 { padding: 2.75rem 2rem 1.5rem; }
    .foot-main { grid-template-columns: minmax(14rem, 1fr) 2fr; gap: 3rem; max-width: 62rem; margin-inline: auto; }
    .foot-bar { max-width: 62rem; margin-inline: auto; }
    .top-auth { display: flex; }
    .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; }
    .legal-layout { display: block !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: 60rem) {
    /* 桌面端：左侧常驻目录 + 右侧正文（§3.9）。
       ⚠️ 此前只写了 .toc 吸顶、两栏布局从没实现 —— 目录横跨整页宽度吸在顶上，滚动时整块盖住正文
       （产品负责人 2026-10-09 截图回报）。现在目录独占左栏，吸顶也只在自己那一栏里。 */
    .legal-layout {
        display: grid; grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
        gap: 2.5rem; align-items: start;
    }
    .legal-layout > .toc {
        position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow: auto;
    }
    .legal-body > .legal-sec:first-child { margin-top: 0; }
}

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


/* ══════════════ 首页（2026-10-09 改版，见 docs/product/website-home-redesign-prompt.md） ══════════════
   主角是一页撕页日历标本；其余区块克制：宋体标题、细线、留白、一种红。 */

/* —— Hero */
.hero { display: grid; gap: 2.5rem; align-items: center; padding-block: .5rem 1.5rem; }
.eyebrow {
    margin: 0 0 .75rem; font-size: .8rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.hero h1 {
    font-family: var(--serif); font-weight: 700;
    font-size: clamp(2.1rem, 7vw, 3.6rem); line-height: 1.15; margin: 0 0 1.25rem;
}
.hero h1:lang(en) { letter-spacing: -.01em; }
/* 大标题下的副标题（2026-10-10）：主标题偏典雅，功能靠这一句讲清。五套风格共用 */
:lang(ja) .hero-sub, :lang(ja) h1 { word-break: auto-phrase; }
.hero-sub { margin: -.4rem 0 1.25rem; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.55; max-width: 34rem; text-wrap: balance; }
.phrase { display: inline-block; }
.points {
    list-style: none; padding: 0; margin: 0 0 1.75rem;
    display: flex; flex-wrap: wrap; row-gap: .35rem;
    color: var(--ink-soft); font-size: 1.05rem;
}
.points li { display: inline-flex; align-items: center; max-width: none; }
.points li + li::before {
    content: ""; width: 4px; height: 4px; border-radius: 50%;
    background: var(--accent); margin-inline: .7rem;
}
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.price { margin: 0; color: var(--ink-soft); font-size: .95rem; font-variant-numeric: tabular-nums; }

/* —— 标本：一页撕页日历 */
.specimen { margin: 0; justify-self: center; width: min(100%, 22rem); }
.sheet {
    position: relative; background: var(--sheet); color: var(--sheet-ink);
    border: 1px solid var(--sheet-line); border-radius: 4px;
    padding: 1.6rem 1.4rem 1.2rem;
    box-shadow: 0 22px 40px -24px rgb(0 0 0 / .45);
    transform: rotate(-1.5deg);
}
/* 无 JS：直接播放落下动画。有 JS：先藏起来，等今日数据就绪（或 1.5 秒超时退回标本）再落下 ——
   不让访客先看到一张 9 月 25 日、再跳成今天 */
html:not(.js) .sheet, .js .hero.ready .sheet { animation: sheet-drop .6s ease-out both; }
.js .hero:not(.ready) .sheet { visibility: hidden; animation: sheet-reveal 0s 2.5s forwards; }
/* 兜底：live.js 被拦截 / 加载失败时没人加 .ready —— 2.5 秒后由 CSS 自己把标本亮出来（审查发现会永远空白） */
@keyframes sheet-reveal { to { visibility: visible; } }
/* 顶边的撕口：一排孔，颜色取页面底色，看上去是打穿的 */
.sheet::before {
    content: ""; position: absolute; top: .6rem; left: 1.2rem; right: 1.2rem; height: 6px;
    background: radial-gradient(circle, var(--paper) 2.3px, transparent 2.8px) 0 0 / 14px 6px repeat-x;
}
.sheet-top {
    display: flex; justify-content: space-between; gap: 1rem;
    font-size: .8rem; letter-spacing: .06em; color: var(--sheet-soft);
    padding: .4rem 0 .5rem; border-bottom: 2px solid var(--accent);
}
.sheet-main { display: flex; align-items: center; justify-content: center; gap: 1.1rem; padding: .4rem 0 .2rem; }
.sheet-day {
    margin: 0; font-family: var(--serif); font-weight: 700; line-height: 1;
    font-size: clamp(6rem, 26vw, 8.5rem); color: var(--accent);
    font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.04em;
}
.sheet-lunar {
    margin: 0; writing-mode: vertical-rl; font-family: var(--serif);
    font-size: 1.15rem; letter-spacing: .18em; display: flex; gap: .4rem; max-width: none;
}
.sheet-lunar span:last-child { font-weight: 700; }
.sheet-lunar-h { margin: 0; font-family: var(--serif); font-size: .95rem; line-height: 1.45; max-width: 9rem; }
.sheet-fest {
    margin: 0 0 .7rem; text-align: center; max-width: none;
    font-family: var(--serif); font-size: 1.1rem; letter-spacing: .4em; color: var(--accent);
}
.sheet-fest:lang(en) { letter-spacing: .08em; }
.sheet-meta { margin: 0; border-top: 1px solid var(--sheet-line); }
.sheet-meta div {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .45rem 0; border-bottom: 1px solid var(--sheet-line); font-size: .88rem;
}
.sheet-meta dt { color: var(--sheet-soft); }
.sheet-meta dd { margin: 0; font-family: var(--serif); text-align: end; }
.sheet-yiji { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: .9rem; }
.yiji-h { margin: 0 0 .3rem; font-family: var(--serif); font-weight: 700; font-size: 1.15rem; }
.yi .yiji-h { color: var(--accent); }
.sheet-yiji ul { list-style: none; margin: 0; padding: 0; font-size: .88rem; line-height: 1.6; }
.sheet-yiji li { max-width: none; }
.specimen figcaption {
    margin: 1.1rem auto 0; max-width: 24rem; text-align: center; text-wrap: balance;
    font-size: .8rem; color: var(--ink-soft);
}
@keyframes sheet-drop {
    from { opacity: 0; transform: translateY(-16px) rotate(-1.5deg); }
    to   { opacity: 1; transform: rotate(-1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
    .sheet, html:not(.js) .sheet, .js .hero.ready .sheet { animation: none; transform: none; }
    .js .hero:not(.ready) .sheet { animation: sheet-reveal 0s 2.5s forwards; }
}

/* —— 功能块：两组，呼应 App 的两类内容分区（推算所得 / 传统历注） */
.features .label {
    margin: 2.5rem 0 .9rem; font-size: .78rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.features .cards { display: grid; gap: 1rem; }
.features .card {
    background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
    padding: 1.25rem 1.25rem 1.1rem;
}
.features .card h3 { font-family: var(--serif); font-size: 1.2rem; margin: .8rem 0 .35rem; }
.features .card p { color: var(--ink-soft); margin: 0; }
.ico {
    width: 2.25rem; height: 2.25rem; fill: none; stroke: var(--accent);
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.ico .fill { fill: var(--accent); stroke: none; }
/* 历注 = App 内的释义层：surface 底 + 左缘 accent 竖线（DesignSystem §3 同一视觉语言） */
.features .card-almanac {
    background: var(--surface); border: 0;
    border-inline-start: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
    border-radius: 4px 12px 12px 4px;
}
.features .card-almanac .note { margin-top: 1rem; }

/* —— 隐私、语言、FAQ、收尾 */
.privacy, .langs, .faqs, .closing { margin-block: 4.5rem; }
.privacy h2, .langs h2, .faqs h2, .closing h2 {
    font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0 0 1.25rem;
}
.privacy { border-top: 1px solid var(--line); padding-top: 3.5rem; }
.nos {
    list-style: none; padding: 0; margin: 0 0 1.5rem;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem;
}
.nos li {
    max-width: none; display: flex; align-items: center; gap: .6rem;
    padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; font-weight: 600;
}
/* 禁止符号（圆 + 斜杠），纯 CSS，不靠 emoji */
.nos li::before {
    content: ""; flex: none; width: .95rem; height: .95rem; border-radius: 50%;
    border: 2px solid var(--accent);
    background: linear-gradient(45deg, transparent 44%, var(--accent) 44% 56%, transparent 56%);
}
.lang-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .6rem; }
.lang-list li { max-width: none; }
.lang-list a {
    display: flex; align-items: center; min-height: 56px; padding: .75rem 1.1rem;
    border: 1px solid var(--line); border-radius: 12px; text-decoration: none;
    color: var(--ink); font-family: var(--serif); font-size: 1.2rem;
}
.lang-list a:hover { border-color: var(--accent); }
.lang-list a[aria-current] { border-color: var(--accent); color: var(--accent); }
.faqs details.faq > summary { justify-content: space-between; gap: 1rem; font-size: 1.05rem; }
.faqs details.faq > summary::after {
    content: "+"; flex: none; font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--accent);
}
.faqs details.faq[open] > summary::after { content: "−"; }
.faqs details.faq > p { color: var(--ink-soft); }
.closing {
    display: grid; justify-items: center; gap: .9rem; text-align: center;
    background: var(--surface); border-radius: 16px; padding: 3.5rem 1.25rem;
}
.closing h2 { margin: 0; }
/* 收尾横幅本身是 surface 底：禁用态按钮改用 paper 底 + 细边，否则与横幅同色、看不见 */
.closing .btn[aria-disabled="true"] { background: var(--paper); border-color: var(--line); }

@media (min-width: 40rem) {
    .features .cards { grid-template-columns: repeat(2, 1fr); }
    .features .cards-one { grid-template-columns: 1fr; }
    .nos { grid-template-columns: repeat(4, 1fr); }
    .lang-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {
    .hero { grid-template-columns: 1.1fr .9fr; gap: 3.5rem; padding-block: 2.5rem 2rem; }
    .specimen { justify-self: end; }
    .features .cards { grid-template-columns: repeat(4, 1fr); }
    .features .cards-one { grid-template-columns: 1fr; }
    /* 三栏（图标 | 今日历注 | 说明）只在独占一行的 .cards-one 里：放进多列网格时卡片太窄，说明栏会被挤成一两个字宽 */
    .features .cards-one .card-almanac { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(12rem, 1fr); column-gap: 1.5rem; align-items: start; }
    .features .cards-one .card-almanac .ico { grid-row: span 2; }
    .features .cards-one .card-almanac h3 { grid-column: 2 / 4; margin-top: 0; }
    .features .card-almanac .note { margin-top: 1rem; }
    .lang-list { grid-template-columns: repeat(4, 1fr); }
}


/* ══════════════ 配色菜单（2026-10-09） ══════════════ */
.theme { display: none; position: relative; }
.js .theme { display: block; }
.theme > summary {
    list-style: none; cursor: pointer; min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 999px;
}
.theme > summary::-webkit-details-marker { display: none; }
.sw-now {
    width: 1.1rem; height: 1.1rem; border-radius: 50%;
    background: conic-gradient(var(--accent) 0 50%, var(--paper) 50% 100%);
    border: 1px solid var(--line);
}
.theme-menu {
    position: absolute; inset-inline-end: 0; top: calc(100% + .4rem); z-index: 25;
    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);
}
.theme-menu button {
    font: inherit; color: var(--ink); background: none; border: 0; border-radius: 8px;
    display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .5rem .75rem;
    cursor: pointer; text-align: start;
}
.theme-menu button:hover { background: var(--surface); }
.theme-menu button[aria-pressed="true"] { font-weight: 650; }
/* 选中项除字重外再加一个对勾 —— 不只靠字重/颜色表达状态 */
.theme-menu button[aria-pressed="true"]::after { content: "✓"; margin-inline-start: auto; color: var(--accent); }
.theme-menu .sw { width: 1rem; height: 1rem; border-radius: 50%; background: var(--sw); flex: none; }

/* ══════════════ 今日实时区块（2026-10-09） ══════════════ */
.specimen .cap-live { display: none; }
.hero.is-live .cap-live { display: inline; }
.hero.is-live .cap-static { display: none; }
.live { margin: .4rem 0 .9rem; }
.live[hidden], .live [hidden] { display: none !important; }
.features .card .live-big, .live-big { margin: 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--ink); max-width: none; }
.features .card .live-sub, .live-sub { margin: .15rem 0 0; font-size: .9rem; color: var(--ink-soft); max-width: none; }
.features .card .live-line, .live-line { margin: .5rem 0 0; font-size: .9rem; color: var(--ink); max-width: none; }
.live-k { color: var(--ink-soft); font-size: .8rem; letter-spacing: .06em; }
.features .card .card-desc { font-size: .85rem; border-top: 1px dashed var(--line); padding-top: .6rem; }
.live-moon { display: flex; align-items: center; gap: .9rem; }
/* 月相：一个圆，被照亮的部分用 accent，暗部用 line；盈月亮在右、亏月亮在左（北半球所见）。
   照明度 0–1 由引擎给出，这里只是按比例画 —— 不判断相位 */
.moon {
    --illum: .5; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
    background:
      linear-gradient(to right, var(--line) 0 calc((1 - var(--illum)) * 100%), var(--accent) 0 100%);
    border: 1px solid var(--line);
}
.moon[data-waxing="0"] {
    background:
      linear-gradient(to left, var(--line) 0 calc((1 - var(--illum)) * 100%), var(--accent) 0 100%);
}
.live-phases { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .75rem; font-size: .85rem; color: var(--ink-soft); }
.live-phases li { max-width: none; font-variant-numeric: tabular-nums; }
.live-phases span { color: var(--ink); font-weight: 600; }
.features .card .live-yiji .yiji-h, .live-yiji .yiji-h { margin: 0 0 .3rem; color: var(--ink); font-family: var(--serif); font-weight: 700; font-size: 1.05rem; }
.features .card .live-yiji .yi .yiji-h { color: var(--accent); }
.live-yiji { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: .6rem 0 .2rem; }
.live-yiji ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .7rem; font-size: .92rem; }
.live-yiji li { max-width: none; }
.live-hours {
    list-style: none; margin: .4rem 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem;
}
.live-hours li {
    max-width: none; display: grid; justify-items: center; padding: .35rem 0;
    border: 1px solid var(--line); border-radius: 8px; font-family: var(--serif);
}
.live-hours small { font-family: inherit; font-size: .75rem; color: var(--ink-soft); }
.live-hours li.good { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.live-hours li.good small { color: var(--accent); font-weight: 600; }
@media (min-width: 60rem) {
    .features .cards-one .card-almanac .live { grid-column: 2 / 3; margin-top: 0; }
    .features .cards-one .card-almanac .card-aside { grid-column: 3 / 4; }
    .features .cards-one .card-almanac .card-desc { border-top: 0; padding-top: 0; margin-top: 0; }
    .live-hours { grid-template-columns: repeat(12, 1fr); }
}

/* —— 下载页的方案列表（2026-10-09 起四档） */
.plans { list-style: none; padding: 0; margin: .5rem 0 1rem; display: grid; gap: .75rem; }
.plans li { max-width: var(--measure); }
.plan-blurb { color: var(--ink-soft); font-size: .92rem; }

/* ══════════════ 官网风格共用组件（2026-10-09，docs/product/site-styles-prompt.md） ══════════════
   各风格首页用到的部件的**结构**样式；视觉语言（字体气质、色调、比例）在 style-<键>.css 里覆盖。 */
.td-day { margin: 0; font-family: var(--serif); font-weight: 700; line-height: .95; color: var(--accent);
          font-size: clamp(3.5rem, 12vw, 5rem); letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; }
.td-day.td-big { font-size: clamp(6rem, 28vw, 11rem); }
.td-date { margin: .4rem 0 0; color: var(--ink-soft); font-size: .95rem; }
.td-lunar { margin: .5rem 0 0; font-family: var(--serif); font-size: 1.25rem; }
.td-fest { margin: .35rem 0 0; color: var(--accent); font-family: var(--serif); letter-spacing: .15em; }
.td-yiji { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 1rem; }
.td-yiji b { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 6px;
             font-family: var(--serif); font-size: 1rem; margin-bottom: .4rem; }
.td-yiji .yi b { background: color-mix(in srgb, #1E6B3A 14%, transparent); color: #1E6B3A; }
.td-yiji .ji b { background: color-mix(in srgb, #9E2B25 14%, transparent); color: #9E2B25; }
@media (prefers-color-scheme: dark) {
    .td-yiji .yi b { color: #7DD3A0; } .td-yiji .ji b { color: #F7978E; }
}
.td-yiji ul { list-style: none; margin: 0; padding: 0; font-size: .92rem; line-height: 1.7; }
.nt-k { margin: 0; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.nt-name { margin: .2rem 0 0; font-family: var(--serif); font-size: 1.6rem; font-weight: 700; }
.nt-when { margin: .1rem 0 0; color: var(--ink-soft); font-size: .9rem; }

.idx { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.idx li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem 0;
          border-top: 1px solid var(--line); max-width: none; }
.idx li:last-child { border-bottom: 1px solid var(--line); }
.idx h3 { margin: 0 0 .3rem; font-family: var(--serif); font-size: 1.25rem; }
.idx p { margin: 0; color: var(--ink-soft); max-width: 40rem; }
.idx-n { font-family: var(--serif); font-size: 1.6rem; color: var(--accent); font-variant-numeric: lining-nums; line-height: 1.2; }

/* 月历墙 */
.mg-title { margin: 0 0 .75rem; font-family: var(--serif); font-size: 1.35rem; font-weight: 700; }
.mg-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mg-h { text-align: center; font-size: .78rem; color: var(--ink-soft); padding-bottom: .3rem; }
.mg-c { display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 3.4rem; padding: .25rem 0;
        border-radius: 10px; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.mg-c b { font-size: 1.05rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.mg-c small { font-size: .68rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mg-c.mg-pad { background: none; }
.mg-c.mg-mark small { color: var(--accent); font-weight: 600; }
.mg-c.mg-today { background: var(--accent); color: var(--accent-ink); }
.mg-c.mg-today small { color: inherit; opacity: .9; }

/* 节气圆环 */
.ring { width: 100%; height: auto; display: block; overflow: visible; }
.r-orbit { fill: none; stroke: var(--line); stroke-width: 1.2; }
.rt { stroke: var(--ink-soft); stroke-width: 1.2; opacity: .55; }
.rt.major { stroke-width: 2; }
.rl { fill: var(--ink-soft); font-family: var(--serif); }
.rt.on, .rl.on { stroke: var(--accent); fill: var(--accent); opacity: 1; font-weight: 700; }
.rl.next { fill: var(--ink); font-weight: 700; }
.r-sun { fill: var(--accent); }

/* 月相小圆（各风格共用；照明度与盈亏由 live.js 写入） */
.tile .moon, .sky-core .moon { display: block; }

/* —— 账号与云备份（2026-10-11 云备份 C2）。会员中心由 account.js 渲染；只用全站令牌，五种风格共用 */
.acct-feats { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.acct { max-width: 40rem; }
.acct-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin: 1rem 0; overflow-x: auto; }
.acct-tabs button {
    font: inherit; background: none; border: 0; color: var(--ink-soft); cursor: pointer;
    padding: .6rem .8rem; min-height: 44px; border-bottom: 2px solid transparent; white-space: nowrap;
}
.acct-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.acct-form { display: grid; gap: .75rem; max-width: 26rem; }
.acct-form [hidden] { display: none; }
.acct-field { display: grid; gap: .3rem; margin: 0; }
.acct-field label { display: block; font-size: .9rem; color: var(--ink-soft); }
.acct-field input {
    font: inherit; color: var(--ink); background: var(--paper); width: 100%;
    border: 1px solid var(--line); border-radius: 10px; padding: .65rem .8rem; min-height: 48px;
}
.acct-field input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.acct-form button { font: inherit; cursor: pointer; justify-self: start; }
.acct-form button:disabled { opacity: .6; cursor: progress; }
.acct-msg { margin: 0; padding: .6rem .8rem; border-radius: 10px; font-size: .95rem; }
.acct-msg.ok { background: var(--surface); color: var(--ink); }
.acct-msg.bad { background: color-mix(in srgb, var(--accent) 12%, var(--paper)); color: var(--ink); border: 1px solid var(--accent); }
.acct-facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 1rem 0; }
.acct-facts div { display: contents; }
.acct-facts dt { color: var(--ink-soft); }
.acct-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) {
    .acct-facts { grid-template-columns: 1fr; gap: 0; }
    .acct-facts dd { margin-bottom: .6rem; }
}
.acct-table { overflow-x: auto; }
.acct-table table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.acct-table th, .acct-table td { text-align: start; padding: .5rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.acct-table th { color: var(--ink-soft); font-weight: 600; }
.acct-devices { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.acct-devices li {
    display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
    background: var(--surface); border-radius: 12px; padding: .7rem .9rem; max-width: none;
}
.acct-devices small { color: var(--ink-soft); }
.acct-devices button { font: inherit; cursor: pointer; }
.acct-here { margin-inline-start: .35rem; }
.acct-actions { margin: 1.5rem 0; }
.acct-actions button { font: inherit; cursor: pointer; }
.acct-delete { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.acct-delete summary { cursor: pointer; color: var(--ink-soft); min-height: 44px; display: flex; align-items: center; }
.acct-danger.btn { background: var(--accent); color: var(--accent-ink); }
.acct-danger.btn-quiet { background: transparent; color: var(--accent); }
.acct h2:focus { outline: none; }

.acct-ics { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.acct-ics-url {
    font: .85rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); background: var(--paper);
    border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem; min-height: 44px; flex: 1 1 18rem; min-width: 0;
}
.acct-ics button { font: inherit; cursor: pointer; }

.acct-plans { display: flex; flex-wrap: wrap; gap: .5rem; }
.acct-plans button { font: inherit; cursor: pointer; gap: .4rem; }
.acct-backup h4 { margin: 1rem 0 .3rem; font-size: 1rem; }
.acct-tabs button[aria-pressed="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }