/* =========================================================
   788 赞助中心 · 科技苹果风（Dark Premium）视觉层
   ---------------------------------------------------------
   在 glass.css 之后加载，只做视觉替换，不改 HTML 结构与 JS：
   1. 深色渐变背景 + 柔和 glow + 轻微 haze
   2. 通透毛玻璃：低不透明度白色叠层 + 大圆角 + 弱边框
   3. 中文标题超大超粗，正文 17px / 1.85 行距，英文标签极弱化
   4. 层次靠透明度与柔和阴影，不用硬描边
   ========================================================= */

/* ---------- 1. 令牌覆盖 ---------- */
:root{
  --ink:#f7f3f9;
  --muted:rgba(255,255,255,.58);
  --paper:#08070c;
  --paper-2:#0c0a12;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);

  --glass-1:linear-gradient(150deg,rgba(255,255,255,.105),rgba(255,255,255,.042));
  --glass-2:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  --glass-3:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  --glass-dark:linear-gradient(150deg,rgba(24,20,30,.82),rgba(16,13,22,.62));

  --glass-edge:rgba(255,255,255,.13);
  --glass-edge-soft:rgba(255,255,255,.07);
  --glass-dark-edge:rgba(255,255,255,.12);

  --shadow:0 32px 80px -44px rgba(0,0,0,.92),0 2px 10px rgba(0,0,0,.4);
  --shadow-soft:0 18px 44px -30px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.35);
  --shadow-hover:0 44px 100px -44px rgba(0,0,0,.96),0 8px 22px rgba(0,0,0,.45);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.10);

  --r-lg1:28px;
  --r-lg2:26px;
  --r-lg3:24px;
  --r-sm1:14px;
  --r-sm2:16px;
  --r-sm3:18px;
  --r-card:28px;

  --blur:24px;
  --blur-sm:16px;
}

/* ---------- 2. 背景：深色渐变 + 柔光雾 ---------- */
html{background:#08070c}
body{
  background:#08070c;
  color:var(--ink);
  font-size:17px;
  line-height:1.85;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:1;
  background-image:
    radial-gradient(52% 42% at 14% 2%,rgba(242,41,127,.26),transparent 66%),
    radial-gradient(46% 40% at 88% 8%,rgba(124,86,255,.22),transparent 68%),
    radial-gradient(60% 46% at 50% 102%,rgba(242,41,127,.14),transparent 70%),
    radial-gradient(42% 34% at 72% 62%,rgba(63,182,242,.08),transparent 70%),
    linear-gradient(168deg,#0a0810 0%,#110d18 46%,#08070c 100%);
}
/* 丝线背景在深色底上提高存在感 */
.waves-bg{opacity:.92}

/* ---------- 3. 排版：中文超大超粗，英文极弱化 ---------- */
.eyebrow,.section-index,.pass-kicker,.g-eyebrow,.g-stamp{
  font-size:10.5px;
  letter-spacing:.24em;
  opacity:.62;
  font-weight:600;
}
.g-stamp{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.55);
  box-shadow:none;
}
.hero h1,.g-hero h1{
  color:#fff;
  font-weight:800;
  font-size:clamp(40px,5.2vw,80px);
  line-height:1.1;
  letter-spacing:-.035em;
  text-shadow:0 30px 80px rgba(0,0,0,.55);
}
.hero h1 em,.g-hero h1 em{
  color:#ff8fc0;
  font-style:normal;
  text-shadow:0 0 56px rgba(242,41,127,.45),0 0 140px rgba(242,41,127,.28);
}
.hero h1 em::after,.g-hero h1 em::after{
  left:0;right:0;bottom:.06em;height:.16em;
  background:linear-gradient(90deg,rgba(242,41,127,.55),rgba(124,86,255,.35));
  opacity:.85;border-radius:8px;filter:blur(6px);
}
.section-head h2,.g-fleet-head h2{
  color:#fff;
  font-weight:800;
  font-size:clamp(28px,3.4vw,52px);
  line-height:1.18;
  letter-spacing:-.03em;
}
.hot-more,.hero-lead,.g-lead,.section-head p,.g-fleet-head p,
.hero-note,.step p,.pass-sub,.g-pass-sub,.form-head p,.field small,
.faq details p,.pay-foot,.g-empty p{color:rgba(255,255,255,.62)}
.hero-lead,.g-lead{font-size:16px;line-height:1.85}
.section-head p,.g-fleet-head p{font-size:15.5px;line-height:1.85}
.step p,.hero-note{font-size:13.5px;line-height:1.8}
.hot-cat,.hot-go,.g-more,.g-dialog-nav button,.g-foot-links a{color:rgba(255,255,255,.5)}
.hot-more a{color:#ff8fc0;border-bottom:1px solid rgba(242,41,127,.45)}
.hot-more a:hover{background:rgba(242,41,127,.14);border-radius:8px}
.pass-kicker,.pass-sub,.pass-stub small,.pass-row span,.g-pass-rows div,.g-pass-sub{color:rgba(255,255,255,.55)}

/* ---------- 4. 顶栏 / 导航 ---------- */
.topbar{
  background:rgba(10,8,14,.72);
  color:rgba(255,255,255,.6);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-head,.g-head{
  background:linear-gradient(180deg,rgba(18,14,24,.78),rgba(12,10,18,.58));
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 20px 60px -40px rgba(0,0,0,.95);
}
.brand-mark,.brand-mark.is-logo{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 8px 22px -14px rgba(0,0,0,.8);
}
.nav a,.g-nav a{color:rgba(255,255,255,.72)}
.nav a:hover,.g-nav a:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.14);
  color:#fff;
}
.brand-text b{color:#fff}
.brand-text small{color:rgba(255,255,255,.4)}

/* ---------- 5. 主玻璃面板 ---------- */
.pass,.g-pass,.form-card{
  background:var(--glass-1);
  border:1px solid var(--glass-edge);
  box-shadow:var(--shadow),var(--shadow-inset);
}
.pass::before{
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 46%);
}
.pass-seal,.g-pass-logo img{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
}
.pass-rows,.pass-stub,.g-pass-rows{border-top:1px solid rgba(255,255,255,.09)}
.pass-amount b,.g-strip b{color:#ff8fc0;text-shadow:0 10px 40px rgba(242,41,127,.5)}

/* ---------- 6. Hero 装饰光晕 ---------- */
.hero::after,.g-hero::after{
  background:radial-gradient(closest-side,rgba(242,41,127,.32),transparent 72%);
  filter:blur(40px);
}

/* ---------- 6b. Hero 居中单列（右侧凭证卡已移除） ---------- */
.hero::after{left:50%;transform:translateX(-50%)}
.hero-grid{grid-template-columns:minmax(0,1fr);justify-items:center}
.hero-copy{width:100%;max-width:720px;text-align:center}
.hero-lead{margin-left:auto;margin-right:auto;max-width:640px}
.hero-note{margin-left:auto;margin-right:auto;max-width:620px;text-align:left}

/* 分类胶囊：车 / 饰品 / 枪 / 产业 */
.hero-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.cat-pill{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 24px;border-radius:999px;
  font-size:14.5px;font-weight:600;line-height:1;font-family:inherit;
  letter-spacing:.01em;color:#fff;text-decoration:none;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 26px -18px rgba(0,0,0,.85);
  cursor:pointer;
  transition:transform .22s cubic-bezier(.22,1,.36,1),background .22s,border-color .22s,box-shadow .22s;
}
.cat-pill:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.12);
  border-color:rgba(242,41,127,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 34px -18px rgba(242,41,127,.6);
}
.cat-pill:active{transform:translateY(0) scale(.97)}
.cat-pill:focus-visible{outline:2px solid #ff8fc0;outline-offset:3px}
.cat-pill.is-live{
  background:linear-gradient(180deg,#ff4d97,#ef2277);
  border-color:rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 18px 36px -16px rgba(242,41,127,.75);
}
.cat-pill.is-live:hover{background:linear-gradient(180deg,#ff62a5,#fb2b83)}

/* 菠萝贴纸挪到 hero 右侧留白处，窄屏隐藏避免压到文字 */
.hero-sticker{left:auto;right:0;width:min(360px,26vw)}
@media (max-width:1200px){.hero-sticker{display:none}}

/* ---------- 7. 步骤条 ---------- */
.steps{
  background:var(--glass-2);
  border:1px solid var(--glass-edge-soft);
}
.step{border-right:1px solid rgba(255,255,255,.07)}
.step-num{color:rgba(255,255,255,.38)}
.step b{color:#fff}

/* ---------- 8. 下拉菜单 / 搜索 ---------- */
.nav-menu,.search-results{
  background:linear-gradient(160deg,rgba(26,21,32,.96),rgba(16,13,22,.92));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 34px 80px -36px rgba(0,0,0,.95);
}
.nav-menu a,.search-hit{color:rgba(255,255,255,.78)}
.nav-menu a:hover,.search-hit:hover{background:rgba(242,41,127,.16);color:#fff}
.search-all{border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.55)}
.search-panel input,.search-panel input:focus{
  background:rgba(255,255,255,.06);
  color:#fff;
  border-color:rgba(255,255,255,.12);
}
.search-toggle,.mcarousel-arrow,.g-dialog-close{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.12);
  color:#fff;
}
.search-expand.open .search-toggle{background:rgba(242,41,127,.22);border-color:rgba(242,41,127,.5)}

/* ---------- 9. 表单控件 ---------- */
input,textarea,select{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.34)}
input:focus,textarea:focus,select:focus{
  border-color:rgba(242,41,127,.6);
  background:rgba(255,255,255,.08);
  box-shadow:0 0 0 4px rgba(242,41,127,.16);
  outline:none;
}
input[readonly]{background:rgba(255,255,255,.04);color:rgba(255,255,255,.55);box-shadow:none}
.ghost{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.8)}
.form-error{
  background:rgba(242,41,127,.12);
  border:1px solid rgba(242,41,127,.38);
  color:#ff9cc4;
  box-shadow:none;
}

/* ---------- 10. 商品卡片 ---------- */
.hot-card,.g-card{
  background:linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:var(--shadow-soft),var(--shadow-inset);
}
.hot-card:hover,.g-card:hover{
  background:linear-gradient(155deg,rgba(255,255,255,.12),rgba(255,255,255,.045));
  border-color:rgba(255,255,255,.2);
  box-shadow:var(--shadow-hover),var(--shadow-inset);
}
.hot-img,.g-thumb{
  background:linear-gradient(160deg,#16121d,#0f0c14);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hot-card h3,.g-card h3,.hot-card b{color:#fff}
.g-num,.g-dialog-num{
  background:rgba(20,16,26,.72);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  box-shadow:0 6px 18px -10px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.14);
}
.g-code code{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.75)}
.g-card:hover .g-more{color:#ff8fc0}

/* ---------- 11. 车库工具条 ---------- */
.g-tools{
  background:linear-gradient(180deg,rgba(18,14,24,.86),rgba(12,10,18,.7));
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 50px -34px rgba(0,0,0,.95);
}
.g-chip{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.72);
}
.g-chip:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.18);box-shadow:none}
.g-chip[aria-pressed="true"]{
  background:linear-gradient(140deg,#f2297f,rgba(242,41,127,.72));
  border-color:rgba(255,255,255,.42);
  color:#fff;
  box-shadow:0 10px 30px -12px rgba(242,41,127,.9),inset 0 1px 0 rgba(255,255,255,.35);
}
.g-search,.g-sort{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:none;
}
.g-search:focus-within{
  border-color:rgba(242,41,127,.55);
  background:rgba(255,255,255,.08);
  box-shadow:0 0 0 4px rgba(242,41,127,.16);
}
.g-search input{background:transparent;border:0;color:#fff}
.g-strip{background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.g-strip span{color:rgba(255,255,255,.6)}
.g-pills span{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.7)}

/* ---------- 12. 详情弹窗 ---------- */
.g-dialog::backdrop{background:rgba(4,3,7,.72)}
.g-dialog-sheet{
  background:linear-gradient(155deg,rgba(26,21,33,.96),rgba(15,12,21,.94));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 50px 120px -50px rgba(0,0,0,.98);
}
.g-dialog-body h2{color:#fff;text-shadow:none}
.g-dialog-nav{border-top:1px solid rgba(255,255,255,.09)}
.g-dialog-nav button:hover{background:rgba(255,255,255,.09);color:#fff}
.g-dialog-media{background:#120f18}

/* ---------- 13. FAQ ---------- */
.faq{border-top:1px solid rgba(255,255,255,.08)}
.faq-list,.faq details{border-color:rgba(255,255,255,.08)}
.faq summary{color:#fff;font-size:15.5px}
.faq summary:hover{color:#ff8fc0}
.faq details p{font-size:14.5px}

/* ---------- 14. 下单区 ---------- */
.summary-card{
  background:linear-gradient(155deg,rgba(28,22,36,.9),rgba(14,11,20,.82));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 100px -46px rgba(0,0,0,.98),inset 0 1px 0 rgba(255,255,255,.1);
  color:#fff;
}
.summary-card::after{border-color:rgba(242,41,127,.35)}
.summary-actions button{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}
.form-card .form-head h3{color:#fff}

/* ---------- 15. 页脚 ---------- */
.site-foot{
  background:rgba(9,7,12,.8);
  border-top:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.5);
}
.foot-note{border-top:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.44)}
.foot-brand,.foot-brand b{color:#fff}
.foot-brand small{color:rgba(255,255,255,.42)}
.foot-links a{color:rgba(255,255,255,.72)}
.g-foot{
  background:rgba(255,255,255,.035);
  border-top:1px solid rgba(255,255,255,.08);
}
.g-foot-links a:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff}
.g-foot-note{border-top:1px solid rgba(255,255,255,.08)}

/* ---------- 16. 支付弹窗 ---------- */
dialog.pay-modal::backdrop{background:rgba(4,3,7,.74)}
.pay-sheet{
  background:linear-gradient(155deg,rgba(26,21,33,.97),rgba(14,11,20,.95));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 50px 120px -50px rgba(0,0,0,.98);
}
.icon-btn{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#fff}
.pay-amount,.pay-meta,.qr-wrap{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:none;
}
.pay-meta div{border-bottom:1px solid rgba(255,255,255,.08)}
.pay-meta span{color:rgba(255,255,255,.5)}
.pay-meta b{color:#fff}
.qr-wrap{background:rgba(255,255,255,.05)}
.qr-box{background:#fff;border-color:rgba(255,255,255,.16)}
.pay-hint{background:rgba(242,41,127,.12);border:1px solid rgba(242,41,127,.3);color:rgba(255,255,255,.72)}
.pay-hint b{color:#ff8fc0}
.pay-actions{
  background:linear-gradient(180deg,rgba(16,13,22,.6),rgba(12,10,18,.92));
  border-top:1px solid rgba(255,255,255,.09);
}
.pay-foot{color:rgba(255,255,255,.45)}

/* ---------- 17. Toast / 开屏 ---------- */
.toast{
  background:rgba(20,16,26,.92);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.95);
}
.preloader{
  background:radial-gradient(62% 55% at 50% 40%,#181320 0%,#0d0a13 58%,#07060a 100%);
}
.preloader-brand{color:#fff}

/* ---------- 18. 不模糊降级：深色实底，保证可读 ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-head,.g-head,.steps,.pass,.g-pass,.nav-menu,.search-results,
  .summary-card,.form-card,.site-foot,.pay-sheet,.g-tools,.g-dialog-sheet,
  .g-strip,.g-foot,.toast{
    background:rgba(18,14,24,.97);
  }
  .hot-card,.g-card{background:rgba(22,17,29,.97)}
}

/* ---------- 19. 响应式：手机端保持大字号与舒适行距 ---------- */
@media(max-width:820px){
  body{font-size:16.5px;line-height:1.8}
  .hero h1,.g-hero h1{font-size:clamp(36px,9vw,54px);line-height:1.12}
  .section-head h2,.g-fleet-head h2{font-size:clamp(26px,7vw,38px)}
}
@media(max-width:640px){
  body{font-size:16px}
  .hero h1,.g-hero h1{font-size:clamp(34px,10vw,46px)}
  .eyebrow,.section-index{font-size:10px;letter-spacing:.2em}
}