/* ============================================================
   style.css — 全站样式（深色主题）
   ------------------------------------------------------------
   作用：决定网站长什么样——颜色、间距、卡片、按钮。
   【不懂代码看这里】
   这文件就是"装修清单"：所有页面共用这一份。
   你嫌哪里丑，改这里对应的值就行，不用碰 HTML。
   ============================================================ */

/* 品牌字体 Oxanium（自托管，只用于 logo / 大标题 / 按钮） */
@font-face {
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/oxanium-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/oxanium-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* —— 颜色变量：改这里 = 全站换色 —— */
:root {
  color-scheme: dark;   /* 让浏览器原生控件（自动填充下拉/滚动条/选择框）也用深色 */
  --bg:      #070b12;   /* 页面底色（深蓝黑） */
  --surface: #0e1522;   /* 卡片底色 */
  --surface2:#121b2a;   /* 卡片底色（稍亮） */
  --line:    #1c2a3f;   /* 边框线 */
  --text:    #e7eef9;   /* 正文 */
  --muted:   #7788a0;   /* 次要文字 */
  --cyan:    #22d3ee;   /* 主色（青） */
  --azure:   #4f7cff;   /* 辅色（蓝） */
  --grad: linear-gradient(135deg, #22d3ee, #4f7cff); /* 渐变按钮 */
}

/* —— 基础重置 —— */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 内容容器：统一宽度、居中 */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* —— 顶部导航 —— */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 11, 18, .9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.hdr__in { display: flex; align-items: center; gap: 24px; height: 78px; }
.logo {
  font-family: 'Oxanium', system-ui, sans-serif;
  font-size: 21px; font-weight: 800; color: #fff;
  letter-spacing: -.01em; display: inline-flex; align-items: baseline; gap: .05em;
}
.logo .logo__a {
  font-family: 'Oxanium', system-ui, sans-serif;
  font-size: .66em; font-weight: 400; letter-spacing: .16em;
  color: #6FE3F5;
  transform: translateY(-.02em);
}
.logo .logo__b {
  font-weight: 800; letter-spacing: -.015em;
  background: linear-gradient(96deg, #FFFFFF 0%, #EAFDFF 30%, #22D3EE 66%, #4F7CFF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(34,211,238,.45));
}
/* 页脚品牌放大 */
.ftr .logo { font-size: 30px; }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a {
  color: var(--muted); padding: 8px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 600;
}
.nav a:hover { color: #fff; background: var(--surface2); text-decoration: none; }
.hdr__meta .cur { color: var(--muted); font-size: 13px; font-weight: 600; }

/* —— 页面主体留白 —— */
main.wrap { padding: 28px 20px 60px; }

/* —— 页头 —— */
.page-head h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: -.02em; }
.page-head p { margin: 0; color: var(--muted); }

/* —— 游戏卡片 —— */
.game-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}
.game-card h2 { margin: 0 0 14px; color: var(--cyan); font-size: 20px; }

/* —— 商品表 —— */
.ptable { width: 100%; border-collapse: collapse; }
.ptable th {
  color: var(--muted); font-size: 12.5px; font-weight: 600;
  text-align: left; text-transform: uppercase; letter-spacing: .06em;
  padding: 8px; border-bottom: 1px solid var(--line);
}
.ptable td { padding: 10px 8px; border-bottom: 1px solid var(--line); }
.ptable tr:last-child td { border-bottom: 0; }
.ptable .price { color: var(--cyan); font-weight: 700; text-align: right; }
.ptable .unit { color: var(--muted); font-size: 13px; }

/* —— 按钮 —— */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 18px; border-radius: 10px;
  background: var(--grad); color: #04121a; font-weight: 700; font-size: 14px;
  border: 0; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }

/* —— 首页 Why Choose —— */
.why { padding: 44px 0 8px; }
.why h2 {
  text-align: center; font-family: 'Oxanium', system-ui, sans-serif;
  font-size: clamp(21px, 3vw, 29px); font-weight: 800; letter-spacing: -.01em;
  color: #fff; margin: 0 0 8px;
}
.why-lead { text-align: center; color: var(--muted); font-size: 14px; margin: 0 0 26px; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.why-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 17px 18px;
}
.why-card svg { width: 25px; height: 25px; color: var(--cyan); margin-bottom: 12px; display: block; }
.why-card h3 { font-size: 14.5px; color: #fff; margin: 0 0 7px; font-weight: 700; letter-spacing: -.005em; }
.why-card p { font-size: 12.8px; color: var(--muted); margin: 0; line-height: 1.58; }
@media(max-width:900px){ .why-grid{ grid-template-columns: 1fr 1fr; } }
@media(max-width:560px){ .why-grid{ grid-template-columns: 1fr; } .why{ padding: 34px 0 4px; } }

/* —— 页脚 —— */
.ftr { border-top: 1px solid var(--line); margin-top: 40px; }
.ftr__in { padding: 30px 20px; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.ftr__in > div:first-child { min-width: 300px; }
.ftr__note { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.ftr__tagline { color: var(--text-2); font-size: 13px; line-height: 1.6; max-width: 34ch; margin: 10px 0 4px; }
.ftr__links { display: flex; gap: 16px; flex: 1; min-width: 220px; }
.ftr__links a { color: var(--muted); font-size: 14px; }
.ftr__links a:hover { color: var(--cyan); }
.ftr__copy { width: 100%; color: var(--muted); font-size: 12px; }
/* 页脚最底部：公司信息居中 */
.ftr__legal { border-top: 1px solid var(--line); padding: 20px 20px 26px; text-align: center; }
/* —— 页脚四列（AOEAH 式信息页脚） —— */
.ftr__cols {
  display: grid; grid-template-columns: 1.5fr 1.1fr 1fr 1.1fr;
  gap: 32px; padding: 34px 20px 28px;
}
.ftr__col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.ftr__h {
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.42); font-weight: 700; margin: 0 0 5px;
}
.ftr__col a { font-size: 13px; color: var(--muted); text-decoration: none; line-height: 1.45; }
.ftr__col a:hover { color: var(--cyan); }
.ftr__plain { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.45; }
.ftr__contact { font-size: 13px; color: var(--cyan) !important; text-decoration: none; }
.ftr__contact:hover { text-decoration: underline; }
.gps-btn { margin-top: 10px; }
/* 自定义「Add MMO Grab on Google」按钮 */
.gps-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: 8px; margin-top: 6px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13);
  font-size: 11.5px; color: var(--text-2); text-decoration: none;
  transition: border-color .15s, background .15s;
}
.gps-btn b { color: #fff; font-weight: 700; }
.gps-btn:hover { border-color: rgba(34,211,238,.5); background: rgba(34,211,238,.07); color: #fff; }
.ftr__notice {
  color: rgba(255,255,255,.34) !important; font-size: 11.5px !important;
  max-width: 80ch; margin: 0 auto 12px !important; line-height: 1.6 !important;
}
@media(max-width:900px){ .ftr__cols{ grid-template-columns: 1fr 1fr; gap: 26px; } }
@media(max-width:560px){ .ftr__cols{ grid-template-columns: 1fr; gap: 22px; padding: 26px 16px 22px; } }
/* —— 页脚支付方式图标 —— */
.paybar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px 14px; padding: 18px 20px 4px; border-top: 1px solid var(--line);
}
.paybar__label {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.38); font-weight: 700;
}
.paybar__list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; }
.pay {
  height: 38px; min-width: 58px; padding: 3px 10px; border-radius: 7px;
  background: #fff; border: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.pay img { max-height: 22px; max-width: 74px; width: auto; height: auto; display: block; }
.pay--txt {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  color: rgba(255,255,255,.66); text-transform: uppercase; white-space: nowrap;
}
.ftr__legal p { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0 0 7px; }
.ftr__legal p:last-child { margin-bottom: 0; }
.ftr__legal .ftr__copyright { margin-top: 10px; font-size: 11.5px; color: rgba(255,255,255,.3); }
/* Google 首选来源按钮（右下角） */
.ftr__gps { display: flex; justify-content: flex-end; padding: 0 20px 18px; }
.ftr__social { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 4px; }
.ftr__social a { min-width: 122px; justify-content: center; }
.ftr__social a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 13px; transition: filter .15s, transform .15s; }
.ftr__social a:hover { filter: brightness(1.12); transform: translateY(-1px); color: #fff; }
.ftr__social a[title="Discord"] { background: #5865F2; }
.ftr__social a[title="Facebook"] { background: #1877F2; }
.ftr__social a[title="Twitter"] { background: #1d9bf0; }
.ftr__social a[title="WhatsApp"] { background: #25D366; }
.ftr__social svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ============ 首页 hero + 游戏方块 ============ */
.hero{padding:40px 0 24px;text-align:center;background:
  radial-gradient(60% 80% at 50% 0%, rgba(34,211,238,.12), transparent 70%);}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);}
.eyebrow::before{content:"";width:16px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);}
.hero h1{font-family:'Oxanium',system-ui,sans-serif;font-size:clamp(26px,4vw,42px);font-weight:800;letter-spacing:-.01em;margin:12px 0 10px;color:#fff;line-height:1.12;}
.hero p{color:var(--muted);max-width:56ch;margin:0 auto 18px;}
.chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:99px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:12px;color:#afbdd0;font-weight:600;}
.chip i{width:5px;height:5px;border-radius:50%;background:var(--cyan);font-style:normal;}

.gtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;padding:24px 0;}
.gtile{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--text);
  transition:transform .16s,border-color .16s;}
.gtile:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.5);text-decoration:none;}
.gtile__img{width:100%;aspect-ratio:210/238;object-fit:cover;display:block;background:var(--surface2);}
.gtile__img--ph{display:grid;place-items:center;color:#7de9fa;font-size:44px;font-weight:800;
  background:linear-gradient(135deg,rgba(34,211,238,.15),rgba(79,124,255,.15));}
.gtile__name{padding:11px 12px;text-align:center;display:block;}
.gtile__name b{font-size:14px;color:#fff;display:block;}
.gtile__name small{font-size:11px;color:var(--muted);}

/* ============ 商品页：参考 poe-2-currency ============ */
.lhead{padding:16px 0 18px;}
.lhead h1{font-size:clamp(28px,3.6vw,40px);font-weight:820;letter-spacing:-.025em;margin:8px 0 10px;color:#fff;line-height:1.1;}
.lhead p{color:var(--muted);max-width:62ch;margin:0 0 14px;}
.lhead .chips{justify-content:flex-start;}

.land{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start;}
@media(max-width:960px){.land{grid-template-columns:1fr}}
.step-title{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 11px;}
.step-title em{font-style:normal;color:var(--cyan);margin-right:8px;}

.orbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
@media(max-width:600px){.orbs{grid-template-columns:1fr}}
.letters{display:none;flex-wrap:wrap;gap:8px;margin:2px 0 14px;}
.letter{min-width:44px;padding:8px 16px;border-radius:9px;background:var(--surface);border:1px solid rgba(34,211,238,.4);color:#d6e4f5;font-weight:700;font-size:14px;cursor:pointer;transition:.15s;}
.letter:hover{border-color:rgba(34,211,238,.7);color:#fff;}
.letter.is-on{border-color:var(--cyan);background:rgba(34,211,238,.1);color:var(--cyan);box-shadow:0 0 0 1px rgba(34,211,238,.5);}
.orb{display:flex;align-items:center;gap:10px;padding:7px 14px;min-height:50px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);cursor:pointer;transition:.16s;}
.orb:hover{border-color:rgba(34,211,238,.45);}
.orb.is-on{border-color:var(--cyan);background:rgba(34,211,238,.07);box-shadow:0 0 0 1px rgba(34,211,238,.5);}
.orb__ico{width:28px;height:28px;flex:0 0 auto;border-radius:50%;overflow:hidden;background:#0b1220;}
.orb__ico img{width:100%;height:100%;object-fit:contain;}
.orb__body{min-width:0;flex:1;}
.orb__body b{display:block;font-size:13px;color:#fff;line-height:1.2;}
.orb__body small{display:block;font-size:10.5px;color:var(--muted);margin-top:0;}
.orb__price{font-size:14px;font-weight:750;color:var(--cyan);white-space:nowrap;}

/* 摘要卡 */
.summary{position:sticky;top:84px;background:linear-gradient(180deg,var(--surface),#0a1019);
  border:1px solid var(--line);border-radius:18px;padding:18px;}
.summary h3{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;}
.srow{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px;}
.srow span{color:var(--muted);}
.srow b{color:#e7eef9;font-weight:650;text-align:right;}
.stotal{display:flex;align-items:flex-end;justify-content:space-between;margin:14px 0 12px;padding-top:12px;border-top:1px dashed var(--line);}
.stotal strong{font-size:28px;font-weight:820;color:#fff;letter-spacing:-.02em;}
.stotal small{font-size:11px;color:var(--muted);}

/* 数量档位 + 步进器 */
.presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:9px;margin-bottom:10px;}
.preset{position:relative;padding:8px 8px;border-radius:10px;background:var(--surface2);border:1px solid var(--line);text-align:center;cursor:pointer;transition:.16s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:50px;}
.preset b{display:block;font-size:13.5px;font-weight:750;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.15;}
.preset small{display:block;font-size:10px;color:var(--muted);margin-top:1px;font-weight:600;line-height:1.15;}
.preset:hover{border-color:rgba(34,211,238,.45);}
.preset.is-on{border-color:var(--cyan);background:rgba(34,211,238,.1);box-shadow:0 0 0 1px rgba(34,211,238,.5);}
.tier__off{position:absolute;top:-8px;right:-4px;height:19px;padding:0 7px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.02em;display:grid;place-items:center;background:#FFC24B;color:#241802;font-style:normal;}
.stepper{display:flex;align-items:center;background:var(--surface2);border:1px solid var(--line);border-radius:11px;height:44px;overflow:hidden;}
.stepper button{width:42px;height:44px;background:transparent;border:0;color:#afbdd0;font-size:18px;cursor:pointer;}
.stepper button:hover{color:var(--cyan);}
.stepper input{width:70px;height:44px;background:transparent;border:0;color:#fff;font-size:15px;font-weight:750;text-align:center;outline:none;}
.stepper__unit{padding:0 14px 0 8px;font-size:12px;color:var(--muted);border-left:1px solid var(--line);line-height:44px;}
.stepper input.qty-invalid{background:rgba(255,90,90,.18);color:#ff6b6b;}
.qty-warn{color:#ff6b6b;font-size:12.5px;margin:8px 0 0;font-weight:600;display:none;}

/* 信任标签 */
.trust-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:26px 0 4px;}
.trust-item{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:11px;background:var(--surface);border:1px solid var(--line);}
.trust-item svg{width:20px;height:20px;color:var(--cyan);flex:0 0 auto;}
.trust-item span{font-size:13px;color:#cfe3f5;font-weight:600;}
@media(max-width:600px){.trust-bar{grid-template-columns:repeat(2,1fr)}}

/* Trustpilot 评价区 */
.tp-section{margin:22px 0 4px;padding:18px;border-radius:12px;background:var(--surface);border:1px solid var(--line);}

/* 游戏介绍 */
.game-content{margin:26px 0 8px;}
.game-content h2{font-size:18px;color:#fff;margin:0 0 12px;}
.game-content .gc-body{color:#b8c5d8;font-size:14px;line-height:1.8;}

.ok{background:rgba(52,211,153,.12);color:#34d399;border:1px solid rgba(52,211,153,.3);border-radius:10px;padding:10px 14px;margin-bottom:16px;}
/* 联赛选择 + 步骤 */
.step{margin-bottom:24px;}
.pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
@media(max-width:600px){.pills{grid-template-columns:1fr}}
.pill{padding:0 13px;height:50px;border-radius:10px;background:var(--surface);border:1px solid var(--line);
  color:#afbdd0;font-size:13px;font-weight:650;cursor:pointer;text-align:left;transition:.16s;display:flex;align-items:center;}
.pill:hover{border-color:rgba(34,211,238,.4);color:#fff;}
.pill.is-on{border-color:var(--cyan);background:rgba(34,211,238,.09);color:#fff;box-shadow:0 0 0 1px rgba(34,211,238,.4);}
.btn--ghost{background:#172335;color:#d6e1f0;border:1px solid rgba(255,255,255,.14);}
.btn--ghost:hover{background:#1e2c42;color:#fff;filter:none;}
.btn:disabled,.btn--ghost:disabled{opacity:.4;cursor:not-allowed;filter:none;}
/* 分类标签页 */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.tab{padding:9px 16px;border-radius:10px;background:var(--surface2);border:1px solid rgba(34,211,238,.35);
  color:#c8d4e6;font-size:15px;font-weight:800;cursor:pointer;transition:.16s;display:inline-flex;align-items:center;gap:7px;}
.tab__ico{width:15px;height:15px;flex:0 0 auto;}
.tab:hover{color:#fff;border-color:rgba(34,211,238,.4);}
.tab.is-on{background:linear-gradient(135deg,#22d3ee,#4f7cff);color:#04121a;border-color:transparent;}
.empty-note{color:var(--muted);font-size:13px;padding:20px 0;display:none;}
/* ============ 结算页 checkout ============ */
.crumb{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);padding:16px 0 4px;}
.crumb a{color:var(--muted);}
.phead{padding:8px 0 20px;}
.phead h1{font-size:clamp(26px,3.4vw,38px);font-weight:820;letter-spacing:-.025em;color:#fff;margin:10px 0 12px;line-height:1.1;}
.phead__meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--muted);}
.cart-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start;}
@media(max-width:960px){.cart-grid{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px;}
.panel__label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.panel__label i{width:6px;height:6px;border-radius:50%;background:var(--cyan);font-style:normal;}
.citem{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);}
.citem__name{flex:1;min-width:0;}
.citem__name b{display:block;font-size:14px;color:#fff;}
.citem__name small{display:block;font-size:12px;color:var(--muted);}
.citem__qty{font-size:13px;color:var(--muted);}
.citem__price{font-size:14px;font-weight:700;color:var(--cyan);white-space:nowrap;}
.cart-foot{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font-size:13px;}
.deliver-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:520px){.deliver-fields{grid-template-columns:1fr}}

/* 页脚：窄屏下公司信息不挤、社交按钮保持横排 */
@media(max-width:600px){
  .ftr__in{padding:24px 16px;gap:16px}
  .ftr__social { margin-top: 8px; }
  .ftr__social a{padding:8px 13px;font-size:12px;flex:0 0 auto}
  .ftr__legal{padding:18px 16px 24px}
  .ftr__legal p{font-size:11.5px;line-height:1.65}
}
.field label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.field input{width:100%;background:#0e1522;border:1px solid #1c2a3f;border-radius:10px;color:#e7eef9;padding:10px 12px;font-size:14px;box-sizing:border-box;}
.field input:focus{outline:none;border-color:rgba(34,211,238,.5);}
/* 浏览器自动填充时强制深色，避免白底 */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #0e1522 inset;-webkit-text-fill-color:#e7eef9;caret-color:#e7eef9;transition:background-color 9999s ease-in-out 0s;}
.deliver-method .method-name{font-size:14px;font-weight:700;color:#fff;margin:2px 0 6px;}
.deliver-note{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0 0 8px;padding:10px 12px;background:#0d1626;border-left:2px solid var(--cyan);border-radius:6px;}
.dm-list{display:grid;gap:8px;margin-top:6px;}
.dm-item{display:flex;align-items:center;gap:11px;padding:11px 14px;background:#0e1522;border:1px solid var(--line);border-radius:11px;cursor:pointer;transition:.15s;}
.dm-item input{accent-color:var(--cyan);margin:0;}
.dm-item b{display:block;font-size:13.5px;color:#fff;}
.dm-item small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.5;}
.dm-item.is-on{border-color:var(--cyan);background:rgba(34,211,238,.07);box-shadow:0 0 0 1px rgba(34,211,238,.4);}
.dm-reminder{font-size:12.5px;color:var(--muted);line-height:1.6;margin:10px 0 0;padding:10px 12px;background:#0d1626;border-left:2px solid var(--cyan);border-radius:6px;}
.paylist{display:grid;gap:8px;}
.pay-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#0e1522;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:.15s;}
.pay-item.is-on{border-color:var(--cyan);background:rgba(34,211,238,.07);box-shadow:0 0 0 1px rgba(34,211,238,.4);}
.pay-item input{accent-color:var(--cyan);}
.pay-item__body{flex:1;min-width:0;}
.pay-item__body b{display:block;font-size:13.5px;color:#fff;}
.pay-item__body small{display:block;font-size:11.5px;color:var(--muted);}
.pay-item__fee{font-size:13px;font-weight:700;color:var(--cyan);white-space:nowrap;}
.calc{margin-top:4px;}
.calc__row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted);}
.calc__row b{color:#e7eef9;font-weight:650;}
.calc__row--total{border-bottom:0;padding-top:12px;margin-top:6px;border-top:1px dashed var(--line);}
.calc__row--total span{font-size:15px;font-weight:700;color:#fff;}
.calc__row--total b{font-size:24px;font-weight:820;color:#fff;letter-spacing:-.02em;}
.check-row{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--muted);}
.check-row input{accent-color:var(--cyan);margin-top:3px;}
.btn--primary{background:linear-gradient(135deg,#22d3ee,#4f7cff);color:#04121a;border:0;}
.btn--lg{padding:14px 22px;font-size:15px;}
.btn--block{width:100%;}
.sum__trust{display:grid;gap:8px;margin-top:14px;font-size:11.5px;color:var(--muted);}
.err-note{background:rgba(255,107,107,.12);color:#ff6b6b;border:1px solid rgba(255,107,107,.3);border-radius:10px;padding:10px 14px;margin-bottom:16px;}
.citem__remove{color:var(--muted);text-decoration:none;font-size:12px;font-weight:600;padding:4px 6px;flex:0 0 auto;border-radius:6px;transition:.15s;white-space:nowrap;}
.citem__remove:hover{color:#ff6b6b;background:rgba(255,107,107,.1);}
.country-ac{position:relative;}
.country-dd{position:absolute;top:100%;left:0;right:0;background:#0e1522;border:1px solid var(--line);border-radius:10px;margin-top:4px;max-height:230px;overflow-y:auto;z-index:60;display:none;box-shadow:0 10px 30px rgba(0,0,0,.55);}
.country-item{padding:9px 12px;font-size:13.5px;color:#e7eef9;cursor:pointer;}
.country-item b{color:#22d3ee;font-weight:700;}
.country-item:hover,.country-item.is-active{background:rgba(34,211,238,.12);}
.country-dd::-webkit-scrollbar{width:8px;}
.country-dd::-webkit-scrollbar-thumb{background:#1c2a3f;border-radius:4px;}
.country-sep{padding:6px 12px 4px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);margin-top:4px;}
.promo{display:flex;gap:8px;}
.promo input{flex:1;background:#0e1522;border:1px solid #1c2a3f;border-radius:10px;color:#e7eef9;padding:10px 12px;font-size:13px;box-sizing:border-box;}
.promo input:focus{outline:none;border-color:rgba(34,211,238,.5);}
/* 顶栏控制区（币种/登录/注册/购物车） */
.hdr__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.hdr-ctl{display:inline-flex;align-items:center;gap:6px;font-size:15px;color:var(--text);padding:9px 14px;border-radius:10px;text-decoration:none;border:1px solid transparent;cursor:pointer;line-height:1;background:transparent;transition:.15s;font-weight:600;}
.hdr-ctl:hover{background:#121c2c;border-color:#2a3c55;color:var(--cyan);}
.hdr-ctl--primary{border-color:var(--cyan);color:var(--cyan);}
.hdr-ctl--primary:hover{background:var(--cyan);color:#04121a;}
.cur-wrap{position:relative;display:inline-flex;}
.cur-sel{background:transparent;border:1px solid transparent;border-radius:10px;color:var(--text);padding:9px 12px;font-size:15px;cursor:pointer;font-weight:600;transition:.15s;}
.cur-sel:hover{background:#121c2c;border-color:#2a3c55;color:var(--cyan);}
.cur-sel option{background:#0e1522;color:#e7eef9;}
/* 悬停提示 */
.hdr__meta [data-tip]{position:relative;}
.hdr__meta [data-tip]:hover::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#1c2a3f;color:#e7eef9;padding:6px 11px;border-radius:8px;font-size:12px;white-space:nowrap;z-index:99;border:1px solid #2a3c55;pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,.4);font-weight:500;}
/* 上传截图区域 */
.upload-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed #2a3c55;border-radius:12px;padding:26px 20px;cursor:pointer;transition:.15s;text-align:center;}
.upload-drop:hover{border-color:var(--cyan);background:rgba(34,211,238,.04);}
.upload-drop__icon{font-size:26px;margin-bottom:8px;line-height:1;}
.upload-drop b{display:block;color:#fff;font-size:14px;margin-bottom:4px;}
.upload-drop small{color:var(--muted);font-size:12px;}
.upload-previews{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.upload-thumb{position:relative;width:80px;height:80px;}
.upload-thumb img{width:100%;height:100%;object-fit:cover;border-radius:8px;border:1px solid #1c2a3f;display:block;}
.upload-thumb__x{position:absolute;top:-7px;right:-7px;width:20px;height:20px;background:#ff6b6b;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;line-height:1;border:1px solid #04121a;}
/* 促销横幅 */
.promobar{background:linear-gradient(90deg,rgba(34,211,238,.12),rgba(79,124,255,.12));border:1px solid #1c2a3f;border-radius:12px;padding:18px 20px;margin:16px 0 22px;text-align:center;font-size:17px;font-weight:700;color:#e7eef9;}
.promobar a{color:var(--cyan);text-decoration:none;}
.promobar a:hover{text-decoration:underline;}
.promobar__go{margin-left:6px;}
/* 首页推广图片 */
.promoimg{display:block;margin:0 0 22px;border-radius:14px;overflow:hidden;border:1px solid var(--line);}
.promoimg a{display:block;}
.promoimg img{width:100%;height:auto;display:block;}