/* ============================================================
   ToySoHard · 潮玩霓虹设计系统 (neon.css)
   在 adaptive.css 之后引入。统一提亮：霓虹光晕背景 + 玻璃拟态 +
   发光按钮/徽章 + 渐变标题 + 滚动入场动效。
   仅新增/增强样式，不破坏各页原有结构与布局。
   ============================================================ */

:root{
  --glow-pink: rgba(255,61,127,.45);
  --glow-purple: rgba(160,107,255,.50);
  --glow-gold: rgba(244,182,62,.50);
  --neon-2: #6b8bff;
  --font: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",system-ui,-apple-system,sans-serif;
  --radius-lg: 22px;
}

/* ---------- 背景: 霓虹光晕 + 点阵 ---------- */
body{
  font-family: var(--font);
  background:
    radial-gradient(1100px 620px at 8% -10%, rgba(255,61,127,.14), transparent 60%),
    radial-gradient(1000px 560px at 102% -4%, rgba(160,107,255,.16), transparent 58%),
    radial-gradient(900px 620px at 50% 118%, rgba(255,138,61,.12), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: radial-gradient(rgba(160,107,255,.07) 1px, transparent 1.6px);
  background-size: 24px 24px; opacity:.55;
}
.wrap,.nav,.hero,.section,.foot,main,#member-ui,.scan-section,.tiktok-cta,.promo-zone,.cat-zone{
  position:relative; z-index:1;
}

/* ---------- 标题排版更精致 ---------- */
h1,h2,h3,h4,.card .title,.info h1,.sec-head h3,.mc-name{ letter-spacing:-.3px; }
::selection{ background:rgba(255,61,127,.22); }

/* ---------- 玻璃拟态导航 ---------- */
.nav{
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 6px 24px rgba(120,30,60,.08), 0 1px 0 rgba(160,107,255,.14);
}
.logo .dot{ box-shadow: 0 0 14px var(--glow-pink); }

/* ---------- 区块标题: 渐变字 + 发光竖条 ---------- */
.sec-head h3{
  background: linear-gradient(100deg, var(--brand) 8%, var(--neon) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sec-head h3 .bar{
  background: linear-gradient(135deg, var(--brand), var(--neon));
  box-shadow: 0 0 10px var(--glow-purple);
}
.sec-head a:hover{ text-shadow: 0 0 10px var(--glow-pink); }

/* ---------- 玻璃拟态卡片 + 发光 ---------- */
.card,.cat,.promo-card{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.84));
  border: 1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(120,30,60,.10), 0 2px 10px rgba(160,107,255,.08),
              inset 0 1px 0 rgba(255,255,255,.7);
}
.card:hover,.cat:hover{
  transform: translateY(-8px);
  border-color: rgba(255,61,127,.45);
  box-shadow: 0 22px 56px rgba(120,30,60,.16), 0 0 0 1px rgba(255,61,127,.22),
              0 10px 34px rgba(160,107,255,.30);
}
.card .thumb img{ transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.card:hover .thumb img{ transform: scale(1.07); }

/* 卡片图片加载微光(悬停时扫光) */
.card .thumb{ position:relative; overflow:hidden; }
.card .thumb::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s ease;
}
.card:hover .thumb::after{ transform: translateX(120%); }

/* ---------- 发光丝带/角标 ---------- */
.card .ribbon{
  background: linear-gradient(135deg, var(--brand), var(--neon));
  box-shadow: 0 6px 16px var(--glow-pink), 0 0 12px var(--glow-purple);
}
.card .ribbon.hot{
  background: linear-gradient(135deg, var(--gold), #ff7a3d);
  color:#5a2c00; box-shadow: 0 6px 16px var(--glow-gold);
}

/* ---------- 会员价徽章发光 ---------- */
.mbadge{
  box-shadow: 0 4px 12px var(--glow-purple);
  background: linear-gradient(135deg, var(--neon), var(--neon-2));
}

/* ---------- 发光按钮(页面主按钮) ---------- */
.card .buy,.slide .btn,.summary .go,.actions button,.actions a,.mg-btn,.scan-go{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 10px 24px var(--glow-pink);
  transition: transform .18s ease, box-shadow .28s ease, filter .2s ease;
}
.card .buy:hover,.summary .go:hover,.actions button:hover,.actions a:hover,.mg-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px var(--glow-pink), 0 0 24px rgba(255,61,127,.40);
  filter: saturate(1.08);
}
.slide .btn{ color: var(--brand); box-shadow: 0 10px 28px rgba(255,255,255,.5); }
.slide .btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px rgba(255,255,255,.7); }

/* ---------- Hero 轮播霓虹光晕 ---------- */
.slide{ position:relative; overflow:hidden; }
.slide::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(440px 340px at 86% 18%, rgba(160,107,255,.30), transparent 60%),
    radial-gradient(380px 320px at 10% 92%, rgba(255,138,61,.24), transparent 60%);
  mix-blend-mode: screen;
}
.slide .deco{ animation: neonFloat 6s ease-in-out infinite; }
@keyframes neonFloat{
  0%,100%{ transform: translateY(-50%) rotate(-4deg); }
  50%{ transform: translateY(-42%) rotate(4deg); }
}
.carousel-arrow{ background: rgba(255,255,255,.92); box-shadow: 0 6px 18px var(--glow-pink); }
.carousel-dots button.active{ box-shadow: 0 0 10px var(--glow-pink); }

/* ---------- 扫码进店 / TikTok 引流 发光 ---------- */
.scan-visit{
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,240,245,.92));
  border: 1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(120,30,60,.10), 0 2px 10px rgba(160,107,255,.10),
              inset 0 1px 0 rgba(255,255,255,.7);
}
.tiktok-cta{
  border: none; color:#fff;
  background: linear-gradient(120deg, #ff3d7f, var(--neon) 58%, var(--neon-2));
  box-shadow: 0 16px 40px var(--glow-pink), 0 8px 30px var(--glow-purple);
}
.tiktok-cta .tc-txt h4{ color:#fff; }
.tiktok-cta .tk-ic{ filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }

/* ---------- 分类卡 ---------- */
.cat{ background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.84)); }
.cat:hover{ border-color: var(--brand); }

/* ---------- 页脚 ---------- */
.foot .about{ opacity:.92; }

/* ============================================================
   商品详情页 (product.html)
   ============================================================ */
.gallery .main{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 16px 44px rgba(120,30,60,.16), 0 0 0 1px rgba(160,107,255,.18);
}
.gallery .thumbs div{
  border-radius: 12px; overflow:hidden; border: 2px solid transparent; transition: .2s;
}
.gallery .thumbs div.active,
.gallery .thumbs div:hover{ border-color: var(--brand); box-shadow: 0 0 14px var(--glow-pink); }
.price-box{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
  border: 1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: var(--radius); padding: 18px;
  box-shadow: 0 10px 30px rgba(120,30,60,.10), inset 0 1px 0 rgba(255,255,255,.7);
}
.price-box .now{
  background: linear-gradient(135deg, var(--brand), var(--neon));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.perks{ gap: 12px; }
.perks .perk{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
  border: 1px solid rgba(255,255,255,.7); border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 8px 22px rgba(120,30,60,.08);
}
.tab-head button.active{ color: var(--brand); box-shadow: inset 0 -3px 0 var(--brand); }
.spec-table{ background: rgba(255,255,255,.7); border-radius: 14px; overflow:hidden; }

/* ============================================================
   购物车 (cart.html)
   ============================================================ */
.row{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.82));
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(120,30,60,.08), inset 0 1px 0 rgba(255,255,255,.7);
  transition: .2s;
}
.row:hover{ box-shadow: 0 12px 30px rgba(160,107,255,.18); }

/* ============================================================
   结算 (checkout.html)
   ============================================================ */
.steps .s .n{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff; box-shadow: 0 4px 12px var(--glow-pink);
}
.steps .s.active{
  color: var(--brand);
  background: linear-gradient(180deg, #fff, #fff0f5);
  box-shadow: 0 0 0 2px var(--brand), 0 8px 22px var(--glow-pink);
}
.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.85));
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(120,30,60,.10), inset 0 1px 0 rgba(255,255,255,.7);
}
.pay label{
  border: 1.5px solid var(--line); border-radius: 14px; transition: .2s;
}
.pay label:hover, .pay label.sel{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255,61,127,.15);
}

/* ============================================================
   滚动入场动效(默认隐藏, 由 neon.js 加 .in 显示)
   用 .js 门控: 无 JS 时不隐藏, 内容始终可见
   ============================================================ */
.js .reveal{ opacity:0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  .slide .deco{ animation:none; }
  .card:hover .thumb img{ transform:none; }
}