/* ========================================================================== 熊猫联盟 · AI 策略控制台 — 深色科技风设计系统 (v2) ========================================================================== */ :root { --bg: #080D18; --bg-2: #0B1220; --card: #101A2C; --card-2: #0E1728; --card-3: #131F35; --line: #1B2740; --line-2: #22304C; --text: #E6EDF7; --text-2: #93A4BE; --text-3: #61738F; --text-4: #3E4D66; --acc: #22D3EE; --acc-2: #67E8F9; --acc-rgb: 34, 211, 238; --acc-soft: rgba(34, 211, 238, .12); --acc-line: rgba(34, 211, 238, .32); --green: #34D399; --green-soft: rgba(52, 211, 153, .13); --red: #FB7185; --red-soft: rgba(251, 113, 133, .13); --orange: #FBBF24; --orange-soft: rgba(251, 191, 36, .13); --purple: #A78BFA; --purple-soft: rgba(167, 139, 250, .13); --blue: #60A5FA; --blue-soft: rgba(96, 165, 250, .13); --radius: 15px; --radius-sm: 11px; /* 卡片阴影从 24px 模糊收到 14px（2026-10-01）： 记录页一堆卡片一起滚，A/B 实测（6x CPU 降速、12 秒滚动） 关掉全部阴影掉帧 20→6、最差帧 89.9→46.8ms —— 阴影模糊正是主源。 模糊半径的渲染成本近似随半径平方增长，24→14 面积砍掉 2/3，肉眼几乎看不出差别。 若以后要恢复更「飘」的观感，优先改回这里，别去加 blur。 */ --shadow: 0 5px 14px rgba(0, 0, 0, .30); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .52); --safe-b: env(safe-area-inset-bottom, 0px); /* 中性件（深浅色都要换的一组） */ --shell: #05080F; /* 页面最外层背景 */ --neutral-1: #233150; /* 开关轨道 */ --neutral-2: #1B2740; /* 步骤条 / 滑轨 */ --neutral-3: #182339; /* 进度条底 */ --neutral-4: #16223A; /* 灰标签 / 未开奖走势点 */ --neutral-5: #1E2A42; /* 主按钮禁用态 */ --on-acc: #04121F; /* 强调色块上的文字/图标 */ --scrim: rgba(0, 0, 0, .6); --navbar-bg: #0B1220; /* 顶栏/底栏实色（随主题派生 --bg-2 / --card，用户要求顶底跟主题走） */ --toast-bg: rgba(16, 26, 44, .97); /* 成功/警示 toast 都不再写死彩底（2026-10-08 用户要求：跟随主题）—— .toast.ok / .toast.err 由 --card / --acc-line / --red 派生，随主题走，无需单独变量。 */ } [data-theme="violet"] { --acc:#A78BFA; --acc-2:#C4B5FD; --acc-rgb:167,139,250; --acc-soft:rgba(167,139,250,.13); --acc-line:rgba(167,139,250,.34); } [data-theme="jade"] { --acc:#34D399; --acc-2:#6EE7B7; --acc-rgb:52,211,153; --acc-soft:rgba(52,211,153,.13); --acc-line:rgba(52,211,153,.34); } [data-theme="amber"] { --acc:#FBBF24; --acc-2:#FCD34D; --acc-rgb:251,191,36; --acc-soft:rgba(251,191,36,.13); --acc-line:rgba(251,191,36,.34); } [data-theme="rose"] { --acc:#FB7185; --acc-2:#FDA4AF; --acc-rgb:251,113,133; --acc-soft:rgba(251,113,133,.13); --acc-line:rgba(251,113,133,.34); } [data-theme="azure"] { --acc:#60A5FA; --acc-2:#93C5FD; --acc-rgb:96,165,250; --acc-soft:rgba(96,165,250,.13); --acc-line:rgba(96,165,250,.34); } [data-theme="teal"] { --acc:#0D9488; --acc-2:#56B4AC; --acc-rgb:13,148,136; --acc-soft:rgba(13,148,136,.13); --acc-line:rgba(13,148,136,.34); } [data-theme="indigo"] { --acc:#6366F1; --acc-2:#9294F5; --acc-rgb:99,102,241; --acc-soft:rgba(99,102,241,.13); --acc-line:rgba(99,102,241,.34); } [data-theme="lime"] { --acc:#A3E635; --acc-2:#BEF264; --acc-rgb:163,230,53; --acc-soft:rgba(163,230,53,.13); --acc-line:rgba(163,230,53,.34); } [data-theme="orange"] { --acc:#FB923C; --acc-2:#FDBA74; --acc-rgb:251,146,60; --acc-soft:rgba(251,146,60,.13); --acc-line:rgba(251,146,60,.34); } [data-theme="sakura"] { --acc:#F472B6; --acc-2:#F9A8D4; --acc-rgb:244,114,182; --acc-soft:rgba(244,114,182,.13); --acc-line:rgba(244,114,182,.34); } [data-theme="slate"] { --acc:#94A3B8; --acc-2:#CBD5E1; --acc-rgb:148,163,184; --acc-soft:rgba(148,163,184,.13); --acc-line:rgba(148,163,184,.34); } [data-theme="bamboo"] { --acc:#22C55E; --acc-2:#4ADE80; --acc-rgb:34,197,94; --acc-soft:rgba(34,197,94,.13); --acc-line:rgba(34,197,94,.34); } [data-theme="fuchsia"] { --acc:#E879F9; --acc-2:#F0ABFC; --acc-rgb:232,121,249; --acc-soft:rgba(232,121,249,.13); --acc-line:rgba(232,121,249,.34); } [data-theme="vermilion"] { --acc:#EF4444; --acc-2:#F87171; --acc-rgb:239,68,68; --acc-soft:rgba(239,68,68,.13); --acc-line:rgba(239,68,68,.34); } [data-theme="sky"] { --acc:#BAE6FD; --acc-2:#E0F2FE; --acc-rgb:186,230,253; --acc-soft:rgba(186,230,253,.13); --acc-line:rgba(186,230,253,.34); } [data-theme="spice"] { --acc:#A16207; --acc-2:#CA8A04; --acc-rgb:161,98,7; --acc-soft:rgba(161,98,7,.13); --acc-line:rgba(161,98,7,.34); } [data-theme="silver"] { --acc:#A1A1AA; --acc-2:#D4D4D8; --acc-rgb:161,161,170; --acc-soft:rgba(161,161,170,.13); --acc-line:rgba(161,161,170,.34); } [data-contrast="light"] { --bg:#EEF1F6; --bg-2:#F2F5FA; --card:#FFFFFF; --card-2:#F5F8FC; --card-3:#FFFFFF; --line:#E2E8F2; --line-2:#D3DCEA; --text:#0F1A2B; --text-2:#4A5A72; --text-3:#7C8CA6; --text-4:#AEBACB; --shadow: 0 3px 10px rgba(20,40,80,.08); --shadow-lg: 0 18px 44px rgba(20,40,80,.16); --shell:#E4E9F2; --neutral-1:#CBD5E6; --neutral-2:#DDE4EF; --neutral-3:#E4EAF3; --neutral-4:#EDF1F7; --neutral-5:#DCE3EE; --on-acc:#FFFFFF; --scrim: rgba(20, 35, 60, .38); --navbar-bg: #FFFFFF; --toast-bg: rgba(255, 255, 255, .98); /* 浅色下弱化彩色软底，否则颜色糊在一起 */ --green-soft: rgba(16, 185, 129, .12); --red-soft: rgba(244, 63, 94, .10); --orange-soft:rgba(217, 119, 6, .12); --purple-soft:rgba(124, 58, 237, .10); --blue-soft: rgba(37, 99, 235, .10); --green:#059669; --red:#DC2626; --orange:#B45309; --purple:#6D28D9; --blue:#2563EB; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; color: var(--text); background: var(--shell); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow: hidden; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } button { border: 0; background: none; padding: 0; cursor: pointer; } input { outline: none; border: 0; background: none; } a { color: var(--acc); text-decoration: none; } ::-webkit-scrollbar { width: 0; height: 0; } ::selection { background: rgba(var(--acc-rgb), .3); } /* ---------- 外壳 ---------- */ #app-shell { height: 100dvh; display: flex; background: var(--shell); overflow: hidden; } #sidenav { display: none; } #phone { position: relative; flex: 1; width: 100%; max-width: none; height: 100dvh; padding-top: env(safe-area-inset-top, 0px); /* 只留底色；光晕挪到下面的 ::before 独立层（原因见那里的注释）。 --bg / --acc-rgb 由 applyAppearance 写成 :root 变量，主题变了这里自动跟着变。 */ background: var(--bg); display: flex; flex-direction: column; overflow: hidden; } /* 光晕单独占一个合成层（2026-10-01 实测改的，别改回去）。 原来这两层 radial-gradient 直接垫在 #phone 的 background 上，#screen 的内容就压在它上面滚 —— 内容每滚一帧，这块铺满整屏的大渐变就得跟着重绘一次。 A/B 实测（6x CPU 降速、记录页滚动 10 秒）： 光晕照旧 → 掉帧 20 次、最差一帧 197.8ms、p99 51.9ms 光晕关掉 → 掉帧 0 次、最差一帧 24.7ms、p99 20.8ms 所以把它拎到独立层：视觉一个像素都不变，但内容滚动不再触发它重绘。 两束光都用主题色（原来第二束写死紫色，换主题时它纹丝不动，看着像「只有按钮变了」）。 */ #phone::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 55% at 80% -10%, rgba(var(--acc-rgb), .16), transparent 62%), radial-gradient(95% 48% at 4% 2%, rgba(var(--acc-rgb), .085), transparent 64%); /* 提升为独立合成层：内容滚动时这一层原样复用，不参与重绘 */ transform: translateZ(0); will-change: transform; } #screen { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; z-index: 1; display: flex; flex-direction: column; /* 重绘关在本容器内，别波及整棵文档树（光晕层也因此彻底不被牵连） */ contain: paint; } .screen-pad { flex: 1 0 auto; padding-bottom: 18px; } /* ---------- 启动骨架（冷启动第一帧） ---------- */ /* 为什么需要它：弱网冷启动要等 JS 单包下完（实测 3.5s，110KB gzip 在丢包链路上） 才会被 JS 画出第一帧内容，这期间用户面对的是**一整块纯色空屏**—— 「点了没反应」的观感全来自这里。 这块骨架直接写在 index.html 里、样式由构建期内联的关键 CSS 提供， 所以它在**文档解析完的瞬间**就能上色（实测 ~0.8s），完全不等 JS。 app.js 首帧渲染完成后会把它摘掉（removeBootSplash）。 ⚠️ 改这里的样式要保证它仍在 CRITICAL_SELECTORS 里（deploy.mjs），否则不被内联。 */ @media (min-width: 700px) { #phone { max-width: 720px; margin: 0 auto; box-shadow: 0 0 60px var(--scrim); } } @media (min-width: 1024px) { #sidenav { display: flex; flex-direction: column; width: 252px; flex: none; background: var(--bg-2); border-right: 1px solid var(--line); padding: 0 14px 16px; } #phone { max-width: 900px; } #tabbar { display: none !important; } .screen-pad { padding-bottom: 28px; } } /* ---------- 侧边栏 ---------- */ .side-brand { display: flex; align-items: center; gap: 11px; padding: 22px 8px 18px; } .side-brand .sb-logo { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 21px; background: linear-gradient(140deg, var(--acc-2), var(--acc)); box-shadow: 0 8px 22px rgba(var(--acc-rgb), .38); } .side-brand .sb-name { font-size: 16px; font-weight: 800; letter-spacing: .4px; } .side-brand .sb-sub { font-size: 11px; color: var(--text-3); margin-top: 1px; } .side-nav { display: flex; flex-direction: column; gap: 4px; } .side-item { display: flex; align-items: center; gap: 11px; height: 44px; padding: 0 12px; border-radius: 11px; color: var(--text-2); font-size: 14px; transition: all .15s; border: 1px solid transparent; cursor: pointer; } .side-item:hover { background: var(--card); color: var(--text); } .side-item.active { background: var(--acc-soft); color: var(--acc); border-color: var(--acc-line); font-weight: 600; } .side-item svg { width: 20px; height: 20px; } .side-sep { height: 1px; background: var(--line); margin: 14px 8px; } .side-acct { display: flex; align-items: center; gap: 9px; padding: 11px; border-radius: 13px; background: var(--card); border: 1px solid var(--line); cursor: pointer; } .side-acct .sa-name { font-size: 13px; font-weight: 700; } .side-acct .sa-desc { font-size: 11px; color: var(--text-3); margin-top: 1px; } /* ---------- 顶栏 ---------- */ /* 🔴 性能（2026-10-09 全站流畅化）：这里原来有 `backdrop-filter: blur(14px)`。 但 --navbar-bg 本身就是**不透明实色**（浅色 #FFFFFF / 深色 #0B1220）， 在一个不透明背景上做背景模糊 = 白白的 GPU 开销：移动端每帧滚动都要把 整条 sticky 顶栏连同身后的内容重新合成一次，是「滚动发涩 / 掉帧」的经典元凶。 去掉它视觉零变化（背景照样不透明），却拿回一个稳定的滚动帧率。 —— 判据：只要背景是不透明色，backdrop-filter 就是纯负担，一律不写。 */ .navbar { height: 54px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: var(--navbar-bg); position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--line); } .navbar .nav-back { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; margin-left: -6px; border-radius: 9px; color: var(--text-2); cursor: pointer; } .navbar .nav-back:hover { background: var(--card); color: var(--text); } .navbar .nav-title { font-size: 18px; font-weight: 800; letter-spacing: .3px; } .navbar .nav-sub { font-size: 12px; color: var(--text-3); margin-left: 8px; font-weight: 400; } .navbar .nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-3); } .navbar .nav-right .save { color: var(--acc); font-weight: 700; font-size: 15px; } .navbar .nav-count { margin-left: auto; font-size: 12.5px; color: var(--text-3); } /* ---------- Tab ---------- */ #tabbar { flex: none; height: calc(60px + var(--safe-b)); padding-bottom: var(--safe-b); background: var(--navbar-bg); border-top: 1px solid var(--line); display: flex; } #tabbar.hidden { display: none; } .tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-3); font-size: 10px; transition: color .15s; position: relative; cursor: pointer; } .tab-item.active { color: var(--acc); font-weight: 700; } .tab-item.active::before { content: ""; position: absolute; top: 0; width: 26px; height: 2.5px; border-radius: 0 0 3px 3px; background: var(--acc); box-shadow: 0 0 12px var(--acc); } .tab-item svg { width: 22px; height: 22px; } /* ---------- 通用 ---------- */ .card { background: linear-gradient(160deg, var(--card-3), var(--card)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 12px 12px; overflow: hidden; } .card-pad { padding: 15px; } .card-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 7px; margin-bottom: 11px; letter-spacing: .2px; } .card-title::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--acc); /* 发光从 10px 收到 4px：标题竖条只有 3×13px，10px 光晕糊成一大团还贵 （记录页每张卡片一个，滚动时跟着一起重光栅化），4px 观感基本不变 */ box-shadow: 0 0 4px var(--acc); flex: none; } .card-title .ct-right { margin-left: auto; font-size: 12px; color: var(--text-3); font-weight: 400; } .muted { color: var(--text-3); } .small { font-size: 12.5px; } .tiny { font-size: 11px; } .row { display: flex; align-items: center; } .gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap10 { gap: 10px; } .gap12 { gap: 12px; } .mt6 { margin-top: 6px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .flex1 { flex: 1; min-width: 0; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .center { text-align: center; } .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .green { color: var(--green); } .red { color: var(--red); } .blue { color: var(--blue); } .orange { color: var(--orange); } .purple { color: var(--purple); } .acc { color: var(--acc); } .btn-primary { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 50px; border-radius: 14px; color: var(--on-acc); font-size: 15.5px; font-weight: 800; letter-spacing: .4px; background: linear-gradient(96deg, var(--acc-2), var(--acc)); box-shadow: 0 10px 26px rgba(var(--acc-rgb), .34); transition: transform .12s, opacity .12s; } .btn-primary:active { transform: scale(.985); opacity: .9; } .btn-primary:disabled { background: var(--neutral-5); color: var(--text-3); box-shadow: none; } .btn-ghost { display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; border-radius: 13px; background: var(--card-2); border: 1px solid var(--line-2); color: var(--text-2); font-size: 14px; } .btn-sm { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; border-radius: 9px; font-size: 12.5px; font-weight: 600; } /* 页面标题右侧的「+ 添加」：原来只是一个 12.5px 的纯文字，点击目标太小， 这里做成真正的主操作按钮（账号管理 / 其它列表页共用） */ .nav-add { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 17px; border-radius: 12px; font-size: 14px; font-weight: 800; letter-spacing: .3px; color: var(--on-acc); white-space: nowrap; background: linear-gradient(96deg, var(--acc-2), var(--acc)); box-shadow: 0 7px 18px rgba(var(--acc-rgb), .34); transition: transform .12s, opacity .12s; } .nav-add:active { transform: scale(.955); opacity: .9; } .nav-add .plus { font-size: 17px; font-weight: 900; line-height: 1; margin-top: -1px; } /* 账号管理列表里每一行右侧的「添加」也放大到可稳定点击 */ .ac-add-big { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; border-radius: 15px; color: var(--on-acc); font-size: 15.5px; font-weight: 800; letter-spacing: .4px; background: linear-gradient(96deg, var(--acc-2), var(--acc)); box-shadow: 0 10px 26px rgba(var(--acc-rgb), .34); transition: transform .12s, opacity .12s; } .ac-add-big:active { transform: scale(.985); opacity: .9; } .btn-blue { background: var(--acc-soft); color: var(--acc); border: 1px solid var(--acc-line); } .btn-danger { background: var(--red-soft); color: var(--red); border: 1px solid rgba(251, 113, 133, .3); } .dock { position: sticky; bottom: 0; z-index: 2; flex: none; padding: 10px 16px 14px; background: linear-gradient(180deg, rgba(8, 13, 24, 0), var(--bg) 40%); } [data-contrast="light"] .dock { background: linear-gradient(180deg, rgba(238, 241, 246, 0), var(--bg) 40%); } .hint-banner { display: flex; align-items: flex-start; gap: 9px; margin: 0 12px 12px; padding: 12px 13px; border-radius: var(--radius-sm); background: var(--acc-soft); border: 1px solid var(--acc-line); color: var(--acc-2); font-size: 12px; line-height: 1.6; } .hint-banner.warn { background: var(--orange-soft); border-color: rgba(251, 191, 36, .3); color: var(--orange); } .hint-banner.danger { background: var(--red-soft); border-color: rgba(251, 113, 133, .3); color: var(--red); } .hint-banner .hb-ico { flex: none; margin-top: 1px; } /* ---------- 记录页「新鲜度」状态条（本地缓存优先渲染的可见性标记）---------- ★ 2026-10-08：记录页改成「先用本地缓存秒出画面、后台再静默拉真数据」。 这条状态条就是那个策略的诚实性保证 —— 画的是缓存时必须让用户一眼看见， 否则「秒开」就变成了「拿旧数据骗人」。数据刷新到位后组件自己返回 null 消失。 配色一律走主题变量（--acc-*），不写死颜色：换主题它跟着变。 */ .fresh-bar { display: flex; align-items: center; gap: 8px; margin: 0 12px 10px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--acc-soft); border: 1px solid var(--acc-line); color: var(--acc-2); font-size: 12px; line-height: 1.5; } /* cached 档：画的是旧快照 —— 降低存在感（虚线边 + 常规文字色）， 刷新完它会被替换成「已是最新」，所以不必做得太抢眼。 */ .fresh-bar.cached { background: transparent; border-style: dashed; border-color: var(--acc-line); color: var(--text-2); } .fresh-bar .fb-spin { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--acc-line); border-top-color: var(--acc); animation: spin .9s linear infinite; } /* 无障碍：系统开了「减弱动态效果」就停掉转圈，静态小圆点代替 —— 有它没它都读得出「在刷新」 */ @media (prefers-reduced-motion: reduce) { .fresh-bar .fb-spin { animation: none; border-top-color: var(--acc-line); } } /* ---------- 开关 ---------- */ .toggle { width: 46px; height: 27px; border-radius: 14px; background: var(--neutral-1); position: relative; transition: background .2s; flex: none; cursor: pointer; } .toggle::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 22px; height: 22px; border-radius: 50%; background: #8EA1BF; transition: transform .2s, background .2s; } .toggle.on { background: linear-gradient(90deg, rgba(var(--acc-rgb), .5), var(--acc)); } .toggle.on::after { transform: translateX(19px); background: var(--on-acc); } .toggle.on.red { background: linear-gradient(90deg, rgba(251, 113, 133, .5), var(--red)); } .toggle.on.green { background: linear-gradient(90deg, rgba(52, 211, 153, .5), var(--green)); } .toggle.sm { width: 38px; height: 22px; } .toggle.sm::after { width: 18px; height: 18px; top: 2px; left: 2px; } .toggle.sm.on::after { transform: translateX(16px); } /* ---------- 复选 ---------- */ .cbox { width: 21px; height: 21px; border-radius: 7px; border: 1.6px solid var(--line-2); background: var(--card-2); display: flex; align-items: center; justify-content: center; flex: none; transition: all .16s; cursor: pointer; } .cbox.on { background: var(--acc); border-color: var(--acc); box-shadow: 0 0 12px rgba(var(--acc-rgb), .5); } .cbox svg { width: 13px; height: 13px; color: var(--on-acc); opacity: 0; } .cbox.on svg { opacity: 1; } /* ---------- 标签 ---------- */ .badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 600; border: 1px solid transparent; } .badge.blue { background: var(--acc-soft); color: var(--acc); border-color: var(--acc-line); } .badge.green { background: var(--green-soft); color: var(--green); border-color: rgba(52, 211, 153, .3); } .badge.red { background: var(--red-soft); color: var(--red); border-color: rgba(251, 113, 133, .3); } .badge.orange { background: var(--orange-soft); color: var(--orange); border-color: rgba(251, 191, 36, .3); } .badge.purple { background: var(--purple-soft); color: var(--purple); border-color: rgba(167, 139, 250, .3); } .badge.gray { background: var(--neutral-4); color: var(--text-3); border-color: var(--line); } .badge.yellow { background: rgba(240, 180, 41, .14); color: #f0b429; border-color: rgba(240, 180, 41, .32); } .dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(52, 211, 153, .16), 0 0 10px var(--green); flex: none; } /* ---------- 线路健康点 ---------- */ .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-4); box-shadow: 0 0 0 3px rgba(97, 115, 143, .14); transition: background .18s, box-shadow .18s; } .dot.on { background: var(--green); box-shadow: 0 0 0 3px rgba(52, 211, 153, .18), 0 0 10px var(--green); } .dot.bad { background: var(--red); box-shadow: 0 0 0 3px rgba(251, 113, 133, .18), 0 0 10px var(--red); } /* ---------- 「已被禁止使用」整页提示（后台 → 用户管控 → 禁止某个 IP） ---------- 这个页面是用户**唯一**能看到的界面（此时不再请求任何数据），所以必须自解释： 说清「是什么、为什么、找谁」。文字居中、限宽 380px，手机上一屏能看全。 */ .blocked-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .blocked-card { width: 100%; max-width: 380px; text-align: center; padding: 30px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); } .blocked-ico { display: flex; justify-content: center; color: var(--red); margin-bottom: 12px; } .blocked-t { font-size: 17px; font-weight: 800; color: var(--text); } .blocked-d { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--text-2); word-break: break-all; } .blocked-h { margin-top: 14px; font-size: 12px; line-height: 1.6; color: var(--text-3); } /* ---------- 站点已关闭（后台开关）---------- 管理员关站要的就是「白屏 + 一行字」，所以这里**硬写纯白/近黑**， 不跟主题变量走 —— 否则深色主题下用户看到的是「关站了但页面还是老样子」。 */ /* width/flex 是必需的：#app-shell 是 flex 容器，不给宽度的话白屏块只占内容那么宽， 右边会露出一条原主题的底色（深色模式下尤其明显，看着像「没关干净」）。 */ .closed-page { min-height: 100vh; width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; background: #fff; } .closed-t { font-size: 19px; font-weight: 700; color: #1a1a1a; text-align: center; line-height: 1.7; word-break: break-word; white-space: pre-wrap; max-width: 32em; } /* ---------- 实时倒计时 ---------- */ .cd { font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: .5px; color: var(--acc); } .cd-zero { color: var(--orange) !important; } /* 🔴 2026-10-11 用户报「不要倒计时结束获取结果的时候变大变小」： 这一格的内容会在「00:12」与「开奖中」之间切换，两者宽度不同 —— 不定宽的话 整行会跟着左右抽动（它的标签行也会在「距开奖 / 请稍候」之间换）。 右对齐 + 最小宽度 + 各自单行，把它的占位钉死。 */ /* 🔴 min-width 必须 ≥ 倒计时两种形态里更宽的那个： `.cd` 是 19px/800/letter-spacing .5px，3 个汉字（「开奖中」/「结算中」）= 58.5px， 2 位数字形态（「00:09」）= 58px，再加 padding-left 10px ⇒ 68.5 / 68。 原来写 68px 只兜住数字形态 ⇒ 切到「开奖中」时格子宽 0.5px（真机实测）， 用户要的是「什么都固定显示」。取 69px 把两种形态一起兜住。 */ .cd-box { text-align: right; flex: none; padding-left: 10px; min-width: 69px; } .cd-box .cd { display: block; font-size: 19px; line-height: 1.15; } .cd-box .tiny { display: block; white-space: nowrap; line-height: 1.3; } .cd-strip { padding-top: 9px; border-top: 1px dashed var(--line); gap: 6px; align-items: center; } .cd-strip .cd { font-size: 14px; } .live-card { border-color: var(--acc-line); box-shadow: 0 0 0 1px var(--acc-soft), var(--shadow); } /* 左内边距 10px：把这一行的**文字**钉到 26px 那条基准线上。 卡片里其实是两条线： · 16px = 卡片内容框内沿（`.card-pad` 的 padding 边） · 26px = **卡片标题文字**（16 + 标题前面 3px 装饰竖条 + 7px 间距） 而 `.live-row` 里的头像行 / 进度条 / 下面的 live-meta 原来都贴 16px， 于是「下注窗口开启后自动投注 · 基础 1」「本轮 +30.66 命中 54%」这两行文字 比上面的「本期进行中」和下面的「统计期数」**左凸 10px** —— 用户报的「上面字体没有对齐」就是这个（与表格那次是同一类错位，差 10px）。 加 10px 之后这一行所有文字都在 26px；右端本来就是 350px（`.cd-box` 右对齐），不受影响。 进度条 `.cd-bar` 跟着一起进到 26px，否则它会在文字左边凸出一条。 */ .live-row { padding: 11px 0 11px 10px; border-bottom: 1px dashed var(--line); } .live-row:last-child { border-bottom: 0; padding-bottom: 0; } .live-name { font-size: 14px; font-weight: 800; letter-spacing: .2px; } /* 「本期进行中」一行里胶囊比较多，窄屏下必须禁止换行，否则会叠到旁边的胶囊上 */ .live-row .row { flex-wrap: nowrap; overflow: hidden; } /* ⚠️ `.live-row .pill` 是**过期选择器**（pill() 渲染出来的是 `.badge`，从来没有 `.pill`）， 留着它只会让人以为胶囊已经禁止换行了。这里改成真正的 `.badge`， 顺便把「状态胶囊」宽度钉死（见下面 .live-state）。 */ .live-row .badge, .live-meta span { white-space: nowrap; flex: none; } /* 状态胶囊（等待开奖 / 开奖中 / 已过窗口 / 下注中 / 结算中 / 待下注）： 字数不同宽度就不同，每次切换都会把右边那排挤得左右跳。 锁最小宽度 + 居中 ⇒ 切换时宽度不变、位置不动（用户：「不要…变大变小」）。 ⚠️ 宽度必须按**最宽的那个状态**取：真机实测 3 字态（下注中/结算中/开奖中/待下注） = 58px，4 字态（等待开奖/已过窗口）= 62px。原来写 58px 只兜住 3 字态 ⇒ 4 字态偷偷宽 4px。取 64px 让六种状态**全都**等于 64px。 */ .live-row .badge.live-state { min-width: 64px; justify-content: center; } .live-row .live-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 96px; } .live-warn { display: flex; align-items: center; gap: 7px; margin: 2px 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--orange-soft); border: 1px solid rgba(251, 191, 36, .32); color: var(--orange); font-size: 12px; } /* 倒计时进度条：让 00:00 不再是「看着像卡死」 */ .cd-bar { height: 4px; border-radius: 2px; background: var(--neutral-2); overflow: hidden; margin: 9px 0 7px; } .cd-bar i { display: block; height: 100%; border-radius: 2px; transition: width .9s linear, background .3s; } /* min-height 钉一行：中间那段文案会在「已投 …」「距开奖不足 …」「下注窗口开启后自动投注 …」 之间换（字数不同），没有最小高度时行高会随内容微动（用户：「…变大变小」）。 */ /* 🔴 说明行必须**永远单行**（2026-10-11 真机实测修）： 原来「提示文案 + 上期 + 本轮 + 命中」挤在同一个 flex 行里且 `flex-wrap: wrap`。 真机在 390px 宽下量到：提示「下注窗口开启后自动投注 · 基础 7.00」= 185.5px， 右侧三项合计 210.4px，加 3 个 10px gap = 425.9px > 可用 324px ⇒ **换行**， 行高 18px → 43.3px。这一下同时把 .live-row 从 121.2 顶到 146.6（25px 抽动）， 正好是用户报的「倒计时结束获取结果的时候变大变小」（结算瞬间 下注中 → 等待开奖）。 单行放不下是**信息量**问题，不是样式问题（最长提示 185.5 + 统计 210.4 无论如何 > 324）， 所以拆成两行、各自恒高： · .live-hint —— 提示文案，单独一行，恒高 17px，超长走省略号（绝不折行） · .live-meta —— 只放右侧三项统计，justify-content: flex-end 右对齐，恒高 18px */ .live-hint { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-3); line-height: 17px; min-height: 17px; max-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .live-meta { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; justify-content: flex-start; font-size: 11.5px; color: var(--text-3); min-height: 18px; } /* 2026-10-11 二次精简：用户「重新构建简单显示，有些东西下面统计已经有了」—— 删掉「本轮盈亏/命中率」（下方数据总览已有），.live-meta 只剩「上期结果」一项， justify-content 改回 flex-start（靠左）。.live-meta-right 已无引用，保留为兼容。 高度仍恒 18px，不破坏「结算瞬间不抖动」的修复。 */ .live-meta-right { display: flex; align-items: center; gap: 10px; white-space: nowrap; } /* ---------- 参与明细（「每个数字参与上了没有」）---------- 实时卡片里每个数字一颗胶囊，绿✓=平台已收下这一注、红✗=这一注没参与。 胶囊可换行：押满 10 个数字时一行放不下，换行也比截断强（截断就白做了这个功能）。 */ /* 🔴 这一行现在**永远渲染**（没有回执时显示占位），所以给它一个固定最小高度： 每期「出现→消失」会抽动整张卡片的高度（用户：「不要…变大变小」）。 一行胶囊 = 8px padding-top + 17px 内容 ≈ 25px。 */ .part-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); cursor: pointer; /* 2026-10-11 真机实测：chip 态（padding 1px + 11px 字号 ⇒ 内容 18.94px）比 占位态（.tiny 行高 17px）高 1.94px，min-height 25 只兜得住占位态 ⇒ 每期「出现→消失」时行高 25 ↔ 26.94 抽一下（结算瞬间变大变小的最后一块）。 取 27px（26.94 + 余量）让两态恒高。 */ min-height: 27px; } .part-chip { display: inline-block; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; white-space: nowrap; } .part-chip.ok { background: var(--green-soft); color: var(--green); } .part-chip.bad { background: var(--red-soft); color: var(--red); } /* 弹层里的逐注清单 */ .part-list { margin-top: 4px; } .part-item { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .part-item:last-child { border-bottom: 0; } .part-name { font-weight: 700; } .part-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; } .part-dot.ok { background: var(--green); } .part-dot.bad { background: var(--red); } .part-sum { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px; font-size: 12.5px; margin-bottom: 4px; } .part-sum.ok { background: var(--green-soft); color: var(--green); } .part-sum.bad { background: var(--red-soft); color: var(--red); } .part-full { white-space: normal; word-break: break-word; } /* ---------- Token 核验状态行 ---------- */ .verify-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; padding: 11px 13px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line-2); font-size: 12.5px; color: var(--text-3); transition: all .18s; } .verify-row .vr-ico { flex: none; display: flex; } .verify-row.busy { background: var(--acc-soft); border-color: var(--acc-line); color: var(--acc); } .verify-row.busy .vr-ico { animation: spin 1s linear infinite; } .verify-row.ok { background: var(--green-soft); border-color: rgba(52, 211, 153, .34); color: var(--green); } .verify-row.err { background: var(--red-soft); border-color: rgba(251, 113, 133, .34); color: var(--red); } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- 后台限制横幅 ---------- */ .flag-banner { padding: 10px 14px; font-size: 12.5px; color: var(--orange); background: var(--orange-soft); border-bottom: 1px solid rgba(251, 191, 36, .3); } /* ---------- 运行方式标识 ---------- */ .run-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 8px; font-size: 11.5px; font-weight: 800; white-space: nowrap; } .run-badge.cloud { background: var(--acc-soft); color: var(--acc); border: 1px solid var(--acc-line); } .run-badge.local { background: var(--orange-soft); color: var(--orange); border: 1px solid rgba(251, 191, 36, .32); } .cloud-badge { display: flex; align-items: center; gap: 11px; margin-top: 10px; padding: 12px 13px; border-radius: 13px; background: var(--acc-soft); border: 1px solid var(--acc-line); } /* ---------- 汇总卡（跟随明暗模式，不能再写死白底） ---------- */ .card-hero { background: linear-gradient(180deg, rgba(var(--acc-rgb), .10), var(--card) 62%); border-color: var(--acc-line); } .card-hero .card-title { color: var(--text); } [data-contrast="light"] .card-hero { background: linear-gradient(180deg, #F7FAFF, #FFFFFF); } /* ---------- 表格横向滚动 + 分页 ---------- */ .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .tbl-scroll::-webkit-scrollbar { height: 6px; } .tbl-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; } .tbl-scroll .tbl { min-width: 460px; } .tbl-scroll .tbl th { position: sticky; top: 0; background: var(--card); z-index: 1; } .tbl-hint { display: flex; align-items: center; gap: 6px; padding: 6px 14px 0; font-size: 11px; color: var(--text-3); } .pager { display: flex; align-items: center; gap: 8px; padding: 12px 14px 2px; } .pager .pg-btn { height: 32px; padding: 0 14px; border-radius: 9px; background: var(--card-2); border: 1px solid var(--line-2); color: var(--text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; } .pager .pg-btn:not(.disabled):hover { border-color: var(--acc-line); color: var(--acc); } .pager .pg-btn.disabled { opacity: .38; cursor: not-allowed; } .pager .pg-info { flex: 1; text-align: center; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; } .pager .pg-info b { color: var(--text); font-weight: 700; } .pager .pg-jump { display: flex; align-items: center; gap: 4px; } .pager .pg-jump input { width: 52px; height: 32px; text-align: center; border-radius: 9px; background: var(--card-2); border: 1px solid var(--line-2); color: var(--text); font-variant-numeric: tabular-nums; } /* ---------- 分段 ---------- */ .seg { display: flex; gap: 8px; padding: 0 12px 12px; overflow-x: auto; } .seg-item { flex: none; height: 33px; padding: 0 15px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); color: var(--text-2); font-size: 13px; display: flex; align-items: center; transition: all .15s; cursor: pointer; } .seg-item.active { background: var(--acc-soft); color: var(--acc); border-color: var(--acc-line); font-weight: 700; box-shadow: 0 0 16px rgba(var(--acc-rgb), .18); } /* ---------- 账号分页切换条（工作台 / 挂机记录 / AI 配置共用） ---------- 翻页按钮点击区 40×40：项目铁律「图标类可点元素点击区 ≥40×40」（手机上 34×34 手指戳不中就表现为「点了没反应」——移除线路那个 × 就栽在这，见 memory）。 */ .acct-pager { display: flex; align-items: center; gap: 8px; padding: 7px 11px; margin: 0 12px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 13px; } .acct-pager .ap-btn { flex: none; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--card-2, var(--card)); border: 1px solid var(--line); color: var(--text-3); cursor: pointer; transition: all .15s; } .acct-pager .ap-btn:active { transform: scale(.94); } .acct-pager .ap-chev.flip { transform: rotate(180deg); } .acct-pager .ap-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; } .acct-pager .ap-avatar { flex: none; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; background: var(--acc-soft); color: var(--acc); border: 1px solid var(--acc-line); } .acct-pager .ap-info { flex: 1; min-width: 0; } .acct-pager .ap-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct-pager .ap-sub { font-size: 11px; color: var(--text-3); margin-top: 1px; } .acct-pager .ap-dots { flex: none; display: flex; gap: 4px; align-items: center; max-width: 96px; overflow: hidden; flex-wrap: wrap; justify-content: flex-end; } .acct-pager .ap-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-4, var(--line)); } .acct-pager .ap-dots i.on { background: var(--acc); box-shadow: 0 0 8px rgba(var(--acc-rgb), .5); } /* ---------- 列表 ---------- */ .li { display: flex; align-items: center; gap: 11px; padding: 13px 15px; position: relative; } .li + .li::before { content: ""; position: absolute; left: 15px; right: 0; top: 0; height: 1px; background: var(--line); } .li .li-main { flex: 1; min-width: 0; } .li .li-name { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; } .li .li-desc { font-size: 11.5px; color: var(--text-3); margin-top: 3px; } /* 按账号删除按钮（账号管理列表行 / 启动页已存 Token 行共用）。 点击区 40×40：低于这个尺寸在手机上戳不中，点了会像没反应（项目铁律 ≥40×40）。 启动页原来是 15px 的小叉、没有点击区、还**不弹确认**，紧挨着「点一下即填入 Token」 的整行热区 —— 误触就直接丢 Token，属于同一类「删不掉 / 删错了」的毛病，一并收口。 */ .acct-del { flex: none; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--text-3); cursor: pointer; transition: background .15s, color .15s; -webkit-tap-highlight-color: transparent; } .acct-del:active { transform: scale(.94); } .acct-del:hover { background: rgba(251, 113, 133, .12); color: var(--red); } /* ---------- 头像 ---------- */ .avatar { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; flex: none; color: var(--on-acc); background: linear-gradient(140deg, var(--acc-2), var(--acc)); box-shadow: 0 4px 14px rgba(var(--acc-rgb), .28); } .avatar.g2 { background: linear-gradient(140deg, #FCD34D, #F59E0B); box-shadow: 0 4px 14px rgba(245, 158, 11, .28); } .avatar.g3 { background: linear-gradient(140deg, #C4B5FD, #8B5CF6); box-shadow: 0 4px 14px rgba(139, 92, 246, .28); } /* ---------- 步骤条 ---------- */ .steps { padding: 0 14px 12px; } .steps .step-track { display: flex; gap: 4px; height: 4px; } .steps .step-seg { flex: 1; border-radius: 3px; background: var(--neutral-2); } .steps .step-seg.done { background: var(--acc); opacity: .55; } .steps .step-seg.cur { background: linear-gradient(90deg, var(--acc-2), var(--acc)); box-shadow: 0 0 10px var(--acc); } .steps .step-labels { display: flex; gap: 4px; margin-top: 8px; } .steps .step-labels span { flex: 1; text-align: center; font-size: 9.5px; color: var(--text-4); cursor: pointer; } .steps .step-labels span.on { color: var(--acc); font-weight: 700; } .steps .step-head { display: flex; align-items: center; margin-bottom: 10px; } .steps .step-head .sh-main { font-size: 14px; font-weight: 700; } .steps .step-head .sh-side { margin-left: auto; font-size: 11.5px; color: var(--text-3); } /* ---------- 选项 ---------- */ .opt-grid { display: grid; gap: 9px; } .opt-grid.c2 { grid-template-columns: repeat(2, 1fr); } .opt-grid.c3 { grid-template-columns: repeat(3, 1fr); } .opt-grid.c4 { grid-template-columns: repeat(4, 1fr); } .opt { border: 1.4px solid var(--line-2); background: var(--card-2); border-radius: 12px; padding: 11px 9px; text-align: center; font-size: 13px; color: var(--text-2); transition: all .16s; position: relative; cursor: pointer; } .opt:hover { border-color: var(--text-4); } .opt .opt-sub { display: block; font-size: 10.5px; color: var(--text-3); margin-top: 3px; } .opt.active { border-color: var(--acc); background: var(--acc-soft); color: var(--acc); font-weight: 700; box-shadow: 0 0 0 3px rgba(var(--acc-rgb), .1), 0 0 18px rgba(var(--acc-rgb), .16) inset; } .opt.active .opt-sub { color: var(--acc); opacity: .82; } /* 「最差优先」这类**反向口径**的警示态（2026-10-09 加 worst 时）。 它与其它选项方向相反、且长期使用会持续放血，误点的代价是真钱 —— 所以选中前后都用红色边线标出来，不能只靠说明文字（文字在小屏上会被略过）。 ⚠️ 用 rgba(251,113,133,…) 而不是 var(--red-rgb)：仓库里**只有** --acc-rgb， 没有 --red-rgb（--red 是纯 hex），照抄 --acc-rgb 的写法会拿到无效值 → 整条样式静默失效。 */ .opt.danger { border-color: rgba(251, 113, 133, .38); } .opt.danger .opt-sub { color: var(--red); opacity: .8; } .opt.danger.active { border-color: var(--red); background: var(--red-soft); color: var(--red); box-shadow: 0 0 0 3px rgba(251, 113, 133, .16); } .opt.danger.active .opt-sub { color: var(--red); opacity: .95; } .opt.radio { text-align: left; display: flex; align-items: flex-start; gap: 10px; padding: 13px; } .opt.radio .rdot { width: 18px; height: 18px; border-radius: 50%; border: 1.6px solid var(--line-2); flex: none; margin-top: 1px; display: flex; align-items: center; justify-content: center; } .opt.radio.active .rdot { border-color: var(--acc); background: var(--acc); box-shadow: 0 0 12px rgba(var(--acc-rgb), .5); } .opt.radio.active .rdot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--on-acc); } .opt.radio .ot { font-size: 14px; font-weight: 700; } .opt.radio .od { font-size: 11.5px; color: var(--text-3); margin-top: 4px; line-height: 1.5; } /* ---------- 滑块 ---------- */ .slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--neutral-2); } .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--acc); border: 3px solid var(--bg); box-shadow: 0 0 12px var(--acc); } .slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--acc); border: 3px solid var(--bg); } /* ---------- 预设胶囊 ---------- */ .preset-chip { display: inline-flex; align-items: center; height: 29px; padding: 0 12px; border-radius: 9px; background: var(--card-2); border: 1.2px solid var(--line); color: var(--text-2); font-size: 12px; cursor: pointer; transition: all .15s; white-space: nowrap; } .preset-chip:hover { border-color: var(--text-4); color: var(--text); } .preset-chip.active { background: var(--acc-soft); color: var(--acc); border-color: var(--acc-line); font-weight: 700; } /* ---------- KV ---------- */ .kv { display: flex; align-items: baseline; padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--line); } .kv:last-child { border-bottom: 0; } .kv .k { color: var(--text-3); } .kv .v { margin-left: auto; font-weight: 700; } /* ---------- 图表 ---------- */ .bars { display: flex; align-items: flex-end; gap: 3px; height: 54px; } .bars i { flex: 1; border-radius: 2px 2px 0 0; min-height: 3px; opacity: .9; background: linear-gradient(180deg, var(--acc-2), var(--acc)); } .bars i.neg { background: linear-gradient(180deg, #FDA4AF, var(--red)); } .spark { width: 100%; height: 34px; display: block; } .linechart { width: 100%; display: block; } /* ---------- 我的 · 身份条 ---------- */ .hero-id { display: flex; align-items: center; gap: 12px; padding: 14px 15px; border-radius: var(--radius); background: linear-gradient(140deg, rgba(var(--acc-rgb), .14), var(--card) 72%); border: 1px solid var(--acc-line); margin-bottom: 12px; } .hero-id .hero-name { font-size: 16px; font-weight: 800; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 居中变体：头像 / 名字 / 余额竖排居中（用户要求账号信息居中） */ .hero-id.hero-id-center { flex-direction: column; text-align: center; gap: 0; padding: 20px 15px 16px; position: relative; } .hero-id.hero-id-center .avatar { margin: 0 auto; } .hero-id.hero-id-center .hero-switch { position: absolute; top: 12px; right: 12px; } .icon-btn { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--acc); background: var(--acc-soft); border: 1px solid var(--acc-line); cursor: pointer; flex: none; } .icon-btn:active { transform: scale(.94); } .nav-dot { width: 15px; height: 15px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--line-2), 0 2px 8px rgba(0, 0, 0, .35); } /* ---------- 我的 · 账号管理（紧贴身份条，用户要求放最上面） ---------- */ .hero-acct { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); margin-bottom: 12px; cursor: pointer; } .hero-acct:active { background: var(--card-2); } .hero-acct .ha-ico { width: 34px; height: 34px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--acc); background: var(--acc-soft); border: 1px solid var(--acc-line); } .hero-acct .ha-t { font-size: 14px; font-weight: 700; } .hero-acct .ha-d { font-size: 11.5px; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- 表格 ---------- */ .tbl { width: 100%; border-collapse: collapse; font-size: 12px; } .tbl th { text-align: left; font-weight: 600; color: var(--text-3); padding: 9px 7px; background: var(--card-2); font-size: 11px; white-space: nowrap; border-bottom: 1px solid var(--line); } .tbl td { padding: 9px 7px; border-bottom: 1px solid var(--line); white-space: nowrap; color: var(--text-2); } .tbl tr:hover td { background: rgba(var(--acc-rgb), .04); } .tbl .num { font-variant-numeric: tabular-nums; } /* ---------- Toast / 弹层 ---------- */ #toast-host { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .toast { background: var(--toast-bg, rgba(16, 26, 44, .97)); border: 1px solid var(--line-2); color: var(--text); padding: 11px 17px; border-radius: 12px; font-size: 13px; line-height: 1.55; max-width: min(370px, 86vw); box-shadow: var(--shadow-lg); animation: tin .2s ease; } /* 警示 toast（2026-10-08 改版）：与 ok 同款主题派生，不再写死暗红底 —— 底用卡片色、正文用标准文字色；警示语义靠红系边框 + 左侧红细条（--red 深浅主题自动切换色值）表达。 */ .toast.err { background: var(--card); border-color: rgba(251, 113, 133, .42); color: var(--text); box-shadow: var(--shadow-lg), inset 3px 0 0 var(--red); } /* 成功 toast（2026-10-08 改版）：不写死绿底，跟随主题 —— 底用卡片色、边框和左侧细条用主题强调色（--acc 派生，主题是什么色它就是什么色）、 正文用标准文字色。与 err（红系，警示语义）保持区分即可。 */ .toast.ok { background: var(--card); border-color: var(--acc-line); color: var(--text); box-shadow: var(--shadow-lg), inset 3px 0 0 var(--acc); } @keyframes tin { from { opacity: 0; transform: translateY(8px); } } /* ---------- 结算横幅（settle.js） ---------- 每结算一期从顶部滑下一条：命中绿、未中红（与记录页「命中/未中」配色一致）。 不覆盖导航栏 —— 用 sticky 顶部悬浮 + 移动端安全区，避免挡住「返回」按钮。 */ #settle-host { position: fixed; left: 50%; transform: translateX(-50%); top: 0; z-index: 95; width: 100%; max-width: 430px; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 0; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .settle-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--toast-bg, rgba(16, 26, 44, .97)); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); pointer-events: auto; cursor: pointer; opacity: 0; transform: translateY(-14px); transition: opacity .24s ease, transform .24s cubic-bezier(.2,.8,.3,1); backdrop-filter: blur(8px); } .settle-bar.on { opacity: 1; transform: translateY(0); } .settle-bar.win { border-color: rgba(52, 211, 153, .5); } .settle-bar.lose { border-color: rgba(251, 113, 133, .5); } .settle-bar .sb-ico { width: 30px; height: 30px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; } .settle-bar.win .sb-ico { background: var(--green-soft); color: var(--green); } .settle-bar.lose .sb-ico { background: var(--red-soft); color: var(--red); } .settle-bar .sb-main { flex: 1; min-width: 0; } .settle-bar .sb-title { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; } .settle-bar.win .sb-title { color: var(--green); } .settle-bar.lose .sb-title { color: var(--red); } .settle-bar .sb-tag { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 5px; background: var(--blue-soft); color: var(--blue); } .settle-bar .sb-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .settle-bar .sb-delta { flex: none; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .3px; } .settle-bar.win .sb-delta { color: var(--green); } .settle-bar.lose .sb-delta { color: var(--red); } /* ---------- 主题配色选择（我的 → 主题外观） ---------- * 色卡 = 迷你实况预览：底色/描边由 screens.home.js 按该主题 paletteOf 派生后内联写入， * 这里只负责形状与动效 —— 用户选中前就能看到「选它之后页面长什么样」。 */ .swatch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .swatch { position: relative; border: 1.4px solid var(--line); border-radius: 14px; padding: 11px 10px 10px; cursor: pointer; transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease; } .swatch:active { transform: scale(.96); } .swatch .sw-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; min-height: 20px; } .swatch .sw-btn { width: 34px; height: 19px; border-radius: 7px; } .swatch .sw-check { width: 17px; height: 17px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none; } .swatch .sw-name { font-size: 12.5px; font-weight: 800; letter-spacing: .2px; } .swatch .sw-desc { font-size: 10.5px; margin-top: 2px; line-height: 1.35; } .pick-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .pick-row input[type="color"] { width: 46px; height: 40px; padding: 2px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--card-2); cursor: pointer; } .pick-row .hex { flex: 1; min-width: 0; font-family: ui-monospace, monospace; letter-spacing: .5px; background: var(--card-2); border: 1px solid var(--line-2); border-radius: 11px; color: var(--text); padding: 10px 12px; font-size: 13px; } .recent-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .recent-row .rc { width: 30px; height: 30px; border-radius: 10px; border: 2px solid var(--line-2); cursor: pointer; } #layer { position: fixed; inset: 0; z-index: 80; pointer-events: none; } #layer .mask { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); pointer-events: auto; display: flex; align-items: flex-end; justify-content: center; animation: fin .16s ease; } @media (min-width: 500px) { #layer .mask { align-items: center; } } @keyframes fin { from { opacity: 0; } } .sheet { width: 100%; max-width: 430px; background: var(--card); border: 1px solid var(--line-2); border-bottom: 0; border-radius: 20px 20px 0 0; padding: 18px 16px calc(16px + var(--safe-b)); max-height: 88dvh; overflow-y: auto; box-shadow: 0 -20px 60px var(--scrim); animation: sup .24s cubic-bezier(.2, .8, .3, 1); } @media (min-width: 500px) { .sheet { border-radius: 20px; border-bottom: 1px solid var(--line-2); margin: 0 16px; } } @keyframes sup { from { transform: translateY(26px); opacity: .5; } } .sheet-head { display: flex; align-items: center; margin-bottom: 16px; } .sheet-head h3 { margin: 0; font-size: 17px; font-weight: 800; } .sheet-head .x { margin-left: auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--text-3); border-radius: 9px; cursor: pointer; } .sheet-head .x:hover { background: var(--card-2); color: var(--text); } .field { margin-bottom: 15px; } .field > label { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 8px; font-weight: 600; } .input { width: 100%; height: 48px; border-radius: 12px; background: var(--card-2); border: 1.4px solid var(--line-2); padding: 0 14px; font-size: 14px; transition: all .16s; color: var(--text); } .input::placeholder { color: var(--text-4); } .input:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(var(--acc-rgb), .14); background: var(--bg-2); } .input-row { display: flex; align-items: center; gap: 9px; height: 48px; border-radius: 12px; background: var(--card-2); border: 1.4px solid var(--line-2); padding: 0 14px; } .input-row.focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(var(--acc-rgb), .14); } .input-row input { flex: 1; min-width: 0; font-size: 14px; } .input-row .tag { font-size: 11px; color: var(--acc); background: var(--acc-soft); border: 1px solid var(--acc-line); padding: 3px 8px; border-radius: 6px; font-weight: 700; } textarea.input { height: 88px; padding: 13px 14px; resize: none; line-height: 1.6; } .captcha-img { width: 106px; height: 42px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line-2); object-fit: cover; cursor: pointer; flex: none; } /* ---------- 统计 ---------- */ .herostats { display: flex; gap: 10px; } .herostats .hs { flex: 1; text-align: center; } .herostats .hs b { display: block; font-size: 17px; } .herostats .hs span { font-size: 11px; color: var(--text-3); } /* 可点的统计格（2026-10-09：胜率最高 / 连胜最高 / 10场胜率最高 三个 KPI）。 🔴 写成**独立类**而不是挂在 .herostats .hs 下面 —— 那条选择器要求祖先是 .herostats，而算法库统计块的容器其实是 .row，两者对不上（写在那儿等于没写）。 判据：没有下面这三条，按下去就完全没反馈，用户会以为按钮坏了。 */ .hs-tap { cursor: pointer; border-radius: 10px; padding: 4px 2px; transition: background .12s ease, transform .12s ease; } .hs-tap:hover { background: var(--bg-2); } .hs-tap:active { transform: scale(.97); } .hs-tap:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; } .kpi-row { display: flex; } .kpi-row > div { flex: 1; text-align: center; padding: 2px 0; } .kpi-v { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; } .kpi-l { font-size: 10.5px; color: var(--text-3); margin-top: 3px; } /* 战绩条：把 KPI 三数装进内嵌面板，视觉上是一块「战绩」而不是散落的数字 */ .kpi-strip { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 4px 9px; } /* 熊猫真实数据（工作台，2026-10-09）：对齐熊猫网站「投票记录」面板的四项汇总 （胜利 / 失败 / 盈亏 / 流水）。一块 = 一个挂机账号；多号同挂时纵向叠加。 间距规则：块与块之间 14px；块内标题到 KPI 12px；KPI 之间 4px 间隙由 .pr-kpis 的 1px 分隔线分割（不用 gap，分隔线与间距一次到位）。 */ .panda-real { margin-bottom: 12px; } .pr-stack { display: flex; flex-direction: column; } .pr-block + .pr-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .pr-head { display: flex; align-items: center; gap: 7px; } .pr-ico { font-size: 15px; line-height: 1; } .pr-title { font-size: 13.5px; font-weight: 700; letter-spacing: .2px; } .pr-acct { font-size: 11px; color: var(--text-3); background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; } .pr-kpis { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 4px 10px; } .pr-kpi { text-align: center; padding: 0 2px; position: relative; } .pr-kpi + .pr-kpi::before { content: ""; position: absolute; left: 0; top: 12%; height: 76%; width: 1px; background: var(--line); } .pr-kv { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; } .pr-kl { font-size: 10.5px; color: var(--text-3); margin-top: 4px; } /* 主题切换平滑过渡：换主题时背景/描边 0.3s 渐变，不生硬跳变 */ body, .card, .hero-id, .hero-acct, .opt, .swatch, .li, .navbar, .tabbar, #tabbar, .hint-banner { transition: background-color .3s ease, border-color .3s ease; } .quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; } .quick { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11px; color: var(--text-2); cursor: pointer; } .quick .qi { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--card-2); border: 1px solid var(--line-2); color: var(--acc); transition: all .16s; } .quick:hover .qi { border-color: var(--acc-line); box-shadow: 0 0 18px rgba(var(--acc-rgb), .2); } .quick .qi.blue { color: var(--acc); } .quick .qi.purple { color: var(--purple); } .quick .qi.green { color: var(--green); } .quick .qi.red { color: var(--red); } .quick .qi.orange { color: var(--orange); } .progress { height: 6px; border-radius: 3px; background: var(--neutral-3); overflow: hidden; } .progress > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--acc-2), var(--acc)); box-shadow: 0 0 12px rgba(var(--acc-rgb), .5); } .pill-input { display: flex; align-items: center; gap: 7px; background: var(--card-2); border: 1px solid var(--line-2); border-radius: 11px; padding: 7px 11px; } .pill-input input { width: 62px; text-align: center; font-weight: 700; } .pill-input .step { width: 26px; height: 26px; border-radius: 50%; background: var(--card-3); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--text-2); font-size: 16px; cursor: pointer; } .empty { text-align: center; padding: 44px 20px; color: var(--text-3); font-size: 13px; } .empty svg { opacity: .28; } .empty-ico { display: inline-flex; padding: 16px; border-radius: 18px; background: var(--card-2); border: 1px solid var(--line); margin-bottom: 14px; } .theme-swatch { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-radius: 13px; border: 1.4px solid var(--line-2); background: var(--card-2); cursor: pointer; transition: all .16s; } .theme-swatch:hover { border-color: var(--text-4); } .theme-swatch.active { border-color: var(--acc); background: var(--acc-soft); box-shadow: 0 0 0 3px rgba(var(--acc-rgb), .1); } .theme-swatch .sw { width: 32px; height: 32px; border-radius: 10px; flex: none; box-shadow: 0 4px 14px rgba(20, 40, 80, .18); } /* ---------- AI 配置（单页版） ---------- */ .cfg-page { padding: 0 12px; } /* 顶部「当前配置」摘要 */ .cfg-sum { border-radius: 16px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); padding: 13px 14px; margin-bottom: 12px; } .cfg-sum .cs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .cfg-sum .cs-title { font-size: 14.5px; font-weight: 800; } .cfg-sum .cs-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; } .cfg-sum .cs-badge.ok { background: var(--green-soft); color: var(--green); } .cfg-sum .cs-badge.warn { background: var(--orange-soft); color: var(--orange); } .cfg-sum .cs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; } .cfg-sum .cs-cell { min-width: 0; } .cfg-sum .cs-k { display: block; font-size: 10.5px; color: var(--text-4); margin-bottom: 2px; } .cfg-sum .cs-v { display: block; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 手机版分节条：**网格换行、一屏全见**（2026-10-03 用户要求 「点击切换区域还需要滑动查看，能否让他全部显示出来好点击查看不用滑动」）。 原来是 flex + overflow-x:auto —— 后面几节在屏幕外，必须横向滑才能点， 而横向滚动条在手机上几乎看不见，用户根本不知道还有 4 个栏目。 现在三列网格、自动换行：9 个栏目 = 3 行，一屏内全部可见可点。 注意不要给 .cfg-chips 加 overflow-x —— 那会把网格压回单行。 */ .cfg-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding-bottom: 10px; } .cfg-chips .seg-item { flex: 1 1 auto; min-width: 0; padding: 0 6px; justify-content: center; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cfg-chips .seg-item.done { color: var(--green); border-color: rgba(52, 211, 153, .3); } .cfg-body { display: block; } .cfg-rail { display: none; } .cfg-main { min-width: 0; } /* 每一节 */ .cfg-sec { margin-bottom: 14px; scroll-margin-top: 12px; } .cfg-sec-hd { display: flex; align-items: center; gap: 10px; padding: 2px 4px 9px; } .cfg-sec-hd .cs-n { flex: none; width: 25px; height: 25px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: var(--acc-soft); color: var(--acc); border: 1px solid var(--acc-line); } .cfg-sec-hd .cs-main { flex: 1; min-width: 0; } .cfg-sec-hd .cs-name { font-size: 14.5px; font-weight: 800; } .cfg-sec-hd .cs-hint { font-size: 10.5px; color: var(--text-4); margin-top: 1px; } .cfg-sec-hd .cs-side { flex: none; font-size: 10.5px; color: var(--text-3); text-align: right; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cfg-sec-bd > .card { margin-bottom: 0; } /* 倍投档位表：金额是手输的，所以每行给一个输入框 + 删除 */ .ladder-head { display: flex; align-items: center; gap: 8px; padding: 2px 14px 6px; font-size: 10.5px; color: var(--text-4); border-bottom: 1px solid var(--line); } .ladder-head .lh-n { width: 30px; flex: none; text-align: center; } .ladder-head .lh-a { flex: 1; min-width: 0; } .ladder-head .lh-x { width: 48px; flex: none; text-align: right; } .ladder-head .lh-o { width: 42px; flex: none; text-align: center; } .ladder-head .lh-d { width: 20px; flex: none; } .ladder-row { align-items: center; } .ladder-amt { width: 92px; height: 32px; padding: 0 9px; border-radius: 9px; font-size: 14px; font-weight: 700; background: var(--card-3); border: 1px solid var(--line); color: var(--text); } .ladder-amt:focus { outline: none; border-color: var(--acc); background: var(--card-2); } .ladder-del { flex: none; width: 20px; text-align: center; font-size: 12px; color: var(--text-4); cursor: pointer; } .ladder-del:active { color: var(--red); } /* AI 配置 ⑥：算法筛选（手动挑选参与在线预测的算法） */ .algo-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 14px 10px; } @media (max-width: 380px) { .algo-pick { grid-template-columns: 1fr; } } .algo-pick-i { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-3); cursor: pointer; transition: border-color .12s, background .12s; } .algo-pick-i:active { transform: scale(.98); } .algo-pick-i.on { border-color: var(--acc); background: var(--acc-soft); } .ap-tick { flex: none; width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--acc); background: var(--card-2); } .algo-pick-i.on .ap-tick { border-color: var(--acc); background: var(--acc); color: var(--on-acc); } .ap-main { flex: 1; min-width: 0; } .ap-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ap-sub { font-size: 10.5px; color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; } .ap-badge { flex: none; font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 5px; background: var(--acc-soft); color: var(--acc); } .chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--card-3); font-size: 11.5px; color: var(--text-2); cursor: pointer; } .chip:active { transform: scale(.96); } .cfg-dock { display: flex; gap: 10px; } .cfg-dock .btn-primary { flex: 1; } .cfg-dock .btn-ghost { flex: none; width: 108px; } /* 电脑版：左侧配置项导航 + 右侧所有分节 */ @media (min-width: 1024px) { body[data-route^="/config"] #phone { max-width: 1180px; } .cfg-page { padding: 0 18px; } .cfg-chips { display: none; } .cfg-sum .cs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cfg-body { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 18px; align-items: start; } .cfg-rail { display: block; position: sticky; top: 12px; padding: 14px 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); } .cfg-rail .cfg-rail-hd { font-size: 10.5px; color: var(--text-4); font-weight: 700; letter-spacing: 1px; padding: 0 8px 9px; text-transform: uppercase; } .cfg-rail .cfg-rail-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; cursor: pointer; border: 1px solid transparent; margin-bottom: 2px; transition: all .15s; } .cfg-rail .cfg-rail-item:hover { background: var(--card-2); } .cfg-rail .cfg-rail-item.active { background: var(--acc-soft); border-color: var(--acc-line); } .cfg-rail .cr-n { flex: none; width: 21px; height: 21px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: var(--neutral-4); color: var(--text-3); } .cfg-rail .cr-n.ok { background: var(--green-soft); color: var(--green); } .cfg-rail .cr-name { font-size: 13px; font-weight: 700; } .cfg-rail .cr-hint { font-size: 10px; color: var(--text-4); margin-top: 1px; } .cfg-rail .cfg-rail-sep { height: 1px; background: var(--line); margin: 11px 8px; } .cfg-rail .cfg-rail-tip { font-size: 11px; color: var(--text-3); padding: 0 8px; line-height: 1.7; } .cfg-sec-hd .cs-name { font-size: 16px; } .cfg-dock { justify-content: flex-end; } .cfg-dock .btn-primary { flex: none; width: 260px; } } /* ---------- 批量启动页 ---------- */ .launch-head { display: flex; align-items: center; gap: 12px; padding: 13px 15px; margin: 0 12px 12px; border-radius: 15px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); } .launch-head .lh-ico { flex: none; width: 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(150deg, #4A86FF, #2C6BFF); box-shadow: 0 8px 20px rgba(44, 107, 255, .34); } .launch-head .lh-main { flex: 1; min-width: 0; } .launch-head .lh-title { font-size: 15.5px; font-weight: 800; } .launch-head .lh-sub { font-size: 11.5px; color: var(--text-3); margin-top: 3px; } .launch-plan { padding: 4px 15px 12px; } .launch-plan .lp-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px dashed rgba(27, 39, 64, .6); } .launch-plan .lp-row:last-child { border-bottom: 0; } .launch-plan .lp-k { flex: none; width: 58px; font-size: 12px; color: var(--text-3); } .launch-plan .lp-v { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.5; word-break: break-word; } /* ---------- 挂机记录：最新一期 ---------- */ .latest-card .latest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 6px; } .latest-card .lg-cell { background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; } .latest-card .lg-k { font-size: 10.5px; color: var(--text-4); margin-bottom: 4px; } .latest-card .lg-v { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; } .latest-card .lg-s { font-size: 11px; color: var(--text-3); margin-top: 3px; } @media (min-width: 700px) { .latest-card .latest-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ---------- 单账号监控详情 ---------- */ .md-kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (min-width: 700px) { .md-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .md-kpi .k { font-size: 10.5px; color: var(--text-4); margin-bottom: 4px; } .md-kpi .v { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; } .md-bars { display: flex; align-items: flex-end; gap: 4px; height: 76px; margin-top: 10px; } .md-bars i { flex: 1; min-width: 3px; border-radius: 3px 3px 0 0; font-style: normal; } .md-bars i.g { background: linear-gradient(180deg, var(--green), rgba(52, 211, 153, .35)); } .md-bars i.r { background: linear-gradient(180deg, var(--red), rgba(251, 113, 133, .35)); } .md-round { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed rgba(27, 39, 64, .6); } .md-round:last-child { border-bottom: 0; } .md-round .mr-i { flex: none; width: 44px; font-size: 10.5px; color: var(--text-4); } .md-round .mr-b { flex: 1; font-size: 12.5px; } .md-round .mr-d { flex: none; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; } /* 逐期明细里的「本轮」待开奖行：视觉语言与记录页的 .verify-tbl .pending-row 一致 （橘底 + 醒目标记），一眼区分「这一期还没开奖」和已经结算的行。 没有它的话，第一期启动后明细里是空的，用户会以为挂机没在跑。 */ .md-round.is-pending { background: var(--orange-soft); border-radius: 8px; padding-left: 8px; padding-right: 8px; } .md-round.is-pending .mr-i { color: var(--orange); font-weight: 700; } .md-round.is-pending .mr-b { font-weight: 600; } /* 最近开奖的圆球（红=大 蓝=小） */ .trend-ball { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; } .trend-ball.b { background: var(--red-soft); color: var(--red); border: 1px solid rgba(251, 113, 133, .3); } .trend-ball.s { background: var(--blue-soft); color: var(--blue); border: 1px solid rgba(96, 165, 250, .3); } /* ---------- 工作台：挂机快捷命令 ---------- */ .qa-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .qa-btn { display: flex; align-items: center; justify-content: center; gap: 7px; height: 50px; border-radius: 13px; font-size: 13.5px; font-weight: 800; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text-2); transition: transform .12s, opacity .12s, filter .12s; } .qa-btn:active { transform: scale(.97); } .qa-btn .qa-ico { display: flex; } .qa-btn.start { color: var(--on-acc); border: 0; background: linear-gradient(96deg, var(--acc-2), var(--acc)); box-shadow: 0 8px 20px rgba(var(--acc-rgb), .3); } .qa-btn.pause { color: var(--orange); border-color: rgba(251, 191, 36, .3); background: var(--orange-soft); } .qa-btn.del { color: var(--red); border-color: rgba(251, 113, 133, .3); background: var(--red-soft); } .qa-btn:disabled { opacity: .42; box-shadow: none; } .qa-btn:disabled:active { transform: none; } /* ---------- 挂机记录：右上角动作按钮 ---------- */ .nav-act { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--text-2); background: var(--card-2); border: 1px solid var(--line-2); transition: all .15s; } .nav-act:hover { border-color: rgba(251, 113, 133, .45); color: var(--red); } .nav-act:active { transform: scale(.96); } .nav-act .na-ico { display: flex; } /* 撤单 + 清空并排。撤单是「把这一注退回来」，不是破坏性操作， 所以用主题色跟旁边那个危险红的「清空」区分开，别让人一眼看成两个删除键。 写在 .nav-act:hover 之后才盖得住它那条红 hover。 */ .nav-acts { display: inline-flex; align-items: center; gap: 8px; } .nav-act.act-warn { color: var(--acc); } .nav-act.act-warn:hover { border-color: var(--acc-line); color: var(--acc); } /* ---------- 逐期核验表：紧凑到「盈亏」也能直接看到 ---------- */ /* 必须写得比 .tbl-scroll .tbl{min-width:460px} 更具体，否则表格仍会被撑到 460px， 手机上「盈亏」列就又被挤出屏幕了。 */ .tbl-scroll .verify-tbl { min-width: 0; width: 100%; table-layout: fixed; } /* 单元格左右内边距 2px（不是 4px、也不是 3px）：7 列一共就是 14~28px 的余量。 真机量过：3px 时七列「不换行所需」之和已经到 98.2%（只剩 6.6px 余量）， 最挤的第 4 列只剩 0.2px —— 换个字体或金额多一位就折行。 收到 2px 后合计降到 94.6%，每列能留出 2.7~3.0px 余量，而视觉上几乎看不出差别 （内容之间仍然隔着相邻两格各 2px + 居中列的空白）。 首列左基准线 25px / 末列右基准线 15px 由下面的规则单独给，不受这条影响。 */ /* 字号 11px（原 11.5）：七列的「不换行所需」之和在最坏情况（记录里同时有 「猜数字」的 4 连数字和「大小单双」的 0/小/双）已经到 **98.6%**，只剩 5px 余量 摊到 7 列 → 每列不到 1px，期号（8 位数字）和预测几乎贴在一起， 用户看到的就是「期号和预测重叠了」（2026-09-29 原话）。 降到 11px 后内容窄约 4%，余量回到 ~20px，够给每列留出看得见的间隔。 */ .verify-tbl th, .verify-tbl td { padding: 9px 2px; font-size: 11px; white-space: normal; word-break: break-word; } .verify-tbl th { white-space: nowrap; } /* 左右两条竖向基准线 —— 咬的是**卡片标题文字**那条线，而不是卡片内容框： .card-title 前面有一道 3px 装饰竖条 + 7px 间距，所以标题文字落在 16+3+7 = 26px， 而卡片内容框（.card-pad 内沿）在 16px。 这两张表（.rec / .alg）都挂在 .card-pad **之外**，表格盒子左边就在卡片内容框外沿 （约 1px），所以首列要 25px 内边距才能把文字钉到 26px —— 与「逐期核验」「预测验证」几个字落在同一条竖线上。 右基准线 = 标题右侧「共 N 期 · 每页 N」的右端 = 卡片内容右边缘（末列右内边距 15px）。 改之前首列只有 10px → 文字在 11px，比标题文字左凸 15px，用户看到的就是「上面的字跟表格没对齐」。 */ .verify-tbl th:first-child, .verify-tbl td:first-child { padding-left: 25px; } .verify-tbl.rec th:last-child, .verify-tbl.rec td:last-child { padding-right: 15px; } /* —— 挂机记录页「逐期核验」：7 列 —— 列宽不是拍的，是**真机量出来的**。量法（e2e-table-align.mjs 里实现）： 把整张表克隆到屏幕外、`table-layout:auto; width:auto` + 全格 `white-space:nowrap`， 再把待开奖行统一改成**最宽内容**（4 位统计期数 + 「本轮」标签 / 8 位期号 / 5 位金额 10.55 / 0/小/双 / 「待开奖」胶囊 / -10.55），然后读每一列的 max-content 宽。 这样量出来的是**上界**：任何一格都不会折行。（克隆保留结构，所以首列 25px、 末列 15px 这两条基准线内边距不会被算错。） 当前实测量（表宽 364px，左右内边距 2px；needPx 即「该列最宽内容 + 左右内边距」）： 列 需要px 占比 给的比例 给到px 余量 统计期数 77.4 21.3% 22.0% 80.1 +2.7 （4 位期数 + 「本轮」标签撑的，不是表头；首格加粗） 期号 58.0 15.9% 16.7% 60.8 +2.8 （8 位数字，固定长度） 预测 27.0 7.4% 8.2% 29.9 +2.9 （表头两个字比数据「单/双」宽，按表头算） 投注 33.8 9.3% 10.1% 36.8 +3.0 （按 5 位金额「10.55」算，实测数据只到「1.20」） 开奖 50.3 13.8% 14.6% 53.1 +2.8 （格式是「和值/大小/单双」，如 0/小/双） 结果 47.0 12.9% 13.7% 49.9 +2.9 （待开奖行是「待开奖」胶囊：11px 字 + 0 4px 内边距 + 1px 边框） 盈亏 51.7 14.2% 14.7% 53.5 +1.8 （末列还要含 15px 右基准线；按 -10.55 算） --------------------------------------------------------------- 合计 94.8% 100.0% （留 ~19px，每列 1.8~3.0px） 两个坑，别踩： ① **需要宽度不能用「按单元格字号量 innerHTML」算**。格子里的胶囊（.badge）有自己的 font-size(11px) / 内边距(0 4px) / 1px 边框，按单元格字号算会少计 10px —— 「待开奖」因此曾被算成 46px（实际 49px），列宽照着配就折行了。 ② **auto 布局下同一列所有格子的宽度都相等**（都等于该列的 max-content 宽）。 所以逐格比较宽度是没有意义的，读一列里任意一格拿到的就是「该列需要多宽」。 想看是哪一格撑宽的，要按内容分别量，不能按 getBoundingClientRect 比。 已知边界：首列按 **4 位数**统计期数配（账号跑到 ~1000 期，约一天）； 到 5 位数时「本轮」标签会被挤到第二行，那时把标签收掉即可（橙底 + 橙边 + 「待开奖」已足够）。 判宽的三个坑： ① 「预测」的数据只有「双」11.5px，但表头两个字 23px —— 只按数据算宽会把表头挤爆； ② 光看「内容宽 > 可用宽」抓不到换行：**折行之后内容宽反而变小**。第一版就是这么 漏掉「期号被折成 8664621 / 3」的。真机断言里必须按 range 高度单独判一次换行； ③ **粗体会把宽度放大 ~10%**。待开奖行原来整行 700 → 8 位期号 51→57px 直接折行、 行高 39→52。所以现在只给首格加粗（见下面的 .pending-row 规则），其余格子一律常规字重。 七列之和必须正好 100%，否则浏览器会按比例重算、列整体漂移。 */ .verify-tbl.rec th, .verify-tbl.rec td { text-align: left; } /* 下面是**按实测需求 + 间隔**分配的（字号 11px 时量，最坏情况：记录里同时有 「猜数字」的 4 连数字和「大小单双」的「0/小/双」）： 列 实测需求 分配 多出来的就是间隔 统计期数 76.1 → 76.4 (21.0%) 期号 55.6 → 56.4 (15.5%) ← 期号是 8 位数字，跟右边「预测」之间必须留够 预测 45.4 → 56.8 (15.6%) ← 完整显示不截断，要放得下 5~6 个数字 投注 32.5 → 34.2 ( 9.4%) 开奖 41.9 → 42.2 (11.6%) 结果 47.0 → 47.7 (13.1%) 盈亏 50.2 → 50.2 (13.8%) ⚠️ 四条踩过的坑，改之前务必先看： ① 钱不能只从「开奖」列挪：开奖文本随玩法变（猜数字只需 27px，大小单双要 41.9px）， 砍过头就换成开奖列折行 —— 拆东墙补西墙（2026-09-29 真踩过）。 ② **「预测」列绝对不能截断**。2026-09-29 加过 clampName 截成「7、5…」， 用户当场反馈「你用…挡住我无法查看」。要放更多数字只能靠 ① 纯数字序列用空格分隔（catalog.optionName，省掉 1em 宽的顿号） ② 列宽按实测量给足。押 7~10 个数字照样会折行，但那是用户自己选的数量， 而且点这一格能打开完整清单（弹层），不会「看不到」。 ③ 余量只有 3px 左右，别再往里塞内容（比如把「本轮」标签加长）。 ④ 七列之和必须正好 100%，否则浏览器按比例重算、整列漂移。 */ .verify-tbl.rec th:nth-child(1), .verify-tbl.rec td:nth-child(1) { width: 21.0%; } .verify-tbl.rec th:nth-child(2), .verify-tbl.rec td:nth-child(2) { width: 15.5%; } .verify-tbl.rec th:nth-child(3), .verify-tbl.rec td:nth-child(3) { width: 15.6%; text-align: center; } .verify-tbl.rec th:nth-child(4), .verify-tbl.rec td:nth-child(4) { width: 9.4%; text-align: center; } .verify-tbl.rec th:nth-child(5), .verify-tbl.rec td:nth-child(5) { width: 11.6%; text-align: center; } .verify-tbl.rec th:nth-child(6), .verify-tbl.rec td:nth-child(6) { width: 13.1%; text-align: center; } .verify-tbl.rec th:nth-child(7), .verify-tbl.rec td:nth-child(7) { width: 13.8%; text-align: right; } /* 预测格可点：打开「本期参与明细」（完整数字 + 每注金额 + 中没中）。 多选数字折行时这是唯一能看全的入口，所以要给出可点的暗示。 */ .verify-tbl.rec td.opt-cell { cursor: pointer; } .verify-tbl.rec td.opt-cell:active { opacity: .6; } /* 整行可点：打开「本期参与明细」。手机上「预测」格很窄，整行可点才不至于点不中 */ .verify-tbl.rec tbody tr.row-tap { cursor: pointer; } .verify-tbl.rec tbody tr.row-tap:active { background: var(--card-2); } /* 「命中/未中」胶囊在这张表里收窄（通用 .badge 是 0 8px）：7 列时这 4px 就是挤不挤得下 */ .verify-tbl.rec .badge { padding: 0 4px; } /* 「本轮 / ×N / 观」标签同样收窄 —— 首列是「期数 + 标签」，标签省下的每一 px 都是期数的。 标签收到 8px/0 2px 之后，首列才装得下 **4 位**统计期数 + 标签（约一天的期数）。 */ .verify-tbl.rec .pending-tag { margin-left: 2px; padding: 0 2px; font-size: 8px; } /* —— 算法详情「预测验证」：5 列（同一套表格样式，列数不同所以要各写一份）—— */ .verify-tbl.alg th, .verify-tbl.alg td { text-align: left; } .verify-tbl.alg th:nth-child(1), .verify-tbl.alg td:nth-child(1) { width: 26%; } .verify-tbl.alg th:nth-child(2), .verify-tbl.alg td:nth-child(2) { width: 13%; text-align: center; } .verify-tbl.alg th:nth-child(3), .verify-tbl.alg td:nth-child(3) { width: 14%; text-align: center; } .verify-tbl.alg th:nth-child(4), .verify-tbl.alg td:nth-child(4) { width: 23%; text-align: center; } .verify-tbl.alg th:nth-child(5), .verify-tbl.alg td:nth-child(5) { width: 24%; text-align: center; } /* 待开奖那一行：淡橙底 + 左侧一道橙边，一眼区分「还没开奖」和「已结算」。 橙边位置刻意与卡片标题前面那道 3px 装饰竖条重合（同落在 16..19px）—— 不能用 inset box-shadow：它贴着**单元格盒子**左沿（≈1px，已经在卡片边上了）， 加了 25px 首列内边距之后会离文字 22px 远、看着像卡片边上的一道杂线。 所以改用绝对定位伪元素，按内边距把标记摆到标题竖条那条线上。 */ .verify-tbl .pending-row { background: var(--orange-soft); } .verify-tbl .pending-row td { border-bottom: 1px solid rgba(251, 191, 36, .25); } /* 只给**首格**加粗。以前是整行 700 —— 粗体比常规宽约 10%，于是 8 位期号（常规 51px、 粗体 57px）直接被挤出列宽折成两行、行高从 39 涨到 52（真机量出来的）。 整行高亮靠橙底 + 左侧橙边 + 「本轮」标签已经足够醒目，不需要再赔上折行。 */ .verify-tbl .pending-row td:first-child { font-weight: 700; } .verify-tbl .pending-row td:first-child { position: relative; } .verify-tbl .pending-row td:first-child::before { content: ""; position: absolute; top: 0; bottom: 0; left: 15px; width: 3px; background: var(--orange); } /* 通用（原来只写在 .verify-tbl 下，导致挂机监控页的「本轮」标签没样式） */ .pending-tag { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; font-size: 9px; font-weight: 800; background: var(--orange); color: #221500; vertical-align: middle; } .verify-tbl .num { font-variant-numeric: tabular-nums; } /* 金额来源角标（2026-10-04）：倍投第 N 手 / 滚雪球。 用户实报「首期 1 为什么记录是 2」——那笔是滚雪球加的，但记录只有金额没有来源， 看起来像系统乱加钱。这个角标让每笔加码都能自己核对。 用中性灰而不是彩色：它不是「命中/未中」那种好坏标记，只是金额的出处说明。 */ .amt-src { display: inline-block; margin-left: 3px; padding: 0 4px; border-radius: 4px; font-size: 9px; font-weight: 700; background: var(--neutral-4); color: var(--text-3); vertical-align: middle; white-space: nowrap; } .verify-tbl .latest { background: var(--acc-soft); } .verify-tbl .latest td { font-weight: 700; } .verify-tbl .latest-tag { display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 4px; font-size: 9px; font-weight: 800; background: var(--acc); color: var(--on-acc); vertical-align: middle; } @media (max-width: 359px) { .verify-tbl th, .verify-tbl td { padding: 8px 2px; font-size: 10.5px; } /* 首列左基准线**不动**（仍是 25px）：标题竖条在窄屏也还是 3px + 7px 间距， 收到 10px 会让表格又跟标题文字错开 15px —— 就是这次要修的那个毛病。 宽度不够靠下面的 min-width + 横向滚动解决，不靠牺牲对齐。 */ .verify-tbl .latest-tag, .verify-tbl .pending-tag { display: none; } /* 320px 级别的屏幕 7 列真放不下（8 位期号 + 4 字表头 + 开奖串起来就超了）， 与其把每列都挤到换行，不如让它横向滚一点点 —— .tbl-scroll 本来就是干这个的。 360px 以上不会触发这条，不会滚动。 */ .verify-tbl.rec { min-width: 336px; } } @media (min-width: 700px) { .verify-tbl th, .verify-tbl td { padding: 10px 8px; font-size: 12.5px; } } /* 单账号详情里的表格同样紧凑 */ .md-round:last-child { border-bottom: 0; } /* ---------- 玩法大厅 ---------- */ .hall { padding: 0 12px 4px; } /* 顶部横幅：大厅名 + 副标题 + 三个统计 */ .hall-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 12px; border-radius: 16px; background: linear-gradient(120deg, rgba(var(--acc-rgb), .14), var(--card) 62%); border: 1px solid var(--line); box-shadow: var(--shadow); } .hall-hero .hh-main { flex: 1; min-width: 180px; } .hall-hero .hh-title { font-size: 19px; font-weight: 800; letter-spacing: .4px; } .hall-hero .hh-sub { font-size: 11.5px; color: var(--text-3); margin-top: 4px; } .hall-hero .hh-stats { display: flex; gap: 20px; } .hall-hero .hh-stat { text-align: center; } .hall-hero .hh-stat b { display: block; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; } .hall-hero .hh-stat span { font-size: 10.5px; color: var(--text-3); } /* 主体：手机版一列，电脑版左栏 + 右内容 */ .hall-body { display: block; } .hall-main { min-width: 0; } .hall-rail { display: none; } /* 工具条：搜索 + 排序 */ .hall-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; } .hall-search { flex: 1; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line-2); } .hall-search .hs-ico { display: flex; color: var(--text-3); flex: none; } .hall-search .hs-input { flex: 1; height: 100%; background: none; border: 0; outline: none; color: var(--text); font-size: 13.5px; } .hall-search .hs-clear { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-3); background: var(--neutral-4); cursor: pointer; } .hall-sort { height: 42px; padding: 0 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line-2); color: var(--text-2); font-size: 12.5px; } /* 手机版分类横条 */ .hall-chips, .hall-chiprow { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; } .hall-chiprow { padding-bottom: 12px; } .hall-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (min-width: 560px) { .hall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 磁贴 */ .game-tile { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--card-3), var(--card)); border: 1px solid var(--line); border-radius: 14px; padding: 12px 11px; box-shadow: var(--shadow); cursor: pointer; transition: all .16s; display: flex; flex-direction: column; } .game-tile:hover { border-color: var(--acc-line); box-shadow: 0 0 22px rgba(var(--acc-rgb), .16); } .game-tile:active { transform: scale(.985); } .game-tile.running { border-color: rgba(52, 211, 153, .38); } .game-tile::after { content: ""; position: absolute; right: -22px; top: -22px; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--acc-rgb), .22), transparent 70%); } .game-tile .gt-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: start; position: relative; } .game-tile .gt-badge-ico { flex: none; width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; background: linear-gradient(140deg, var(--acc-2), var(--acc)); color: var(--on-acc); } .game-tile .gt-head { min-width: 0; position: relative; } .game-tile .gt-name { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .game-tile .gt-sub { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-4); margin-top: 2px; } .game-tile .gt-badge { padding: 1px 5px; border-radius: 4px; background: var(--acc-soft); color: var(--acc); font-weight: 700; } .game-tile .gt-clock { flex: none; text-align: right; position: relative; } .game-tile .gt-cd { font-size: 14px; color: var(--acc); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: .3px; } .game-tile .gt-clock.zero .gt-cd { color: var(--orange); } .game-tile .gt-clock.wait .gt-cd { color: var(--text-4); font-size: 12px; } .game-tile .gt-cd-l { font-size: 9px; color: var(--text-4); margin-top: 1px; white-space: nowrap; } .game-tile .gt-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; position: relative; } .game-tile .gt-tag { font-size: 9.5px; padding: 2px 6px; border-radius: 5px; background: var(--neutral-4); color: var(--text-3); border: 1px solid var(--line); white-space: nowrap; } .game-tile .gt-tag.on { background: var(--green-soft); color: var(--green); border-color: rgba(52, 211, 153, .28); } .game-tile .gt-tag.hot { background: var(--red-soft); color: var(--red); border-color: rgba(251, 113, 133, .28); } .game-tile .gt-tag.off { background: var(--neutral-4); color: var(--text-4); } .game-tile .gt-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 9px; position: relative; } /* 窄屏（手机）：磁贴很窄，把倒计时挪到独立一行，避免和名字互相压 */ @media (max-width: 559px) { .game-tile { padding: 11px 10px; } .game-tile .gt-top { grid-template-columns: auto minmax(0, 1fr); } .game-tile .gt-clock { grid-column: 1 / -1; text-align: left; display: flex; align-items: baseline; gap: 7px; margin-top: 3px; } .game-tile .gt-cd { font-size: 15px; } .game-tile .gt-cd-l { margin-top: 0; } .game-tile .gt-badge-ico { width: 28px; height: 28px; border-radius: 9px; font-size: 13px; } .game-tile .gt-name { font-size: 13px; } .trend i { width: 15px; height: 15px; font-size: 9px; } .game-tile .gt-foot .trend i:nth-child(n+5) { display: none; } } /* ---------- 电脑版大厅（≥1024px）：左分类栏 + 多列磁贴 ---------- */ @media (min-width: 1024px) { /* 大厅在电脑上要撑宽，别挤在 900px 里 */ body[data-route="/hall"] #phone { max-width: 1320px; } .hall { padding: 0 18px 8px; } .hall-hero { padding: 18px 22px; } .hall-hero .hh-title { font-size: 23px; } .hall-body { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 16px; align-items: start; } .hall-rail { display: block; position: sticky; top: 12px; padding: 14px 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); } .hall-rail .rail-title { font-size: 10.5px; color: var(--text-4); font-weight: 700; letter-spacing: 1px; padding: 0 8px 8px; text-transform: uppercase; } .hall-rail .rail-sep { height: 1px; background: var(--line); margin: 12px 8px; } .hall-rail .rail-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; padding: 0 11px; border-radius: 11px; cursor: pointer; color: var(--text-2); font-size: 13.5px; border: 1px solid transparent; transition: all .15s; margin-bottom: 3px; } .hall-rail .rail-item:hover { background: var(--card-2); color: var(--text); } .hall-rail .rail-item.active { background: var(--acc-soft); color: var(--acc); border-color: var(--acc-line); font-weight: 700; } .hall-rail .rail-item .ri-count { font-size: 11px; color: var(--text-4); font-variant-numeric: tabular-nums; } .hall-rail .rail-item.active .ri-count { color: var(--acc); } .hall-chips, .hall-chiprow { display: none; } .hall-tools { margin-bottom: 14px; } .hall-search { max-width: 420px; } .hall-grid { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 13px; } .game-tile { padding: 15px 15px 13px; border-radius: 16px; } .game-tile .gt-name { font-size: 15px; } .game-tile .gt-cd { font-size: 17px; } .game-tile .gt-badge-ico { width: 38px; height: 38px; border-radius: 12px; font-size: 18px; } .game-tile .gt-tag { font-size: 10.5px; padding: 3px 8px; border-radius: 6px; } .trend i { width: 19px; height: 19px; font-size: 10.5px; } } /* ---------- 游戏磁贴（旧网格，其它页面仍在用） ---------- */ .grid-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 12px; } @media (min-width: 700px) { .grid-games { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .grid-games { grid-template-columns: repeat(5, 1fr); } } .game-tile .gt-head { position: relative; } /* ---------- 走势 ---------- */ .trend { display: flex; gap: 3px; align-items: center; } .trend i { width: 16px; height: 16px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 800; font-style: normal; } .trend i.b { background: var(--red-soft); color: var(--red); } .trend i.s { background: var(--blue-soft); color: var(--blue); } .trend i.o { background: var(--orange-soft); color: var(--orange); } .trend i.e { background: var(--purple-soft); color: var(--purple); } .trend i.n { background: var(--neutral-4); color: var(--text-4); } /* ---------- 日志 ---------- */ .logbox { max-height: 210px; overflow-y: auto; font-size: 11.5px; line-height: 1.85; color: var(--text-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .logbox div { padding: 2px 0; border-bottom: 1px solid rgba(27, 39, 64, .6); } .logbox .t { color: var(--text-4); margin-right: 7px; } .logbox .g { color: var(--green); } .logbox .r { color: var(--red); } .logbox .a { color: var(--acc); } /* ---------- 风险条 ---------- */ .risk { height: 7px; border-radius: 4px; position: relative; background: linear-gradient(90deg, #34D399, #FBBF24 55%, #FB7185); } .risk b { position: absolute; top: -3px; width: 3px; height: 13px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px #fff; } /* ---------- 算法库 v2（2026-10-17 视觉重构）---------- */ .algo-hero { position: relative; overflow: hidden; border: 1px solid var(--acc-line); background: linear-gradient(150deg, rgba(var(--acc-rgb), .16), var(--card) 55%); } .algo-hero .ah-glow { position: absolute; right: -40px; top: -46px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--acc-rgb), .30), transparent 70%); pointer-events: none; } .ah-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ah-issue { font-size: 11px; color: var(--text-3); } .ah-pred { display: flex; align-items: center; gap: 12px; margin: 12px 0 2px; } .ah-chip { min-width: 62px; height: 62px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 27px; font-weight: 900; color: #fff; flex: none; background: linear-gradient(140deg, var(--acc), rgba(var(--acc-rgb), .55)); box-shadow: 0 6px 22px rgba(var(--acc-rgb), .35); } .ah-lead .al-name { font-size: 16px; font-weight: 800; } .ah-lead .al-meta { font-size: 11.5px; color: var(--text-3); margin-top: 3px; } .ah-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; } .ah-cell { background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; min-width: 0; } .ah-cell .v { font-size: 15.5px; font-weight: 800; white-space: nowrap; } .ah-cell .k { font-size: 10.5px; color: var(--text-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ah-cell .ah-bar { height: 4px; border-radius: 2px; background: var(--card-3); margin-top: 6px; overflow: hidden; } .ah-bar i { display: block; height: 100%; border-radius: 2px; } .algo-row { display: flex; align-items: center; gap: 11px; padding: 12px 12px; border-bottom: 1px solid var(--line); } .algo-row:last-child { border-bottom: none; } .algo-row:active { background: var(--card-2); } .ar-rank { width: 30px; height: 30px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; background: var(--card-3); color: var(--text-3); border: 1px solid var(--line); } .ar-rank.r1 { background: linear-gradient(140deg, #f59e0b, #fbbf24); color: #201503; border: none; } .ar-rank.r2 { background: linear-gradient(140deg, #94a3b8, #cbd5e1); color: #111827; border: none; } .ar-rank.r3 { background: linear-gradient(140deg, #b45309, #d97706); color: #fff; border: none; } .ar-main { flex: 1; min-width: 0; } .ar-name { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; } .ar-name .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ar-streak { flex: none; font-size: 12.5px; font-weight: 900; padding: 3px 11px; border-radius: 999px; white-space: nowrap; letter-spacing: .3px; box-shadow: 0 1px 6px rgba(0,0,0,.18); } .ar-streak.win { background: linear-gradient(140deg, rgba(34,197,94,.30), rgba(34,197,94,.14)); color: var(--green); border: 1.4px solid rgba(34,197,94,.55); } .ar-streak.lose { background: linear-gradient(140deg, rgba(239,68,68,.30), rgba(239,68,68,.14)); color: var(--red); border: 1.4px solid rgba(239,68,68,.55); } .ar-bar { height: 6px; border-radius: 3px; background: var(--card-3); margin: 6px 0 4px; overflow: hidden; } .ar-bar i { display: block; height: 100%; border-radius: 3px; } .ar-meta { font-size: 11px; color: var(--text-3); display: flex; gap: 8px; } .ar-pred { flex: none; text-align: right; min-width: 56px; } .ar-rate-big { font-size: 24px; font-weight: 900; line-height: 1.02; font-variant-numeric: tabular-nums; letter-spacing: -.5px; text-shadow: 0 1px 8px rgba(0,0,0,.18); } .ar-chip { display: inline-block; min-width: 46px; padding: 4px 13px; border-radius: 11px; font-size: 15.5px; font-weight: 900; background: var(--acc-soft); color: var(--acc); border: 1.5px solid var(--acc-line); margin-top: 3px; } /* 期号栏（2026-10-17）：首屏第一视觉 —— 让用户一眼知道「这是哪一期」 */ /* 榜单标题旁的期号徽章（2026-10-17）：一眼确认「这份榜单是哪一期」 */ .algo-issue-badge { display: inline-block; font-size: 11.5px; font-weight: 800; color: var(--acc); background: rgba(var(--acc-rgb), .16); border: 1px solid var(--acc-line); border-radius: 7px; padding: 2px 8px; margin-right: 2px; letter-spacing: .3px; font-variant-numeric: tabular-nums; white-space: nowrap; } /* cache-bust 2026-10-17 algo-v2 */ /* ============================================================================ * 🔴🔴🔴 2026-10-17 挂机记录「分游戏独立大区块」样式 * 配套 screens.exec.js 的 gameBlock() / grandTotal()（见那边的长注释）。 * 设计要点： * · 每个游戏一整块 .gb，主题色由 .g9 / .g11 提供 CSS 变量 * · 区块内部元素全部用 var(--c) 取色，换主题只改一处 * · 记录表只含本房间的行 —— 这是用户反复要求的「彻底分开」 * ========================================================================= */ .g9 { --c: var(--acc); --cS: var(--acc-soft); --cL: var(--acc-line); --c2: #0891b2; } .g11 { --c: var(--purple); --cS: var(--purple-soft); --cL: rgba(167,139,250,.30); --c2: #7c3aed; } .gb{ margin: 10px 0 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--cL); background: var(--card); box-shadow: 0 4px 20px rgba(0,0,0,.28); } /* ① 区块头 */ .gb-head{ padding: 12px 14px 10px; position: relative; overflow: hidden; background: linear-gradient(120deg, var(--cS), transparent 68%); border-bottom: 1px solid var(--line); } .gb-head::before{ content:''; position:absolute; top:-56px; right:-38px; width:150px; height:150px; border-radius:50%; background: radial-gradient(circle, var(--cS), transparent 68%); pointer-events:none; } .gb-top{ display:flex; align-items:center; gap:7px; margin-bottom:8px; position:relative; } .gb-ico{ width:30px; height:30px; border-radius:9px; flex:none; background: linear-gradient(135deg, var(--c), var(--c2)); color:#05080f; font-size:13px; font-weight:900; display:flex; align-items:center; justify-content:center; letter-spacing:-.5px; } .gb-name{ font-size:14.5px; font-weight:900; color:var(--text); letter-spacing:-.2px; } .gb-mode{ font-size:9px; padding:2px 7px; border-radius:5px; font-weight:800; background:var(--cS); color:var(--c); border:1px solid var(--cL); } .gb-live{ margin-left:auto; display:flex; align-items:center; gap:4px; font-size:9.5px; font-weight:800; color:var(--green); } .gb-dot{ width:5px; height:5px; border-radius:50%; background:var(--green); } .gb-rate-row{ display:flex; align-items:flex-end; gap:8px; position:relative; } .gb-rate{ font-size:31px; font-weight:900; letter-spacing:-1.8px; line-height:.95; color:var(--c); } .gb-vs{ font-size:8.5px; padding:1.5px 6px; border-radius:4px; font-weight:800; margin-left:auto; margin-bottom:5px; } .gb-vs.up{ background:var(--green-soft); color:var(--green); } .gb-vs.dn{ background:var(--red-soft); color:var(--red); } /* 保本线进度条 */ .gb-bar{ margin-top:9px; height:6px; background:#060B14; border-radius:3px; position:relative; overflow:visible; } .gb-bar > i{ display:block; height:100%; border-radius:3px; transition: width .6s cubic-bezier(.4,0,.2,1); } .gb-be{ position:absolute; left:50.76%; top:-3px; bottom:-3px; width:2px; background:var(--red); border-radius:1px; opacity:.85; } .gb-be::after{ content:'保本'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:7px; color:var(--red); white-space:nowrap; font-weight:700; } /* ② 四格统计 */ .gb-stats{ display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); } .gbs{ padding:9px 3px; text-align:center; border-right:1px solid var(--line); } .gbs:last-child{ border-right:none; } .gbs-v{ font-size:12.5px; font-weight:900; line-height:1.2; color:var(--text); } .gbs-l{ font-size:7.5px; color:var(--text-3); margin-top:2px; } /* ③ 本期进行中 */ .gb-livebox{ padding:10px 14px; border-bottom:1px solid var(--line); background: var(--card-2); } .gl-row{ display:flex; align-items:center; gap:8px; } .gl-state{ font-size:8.5px; padding:2px 7px; border-radius:5px; font-weight:800; flex:none; } .gl-state.wait{ background:var(--orange-soft); color:var(--orange); } .gl-state.bet{ background:var(--cS); color:var(--c); } .gl-info{ flex:1; min-width:0; } .gl-issue{ font-size:10.5px; color:var(--text-2); font-weight:700; } .gl-bet{ font-size:9px; color:var(--text-3); margin-top:2px; } .gl-cd{ text-align:right; flex:none; } .gl-cd-n{ font-size:17px; font-weight:900; letter-spacing:-.6px; line-height:1.05; } .gl-cd-l{ font-size:7.5px; color:var(--text-3); margin-top:1px; } .gl-last{ display:flex; align-items:center; gap:5px; margin-top:7px; padding-top:7px; border-top:1px dashed var(--line); font-size:9.5px; color:var(--text-2); } .gl-tag{ font-size:8.5px; padding:1.5px 6px; border-radius:4px; font-weight:800; } /* ④ 记录表 */ .gb-tblhead{ display:flex; align-items:center; gap:6px; padding:11px 14px 7px; } .gb-tblt{ font-size:12px; font-weight:900; color:var(--text); } .gb-tbln{ font-size:8.5px; color:var(--text-3); background:var(--bg-2); border:1px solid var(--line); border-radius:20px; padding:2px 7px; } .gb-tblnew{ margin-left:auto; font-size:8.5px; color:var(--c); font-weight:700; } .gb-tblwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .gb-tblwrap::-webkit-scrollbar{ height:0; } .gb-tbl{ width:100%; border-collapse:collapse; min-width:330px; } .gb-tbl th{ font-size:8.5px; font-weight:700; color:var(--text-3); padding:6px 5px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--card-2); position:sticky; top:0; z-index:2; } .gb-tbl th:first-child{ text-align:left; padding-left:14px; } .gb-tbl th:last-child{ padding-right:14px; } .gb-tbl td{ padding:8px 5px; text-align:right; font-size:10.5px; border-bottom:1px solid rgba(27,39,64,.55); white-space:nowrap; color:var(--text); } .gb-tbl td:first-child{ text-align:left; padding-left:14px; color:var(--text-3); font-size:9.5px; } .gb-tbl td:last-child{ padding-right:14px; font-weight:800; } .gb-tbl tbody tr:active{ background:var(--cS); } .gb-tbl tr.pend-row{ background:var(--cS); } .gb-tbl tr.pend-row td{ color:var(--c); } .gb-ntag{ display:inline-block; font-size:7px; background:var(--c); color:#05080f; border-radius:3px; padding:0 4px; margin-left:3px; font-weight:900; vertical-align:1px; } .gb-seqt{ display:inline-block; font-size:7px; background:var(--line-2); color:var(--text-2); border-radius:3px; padding:0 4px; margin-left:3px; vertical-align:1px; } .gb-opt{ font-weight:900; font-size:11px; color:var(--text); } .gb-resw{ color:var(--green); font-weight:900; } .gb-resl{ color:var(--red); font-weight:900; } .gb-resp{ color:var(--orange); font-weight:800; font-size:9px; } .gb-resg{ color:var(--text-3); font-weight:700; font-size:9px; } /* 分页 */ .gb-pg{ display:flex; align-items:center; justify-content:space-between; padding:8px 14px; border-top:1px solid var(--line); background:var(--card-2); font-size:9.5px; color:var(--text-3); } .gb-pgbtn{ background:var(--bg-2); border:1px solid var(--line); border-radius:7px; padding:4px 11px; color:var(--text-2); font-size:10px; font-weight:700; } .gb-pgbtn.dis{ opacity:.3; } .gb-pgbtn:active:not(.dis){ background:var(--line); } .gb-pgnum{ font-variant-numeric:tabular-nums; } /* ⑤ 近 20 期分布 */ .gb-dist{ padding:10px 14px 12px; border-top:1px solid var(--line); } .gb-disth{ display:flex; align-items:center; gap:6px; margin-bottom:8px; } .gb-distt{ font-size:10.5px; font-weight:800; color:var(--text); } .gb-distlg{ margin-left:auto; display:flex; gap:8px; font-size:7.5px; color:var(--text-3); } .gb-lgd{ display:flex; align-items:center; gap:3px; } .gb-lgd > i{ width:7px; height:7px; border-radius:2px; display:block; } .gb-distg{ display:grid; grid-template-columns:repeat(10,1fr); gap:3px; } .gb-dd{ aspect-ratio:1; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:900; } .gb-dd.w{ background:var(--green-soft); color:var(--green); border:1px solid rgba(52,211,153,.30); } .gb-dd.l{ background:var(--red-soft); color:var(--red); border:1px solid rgba(251,113,133,.30); } .gb-distsum{ display:flex; gap:12px; margin-top:8px; padding-top:7px; border-top:1px solid rgba(27,39,64,.8); font-size:9px; color:var(--text-3); } .gb-distsum b{ font-weight:900; } /* ⑥ 漏下检测 */ .gb-foot{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-top:1px solid var(--line); background:var(--card-2); } .gb-fi{ width:26px; height:26px; border-radius:8px; background:var(--orange-soft); color:var(--orange); display:flex; align-items:center; justify-content:center; font-size:12px; flex:none; } .gb-ft{ font-size:10px; font-weight:800; color:var(--text-2); } .gb-fd{ font-size:8px; color:var(--text-3); margin-top:1px; } .gb-fa{ margin-left:auto; color:var(--text-4); } /* ============ 两游戏合计 ============ */ .grand{ margin:12px 0 0; border-radius:15px; padding:12px 14px; background: linear-gradient(115deg, var(--acc-soft), var(--purple-soft)); border:1px solid var(--acc-line); position:relative; overflow:hidden; } .grand::before{ content:''; position:absolute; top:-46px; right:-36px; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle, rgba(var(--acc-rgb),.20), transparent 70%); pointer-events:none; } .gr-h{ display:flex; align-items:center; gap:7px; margin-bottom:10px; position:relative; } .gr-t{ font-size:11.5px; font-weight:900; color:var(--text); letter-spacing:-.2px; } .gr-n{ margin-left:auto; font-size:8.5px; color:var(--text-3); } .gr-g{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; position:relative; } .gr-v{ font-size:16px; font-weight:900; text-align:center; line-height:1.1; color:var(--text); } .gr-l{ font-size:8px; color:var(--text-3); text-align:center; margin-top:2px; } .gr-g2{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px; padding-top:9px; border-top:1px solid rgba(27,39,64,.9); position:relative; } .gr2-v{ font-size:11.5px; font-weight:900; text-align:center; color:var(--text); } .gr2-l{ font-size:7px; color:var(--text-3); text-align:center; margin-top:1px; } /* 分游戏区块记录表：固定布局，6 列全部可见（不横向滚动） */ .gb-tbl { table-layout: fixed; width: 100%; } .gb-tbl th, .gb-tbl td { overflow: hidden; text-overflow: ellipsis; } .gb-tbl th:nth-child(1), .gb-tbl td:nth-child(1) { padding-left: 10px; } .gb-tbl th:last-child, .gb-tbl td:last-child { padding-right: 10px; } .gb-tblwrap { overflow-x: hidden; } /* ===== 分游戏区块记录表：6 列紧凑显示（覆盖旧定义） ===== */ .gb-tbl { table-layout: fixed !important; width: 100% !important; min-width: 0 !important; } .gb-tbl th, .gb-tbl td { padding: 7px 2px !important; font-size: 9.5px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gb-tbl th:first-child, .gb-tbl td:first-child { padding-left: 9px !important; } .gb-tbl th:last-child, .gb-tbl td:last-child { padding-right: 9px !important; } .gb-tbl th { font-size: 8px !important; } .gb-tbl .gb-opt { font-size: 10.5px !important; } .gb-tblwrap { overflow-x: hidden !important; } /* ============================================================================ * 🔴🔴 2026-10-17 挂机记录页筛选栏：位置修正（用户实报「位置和之前设计图也不一样」） * * ── 问题 ── * .seg 自带 padding: 0 12px 12px。我在外面又包了 .rec-seg 并再加一次 * padding: 0 12px 8px —— 左右变成 12+12=24px、上下也叠加， * 胶囊整体被往里挤、和上方标题不对齐，行距也比设计稿大。 * * ── 修法 ── * 外层 .rec-seg 只做「一行不换行 + 紧凑尺寸」，**不设任何 padding**， * 左右对齐完全交给内层 .seg 原有的 12px（与标题、卡片同一条竖线）。 * ========================================================================= */ .rec-seg { display: block; padding: 0; margin: 0; } .rec-seg > .seg { padding: 0 12px 10px; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .rec-seg > .seg::-webkit-scrollbar { display: none; } .rec-seg .seg-item { flex: none; height: 30px; padding: 0 11px; font-size: 12px; border-radius: 9px; white-space: nowrap; } .rec-seg .seg-item.active { background: var(--acc); color: #05080f; border-color: var(--acc); font-weight: 700; box-shadow: 0 0 12px rgba(var(--acc-rgb), .22); } /* 两个筛选条之间不要额外空隙（原来外层 padding-bottom 叠加造成过大间距） */ .rec-seg + .rec-seg { margin-top: 0; } /* ============================================================================ * 🔴🔴 2026-10-17 分游戏区块主题：支持任意房间数（用户实报「增加哈希13 三游戏 * 布局和显示又不对了」—— 原来只定义 .g9/.g11 两套，第 3 个房间落到兜底， * 颜色永远青色、三个区块长得一模一样） * * 每套主题只提供三个变量，区块内部所有元素都取 var(--c)/var(--cS)/var(--cL)， * 所以新增房间只要加一行 .gN 即可。 * ========================================================================= */ .g3 { --c: var(--green); --cS: var(--green-soft); --cL: rgba(52,211,153,.30); --c2: #059669; } .g4 { --c: var(--orange); --cS: var(--orange-soft); --cL: rgba(251,191,36,.30); --c2: #d97706; } .g5 { --c: #F472B6; --cS: rgba(244,114,182,.10); --cL: rgba(244,114,182,.30); --c2: #db2777; } .g6 { --c: #60A5FA; --cS: rgba(96,165,250,.10); --cL: rgba(96,165,250,.30); --c2: #2563eb; } /* ============================================================================ * 🔴🔴 2026-10-18 记录页筛选：一排横滑（用户实报「全部 横排显示不要分成两排」） * .rec-row 容器内：房间胶囊组 + 分隔线 + 模式胶囊组，整排不折行可横滑； * 内层 .seg 不再各自带 padding，统一由 .rec-row 给一条。 * ========================================================================= */ .rec-row { display: flex; align-items: center; gap: 6px; padding: 0 12px 10px; overflow-x: auto; scrollbar-width: none; } .rec-row::-webkit-scrollbar { display: none; } .rec-row .seg { display: flex; gap: 6px; padding: 0; overflow: visible; flex: none; } .rec-row .seg-item { flex: none; height: 30px; padding: 0 11px; font-size: 12px; border-radius: 9px; white-space: nowrap; } .rec-row .seg-item.active { background: var(--acc); color: #05080f; border-color: var(--acc); font-weight: 700; box-shadow: 0 0 12px rgba(var(--acc-rgb), .22); } .rec-div { width: 1px; height: 18px; background: var(--line); flex: none; margin: 0 3px; } /* ============================================================================ * 🔴🔴 2026-10-18 撤单底部选择面板（wd-*）—— 对齐设计稿 * ========================================================================= */ .wd-item { display: flex; align-items: center; gap: 11px; width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 12px 14px; margin-bottom: 8px; text-align: left; transition: .15s; } .wd-item:active { transform: scale(.985); } .wd-item.on { border-color: var(--acc); background: var(--acc-soft); box-shadow: inset 3px 0 0 var(--acc); } .wd-ico { width: 32px; height: 32px; border-radius: 9px; flex: none; background: linear-gradient(135deg, var(--acc), #0891b2); color: #05080f; font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; } .wd-main { flex: 1; min-width: 0; } .wd-n { font-size: 12.5px; font-weight: 800; color: var(--text); } .wd-tag { font-size: 8.5px; padding: 1px 6px; border-radius: 4px; background: var(--acc-soft); color: var(--acc); font-weight: 800; } .wd-d { font-size: 9.5px; color: var(--text-3); margin-top: 2px; } .wd-amt { font-size: 13px; font-weight: 900; color: var(--acc); } /* ============================================================================ * 🔴🔴 2026-10-18 清空范围选择面板（cl-*）—— 对齐设计稿 * ========================================================================= */ .cl-item { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; margin-bottom: 8px; text-align: left; transition: .15s; } .cl-item:active { transform: scale(.985); } .cl-item.on { border-color: var(--acc); background: var(--acc-soft); } .cl-item.cl-danger.on { border-color: var(--red); background: var(--red-soft); } .cl-ico { width: 33px; height: 33px; border-radius: 10px; flex: none; background: var(--acc-soft); color: var(--acc); font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center; } .cl-item.cl-danger .cl-ico { background: var(--red-soft); color: var(--red); } .cl-main { flex: 1; min-width: 0; } .cl-t { font-size: 12px; font-weight: 800; color: var(--text); } .cl-d { font-size: 9px; color: var(--text-3); margin-top: 2px; } .cl-n { text-align: right; flex: none; } .cl-v { font-size: 14px; font-weight: 900; color: var(--text); } .cl-l { font-size: 8px; color: var(--text-3); } /* ============================================================================ * 🔴🔴 2026-10-18 记录页全面放大（用户实报「间距重新调整 文字过小」） * 之前为了塞 7 列把字号压到 8~10.5px，手机上根本看不清。 * 这次：字号整体 +2px 左右、行距拉开、期号列加宽；开奖列允许换行成 * 「数字 + 大小 + 单双」的紧凑两行，避免挤压其它列。 * ========================================================================= */ .gb-tblhead { padding: 13px 14px 9px; } .gb-tblt { font-size: 13.5px; } .gb-tbln { font-size: 10px; padding: 3px 9px; } .gb-tblnew { font-size: 10px; } .gb-tbl { min-width: 0 !important; } .gb-tbl th { font-size: 10px !important; padding: 8px 4px !important; } .gb-tbl th:first-child, .gb-tbl td:first-child { padding-left: 12px !important; } .gb-tbl th:last-child, .gb-tbl td:last-child { padding-right: 12px !important; } .gb-tbl td { padding: 11px 4px !important; font-size: 12.5px !important; line-height: 1.35; } .gb-tbl td:first-child { font-size: 11.5px !important; } .gb-tbl .gb-opt { font-size: 13px !important; } .gb-resw, .gb-resl { font-size: 12px !important; } .gb-resp, .gb-resg { font-size: 11px !important; } /* 四格统计字号 */ .gbs-v { font-size: 14px !important; } .gbs-l { font-size: 9px !important; } /* 头部命中率 */ .gb-rate { font-size: 34px !important; } .gb-vs { font-size: 10px !important; } .gb-name { font-size: 15.5px !important; } .gb-mode { font-size: 10px !important; } .gb-live { font-size: 10.5px !important; } /* 本期进行中 */ .gl-issue { font-size: 12px !important; } .gl-bet { font-size: 10.5px !important; } .gl-cd-n { font-size: 20px !important; } .gl-cd-l { font-size: 9px !important; } .gl-last { font-size: 11px !important; } .gl-tag { font-size: 10px !important; } /* 分布 */ .gb-distt { font-size: 12px !important; } .gb-distlg { font-size: 9px !important; } .gb-dd { font-size: 9.5px !important; } .gb-distsum { font-size: 10.5px !important; } /* 漏下检测入口 */ .gb-fi { width: 32px; height: 32px; border-radius: 9px; font-size: 14px; } .gb-ft { font-size: 12.5px !important; } .gb-fd { font-size: 10px !important; } /* 分页 */ .gb-pgbtn { font-size: 11.5px !important; padding: 6px 13px !important; } .gb-pgnum { font-size: 10.5px !important; } /* 合计卡 */ .gr-t { font-size: 13px !important; } .gr-v { font-size: 18px !important; } .gr-l { font-size: 9.5px !important; } .gr2-v { font-size: 13px !important; } .gr2-l { font-size: 8.5px !important; } /* ============================================================================ * 🔴🔴 2026-10-18 撤单/清空面板：字号放大 + 跟随主题色（用户实报 * 「撤单文字过小 没有跟随主题 清空数据也是一样不好看」） * ========================================================================= */ /* 撤单面板 */ .wd-item { padding: 13px 14px; border-radius: 14px; margin-bottom: 9px; } .wd-item.on { border-color: var(--acc); background: var(--acc-soft); box-shadow: inset 3px 0 0 var(--acc); } .wd-ico { width: 36px; height: 36px; font-size: 13px; border-radius: 10px; background: linear-gradient(135deg, var(--c, var(--acc)), var(--acc)); color: #05080f; } .wd-n { font-size: 14px; } .wd-tag { font-size: 9.5px; padding: 2px 7px; } .wd-d { font-size: 11px; margin-top: 3px; } .wd-amt { font-size: 15px; } /* 清空面板：跟随每个游戏的主题色 */ .cl-item { padding: 13px 14px; border-radius: 13px; margin-bottom: 9px; } .cl-item.on { border-color: var(--acc); background: var(--acc-soft); box-shadow: inset 3px 0 0 var(--acc); } .cl-ico { width: 37px; height: 37px; font-size: 14px; border-radius: 11px; background: var(--acc-soft); color: var(--acc); } .cl-t { font-size: 13.5px; } .cl-d { font-size: 10.5px; margin-top: 3px; } .cl-v { font-size: 16px; } .cl-l { font-size: 9px; } /* 面板标题与说明文字 */ .sheet-head h3 { font-size: 17px !important; } .mask .tiny { font-size: 11px !important; } .mask .btn-primary, .mask .btn-ghost { font-size: 14px !important; } /* 🔴 2026-10-19 批量启动页：多游戏摘要行样式 */ .lp-sub { padding-left: 10px; opacity: .92; } .lp-sub .lp-k { color: var(--acc); font-weight: 700; } .lp-note { margin-left: auto; font-size: 9.5px; color: var(--orange); font-weight: 600; white-space: nowrap; } /* ============================================================================ * 🔴 2026-10-19 挂机记录表：固定框架 + 无痕加载（用户实报： * 「操作记录预测加载不流畅和卡顿」「固定框架 别让预测调整的时候框架变动」） * 做法： * ① 表格布局固定（table-layout:fixed + 列宽百分比）→ 内容长短不改列宽； * ② 单元格高度固定 → 行数增减不改变行高、整表不跳； * ③ overflow 隐藏文本但不改变盒子尺寸 → 不触发外层重排； * ④ 表格容器 min-height 兜底 → 首帧空态与有数据态高度一致， * 数据到达时不「忽大忽小」。 * ========================================================================= */ .gb-tbl { table-layout: fixed !important; } .gb-tbl th { height: 30px; box-sizing: border-box; } .gb-tbl td { height: 38px; box-sizing: border-box; vertical-align: middle; } /* 区块内容区先占位，避免数据到达时页面高度突变导致滚动位置跳动 */ .gb-tblwrap { min-height: 12px; } /* 本轮行与数据行同高，替换时行高一致 */ .gb-tbl tr.pend-row td { height: 38px; } /* 🔴 2026-10-19 挂机记录：跳过的期（连败打断/距开奖不足等）显式画出来。 为什么需要：跳过的期没有记录，LLL[跳]LLL 看起来就是一条长连败， 用户会误判「打断没生效、连败太多」。灰行让「哪里断了一次」一目了然。 纯展示：不参与命中率/盈亏统计。 */ .gb-tbl tr.skip-row td { color: var(--text-3); font-style: italic; opacity: .72; } .gb-tbl tr.skip-row { background: transparent; } .gb-tbl tr.skip-row .gb-opt { font-style: italic; } /* 🔴 2026-10-19 挂机记录「跳过行」的结果列： 「连败打断」4 个汉字在原 gb-resp 的样式下被单元格裁掉（浏览器实测发现）。 单独给一个类：字号略小、允许换行、不裁剪 —— 宁可换行也不切字。 */ .gb-tbl td.gb-resp-skip { font-size: 9.5px; color: var(--text-3); white-space: normal !important; line-height: 1.25; text-align: center; }