/* ============================================================
   扶摇电商工具箱 · 全站微交互增强  fy-ux.css
   2026-09-21  纯样式增强，不改任何功能；加载在最后，覆盖前面的样式
   ============================================================ */
:root{
  --fyx-purple:#6c5ce7;
  --fyx-purple-2:#a78bfa;
  --fyx-ease:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- 1) 按钮统一手感：hover 轻跳 / 点击亮一下 ---------- */
.nav-btn,.fy-btn,.fy-quick-btn,.fy-rc-submit,.search-btn,
.btn,.btn-primary,.btn-lg,.btn-block,.btn-default,.fy-menu-btn{
  transition:transform .22s var(--fyx-ease), box-shadow .28s ease,
             background-color .25s ease, border-color .25s ease,
             color .25s ease, filter .16s ease !important;
  -webkit-tap-highlight-color:transparent;
}
.nav-btn:hover,.fy-btn:hover,.fy-quick-btn:hover,.fy-rc-submit:hover,.search-btn:hover,
.btn:hover,.btn-primary:hover,.fy-menu-btn:hover{
  transform:translateY(-2px);
}
.nav-btn:active,.fy-btn:active,.fy-quick-btn:active,.fy-rc-submit:active,.search-btn:active,
.btn:active,.btn-primary:active,.fy-menu-btn:active{
  transform:translateY(-1px) scale(.965);
  filter:brightness(1.14) saturate(1.05);
}
/* 描边/次要按钮：hover 描边点亮成紫色 */
.nav-btn-outline:hover,.fy-btn-ghost:hover,.fy-quick-btn.outline:hover,.btn-default:hover{
  border-color:var(--fyx-purple) !important;
  color:var(--fyx-purple) !important;
}

/* ---------- 2) 主按钮：一道流光扫过 ---------- */
.fy-rc-submit,.nav-btn-primary,.fy-btn-primary,.fy-quick-btn.primary,.btn-primary,.search-btn{
  position:relative; overflow:hidden; isolation:isolate;
}
.fy-rc-submit::after,.nav-btn-primary::after,.fy-btn-primary::after,
.fy-quick-btn.primary::after,.btn-primary::after,.search-btn::after{
  content:""; position:absolute; top:-12%; bottom:-12%; width:45%;
  left:-70%; pointer-events:none; z-index:1;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));
  transform:skewX(-18deg);
  transition:left .6s ease;
}
.fy-rc-submit:hover::after,.nav-btn-primary:hover::after,.fy-btn-primary:hover::after,
.fy-quick-btn.primary:hover::after,.btn-primary:hover::after,.search-btn:hover::after{
  left:125%;
}

/* ---------- 3) 关闭按钮 × ：hover 转半圈、点击转一圈 ---------- */
.fy-rc-close,.fy-modal-close,.layui-layer-close{
  transition:transform .45s var(--fyx-ease), background-color .2s ease, color .2s ease !important;
}
.fy-rc-close:hover{ transform:rotate(180deg); background:var(--fyx-purple) !important; color:#fff !important; }
.fy-rc-close:active{ transform:rotate(360deg) scale(.92); }

/* ---------- 4) 输入框：聚焦时紫色柔光 ---------- */
.form-control,.layui-input{ transition:border-color .2s ease, box-shadow .25s ease !important; }
.form-control:focus,input:focus,textarea:focus,select:focus{
  border-color:rgba(124,92,252,.75) !important;
  box-shadow:0 0 0 4px rgba(108,92,231,.13), 0 2px 10px rgba(108,92,231,.10) !important;
  outline:none !important;
}

/* ---------- 5) 卡片：hover 阴影加深 / 档位卡上浮 ---------- */
.fy-card,.fy-stat-card,.fy-rc-pay-card{
  transition:box-shadow .3s ease, border-color .25s ease, transform .28s var(--fyx-ease) !important;
}
.fy-card:hover,.fy-stat-card:hover{ box-shadow:0 10px 30px rgba(20,20,60,.10) !important; }
.fy-rc-pay-card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(108,92,231,.16); }
.fy-rc-pay-card.active{ box-shadow:0 8px 22px rgba(108,92,231,.22) !important; }

/* ---------- 6) 左侧栏图标：活起来（淡紫底 + hover 渐变发光） ---------- */
.fy-sb-big{ transition:background .25s ease, transform .25s var(--fyx-ease) !important; }
.fy-sb-big:hover{ background:rgba(255,255,255,.07) !important; transform:translateX(3px); }
.fy-sb-big-icon{
  transition:transform .28s var(--fyx-ease), background .28s ease, color .28s ease, box-shadow .28s ease !important;
  color:#b8a9ff !important; background:rgba(124,92,252,.14) !important;
}
.fy-sb-big:hover .fy-sb-big-icon{
  color:#fff !important;
  background:linear-gradient(135deg,#6c5ce7,#a855f7) !important;
  transform:scale(1.08);
  box-shadow:0 6px 18px rgba(108,92,231,.45);
}
.fy-sb-big.active .fy-sb-big-icon{
  color:#fff !important;
  background:linear-gradient(135deg,#6c5ce7,#a855f7) !important;
  box-shadow:0 6px 18px rgba(108,92,231,.40);
}
.fy-sb-sub{ transition:color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease !important; }
.fy-sb-sub:hover{ transform:translateX(2px); }
.fy-sb-sub-icon{ transition:all .25s var(--fyx-ease) !important; }
.fy-sb-sub:hover .fy-sb-sub-icon{
  background:rgba(108,92,231,.25) !important; color:#c4b5fd !important; transform:scale(1.08);
}

/* ---------- 7) 弹窗：沿边框转圈的浅色光（抖音那种质感） ---------- */
@property --fyx-ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.fy-recharge-modal{ position:relative; }
.fy-recharge-modal::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--fyx-ang),
      rgba(108,92,231,0) 0deg, rgba(108,92,231,0) 200deg,
      rgba(167,139,250,.95) 285deg, rgba(255,255,255,.95) 320deg,
      rgba(108,92,231,0) 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:fyx-rotate 4.2s linear infinite;
  pointer-events:none; z-index:3;
}
@keyframes fyx-rotate{ to{ --fyx-ang:360deg; } }

/* ---------- 8) 登录/注册主按钮：默认紫 → hover 淡紫 ---------- */
.auth-card .btn-primary{
  background:linear-gradient(135deg,#6c5ce7,#8b5cf6) !important;
  box-shadow:0 4px 16px rgba(108,92,231,.30) !important;
  color:#fff !important;
}
.auth-card .btn-primary:hover,
.auth-card .btn-primary:focus{
  background:linear-gradient(135deg,#8b7bf0,#b39dfb) !important;
  box-shadow:0 10px 28px rgba(139,123,240,.45) !important;
  color:#fff !important;
  transform:translateY(-2px) !important;
}
.auth-card .btn-primary:active{
  transform:translateY(-1px) scale(.97) !important;
  filter:brightness(1.12) !important;
}
/* 验证码 / 忘记密码 等次要按钮：hover 描边点亮成紫 */
.btn-captcha,.btn-forgot,.btn-wx,.btn-default{ transition:all .22s var(--fyx-ease) !important; }
.btn-captcha:hover,.btn-forgot:hover{
  border-color:var(--fyx-purple) !important;
  color:var(--fyx-purple) !important;
  transform:translateY(-1px);
}
.btn-wx:hover{ transform:translateY(-1px); }

/* ---------- 9) 尊重"减少动效"系统偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}


/* ===== 10) 侧栏子项图标统一淡紫 + 充值弹窗呼吸光（P81b）===== */
.fy-sb-sub-icon{
  background: rgba(124,92,252,.13) !important;
  color: #a99cf5 !important;
  border-radius: 8px !important;
  transition: background .2s var(--fyx-ease), color .2s var(--fyx-ease), transform .2s var(--fyx-ease) !important;
}
.fy-sb-sub:hover .fy-sb-sub-icon,
.fy-sb-sub.active .fy-sb-sub-icon{
  background: rgba(124,92,252,.30) !important;
  color: #cfc4ff !important;
  transform: translateX(2px);
}
.fy-sb-sub:hover{ background: rgba(124,92,252,.10) !important; }
.fy-recharge-modal{
  border: 1px solid rgba(108,92,231,.20) !important;
  animation: fyx-breath 3.6s ease-in-out infinite;
}
@keyframes fyx-breath{
  0%,100%{ box-shadow: 0 24px 70px rgba(0,0,0,.26), 0 0 0 1px rgba(108,92,231,.10), 0 0 22px rgba(108,92,231,.10); }
  50%    { box-shadow: 0 24px 70px rgba(0,0,0,.26), 0 0 0 1px rgba(108,92,231,.26), 0 0 34px rgba(108,92,231,.22); }
}
@media (prefers-reduced-motion: reduce){ .fy-recharge-modal{ animation: none !important; } }