/* ===== 语文桥 · 作文频道统一设计系统 (zuowen.css) =====
   所有频道页面均链接此文件；它加载在页面内联 <style> 之后，
   作为面包屑 / TAB / 筛选区 / 卡片 的唯一权威样式，确保全频道统一。 */

:root{
  --ink:#1a1a2e; --paper:#f5f3ef; --gold:#d4a847; --gold-light:#e8c56a;
  --gold-dark:#b8922e; --gold-pale:#f5e8c8; --stone:#3d3d3d; --light-stone:#888;
  --border:#ddd8cf; --bg-hover:#eae6dc; --radius:8px;
  --font:'Noto Serif SC','Source Han Serif SC','SimSun','STSong',serif;
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --sidebar-w:240px; --sidebar-bg:#faf8f5; --sidebar-hover:#f0ece2;
  --sidebar-text:#5c5344; --sidebar-active:#b8922e;
  /* 内容类型强调色（用于卡片左侧色条 / 分类胶囊） */
  --c-essay:#b8922e; --c-mat:#4f7a4f; --c-topic:#2a6a9a; --c-jifa:#2a8a8a; --c-person:#7a4a7a;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--font);background:var(--paper);color:var(--ink);padding-top:var(--topbar-h);min-height:100vh;}
a{color:#c9a84c;text-decoration:none;}
a:hover{color:var(--gold);}

/* ── 布局骨架 ── */
.app-layout{display:flex;min-height:calc(100vh - var(--topbar-h));}
.main-content{flex:7;padding:0;min-width:0;}

/* ── 侧栏 ── */
.sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);color:var(--sidebar-text);flex-shrink:0;position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow-y:auto;display:flex;flex-direction:column;}
.sidebar::-webkit-scrollbar{width:4px;} .sidebar::-webkit-scrollbar-thumb{background:#3a3a5a;border-radius:2px;}
.level-tabs{display:flex;border-bottom:1px solid #2a2a4a;}
.level-tab{flex:1;text-align:center;padding:8px 4px;font-size:12px;color:#555577;cursor:pointer;letter-spacing:1px;font-family:var(--font-sans);border-bottom:2px solid transparent;}
.level-tab:hover{color:#8888aa;} .level-tab.active{color:var(--gold-light);border-bottom-color:var(--gold);}
.sidebar-search{padding:10px 12px;} .sidebar-search input{width:100%;padding:5px 10px;border:1px solid #2a2a4a;border-radius:14px;background:#12122e;font-size:12px;color:#c0c0d8;outline:none;font-family:inherit;}
.sidebar-hint{padding:12px 18px 4px;font-size:12px;font-weight:600;color:#9a9ac0;letter-spacing:1px;font-family:var(--font-sans);}
.sidebar-search input:focus{border-color:#c9a84c;} .sidebar-search input::placeholder{color:#555577;}
.sidebar-nav{flex:1;padding:4px 0 20px;overflow-y:auto;} .sidebar-nav::-webkit-scrollbar{width:4px;} .sidebar-nav::-webkit-scrollbar-thumb{background:#3a3a5a;border-radius:2px;}
.tree-header{padding:9px 18px;font-size:13px;font-weight:600;cursor:pointer;user-select:none;display:flex;justify-content:space-between;align-items:center;transition:all .15s;color:#c8c8e0;}
.tree-header:hover{background:var(--sidebar-hover);} .tree-header.collapsed .arrow{transform:rotate(-90deg);} .tree-header .arrow{transition:transform .2s;font-size:10px;color:#8888aa;}
.tree-items{list-style:none;} .tree-items.hidden{display:none;}
.unit-separator{padding:5px 18px 3px 28px;font-size:10px;color:#7878a0;background:#16162e;border-bottom:1px solid #2a2a4a;margin:3px 0;letter-spacing:1px;font-weight:600;}
.tree-item{display:block;padding:6px 18px 6px 32px;font-size:11px;color:#8888aa;border-left:2px solid transparent;transition:all .12s;}
.tree-item:hover{background:var(--sidebar-hover);color:#d0d0e8;} .tree-item.active{border-left-color:var(--sidebar-active);color:#e0e0f0;background:var(--sidebar-hover);}
.sidebar-footer{padding:12px 18px;border-top:1px solid #2a2a4a;font-size:11px;text-align:center;flex-shrink:0;color:#555577;}

/* ── 面包屑 ── */
.breadcrumb{padding:18px 40px 0;font-size:12.5px;color:var(--light-stone);font-family:var(--font-sans);letter-spacing:.3px;}
.breadcrumb a{color:var(--light-stone);transition:color .15s;}
.breadcrumb a:hover{color:var(--gold-dark);}
.breadcrumb .sep{color:#cfc8bc;margin:0 7px;}
.breadcrumb .cur{color:var(--ink);font-weight:600;}

/* ── 内容容器 ── */
.main-body{padding:18px 40px 48px;max-width:1080px;margin:0 auto;}

/* ── 页头 ── */
.main-header{padding:18px 0 14px;border-bottom:2px solid var(--gold);}
.main-header h1{font-size:26px;font-weight:700;color:var(--ink);letter-spacing:2px;}
.main-header .sub{font-size:13px;color:var(--light-stone);margin-top:6px;letter-spacing:1px;}

/* ── 元信息胶囊 ── */
.meta-bar{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 6px;}
.meta-chip{font-size:11px;padding:3px 12px;border-radius:14px;background:var(--gold-pale);color:#8b6a2b;font-family:var(--font-sans);}
.meta-chip b{color:#6b4f1b;font-weight:700;}

/* ── 正文 / 点评 ── */
.essay-content{font-size:16.5px;line-height:2.1;color:#2c2216;margin-top:16px;}
.essay-content p{margin-bottom:14px;text-indent:2em;}
.comment-box{margin-top:24px;padding:14px 18px;background:var(--gold-pale);border-left:3px solid var(--gold);border-radius:6px;font-size:14px;line-height:1.9;color:#5c4a2b;}
.comment-box .c-label{display:block;font-size:12px;font-weight:700;color:#8b6a2b;margin-bottom:4px;font-family:var(--font-sans);}

/* ── 关联区块 ── */
.related-section{margin-top:30px;padding-top:20px;border-top:1px solid var(--border);}
.related-section h2{font-size:16px;font-weight:700;color:#5c4e3a;margin-bottom:12px;letter-spacing:1px;}
.rel-item{font-size:13.5px;line-height:1.9;color:#444;}
.rel-item .rel-k{display:inline-block;min-width:72px;color:#8b6a2b;font-weight:600;font-family:var(--font-sans);}
.rel-link{color:var(--gold-dark);} .rel-link:hover{text-decoration:underline;}

/* ── 页头：面包屑 + 栏目TAB 同行居右 ── */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 40px 0;flex-wrap:wrap;}
.page-head .breadcrumb{padding:0;}
.page-head .col-nav{justify-content:flex-end;padding:0;}

/* ── 栏目导航条（与面包屑同行）── */
.col-nav{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:16px 20px 8px;font-family:var(--font-sans);}
.col-nav a{display:inline-flex;align-items:center;gap:5px;padding:8px 22px;font-size:13px;border:1px solid var(--border);border-radius:22px;color:var(--stone);background:#fff;transition:all .25s cubic-bezier(.2,.7,.3,1);will-change:transform;}
.col-nav a:hover{border-color:var(--gold);color:var(--gold-dark);background:#fffdf5;box-shadow:0 6px 18px rgba(212,175,55,.22);transform:translateY(-3px) scale(1.04);}
.col-nav a.active{background:var(--gold-dark);border-color:var(--gold-dark);color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(184,146,46,.28);}

/* ── 频道首页 hero ── */
.hero{text-align:center;padding:44px 20px 24px;background:var(--paper);border-bottom:1px solid var(--border);}
.hero-icon{font-size:42px;margin-bottom:6px;}
.hero-title{font-size:28px;font-weight:900;color:var(--gold-dark);letter-spacing:4px;text-shadow:0 0 30px rgba(212,175,55,.1);}
.hero-sub{font-size:13px;color:var(--light-stone);letter-spacing:2px;margin-top:6px;}
.hero-desc{font-size:12px;color:var(--light-stone);margin-top:6px;max-width:500px;margin-left:auto;margin-right:auto;line-height:1.7;}
.hero-links{margin-top:12px;font-size:12px;letter-spacing:1px;font-family:var(--font-sans);}
.hero-links a{color:var(--gold-dark);} .hero-links a:hover{color:var(--gold);}

/* ── 频道首页：四大栏目入口网格 ── */
.chan-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0 26px;}
.chan-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:22px 24px;transition:all .25s;text-decoration:none;color:inherit;display:block;border-top:3px solid var(--gold);}
.chan-card:hover{border-color:var(--gold);box-shadow:0 8px 24px rgba(212,175,55,.14);transform:translateY(-3px);}
.chan-icon{font-size:34px;margin-bottom:8px;}
.chan-title{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:2px;}
.chan-sub{font-size:12px;color:var(--gold-dark);margin-top:4px;font-family:var(--font-sans);letter-spacing:.5px;}
.chan-desc{font-size:13px;line-height:1.75;color:#5a5246;margin-top:10px;}
.chan-foot{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;font-size:12px;color:var(--light-stone);border-top:1px dashed var(--border);padding-top:16px;font-family:var(--font-sans);}
.chan-foot a{color:var(--gold-dark);}

/* ── 筛选区（统一面板）── */
.filters{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin:4px 0 18px;box-shadow:0 1px 3px rgba(0,0,0,.03);}
.filter-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px;}
.filter-row:last-child{margin-bottom:0;}
.filter-label{display:inline-block;min-width:62px;font-size:12px;font-weight:700;color:var(--gold-dark);letter-spacing:1px;margin-right:8px;white-space:nowrap;font-family:var(--font-sans);}

/* TAB 按钮（筛选 / 视图切换 共用基底） */
.tab-btn,.view-tab{padding:5px 17px;font-size:12px;font-family:var(--font-sans);background:#faf8f3;border:1px solid var(--border);border-radius:20px;cursor:pointer;color:var(--light-stone);white-space:nowrap;transition:all .18s;}
.tab-btn:hover,.view-tab:hover{color:var(--gold-dark);border-color:var(--gold);background:var(--gold-pale);}
.tab-btn.active,.view-tab.active{color:#fff;font-weight:600;background:var(--gold-dark);border-color:var(--gold-dark);}
.view-tabs{display:flex;gap:8px;margin:4px 0 14px;}

/* ── 卡片统一基底（形状/间距/字阶一致）── */
.card,.essay-card,.mat-card,.col-card,.person-card,.rel-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;transition:all .25s;text-decoration:none;color:inherit;display:block;}
.card:hover,.essay-card:hover,.mat-card:hover,.col-card:hover,.person-card:hover,.rel-card:hover{border-color:var(--gold);box-shadow:0 6px 20px rgba(212,175,55,.12);transform:translateY(-2px);}
/* 类型强调（左侧色条区分内容类型） */
.essay-card{border-left:3px solid var(--c-essay);}
.mat-card{border-left:3px solid var(--c-mat);}
.col-card{border-left:3px solid var(--c-topic);}
.person-card{border-left:3px solid var(--c-person);}
.rel-card{border-left:3px solid var(--gold);padding:13px 15px;}
/* 题目库 vs 写作技法：同用 .col-card，按页面区分色条 */
.page-topics .col-card{border-left-color:var(--c-topic);}
.page-jifa .col-card{border-left-color:var(--c-jifa);}

/* 栏目卡片（题目库 / 技法库） */
.col-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px;}
.col-cat{display:inline-block;font-size:10px;padding:2px 10px;border-radius:10px;background:var(--gold-pale);color:#8b6a2b;margin-right:6px;font-family:var(--font-sans);}
.col-title{font-size:17px;font-weight:700;color:var(--ink);margin:6px 0 4px;}
.col-sub{font-size:12px;color:var(--light-stone);}
.col-sum{font-size:13px;line-height:1.7;color:#5a5246;margin-top:6px;}

/* 素材卡片 */
.mat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px;}
.mat-cat{display:inline-block;font-size:10px;padding:2px 10px;border-radius:10px;color:#fff;margin-right:6px;font-family:var(--font-sans);}
.mat-cat.cat-名言{background:#7a5a8a;} .mat-cat.cat-事例{background:#4f7a4f;}
.mat-cat.cat-诗词{background:#2a6a9a;} .mat-cat.cat-时评{background:#b8702e;}
.mat-topic{font-size:10px;color:var(--light-stone);font-family:var(--font-sans);}
.mat-content{font-size:15px;line-height:1.9;color:#2c2216;margin:8px 0 6px;}
.mat-src{font-size:11px;color:#a09880;font-family:var(--font-sans);}
.mat-empty{grid-column:1/-1;text-align:center;padding:40px;color:var(--light-stone);}
.cited-badge{display:inline-block;font-size:10px;padding:1px 8px;border-radius:10px;background:#e8f0e8;color:#3b6d11;margin-left:6px;font-family:var(--font-sans);}

/* 人物志网格 */
.person-grid{margin-top:8px;}
.person-group{margin-bottom:18px;}
.person-era{font-size:13px;font-weight:700;color:#8b6a2b;letter-spacing:2px;margin-bottom:8px;border-left:3px solid var(--gold);padding-left:10px;}
.person-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.person-name{font-size:17px;font-weight:700;color:var(--ink);}
.person-types{font-size:11px;color:var(--light-stone);font-family:var(--font-sans);}

/* 关联卡片（详情页） */
.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px;}
.rel-card .rc-title{font-size:14.5px;color:var(--ink);}
.rel-card .rc-sub{font-size:11.5px;color:var(--light-stone);margin-top:3px;font-family:var(--font-sans);}

/* 人物主页 */
.bio-box{font-size:15.5px;line-height:2;color:#3a3228;margin-top:8px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:18px 20px;}
.person-meta{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0;}
.era-chip{font-size:12px;padding:3px 14px;border-radius:14px;background:#2a2a4a;color:var(--gold-light);font-family:var(--font-sans);}
.type-chip{font-size:11px;padding:2px 10px;border-radius:12px;background:var(--gold-pale);color:#8b6a2b;font-family:var(--font-sans);}

/* 范文卡片（频道首页网格） + 标签 */
.essay-grid{padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.essay-card .e-title{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:1px;margin-bottom:3px;}
.essay-card .e-meta{font-size:10px;color:var(--light-stone);margin-bottom:6px;font-family:var(--font-sans);}
.essay-card .e-preview{font-size:12.5px;color:var(--stone);line-height:1.7;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
.essay-card .e-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;}
.e-tags .tag{font-size:9px;padding:1px 7px;border-radius:6px;font-family:var(--font-sans);letter-spacing:1px;}
.tag-struct{background:#ece8de;color:var(--stone);}
.tag-arg{background:#dfe8df;color:#3a6a3a;}
.tag-style{background:#e8dce8;color:#7a4a7a;}
.tag-ev{background:#ece8de;color:var(--stone);}
.tag-source{background:var(--gold-pale);color:var(--gold-dark);}
.tag-topic{background:var(--gold-pale);color:var(--gold-dark);border:1px solid var(--gold);}
.tag-concept{background:#e3eef7;color:#2a6a9a;border:1px solid #9fc4e0;}

/* 空状态 */
.empty-state{grid-column:1/-1;text-align:center;padding:50px 20px;}
.empty-state .empty-icon{font-size:40px;margin-bottom:10px;}
.empty-state .empty-text{font-size:14px;color:var(--light-stone);letter-spacing:2px;}

/* 区块标题（列表页分组） */
.section-title{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:2px;margin:20px 0 12px;padding-left:12px;border-left:3px solid var(--gold);}
.section-title .st-sub{font-size:11px;color:var(--light-stone);font-weight:400;letter-spacing:1px;margin-left:8px;font-family:var(--font-sans);}

/* 底部 */
.site-footer{text-align:center;padding:28px 20px 36px;border-top:1px solid var(--border);}
.footer-motto{font-size:11px;color:var(--light-stone);letter-spacing:2px;margin-bottom:8px;}
.footer-brand{font-size:13px;color:var(--gold-dark);letter-spacing:3px;margin-bottom:6px;}
.footer-icp a{font-size:10px;color:var(--light-stone);}

.sec-head{display:flex;align-items:baseline;gap:10px;margin:28px 0 12px;font-size:16px;font-weight:700;color:#26215C;border-left:4px solid #534AB7;padding-left:12px;}
.sec-head span{font-size:12px;font-weight:400;color:#888;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
.method-note{background:#EEEDFE;border:1px solid var(--c-line);border-radius:8px;padding:10px 14px;font-size:12.5px;line-height:1.7;color:#3C3489;margin:0 0 14px;}

.chan-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.chan-tags a{font-size:12px;padding:3px 10px;border-radius:12px;background:#f0ecfa;color:#534AB7;text-decoration:none;border:1px solid #ddd3f0;transition:all .15s;}
.chan-tags a:hover{background:#534AB7;color:#fff;}