/* ============================================================
   药材谷 · 全站公共底座  common.css  v1.1
   版本：v1.1 · 2026-10-08（改为「零覆盖」安全版）
   定位：仅提供 CSS 变量 + .ycg-* 新类。不定义 body/html/table 等
        全局元素样式，不覆盖各页既有类名 → 全站注入零冲突。
   用法：由 _serve_web.py 全站自动注入；或手动
        <link rel="stylesheet" href="/assets/common.css">
   ============================================================ */

/* ---- 标准色板（唯一口径）---- */
:root{
  /* 纸底（宣纸国风 · 浅底） */
  --paper:  #fafaf8;
  --paper2: #f4f4f1;
  --paper3: #ededea;
  --paper4: #e5e5e1;
  --card:   rgba(255,255,255,.86);
  --card2:  rgba(255,255,255,.96);

  /* 墨色层次 */
  --ink:  #23282d;
  --ink2: #333a40;
  --ink3: #4b545b;
  --mute: #8d918f;
  --mute2:#a9adab;

  /* 品牌色 */
  --dai:   #41586a;
  --dai2:  #55708a;
  --qing:  #4d6558;
  --zhe:   #75634f;
  --gold:  #9a8455;
  --gold2: #b89a63;

  /* 语义色（中式：涨红跌绿） */
  --up:    #c0392b;
  --down:  #1e8e5a;
  --warn:  #c9862b;

  /* 描边 / 阴影 / 圆角 */
  --line:  rgba(60,68,74,.13);
  --line2: rgba(60,68,74,.07);
  --sh:  0 2px 10px rgba(45,52,58,.055);
  --sh2: 0 10px 34px rgba(45,52,58,.10);
  --r:   12px;
  --r2:  18px;
  --gap: 16px;
}

/* ---- 暗金大屏专用（仅数据大屏页 body 挂 .dark）---- */
.dark, body.dark{
  --paper:  #0B0F14;
  --paper2: #131820;
  --paper3: #1A1E26;
  --card:   rgba(26,30,38,.92);
  --card2:  rgba(26,30,38,.96);
  --ink:    #E8EAED;
  --ink2:   #C4C9CF;
  --ink3:   #9AA1A8;
  --mute:   #6E767E;
  --gold:   #F0B90B;
  --line:   rgba(240,185,11,.18);
  --line2:  rgba(240,185,11,.08);
}

/* ============================================================
   统一导航（新类名 .ycg-nav，不覆盖旧导航）
   ============================================================ */
.ycg-nav{
  position:sticky;top:0;z-index:9999;
  display:flex;align-items:center;gap:8px;
  height:60px;padding:0 28px;
  background:rgba(250,250,248,.94);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.ycg-nav .brand{
  display:flex;align-items:center;gap:10px;
  font-size:19px;font-weight:700;color:var(--ink);letter-spacing:.5px;
  text-decoration:none;
}
.ycg-nav .brand::before{
  content:"";width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 35% 32%,var(--gold2),var(--gold));
  box-shadow:0 0 0 3px rgba(154,132,85,.14);
}
.ycg-nav .links{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.ycg-nav .links a{
  padding:7px 14px;border-radius:9px;font-size:14.5px;color:var(--ink2);
  transition:.18s;text-decoration:none;
}
.ycg-nav .links a:hover{background:var(--paper3);color:var(--ink)}
.ycg-nav .links a.on{background:var(--dai);color:#fff}

/* ============================================================
   统一页头（.ycg-hero）
   ============================================================ */
.ycg-hero{max-width:1320px;margin:0 auto;padding:52px 32px 30px;text-align:center}
.ycg-hero h1{font-size:38px;line-height:1.28;margin:0 0 14px;font-weight:800;
  letter-spacing:1px;color:var(--ink)}
.ycg-hero p{font-size:17px;color:var(--ink3);margin:0 auto;max-width:760px}
.ycg-hero .kicker{
  display:inline-block;padding:5px 16px;border-radius:999px;margin-bottom:18px;
  font-size:13.5px;letter-spacing:2px;color:var(--gold);
  background:rgba(154,132,85,.10);border:1px solid rgba(154,132,85,.24);
}

/* ============================================================
   卡片网格（.ycg-grid 一排五个 × 两排）
   ============================================================ */
.ycg-grid{
  max-width:1320px;margin:0 auto;padding:8px 32px 64px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:18px;
}
@media(max-width:1180px){.ycg-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.ycg-grid{grid-template-columns:repeat(2,1fr)}}

.ycg-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:196px;padding:24px 22px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  box-shadow:var(--sh);text-decoration:none;color:inherit;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .22s;
}
.ycg-card:hover{transform:translateY(-5px);box-shadow:var(--sh2);
  border-color:rgba(154,132,85,.42)}
.ycg-card::after{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--gold),transparent);opacity:0;transition:.22s;
}
.ycg-card:hover::after{opacity:1}
.ycg-card .ico{
  width:46px;height:46px;border-radius:13px;display:flex;
  align-items:center;justify-content:center;font-size:23px;margin-bottom:16px;
  background:linear-gradient(140deg,rgba(154,132,85,.16),rgba(65,88,106,.10));
  border:1px solid rgba(154,132,85,.18);
}
.ycg-card .no{
  position:absolute;right:18px;top:14px;
  font-size:30px;font-weight:800;color:rgba(65,88,106,.10);letter-spacing:-1px;
}
.ycg-card h3{margin:0 0 8px;font-size:19.5px;font-weight:700;color:var(--ink);letter-spacing:.3px}
.ycg-card .desc{
  font-size:14.5px;color:var(--ink3);line-height:1.62;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ycg-card .tags{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.ycg-card .tags span{
  font-size:12px;padding:3px 9px;border-radius:6px;
  color:var(--dai);background:rgba(65,88,106,.08);
}

/* ============================================================
   通用容器 / 面板 / 标题 / 按钮（.ycg-* 新类）
   ============================================================ */
.ycg-wrap{max-width:1320px;margin:0 auto;padding:0 32px 64px}
.ycg-panel{
  background:var(--card2);border:1px solid var(--line);border-radius:var(--r2);
  box-shadow:var(--sh);padding:28px 30px;
}
.ycg-title{
  display:flex;align-items:center;gap:12px;
  font-size:23px;font-weight:700;margin:44px 0 20px;color:var(--ink);
}
.ycg-title::before{
  content:"";width:4px;height:22px;border-radius:2px;
  background:linear-gradient(var(--gold),var(--dai));
}
.ycg-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 20px;border-radius:10px;font-size:15px;font-weight:600;
  background:var(--dai);color:#fff;border:none;cursor:pointer;
  transition:.18s;text-decoration:none;
}
.ycg-btn:hover{background:var(--dai2);color:#fff}
.ycg-btn.ghost{background:transparent;color:var(--dai);border:1px solid var(--line)}
.ycg-btn.ghost:hover{background:var(--paper3);color:var(--ink)}
.ycg-foot{
  max-width:1320px;margin:0 auto;padding:26px 32px 44px;
  border-top:1px solid var(--line);color:var(--mute);
  font-size:13.5px;text-align:center;
}