/* Self-hosted (privacy + offline PWA). "高端交易终端" — Space Grotesk display + IBM Plex Mono figures; CJK body falls through to the system stack. */ @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/fonts/space-grotesk-latin.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-mono-600.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/ibm-plex-mono-700.woff2") format("woff2"); } :root { color-scheme: dark; /* type */ --display: "Space Grotesk", "PingFang SC", "Hiragino Sans GB", sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; /* spacing + radius */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 28px; --s8: 36px; --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 26px; --r-pill: 999px; /* ink / charcoal base */ --ink: #05070b; --bg: #080b11; --bg-2: #0b0f16; --panel: #10151f; --panel-2: #141b27; --panel-3: #19222f; --panel-strong: #141b27; --hairline: rgba(255,255,255,.07); --hairline-2: rgba(255,255,255,.12); --hairline-strong: rgba(255,255,255,.18); --line: rgba(255,255,255,.07); /* text */ --text: #eef3f7; --text-2: #aebbc8; --muted: #859ab0; --faint: #8390a4; /* charged accents */ --emerald: #2fe39a; --emerald-deep: #11b97b; --emerald-glow: rgba(47,227,154,.55); --emerald-soft: rgba(47,227,154,.12); --emerald-line: rgba(47,227,154,.30); --red: #ff5d6c; --red-deep: #e23b4c; --red-glow: rgba(255,93,108,.45); --red-soft: rgba(255,93,108,.12); --red-line: rgba(255,93,108,.28); /* financial gain/loss — semantic SIGN colors, swappable by the 涨跌色 pref. Default (no data-pref-color / "us") = green up, red down. ONLY profit/loss signs use these; semantic success/danger + YES/NO outcome keep --emerald/--red and never flip. */ --gain: #2fe39a; --gain-deep: #11b97b; --gain-glow: rgba(47,227,154,.55); --gain-soft: rgba(47,227,154,.12); --gain-line: rgba(47,227,154,.30); --loss: #ff5d6c; --loss-deep: #e23b4c; --loss-glow: rgba(255,93,108,.45); --loss-soft: rgba(255,93,108,.12); --loss-line: rgba(255,93,108,.28); --amber: #ffb444; --amber-deep: #e8920f; --amber-soft: rgba(255,180,68,.13); --amber-line: rgba(255,180,68,.34); --focus: rgba(47,227,154,.40); /* type scale */ --t-hero: 54px; --t-xl: 30px; --t-lg: 21px; --t-md: 16px; --t-sm: 13px; --t-xs: 11px; --t-2xs: 10px; } /* 红涨绿跌 (China convention) — swap ONLY the financial gain/loss family. Everything semantic (success/danger buttons, status banners, error cards, YES/NO market outcome) stays on --emerald/--red and is unaffected. Set pre-paint by prefs.js on . */ html[data-pref-color="cn"] { --gain: #ff5d6c; --gain-deep: #e23b4c; --gain-glow: rgba(255,93,108,.45); --gain-soft: rgba(255,93,108,.12); --gain-line: rgba(255,93,108,.28); --loss: #2fe39a; --loss-deep: #11b97b; --loss-glow: rgba(47,227,154,.55); --loss-soft: rgba(47,227,154,.12); --loss-line: rgba(47,227,154,.30); } * { box-sizing: border-box; } /* hidden attribute must win over component display rules (e.g. .lock-note) */ [hidden] { display: none !important; } body { margin: 0; background: radial-gradient(1100px 700px at 18% -6%, #0f1622 0%, transparent 60%), radial-gradient(900px 600px at 90% 110%, #0c121b 0%, transparent 55%), var(--ink); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* CJK body via the system face; Latin display/figures via the webfonts */ font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; letter-spacing: 0; } a { color: inherit; } button, input, select, textarea { font: inherit; } /* Hide the native number-input spinner arrows everywhere — they clash with the dark custom UI and are redundant (users type the amount; quick-amount chips cover stepping). Affects 下注/提现金额 + 设置风控 + 手动下单 inputs. */ input[type="number"] { -moz-appearance: textfield; appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } button { cursor: pointer; } button:disabled { cursor: not-allowed; opacity: 0.55; } .auth-shell { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: clamp(16px, 6vw, 24px); overflow-x: hidden; } .auth-panel { width: 100%; max-width: 420px; min-width: 0; padding: clamp(20px, 6vw, 28px); /* background / border / radius / shadow come from the dark-theme .auth-panel block below */ } /* pre-auth language switcher (login / restricted) */ .lang-row { display: flex; justify-content: flex-end; margin-bottom: var(--s2); } .lang-switch { width: auto; min-width: 0; min-height: 36px; padding: 6px 28px 6px 10px; font-size: 13px; color: var(--text-2); background-color: transparent; border-color: var(--line); border-radius: var(--r-sm); } .brand-row { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; } .brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: var(--text); color: #fff; font-weight: 800; } h1, h2, p { margin: 0; } h1 { font-family: var(--display); font-size: 28px; font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; } h2 { font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } p, small { color: var(--muted); } .primary-action, .secondary-action, .google-action, .ghost-button, .inline-button { min-height: 44px; border-radius: var(--r-sm); border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; text-decoration: none; font-weight: 650; white-space: nowrap; } .primary-action { width: 100%; background: var(--emerald); color: var(--ink); font-weight: 750; } .primary-action:hover { background: var(--emerald-deep); } .google-action { width: 100%; background: #ffffff; color: #0d121b; border-color: var(--line); margin-bottom: 4px; } .google-action:hover { background: #eef1f5; } .google-action.disabled, .google-action[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } /* Sign in with Apple — black button per Apple's guidelines (shares the layout rules below via the explicit selector list update). */ .apple-action { min-height: 44px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; width: 100%; background: #000000; color: #ffffff; border: 1px solid #000000; text-decoration: none; font-weight: 650; white-space: nowrap; margin-bottom: 4px; } .apple-action:hover { background: #1a1a1a; } .apple-action[hidden] { display: none; } .secondary-action { background: var(--panel); color: var(--text); border-color: var(--line); } .secondary-action:hover, .ghost-button:hover, .inline-button:hover { background: var(--panel-strong); } .button-reset { appearance: none; } .ghost-button, .inline-button { background: transparent; color: var(--text); border-color: var(--line); } .inline-button { width: max-content; min-height: 32px; padding: 0 10px; font-size: 13px; } .divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 22px 0; } .divider::before, .divider::after { content: ""; height: 1px; background: var(--line); } .stack-form { display: grid; gap: 16px; } label { display: grid; gap: 7px; color: var(--text-2); font-size: 14px; font-weight: 650; } input, select, textarea { width: 100%; border: 1px solid var(--hairline-2); border-radius: var(--r-xs); background: var(--panel-2); color: var(--text); padding: 10px 11px; outline: none; } textarea { resize: vertical; } input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .status-line { min-height: 20px; margin-top: 16px; font-size: 14px; } .status-line.error { color: var(--red); } .topbar { height: 64px; display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(80px, 1fr); align-items: center; gap: 18px; padding: 0 24px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; } /* onboarding has no center nav — 2-col so 退出 stays pinned right, not mid-bar */ body[data-page="onboarding"] .topbar { grid-template-columns: 1fr auto; } .wordmark { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: 0.2px; text-decoration: none; } .topnav { display: flex; align-items: center; gap: 4px; background: var(--panel-strong); border-radius: 8px; padding: 4px; } .topnav a { min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 6px; color: var(--muted); text-decoration: none; font-weight: 650; white-space: nowrap; /* never break a tab label mid-word */ } .topnav a:hover { background: var(--panel-2); color: var(--text); } .topnav a.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .topbar .ghost-button { justify-self: end; } .page-shell { width: min(1080px, 100%); margin: 0 auto; padding: 28px 24px 48px; display: grid; grid-template-columns: minmax(0, 1fr); /* 0-min so children never overflow on long nowrap content */ gap: 20px; } .page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; } .page-heading p { margin-top: 8px; } .grid { display: grid; gap: 14px; } .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metric-card { min-height: 124px; display: grid; gap: 10px; align-content: start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; } .metric-card span, .balance-row span { color: var(--muted); font-size: 13px; font-weight: 700; } .metric-card strong, .address-box { overflow-wrap: anywhere; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; line-height: 1.55; } .work-surface { display: grid; gap: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; } .surface-header { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; } .surface-header p { margin-top: 6px; } .state-pill { min-height: 30px; display: inline-flex; align-items: center; border-radius: 999px; padding: 0 10px; background: var(--emerald-soft); color: var(--emerald); font-size: 13px; font-weight: 750; white-space: nowrap; } .state-pill.danger { background: var(--red-soft); color: var(--red); } /* Neutral / in-progress state (生成中 · 计算中 · 待确认 · 提现中) — not a success, shouldn't read green. Green base stays for genuine "ready/done" states. */ .state-pill.pending { background: var(--panel-3); color: var(--text-2); } .danger-action { color: var(--red); border-color: var(--red-line); } .danger-action:hover { background: var(--red-soft); } .address-box { min-height: 58px; display: flex; align-items: center; border: 1px dashed var(--hairline-2); border-radius: var(--r-sm); background: var(--panel-2); padding: 14px; color: var(--text); } .action-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .action-row.end { justify-content: flex-end; } .balance-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding-top: 14px; border-top: 1px solid var(--line); } .balance-row strong { font-size: 22px; } /* zero-balance nudge under the balance row */ .balance-hint { margin: 10px 0 0; padding: 10px 12px; font-size: 13px; line-height: 1.5; color: var(--amber); background: rgba(255, 180, 68, 0.08); border: 1px solid rgba(255, 180, 68, 0.24); border-radius: var(--r-sm); } /* deposit network/asset warning — the wrong chain or token loses funds */ .deposit-warn { font-size: 13px; font-weight: 600; line-height: 1.55; color: var(--amber); background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: var(--r-sm); padding: 12px 14px; } .deposit-warn b { color: var(--amber); font-weight: 800; } /* small clarifying note under an account-identity card */ .card-note { font-size: 12px; color: var(--faint); font-weight: 600; line-height: 1.4; } .deposit-list { display: grid; gap: 10px; } .deposit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; background: var(--panel-2); } .deposit-meta { min-width: 0; display: grid; gap: 4px; } .deposit-meta span, .asset-panel-header span { color: var(--muted); font-size: 13px; font-weight: 750; } .deposit-meta strong { overflow-wrap: anywhere; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 13px; line-height: 1.45; } .deposit-meta small { font-size: 12px; } .deposit-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .asset-panel { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); } .asset-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .asset-panel-header strong { color: var(--muted); font-size: 13px; } .asset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .asset-grid.error { color: var(--red); } .asset-chip { min-width: 0; display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 6px; padding: 10px; background: var(--panel-2); } .asset-chip strong { font-size: 13px; line-height: 1.35; } .asset-chip span { overflow-wrap: anywhere; color: var(--muted); font-size: 12px; } .wide-form { max-width: 760px; } .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); cursor: pointer; /* whole row is a — signal it's tappable */ } .toggle-row span { display: grid; gap: 4px; } /* CSS-only switch(track+thumb):原生 checkbox 拉到 44×24 选中是系统蓝勾、未选近乎隐形, 和旁边 select 不成体系 → 全站 .toggle-row 统一成 iOS 式开关,on 色用 --gain(随涨跌色偏好)。特异性踩点:后文 .section-card label{display:grid} / .section-card input{min-height/padding/ background/border} 会压过单类选择器 → 行布局用 .section-card label.toggle-row 拉回 flex, 开关用 input[type="checkbox"] 提一级并把被覆盖的属性全部显式归零。 */ .section-card label.toggle-row { display: flex; /* keep text left / switch right inside section cards too */ } .toggle-row input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 44px; height: 24px; min-height: 0; padding: 0; border: 0; /* flex:none(非 0 0 44px):手机端媒体查询把 .toggle-row 翻成 column,行向 basis 会变成高度 */ flex: none; margin: 0; position: relative; border-radius: 999px; background: var(--hairline-strong); cursor: pointer; transition: background-color 0.18s ease; } .toggle-row input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text); transition: transform 0.18s ease; } .toggle-row input[type="checkbox"]:checked { background: var(--gain); } .toggle-row input[type="checkbox"]:checked::after { transform: translateX(20px); } .toggle-row input[type="checkbox"]:focus { outline: none; } .toggle-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* Custom checkbox for confirmation gates (.checkrow = 提现确认 + 设置 go-live 三连勾; .bet-gate = 市场下注弹层). Replaces the raw system-blue square so money-action gates match the brand. Specificity (.checkrow + [type]) beats .section-card input. NOT .toggle-row (those are the iOS switches). */ .checkrow input[type="checkbox"], .bet-gate input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: 0 0 20px; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; border: 1.5px solid var(--hairline-strong); border-radius: 6px; background: var(--panel-2); cursor: pointer; position: relative; transition: background-color 0.15s ease, border-color 0.15s ease; } .checkrow input[type="checkbox"]:checked, .bet-gate input[type="checkbox"]:checked { background: var(--emerald); border-color: var(--emerald); } .checkrow input[type="checkbox"]:checked::after, .bet-gate input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); } .checkrow input[type="checkbox"]:focus-visible, .bet-gate input[type="checkbox"]:focus-visible { outline: 2px solid var(--emerald-line); outline-offset: 2px; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } /* Data tables (leaderboard, positions). Desktop: clean rows; mobile: cards. */ .data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .data-table th, .data-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; } .data-table thead th { font-size: 0.82rem; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); } .data-table tbody tr:last-child td { border-bottom: 0; } .data-table .pos { color: var(--gain); } .data-table .neg { color: var(--loss); } /* App-wide profit/loss semantics + tabular money figures. Color belongs to the value's sign everywhere, not only inside tables. */ .pos { color: var(--gain); } .neg { color: var(--loss); } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } @media (max-width: 760px) { .topbar { height: auto; grid-template-columns: 1fr; justify-items: stretch; padding: 14px; } .topbar .ghost-button { justify-self: stretch; } /* 5 tabs don't fit 390px — make the bar a single swipeable strip instead of wrapping. Tabs keep full size; the row scrolls horizontally. */ .topnav { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ max-width: 100%; } .topnav::-webkit-scrollbar { display: none; /* WebKit/Blink */ } .topnav a { flex: 0 0 auto; } .page-shell { padding: 20px 14px 36px; } .page-heading, .surface-header, .toggle-row { align-items: stretch; flex-direction: column; } .grid.two, .form-grid, .asset-grid { grid-template-columns: 1fr; } .deposit-row { grid-template-columns: 1fr; } .deposit-actions { justify-content: stretch; } .deposit-actions .inline-button { width: 100%; } /* finger-friendly touch targets for copy/check beside money addresses */ .inline-button { min-height: 44px; font-size: 14px; } .primary-action, .secondary-action, .ghost-button { width: 100%; } /* Tables → one card per row. Headers are hidden; each cell shows its own label via data-label so a 6-column financial table stays readable at 390px. */ .data-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; } .data-table tr { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; padding: 4px 0; background: var(--panel); } .data-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 9px 14px; text-align: right; white-space: normal; overflow-wrap: anywhere; } .data-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.82rem; font-weight: 600; text-align: left; flex: 0 0 auto; } /* Action cell (data-label="") and full-width empty/loading rows: no label. */ .data-table td[data-label=""] { justify-content: stretch; } .data-table td[colspan] { justify-content: center; text-align: center; color: var(--muted); } .data-table td[data-label=""]::before, .data-table td[colspan]::before { content: none; } .data-table td[data-label=""] .ghost-button { width: 100%; } } /* ============================================================================ Native app shell: bottom tab bar (mobile), touch polish, safe-area insets, standalone PWA tweaks. Desktop is unaffected (tab bar hidden ≥761px). ========================================================================== */ /* Touch / native feel for all surfaces. */ * { -webkit-tap-highlight-color: transparent; } html { -webkit-text-size-adjust: 100%; /* 原生 app 体验:封掉捏合/双击缩放(只留单指平移)。与 viewport 的 user-scalable=no 双保险——iOS Safari 浏览器标签页会无视 meta(无障碍策略),手势层这条仍然生效; PTR(下拉刷新)/横滑导航都是 pan,不受影响。 */ touch-action: pan-x pan-y; } body { overscroll-behavior-y: none; } a, button, .tabbar-item { -webkit-touch-callout: none; } /* 提示收纳(tips):.tipify 辅助小字默认隐藏(仅 JS 转换过的,渐进增强),点 ⓘ 原位弹气泡。 */ .tipify[data-tipified] { display: none; } .tipify[data-tipified].open { display: block; background: var(--panel-2); border: 1px solid var(--hairline-2); border-radius: 9px; padding: 8px 11px; margin-top: 7px; } .tip-btn { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; flex: none; margin-left: 6px; padding: 0; border-radius: 50%; border: 1px solid var(--hairline-strong); background: transparent; color: var(--faint); font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; position: relative; top: -1px; } /* The visible "?" stays 17px, but the tappable area is expanded to ~44px (iOS/WCAG touch-target floor) via a transparent overlay so it isn't a fiddly fingertip miss. */ .tip-btn::before { content: ""; position: absolute; inset: -13px; } .tip-btn[aria-expanded="true"] { color: var(--emerald); border-color: var(--emerald); } /* Pressed feedback (native-like tactile response). */ .primary-action, .secondary-action, .ghost-button, .inline-button { transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease; } .primary-action:active, .secondary-action:active, .ghost-button:active, .inline-button:active { transform: scale(0.97); } /* Bottom tab bar — injected by app-chrome.js; shown only on mobile. */ .tabbar { display: none; } .tabbar-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1 1 0; padding: 8px 0 4px; color: var(--muted); text-decoration: none; font-size: 0.7rem; font-weight: 650; letter-spacing: 0.01em; transition: color 0.12s ease, transform 0.08s ease; } .tabbar-item svg { width: 24px; height: 24px; } .tabbar-item.active { color: var(--emerald); } .tabbar-item:active { transform: scale(0.92); } @media (max-width: 760px) { /* Compact mobile title bar — kept only on pages that get NO bottom tab bar (just onboarding: app-chrome.js skips the bar there). The wordmark is a home link and 退出 is the funnel's escape, so the page still has navigation. */ .topbar .topnav { display: none; } .topbar { grid-template-columns: 1fr auto; height: 56px; padding: 0 16px; } .topbar .ghost-button { justify-self: end; width: auto; padding: 8px 14px; } /* Pages WITH the bottom tab bar: the top header just duplicates the tab bar, so drop it; 退出 now lives in 设置. The page content then owns the status-bar / notch inset the header used to carry. The data-page set is exactly app-chrome.js's tab-injection set (has-tabbar) — and it's static HTML, so the header never flashes in before a deferred script can hide it. */ body[data-page="leaderboard"] .topbar, body[data-page="markets"] .topbar, body[data-page="wallet"] .topbar, body[data-page="pnl"] .topbar, body[data-page="settings"] .topbar, body[data-page="trader"] .topbar, body[data-page="trade"] .topbar { display: none; } body[data-page="leaderboard"] .page-shell, body[data-page="markets"] .page-shell, body[data-page="wallet"] .page-shell, body[data-page="pnl"] .page-shell, body[data-page="settings"] .page-shell, body[data-page="trader"] .page-shell, body[data-page="trade"] .page-shell { padding-top: calc(20px + env(safe-area-inset-top)); } .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; /* Fully opaque instead of backdrop-filter blur (blur repaints the bar every scroll frame as content passes under it — a major mobile jank source). The old 97% mix let bright PnL/usernames bleed ~3% through and clash with the tab labels; a solid surface kills the bleed at zero repaint cost. */ background: var(--panel); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } /* iOS Safari:聚焦文本输入弹出软键盘时,固定底栏会被键盘顶得乱漂。打字时本就用不到底部导航 —— 直接隐藏,从根上避开键盘 vs 固定栏的冲突。(focusin/out 切 body.kb-open) */ body.kb-open .tabbar { display: none; } /* ★ App-shell:整页不滚 → .page-shell 内部滚动 → 固定底栏在「文档滚动」之外。 iOS 动量滚动只发生在内层容器里,固定底栏(相对视口、文档不动)不再被主线程滞后重绘 = 不再「漂」。这是 fixed 底栏滚动漂移的根治法。自定义下拉刷新的 scroller 已改指向 .page-shell(app-chrome.js)。 */ body.has-tabbar { overflow: hidden; height: 100dvh; } body.has-tabbar .page-shell { position: fixed; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: none; /* 关掉入场动画(screen-in):它 fill:both 会在滚动容器上残留一个 transform, 既让 page-shell 成为内部 fixed 后代的包含块(埋雷),又触发 iOS「transform + overflow:auto + -webkit-overflow-scrolling」的动量滚动重绘 glitch。滚动容器要干净。 */ animation: none; /* 底栏仍固定在视口底部覆盖内容 → 给内容留出底栏高度,末项不被遮 */ padding-bottom: calc(72px + env(safe-area-inset-bottom)); } /* The sticky 跟单/CTA bar (e.g. trader 详情「跟单 TA」) must sit ABOVE the fixed tabbar, not under it — both were bottom:0 so the z-index:40 tabbar covered the button on a scrolled page. Anchor it to the tabbar height (~56px content) so it stays flush-above and tappable; z-index:41 wins any sub-pixel overlap. Only here (≤760px) — on desktop the tabbar is display:none and bottom:0 is correct. */ body.has-tabbar .follow-bar { bottom: calc(56px + env(safe-area-inset-bottom)); padding-bottom: 12px; z-index: 41; } /* App-shell:.page-shell 成为滚动容器后,它的 padding-bottom(给底栏留的空)会把 sticky follow-bar 的参考线上移同样的量 → 按钮悬在底栏上方一大段空隙。有 follow-bar 的详情页本身用 sticky bottom 顶在底栏上方,不需要这段 padding → 清掉,按钮重新贴齐底栏。 */ body[data-page="trader"].has-tabbar .page-shell { padding-bottom: env(safe-area-inset-bottom); } /* No iOS auto-zoom on focus (inputs must be ≥16px). */ input, select, textarea { font-size: 16px; } } /* Installed PWA: pad the top bar under the status bar / notch. */ @media (display-mode: standalone) { .topbar { padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); } } /* ============================================================================ Native-feel motion: cross-page transitions, content entrance, skeletons, pull-to-refresh. All progressive + reduced-motion aware. ========================================================================== */ /* Cross-document view transitions: a native cross-fade between pages so the multi-page nav doesn't flash. Re-enabled now that pages are lighter (perf pass) and static assets are cached (no per-nav re-download), so the snapshot is cheap. */ @view-transition { navigation: auto; } /* Content entrance on each page (fallback + complement). */ .page-shell { animation: screen-in 0.26s ease both; } @keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Skeleton loading placeholders (shimmer). */ .skeleton { position: relative; overflow: hidden; background: color-mix(in srgb, var(--line) 55%, var(--panel-strong)); border-radius: 6px; } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, color-mix(in srgb, #fff 60%, transparent), transparent ); animation: shimmer 1.25s infinite; } @keyframes shimmer { to { transform: translateX(100%); } } .skeleton-line { height: 12px; margin: 9px 0; } .skeleton-row td { padding: 14px !important; } .skeleton-stack { display: grid; gap: 4px; width: 100%; } /* Skeleton cells opt out of the mobile card flex/centering so the bars fill. */ @media (max-width: 760px) { .data-table tr.skeleton-row td[colspan] { display: block; text-align: left; } } /* Pull-to-refresh indicator (mobile; injected by app-chrome.js). */ .ptr-indicator { position: fixed; top: -46px; left: 50%; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); display: grid; place-items: center; opacity: 0; z-index: 50; pointer-events: none; } .ptr-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--emerald); } .ptr-indicator.ready .ptr-spinner { border-top-color: var(--emerald); } .ptr-indicator.loading .ptr-spinner { animation: ptr-spin 0.7s linear infinite; } @keyframes ptr-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .page-shell { animation: none; } .skeleton::after, .ptr-indicator.loading .ptr-spinner { animation: none; } /* Strong transform/opacity motion the 3 rules above missed — vestibular-disorder triggers, and a money app should let users turn off the flashy stuff: settlement confetti, the pulsing live/kill rings, the activation spinner, the clock tick. Elements stay (just static). JS-driven confetti/countUp also self-gate via matchMedia. */ .confetti, .win-sheet .burst, .live-dot::after, .killswitch .pulse::after, .act-step.active .act-ic::after, .ks-uptime .clock .tk { animation: none !important; } @view-transition { navigation: none; } } /* ============================================================ Copytrade safety state machine + result cards (redesign) All colors via tokens so light/dark both work. ============================================================ */ /* Persistent status banner — the user always knows sim vs real money. */ .status-banner { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel-strong); font-weight: 700; } .status-banner .sb-text { display: grid; gap: 2px; } .status-banner .sb-text small { font-weight: 600; color: var(--muted); } .status-banner.sim { background: var(--emerald-soft); border-color: transparent; color: var(--emerald); } .status-banner.live { background: var(--amber-soft); border-color: transparent; color: var(--amber); } .status-banner.paused { background: var(--red-soft); border-color: transparent; color: var(--red); } .status-banner.sim .sb-text small, .status-banner.live .sb-text small, .status-banner.paused .sb-text small { color: inherit; opacity: 0.8; } .live-dot { position: relative; width: 10px; height: 10px; border-radius: 999px; flex: none; background: currentColor; } /* compositable pulse ring — transform+opacity only (GPU, no per-frame repaint) */ .live-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; will-change: transform, opacity; animation: pulse-ring 1.8s ease-out infinite; } @keyframes pulse-ring { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.8); opacity: 0; } } /* ─────────────────────────────────────────────────────────────── 设置页 Binance 风格分组列表（scoped 新类，勿全局复用 .section-card 等）。顶层=灰组头 + 行(label 左 / 概览值 + › 右 / 发丝分隔)；点行打开底部抽屉编辑。抽屉沿用 .sheet/.sheet-card；抽屉内表单沿用既有 .section-card/.field-help。 ─────────────────────────────────────────────────────────────── */ /* 账户头：邮箱 + 状态横幅（横幅由 app.js 维护，这里只把它压紧排在右侧） */ .set-acct { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 2px var(--s4); border-bottom: 1px solid var(--line); margin-bottom: 2px; flex-wrap: wrap; } .set-acct-em { margin: 0; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; flex: 1 1 auto; min-width: 0; } .set-acct .status-banner { padding: var(--s2) var(--s3); flex: 0 0 auto; font-size: 12px; } .set-acct .status-banner .sb-text small { display: none; } /* 行内紧凑：副标题留给抽屉/执行行 */ /* 灰组头（Binance 分组标签） */ .set-group-h { font-size: 12px; color: var(--faint); font-weight: 600; letter-spacing: .02em; margin: var(--s5) 2px var(--s2); } /* 行容器 */ .set-list { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); /* overflow:clip(不是 hidden):.page-shell 是 grid,这些 .set-list 是 grid item。overflow:hidden 会让 grid item 成为「滚动容器」→ 其自动最小尺寸=0 → WebKit(iOS Safari) 把行高算成 0、整组塌成 2px(只剩边框)、行被裁不可见也点不到(Blink 不塌、故只在 iOS 复现)。clip 同样按圆角裁切但【不是滚动容器】→ 不塌。 (Safari<16 不支持 clip 则回退 visible=行照常显示、仅圆角不裁,可接受;绝不再塌。) */ overflow: clip; } /* 单行：button / a / label / section 都可，统一 flex 布局 + 发丝分隔 */ .set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; text-align: left; box-sizing: border-box; padding: 14px var(--s4); min-height: 56px; background: transparent; border: none; border-bottom: 1px solid var(--line); color: var(--text); font: inherit; cursor: pointer; text-decoration: none; -webkit-appearance: none; appearance: none; } .set-list > .set-row:last-child { border-bottom: none; } .set-row:hover { background: var(--panel-2); } .set-row:active { background: var(--panel-3); } .set-row:focus-visible { outline: 2px solid var(--emerald); outline-offset: -2px; } .set-row .srl { display: grid; gap: 3px; font-size: 15px; font-weight: 600; min-width: 0; } .set-row .srl small, .set-row .srl .field-help { display: block; font-size: 12px; font-weight: 400; color: var(--faint); margin: 0; overflow-wrap: anywhere; } .set-row .srl strong { font-weight: 600; } .set-row .srr { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; color: var(--faint); font-size: 14px; } .set-row .srv { color: var(--text-2); font-weight: 500; max-width: 56vw; text-align: right; overflow-wrap: anywhere; } .set-row .chev { color: var(--faint); font-size: 18px; line-height: 1; } /* 多行块行（提现保护卡：左文案 + 右按钮，不可点开抽屉） */ .set-row.set-row-block { cursor: default; align-items: center; } .set-row.set-row-block:hover { background: transparent; } .set-row.set-row-block .srl { gap: 4px; } /* 退出登录：红色 */ .set-row-danger .srl, .set-row-danger .srl span { color: var(--red); font-weight: 700; } .set-row-danger .chev { color: var(--red); } /* 行内开关行（下单确认 / 自动翻译）：复用 checkbox，渲成 iOS/Binance 式开关 */ .set-row.set-row-tg { cursor: pointer; } .set-tg { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; flex: 0 0 auto; width: 44px; min-width: 44px; height: 26px; border-radius: 999px; background: var(--panel-3); border: 1px solid var(--line); position: relative; cursor: pointer; transition: background .15s; outline: none; } .set-tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; } .set-tg:checked { background: var(--gain); border-color: transparent; } .set-tg:checked::after { left: 20px; } .set-tg:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; } /* tk-group 在安全列表内时去掉自身外边距冲突，并撑满一行 */ .set-list .tk-group { padding: 0 var(--s4) var(--s4); } .set-list #passkey-card { border-bottom: 1px solid var(--line); } /* 抽屉内被搬进来的 section-card：去掉重复边框/留白，贴合 sheet-card */ .sheet-card .edit-body { border: none; background: transparent; padding: 0; margin: 0; border-radius: 0; gap: var(--s4); } .sheet-card .edit-body > h2 { margin-top: 0; } /* Grouped sections with plain-language help. */ .section-card { display: grid; gap: var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s5); } .section-card > h2 { font-size: 16px; } .section-card label { display: grid; gap: 6px; font-weight: 650; color: var(--text); } .section-card input, .section-card textarea, .section-card select { min-height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); color: var(--text); padding: 0 12px; font-weight: 600; } .section-card textarea { padding: 10px 12px; min-height: 88px; } .field-help { font-size: 13px; font-weight: 500; color: var(--faint); overflow-wrap: anywhere; } .field-help b { color: var(--muted); font-weight: 700; } /* Locked-while-live fields. */ .section-card.locked input, .section-card.locked textarea, .section-card.locked select { opacity: 0.6; cursor: not-allowed; } .lock-note { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--amber); } /* Execution / real-money zone. */ .exec-card { border-color: var(--amber); } .btn-block { width: 100%; min-height: 52px; border-radius: var(--r-md); border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--display); font-size: 17px; font-weight: 800; cursor: pointer; transition: filter .12s, transform .05s; } /* press feedback on the money / go-live CTAs (mobile has no hover) */ .btn-block:not(:disabled):active { transform: scale(0.97); } .btn-live { background: linear-gradient(160deg, #ffc874, var(--amber-deep)); color: #160f02; font-weight: 800; box-shadow: 0 10px 24px -12px rgba(255,180,68,.6); } .btn-live:hover { filter: brightness(1.04); } /* Neutral-affirmative block button (brand green). Use for benign confirms (e.g. the filter sheet's 应用) so the amber btn-live stays reserved for real-money / go-live actions and isn't overloaded onto harmless taps. --emerald, not --gain, so it never flips to red under the 红涨绿跌 preference. */ .btn-primary { background: linear-gradient(160deg, var(--emerald), var(--emerald-deep)); color: var(--ink); font-weight: 800; box-shadow: 0 10px 24px -12px var(--emerald-glow); } .btn-primary:hover { filter: brightness(1.04); } .btn-pause { background: var(--red); color: #fff; } .btn-pause:hover { filter: brightness(0.96); } .btn-ghost-block { width: 100%; min-height: 44px; /* center the label — without this, on an (display:block) the text jams into the top-left corner of the box (e.g. the pnl empty-state "去完成设置"). */ display: flex; align-items: center; justify-content: center; background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); font-weight: 700; cursor: pointer; text-decoration: none; } /* Go-live confirmation sheet (mobile bottom-sheet via