/* ============================================================
   智美科技 · 风格皮肤（Style Skins）
   与「整站主题」颜色微调器正交：本文件只通过 [data-style] 切换
   「简约 / 时尚」两套全新视觉风格，不改变任何 HTML 结构或业务逻辑。
   - [data-style="default"] 不写覆盖 → 完全保持原样
   - 调色板变量用 !important，确保覆盖 site.js applyTheme 写入的内联变量
   - 组件级覆盖写在 zhimei.css 之后（本文件后加载），靠源码顺序取胜
   - 所有动效天然受全局 @media (prefers-reduced-motion: reduce) 抑制
   ============================================================ */

/* ---------- 简约风格 minimal：留白充足 · 低饱和 · 安静 ---------- */
html[data-style="minimal"] {
  --bg:#f7f8f9 !important;
  --panel:#ffffff !important;
  --navy:#2b303b !important;            /* 仅作兜底，hero 已改为浅色 */
  --navy2:#363d49 !important;
  --primary:#5b6472 !important;         /* 低饱和石板蓝 */
  --accent:#8a93a3 !important;
  --text:#23262b !important;
  --muted:#7a818c !important;
  --border:#ececef !important;
  --radius:14px !important;
  --radius-sm:8px !important;
  --shadow:0 2px 10px rgba(20,30,50,.05) !important;
  --grad:linear-gradient(120deg,#5b6472,#8a93a3) !important;
}
/* 大量留白：区块更宽裕 */
html[data-style="minimal"] .section { padding:84px 0; }
html[data-style="minimal"] .container { max-width:1120px; }
/* 安静的浅色 hero（文字改深色，避免白字糊在浅底） */
html[data-style="minimal"] .hero {
  background:linear-gradient(135deg,#ffffff,#eef1f4);
  color:var(--text);
  padding:64px 0 56px;
  border-bottom:1px solid var(--border);
}
html[data-style="minimal"] .hero .eyebrow { color:var(--primary); }
html[data-style="minimal"] .hero-title { color:var(--text); }
html[data-style="minimal"] .hero-sub { color:var(--primary); }
html[data-style="minimal"] .hero-intro { color:var(--muted); }
/* 卡片：去重影、轻边框、克制悬浮 */
html[data-style="minimal"] .prod-card,
html[data-style="minimal"] .post-card,
html[data-style="minimal"] .engine-card { box-shadow:none; }
html[data-style="minimal"] .prod-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
/* 按钮：去掉彩色投影，回归克制 */
html[data-style="minimal"] .btn-primary { box-shadow:none; }
html[data-style="minimal"] .btn-primary:hover { box-shadow:0 6px 16px rgba(91,100,114,.18); }
/* 页眉更通透 */
html[data-style="minimal"] .site-header { background:rgba(255,255,255,.92); }

/* ---------- 时尚风格 fashion：大胆配色 · 渐变 · 动效点缀 ---------- */
html[data-style="fashion"] {
  --bg:#14101f !important;
  --panel:#1d1730 !important;
  --navy:#1a1330 !important;
  --navy2:#241a3f !important;
  --primary:#ff4d8d !important;        /* 潮粉 */
  --accent:#8b5cff !important;         /* 霓虹紫 */
  --text:#fdf3ff !important;
  --muted:#b9a9d6 !important;
  --border:rgba(255,255,255,.14) !important;
  --radius:20px !important;
  --radius-sm:12px !important;
  --shadow:0 16px 40px rgba(255,77,141,.18) !important;
  --grad:linear-gradient(120deg,#ff4d8d,#8b5cff) !important;
  --grad-cyan:linear-gradient(120deg,#8b5cff,#22d3ee) !important;
}
/* hero：深空渐变 + 缓慢流光（reduce-motion 自动关闭） */
html[data-style="fashion"] .hero {
  background:linear-gradient(135deg,#1a1330,#2a1850 55%,#3a1247);
  background-size:200% 200%;
  color:#fff;
  animation:zmHeroBg 14s ease infinite;
}
html[data-style="fashion"] .hero .eyebrow { color:#ff9ecb; }
html[data-style="fashion"] .hero-title { color:#fff; }
html[data-style="fashion"] .hero-sub { color:#c9b3ff; }
html[data-style="fashion"] .hero-intro { color:rgba(255,255,255,.78); }
/* 页眉：深色玻璃 */
html[data-style="fashion"] .site-header {
  background:rgba(20,16,31,.82);
  border-bottom:1px solid rgba(255,255,255,.08);
}
html[data-style="fashion"] .nav a { color:rgba(255,255,255,.72); }
html[data-style="fashion"] .nav a:hover { color:#fff; }
html[data-style="fashion"] .nav a::after { background:var(--grad); }
/* 页脚：深色 */
html[data-style="fashion"] .site-footer {
  background:var(--panel);
  border-top:1px solid rgba(255,255,255,.08);
}
html[data-style="fashion"] .site-footer,
html[data-style="fashion"] .site-footer a { color:var(--muted); }
/* 按钮：流动渐变 + 霓虹辉光 */
html[data-style="fashion"] .btn-primary {
  background:linear-gradient(120deg,#ff4d8d,#8b5cff);
  background-size:200% 200%;
  color:#fff;
  box-shadow:0 10px 30px rgba(255,77,141,.4);
  animation:zmGrad 6s ease infinite;
}
html[data-style="fashion"] .btn-primary:hover {
  transform:translateY(-3px);
  box-shadow:0 14px 42px rgba(255,77,141,.55);
}
html[data-style="fashion"] .btn-ghost { color:#fff; border-color:rgba(255,255,255,.22); }
html[data-style="fashion"] .btn-ghost:hover { border-color:var(--primary); color:var(--primary); }
/* 卡片：悬浮霓虹辉光 */
html[data-style="fashion"] .prod-card,
html[data-style="fashion"] .post-card,
html[data-style="fashion"] .engine-card {
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
}
html[data-style="fashion"] .prod-card:hover,
html[data-style="fashion"] .post-card:hover {
  transform:translateY(-6px);
  box-shadow:0 18px 50px rgba(139,92,255,.35);
  border-color:rgba(255,255,255,.18);
}
/* 标签：潮色描边 */
html[data-style="fashion"] .tag { background:rgba(255,255,255,.08); color:var(--primary); }
html[data-style="fashion"] .tag.feat { background:var(--primary); color:#fff; }

/* ---------- 动画关键帧 ---------- */
@keyframes zmGrad { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes zmHeroBg { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* 统一兜底：系统开启「减少动态效果」时彻底关闭本文件动效 */
@media (prefers-reduced-motion: reduce) {
  html[data-style="fashion"] .hero,
  html[data-style="fashion"] .btn-primary { animation:none !important; }
}