/* 趣玩658 全站轻量美化（适配 2C2G 服务器） */
:root{
  --bg-fallback:#9ecdf2;
  --text:#5A4B40;
  --brand1:#FF7A7A;
  --brand2:#42C9C1;
  --card: rgba(255,255,255,.64);
  --card-border: rgba(255,255,255,.55);
  --shadow: 0 10px 34px rgba(0,0,0,.07);
  --radius: 22px;
}

*{ -webkit-tap-highlight-color: transparent; }

html,body{ height:100%; }
html{ scroll-behavior:smooth; }

body{
  background: var(--bg-fallback) url('home-bg.jpg') center top / cover no-repeat fixed !important;
  color: var(--text);
  overflow-x:hidden;
  position:relative;
}

/* 统一卡片质感（不强行改结构，只做“锦上添花”） */
.hero, .panel, .tool, .item, .feature, .tips, .intro-section, .message-section, .box{
  background: var(--card) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--shadow);
}

/* 统一圆角 */
.hero, .panel, .tool, .item, .feature, .tips, .intro-section, .message-section, .box, .grid-card{
  border-radius: var(--radius) !important;
}

/* 更丝滑的 hover（不夸张） */
.panel, .tool, .item, .feature, .grid-card, .card, .song, .box, .login-box{
  transition:
    transform .58s cubic-bezier(.22,.8,.22,1),
    box-shadow .58s cubic-bezier(.22,.8,.22,1),
    background-color .58s cubic-bezier(.22,.8,.22,1),
    border-color .58s cubic-bezier(.22,.8,.22,1) !important;
}
.panel:hover, .tool:hover, .item:hover, .feature:hover, .grid-card:hover, .card:hover{
  transform: translateY(-4px) !important;
}

button, .btn, .back, .copy-btn, .open-btn, .cat-btn, .step-btn, .small-btn, .modal-close, .del-mini, a.back-btn{
  transition:
    transform .32s cubic-bezier(.22,.8,.22,1),
    box-shadow .32s cubic-bezier(.22,.8,.22,1),
    filter .32s cubic-bezier(.22,.8,.22,1),
    background-color .32s cubic-bezier(.22,.8,.22,1) !important;
}

button:hover, .btn:hover, .back:hover, .copy-btn:hover, .open-btn:hover, .cat-btn:hover, .step-btn:hover, .small-btn:hover, .modal-close:hover, .del-mini:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

/* 点击反馈：按下有下压，松开有轻微闪动 */
a, button, .grid-card, .recommend-card, .panel, .item, .tool, .feature, .card{
  -webkit-tap-highlight-color: transparent;
}

a:active, button:active, .grid-card:active, .recommend-card:active, .panel:active, .item:active, .tool:active, .feature:active, .card:active{
  transform: scale(.985) !important;
  filter: brightness(.98);
}

.click-pop{
  animation: clickPop .22s ease;
}
@keyframes clickPop{
  0%{ box-shadow: 0 0 0 0 rgba(66,201,193,.28); }
  100%{ box-shadow: 0 0 0 10px rgba(66,201,193,0); }
}

input, textarea, select{
  transition:
    border-color .28s ease,
    box-shadow .28s ease,
    background-color .28s ease !important;
}

input:focus, textarea:focus, select:focus{
  border-color: rgba(66,201,193,.55) !important;
  box-shadow: 0 0 0 4px rgba(66,201,193,.12);
}

/* 渐变按钮/链接统一 */
.btn, .back, button{
  border-radius: 999px !important;
}

/* 滚动出现动效（由 JS 添加 is-in） */
.qw-reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.qw-reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* 减少动态：照顾低性能/晕动症用户 */
@media (prefers-reduced-motion: reduce){
  .qw-reveal{ transition: none !important; transform: none !important; opacity: 1 !important; }
  .panel:hover, .tool:hover, .item:hover, .feature:hover, .grid-card:hover, .card:hover{ transform: none !important; }
  button:hover, .btn:hover, .back:hover, .copy-btn:hover, .open-btn:hover, .cat-btn:hover, .step-btn:hover, .small-btn:hover, .modal-close:hover, .del-mini:hover{ transform:none !important; }
}