:root {
    --paper: #F3E8D4;
    --deep-paper: #E2D2B4;
    --content: #FBF3E4;
    --secondary: #EDE0C8;
    --ink: #1A140A;
    --text: #2C2214;
    --muted: #5C4A30;
    --soft: #7C6844;
    --dark-gold: #7A5A20;
    --copper: #B88838;
    --border: rgba(26,20,10,0.12);
    --strong-border: rgba(122,90,32,0.50);
    --shadow: 0 12px 28px rgba(26,20,10,0.10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; font-size: 15px; line-height: 1.7; overflow-x: hidden; }
body.ui-locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
.site-fixed { position: fixed; inset: 0 0 auto 0; z-index: 80; box-shadow: 0 5px 18px rgba(26,20,10,0.07); }
.old-edge { height: 20px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(16px, calc((100vw - 960px)/2)); background: var(--ink); color: var(--copper); font-size: 12px; }
.old-edge-brand { letter-spacing: .06em; }
.text-search-button { appearance: none; border: 0; background: transparent; color: var(--copper); padding: 0 2px; font-size: 12px; min-height: 20px; }
.copper-head { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(16px, calc((100vw - 960px)/2)); background: var(--content); border-bottom: 1px solid var(--strong-border); }
.brand-lockup { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }
.brand-logo, .footer-logo { height: 24px; width: auto; object-fit: contain; object-position: center; }
.brand-fallback { font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: .08em; }
.head-actions { display: flex; align-items: center; gap: 8px; }
.head-app-link, .drawer-toggle { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: 9px; font-size: 14px; white-space: nowrap; }
.head-app-link { border: 1px solid var(--dark-gold); background: var(--content); color: var(--ink); }
.drawer-toggle { border: 0; background: linear-gradient(135deg,#1A140A 0%,#B88838 100%); color: var(--content); }
.copper-dots { height: 42px; display: flex; align-items: flex-start; justify-content: center; gap: 44px; padding-top: 4px; background: var(--content); border-bottom: 1px solid var(--border); }
.dot-link { min-width: 54px; display: grid; justify-items: center; gap: 1px; font-size: 13px; color: var(--muted); }
.dot-mark { width: 8px; height: 8px; border: 1.5px solid var(--ink); border-radius: 50%; background: transparent; }
.dot-link.is-current .dot-mark { background: var(--copper); border-color: var(--copper); }
.dot-link.is-current { color: var(--ink); font-weight: 700; }
.site-main { width: min(960px, calc(100% - 32px)); margin: 0 auto; padding: 140px 0 56px; }
.hero, .page-intro { padding: 28px 0 24px; }
.kicker { font-size: 13px; color: var(--dark-gold); font-weight: 800; letter-spacing: .08em; }
h1, h2, h3 { margin: 0; color: var(--ink); line-height: 1.3; }
h1 { font-size: 24px; margin-top: 8px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p { margin: 0; }
.lead { max-width: 760px; margin-top: 12px; color: var(--muted); }
.section { margin: 22px 0; padding: 24px; background: var(--content); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }

.mt-7 { margin-top: 7px; }
.mt-8 { margin-top: 8px; }
.mt-9 { margin-top: 9px; }
.mt-10 { margin-top: 10px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.progress-100 { width: 100%; }
.progress-68 { width: 68%; }
.progress-52 { width: 52%; }
.progress-22 { width: 22%; }

.section-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-header p { color: var(--soft); font-size: 13px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.primary-btn, .secondary-btn { min-height: 44px; padding: 0 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; white-space: nowrap; }
.primary-btn { color: var(--content); background: linear-gradient(135deg,#1A140A 0%,#B88838 100%); }
.secondary-btn { color: var(--ink); background: var(--content); border: 1px solid var(--dark-gold); }
a:hover, button:hover { filter: brightness(.98); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid rgba(184,136,56,.42); outline-offset: 2px; }
.index-points { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 18px; }
.index-points a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; color: var(--muted); }
.index-points i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink); }
.media-slot { width: 100%; min-height: 136px; display: flex; align-items: center; justify-content: center; background: var(--content); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.media-slot img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.media-slot.horizontal { height: 168px; }
.media-slot.banner { height: 200px; }
.media-slot.app-vertical { height: 320px; }
.media-slot.icon-small { width: 64px; height: 64px; min-height: 64px; }
.home-slice { padding: 0; overflow: hidden; }
.home-slice-copy { padding: 22px 24px 24px; }
.triple-grid { display: grid; grid-template-columns: 1.18fr 1fr 1fr; gap: 14px; }
.triple-item { padding: 18px; background: var(--secondary); border: 1px solid var(--border); border-radius: 10px; }
.triple-item p { margin-top: 10px; color: var(--muted); }
.triple-item .media-slot { margin-bottom: 14px; min-height: 152px; }
.clip-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.clip-card { padding: 20px; background: var(--secondary); border-radius: 10px; border: 1px solid var(--border); position: relative; }
.clip-card::before { content: ""; position: absolute; top: 18px; left: -1px; width: 4px; height: 36px; background: var(--copper); border-radius: 0 4px 4px 0; }
.clip-card p { margin-top: 10px; }
.two-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.note-card { padding: 20px; border-radius: 10px; background: var(--content); border: 1px solid var(--strong-border); }
.note-card p { margin-top: 10px; color: var(--muted); }
.period-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.period-box { padding: 18px; background: var(--secondary); border-radius: 10px; border-top: 3px solid var(--dark-gold); }
.period-box p { margin-top: 8px; }
.status-list { display: grid; gap: 10px; }
.status-item { display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; background: var(--secondary); border-radius: 9px; }
.status-tag { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--dark-gold); color: var(--dark-gold); font-size: 12px; white-space: nowrap; }
.app-top { display: grid; grid-template-columns: minmax(0,1fr) 82px; gap: 16px; align-items: start; }
.app-copy { margin-top: 18px; display: grid; gap: 10px; }
.home-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-faq article { padding: 18px; background: var(--secondary); border-radius: 10px; }
.home-faq p { margin-top: 8px; color: var(--muted); }

/* 旧记：三联 */
.jiuji-layout { display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: 16px; margin-top: 18px; }
.jiuji-panel { background: var(--content); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.jiuji-panel p { margin-top: 10px; }
.jiuji-panel .media-slot { margin-bottom: 16px; min-height: 190px; }
.source-note { margin-top: 18px; padding: 20px 22px; background: var(--ink); color: var(--content); border-radius: 10px; }
.source-note h2 { color: var(--copper); }
.source-note p { margin-top: 8px; }

/* 旧面：横切 */
.jiumian-strip { margin-top: 18px; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.jiumian-strip .media-slot { border-radius: 0; border: 0; height: 220px; background: var(--deep-paper); }
.jiumian-copy { padding: 24px; background: var(--content); }
.jiumian-steps { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-top: 16px; }
.jiumian-step { padding: 16px 12px; background: var(--secondary); border-bottom: 2px solid var(--dark-gold); }
.jiumian-step p { margin-top: 8px; color: var(--muted); }

/* 旧簿：夹页 */
.jiubu-stack { margin-top: 18px; display: grid; gap: 16px; }
.jiubu-sheet { display: grid; grid-template-columns: 150px 1fr; gap: 22px; padding: 22px; background: var(--content); border: 1px solid var(--border); border-radius: 12px; position: relative; }
.jiubu-sheet:nth-child(even) { grid-template-columns: 1fr 150px; }
.jiubu-sheet:nth-child(even) .sheet-index { order: 2; }
.jiubu-sheet::after { content: ""; position: absolute; right: 20px; top: -1px; width: 46px; height: 8px; background: var(--copper); border-radius: 0 0 7px 7px; }
.sheet-index { color: var(--dark-gold); font-weight: 800; }
.sheet-copy p { margin-top: 8px; }

/* 旧次：单列说明 */
.jiuci-flow { max-width: 760px; margin: 18px auto 0; border-left: 2px solid var(--strong-border); padding-left: 24px; display: grid; gap: 18px; }
.jiuci-flow article { background: var(--content); padding: 20px; border-radius: 10px; border: 1px solid var(--border); }
.jiuci-flow p { margin-top: 8px; }

/* 旬旧 */
.xunjiu-columns { display: grid; grid-template-columns: 1fr 1.05fr 1fr; gap: 14px; margin-top: 18px; }
.xunjiu-columns article { padding: 20px; background: var(--content); border-radius: 10px; border-top: 4px solid var(--dark-gold); }
.xunjiu-columns p { margin-top: 9px; }

/* 旧历 */
.jiuli-board { margin-top: 18px; display: grid; gap: 12px; }
.jiuli-row { display: grid; grid-template-columns: 120px 1fr 110px; align-items: center; gap: 14px; padding: 18px; background: var(--content); border: 1px solid var(--border); border-radius: 10px; }
.jiuli-row .bar { height: 8px; border-radius: 999px; background: var(--deep-paper); overflow: hidden; }
.jiuli-row .bar i { display: block; height: 100%; background: var(--dark-gold); }

/* 旧备 */
.jiubei-list { margin-top: 18px; display: grid; gap: 12px; }
.jiubei-item { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 18px; background: var(--content); border-radius: 10px; border: 1px solid var(--border); }
.check-dot { width: 22px; height: 22px; border: 2px solid var(--copper); border-radius: 50%; margin-top: 2px; }
.jiubei-item p { margin-top: 6px; }

/* 看旧 */
.kanjiu-path { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 18px; }
.kanjiu-path article { padding: 18px; background: var(--content); border: 1px solid var(--border); border-radius: 10px; }
.kanjiu-path span { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: var(--ink); color: var(--copper); margin-bottom: 10px; }
.kanjiu-detail { margin-top: 16px; padding: 22px; background: var(--secondary); border-radius: 10px; }

/* 旧专 */
.topic-list { display: grid; gap: 12px; margin-top: 18px; }
.topic-row { display: grid; grid-template-columns: 180px 1fr auto; gap: 18px; padding: 20px; background: var(--content); border: 1px solid var(--border); border-radius: 10px; align-items: center; }
.topic-row a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid var(--dark-gold); border-radius: 8px; }

/* 旧架 */
.jiujia-center { max-width: 740px; margin: 18px auto 0; text-align: center; }
.jiujia-center .media-slot { margin-bottom: 16px; height: 210px; }
.jiujia-card { margin-top: 14px; padding: 22px; background: var(--content); border: 1px solid var(--border); border-radius: 10px; }
.jiujia-card p { margin-top: 9px; color: var(--muted); }

/* APP */
.app-feature-top { max-width: 720px; margin: 18px auto 0; }
.app-visuals { display: grid; grid-template-columns: 1fr 80px; gap: 14px; }
.app-feature-copy { margin-top: 18px; padding: 22px; background: var(--content); border-radius: 10px; border: 1px solid var(--border); }
.app-feature-grid { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.app-feature-grid article { padding: 18px; background: var(--secondary); border-radius: 10px; }

/* 安装 */
.install-rail { margin-top: 18px; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.install-rail article { padding: 18px; background: var(--content); border: 1px solid var(--border); border-radius: 10px; }
.install-rail b { color: var(--dark-gold); font-size: 13px; }
.install-rail p { margin-top: 8px; }
.notice-box { margin-top: 16px; padding: 20px; border: 1px solid var(--strong-border); background: var(--secondary); border-radius: 10px; }

/* 条款 */
.policy-sections { display: grid; gap: 14px; margin-top: 18px; }
.policy-sections section { padding: 22px; background: var(--content); border-radius: 10px; border-left: 4px solid var(--dark-gold); }
.policy-sections p { margin-top: 8px; }

/* 帮助 */
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.help-grid article { padding: 20px; background: var(--content); border: 1px solid var(--border); border-radius: 10px; }
.help-grid p { margin-top: 8px; }

/* FAQ */
.faq-list { display: grid; gap: 12px; margin-top: 18px; }
.faq-item { padding: 20px; background: var(--content); border-radius: 10px; border: 1px solid var(--border); }
.faq-item h2 { font-size: 16px; }
.faq-item p { margin-top: 8px; }

/* 联系 */
.contact-lanes { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 18px; }
.contact-lanes article { padding: 22px; background: var(--content); border-radius: 10px; border: 1px solid var(--border); }
.contact-lanes p { margin-top: 8px; }
.contact-note { margin-top: 16px; padding: 20px; background: var(--ink); color: var(--content); border-radius: 10px; }
.contact-note h2 { color: var(--copper); }

/* 关于 */
.about-banner { margin-top: 18px; }
.about-columns { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; margin-top: 16px; }
.about-columns article { padding: 22px; background: var(--content); border: 1px solid var(--border); border-radius: 10px; }
.about-columns p { margin-top: 9px; }
.about-wide { margin-top: 14px; padding: 22px; background: var(--secondary); border-radius: 10px; }

.site-footer { background: var(--ink); color: var(--paper); border-top: 1px solid var(--copper); padding: 34px 0 78px; }
.footer-inner { width: min(960px, calc(100% - 32px)); margin: 0 auto; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.footer-brand div { display: grid; line-height: 1.2; }
.footer-brand strong { color: var(--content); font-size: 16px; }
.footer-brand span { color: var(--copper); font-size: 12px; letter-spacing: .12em; }
.footer-fallback { color: var(--copper); font-weight: 800; }
.footer-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.footer-grid h2 { color: var(--copper); font-size: 13px; margin-bottom: 8px; }
.footer-grid a { display: flex; align-items: center; min-height: 44px; color: var(--paper); font-size: 13px; }
.footer-note, .copyright { font-size: 13px; color: #D8C7A7; }
.footer-note { margin-top: 22px; max-width: 760px; }
.copyright { margin-top: 10px; }

.page-mask { position: fixed; inset: 0; z-index: 100; background: rgba(26,20,10,.42); opacity: 0; visibility: hidden; pointer-events: none; transition: .2s ease; }
.page-mask.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.nav-drawer { position: fixed; left: 18px; bottom: 18px; z-index: 110; width: 240px; max-height: 380px; background: var(--content); border: 1px solid var(--strong-border); border-radius: 12px; box-shadow: var(--shadow); transform: translateY(28px); opacity: 0; visibility: hidden; pointer-events: none; transition: .2s ease; overflow: hidden; }
.nav-drawer.is-open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border-bottom: 1px solid var(--border); }
.drawer-brand { display: flex; align-items: center; gap: 8px; }
.drawer-brand img { height: 24px; width: auto; object-fit: contain; }
.plain-close { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--dark-gold); }
.drawer-scroll { max-height: 314px; overflow-y: auto; padding: 8px 12px 14px; }
.drawer-scroll section + section { margin-top: 10px; }
.drawer-scroll h2 { font-size: 13px; color: var(--dark-gold); margin: 4px 0; }
.drawer-scroll a { display: grid; grid-template-columns: 58px 1fr; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.drawer-scroll a strong { font-size: 13px; color: var(--ink); }
.drawer-scroll a span { font-size: 11px; color: var(--soft); line-height: 1.45; }
.search-panel { position: fixed; left: 0; right: 0; top: 74px; z-index: 115; visibility: hidden; pointer-events: none; opacity: 0; transition: .18s ease; }
.search-panel.is-open { visibility: visible; pointer-events: auto; opacity: 1; }
.search-card { width: min(720px, calc(100% - 32px)); margin: 0 auto; background: var(--content); border: 1px solid var(--strong-border); border-radius: 0 0 12px 12px; box-shadow: var(--shadow); padding: 20px; }
.search-top { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.search-top div { display: grid; }
.search-top strong { color: var(--ink); }
.search-top span { color: var(--soft); font-size: 13px; }
.search-label { display: block; margin-top: 14px; color: var(--muted); font-size: 13px; }
.search-card input { width: 100%; min-height: 44px; margin-top: 6px; border: 1px solid var(--strong-border); border-radius: 8px; background: var(--paper); color: var(--ink); padding: 0 12px; }
.search-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.search-links a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; border: 1px solid var(--dark-gold); color: var(--ink); background: var(--content); }
.search-empty { margin-top: 12px; color: var(--muted); }
.mobile-bottom { display: none; }

@media (max-width: 780px) {
    .copper-dots { display: none; }
    .site-main { width: calc(100% - 32px); padding-top: 90px; padding-bottom: 72px; }
    .triple-grid, .clip-pages, .two-notes, .period-row, .jiuji-layout, .jiumian-steps, .xunjiu-columns, .kanjiu-path, .help-grid, .contact-lanes, .about-columns, .footer-grid, .app-feature-grid, .install-rail { grid-template-columns: 1fr; }
    .status-item, .jiuli-row, .topic-row { grid-template-columns: 1fr; }
    .jiubu-sheet, .jiubu-sheet:nth-child(even) { grid-template-columns: 1fr; }
    .jiubu-sheet:nth-child(even) .sheet-index { order: 0; }
    .home-faq { grid-template-columns: 1fr; }
    .app-top, .app-visuals { grid-template-columns: 1fr; }
    .media-slot.icon-small { width: 64px; }
    .nav-drawer { left: 6%; right: 6%; width: 88%; bottom: calc(58px + env(safe-area-inset-bottom)); max-height: min(70vh, 520px); }
    .drawer-scroll { max-height: min(60vh, 440px); }
    .search-panel { inset: 0; background: var(--ink); top: 0; }
    .search-card { width: 100%; min-height: 100%; border: 0; border-radius: 0; background: var(--ink); color: var(--copper); padding: 22px 16px calc(72px + env(safe-area-inset-bottom)); }
    .search-top strong, .search-top span, .search-label, .plain-close { color: var(--copper); }
    .search-card input { background: var(--content); }
    .search-links a { color: var(--ink); background: var(--content); }
    .mobile-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; height: calc(48px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4,1fr); background: var(--content); border-top: 1px solid var(--strong-border); }
    .mobile-bottom a { display: flex; align-items: center; justify-content: center; min-height: 48px; font-size: 13px; }
    .mobile-bottom a.is-current { background: var(--copper); color: var(--ink); font-weight: 800; }
    .site-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 430px) {
    .old-edge, .copper-head { padding-left: 16px; padding-right: 16px; }
    .head-app-link, .drawer-toggle { padding: 0 10px; }
    .section { padding: 20px; }
    .jiumian-strip .media-slot { height: 180px; }
}