/* ══════════════════════════════════════════════════════
   Avatar Theme Hero Banners — 5大专题炫酷设计
   male | female | couple | anime | cute
   ══════════════════════════════════════════════════════ */

/* ── 基础容器 ── */
.theme-hero{position:relative;overflow:hidden;padding:80px 20px 70px;text-align:center;color:#fff}
.theme-hero-icon{width:88px;height:88px;margin:0 auto 20px;position:relative;z-index:2;
 display:flex;align-items:center;justify-content:center;font-size:42px;
 border-radius:22px;backdrop-filter:blur(12px)}
.theme-hero h1{font-size:50px;font-weight:900;margin:0 0 10px;position:relative;z-index:2;
 letter-spacing:6px;
 background:linear-gradient(135deg,#fff 0%,#d0e0ff 40%,#6ba0ff 100%);
 -webkit-background-clip:text;background-clip:text;color:transparent}
.theme-hero p{font-size:18px;position:relative;z-index:2;font-weight:300;letter-spacing:6px;margin:0 0 32px}
.theme-hero-stats{display:flex;justify-content:center;gap:60px;position:relative;z-index:2;flex-wrap:wrap}
.theme-hero-stat{text-align:center;padding:0 24px;position:relative}
.theme-hero-stat:not(:last-child)::after{content:'';position:absolute;right:-30px;top:10%;height:80%;width:1px;
 background:linear-gradient(180deg,transparent,rgba(255,255,255,.2),transparent)}
.theme-hero-stat-num{font-size:36px;font-weight:800;display:block}
.theme-hero-stat-lbl{font-size:13px;margin-top:4px;letter-spacing:3px;opacity:.7}

/* ═══════════════════════════════════
   MALE — 暗蓝网格 + 光扫 + 硬朗科技
   ═══════════════════════════════════ */
.male{background:linear-gradient(160deg,#080d1a 0%,#0c1830 25%,#111e40 50%,#0b1428 75%,#060a14 100%)}

/* 网格纹理 */
.male::before{content:'';position:absolute;inset:0;z-index:0;opacity:.06;
 background-image:
  linear-gradient(rgba(74,124,247,.4) 1px,transparent 1px),
  linear-gradient(90deg,rgba(74,124,247,.4) 1px,transparent 1px);
 background-size:32px 32px}

/* 斜向光扫 + 中心光柱 */
.male::after{content:'';position:absolute;top:-30%;left:-30%;width:160%;height:160%;z-index:1;
 background:
  linear-gradient(125deg,transparent 38%,rgba(74,140,255,.04) 43%,rgba(100,180,255,.07) 50%,rgba(74,140,255,.04) 57%,transparent 62%),
  radial-gradient(ellipse 50% 40% at 50% 45%,rgba(74,124,247,.1) 0%,transparent 60%);
 animation:maleSweep 8s linear infinite,maleGlow 4s ease-in-out infinite}
@keyframes maleSweep{0%{transform:translate(-20%,-20%)}100%{transform:translate(20%,20%)}}
@keyframes maleGlow{0%,100%{opacity:.8}50%{opacity:1}}

/* 左侧装饰 — 旋转六边形 */
.male .hero-decor-left{position:absolute;left:-40px;top:25%;width:180px;height:180px;z-index:0;
 border:1.5px solid rgba(74,124,247,.12);border-radius:24%;
 animation:maleHexRotate 12s linear infinite}
@keyframes maleHexRotate{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.15)}100%{transform:rotate(360deg) scale(1)}}

/* 右侧装饰 — 旋转矩形 */
.male .hero-decor-right{position:absolute;right:-20px;bottom:20%;width:120px;height:120px;z-index:0;
 border:1.5px solid rgba(74,124,247,.1);border-radius:8px;
 animation:maleRectSpin 10s linear infinite reverse}
@keyframes maleRectSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* 底部光条 */
.male .hero-bottom-bar{position:absolute;bottom:0;left:0;right:0;height:3px;z-index:3;
 background:linear-gradient(90deg,transparent 0%,rgba(74,140,255,.2) 15%,#4a7cf7 30%,#7c9eff 50%,#4a7cf7 70%,rgba(74,140,255,.2) 85%,transparent 100%);
 animation:maleBarPulse 3s ease-in-out infinite}
@keyframes maleBarPulse{0%,100%{opacity:.7}50%{opacity:1}}

/* 一些悬浮光点 (box-shadow集群) */
.male .hero-decor-dots{position:absolute;inset:0;z-index:0;pointer-events:none}

/* 图标 */
.male .theme-hero-icon{
 background:linear-gradient(135deg,rgba(59,130,246,.22),rgba(99,150,255,.1));
 border:1.5px solid rgba(99,150,255,.25);
 box-shadow:0 8px 48px rgba(59,130,246,.18),0 0 80px rgba(59,130,246,.06),inset 0 1px 0 rgba(255,255,255,.04)}

/* 标题 — 继承基类白→蓝渐变 */

/* 副标题 */
.male p{color:#7a9cc8}

/* 统计数字 */
.male .theme-hero-stat-num{color:#7c9eff}
.male .theme-hero-stat-lbl{color:rgba(160,190,240,.6)}
.male .theme-hero-stat:not(:last-child)::after{background:linear-gradient(180deg,transparent,rgba(99,150,255,.25),transparent)}

/* ═══════════════════════════════════
   FEMALE — 粉紫梦幻光晕 + 浮动粒子 (加深版)
   ═══════════════════════════════════ */
.female{background:linear-gradient(160deg,#f0d8e8 0%,#e4c8f0 22%,#eed4e8 45%,#dcc4f0 65%,#e8d0ec 85%,#f0d8e8 100%);color:#4a3048}

/* 柔光斑 */
.female::before{content:'';position:absolute;inset:0;z-index:0;
 background:
  radial-gradient(ellipse 40% 30% at 20% 30%,rgba(232,120,138,.15) 0%,transparent 60%),
  radial-gradient(ellipse 35% 25% at 75% 25%,rgba(180,100,240,.14) 0%,transparent 55%),
  radial-gradient(ellipse 30% 35% at 50% 60%,rgba(220,100,170,.1) 0%,transparent 50%),
  radial-gradient(ellipse 25% 20% at 35% 80%,rgba(200,150,240,.1) 0%,transparent 50%),
  radial-gradient(ellipse 20% 15% at 70% 70%,rgba(240,140,180,.08) 0%,transparent 40%)}

/* 浮动光点粒子 */
.female::after{content:'';position:absolute;inset:0;z-index:0;
 background-image:
  radial-gradient(3px 3px at 10% 20%,rgba(232,120,138,.6),transparent),
  radial-gradient(2px 2px at 25% 35%,rgba(192,132,252,.5),transparent),
  radial-gradient(4px 4px at 45% 15%,rgba(244,114,182,.45),transparent),
  radial-gradient(2px 2px at 60% 30%,rgba(220,110,150,.55),transparent),
  radial-gradient(3px 3px at 75% 20%,rgba(180,120,240,.5),transparent),
  radial-gradient(2px 2px at 85% 40%,rgba(240,160,190,.45),transparent),
  radial-gradient(3px 3px at 15% 65%,rgba(244,114,182,.4),transparent),
  radial-gradient(2px 2px at 35% 75%,rgba(200,120,160,.45),transparent),
  radial-gradient(4px 4px at 55% 70%,rgba(180,120,240,.4),transparent),
  radial-gradient(2px 2px at 80% 65%,rgba(240,160,190,.4),transparent),
  radial-gradient(3px 3px at 20% 50%,rgba(244,114,182,.38),transparent),
  radial-gradient(2px 2px at 68% 55%,rgba(210,110,150,.45),transparent),
  radial-gradient(3px 3px at 90% 15%,rgba(180,120,240,.42),transparent),
  radial-gradient(2px 2px at 40% 90%,rgba(240,160,190,.35),transparent);
 animation:femaleSparkle 4s ease-in-out infinite}
@keyframes femaleSparkle{0%,100%{opacity:.7}50%{opacity:1}}

/* 图标 */
.female .theme-hero-icon{
 background:linear-gradient(135deg,rgba(232,120,138,.25),rgba(180,110,240,.2));
 border:1.5px solid rgba(232,120,138,.3);
 box-shadow:0 8px 40px rgba(232,120,138,.15),0 0 60px rgba(180,110,240,.12),inset 0 1px 0 rgba(255,255,255,.25);
 animation:femaleIconGlow 3s ease-in-out infinite}
@keyframes femaleIconGlow{0%,100%{box-shadow:0 8px 40px rgba(232,120,138,.15),0 0 60px rgba(180,110,240,.12)}50%{box-shadow:0 12px 52px rgba(232,120,138,.25),0 0 80px rgba(180,110,240,.2)}}

/* 标题 — 粉紫渐变 */
.female h1{background:linear-gradient(135deg,#d45878 0%,#a040d0 50%,#9040e0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* 副标题 */
.female p{color:#906080}

/* 统计 */
.female .theme-hero-stat-num{color:#c05070}
.female .theme-hero-stat-lbl{color:rgba(140,70,110,.75)}
.female .theme-hero-stat:not(:last-child)::after{background:linear-gradient(180deg,transparent,rgba(180,110,240,.3),transparent)}

/* 底部光条 */
.female .hero-bottom-bar{position:absolute;bottom:0;left:0;right:0;height:3px;z-index:3;
 background:linear-gradient(90deg,transparent 0%,rgba(210,100,140,.25) 15%,#d06080 30%,#a050e0 50%,#d06080 70%,rgba(210,100,140,.25) 85%,transparent 100%);
 animation:femaleBarPulse 3s ease-in-out infinite}
@keyframes femaleBarPulse{0%,100%{opacity:.7}50%{opacity:1}}

/* ═══════════════════════════════════
   COUPLE — 粉橙心跳脉冲 + 爱心粒子
   ═══════════════════════════════════ */
.couple{background:linear-gradient(150deg,#fff0f5 0%,#ffe4e8 20%,#fff5f0 40%,#ffe4ec 60%,#fdf0f5 80%,#fff0f5 100%)}

/* 底部渐变装饰条 */
.couple::before{content:'';position:absolute;inset:0;z-index:0;
 background:
  radial-gradient(ellipse 45% 35% at 30% 35%,rgba(244,114,182,.1) 0%,transparent 50%),
  radial-gradient(ellipse 40% 30% at 70% 40%,rgba(251,146,60,.08) 0%,transparent 50%),
  radial-gradient(ellipse 35% 30% at 50% 65%,rgba(255,140,160,.06) 0%,transparent 45%)}

/* 爱心粒子漂浮 */
.couple::after{content:'';position:absolute;inset:0;z-index:0;
 background-image:
  radial-gradient(3px 3px at 15% 25%,rgba(244,114,182,.4),transparent),
  radial-gradient(2px 2px at 35% 30%,rgba(251,146,60,.35),transparent),
  radial-gradient(3px 3px at 55% 20%,rgba(244,114,182,.3),transparent),
  radial-gradient(2px 2px at 72% 35%,rgba(255,140,160,.4),transparent),
  radial-gradient(3px 3px at 85% 28%,rgba(244,114,182,.35),transparent),
  radial-gradient(2px 2px at 20% 70%,rgba(251,146,60,.3),transparent),
  radial-gradient(3px 3px at 40% 65%,rgba(255,140,160,.35),transparent),
  radial-gradient(2px 2px at 60% 72%,rgba(244,114,182,.3),transparent),
  radial-gradient(3px 3px at 80% 68%,rgba(251,146,60,.25),transparent),
  radial-gradient(2px 2px at 50% 40%,rgba(244,114,182,.4),transparent);
 animation:coupleHearts 5s ease-in-out infinite}
@keyframes coupleHearts{0%,100%{opacity:.6}50%{opacity:1}}

/* 图标 — 心跳脉冲 */
.couple .theme-hero-icon{
 background:linear-gradient(135deg,rgba(244,114,182,.18),rgba(251,146,60,.12));
 border:2px solid rgba(244,114,182,.2);
 box-shadow:0 0 40px rgba(244,114,182,.2),0 8px 32px rgba(244,114,182,.15);
 animation:heartPulse 1.5s ease-in-out infinite}
@keyframes heartPulse{0%,100%{transform:scale(1);box-shadow:0 0 40px rgba(244,114,182,.2),0 8px 32px rgba(244,114,182,.15)}
 15%{transform:scale(1.08);box-shadow:0 0 60px rgba(244,114,182,.35),0 12px 40px rgba(244,114,182,.25)}
 30%{transform:scale(.98)}
 45%{transform:scale(1.05);box-shadow:0 0 55px rgba(244,114,182,.3),0 10px 38px rgba(244,114,182,.2)}
 60%{transform:scale(1)}}

/* 标题 — 粉橙暖渐变 */
.couple h1{background:linear-gradient(135deg,#e8588a 0%,#f09070 50%,#f59e4b 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* 副标题 */
.couple p{color:#c08090}

/* 统计 */
.couple .theme-hero-stat-num{color:#e8588a}
.couple .theme-hero-stat-lbl{color:rgba(180,100,120,.7)}
.couple .theme-hero-stat:not(:last-child)::after{background:linear-gradient(180deg,transparent,rgba(244,114,182,.3),transparent)}

/* 底部光条 */
.couple .hero-bottom-bar{position:absolute;bottom:0;left:0;right:0;height:3px;z-index:3;
 background:linear-gradient(90deg,transparent 0%,rgba(244,114,182,.2) 15%,#f472b6 30%,#fb923c 50%,#f472b6 70%,rgba(244,114,182,.2) 85%,transparent 100%);
 animation:coupleBarPulse 2s ease-in-out infinite}
@keyframes coupleBarPulse{0%,100%{opacity:.7}50%{opacity:1}}

/* ═══════════════════════════════════
   ANIME — 二次元星空 + 霓虹流星
   ═══════════════════════════════════ */
.anime{background:linear-gradient(160deg,#0d0b1a 0%,#140f28 22%,#1a1035 45%,#120d28 65%,#0b0916 85%,#0d0b1a 100%);color:#e8d5ff}

/* 星空粒子 — 密集星点 */
.anime::before{content:'';position:absolute;inset:0;z-index:0;
 background-image:
  radial-gradient(1.5px 1.5px at 12% 15%,rgba(255,150,200,.8),transparent),
  radial-gradient(2px 2px at 28% 22%,rgba(124,58,237,.7),transparent),
  radial-gradient(1px 1px at 45% 10%,rgba(255,200,220,.9),transparent),
  radial-gradient(2px 2px at 62% 18%,rgba(255,107,157,.6),transparent),
  radial-gradient(1px 1px at 78% 12%,rgba(192,132,252,.8),transparent),
  radial-gradient(1.5px 1.5px at 90% 25%,rgba(255,150,200,.7),transparent),
  radial-gradient(1px 1px at 15% 38%,rgba(124,58,237,.6),transparent),
  radial-gradient(2px 2px at 33% 42%,rgba(255,107,157,.7),transparent),
  radial-gradient(1px 1px at 55% 35%,rgba(255,200,220,.75),transparent),
  radial-gradient(1.5px 1.5px at 70% 40%,rgba(192,132,252,.6),transparent),
  radial-gradient(2px 2px at 88% 38%,rgba(255,150,200,.65),transparent),
  radial-gradient(1px 1px at 20% 55%,rgba(124,58,237,.5),transparent),
  radial-gradient(1.5px 1.5px at 40% 58%,rgba(255,107,157,.6),transparent),
  radial-gradient(2px 2px at 60% 52%,rgba(255,200,220,.7),transparent),
  radial-gradient(1px 1px at 82% 55%,rgba(192,132,252,.5),transparent),
  radial-gradient(1.5px 1.5px at 8% 70%,rgba(255,150,200,.55),transparent),
  radial-gradient(1px 1px at 25% 72%,rgba(124,58,237,.45),transparent),
  radial-gradient(2px 2px at 48% 68%,rgba(255,107,157,.55),transparent),
  radial-gradient(1px 1px at 68% 72%,rgba(255,200,220,.6),transparent),
  radial-gradient(1.5px 1.5px at 85% 70%,rgba(192,132,252,.5),transparent),
  radial-gradient(1px 1px at 35% 85%,rgba(255,150,200,.4),transparent),
  radial-gradient(2px 2px at 55% 82%,rgba(124,58,237,.45),transparent),
  radial-gradient(1.5px 1.5px at 75% 85%,rgba(255,107,157,.5),transparent),
  radial-gradient(1px 1px at 92% 60%,rgba(255,200,220,.55),transparent)}

/* 流星 — 三颗不同时机 */
.anime::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
 background:
  linear-gradient(135deg,transparent 40%,rgba(255,255,255,.6),transparent 41%) 0 0/120px 2px no-repeat,
  linear-gradient(135deg,transparent 40%,rgba(255,200,255,.4),transparent 41%) 0 0/80px 1.5px no-repeat,
  linear-gradient(135deg,transparent 40%,rgba(200,150,255,.45),transparent 41%) 0 0/100px 1.5px no-repeat;
 animation:
  animeMeteor1 3s linear infinite,
  animeMeteor2 4s linear 1.5s infinite,
  animeMeteor3 3.5s linear .8s infinite}
@keyframes animeMeteor1{0%{background-position:-120px -120px,0 0,0 0}100%{background-position:calc(100% + 120px) calc(100% + 120px),0 0,0 0}}
@keyframes animeMeteor2{0%{background-position:0 0,-80px -80px,0 0}100%{background-position:0 0,calc(100% + 80px) calc(100% + 80px),0 0}}
@keyframes animeMeteor3{0%{background-position:0 0,0 0,-100px -100px}100%{background-position:0 0,0 0,calc(100% + 100px) calc(100% + 100px)}}

/* 图标 */
.anime .theme-hero-icon{
 background:linear-gradient(135deg,rgba(255,107,157,.22),rgba(124,58,237,.14));
 border:2px solid rgba(255,107,157,.25);
 box-shadow:0 0 50px rgba(255,107,157,.18),0 0 80px rgba(124,58,237,.12),0 8px 40px rgba(255,107,157,.1);
 animation:animeGlow 3s ease-in-out infinite}
@keyframes animeGlow{0%,100%{box-shadow:0 0 50px rgba(255,107,157,.18),0 0 80px rgba(124,58,237,.12)}50%{box-shadow:0 0 70px rgba(255,107,157,.3),0 0 100px rgba(124,58,237,.2)}}

/* 标题 — 霓虹粉紫渐变 */
.anime h1{background:linear-gradient(135deg,#ff6b9d 0%,#e088f0 50%,#c084fc 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* 副标题 */
.anime p{color:#b8a0d0}

/* 统计 */
.anime .theme-hero-stat-num{color:#C084FC}
.anime .theme-hero-stat-lbl{color:rgba(180,150,210,.7)}
.anime .theme-hero-stat:not(:last-child)::after{background:linear-gradient(180deg,transparent,rgba(255,107,157,.25),transparent)}

/* 底部光条 */
.anime .hero-bottom-bar{position:absolute;bottom:0;left:0;right:0;height:3px;z-index:3;
 background:linear-gradient(90deg,transparent 0%,rgba(255,107,157,.2) 15%,#ff6b9d 30%,#c084fc 50%,#ff6b9d 70%,rgba(255,107,157,.2) 85%,transparent 100%);
 animation:animeBarPulse 3s ease-in-out infinite}
@keyframes animeBarPulse{0%,100%{opacity:.7}50%{opacity:1}}

/* ═══════════════════════════════════
   CUTE — 梦幻泡泡乐园 · 柔光漂浮
   ═══════════════════════════════════ */
.cute{background:linear-gradient(160deg,#fff0f0 0%,#fef0f5 22%,#f8f0ff 45%,#f0f8f5 65%,#fef5f0 85%,#fff0f0 100%);color:#5a4a5a}

/* 底层柔光斑 — 大块梦幻光晕 */
.cute::before{content:'';position:absolute;inset:0;z-index:0;
 background:
  radial-gradient(ellipse 50% 40% at 25% 35%,rgba(255,180,160,.12) 0%,transparent 55%),
  radial-gradient(ellipse 45% 35% at 70% 30%,rgba(200,160,240,.1) 0%,transparent 55%),
  radial-gradient(ellipse 40% 35% at 50% 60%,rgba(160,210,200,.1) 0%,transparent 50%),
  radial-gradient(ellipse 35% 30% at 15% 70%,rgba(255,200,180,.08) 0%,transparent 45%),
  radial-gradient(ellipse 30% 25% at 80% 65%,rgba(220,180,240,.08) 0%,transparent 45%)}

/* 中心柔光聚光灯 */
.cute::after{content:'';position:absolute;inset:0;z-index:0;
 background:radial-gradient(ellipse 50% 35% at 50% 45%,rgba(255,255,255,.4) 0%,transparent 65%);
 animation:cuteGlow 5s ease-in-out infinite}
@keyframes cuteGlow{0%,100%{opacity:.5}50%{opacity:.85}}

/* ── 三颗大梦幻球 ── */
.cute-orb{position:absolute;border-radius:50%;z-index:1;pointer-events:none;filter:blur(2px)}

/* 梦球1 — 蜜桃色 · 左上 */
.cute-orb.o1{width:90px;height:90px;left:8%;top:18%;
 background:radial-gradient(circle at 35% 30%,rgba(255,180,160,.35) 0%,rgba(255,160,140,.1) 40%,transparent 70%);
 animation:orb1 6s ease-in-out infinite}
@keyframes orb1{0%,100%{transform:translate(0,0) scale(1);opacity:.55}
 25%{transform:translate(25px,-18px) scale(1.12);opacity:.7}
 50%{transform:translate(-5px,15px) scale(.94);opacity:.48}
 75%{transform:translate(-15px,-10px) scale(1.06);opacity:.62}}

/* 梦球2 — 薰衣草 · 右上 */
.cute-orb.o2{width:75px;height:75px;right:12%;top:22%;
 background:radial-gradient(circle at 35% 30%,rgba(190,150,240,.32) 0%,rgba(170,130,230,.08) 40%,transparent 70%);
 animation:orb2 7s ease-in-out infinite .8s}
@keyframes orb2{0%,100%{transform:translate(0,0) scale(1);opacity:.5}
 33%{transform:translate(-20px,12px) scale(1.15);opacity:.68}
 66%{transform:translate(12px,-16px) scale(.9);opacity:.44}}

/* 梦球3 — 薄荷色 · 右下 */
.cute-orb.o3{width:65px;height:65px;right:20%;bottom:28%;
 background:radial-gradient(circle at 35% 30%,rgba(150,210,190,.3) 0%,rgba(130,200,180,.08) 40%,transparent 70%);
 animation:orb3 6.5s ease-in-out infinite 1.2s}
@keyframes orb3{0%,100%{transform:translate(0,0) scale(1);opacity:.48}
 25%{transform:translate(-18px,-14px) scale(1.1);opacity:.65}
 50%{transform:translate(10px,18px) scale(.92);opacity:.42}
 75%{transform:translate(16px,-6px) scale(1.04);opacity:.58}}

/* ── 图标 — 柔光弹跳 ── */
.cute .theme-hero-icon{
 background:linear-gradient(135deg,rgba(255,160,140,.22),rgba(180,140,230,.2));
 border:2px solid rgba(255,160,140,.22);
 box-shadow:0 8px 40px rgba(255,160,140,.12),0 0 60px rgba(180,140,230,.1),inset 0 1px 0 rgba(255,255,255,.3);
 animation:cuteBounce 2.8s ease-in-out infinite}
@keyframes cuteBounce{0%,100%{transform:translateY(0)}12%{transform:translateY(-8px)}24%{transform:translateY(-2px)}36%{transform:translateY(-5px)}48%{transform:translateY(0)}}

/* 标题 — 蜜桃紫渐变 */
.cute h1{background:linear-gradient(135deg,#e87890 0%,#c090e8 55%,#a890e8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* 副标题 */
.cute p{color:#a888a0}

/* 统计 */
.cute .theme-hero-stat-num{color:#c090d0}
.cute .theme-hero-stat-lbl{color:rgba(150,120,150,.7)}
.cute .theme-hero-stat:not(:last-child)::after{background:linear-gradient(180deg,transparent,rgba(180,140,230,.2),transparent)}

/* 底部光条 — 蜜桃→薰衣草→薄荷 */
.cute .hero-bottom-bar{position:absolute;bottom:0;left:0;right:0;height:3px;z-index:3;
 background:linear-gradient(90deg,transparent 0%,rgba(255,160,140,.2) 12%,#f0a090 28%,#c090e0 50%,#90c8b8 72%,rgba(150,210,190,.2) 88%,transparent 100%);
 animation:cuteBarPulse 3s ease-in-out infinite}
@keyframes cuteBarPulse{0%,100%{opacity:.65}50%{opacity:1}}

/* ═══════════════════════════════════
   响应式
   ═══════════════════════════════════ */
@media(max-width:768px){
 .theme-hero{padding:56px 16px 48px}
 .theme-hero h1{font-size:30px;letter-spacing:3px}
 .theme-hero p{font-size:15px;letter-spacing:3px}
 .theme-hero-stats{gap:28px}
 .theme-hero-stat-num{font-size:28px}
 .theme-hero-stat:not(:last-child){padding-right:20px}
 .theme-hero-stat:not(:last-child)::after{right:-14px}
}

/* ── 分页 & 筛选 ── */
.pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:32px;padding:20px 0}
.page-btn{padding:8px 16px;border:1px solid #ddd;border-radius:8px;background:#fff;color:#555;font-size:14px;cursor:pointer;transition:all .15s;text-decoration:none;min-width:40px;text-align:center}
.page-btn:hover{border-color:var(--accent);color:var(--accent)}
.page-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.page-btn:disabled{opacity:.4;cursor:not-allowed}
.page-info{font-size:13px;color:#888;margin:0 8px}
.filter-bar{margin-bottom:12px;display:flex;align-items:flex-start;gap:0}
.filter-bar-label{font-size:13px;color:#8B8FA3;white-space:nowrap;padding:6px 0;width:56px;flex-shrink:0;line-height:1.6}
.filter-bar-items{display:flex;gap:8px;flex-wrap:wrap;flex:1;align-items:center}
.filter-chip{padding:6px 16px;border-radius:20px;font-size:13px;cursor:pointer;background:transparent;color:#555;transition:all .15s;white-space:nowrap;user-select:none;line-height:1.4}
.filter-chip:hover{background:#EEEEF2;color:#1B2337}
.filter-chip.active{background:#E4E5EA;color:#1B2337;font-weight:500}
.filter-chip-more{color:#8B8FA3}
.filter-chip-more::after{content:' ▶';font-size:10px}
.filter-chip-hidden{display:none}