* { box-sizing: border-box; }
:root {
  --bg:#151A23;
  --panel:#1B2130;
  --panel2:#202738;
  --panel3:#252D40;
  --gold:#F1DCA3;
  --gold2:#E3C98F;
  --text:#E8ECF5;
  --muted:#B8C0D3;
  --soft:#8F98AD;
  --footer:#0E121A;
  --border:rgba(241,220,163,0.14);
  --shadow:0 14px 36px rgba(0,0,0,0.28);
}
html { scroll-behavior: smooth; }
html.no-scroll, html.no-scroll body { overflow: hidden; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif;
  line-height:1.8;
  padding-top:82px;
}
a { color:var(--gold); text-decoration:none; }
a:hover { color:var(--gold2); }
img { max-width:100%; display:block; }
.site-header {
  position:fixed;
  top:0; left:0; right:0;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  z-index:9999;
  box-shadow:0 8px 24px rgba(0,0,0,0.22);
}
.header-inner {
  max-width:1200px;
  height:82px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 22px;
}
.brand-logo img { width:148px; height:auto; object-fit:contain; }
.nav-core { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; min-width:0; }
.nav-core a {
  color:var(--gold);
  background:rgba(241,220,163,0.06);
  border:1px solid rgba(241,220,163,0.08);
  border-radius:999px;
  padding:8px 14px;
  white-space:nowrap;
  font-size:15px;
  transition:.2s ease;
}
.nav-core a:hover,
.nav-core a.active {
  color:var(--gold);
  background:linear-gradient(180deg, rgba(241,220,163,0.10), rgba(241,220,163,0.02));
  box-shadow:inset 0 -2px 0 var(--gold), 0 10px 22px rgba(241,220,163,0.16);
}
.header-actions { display:flex; align-items:center; gap:10px; }
.panel-toggle,
.mobile-menu-toggle,
.drawer-head button,
.panel-head button,
.slider-arrow {
  cursor:pointer;
  font:inherit;
}
.panel-toggle {
  color:var(--gold);
  background:rgba(241,220,163,0.06);
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 15px;
}
.main-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--gold);
  color:var(--bg);
  border-radius:999px;
  box-shadow:0 10px 24px rgba(241,220,163,0.18);
  font-weight:700;
  padding:10px 18px;
  border:none;
  line-height:1.4;
}
.main-btn:hover { background:var(--gold2); color:var(--bg); transform:translateY(-1px); }
.mobile-menu-toggle { display:none; background:none; border:none; color:var(--gold); font-size:28px; }
.site-mask {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.58);
  opacity:0; visibility:hidden;
  z-index:9998;
  transition:.22s ease;
}
.site-mask.open { opacity:1; visibility:visible; }
.category-panel {
  position:fixed; top:0; right:0;
  width:min(440px, 88vw);
  height:100vh;
  transform:translateX(104%);
  transition:.28s ease;
  background:var(--panel);
  box-shadow:0 18px 48px rgba(0,0,0,0.36);
  z-index:10000;
  overflow-y:auto;
}
.category-panel.open { transform:translateX(0); }
.panel-head,
.drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:22px;
  border-bottom:1px solid var(--border);
}
.panel-head strong { color:var(--gold); font-size:22px; }
.panel-head button,
.drawer-head button { background:var(--panel2); color:var(--gold); border:1px solid var(--border); border-radius:50%; width:38px; height:38px; font-size:24px; line-height:1; }
.panel-body { padding:22px; display:grid; gap:22px; }
.panel-group h2 { color:var(--gold); margin:0 0 12px; font-size:18px; }
.panel-group a { display:block; padding:10px 12px; border-radius:14px; background:rgba(241,220,163,0.04); border:1px solid transparent; margin-bottom:8px; }
.panel-group a:hover { border-color:var(--border); background:rgba(241,220,163,0.08); }
.panel-group span { display:block; color:var(--gold); font-weight:700; }
.panel-group em { display:block; color:var(--muted); font-style:normal; font-size:13px; }
.mobile-drawer {
  position:fixed; top:0; left:0;
  width:min(84vw, 320px);
  height:100vh;
  transform:translateX(-104%);
  background:var(--panel);
  z-index:10000;
  transition:.28s ease;
  overflow-y:auto;
  box-shadow:18px 0 42px rgba(0,0,0,.35);
}
.mobile-drawer.open { transform:translateX(0); }
.drawer-head img { width:130px; }
.drawer-nav { padding:14px 18px 28px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.drawer-nav a { padding:10px 12px; border-radius:14px; background:rgba(241,220,163,.05); border:1px solid rgba(241,220,163,.09); color:var(--gold); }
.drawer-nav a.active { background:rgba(241,220,163,.12); box-shadow:inset 0 -2px 0 var(--gold); }
.side-rail {
  position:fixed;
  left:18px;
  top:158px;
  z-index:20;
  display:grid;
  gap:9px;
}
.side-rail a {
  width:54px; min-height:44px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  color:var(--gold);
  background:rgba(27,33,48,.92);
  border:1px solid var(--border);
  border-radius:15px;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  font-size:14px;
}
main, .site-footer { position:relative; z-index:1; }
.page-shell, .home-shell { max-width:1200px; margin:0 auto; padding:0 22px 64px; }
.banner-slider {
  max-width:1200px;
  margin:28px auto 36px;
  border-radius:20px;
  background:var(--panel);
  box-shadow:0 18px 40px rgba(0,0,0,0.30);
  overflow:hidden;
  position:relative;
  z-index:1;
  aspect-ratio: 16 / 6.4;
}
.banner-slider .slide { display:none; width:100%; height:100%; }
.banner-slider .slide.active { display:block; }
.banner-slider img { width:100%; height:100%; object-fit:contain; background:var(--bg); }
.slider-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  border:none;
  border-radius:999px;
  background:rgba(27,33,48,0.78);
  color:var(--gold);
  box-shadow:0 8px 20px rgba(0,0,0,0.28);
  width:42px; height:42px;
  font-size:28px;
}
.slider-arrow.prev { left:16px; }
.slider-arrow.next { right:16px; }
.slider-dots { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:8px; z-index:3; }
.slider-dots button { width:9px; height:9px; border-radius:50%; border:none; background:rgba(241,220,163,0.28); cursor:pointer; }
.slider-dots button.active { background:var(--gold); }
.section { margin:34px 0; }
.section-head { margin-bottom:18px; max-width:830px; }
.section-kicker, .tag, .label, .num, .badge { color:var(--gold); font-weight:700; letter-spacing:.04em; }
h1, h2, h3, .section-title { color:var(--gold); line-height:1.3; }
h1 { font-size:42px; margin:8px 0 14px; }
h2 { font-size:28px; margin:0 0 12px; }
h3 { font-size:20px; margin:0 0 10px; }
p { margin:0 0 12px; color:var(--text); }
.lead { color:var(--muted); font-size:18px; }
.muted { color:var(--muted); }
.soft { color:var(--soft); }
.card,
.zone-card,
.info-card,
.review-card,
.faq-item,
.notice-card,
.quick-card {
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  border-radius:20px;
}
.card, .info-card, .review-card, .faq-item, .notice-card, .quick-card { padding:22px; }
.grid { display:grid; gap:18px; }
.grid-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.quick-strip { display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; }
.quick-strip a { flex:0 0 auto; min-width:132px; padding:11px 14px; border-radius:999px; border:1px solid var(--border); background:rgba(241,220,163,.06); color:var(--gold); text-align:center; }
.quick-card h3 { font-size:18px; }
.text-link { color:var(--gold); font-weight:700; }
.zone-card { overflow:hidden; }
.zone-card img, .content-img, .app-section img, .banner-slider img, .hero-media img { max-width:100%; height:auto; object-fit:contain; }
.zone-card img { width:100%; aspect-ratio:16/10; background:var(--bg); }
.zone-card .zone-body { padding:20px; }
.list-clean { padding-left:18px; margin:10px 0 0; color:var(--muted); }
.list-clean li { margin:5px 0; }
.page-hero {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:28px;
  align-items:center;
  padding:34px;
  background:linear-gradient(135deg, rgba(241,220,163,.08), rgba(32,39,56,.8));
  border:1px solid var(--border);
  border-radius:26px;
  box-shadow:var(--shadow);
  margin:28px 0 34px;
}
.page-hero.no-image { grid-template-columns:1fr; }
.hero-media { background:var(--panel2); border-radius:22px; overflow:hidden; border:1px solid var(--border); }
.hero-media img { width:100%; max-height:330px; margin:auto; }
.content-section { margin:24px 0; }
.content-section .card p:last-child { margin-bottom:0; }
.feature-list { display:grid; gap:12px; margin-top:14px; }
.feature-list div { padding:14px; border-radius:16px; background:rgba(241,220,163,.05); border:1px solid rgba(241,220,163,.08); }
.review-card p { color:var(--muted); }
.faq-list { display:grid; gap:14px; }
.faq-item h3 { color:var(--gold); }
.warning-band { background:var(--panel2); border:1px solid var(--border); border-radius:20px; padding:20px; color:var(--muted); }
.site-footer { background:var(--footer); color:#D5DBEA; margin-top:36px; }
.footer-inner { max-width:1200px; margin:0 auto; padding:38px 22px; display:grid; gap:22px; }
.footer-brand { display:grid; grid-template-columns:150px 1fr; gap:20px; align-items:center; }
.footer-brand img { width:145px; }
.footer-brand p, .footer-note { color:#D5DBEA; }
.footer-links { display:flex; flex-wrap:wrap; gap:12px 20px; }
.footer-links a { color:var(--gold); }
.mobile-bottom-nav { display:none; }
@media (max-width:1100px) {
  .side-rail { display:none; }
  .nav-core a { padding:7px 10px; font-size:14px; }
}
@media (max-width:860px) {
  body { padding-top:68px; padding-bottom:68px; }
  .header-inner { height:68px; padding:0 12px; justify-content:space-between; gap:8px; }
  .mobile-menu-toggle { display:block; }
  .nav-core, .panel-toggle { display:none; }
  .brand-logo { position:absolute; left:50%; transform:translateX(-50%); }
  .brand-logo img { width:118px; }
  .top-register { padding:8px 12px; font-size:13px; }
  .home-shell, .page-shell { padding:0 14px 42px; }
  .banner-slider { margin:18px auto 22px; border-radius:16px; aspect-ratio:16/8.8; }
  .slider-arrow { width:36px; height:36px; font-size:22px; }
  h1 { font-size:30px; }
  h2 { font-size:24px; }
  .page-hero { grid-template-columns:1fr; padding:22px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .footer-brand { grid-template-columns:1fr; }
  .mobile-bottom-nav { position:fixed; left:0; right:0; bottom:0; height:58px; background:rgba(14,18,26,.97); border-top:1px solid var(--border); display:grid; grid-template-columns:repeat(4,1fr); z-index:9997; }
  .mobile-bottom-nav a { display:flex; align-items:center; justify-content:center; color:var(--gold); font-weight:700; }
}
@media (max-width:420px) {
  .drawer-nav { grid-template-columns:1fr; }
  .quick-strip a { min-width:120px; }
}