/* ============================================================
   站24 www.tiedanyouxi.cn · 铁蛋游戏 公共设计系统（violet 现代紫主题 · 白色悬浮导航）
   仅公共框架与通用组件；各页面专属样式见 css/<page>.css
   ============================================================ */

/* ===== 设计变量 ===== */
:root {
  /* violet/purple 色阶（现代紫）*/
  --vx-50:#f5f3ff; --vx-100:#ede9fe; --vx-200:#ddd6fe; --vx-300:#c4b5fd;
  --vx-400:#a78bfa; --vx-500:#8b5cf6; --vx-600:#7c3aed; --vx-700:#6d28d9;
  --vx-800:#5b21b6; --vx-900:#4c1d95;
  /* gray 中性（中性灰，区别站23冷 slate）*/
  --vn-50:#f9fafb; --vn-100:#f3f4f6; --vn-200:#e5e7eb; --vn-300:#d1d5db;
  --vn-400:#9ca3af; --vn-500:#6b7280; --vn-600:#4b5563; --vn-700:#374151;
  --vn-800:#1f2937; --vn-900:#111827;
  /* 语义别名 */
  --vxprimary:var(--vx-600); --vxdark:var(--vx-800); --vxsoft:var(--vx-50);
  /* 圆角（比站23略小，更利落）/ 紫色调阴影 / 间距 */
  --vxr-sm:8px; --vxr:12px; --vxr-lg:20px; --vxr-pill:999px;
  --vxsh-sm:0 1px 3px rgba(17,24,39,.08);
  --vxsh:0 14px 34px rgba(124,58,237,.16);
  --vxsh-lg:0 26px 60px rgba(109,40,217,.24);
  --vxline:1px solid var(--vn-200);
  --vxwrap:1200px;
}

/* ===== Reset ===== */
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--vn-800); background:var(--vn-50); line-height:1.75;
}
h1,h2,h3,h4,h5,h6 { margin:0; line-height:1.32; font-weight:700; color:var(--vn-900); }
p { margin:0; }
a { color:var(--vx-700); text-decoration:none; transition:color .16s ease; }
a:hover { color:var(--vx-500); }
img { max-width:100%; display:block; }
ul,ol { list-style:none; }
button { font-family:inherit; cursor:pointer; }

.wrap { max-width:var(--vxwrap); margin:0 auto; padding:0 20px; }
.vxsection { padding:66px 0; }
.vxhead { text-align:center; max-width:720px; margin:0 auto 44px; }
.vxhead h2 { font-size:29px; }
.vxhead .vxsub { color:var(--vn-500); font-size:14.5px; margin-top:10px; }
.vxkeyebrow {
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:1.5px;
  color:var(--vx-700); background:var(--vx-50); border:1px solid var(--vx-200);
  padding:5px 14px; border-radius:var(--vxr-pill); margin-bottom:14px;
}

/* ===== 按钮（vx 前缀，圆角利落）===== */
.vxbtn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:12px 26px; border-radius:var(--vxr-sm); font-size:14px; font-weight:700;
  border:1px solid transparent; transition:all .16s ease; white-space:nowrap;
}
.vxbtn-primary { background:linear-gradient(120deg,var(--vx-500),var(--vx-700)); color:#fff; box-shadow:0 8px 18px rgba(124,58,237,.32); }
.vxbtn-primary:hover { background:linear-gradient(120deg,var(--vx-600),var(--vx-800)); color:#fff; transform:translateY(-2px); }
.vxbtn-ghost { background:#fff; color:var(--vx-700); border-color:var(--vx-200); }
.vxbtn-ghost:hover { border-color:var(--vx-400); color:var(--vx-600); }
.vxbtn-line { background:transparent; color:var(--vx-700); border-color:var(--vx-300); }
.vxbtn-white { background:#fff; color:var(--vx-700); }
.vxbtn-lg { padding:15px 36px; font-size:15.5px; }

/* ===== 顶部细条（紫色渐变）===== */
.vxbar { background:linear-gradient(90deg,var(--vx-900),var(--vx-600)); color:var(--vx-100); font-size:12.5px; }
.vxbar .wrap { display:flex; align-items:center; justify-content:space-between; height:36px; }
.vxbar a { color:var(--vx-100); }
.vxbar a:hover { color:#fff; }
.vxbar .vxbar-links { display:flex; gap:20px; }

/* ===== Header / 白色悬浮导航 ===== */
.vxheader {
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px);
  position:sticky; top:0; z-index:9998; box-shadow:0 2px 18px rgba(17,24,39,.07);
  border-bottom:1px solid var(--vn-200);
}
.vxheader-inner { display:flex; align-items:center; justify-content:space-between; min-height:70px; gap:16px; }
.vxbrand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.vxbrand img { width:42px; height:42px; }
.vxbrand-name { font-size:20px; font-weight:800; color:var(--vn-900); letter-spacing:.5px; }
.vxbrand-name i { color:var(--vx-600); font-style:normal; }

.vxnav { display:flex; align-items:center; gap:2px; }
.vxnav-link {
  color:var(--vn-700); padding:9px 11px; font-size:13.5px; font-weight:600;
  display:inline-flex; align-items:center; white-space:nowrap; border-radius:var(--vxr-sm);
}
.vxnav-link:hover, .vxnav-link.active { color:var(--vx-700); background:var(--vx-50); }
.vxcaret { font-size:9px; margin-left:3px; }
.vxdrop { position:relative; }
.vxdrop-menu {
  position:absolute; top:calc(100% + 8px); left:0; min-width:210px;
  background:#fff; border:var(--vxline); border-radius:var(--vxr);
  box-shadow:var(--vxsh); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:all .16s ease; z-index:99999;
}
.vxdrop:hover .vxdrop-menu { opacity:1; visibility:visible; transform:translateY(0); }
.vxdrop-menu a {
  display:flex; align-items:center; gap:10px; padding:9px 12px; font-size:13.5px;
  color:var(--vn-700); border-radius:var(--vxr-sm);
}
.vxdrop-menu a:hover { background:var(--vx-50); color:var(--vx-700); }
.vxdrop-ico { font-size:19px; flex-shrink:0; width:24px; text-align:center; }
.vxdrop-txt { display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.vxdrop-name { font-weight:700; font-size:13.5px; color:var(--vn-800); }
.vxdrop-price { font-size:11.5px; color:var(--vn-500); }
.vxdrop-menu a:hover .vxdrop-name { color:var(--vx-700); }
.vxdrop-wide { min-width:264px; }
.vxnav-cta .vxbtn { padding:10px 22px; }

/* 移动端汉堡控制 */
.vxnav-toggle { display:none; background:none; border:none; font-size:26px; color:var(--vx-700); }
#vxnavSwitch { display:none; }

/* ===== 面包屑 ===== */
.vxpath { padding:15px 0; font-size:13px; color:var(--vn-500); }
.vxpath .wrap { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.vxpath a { color:var(--vn-500); }
.vxpath a:hover { color:var(--vx-700); }
.vxpath .vxsep { color:var(--vn-300); }

/* ===== 通用组件 ===== */
.vxgrid { display:grid; gap:22px; }
.vx2 { grid-template-columns:repeat(2,1fr); }
.vx3 { grid-template-columns:repeat(3,1fr); }
.vx4 { grid-template-columns:repeat(4,1fr); }
.vxcard {
  background:#fff; border:var(--vxline); border-radius:var(--vxr);
  padding:26px; transition:transform .18s, box-shadow .18s;
}
.vxcard:hover { transform:translateY(-5px); box-shadow:var(--vxsh); }
.vxcard .vxico { font-size:30px; margin-bottom:14px; }
.vxcard h3 { font-size:17px; margin-bottom:9px; }
.vxcard p { color:var(--vn-500); font-size:13.5px; }

.vxtag {
  display:inline-block; font-size:12px; font-weight:700; color:var(--vx-700);
  background:var(--vx-50); border:1px solid var(--vx-200);
  padding:4px 12px; border-radius:var(--vxr-pill);
}

/* 数据条 */
.vxstats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.vxstat { text-align:center; background:#fff; border:var(--vxline); border-radius:var(--vxr); padding:26px 14px; }
.vxstat b { display:block; font-size:30px; color:var(--vx-700); line-height:1.1; }
.vxstat span { font-size:12.5px; color:var(--vn-500); margin-top:6px; display:block; }

/* 表格 */
.vxdata-wrap { overflow-x:auto; background:#fff; border:var(--vxline); border-radius:var(--vxr); }
table.vxdata { width:100%; border-collapse:collapse; min-width:540px; }
.vxdata th, .vxdata td { padding:14px 18px; text-align:left; font-size:13.5px; border-bottom:1px solid var(--vn-200); }
.vxdata thead th { background:var(--vx-50); color:var(--vx-800); font-weight:700; }
.vxdata tbody tr:last-child td { border-bottom:none; }
.vxdata tbody tr:hover { background:var(--vx-50); }

/* FAQ 手风琴 */
.vxfaq details {
  background:#fff; border:var(--vxline); border-radius:var(--vxr);
  padding:0 22px; margin-bottom:12px;
}
.vxfaq summary {
  list-style:none; cursor:pointer; padding:17px 0; font-weight:700; font-size:14.5px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.vxfaq summary::-webkit-details-marker { display:none; }
.vxfaq summary::after { content:"+"; font-size:21px; color:var(--vx-600); font-weight:400; }
.vxfaq details[open] summary::after { content:"−"; }
.vxfaq details p { color:var(--vn-500); font-size:13.5px; padding:0 0 17px; }

/* CTA 横幅 */
.vxcta {
  background:linear-gradient(120deg,var(--vx-700),var(--vx-900));
  border-radius:var(--vxr-lg); color:#fff; padding:52px 40px; text-align:center;
}
.vxcta h2 { color:#fff; font-size:26px; }
.vxcta p { color:var(--vx-100); margin:12px 0 26px; font-size:14.5px; }
.vxcta .vxbtns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* 步骤流程 */
.vxflow { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:vxstep; }
.vxflow-step { position:relative; background:#fff; border:var(--vxline); border-radius:var(--vxr); padding:28px 22px 24px; }
.vxflow-step::before {
  counter-increment:vxstep; content:counter(vxstep);
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(120deg,var(--vx-500),var(--vx-700)); color:#fff; font-weight:800;
  border-radius:var(--vxr-pill); margin-bottom:14px;
}
.vxflow-step h3 { font-size:16px; margin-bottom:8px; }
.vxflow-step p { color:var(--vn-500); font-size:13px; }

/* ===== 页脚（深色，非标题元素）===== */
.vxfooter { background:var(--vn-900); color:var(--vn-300); margin-top:20px; }
.vxfooter-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:32px; padding:56px 0 40px; }
.vxfooter-col .vxf-title { color:#fff; font-size:15px; margin-bottom:17px; font-weight:700; }
.vxfooter-col p { color:var(--vn-400); font-size:13px; margin-bottom:10px; }
.vxfooter-col a { display:block; color:var(--vn-400); font-size:13px; padding:4px 0; }
.vxfooter-col a:hover { color:#fff; }
.vxfooter-bottom { border-top:1px solid rgba(255,255,255,.10); padding:20px 0; }
.vxfooter-bottom p { color:var(--vn-400); font-size:12.5px; text-align:center; }
.vxfooter-bottom a { color:var(--vn-300); }
.vxfooter-bottom a:hover { color:#fff; }
.vxlegal { display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
.vxlegal a { display:inline-block; }
.vxlegal a:hover { color:#fff; }

/* ===== 响应式 ===== */
@media (max-width:1024px) {
  .vx4 { grid-template-columns:repeat(2,1fr); }
  .vxstats, .vxflow { grid-template-columns:repeat(2,1fr); }
  .vxfooter-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .vxnav-toggle { display:block; }
  .vxnav {
    position:fixed; top:70px; left:0; right:0; bottom:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; padding:16px; overflow-y:auto;
    display:none; z-index:9997;
  }
  #vxnavSwitch:checked ~ .vxheader-inner .vxnav { display:flex; }
  .vxnav .vxnav-link { padding:13px 15px; font-size:15px; }
  .vxdrop-menu {
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:1px solid var(--vn-200); margin:5px 0 9px; display:block;
  }
  .vxnav-cta { margin-top:12px; }
  .vxnav-cta .vxbtn { width:100%; }
  .vx3, .vx2 { grid-template-columns:1fr; }
  .vxbar .vxbar-links { display:none; }
}
@media (max-width:560px) {
  .vx4, .vxstats, .vxflow { grid-template-columns:1fr; }
  .vxfooter-grid { grid-template-columns:1fr; gap:26px; }
  .vxsection { padding:46px 0; }
  .vxcta { padding:40px 22px; }
}