/* ============================================================
 * Quantum Match — 量子配对 · 爱的礼物（浅色版，与整站和谐）
 * 作用域限定 .qz-resonance；量子对讲机设计语言 × 站点主题 #7020ff
 * ============================================================ */
.qz-resonance {
  --qz-base: #7020ff;
  --qz-blue: #3b82f6;
  --qz-violet: #8b5cf6;
  --qz-pink: #ec4899;
  --qz-cyan: #0ea5b7;
  --qz-grad: linear-gradient(120deg, var(--qz-base), var(--qz-violet) 55%, var(--qz-pink));
  --qz-ink: #23263b;
  --qz-sub: #6a6f8f;
  --qz-line: #e9e6f8;
  position: relative;
  color: var(--qz-ink);
  background:
    radial-gradient(900px 420px at 85% -5%, rgba(112, 32, 255, .07), transparent 60%),
    radial-gradient(700px 380px at 0% 0%, rgba(236, 72, 153, .05), transparent 55%),
    #fbfaff;
  overflow: hidden;
}
.qz-resonance .qz-grid-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image:
    linear-gradient(rgba(112, 32, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 32, 255, .05) 1px, transparent 1px);
  background-size: 26px 26px;
  animation: qzr-interference 18s linear infinite;
}
@keyframes qzr-interference { 0% { background-position: 0% 0%; } 100% { background-position: 26px 26px; } }
@keyframes qzr-spin { to { transform: rotate(360deg); } }
@keyframes qzr-wave { 0% { transform: translateX(-120%);} 100% { transform: translateX(220%);} }
@keyframes qzr-rise { from { opacity:0; transform: translateY(22px);} to { opacity:1; transform: translateY(0);} }

/* 量子渐变文字 */
.qz-resonance .qz-title {
  background: var(--qz-grad);
  background-size: 220% 220%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: qzr-interference 6s ease-in-out infinite;
}
.qz-resonance .qz-kicker { color: var(--qz-base) !important; letter-spacing: .22em; font-size: 13px; font-weight: 700; }
.qz-resonance .qz-kicker::before, .qz-resonance .qz-kicker::after {
  content:''; display:inline-block; width:26px; height:1px; margin:0 12px;
  background: var(--qz-grad); vertical-align: middle; opacity: .6;
}

/* Hero + HUD 光环 */
.qz-resonance .qz-hero { position: relative; overflow: hidden; padding: 56px 20px 28px; text-align: center; }
.qz-resonance .qz-hero::before, .qz-resonance .qz-hero::after {
  content:''; position:absolute; border-radius:50%; pointer-events:none;
}
.qz-resonance .qz-hero::before {
  width:480px; height:480px; right:-130px; top:-120px; border:1px solid rgba(112,32,255,.22);
  box-shadow: inset 0 0 60px rgba(112,32,255,.06);
  animation: qzr-spin 46s linear infinite; border-style: dashed;
}
.qz-resonance .qz-hero::after {
  width:330px; height:330px; right:-50px; top:-40px; border:1px solid rgba(236,72,153,.16);
  box-shadow: inset 0 0 46px rgba(236,72,153,.05); animation: qzr-spin-rev 32s linear infinite;
}
@keyframes qzr-spin-rev { to { transform: rotate(-360deg); } }
.qz-resonance .qz-title { font-size: clamp(28px, 4.5vw, 44px); font-weight: 800; margin: 10px 0 12px; }
.qz-resonance .qz-sub { color: var(--qz-sub); max-width: 640px; margin: 0 auto; font-size: 15px; line-height: 1.85; }
.qz-resonance .qz-sub b { color: var(--qz-base); }

/* 卡片与表单 */
.qz-resonance .qz-wrap { position: relative; max-width: 980px; margin: 0 auto; padding: 8px 20px 64px; }
.qz-resonance .qz-panel { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin: 24px 0; }
.qz-resonance .qz-card {
  position: relative; background:#fff; border:1px solid var(--qz-line);
  border-radius:16px; padding:22px; overflow:hidden;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.qz-resonance .qz-card:hover {
  border-color: rgba(112,32,255,.45);
  box-shadow: 0 12px 34px rgba(112,32,255,.12); transform: translateY(-3px);
}
.qz-resonance .qz-card::before {
  content:''; position:absolute; top:0; left:-60%; width:40%; height:1px;
  background: linear-gradient(90deg, transparent, var(--qz-base), transparent);
  animation: qzr-wave 4.5s linear infinite; pointer-events:none; opacity:.6;
}
.qz-resonance .qz-card h3 { font-size:15px; margin:0 0 12px; color: var(--qz-base); letter-spacing:.08em; }
.qz-resonance label { display:block; font-size:12px; color:var(--qz-sub); margin:12px 0 5px; }
.qz-resonance input, .qz-resonance select {
  width:100%; padding:10px 12px; border-radius:9px; font-size:14px;
  border:1px solid #ddd8f2; background:#fff; color:var(--qz-ink);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.qz-resonance input:focus, .qz-resonance select:focus {
  outline:none; border-color: var(--qz-base) !important;
  box-shadow: 0 0 0 3px rgba(112,32,255,.14) !important;
}

/* 流光按钮 */
.qz-resonance .qz-btn {
  position: relative; display:inline-block; overflow:hidden; border:none; cursor:pointer;
  margin-top:18px; padding:13px 44px; border-radius:999px; font-size:16px; font-weight:700; color:#fff;
  background: var(--qz-grad) !important; background-size:180% 180% !important;
  animation: qzr-interference 7s ease-in-out infinite; transition: transform .2s ease, box-shadow .25s ease;
}
.qz-resonance .qz-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(112,32,255,.35); }
.qz-resonance .qz-btn::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  animation: qzr-wave 3.2s ease-in-out infinite;
}
.qz-resonance .qz-center { text-align:center; }

/* 结果区 */
.qz-resonance .qz-result { display:none; text-align:center; padding: 26px 16px 8px; }
.qz-resonance .qz-ring {
  width:200px; height:200px; margin: 0 auto 16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; position:relative;
  background:
    radial-gradient(closest-side, #fbfaff 78%, transparent 79% 100%),
    conic-gradient(var(--qz-base) var(--p, 0%), rgba(112,32,255,.12) 0);
  box-shadow: 0 10px 40px rgba(112,32,255,.14);
}
.qz-resonance .qz-ring::before {
  content:''; position:absolute; inset:12px; border-radius:50%;
  border:1px dashed rgba(112,32,255,.4); animation: qzr-spin 18s linear infinite;
}
.qz-resonance .qz-pct { font-size:46px; font-weight:800;
  background: var(--qz-grad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.qz-resonance .qz-grade { color: var(--qz-base); letter-spacing:.3em; font-size:14px; margin-top:4px; }
.qz-resonance .qz-chips { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:16px 0 4px; }
.qz-resonance .qz-chip {
  background:#fff; border:1px solid var(--qz-line); border-radius:12px;
  padding:10px 16px; font-size:13px; color:var(--qz-sub); min-width:120px;
}
.qz-resonance .qz-chip b { display:block; color:var(--qz-ink); font-size:18px; margin-top:2px; }
.qz-resonance .qz-detail {
  margin-top:16px; text-align:left; font-size:13px; color:var(--qz-sub); line-height:1.95;
  background:rgba(112,32,255,.04); border:1px solid var(--qz-line); border-radius:12px; padding:16px 18px;
}
.qz-resonance .qz-detail b { color:var(--qz-ink); }
.qz-resonance .qz-hint { margin-top:14px; font-size:12px; color:#9a9dbb; }

/* 爱的礼物推荐区 */
.qz-resonance .qz-gifts { display:none; margin-top:26px; }
.qz-resonance .qz-gifts-head { text-align:center; margin-bottom:6px; }
.qz-resonance .qz-gifts-head h2 { font-size:20px; font-weight:800; margin:0 0 4px; }
.qz-resonance .qz-gifts-head p { color:var(--qz-sub); font-size:13px; margin:0; }
.qz-resonance .qz-gift-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:14px; }
.qz-resonance .qz-gcard {
  position:relative; display:block; background:#fff; border:1px solid var(--qz-line);
  border-radius:14px; overflow:hidden; text-decoration:none; color:var(--qz-ink);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.qz-resonance .qz-gcard:hover {
  border-color: rgba(112,32,255,.5); box-shadow: 0 12px 30px rgba(112,32,255,.13);
  transform: translateY(-3px); text-decoration:none; color:var(--qz-ink);
}
.qz-resonance .qz-gcard .qz-gimg { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:#f4f2fb; }
.qz-resonance .qz-gcard .qz-gtag {
  position:absolute; top:10px; left:10px; font-size:11px; font-weight:700; color:#fff;
  background: var(--qz-grad); padding:3px 10px; border-radius:999px; letter-spacing:.06em;
}
.qz-resonance .qz-gcard .qz-gbody { padding:12px 14px 14px; }
.qz-resonance .qz-gcard .qz-gname { font-size:14px; font-weight:600; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:40px; }
.qz-resonance .qz-gcard .qz-gprice { margin-top:6px; font-size:16px; font-weight:800; color:var(--qz-base); }
.qz-resonance .qz-gcard .qz-glink { margin-top:6px; font-size:12px; color:var(--qz-sub); }
.qz-resonance .qz-gcard:hover .qz-glink { color:var(--qz-base); }

/* 滚动入场 */
.qz-resonance .qz-reveal { opacity:0; }
.qz-resonance .qz-reveal.qz-in { animation: qzr-rise .7s ease both; }

@media (max-width: 720px) {
  .qz-resonance .qz-panel { grid-template-columns:1fr; }
  .qz-resonance .qz-hero::before { width:300px; height:300px; right:-100px; }
  .qz-resonance .qz-hero::after { width:210px; height:210px; right:-45px; }
  .qz-resonance .qz-gift-grid { grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .qz-resonance .qz-hero::before, .qz-resonance .qz-hero::after,
  .qz-resonance .qz-card::before, .qz-resonance .qz-btn, .qz-resonance .qz-btn::after,
  .qz-resonance .qz-title, .qz-resonance .qz-grid-bg,
  .qz-resonance .qz-ring, .qz-resonance .qz-ring::before { animation: none !important; }
}