:root{
  /* 参考图：抖音钻石充值（白底 + 抖音红高亮） */
  --brand:#ff2d55;
  --brand-deep:#ff1f4a;
  --ink:#111827;
  --muted:#6b7280;

  --bg:#f6f7f9;
  --card:#ffffff;
  --line:#e9ebef;

  --radius:14px;
  --shadow:0 10px 24px rgba(17,24,39,.08);

  --grad:linear-gradient(135deg,#ff2d55 0%,#ff375f 45%,#ff1f4a 100%);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Roboto,Segoe UI,Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--bg);
}

a{color:var(--brand);text-decoration:none}
.wrap{max-width:720px;margin:0 auto;padding:14px 14px 88px}

/* 首屏（更接近参考图：简洁白底页面 + 红色主按钮感） */
/* ===== 头部 hero 改为暗黑色背景（覆盖原样式） ===== */
.hero{
  box-shadow:none !important;
  border-radius:0 !important;
}


.hero h1{
  color:#fff;
}

.hero .sub{
  color: rgba(255,255,255,.78);
}

/* chip 在暗黑背景下更清晰 */
.hero .chip{
  background: rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
}

/* logo 区域：适当增强对比 */
.hero .logo{
  margin-bottom:8px;
}
.hero .logo img{
  height:56px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
}

.logo{display:flex;justify-content:center;align-items:center;margin-bottom:6px}
.logo img{height:56px;width:auto;max-width:100%;object-fit:contain}

h1{margin:6px 0 4px;font-size:22px;line-height:1.35;font-weight:900}
.sub{margin:6px auto 10px;font-size:14px;line-height:1.55;max-width:92%;color:var(--muted)}

.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{
  font-size:12px;
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
}

/* 通用面板 */
.panel{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
  margin-top:14px;
  border:1px solid var(--line);
}

/* 面包屑 */
.crumbs{
  display:flex;
  gap:6px;
  align-items:center;
  font-size:13px;
  color:var(--muted);
  margin:12px 6px 4px
}
.crumbs a{
  color:var(--muted);
  text-decoration:none;
}
.crumbs a:hover{color:var(--brand)}

/* 账号输入 */
.id-card .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.id-title{display:flex;align-items:center;gap:8px;font-weight:900;font-size:18px;color:var(--ink)}
.id-title svg{width:20px;height:20px;color:var(--muted)}
.id-card .head a{font-size:13px;color:var(--brand)}

.input-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:12px 12px
}
.input-wrap:focus-within{border-color:rgba(255,45,85,.55); box-shadow:0 0 0 3px rgba(255,45,85,.12);}
.input-wrap input{
  flex:1;border:none;outline:none;font-size:16px;color:#111827;background:transparent
}
.input-wrap input::placeholder{color:#9aa0a6}
.err{display:none;color:#ef4444;font-size:12px;margin-top:6px}

/* 标题 */
.only-title{font-weight:900;color:var(--ink);margin-bottom:6px}

/* 档位（更接近参考图：白底卡片 + 选中红框） */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}

.tier{
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:12px;
  cursor:pointer;
  transition:.2s;
  text-align:left;
}
.tier:hover{border-color:rgba(17,24,39,.18)}
.tier.active{
  border-color:var(--brand);
  box-shadow:0 10px 18px rgba(255,45,85,.12);
}

.tier-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.price{margin:0;font-size:16px;font-weight:900;color:#111827}
.tag{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  color:#fff;
  background:var(--brand);
}
.muted{color:var(--muted);font-size:13px}
.hint{margin-top:10px;color:var(--muted);font-size:12px}

/* 支付方式：参考图的“列表感” */
.pay{display:flex;gap:10px;margin-top:12px}
.method{
  flex:1;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:12px 10px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-weight:800;
  color:#111827;
}
.method.active{
  border-color:var(--brand);
  box-shadow:0 10px 18px rgba(255,45,85,.10);
}
.method i{font-size:18px}
.method[data-pay="alipay"] i{color:#1677FF}
.method[data-pay="wechat"] i{color:#07C160}

/* 主按钮：参考图红色大按钮 */
.btn{
  width:100%;
  margin-top:12px;
  border:none;
  border-radius:14px;
  padding:14px 16px;
  background:var(--brand);
  color:#fff;
  font-weight:900;
  font-size:16px;
  box-shadow:0 14px 26px rgba(255,45,85,.18);
  cursor:pointer
}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.is-loading{position:relative;opacity:.9;pointer-events:none}

.secure{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:8px;color:#6b7280;font-size:12px}

/* Toast */
.toast{
  position:fixed;
  left:50%;
  top:10px;
  transform:translateX(-50%) translateY(-18px);
  background:rgba(255,255,255,.96);
  color:#111;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  box-shadow:0 10px 24px rgba(17,24,39,.10);
  font-size:13px;
  white-space:nowrap;
  z-index:99999;
  opacity:0;
  pointer-events:none
}

/* 说明与备案 */
#guide h3{font-size:18px;color:#111827;margin:0 0 10px;font-weight:900}
#guide ul{font-size:13px;line-height:1.8;color:#111827}
#guide li{margin:6px 0}
.footer{margin-top:18px;padding:14px;text-align:center;color:#6b7280;font-size:12px}
.icp{display:flex;flex-direction:column;gap:6px;align-items:center}

@media (max-width:360px){
  .grid{grid-template-columns:1fr}
}
/* ===== 精致版：logo 居左 + 全站字体略缩小（追加到 styles.css 末尾） ===== */

/* 1) Hero 区域：仅让 logo 靠左（不强制你其它内容必须居左） */
.hero .logo{
  display:flex;
  justify-content:flex-start;   /* ✅ logo 居左 */
  align-items:center;
  margin-bottom:10px;
}

/* 2) Logo 尺寸：整体缩小一点 */
.hero .logo img{
  height:44px;                 /* ✅ 从 56px 缩小到 44px */
  width:auto;
  max-width:72%;
  object-fit:contain;
}

/* 小屏再小一档 */
@media (max-width:420px){
  .hero .logo img{
    height:40px;
    max-width:78%;
  }
}

/* 3) 全站字体：整体略缩小（更精致） */
body{ font-size:14px; }        /* 默认 16px -> 14px */

/* 4) 关键模块字号微调（避免只缩 body 导致层级不舒服） */
h1{ font-size:20px; line-height:1.35; }         /* 22 -> 20 */
.sub{ font-size:13px; line-height:1.6; }        /* 14 -> 13 */

.chip{ font-size:11.5px; padding:5px 9px; }     /* 12 -> 11.5 */

.id-title{ font-size:16px; }                     /* 18 -> 16 */
.input-wrap{ padding:10px 12px; }
.input-wrap input{ font-size:15px; }             /* 16 -> 15 */

.price{ font-size:15px; }                        /* 16 -> 15 */
.muted{ font-size:12px; }                        /* 13 -> 12 */
.tag{ font-size:11px; padding:3px 8px; }         /* 12 -> 11 */

.method{ font-size:14px; padding:10px 10px; }    /* 更精致一点 */
.btn{ font-size:15px; padding:13px 16px; }       /* 16 -> 15 */

.secure{ font-size:11.5px; }
/* ===== 去掉头部 Hero 黑色背景，改为干净浅色 ===== */
.hero{
  background: transparent !important;   /* 直接移除黑底 */
}
/* ===== 仅移除头部 Hero 内的卡片样式 ===== */

/* Hero 内如果有 panel / 卡片感，直接扁平化 */
.hero .panel,
.hero .panel.id-card{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding-left: 0;
  padding-right: 0;
}

/* Hero 内的 head 区域（防止有白底条） */
.hero .head{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}