/* ============================================================
   益百道官网 · 设计系统覆盖层（Agency 设计部 · UI Designer）
   作用范围：浅色前台页（index/products/about/partners/privacy/terms/member）
   原则：只做视觉覆盖，不改结构；后台 portal/admin 与打印页 label 不引用本文件
   ============================================================ */

:root {
  /* 品牌色板：茶绿 × 暖金 */
  --brand-950: #0b2e22;
  --brand-900: #0f3d2e;
  --brand-800: #14532d;
  --brand-600: #1e7a5a;
  --brand-100: #e3efe8;
  --brand-050: #f2f7f4;
  --gold-500: #d9a441;
  --gold-400: #e8bc63;
  --ink: #1c2b26;
  --ink-2: #55655d;
  --line: #e3eae4;
  --paper: #f3f6f2;
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 61, 46, .06), 0 2px 6px rgba(15, 61, 46, .05);
  --shadow-lg: 0 14px 30px -10px rgba(15, 61, 46, .22);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------- 基础 ---------- */
body {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: #cfe5da; }
:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.card, .btn, .subnav a, .chip { transition-timing-function: var(--ease); }

/* ---------- 顶栏：墨绿渐变（替换亚马逊黑） ---------- */
.topbar {
  background: linear-gradient(180deg, #123f2f, #0b2e22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 10px rgba(11, 46, 34, .35);
}
.search { border-radius: 10px; }
.search button {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color: #241a05;
}
.search button:hover { filter: brightness(1.06); }
.topbar-right a:hover { color: var(--gold-400) !important; }

/* ---------- 分类导航：药丸化 ---------- */
.subnav {
  background: var(--brand-800);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.subnav::-webkit-scrollbar { height: 5px; }
.subnav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 3px; }
.subnav a { border-radius: 999px; padding: 5px 13px; font-weight: 500; }
.subnav a:hover { background: rgba(255, 255, 255, .12); border-color: transparent; }
.subnav a.active { background: #fff; color: var(--brand-800); font-weight: 700; border-color: transparent; }

/* ---------- 横幅 hero：层次光晕 ---------- */
.banner {
  background:
    radial-gradient(1100px 300px at 88% -50%, rgba(232, 188, 99, .20), transparent 62%),
    radial-gradient(700px 260px at -10% 130%, rgba(30, 122, 90, .35), transparent 60%),
    linear-gradient(100deg, var(--brand-900), var(--brand-600) 58%, var(--brand-900));
  padding: 30px 5%;
}
.banner h1 { font-size: 23px; letter-spacing: .5px; }
.banner .chip {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* ---------- 分区标题：品牌强调条 ---------- */
.section-title {
  position: relative;
  padding-left: 14px;
  font-size: 20px;
}
.section-title::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--brand-600), var(--gold-500));
}
.section-title .desc { color: var(--ink-2); }

/* ---------- 卡片体系 ---------- */
.card {
  border-radius: var(--radius);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.card:hover { box-shadow: var(--shadow-lg); }
.card .img { border-radius: 10px; }
.card .badge { border-radius: 999px; }

/* ---------- 按钮：知识卡"查看详情" ---------- */
.card .btn {
  background: var(--brand-100);
  color: var(--brand-800);
  border: 1px solid transparent;
  font-weight: 700;
}
.card .btn:hover { background: var(--brand-600); color: #fff; }

/* 商城双按钮：购物车=绿描边填充，购买=暖金 */
.btn-cart {
  background: var(--brand-100) !important;
  color: var(--brand-800) !important;
  border: 1px solid transparent !important;
  font-weight: 700;
}
.btn-cart:hover { background: var(--brand-600) !important; color: #fff !important; }
.btn-buy {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500)) !important;
  color: #241a05 !important;
  border: 1px solid transparent !important;
  font-weight: 700;
}
.btn-buy:hover { filter: brightness(1.06) !important; }

/* ---------- 弹窗与抽屉 ---------- */
.modal { border-radius: 16px; }

/* ---------- 页脚 ---------- */
footer { background: var(--brand-950); color: #c9d6cf; }
footer a { color: #e8efe9; }