/* ============================================================
 * theme-refresh.css ｜ 视觉刷新 v1 + v2（叠加层，不改动现有 style.css）
 * 方向：在权威蓝白灰基础上，更活泼、开放、包容、友好
 *   - 增加暖色点缀（珊瑚/青）与更圆润卡片、柔和阴影
 *   - 微动效：入场 fadeInUp、吉祥物漂浮、按钮悬停浮起、卡片轻微抬升
 *   - 空状态插画 + 品牌IP（飞飞）友好化
 * v2（2026-08-18）：在 v1 获认可基础上「更年轻化、更活泼」
 *   - 主按钮胶囊化 + 蓝色渐变 + 悬停浮起
 *   - 内容卡片（.service-card/.card）悬停轻抬升
 *   - 飞飞挥手（翅膀轻摆）+ 漂浮（qf-float）
 *   - 首页服务卡入场交错（.qf-stagger 扩展到 8 个）
 *   - 全部动效尊重 prefers-reduced-motion
 * 用法：在需要新方向的页面 <link> 本文件即可，全站铺开前先经 design-preview.html 评审
 * ============================================================ */

:root{
  --qf-brand:#1d4ed8;          /* 主蓝（权威） */
  --qf-brand-soft:#eaf2ff;
  --qf-coral:#fb7185;          /* 暖珊瑚（活泼点缀） */
  --qf-coral-soft:#fff1f3;
  --qf-teal:#0ea5a4;           /* 青（开放包容） */
  --qf-teal-soft:#e6faf8;
  --qf-ink:#1f2a44;
  --qf-radius:18px;            /* 更圆润 */
  --qf-shadow:0 10px 30px rgba(30,58,138,.10);
  --qf-shadow-lg:0 18px 48px rgba(30,58,138,.16);
}

/* ---------- 微动效关键帧 ---------- */
@keyframes qfFadeInUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes qfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes qfPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes qfShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

.qf-anim-up{animation:qfFadeInUp .7s cubic-bezier(.22,.61,.36,1) both}
.qf-float{animation:qfFloat 4s ease-in-out infinite}
.qf-pulse{animation:qfPulse 2.4s ease-in-out infinite}
.qf-stagger > *{animation:qfFadeInUp .6s cubic-bezier(.22,.61,.36,1) both}
.qf-stagger > *:nth-child(1){animation-delay:.05s}
.qf-stagger > *:nth-child(2){animation-delay:.13s}
.qf-stagger > *:nth-child(3){animation-delay:.21s}
.qf-stagger > *:nth-child(4){animation-delay:.29s}
.qf-stagger > *:nth-child(5){animation-delay:.37s}
.qf-stagger > *:nth-child(6){animation-delay:.45s}
.qf-stagger > *:nth-child(7){animation-delay:.53s}
.qf-stagger > *:nth-child(8){animation-delay:.61s}

/* ---------- 新按钮（更圆、渐变、悬停浮起） ---------- */
.qf-btn-fresh{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border:none;border-radius:999px;cursor:pointer;
  font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--qf-brand),#3b82f6);
  box-shadow:0 8px 20px rgba(29,78,216,.28);
  transition:transform .18s ease, box-shadow .18s ease;
}
.qf-btn-fresh:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(29,78,216,.36)}
.qf-btn-fresh.coral{background:linear-gradient(135deg,#fb7185,#f43f5e);box-shadow:0 8px 20px rgba(244,63,94,.28)}
.qf-btn-fresh.teal{background:linear-gradient(135deg,#0ea5a4,#14b8a6);box-shadow:0 8px 20px rgba(13,148,136,.26)}
.qf-btn-fresh.ghost{background:#fff;color:var(--qf-brand);border:1.5px solid #c7dbff;box-shadow:none}
.qf-btn-fresh.ghost:hover{background:var(--qf-brand-soft)}

/* ---------- 新卡片（更圆、柔和阴影、悬停抬升） ---------- */
.qf-card-fresh{
  background:#fff;border-radius:var(--qf-radius);padding:22px;
  border:1px solid #eef1f7;box-shadow:var(--qf-shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.qf-card-fresh:hover{transform:translateY(-6px);box-shadow:var(--qf-shadow-lg);border-color:#dbe7ff}

/* ---------- 友好空状态 ---------- */
.qf-empty{
  text-align:center;padding:36px 16px;color:#64748b;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.qf-empty img{width:200px;max-width:60%;height:auto;opacity:.95}
.qf-empty .qf-empty-title{font-size:16px;font-weight:700;color:var(--qf-ink)}
.qf-empty .qf-empty-sub{font-size:13.5px;color:#94a3b8;max-width:420px;line-height:1.6}

/* ---------- 渐变文字 / 高光标签（活泼但不轻浮） ---------- */
.qf-grad-text{
  background:linear-gradient(135deg,var(--qf-brand),#0ea5a4);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.qf-chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  font-size:13px;font-weight:600;background:var(--qf-coral-soft);color:#e11d48;
}
.qf-chip.teal{background:var(--qf-teal-soft);color:#0f766e}

/* ---------- 全局空状态更友好（覆盖 style.css 的旧 .empty） ---------- */
.empty{text-align:center;color:#94a3b8;padding:30px 16px;font-size:14px;line-height:1.7;background:#f8fafc;border-radius:14px;border:1px dashed #e2e8f0}

/* ---------- 全局温和覆盖（仅内容 CTA / 表单，绝不碰导航 .main-*/.top-*/.logo-*） ---------- */
.btn,.btn-primary,.btn-outline,.btn-outline-dark,.btn-outline-dark-2,.btn-dl-ok,.btn-dl-cancel{
  border-radius:10px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover,.btn-primary:hover,.btn-outline:hover,.btn-dl-ok:hover,.btn-dl-cancel:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(29,78,216,.18);
}
.fld,input.in,textarea.fld,input[type=text],input[type=password],input[type=email],input[type=search],select{
  border-radius:10px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.fld:focus,input.in:focus,textarea.fld:focus,input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=search]:focus,select:focus{
  outline:none;
  border-color:#1d4ed8;
  box-shadow:0 0 0 3px rgba(29,78,216,.12);
}

/* ---------- 首页品牌IP展示带（友好化样板） ---------- */
.qf-ip-band{background:linear-gradient(135deg,#eaf2ff 0%,#e6faf8 100%);padding:50px 0;margin:0}
.qf-ip-inner{display:flex;align-items:center;gap:34px}
.qf-ip-mascot{width:168px;height:auto;flex-shrink:0;filter:drop-shadow(0 14px 26px rgba(30,58,138,.18))}
.qf-ip-text{flex:1}
.qf-ip-text h3{font-size:27px;line-height:1.35;color:var(--qf-ink);margin:8px 0 12px;font-weight:800}
.qf-ip-text .ch-sub{color:#475569;max-width:560px}
.qf-ip-text .hero-buttons{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:760px){
  .qf-ip-inner{flex-direction:column;text-align:center}
  .qf-ip-mascot{width:128px}
  .qf-ip-text .hero-buttons{justify-content:center}
}

/* ============================================================
 * v2（2026-08-18）：更年轻化、更活泼
 * ============================================================ */

/* 主按钮胶囊化 + 蓝色渐变（权威蓝但更年轻），悬停浮起 */
.btn-primary{
  border-radius:999px;
  background:linear-gradient(135deg,#1d4ed8,#3b82f6);
  border:none;color:#fff;font-weight:700;letter-spacing:.3px;
  box-shadow:0 8px 20px rgba(29,78,216,.22);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(29,78,216,.30)}
.btn-outline,.btn-outline-dark{border-radius:999px}

/* 内容卡片悬停轻抬升（不碰导航/表单/页脚） */
.card,.service-card,.feature-card,.news-card{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover,.service-card:hover,.feature-card:hover,.news-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--qf-shadow-lg);
  border-color:#dbe7ff;
}

/* 飞飞挥手：翅膀绕根部轻摆（与 qf-float 漂浮叠加，更灵动） */
.mf-wing{
  transform-box:view-box;
  transform-origin:150px 112px;
  animation:qfWave 2.8s ease-in-out infinite;
}
@keyframes qfWave{
  0%,100%{transform:rotate(0deg)}
  18%{transform:rotate(-11deg)}
  38%{transform:rotate(6deg)}
  58%{transform:rotate(-7deg)}
  78%{transform:rotate(3deg)}
}

@media (prefers-reduced-motion: reduce){
  .qf-anim-up,.qf-float,.qf-pulse,.qf-stagger>*,.mf-wing{animation:none!important}
  .btn:hover,.btn-primary:hover,.btn-outline:hover,.btn-dl-ok:hover,.btn-dl-cancel:hover,.card:hover,.service-card:hover,.feature-card:hover,.news-card:hover{transform:none}
}