/* ===== 9jaWin — mobile-first ===== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { font-family:'Segoe UI',-apple-system,Arial,sans-serif; background:#f5f7fa; color:#222; }
.wrap { max-width:1100px; margin:0 auto; padding:0 12px; }
a { text-decoration:none; color:#1a73e8; }
img { max-width:100%; }

/* ---------- 顶部 ---------- */
.topbar { background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.08); position:sticky; top:0; z-index:90; }
/* ⚠️ 高度用 min-height + flex-wrap:wrap：桌面导航（Home/Dragon Tiger/Sic Bo/Check-in/Recharge
   + 余额/头像/Logout）在 721~900px 这一段塞不下，原来 height:52px 固定高度会导致**横向溢出**
   （量过：730px 视口文档宽 867px，userbox 被推到栏外）。允许换行后，挤的时候折成第二行，宽屏还是一行。 */
.topbar-in { display:flex; align-items:center; gap:12px; min-height:52px; flex-wrap:wrap; }
.logo { font-weight:800; font-size:18px; color:#222; background:linear-gradient(135deg,#1a73e8,#e8a020); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.nav { display:flex; gap:12px; flex:1; }
.nav a { color:#444; font-size:14px; font-weight:500; }
.nav a:hover { color:#1a73e8; }
.userbox { display:flex; gap:6px; align-items:center; }
.btn { display:inline-block; padding:8px 14px; border-radius:8px; font-size:14px; background:#f0f2f5; color:#333; border:none; cursor:pointer; font-weight:600; }
.btn:hover { background:#e4e7eb; }
.btn-primary { background:linear-gradient(135deg,#1a73e8,#0d5bbd); color:#fff; }
.btn-primary:hover { filter:brightness(1.1); }
.btn-gold { background:linear-gradient(135deg,#f5b732,#e8a020); color:#fff; }
.btn-gold:hover { filter:brightness(1.05); }
.btn-outline { background:#fff; border:1px solid #d0d5dd; }
.btn-points { background:#fff8e1; color:#b8860b; border:1px solid #f0e0a8; }
.btn-sm { padding:5px 10px; font-size:13px; border-radius:6px; }
.btn-danger-sm { background:#dc3545; color:#fff; padding:4px 9px; border-radius:6px; font-size:12px; }

.flash { max-width:1100px; margin:10px auto 0; padding:10px 14px; border-radius:8px; font-size:14px; }
.flash-success { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
.flash-error { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }

/* ---------- 获奖者滚动条（跑马灯） ---------- */
.win-ticker { background:linear-gradient(90deg,#1a73e8,#6f42c1); color:#fff; border-radius:10px; overflow:hidden; margin:10px 0 0; padding:8px 0; white-space:nowrap; }
.win-ticker-track { display:inline-block; animation:win-scroll 30s linear infinite; }
.win-ticker:hover .win-ticker-track { animation-play-state:paused; }
.win-ticker-item { font-size:13px; margin-right:36px; }
.win-ticker-item b { color:#ffd700; }
@keyframes win-scroll { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

/* ---------- 轮播 ---------- */
.hero { margin:12px 0; border-radius:14px; overflow:hidden; background:linear-gradient(135deg,#1a73e8,#6f42c1); color:#fff; padding:24px 20px; position:relative; }
.hero h1 { font-size:24px; margin-bottom:6px; font-weight:800; }
.hero p { opacity:.92; font-size:14px; }

/* ---------- 分类导航 ---------- */
.catnav { display:flex; gap:8px; overflow-x:auto; padding:12px 2px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.catnav::-webkit-scrollbar { display:none; }
.catnav a { flex-shrink:0; padding:8px 16px; border-radius:20px; background:#fff; color:#555; font-size:13px; font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.catnav a.active, .catnav a:hover { background:linear-gradient(135deg,#1a73e8,#0d5bbd); color:#fff; }

/* ---------- 商品网格（手机 2 列） ---------- */
/* 商品网格：flex 居中 —— 卡片不管几张都居中，最后一排不满也居中 */
.grid { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:stretch; margin:10px 0 70px; }
.grid > .gcard { flex:1 1 calc(50% - 5px); max-width:260px; min-width:0; }
.gcard { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.07); display:flex; flex-direction:column; transition:transform .15s; }
.gcard:active { transform:scale(.97); }
.gcard-img { height:110px; display:flex; align-items:center; justify-content:center; font-size:44px; background:linear-gradient(135deg,#eef4ff,#fff); overflow:hidden; }
.gcard-body { padding:10px 12px 12px; flex:1; display:flex; flex-direction:column; gap:6px; }
.gcard-body h3 { font-size:14px; font-weight:700; line-height:1.35; }
.gcard .progress { background:#e9ecef; height:7px; border-radius:4px; overflow:hidden; }
.gcard .progress i { display:block; height:100%; background:linear-gradient(90deg,#28a745,#8bc34a); border-radius:4px; }
.gcard .meta { font-size:11.5px; color:#777; display:flex; justify-content:space-between; }
.gcard .act { display:flex; justify-content:space-between; align-items:center; margin-top:2px; }
.gcard .price { color:#e8a020; font-weight:800; font-size:15px; }
.gcard .btn { padding:7px 14px; font-size:13px; }

/* ---------- 揭晓区 ---------- */
.win-strip { display:flex; gap:8px; overflow-x:auto; padding:4px 0 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.win-strip::-webkit-scrollbar { display:none; }
.win-chip { flex-shrink:0; background:#fff; border-radius:10px; padding:8px 12px; box-shadow:0 1px 4px rgba(0,0,0,.06); font-size:12px; min-width:130px; }
.win-chip b { color:#e8a020; }

/* ---------- 底部导航 ---------- */
/* 手机上必须始终钉在视口底部。translateZ(0) 建独立合成层 —— 安卓各家浏览器
   （UC / QQ / 小米自带）滚动时 fixed 元素会抖动甚至被甩出视口，加了这个就不会跟着页面跑。 */
.bottomnav { position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid #eee; display:flex; z-index:9000; padding-bottom:env(safe-area-inset-bottom); -webkit-transform:translateZ(0); transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.bottomnav a { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 0 6px; font-size:11px; color:#888; font-weight:600; }
.bottomnav a.active { color:#1a73e8; }
.bottomnav a i { font-size:20px; font-style:normal; }

/* ---------- 顶栏彩金徽章（💰 金额旁边那个 🎁）---------- */
.bonus-badge { font-size:10.5px; font-weight:800; padding:2px 6px; border-radius:8px; white-space:nowrap; }
.uname { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- 商品详情 ---------- */
.gdetail { margin:12px 0 70px; }
.gdetail-img { background:#fff; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:100px; height:280px; box-shadow:0 2px 8px rgba(0,0,0,.07); overflow:hidden; }
.gdetail-info { background:#fff; border-radius:14px; padding:16px; box-shadow:0 2px 8px rgba(0,0,0,.07); margin-top:12px; }
.gdetail-info h1 { font-size:18px; margin-bottom:8px; font-weight:800; }
.gdetail .bar { background:#e9ecef; height:14px; border-radius:7px; overflow:hidden; margin:12px 0; }
.gdetail .bar i { display:block; height:100%; background:linear-gradient(90deg,#28a745,#8bc34a); }
.gdetail .nums { display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:13px; color:#555; margin-bottom:14px; }
.gdetail .nums span { background:#f8f9fa; padding:8px 10px; border-radius:8px; }
.buybox { display:flex; gap:8px; align-items:center; margin-top:8px; }
.buybox input { width:80px; padding:11px; border:1px solid #d0d5dd; border-radius:10px; font-size:16px; text-align:center; }
.buybox .btn { flex:1; padding:12px; font-size:15px; border-radius:10px; }
.quick { margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }
.quick button { padding:7px 14px; border-radius:8px; border:1px solid #d0d5dd; background:#fff; cursor:pointer; font-size:13px; font-weight:600; }

/* ---------- 面板/表格 ---------- */
.panel { background:#fff; border-radius:14px; padding:14px 16px; box-shadow:0 2px 8px rgba(0,0,0,.06); margin:12px 0; }
.panel h2 { font-size:16px; margin-bottom:10px; font-weight:800; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { padding:9px 8px; text-align:left; border-bottom:1px solid #f0f0f0; }
th { color:#888; font-weight:600; background:#fafbfc; font-size:12px; }
.tag { display:inline-block; padding:3px 8px; border-radius:6px; font-size:11.5px; font-weight:600; }
.tag-green { background:#d4edda; color:#155724; }
.tag-yellow { background:#fff3cd; color:#856404; }
.tag-red { background:#f8d7da; color:#721c24; }
.tag-blue { background:#d1ecf1; color:#0c5460; }
.tag-gray { background:#e9ecef; color:#495057; }

/* ---------- 表单 ---------- */
.formbox { max-width:420px; margin:30px auto; background:#fff; padding:26px 22px; border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,.08); }
.formbox h1 { font-size:20px; margin-bottom:16px; font-weight:800; }
.formbox label { display:block; font-size:14px; color:#555; margin:10px 0 4px; }
.formbox input[type=email], .formbox input[type=password], .formbox input[type=text], .formbox input[type=number], .formbox select, .formbox textarea {
  width:100%; padding:12px; border:1px solid #d0d5dd; border-radius:10px; font-size:15px; }
.formbox .btn { width:100%; margin-top:16px; font-size:15px; padding:13px; border-radius:10px; }
.hint { font-size:13px; color:#777; margin-top:10px; text-align:center; }

/* ---------- 杂项 ---------- */
.footer { text-align:center; color:#999; font-size:12px; padding:24px 0 80px; }
.empty { text-align:center; color:#999; padding:26px 0; }
.code-box { background:#f8f9fa; border:1px dashed #ccc; padding:10px; border-radius:8px; font-family:monospace; font-size:14px; word-break:break-all; }
.mt10 { margin-top:10px; }
.two-col { display:grid; grid-template-columns:1fr; gap:12px; }
.avatar-sm { width:26px; height:26px; border-radius:50%; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; background:#e8e8e8; font-size:14px; vertical-align:middle; }
.avatar-sm img { width:100%; height:100%; object-fit:cover; }

/* ---------- 手机默认隐藏桌面导航 ---------- */
.nav { display:none; }
.userbox .btn { padding:6px 10px; font-size:13px; }
.userbox .btn-outline { display:none; }

/* ---------- 手机：顶栏下面单起一行放游戏入口（🐉 Dragon Tiger / 🎲 Sic Bo）----------
   桌面端 .nav 是顶栏里的横排链接；手机端挤不下，就整行落到顶栏第二行当大按钮用。
   只有标了 .pc-only 的（Home / Recharge）手机上不显示。 */
@media (max-width:720px) {
  /* 🔴 2026-09-23 修：原来这里给 .nav 设了 `flex:0 0 100%; order:9`（整行落到顶栏第二行），
     而下面那条 `@media (max-width:720px)` 又把 .topbar-in 的高度写死成 48px ——
     两条规则一起生效的结果是：游戏链接那行**溢出顶栏 34px、压住下面的页面内容 24px**
     （量过：顶栏 bottom=48，链接行 47~82，内容块 top=58）。
     老大原话「为什么龙虎斗和 sic bo 不在顶部，我想的是放在金额、白天那一栏」
     → 改成留在第一行、跟金额/白天同排（DOM 顺序在 .userbox 之前，所以 order 必须是 0）。
     手机上只留图标（🐉 / 🎲），文字用 .nav-txt 包住在手机端隐藏。 */
  .topbar-in { flex-wrap:wrap; height:auto; min-height:48px; align-items:center; gap:4px; padding-bottom:0; }
  .userbox { margin-left:auto; }
  .nav {
    display:flex; flex:0 0 auto; order:0;
    gap:5px; margin:0; overflow:visible;
  }
  .nav a.pc-only { display:none; }
  .nav-txt { display:none; }
  /* 2026-09-23 加了第三个图标（日历=签到）后，7px 9px 的内边距在 360px 下放不下了
     （返回 + logo + 3 个图标 + 余额/彩金/主题 正好超几像素）→ 收到 5px 7px，图标仍看得清。 */
  .nav a {
    flex:0 0 auto; text-align:center; white-space:nowrap;
    padding:5px 6px; border-radius:9px; font-size:15px; line-height:1.1; font-weight:800;
    background:#eef1f4; color:#374151;
  }
  .nav a:active { background:#e2e6ea; }
  html.dark .nav a { background:#242a33; color:#c8cfd8; }
  html.dark .nav a:active { background:#2e3540; }
  /* 头像按钮手机上藏掉：它指向个人中心，而底栏「Me」和上面的💰余额按钮都能进，不占地方 */
  .topbar-avatar { display:none !important; }
}

/* ---------- PC 增强 ---------- */
@media (min-width:721px) {
  .nav { display:flex; }
  .userbox .btn { padding:8px 14px; font-size:14px; }
  .userbox .btn-outline { display:inline-block; }
  .grid { gap:16px; margin:18px 0 60px; }
  .grid > .gcard { flex-basis:calc(33.333% - 11px); max-width:300px; }
  .gcard-img { height:150px; }
  .gcard-body h3 { font-size:15px; }
  .gdetail { display:grid; grid-template-columns:340px 1fr; gap:16px; }
  .gdetail-img { height:340px; }
  .gdetail .nums { grid-template-columns:repeat(4,1fr); }
  .two-col { grid-template-columns:1fr 1fr; }
  .footer { padding-bottom:30px; }
  .hero h1 { font-size:30px; }
}

/* 👁 密码显示切换 */
.pw-wrap{position:relative;}
.pw-wrap input[type=password]{width:100%;padding-right:44px!important;}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:17px;line-height:1;color:#888;padding:6px;z-index:2;}

/* ================= 🌙 夜间柔光主题 ================= */
html.dark body{background:#12151a;color:#e4e7eb;}
html.dark .topbar{background:#1a1e25;box-shadow:0 1px 6px rgba(0,0,0,.4);}
html.dark .logo{color:#e4e7eb;}
html.dark .nav a{color:#b9c0c9;}
html.dark .nav a:hover{color:#5b9bf0;}
html.dark .btn{background:#252a33;color:#d8dce1;}
html.dark .btn:hover{background:#2e343e;}
html.dark .btn-outline{background:#1e232b;border-color:#3a414c;color:#d8dce1;}
html.dark .btn-points{background:#2b2616;color:#f0c14b;border-color:#4a3f1d;}
html.dark .flash-success{background:#14301c;color:#9fdcae;border-color:#1e4a2c;}
html.dark .flash-error{background:#3a1a1e;color:#f1aeb5;border-color:#5c2a30;}
html.dark .catnav a{background:#1e232b;color:#b9c0c9;box-shadow:none;border:1px solid #2a2f38;}
html.dark .gcard{background:#1b1f26;box-shadow:0 2px 8px rgba(0,0,0,.45);}
html.dark .gcard-img{background:linear-gradient(135deg,#1f242d,#181c22);}
html.dark .gcard .progress{background:#2a2f38;}
html.dark .gcard .meta{color:#9aa3ad;}
html.dark .win-chip{background:#1b1f26;box-shadow:none;border:1px solid #2a2f38;}
html.dark .bottomnav{background:#1a1e25;border-top-color:#2a2f38;}
html.dark .bottomnav a{color:#8b939d;}
html.dark .bottomnav a.active{color:#5b9bf0;}
html.dark .gdetail-img,html.dark .gdetail-info{background:#1b1f26;box-shadow:none;border:1px solid #2a2f38;}
html.dark .gdetail .bar{background:#2a2f38;}
html.dark .gdetail .nums{color:#b9c0c9;}
html.dark .gdetail .nums span{background:#22272f;}
html.dark .buybox input{background:#1e232b;border-color:#3a414c;color:#e4e7eb;}
html.dark .quick button{background:#1e232b;border-color:#3a414c;color:#d8dce1;}
html.dark .panel{background:#1b1f26;box-shadow:0 2px 8px rgba(0,0,0,.35);}
html.dark th,html.dark td{border-bottom-color:#262b34;}
html.dark th{background:#20252d;color:#9aa3ad;}
html.dark .formbox{background:#1b1f26;box-shadow:0 2px 12px rgba(0,0,0,.45);}
html.dark .formbox label{color:#b9c0c9;}
html.dark input[type=email],html.dark input[type=password],html.dark input[type=text],
html.dark input[type=number],html.dark input[type=time],html.dark input[type=datetime-local],
html.dark select,html.dark textarea{background:#1e232b;border-color:#3a414c;color:#e4e7eb;}
html.dark .code-box{background:#22272f;border-color:#3a414c;color:#cfd5dc;}
html.dark .hint,html.dark .footer,html.dark .empty{color:#8b939d;}
html.dark details.cp{background:#1b1f26;box-shadow:none;border:1px solid #2a2f38;}
html.dark details.cp>summary .arr{color:#5b9bf0;}
html.dark .avatar-sm{background:#2a2f38;}
html.dark .pw-eye{color:#9aa3ad;}
/* 常见内联浅色底兜底（站点内联样式较多） */
html.dark [style*="background:#fff"],html.dark [style*="background: #fff"],
html.dark [style*="background:#ffffff"],html.dark [style*="background:white"],
html.dark [style*="background:#f8f9fa"],html.dark [style*="background: #f8f9fa"],
html.dark [style*="background:#fafbfc"],html.dark [style*="background:#f7f9fc"],
html.dark [style*="background:#f1f3f5"],html.dark [style*="background:#eef4ff"],
html.dark [style*="background:#f5f7fa"],html.dark [style*="background:#f0f2f5"]{
  background:#22272f !important;
}
html.dark [style*="background:#e9ecef"],html.dark [style*="background:#e8e8e8"]{background:#2a2f38 !important;}
html.dark [style*="background:#f1f5fe"]{background:#1e2a3d !important;}
html.dark [style*="background:#e9f0ff"]{background:#232a36 !important;}
html.dark [style*="color:#222"],html.dark [style*="color:#333"]{color:#e4e7eb !important;}
html.dark [style*="color:#555"],html.dark [style*="color:#666"]{color:#b9c0c9 !important;}
html.dark [style*="color:#777"],html.dark [style*="color:#888"],html.dark [style*="color:#999"]{color:#9aa3ad !important;}
/* 平滑过渡 */
body,.topbar,.panel,.gcard,.formbox,.bottomnav,details.cp,.gdetail-info,.gdetail-img,table th,table td{transition:background .25s ease,color .25s ease,border-color .25s ease;}

/* ================= ☀️ 日间绿色主题（覆盖默认蓝色系） ================= */
html:not(.dark) body{background:#eef7f0;color:#1d2b22;}
html:not(.dark) .topbar{background:#ffffff;box-shadow:0 1px 6px rgba(21,128,61,.12);}
html:not(.dark) .btn-primary{background:linear-gradient(135deg,#22c55e,#15803d);}
html:not(.dark) .hero{background:linear-gradient(135deg,#16a34a,#065f46);}
html:not(.dark) .catnav a.active,html:not(.dark) .catnav a:hover{background:linear-gradient(135deg,#22c55e,#15803d);}
html:not(.dark) .nav a:hover{color:#16a34a;}
html:not(.dark) .bottomnav a.active{color:#16a34a;}
html:not(.dark) details.cp>summary .arr{color:#16a34a;}
html:not(.dark) .win-ticker{background:linear-gradient(90deg,#16a34a,#065f46);}
html:not(.dark) [style*="color:#1a73e8"]{color:#15803d !important;}
html:not(.dark) [style*="background:#f1f5fe"]{background:#e8f7ee !important;}
html:not(.dark) [style*="background:#fff8e1"]{background:#eaf7ee !important;}

/* ================= 🌙 夜间纯黑主题（覆盖前面的灰色版） ================= */
html.dark body{background:#08090b;color:#e6e8ea;}
html.dark .topbar,html.dark .bottomnav{background:#101114;border-color:#1e2025;}
html.dark .panel,html.dark .gcard,html.dark details.cp,html.dark .gdetail-img,html.dark .gdetail-info,
html.dark .formbox,html.dark .win-chip{background:#131519;border-color:#202329;}
html.dark .gcard-img{background:linear-gradient(135deg,#17191d,#101215);}
html.dark .catnav a{background:#16181c;border-color:#202329;color:#b9c0c9;}
html.dark .btn{background:#1c1f24;color:#d8dce1;}
html.dark .btn:hover{background:#24282e;}
html.dark .btn-outline{background:#16181c;border-color:#2a2e35;color:#d8dce1;}
html.dark .hero{background:linear-gradient(135deg,#134e2a,#04160c);}
html.dark .btn-primary{background:linear-gradient(135deg,#16a34a,#065f46);}
html.dark .catnav a.active,html.dark .catnav a:hover{background:linear-gradient(135deg,#16a34a,#065f46);color:#fff;}
html.dark .nav a:hover,html.dark .bottomnav a.active,html.dark details.cp>summary .arr{color:#22c55e;}
html.dark .win-ticker{background:linear-gradient(90deg,#14532d,#04160c);}
html.dark [style*="color:#1a73e8"]{color:#22c55e !important;}
html.dark [style*="background:#f1f5fe"]{background:#111f16 !important;}
html.dark [style*="background:#fff8e1"]{background:#1a2117 !important;}
html.dark .gdetail .nums span{background:#191c21;}
html.dark .code-box{background:#191c21;border-color:#2a2e35;}
html.dark input[type=email],html.dark input[type=password],html.dark input[type=text],
html.dark input[type=number],html.dark input[type=time],html.dark input[type=datetime-local],
html.dark select,html.dark textarea{background:#16181c;border-color:#2a2e35;color:#e6e8ea;}
html.dark .buybox input{background:#16181c;border-color:#2a2e35;}
html.dark .quick button{background:#16181c;border-color:#2a2e35;}
html.dark th{background:#17191d;}
html.dark th,html.dark td{border-bottom-color:#1c1f24;}
html.dark .gcard .progress,html.dark .gdetail .bar{background:#202329;}
html.dark [style*="background:#fff"],html.dark [style*="background: #fff"],
html.dark [style*="background:#ffffff"],html.dark [style*="background:white"],
html.dark [style*="background:#f8f9fa"],html.dark [style*="background: #f8f9fa"],
html.dark [style*="background:#fafbfc"],html.dark [style*="background:#f7f9fc"],
html.dark [style*="background:#f1f3f5"],html.dark [style*="background:#eef4ff"],
html.dark [style*="background:#f5f7fa"],html.dark [style*="background:#f0f2f5"]{
  background:#191c21 !important;
}
html.dark [style*="background:#e9ecef"],html.dark [style*="background:#e8e8e8"]{background:#202329 !important;}
html.dark [style*="background:#e9f0ff"]{background:#1a222c !important;}

/* 小屏隐藏 logo 文字（给返回按钮腾空间） */
@media (max-width:560px){ .logo-txt{display:none;} }
/* 返回按钮 */
.topbar-in>button.btn{padding:8px 12px;flex-shrink:0;}

/* ============ 🌙 暗色模式补充：内联浅色底兜底（漏网的几个）============
   页面里很多盒子用内联 style 写死浅色背景，暗色模式下文字变浅就会「白字白底」看不清。
   下面把前面兜底列表里没收录的浅色值补上。 */
html.dark [style*="background:#f5f9ff"],
html.dark [style*="background:#f5f8ff"],
html.dark [style*="background:#eff6ff"],
html.dark [style*="background:#fff3cd"],
html.dark [style*="background:#f0fff4"],
html.dark [style*="background:#f0fdf4"],
html.dark [style*="background:#e8f5e9"],
html.dark [style*="background:#eef7f0"],
html.dark [style*="background:#f8fbff"],
html.dark [style*="background:#f9fafb"],
html.dark [style*="background:#fbfbfd"],
html.dark [style*="background:#fffdf5"],
html.dark [style*="background:#fff5f5"],
html.dark [style*="background:#fff0f0"]{
  background:#171a1f !important;
}
/* 这些浅色底原本配的是深色/警示色文字，底色变深后要把字提亮 */
html.dark [style*="color:#856404"]{color:#e8c45c !important;}
html.dark [style*="color:#b8860b"]{color:#e8b64c !important;}
html.dark [style*="color:#8a6100"]{color:#e8b64c !important;}
html.dark [style*="color:#128c4b"]{color:#5ed68f !important;}
html.dark [style*="color:#155724"]{color:#5ed68f !important;}
html.dark [style*="color:#0a58ca"]{color:#6ea8fe !important;}

/* ================= 📱 手机端顶栏收紧 ================= */
/* 登录后顶栏要塞下：返回 / Logo / 主题 / 购物车 / 铃铛 / 余额+彩金 / 头像 / 用户名，
   手机上会挤成一团。这里做三件事：
   ① 底栏已经有的入口（购物车 / 收件箱）顶栏不再重复显示
   ② 用户名只留头像 —— 邮箱形式的用户名几十个字符，会把顶栏撑爆
   ③ 彩金徽章压小一号
   （页面底部留白由 .footer 的 padding-bottom:80px 负责，不会被固定底栏挡住内容） */
@media (max-width:720px) {
  /* ⚠️ 这里原来还有 `height:48px` —— 它覆盖掉上面那条的 height:auto，
     是「游戏链接行溢出顶栏压住内容」的直接原因。高度交给 min-height + 内容撑，别再写死。 */
  .topbar-in { gap:5px; }
  .topbar-dup { display:none !important; }
  .uname { display:none !important; }
  .bonus-badge { font-size:9.5px; padding:1px 4px; border-radius:6px; }
  .userbox { gap:4px; }
  .userbox .btn { padding:5px 7px; font-size:12.5px; }
}

/* 窄屏（≤380px，覆盖 360 / 375 这两个最主流的安卓宽度）：
   实测顶栏一行需要 355px 而只有 345px（← 40 + logo 22 + 3 个图标 105 + 余额彩金主题 149 + 间距内边距）
   → 差 10px。把站点 logo 图标让掉就行（底栏有 Home，站点名也在浏览器/PWA 标题栏里），
   顺便把按钮和图标再收一点，保证「🐉 🎲 📅 金额 🌙」始终在同一行。 */
@media (max-width:380px) {
  .topbar-in { gap:4px; }
  .logo { display:none; }
  .nav a { padding:4px 5px; font-size:14px; }
  .userbox .btn { padding:4px 5px; font-size:12px; }
}

/* 极窄屏（≤340px，老 iPhone SE 那种）：实测还差 5px，再收一档，保证仍是一行。 */
@media (max-width:340px) {
  .topbar-in { gap:3px; }
  .nav a { padding:4px 4px; font-size:13px; }
  .userbox .btn { padding:3px 4px; font-size:11.5px; }
}

/* 只有真正的大屏才隐藏底部导航。
   原来设在 721px，结果大屏手机 / 平板横屏（宽度过 721）时底栏会突然消失。 */
@media (min-width:901px) {
  .bottomnav { display:none; }
}