:root{
  --pine:#2F5D4A; --pine-deep:#244A3A; --herb:#7C9A78; --celadon:#AFC8B4;
  --gold:#C08A3E; --gold-deep:#A9742F;
  --cream:#F7F2E9; --paper:#FFFFFF; --line:#E7E0D2;
  --ink:#2B2A25; --ink2:#5C5950; --ok:#3E7D5A;
  --serif:"Noto Serif SC","Songti SC","STSong",serif;
  --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --shadow:0 6px 22px rgba(43,42,37,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--cream);
  line-height:1.8; font-size:16px; -webkit-font-smoothing:antialiased;
}
a{color:var(--pine); text-decoration:none}
a:hover{color:var(--gold-deep)}

/* 顶栏 */
.topbar{background:var(--pine); color:#fff; position:sticky; top:0; z-index:20; box-shadow:0 2px 12px rgba(36,74,58,.18)}
.topbar-inner{max-width:980px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; color:#fff}
.brand .logo{width:38px; height:38px; border-radius:10px; background:var(--gold); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:22px; font-weight:700}
.brand-txt{display:flex; flex-direction:column; line-height:1.15}
.brand-txt b{font-family:var(--serif); font-size:18px; letter-spacing:1px}
.brand-txt i{font-style:normal; font-size:11.5px; opacity:.85; letter-spacing:2px}
.nav{display:flex; gap:6px; flex-wrap:wrap}
.nav a{color:#EAF2EC; padding:7px 13px; border-radius:999px; font-size:14.5px}
.nav a:hover{background:rgba(255,255,255,.12); color:#fff}
.nav a.active{background:var(--gold); color:#fff}

/* 容器 */
.container{max-width:880px; margin:0 auto; padding:24px 20px 56px}
.crumbs{font-size:13px; color:var(--ink2); margin:6px 0 18px}
.crumbs a{color:var(--ink2)}
.page-title{font-family:var(--serif); font-size:28px; color:var(--pine-deep); margin:6px 0 10px}
.lead{color:var(--ink2); margin:0 0 22px}

/* 文档/规则页 */
.doc-title{font-family:var(--serif); font-size:26px; color:var(--pine-deep); margin:4px 0 14px; text-align:center}
.doc-meta{background:#F0F6F1; border:1px solid #DCE9DE; border-radius:12px; padding:12px 16px; margin:0 0 18px; font-size:13.5px; color:var(--ink2); line-height:1.9}
.doc-meta .meta-line{margin:2px 0}
h1,h2,h3,h4{font-family:var(--serif); color:var(--pine-deep); line-height:1.5}
h2{font-size:21px; margin:30px 0 10px; padding-left:12px; border-left:4px solid var(--gold)}
h3{font-size:18px; margin:22px 0 8px}
h4{font-size:16px; margin:16px 0 6px; color:var(--pine)}
p{margin:10px 0; text-align:justify}
strong{color:var(--pine-deep)}

/* 表格 */
.tbl-wrap{overflow-x:auto; margin:14px 0}
table{border-collapse:collapse; width:100%; font-size:14px; background:var(--paper); border:1px solid var(--line)}
th,td{border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top}
th{background:#EAF2EC; color:var(--pine-deep); font-weight:600}

/* 规则索引卡片 */
.rule-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:22px 0}
.rule-card{display:block; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s}
.rule-card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(43,42,37,.10); color:inherit}
.rc-code{display:inline-block; font-size:12px; background:#EDF5EE; color:var(--ok); border:1px solid #CDE2CF; border-radius:6px; padding:1px 8px; margin-bottom:8px}
.rule-card b{display:block; font-family:var(--serif); font-size:17px; color:var(--pine-deep); margin-bottom:6px}
.rc-desc{display:block; font-size:13px; color:var(--ink2)}

/* 食品非药品声明 */
.food-stmt{margin:30px 0 0; background:#FBF6EC; border:1px solid #EAD9BE; border-left:5px solid var(--gold); border-radius:12px; padding:14px 18px; font-size:14px; color:#6B5836; line-height:1.85}

/* 首页样式 */
.hero{background:linear-gradient(135deg,var(--pine),var(--pine-deep)); color:#fff; border-radius:20px; padding:38px 30px; margin:10px 0 24px; box-shadow:var(--shadow)}
.hero h1{color:#fff; font-family:var(--serif); font-size:30px; margin:0 0 10px}
.hero p{color:#EAF2EC; font-size:15.5px; margin:8px 0}
.hero .tag{display:inline-block; background:var(--gold); color:#fff; font-size:12.5px; padding:3px 12px; border-radius:999px; margin-bottom:12px}
.section-title{font-family:var(--serif); font-size:20px; color:var(--pine-deep); margin:28px 0 12px}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px}
.card{background:var(--paper); border:1px solid var(--line); border-radius:15px; padding:18px; box-shadow:var(--shadow)}
.card h3{margin:0 0 8px; font-size:17px}
.card p{font-size:13.5px; color:var(--ink2); margin:0}
.card .go{display:inline-block; margin-top:10px; font-size:13.5px; color:var(--gold-deep); font-weight:600}
.notice{background:#F0F6F1; border:1px solid #DCE9DE; border-radius:12px; padding:14px 18px; font-size:14px; color:var(--pine-deep); margin:18px 0}

/* 资质公示 */
.qual-list{display:grid; gap:12px; margin:16px 0}
.qual-item{display:flex; gap:14px; align-items:flex-start; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow)}
.qual-item .qico{width:40px;height:40px;border-radius:11px;background:#F0F6F1;color:var(--pine);display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:20px}
.qual-item h3{margin:0 0 4px; font-size:16.5px}
.qual-item p{margin:0; font-size:13.5px; color:var(--ink2)}
.up-note{background:#FBF6EC; border:1px solid #EAD9BE; border-radius:12px; padding:12px 16px; font-size:13.5px; color:#6B5836; margin:16px 0}

/* 隐私政策 */
.legal h3{margin-top:24px}
.legal ol{padding-left:22px}
.legal li{margin:8px 0}

/* 页脚 */
.site-foot{background:var(--pine-deep); color:#DCE9DE; margin-top:30px; padding:28px 20px}
.foot-inner{max-width:980px; margin:0 auto; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-size:13.5px; line-height:1.9}
.foot-inner a{color:#BFE0C9}
.foot-brand{font-family:var(--serif); font-size:16px; color:#fff; margin:0 0 8px}
.foot-links{text-align:right}
.ph{color:#F2C879; border-bottom:1px dashed #F2C879}

/* 响应式 */
@media (max-width:600px){
  body{font-size:15px}
  .topbar-inner{padding:10px 14px}
  .brand-txt b{font-size:16px}
  .nav a{padding:6px 10px; font-size:13.5px}
  .container{padding:18px 14px 44px}
  .hero{padding:28px 20px}
  .hero h1{font-size:24px}
  .foot-links{text-align:left}
}