/* ==========================================
   孙子兵法 · 大白话全文解读 - 样式表
   设计风格：水墨古典 × 现代精品
   ========================================== */
:root {
    --ink: #1a1a1a;
    --ink-dark: #2d2d2d;
    --ink-mid: #555;
    --ink-light: #888;
    --parchment: #f5f0e8;
    --parchment-light: #faf7f2;
    --gold: #c4a35a;
    --gold-light: #d4b87a;
    --gold-dark: #9e7d3a;
    --vermilion: #c0392b;
    --jade: #2c6e49;
    --font-display: 'Ma Shan Zheng', cursive;
    --font-heading: 'ZCOOL XiaoWei', serif;
    --font-body: 'Noto Serif SC', serif;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.07);
    --shadow-md: 0 8px 32px rgba(0,0,0,0.12);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.15);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
    font-family: var(--font-body);
    background: var(--parchment);
    color: var(--ink);
    line-height: 1.8;
    overflow-x: hidden;
}
img { max-width:100%; display:block; }

/* Canvas Background */
#ink-canvas {
    position:fixed; top:0; left:0; width:100%; height:100%;
    pointer-events:none; z-index:0; opacity:0.12;
}

/* NAV */
.nav {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 3rem; transition:all .35s var(--ease);
}
.nav.scrolled {
    background:rgba(245,240,232,0.96);
    backdrop-filter:blur(12px);
    box-shadow:var(--shadow-sm);
    padding:.7rem 3rem;
}
.nav-brand { display:flex; align-items:center; gap:.8rem; }
.nav-seal {
    width:36px; height:36px; background:var(--vermilion); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-size:1.1rem;
    border-radius:4px; transform:rotate(-3deg);
    box-shadow:2px 2px 6px rgba(192,57,43,.35);
}
.nav-title { font-family:var(--font-heading); font-size:1.15rem; letter-spacing:.1em; }
.nav-links { display:flex; gap:2.5rem; }
.nav-link {
    text-decoration:none; color:var(--ink-mid); font-size:.9rem;
    letter-spacing:.05em; position:relative; transition:color .25s;
}
.nav-link::after {
    content:''; position:absolute; bottom:-3px; left:0;
    width:0; height:2px; background:var(--gold); transition:width .3s var(--ease);
}
.nav-link:hover,.nav-link.active { color:var(--ink); }
.nav-link:hover::after,.nav-link.active::after { width:100%; }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.nav-toggle span { width:24px; height:2px; background:var(--ink); transition:.3s; }

/* HERO */
.hero {
    position:relative; min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    background:
        radial-gradient(ellipse at 15% 60%, rgba(196,163,90,.1) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 20%, rgba(192,57,43,.07) 0%, transparent 45%),
        linear-gradient(160deg, #1a1a1a 0%, #2d2418 40%, #3a2e1a 100%);
}
.hero-overlay {
    position:absolute; inset:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 60 Q30 40 60 60 T120 60' fill='none' stroke='%23c4a35a' stroke-width='.4' opacity='.12'/%3E%3Cpath d='M60 0 Q80 30 60 60 T60 120' fill='none' stroke='%23c4a35a' stroke-width='.3' opacity='.08'/%3E%3C/svg%3E") repeat;
}
.hero-content { position:relative; z-index:2; text-align:center; padding:2rem; animation:fadeInUp 1.2s ease-out; }
.hero-seal-wrapper { margin-bottom:2rem; }
.hero-seal {
    display:inline-block; font-family:var(--font-display);
    font-size:3.2rem; color:var(--vermilion);
    border:3px solid var(--vermilion); padding:.7rem 1.1rem;
    letter-spacing:.35em; transform:rotate(-2deg);
    animation:sealStamp .9s ease-out .4s both;
    box-shadow:inset 0 0 0 3px rgba(192,57,43,.15), 4px 4px 12px rgba(0,0,0,.4);
    background:rgba(192,57,43,.06);
}
.hero-seal::before { content:''; position:absolute; inset:5px; border:1px solid var(--vermilion); opacity:.4; }
.hero-title { margin-bottom:1.5rem; }
.hero-title-line {
    display:block; font-family:var(--font-heading);
    font-size:2.6rem; font-weight:700; letter-spacing:.18em;
    color:var(--parchment); animation:fadeInUp 1s ease-out .8s both;
}
.hero-title-sub {
    font-size:1.2rem; font-weight:400; color:var(--gold-light);
    letter-spacing:.1em; margin-top:.5rem;
    animation:fadeInUp 1s ease-out 1s both;
}
.hero-desc { font-size:1rem; color:rgba(245,240,232,.6); margin-bottom:2.5rem; animation:fadeInUp 1s ease-out 1.2s both; }
.hero-actions { display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; animation:fadeInUp 1s ease-out 1.4s both; }
.btn {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.85rem 1.8rem; border-radius:4px;
    font-family:var(--font-body); font-size:.95rem;
    text-decoration:none; cursor:pointer; transition:all .25s var(--ease); border:none;
}
.btn-primary { background:var(--gold); color:var(--ink); font-weight:600; }
.btn-primary:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-secondary { background:transparent; color:var(--parchment); border:1.5px solid rgba(245,240,232,.5); }
.btn-secondary:hover { background:rgba(245,240,232,.1); border-color:var(--parchment); }
.hero-scroll-hint {
    position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:.5rem;
    color:rgba(245,240,232,.4); font-size:.75rem; letter-spacing:.15em;
    animation:fadeInUp 1s ease-out 2s both;
}
.scroll-arrow { width:1px; height:40px; background:linear-gradient(to bottom,rgba(245,240,232,.4),transparent); animation:scrollBounce 2s ease-in-out infinite; }

/* TOC 目录 */
.toc-section { position:relative; z-index:1; padding:6rem 3rem; max-width:1300px; margin:0 auto; }
.section-header { text-align:center; margin-bottom:3.5rem; }
.section-number { display:block; font-family:var(--font-display); font-size:3rem; color:var(--gold); opacity:.5; margin-bottom:.3rem; }
.section-title { font-family:var(--font-heading); font-size:2rem; letter-spacing:.15em; }
.section-subtitle { font-size:.9rem; color:var(--ink-light); margin-top:.4rem; }
.toc-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:1rem;
}
.toc-card {
    display:flex; align-items:center; gap:1rem;
    padding:1.2rem 1.5rem; background:#fff; border-radius:8px;
    text-decoration:none; color:var(--ink); cursor:pointer;
    border:1px solid rgba(0,0,0,.05); transition:all .25s var(--ease);
    position:relative; overflow:hidden;
}
.toc-card::before {
    content:''; position:absolute; left:0; top:0; bottom:0;
    width:3px; background:var(--gold); transform:scaleY(0); transform-origin:bottom; transition:.35s;
}
.toc-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); color:var(--ink); }
.toc-card:hover::before { transform:scaleY(1); }
.toc-num { font-family:var(--font-display); font-size:1.5rem; color:var(--gold); opacity:.4; min-width:2.5rem; }
.toc-info { flex:1; }
.toc-name { font-family:var(--font-heading); font-size:1.05rem; letter-spacing:.06em; }
.toc-brief { font-size:.75rem; color:var(--ink-light); margin-top:.2rem; }
.toc-icon { font-size:1rem; opacity:.3; }

/* CHAPTER SECTION */
.chapter-section {
    position:relative; z-index:1;
    border-bottom:1px solid rgba(0,0,0,.06);
}
.chapter-section:nth-child(even) { background:var(--parchment-light); }
.chapter-section:nth-child(odd) { background:#fff; }

.chapter-hero {
    position:relative; height:340px; overflow:hidden;
    display:flex; align-items:flex-end;
}
.chapter-hero-img {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center;
    transition:transform .6s ease;
}
.chapter-section:hover .chapter-hero-img { transform:scale(1.03); }
.chapter-hero-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(26,26,26,.9) 0%, rgba(26,26,26,.3) 50%, transparent 100%);
}
.chapter-hero-info {
    position:relative; z-index:2;
    padding:2rem 3rem 2.5rem; width:100%;
}
.chapter-badge {
    display:inline-flex; align-items:center; gap:.6rem;
    font-family:var(--font-display); font-size:.85rem;
    color:var(--gold); letter-spacing:.1em; margin-bottom:.6rem;
}
.chapter-badge-dot { width:6px; height:6px; border-radius:50%; background:var(--gold); }
.chapter-hero-title {
    font-family:var(--font-heading); font-size:2.2rem;
    color:#fff; letter-spacing:.15em; display:flex; align-items:baseline; gap:1rem;
}
.chapter-hero-num { font-family:var(--font-display); font-size:1.2rem; color:var(--gold); opacity:.7; }
.chapter-hero-sub { font-size:1rem; color:rgba(255,255,255,.6); font-weight:400; letter-spacing:.05em; }

/* 章节内容 */
.chapter-body { max-width:1100px; margin:0 auto; padding:3rem 3rem 4rem; }

/* 精选名句 */
.highlight-quote {
    background:linear-gradient(135deg, rgba(196,163,90,.12) 0%, rgba(196,163,90,.04) 100%);
    border-left:4px solid var(--gold);
    border-radius:0 12px 12px 0;
    padding:1.8rem 2rem; margin-bottom:2.5rem;
    position:relative; overflow:hidden;
}
.highlight-quote::before {
    content:'"'; position:absolute; top:-1rem; left:1rem;
    font-family:var(--font-display); font-size:6rem; color:var(--gold); opacity:.12; line-height:1;
}
.highlight-quote-text {
    font-family:var(--font-display); font-size:1.5rem;
    color:var(--ink); letter-spacing:.15em; line-height:2; position:relative; z-index:1;
}
.highlight-quote-trans {
    font-size:.95rem; color:var(--ink-mid); margin-top:.6rem;
    padding-top:.6rem; border-top:1px dashed rgba(196,163,90,.3);
}

/* ── 原文内容块（重设计，原文+白话对照） ── */
.original-text-block {
    display: none;
    margin-top: 1.2rem;
    margin-bottom: .5rem;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(196,163,90,.2);
    box-shadow: var(--shadow-sm);
}
.original-text-block.visible {
    display: block;
    animation: slideDown .35s ease;
}

/* 标题栏 */
.original-text-block::before {
    content: '';
    display: none; /* 标题改由 HTML 内 header 承担 */
}

/* 每段：原文 + 白话一行 */
.full-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid rgba(196,163,90,.1);
}
.full-row:last-child { border-bottom: none; }

.full-src, .full-plain {
    padding: 1.1rem 1.6rem;
    font-size: .95rem;
    line-height: 1.9;
}

/* 左列：原文 */
.full-src {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--ink-dark);
    background: rgba(196,163,90,.06);
    border-right: 1px solid rgba(196,163,90,.15);
    position: relative;
}
.full-src::before {
    content: '原文';
    display: block;
    font-size: .68rem;
    color: var(--gold-dark);
    letter-spacing: .12em;
    font-family: var(--font-body);
    margin-bottom: .4rem;
    font-weight: 700;
}

/* 右列：白话 */
.full-plain {
    font-family: var(--font-body);
    color: var(--ink-mid);
    background: var(--parchment-light);
    position: relative;
}
.full-plain::before {
    content: '白话';
    display: block;
    font-size: .68rem;
    color: var(--jade);
    letter-spacing: .12em;
    margin-bottom: .4rem;
    font-weight: 700;
}

/* 标题栏已移除 */

@media (max-width: 768px) {
    .full-row { grid-template-columns: 1fr; }
    .full-src  { border-right: none; border-bottom: 1px solid rgba(196,163,90,.12); }
}

/* ── 查看全文按钮 ── */
.original-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.2rem .55rem 1rem;
    background: var(--parchment);
    border: 1.5px solid rgba(196,163,90,.5);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: .85rem;
    color: var(--gold-dark);
    cursor: pointer;
    transition: all .25s var(--ease);
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: .04em;
}
.original-toggle-btn:hover {
    background: rgba(196,163,90,.12);
    border-color: var(--gold);
    color: var(--gold-dark);
    box-shadow: 0 2px 8px rgba(196,163,90,.2);
}
.original-toggle-btn.open {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--gold-light);
}
.original-toggle-btn svg {
    transition: transform .3s var(--ease);
    flex-shrink: 0;
}
.original-toggle-btn.open svg { transform: rotate(180deg); }

/* ── 原文内容块（重设计） ── */
.original-text-block {
    display: none;
    margin-top: 1.2rem;
    margin-bottom: .5rem;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(196,163,90,.2);
    box-shadow: var(--shadow-sm);
}
.original-text-block.visible {
    display: block;
    animation: slideDown .35s ease;
}

/* 全文顶部标题栏 */
.original-text-block::before {
    content: '原　文';
    display: block;
    padding: .65rem 1.8rem;
    background: linear-gradient(90deg, var(--ink) 0%, #2a2010 100%);
    font-family: var(--font-display);
    font-size: .88rem;
    letter-spacing: .4em;
    color: var(--gold);
    border-bottom: 1px solid rgba(196,163,90,.2);
}

.original-text-block p {
    font-family: var(--font-display);
    font-size: 1.02rem;
    line-height: 2.4;
    color: var(--ink-dark);
    text-indent: 2em;
    padding: .3rem 1.8rem;
    background: rgba(196,163,90,.04);
}
.original-text-block p:first-of-type { padding-top: 1.2rem; }
.original-text-block p:last-of-type  { padding-bottom: 1.4rem; }

/* 内容面板：图文并排 */
.content-panels {
    display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; margin-bottom:2.5rem;
}
.content-panels.reverse { direction:rtl; }
.content-panels.reverse > * { direction:ltr; }
.panel-img-wrap {
    border-radius:12px; overflow:hidden; box-shadow:var(--shadow-md);
    position:relative; height:280px;
}
.panel-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.panel-img-wrap:hover img { transform:scale(1.05); }
.panel-img-caption {
    position:absolute; bottom:0; left:0; right:0;
    background:linear-gradient(transparent, rgba(0,0,0,.7));
    color:rgba(255,255,255,.85); font-size:.78rem;
    padding:.8rem 1rem; letter-spacing:.04em;
}
.panel-text h4 {
    font-family:var(--font-heading); font-size:1.15rem;
    color:var(--ink); margin-bottom:.8rem; letter-spacing:.06em;
    padding-bottom:.5rem; border-bottom:2px solid var(--gold);
    display:inline-block;
}
.panel-text p { font-size:.97rem; color:var(--ink-dark); line-height:2; margin-bottom:1rem; }
.panel-text p:last-child { margin-bottom:0; }
.panel-text .keyword {
    display:inline; background:rgba(196,163,90,.15);
    border-radius:3px; padding:0 .3em; color:var(--gold-dark); font-weight:600;
}

/* ── 职场应用卡片（重设计） ── */
.workplace-card {
    border-radius: 14px;
    margin-bottom: 2rem;
    overflow: hidden;
    border: 1px solid rgba(196,163,90,.22);
    box-shadow: var(--shadow-sm);
}

/* 标题栏 */
.workplace-card-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.1rem 1.8rem;
    background: linear-gradient(90deg, var(--ink) 0%, #2a2010 100%);
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--gold-light);
    letter-spacing: .08em;
    border-bottom: 1px solid rgba(196,163,90,.2);
}
.workplace-icon { font-size: 1.25rem; line-height: 1; }

/* 场景网格 */
.workplace-scenarios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: var(--parchment-light);
}
.scenario-item {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.4rem 1.5rem;
    border-right: 1px solid rgba(196,163,90,.15);
    transition: background .2s;
}
.scenario-item:last-child { border-right: none; }
.scenario-item:hover { background: rgba(196,163,90,.06); }

.scenario-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: .2rem .8rem;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    background: var(--ink);
    color: var(--gold);
    border: 1px solid rgba(196,163,90,.3);
}
.scenario-text {
    font-size: .88rem;
    color: var(--ink-dark);
    line-height: 1.75;
}

@media (max-width: 768px) {
    .workplace-scenarios { grid-template-columns: 1fr; }
    .scenario-item { border-right: none; border-bottom: 1px solid rgba(196,163,90,.12); }
    .scenario-item:last-child { border-bottom: none; }
}

/* ── 底部操作行（音频 + 全文） ── */
.audio-row {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.4rem 0 0;
    border-top: 1px solid rgba(0,0,0,.07);
    flex-wrap: wrap;
}
.audio-label {
    font-size: .8rem;
    color: var(--ink-light);
    min-width: 0;
}
.btn-audio {
    display:inline-flex; align-items:center; gap:.6rem;
    padding:.65rem 1.5rem; background:var(--ink); color:var(--parchment);
    border:none; border-radius:30px; cursor:pointer;
    font-family:var(--font-body); font-size:.88rem; transition:all .25s;
}
.btn-audio:hover { background:var(--ink-dark); transform:scale(1.03); }
.btn-audio.playing { background:var(--vermilion); }
.btn-audio .audio-wave { display:none; gap:2px; align-items:center; }
.btn-audio.playing .audio-wave { display:flex; }
.btn-audio.playing .audio-icon { display:none; }
.audio-bar {
    width:3px; background:currentColor; border-radius:2px;
    animation:audioWave .6s ease-in-out infinite;
}
.audio-bar:nth-child(1) { height:8px; animation-delay:0s; }
.audio-bar:nth-child(2) { height:14px; animation-delay:.1s; }
.audio-bar:nth-child(3) { height:10px; animation-delay:.2s; }
.audio-bar:nth-child(4) { height:16px; animation-delay:.3s; }
.audio-bar:nth-child(5) { height:8px; animation-delay:.4s; }
.audio-label { font-size:.85rem; color:var(--ink-light); }

/* 名言轮播 */
.quotes-section {
    position:relative; z-index:1; padding:7rem 3rem;
    background:linear-gradient(135deg, var(--ink) 0%, #2d2418 100%);
    overflow:hidden;
}
.quotes-bg-pattern {
    position:absolute; inset:0; opacity:.04;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='20' fill='none' stroke='%23c4a35a' stroke-width='1'/%3E%3C/svg%3E") repeat;
}
.quotes-inner { max-width:750px; margin:0 auto; position:relative; z-index:2; }
.quotes-header { text-align:center; margin-bottom:3rem; }
.quotes-header .section-title { color:var(--parchment); }
.quotes-header .section-number { color:var(--gold); }
.quotes-carousel { position:relative; min-height:220px; }
.quote-slide {
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; opacity:0; transform:translateY(20px);
    transition:all .6s var(--ease); pointer-events:none;
}
.quote-slide.active { opacity:1; transform:translateY(0); pointer-events:auto; }
.quote-mark { font-family:var(--font-display); font-size:5rem; color:var(--gold); opacity:.2; line-height:.8; margin-bottom:.5rem; }
.quote-original { font-family:var(--font-display); font-size:2rem; color:var(--parchment); letter-spacing:.2em; margin-bottom:1rem; }
.quote-plain { font-size:1rem; color:rgba(245,240,232,.7); max-width:500px; line-height:1.9; margin-bottom:.8rem; }
.quote-from { font-size:.82rem; color:var(--gold); letter-spacing:.1em; }
.quotes-nav {
    display:flex; justify-content:center; gap:.8rem; margin-top:2.5rem;
}
.q-dot {
    width:8px; height:8px; border-radius:50%;
    background:rgba(245,240,232,.25); cursor:pointer; transition:.25s;
}
.q-dot.active { background:var(--gold); transform:scale(1.4); }

/* ABOUT */
.about-section { position:relative; z-index:1; padding:6rem 3rem; max-width:1000px; margin:0 auto; }
.about-content { display:grid; grid-template-columns:2fr 1fr; gap:4rem; align-items:start; }
.about-text p { margin-bottom:1.2rem; color:var(--ink-dark); line-height:2; }
.about-stats { display:flex; flex-direction:column; gap:1.5rem; }
.stat-item {
    text-align:center; padding:1.5rem;
    background:#fff; border-radius:10px;
    box-shadow:var(--shadow-sm); border:1px solid rgba(0,0,0,.04);
}
.stat-number { display:block; font-family:var(--font-display); font-size:2.5rem; color:var(--gold-dark); }
.stat-label { font-size:.82rem; color:var(--ink-light); letter-spacing:.1em; }

/* FOOTER */
.footer { position:relative; z-index:1; background:var(--ink); color:var(--parchment); padding:3rem; text-align:center; }
.footer-content { max-width:600px; margin:0 auto; }
.footer-brand { display:flex; align-items:center; justify-content:center; gap:.8rem; margin-bottom:.8rem; font-family:var(--font-heading); letter-spacing:.1em; }
.footer-seal { width:26px; height:26px; background:var(--vermilion); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:.85rem; border-radius:3px; }
.footer-copy { font-size:.82rem; color:var(--ink-light); }
/* 导航栏在线人数 */
.nav-online { display:inline-flex; align-items:center; gap:.38rem; padding:.28rem .7rem; border:1px solid rgba(196,163,90,.3); border-radius:20px; font-size:.78rem; color:rgba(245,240,232,.7); background:rgba(0,0,0,.18); backdrop-filter:blur(6px); white-space:nowrap; }
.nav.scrolled .nav-online { color:var(--ink-mid); background:rgba(245,240,232,.6); border-color:rgba(196,163,90,.25); }
.online-dot { width:6px; height:6px; border-radius:50%; background:#666; transition:background .4s; flex-shrink:0; }
.online-dot.online { background:#4caf50; box-shadow:0 0 0 3px rgba(76,175,80,.2); animation:pulse-dot 2s ease-in-out infinite; }
.online-label { opacity:.7; }
#online-count { font-family:var(--font-heading); color:var(--gold); letter-spacing:.04em; min-width:1.4em; text-align:center; }
.nav.scrolled #online-count { color:var(--gold-dark); }
@keyframes pulse-dot { 0%,100%{box-shadow:0 0 0 3px rgba(76,175,80,.2);} 50%{box-shadow:0 0 0 5px rgba(76,175,80,.08);} }

/* BACK TO TOP */
.back-to-top {
    position:fixed; bottom:2rem; right:2rem; z-index:900;
    width:46px; height:46px; background:var(--ink); color:var(--parchment);
    border:none; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow-md); transition:all .25s;
    opacity:0; transform:translateY(10px); pointer-events:none;
}
.back-to-top.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.back-to-top:hover { background:var(--gold-dark); transform:translateY(-3px); }

/* FADE-IN ANIMATION */
.fade-in { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ANIMATIONS */
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(30px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes sealStamp {
    0%   { opacity:0; transform:rotate(-2deg) scale(1.6); }
    60%  { opacity:1; transform:rotate(-2deg) scale(.94); }
    100% { opacity:1; transform:rotate(-2deg) scale(1); }
}
@keyframes scrollBounce {
    0%,100% { transform:translateY(0); opacity:.4; }
    50%      { transform:translateY(10px); opacity:1; }
}
@keyframes slideDown {
    from { opacity:0; transform:translateY(-10px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes audioWave {
    0%,100% { transform:scaleY(1); }
    50%      { transform:scaleY(.4); }
}

/* RESPONSIVE */
@media(max-width:1024px) {
    .content-panels { grid-template-columns:1fr; }
    .content-panels.reverse { direction:ltr; }
    .panel-img-wrap { height:220px; }
}
@media(max-width:768px) {
    .nav { padding:1rem 1.5rem; }
    .nav.scrolled { padding:.7rem 1.5rem; }
    .nav-links {
        position:fixed; top:0; right:-100%; width:72%; height:100vh;
        background:var(--parchment); flex-direction:column; align-items:center;
        justify-content:center; gap:2rem; transition:right .4s ease; box-shadow:var(--shadow-lg);
        z-index:999;
    }
    .nav-links.open { right:0; }
    .nav-toggle { display:flex; z-index:1001; }
    .hero-seal { font-size:2.4rem; }
    .hero-title-line { font-size:1.8rem; }
    .hero-title-sub { font-size:1rem; }
    .toc-section,.chapter-body,.about-section { padding-left:1.5rem; padding-right:1.5rem; }
    .chapter-hero { height:240px; }
    .chapter-hero-info { padding:1.5rem; }
    .chapter-hero-title { font-size:1.6rem; }
    .about-content { grid-template-columns:1fr; gap:2rem; }
    .about-stats { flex-direction:row; justify-content:center; flex-wrap:wrap; }
    .quotes-section { padding:5rem 1.5rem; }
    .quote-original { font-size:1.6rem; }
}
@media(max-width:480px) {
    .hero-title-line { font-size:1.4rem; }
    .toc-grid { grid-template-columns:1fr 1fr; }
    .toc-card { padding:1rem; }
    .chapter-body { padding:2rem 1.2rem; }
}

/* 图片加载失败占位 */
.chapter-hero-img[src=""], .panel-img-wrap img[src=""] {
    background: linear-gradient(135deg, #2d2d2d 0%, #3a3520 100%);
}

/* 精选名句间距 */
.highlight-quote + .highlight-quote { margin-top: -0.5rem; }

/* 章节内容区段间距 */
.chapter-body .content-panels:first-of-type { margin-top: 1.5rem; }
.chapter-body .content-panels { margin-bottom: .5rem; }
.chapter-body .workplace-card { margin-top: 1rem; }

/* ==========================================
   YouTube 视频区
   ========================================== */
.yt-section {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, var(--ink) 0%, #1e180e 100%);
    padding: 5rem 3rem 6rem;
}
.yt-section .section-number { color: var(--gold); }
.yt-section .section-title  { color: var(--parchment); }
.yt-section .section-subtitle { color: rgba(245,240,232,.45); }

.yt-inner {
    max-width: 960px;
    margin: 0 auto;
}

/* 16:9 响应式容器 */
.yt-embed-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;   /* 16:9 */
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(196,163,90,.25),
        0 24px 80px rgba(0,0,0,.6);
    background: #000;
    /* 微微金色描边光晕 */
    outline: 2px solid rgba(196,163,90,.15);
    outline-offset: 6px;
}

.yt-embed-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 768px) {
    .yt-section { padding: 4rem 1.5rem; }
}

/* ==========================================
   AI 配置 & 解读模块
   ========================================== */

/* 导航 AI 按钮 */
.nav-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem 1rem;
    background: rgba(196,163,90,.12);
    border: 1.5px solid rgba(196,163,90,.35);
    border-radius: 20px;
    color: var(--gold-dark);
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s var(--ease);
    white-space: nowrap;
    margin-left: .5rem;
}
.nav-ai-btn:hover {
    background: rgba(196,163,90,.22);
    border-color: var(--gold);
    color: var(--gold-dark);
}
.nav-ai-btn.ai-configured {
    background: var(--jade);
    border-color: var(--jade-light);
    color: #fff;
}
.nav.scrolled .nav-ai-btn { /* 滚动后保持可见 */ }

/* AI 解读按钮（章节内） */
.btn-ai-read {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .52rem 1.1rem;
    background: linear-gradient(135deg, #1a3a2a 0%, #0f2a1e 100%);
    border: 1.5px solid rgba(44,110,73,.5);
    border-radius: 6px;
    color: #6fcf97;
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s var(--ease);
    white-space: nowrap;
    letter-spacing: .03em;
}
.btn-ai-read:hover {
    background: linear-gradient(135deg, #1e4a35 0%, #163523 100%);
    border-color: var(--jade);
    color: #a8e6c0;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(44,110,73,.3);
}

/* ── 遮罩层（配置面板 & 抽屉共用） ── */
.ai-config-overlay,
.ai-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26,26,26,.55);
    backdrop-filter: blur(3px);
    z-index: 1500;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.ai-config-overlay.open,
.ai-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* ── AI 配置面板 ── */
.ai-config-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%) scale(.96);
    width: min(460px, 92vw);
    background: var(--parchment-light);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    z-index: 1600;
    opacity: 0;
    pointer-events: none;
    transition: all .3s var(--ease);
    border: 1px solid rgba(196,163,90,.2);
}
.ai-config-panel.open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.ai-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.6rem;
    background: linear-gradient(90deg, var(--ink) 0%, #2a2010 100%);
    border-radius: 14px 14px 0 0;
    border-bottom: 1px solid rgba(196,163,90,.2);
}
.ai-config-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-heading);
    font-size: .95rem;
    color: var(--gold-light);
    letter-spacing: .06em;
}
.ai-config-close {
    background: none;
    border: none;
    color: var(--ink-light);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 .2rem;
    transition: color .2s;
}
.ai-config-close:hover { color: var(--parchment); }

.ai-config-body {
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.ai-form-group {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.ai-form-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-mid);
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ai-form-hint a {
    font-size: .78rem;
    color: var(--jade);
    text-decoration: none;
    font-weight: 400;
}
.ai-form-hint a:hover { text-decoration: underline; }

.ai-key-wrap {
    position: relative;
    display: flex;
}
.ai-form-input {
    width: 100%;
    padding: .65rem .9rem;
    border: 1.5px solid rgba(0,0,0,.12);
    border-radius: 7px;
    font-family: var(--font-body);
    font-size: .88rem;
    color: var(--ink);
    background: #fff;
    transition: border-color .2s;
    appearance: none;
}
.ai-form-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(196,163,90,.12);
}
.ai-key-wrap .ai-form-input { padding-right: 2.8rem; }
.ai-key-toggle {
    position: absolute;
    right: .8rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-light);
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}
.ai-key-toggle:hover { color: var(--ink); }

.ai-status {
    min-height: 1.4rem;
    font-size: .82rem;
    border-radius: 6px;
    padding: 0;
    transition: all .2s;
}
.ai-status-success { color: var(--jade); background: rgba(44,110,73,.08); padding: .45rem .8rem; }
.ai-status-error   { color: var(--vermilion); background: rgba(192,57,43,.08); padding: .45rem .8rem; }
.ai-status-loading { color: var(--gold-dark); background: rgba(196,163,90,.1); padding: .45rem .8rem; }

.ai-form-actions {
    display: flex;
    gap: .8rem;
    justify-content: flex-end;
    padding-top: .3rem;
}
.ai-btn-test, .ai-btn-save {
    padding: .6rem 1.3rem;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    border: none;
}
.ai-btn-test {
    background: var(--parchment);
    border: 1.5px solid rgba(0,0,0,.15);
    color: var(--ink-mid);
}
.ai-btn-test:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-dark); }
.ai-btn-test:disabled { opacity: .5; cursor: not-allowed; }
.ai-btn-save {
    background: var(--ink);
    color: var(--parchment);
}
.ai-btn-save:hover { background: var(--gold-dark); }

/* ── AI 解读抽屉（右侧滑入） ── */
.ai-drawer {
    position: fixed;
    top: 0;
    right: -600px;
    width: min(560px, 95vw);
    height: 100vh;
    background: var(--parchment-light);
    z-index: 1600;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 40px rgba(0,0,0,.2);
    transition: right .4s var(--ease);
    border-left: 1px solid rgba(196,163,90,.2);
}
.ai-drawer.open { right: 0; }

.ai-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.6rem;
    background: linear-gradient(90deg, var(--ink) 0%, #1a3a2a 100%);
    border-bottom: 1px solid rgba(44,110,73,.3);
    flex-shrink: 0;
}
.ai-drawer-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: #6fcf97;
    letter-spacing: .08em;
}
.ai-drawer-close {
    background: none;
    border: none;
    color: rgba(255,255,255,.5);
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 .2rem;
    transition: color .2s;
}
.ai-drawer-close:hover { color: #fff; }

.ai-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.8rem 2rem;
    scroll-behavior: smooth;
}

/* 加载动画 */
.ai-thinking {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--ink-light);
    font-size: .9rem;
    padding: 1rem 0;
}
.ai-thinking-dots {
    display: flex;
    gap: 4px;
}
.ai-thinking-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--jade);
    animation: aiDot .9s ease-in-out infinite;
}
.ai-thinking-dots span:nth-child(2) { animation-delay: .2s; }
.ai-thinking-dots span:nth-child(3) { animation-delay: .4s; }

@keyframes aiDot {
    0%,80%,100% { transform: scale(.6); opacity: .4; }
    40%          { transform: scale(1); opacity: 1; }
}

/* AI 结果区 Markdown 样式 */
.ai-result { line-height: 1.85; color: var(--ink-dark); }
.ai-md-h {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--ink);
    margin: 1.4rem 0 .5rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid rgba(196,163,90,.25);
    letter-spacing: .05em;
}
.ai-md-h:first-child { margin-top: 0; }
.ai-md-p {
    margin-bottom: .9rem;
    font-size: .95rem;
}
.ai-result ul {
    padding-left: 1.4rem;
    margin: .5rem 0 1rem;
}
.ai-result li {
    margin-bottom: .45rem;
    font-size: .93rem;
}
.ai-result strong {
    color: var(--ink);
    font-weight: 700;
}
.ai-error {
    padding: 1rem 1.2rem;
    background: rgba(192,57,43,.07);
    border: 1px solid rgba(192,57,43,.2);
    border-radius: 8px;
    color: var(--vermilion);
    font-size: .88rem;
    line-height: 1.7;
}
.ai-error a { color: var(--jade); }

@media (max-width: 768px) {
    .nav-ai-btn { padding: .4rem .7rem; font-size: .78rem; }
    .nav-online .online-label { display: none; }
    .nav-online { padding: .28rem .5rem; gap:.3rem; }
    .ai-drawer-body { padding: 1.4rem 1.2rem; }
}