:root {
  color-scheme: light;
  --purple: #7842d9;
  --ink: #242135;
  --muted: #605a73;
  --border: #e4ddf0;
  --surface: #f9f7fc;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: #faf9fc;
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, p { margin: 0; }
h1 { font-size: 25px; }
h2 { font-size: 18px; }
small { color: var(--muted); }
.shell { max-width: 460px; min-height: 100dvh; margin: auto; background: linear-gradient(#f2eef9, #e9edf6 64%, #f2eff8); }
.header { height: 49px; padding: 0 13px; position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; background: #f3f0fa; }
.brand, .bell, .quick button, .dock button { border: 0; background: none; }
.brand { display: flex; align-items: center; gap: 9px; padding: 0; letter-spacing: .15em; }
.brand strong { font-size: 18px; }
.emblem { display: block; flex: none; object-fit: contain; }
.header-actions { display: flex; align-items: center; gap: 7px; }
.bell { min-height: 42px; min-width: 38px; color: var(--purple); }
.test-mode { padding: 4px 8px; color: #65439f; font-size: 12px; border-radius: 5px; background: #eee4fc; }
.page { padding: 5px 12px calc(76px + env(safe-area-inset-bottom)); }
.hero { aspect-ratio: 2.37; display: flex; align-items: center; border-radius: 12px; overflow: hidden; background: #e1d1f8 url(/art.webp) 67% top / auto 200% no-repeat; }
.hero > div { margin-left: 6%; }
.hero h1 { color: #5c25a4; font-size: clamp(28px, 8vw, 39px); letter-spacing: -.03em; text-shadow: 0 2px 0 #fff; }
.hero-button { background: #7339cb; color: white; padding: 6px 11px; border: 0; border-radius: 6px; margin-top: 7px; font-size: 13px; }
.hero-button span { margin-left: 6px; }
.surface { background: var(--surface); border: 1px solid #fff; border-radius: 10px; box-shadow: 0 2px 9px #3a245323, inset 0 0 0 1px #e8e2f3; }
.notice { display: flex; align-items: center; width: 100%; gap: 8px; padding: 0 10px; min-height: 35px; margin-top: 13px; font-size: 13px; text-align: left; }
.notice [data-icon], .arrow { color: var(--purple); }
.arrow { margin-left: auto; font-size: 21px; }
.account { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; padding: 9px 6px 9px 9px; min-height: 76px; gap: 4px; }
.account-info { min-width: 0; }
.account-info small, .account-info strong { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; }
.small { font-size: 12px; color: #6540a3; border: 1px solid #ede2fa; border-radius: 4px; background: #fff; min-height: 25px; padding: 2px 8px; }
.quick { display: flex; gap: 2px; }
.quick button { padding: 0 5px; min-height: 44px; min-width: 42px; font-size: 12px; white-space: nowrap; display: grid; gap: 3px; place-items: center; }
.quick button [data-icon] { color: #875715; background: linear-gradient(#fff4cd, #f7d389); border-radius: 50%; padding: 4px; }
.categories { position: sticky; z-index: 4; top: 49px; background: #f0edf7; margin: 9px -7px 13px; padding: 2px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.category { border: 1px solid #fff; border-radius: 10px; min-height: 51px; display: grid; place-content: center; justify-items: center; gap: 3px; font-size: 12px; color: #63449c; background: linear-gradient(#faf8ff,#f0e9f9); box-shadow: 0 1px 3px #44236c33; }
.category.selected { background: linear-gradient(#a76cff,#7b36d4); color: #fff; box-shadow: inset 0 0 0 1px #cdb0ff; }
[data-icon] { display: inline-grid; place-items: center; }
[data-icon] svg { width: 17px; height: 17px; display: block; }
.provider { aspect-ratio: 3.04; display: flex; align-items: center; justify-content: flex-end; border-radius: 31px 12px 30px 11px; overflow: hidden; width: 100%; border: 1px solid #fff; border-bottom-color: #baa3df; background: #fdfbff url(/art.webp) 43% bottom / auto 200% no-repeat; }
.provider-list { display: grid; gap: 10px; }
.provider:not(.provider-pg) { padding: 12px 5%; justify-content: space-between; background: linear-gradient(115deg, #e9e0f8, #fff 73%); }
.provider:not(.provider-pg) .provider-mark { display: grid; place-items: center; width: 46%; height: 100%; color: #644296; font-size: clamp(35px, 12vw, 54px); letter-spacing: -.06em; }
.provider:not(.provider-pg) .provider-copy { width: 47%; }
.provider-tabs { overflow-x: auto; margin-bottom: 10px; padding: 2px 0; }
.provider-tabs button { flex: none; }
.provider-copy { display: grid; justify-items: center; width: 46%; margin-right: 1%; }
.provider-copy strong { font-size: clamp(23px, 6vw, 32px); line-height: 1.1; }
.provider-copy small { letter-spacing: .11em; color: #6e5d87; font-size: 8px; margin-top: 5px; }
.provider-mark { font-size: 32px; font-weight: 950; color: #7c43d4; line-height: 1; letter-spacing: -.08em; margin-bottom: 4px; }
.dock { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 6; width: min(100%, 460px); padding: 4px 6px env(safe-area-inset-bottom); min-height: 53px; background: #fdfcfe; border-top: 1px solid #ece6f6; display: grid; grid-template-columns: repeat(5, 1fr); }
.dock button { min-height: 46px; display: grid; place-content: center; justify-items: center; gap: 3px; font-size: 11px; color: #615a73; }
.dock button [data-icon] svg { width: 20px; height: 20px; }
.dock button[aria-current] { color: #692abd; font-weight: 700; }
.dock .dock-home { margin-top: -13px; }
.dock .emblem { justify-self: center; }
.content { padding-top: 18px; }
.content > h1 { margin: 0 0 13px; }
.panel { margin: 10px 0; padding: 14px; }
.panel h2 { margin-bottom: 9px; }
.empty { color: var(--muted); font-size: 14px; padding: 16px 5px; }
.panel.empty { padding-left: 14px; }
.search { display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--border); background: white; border-radius: 8px; color: var(--purple); }
.search input { border: 0; padding: 10px 0; width: 100%; background: transparent; }
.search input:focus { outline: none; }
.search:focus-within { outline: 2px solid var(--purple); }
.game-list { display: grid; gap: 8px; margin-top: 12px; }
.game-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; min-height: 54px; padding: 9px 13px; }
.game-row .game-mark { color: var(--purple); font-weight: 850; }
.wallet-balances { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wallet-balances strong { display: block; margin-top: 4px; }
form { display: grid; gap: 8px; }
form label { font-size: 14px; }
form input, form select { min-height: 43px; border: 1px solid var(--border); border-radius: 7px; background: #fff; padding: 8px 10px; width: 100%; }
.primary, .secondary { min-height: 42px; border-radius: 7px; padding: 8px 14px; font-weight: 650; }
.primary { border: 1px solid #7135ca; background: #7135ca; color: #fff; }
.secondary { border: 1px solid #dfd2f2; background: #faf6ff; color: #6331a3; }
.feedback { font-size: 13px; color: #773459; min-height: 0; }
.feedback:empty { display: none; }
.segmented { display: flex; gap: 5px; }
.segmented button { border: 1px solid var(--border); border-radius: 7px; background: #faf7ff; padding: 8px 14px; }
.segmented button[aria-pressed="true"] { background: #7135ca; color: #fff; }
.record { padding: 8px 0; display: grid; gap: 3px; grid-template-columns: 1fr auto; font-size: 14px; }
.record + .record { border-top: 1px solid var(--border); }
.record small { grid-column: 1 / -1; }
dialog { width: min(calc(100% - 28px), 390px); border: 1px solid #e8dcf5; border-radius: 13px; color: var(--ink); padding: 16px; box-shadow: 0 8px 45px #33264d52; }
dialog::backdrop { background: #26163e77; }
.dialog-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.close { width: 37px; min-height: 37px; border: 0; background: #f3eafa; border-radius: 7px; font-size: 23px; }
.link-button { border: 0; background: transparent; color: var(--purple); min-height: 34px; }
.game-actions { display: flex; gap: 8px; margin-bottom: 8px; }
#toast { position: fixed; z-index: 9; left: 50%; bottom: 74px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); background: #332648; color: white; border-radius: 8px; padding: 9px 12px; font-size: 14px; }