/* 黄猫书单 · @leto_bao 推荐的 3 本书 · 章节共享样式
   基于 lianyanshe.css 设计语言，扩展章节内组件 */

/* ─────────────── Layout ─────────────── */
.ls-chapter{display:grid;grid-template-columns:280px 1fr;min-height:100vh;position:relative;z-index:1}
@media (max-width:1024px){.ls-chapter{grid-template-columns:1fr}}

/* ─────────────── Top Header ─────────────── */
.ls-top-header{position:fixed;top:0;left:280px;right:0;height:64px;background:color-mix(in srgb,var(--bg-primary) 92%,transparent);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 40px;z-index:50;transition:left .3s}
@media (max-width:1024px){.ls-top-header{left:0;padding:0 24px}}
.ls-top-header-left{display:flex;align-items:center;gap:24px}
.ls-breadcrumb{font-size:13px;color:var(--text-muted);display:flex;align-items:center;gap:6px}
.ls-breadcrumb a{color:var(--text-secondary);text-decoration:none;transition:color .2s}
.ls-breadcrumb a:hover{color:var(--accent)}
.ls-breadcrumb-sep{margin:0 4px;opacity:.5}
.ls-breadcrumb .current{color:var(--text-primary);font-weight:500}
.ls-top-header-right{display:flex;align-items:center;gap:14px}

/* ─────────────── Sidebar ─────────────── */
.ls-sidebar{position:fixed;left:0;top:0;bottom:0;width:280px;background:var(--bg-secondary);border-right:1px solid var(--border);padding:24px 0;overflow-y:auto;z-index:40}
.ls-sidebar-head{padding:0 24px 18px;border-bottom:1px solid var(--border-light);margin-bottom:16px}
.ls-sidebar-head .brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:700;font-size:17px;color:var(--text-primary);letter-spacing:.3px}
.ls-sidebar-head .brand img{height:30px;width:auto;border-radius:5px}
.ls-sidebar-head .sub{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin-top:6px}
.ls-sidebar-nav{display:flex;flex-direction:column;padding:0 12px;gap:2px}
.ls-sidebar-section{margin-top:18px}
.ls-sidebar-section:first-of-type{margin-top:0}
.ls-sidebar-section-title{font-family:var(--serif);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);font-weight:600;padding:8px 14px 6px;margin:0}
.ls-nav-item{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:var(--radius-md);font-size:13px;color:var(--text-secondary);text-decoration:none;border-left:2px solid transparent;transition:background .2s,color .2s,border-color .2s}
.ls-nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.ls-nav-item.active{background:var(--bg-card);color:var(--accent);border-left-color:var(--accent);font-weight:500}
.ls-nav-item .num{font-family:var(--mono);font-size:10px;color:var(--text-muted);font-weight:600;width:22px}
.ls-nav-item.active .num{color:var(--accent)}
@media (max-width:1024px){.ls-sidebar{transform:translateX(-100%);transition:transform .3s}.ls-sidebar.open{transform:translateX(0)}}

/* ─────────────── Main content ─────────────── */
.ls-main{padding:88px 56px 80px 56px;max-width:1080px;margin-left:280px;width:calc(100% - 280px)}
@media (max-width:1024px){.ls-main{margin-left:0;width:100%;padding:80px 24px 64px}}

/* ─────────────── Chapter Hero ─────────────── */
.ls-chapter-hero{position:relative;padding:32px 0 40px;border-bottom:1px solid var(--border-light);margin-bottom:48px}
.ls-chapter-hero .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--accent-2);font-weight:600;margin-bottom:14px}
.ls-chapter-hero .eyebrow::before{content:"";width:28px;height:1px;background:var(--grad-line)}
.ls-chapter-hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(36px,5.5vw,56px);line-height:1.1;letter-spacing:-.8px;margin:0 0 14px;color:var(--text-primary)}
.ls-chapter-hero .book-en{font-family:var(--mono);font-size:13px;letter-spacing:2px;color:var(--text-muted);text-transform:uppercase;margin-bottom:20px}
.ls-chapter-hero .book-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px;padding-top:22px;border-top:1px dashed var(--border);font-size:12px;color:var(--text-muted);letter-spacing:1px}
.ls-chapter-hero .book-meta strong{color:var(--text-primary);font-weight:600;font-family:var(--serif);font-size:13px;display:block;margin-bottom:3px;letter-spacing:.5px}
.ls-chapter-hero .lede{margin:18px 0 0;color:var(--text-secondary);font-size:16px;line-height:1.85;max-width:680px}

/* ─────────────── Section / Chapter content ─────────────── */
.ls-chapter-content section{margin-bottom:64px;scroll-margin-top:80px}
.ls-chapter-content h2{font-family:var(--serif);font-weight:700;font-size:clamp(26px,3vw,32px);line-height:1.25;margin:0 0 8px;color:var(--text-primary);letter-spacing:-.3px;position:relative;padding-left:18px}
.ls-chapter-content h2::before{content:"";position:absolute;left:0;top:10px;width:4px;height:calc(100% - 18px);background:var(--accent);border-radius:2px}
.ls-chapter-content h2 .num{font-family:var(--mono);font-size:14px;color:var(--accent);letter-spacing:2px;margin-right:10px;font-weight:700;vertical-align:middle}
.ls-chapter-content h3{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.3;margin:36px 0 12px;color:var(--text-primary)}
.ls-chapter-content p{color:var(--text-secondary);font-size:15px;line-height:1.85;margin:14px 0}
.ls-chapter-content p.first::first-letter{font-family:var(--serif);font-size:48px;font-weight:700;float:left;line-height:1;padding:6px 10px 0 0;color:var(--accent)}
.ls-chapter-content strong{color:var(--text-primary);font-weight:600}
.ls-chapter-content em{color:var(--accent-2);font-style:italic}
.ls-chapter-content ul,.ls-chapter-content ol{padding-left:24px;margin:14px 0;color:var(--text-secondary)}
.ls-chapter-content li{margin:6px 0;line-height:1.85}
.ls-chapter-content li::marker{color:var(--accent)}
.ls-chapter-content blockquote{border-left:4px solid var(--accent);background:linear-gradient(90deg,rgba(184,118,58,.06),rgba(184,118,58,.02));border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:18px 22px;margin:20px 0;color:var(--text-secondary);font-family:var(--serif);font-size:16px;line-height:1.7;font-style:italic}
.ls-chapter-content blockquote cite{display:block;font-family:var(--sans);font-style:normal;font-size:12px;color:var(--text-muted);margin-top:10px;letter-spacing:1px}
.ls-chapter-content code{font-family:var(--mono);background:var(--bg-secondary);padding:.15rem .4rem;border-radius:var(--radius-sm);font-size:.9em;color:var(--accent-2)}
.ls-chapter-content pre{background:var(--bg-tertiary);border:1px solid var(--border);padding:1rem 1.25rem;border-radius:var(--radius-lg);overflow-x:auto;font-family:var(--mono);font-size:.85em;line-height:1.7;color:var(--text-primary)}

/* ─────────────── Highlight Boxes ─────────────── */
.ls-callout{background:var(--bg-tertiary);border:1px solid var(--border-light);border-left:4px solid var(--accent);border-radius:0 var(--radius-xl) var(--radius-xl) 0;padding:18px 22px;margin:20px 0;color:var(--text-secondary);font-size:14px;line-height:1.8}
.ls-callout strong{color:var(--text-primary)}
.ls-callout-info{border-left-color:var(--accent-info)}
.ls-callout-success{border-left-color:var(--accent-call)}
.ls-callout-warning{border-left-color:var(--accent-put)}
.ls-callout .label{font-family:var(--serif);font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:8px;display:inline-block}

/* ─────────────── Quote / Pull quote ─────────────── */
.ls-pullquote{position:relative;margin:36px 0;padding:32px 28px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);text-align:center}
.ls-pullquote::before{content:""—"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--bg-card);padding:0 12px;font-family:var(--serif);font-size:36px;color:var(--accent);line-height:1}
.ls-pullquote .pq-text{font-family:var(--serif);font-size:22px;line-height:1.5;color:var(--text-primary);font-weight:500;margin:0}
.ls-pullquote .pq-attr{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--text-muted);text-transform:uppercase;margin-top:14px;display:block}

/* ─────────────── Stat Row ─────────────── */
.ls-stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:24px 0}
.ls-stat{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 18px 16px;position:relative;overflow:hidden}
.ls-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,var(--accent))}
.ls-stat .stat-label{font-family:var(--serif);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.ls-stat .stat-value{font-family:var(--serif);font-size:28px;font-weight:700;color:var(--c,var(--accent));line-height:1.1;margin-bottom:6px}
.ls-stat .stat-desc{font-size:12px;color:var(--text-secondary);line-height:1.6}

/* ─────────────── Comparison table ─────────────── */
.ls-compare{margin:24px 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:680px){.ls-compare{grid-template-columns:1fr}}
.ls-compare .col{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;position:relative}
.ls-compare .col-head{font-family:var(--serif);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--c);margin-bottom:14px;padding-bottom:10px;border-bottom:1px dashed var(--border-light)}
.ls-compare .col-body p{margin:8px 0;color:var(--text-secondary);font-size:13.5px;line-height:1.7}
.ls-compare .col-body strong{color:var(--text-primary)}
.ls-vs-col{--c:#b8763a}
.ls-vs-col-2{--c:#2f7d6b}

/* ─────────────── SVG / Visual block ─────────────── */
.ls-visual{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:24px;margin:24px 0;overflow:hidden}
.ls-visual-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.ls-visual-title{font-family:var(--serif);font-weight:700;font-size:14px;color:var(--text-primary);letter-spacing:.3px}
.ls-visual-caption{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted)}
.ls-visual svg{display:block;width:100%;height:auto}
.ls-visual figcaption{margin-top:12px;font-size:12px;color:var(--text-muted);line-height:1.6;text-align:center}

/* ─────────────── Interactive tools ─────────────── */
.ls-tool{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:28px;margin:28px 0;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.ls-tool::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-line)}
.ls-tool-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;flex-wrap:wrap;gap:12px}
.ls-tool-title{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--text-primary)}
.ls-tool-tag{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent-2);padding:4px 10px;border-radius:var(--radius-full);font-size:11px;letter-spacing:1px;font-weight:600}
.ls-tool-desc{color:var(--text-secondary);font-size:13.5px;line-height:1.75;margin:6px 0 22px}

/* 输入控件 */
.ls-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media (max-width:680px){.ls-form-row{grid-template-columns:1fr}}
.ls-form-row.three{grid-template-columns:1fr 1fr 1fr}
@media (max-width:680px){.ls-form-row.three{grid-template-columns:1fr}}
.ls-form-field label{display:block;font-family:var(--serif);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;font-weight:600}
.ls-form-field input[type=number],.ls-form-field input[type=text],.ls-form-field select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-tertiary);font-family:var(--serif);font-size:14px;color:var(--text-primary);transition:border-color .2s}
.ls-form-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,118,58,.1)}
.ls-form-field .range-wrap{display:flex;align-items:center;gap:12px}
.ls-form-field input[type=range]{flex:1;-webkit-appearance:none;height:4px;background:var(--border);border-radius:2px;outline:none}
.ls-form-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid var(--bg-card);box-shadow:var(--shadow-sm);cursor:pointer}
.ls-form-field input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid var(--bg-card);cursor:pointer}
.ls-form-field .range-val{font-family:var(--serif);font-size:14px;color:var(--accent);font-weight:600;min-width:60px;text-align:right}

/* 输出区 */
.ls-result{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 22px;margin-top:18px}
.ls-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px;margin-top:12px}
.ls-result-item .ri-label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;font-family:var(--serif);font-weight:600}
.ls-result-item .ri-val{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--accent);line-height:1.1}
.ls-result-item .ri-sub{font-size:11.5px;color:var(--text-muted);margin-top:4px}

/* 工具内的 SVG 图表 */
.ls-tool-chart{margin-top:18px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:14px}

/* ─────────────── 概念卡片网格 ─────────────── */
.ls-concept-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:24px 0}
.ls-concept{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.ls-concept:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow-md)}
.ls-concept .concept-no{font-family:var(--mono);font-size:10px;color:var(--accent);font-weight:700;letter-spacing:1.5px;margin-bottom:8px}
.ls-concept .concept-title{font-family:var(--serif);font-weight:700;font-size:16px;line-height:1.3;color:var(--text-primary);margin-bottom:10px}
.ls-concept .concept-desc{font-size:13px;color:var(--text-secondary);line-height:1.75}
.ls-concept .concept-key{display:inline-block;margin-top:12px;padding:3px 8px;background:var(--accent-soft);color:var(--accent-2);border-radius:var(--radius-xs);font-size:11px;font-weight:600}

/* ─────────────── Timeline ─────────────── */
.ls-timeline{position:relative;padding:20px 0 20px 36px;margin:24px 0}
.ls-timeline::before{content:"";position:absolute;left:14px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--accent),var(--accent-2))}
.ls-timeline-item{position:relative;margin-bottom:28px;padding-left:18px}
.ls-timeline-item::before{content:"";position:absolute;left:-29px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--bg-card);border:3px solid var(--accent);box-shadow:0 0 0 3px var(--bg-primary)}
.ls-timeline-item .ti-year{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--accent);font-weight:700;margin-bottom:6px}
.ls-timeline-item .ti-title{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--text-primary);margin-bottom:6px}
.ls-timeline-item .ti-desc{font-size:13.5px;color:var(--text-secondary);line-height:1.75}

/* ─────────────── Key Takeaways ─────────────── */
.ls-takeaway{background:linear-gradient(135deg,rgba(184,118,58,.08),rgba(212,168,87,.04));border:1px solid var(--accent);border-radius:var(--radius-xl);padding:28px 30px;margin:36px 0;position:relative}
.ls-takeaway::before{content:"";position:absolute;top:0;left:0;bottom:0;width:6px;background:var(--grad-warm);border-radius:var(--radius-xl) 0 0 var(--radius-xl)}
.ls-takeaway h3{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--text-primary);margin:0 0 14px;letter-spacing:.3px}
.ls-takeaway ul{padding-left:20px;margin:8px 0 0}
.ls-takeaway li{font-size:14px;line-height:1.85;color:var(--text-secondary);margin:6px 0}
.ls-takeaway li::marker{color:var(--accent);font-weight:700}

/* ─────────────── Two column layout ─────────────── */
.ls-two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0}
@media (max-width:680px){.ls-two-col{grid-template-columns:1fr}}

/* ─────────────── Bottom nav ─────────────── */
.ls-chapter-nav{display:flex;justify-content:space-between;gap:16px;margin-top:64px;padding-top:32px;border-top:1px solid var(--border-light);flex-wrap:wrap}
.ls-chapter-nav a{flex:1;min-width:200px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 20px;text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s}
.ls-chapter-nav a:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-md)}
.ls-chapter-nav .nav-label{font-family:var(--serif);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:6px}
.ls-chapter-nav .nav-title{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--text-primary);margin-bottom:4px}
.ls-chapter-nav .nav-sub{font-size:12px;color:var(--text-muted)}
.ls-chapter-nav .next{text-align:right}

/* ─────────────── Mobile menu toggle ─────────────── */
.ls-mobile-toggle{display:none;position:fixed;top:12px;left:12px;z-index:60;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);align-items:center;justify-content:center}
@media (max-width:1024px){.ls-mobile-toggle{display:flex}}
.ls-mobile-toggle svg{width:18px;height:18px;color:var(--text-primary)}