:root { color-scheme: light dark; }
    * { -webkit-tap-highlight-color: transparent; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: Inter, sans-serif;
      background: #f8fafc;
    }
    .dark body { background: #020617; }
    ::-webkit-scrollbar { width: 0; height: 0; }
    .glassmorphism {
      background: rgba(255,255,255,0.75);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .dark .glassmorphism { background: rgba(15,23,42,0.78); }
    .device-stage {
      min-height: 100%;
      min-height: 100dvh;
      display: flex;
      justify-content: center;
      background: #e8eef5;
    }
    .dark .device-stage { background: #0b1220; }
    .phone-shell {
      width: min(430px, 100%);
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
      position: relative;
      background: #f8fafc;
    }
    .dark .phone-shell { background: #020617; }
    .phone-notch { display: none; }
    .phone-scroll {
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
    .product-shot {
      width: 100%; height: 100%; object-fit: contain; background:#fff;
    }
    .dark .product-shot { background:#0f172a; }
    #hero-image { object-fit: contain !important; background:#fff !important; height: auto !important; }
    .hero-face { font-family: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; font-weight: 400; }
    .product-shot-wrap:hover .product-shot { transform: scale(1.04); }
    .fade-in { animation: none; }

    .locale-bar {
      display: flex; align-items: center; gap: 8px;
      margin: 0 12px 10px; padding: 7px 10px 7px 8px;
      border-radius: 999px;
      background: linear-gradient(100deg, #0066cc 0%, #1d4ed8 55%, #0ea5e9 140%);
      color: #fff;
      box-shadow: 0 8px 18px rgba(0,102,204,.22);
    }
    .locale-chip {
      display: inline-flex; align-items: baseline; gap: 4px;
      background: rgba(255,255,255,.16); border-radius: 999px;
      padding: 3px 8px; min-width: 0;
    }
    .locale-chip b { font-weight: 800; font-size: 11px; letter-spacing: -.01em; }
    .locale-chip span { font-size: 9px; opacity: .8; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
    .ai-orb {
      width: 74px; height: 74px; border-radius: 26px; position: relative;
      background: radial-gradient(circle at 50% 40%, #e0f2fe, #fff 70%);
      border: 1px solid #dbeafe; overflow: hidden;
    }
    .dark .ai-orb { background: radial-gradient(circle at 50% 40%, #0f2744, #0b1220 70%); border-color: #1e3a5f; }
    .ai-orb i {
      position: absolute; left: 0; right: 0; height: 22px; top: -22px;
      background: linear-gradient(180deg, transparent, rgba(0,102,204,.55), transparent);
      animation: aiSweep 1.15s ease-in-out infinite;
    }
    @keyframes aiSweep { to { top: 78px; } }
    .ai-dots { display: flex; gap: 6px; }
    .ai-dots b {
      width: 7px; height: 7px; border-radius: 99px; background: #0066cc;
      animation: aiBlink 1s infinite;
    }
    .ai-dots b:nth-child(2) { animation-delay: .15s; }
    .ai-dots b:nth-child(3) { animation-delay: .3s; }
    @keyframes aiBlink { 50% { opacity: .25; transform: translateY(-2px); } }
    .brand-mark { width: 36px; height: 36px; flex: none; display: grid; place-items: center; }
    .brand-mark svg { width: 36px; height: 36px; display: block; }
    .pdp-sticky {
      position: absolute; left: 10px; right: 10px; bottom: 74px; z-index: 45;
      transform: translateY(calc(100% + 140px)); transition: transform .28s cubic-bezier(.2,.8,.2,1);
      pointer-events: none;
    }
    .pdp-sticky.is-on { transform: translateY(0); pointer-events: auto; }

    .promo-bar { width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0066cc, #38bdf8); }
    .promo-bar.run { animation: promoFill 5s linear forwards; }
    @keyframes promoFill { to { width: 100%; } }
    #promo-launch.is-leave .launch-card { animation: launchOut .2s ease forwards; }
    @keyframes launchOut { to { opacity: 0; transform: translateY(10px) scale(.94); } }
    .lottery-veil { background: rgba(2,6,23,.68); backdrop-filter: blur(8px); opacity: 0; }
    #promo-lottery.is-pop .lottery-veil { animation: veilIn .32s ease forwards; }
    @keyframes veilIn { to { opacity: 1; } }
    .lottery-card { opacity: 0; transform: translateY(64px) scale(.8); }
    #promo-lottery.is-pop .lottery-card { animation: lotterySpring .78s cubic-bezier(.16,1.4,.3,1) both; }
    @keyframes lotterySpring {
      0% { opacity: 0; transform: translateY(78px) scale(.72) rotate(-3.5deg); }
      58% { opacity: 1; transform: translateY(-12px) scale(1.05) rotate(1.4deg); }
      100% { opacity: 1; transform: none; }
    }
    .lottery-shine {
      position: absolute; inset: -20% -40%; pointer-events: none; z-index: 2;
      background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.72) 50%, transparent 64%);
      transform: translateX(-80%);
    }
    .dark .lottery-shine { background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.18) 50%, transparent 64%); }
    #promo-lottery.is-pop .lottery-shine { animation: lotteryShine 1s ease .28s both; }
    @keyframes lotteryShine { to { transform: translateX(80%); } }
    .lottery-gift {
      width: 76px; height: 76px; margin: 10px auto 2px; border-radius: 26px;
      display: grid; place-items: center; font-size: 42px; line-height: 1;
      background: radial-gradient(circle at 32% 28%, #fff, #ffedd5 42%, #fdba74);
      box-shadow: 0 14px 28px rgba(249,115,22,.28);
    }
    .dark .lottery-gift { background: radial-gradient(circle at 32% 28%, #7c2d12, #431407 70%); box-shadow: 0 14px 28px rgba(0,0,0,.35); }
    #promo-lottery.is-pop .lottery-gift {
      animation: giftHop .82s cubic-bezier(.18,1.45,.32,1) .05s both, giftFloat 2.2s ease-in-out .95s infinite;
    }
    @keyframes giftHop {
      0% { transform: translateY(28px) scale(.15) rotate(-22deg); }
      68% { transform: translateY(-8px) scale(1.14) rotate(8deg); }
      100% { transform: none; }
    }
    @keyframes giftFloat { 50% { transform: translateY(-6px) rotate(-5deg); } }
    .lottery-burst { position: absolute; left: 50%; top: 38%; width: 0; height: 0; z-index: 3; pointer-events: none; }
    .lottery-burst i {
      position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 2px; opacity: 0;
      background: var(--c, #0066cc); margin: -4px 0 0 -4px;
    }
    .lottery-burst i:nth-child(odd) { border-radius: 99px; }
    #promo-lottery.is-pop .lottery-burst i { animation: burst .95s cubic-bezier(.1,.7,.2,1) var(--d, 0s) both; }
    @keyframes burst {
      0% { opacity: 1; transform: translate(0,0) scale(1) rotate(0); }
      100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.35) rotate(var(--r)); }
    }
    #promo-lottery.is-pop #promo-lottery-title { animation: lotteryRise .48s ease .16s both; }
    #promo-lottery.is-pop #promo-lottery-body { animation: lotteryRise .48s ease .26s both; }
    @keyframes lotteryRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
    .promo-ready { animation: btnPop .48s cubic-bezier(.2,1.5,.32,1); }
    @keyframes btnPop { 0% { transform: scale(.94); } 60% { transform: scale(1.045); } 100% { transform: scale(1); } }
    @media (prefers-reduced-motion: reduce) {
      #promo-launch.is-leave .launch-card,
      #promo-lottery.is-pop .lottery-card,
      #promo-lottery.is-pop .lottery-gift,
      #promo-lottery.is-pop .lottery-shine,
      #promo-lottery.is-pop .lottery-burst i,
      #promo-lottery.is-pop #promo-lottery-title,
      #promo-lottery.is-pop #promo-lottery-body,
      .promo-ready { animation: none !important; }
      .lottery-veil, .lottery-card, #promo-lottery.is-pop #promo-lottery-title, #promo-lottery.is-pop #promo-lottery-body { opacity: 1; transform: none; }
    }
    [dir="rtl"] .phone-shell { direction: rtl; }