:root{
      --bg:var(--bg3);
      --bg1:#FAF5FF;
      --bg2:#F3E8FF;
      --bg3:#F5F0FF;
      --bg1-rgb:250, 245, 255;
      --bg-soft:#EDE8FF;
      --panel:#ffffff;
      --panel-soft:rgba(255, 255, 255, .72);
      --primary:#4A0080;
      --primary-rgb:74, 0, 128;
      --primary-strong:#6B21A8;
      --primary-strong-rgb:107, 33, 168;
      --accent:#7C3AED;
      --accent-rgb:124, 58, 237;
      --violet-rgb:139, 92, 246;
      --glow:#A855F7;
      --glow-rgb:168, 85, 247;
      --glow-soft-rgb:192, 132, 252;
      --dark:#2D0057;
      --dark-rgb:45, 0, 87;
      --header-rgb1:245, 240, 255;
      --header-rgb2:237, 233, 254;
      --text:#1a0533;
      --muted:#4f6380;
      --shadow:0 12px 30px rgba(var(--primary-rgb), .15);
      --shadow-strong:0 18px 44px rgba(var(--primary-rgb), .22);
      --hover-shadow:0 10px 22px rgba(var(--glow-rgb),.38), 0 0 22px rgba(var(--glow-rgb),.22);
      --hover-border:rgba(var(--glow-rgb),.55);
      --radius:16px;
    }
















































    *{box-sizing:border-box;-webkit-text-size-adjust: none;text-size-adjust: none;}
    img{ 
  -webkit-user-drag:none; 
  user-select:none; 
  pointer-events: none;
  -webkit-touch-callout: none;}
    @media print{ body{ display:none !important; } }
    html,body{min-height:100%;overflow-x:hidden;}
    
    body{
      margin:0;
      padding-top: 80px;
      background:
        radial-gradient(900px 500px at 10% -10%, rgba(var(--glow-rgb),.18), transparent 60%),
        radial-gradient(900px 500px at 110% 0%, rgba(var(--glow-soft-rgb),.15), transparent 60%),
        linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 45%, var(--bg3) 100%);
      color:var(--text);
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
      line-height:1.6;
      -webkit-tap-highlight-color: transparent;
    }

    /* 背景粒子层 */
    canvas#bg-particles{position:fixed;inset:0;z-index:0;opacity:.75;pointer-events:none;}
    /* 樱花特效层 */
    canvas#sakura{position:fixed;inset:0;z-index:-1;opacity:0.8;pointer-events:none;will-change:transform;transform:translateZ(0);}
    /* 页面布局 - 整体可滚动 */
    .fixed-area{
      position:relative;
      z-index:10;
      background: transparent;
    }
    .cards-scroll{
      overflow:visible;
    }
  
    /* 顶部栏 */
    header{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background:
        linear-gradient(180deg, rgba(var(--header-rgb1),.98), rgba(var(--header-rgb2),.92));
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transform:translateZ(0);
      will-change:transform;
      border-bottom:1px solid rgba(var(--glow-rgb),.18);
      box-shadow: 0 10px 26px rgba(var(--primary-rgb), .12), 0 0 30px rgba(var(--glow-rgb),.08);
      overflow: hidden;
    }
    header::before{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(120deg, rgba(var(--glow-rgb),.12), transparent 60%),
        repeating-linear-gradient(90deg, rgba(var(--primary-rgb),.07) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(0deg, rgba(var(--primary-rgb),.05) 0 1px, transparent 1px 18px);
      opacity:.95;
      pointer-events:none;
    }
    header::after{
      content:"";
      position:absolute; left:0; right:0; bottom:0; height:2px;
      background: linear-gradient(90deg, transparent, rgba(var(--glow-rgb),.85), transparent);
      opacity:.9;
      pointer-events:none;
      box-shadow: 0 0 14px rgba(var(--glow-rgb),.6);
    }
    .nav{
      max-width:1200px; margin:0 auto; padding:10px 20px;
      display:flex; align-items:center; justify-content:space-between; gap:16px;
      position: relative; z-index: 1;
    }
    .brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.6px;}
    .brand .logo{
      width:38px; aspect-ratio:1/1; border-radius:50%;
      display:grid; place-items:center; color:#fff; font-weight:900;
      background: radial-gradient(circle at 30% 30%, rgba(var(--glow-soft-rgb),.9), transparent 55%),
                  radial-gradient(circle at 70% 70%, rgba(var(--accent-rgb),.9), transparent 55%),
                  rgb(var(--primary-rgb));
      box-shadow: var(--shadow), 0 0 18px rgba(var(--glow-rgb),.45);
    }
    .brand .title{font-size:18px; color:#1a0533; text-shadow:0 2px 12px rgba(var(--glow-rgb),.28)}

    .nav-links{display:flex; gap:12px; flex-wrap:wrap}
    .nav-links a{
      color:#1a0533; text-decoration:none; padding:9px 14px; border-radius:14px;
      border:1px solid rgba(var(--primary-rgb), .2);
      transition:.25s ease; font-weight:700; font-size:14px;
      background: rgba(255, 255, 255, 0);
      box-shadow: 0 10px 20px rgba(var(--primary-rgb), .14), 0 0 0 1px rgba(var(--glow-rgb),.06);
      backdrop-filter: blur(6px);
    }
    .nav-links a:hover{ color:#1a0533; border-color:var(--hover-border); box-shadow:var(--hover-shadow)}

    /* 轮播 */
    .carousel{ max-width:1200px; margin:2px auto 6px; padding:0 20px; }
    .carousel-wrap{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow: var(--shadow), 0 0 22px rgba(var(--glow-rgb),.18); border:1px solid rgba(var(--glow-rgb),.22); background:#fff; transform: translateZ(0); }
    .slide img{ opacity:.92; }
    .slides, .car-btn, .dots{ position:relative; z-index:1; }
    .slides{ display:flex; transition: transform .6s ease; }
    .slide{ min-width:100%; height:42vw; max-height:420px; background:#eaf1ff; position:relative; }
    .slide img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.92; }

    .car-btn{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid rgba(var(--primary-rgb), .15); background:rgba(255,255,255,.8); color:#1a0533; display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow); transition: transform .42s cubic-bezier(.22,1,.36,1), background .34s cubic-bezier(.22,1,.36,1), box-shadow .42s cubic-bezier(.22,1,.36,1), border-color .34s cubic-bezier(.22,1,.36,1); }
    .car-btn:hover{ background:rgba(var(--glow-rgb),.12); box-shadow:var(--hover-shadow)}
    .car-prev{ left:12px; }
    .car-next{ right:12px; }

    .dots{ position:absolute; bottom:10px; left:0; right:0; display:flex; gap:8px; justify-content:center; }
    .dot{ width:10px; height:10px; border-radius:50%; background:rgba(var(--primary-rgb), .15); border:1px solid rgba(var(--primary-rgb), .2); cursor:pointer; transition: transform .46s cubic-bezier(.22,1,.36,1), background .34s cubic-bezier(.22,1,.36,1), box-shadow .34s cubic-bezier(.22,1,.36,1), border-color .34s cubic-bezier(.22,1,.36,1); }
    .dot.active{ background:var(--primary); box-shadow:0 0 14px rgba(var(--glow-rgb),.55), 0 0 28px rgba(var(--glow-rgb),.25); transform: scale(1.18); }

    /* 区块标题 */
    .section{ max-width:1200px; margin:10px auto; padding:0 20px; }
    .section h2{ font-size:18px; margin:6px 0 6px; color:#0b1b33; text-shadow:none}
    .section h2:first-of-type{
      display:flex;
      justify-content:center;
      align-items:center;
      margin:6px 0 8px;
      font-size:20px;
      font-weight:800;
      letter-spacing:1px;
      position:relative;
      text-align:center;
    }
    .section h2:first-of-type::after{
      content:"";
      position:absolute;
      bottom:-6px;
      left:50%;
      transform:translateX(-50%);
      width:96px;
      height:4px;
      border-radius:999px;
      background: linear-gradient(90deg, transparent, var(--primary-strong), var(--accent), transparent);
      box-shadow: 0 0 14px rgba(var(--glow-rgb),.55), 0 6px 16px rgba(var(--glow-rgb),.3);
    }

    /* 让卡片区标题更贴近热门轮播 */
    #cardsScroll .section h2{
      margin-top:2px;
      margin-bottom:4px;
    }

    /* 卡片栅格（桌面端由 body[data-card-layout] 控制，移动端强制2列） */
    .card-grid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap:12px;
      margin-top:6px;
    }
    @media (min-width:769px){
      body[data-card-layout="2"] .card-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
      body[data-card-layout="3"] .card-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
      body[data-card-layout="4"] .card-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
    }
    @media (max-width:768px){
      .card-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap:8px; }
    }
    @media (max-width:420px){
      .card-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    }

    .card{
      background:
     linear-gradient(180deg, rgba(255,255,255,.5), rgba(var(--bg1-rgb),.5));
      border-radius:22px;
      padding:12px;
      gap:9px;
      align-items:flex-start;
      display:grid;
      grid-template-columns:54px minmax(0,1fr);
      grid-template-areas:
        "avatar meta"
        "cta cta";
      border:1px solid rgba(var(--glow-rgb),.22);
      backdrop-filter: blur(1px) saturate(1.08);
      -webkit-backdrop-filter: blur(1px) saturate(1.08);
      transform:translateZ(0);
      will-change:transform;
      contain:layout paint style;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85),
        0 14px 30px rgba(var(--primary-rgb),.15),
        0 0 0 1px rgba(var(--glow-rgb),.06);
      opacity:0;
      transform: translateY(12px) scale(.985);
      animation: iosCardIn .62s cubic-bezier(.22,1,.36,1) forwards;
      animation-delay: var(--stagger, 0ms);
      position: relative;
      overflow: hidden;
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    }

    /* 流光扫过效果 */
    .card::after{
      content:"";
      position:absolute;
      top:0; left:-100%;
      width:50%;
      height:100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
      transform: skewX(-20deg);
      animation: cardShine 3.5s ease-in-out infinite;
      animation-delay: calc(var(--stagger, 0ms) + 1s);
      pointer-events:none;
    }

    @keyframes cardShine{
      0%{ left:-100%; }
      60%{ left:150%; }
      100%{ left:150%; }
    }

    /* 头像微浮动 */
    .card .avatar{
      animation: avatarFloat 3s ease-in-out infinite;
      animation-delay: calc(var(--stagger, 0ms) + .5s);
    }

    @keyframes avatarFloat{
      0%, 100%{ transform: translateY(0); }
      50%{ transform: translateY(-2px); }
    }

    .card:hover{
      transform: translateY(-3px);
      border-color: rgba(var(--glow-rgb),.52);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.88),
        0 16px 36px rgba(var(--primary-rgb),.2),
        0 0 22px rgba(var(--glow-rgb),.28),
        0 0 44px rgba(var(--glow-rgb),.1);
    }

    .card:hover::after{
      animation-duration: 1.5s;
    }

    /* 官方徽章脉冲 */
    .card-official-badge{
      animation: badgePulse 2s ease-in-out infinite;
    }

    @keyframes badgePulse{
      0%, 100%{
        box-shadow: 0 0 0 0 rgba(var(--glow-rgb), .4);
      }
      50%{
        box-shadow: 0 0 8px 2px rgba(var(--glow-rgb), .6);
      }
    }

    @keyframes iosCardIn{
      0%{
        opacity:0;
        transform: translateY(12px) scale(.985);
      }
      68%{
        opacity:1;
        transform: translateY(-1px) scale(1.003);
      }
      100%{
        opacity:1;
        transform: translateY(0) scale(1);
      }
    }

    @media (prefers-reduced-motion: reduce){
      .card{
        animation:none;
        opacity:1;
        transform:none;
      }
    }

    /* ===== Style 2: 玻璃拟态 Glassmorphism ===== */
    .card--glass{
      background:
        linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.18) 60%, rgba(var(--glow-rgb),0.06));
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,0.55);
      backdrop-filter: blur(18px) saturate(1.4) brightness(1.02);
      -webkit-backdrop-filter: blur(18px) saturate(1.4) brightness(1.02);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.95),
        inset 0 -1px 0 rgba(255,255,255,0.35),
        0 20px 40px -12px rgba(var(--primary-rgb),0.22),
        0 6px 16px rgba(0,0,0,0.06);
    }
    .card--glass::before{
      content:"";
      position:absolute;inset:0;
      background:
        radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.45), transparent 60%),
        radial-gradient(80% 60% at 100% 100%, rgba(var(--primary-rgb),0.08), transparent 60%);
      pointer-events:none; mix-blend-mode: screen;
      border-radius: inherit;
    }
    .card--glass:hover{
      border-color: rgba(255,255,255,0.85);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(255,255,255,0.45),
        0 26px 52px -14px rgba(var(--primary-rgb),0.3),
        0 10px 22px rgba(0,0,0,0.08),
        0 0 38px rgba(var(--glow-rgb),0.18);
    }

    /* ===== Style 3: 霓虹渐变 Neon Gradient ===== */
    .card--neon{
      background:
        linear-gradient(180deg, rgba(12,6,28,0.92), rgba(24,10,48,0.78));
      border-radius: 24px;
      border: none;
      padding: 13px;
      box-shadow:
        0 18px 40px rgba(0,0,0,0.45),
        0 0 0 1px rgba(var(--primary-rgb),0.35);
      position: relative;
      overflow: hidden;
    }
    .card--neon::before{
      content:"";
      position:absolute; inset:0; border-radius: inherit; padding:1.5px;
      background: linear-gradient(135deg,
        rgba(var(--primary-rgb),1),
        rgba(var(--glow-rgb),1) 35%,
        #f472b6 65%,
        #22d3ee 100%);
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      pointer-events:none; z-index: 1;
    }
    .card--neon::after{
      content:"";
      position:absolute; top:-50%; left:-30%; width:160%; height:200%;
      background:
        radial-gradient(circle at 20% 30%, rgba(var(--primary-rgb),0.25), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(244,114,182,0.2), transparent 45%),
        radial-gradient(circle at 60% 20%, rgba(34,211,238,0.15), transparent 50%);
      filter: blur(20px);
      opacity: 0.75;
      pointer-events:none;
      animation: neonShift 8s ease-in-out infinite alternate;
    }
    @keyframes neonShift{
      0%  { transform: translate(0,0) rotate(0deg); }
      100% { transform: translate(2%, -2%) rotate(3deg); }
    }
    .card--neon > *{ position: relative; z-index: 2; }
    .card--neon .title{ color: #fff; text-shadow: 0 0 14px rgba(var(--primary-rgb),0.6); }
    .card--neon .desc { color: rgba(255,255,255,0.82); }
    .card--neon .avatar{
      border-color: rgba(255,255,255,0.35);
      box-shadow:
        0 0 0 2px rgba(var(--primary-rgb),0.35),
        0 8px 22px rgba(0,0,0,0.5),
        0 0 22px rgba(var(--primary-rgb),0.45);
    }
    .card--neon .go{
      background: linear-gradient(135deg, rgba(var(--primary-rgb),1), #f472b6 120%);
      color: #fff; border: none;
      box-shadow:
        0 10px 22px rgba(var(--primary-rgb),0.45),
        0 0 22px rgba(var(--primary-rgb),0.35);
    }
    .card--neon:hover{
      transform: translateY(-3px);
      box-shadow:
        0 22px 48px rgba(0,0,0,0.55),
        0 0 0 1px rgba(var(--primary-rgb),0.55),
        0 0 44px rgba(var(--primary-rgb),0.35);
    }
    .card--neon:hover::before{
      background: linear-gradient(135deg,
        rgba(var(--primary-rgb),1),
        #22d3ee 30%,
        #f472b6 60%,
        rgba(var(--glow-rgb),1) 100%);
    }

    /* ===== Style 4: 极简白卡 Minimal White ===== */
    .card--simple{
      background: #ffffff;
      border-radius: 20px;
      border: 0.5px solid rgba(60, 60, 67, 0.14);
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.03),
        0 8px 24px rgba(0, 0, 0, 0.05);
    }
    .card--simple::before{ display: none; }
    .card--simple:hover{
      transform: translateY(-2px);
      border-color: rgba(var(--primary-rgb), 0.35);
      box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 12px 32px rgba(var(--primary-rgb), 0.12),
        0 0 0 3px rgba(var(--glow-rgb), 0.08);
    }
    .card--simple .title{ color: #1c1c1e; }
    .card--simple .avatar{
      border-color: rgba(0, 0, 0, 0.06);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    }
    .card--simple .go{
      background: #ffffff;
      color: rgb(var(--primary-strong-rgb));
      border: 0.5px solid rgba(60, 60, 67, 0.14);
      box-shadow: none;
    }
    .card--simple .go:hover{
      background: rgba(var(--primary-rgb), 0.06);
      border-color: rgba(var(--primary-rgb), 0.3);
    }

    /* ===== Style 5: 水波纹 Aqua Fluid ===== */
    .card--aqua{
      background:
        linear-gradient(160deg, rgba(186, 230, 253, 0.85), rgba(224, 242, 254, 0.65) 45%, rgba(255, 255, 255, 0.75) 100%);
      border-radius: 28px;
      border: 1px solid rgba(14, 165, 233, 0.22);
      backdrop-filter: blur(8px) saturate(1.25);
      -webkit-backdrop-filter: blur(8px) saturate(1.25);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -2px 0 rgba(14, 165, 233, 0.08),
        0 18px 38px -12px rgba(14, 165, 233, 0.28),
        0 6px 18px rgba(56, 189, 248, 0.1);
      position: relative;
      overflow: hidden;
    }
    .card--aqua::before{
      content: "";
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 90% 55% at 15% -10%, rgba(255, 255, 255, 0.85), transparent 60%),
        radial-gradient(ellipse 65% 50% at 95% 110%, rgba(56, 189, 248, 0.45), transparent 60%);
      pointer-events: none;
      border-radius: inherit;
      mix-blend-mode: screen;
      animation: aquaWave 7s ease-in-out infinite alternate;
    }
    .card--aqua::after{
      content: "";
      position: absolute;
      top: -35%; left: -15%;
      width: 130%; height: 70%;
      background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.08) 45%,
        transparent 100%);
      transform: rotate(-4deg);
      pointer-events: none;
      border-radius: 50%;
      filter: blur(6px);
    }
    .card--aqua > *{ position: relative; z-index: 2; }
    @keyframes aquaWave{
      0%   { transform: translate(0, 0) scale(1); opacity: 0.9; }
      50%  { transform: translate(1.5%, -2%) scale(1.03); opacity: 1; }
      100% { transform: translate(-1%, 1.5%) scale(0.98); opacity: 0.92; }
    }
    .card--aqua:hover{
      border-color: rgba(14, 165, 233, 0.5);
      transform: translateY(-3px);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -2px 0 rgba(14, 165, 233, 0.12),
        0 26px 52px -14px rgba(14, 165, 233, 0.42),
        0 10px 24px rgba(56, 189, 248, 0.15),
        0 0 44px rgba(56, 189, 248, 0.18);
    }
    .card--aqua .title{ color: #0c4a6e; }
    .card--aqua .desc { color: rgba(12, 74, 110, 0.72); }
    .card--aqua .avatar{
      border-color: rgba(255, 255, 255, 0.95);
      box-shadow:
        0 0 0 2px rgba(56, 189, 248, 0.35),
        0 6px 16px rgba(14, 165, 233, 0.28),
        0 0 16px rgba(186, 230, 253, 0.6);
    }
    .card--aqua .go{
      background: linear-gradient(135deg, #0ea5e9, #22d3ee 100%);
      color: #ffffff; border: none;
      box-shadow:
        0 10px 22px rgba(14, 165, 233, 0.38),
        0 0 18px rgba(56, 189, 248, 0.4);
    }

    /* ===== Style 6: 金属拉丝 Metallic Brushed ===== */
    .card--metal{
      background:
        repeating-linear-gradient(180deg,
          rgba(255, 255, 255, 0.22) 0px,
          rgba(255, 255, 255, 0.08) 1px,
          rgba(255, 255, 255, 0.22) 2px,
          rgba(200, 200, 210, 0.06) 3px),
        linear-gradient(145deg,
          #e9e9ef 0%, #f6f6f9 20%, #d7d7df 48%, #ebebf1 75%, #c9c9d3 100%);
      border-radius: 22px;
      border: 1px solid rgba(120, 120, 128, 0.22);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08),
        0 18px 40px -14px rgba(0, 0, 0, 0.35),
        0 0 0 0.5px rgba(255, 255, 255, 0.6) inset;
      position: relative;
      overflow: hidden;
    }
    .card--metal::before{
      content: "";
      position: absolute; inset: 0;
      background:
        linear-gradient(115deg,
          transparent 0%,
          rgba(255, 255, 255, 0.55) 22%,
          rgba(255, 255, 255, 0.2) 32%,
          transparent 52%),
        radial-gradient(110% 80% at 0% 0%, rgba(255, 255, 255, 0.35), transparent 55%);
      pointer-events: none;
      border-radius: inherit;
      mix-blend-mode: overlay;
      animation: metalShine 9s ease-in-out infinite;
    }
    @keyframes metalShine{
      0%   { transform: translateX(-22%); opacity: 0.8; }
      50%  { transform: translateX(22%);  opacity: 1; }
      100% { transform: translateX(-22%); opacity: 0.8; }
    }
    .card--metal::after{
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(180deg,
        rgba(var(--primary-rgb), 0.04),
        rgba(var(--glow-rgb), 0.08) 100%);
      pointer-events: none;
      border-radius: inherit;
    }
    .card--metal > *{ position: relative; z-index: 2; }
    .card--metal:hover{
      transform: translateY(-3px);
      border-color: rgba(var(--primary-rgb), 0.45);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 26px 54px -16px rgba(0, 0, 0, 0.45),
        0 0 0 0.5px rgba(255, 255, 255, 0.8) inset,
        0 0 42px rgba(var(--glow-rgb), 0.22);
    }
    .card--metal:hover::before{ animation-duration: 3.5s; }
    .card--metal .title{
      color: #1d1d1f;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
    }
    .card--metal .avatar{
      border-color: rgba(255, 255, 255, 0.95);
      box-shadow:
        0 0 0 1.5px rgba(120, 120, 128, 0.25),
        0 8px 20px rgba(0, 0, 0, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    }
    .card--metal .go{
      background:
        repeating-linear-gradient(180deg,
          rgba(255, 255, 255, 0.25) 0px,
          rgba(255, 255, 255, 0.05) 1px),
        linear-gradient(135deg, rgb(var(--primary-strong-rgb)), rgb(var(--glow-rgb)));
      color: #ffffff;
      border: 0.5px solid rgba(255, 255, 255, 0.55);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 10px 22px rgba(var(--primary-strong-rgb), 0.35),
        0 0 18px rgba(var(--glow-rgb), 0.28);
    }

    .avatar{
      width:54px;
      height:54px;
      border-radius:50%;
      border:2px solid rgba(var(--glow-rgb),.28);
      box-shadow:0 8px 18px rgba(var(--glow-rgb),.2), 0 0 12px rgba(var(--glow-rgb),.15);
      background:var(--bg3);
      object-fit:cover;
      grid-area:avatar;
    }

    .meta{
      grid-area:meta;
      display:flex;
      flex-direction:column;
      min-width:0;
    }

    .title{
      font-weight:700;
      color:#1a0533;
      font-size:15px;
      line-height:1.15;
      white-space:normal;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient:vertical;
      word-break: break-all;
    }

    .desc{
      font-size:13px;
      color:var(--muted);
      min-height:0;
      max-height:none;
      margin-top:3px;
      line-height:1.25;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      word-break: break-all;
    }

    .rating{
      display:flex;
      align-items:center;
      gap:6px;
      margin-top:2px;
      flex-wrap:nowrap;
    }
    .stars{ display:inline-flex; gap:2px; flex:0 0 auto }
    .stars svg{ width:14px; height:14px; fill: #FFD700; filter: drop-shadow(0 2px 6px rgba(251,191,36,.38)); }
    .score{ font-size:12px; color:rgb(var(--primary-strong-rgb)); white-space:nowrap; flex:0 0 auto }

    .card .go{
      grid-area:cta;
      width:100%;
      margin:4px 0 0;
      text-align:center;
      padding:6px 10px;
      border-radius:14px;
      text-decoration:none;
      color:#fff;
      font-weight:800;
      font-size:12px;
      background: linear-gradient(110deg, rgb(var(--primary-strong-rgb)) 0%, rgb(var(--glow-rgb)) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.26),
        0 8px 18px rgba(var(--primary-strong-rgb),.42),
        0 0 16px rgba(var(--glow-rgb),.32);
      border:1px solid rgba(255,255,255,.48);
      position: relative;
      overflow: hidden;
      transition: transform .42s cubic-bezier(.22,1,.36,1), box-shadow .42s cubic-bezier(.22,1,.36,1), filter .34s cubic-bezier(.22,1,.36,1);
    }
    .card .go:hover{ box-shadow: var(--hover-shadow); transform: translateY(-1px) scale(1.02); }
    .card .go::after{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.6), transparent 70%);
      transform: translateX(-120%);
      transition: .8s ease;
    }
    .card .go:hover::after{
      transform: translateX(120%);
    }
    /* 新增卡片按钮（浮动） */
    .fab{ position:fixed; right:18px; bottom:18px; z-index:15; }
    .fab button{
      width:56px; height:56px; border-radius:50%; border:1px solid rgba(212,175,55,.5);
      background: radial-gradient(circle at 30% 30%, #F5D76E, #D4AF37 55%, #B8860B);
      color:#fff; font-weight:900; cursor:pointer; box-shadow: 0 6px 20px rgba(184,134,11,.4), 0 0 22px rgba(212,175,55,.5), inset 0 1px 0 rgba(255,255,255,.5);
    }

    /* 底部品牌信息区 */
    .site-footer{
      max-width:1200px;
      margin:6px auto 18px;
      padding:0 20px;
      position:relative;
      z-index:10;
    }
    .brand-footer{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:6px;
      background: transparent;
      border:none;
      border-radius:0;
      padding:6px 0;
      box-shadow: none;
      color:#6b7a92;
      font-size:12px;
      text-align:center;
    }
    .brand-footer .logo{
      width:auto;
      max-width:120px;
      height:24px;
      border-radius:6px;
      overflow:hidden;
      border:none;
      background:transparent;
      padding:2px 6px;
      display:flex;
      align-items:center;
    }
    .brand-footer .logo img{ width:auto; height:100%; object-fit:contain; display:block; }
    .brand-footer .text{ display:flex; flex-direction:column; gap:2px; align-items:center; }
    .brand-footer .name{ font-weight:700; font-size:12px; color:#4f6380; }
    .brand-footer .desc{ font-size:11px; color:#7b8aa3; }
    .brand-footer .copy{ font-size:11px; color:#7b8aa3; white-space:nowrap; }
    @media (max-width:600px){
      .brand-footer{ flex-direction:column; align-items:center; }
    }
    /* 限制选择复制（表单除外） */
.no-select{ user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -moz-user-select:none; -ms-user-select:none; }
.no-select input, .no-select textarea{ user-select:text; -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; }
    /* 顶部主按钮（导航 / 关于合并版） */
    .nav-main-btn{
      color:#1a0533 !important;
      font-weight:800;
      padding:10px 20px;
      border-radius:14px;
      background: #ffffff;
      box-shadow: 0 16px 30px rgba(var(--primary-rgb), .18), 0 0 16px rgba(var(--glow-rgb),.1);
      border:1px solid rgba(var(--primary-rgb), .22);
      position:relative;
      overflow:hidden;
      text-shadow: none;
      transition: transform .42s cubic-bezier(.22,1,.36,1), box-shadow .42s cubic-bezier(.22,1,.36,1), border-color .34s cubic-bezier(.22,1,.36,1), background .34s cubic-bezier(.22,1,.36,1);
    }

    /* hover 发光 */
    .nav-main-btn:hover{
      transform: translateY(-1px);
      box-shadow: var(--hover-shadow);
    }

    /* 轻微流光效果 */
    .nav-main-btn::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255,255,255,.45),
        transparent 70%
      );
      transform: translateX(-120%);
      transition: .6s ease;
    }

    .nav-main-btn:hover::after{
      transform: translateX(120%);
    }
    .brand-logo {
      height: 40px;
      background: transparent;
      filter: drop-shadow(0 6px 14px rgba(31,111,235,.25));
    }
    
        .brand-logo-box {
      padding: 8px 16px;
      border-radius: 14px;
            background: rgba(255, 255, 255, 0);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      box-shadow: 0 16px 30px rgba(var(--primary-rgb), .18), 0 0 16px rgba(var(--glow-rgb),.1);
      border: 1px solid rgba(var(--primary-rgb), .22);
      position: relative;
      overflow: hidden;
      transition: transform .42s cubic-bezier(.22,1,.36,1), box-shadow .42s cubic-bezier(.22,1,.36,1), border-color .34s cubic-bezier(.22,1,.36,1), background .34s cubic-bezier(.22,1,.36,1);
    }
    .brand-logo-box:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(var(--glow-rgb),.38), 0 0 22px rgba(var(--glow-rgb),.22);
      border-color: rgba(var(--glow-rgb),.55);
    }
    .brand-logo-box::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255,255,255,.45),
        transparent 70%
      );
      transform: translateX(-120%);
      transition: .6s ease;
    }
    .brand-logo-box:hover::after {
      transform: translateX(120%);
    }

    /* 图标轮播 */
    .icon-ticker{
      margin-top:4px;
      margin-bottom:2px;
      background: rgba(255,255,255,.50);
      border:1px solid rgba(var(--glow-rgb),.18);
      border-radius:14px;
      box-shadow: 0 10px 24px rgba(var(--glow-rgb),.18), 0 0 16px rgba(var(--glow-rgb),.08);
      padding:10px 12px;
      overflow:hidden;
      position:relative;
      touch-action: pan-y;
    }
    .icon-ticker .ticker-status{
      position:absolute;
      right:10px; top:6px;
      background: rgba(0,0,0,.45);
      color:#fff;
      font-size:11px;
      padding:2px 6px;
      border-radius:8px;
      opacity:0;
      transition: opacity .2s ease;
      pointer-events:none;
    }
    .icon-ticker.paused .ticker-status{ opacity:1; }
    .icon-ticker.compact{ margin-top:6px; margin-bottom:6px; }
    .icon-track{
      display:flex;
      gap:14px;
      align-items:center;
      will-change: transform;
    }
    .icon-item{
      flex:0 0 auto;
      width:52px;
      height:52px;
      border-radius:50%;
      background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(var(--bg1-rgb),.0));
      border:1px solid rgba(var(--glow-rgb),.15);
      box-shadow: 0 8px 18px rgba(var(--glow-rgb),.16);
      display:grid;
      place-items:center;
      cursor:pointer;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .icon-item:hover{
      transform: translateY(-2px);
      box-shadow: 0 12px 22px rgba(var(--glow-rgb),.28), 0 0 14px rgba(var(--glow-rgb),.2);
    }
    .icon-item.is-static{ cursor:default; }
    .icon-item.is-static:hover{
      transform:none;
      box-shadow:0 8px 18px rgba(var(--glow-rgb),.16);
    }
    .icon-item img{
      width:100%;
      height:100%;
      object-fit:cover;
      border-radius:50%;
    }

    /* 分类按钮 - 三角形布局 */
    .category-buttons {
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: transparent;
      border: none;
      border-radius: 14px;
      box-shadow: none;
      align-items: center;
    }
    .category-buttons-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
    }
    .category-buttons-row.single {
      display: flex;
      justify-content: center;
    }
    .category-buttons-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      width: 100%;
      margin-top: 4px;
    }
    .category-buttons-bottom .category-button {
      max-width: 160px;
      width: auto;
      min-width: 120px;
      padding: 8px 12px;
      font-size: 13px;
    }
    .moment-video {
      margin-bottom: 10px;
      border-radius: 10px;
      overflow: hidden;
      background: #000;
      position: relative;
    }
    .moment-video video {
      width: 100%;
      max-height: 400px;
      display: block;
    }
    .moment-video-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
      margin-bottom: 10px;
    }
    .moment-video-item {
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      background: #000;
    }
    .moment-video-item video {
      width: 100%;
      aspect-ratio: auto;
      max-height: 500px;
      object-fit: contain;
      display: block;
    }
    .moment-video-play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      background: rgba(0,0,0,.6);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 20px;
      pointer-events: none;
      transition: background .2s;
    }
    .moment-video-item:hover .moment-video-play-btn {
      background: rgba(0,0,0,.8);
    }

    .category-button {
      position: relative;
      padding: 10px 10px;
      border: 2px solid rgba(var(--glow-rgb),.3);
      border-radius: 10px;
      background-color: transparent;
      color: #1a0533;
      font-weight: 600;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.25s ease;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-shadow: none;
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(var(--glow-rgb),.15);
      user-select: none;
      -webkit-user-select: none;
    }

    .category-button.active {
      background: linear-gradient(90deg, var(--primary-strong), var(--accent));
      color: white;
      border-color: rgba(var(--glow-rgb),.55);
      box-shadow: 0 4px 12px rgba(var(--glow-rgb),.42), 0 0 18px rgba(var(--glow-rgb),.22);
    }

    .category-button:hover {
      transform: translateY(-2px);
      border-color: rgba(var(--glow-rgb),.52);
      background-color: rgba(var(--glow-rgb),.08);
    }

    /* 卡片右上角官方徽章 - 嵌入式贴合设计 */
    .card.has-official-badge {
      overflow: visible;
    }
    .card-official-badge {
      position: absolute;
      top: 0;
      right: 0;
      background: linear-gradient(135deg, #2a2a2a 0%, #0d0d0d 100%);
      color: #D4A800;
      font-size: 10px;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 0 21px 0 10px;
      white-space: nowrap;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
      z-index: 10;
      pointer-events: none;
      line-height: 1.5;
      letter-spacing: 1.5px;
      text-shadow: 0 1px 1px rgba(0,0,0,.3);
      transform: none;
    }
    @media (max-width:768px){
      .card-official-badge {
        border-radius: 0 13px 0 8px;
        font-size: 9px;
        padding: 2px 8px;
      }
    }
    
         /* 分类内容区 */
    .category-content {
      display: none;
      animation: fadeIn 0.3s ease;
    }

    .category-content.active {
      display: block;
    }

    .category-content.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .category-content.active {
      display: block;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ===== Template V2: Neo Glass Board ===== */
    body{
      background:
        radial-gradient(1000px 540px at -20% -10%, rgba(var(--glow-rgb),.22), transparent 60%),
        radial-gradient(860px 480px at 120% 6%, rgba(var(--accent-rgb),.2), transparent 62%),
        linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 48%, var(--bg3) 100%);
    }

    .fixed-area{
      background: linear-gradient(180deg, rgba(var(--header-rgb1),.82), rgba(var(--header-rgb1),0));
    }

      header{
      position: fixed;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      max-width:1240px;
      width: 100%;
      margin: 0 auto;
    border-radius: 0 0 24px 24px;
      border:1px solid rgba(var(--glow-rgb),.28);
      box-shadow: 0 16px 38px rgba(var(--primary-rgb),.18), 0 0 32px rgba(var(--glow-rgb),.14);
      z-index: 100;
    }

    header::after{
      height:1px;
      opacity:.5;
    }

    .nav{
      padding:12px 22px;
    }

    .brand-logo {
      height: 30px;
      background: transparent;
    }
    
      .nav-main-btn{
      min-width:140px;
      padding: 12px 24px;
      border-radius:16px;
      font-size:18px;
      font-weight:900;
      letter-spacing:.5px;
    }
    .carousel{
      margin:4px auto 4px;
    }

    .carousel-wrap{
      border-radius:26px;
      box-shadow: 0 26px 46px rgba(var(--primary-rgb),.22), 0 0 32px rgba(var(--glow-rgb),.16);
      transform: translateZ(0);
    }

    .slide{
      height:38vw;
      min-height:250px;
      max-height:400px;
    }

    .car-btn{
      width:48px;
      height:48px;
    }

    #apps.section{
      margin-top:6px;
      margin-bottom:2px;
    }

    .icon-ticker{
      margin-top:6px;
      border-radius:16px;
      padding:8px 10px;
    }

    .icon-track{
      gap:10px;
    }

    .icon-item{
      width:46px;
      height:46px;
    }

    .cards-scroll .section{
      margin-top:0;
      padding-top:0;
    }

    #cardsScroll .section h2{
      margin-top:0;
      margin-bottom:18px;
      font-size:34px;
      font-weight:900;
      letter-spacing:1.2px;
      color:rgb(var(--dark-rgb));
    }

     #cardsScroll .section h2::after{
      width:126px;
      height:5px;
      bottom:-8px;
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 3px;
      background: linear-gradient(90deg, transparent, var(--primary-strong), var(--accent), transparent);
      box-shadow: 0 0 14px rgba(var(--glow-rgb),.55), 0 6px 16px rgba(var(--glow-rgb),.3);
    }

    .site-footer{
      margin-top:8px;
    }
    /* 响应式 */
    @media (max-width:1200px){
      #cardsScroll .section h2{ font-size:30px; }
    }

    @media (max-width:1024px){
  #cardsScroll .section h2{ font-size:26px; }
      .title{ font-size:15px; }
      .desc{ font-size:14px; min-height:0; max-height:none; }
      .card{ grid-template-columns:50px minmax(0,1fr); }
      .avatar{ width:50px; height:50px; }
    }

    @media (max-width:768px){
       .category-buttons-row{ max-width:500px; gap:8px; }
       .card{
        padding:8px;
        gap:6px;
        border-radius:14px;
        display:grid;
        grid-template-columns:42px minmax(0,1fr);
        grid-template-areas:
          "avatar meta"
          "cta cta";
        align-items:start;
      }
      .avatar{ width:42px; height:42px; }
      .meta{
        grid-area:meta;
        flex:1 1 calc(100% - 52px);
        min-width:0;
      }
      .title{
        font-size:13px;
        line-height:1.2;
        -webkit-line-clamp:1;
      }
      .desc{
        font-size:12px;
        line-height:1.25;
        min-height:0;
        max-height:none;
        margin-top:2px;
        -webkit-line-clamp:2;
      }
      .rating{
        margin-top:4px;
        gap:4px;
      }
      .stars svg{ width:13px; height:13px; }
      .score{
        font-size:10px;
        white-space:nowrap;
      }
      .card .go{
        grid-area:cta;
        width:100%;
        min-width:100%;
        font-size:11px;
        padding:6px 8px;
        border-radius:10px;
        margin:3px 0 0;
      }
       .icon-ticker{ margin-top:4px; padding:6px 8px; }
       .icon-item{ width:42px; height:42px; }
       .carousel{ padding:0 10px; margin:2px auto 2px; }
       .slide{ min-height:168px; max-height:235px; height:46vw; }
       .car-btn{ width:40px; height:40px; }
     }

      @media (max-width:420px){
        .category-buttons-row{ gap:6px; max-width:100%; }
        .card{ padding:7px; }
        .title{ font-size:12px; }
        .desc{ font-size:12px; min-height:0; max-height:none; }
        .card .go{ font-size:10px; padding:5px 7px; }
      }

    /* ========== 朋友圈样式 ========== */
    .moments-container {
      max-width: 600px;
      margin: 0 auto;
    }
    .moment-card {
      background:
        linear-gradient(180deg, rgba(var(--glow-rgb),.18), rgba(var(--violet-rgb),.12));
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border-radius: 18px;
      padding: 16px;
      margin-bottom: 14px;
      border: 1px solid rgba(var(--glow-rgb),.35);
      box-shadow: 0 10px 28px rgba(var(--primary-rgb),.2), inset 0 1px 0 rgba(255,255,255,.25);
      position: relative;
    }
    .moment-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }
    .moment-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(var(--glow-rgb),.3);
      box-shadow: 0 4px 12px rgba(var(--glow-rgb),.2);
      background: var(--bg2);
      flex-shrink: 0;
    }
    .moment-user-info {
      flex: 1;
      min-width: 0;
    }
    .moment-username {
      font-weight: 700;
      color: rgb(var(--primary-strong-rgb));
      font-size: 15px;
      margin-bottom: 2px;
    }
    .moment-time {
      font-size: 12px;
      color: #9f6ab7;
    }
    .moment-content {
      color: #1a0533;
      font-size: 15px;
      line-height: 1.6;
      margin-bottom: 12px;
      word-break: break-word;
      white-space: pre-wrap;
    }
    .moment-images {
      display: grid;
      gap: 6px;
      margin-bottom: 12px;
    }
    .moment-images.single {
      grid-template-columns: 1fr;
      justify-items: start;
    }
    .moment-images.single .moment-img {
      width: auto;
      max-width: 100%;
      max-height: 375px;
      height: auto;
      object-fit: cover;
    }
    .moment-images.double {
      grid-template-columns: repeat(2, 1fr);
    }
    .moment-images.double .moment-img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      background: var(--bg2);
    }
    .moment-images.triple {
      grid-template-columns: repeat(3, 1fr);
    }
    .moment-images.triple .moment-img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      background: var(--bg2);
    }
    .moment-images.multi {
      grid-template-columns: repeat(3, 1fr);
    }
    .moment-images.multi .moment-img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      background: var(--bg2);
    }
    .moment-img {
      border-radius: 10px;
      cursor: pointer;
      transition: transform .2s ease;
      display: block;
      pointer-events: auto;
    }
    .moment-img:hover {
      transform: scale(1.02);
    }
    .moment-actions {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding-top: 10px;
      border-top: 1px solid rgba(var(--glow-rgb),.15);
    }
    .moment-action-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      border: none;
      background: transparent;
      color: rgb(var(--primary-strong-rgb));
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      border-radius: 10px;
      transition: all .2s ease;
    }
    .moment-action-btn:hover {
      background: rgba(var(--glow-rgb),.1);
    }
    .moment-action-btn.liked {
      color: #ec4899;
    }
    .moment-action-btn.liked i {
      animation: heartBeat .3s ease;
    }
    @keyframes heartBeat {
      0% { transform: scale(1); }
      50% { transform: scale(1.3); }
      100% { transform: scale(1); }
    }
    .moment-comments {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(var(--glow-rgb),.15);
      display: block;
    }
    .moment-comment-list {
      margin-bottom: 10px;
    }
    .moment-comment-item {
      display: flex;
      gap: 8px;
      padding: 8px 0;
      font-size: 13px;
    }
    .moment-comment-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgb(var(--glow-rgb)), #ec4899);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
    }
    .moment-comment-body {
      flex: 1;
      background: rgba(255,255,255,.25);
      border-radius: 10px;
      padding: 8px 10px;
    }
    .moment-comment-name {
      font-weight: 700;
      color: rgb(var(--primary-strong-rgb));
      margin-bottom: 2px;
      font-size: 12px;
    }
    .moment-comment-text {
      color: #1a0533;
      line-height: 1.4;
    }
    .moment-comment-input {
      display: none;
      gap: 8px;
    }
    .moment-comment-input.show {
      display: flex;
    }
    .moment-comment-input input {
      flex: 1;
      padding: 10px 12px;
      border: 1px solid rgba(var(--glow-rgb),.4);
      border-radius: 20px;
      font-size: 13px;
      background: rgba(255,255,255,.35);
       outline: none;
      transition: border-color .2s ease;
    }
    .moment-comment-input input:focus {
      border-color: rgb(var(--glow-rgb));
    }
    .moment-comment-input button {
      padding: 10px 18px;
      border: none;
      border-radius: 20px;
      background: linear-gradient(135deg, rgb(var(--primary-strong-rgb)), rgb(var(--glow-rgb)));
      color: #fff;
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .moment-comment-input button:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(var(--glow-rgb),.4);
    }
    .moment-likes-bar {
      background: rgba(255,255,255,.25);
      border-radius: 10px;
      padding: 8px 12px;
      margin-bottom: 10px;
      font-size: 13px;
      color: rgb(var(--primary-strong-rgb));
      display: none;
      align-items: center;
      gap: 6px;
    }
    .moment-likes-bar.show {
      display: flex;
    }
    .moment-likes-bar i {
      color: #ec4899;
    }
    .moment-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-top: 8px;
      position: relative;
      z-index: 1;
    }
    .moment-more-btn {
      width: 30px;
      height: 24px;
      border: none;
      background: rgba(0,0,0,.06);
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      transition: background .2s ease;
      padding: 0;
    }
    .moment-more-btn:hover {
      background: rgba(0,0,0,.12);
    }
    .moment-more-btn .dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgb(var(--primary-strong-rgb));
    }
    .moment-action-menu {
      position: absolute;
      right: 0;
      top: 100%;
      margin-top: 4px;
      background: rgba(var(--primary-strong-rgb), .95);
      border-radius: 8px;
      display: none;
      align-items: center;
      padding: 0 2px;
      z-index: 9999;
      box-shadow: 0 4px 16px rgba(var(--primary-rgb),.35);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
    .moment-action-menu.show {
      display: flex;
      animation: menuFadeIn .2s ease;
    }
    @keyframes menuFadeIn {
      from {
        opacity: 0;
        transform: translateY(-4px) scale(.96);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    .moment-action-menu::before {
      content: '';
      position: absolute;
      top: -5px;
      right: 10px;
      width: 10px;
      height: 10px;
      background: rgba(var(--primary-strong-rgb), .95);
      transform: rotate(45deg);
      border-radius: 2px;
    }
    .moment-menu-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 16px;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      border: none;
      background: transparent;
      white-space: nowrap;
      transition: background .2s ease;
      border-radius: 6px;
      position: relative;
    }
    .moment-menu-item:hover {
      background: rgba(255,255,255,.15);
    }
    .moment-menu-item i {
      font-size: 14px;
    }
    .moment-menu-item.liked {
      color: #fbbf24;
    }
    .moment-menu-divider {
      width: 1px;
      height: 18px;
      background: rgba(255,255,255,.3);
      margin: 0 2px;
    }
    /* 图片预览弹窗 */
    .img-preview-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.9);
      z-index: 10000;
      display: none;
      align-items: center;
      justify-content: center;
    }
    .img-preview-overlay.show {
      display: flex;
    }
    .img-preview-overlay img {
      max-width: 90vw;
      max-height: 90vh;
      object-fit: contain;
      border-radius: 10px;
    }
    .img-preview-close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255,255,255,.2);
      color: #fff;
      border: none;
      font-size: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* 登录弹窗 */
    .login-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.5);
      z-index: 10001;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .login-modal-overlay.show {
      display: flex;
    }
    .login-modal {
      background: #fff;
      border-radius: 18px;
      width: 100%;
      max-width: 360px;
      padding: 30px 24px;
      box-shadow: 0 20px 60px rgba(0,0,0,.3);
      animation: modalIn .3s ease;
    }
    @keyframes modalIn {
      from { opacity: 0; transform: translateY(20px) scale(.95); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .login-modal-title {
      text-align: center;
      font-size: 20px;
      font-weight: 700;
      color: rgb(var(--primary-strong-rgb));
      margin-bottom: 8px;
    }
    .login-modal-desc {
      text-align: center;
      font-size: 13px;
      color: #9f6ab7;
      margin-bottom: 20px;
    }
    .login-modal-input {
      width: 100%;
      padding: 12px 16px;
      border: 1px solid rgba(var(--glow-rgb),.3);
      border-radius: 12px;
      font-size: 14px;
      margin-bottom: 12px;
      outline: none;
      box-sizing: border-box;
      color: #3d1a5c;
      background: var(--bg1);
    }
    .login-modal-input:focus {
      border-color: rgb(var(--glow-rgb));
      background: #fff;
    }
    .login-modal-btn {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 12px;
      background: linear-gradient(135deg, rgb(var(--primary-strong-rgb)), rgb(var(--glow-rgb)));
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      margin-top: 8px;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .login-modal-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(var(--glow-rgb),.4);
    }
    .login-modal-btn.register {
      background: linear-gradient(135deg, #ec4899, #f43f5e);
    }
    .login-modal-divider {
      text-align: center;
      color: #c4b5fd;
      font-size: 12px;
      margin: 16px 0;
      position: relative;
    }
    .login-modal-divider::before,
    .login-modal-divider::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 35%;
      height: 1px;
      background: rgba(var(--glow-rgb),.2);
    }
    .login-modal-divider::before { left: 0; }
    .login-modal-divider::after { right: 0; }
    .login-modal-error {
      text-align: center;
      color: #ef4444;
      font-size: 13px;
      margin-top: 10px;
      min-height: 18px;
    }
    .login-modal-close {
      float: right;
      color: #c4b5fd;
      cursor: pointer;
      font-size: 20px;
      line-height: 1;
    }
    .login-modal-close:hover {
      color: rgb(var(--primary-strong-rgb));
    }
    @media (max-width: 768px) {
      .moment-card {
        padding: 12px;
        border-radius: 14px;
      }
      .moment-avatar {
        width: 42px;
        height: 42px;
      }
      .moment-username {
        font-size: 14px;
      }
      .moment-content {
        font-size: 14px;
      }
    }

    /* ========== 弹窗公告样式 ========== */
    .popup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      z-index: 9998;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .popup-overlay.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
   .popup-modal {
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: 20px;
  padding: 0;
  position: relative;
  transform: scale(1) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;}
    .popup-overlay.active .popup-modal {
      transform: scale(1) translateY(0);
    }
    .popup-header {
      background: linear-gradient(135deg, rgb(var(--primary-rgb)), rgb(var(--accent-rgb)));
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .popup-title {
      color: #fff;
      font-size: 18px;
      font-weight: 700;
      margin: 0;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .popup-title::before {
      content: "";
      width: 8px;
      height: 8px;
      background: #fff;
      border-radius: 50%;
      animation: pulse 1.5s infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.8); }
    }
    .popup-close {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.25s ease;
    }
    .popup-close:hover {
      background: rgba(255, 255, 255, 0.35);
      transform: rotate(90deg);
    }
    .popup-body {
      padding: 30px;
      max-height: 60vh;
      overflow-y: auto;
    }
    .popup-content {
      color: #0b1b33;
      font-size: 15px;
      line-height: 1.8;
      text-align: center;
    }
    .popup-content p {
      margin: 0 0 12px;
    }
    .popup-content p:last-child {
      margin-bottom: 0;
    }
    .popup-footer {
      padding: 16px 24px 24px;
      text-align: center;
    }
    .popup-btn {
      display: inline-block;
      padding: 12px 40px;
      background: linear-gradient(135deg, rgb(var(--primary-rgb)), rgb(var(--accent-rgb)));
      color: #fff;
      border: none;
      border-radius: 25px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(var(--primary-strong-rgb), 0.48), 0 0 22px rgba(var(--glow-rgb),.22);
      transition: all 0.3s ease;
    }
    .popup-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(var(--primary-strong-rgb), 0.58), 0 0 32px rgba(var(--glow-rgb),.32);
    }

  /* ========== 右下角悬浮客服按钮 ========== */
.service-float-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  /* The control itself is interactive.  Relying on pointer-events on the
     child button made the floating panel unreliable on touch browsers. */
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;           /* 新增：禁止文字选中 */
  -webkit-user-select: none;   /* 新增：Safari兼容 */
}
.service-float-btn.dragging {
  transition: none !important; /* 新增：拖拽时移除过渡动画 */
}
.service-float-btn.dragging .service-panel {
  opacity: 0 !important;       /* 新增：拖拽时隐藏客服面板 */
  visibility: hidden !important;
}
    .service-toggle {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgb(var(--primary-rgb)), rgb(var(--accent-rgb)));
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 25px rgba(var(--primary-strong-rgb), 0.52), 0 0 22px rgba(var(--glow-rgb),.32);
      transition: all 0.3s ease;
      position: relative;
      pointer-events: auto;
      padding: 0;
    }
    
    .service-panel {
      pointer-events: auto;
    }
    .service-toggle:hover {
      transform: scale(1.1);
      box-shadow: 0 12px 35px rgba(var(--primary-strong-rgb), 0.62), 0 0 34px rgba(var(--glow-rgb),.42);
    }
    .service-toggle svg.service-toggle-icon {
      width: 28px;
      height: 28px;
      fill: #fff;
    }
    .service-toggle-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      display: block;
    }
    .service-toggle.has-img {
      background: #fff;
      border: 2px solid rgba(var(--glow-rgb),.35);
    }
    .service-toggle.has-img svg {
      display: none;
    }
    
    .service-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      width: 18px;
      height: 18px;
      background: #ff4757;
      border-radius: 50%;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(255, 71, 87, 0.5);
      z-index: 2;
    }
    
.service-panel {
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: 16px;
  padding: 16px;
  width: 580px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: bottom right;
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
}
.service-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.service-float-btn.panel-left .service-panel {
  right: auto;
  left: 0;
  transform-origin: bottom left;
}
.service-float-btn.panel-left .service-panel.active {
  transform: translateY(0) scale(1);
}
    .service-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 12px;
      border-bottom: 1px solid #eef2ff;
      margin-bottom: 12px;
    }
    .service-panel-title {
      font-size: 16px;
      font-weight: 700;
      color: #0b1b33;
      margin: 0;
    }
    .service-panel-close {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #f1f3f8;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #4f6380;
      font-size: 16px;
      transition: all 0.2s ease;
    }
    .service-panel-close:hover {
      background: #e4e7f0;
      color: #0b1b33;
    }
    .service-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .service-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  transition: all 0.25s ease;
}
.service-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(5px);
}
    .service-item:hover {
      background: linear-gradient(135deg, var(--bg2), var(--bg-soft));
      transform: translateX(5px);
    }
    .service-item-logo {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #fff;
      box-shadow: 0 4px 12px rgba(var(--primary-strong-rgb), 0.22);
    }
    .service-item-info {
      flex: 1;
      min-width: 0;
    }
    .service-item-name {
      font-size: 14px;
      font-weight: 700;
      color: #0b1b33;
      margin-bottom: 2px;
    }
    .service-item-account {
      font-size: 12px;
      color: #4f6380;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .service-item-action {
      display: flex;
      gap: 6px;
    }
    .service-copy-btn, .service-add-btn {
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: all 0.2s ease;
    }
    .service-copy-btn {
      background: linear-gradient(135deg, rgb(var(--primary-rgb)), rgb(var(--accent-rgb)));
      color: #fff;
    }
    .service-copy-btn:hover {
      box-shadow: 0 4px 12px rgba(var(--primary-strong-rgb), 0.48), 0 0 14px rgba(var(--glow-rgb),.22);
      transform: translateY(-1px);
    }
    .service-add-btn {
      background: #fff;
      color: rgb(var(--primary-strong-rgb));
      border: 1px solid rgb(var(--primary-strong-rgb));
    }
    .service-add-btn:hover {
      background: rgb(var(--primary-strong-rgb));
      color: #fff;
    }

   @media (max-width: 520px) {
      .popup-modal {
        border-radius: 16px;
      }
      .popup-header {
        padding: 10px 15px;
      }
      .popup-title {
        font-size: 16px;
      }
      .popup-body {
        padding: 18px;
      }
      .popup-content {
        font-size: 14px;
      }
      .service-panel {
        width: calc(100vw - 40px);
        right: 0;
      }
    }

    /* ========== 悬浮分享按钮 ========== */
    .share-float-btn {
      position: fixed;
      right: 20px;
      bottom: 84px;
      z-index: 99;
      touch-action: none;
      padding-bottom: 18px;
      transform:translateZ(0);
      will-change:transform;
    }
    .share-float-btn.dragging .share-float-toggle {
      transition: none;
      cursor: grabbing;
    }
    .share-float-toggle {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: none;
      background: linear-gradient(135deg, #FF6B9D, #FFB86B, #FFE66B, #6BFF8A, #6BDDFF, #6B7BFF, #C46BFF);
      background-size: 300% 300%;
      color: #fff;
      font-size: 24px;
      cursor: pointer;
      box-shadow: 0 6px 24px rgba(107,123,255,.35), 0 2px 8px rgba(0,0,0,.1), 0 0 36px rgba(255,107,157,.25), inset 0 1px 0 rgba(255,255,255,.6);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
      position: relative;
      touch-action: none;
      overflow: visible;
      z-index: 2;
      animation: rainbowShift 6s ease infinite, shareFloatBob 2s ease-in-out infinite;
    }
    .share-float-toggle::before {
      content: "";
      position: absolute;
      inset: -3px;
      border-radius: 50%;
      padding: 2px;
      background: conic-gradient(from 0deg, transparent 0deg, rgba(255,107,157,.7) 60deg, rgba(255,230,107,.7) 120deg, rgba(107,255,138,.7) 180deg, rgba(107,221,255,.7) 240deg, rgba(196,107,255,.7) 300deg, transparent 360deg);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      animation: shareFloatSpin 3s linear infinite;
    }
    .share-float-toggle::after {
      content: "";
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(107,123,255,.18), transparent 70%);
      pointer-events: none;
      z-index: -1;
      animation: shareFloatGlow 2.5s ease-in-out infinite;
    }
    @keyframes shareFloatSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes shareFloatBob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }
    @keyframes shareFloatGlow {
      0%, 100% { transform: scale(1); opacity: .6; }
      50% { transform: scale(1.2); opacity: 1; }
    }
    @keyframes rainbowShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .share-float-toggle:hover {
      transform: translateY(-2px) scale(1.06);
      box-shadow: 0 10px 32px rgba(107,123,255,.45), 0 4px 12px rgba(0,0,0,.12), 0 0 60px rgba(255,107,157,.35), inset 0 1px 0 rgba(255,255,255,.7);
    }
    .share-float-toggle:active {
      transform: translateY(0) scale(1.02);
    }
    .share-float-toggle .share-float-pulse {
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      border: 2px solid rgba(107,123,255,.4);
      animation: sharePulse 2.5s ease-in-out infinite;
      pointer-events: none;
    }
    .share-float-toggle .share-float-pulse:nth-child(2) {
      animation-delay: 1.25s;
    }
    @keyframes sharePulse {
      0% { transform: scale(1); opacity: .6; }
      50% { transform: scale(1.15); opacity: .15; }
      100% { transform: scale(1); opacity: .6; }
    }
    .share-float-toggle .share-float-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      min-width: 20px;
      height: 20px;
      padding: 0 5px;
      border-radius: 10px;
      background: linear-gradient(135deg, #FF6B6B, #FF4757);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 3px 10px rgba(255,71,87,.4);
      line-height: 1;
      border: 2px solid #fff;
    }
    @media (max-width: 768px) {
      .share-float-btn { right: 14px; bottom: 80px; }
      .share-float-toggle { width: 38px; height: 38px; font-size: 16px; }
      .share-float-toggle svg { width: 18px; height: 18px; }
    }

    /* ========== 抽奖悬浮按钮 ========== */
    .lottery-float-btn {
      position: fixed;
      left: 20px;
      bottom: 84px;
      z-index: 99;
      touch-action: none;
      padding-bottom: 18px;
      transform:translateZ(0);
      will-change:transform;
    }
    .lottery-float-toggle {
      width: 48px;
      height: 48px;
      border: none;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #2d1b4e, #1a1035);
      cursor: pointer;
      position: relative;
      touch-action: none;
      overflow: visible;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .3s cubic-bezier(.22,1,.36,1);
      animation: floatChestBounce 2s ease-in-out infinite;
      box-shadow: 
        0 4px 16px rgba(147,51,234,.35),
        0 0 32px rgba(245,215,110,.2),
        inset 0 1px 0 rgba(255,255,255,.1);
      border: 2px solid rgba(245,215,110,.5);
    }
    @keyframes floatChestBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }
    .lottery-float-toggle:hover {
      transform: scale(1.1);
      animation: none;
    }
    .float-chest-label {
      position: absolute;
      bottom: -16px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 11px;
      font-weight: 700;
      color: #F5D76E;
      white-space: nowrap;
      text-shadow: 0 1px 3px rgba(0,0,0,.5);
      letter-spacing: 1px;
    }
    .float-gift {
      position: relative;
      width: 28px;
      height: 26px;
    }
    .float-gift-box {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 28px;
      height: 18px;
      background: linear-gradient(145deg, #FF6B9D 0%, #FF4757 50%, #C0392B 100%);
      border-radius: 3px;
      box-shadow: 
        0 2px 6px rgba(255,71,87,.4),
        inset 0 1px 0 rgba(255,255,255,.3);
    }
    .float-gift-box::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 5px;
      height: 100%;
      background: linear-gradient(90deg, #F5D76E, #FFE66B, #F5D76E);
      box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }
    .float-gift-lid {
      position: absolute;
      top: 0;
      left: -2px;
      width: 32px;
      height: 10px;
      background: linear-gradient(180deg, #FF6B9D 0%, #FF4757 100%);
      border-radius: 3px 3px 2px 2px;
      box-shadow: 
        0 -1px 4px rgba(255,107,157,.3),
        inset 0 1px 0 rgba(255,255,255,.4);
    }
    .float-gift-lid::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 5px;
      height: 100%;
      background: linear-gradient(90deg, #F5D76E, #FFE66B, #F5D76E);
    }
    .float-gift-bow {
      position: absolute;
      top: -4px;
      left: 50%;
      transform: translateX(-50%);
      width: 14px;
      height: 10px;
    }
    .float-gift-bow::before,
    .float-gift-bow::after {
      content: "";
      position: absolute;
      top: 0;
      width: 8px;
      height: 8px;
      background: radial-gradient(circle at 30% 30%, #FFE66B, #F5D76E);
      border-radius: 50% 50% 50% 0;
      box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }
    .float-gift-bow::before {
      left: 0;
      transform: rotate(-30deg);
    }
    .float-gift-bow::after {
      right: 0;
      transform: rotate(30deg) scaleX(-1);
    }
    .float-gift-knot {
      position: absolute;
      top: -1px;
      left: 50%;
      transform: translateX(-50%);
      width: 4px;
      height: 4px;
      background: radial-gradient(circle at 30% 30%, #FFE66B, #D4AF37);
      border-radius: 50%;
      z-index: 2;
      box-shadow: 0 1px 2px rgba(0,0,0,.3);
    }
    .float-gift-sparkle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: #FFE66B;
      border-radius: 50%;
      box-shadow: 0 0 6px #FFE66B;
      animation: giftSparkle 1.5s ease-in-out infinite;
    }
    .float-gift-sparkle.s1 { top: -6px; right: -4px; animation-delay: 0s; }
    .float-gift-sparkle.s2 { top: 4px; left: -6px; animation-delay: .5s; width: 3px; height: 3px; }
    .float-gift-sparkle.s3 { bottom: 2px; right: -5px; animation-delay: 1s; width: 3px; height: 3px; }
    @keyframes giftSparkle {
      0%, 100% { opacity: 0; transform: scale(0); }
      50% { opacity: 1; transform: scale(1); }
    }
    .lottery-float-toggle::after {
      content: "";
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(245,215,110,.4) 0%, rgba(147,51,234,.2) 40%, transparent 70%);
      pointer-events: none;
      z-index: -1;
      animation: floatChestGlow 2s ease-in-out infinite;
    }
    @keyframes floatChestGlow {
      0%, 100% { opacity: .6; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.2); }
    }
    .lottery-float-toggle .lottery-float-badge {
      position: absolute;
      top: -2px;
      right: -2px;
      min-width: 16px;
      height: 16px;
      border-radius: 8px;
      background: linear-gradient(135deg, #FF6B9D, #FF4757);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      box-shadow: 0 2px 6px rgba(255,71,87,.5);
      z-index: 10;
      border: 1.5px solid #fff;
    }

    /* ========== 抽奖弹窗 ========== */
    .lottery-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: radial-gradient(ellipse at center, rgba(30,15,60,.85) 0%, rgba(10,5,30,.95) 100%);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      padding: 20px;
    }
    .lottery-overlay.active { display: flex; }
    .lottery-modal {
      background: linear-gradient(160deg, #0f0a1f 0%, #1a1035 30%, #2d1b4e 60%, #1a1035 100%);
      border-radius: 28px;
      width: 100%;
      max-width: 380px;
      padding: 24px 20px 20px;
      position: relative;
      box-shadow: 
        0 30px 80px rgba(0,0,0,.6),
        0 0 60px rgba(147,51,234,.25),
        inset 0 1px 0 rgba(255,255,255,.1);
      animation: lotteryPop .5s cubic-bezier(.22,1.3,.36,1);
      border: 1px solid rgba(245,215,110,.2);
      overflow: hidden;
    }
    .lottery-modal-loading {
      position: absolute;
      inset: 0;
      background: linear-gradient(160deg, #0f0a1f 0%, #1a1035 30%, #2d1b4e 60%, #1a1035 100%);
      z-index: 20;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      border-radius: 28px;
    }
    .lottery-modal-loading.active { display: flex; }
    .lottery-modal::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: conic-gradient(from 0deg, transparent 0deg, rgba(245,215,110,.08) 60deg, transparent 120deg, rgba(236,72,153,.08) 180deg, transparent 240deg, rgba(147,51,234,.08) 300deg, transparent 360deg);
      animation: lotteryGlowRotate 10s linear infinite;
      pointer-events: none;
    }
    .lottery-modal::after {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 2px;
      background: linear-gradient(90deg, transparent, #F5D76E, #FF6B9D, #F5D76E, transparent);
      opacity: .6;
      filter: blur(1px);
    }
    @keyframes lotteryGlowRotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes lotteryPop {
      from { transform: scale(.7) translateY(20px); opacity: 0; }
      to { transform: scale(1) translateY(0); opacity: 1; }
    }
    .lottery-close {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid rgba(245,215,110,.25);
      background: rgba(0,0,0,.3);
      color: rgba(255,255,255,.6);
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5;
      backdrop-filter: blur(10px);
      transition: all .3s;
      font-weight: 300;
    }
    .lottery-close:hover {
      background: rgba(245,215,110,.15);
      color: #F5D76E;
      border-color: rgba(245,215,110,.5);
      transform: rotate(90deg);
    }
    .lottery-title {
      text-align: center;
      font-size: 22px;
      font-weight: 900;
      background: linear-gradient(180deg, #FFE66B 0%, #F5D76E 40%, #D4AF37 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 4px;
      letter-spacing: 2px;
      position: relative;
      z-index: 2;
      text-shadow: 0 0 20px rgba(245,215,110,.3);
      filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
    }
    .lottery-subtitle {
      text-align: center;
      font-size: 11px;
      color: rgba(245,215,110,.6);
      margin-bottom: 16px;
      position: relative;
      z-index: 2;
      letter-spacing: 1px;
    }
    .lottery-chest-wrap {
      position: relative;
      width: 180px;
      height: 180px;
      margin: 0 auto 16px;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .lottery-chest-wrap::before {
      content: "";
      position: absolute;
      inset: -20px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(245,215,110,.25) 0%, rgba(147,51,234,.15) 40%, transparent 70%);
      z-index: -1;
      animation: chestGlow 2.5s ease-in-out infinite;
    }
    @keyframes chestGlow {
      0%, 100% { opacity: .6; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.1); }
    }
    .lottery-chest {
      position: relative;
      width: 130px;
      height: 115px;
      cursor: pointer;
      transition: transform .3s cubic-bezier(.22,1,.36,1);
    }
    .lottery-chest:hover {
      transform: scale(1.05);
    }
    .lottery-chest.shaking {
      animation: chestShake .15s ease-in-out infinite;
    }
    @keyframes chestShake {
      0%, 100% { transform: rotate(-2deg); }
      50% { transform: rotate(2deg); }
    }
    .lottery-chest.opening .chest-lid {
      animation: lidOpen .8s cubic-bezier(.22,1,.36,1) forwards;
    }
    @keyframes lidOpen {
      0% { transform: rotateX(0deg); }
      100% { transform: rotateX(-110deg); }
    }
    .chest-body {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 160px;
      height: 90px;
      background: linear-gradient(145deg, #8B6914 0%, #B8860B 30%, #D4AF37 60%, #B8860B 100%);
      border-radius: 8px 8px 12px 12px;
      box-shadow: 
        0 10px 30px rgba(0,0,0,.5),
        inset 0 2px 0 rgba(255,255,255,.3),
        inset 0 -4px 0 rgba(0,0,0,.2);
    }
    .chest-body::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 40px;
      background: linear-gradient(145deg, #F5D76E, #D4AF37);
      border-radius: 6px;
      box-shadow: 
        0 2px 8px rgba(0,0,0,.3),
        inset 0 1px 0 rgba(255,255,255,.5);
    }
    .chest-body::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 12px;
      height: 12px;
      background: #1a1035;
      border-radius: 50%;
      box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
    }
    .chest-lid {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 170px;
      height: 60px;
      background: linear-gradient(180deg, #D4AF37 0%, #B8860B 50%, #8B6914 100%);
      border-radius: 12px 12px 4px 4px;
      transform-origin: bottom center;
      box-shadow: 
        0 -4px 12px rgba(245,215,110,.3),
        inset 0 2px 0 rgba(255,255,255,.4);
      z-index: 2;
    }
    .chest-lid::before {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      right: 0;
      height: 10px;
      background: linear-gradient(145deg, #F5D76E, #D4AF37);
      border-radius: 0 0 2px 2px;
    }
    .chest-gold {
      position: absolute;
      top: 55%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 40px;
      opacity: 0;
      z-index: 3;
      filter: drop-shadow(0 4px 12px rgba(245,215,110,.6));
    }
    .lottery-chest.opening .chest-gold {
      animation: goldBurst 1s cubic-bezier(.22,1,.36,1) .4s forwards;
    }
    @keyframes goldBurst {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
      60% { opacity: 1; transform: translate(-50%, -80%) scale(1.3); }
      100% { opacity: 1; transform: translate(-50%, -70%) scale(1); }
    }
    .chest-particles {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      pointer-events: none;
    }
    .chest-particle {
      position: absolute;
      width: 6px;
      height: 6px;
      background: #F5D76E;
      border-radius: 50%;
      opacity: 0;
    }
    .lottery-chest.opening .chest-particle {
      animation: particleFly 1.2s ease-out forwards;
    }
    @keyframes particleFly {
      0% { opacity: 0; transform: translate(0, 0) scale(0); }
      20% { opacity: 1; }
      100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1); }
    }
    .chest-spinner {
      width: 36px;
      height: 36px;
      border: 3px solid rgba(245,215,110,.25);
      border-top-color: #F5D76E;
      border-radius: 50%;
      animation: chestSpin .7s linear infinite;
    }
    .chest-loading-text {
      color: #F5D76E;
      font-size: 13px;
      letter-spacing: 1px;
    }
    @keyframes chestSpin { to { transform: rotate(360deg); } }
    .lottery-prizes {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 14px;
      position: relative;
      z-index: 2;
      padding: 12px 10px 10px;
      background: rgba(0,0,0,.2);
      border-radius: 14px;
      border: 1px solid rgba(245,215,110,.1);
    }
    .lottery-prizes-label {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, #F5D76E, #FF6B9D);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 11px;
      font-weight: 700;
      padding: 0 12px;
      letter-spacing: 2px;
      background-color: #0f0a1f;
    }
    .lottery-prize-card {
      background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 12px;
      padding: 10px 4px;
      text-align: center;
      transition: all .3s cubic-bezier(.22,1,.36,1);
      position: relative;
      min-width: 0;
      overflow: hidden;
    }
    .lottery-prize-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--prize-color, #F5D76E), transparent);
      opacity: .5;
    }
    .lottery-prize-card.highlight {
      border-color: rgba(245,215,110,.4);
      background: linear-gradient(145deg, rgba(245,215,110,.1), rgba(245,215,110,.03));
    }
    .lottery-prize-card.highlight::after {
      content: "大奖";
      position: absolute;
      top: 0;
      right: 0;
      background: linear-gradient(135deg, #F5D76E, #FF6B9D);
      color: #1a1035;
      font-size: 9px;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 0 12px 0 10px;
      letter-spacing: 1px;
      line-height: 1.4;
    }
    .lottery-prize-card.active {
      border-color: rgba(245,215,110,.9);
      background: linear-gradient(145deg, rgba(245,215,110,.25), rgba(245,215,110,.08));
      box-shadow: 0 0 24px rgba(245,215,110,.5), inset 0 1px 0 rgba(255,255,255,.2);
      transform: scale(1.08);
      z-index: 3;
    }
    .lottery-prize-icon {
      font-size: 24px;
      margin: 0 auto 6px;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
      transition: transform .3s;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .lottery-prize-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 8px;
    }
    .lottery-prize-card.active .lottery-prize-icon {
      transform: scale(1.2);
    }
    .lottery-prize-name {
      font-size: 10px;
      font-weight: 600;
      color: rgba(255,255,255,.9);
      display: block;
      width: 100%;
      line-height: 1.3;
      word-break: break-all;
    }
    .lottery-prize-prob {
      font-size: 9px;
      color: rgba(245,215,110,.6);
      margin-top: 4px;
      font-weight: 500;
    }
    .lottery-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(145deg, rgba(0,0,0,.25), rgba(0,0,0,.1));
      border: 1px solid rgba(245,215,110,.12);
      border-radius: 14px;
      padding: 12px 16px;
      margin-bottom: 14px;
      position: relative;
      z-index: 2;
      backdrop-filter: blur(10px);
    }
    .lottery-info-item {
      text-align: center;
      flex: 1;
      position: relative;
    }
    .lottery-info-item + .lottery-info-item::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 20px;
      background: linear-gradient(180deg, transparent, rgba(245,215,110,.3), transparent);
    }
    .lottery-info-num {
      font-size: 18px;
      font-weight: 900;
      background: linear-gradient(180deg, #FFE66B, #D4AF37);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 16px rgba(245,215,110,.3);
    }
    .lottery-info-label {
      font-size: 10px;
      color: rgba(245,215,110,.6);
      margin-top: 3px;
      letter-spacing: 1px;
    }
    .lottery-btn {
      width: 100%;
      padding: 14px;
      border-radius: 14px;
      border: none;
      background: linear-gradient(135deg, #FFE66B 0%, #F5D76E 30%, #FF6B9D 70%, #FF4757 100%);
      background-size: 200% 200%;
      color: #1a1035;
      font-size: 15px;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 
        0 8px 24px rgba(245,215,110,.35),
        0 3px 10px rgba(255,107,157,.3),
        inset 0 1px 0 rgba(255,255,255,.5);
      transition: all .3s cubic-bezier(.22,1,.36,1);
      position: relative;
      z-index: 2;
      letter-spacing: 3px;
      animation: btnGradient 3s ease infinite;
      text-shadow: 0 1px 0 rgba(255,255,255,.3);
    }
    .lottery-btn:hover {
      transform: translateY(-2px);
      box-shadow: 
        0 14px 36px rgba(245,215,110,.45),
        0 6px 16px rgba(255,107,157,.4),
        inset 0 1px 0 rgba(255,255,255,.5);
    }
    .lottery-btn:active {
      transform: translateY(0);
    }
    .lottery-btn:disabled {
      opacity: .5;
      cursor: not-allowed;
      transform: none;
    }
    @keyframes btnGradient {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }
    .lottery-btn:active {
      transform: scale(.97);
    }
    .lottery-btn:disabled {
      opacity: .4;
      cursor: not-allowed;
      animation: none;
    }
    .lottery-result-modal {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,.7);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1100;
      padding: 20px;
    }
    .lottery-result-modal.active { display: flex; }
    .lottery-result {
      background: linear-gradient(160deg, #1a1035 0%, #2d1b4e 100%);
      border-radius: 24px;
      padding: 36px 28px 28px;
      text-align: center;
      max-width: 300px;
      width: 100%;
      animation: lotteryPop .5s cubic-bezier(.22,1.3,.36,1);
      border: 1px solid rgba(147,51,234,.3);
      box-shadow: 0 20px 60px rgba(0,0,0,.5);
      position: relative;
      overflow: hidden;
    }
    .lottery-result::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 100px;
      background: radial-gradient(ellipse at top, rgba(245,215,110,.15), transparent 70%);
      pointer-events: none;
    }
    .lottery-result-icon {
      font-size: 64px;
      margin-bottom: 16px;
      position: relative;
      z-index: 2;
      filter: drop-shadow(0 4px 12px rgba(245,215,110,.4));
      animation: resultBounce .6s cubic-bezier(.22,1.3,.36,1);
    }
    @keyframes resultBounce {
      0% { transform: scale(0); }
      60% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }
    .lottery-result-title {
      font-size: 22px;
      font-weight: 900;
      background: linear-gradient(135deg, #F5D76E, #FF6B9D);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 10px;
      position: relative;
      z-index: 2;
    }
    .lottery-result-desc {
      font-size: 14px;
      color: rgba(255,255,255,.6);
      margin-bottom: 24px;
      line-height: 1.6;
      position: relative;
      z-index: 2;
    }
    .lottery-result-btn {
      width: 100%;
      padding: 14px;
      border-radius: 14px;
      border: none;
      background: linear-gradient(135deg, #F5D76E, #FF6B9D);
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      position: relative;
      z-index: 2;
    }
    .lottery-result-btn-secondary {
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(245,215,110,.3);
      color: #F5D76E;
    }
    .lottery-result-btns {
      display: flex;
      gap: 10px;
      position: relative;
      z-index: 2;
    }
    .lottery-result-btns .lottery-result-btn {
      flex: 1;
      padding: 12px;
      font-size: 14px;
    }
    .lottery-win-code {
      margin: 16px 0 20px;
      padding: 16px;
      background: rgba(245,215,110,.1);
      border: 1px dashed rgba(245,215,110,.4);
      border-radius: 14px;
      position: relative;
      z-index: 2;
    }
    .win-code-label {
      font-size: 12px;
      color: rgba(255,255,255,.5);
      margin-bottom: 8px;
      text-align: center;
      letter-spacing: 2px;
    }
    .win-code-value {
      font-size: 32px;
      font-weight: 800;
      text-align: center;
      color: #F5D76E;
      letter-spacing: 8px;
      text-shadow: 0 0 20px rgba(245,215,110,.5);
      font-family: 'Courier New', monospace;
    }
    .win-code-tip {
      font-size: 11px;
      color: rgba(255,255,255,.4);
      text-align: center;
      margin-top: 8px;
    }
    .win-history-list {
      margin: 16px 0 20px;
      max-height: 300px;
      overflow-y: auto;
      position: relative;
      z-index: 2;
    }
    .win-history-empty {
      text-align: center;
      color: rgba(255,255,255,.4);
      padding: 30px 0;
      font-size: 13px;
    }
    .win-history-item {
      display: flex;
      align-items: center;
      padding: 12px;
      background: rgba(255,255,255,.05);
      border-radius: 10px;
      margin-bottom: 8px;
    }
    .win-history-icon {
      font-size: 24px;
      margin-right: 10px;
    }
    .win-history-info {
      flex: 1;
      min-width: 0;
    }
    .win-history-prize {
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 4px;
    }
    .win-history-time {
      font-size: 11px;
      color: rgba(255,255,255,.4);
    }
    .win-history-code {
      font-size: 14px;
      font-weight: 700;
      color: #F5D76E;
      letter-spacing: 2px;
      font-family: 'Courier New', monospace;
    }
    .lottery-history-link {
      text-align: center;
      margin-top: 14px;
      font-size: 13px;
      color: rgba(255,255,255,.5);
      cursor: pointer;
      position: relative;
      z-index: 2;
      transition: color .3s;
    }
    .lottery-history-link:hover {
      color: #F5D76E;
    }

    @media (max-width: 768px) {
      .lottery-float-btn { left: 14px; bottom: 80px; }
      .lottery-float-toggle { width: 42px; height: 42px; border-width: 1.5px; }
       .float-gift { width: 24px; height: 22px; }
       .float-gift-box { width: 24px; height: 15px; }
       .float-gift-box::before { width: 4px; }
       .float-gift-lid { width: 28px; height: 8px; left: -2px; }
       .float-gift-lid::before { width: 4px; }
       .float-gift-bow { width: 12px; height: 8px; top: -3px; }
       .float-gift-bow::before, .float-gift-bow::after { width: 7px; height: 7px; }
       .float-gift-knot { width: 3px; height: 3px; top: 0; }
       .float-chest-label { font-size: 10px; bottom: -14px; }
      .lottery-wheel-wrap { width: 240px; height: 240px; }
      .lottery-chest-wrap { width: 160px; height: 160px; margin: 0 auto; }
      .lottery-chest { width: 110px; height: 95px; }
      .chest-body { width: 110px; height: 62px; }
      .chest-lid { width: 118px; height: 42px; }
      .lottery-prizes { gap: 6px; padding: 10px 6px 8px; margin-bottom: 10px; }
      .lottery-prize-card { padding: 8px 2px; border-radius: 10px; }
      .lottery-prize-icon { font-size: 18px; margin-bottom: 4px; width: 30px; height: 30px; }
      .lottery-prize-icon img { border-radius: 6px; }
      .lottery-prize-name { font-size: 9px; }
      .lottery-prize-prob { font-size: 8px; }
      .lottery-prizes-label { font-size: 9px; top: -8px; padding: 0 10px; }
      .lottery-info { padding: 10px 12px; border-radius: 12px; margin-bottom: 12px; }
      .lottery-info-num { font-size: 16px; }
      .lottery-info-label { font-size: 10px; }
      .lottery-btn { padding: 12px; font-size: 14px; letter-spacing: 2px; border-radius: 12px; }
      .lottery-title { font-size: 20px; letter-spacing: 1px; margin-bottom: 4px; }
      .lottery-subtitle { font-size: 10px; margin-bottom: 14px; }
      .lottery-modal { max-width: 340px; padding: 20px 16px 16px; max-height: none; overflow: visible; }
      .win-code-value { font-size: 26px; letter-spacing: 6px; }
      .lottery-win-code { padding: 12px; margin: 12px 0 16px; }
      .win-code-tip { font-size: 10px; }
      .win-code-label { font-size: 11px; }
      .lottery-result-btns .lottery-result-btn { padding: 11px; font-size: 13px; }
      .win-history-item { padding: 10px; }
      .win-history-icon { font-size: 20px; margin-right: 8px; }
      .win-history-prize { font-size: 13px; }
      .win-history-time { font-size: 10px; }
      .win-history-code { font-size: 12px; letter-spacing: 1px; }
      .lottery-history-link { font-size: 12px; margin-top: 10px; }
      .lottery-result-modal { padding: 16px; }
      .lottery-result { padding: 28px 20px 22px; border-radius: 20px; max-width: 280px; }
      .lottery-result-icon { font-size: 48px; margin-bottom: 12px; }
      .lottery-result-title { font-size: 20px; margin-bottom: 6px; }
      .lottery-result-desc { font-size: 13px; margin-bottom: 18px; }
      .lottery-result-btn { padding: 12px; font-size: 14px; border-radius: 12px; }
      .win-history-list { max-height: 250px; margin: 12px 0 16px; }
      .win-history-empty { padding: 20px 0; font-size: 12px; }
    }

    /* ========== 分享豪礼弹窗 ========== */
    .share-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(10,5,30,.6);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      z-index: 10002;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      opacity: 0;
      transition: opacity .35s ease;
    }
    .share-overlay.show { display: flex; opacity: 1; }
    .share-modal {
      background: rgba(255,255,255,.88);
      border-radius: 22px;
      width: 100%;
      max-width: 360px;
      padding: 0;
      border: 1px solid rgba(255,255,255,.5);
      box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 20px 60px rgba(124,58,237,.12), 0 8px 24px rgba(0,0,0,.1);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      animation: shareModalIn .45s cubic-bezier(.22,1,.36,1);
      overflow: hidden;
      position: relative;
    }
    .share-modal::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: conic-gradient(from 0deg, transparent 0deg, rgba(124,58,237,.6) 90deg, rgba(236,72,153,.6) 180deg, rgba(249,115,22,.6) 270deg, transparent 360deg);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      z-index: 2;
      animation: shareBorderSpin 6s linear infinite;
    }
    .share-modal::after {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at 50% 50%, rgba(124,58,237,.06), transparent 60%);
      pointer-events: none;
      z-index: 0;
      animation: shareOrbit 12s linear infinite;
    }
    @keyframes shareBorderSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes shareGlowPulse {
      0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 20px 60px rgba(124,58,237,.15), 0 8px 24px rgba(0,0,0,.12), 0 0 40px rgba(124,58,237,.08); }
      50% { box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 20px 60px rgba(124,58,237,.2), 0 8px 24px rgba(0,0,0,.12), 0 0 60px rgba(124,58,237,.12); }
    }
    @keyframes shareOrbit {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes shareModalIn {
      from { opacity: 0; transform: translateY(28px) scale(.92); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .share-header {
      background: linear-gradient(120deg, #7C3AED 0%, #9333EA 25%, #C026D3 50%, #EC4899 75%, #F97316 100%);
      padding: 22px 20px 20px;
      position: relative;
      overflow: hidden;
    }
    .share-header::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(90deg, transparent 0 2px, rgba(255,255,255,.04) 2px 4px);
      pointer-events: none;
    }
    .share-header::after {
      content: "";
      position: absolute;
      top: -40%; right: -15%;
      width: 220px; height: 220px;
      background: radial-gradient(circle, rgba(255,200,100,.15), transparent 65%);
      pointer-events: none;
    }
    .share-header-scan {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
      z-index: 2;
      animation: shareScanLine 3s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes shareScanLine {
      0% { top: 0; opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { top: 100%; opacity: 0; }
    }
    .share-header-particles {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 1;
    }
    .share-header-particles span {
      position: absolute;
      width: 2px;
      height: 2px;
      background: #fff;
      border-radius: 50%;
      opacity: .6;
      animation: shareParticleFloat 4s ease-in-out infinite;
    }
    .share-header-particles span:nth-child(1) { left: 10%; top: 30%; animation-delay: 0s; }
    .share-header-particles span:nth-child(2) { left: 25%; top: 60%; animation-delay: .8s; width: 3px; height: 3px; }
    .share-header-particles span:nth-child(3) { left: 45%; top: 20%; animation-delay: 1.6s; }
    .share-header-particles span:nth-child(4) { left: 65%; top: 70%; animation-delay: 2.4s; width: 1.5px; height: 1.5px; }
    .share-header-particles span:nth-child(5) { left: 80%; top: 40%; animation-delay: 3.2s; width: 2.5px; height: 2.5px; }
    .share-header-particles span:nth-child(6) { left: 90%; top: 80%; animation-delay: 1.2s; }
    @keyframes shareParticleFloat {
      0%, 100% { transform: translateY(0) translateX(0); opacity: .3; }
      50% { transform: translateY(-15px) translateX(5px); opacity: .8; }
    }
    .share-header-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      position: relative;
      z-index: 1;
    }
    .share-header-left {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
      min-width: 0;
    }
    .share-header-icon {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      background: rgba(255,255,255,.2);
      border: 1px solid rgba(255,255,255,.3);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(0,0,0,.15);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }
    .share-header-icon svg { width: 22px; height: 22px; }
    .share-header-text { flex: 1; min-width: 0; }
    .share-title {
      color: #fff;
      font-size: 17px;
      font-weight: 800;
      margin: 0 0 2px;
      text-shadow: 0 1px 6px rgba(0,0,0,.2);
      display: flex;
      align-items: center;
      gap: 6px;
      line-height: 1.2;
    }
    .share-bonus-tag {
      display: inline-block;
      background: #FCD34D;
      color: #422006;
      font-size: 9px;
      font-weight: 900;
      padding: 2px 7px;
      border-radius: 999px;
      letter-spacing: .5px;
      border: 1px solid rgba(0,0,0,.2);
      line-height: 1.1;
      box-shadow: 0 2px 6px rgba(252,211,77,.35);
    }
    .share-subtitle {
      color: rgba(255,255,255,.75);
      font-size: 11px;
      margin: 0;
      line-height: 1.3;
    }
    .share-close {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: rgba(0,0,0,.2);
      border: 1px solid rgba(255,255,255,.2);
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .25s ease;
      flex-shrink: 0;
      line-height: 1;
    }
    .share-close:hover { background: rgba(0,0,0,.35); transform: rotate(90deg); }
    .share-body {
      padding: 16px;
      position: relative;
    }
    .share-card {
      background: rgba(255,255,255,.7);
      border-radius: 14px;
      padding: 16px;
      border: 1px solid rgba(255,255,255,.4);
      margin-bottom: 14px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(124,58,237,.06);
    }
    .share-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(124,58,237,.06), transparent);
      animation: shareCardShine 4s ease-in-out infinite 1s;
      pointer-events: none;
    }
    @keyframes shareCardShine {
      0% { left: -100%; }
      50%, 100% { left: 100%; }
    }
    .share-card-hero {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 10px;
    }
    .share-card-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, #F5D76E, #D4AF37, #B8860B);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(212,175,55,.4), inset 0 1px 0 rgba(255,255,255,.5);
    }
    .share-card-icon svg { width: 20px; height: 20px; }
    .share-card-hero-text { flex: 1; min-width: 0; }
    .share-card-tag {
      font-size: 10px;
      color: #9CA3AF;
      font-weight: 600;
      margin-bottom: 2px;
      letter-spacing: .3px;
    }
    .share-card-title {
      font-size: 15px;
      font-weight: 800;
      color: #1F2937;
      margin-bottom: 2px;
      line-height: 1.3;
    }
    .share-reward-tag {
      display: inline-block;
      background: linear-gradient(135deg, #F5D76E, #D4AF37, #B8860B);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      padding: 3px 12px;
      border-radius: 999px;
      margin-top: 4px;
      box-shadow: 0 2px 10px rgba(212,175,55,.4), inset 0 1px 0 rgba(255,255,255,.4);
      letter-spacing: .5px;
      text-shadow: 0 1px 2px rgba(0,0,0,.2);
    }
    .share-card-desc {
      font-size: 11px;
      color: #6B7280;
      line-height: 1.5;
      margin-bottom: 14px;
    }
    .share-progress-label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    .share-progress-text {
      font-size: 12px;
      font-weight: 700;
      color: #4B5563;
    }
    .share-progress-count {
      font-size: 14px;
      font-weight: 800;
      color: #1F2937;
    }
    .share-progress-count .current {
      color: #EC4899;
      display: inline-block;
      text-shadow: 0 0 12px rgba(236,72,153,.3);
      transition: transform .2s ease;
    }
    .share-progress-count .current.bump {
      animation: shareNumBump .5s cubic-bezier(.22,1,.36,1);
    }
    @keyframes shareNumBump {
      0% { transform: scale(1); }
      40% { transform: scale(1.3); color: #F97316; text-shadow: 0 0 16px rgba(249,115,22,.5); }
      100% { transform: scale(1); }
    }
    .share-progress-count .sep { color: #D1D5DB; margin: 0 2px; }
    .share-progress-count .target { color: #9CA3AF; }
    .share-progress-count .unit { font-size: 10px; color: #9CA3AF; margin-left: 1px; }
    .share-progress-bar {
      width: 100%;
      height: 8px;
      background: #F3F0F9;
      border-radius: 999px;
      overflow: hidden;
      position: relative;
    }
    .share-progress-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #7C3AED, #EC4899, #F97316);
      border-radius: 999px;
      transition: width .9s cubic-bezier(.22,1,.36,1);
      box-shadow: 0 0 10px rgba(236,72,153,.4);
    }
    .share-progress-fill::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
      animation: shareShimmer 2.5s linear infinite;
    }
    @keyframes shareShimmer {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
    .share-info-bar {
      margin-top: 10px;
      background: rgba(56,189,248,.08);
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: #38BDF8;
      font-weight: 600;
      border: 1px solid rgba(56,189,248,.12);
    }
    .share-info-bar.success { background: rgba(16,185,129,.08); color: #34D399; border-color: rgba(16,185,129,.12); }
    .share-info-bar svg { flex-shrink: 0; }
    .share-site-section {
      margin-bottom: 12px;
    }
    .share-site-name {
      font-size: 14px;
      font-weight: 800;
      color: #1F2937;
      margin-bottom: 2px;
    }
    .share-site-desc {
      font-size: 11px;
      color: #9CA3AF;
      margin-bottom: 10px;
    }
    .share-link-label {
      font-size: 11px;
      color: #6B7280;
      font-weight: 600;
      margin-bottom: 6px;
    }
    .share-link-input {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #E5E7EB;
      border-radius: 10px;
      font-size: 11px;
      outline: none;
      background: rgba(255,255,255,.6);
      color: #4B5563;
      transition: border-color .2s ease;
      margin-bottom: 10px;
    }
    .share-link-input:focus { border-color: rgba(124,58,237,.4); }
    .share-copy-btn {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 12px;
      background: linear-gradient(135deg, #7C3AED, #EC4899, #F97316);
      background-size: 200% 200%;
      color: #fff;
      font-weight: 700;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: transform .25s ease, box-shadow .25s ease, background-position .5s ease;
      box-shadow: 0 4px 14px rgba(124,58,237,.3);
      position: relative;
      overflow: hidden;
      animation: shareBtnGradient 4s ease-in-out infinite;
    }
    .share-copy-btn::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
      transform: skewX(-20deg);
      animation: shareBtnShine 2.5s ease-in-out infinite;
    }
    @keyframes shareBtnGradient {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }
    @keyframes shareBtnShine {
      0% { left: -100%; }
      50%, 100% { left: 150%; }
    }
    .share-copy-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(124,58,237,.4); }
    .share-copy-btn:active { transform: translateY(0); }
    .share-copy-btn.copied { background: linear-gradient(135deg, #10B981, #34D399); box-shadow: 0 4px 14px rgba(16,185,129,.3); }
    .share-system-btn {
      width: 100%;
      padding: 12px;
      margin-top: 10px;
      border: 1.5px solid rgba(124,58,237,.3);
      border-radius: 12px;
      background: rgba(255,255,255,.8);
      color: #7C3AED;
      font-weight: 700;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all .25s ease;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .share-system-btn:hover {
      background: #fff;
      border-color: rgba(124,58,237,.5);
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(124,58,237,.15);
    }
    .share-system-btn:active { transform: translateY(0); }
    .share-system-btn svg { stroke: #7C3AED; }
    .share-visitor-list {
      max-height: 100px;
      overflow-y: auto;
      border-radius: 10px;
      padding: 4px;
      margin-top: 10px;
      background: rgba(248,246,255,.6);
      border: 1px solid rgba(124,58,237,.06);
    }
    .share-visitor-list:empty { display: none; }
    .share-visitor-list::-webkit-scrollbar { width: 3px; }
    .share-visitor-list::-webkit-scrollbar-thumb { background: rgba(124,58,237,.3); border-radius: 999px; }
    .share-visitor-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 8px;
      border-radius: 8px;
      font-size: 11px;
      color: #6B7280;
      transition: background .2s ease;
    }
    .share-visitor-item:hover { background: rgba(124,58,237,.06); }
    .share-visitor-icon {
      width: 24px; height: 24px;
      border-radius: 6px;
      background: linear-gradient(135deg, #7C3AED, #EC4899);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 9px;
      flex-shrink: 0;
    }
    .share-visitor-info { flex: 1; min-width: 0; }
    .share-visitor-ip { font-weight: 600; color: #1F2937; font-size: 11px; }
    .share-visitor-device { font-size: 9px; color: #9CA3AF; }
    .share-visitor-time { font-size: 9px; color: #D1D5DB; white-space: nowrap; }
    .share-unlock-section {
      display: none;
      text-align: center;
      padding: 20px 16px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(252,211,77,.08), rgba(236,72,153,.05));
      border: 1px solid rgba(252,211,77,.15);
      margin-bottom: 12px;
      position: relative;
      overflow: hidden;
    }
    .share-unlock-section::before {
      content: "";
      position: absolute;
      top: -30%; left: 50%;
      transform: translateX(-50%);
      width: 200%; height: 100%;
      background: radial-gradient(ellipse at 50% 0%, rgba(252,211,77,.1), transparent 50%);
      pointer-events: none;
    }
    .share-unlock-section.show { display: block; animation: shareUnlockIn .55s cubic-bezier(.22,1,.36,1); }
    @keyframes shareUnlockIn {
      from { opacity: 0; transform: scale(.9); }
      to { opacity: 1; transform: scale(1); }
    }
    .share-unlock-icon svg { width: 38px; height: 38px; margin-bottom: 4px; filter: drop-shadow(0 4px 8px rgba(252,211,77,.2)); }
    .share-unlock-title {
      font-size: 17px;
      font-weight: 900;
      background: linear-gradient(135deg, #FCD34D, #EC4899);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 4px;
    }
    .share-unlock-desc {
      font-size: 11px;
      color: #6B7280;
      margin-bottom: 12px;
    }
    .share-unlock-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 28px;
      border: none;
      border-radius: 10px;
      background: linear-gradient(135deg, #F97316, #EC4899);
      color: #fff;
      font-weight: 800;
      font-size: 13px;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(249,115,22,.3);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .share-unlock-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(249,115,22,.4); }
    .share-unlock-btn:active { transform: translateY(0); }
    .share-loading {
      text-align: center;
      padding: 50px 20px;
      color: #9CA3AF;
      font-size: 13px;
    }
    .share-loading i { font-size: 26px; margin-bottom: 8px; display: block; color: #7C3AED; }
    @media (max-width: 768px) {
      .share-modal { max-width: 100%; border-radius: 18px; }
      .share-body { padding: 14px; }
      .share-header { padding: 18px 16px 16px; }
      .share-header-icon { width: 34px; height: 34px; }
      .share-title { font-size: 16px; }
      .share-card { padding: 14px; }
      .share-card-title { font-size: 14px; }
      .share-copy-btn { padding: 11px; font-size: 13px; }
      .share-system-btn { padding: 11px; font-size: 13px; margin-top: 8px; }
    }



/* ============================================================
 *  占位符样式（图片缺失时用 emoji / 渐变占位）
 *  - .ng-image--placeholder     大图 / 轮播 / 卡片
 *  - .avatar--placeholder       圆形头像占位
 *  - .icon-ticker-icon--placeholder  顶部圆形小图标
 * ============================================================ */
.ng-image--placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 180px;
    background:
        repeating-linear-gradient(45deg, rgba(124, 58, 237, 0.18) 0 12px, rgba(168, 85, 247, 0.10) 12px 24px),
        linear-gradient(135deg, rgba(74, 0, 128, 0.35), rgba(124, 58, 237, 0.35));
    color: rgba(255, 255, 255, 0.85);
    font-size: 64px;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    user-select: none;
    position: relative;
    overflow: hidden;
}
.ng-image--placeholder::after {
    content: attr(data-emoji);
    display: grid;
    place-items: center;
    font-size: 56px;
    line-height: 1;
}

.avatar--placeholder {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 30%, rgba(192, 132, 252, 0.9), transparent 55%),
        radial-gradient(circle at 70% 70%, rgba(124, 58, 237, 0.9), transparent 55%),
        rgb(74, 0, 128);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}
.avatar--placeholder::after {
    content: attr(data-emoji);
    font-size: 26px;
    line-height: 1;
}

.icon-ticker-icon--placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 30% 30%, rgba(192, 132, 252, 0.85), transparent 55%),
        linear-gradient(135deg, rgba(124, 58, 237, 0.9), rgba(74, 0, 128, 0.9));
    color: #fff;
    font-size: 22px;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    position: relative;
}
.icon-ticker-icon--placeholder::after {
    content: attr(data-emoji);
    font-size: 22px;
    line-height: 1;
}

.logo-placeholder {
    display: grid;
    place-items: center;
    width: 160px;
    height: 40px;
    background: linear-gradient(135deg, #6B21A8, #A855F7);
    color: #fff;
    font-weight: 800;
    letter-spacing: 1px;
    border-radius: 8px;
    font-size: 16px;
}

.footer-logo-placeholder {
    width: 120px;
    height: 24px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #6B21A8, #A855F7);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* Data-driven frontend additions. */
.brand-title{font-size:18px;color:#1a0533;font-weight:800;letter-spacing:.6px;text-shadow:0 2px 12px rgba(var(--glow-rgb),.28);white-space:nowrap}
.slide-link{display:block;width:100%;height:100%;text-decoration:none}
.stars .star{display:inline-block;width:14px;height:14px;color:rgba(107,33,168,.2);font-size:14px;line-height:14px;text-shadow:none}
.stars .star.is-on{color:#f59e0b;text-shadow:0 2px 6px rgba(245,158,11,.32)}
.category-description{max-width:720px;margin:-10px auto 14px;text-align:center;color:#6b7a92;font-size:13px}
.empty-state{padding:28px 16px;border:1px dashed rgba(var(--primary-rgb),.2);border-radius:14px;background:rgba(255,255,255,.44);color:#6b5a7c;text-align:center;font-size:13px}
.toast{position:fixed;left:50%;bottom:22px;z-index:130;max-width:calc(100vw - 32px);padding:10px 16px;border-radius:11px;background:#2d0057;color:#fff;font-size:13px;font-weight:700;box-shadow:0 12px 26px rgba(45,0,87,.28);transform:translate(-50%,12px);opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
.toast.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
.support-section{margin-top:18px;padding-top:0}
.support-section h2{margin-bottom:8px}
.support-card{display:flex;align-items:center;gap:12px;min-height:58px;padding:11px 14px;border:1px solid rgba(var(--glow-rgb),.22);border-radius:14px;background:rgba(255,255,255,.68);box-shadow:var(--card-shadow);color:var(--purple-ink);font-weight:700}
.support-card img{width:38px;height:38px;border-radius:11px;object-fit:cover}
.support-card:hover{transform:translateY(-2px);box-shadow:var(--hover-shadow)}
.icon-ticker .icon-track{width:max-content;min-width:max-content;flex:0 0 auto}
.service-toggle{color:#fff;font-size:13px;font-weight:800;letter-spacing:0}
.service-panel{max-width:calc(100vw - 40px)}
.article-card{width:100%;max-width:100%;min-width:0;overflow:hidden}
.article-card>a{display:flex;flex-direction:column;width:100%;max-width:100%;min-width:0;overflow:hidden}
.article-card img{display:block;width:100%;max-width:100%;height:260px;object-fit:cover}
.article-card .article-copy{min-width:0;max-width:100%;overflow-wrap:anywhere}
@media(max-width:600px){.article-card img{height:42vw;max-height:220px;min-height:120px}.article-card .article-copy{padding:12px 14px 16px}}
@media(max-width:600px){.brand-title{font-size:15px}.category-description{font-size:12px;margin-bottom:10px}.toast{bottom:14px}}

/* Reference-site header branding: the uploaded wide mark is the complete
   logo, so no text label or square badge is rendered beside it. */
.brand-logo-box {
  flex: 0 0 auto;
  width: 182px;
  min-height: 52px;
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.28);
}
.brand-logo-box .brand-logo {
  display: block;
  width: 160px;
  height: 40px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  border-radius: 0;
  filter: drop-shadow(0 5px 12px rgba(31,111,235,.22));
}
.brand-logo-box .brand-title { display: none !important; }
@media (max-width: 600px) {
  .brand-logo-box { width: 142px; min-height: 40px; padding: 5px 8px; }
  .brand-logo-box .brand-logo { width: 126px; height: 30px; }
}

.service-toggle.has-img {
  width: 58px;
  height: 58px;
  padding: 0;
  background: #fff;
  border: 2px solid rgba(var(--glow-rgb), .32);
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), .26), 0 0 20px rgba(var(--glow-rgb), .22);
  overflow: hidden;
}
.service-toggle.has-img .service-toggle-img { width: 100%; height: 100%; object-fit: cover; }
.moments-mark { color: #07c160; font-size: .8em; }
@media (max-width: 600px) {
  .service-toggle.has-img { width: 52px; height: 52px; }
}

/* Compact mobile header: keep the complete logo and announcement control in
   two stable cards even on 320px devices. */
@media (max-width: 600px) {
  header .nav {
    padding: 8px 10px;
    gap: 14px;
  }
  header .brand-logo-box {
    width: min(44vw, 142px);
    min-width: 0;
    min-height: 40px;
    padding: 5px 7px;
    border-radius: 13px;
  }
  header .brand-logo-box .brand-logo {
    width: 100%;
    height: 29px;
  }
  header .nav-links {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    gap: 0;
  }
  header .nav-main-btn {
    width: min(42vw, 140px);
    min-width: 0;
    max-width: 140px;
    padding: 9px 10px;
    border-radius: 13px;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
  }
}
@media (max-width: 360px) {
  header .brand-logo-box { width: 43vw; }
  header .nav-main-btn { width: 42vw; font-size: 14px; padding-inline: 7px; }
}

/* Keep the mobile header proportions close to the reference layout: the
   complete logo is the primary anchor and is intentionally wider than the
   announcement control. Clamp both cards so 320px phones still fit without
   horizontal overflow. */
@media (max-width: 600px) {
  header .nav {
    align-items: center;
    gap: 14px;
    padding: 8px 10px;
    justify-content: flex-start;
  }
  header .brand-logo-box {
    flex: 0 0 clamp(154px, 48vw, 180px);
    width: clamp(154px, 48vw, 180px);
    min-height: 49px;
    padding: 5px 8px;
    border-radius: 14px;
  }
  header .brand-logo-box .brand-logo {
    width: 100%;
    height: 37px;
  }
  header .nav-links {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-start;
  }
  header .nav-main-btn {
    flex: 0 0 clamp(120px, 38vw, 145px);
    width: clamp(120px, 38vw, 145px);
    min-width: 0;
    max-width: 145px;
    min-height: 44px;
    padding: 9px 8px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
  }
  header .nav-main-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 4px;
    font-size: 17px;
    line-height: 1;
  }
  header .nav-main-icon svg {
    width: 18px;
    height: 18px;
  }
}
@media (max-width: 340px) {
  header .brand-logo-box {
    flex-basis: 151px;
    width: 151px;
  }
  header .brand-logo-box .brand-logo { height: 35px; }
  header .nav-main-btn {
    flex-basis: 121px;
    width: 121px;
    font-size: 13px;
  }
}