/* ============================================================
   食商宝 · 高级感精修层 V2（叠加在所有样式之上，最后加载）
   V2 目标：一套色彩秩序（祖母绿 × 香槟金）｜首屏光影重构
           消灭杂色（紫蓝AI渐变/霓虹ticker/四色矩阵卡）
   ============================================================ */

/* ---------- 0. 色彩秩序：全站变量换血 ---------- */
:root{
  --primary:#157A52;
  --primary-hover:#0E5C3D;
  --primary-dark:#0A4630;
  --primary-light:#EAF3EE;
  --accent:#C9A24B;
  --accent-light:#F7EFDC;
  --accent-hover:#B08D38;
  --danger:#D9434E;
  --danger-hover:#B8303B;
  --ai-start:#157A52;
  --ai-end:#0A4630;
  --ai-gradient:linear-gradient(135deg,#157A52,#0A4630);
  --bg:#FAF8F3;
  --gold:#C9A24B;
  --gold-soft:#E8C97A;
  --gold-pale:#F2D98D;
  --ink:#0B2B20;
}

/* 背景：冷灰 → 暖米白（衬绿金） */
body{background:var(--bg)}

/* ---------- 1. 顶栏信息条：近黑绿 + 金 ---------- */
.top-info-bar{
  background:linear-gradient(90deg,#081F17 0%,#0D3A2A 50%,#081F17 100%);
  border-bottom:1px solid rgba(201,162,75,.28);
}
.top-info-left{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.78)}
.top-info-left strong{color:var(--gold-pale);font-weight:600}
.top-info-left .ico{width:15px;height:15px;color:var(--gold-soft)}
.top-info-right{display:flex;align-items:center;gap:18px}
.top-info-right a{display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,.72);transition:color .2s}
.top-info-right a:hover{color:var(--gold-pale)}
.top-info-right a .ico{width:15px;height:15px}
.top-info-ai{display:inline-flex;align-items:center;gap:5px;color:var(--gold-soft)!important}

/* ---------- 2. 品牌 Logo ---------- */
.logo-wrap{gap:4px;padding:4px 0}
.logo-dragon{font-size:30px;line-height:1;display:inline-flex;align-items:center}
.logo-dragon .ico{width:32px;height:32px;color:var(--primary)}
.logo-text{
  background:linear-gradient(135deg,#0E5C3D 0%,#157A52 45%,#C9A24B 115%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-0.5px;font-weight:900;
}
.logo-en{
  background:linear-gradient(135deg,#F7EFDC,#EFE2C2);
  color:#8A6D2F;border:1px solid rgba(201,162,75,.35);
  font-size:10px;letter-spacing:1.5px;padding:2px 7px;border-radius:4px;font-weight:600;
}
.logo-slogan{font-size:10.5px;color:#8A978F;letter-spacing:1.2px;font-weight:500}

/* ---------- 3. 导航 ---------- */
.nav a{display:inline-flex;align-items:center;gap:6px}
.nav a .ico{width:16px;height:16px}
.nav a.active{color:var(--primary)}
.nav a.nav-gold{color:#A8842F;font-weight:600}
.nav a.nav-gold:hover{color:var(--gold)}
.hamburger{display:flex;align-items:center;justify-content:center;color:var(--text)}
.hamburger .ico{width:22px;height:22px}
.user-area{display:flex;align-items:center;gap:10px}
.dropdown-menu a{display:flex;align-items:center;gap:8px}
.dropdown-menu a .ico{width:16px;height:16px}
.mobile-nav-panel .nav-a{display:flex;align-items:center;gap:10px}
.mobile-nav-panel .nav-a .ico{width:18px;height:18px}
.mobile-nav-header{display:flex;align-items:center;justify-content:space-between}
.mobile-nav-header button{display:inline-flex;align-items:center;justify-content:center}
.mobile-nav-header .ico{width:18px;height:18px}

/* ---------- 4. 按钮：主按钮祖母绿深化 ---------- */
.btn-primary{
  background:linear-gradient(135deg,#1A8A5E 0%,#0E5C3D 100%);
  box-shadow:0 3px 12px rgba(14,92,61,.28),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover{
  background:linear-gradient(135deg,#157A52 0%,#0A4630 100%);
  box-shadow:0 6px 18px rgba(14,92,61,.36),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-outline{border-color:#D5DCD6;color:#0E5C3D}
.btn-outline:hover{border-color:var(--gold);color:#8A6D2F;background:var(--accent-light)}

/* ---------- 5. Hero 首屏重构：近黑祖母绿 + 金色光影 ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:84px 20px 76px;
  background:
    radial-gradient(1000px 480px at 18% -12%, rgba(232,201,122,.16), transparent 58%),
    radial-gradient(760px 420px at 88% 8%, rgba(46,160,110,.20), transparent 55%),
    linear-gradient(158deg,#071C14 0%,#0B3326 52%,#10503A 100%);
  border-bottom:1px solid rgba(201,162,75,.45);
}
/* 细网格纹理（若隐若现的结构感） */
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 72px);
  mask-image:radial-gradient(900px 500px at 50% 0%,#000 30%,transparent 85%);
  -webkit-mask-image:radial-gradient(900px 500px at 50% 0%,#000 30%,transparent 85%);
}
/* 顶部香槟光晕（保留 V1 的光，再压一层） */
.hero::before{
  content:'';position:absolute;top:-42%;left:50%;transform:translateX(-50%);
  width:980px;height:640px;pointer-events:none;
  background:radial-gradient(circle, rgba(242,217,141,.15), transparent 68%);
}
.hero-inner{position:relative;z-index:1}

.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 18px;border-radius:24px;
  background:rgba(201,162,75,.10);
  border:1px solid rgba(232,201,122,.42);
  color:var(--gold-pale);
  font-size:12.5px;letter-spacing:2px;font-weight:500;
  backdrop-filter:blur(8px);
}
.hero-badge .ico{width:15px;height:15px;color:var(--gold-soft)}

.hero-title{
  font-size:52px;line-height:1.22;font-weight:900;
  letter-spacing:1px;margin-bottom:18px;
  color:#FDFCF8;text-shadow:0 2px 24px rgba(0,0,0,.25);
}
.hero-title-hl{
  background:linear-gradient(135deg,#F2D98D 10%,#C9A24B 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
}
.hero-sub{
  font-size:16.5px;line-height:1.8;max-width:640px;
  color:rgba(255,255,255,.78);margin-bottom:34px;letter-spacing:.3px;
}

/* 搜索框：白金卡 + 金色 CTA */
.hero-search{
  max-width:680px;
  background:rgba(255,255,255,.98);
  border-radius:48px;padding:7px 7px 7px 24px;
  box-shadow:0 20px 50px rgba(0,0,0,.32),0 2px 8px rgba(0,0,0,.10);
  border:1px solid rgba(232,201,122,.35);
}
.hero-search:focus-within{
  box-shadow:0 22px 56px rgba(0,0,0,.36),0 0 0 4px rgba(201,162,75,.28);
}
.hero-search-ico{display:inline-flex;align-items:center}
.hero-search-ico .ico{width:18px;height:18px}
.hero-search .btn{
  border-radius:40px;padding:13px 32px;
  font-size:15px;font-weight:700;letter-spacing:1px;
  background:linear-gradient(135deg,#E8C97A 0%,#C9A24B 100%);
  color:#0B2B20;
  box-shadow:0 4px 14px rgba(201,162,75,.45),inset 0 1px 0 rgba(255,255,255,.5);
}
.hero-search .btn:hover{
  background:linear-gradient(135deg,#F2D98D 0%,#D4AF5A 100%);
  box-shadow:0 8px 22px rgba(201,162,75,.55),inset 0 1px 0 rgba(255,255,255,.5);
}

/* 热门标签：金边米白 */
.hero-quick-tag{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.82);
}
.hero-quick-tag:hover{
  background:rgba(232,201,122,.92);color:#0B2B20;
  border-color:rgba(232,201,122,.92);transform:translateY(-1px);
}

/* 统计：金色数字 + 发丝分隔 */
.hero-stats{gap:0;margin-top:44px}
.hero-stat{padding:0 40px}
.hero-stat:first-child{padding-left:0}
.hero-stat + .hero-stat{border-left:1px solid rgba(255,255,255,.14)}
.hero-stat strong{
  font-size:34px;font-weight:900;letter-spacing:-.5px;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#F2D98D,#D4AF5A);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-stat span{font-size:12.5px;letter-spacing:1px;color:rgba(255,255,255,.62);opacity:1}

/* ---------- 6. Ticker 动态条：墨绿 + 金（灭蓝紫霓虹） ---------- */
.ticker-bar{
  background:linear-gradient(90deg,#081F17,#0D3A2A 50%,#081F17)!important;
  border-bottom:1px solid rgba(201,162,75,.22);
}
.ticker-title{color:var(--gold-soft)!important;display:inline-flex;align-items:center;gap:6px}
.ticker-title .ico{width:16px;height:16px;color:var(--gold-soft)}
.ticker-viewport::before{background:linear-gradient(90deg,#081F17,transparent)!important}
.ticker-viewport::after{background:linear-gradient(270deg,#081F17,transparent)!important}
.ticker-item{color:#E9E2D2!important}
.ticker-item .ticker-tag{color:var(--gold-soft)!important;font-weight:600}
.ticker-item .ticker-tag-supply{color:var(--gold-pale)!important}
.ticker-item .ticker-loc{color:rgba(255,255,255,.42)!important}

/* ---------- 7. 品类矩阵：去四色渐变，白卡 + 金 hairline ---------- */
.cat-matrix{background:#fff;border-bottom:1px solid rgba(16,40,30,.05)}
.cat-matrix-head h2{
  display:flex;align-items:center;gap:10px;
  font-size:26px;font-weight:800;letter-spacing:-.3px;color:#14392B;
}
.cat-matrix-head h2::before{
  content:'';width:4px;height:22px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  flex-shrink:0;
}
.cat-matrix-head h2 .ico{width:22px;height:22px;color:var(--gold)}
.gm-group-title{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:750;color:#0E5C3D;letter-spacing:.5px;
}
.gm-group-title::before{
  content:'';width:3px;height:14px;border-radius:2px;background:var(--gold);flex-shrink:0;
}
.gm-card{
  background:#fff!important;
  border:1px solid rgba(16,40,30,.07);
  box-shadow:0 1px 4px rgba(16,40,30,.04);
}
.gm-card:hover{
  transform:translateY(-3px);
  border-color:rgba(201,162,75,.6);
  box-shadow:0 10px 26px rgba(20,57,43,.10),0 0 0 1px rgba(201,162,75,.18);
}
.gm-name{color:#2B3A33;font-weight:600}
.gm-flag{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  color:#0B2B20;font-weight:600;
}
.gm-sub-toggle{color:#8A978F}
.gm-card:hover .gm-sub-toggle{color:var(--primary)}
.gm-sub-panel{
  background:#fff;border:1px solid rgba(201,162,75,.35);
  box-shadow:0 12px 30px rgba(20,57,43,.12);
}
.gm-sub-item:hover{background:var(--accent-light);color:#8A6D2F}

/* ---------- 8. 信任条 ---------- */
.trust-strip{
  background:linear-gradient(180deg,#FDFCF9 0%,#F5F2EA 100%);
  border-top:1px solid rgba(16,40,30,.05);
  border-bottom:1px solid rgba(16,40,30,.05);
}
.trust-chip{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#3B4A42}
.trust-chip i{font-style:normal;font-size:16px;display:inline-flex;align-items:center}
.trust-chip .ico{width:18px;height:18px;color:var(--gold)}
.trust-divider{background:rgba(201,162,75,.45)}

/* ---------- 9. AI 提示条：紫蓝 → 祖母绿 × 金 ---------- */
.ai-banner{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(120deg,#0A4630 0%,#10503A 58%,#156B4B 100%);
  border-left:3px solid var(--gold);
  box-shadow:0 6px 20px rgba(10,70,48,.22);
  letter-spacing:.02em;
}
.ai-banner::after{background:rgba(232,201,122,.10)}
.ai-banner .dot{background:var(--gold-soft)}
.ai-banner .dot::after{border-color:rgba(232,201,122,.55)}
.ai-banner .ico{width:18px;height:18px;color:var(--gold-pale);flex-shrink:0}

/* ---------- 10. 区块标题与卡片 ---------- */
.section-header h2{display:flex;align-items:center;gap:8px;color:#14392B}
.section-header h2 .ico{width:22px;height:22px;color:var(--primary)}
.section-header a{color:var(--primary);font-weight:600}
.section-header a:hover{color:var(--gold);background:transparent}
.card,.sidebar-card{
  border:1px solid rgba(16,40,30,.06);
  box-shadow:0 2px 10px rgba(16,40,30,.05);
}
.sidebar-card h3{display:flex;align-items:center;gap:6px;color:#14392B}
.sidebar-card h3 .ico{width:18px;height:18px;color:var(--primary)}
.sidebar-card h3::before{background:linear-gradient(180deg,var(--gold-soft),var(--gold))!important}
.list-item{transition:background .2s ease,border-color .2s ease}
.list-item:hover{background:#FDFBF6}
.tag-primary{background:var(--primary-light);color:var(--primary)}
.tag-gold{background:var(--accent-light);color:#8A6D2F}

/* ---------- 11. 页脚：深墨绿 + 金 ---------- */
.site-footer{
  background:linear-gradient(180deg,#0B2B20,#081F17);
  border-top:2px solid rgba(201,162,75,.5);
  color:rgba(255,255,255,.62);
  padding:36px 20px 30px;
}
.site-footer p{color:rgba(255,255,255,.55)}
.site-footer p:first-child{color:rgba(242,217,141,.85)!important}
.site-footer a{color:rgba(255,255,255,.55);transition:color .2s}
.site-footer a:hover{color:var(--gold-pale)}

/* ---------- 12. 会员徽章金色质感 ---------- */
.nav-member-badge.active{background:linear-gradient(135deg,var(--gold-soft),var(--gold));color:#0B2B20}

/* ---------- 13. 移动端保护 ---------- */
@media (max-width:768px){
  .hero{padding:56px 16px 48px}
  .hero-title{font-size:32px;letter-spacing:.5px}
  .hero-stat{padding:0 18px}
  .hero-stat strong{font-size:24px}
  .hero-sub{font-size:14.5px}
}