:root {
  --blue: #3f7cff;
  --blue-soft: #eaf2ff;
  --green: #14b8a6;
  --red: #ff3f48;
  --page: #eef4ff;
  --card: #ffffff;
  --text: #30415f;
  --muted: #8c9ab4;
  --line: #dfe8f7;
  --shadow: 0 10px 24px rgba(54, 101, 180, .13);
}

* { box-sizing: border-box; }
body { margin: 0; background: #dbe7fb; color: var(--text); font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
.phone-shell { width: min(100vw, 480px); min-height: 100vh; margin: 0 auto; background: var(--page); overflow: hidden; }
.toast { position: fixed; left: 50%; top: 18px; transform: translate(-50%, -80px); z-index: 50; width: min(88vw, 420px); padding: 12px 14px; border-radius: 12px; color: #fff; background: rgba(31,42,68,.92); box-shadow: var(--shadow); opacity: 0; transition: .22s ease; text-align: center; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.error { background: rgba(240,77,69,.94); }
.toast.success { background: rgba(20,184,166,.94); }
.screen, .view { display: none; }
.screen.is-active, .view.is-active { display: block; }
.is-hidden { display: none !important; }

.login-screen { min-height: 100vh; padding: 34px 12px; background: linear-gradient(180deg, #f8fbff, #eef6ff 60%, #fff); }
.login-hero { text-align: center; padding: 16px 0 24px; }
.brand-mark, .brand-inline { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--blue); }
.brand-mark span, .brand-inline span { font-size: 48px; line-height: .7; font-weight: 900; }
.brand-mark strong, .brand-inline strong { display: grid; text-align: left; font-size: 22px; }
.brand-mark small, .brand-inline small { color: #606b80; font-size: 13px; }
.login-hero h1 { margin: 28px 0 6px; font-size: 32px; color: #59657b; }
.login-hero p { margin: 0; color: #8a97b0; font-weight: 800; }
.login-card { overflow: hidden; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.prize-strip { padding: 22px 16px; color: #fff; text-align: center; background: linear-gradient(135deg, #5b84eb, #74aff8); }
.prize-strip h2 { margin: 0 0 8px; font-size: 26px; }
.prize-strip p { margin: 0; }
.field { display: block; margin: 14px 14px 0; }
.field input, .amount-input { width: 100%; height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; outline: 0; background: #f9fbff; }
.captcha-field { display: grid; grid-template-columns: 1fr 112px; gap: 10px; align-items: center; }
.captcha-field span { display: grid; place-items: center; height: 46px; border-radius: 12px; color: #fff; background: linear-gradient(135deg,#4f8bff,#14b8a6); font-weight: 900; }
.auth-panel { animation: authPanelIn .22s ease both; }
@keyframes authPanelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.primary-btn, .outline-btn { width: calc(100% - 28px); height: 46px; margin: 14px 14px 0; border-radius: 12px; font-weight: 900; }
.primary-btn { color: #fff; background: var(--blue); }
.outline-btn { color: var(--blue); border: 1px solid var(--blue); background: #fff; }
.text-auth-btn { display: block; width: calc(100% - 28px); margin: 10px 14px 0; padding: 8px 0; color: var(--blue); background: transparent; font-weight: 900; text-align: right; }
.auth-code-line { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.auth-code-line button { min-width: 102px; height: 46px; padding: 0 10px; border-radius: 12px; color: var(--blue); background: #edf4ff; font-weight: 900; }
.message { min-height: 20px; margin: 10px 14px; color: var(--red); }

.app-screen { min-height: 100vh; padding-bottom: 82px; }
.app-header { display: none; }
.app-header > button { background: transparent; font-size: 24px; color: var(--blue); }
.app-header .logout-btn { height: 30px; padding: 0 10px; border-radius: 8px; color: #fff; background: var(--blue); font-size: 12px; }
.brand-inline { flex: 1; justify-content: flex-start; }
.brand-inline span { font-size: 32px; }
.brand-inline strong { font-size: 18px; }

.home-banner { min-height: 150px; padding: 34px 22px; margin-bottom: 2px; background: linear-gradient(135deg, #d7e9ff, #f8fcff); position: relative; overflow: hidden; }
.home-banner::after { content: ""; position: absolute; right: 30px; top: 26px; width: 92px; height: 92px; border-radius: 24px; background: linear-gradient(135deg, #4d80ea, #91c9ff); transform: rotate(-14deg); }
.home-banner span { display: inline-block; padding: 4px 12px; border-radius: 8px; color: #fff; background: #f3a32b; font-weight: 900; }
.home-banner h2 { margin: 8px 0 0; color: #214fc9; font-size: 32px; }
.home-banner p { position: relative; z-index: 1; margin: 8px 0 0; color: #617499; font-weight: 900; }
.home-banner.has-image { min-height: 150px; padding: 0; color: #fff; background-position: center; background-size: cover; }
.home-banner.has-image::before,.home-banner.has-image::after { display: none; }
.home-banner.has-image span,.home-banner.has-image h2,.home-banner.has-image p { display: none; }
.home-banner { cursor: pointer; }
.pool-card { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin: -8px 10px 10px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.pool-card div:last-child { text-align: right; }
.pool-card b { display: block; margin-top: 6px; color: var(--blue); font-size: 18px; }
.pool-card p { margin: 0; padding: 8px 12px; border-radius: 8px; color: #fff; background: var(--blue); white-space: nowrap; font-size: 12px; }
.pool-balance-header { min-height: 74px; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; padding: 8px 10px; color: #fff; background: #4285f4; }
.pool-balance-header h2 { margin: 0; text-align: center; font-size: 20px; }
.pool-balance-header button { color: #fff; background: transparent; font-size: 26px; font-weight: 900; }
.pool-balance-header button:last-child { font-size: 13px; }
.pool-balance-page { min-height: calc(100vh - 74px); padding: 0 14px 22px; background: #edf5ff; }
.pool-balance-summary { margin: 0 -14px 14px; padding: 26px 24px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; color: #fff; background: #4285f4; }
.pool-balance-summary div { display: grid; gap: 8px; text-align: center; }
.pool-balance-summary span { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 900; }
.pool-balance-summary b { font-size: 28px; line-height: 1.1; font-weight: 500; }
.pool-balance-summary p { grid-column: 1 / -1; margin: 4px 0 0; text-align: center; font-size: 16px; font-weight: 900; opacity: .92; }
.pool-address-list { display: grid; gap: 12px; }
.pool-address-card { overflow: hidden; border-radius: 9px; background: linear-gradient(180deg,#fafdff,#fff); box-shadow: 0 8px 18px rgba(48,92,160,.12); }
.pool-address-card header { display: grid; grid-template-columns: 1fr 116px; min-height: 48px; align-items: center; background: linear-gradient(90deg,#f7fbff 0%,#f7fbff 72%,#24c8b0 72%,#24c8b0 100%); }
.pool-address-card h3 { margin: 0; padding-left: 14px; color: #3f7cff; border-left: 4px solid #3f7cff; font-size: 18px; }
.pool-address-card header button { height: 48px; color: #fff; background: transparent; font-size: 18px; font-weight: 900; }
.pool-address-card header button::after { content: "›"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 8px; border-radius: 50%; color: #24c8b0; background: #fff; font-size: 22px; line-height: 1; }
.pool-address-card p { margin: 0; padding: 14px 14px 8px; color: #69758d; font-size: 17px; overflow-wrap: anywhere; }
.pool-address-assets { display: flex; gap: 28px; align-items: center; padding: 0 14px 8px; color: #69758d; font-size: 17px; font-weight: 900; }
.pool-address-assets span { display: inline-flex; align-items: center; gap: 7px; }
.pool-address-card small { display: block; padding: 0 14px 14px; color: #e24b5a; font-size: 14px; font-weight: 900; }
.pool-address-empty { padding: 28px 14px; border-radius: 12px; color: #7f8ba3; background: #fff; text-align: center; font-weight: 900; }
.notice-card, .game-section, .ranking-card, .wallet-links, .game-top-card, .bet-card, .trend-section, .record-card, .deposit-card, .wallet-panel, .tool-grid, .welfare-hero, .welfare-grid, .welfare-list { margin: 10px; padding: 14px; border-radius: 12px; background: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.8); }
.notice-card { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.notice-card strong, .game-section h3, .ranking-card h3, .wallet-links h3, .trend-section h3, .record-card h3 { margin: 0; color: #244edb; border-left: 3px solid var(--blue); padding-left: 8px; font-size: 15px; }
.notice-card div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #657087; }
.notice-card { cursor: pointer; }
.notice-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(17, 35, 65, .48); }
.notice-dialog { width: min(420px, 100%); max-height: 76vh; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 24px 60px rgba(22, 45, 83, .25); }
.notice-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #edf2fb; }
.notice-dialog h3 { margin: 0; color: #244edb; font-size: 18px; }
.notice-dialog button { width: 32px; height: 32px; border-radius: 50%; color: #6f7f9a; background: #f2f6ff; font-size: 20px; }
.notice-modal-list { display: grid; gap: 10px; max-height: calc(76vh - 60px); overflow-y: auto; padding: 14px; }
.notice-modal-list article { padding: 12px; border-radius: 12px; background: #f6f9ff; }
.notice-modal-list b { display: block; color: #243a62; }
.notice-modal-list p { margin: 8px 0 0; color: #657087; line-height: 1.6; white-space: pre-wrap; }
.agent-success-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 10px; background: rgba(17, 35, 65, .42); }
.agent-success-dialog { width: min(100%, 410px); overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 24px 60px rgba(22, 45, 83, .24); }
.agent-success-dialog header { position: relative; display: grid; place-items: center; height: 64px; border-bottom: 1px solid #edf2fb; background: #f8fbff; }
.agent-success-dialog h3 { margin: 0; color: #44546d; font-size: 18px; }
.agent-success-dialog header button { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; color: #6f7f9a; background: transparent; font-size: 30px; line-height: 1; }
.agent-success-body { display: grid; gap: 14px; padding: 28px 30px 20px; color: #5d687a; font-size: 17px; }
.agent-success-body p { display: flex; gap: 12px; margin: 0; line-height: 1.4; }
.agent-success-body span { min-width: 110px; }
.agent-success-body b { color: #4f5d72; font-weight: 700; }
.agent-success-url { display: block !important; overflow-wrap: anywhere; color: #4f5d72; }
.agent-success-dialog footer { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 6px 30px 28px; }
.agent-success-dialog footer button { height: 50px; border-radius: 10px; font-size: 16px; font-weight: 900; }
.agent-success-dialog footer button:first-child { color: #3476e8; background: #e4f2ff; }
.agent-success-dialog footer button:last-child { color: #fff; background: #3f7cff; }
.game-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 5px; border-radius: 14px; background: #e6efff; }
.game-tabs button { height: 44px; border-radius: 12px; color: #5d6d88; background: transparent; font-weight: 900; font-size: 16px; }
.game-tabs .is-active { color: #fff; background: linear-gradient(135deg, #4f8bff, #68b6ff); box-shadow: 0 8px 18px rgba(63,124,255,.22); }
.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.game-card { padding: 6px; border-radius: 14px; background: linear-gradient(180deg,#ffffff,#eef5ff); position: relative; overflow: hidden; box-shadow: 0 8px 18px rgba(48,92,160,.10); border: 1px solid rgba(222,234,252,.9); }
.game-cover-box { aspect-ratio: 1.72 / 1; display: grid; place-items: center; position: relative; overflow: hidden; border-radius: 10px; background: linear-gradient(135deg, #d9edff, #f8fcff); box-shadow: inset 0 0 0 1px rgba(255,255,255,.52); }
.game-cover-box strong { padding: 0 10px; color: #5a6475; font-size: 18px; text-align: center; }
.game-cover-img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; display: block; }
.game-card.hot::after { content: "HOT"; position: absolute; z-index: 3; right: 6px; top: 6px; color: #fff; background: linear-gradient(180deg,#ff7449,#ef382f); border-radius: 0 10px 0 10px; padding: 3px 8px; font-weight: 900; font-size: 12px; }
.game-card p { margin: 6px 0 0; min-height: 30px; padding: 5px 7px; border-radius: 10px; text-align: center; color: #4f607a; background: rgba(255,255,255,.82); font-size: 10px; line-height: 1.25; white-space: normal; overflow: visible; box-shadow: inset 0 0 0 1px rgba(220,232,250,.9); }

.rank-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; background: #dce9ff; border-radius: 9px 9px 0 0; overflow: hidden; }
.rank-tabs button { height: 42px; color: #5d6d88; background: transparent; font-size: 13px; }
.rank-tabs .is-active { color: var(--blue); background: #fff; border-radius: 8px 8px 0 0; font-weight: 900; }
.rank-table { overflow: hidden; border-radius: 0 0 10px 10px; border: 1px solid #e5edf9; }
.rank-head, .rank-row { display: grid; grid-template-columns: 1.15fr 1fr .9fr .85fr 1fr; align-items: center; min-height: 32px; padding: 0 8px; font-size: 12px; }
.rank-head { background: #f8fbff; color: #59657a; }
.rank-row:nth-child(odd) { background: #f4f8ff; }
.rank-row span:nth-child(4) { color: var(--blue); font-weight: 900; }
.rank-profit { display: inline-flex; align-items: center; justify-content: flex-start; gap: 4px; white-space: nowrap; }
.coin-icon { width: 15px; height: 15px; display: inline-grid; place-items: center; flex: 0 0 15px; border-radius: 50%; color: #fff; font-style: normal; font-size: 10px; line-height: 1; box-shadow: 0 2px 5px rgba(25,62,120,.18); }
.coin-icon.usdt { background: linear-gradient(135deg,#26a17b,#43d39b); }
.coin-icon.trx { background: linear-gradient(135deg,#ff3b42,#c3132b); font-size: 6px; letter-spacing: 0; }
.text-btn { display: block; margin: 8px auto 0; color: var(--blue); background: transparent; }
.wallet-logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.wallet-logo-grid div { display: grid; place-items: center; gap: 5px; }
.wallet-logo-grid b { width: 100%; padding: 8px; border-radius: 8px; background: #fff; box-shadow: var(--shadow); text-align: center; font-size: 18px; }
.wallet-logo-grid span { font-size: 12px; color: #44506a; }

.sub-header { min-height: 52px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fff; }
.sub-header h2 { flex: 1; margin: 0; font-size: 18px; }
.sub-header button { color: var(--blue); background: transparent; font-size: 18px; }
.pill-btn { padding: 8px 14px !important; border-radius: 999px; color: #fff !important; background: var(--green) !important; font-size: 13px !important; }
.bet-mode { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 10px; }
.bet-mode button { height: 44px; border-radius: 8px; color: #43506a; background: #e6ebf7; font-weight: 900; }
.bet-mode button.is-active { color: #fff; background: var(--blue); box-shadow: 0 8px 18px rgba(63,124,255,.22); }
.issue-search { display: grid; grid-template-columns: 1fr auto; margin: 0 10px 10px; border-radius: 8px; background: #fff; overflow: hidden; }
.issue-search input { border: 0; height: 36px; padding: 0 12px; background: #f8fbff; outline: 0; }
.issue-search button { padding: 0 14px; color: var(--blue); background: #edf4ff; }
.game-title-row { display: flex; align-items: center; gap: 8px; }
.game-title-row h3 { margin: 0; font-size: 20px; }
.game-title-row span { padding: 4px 12px; color: var(--blue); background: #dce9ff; border-radius: 8px; font-weight: 900; }
.game-title-row button { color: var(--blue); background: transparent; font-size: 12px; }
.game-top-card p { margin: 4px 0 12px; color: #65708a; font-size: 13px; }
.bet-address { overflow: hidden; border-radius: 8px 8px 0 0; background: linear-gradient(135deg, #62a9ff, #428bff); color: #fff; }
.bet-address label { display: block; padding: 10px 12px 4px; font-weight: 900; }
.bet-address div { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 10px 10px; }
.bet-address span { padding: 8px 10px; border-radius: 999px; background: #fff; color: #496078; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bet-address button, .address-line button { color: var(--blue); background: transparent; font-weight: 900; }
.transfer-bet-box { overflow: hidden; margin: 12px 0 0; border-radius: 9px 9px 0 0; background: linear-gradient(135deg, #62adff, #438eff); color: #fff; }
.transfer-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px 5px; }
.transfer-head button { color: #fff; background: transparent; font-weight: 900; }
.transfer-address { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 6px 10px 12px; }
.transfer-address span { overflow: hidden; min-width: 0; padding: 8px 10px; border-radius: 999px; color: #48617f; background: #fff; white-space: nowrap; text-overflow: ellipsis; }
.transfer-address button { color: var(--blue); background: #fff; border-radius: 999px; padding: 0 10px; font-weight: 900; }
.transfer-qr { display: grid; place-items: center; margin: 0 auto 10px; width: 150px; height: 150px; border-radius: 12px; background: #fff; }
.transfer-qr img { width: 132px; height: 132px; display: block; }
.transfer-rules { display: grid; gap: 4px; padding: 10px 14px 14px; font-size: 12px; background: rgba(255,255,255,.16); }
.transfer-rules b { font-size: 13px; }
.issue-strip { display: grid; grid-template-columns: 1fr 74px 1fr; align-items: center; padding: 10px; background: #fff; border-radius: 0 0 8px 8px; }
.issue-strip > div:first-child { text-align: center; }
.issue-strip > div:last-child { text-align: right; }
.issue-strip small { display: block; color: #5e6b83; font-weight: 900; }
.issue-strip strong { display: block; color: var(--blue); font-size: 22px; }
.issue-strip em { color: var(--blue); font-size: 12px; font-style: normal; }
.issue-strip small b { display: inline-grid; place-items: center; width: 18px; height: 18px; color: #fff; background: var(--green); border-radius: 50%; }
.countdown { display: grid; place-items: center; }
.countdown b { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 5px solid #e7ecf6; border-top-color: var(--blue); color: #111; }
.countdown span { font-size: 12px; color: #111; }
.bet-card { position: relative; }
.bet-closed-mask { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; align-content: center; gap: 4px; border-radius: 12px; background: rgba(22,29,42,.22); }
.bet-closed-mask.is-hidden { display: none; }
.bet-closed-mask b { display: grid; place-items: center; width: 54px; height: 54px; border: 3px solid #fff; border-radius: 50%; color: #fff; background: rgba(0,0,0,.72); font-size: 34px; line-height: 1; }
.bet-closed-mask span { min-width: 120px; padding: 0 12px; text-align: center; color: #fff; background: rgba(0,0,0,.72); font-weight: 900; }
.bet-summary { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; color: #405271; font-size: 13px; }
.bet-summary b { color: var(--green); }
.bet-summary .red-text { color: var(--red); }
.bet-summary button { margin-left: auto; height: 30px; padding: 0 10px; border-radius: 7px; color: var(--blue); background: #edf4ff; font-weight: 900; }
.choice-panel { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 44px 44px 0 0; border: 1px solid #26bbae; }
.choice { min-height: 96px; display: grid; place-items: center; gap: 5px; color: var(--red); background: #fff2f4; font-size: 38px; font-weight: 900; }
.choice:first-child { color: var(--green); background: #eafff9; }
.choice small { min-width: 120px; padding: 8px 12px; border-radius: 999px; color: #6d7892; background: #e7ecfa; font-size: 13px; font-weight: 500; }
.choice small b { float: right; color: var(--blue); }
.choice.is-active { outline: 2px solid currentColor; outline-offset: -3px; }
.bet-asset-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; margin: 12px 0; padding: 10px; border-radius: 12px; background: #f7faff; }
.bet-asset-row span { color: #5f6b82; font-weight: 900; }
.bet-asset-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.bet-asset-tabs button { height: 36px; border-radius: 10px; color: #5c667b; background: #e8edf8; font-weight: 900; }
.bet-asset-tabs button.is-active { color: #fff; background: var(--blue); box-shadow: 0 8px 18px rgba(82,125,240,.22); }
.quick-amounts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 12px 0; }
.quick-amounts button { height: 38px; border-radius: 10px; color: #586176; background: #e8edf8; font-weight: 900; }
.amount-line { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.amount-line b { min-width: 58px; height: 42px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: #2f7dff; font-size: 13px; }
.bet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.bet-actions button { height: 44px; border-radius: 9px; color: #50607c; background: #f0f3fa; font-weight: 900; }
.bet-actions button:last-child { color: #fff; background: #8fa1c2; }
.bet-actions button:disabled { opacity: .55; cursor: not-allowed; }
.section-switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.section-switch h3 { margin-right: auto; }
.section-switch span { font-size: 12px; color: #5a6680; }
.section-switch span:first-of-type b { color: var(--green); }
.section-switch span:nth-of-type(2) b { color: var(--red); }
.section-switch button { padding: 6px 10px; border-radius: 6px; color: #fff; background: var(--blue); font-size: 12px; }
.trend-board { min-height: 155px; padding: 8px; border-radius: 12px; background: #fbfdff; border: 1px solid #eef2fb; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.trend-loading { display: grid; place-items: center; min-height: 130px; color: #7b86a0; font-weight: 800; }
.trend-lanes { display: grid; grid-template-columns: repeat(10, 24px); grid-auto-rows: 24px; gap: 3px; align-items: start; justify-content: start; min-width: 100%; padding-bottom: 10px; }
.trend-column { display: contents; }
.trend-sequence { display: grid; grid-template-columns: repeat(50, 26px); grid-template-rows: 26px; gap: 7px; align-items: center; width: max-content; min-width: 100%; padding: 8px 4px 14px; }
.trend-cell { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 900; }
.trend-cell.single { background: var(--green); }
.trend-cell.double { background: var(--red); }
.trend-cell.empty { background: transparent; }
.trend-grid-fixed { display: grid; grid-template-columns: repeat(10, 24px); grid-template-rows: repeat(5, 24px); grid-auto-flow: row; gap: 7px; align-items: center; justify-content: start; width: 303px; max-width: 100%; overflow: hidden; padding: 4px 0 8px; }
.trend-road { display: flex; gap: 7px; align-items: flex-start; width: max-content; min-width: 100%; padding: 4px 0 8px; }
.trend-road-column { display: grid; grid-template-rows: repeat(5, 24px); gap: 7px; }
.trend-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 900; line-height: 1; }
.trend-dot.single { background: var(--green); }
.trend-dot.double { background: var(--red); }
.trend-dot.empty { background: transparent; }
.trend-ball { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: 5px 8px 5px 0; border-radius: 50%; color: #fff; font-weight: 900; font-size: 13px; }
.trend-ball.single, .green { background: var(--green); color: #fff; }
.trend-ball.double, .red { background: var(--red); color: #fff; }
.draw-table { margin-top: 12px; overflow: auto; max-height: 216px; border-radius: 8px; -webkit-overflow-scrolling: touch; }
.draw-head, .draw-row { display: grid; grid-template-columns: 92px 76px 120px 78px; align-items: center; min-width: 366px; min-height: 36px; padding: 0 10px; font-size: 12px; }
.draw-head { background: #dbe8ff; color: #62708a; }
.draw-head { position: sticky; top: 0; z-index: 1; }
.draw-row:nth-child(odd) { background: #f7fbff; }
.draw-row button { color: var(--blue); background: transparent; }
.draw-row b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.draw-issue, .draw-hash { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.game-bet-records { margin-top: 8px; }
.compact-list .list-item { padding: 10px 0; }
.compact-list .status-pill { margin-left: 8px; }
.rule-page { min-height: calc(100vh - 52px); padding: 10px 10px 22px; color: #53637c; background: #eaf3ff; }
.rule-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0 0 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rule-tabs button {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 15px;
  border-radius: 999px;
  color: #53627b;
  background: #fff;
  box-shadow: none;
  font-weight: 900;
}
.rule-tabs button.is-active { color: #fff; background: #2c7dff; }
.rule-page h3 {
  margin: 18px 0 10px;
  padding-left: 10px;
  border-left: 4px solid #e32727;
  color: #2e3c51;
  font-size: 21px;
  line-height: 1.1;
}
.rule-card {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  padding: 16px 14px;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  font-size: 17px;
  line-height: 1.55;
}
.rule-card p { margin: 0; }
.rule-card span { color: #ff2b2b; }
.rule-card b { color: #ff2b2b; }
.rule-card .blue { color: #2c7dff; }
.bottom-banner-list { display: grid; gap: 10px; margin: 10px; }
.bottom-banner { min-height: 92px; padding: 18px; border-radius: 14px; overflow: hidden; color: #fff; background: linear-gradient(135deg,#3f7cff,#14b8a6); background-position: center; background-size: cover; box-shadow: var(--shadow); position: relative; }
.bottom-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(22,42,83,.68),rgba(22,42,83,.08)); }
.bottom-banner[style*="url("] { padding: 0; }

#gameView .sub-header { min-height: 44px; padding: 6px 10px; }
#gameView .bet-mode { gap: 10px; padding: 6px 10px; }
#gameView .bet-mode button { height: 38px; }
#gameView .game-top-card,
#gameView .bet-card,
#gameView .trend-section { margin: 8px 10px; padding: 10px 12px; }
#gameView .bet-card { margin-top: 6px; margin-bottom: 6px; padding: 8px 12px; }
#gameView .game-top-card { padding: 8px 12px 7px; }
#gameView .game-title-row { gap: 6px; }
#gameView .game-title-row h3 { font-size: 18px; }
#gameView .game-title-row span { padding: 3px 9px; }
#gameView .game-top-card p { margin: 2px 0 5px; font-size: 12px; }
#gameView .issue-strip { grid-template-columns: 1fr 58px 1fr; padding: 4px 8px 5px; }
#gameView .issue-strip strong { font-size: 20px; }
#gameView .issue-strip small { font-size: 12px; }
#gameView .countdown b { width: 42px; height: 42px; border-width: 4px; }
#gameView .bet-summary { margin-bottom: 8px; font-size: 12px; }
#gameView .bet-summary button { height: 28px; padding: 0 9px; }
#gameView .bet-asset-row { margin: 8px 0; padding: 8px; }
#gameView .bet-asset-tabs button { height: 34px; }
#gameView .choice-panel { border-radius: 36px 36px 0 0; }
#gameView .choice { min-height: 72px; gap: 2px; font-size: 30px; }
#gameView .choice small { min-width: 96px; padding: 5px 9px; font-size: 12px; }
#gameView .quick-amounts { gap: 6px; margin: 6px 0; }
#gameView .quick-amounts button { height: 32px; }
#gameView .amount-input { height: 40px; }
#gameView .amount-line b { height: 38px; min-width: 52px; }
#gameView .bet-actions { gap: 9px; margin-top: 8px; }
#gameView .bet-actions button { height: 38px; }
#gameView .section-switch { gap: 6px; }
#gameView .trend-section { margin-top: 8px; }
#gameView .trend-board { min-height: 132px; padding: 7px; }
.bottom-banner[style*="url("]::before { display: none; }
.bottom-banner[style*="url("] b,.bottom-banner[style*="url("] span { display: none; }
.bottom-banner b,.bottom-banner span { position: relative; z-index: 1; display: block; }
.bottom-banner b { font-size: 20px; }
.bottom-banner span { margin-top: 6px; opacity: .9; }
.wallet-recommend-card { margin: 10px; padding: 12px 10px 16px; border-radius: 14px; background: linear-gradient(180deg,#f8fbff,#eef5ff); box-shadow: var(--shadow); }
.wallet-recommend-card h3 { margin: 0 0 10px; color: #244edb; border-left: 3px solid var(--blue); padding-left: 8px; font-size: 15px; }
.official-wallet-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; }
.official-wallet-item { display: grid; gap: 6px; color: #40506b; text-align: center; text-decoration: none; font-size: 12px; }
.official-wallet-logo { display: grid; place-items: center; min-height: 38px; padding: 6px 8px; border-radius: 9px; background: #fff; box-shadow: 0 8px 18px rgba(41,75,128,.12); color: #22324f; font-weight: 900; font-size: 15px; line-height: 1; }
.official-wallet-logo i { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 4px; border-radius: 50%; color: #fff; background: linear-gradient(135deg,var(--blue),var(--green)); font-style: normal; font-size: 12px; vertical-align: middle; }
.official-wallet-item span { color: #4d5c76; }
.official-wallet-item:nth-child(3) .official-wallet-logo i { background: linear-gradient(135deg,#2f68ff,#ffb22e); }
.official-wallet-item:nth-child(4) .official-wallet-logo i { background: linear-gradient(135deg,#1463ff,#111827); }
.official-wallet-item:nth-child(5) .official-wallet-logo i { background: linear-gradient(135deg,#3375ff,#45d5ff); }
.official-wallet-item:nth-child(6) .official-wallet-logo { font-size: 19px; letter-spacing: 1px; }
@media (max-width: 360px) {
  .official-wallet-list { grid-template-columns: repeat(2, 1fr); }
}

.asset-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px; }
.asset-tabs button { height: 42px; border-radius: 12px; color: #657087; background: #fff; font-weight: 900; }
.asset-tabs .is-active { color: #fff; background: var(--blue); box-shadow: 0 8px 18px rgba(82,125,240,.28); }
.address-line { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px; border-radius: 12px; background: #f8fbff; word-break: break-all; }
.qr-box { display: grid; place-items: center; width: 180px; height: 180px; margin: 18px auto; border: 10px solid #fff; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px rgba(28,53,96,.12), inset 0 0 0 1px #e6edf8; }
.qr-box img { width: 160px; height: 160px; display: block; }
.form-label { display: block; margin: 14px 0 8px; color: #5d667a; font-weight: 900; }
.deposit-header { min-height: 58px; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; padding: 8px 10px; background: #fff; }
.deposit-header h2 { margin: 0; text-align: center; color: #1f2d45; font-size: 22px; }
.deposit-header button { color: #1f2d45; background: transparent; font-size: 24px; font-weight: 900; }
.deposit-header button:last-child { color: var(--blue); font-size: 13px; }
.deposit-detail { min-height: calc(100vh - 130px); padding: 18px 18px 28px; background: linear-gradient(180deg,#fff 0%,#f5f9ff 72%,#eef4ff 100%); }
.deposit-qr-panel { display: grid; place-items: center; gap: 10px; padding: 8px 0 24px; text-align: center; }
.deposit-qr-panel p { max-width: 310px; margin: 0; color: #7a879c; line-height: 1.5; font-size: 13px; }
.deposit-qr-box { width: 238px; height: 238px; margin: 0 auto; border: 14px solid #fff; border-radius: 22px; box-shadow: 0 18px 42px rgba(36,78,219,.14), inset 0 0 0 1px #e7eefb; }
.deposit-qr-box img { width: 206px; height: 206px; }
.deposit-info-list { overflow: hidden; border-top: 1px solid #e8eef8; border-bottom: 1px solid #e8eef8; background: rgba(255,255,255,.72); }
.deposit-info-row { position: relative; display: grid; grid-template-columns: 116px 1fr; gap: 10px; align-items: center; min-height: 68px; padding: 12px 0; border-bottom: 1px solid #e8eef8; }
.deposit-info-row:last-child { border-bottom: 0; }
.deposit-info-row span { color: #7b879b; font-size: 15px; }
.deposit-info-row strong { justify-self: end; color: #1f2d45; text-align: right; font-size: 16px; word-break: break-all; }
.deposit-coin-switch { justify-self: end; display: grid; grid-template-columns: repeat(2, 74px); gap: 8px; padding: 4px; border-radius: 14px; background: #eaf1ff; }
.deposit-coin-switch button { height: 36px; border-radius: 11px; color: #62718a; background: transparent; font-weight: 900; }
.deposit-coin-switch button.is-active { color: #fff; background: linear-gradient(135deg,var(--blue),var(--green)); box-shadow: 0 8px 18px rgba(63,124,255,.22); }
.deposit-info-row.address-row { grid-template-columns: 92px 1fr 50px; min-height: 86px; }
.deposit-info-row.address-row strong { justify-self: start; text-align: left; color: #244edb; font-size: 17px; line-height: 1.35; }
.deposit-info-row.address-row button { justify-self: end; width: 44px; height: 44px; border-radius: 14px; color: #244edb; background: #edf4ff; font-size: 12px; font-weight: 900; }
.deposit-warn { display: grid; gap: 6px; margin: 18px 0 4px; color: #7c889d; line-height: 1.45; }
.deposit-warn p { margin: 0; }
.deposit-share-btn { width: 100%; margin: 22px 0 0; background: linear-gradient(135deg,var(--blue),var(--green)); box-shadow: 0 12px 28px rgba(63,124,255,.18); }
.deposit-record-list { margin-top: 18px; padding-top: 10px; border-top: 1px dashed #dce6f5; }

.withdraw-header { min-height: 66px; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; padding: 8px 12px; background: #fff; }
.withdraw-header h2 { margin: 0; text-align: center; color: #111827; font-size: 23px; line-height: 1.15; }
.withdraw-header span { display: block; margin-top: 2px; color: #111827; text-align: center; font-size: 14px; font-weight: 900; }
.withdraw-header button { color: #111827; background: transparent; font-size: 24px; font-weight: 900; }
.withdraw-header button:last-child { color: #315cda; font-size: 13px; }
.withdraw-page { min-height: calc(100vh - 66px); display: flex; flex-direction: column; padding: 18px 16px 18px; background: #fff; }
.withdraw-asset-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 18px; padding: 5px; border-radius: 14px; background: #edf4ff; }
.withdraw-asset-tabs button { height: 42px; border-radius: 11px; color: #5270a0; background: transparent; font-size: 16px; font-weight: 900; }
.withdraw-asset-tabs button.is-active { color: #fff; background: linear-gradient(135deg,var(--blue),var(--green)); box-shadow: 0 8px 18px rgba(63,124,255,.22); }
.withdraw-field { display: grid; gap: 9px; margin-bottom: 20px; color: #747b86; font-size: 15px; font-weight: 900; }
.withdraw-field input,.withdraw-field select,.withdraw-password { width: 100%; height: 56px; border: 0; border-radius: 14px; padding: 0 16px; color: #111827; background: #f3f4f6; font-size: 18px; font-weight: 900; outline: none; }
.withdraw-field input::placeholder,.withdraw-password::placeholder { color: #a2a6ae; }
.withdraw-field select { appearance: none; color: #a2a6ae; }
.withdraw-amount-field div { display: grid; grid-template-columns: 1fr auto auto; align-items: center; min-height: 56px; border-radius: 14px; background: #f3f4f6; }
.withdraw-amount-field input { min-width: 0; background: transparent; }
.withdraw-amount-field b { padding: 0 10px; color: #111827; font-size: 18px; }
.withdraw-amount-field button { padding: 0 16px 0 8px; color: var(--blue); background: transparent; font-size: 16px; font-weight: 900; white-space: nowrap; }
.withdraw-available { margin: -12px 0 22px; color: #7b7f88; font-size: 14px; }
.withdraw-available b { float: right; color: #7b7f88; font-weight: 700; }
.withdraw-password { margin-bottom: 18px; }
.withdraw-security-field { margin-bottom: 18px; }
.withdraw-security-field b { display: block; min-height: 46px; padding: 13px 16px; border-radius: 14px; color: #111827; background: #f3f4f6; line-height: 1.4; font-size: 15px; font-weight: 900; }
.withdraw-security-field input { margin-top: 2px; }
.withdraw-notice { margin: 0 -16px; padding: 18px 16px; border-top: 1px solid #edf0f5; color: #80858e; line-height: 1.55; font-size: 14px; }
.withdraw-notice p { margin: 0 0 4px; }
.withdraw-bottom { margin-top: auto; padding-top: 18px; display: grid; gap: 8px; }
.withdraw-bottom div { display: flex; align-items: center; justify-content: space-between; color: #606774; font-size: 15px; }
.withdraw-bottom b { color: #111827; font-size: 18px; font-variant-numeric: tabular-nums; }
.withdraw-actions { display: grid !important; grid-template-columns: 88px 1fr; gap: 12px; margin-top: 8px; }
.withdraw-service { width: 100%; height: 54px; border-radius: 9px; color: #315cda; background: #eef4ff; font-size: 18px; font-weight: 900; }
.withdraw-submit { width: 100%; height: 54px; border-radius: 9px; color: #fff; background: linear-gradient(135deg,#9cb8ff,#88ddd5); font-size: 20px; font-weight: 900; opacity: .72; }
.withdraw-submit.is-ready { opacity: 1; background: linear-gradient(135deg,var(--blue),var(--green)); box-shadow: 0 12px 28px rgba(63,124,255,.2); }
.withdraw-record-list { margin-top: 14px; max-height: 220px; overflow: auto; }

.profile-hero { position: relative; display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; margin: 4px; padding: 22px 12px 48px; color: #fff; background: linear-gradient(180deg,#78b8f9,#4285f4); }
.avatar { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #7197b8; font-size: 30px; }
.profile-hero h2 { margin: 0 0 6px; font-size: 18px; }
.profile-hero p { margin: 0; font-size: 12px; }
.profile-hero button { padding: 10px 12px; border-radius: 8px; color: var(--blue); background: #fff; font-size: 12px; }
.wallet-panel { margin-top: -42px; position: relative; z-index: 2; }
.wallet-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.wallet-title h3 { margin: 0; font-size: 16px; }
.wallet-title span { padding: 8px 12px; margin: -14px -14px 0 0; color: #fff; background: linear-gradient(135deg,#20d2a6,#27c9c9); border-radius: 0 12px 0 16px; font-weight: 900; }
.wallet-table { overflow: hidden; border-radius: 8px; }
.wallet-row { display: grid; grid-template-columns: minmax(70px, .85fr) minmax(78px, .8fr) minmax(92px, 1fr); column-gap: 8px; align-items: center; min-height: 44px; padding: 0 10px; }
.wallet-row-head { min-height: 28px; color: #8a98b2; background: #f4f8ff; font-size: 12px; font-weight: 900; }
.wallet-row.active { color: #fff; background: linear-gradient(135deg,#65a8ff,#3f7cff); }
.wallet-row span { display: flex; align-items: center; gap: 8px; }
.wallet-row i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: var(--green); font-style: normal; font-size: 11px; }
.wallet-row i.trx { background: linear-gradient(135deg,#ff3b42,#c3132b); font-size: 6px; letter-spacing: 0; }
.wallet-row i.usdt { background: var(--green); }
.wallet-row:nth-child(2) i { background: var(--red); }
.wallet-row:nth-child(3) i { background: #f15f62; }
.wallet-row b { min-width: 0; text-align: right; color: inherit; font-variant-numeric: tabular-nums; }
.wallet-row b small { display: block; margin-top: 2px; color: inherit; opacity: .72; font-size: 10px; font-weight: 700; }
.wallet-row em { color: inherit; font-style: normal; }
.wallet-transfer-btn { width: 44px; height: 26px; border-radius: 7px; color: var(--blue); background: #fff; font-size: 12px; font-weight: 900; }
.wallet-row:not(.active) .wallet-transfer-btn { color: #fff; background: var(--blue); }
.big-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 10px; }
.big-actions button { height: 48px; border-radius: 8px; color: #5d667a; background: #fff; font-size: 18px; box-shadow: var(--shadow); }
.commission-transfer-page { min-height: calc(100vh - 52px); padding: 12px 10px 90px; background: #f3f8ff; }
.commission-transfer-tabs { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; margin: 0 0 14px; border-radius: 8px; background: #e8eefb; }
.commission-transfer-tabs button { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; color: #5c6f90; background: transparent; font-size: 18px; font-weight: 900; }
.commission-transfer-tabs button.is-active { color: #fff; background: var(--blue); }
.commission-transfer-tabs i,.commission-transfer-card i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--green); font-style: normal; font-size: 12px; }
.commission-transfer-tabs i.trx,.commission-transfer-card i.trx { background: linear-gradient(135deg,#ff3b42,#c3132b); font-size: 7px; }
.commission-transfer-card { display: grid; gap: 12px; padding: 20px 14px 18px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.commission-transfer-card p { margin: 0; color: #8a98ad; font-size: 15px; font-weight: 900; }
.commission-transfer-card strong { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid #e6edf8; color: #4b5a72; font-size: 22px; }
.commission-transfer-card label { display: flex; align-items: center; justify-content: space-between; color: #4f5f78; font-weight: 900; }
.commission-transfer-card label button { color: #3f7cff; background: transparent; font-weight: 900; }
.commission-transfer-error { min-height: 18px; color: var(--red); font-size: 13px; font-weight: 900; }
.commission-transfer-submit { height: 54px; border-radius: 10px; color: #8291ad; background: #d8e1f3; font-size: 18px; font-weight: 900; }
.commission-transfer-submit.is-ready { color: #fff; background: var(--blue); }
.tool-grid { display: grid; gap: 10px; background: transparent; box-shadow: none; padding: 0 10px 14px; }
.tool-grid button { display: grid; grid-template-columns: 40px auto 1fr; align-items: center; column-gap: 12px; min-height: 62px; padding: 12px 16px; color: #34415a; background: #fff; border-radius: 12px; text-align: left; box-shadow: var(--shadow); }
.tool-grid i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #3f86ff, #20c6b8); font-style: normal; font-weight: 900; }
.tool-grid b { display: block; min-width: 76px; color: #2f405c; font-size: 15px; line-height: 1.2; white-space: nowrap; }
.tool-grid span { display: block; justify-self: end; max-width: 150px; color: #8b98ad; font-size: 12px; line-height: 1.25; text-align: right; }

.welfare-hero { color: #fff; background: linear-gradient(135deg, #4f8bff, #6bd0ff); }
.welfare-hero h3 { margin: 0 0 8px; font-size: 24px; }
.welfare-hero p { margin: 0; opacity: .9; }
.welfare-grid { display: grid; gap: 12px; background: transparent; box-shadow: none; padding: 0; }
.welfare-grid article { padding: 16px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.welfare-grid b { display: block; color: var(--blue); font-size: 18px; }
.welfare-grid span { display: block; margin: 8px 0 14px; color: #64718c; }
.welfare-grid button { height: 36px; padding: 0 14px; border-radius: 999px; color: #fff; background: var(--blue); font-weight: 900; }
.welfare-list { display: grid; gap: 12px; background: transparent; box-shadow: none; padding: 0; }
.welfare-banner { display: block; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: var(--shadow); text-decoration: none; color: inherit; }
.welfare-banner img { display: block; width: 100%; min-height: 110px; max-height: 220px; object-fit: cover; background: #e8f1ff; }
.welfare-caption { padding: 12px 14px; }
.welfare-caption b { display: block; color: #223a66; font-size: 16px; }
.welfare-caption span { display: block; margin-top: 5px; color: #7a89a4; font-size: 13px; line-height: 1.5; }
.welfare-empty { display: grid; min-height: 180px; place-items: center; border-radius: 16px; color: #8fa1bd; background: linear-gradient(135deg, #f3f8ff, #ffffff); font-weight: 900; }

.agent-page { padding: 0 8px 18px; background: #f4f8ff; box-shadow: none; }
.agent-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 8px 18px 10px; background: #fff; }
.agent-tabs button { height: 36px; color: #476083; border-bottom: 2px solid transparent; background: transparent; font-weight: 900; }
.agent-tabs button.is-active { color: var(--blue); border-color: var(--blue); }
.agent-self-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 10px 0; overflow: hidden; border-radius: 10px; background: #dfe8f7; box-shadow: 0 8px 18px rgba(34, 75, 130, .08); }
.agent-self-card div { display: grid; gap: 5px; padding: 10px 8px; background: #fff; text-align: center; }
.agent-self-card span { color: #7a8ba6; font-size: 12px; }
.agent-self-card b { color: #244edb; font-size: 14px; }
.agent-filter { display: grid; gap: 8px; margin: 8px 0 12px; }
.agent-period-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.agent-date-row { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; gap: 8px; }
.agent-search-row { display: grid; grid-template-columns: 1fr 72px; gap: 8px; }
.agent-date-row span { color: #7b8ead; text-align: center; }
.agent-filter button,.agent-filter input { height: 34px; border-radius: 7px; background: #eaf1ff; color: #4770ad; text-align: center; }
.agent-filter button.is-active { color: #fff; background: var(--blue); }
.agent-filter input { padding: 0 8px; text-align: left; background: #fff; border: 1px solid #d9e4f5; }
.agent-page h3 { margin: 10px 0 8px; padding-left: 8px; color: #233d66; border-left: 3px solid var(--blue); font-size: 15px; }
.agent-summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); background: #fff; border-radius: 8px; box-shadow: 0 8px 18px rgba(34, 75, 130, .08); overflow: hidden; }
.agent-summary-grid span { display: flex; justify-content: space-between; padding: 10px 12px; color: #42618c; border-bottom: 1px solid #e2ebf8; }
.agent-summary-grid b { color: #274367; }
.agent-member-list .list-item { margin-bottom: 10px; padding: 10px; background: #fff; border: 0; border-radius: 8px; box-shadow: 0 8px 18px rgba(34, 75, 130, .08); }
.agent-member-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: #30527e; }
.agent-member-head strong { margin: 0; color: #30527e; }
.agent-member-head span { color: #0c9b87; font-weight: 900; }
.agent-member-row { display: grid; grid-template-columns: 1fr 60px 1fr 60px; padding: 8px 0; border-top: 1px solid #e2ebf8; color: #42618c; }
.agent-member-row b { text-align: right; color: #274367; }
.agent-rate-box small { display: block; margin-top: 8px; color: #7c8ca8; }
.agent-set-btn { width: 100%; height: 38px; margin-top: 8px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--blue), #18c0b0); font-weight: 900; }
.agent-set-btn:disabled { color: #8795ad; background: #e7edf7; cursor: not-allowed; }
.agent-setting-card { display: grid; gap: 12px; margin: 12px; padding: 14px; border-radius: 12px; background: #fff; box-shadow: 0 8px 18px rgba(34, 75, 130, .08); }
.agent-setting-user { display: grid; gap: 5px; padding: 14px; border-radius: 12px; background: linear-gradient(135deg, #eef6ff, #f8fbff); }
.agent-setting-user span,.agent-setting-field small { color: #7a8ba6; font-size: 12px; }
.agent-setting-user strong { color: #244edb; font-size: 20px; }
.agent-setting-user small { color: #536783; }
.agent-setting-info { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 14px; border-radius: 10px; background: #f6f9ff; color: #526784; }
.agent-setting-info b { color: #263d62; text-align: right; }
.agent-setting-field { display: grid; gap: 8px; color: #30415f; font-weight: 900; }
.agent-setting-field small { line-height: 1.5; font-weight: 400; }
.agent-open-card { display: grid; gap: 14px; margin: 10px 0; padding: 14px 10px 18px; border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(34, 75, 130, .08); }
.agent-open-card label { display: grid; gap: 8px; color: #30415f; font-weight: 900; }
.agent-open-card .amount-input { height: 40px; border-radius: 8px; font-size: 14px; }
.agent-default-password { height: 40px; display: flex; align-items: center; padding: 0 12px; border: 1px solid #dbe7f8; border-radius: 8px; color: #3f7cff; background: #f7fbff; font-size: 14px; }
.agent-default-password b { margin-left: 6px; color: #30415f; }
.agent-open-tip { display: grid; gap: 6px; color: #415472; line-height: 1.5; font-size: 13px; }
.agent-open-tip b { color: var(--blue); }
.agent-open-tip p { margin: 0; }
.share-card { display: grid; gap: 12px; margin-top: 12px; padding: 16px; border-radius: 12px; background: #fff; box-shadow: 0 8px 18px rgba(34, 75, 130, .08); }
.share-title { margin: 0; padding-left: 8px; color: #233d66; border-left: 3px solid var(--blue); font-size: 16px; }
.share-line-title { color: #365276; font-weight: 900; }
.copy-line { display: grid; grid-template-columns: 1fr 70px; align-items: center; gap: 8px; color: #365276; }
.copy-line .amount-input { height: 38px; }
.copy-line button { height: 34px; border-radius: 9px; color: #fff; background: var(--blue); font-weight: 900; }
.share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.share-actions button { height: 40px; border-radius: 10px; color: #fff; background: var(--blue); font-weight: 900; }
.download-poster-btn { height: 42px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--blue), #18c0b0); font-weight: 900; }
.invite-poster-frame { position: relative; overflow: hidden; width: 100%; border-radius: 12px; background: #eef5ff; }
.invite-poster { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; }
.invite-poster-qr { position: absolute; left: 70.2%; top: 23.8%; width: 21.6%; aspect-ratio: 1; padding: 4px; border-radius: 6px; background: #fff; object-fit: contain; box-shadow: 0 2px 8px rgba(24,61,120,.08); }
.invite-qr { width: 180px; height: 180px; justify-self: center; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid #dce6f5; }
.share-tip { margin: 0; color: #70809b; font-size: 13px; text-align: center; }

.security-hero { min-height: 118px; padding: 30px 24px; background: linear-gradient(135deg, #eef7ff, #dff0ff); box-shadow: none; }
.security-hero p { margin: 0 0 10px; color: #8aa2c2; font-weight: 900; }
.security-hero h2 { margin: 0; color: #53657e; font-size: 26px; }
.security-list { display: grid; gap: 10px; padding: 12px; background: #f3f8ff; box-shadow: none; }
.security-list article { display: grid; grid-template-columns: 34px 1fr 24px; align-items: center; gap: 10px; min-height: 64px; padding: 10px 14px; border-radius: 8px; background: #fff; box-shadow: 0 6px 16px rgba(31, 84, 138, .08); }
.security-list article { cursor: pointer; }
.security-list i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #9cadc9; background: #edf3ff; font-style: normal; }
.security-list b { display: block; color: #31425d; }
.security-list span { display: block; margin-top: 5px; color: #ff2d35; font-size: 12px; }
.security-list em { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: #ff3745; font-style: normal; font-weight: 900; }
.security-list em.ok { background: #18b7a0; }
.security-list em.arrow { color: #a7b4c8; background: transparent; font-size: 24px; }
.security-form { display: grid; gap: 8px; padding: 10px; border-radius: 8px; background: #fff; }
.security-logout { height: 42px; border-radius: 8px; color: #8fa1bd; background: #fff; box-shadow: 0 6px 16px rgba(31, 84, 138, .08); }
.form-tip { margin: 0; color: #8b98ad; font-size: 12px; line-height: 1.5; }
.code-line { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.code-line button { min-width: 112px; height: 44px; padding: 0 10px; border-radius: 10px; color: #2f73ff; background: #eef5ff; font-weight: 900; }
.security-form select.amount-input { appearance: none; color: #30415f; background: #f8fbff; }
.security-bound-box { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: #f3f8ff; color: #30415f; }
.security-bound-box b { font-size: 16px; }
.security-bound-box p { margin: 0; color: #7f8da5; line-height: 1.5; }

.list { margin-top: 10px; color: var(--muted); }
.list-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.list-item strong { display: block; margin-bottom: 4px; color: #4f5a70; }
.list-item small { color: var(--muted); }
.inline-form { display: grid; grid-template-columns: 1fr 76px; gap: 8px; margin-top: 8px; }
.inline-form .amount-input { height: 38px; }
.inline-form button { border: 0; border-radius: 10px; color: #fff; background: var(--brand); font-weight: 700; }
.status-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; color: #fff; background: var(--blue); font-size: 12px; }
.status-pill.pending { background: #d6a94a; }
.status-pill.done { background: var(--green); }
.status-pill.reject { background: var(--red); }
.payout-record { display: grid; gap: 3px; margin-top: 8px; padding: 9px 10px; border-radius: 10px; color: #52617a; background: #f6f9ff; border: 1px solid #e3ebfa; }
.payout-record b { color: #244edb; font-size: 13px; }
.payout-record span { color: #2f3d55; font-weight: 900; }
.payout-record small { color: #74819a; word-break: break-all; }
.payout-record.paid { background: #ecfff9; border-color: #b9f0e4; }
.payout-record.paid b,.payout-record.paid span { color: #0f9f8d; }
.payout-record.failed { background: #fff1f2; border-color: #ffd1d5; }
.payout-record.failed b,.payout-record.failed span { color: var(--red); }
.payout-record.pending { background: #fff9e8; border-color: #f1dda3; }
.payout-record.pending b,.payout-record.pending span { color: #b28422; }
.payout-record.lose { background: #f8fafc; border-color: #e6edf7; }
.record-tabs { display: flex; gap: 10px; margin-bottom: 12px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding-bottom: 4px; scrollbar-width: none; }
.record-tabs::-webkit-scrollbar { display: none; }
.record-tabs button { flex: 0 0 76px; height: 38px; border-radius: 10px; color: #657087; background: #eef3ff; font-weight: 900; }
.record-tabs button.is-active { color: #fff; background: var(--blue); }
.commission-filters { display: grid; gap: 10px; margin-bottom: 12px; }
.commission-scope-tabs { display: grid; grid-template-columns: 1fr 1fr; border-radius: 6px; background: #e8eefb; overflow: hidden; }
.commission-scope-tabs button { height: 38px; color: #6b7890; background: transparent; font-weight: 900; }
.commission-scope-tabs button.is-active { color: #fff; background: #244edb; }
.commission-filter-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.commission-filter-row select { min-width: 0; height: 36px; padding: 0 8px; border: 0; border-radius: 8px; color: #73809a; background: #eef3ff; font-weight: 900; }
.commission-record-game { display: block; margin-top: 8px; color: #52617a; }
.commission-record-amount { float: right; color: #244edb; font-size: 15px; }
.bet-record-page .record-tabs { margin-bottom: 8px; }
.bet-record-filter-line { display: grid; grid-template-columns: 1.12fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.bet-record-filter-line + .bet-record-filter-line { grid-template-columns: 1fr 1fr; }
.bet-record-filter-line select { width: 100%; height: 38px; min-width: 0; border: 0; border-radius: 10px; padding: 0 10px; color: #7b879d; background: #eef3ff; font-weight: 900; outline: none; }
.bet-record-filter-line .record-tabs { min-width: 0; margin: 0; padding: 0; gap: 6px; }
.bet-scope-tabs button { flex: 1 1 0; min-width: 0; }
.bet-source-tabs button { flex-basis: 50%; }
.bet-record-summary { display: grid; gap: 4px; margin: 10px 0 14px; padding: 10px; border-radius: 12px; background: #f3f7ff; color: #5d6a82; font-size: 13px; }
.bet-record-summary > div { display: grid; grid-template-columns: 1fr 1.1fr 1.2fr 1.1fr; align-items: center; gap: 6px; min-height: 24px; text-align: center; }
.bet-record-summary > div:first-child { color: #7d8ca6; font-weight: 900; }
.bet-record-summary span:first-child { text-align: left; font-weight: 900; color: #40506a; }
.bet-record-summary .bet-profit { background: transparent; font-weight: 900; }
.bet-record-summary .bet-profit.positive { color: var(--green); }
.bet-record-summary .bet-profit.negative { color: var(--red); }
.asset-tabs.compact { padding: 0; margin-bottom: 10px; }

.bottom-tabs { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100vw,480px); height: 72px; display: grid; grid-template-columns: repeat(4,1fr); background: rgba(255,255,255,.96); box-shadow: 0 -8px 26px rgba(91,116,162,.12); }
.bottom-tabs button { display: grid; place-items: center; color: #94a0b8; background: transparent; font-size: 23px; }
.bottom-tabs span { font-size: 13px; font-weight: 900; }
.bottom-tabs .is-active { color: var(--blue); }