:root{ --primary:#9B7920; --accent:#E8BE3C; --gen:linear-gradient(135deg,#1a1410 0%,#2a2018 45%,#3a2f1a 100%); --goldgrad:linear-gradient(135deg,#9B7920 0%,#7B5A10 45%,#5a4208 100%); --ink:#2a2018; --muted:#8a7e6a; --line:#e7ddc9; --bg:#f3ede1; --card:#fffdf8; --dark:#1a1410; }
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{ font-family:'Noto Sans CJK SC','Noto Sans','PingFang SC','Microsoft YaHei',sans-serif; background:var(--bg); color:var(--ink); font-size:15px; line-height:1.6; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.layout{ display:flex; min-height:100vh; }
/* ===== 侧栏（桌面） ===== */
.sidebar{ width:268px; flex-shrink:0; background:var(--gen); color:#fff; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; box-shadow:2px 0 18px rgba(0,0,0,.28); }
.brand{ padding:30px 24px 20px; }
.brand .logo{ width:52px; height:52px; border-radius:14px; margin-bottom:14px; display:block; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.brand .bn{ font-size:23px; font-weight:800; letter-spacing:2px; }
.brand .bs{ font-size:12.5px; opacity:.84; margin-top:7px; line-height:1.6; }
.side-nav{ padding:8px 14px; overflow-y:auto; flex:1; }
.side-nav a{ display:flex; align-items:center; gap:13px; padding:13px 15px; border-radius:13px; color:rgba(255,255,255,.82); font-size:15.5px; font-weight:600; cursor:pointer; margin:4px 0; transition:background .15s,color .15s; }
.side-nav a .si{ width:24px; text-align:center; font-size:18px; }
.side-nav a .si svg{ color:rgba(255,255,255,.78); }
.side-nav a:hover{ background:rgba(255,255,255,.12); color:#fff; }
.side-nav a.on{ background:#fff; color:var(--primary); box-shadow:0 4px 14px rgba(0,0,0,.12); }
.side-nav a.on .si svg{ color:var(--primary); }
.side-divider{ height:1px; background:rgba(255,255,255,.18); margin:10px 16px; }
.side-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 22px; font-size:11px; opacity:.7; line-height:1.6; }
.side-foot span{ flex:1; }
.side-foot .lang-btn{ opacity:1; flex-shrink:0; }
/* 语言切换按钮：桌面为纵向布局，与移动端分开定义 */
.lang-btn{ font-family:inherit; font-size:12px; font-weight:700; line-height:1; cursor:pointer; border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.10); color:#fff; border-radius:20px; padding:5px 11px; letter-spacing:.5px; transition:background .15s; }
.lang-btn:hover{ background:rgba(255,255,255,.22); }
/* 滚动条：窄而低调，避免压在导航文字上 */
.side-nav::-webkit-scrollbar{ width:5px; }
.side-nav::-webkit-scrollbar-track{ background:transparent; }
.side-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.22); border-radius:3px; }
.side-nav::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.4); }
.side-nav{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent; }
/* ===== 主区 ===== */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{ display:none; }
.content{ width:100%; max-width:1040px; margin:0 auto; padding:0 18px 48px; }
/* ===== 底部 tab（移动） ===== */
.bottom-tab{ display:none; }
.btab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:8px 2px 9px; color:rgba(255,255,255,.62); font-size:11px; cursor:pointer; }
.btab svg{ color:rgba(255,255,255,.55); }
.btab.on{ color:#fff; }
.btab.on svg{ color:#fff; }
/* ===== 移动抽屉 ===== */
.menu-drawer{ display:none; }
.menu-mask{ display:none; }
/* ===== 通用卡片 ===== */
.card{ background:#fff; border-radius:16px; margin:16px 0; padding:18px; box-shadow:0 3px 14px rgba(20,40,80,.07); }
.banner{ background:var(--goldgrad); border-radius:18px; margin:18px 0 0; padding:22px 22px; color:#fff; box-shadow:0 8px 24px rgba(90,66,8,.3); position:relative; min-height:112px; }
.banner .slide{ display:none; }
.banner .slide.on{ display:block; animation:fadeIn .45s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.banner .tag{ display:inline-block; background:rgba(255,255,255,.2); font-size:12px; padding:3px 11px; border-radius:20px; margin-bottom:10px; }
.banner .bt{ font-size:21px; font-weight:800; line-height:1.4; }
.banner .bd{ font-size:13.5px; opacity:.92; margin-top:8px; line-height:1.6; }
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0; }
.gitem{ background:#fff; border-radius:16px; padding:26px 12px 22px; display:flex; flex-direction:column; align-items:center; gap:14px; box-shadow:0 3px 14px rgba(20,40,80,.07); cursor:pointer; transition:transform .12s,box-shadow .12s; }
.gitem:hover{ transform:translateY(-3px); box-shadow:0 8px 22px rgba(20,40,80,.14); }
.gitem .gico{ width:72px; height:72px; color:var(--primary); }
.gitem .gico svg{ width:72px; height:72px; }
.gitem span{ font-size:15px; color:#2a2018; font-weight:700; }
.adv{ display:flex; gap:14px; align-items:flex-start; }
.adv .bar{ width:4px; align-self:stretch; background:var(--accent); border-radius:3px; }
.adv .t{ font-size:17px; font-weight:800; color:#2a2018; }
.adv .d{ font-size:13.5px; color:#8a7e6a; line-height:1.7; margin-top:5px; }
.dots{ display:flex; gap:7px; justify-content:center; margin:14px 0 2px; }
.dot{ width:7px; height:7px; border-radius:50%; background:rgba(155,121,32,.25); }
.dot.on{ background:var(--primary); width:20px; border-radius:4px; }
.intro{ font-size:14px; line-height:2; color:#4a4036; padding:18px 4px 6px; }
.colintros{ display:flex; flex-direction:column; gap:12px; margin:14px 0 6px; }
.ci{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:16px; box-shadow:0 6px 16px rgba(90,66,8,.18); position:relative; overflow:hidden; color:#fff; cursor:pointer; }
.ci .cie{ font-size:30px; line-height:1; width:50px; height:50px; border-radius:12px; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ci .cim{ flex:1; min-width:0; }
.cin{ font-size:17px; font-weight:800; color:#fff; margin-bottom:4px; }
.cid{ font-size:13px; color:rgba(255,255,255,.9); line-height:1.6; }
.cia{ font-size:26px; color:rgba(255,255,255,.85); flex-shrink:0; }
.sectitle{ font-size:13px; color:#8a7e6a; font-weight:800; margin:20px 4px 4px; letter-spacing:1px; }
.list{ margin:8px 0; }
.item{ display:flex; justify-content:space-between; align-items:center; background:#fff; margin:10px 0; padding:15px 18px; border-radius:14px; box-shadow:0 2px 10px rgba(20,40,80,.06); cursor:pointer; transition:transform .12s,box-shadow .12s; }
.item:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(20,40,80,.12); }
.item .it-body{ flex:1; min-width:0; }
.item .it-t{ font-size:16px; color:#2a2018; font-weight:700; }
.item .it-s{ font-size:12.5px; color:#8a7e6a; margin-top:4px; line-height:1.5; }
.item .ar{ color:#b9c4d0; font-size:20px; flex-shrink:0; margin-left:10px; }
.pager{ display:flex; align-items:center; justify-content:center; margin:14px 0; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(20,40,80,.06); }
.pg{ flex:1; text-align:center; padding:14px 0; font-size:13.5px; font-weight:700; color:var(--primary); cursor:pointer; }
.pgd{ color:#c4ccd6; pointer-events:none; }
.pgi{ flex-shrink:0; padding:14px 16px; font-size:13px; color:#8a7e6a; border-left:1px solid var(--line); border-right:1px solid var(--line); }
.art-nav{ display:flex; flex-direction:column; gap:10px; margin:18px 0 4px; }
.anav{ background:#fff; border-radius:14px; padding:15px 18px; font-size:14px; color:var(--primary); box-shadow:0 2px 10px rgba(20,40,80,.06); cursor:pointer; }
.anav-n{ text-align:right; }
.anav-d{ color:#b6c0cc; }
.group{ font-size:14px; font-weight:800; color:var(--primary); margin:18px 4px 4px; padding-left:10px; border-left:3px solid var(--accent); }
.top-tabs{ display:flex; gap:0; overflow-x:auto; background:#fff; padding:6px 8px; border-radius:14px; margin:14px 0 0; box-shadow:0 2px 10px rgba(20,40,80,.06); }
.top-tab{ flex:0 0 auto; text-align:center; white-space:nowrap; padding:9px 16px; font-size:13px; color:#6b7888; border-radius:16px; margin:0 3px; cursor:pointer; }
.top-tab.on{ background:var(--primary); color:#fff; font-weight:700; }
.bc{ font-size:13px; color:#8a7e6a; padding:16px 4px 0; }
.bc b{ color:var(--primary); font-weight:700; }
.bc-link{ color:var(--primary); font-weight:700; cursor:pointer; }
.header{ background:var(--gen); color:#fff; padding:18px 22px 20px; border-radius:16px; margin:16px 0; box-shadow:0 6px 18px rgba(0,0,0,.2); }
.header h1{ font-size:22px; font-weight:800; letter-spacing:1px; }
.art-title{ font-size:22px; font-weight:800; color:#2a2018; padding:18px 4px 8px; line-height:1.35; }
.sub{ font-size:16px; font-weight:800; color:var(--primary); margin:24px 4px 8px; padding-left:11px; padding-top:14px; border-left:3px solid var(--accent); border-top:1px solid var(--line); }
.para{ font-size:14.5px; line-height:1.95; color:#3a3228; padding:4px 4px; letter-spacing:.2px; text-align:justify; }
.art-img{ margin:14px 0; border-radius:14px; overflow:hidden; }
.art-video{ margin:14px 0; border-radius:14px; overflow:hidden; }
.footer{ background:var(--gen); color:#f3ead6; padding:22px 20px 18px; text-align:center; border-radius:16px; margin:24px 0 0; }
.footer .fn{ font-size:16px; font-weight:800; color:#fff; }
.footer .fd{ font-size:11.5px; opacity:.85; margin-top:9px; line-height:1.6; text-align:center; }
.footer .fc{ font-size:11px; opacity:.72; margin-top:10px; }
.empty{ text-align:center; color:#a99e8c; padding:48px 20px; font-size:14px; }
.nav{ font-size:13px; color:#8a7e6a; padding:12px 0 0; }
.nav b{ color:var(--primary); }
.filter-wrap{ display:flex; flex-wrap:wrap; gap:8px 10px; padding:14px 14px 12px; background:var(--card); border-radius:14px; margin:12px 0 0; box-shadow:0 2px 10px rgba(20,40,80,.06); }
.fchip{ flex:0 0 auto; max-width:100%; padding:7px 16px; font-size:12.5px; color:#6b7888; background:#f4f6fa; border:1px solid #e6ebf2; border-radius:999px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.fchip.on{ background:#f7efdc; color:#7B5A10; font-weight:700; border-color:#e3d3a8; }
.rel-head{ font-size:16px; font-weight:800; color:var(--primary); margin:22px 4px 8px; display:flex; align-items:center; gap:10px; }
.rel{ display:block; background:#fff; border-radius:14px; margin:10px 0; padding:14px 16px; box-shadow:0 2px 10px rgba(20,40,80,.06); cursor:pointer; }
.rel .rt{ font-size:15px; color:#2a2018; font-weight:700; }
.rel .rs{ font-size:12px; color:#8a7e6a; margin-top:4px; line-height:1.5; }
.search-bar{ display:flex; align-items:center; gap:10px; margin:16px 0 0; background:#fff; border-radius:999px; padding:14px 20px; box-shadow:0 4px 16px rgba(90,66,8,.12); cursor:pointer; }
.search-bar .si{ font-size:17px; opacity:.5; }
.search-bar .sp{ font-size:13.5px; color:#9aa7b8; }
.search-overlay{ display:none; position:fixed; inset:0; background:rgba(26,20,16,.45); z-index:60; padding:48px 16px; overflow:auto; }
.search-overlay.open{ display:block; }
.search-panel{ max-width:680px; margin:0 auto; background:#fff; border-radius:18px; padding:16px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.search-panel .box{ display:flex; align-items:center; gap:10px; background:#f4f6fa; border:1px solid #e6ebf2; border-radius:999px; padding:13px 18px; }
.search-panel .box .si{ font-size:17px; opacity:.55; }
.search-panel .ip{ flex:1; font-size:15px; color:#1e2535; border:none; outline:none; background:transparent; }
.search-panel .list{ margin-top:10px; max-height:60vh; overflow:auto; }
.search-panel .search-full{ display:block; text-align:center; margin-top:12px; color:var(--primary); font-size:13px; font-weight:700; }
.hsearch{ }
.slogan{ font-size:20px; font-weight:800; color:var(--primary); letter-spacing:1px; padding:20px 16px 6px; border-left:4px solid var(--accent); margin:16px 0 0; }
.srch{ padding:16px 0; }
.srch .box{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #e6ebf2; border-radius:999px; padding:14px 20px; box-shadow:0 4px 16px rgba(90,66,8,.1); }
.srch .box .si{ font-size:17px; opacity:.55; }
.srch .box .ip{ flex:1; font-size:15px; color:#1e2535; border:none; outline:none; background:transparent; }
.srch .meta{ font-size:12.5px; color:#8a97a6; padding:14px 6px 4px; }
@media (max-width:860px){
  .sidebar{ display:none; }
  .topbar{ display:flex; align-items:center; justify-content:space-between; background:var(--gen); color:#fff; padding:11px 16px; position:sticky; top:0; z-index:25; box-shadow:0 2px 12px rgba(0,0,0,.14); }
  .topbar .tb-brand{ font-size:18px; font-weight:800; letter-spacing:1px; }
  .topbar .tb-actions{ display:flex; align-items:center; gap:18px; font-size:21px; }
  .topbar .tb-actions span{ cursor:pointer; }
  .side-foot .lang-btn{ font-size:11px; padding:4px 9px; }
  .content{ padding:0 14px 84px; max-width:none; }
  .grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .bottom-tab{ display:flex; position:fixed; bottom:0; left:0; right:0; background:var(--gen); color:rgba(255,255,255,.62); z-index:30; padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -2px 14px rgba(0,0,0,.16); }
  .menu-drawer{ display:block; position:fixed; top:0; left:0; bottom:0; width:280px; max-width:84vw; background:var(--gen); color:#fff; z-index:50; transform:translateX(-100%); transition:transform .25s ease; padding:30px 16px; overflow-y:auto; box-shadow:4px 0 24px rgba(0,0,0,.3); }
  .menu-drawer.open{ transform:translateX(0); }
  .menu-drawer .brand{ padding:0 0 18px; }
  .menu-mask{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40; opacity:0; pointer-events:none; transition:opacity .25s; }
  .menu-mask.open{ opacity:1; pointer-events:auto; }
  .header{ border-radius:0; margin:0 -14px 16px; }
}
@media (min-width:861px){ .topbar{ display:none; } }
@media (max-height:780px) and (min-width:861px){
  .brand{ padding:16px 24px 12px; }
  .brand .logo{ width:44px; height:44px; margin-bottom:9px; }
  .brand .bn{ font-size:20px; }
  .brand .bs{ display:none; }
  .side-nav{ padding:6px 14px; }
  .side-nav a{ padding:9px 14px; margin:2px 0; font-size:15px; }
  .side-foot{ padding:10px 22px; justify-content:center; }
  .side-foot span{ display:none; }
}
@media (min-width:861px) and (max-width:1100px){
  .grid{ grid-template-columns:repeat(2,1fr); }
  .side-foot span{ display:none; }
  .side-foot{ justify-content:center; padding:12px; }
  .side-nav a{ padding:11px 15px; font-size:15px; }
  .brand{ padding:22px 24px 14px; }
  .brand .bs{ display:none; }
}