/* ============================================================
   9jaWin — Unified UI v2 (2026-10-22)
   设计规范：浅色大厅 + 深色游戏桌
   · 一个 token 体系（颜色/字号/间距/圆角/阴影）
   · 所有页面共用同一套顶栏、底栏、卡片、按钮、表单、表格
   · 游戏页（dragon / sicbo / bac / bj）沿用深色皮肤，但组件规格一致
   ⚠️ 本文件必须最后加载（header.php 里排在 style.css / casino.css 之后）
   ============================================================ */

:root{
  /* 画布 */
  --ui-bg:#f3f6f4;
  --ui-bg-2:#eaf1ec;
  --ui-surface:#ffffff;
  --ui-surface-2:#f7faf8;
  --ui-surface-3:#eef4f0;
  /* 线 */
  --ui-line:#e5ebe7;
  --ui-line-strong:#d5dfd9;
  /* 字 */
  --ui-ink:#0e1b14;
  --ui-ink-2:#344054;
  --ui-muted:#667085;
  --ui-muted-2:#98a2b3;
  /* 品牌 */
  --ui-green:#0f9d63;
  --ui-green-600:#0b7a4b;
  --ui-green-700:#064e3b;
  --ui-green-soft:#e8f7ef;
  --ui-green-line:#c6ead7;
  --ui-gold:#d9a520;
  --ui-gold-soft:#fdf6e3;
  --ui-red:#e5484d;
  --ui-red-soft:#fdecec;
  --ui-blue:#2f6fed;
  --ui-blue-soft:#eef4ff;
  /* 形状 */
  --ui-r:18px;
  --ui-r-sm:12px;
  --ui-r-xs:10px;
  --ui-shadow:0 1px 2px rgba(16,24,40,.03), 0 12px 32px -22px rgba(16,24,40,.28);
  --ui-shadow-lg:0 24px 64px -28px rgba(16,24,40,.38);
  --ui-font:"Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* 深色游戏页 token */
html.dark{
  --ui-bg:#060f0a;
  --ui-surface:#0e1d14;
  --ui-surface-2:#12251a;
  --ui-line:#1e3a2a;
  --ui-line-strong:#2a5240;
  --ui-ink:#e9f5ee;
  --ui-ink-2:#cfe6d9;
  --ui-muted:#93b3a1;
  --ui-muted-2:#7f9c8b;
  --ui-green:#22c55e;
  --ui-green-600:#16a34a;
  --ui-green-700:#065f46;
  --ui-green-soft:#0d2a19;
  --ui-green-line:#1e5a35;
  --ui-gold:#f0c14b;
  --ui-gold-soft:#241d07;
  --ui-red:#f87171;
  --ui-red-soft:#2d1114;
  --ui-blue:#7dd3fc;
  --ui-blue-soft:#0c2233;
  --ui-shadow:0 6px 22px rgba(0,0,0,.4);
  --ui-shadow-lg:0 24px 64px rgba(0,0,0,.55);
}

/* ---------- 基础 ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--ui-font);
  font-size:14px;
  line-height:1.5;
  color:var(--ui-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html:not(.dark) body{
  background:
    radial-gradient(800px 380px at 8% -8%, rgba(15,157,99,.07), transparent 60%),
    radial-gradient(700px 360px at 100% 0%, rgba(217,165,32,.05), transparent 55%),
    var(--ui-bg) !important;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px;}
main.wrap{padding-bottom:0;}
html.dark main.wrap{padding-bottom:0;}
a{color:var(--ui-green-600);}
img{max-width:100%;}
::selection{background:rgba(15,157,99,.18);}
h1,h2,h3,h4{letter-spacing:-.01em;}

/* 数字统一等宽（金额、余额、积分） */
.ui-num, .lb-wallet-v, .ac-wallet-v, .stat b, .gcard .price, .dt-cd, .cs-timer, .sb-round .countdown{
  font-variant-numeric:tabular-nums;
}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:900;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--ui-line);
  box-shadow:0 1px 0 rgba(16,24,40,.02);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
}
.topbar-in{display:flex;align-items:center;gap:10px;min-height:60px;}
.tb-back{
  flex:0 0 auto;width:36px;height:36px;padding:0;border-radius:50%;
  border:1px solid var(--ui-line);background:var(--ui-surface);color:var(--ui-ink-2);
  font-size:16px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
.tb-back:hover{background:var(--ui-surface-3);}
body.page-index .tb-back{display:none;}
.logo{
  display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  font-size:16px;font-weight:900;letter-spacing:-.02em;color:var(--ui-ink);
  background:none !important;-webkit-text-fill-color:currentColor !important;
}
.logo-mark{
  width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:900;color:#fff;background:linear-gradient(140deg,#12b76a,#065f46);
  -webkit-text-fill-color:#fff !important;
  box-shadow:0 6px 14px -6px rgba(11,122,75,.65);flex:0 0 auto;line-height:1;
}
.logo-txt{white-space:nowrap;}
.nav{display:flex;align-items:center;gap:1px;flex:1 1 auto;min-width:0;margin-left:6px;}
@media (min-width:901px){
  .nav{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
  .nav::-webkit-scrollbar{display:none;}
}
.nav a{
  padding:8px 11px;border-radius:999px;font-size:13px;font-weight:650;color:var(--ui-muted);
  white-space:nowrap;transition:background .15s,color .15s;
}
.nav a:hover{background:var(--ui-green-soft);color:var(--ui-green-700);}
.nav a.nav-on{background:var(--ui-green-soft);color:var(--ui-green-700);}
.userbox{display:flex;align-items:center;gap:6px;margin-left:auto;flex:0 0 auto;}
.tb-icon{
  width:38px;height:38px;padding:0;border-radius:50%;position:relative;
  border:1px solid var(--ui-line);background:var(--ui-surface);color:var(--ui-ink-2);
  font-size:17px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
.tb-icon:hover{background:var(--ui-surface-3);}
.tb-dot{
  position:absolute;top:-2px;right:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--ui-red);color:#fff;font-size:10px;font-weight:800;line-height:17px;text-align:center;
  border:2px solid var(--ui-surface);
}
.tb-bal{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 13px 0 11px;border-radius:999px;
  background:linear-gradient(135deg,#0b7a4b,#064e3b);color:#fff;font-size:13px;font-weight:800;
  box-shadow:0 8px 18px -10px rgba(6,78,59,.8);white-space:nowrap;text-decoration:none;
}
.tb-bal:hover{filter:brightness(1.06);}
.tb-bal .b-main{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;}
.tb-bal .b-bonus{
  display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;
  background:rgba(255,255,255,.18);font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums;
}
.tb-avatar{
  display:inline-flex;align-items:center;gap:7px;height:40px;padding:4px 11px 4px 4px;border-radius:999px;
  border:1px solid var(--ui-line);background:var(--ui-surface);color:var(--ui-ink);text-decoration:none;
  font-size:12.5px;font-weight:700;max-width:160px;
}
.tb-avatar:hover{background:var(--ui-surface-3);}
.tb-avatar img{width:30px;height:30px;border-radius:50%;object-fit:cover;}
.tb-avatar .av-ph{
  width:30px;height:30px;border-radius:50%;background:var(--ui-surface-3);display:inline-flex;
  align-items:center;justify-content:center;font-size:15px;flex:0 0 auto;
}
.tb-avatar .uname{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tb-login{height:38px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:750;display:inline-flex;align-items:center;}
.tb-signup{
  height:38px;padding:0 15px;border-radius:999px;font-size:13px;font-weight:800;display:inline-flex;align-items:center;
  background:linear-gradient(135deg,#12b76a,#0b7a4b);color:#fff;box-shadow:0 8px 18px -10px rgba(11,122,75,.75);
}
.tb-signup:hover{filter:brightness(1.05);}

/* 顶栏：手机 */
@media (max-width:900px){
  .topbar-in{flex-wrap:wrap;gap:6px;min-height:56px;padding:4px 0 0;align-items:center;}
  .tb-back{width:34px;height:34px;}
  .logo{font-size:15px;}
  .logo-mark{width:31px;height:31px;border-radius:10px;font-size:16px;}
  .userbox{gap:5px;}
  .tb-icon{width:35px;height:35px;font-size:16px;}
  .tb-bal{height:36px;padding:0 10px;font-size:12px;gap:6px;}
  .tb-bal .b-bonus{font-size:9.5px;padding:1px 5px;}
  .tb-avatar{height:36px;padding:3px;border-radius:50%;}
  .tb-avatar .uname{display:none;}
  .tb-login{height:34px;padding:0 11px;font-size:12.5px;}
  .tb-signup{height:34px;padding:0 12px;font-size:12.5px;}
  /* 第二行：横向滚动的频道条（游戏页不显示，省空间） */
  .nav{
    order:10;flex:0 0 100%;width:100%;max-width:100%;min-width:0;margin:0;padding:2px 0 8px;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    gap:6px;
  }
  .nav::-webkit-scrollbar{display:none;}
  .nav{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent 100%); }
  .nav a{
    flex:0 0 auto;padding:6px 12px;border-radius:999px;font-size:12.5px;
    background:var(--ui-surface);border:1px solid var(--ui-line);
  }
  .nav a.nav-on{border-color:var(--ui-green-line);}
  .nav-txt{display:inline;}
  .nav a.pc-only{display:none;}
  .nav-hide-md{display:none;}
}
@media (max-width:900px){
  /* 手机端频道条只在「大厅 + 游戏页」显示；个人中心/充值/内容页保持干净 */
  body.page-login .nav,
  body.page-register .nav,
  body.page-forgot .nav,
  body.page-verify_register .nav,
  body.page-verify_phone .nav,
  body.page-account .nav,
  body.page-recharge .nav,
  body.page-vip .nav,
  body.page-messages .nav,
  body.page-points .nav,
  body.page-signin .nav,
  body.page-agent .nav,
  body.page-chat .nav,
  body.page-goods .nav,
  body.page-faq .nav,
  body.page-terms .nav,
  body.page-privacy .nav,
  body.page-contact .nav,
  body.page-notice .nav{display:none;}
}
@media (max-width:560px){
  /* 旧深色皮肤把这两个入口在手机端藏掉了；新导航条保留它们（底栏也有） */
  html.dark .nav a[href*="m=dragon"],
  html.dark .nav a[href*="m=sicbo"]{display:inline-flex !important;}
}
@media (max-width:400px){
  .logo-txt{display:none;}
  .tb-bal .b-bonus{display:none;}
}
@media (max-width:340px){
  .topbar-in{gap:4px;}
  .tb-back{width:32px;height:32px;font-size:14px;}
  .tb-icon{width:32px;height:32px;font-size:15px;}
  .tb-bal{height:34px;padding:0 9px;font-size:11.5px;}
}

/* 深色游戏页顶栏 */
html.dark .topbar{
  background:rgba(8,21,14,.94) !important;
  border-bottom:1px solid #1e3a2a !important;
  box-shadow:0 8px 24px rgba(0,0,0,.45) !important;
}
html.dark .tb-back,html.dark .tb-icon{
  background:#12251a !important;border:1px solid #2a5240 !important;color:#d5e8dc !important;
}
html.dark .tb-icon:hover,html.dark .tb-back:hover{background:#173324 !important;}
html.dark .logo{color:#f0c14b !important;}
html.dark .logo-mark{box-shadow:0 6px 16px -6px rgba(240,193,75,.4);}
html.dark .nav a{color:#a9c6b6 !important;}
html.dark .nav a:hover,html.dark .nav a.nav-on{background:rgba(34,197,94,.12) !important;color:#4ade80 !important;}
html.dark .tb-avatar{background:#12251a !important;border-color:#2a5240 !important;color:#e9f5ee !important;}
html.dark .tb-avatar .av-ph{background:#1e3a2a;}
html.dark .tb-dot{border-color:#0b1a11;}
html.dark .tb-bal{
  background:linear-gradient(135deg,#1f8f5a,#0c3d27) !important;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.8);
}

/* ---------- 底部导航 ---------- */
.bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:9000;
  display:flex;align-items:stretch;justify-content:space-around;gap:2px;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--ui-line);
  box-shadow:0 -10px 30px -22px rgba(16,24,40,.4);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transform:translateZ(0);-webkit-transform:translateZ(0);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.bottomnav a{
  flex:1 1 0;max-width:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:5px 2px 4px;border-radius:14px;font-size:10.5px;font-weight:750;color:var(--ui-muted-2);
  text-decoration:none;transition:background .15s,color .15s;
}
.bottomnav a i{font-size:19px;font-style:normal;line-height:1.1;}
.bottomnav a.active{color:var(--ui-green-600);background:var(--ui-green-soft);}
html.dark .bottomnav{
  background:rgba(8,21,14,.97) !important;border-top:1px solid #1e3a2a !important;
  box-shadow:0 -8px 24px rgba(0,0,0,.45) !important;
}
html.dark .bottomnav a{color:#7f9c8b !important;}
html.dark .bottomnav a.active{color:#f0c14b !important;background:rgba(240,193,75,.09) !important;}

/* ---------- 页脚 ---------- */
.footer{
  text-align:center;color:var(--ui-muted-2);font-size:11.5px;line-height:1.75;
  padding:26px 16px 96px;border-top:1px solid var(--ui-line);margin-top:18px;
}
.footer a{color:var(--ui-muted);font-weight:650;}
.footer a:hover{color:var(--ui-green-600);}
html.dark .footer{border-top-color:#1e3a2a;color:#7f9c8b;padding-bottom:84px;}
html.dark .footer a{color:#a9c6b6;}
@media (min-width:901px){
  .bottomnav{display:none;}
  .footer{padding-bottom:36px;}
  main.wrap{padding-bottom:0;}
}

/* ---------- 卡片 / 面板 ---------- */
.panel{
  background:var(--ui-surface);
  border:1px solid var(--ui-line);
  border-radius:var(--ui-r);
  padding:16px;
  margin:0 0 12px;
  box-shadow:var(--ui-shadow);
}
.panel h1{font-size:20px;font-weight:850;margin:0 0 10px;color:var(--ui-ink);}
.panel h2{font-size:16px;font-weight:850;margin:0 0 10px;color:var(--ui-ink);letter-spacing:-.01em;}
.panel h3{font-size:14px;font-weight:800;margin:0 0 8px;color:var(--ui-ink);}
html.dark .panel{
  background:var(--ui-surface) !important;
  border:1px solid var(--ui-line) !important;
  box-shadow:var(--ui-shadow) !important;
  color:var(--ui-ink-2);
}
html.dark .panel h1,html.dark .panel h2,html.dark .panel h3{color:var(--ui-ink);}

/* 各页内容宽度（桌面端别把简单页面拉成 1180 宽） */
body.page-recharge main.wrap,
body.page-vip main.wrap,
body.page-messages main.wrap,
body.page-signin main.wrap,
body.page-chat main.wrap,
body.page-contact main.wrap{max-width:700px;}
body.page-points main.wrap{max-width:900px;}
body.page-agent main.wrap{max-width:860px;}
body.page-goods main.wrap{max-width:1040px;}

/* 新组件：统一页头 */
.ui-ph{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:16px 0 12px;}
.ui-ph.narrow{max-width:760px;margin:16px auto 12px;}
.ui-ph-t{font-size:22px;font-weight:900;letter-spacing:-.025em;color:var(--ui-ink);line-height:1.15;}
.ui-ph-s{font-size:12.5px;color:var(--ui-muted);margin-top:4px;line-height:1.4;}
.ui-ph-act{flex:0 0 auto;display:flex;gap:8px;}
html.dark .ui-ph-t{color:var(--ui-ink);}
html.dark .ui-ph-s{color:var(--ui-muted);}

/* 统一分区 */
.ui-sec{margin:16px 0 10px;}
.ui-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 2px 10px;}
.ui-sec-h b{font-size:15px;font-weight:850;color:var(--ui-ink);letter-spacing:-.01em;}
.ui-sec-h span{font-size:11.5px;color:var(--ui-muted-2);}
html.dark .ui-sec-h b{color:var(--ui-ink);}
html.dark .ui-sec-h span{color:var(--ui-muted-2);}

/* 新组件：钱包 / hero */
.ui-hero{
  position:relative;overflow:hidden;color:#fff;border-radius:20px;padding:18px;
  background:
    radial-gradient(520px 240px at 88% -30%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(135deg,#0b7a4b 0%,#075d3a 48%,#053f2a 100%);
  box-shadow:0 18px 40px -22px rgba(5,63,42,.75);
}
.ui-hero::after{
  content:"";position:absolute;right:-38px;bottom:-52px;width:190px;height:190px;border-radius:50%;
  background:rgba(255,255,255,.06);pointer-events:none;
}
.ui-hero .h-lbl{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.78;font-weight:750;}
.ui-hero .h-val{font-size:32px;font-weight:900;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums;}
.ui-hero .h-sub{font-size:11.5px;opacity:.82;margin-top:5px;}
.ui-hero .h-row{display:flex;align-items:center;gap:10px;position:relative;z-index:1;flex-wrap:wrap;}
.ui-hero .h-sp{flex:1;}
.ui-hero .h-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;height:38px;padding:0 15px;border-radius:999px;
  background:rgba(255,255,255,.16);color:#fff;font-size:12.5px;font-weight:800;text-decoration:none;
  border:1px solid rgba(255,255,255,.18);
}
.ui-hero .h-btn:hover{background:rgba(255,255,255,.24);}
.ui-hero .h-plus{
  width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.18);color:#fff;font-size:22px;font-weight:600;text-decoration:none;line-height:1;
}
.ui-hero .h-plus:hover{background:rgba(255,255,255,.26);}

/* 新组件：快捷入口 */
.ui-quick{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;background:var(--ui-surface);
  border:1px solid var(--ui-line);border-radius:var(--ui-r);padding:12px 8px;margin:10px 0 12px;
  box-shadow:var(--ui-shadow);
}
.ui-quick a{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ui-ink-2);min-width:0;}
.ui-quick a i{
  width:42px;height:42px;border-radius:14px;background:var(--ui-green-soft);display:flex;align-items:center;
  justify-content:center;font-size:20px;font-style:normal;
}
.ui-quick a span{font-size:11px;font-weight:750;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.ui-quick a:active i{transform:scale(.94);}
html.dark .ui-quick{background:var(--ui-surface);border-color:var(--ui-line);}
html.dark .ui-quick a{color:var(--ui-ink-2);}
html.dark .ui-quick a i{background:var(--ui-green-soft);}

/* 新组件：游戏卡网格 */
.ui-games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
@media (min-width:640px){.ui-games{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}}
.ui-game{
  position:relative;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;
  background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:16px;
  box-shadow:var(--ui-shadow);transition:transform .16s ease,box-shadow .16s ease;
}
.ui-game:hover{transform:translateY(-2px);box-shadow:var(--ui-shadow-lg);}
.ui-game:active{transform:scale(.985);}
.ui-game-art{
  position:relative;height:108px;display:flex;align-items:center;justify-content:center;font-size:42px;
  overflow:hidden;isolation:isolate;
}
.ui-game-art::before{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.3),transparent 55%);
}
.ui-game-art .ic{position:relative;z-index:1;filter:drop-shadow(0 5px 10px rgba(0,0,0,.28));}
.ui-game-art.g-dragon{background:linear-gradient(150deg,#ef4444,#7f1d1d);}
.ui-game-art.g-sicbo{background:linear-gradient(150deg,#16a34a,#064e3b);}
.ui-game-art.g-bj{background:linear-gradient(150deg,#3b82f6,#1e3a8a);}
.ui-game-art.g-bac{background:linear-gradient(150deg,#a855f7,#4c1d95);}
.ui-game-art .ui-rtp{
  position:absolute;z-index:2;top:8px;left:8px;padding:2px 7px;border-radius:6px;background:rgba(0,0,0,.28);
  color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.04em;backdrop-filter:blur(4px);
}
.ui-game-meta{padding:9px 11px 11px;}
.ui-game-meta b{display:block;font-size:13px;font-weight:850;color:var(--ui-ink);line-height:1.25;}
.ui-game-meta span{display:block;font-size:10.5px;color:var(--ui-muted-2);margin-top:3px;}
html.dark .ui-game{background:var(--ui-surface);border-color:var(--ui-line);}
html.dark .ui-game-meta b{color:var(--ui-ink);}
html.dark .ui-game-meta span{color:var(--ui-muted-2);}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:38px;padding:8px 14px;border-radius:12px;border:1px solid var(--ui-line);
  background:var(--ui-surface);color:var(--ui-ink-2);
  font-size:13px;font-weight:750;line-height:1.2;cursor:pointer;text-decoration:none;
  transition:background .15s,border-color .15s,transform .1s,filter .15s;
}
.btn:hover{background:var(--ui-surface-3);}
.btn:active{transform:scale(.98);}
.btn-primary{
  background:linear-gradient(135deg,#12b76a,#0b7a4b);color:#fff;border:none;
  box-shadow:0 10px 22px -14px rgba(11,122,75,.9);
}
.btn-primary:hover{filter:brightness(1.05);background:linear-gradient(135deg,#12b76a,#0b7a4b);}
.btn-gold{
  background:linear-gradient(135deg,#f2c14e,#d9a520);color:#3a2800;border:none;
  box-shadow:0 10px 22px -14px rgba(217,165,32,.9);
}
.btn-gold:hover{filter:brightness(1.04);background:linear-gradient(135deg,#f2c14e,#d9a520);}
.btn-dark{background:linear-gradient(135deg,#0b7a4b,#064e3b);color:#fff;border:none;}
.btn-outline{background:var(--ui-surface);border:1px solid var(--ui-line-strong);color:var(--ui-ink-2);}
.btn-points{background:var(--ui-green-soft);border-color:var(--ui-green-line);color:var(--ui-green-700);}
.btn-sm{min-height:31px;padding:5px 10px;border-radius:10px;font-size:12px;}
.btn-danger-sm{background:var(--ui-red-soft);border:1px solid #f3c4c5;color:#b42318;min-height:31px;padding:5px 10px;border-radius:10px;font-size:12px;font-weight:750;}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed;}
html.dark .btn{background:var(--ui-surface-2) !important;border:1px solid var(--ui-line-strong) !important;color:var(--ui-ink) !important;}
html.dark .btn:hover{background:#173324 !important;}
html.dark .btn-primary{background:linear-gradient(135deg,#2ee06f,#15803d) !important;border:none !important;color:#04150b !important;font-weight:900;}
html.dark .btn-gold{background:linear-gradient(135deg,#f7d774,#d9a520) !important;border:none !important;color:#241a00 !important;}
html.dark .btn-outline{background:transparent !important;border-color:var(--ui-line-strong) !important;color:var(--ui-ink) !important;}
html.dark .btn-points{background:#1a2117 !important;border-color:#3d3410 !important;color:var(--ui-gold) !important;}
html.dark .btn-danger-sm{background:#7f1d1d !important;border-color:#7f1d1d !important;color:#fecaca !important;}

/* ---------- 提示条 ---------- */
.flash{
  max-width:1180px;margin:10px auto 0;padding:11px 14px;border-radius:12px;font-size:13px;font-weight:600;
  border:1px solid transparent;
}
.flash-success{background:var(--ui-green-soft);color:#05603a;border-color:var(--ui-green-line);}
.flash-error{background:var(--ui-red-soft);color:#912018;border-color:#f3c4c5;}
html.dark .flash-success{background:#0d2a19 !important;color:#9ff0bc !important;border-color:#1e5a35 !important;}
html.dark .flash-error{background:#2d1114 !important;color:#fecaca !important;border-color:#6b2027 !important;}

/* ---------- 标签 ---------- */
.tag{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:999px;font-size:10.5px;font-weight:800;line-height:1.4;white-space:nowrap;}
.tag-green{background:var(--ui-green-soft);color:#05603a;}
.tag-yellow{background:var(--ui-gold-soft);color:#8a6100;}
.tag-red{background:var(--ui-red-soft);color:#b42318;}
.tag-blue{background:var(--ui-blue-soft);color:#1d4ed8;}
.tag-gray{background:var(--ui-surface-3);color:var(--ui-muted);}
html.dark .tag-green{background:#0d2a19 !important;color:#7ef0a8 !important;}
html.dark .tag-yellow{background:#2a2410 !important;color:#f0c14b !important;}
html.dark .tag-red{background:#2d1114 !important;color:#fca5a5 !important;}
html.dark .tag-blue{background:#0c2233 !important;color:#7dd3fc !important;}
html.dark .tag-gray{background:#16211a !important;color:#a9c6b6 !important;}

/* ---------- 表格 ---------- */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;}
th,td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--ui-line);vertical-align:middle;}
th{
  color:var(--ui-muted);font-weight:750;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--ui-surface-2);
}
th:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px;}
th:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px;}
td{color:var(--ui-ink-2);}
tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:rgba(15,157,99,.03);}
html.dark th{background:#12251a !important;color:#8fb3a0 !important;border-bottom:1px solid #1e3a2a !important;}
html.dark td{color:#d5e8dc !important;border-bottom:1px solid #14291c !important;}
html.dark tr:hover td{background:rgba(34,197,94,.04) !important;}
@media (max-width:560px){
  th,td{padding:9px 6px;}
  th{font-size:9.5px;}
  td{font-size:12px;}
}

/* ---------- 表单 ---------- */
.formbox{
  max-width:440px;margin:24px auto 18px;background:var(--ui-surface);
  padding:26px 22px;border-radius:22px;border:1px solid var(--ui-line);
  box-shadow:var(--ui-shadow-lg);
}
.formbox h1{font-size:23px;font-weight:900;letter-spacing:-.03em;margin:0 0 4px;color:var(--ui-ink);}
.formbox label{display:block;font-size:12.5px;font-weight:750;color:var(--ui-ink-2);margin:12px 0 6px;}
.hint{font-size:12.5px;color:var(--ui-muted);margin-top:14px;text-align:center;line-height:1.6;}
html:not(.dark) input[type=text],
html:not(.dark) input[type=email],
html:not(.dark) input[type=password],
html:not(.dark) input[type=number],
html:not(.dark) input[type=tel],
html:not(.dark) input[type=time],
html:not(.dark) input[type=datetime-local],
html:not(.dark) select,
html:not(.dark) textarea{
  background:#fff !important;
  border:1px solid var(--ui-line-strong) !important;
  border-radius:12px !important;
  color:var(--ui-ink) !important;
  padding:11px 12px !important;
  font-size:14px !important;
  font-family:var(--ui-font) !important;
  box-shadow:0 1px 2px rgba(16,24,40,.03);
  transition:border-color .15s,box-shadow .15s;
}
html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus{
  outline:none !important;
  border-color:var(--ui-green) !important;
  box-shadow:0 0 0 3px rgba(15,157,99,.14) !important;
}
html:not(.dark) .panel input[type=text],
html:not(.dark) .panel input[type=email],
html:not(.dark) .panel input[type=password],
html:not(.dark) .panel input[type=number],
html:not(.dark) .panel input[type=tel],
html:not(.dark) .panel select,
html:not(.dark) .panel textarea,
html:not(.dark) .formbox input[type=text],
html:not(.dark) .formbox input[type=email],
html:not(.dark) .formbox input[type=password],
html:not(.dark) .formbox input[type=number],
html:not(.dark) .formbox input[type=tel],
html:not(.dark) .formbox select,
html:not(.dark) .formbox textarea{width:100%;}
html:not(.dark) input[type=file]{
  background:var(--ui-surface-2) !important;border:1px dashed var(--ui-line-strong) !important;
  border-radius:12px !important;padding:10px !important;font-size:13px;width:100%;
}
html:not(.dark) input[type=checkbox]{width:16px;height:16px;accent-color:var(--ui-green);}
html:not(.dark) label{color:var(--ui-ink-2);}
html.dark input[type=email],html.dark input[type=password],html.dark input[type=text],
html.dark input[type=number],html.dark input[type=tel],html.dark input[type=time],
html.dark input[type=datetime-local],html.dark select,html.dark textarea{
  background:#0a1811 !important;border:1px solid #244632 !important;color:var(--ui-ink) !important;border-radius:12px;
}
html.dark input:focus,html.dark select:focus,html.dark textarea:focus{
  outline:none;border-color:var(--ui-green) !important;box-shadow:0 0 0 3px rgba(34,197,94,.15);
}
.pw-wrap{position:relative;}
.pw-wrap input[type=password]{width:100%;padding-right:44px !important;}
.pw-eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;
  font-size:16px;line-height:1;color:var(--ui-muted-2);padding:7px;z-index:2;
}
html.dark .pw-eye{color:#9aa3ad;}

/* 分段控件（登录/注册的 tab） */
.ui-seg{display:flex;background:var(--ui-surface-3);border-radius:13px;padding:3px;margin:2px 0 16px;gap:2px;}
.ui-seg button{
  flex:1;padding:9px 6px;border:none;background:transparent;border-radius:10px;font-size:13px;font-weight:700;
  color:var(--ui-muted);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;font-family:inherit;
}
.ui-seg button.on{background:var(--ui-surface);color:var(--ui-ink);box-shadow:0 1px 4px rgba(16,24,40,.12);}
html.dark .ui-seg{background:#0a1811;}
html.dark .ui-seg button{color:#9fb9a9;}
html.dark .ui-seg button.on{background:#173324;color:#e9f5ee;}

/* ---------- 折叠块 ---------- */
details.cp{
  background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-r);
  margin:0 0 10px;overflow:hidden;box-shadow:var(--ui-shadow);
}
details.cp>summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;
  padding:14px 16px;font-weight:800;font-size:14px;user-select:none;color:var(--ui-ink);
}
details.cp>summary::-webkit-details-marker{display:none;}
details.cp>summary h2{font-size:14px;margin:0;font-weight:800;}
details.cp>summary .arr{transition:transform .2s;color:var(--ui-muted-2);font-style:normal;font-size:13px;}
details.cp[open]>summary .arr{transform:rotate(180deg);color:var(--ui-green-600);}
details.cp[open]>summary{border-bottom:1px solid var(--ui-line);}
details.cp .cp-in{padding:14px 16px;}
details.cp .cp-in>.panel{margin:0;box-shadow:none;border-color:var(--ui-line);}
html.dark details.cp{background:var(--ui-surface) !important;border:1px solid var(--ui-line) !important;box-shadow:none !important;}
html.dark details.cp>summary{color:var(--ui-ink);}
html.dark details.cp[open]>summary{border-bottom-color:var(--ui-line);}
html.dark details.cp>summary .arr{color:var(--ui-green) !important;}

/* ---------- 进度条 ---------- */
.progress{height:8px;border-radius:999px;background:var(--ui-surface-3);overflow:hidden;}
.progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#12b76a,#0b7a4b);}
html.dark .progress{background:#12251a !important;}

/* ---------- 其他通用 ---------- */
.empty{text-align:center;color:var(--ui-muted-2);padding:24px 8px;font-size:13px;}
.code-box{
  background:var(--ui-surface-2);border:1px dashed var(--ui-line-strong);padding:11px 12px;border-radius:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;word-break:break-all;color:var(--ui-ink-2);
}
.mt10{margin-top:10px;}
.two-col{display:grid;grid-template-columns:1fr;gap:12px;}
@media (min-width:721px){.two-col{grid-template-columns:1fr 1fr;}}
.stat{background:var(--ui-surface-2);border:1px solid var(--ui-line);border-radius:14px;padding:12px 10px;text-align:center;}
.stat b{display:block;font-size:19px;font-weight:900;color:var(--ui-ink);line-height:1.2;}
.stat span{display:block;font-size:10.5px;color:var(--ui-muted);margin-top:3px;line-height:1.35;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
@media (min-width:640px){.stat-grid{grid-template-columns:repeat(4,1fr);}}

/* 旧商品卡（福利卡） */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0;}
.gcard{
  background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:16px;overflow:hidden;
  box-shadow:var(--ui-shadow);display:flex;flex-direction:column;min-width:0;
}
.gcard-img{height:132px;display:flex;align-items:center;justify-content:center;font-size:44px;background:linear-gradient(135deg,#eef7f1,#fff);overflow:hidden;}
.gcard-body{padding:10px 12px 12px;flex:1;display:flex;flex-direction:column;gap:6px;}
.gcard-body h3{font-size:13.5px;font-weight:800;line-height:1.35;color:var(--ui-ink);}
.gcard .meta{font-size:11px;color:var(--ui-muted);display:flex;justify-content:space-between;gap:6px;}
.gcard .price{color:var(--ui-gold);font-weight:900;font-size:15px;}
.gcard .act{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:2px;}
.gcard .act .btn{min-height:32px;padding:5px 12px;font-size:12px;}
html.dark .gcard{background:var(--ui-surface) !important;border:1px solid var(--ui-line);}
html.dark .gcard-img{background:linear-gradient(135deg,#12251a,#0a1811) !important;}
html.dark .gcard-body h3{color:var(--ui-ink);}
html.dark .gcard .meta{color:var(--ui-muted) !important;}
html.dark .gcard .price{color:var(--ui-gold) !important;}

/* 福利区：别再把卡片撑成一大块空白 */
.welfare-zone{overflow:hidden;}
.welfare-zone .grid{grid-template-columns:minmax(0,320px);justify-content:center;margin:0 auto;}
.welfare-zone .gcard{width:100%;}
.welfare-zone .gcard-img{height:150px;}
html.dark .welfare-zone .grid{width:auto !important;max-width:320px !important;margin:0 auto !important;}
html.dark .welfare-zone .gcard{width:100% !important;max-width:320px !important;}
html.dark .welfare-zone .gcard-img{height:150px !important;}

/* ---------- 首页（新结构） ---------- */
.ui-home{padding-top:12px;}
.ui-home .ui-hero{margin-bottom:10px;}
.ui-promo{
  display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:16px;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,#0b7a4b,#064e3b);box-shadow:0 14px 30px -20px rgba(6,78,59,.8);
  position:relative;overflow:hidden;margin:0 0 12px;
}
.ui-promo.gold{background:linear-gradient(135deg,#e8a020,#b45309);box-shadow:0 14px 30px -20px rgba(180,83,9,.8);}
.ui-promo.slate{background:linear-gradient(135deg,#64748b,#334155);box-shadow:0 14px 30px -20px rgba(51,65,85,.7);}
.ui-promo::after{content:"";position:absolute;right:-24px;top:-38px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.09);}
.ui-promo .p-ic{font-size:30px;line-height:1;position:relative;}
.ui-promo .p-tx{flex:1;min-width:0;position:relative;}
.ui-promo .p-tx b{display:block;font-size:14.5px;font-weight:900;line-height:1.3;}
.ui-promo .p-tx span{display:block;font-size:11px;opacity:.9;margin-top:3px;line-height:1.4;}
.ui-promo .p-cta{
  flex:0 0 auto;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.2);
  font-size:11.5px;font-weight:900;white-space:nowrap;position:relative;
}
.ui-trust{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;background:var(--ui-surface);border:1px solid var(--ui-line);
  border-radius:var(--ui-r);padding:14px;box-shadow:var(--ui-shadow);
}
.ui-trust div{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--ui-muted);line-height:1.45;min-width:0;}
.ui-trust b{display:block;color:var(--ui-ink);font-size:12.5px;font-weight:800;margin-bottom:1px;}
.ui-trust i{font-style:normal;font-size:17px;line-height:1;}
.ui-steps{display:grid;gap:8px;margin-top:12px;}
.ui-step{display:flex;gap:12px;align-items:flex-start;background:var(--ui-surface-2);border:1px solid var(--ui-line);border-radius:14px;padding:12px 13px;}
.ui-step .n{
  width:28px;height:28px;border-radius:50%;background:var(--ui-green-soft);color:var(--ui-green-700);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex:0 0 auto;
}
.ui-step b{display:block;font-size:13.5px;font-weight:800;color:var(--ui-ink);}
.ui-step span{display:block;font-size:11.5px;color:var(--ui-muted);margin-top:2px;line-height:1.45;}
.ui-notice{display:flex;align-items:center;gap:9px;padding:11px 14px;font-size:12.5px;color:var(--ui-ink-2);border-bottom:1px solid var(--ui-line);}
.ui-notice:last-child{border-bottom:none;}
.ui-notice i{font-style:normal;}

/* ---------- 个人中心 ---------- */
.ac-layout{display:block;}
.ac-side{min-width:0;}
.ac-main{min-width:0;}
.ac-main .two-col{grid-template-columns:1fr;}
@media (min-width:901px){
  .ac-layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px;align-items:start;margin-top:14px;}
  .ac-side{position:sticky;top:76px;}
  .ac-side .ac-head{margin-top:0;}
  .ac-side .ac-menu:last-child{margin-bottom:0;}
}
.ac-head{display:flex;align-items:center;gap:12px;margin:14px 0 12px;}
.ac-av{width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--ui-surface-3);display:flex;align-items:center;justify-content:center;font-size:25px;flex:0 0 auto;border:2px solid var(--ui-surface);box-shadow:0 4px 12px -6px rgba(16,24,40,.4);}
.ac-av img{width:100%;height:100%;object-fit:cover;}
.ac-who{flex:1;min-width:0;}
.ac-who b{display:block;font-size:17px;font-weight:900;color:var(--ui-ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ac-who span{display:block;font-size:11.5px;color:var(--ui-muted);margin-top:2px;}
.ac-exit{font-size:11.5px;font-weight:700;color:var(--ui-muted);text-decoration:none;border:1px solid var(--ui-line);border-radius:999px;padding:6px 12px;background:var(--ui-surface);}
.ac-exit:hover{color:var(--ui-red);border-color:#f3c4c5;background:var(--ui-red-soft);}
.ac-wallet{
  position:relative;overflow:hidden;color:#fff;border-radius:20px;padding:17px 17px 16px;
  background:radial-gradient(440px 200px at 90% -40%,rgba(255,255,255,.18),transparent 60%),
             linear-gradient(135deg,#0b7a4b 0%,#075d3a 55%,#053f2a 100%);
  box-shadow:0 18px 40px -22px rgba(5,63,42,.75);
}
.ac-wallet::after{content:"";position:absolute;right:-30px;bottom:-46px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.06);}
.ac-wallet-l{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.8;font-weight:750;position:relative;}
.ac-wallet-v{font-size:30px;font-weight:900;line-height:1.1;margin-top:4px;position:relative;font-variant-numeric:tabular-nums;}
.ac-wallet-s{font-size:11.5px;opacity:.85;margin-top:5px;position:relative;}
.ac-wallet-act{
  position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:12px;font-weight:800;
  padding:8px 14px;border-radius:999px;text-decoration:none;
}
.ac-wallet-act:hover{background:rgba(255,255,255,.26);}
.ac-quick{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;background:var(--ui-surface);border:1px solid var(--ui-line);
  border-radius:var(--ui-r);padding:12px 8px;margin:10px 0;box-shadow:var(--ui-shadow);
}
.ac-quick a{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ui-ink-2);min-width:0;}
.ac-quick i{width:42px;height:42px;border-radius:14px;background:var(--ui-green-soft);display:flex;align-items:center;justify-content:center;font-size:20px;font-style:normal;}
.ac-quick span{font-size:11px;font-weight:750;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.ac-menu{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-r);overflow:hidden;box-shadow:var(--ui-shadow);margin-bottom:12px;}
.ac-menu a{display:flex;align-items:center;gap:11px;padding:13px 15px;text-decoration:none;color:var(--ui-ink-2);border-bottom:1px solid var(--ui-line);font-size:13.5px;font-weight:650;min-height:48px;}
.ac-menu a:last-child{border-bottom:none;}
.ac-menu a:hover{background:var(--ui-surface-2);}
.ac-menu i{font-style:normal;font-size:17px;width:22px;text-align:center;flex:0 0 auto;}
.ac-menu b{margin-left:auto;color:var(--ui-muted-2);font-weight:400;font-size:17px;line-height:1;}
html.dark .ac-who b{color:var(--ui-ink);}
html.dark .ac-who span{color:var(--ui-muted);}
html.dark .ac-exit{background:var(--ui-surface);border-color:var(--ui-line);color:var(--ui-muted);}
html.dark .ac-quick,html.dark .ac-menu{background:var(--ui-surface);border-color:var(--ui-line);}
html.dark .ac-quick a,html.dark .ac-menu a{color:var(--ui-ink-2);}
html.dark .ac-quick i{background:var(--ui-green-soft);}
html.dark .ac-menu a{border-bottom-color:var(--ui-line);}

/* ---------- 消息 / 积分 / 列表 ---------- */
.ui-list{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-r);overflow:hidden;box-shadow:var(--ui-shadow);}
.ui-list-item{display:flex;align-items:center;gap:12px;padding:14px 15px;border-bottom:1px solid var(--ui-line);text-decoration:none;color:inherit;}
.ui-list-item:last-child{border-bottom:none;}
.ui-list-item:hover{background:var(--ui-surface-2);}
.ui-list-ic{width:38px;height:38px;border-radius:12px;background:var(--ui-green-soft);display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto;}
.ui-list-main{flex:1;min-width:0;}
.ui-list-main b{display:block;font-size:13.5px;font-weight:800;color:var(--ui-ink);}
.ui-list-main span{display:block;font-size:11.5px;color:var(--ui-muted);margin-top:2px;line-height:1.45;}
.ui-list-arrow{color:var(--ui-muted-2);font-size:18px;flex:0 0 auto;}

/* ---------- 客服聊天 ---------- */
.chatbox{
  height:min(58vh,420px);overflow-y:auto;display:flex;flex-direction:column;gap:8px;
  background:var(--ui-surface-2);border:1px solid var(--ui-line);border-radius:16px;padding:14px;
}
.chat-msg{max-width:82%;padding:9px 12px;border-radius:15px;font-size:13.5px;line-height:1.55;word-break:break-word;}
.chat-msg .meta{font-size:10px;opacity:.62;margin-top:4px;}
.chat-bot{align-self:flex-start;background:var(--ui-surface);border:1px solid var(--ui-line);border-bottom-left-radius:5px;color:var(--ui-ink-2);}
.chat-bot .who{font-size:10.5px;font-weight:800;color:var(--ui-green-600);margin-bottom:3px;}
.chat-me{align-self:flex-end;background:linear-gradient(135deg,#0b7a4b,#064e3b);color:#fff;border-bottom-right-radius:5px;}
.chat-me .meta{text-align:right;}
.chat-empty{text-align:center;color:var(--ui-muted-2);font-size:13px;margin:auto;line-height:1.6;}
.chat-form{display:flex;gap:8px;margin-top:10px;}
html:not(.dark) .chat-form input[type=text]{flex:1;border-radius:999px !important;padding:11px 16px !important;}
.chat-form .btn{border-radius:999px;padding-left:20px;padding-right:20px;}

/* ---------- 商品详情 ---------- */
.gdetail{margin:14px 0;}
.gdetail-img{
  background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-r);
  display:flex;align-items:center;justify-content:center;font-size:96px;height:280px;overflow:hidden;
  box-shadow:var(--ui-shadow);margin-bottom:12px;
}
.gdetail-info{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-r);padding:16px;box-shadow:var(--ui-shadow);}
.gdetail-info h1{font-size:20px;font-weight:900;margin:0 0 8px;color:var(--ui-ink);}
.gdetail .bar{background:var(--ui-surface-3);height:12px;border-radius:999px;overflow:hidden;margin:12px 0;}
.gdetail .bar i{display:block;height:100%;background:linear-gradient(90deg,#12b76a,#0b7a4b);}
.gdetail .nums{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12.5px;color:var(--ui-muted);margin-bottom:14px;}
.gdetail .nums span{background:var(--ui-surface-2);border:1px solid var(--ui-line);padding:9px 11px;border-radius:12px;}
.buybox{display:flex;gap:8px;align-items:center;margin-top:10px;}
.buybox input{width:84px;text-align:center;}
.buybox .btn{flex:1;height:46px;}
.quick{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;}
.quick button{padding:7px 14px;border-radius:10px;border:1px solid var(--ui-line-strong);background:var(--ui-surface);cursor:pointer;font-size:12.5px;font-weight:700;color:var(--ui-ink-2);}
@media (min-width:721px){
  .gdetail{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start;}
  .gdetail-img{height:340px;margin-bottom:0;}
  .gdetail .nums{grid-template-columns:repeat(2,1fr);}
}
html.dark .gdetail-img,html.dark .gdetail-info{background:var(--ui-surface) !important;border-color:var(--ui-line) !important;box-shadow:var(--ui-shadow) !important;}
html.dark .gdetail-info h1{color:var(--ui-ink);}
html.dark .gdetail .nums span{background:var(--ui-surface-2) !important;border-color:var(--ui-line);color:var(--ui-ink-2);}
html.dark .gdetail .bar{background:var(--ui-surface-2) !important;}
html.dark .buybox input{background:#0a1811 !important;border-color:#244632 !important;color:var(--ui-ink) !important;}
html.dark .quick button{background:#0a1811 !important;border-color:#244632 !important;color:var(--ui-ink-2) !important;}

/* 长文页（FAQ / Terms / Privacy） */
.legal{max-width:760px;margin:14px auto;}
.legal h2{font-size:20px;font-weight:900;margin:0 0 10px;}
.legal h3{font-size:14.5px;font-weight:850;color:var(--ui-ink);margin:18px 0 6px;}
.legal p{font-size:13px;color:var(--ui-ink-2);line-height:1.75;margin:0 0 8px;}
.legal ul,.legal ol{margin:0 0 10px 18px;font-size:13px;color:var(--ui-ink-2);line-height:1.75;}
.legal .muted{color:var(--ui-muted);font-size:11.5px;}

/* ---------- 弹层（规则 / 首充） ---------- */
#ngRulesBox{
  border-radius:20px !important;border:1px solid var(--ui-line);
  box-shadow:var(--ui-shadow-lg) !important;
}
#ngRulesTitle{color:var(--ui-ink) !important;}
#ngRulesBody{color:var(--ui-ink-2) !important;}
.ngfd-mask{backdrop-filter:blur(4px);}
.ngfd-card{
  border-radius:22px !important;border:1px solid rgba(255,255,255,.6);
  box-shadow:0 30px 80px -20px rgba(6,20,12,.65) !important;
}
.ngfd-top{background:radial-gradient(400px 180px at 80% -40%,rgba(255,255,255,.2),transparent 60%),linear-gradient(135deg,#0b7a4b,#064e3b) !important;}
.ngfd-x{background:rgba(0,0,0,.22) !important;backdrop-filter:blur(6px);}
.ngfd-cta{background:linear-gradient(135deg,#12b76a,#0b7a4b) !important;border-radius:13px !important;letter-spacing:.04em;}
.ngfd-amount{border-radius:14px !important;}
.ngfd-body{padding-bottom:20px !important;}

/* 中奖横幅：改成底部浮起的小卡，不再压住顶栏 */
#winbanner{
  top:auto !important;bottom:76px !important;left:50% !important;right:auto !important;
  transform:translateX(-50%) !important;
  width:calc(100% - 24px) !important;max-width:520px !important;
  background:linear-gradient(135deg,#0b7a4b,#064e3b) !important;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px !important;padding:12px 14px !important;
  font-size:13px !important;font-weight:750 !important;text-align:left !important;
  box-shadow:0 18px 44px -18px rgba(6,20,12,.7) !important;
  animation:none !important;
}
#winbanner #winbanner-text{display:inline;}
#winbanner #winbanner-link{display:inline-block;margin-left:6px !important;font-size:12px !important;color:#ffe08a !important;}
html.dark #winbanner{bottom:72px !important;}
@media (min-width:901px){#winbanner{bottom:24px !important;}}

/* 音乐按钮 */
#bgmBtn{
  left:12px !important;right:auto !important;bottom:78px !important;width:40px !important;height:40px !important;
  font-size:17px !important;background:var(--ui-surface) !important;color:var(--ui-green-600) !important;
  border:1px solid var(--ui-line) !important;box-shadow:0 8px 20px -12px rgba(16,24,40,.5) !important;
  opacity:.92;
}
#bgmBtn:hover{opacity:1;}
html.dark #bgmBtn{left:12px !important;right:auto !important;bottom:76px !important;background:#12251a !important;color:#f0c14b !important;border-color:#2a5240 !important;}
@media (min-width:901px){#bgmBtn{left:auto !important;right:20px !important;bottom:20px !important;}}

/* 页内小标题（老页面里的 h2 卡头） */
.panel > h2:first-child{display:flex;align-items:center;gap:7px;}

/* 深色游戏页：把「浅色页专用」的深灰内联字提亮 */
html.dark [style*="color:#374151"],
html.dark [style*="color: #374151"],
html.dark [style*="color:#1f2937"],
html.dark [style*="color:#111827"]{color:#d5e8dc !important;}
html.dark [style*="border-bottom:1px solid #eef1f4"]{border-bottom-color:#1e3a2a !important;}
html.dark [style*="background:#f8f9fa"],
html.dark [style*="background: #f8f9fa"]{background:#12251a !important;}

/* 老页面内联色值归一（浅色页面） */
html:not(.dark) [style*="color:#1a73e8"],
html:not(.dark) [style*="color: #1a73e8"],
html:not(.dark) [style*="color:#2563eb"],
html:not(.dark) [style*="color: #2563eb"]{color:var(--ui-green-600) !important;}
html:not(.dark) [style*="background:#f1f5fe"],
html:not(.dark) [style*="background: #f1f5fe"],
html:not(.dark) [style*="background:#eef4ff"],
html:not(.dark) [style*="background: #eef4ff"]{background:var(--ui-green-soft) !important;}
html:not(.dark) [style*="background:#f8f9fa"],
html:not(.dark) [style*="background: #f8f9fa"],
html:not(.dark) [style*="background:#fafbfc"],
html:not(.dark) [style*="background: #fafbfc"]{background:var(--ui-surface-2) !important;}
html:not(.dark) [style*="border:1px solid #ccc"],
html:not(.dark) [style*="border:1px solid #eee"],
html:not(.dark) [style*="border:1px solid #ddd"],
html:not(.dark) [style*="border:1px solid #1a73e8"],
html:not(.dark) [style*="border:1px solid #d4e0f7"],
html:not(.dark) [style*="border:1px solid #cddffb"]{border-color:var(--ui-line) !important;}
html:not(.dark) [style*="border:1px dashed #1a73e8"],
html:not(.dark) [style*="border:1px dashed #16a34a"]{border-color:var(--ui-green-line) !important;}
html:not(.dark) [style*="border-radius:6px"]{border-radius:12px !important;}
html:not(.dark) [style*="border-radius:8px"]{border-radius:12px !important;}
html:not(.dark) [style*="background:#fff3cd"],
html:not(.dark) [style*="background: #fff3cd"]{background:var(--ui-gold-soft) !important;border-color:#f0dfae !important;}
html:not(.dark) [style*="background:#fff5f5"],
html:not(.dark) [style*="background: #fff5f5"],
html:not(.dark) [style*="background:#fff0f0"]{background:var(--ui-red-soft) !important;}
html:not(.dark) [style*="background:#f0fff4"],
html:not(.dark) [style*="background: #f0fff4"],
html:not(.dark) [style*="background:#f0fdf4"],
html:not(.dark) [style*="background:#e8f5e9"]{background:var(--ui-green-soft) !important;}

/* 手机：内容区两侧留白统一 */
@media (max-width:720px){
  .wrap{padding-left:14px;padding-right:14px;}
  .panel{padding:14px;border-radius:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .ui-ph{margin:14px 0 10px;}
  .ui-ph-t{font-size:20px;}
  .formbox{margin:14px auto;padding:22px 18px;border-radius:20px;}
  .footer{padding-left:14px;padding-right:14px;}
}