/* ========== 基础变量（中古/侘寂） ========== */
:root{
  --bg:#F5F1EA; --bg-2:#EFE9DD; --surface:#FFFBF5; --surface-2:#FAF4E8;
  --fg:#2A2520; --fg-2:#4A453E; --fg-3:#8B8378;
  --border:#E5DDD0; --border-strong:#D4C9B6;
  --accent:#C2571F; --accent-2:#A3481C; --accent-soft:#F5E3D3;
  --success:#2D7D3A; --success-soft:#DCEEDF;
  --warning:#B8730A; --warning-soft:#FBE9C8;
  --danger:#C73E1D; --danger-soft:#FADBD0;
  --info:#1E5F8E; --info-soft:#D6E5EE;
  --pro:#6B3FA0; --pro-soft:#E9DEF2;
  --shadow:0 1px 2px rgba(40,28,12,.05),0 4px 14px rgba(40,28,12,.06);
  --shadow-lg:0 8px 32px rgba(40,28,12,.12);
  --radius:14px; --radius-sm:9px;
  --serif:"Songti SC","STSong","Noto Serif SC","SimSun",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:Consolas,"Courier New",monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"]{
  --bg:#14110D; --bg-2:#1B1712; --surface:#211C16; --surface-2:#282219;
  --fg:#F0E9DC; --fg-2:#B8AC9A; --fg-3:#7E7061;
  --border:#322B20; --border-strong:#45392A;
  --accent:#E07A3F; --accent-2:#F08C4F; --accent-soft:#3A2417;
  --success:#5CB565; --success-soft:#1B3320;
  --warning:#E0A63C; --warning-soft:#332A14;
  --danger:#E0593C; --danger-soft:#3A1A15;
  --info:#5BA3D0; --info-soft:#15273A;
  --pro:#A878D8; --pro-soft:#2A1F3A;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.3);
  --shadow-lg:0 8px 32px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--fg);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;transition:background .3s ease,color .3s ease}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px;color:var(--fg)}
.mono{font-family:var(--mono);font-feature-settings:"tnum"}
.serif{font-family:var(--serif)}

/* 背景颗粒（纸感） */
.bg-grain{position:fixed;inset:0;pointer-events:none;z-index:0}
.bg-grain::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% -10%,var(--accent-soft) 0%,transparent 55%);opacity:.55}
.bg-grain::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.6}

/* ========== 布局 ========== */
.app{display:flex;min-height:100vh;position:relative;z-index:1}
.sidebar{width:216px;flex:none;background:var(--surface);border-right:1px solid var(--border);padding:22px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:12px;padding:2px 8px 24px}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;flex:none}
.brand-mark img{width:34px;height:34px;object-fit:contain;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text .t1{font-family:var(--serif);font-size:17px;font-weight:700}
.brand-text .t2{font-size:10px;color:var(--fg-3);letter-spacing:.06em;text-transform:uppercase}
.nav{flex:1;display:flex;flex-direction:column;gap:3px}
.nav-item{position:relative;display:flex;align-items:center;padding:12px 16px;border-radius:var(--radius-sm);color:var(--fg-3);font-size:14.5px;min-height:44px;text-align:left;transition:all .2s var(--ease);font-family:var(--serif)}
.nav-item::before{content:"";position:absolute;left:-14px;top:22%;bottom:22%;width:3px;border-radius:3px;background:var(--accent);opacity:0;transition:all .25s var(--ease)}
.nav-item:hover{background:var(--surface-2);color:var(--fg)}
.nav-item.active{background:var(--accent-soft);color:var(--accent-2);font-weight:700}
.nav-item.active::before{opacity:1}
.side-foot{margin-top:auto;padding:14px 10px 4px;font-size:11px;color:var(--fg-3);border-top:1px solid var(--border);line-height:1.6}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 40%,transparent 100%);opacity:.5;pointer-events:none}
.topbar-inner{max-width:1440px;margin:0 auto;padding:0 30px;height:62px;display:flex;align-items:center;gap:14px}
.page-title{font-family:var(--serif);font-size:20px;font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-title small{font-family:var(--sans);font-size:12px;color:var(--fg-3);font-weight:400;margin-left:10px}
.top-actions{display:flex;align-items:center;gap:8px}
.btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:8px;font-size:13px;font-weight:500;border:1px solid var(--border);background:var(--surface);color:var(--fg-2);transition:all .18s var(--ease)}
.btn:hover{border-color:var(--accent);color:var(--accent-2);background:var(--accent-soft)}
.btn-icon{padding:0;width:36px;justify-content:center}
.btn-primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-accent:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.btn-ghost{background:transparent;border-color:transparent;color:var(--fg-3)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--border);color:var(--fg)}
.btn-sm{height:30px;padding:0 11px;font-size:12px}
.btn-danger{color:var(--danger);border-color:var(--danger-soft)}
.btn-danger:hover{background:var(--danger-soft);border-color:var(--danger)}
.btn:disabled{opacity:.4;cursor:not-allowed}

.content{max-width:1440px;width:100%;margin:0 auto;padding:26px 30px 40px} /* 底部留白 40px：内容刚好放下时不出现滚动条，超出视口才滚动 */
.page{display:none;animation:fadeIn .28s var(--ease)}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 章节标题（编号 + 英文） */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:4px 2px 18px}
.section-title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.section-title .num{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.08em;font-weight:600}
.section-title h2{font-family:var(--serif);font-size:23px;font-weight:700;letter-spacing:-.01em}
.section-title .sub{font-size:12px;color:var(--fg-3);font-family:var(--sans);letter-spacing:.02em}
.section-meta{font-size:12px;color:var(--fg-3);display:flex;align-items:center;gap:8px}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:5px}

/* 危险按钮：红底白字（批量删除/作废/清空等动权益操作） */
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-danger:hover{background:var(--danger);border-color:var(--danger);filter:brightness(.9);color:#fff}

/* 时间筛选：月份选择器（input type=month，选任意月份） */
.range-month{height:32px;padding:0 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--fg-2);font-size:12.5px;cursor:pointer}
.range-month:hover{border-color:var(--border-strong)}