/* ORDEZIQ — home & collectible detail. 1080px artboard scaled by --ox-u. */
:root { --ox-green: #c8ff28; --ox-bg: #0c0f0e; --ox-card: #1a201d; --ox-line: #2a322e; --ox-text: #f5f7f4; --ox-muted: #a9b0ab; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ox-bg); }
body.ox-page { --ox-u: calc(min(100vw, 540px) / 1080); color: var(--ox-text); font-family: "Noto Sans SC", Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.ox-shell { position: relative; width: min(100%, 540px); min-height: 100svh; margin: 0 auto; padding: calc(var(--ox-u) * 40) calc(var(--ox-u) * 54) calc(var(--ox-u) * 300); background: linear-gradient(160deg, #161918, #0b0d0c); }
.ox-shell a, .ox-nav a { color: inherit; text-decoration: none; }
.ox-status { margin: 0 calc(var(--ox-u) * -54); padding: calc(var(--ox-u) * 12) calc(var(--ox-u) * 66) calc(var(--ox-u) * 28); }
.ox-hello { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--ox-u) * 50); }
.ox-hello h1 { margin: 0; font-size: calc(var(--ox-u) * 45); font-weight: 700; }
.ox-hello p { margin: calc(var(--ox-u) * 14) 0 0; color: var(--ox-muted); font-size: calc(var(--ox-u) * 30); }
.ox-hello > div:first-child { min-width: 0; margin-right: calc(var(--ox-u) * 16); }
.ox-hello__right { display: flex; flex: 0 0 auto; align-items: center; gap: calc(var(--ox-u) * 20); }
.ox-lv { padding: calc(var(--ox-u) * 24) calc(var(--ox-u) * 42); border-radius: 999px; background: #2a331d; color: var(--ox-green); font-size: calc(var(--ox-u) * 33); font-weight: 700; }
.ox-bell { display: grid; place-items: center; width: calc(var(--ox-u) * 100); height: calc(var(--ox-u) * 100); border: 1px solid var(--ox-line); border-radius: 50%; background: #20262a; }
.ox-bell img { width: calc(var(--ox-u) * 50); }
.ox-banner { position: relative; margin-top: calc(var(--ox-u) * 56); }
.ox-banner > img { display: block; width: 100%; height: auto; }
.ox-banner__copy { max-width: 62%; position: absolute; left: calc(var(--ox-u) * 46); top: calc(var(--ox-u) * 54); }
.ox-banner__tag { margin: 0; color: var(--ox-green); font-size: calc(var(--ox-u) * 28); font-weight: 700; }
.ox-banner__copy h2 { margin: calc(var(--ox-u) * 18) 0 0; font-size: calc(var(--ox-u) * 54); line-height: 1.2; font-weight: 800; }
.ox-banner__sub { margin: calc(var(--ox-u) * 22) 0 0; color: #cdd2ce; font-size: calc(var(--ox-u) * 29); }
.ox-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: linear-gradient(90deg, #d8ff46, #b5f51b); color: #11150b !important; font-weight: 700; }
.ox-banner .ox-btn { margin-top: calc(var(--ox-u) * 44); width: calc(var(--ox-u) * 275); height: calc(var(--ox-u) * 94); font-size: calc(var(--ox-u) * 33); }
.ox-aboutcard { display: flex; align-items: center; gap: calc(var(--ox-u) * 36); margin-top: calc(var(--ox-u) * 34); padding: calc(var(--ox-u) * 40) calc(var(--ox-u) * 54) calc(var(--ox-u) * 40) calc(var(--ox-u) * 36); border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 56); background: linear-gradient(160deg, #1f2522, #171b19); color: var(--ox-text); text-decoration: none; }
.ox-aboutcard > img { flex: 0 0 auto; width: calc(var(--ox-u) * 92); height: auto; }
.ox-aboutcard__txt { flex: 1 1 auto; min-width: 0; }
.ox-aboutcard__txt strong { display: block; font-size: calc(var(--ox-u) * 40); font-weight: 700; }
.ox-aboutcard__txt span { display: block; margin-top: calc(var(--ox-u) * 14); color: var(--ox-muted); font-size: calc(var(--ox-u) * 29); line-height: 1.4; }
.ox-aboutcard > b { flex: 0 0 auto; color: var(--ox-green); font-size: calc(var(--ox-u) * 31); font-weight: 700; }
.ox-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--ox-u) * 32); margin-top: calc(var(--ox-u) * 34); }
.ox-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--ox-u) * 20); height: calc(var(--ox-u) * 193); border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 40); background: var(--ox-card); font-size: calc(var(--ox-u) * 31); color: #e2e6e3; }
.ox-action img { width: calc(var(--ox-u) * 58); height: calc(var(--ox-u) * 58); object-fit: contain; }
.ox-sec-head { display: flex; align-items: center; justify-content: space-between; margin: calc(var(--ox-u) * 62) 0 calc(var(--ox-u) * 36); }
.ox-sec-head h2 { margin: 0; font-size: calc(var(--ox-u) * 45); font-weight: 800; }
.ox-sec-head a { color: var(--ox-muted); font-size: calc(var(--ox-u) * 30); }
.ox-items { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--ox-u) * 26); }
.ox-item { display: block; overflow: hidden; border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 44); background: var(--ox-card); }
.ox-item__img { display: block; width: 100%; aspect-ratio: 468 / 258; object-fit: cover; }
.ox-item__body { position: relative; padding: calc(var(--ox-u) * 24) calc(var(--ox-u) * 28) calc(var(--ox-u) * 30); }
.ox-chip { display: inline-block; padding: calc(var(--ox-u) * 14) calc(var(--ox-u) * 28); border-radius: 999px; background: #2a331d; color: var(--ox-green); font-size: calc(var(--ox-u) * 26); font-weight: 700; }
.ox-item h3 { margin: calc(var(--ox-u) * 24) 0 0; font-size: calc(var(--ox-u) * 38); font-weight: 700; }
.ox-item__price { margin: calc(var(--ox-u) * 14) 0 0; font-size: calc(var(--ox-u) * 42); font-weight: 800; }
.ox-item__arrow { position: absolute; right: calc(var(--ox-u) * 34); bottom: calc(var(--ox-u) * 40); width: calc(var(--ox-u) * 24); height: auto; }
.ox-empty { grid-column: 1 / -1; padding: calc(var(--ox-u) * 80) 0; text-align: center; color: var(--ox-muted); }
.ox-account { margin-top: calc(var(--ox-u) * 40); padding: calc(var(--ox-u) * 40) calc(var(--ox-u) * 40) calc(var(--ox-u) * 36); border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 44); background: linear-gradient(160deg, #1f2522, #171b19); display: block; }
.ox-account__top { display: flex; align-items: center; justify-content: space-between; }
.ox-account__top h2 { margin: 0; font-size: calc(var(--ox-u) * 42); font-weight: 800; }
.ox-chip--income { background: #20331c; color: #8fe04b; font-size: calc(var(--ox-u) * 28); }
.ox-account__label { margin: calc(var(--ox-u) * 26) 0 0; color: var(--ox-muted); font-size: calc(var(--ox-u) * 30); }
.ox-account__amount { margin: calc(var(--ox-u) * 12) 0 0; font-size: calc(var(--ox-u) * 78); font-weight: 800; }
.ox-account__row { display: flex; justify-content: space-between; margin-top: calc(var(--ox-u) * 40); padding-top: calc(var(--ox-u) * 38); border-top: 1px solid var(--ox-line); color: var(--ox-muted); font-size: calc(var(--ox-u) * 32); }
.ox-account__row b { color: var(--ox-green); font-size: calc(var(--ox-u) * 36); }
/* detail */
.ox-detail-head { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--ox-u) * 56); }
.ox-detail-head__l { display: flex; align-items: center; gap: calc(var(--ox-u) * 40); }
.ox-back { display: grid; place-items: center; width: calc(var(--ox-u) * 60); height: calc(var(--ox-u) * 90); }
.ox-back::before { content: ""; width: calc(var(--ox-u) * 22); height: calc(var(--ox-u) * 22); border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg); }
.ox-detail-head h1 { margin: 0; font-size: calc(var(--ox-u) * 56); font-weight: 800; }
.ox-fav { display: inline-flex; align-items: center; gap: calc(var(--ox-u) * 14); border: 0; background: none; color: var(--ox-green); font: inherit; font-size: calc(var(--ox-u) * 37); font-weight: 700; cursor: pointer; }
.ox-fav img { width: calc(var(--ox-u) * 44); }
.ox-fav.is-on img { filter: drop-shadow(0 0 6px rgba(200,255,40,.7)); }
.ox-hero { position: relative; margin-top: calc(var(--ox-u) * 56); }
.ox-hero > img { display: block; width: 100%; height: auto; border-radius: calc(var(--ox-u) * 56); }
.ox-hero__tags { position: absolute; left: calc(var(--ox-u) * 40); top: calc(var(--ox-u) * 44); display: flex; gap: calc(var(--ox-u) * 22); }
.ox-hero__tags .ox-chip { padding: calc(var(--ox-u) * 18) calc(var(--ox-u) * 32); font-size: calc(var(--ox-u) * 30); background: rgba(42,51,29,.92); }
.ox-hero__tags .ox-chip--gold { background: rgba(48,42,33,.92); color: #e8d9a8; }
.ox-name { margin: calc(var(--ox-u) * 58) 0 0; font-size: calc(var(--ox-u) * 62); font-weight: 800; }
.ox-serial { margin: calc(var(--ox-u) * 20) 0 calc(var(--ox-u) * 34); color: var(--ox-muted); font-size: calc(var(--ox-u) * 32); }
.ox-card { padding: calc(var(--ox-u) * 36) calc(var(--ox-u) * 40); border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 44); background: var(--ox-card); margin-bottom: calc(var(--ox-u) * 22); }
.ox-card h2 { margin: 0; font-size: calc(var(--ox-u) * 42); font-weight: 800; }
.ox-card__grid { display: grid; grid-template-columns: 1fr auto; align-items: end; }
.ox-card .lab { margin: calc(var(--ox-u) * 12) 0 0; color: var(--ox-muted); font-size: calc(var(--ox-u) * 30); }
.ox-card .price { margin: calc(var(--ox-u) * 18) 0 0; font-size: calc(var(--ox-u) * 72); font-weight: 800; }
.ox-card .issue { margin: 0 0 calc(var(--ox-u) * 12); color: var(--ox-muted); font-size: calc(var(--ox-u) * 30); text-align: right; }
.ox-card__right { display: flex; flex-direction: column; align-items: flex-end; }
.ox-card p.intro { margin: calc(var(--ox-u) * 30) 0 0; color: #cfd4d0; font-size: calc(var(--ox-u) * 33); line-height: 1.5; }
.ox-cta { display: flex; width: 100%; height: calc(var(--ox-u) * 144); font-size: calc(var(--ox-u) * 48); border-radius: calc(var(--ox-u) * 44); gap: calc(var(--ox-u) * 24); }
/* nav */
.ox-nav { position: fixed; z-index: 20; left: 50%; bottom: max(calc(var(--ox-u) * 36), env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, 1fr); width: calc(min(100vw, 540px) - var(--ox-u) * 72); height: calc(var(--ox-u) * 230); border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 90); background: rgba(24,28,26,.96); backdrop-filter: blur(14px); }
.ox-nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--ox-u) * 18); color: var(--ox-muted); font-size: calc(var(--ox-u) * 30); }
.ox-nav__item img { width: calc(var(--ox-u) * 56); height: calc(var(--ox-u) * 56); object-fit: contain; }
.ox-nav__item.is-active { color: var(--ox-green); font-weight: 700; }
.ox-toast { position: fixed; left: 50%; bottom: 140px; transform: translateX(-50%); z-index: 40; padding: 12px 20px; border-radius: 999px; background: #20261f; border: 1px solid var(--ox-green); color: var(--ox-text); font-size: 14px; }
/* mine */
.ox-mine-title { margin: calc(var(--ox-u) * 100) 0 0; font-size: calc(var(--ox-u) * 64); font-weight: 800; }
.ox-mine-sub { margin: calc(var(--ox-u) * 22) 0 calc(var(--ox-u) * 44); color: var(--ox-muted); font-size: calc(var(--ox-u) * 34); }
.ox-panel { display: block; padding: calc(var(--ox-u) * 42); border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 56); background: linear-gradient(160deg, #1f2522, #171b19); margin-bottom: calc(var(--ox-u) * 40); }
.ox-id { display: flex; align-items: center; gap: calc(var(--ox-u) * 46); }
.ox-avatar { display: grid; place-items: center; flex: 0 0 calc(var(--ox-u) * 150); width: calc(var(--ox-u) * 150); height: calc(var(--ox-u) * 150); border: 3px solid #6b7f2a; border-radius: 50%; background: #20301a; color: var(--ox-green); font-size: calc(var(--ox-u) * 72); font-weight: 800; }
.ox-id__main { flex: 1; min-width: 0; }
.ox-id__main strong { display: block; font-size: calc(var(--ox-u) * 45); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ox-id__main span { display: block; margin-top: calc(var(--ox-u) * 28); color: var(--ox-muted); font-size: calc(var(--ox-u) * 30); }
.ox-id__side { display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--ox-u) * 36); color: var(--ox-muted); font-size: calc(var(--ox-u) * 31); }
.ox-id__side .ox-chip { padding: calc(var(--ox-u) * 18) calc(var(--ox-u) * 44); font-size: calc(var(--ox-u) * 30); }
.ox-wallet { display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: calc(var(--ox-u) * 8); }
.ox-wallet h2 { margin: 0; font-size: calc(var(--ox-u) * 42); font-weight: 800; }
.ox-wallet .amt { grid-column: 1; margin: calc(var(--ox-u) * 12) 0 0; font-size: calc(var(--ox-u) * 72); font-weight: 800; }
.ox-wallet .lab { color: var(--ox-muted); font-size: calc(var(--ox-u) * 30); }
.ox-wallet .link { color: var(--ox-muted); font-size: calc(var(--ox-u) * 31); text-align: right; }
.ox-wallet .ox-chip { align-self: start; justify-self: end; padding: calc(var(--ox-u) * 20) calc(var(--ox-u) * 40); font-size: calc(var(--ox-u) * 31); }
.ox-group-title { margin: calc(var(--ox-u) * 60) 0 calc(var(--ox-u) * 28); font-size: calc(var(--ox-u) * 40); font-weight: 800; }
.ox-list { padding: calc(var(--ox-u) * 14) calc(var(--ox-u) * 40); }
.ox-row { position: relative; display: flex; align-items: center; gap: calc(var(--ox-u) * 36); height: calc(var(--ox-u) * 140); font-size: calc(var(--ox-u) * 38); }
.ox-row + .ox-row { border-top: 1px solid var(--ox-line); }
.ox-row img { width: calc(var(--ox-u) * 48); height: calc(var(--ox-u) * 48); object-fit: contain; }
.ox-row img.tint { filter: brightness(0) saturate(100%) invert(92%) sepia(48%) saturate(900%) hue-rotate(20deg); }
.ox-row span { flex: 1; }
.ox-row i { width: calc(var(--ox-u) * 16); height: calc(var(--ox-u) * 16); border-right: 2px solid var(--ox-muted); border-top: 2px solid var(--ox-muted); transform: rotate(45deg); }
.ox-logout { display: block; margin-top: calc(var(--ox-u) * 50); text-align: center; color: var(--ox-muted) !important; font-size: calc(var(--ox-u) * 34); }
/* invite */
.ox-qr { text-align: center; padding-bottom: calc(var(--ox-u) * 30); }
.ox-qr__box { width: calc(var(--ox-u) * 420); height: calc(var(--ox-u) * 420); margin: calc(var(--ox-u) * 24) auto 0; border-radius: calc(var(--ox-u) * 36); background: #f7f8f5; overflow: hidden; }
.ox-qr__box img { display: block; width: 100%; height: 100%; }
.ox-qr p { margin: calc(var(--ox-u) * 18) 0 0; color: var(--ox-muted); font-size: calc(var(--ox-u) * 31); }
.ox-link { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--ox-u) * 30); }
.ox-link > div { min-width: 0; }
.ox-link small { display: block; color: var(--ox-muted); font-size: calc(var(--ox-u) * 29); }
.ox-link strong { display: block; margin: calc(var(--ox-u) * 24) 0 calc(var(--ox-u) * 20); font-size: calc(var(--ox-u) * 36); font-weight: 500; word-break: break-all; }
.ox-link em { color: var(--ox-muted); font-size: calc(var(--ox-u) * 28); font-style: normal; }
.ox-copy { flex: 0 0 auto; padding: calc(var(--ox-u) * 26) calc(var(--ox-u) * 54); border: 1px solid #44552a; border-radius: calc(var(--ox-u) * 30); background: #2a331d; color: var(--ox-green); font: inherit; font-size: calc(var(--ox-u) * 33); font-weight: 700; cursor: pointer; }
/* wallet */
.ox-bal__top { display: flex; align-items: center; justify-content: space-between; color: var(--ox-muted); font-size: calc(var(--ox-u) * 34); }
.ox-bal__top .ox-chip { font-size: calc(var(--ox-u) * 31); padding: calc(var(--ox-u) * 20) calc(var(--ox-u) * 40); }
.ox-bal__amt { margin: calc(var(--ox-u) * 40) 0 calc(var(--ox-u) * 44); padding-bottom: calc(var(--ox-u) * 44); border-bottom: 1px solid var(--ox-line); font-size: calc(var(--ox-u) * 96); font-weight: 800; }
.ox-bal__row { display: flex; justify-content: space-between; margin-top: calc(var(--ox-u) * 26); color: var(--ox-muted); font-size: calc(var(--ox-u) * 33); }
.ox-bal__row strong { color: var(--ox-text); font-size: calc(var(--ox-u) * 40); }
.ox-bal__row strong.g { color: var(--ox-green); }
.ox-tx { height: calc(var(--ox-u) * 150); }
.ox-tx__ic { flex: 0 0 calc(var(--ox-u) * 84) !important; display: grid; place-items: center; width: calc(var(--ox-u) * 84); height: calc(var(--ox-u) * 84); border: 1px solid #3c4a28; border-radius: 50%; background: #20301a; }
.ox-tx__ic img { width: calc(var(--ox-u) * 40); height: calc(var(--ox-u) * 40); }
.ox-tx__main { flex: 1; }
.ox-tx__main strong { display: block; font-size: calc(var(--ox-u) * 40); }
.ox-tx__main small { display: block; margin-top: calc(var(--ox-u) * 14); color: var(--ox-muted); font-size: calc(var(--ox-u) * 30); }
.ox-tx > b { font-size: calc(var(--ox-u) * 40); font-weight: 700; }
/* finance (deposit / withdraw) */
.ox-fhead { margin-top: calc(var(--ox-u) * 56); }
.ox-hero-card { padding: calc(var(--ox-u) * 40) calc(var(--ox-u) * 42) calc(var(--ox-u) * 44); }
.ox-hero-card__top { display: flex; align-items: flex-start; justify-content: space-between; color: var(--ox-muted); font-size: calc(var(--ox-u) * 34); }
.ox-hero-card .ox-chip { font-size: calc(var(--ox-u) * 30); padding: calc(var(--ox-u) * 18) calc(var(--ox-u) * 34); }
.ox-hero-card__amt { margin: calc(var(--ox-u) * 24) 0 0; font-size: calc(var(--ox-u) * 90); font-weight: 800; }
.ox-hero-card__amt small { margin-left: calc(var(--ox-u) * 22); font-size: calc(var(--ox-u) * 36); font-weight: 700; }
.ox-hero-card__sub { margin: calc(var(--ox-u) * 20) 0 0; color: var(--ox-muted); font-size: calc(var(--ox-u) * 29); }
.ox-label { margin: calc(var(--ox-u) * 56) 0 calc(var(--ox-u) * 26) calc(var(--ox-u) * 10); font-size: calc(var(--ox-u) * 36); font-weight: 800; }
.ox-select { position: relative; }
.ox-select__btn { display: flex; align-items: center; gap: calc(var(--ox-u) * 28); width: 100%; height: calc(var(--ox-u) * 114); padding: 0 calc(var(--ox-u) * 40) 0 calc(var(--ox-u) * 24); border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 40); background: var(--ox-card); color: var(--ox-text); font: inherit; font-size: calc(var(--ox-u) * 42); font-weight: 800; cursor: pointer; text-align: left; }
.ox-select.is-open .ox-select__btn { border-color: var(--ox-green); }
.ox-select__plus { flex: 0 0 auto; width: calc(var(--ox-u) * 70); height: calc(var(--ox-u) * 70); object-fit: contain; }
.ox-select__btn em { margin-left: auto; color: var(--ox-muted); font-size: calc(var(--ox-u) * 30); font-style: normal; font-weight: 400; }
.ox-select.is-open .ox-select__btn em { display: none; }
.ox-select__btn::after { content: ""; flex: 0 0 auto; width: calc(var(--ox-u) * 24); height: calc(var(--ox-u) * 24); margin-left: auto; margin-right: calc(var(--ox-u) * 4); border-right: 3px solid var(--ox-text); border-bottom: 3px solid var(--ox-text); transform: rotate(45deg) translate(-2px, -2px); }
.ox-select__btn em + * { }
.ox-select__list { position: absolute; z-index: 15; left: 0; right: 0; top: calc(100% + 4px); padding: calc(var(--ox-u) * 14) calc(var(--ox-u) * 20); border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 40); background: #1b211e; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.ox-select__list[hidden] { display: none; }
.ox-opt { display: flex; align-items: center; gap: calc(var(--ox-u) * 22); width: 100%; padding: calc(var(--ox-u) * 26) calc(var(--ox-u) * 28); border: 0; border-radius: calc(var(--ox-u) * 26); background: transparent; color: var(--ox-text); font: inherit; font-size: calc(var(--ox-u) * 38); text-align: left; cursor: pointer; }
.ox-opt + .ox-opt { border-top: 1px solid var(--ox-line); border-radius: 0; }
.ox-opt.is-on { background: #2a3028; color: var(--ox-green); font-weight: 800; border-radius: calc(var(--ox-u) * 26); }
.ox-opt.is-on::before { content: "✓"; display: grid; place-items: center; width: calc(var(--ox-u) * 44); height: calc(var(--ox-u) * 44); border-radius: 50%; background: var(--ox-green); color: #11150b; font-size: calc(var(--ox-u) * 28); }
.ox-input { display: flex; align-items: center; height: calc(var(--ox-u) * 128); padding: 0 calc(var(--ox-u) * 42); border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 40); background: var(--ox-card); }
.ox-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ox-text); font: inherit; font-size: calc(var(--ox-u) * 40); }
.ox-input input::placeholder { color: #6d7872; }
.ox-input span { color: var(--ox-muted); font-size: calc(var(--ox-u) * 34); }
.ox-input.is-error { border-color: #e0605a; }
.ox-err { margin: calc(var(--ox-u) * 16) calc(var(--ox-u) * 10) 0; color: #ef8a82; font-size: calc(var(--ox-u) * 30); }
.ox-help { margin: calc(var(--ox-u) * 28) calc(var(--ox-u) * 10) 0; color: var(--ox-muted); font-size: calc(var(--ox-u) * 29); }
.ox-note { margin-top: calc(var(--ox-u) * 44); padding: calc(var(--ox-u) * 34) calc(var(--ox-u) * 40); border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 40); background: var(--ox-card); }
.ox-note h3 { display: flex; align-items: center; gap: calc(var(--ox-u) * 20); margin: 0; font-size: calc(var(--ox-u) * 36); }
.ox-note h3 i { display: grid; place-items: center; width: calc(var(--ox-u) * 46); height: calc(var(--ox-u) * 46); border-radius: 50%; background: #2a331d; color: var(--ox-green); font-size: calc(var(--ox-u) * 28); font-style: normal; }
.ox-note p { margin: calc(var(--ox-u) * 24) 0 0; color: var(--ox-muted); font-size: calc(var(--ox-u) * 30); line-height: 1.6; }
.ox-rules { margin-top: calc(var(--ox-u) * 44); padding: calc(var(--ox-u) * 40); border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 44); background: linear-gradient(160deg, #1f2522, #171b19); }
.ox-rules h3 { margin: 0 0 calc(var(--ox-u) * 28); font-size: calc(var(--ox-u) * 40); font-weight: 800; }
.ox-rules ul { margin: 0; padding: 0; list-style: none; }
.ox-rules li { position: relative; padding-left: calc(var(--ox-u) * 44); margin-top: calc(var(--ox-u) * 26); color: #cdd2ce; font-size: calc(var(--ox-u) * 31); line-height: 1.5; }
.ox-rules li::before { content: ""; position: absolute; left: calc(var(--ox-u) * 6); top: calc(var(--ox-u) * 14); width: calc(var(--ox-u) * 16); height: calc(var(--ox-u) * 16); border-radius: 50%; background: var(--ox-green); }
.ox-submit { display: flex; width: 100%; height: calc(var(--ox-u) * 140); margin-top: calc(var(--ox-u) * 80); border: 0; border-radius: calc(var(--ox-u) * 44); font: inherit; font-size: calc(var(--ox-u) * 46); cursor: pointer; }
.ox-submit.is-blocked, .ox-submit:disabled { opacity: .55; }
.ox-sublink { display: block; margin-top: calc(var(--ox-u) * 44); text-align: center; color: #d8dcd9 !important; font-size: calc(var(--ox-u) * 36); }
.ox-alert { margin-top: calc(var(--ox-u) * 36); padding: calc(var(--ox-u) * 28) calc(var(--ox-u) * 34); border: 1px solid #5a4a22; border-radius: calc(var(--ox-u) * 32); background: #2a2517; color: #e8d9a8; font-size: calc(var(--ox-u) * 30); line-height: 1.5; }
.ox-alert a { color: var(--ox-green); text-decoration: underline; }
.ox-empty-addr { margin-top: 0; padding: calc(var(--ox-u) * 56) calc(var(--ox-u) * 30); text-align: center; border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 50); background: var(--ox-card); }
.ox-empty-addr .plus { display: grid; place-items: center; width: calc(var(--ox-u) * 110); height: calc(var(--ox-u) * 110); margin: 0 auto; border-radius: 50%; background: #2a331d; color: var(--ox-green); font-size: calc(var(--ox-u) * 80); font-weight: 300; line-height: 1; }
.ox-empty-addr strong { display: block; margin-top: calc(var(--ox-u) * 28); font-size: calc(var(--ox-u) * 44); }
.ox-empty-addr p { margin: calc(var(--ox-u) * 20) 0 0; color: var(--ox-muted); font-size: calc(var(--ox-u) * 31); }
.ox-addr { display: flex; align-items: center; gap: calc(var(--ox-u) * 30); padding: calc(var(--ox-u) * 36); border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 40); background: var(--ox-card); }
.ox-addr__ic { flex: 0 0 calc(var(--ox-u) * 96); display: grid; place-items: center; width: calc(var(--ox-u) * 96); height: calc(var(--ox-u) * 96); border-radius: 50%; background: #f1f3ef; color: #11150b; font-weight: 800; font-size: calc(var(--ox-u) * 36); }
.ox-addr__main { flex: 1; min-width: 0; }
.ox-addr__main strong { display: block; font-size: calc(var(--ox-u) * 38); }
.ox-addr__main small { display: block; margin-top: calc(var(--ox-u) * 12); color: var(--ox-muted); font-size: calc(var(--ox-u) * 29); word-break: break-all; }
.ox-addr i { width: calc(var(--ox-u) * 16); height: calc(var(--ox-u) * 16); border-right: 2px solid var(--ox-muted); border-top: 2px solid var(--ox-muted); transform: rotate(45deg); }
.ox-all { border: 0; background: none; color: var(--ox-green); font: inherit; font-size: calc(var(--ox-u) * 32); font-weight: 700; cursor: pointer; }
.ox-btn-arrow { justify-content: center; position: relative; }
.ox-btn-arrow::after { content: ""; position: absolute; right: calc(var(--ox-u) * 70); width: calc(var(--ox-u) * 24); height: calc(var(--ox-u) * 24); border-right: 4px solid #11150b; border-top: 4px solid #11150b; transform: rotate(45deg); }
/* language */
.ox-lang { display: flex; align-items: center; gap: calc(var(--ox-u) * 34); width: 100%; height: calc(var(--ox-u) * 140); padding: 0; border: 0; background: none; color: var(--ox-text); font: inherit; font-size: calc(var(--ox-u) * 40); text-align: left; cursor: pointer; }
form + form .ox-lang { border-top: 1px solid var(--ox-line); }
.ox-lang__mark { display: grid; place-items: center; flex: 0 0 calc(var(--ox-u) * 84); width: calc(var(--ox-u) * 84); height: calc(var(--ox-u) * 84); border: 1px solid #3c4a28; border-radius: 50%; background: #20301a; color: var(--ox-green); font-size: calc(var(--ox-u) * 28); font-weight: 800; }
.ox-lang strong { flex: 1; font-weight: 600; }
.ox-lang small { color: var(--ox-muted); font-size: calc(var(--ox-u) * 29); }
.ox-lang.is-active strong, .ox-lang.is-active small { color: var(--ox-green); }
.ox-lang em { color: var(--ox-green); font-style: normal; font-weight: 800; font-size: calc(var(--ox-u) * 40); }
.ox-lang i { width: calc(var(--ox-u) * 16); height: calc(var(--ox-u) * 16); border-right: 2px solid var(--ox-muted); border-top: 2px solid var(--ox-muted); transform: rotate(45deg); }
/* flash modal */
.ox-flash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.ox-flash__backdrop { position: absolute; inset: 0; border: 0; background: rgba(5,8,6,.72); backdrop-filter: blur(6px); }
.ox-flash__dialog { position: relative; width: min(100%, 340px); padding: 34px 26px 26px; border: 1px solid var(--ox-line); border-radius: 28px; background: linear-gradient(160deg, #1f2522, #151917); text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.ox-flash__close { position: absolute; top: 12px; right: 16px; border: 0; background: none; color: var(--ox-muted); font-size: 26px; line-height: 1; cursor: pointer; }
.ox-flash__icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px; border: 2px solid #6b7f2a; border-radius: 50%; background: #20301a; color: var(--ox-green); font-size: 26px; font-weight: 800; }
.ox-flash__dialog h2 { margin: 0; font-size: 20px; font-weight: 800; }
.ox-flash__dialog p { margin: 12px 0 0; color: #cdd2ce; font-size: 15px; line-height: 1.5; }
.ox-flash__confirm { display: flex; align-items: center; justify-content: center; text-decoration: none; width: 100%; height: 50px; margin-top: 24px; border: 0; border-radius: 16px; font: inherit; font-size: 17px; cursor: pointer; }
/* native select inside .ox-input */
.ox-input--select { padding: 0 calc(var(--ox-u) * 30); }
.ox-input select { flex: 1; width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ox-text); font: inherit; font-size: calc(var(--ox-u) * 40); }
.ox-input select option { background: #1b211e; color: #f5f7f4; }
/* history */
.ox-chips { display: flex; gap: calc(var(--ox-u) * 20); margin: calc(var(--ox-u) * 44) calc(var(--ox-u) * -54) calc(var(--ox-u) * 36); padding: 0 calc(var(--ox-u) * 54); overflow-x: auto; scrollbar-width: none; }
.ox-chips::-webkit-scrollbar { display: none; }
.ox-chipf { flex: 0 0 auto; padding: calc(var(--ox-u) * 20) calc(var(--ox-u) * 38); border: 1px solid var(--ox-line); border-radius: 999px; background: var(--ox-card); color: var(--ox-muted) !important; font-size: calc(var(--ox-u) * 31); white-space: nowrap; }
.ox-chipf.is-active { border-color: #6b7f2a; background: #2a331d; color: var(--ox-green) !important; font-weight: 700; }
.ox-tx__main small + small { margin-top: calc(var(--ox-u) * 8); }
.ox-tx > b.in { color: var(--ox-green); }
.ox-pager { display: flex; align-items: center; justify-content: center; gap: calc(var(--ox-u) * 40); margin-top: calc(var(--ox-u) * 20); color: var(--ox-muted); font-size: calc(var(--ox-u) * 34); }
.ox-pager a, .ox-pager .is-off { display: grid; place-items: center; width: calc(var(--ox-u) * 90); height: calc(var(--ox-u) * 90); border: 1px solid var(--ox-line); border-radius: 50%; background: var(--ox-card); color: var(--ox-text); text-decoration: none; font-size: calc(var(--ox-u) * 44); }
.ox-pager .is-off { opacity: .35; }
/* team */
.ox-tm-overview h2 { margin: 0; font-size: calc(var(--ox-u) * 42); font-weight: 800; }
.ox-tm-stats { display: grid; grid-template-columns: 1fr 1fr 1.2fr; margin-top: calc(var(--ox-u) * 24); text-align: center; }
.ox-tm-stats > div { padding: calc(var(--ox-u) * 20) 0; }
.ox-tm-stats > div + div { border-left: 1px solid var(--ox-line); }
.ox-tm-stats strong { display: block; font-size: calc(var(--ox-u) * 66); font-weight: 800; }
.ox-tm-stats strong.g { color: var(--ox-green); }
.ox-tm-stats span { display: block; margin-top: calc(var(--ox-u) * 16); color: var(--ox-muted); font-size: calc(var(--ox-u) * 30); }
.ox-tm-month { display: flex; justify-content: space-between; margin-top: calc(var(--ox-u) * 20); padding-top: calc(var(--ox-u) * 26); border-top: 1px solid var(--ox-line); color: var(--ox-muted); font-size: calc(var(--ox-u) * 31); }
.ox-tm-month b { color: var(--ox-text); font-size: calc(var(--ox-u) * 36); }
.ox-tm-table { padding: calc(var(--ox-u) * 20) calc(var(--ox-u) * 40); }
.ox-tm-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; align-items: center; min-height: calc(var(--ox-u) * 118); color: var(--ox-text); font-size: calc(var(--ox-u) * 38); text-decoration: none; }
.ox-tm-row + .ox-tm-row { border-top: 1px solid var(--ox-line); }
.ox-tm-row--head { min-height: calc(var(--ox-u) * 100); color: var(--ox-muted); font-size: calc(var(--ox-u) * 31); }
.ox-tm-row--2 { grid-template-columns: 1fr auto; }
.ox-tm-row .r { text-align: right; }
.ox-tm-row .dim { color: var(--ox-muted); font-size: calc(var(--ox-u) * 32); }
.ox-rate { display: inline-block; padding: calc(var(--ox-u) * 12) calc(var(--ox-u) * 36); border-radius: 999px; background: #2a331d; color: #a6e04b; font-size: calc(var(--ox-u) * 32); }
.ox-dash { color: var(--ox-muted); font-style: normal; }
.ox-tm-who { display: flex; align-items: center; gap: calc(var(--ox-u) * 26); }
.ox-tm-who i { display: grid; place-items: center; width: calc(var(--ox-u) * 76); height: calc(var(--ox-u) * 76); border: 1px solid #3c4a28; border-radius: 50%; background: #20301a; color: var(--ox-green); font-size: calc(var(--ox-u) * 30); font-style: normal; font-weight: 700; }
/* vip */
.ox-badge { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.ox-mylevel { padding: calc(var(--ox-u) * 36) calc(var(--ox-u) * 42); border-color: #3b4a2a; background: linear-gradient(160deg, #1e2a1f, #151b16); margin-bottom: calc(var(--ox-u) * 26); }
.ox-mylevel__top { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--ox-u) * 20); }
.ox-mylevel__top > .ox-badge { flex: 0 0 calc(var(--ox-u) * 230); width: calc(var(--ox-u) * 230); }
.ox-mylevel__tag { margin: 0; color: var(--ox-green); font-size: calc(var(--ox-u) * 33); font-weight: 700; }
.ox-mylevel__name { display: flex; align-items: center; gap: calc(var(--ox-u) * 26); margin-top: calc(var(--ox-u) * 20); }
.ox-mylevel__name strong { font-size: calc(var(--ox-u) * 56); font-weight: 800; }
.ox-chip--dot::before { content: ""; display: inline-block; width: calc(var(--ox-u) * 18); height: calc(var(--ox-u) * 18); margin-right: calc(var(--ox-u) * 14); border-radius: 50%; background: var(--ox-green); vertical-align: middle; }
.ox-chip--dot.is-off { background: #332a1c; color: #e8c978; }
.ox-chip--dot.is-off::before { background: #e8c978; }
.ox-mylevel__sub { margin: calc(var(--ox-u) * 24) 0 0; color: var(--ox-muted); font-size: calc(var(--ox-u) * 31); }
.ox-mylevel__stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: calc(var(--ox-u) * 28); padding-top: calc(var(--ox-u) * 26); border-top: 1px solid var(--ox-line); }
.ox-mylevel__stats > div + div { padding-left: calc(var(--ox-u) * 30); border-left: 1px solid var(--ox-line); }
.ox-mylevel__stats span { color: var(--ox-muted); font-size: calc(var(--ox-u) * 31); }
.ox-mylevel__stats strong { display: block; margin-top: calc(var(--ox-u) * 16); font-size: calc(var(--ox-u) * 42); font-weight: 800; }
.ox-mylevel__stats strong.g { color: var(--ox-green); }
.ox-balstrip { display: flex; align-items: center; gap: calc(var(--ox-u) * 30); padding: calc(var(--ox-u) * 26) calc(var(--ox-u) * 34); border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 44); background: var(--ox-card); }
.ox-balstrip__ic { display: grid; place-items: center; width: calc(var(--ox-u) * 100); height: calc(var(--ox-u) * 100); border: 1px solid #3c4a28; border-radius: 50%; background: #20301a; }
.ox-balstrip__ic img { width: calc(var(--ox-u) * 50); }
.ox-balstrip small { display: block; color: var(--ox-muted); font-size: calc(var(--ox-u) * 31); }
.ox-balstrip strong { display: block; margin-top: calc(var(--ox-u) * 8); font-size: calc(var(--ox-u) * 50); font-weight: 800; }
.ox-balstrip i { margin-left: auto; width: calc(var(--ox-u) * 24); height: calc(var(--ox-u) * 24); border-right: 4px solid var(--ox-green); border-top: 4px solid var(--ox-green); transform: rotate(45deg); margin-right: calc(var(--ox-u) * 10); }
.ox-vtabs { display: flex; gap: calc(var(--ox-u) * 20); margin: 0 calc(var(--ox-u) * -54) calc(var(--ox-u) * 36); padding: 0 calc(var(--ox-u) * 54); overflow-x: auto; scrollbar-width: none; }
.ox-vtabs::-webkit-scrollbar { display: none; }
.ox-vtab { flex: 0 0 auto; padding: calc(var(--ox-u) * 24) calc(var(--ox-u) * 50); border: 1px solid var(--ox-line); border-radius: 999px; background: var(--ox-card); color: var(--ox-muted); font: inherit; font-size: calc(var(--ox-u) * 36); font-weight: 700; cursor: pointer; }
.ox-vtab.is-active { border-color: #6b7f2a; background: #2a331d; color: var(--ox-green); }
.ox-vtab.is-unavailable { opacity: .5; }
.ox-vpanel { display: none; }
.ox-vpanel.is-active { display: block; }
.ox-vcard { position: relative; padding: calc(var(--ox-u) * 40); }
.ox-vcard__badge { position: absolute; right: calc(var(--ox-u) * 20); top: calc(var(--ox-u) * 150); width: calc(var(--ox-u) * 330); opacity: .16; pointer-events: none; z-index: 0; }
.ox-vcard > *:not(.ox-vcard__badge) { position: relative; z-index: 1; }
.ox-vcard__head { display: flex; align-items: center; justify-content: space-between; }
.ox-vcard__head h2 { margin: 0; font-size: calc(var(--ox-u) * 42); font-weight: 800; }
.ox-vcard__price { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--ox-u) * 34); padding-bottom: calc(var(--ox-u) * 28); border-bottom: 1px solid var(--ox-line); color: var(--ox-muted); font-size: calc(var(--ox-u) * 33); }
.ox-vcard__price strong { color: var(--ox-green); font-size: calc(var(--ox-u) * 48); font-weight: 800; }
.ox-vgrid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ox-vgrid > div { padding: calc(var(--ox-u) * 26) calc(var(--ox-u) * 10) calc(var(--ox-u) * 26) calc(var(--ox-u) * 28); border-bottom: 1px solid var(--ox-line); min-width: 0; }
.ox-vgrid > div:nth-child(3n+1) { padding-left: 0; }
.ox-vgrid > div:nth-child(3n+2), .ox-vgrid > div:nth-child(3n) { border-left: 1px solid var(--ox-line); }
.ox-vgrid > div:nth-last-child(-n+3) { border-bottom: 0; }
.ox-vgrid span { display: block; color: var(--ox-muted); font-size: calc(var(--ox-u) * 30); }
.ox-vgrid strong { display: block; margin-top: calc(var(--ox-u) * 16); font-size: calc(var(--ox-u) * 40); font-weight: 800; word-break: break-word; }
.ox-vgrid strong.y { color: #e8c978; }
.ox-vnotice { display: flex; align-items: center; gap: calc(var(--ox-u) * 26); margin-top: calc(var(--ox-u) * 26); padding: calc(var(--ox-u) * 26) calc(var(--ox-u) * 30); border: 1px solid #4b3f22; border-radius: calc(var(--ox-u) * 32); background: #25211a; }
.ox-vnotice i { display: grid; place-items: center; flex: 0 0 calc(var(--ox-u) * 70); width: calc(var(--ox-u) * 70); height: calc(var(--ox-u) * 70); border-radius: 50%; background: #2a331d; color: var(--ox-green); font-style: normal; font-size: calc(var(--ox-u) * 36); }
.ox-vnotice strong { display: block; font-size: calc(var(--ox-u) * 33); }
.ox-vnotice b { display: block; margin-top: calc(var(--ox-u) * 8); font-size: calc(var(--ox-u) * 31); font-weight: 500; color: #d8dcd9; }
.ox-vtask { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--ox-u) * 24); margin-top: calc(var(--ox-u) * 34); }
.ox-vtask strong { font-size: calc(var(--ox-u) * 38); }
.ox-vtask p { margin: calc(var(--ox-u) * 12) 0 0; color: var(--ox-muted); font-size: calc(var(--ox-u) * 30); line-height: 1.4; }
.ox-vtask__btn { flex: 0 0 auto; padding: calc(var(--ox-u) * 26) calc(var(--ox-u) * 44); font-size: calc(var(--ox-u) * 32); }
.ox-vtask__lock { flex: 0 0 auto; padding: calc(var(--ox-u) * 26) calc(var(--ox-u) * 36); border: 1px solid var(--ox-line); border-radius: 999px; background: #20262a; color: var(--ox-muted); font-size: calc(var(--ox-u) * 32); font-weight: 700; }
.ox-vteam { margin-top: calc(var(--ox-u) * 36); padding: calc(var(--ox-u) * 38) calc(var(--ox-u) * 40); border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 44); background: var(--ox-card); }
.ox-vteam header { display: flex; align-items: center; justify-content: space-between; }
.ox-vteam h2 { margin: 0; font-size: calc(var(--ox-u) * 40); font-weight: 800; }
.ox-vteam header a { color: var(--ox-muted); text-decoration: none; font-size: calc(var(--ox-u) * 30); }
.ox-vteam__gen { display: flex; justify-content: space-between; margin-top: calc(var(--ox-u) * 28); color: var(--ox-muted); font-size: calc(var(--ox-u) * 32); }
.ox-vteam__gen strong { color: var(--ox-text); font-size: calc(var(--ox-u) * 40); }
.ox-vteam__rates { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--ox-u) * 18); margin-top: calc(var(--ox-u) * 24); }
.ox-vteam__rates > div { display: flex; flex-direction: column; align-items: center; gap: calc(var(--ox-u) * 14); padding: calc(var(--ox-u) * 20) 0; border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 28); color: var(--ox-muted); font-size: calc(var(--ox-u) * 29); }
.vp-sum { display: flex; justify-content: space-between; margin: 16px 0 12px; font-size: 16px; }
.vp-sum span { color: var(--ox-green); font-weight: 800; }
.vp-lab { display: block; margin: 8px 0 8px; color: var(--ox-muted); font-size: 14px; }
.vp-note { margin: 14px 0 0; color: #cdd2ce; font-size: 14px; line-height: 1.5; }
.ox-flash[hidden] { display: none; }
/* deposit / withdraw history */
.rh-list { display: flex; flex-direction: column; gap: calc(var(--ox-u) * 30); }
.rh-card { margin-bottom: 0; padding: calc(var(--ox-u) * 38) calc(var(--ox-u) * 42); }
.rh-card > header { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--ox-u) * 20); padding-bottom: calc(var(--ox-u) * 26); border-bottom: 1px solid var(--ox-line); }
.rh-card > header strong { font-size: calc(var(--ox-u) * 56); font-weight: 800; }
.rh-card > header small { color: var(--ox-muted); font-size: calc(var(--ox-u) * 32); font-weight: 600; }
.rh-tag { flex: 0 0 auto; padding: calc(var(--ox-u) * 16) calc(var(--ox-u) * 34); border-radius: 999px; font-size: calc(var(--ox-u) * 30); font-weight: 700; }
.rh-tag--ok { background: #2a331d; color: var(--ox-green); }
.rh-tag--wait { background: #332a1c; color: #e8c978; }
.rh-tag--bad { background: #3a2220; color: #ef8a82; }
.rh-card dl { margin: calc(var(--ox-u) * 8) 0 0; }
.rh-card dl > div { display: flex; justify-content: space-between; gap: calc(var(--ox-u) * 28); padding: calc(var(--ox-u) * 20) 0; font-size: calc(var(--ox-u) * 32); }
.rh-card dt { flex: 0 0 auto; color: var(--ox-muted); }
.rh-card dd { margin: 0; text-align: right; word-break: break-all; color: #e6eae7; }
.rh-btn { display: flex; align-items: center; justify-content: center; height: calc(var(--ox-u) * 100); margin-top: calc(var(--ox-u) * 16); border-radius: calc(var(--ox-u) * 36); font-size: calc(var(--ox-u) * 36); text-decoration: none; }
/* activities & article */
.ac-list { display: flex; flex-direction: column; gap: calc(var(--ox-u) * 26); }
.ac-item { display: flex; align-items: center; gap: calc(var(--ox-u) * 32); margin-bottom: 0; padding: calc(var(--ox-u) * 36) calc(var(--ox-u) * 40); color: inherit; text-decoration: none; }
.ac-item__ic { display: grid; place-items: center; flex: 0 0 calc(var(--ox-u) * 90); width: calc(var(--ox-u) * 90); height: calc(var(--ox-u) * 90); border: 1px solid #3c4a28; border-radius: 50%; background: #20301a; }
.ac-item__ic img { width: calc(var(--ox-u) * 42); }
.ac-item > div { flex: 1; min-width: 0; }
.ac-item strong { display: block; font-size: calc(var(--ox-u) * 38); font-weight: 700; line-height: 1.4; word-break: break-word; }
.ac-item small { display: block; margin-top: calc(var(--ox-u) * 12); color: var(--ox-muted); font-size: calc(var(--ox-u) * 29); }
.ac-item i { flex: 0 0 auto; width: calc(var(--ox-u) * 16); height: calc(var(--ox-u) * 16); border-right: 2px solid var(--ox-muted); border-top: 2px solid var(--ox-muted); transform: rotate(45deg); }
[dir="rtl"] .ac-item i { transform: rotate(-135deg); }
.ar-card { padding: calc(var(--ox-u) * 44) calc(var(--ox-u) * 44) calc(var(--ox-u) * 50); }
.ar-title { margin: 0; font-size: calc(var(--ox-u) * 50); font-weight: 800; line-height: 1.35; word-break: break-word; }
.ar-divider { height: 1px; margin: calc(var(--ox-u) * 30) 0; border: 0; background: linear-gradient(90deg, rgba(200,255,40,.55), rgba(200,255,40,0)); }
.ar-body { color: #d6dbd7; font-size: calc(var(--ox-u) * 36); line-height: 1.8; word-break: break-word; overflow-wrap: anywhere; }
.ar-body > *:first-child { margin-top: 0; } .ar-body > *:last-child { margin-bottom: 0; }
.ar-body p { margin: 0 0 1em; }
.ar-body h1, .ar-body h2, .ar-body h3, .ar-body h4 { margin: 1.4em 0 .6em; color: #fff; line-height: 1.4; }
.ar-body h1 { font-size: 1.3em; } .ar-body h2 { font-size: 1.2em; } .ar-body h3, .ar-body h4 { font-size: 1.05em; }
.ar-body a { color: var(--ox-green); text-decoration: underline; }
.ar-body strong, .ar-body b { color: #fff; }
.ar-body ul, .ar-body ol { margin: 0 0 1em; padding-inline-start: 1.4em; }
.ar-body li { margin-bottom: .4em; }
.ar-body blockquote { margin: 0 0 1em; padding: .5em .9em; border-inline-start: 3px solid #6b7f2a; background: rgba(0,0,0,.22); color: #c3c9c5; }
.ar-body img, .ar-body video { display: block; max-width: 100%; width: auto; height: auto; margin: 1em auto; border-radius: 14px; }
.ar-body table { display: block; max-width: 100%; overflow-x: auto; margin: 0 0 1em; border-collapse: collapse; }
.ar-body th, .ar-body td { padding: .5em .7em; border: 1px solid var(--ox-line); }
.ar-body pre, .ar-body code { background: rgba(0,0,0,.35); border-radius: 6px; font-size: .9em; }
.ar-body pre { padding: .7em; overflow-x: auto; }
.ar-body hr { border: 0; height: 1px; margin: 1.2em 0; background: var(--ox-line); }
/* vip v2: octagon badges */
.ox-badge { filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.ox-vtabs { justify-content: space-between; gap: calc(var(--ox-u) * 8); margin-bottom: calc(var(--ox-u) * 34); }
.ox-vtab { flex: 1 0 calc(var(--ox-u) * 118); display: flex; flex-direction: column; align-items: center; gap: calc(var(--ox-u) * 14); padding: 0 0 calc(var(--ox-u) * 14); border: 0; border-radius: 0; background: none; color: var(--ox-muted); font-size: calc(var(--ox-u) * 31); font-weight: 600; position: relative; }
.ox-vtab .ox-badge { width: calc(var(--ox-u) * 104); height: auto; }
.ox-vtab.is-active { border: 0; background: none; color: var(--ox-green); font-weight: 800; }
.ox-vtab.is-active::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: calc(var(--ox-u) * 7); border-radius: 999px; background: var(--ox-green); }
.ox-mylevel__top > .ox-badge { flex: 0 0 calc(var(--ox-u) * 190); width: calc(var(--ox-u) * 190); }
.ox-vcard__hb { display: inline-block; width: calc(var(--ox-u) * 76); margin-right: calc(var(--ox-u) * 22); vertical-align: middle; }
.ox-vcard__hb .ox-badge { width: 100%; height: auto; }
.ox-vgrid strong.g { color: var(--ox-green); }
.ox-vnotice b.g { color: var(--ox-green); }
/* favorites */
.ox-cta.is-on { background: #2a331d; color: var(--ox-green) !important; border: 1px solid #6b7f2a !important; }
.ox-count { padding: calc(var(--ox-u) * 8) calc(var(--ox-u) * 22); border-radius: 999px; background: #2a331d; color: var(--ox-green); font-style: normal; font-size: calc(var(--ox-u) * 30); font-weight: 700; }
.ox-favempty { display: block; margin-bottom: 0; text-align: center; color: var(--ox-muted) !important; font-size: calc(var(--ox-u) * 34); }
.ox-favempty b { color: var(--ox-green); }
.ox-favstrip { display: grid; grid-auto-flow: column; grid-auto-columns: calc(var(--ox-u) * 330); gap: calc(var(--ox-u) * 24); margin: 0 calc(var(--ox-u) * -54); padding: 0 calc(var(--ox-u) * 54); overflow-x: auto; scrollbar-width: none; }
.ox-favstrip::-webkit-scrollbar { display: none; }
.ox-favcard { display: block; overflow: hidden; border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 40); background: var(--ox-card); padding-bottom: calc(var(--ox-u) * 26); }
.ox-favcard img { display: block; width: 100%; aspect-ratio: 468 / 258; object-fit: cover; }
.ox-favcard strong { display: block; padding: calc(var(--ox-u) * 22) calc(var(--ox-u) * 24) 0; font-size: calc(var(--ox-u) * 34); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ox-favcard span { display: block; padding: calc(var(--ox-u) * 10) calc(var(--ox-u) * 24) 0; color: var(--ox-green); font-size: calc(var(--ox-u) * 34); font-weight: 700; }
/* legal pages (user agreement / privacy notice) */
[dir="rtl"] .ox-back::before { transform: rotate(-135deg); }
.lg-shell { padding-bottom: calc(var(--ox-u) * 120); }
.lg-updated { align-self: flex-start; margin-top: calc(var(--ox-u) * 20); color: var(--ox-green); font-size: calc(var(--ox-u) * 36); font-weight: 800; white-space: nowrap; }
.lg-heading { margin: calc(var(--ox-u) * 72) 0 0; font-size: calc(var(--ox-u) * 56); font-weight: 800; line-height: 1.3; }
.lg-effective { margin: calc(var(--ox-u) * 26) 0 0; color: var(--ox-muted); font-size: calc(var(--ox-u) * 33); }
.lg-intro { margin: calc(var(--ox-u) * 50) 0 0; color: #d6dbd7; font-size: calc(var(--ox-u) * 36); line-height: 1.7; }
.lg-list { margin: calc(var(--ox-u) * 36) 0 0; padding: 0; list-style: none; }
.lg-list li { display: flex; gap: calc(var(--ox-u) * 38); margin-top: calc(var(--ox-u) * 56); }
.lg-no { flex: 0 0 calc(var(--ox-u) * 76); color: var(--ox-green); font-size: calc(var(--ox-u) * 40); font-weight: 800; line-height: 1.5; }
.lg-list h3 { margin: 0; font-size: calc(var(--ox-u) * 38); font-weight: 700; line-height: 1.5; }
.lg-list p { margin: calc(var(--ox-u) * 14) 0 0; color: #b9c0bc; font-size: calc(var(--ox-u) * 35); line-height: 1.85; overflow-wrap: anywhere; }
.lg-footer { margin: calc(var(--ox-u) * 110) 0 0; text-align: center; color: var(--ox-muted); font-size: calc(var(--ox-u) * 33); }
.lg-footer a { color: inherit; text-decoration: none; }
.lg-other { margin: calc(var(--ox-u) * 36) 0 0; text-align: center; }
.lg-other a { color: var(--ox-green); font-size: calc(var(--ox-u) * 34); text-decoration: none; }
/* about */
.ab-hero__copy { top: auto; bottom: calc(var(--ox-u) * 56); max-width: 60%; }
.ab-hero__copy h2 { font-size: calc(var(--ox-u) * 58); }
.ab-lead { margin: calc(var(--ox-u) * 36) calc(var(--ox-u) * 10) calc(var(--ox-u) * 40); color: #cdd2ce; font-size: calc(var(--ox-u) * 36); line-height: 1.7; }
.ab-card { display: flex; align-items: flex-start; gap: calc(var(--ox-u) * 34); margin-bottom: calc(var(--ox-u) * 26); padding: calc(var(--ox-u) * 40); }
.ab-card__ic { display: grid; place-items: center; flex: 0 0 calc(var(--ox-u) * 100); width: calc(var(--ox-u) * 100); height: calc(var(--ox-u) * 100); border: 1px solid #3c4a28; border-radius: 50%; background: #20301a; }
.ab-card__ic img { width: calc(var(--ox-u) * 50); }
.ab-card h3 { margin: 0; font-size: calc(var(--ox-u) * 42); font-weight: 800; }
.ab-card p { margin: calc(var(--ox-u) * 14) 0 0; color: var(--ox-muted); font-size: calc(var(--ox-u) * 33); line-height: 1.6; }
/* settings */
.st-row { display: flex; align-items: center; gap: calc(var(--ox-u) * 32); min-height: calc(var(--ox-u) * 170); color: inherit; text-decoration: none; }
.st-row + .st-row { border-top: 1px solid var(--ox-line); }
.st-ic { display: grid; place-items: center; flex: 0 0 calc(var(--ox-u) * 92); width: calc(var(--ox-u) * 92); height: calc(var(--ox-u) * 92); border: 1px solid #3c4a28; border-radius: 50%; background: #20301a; }
.st-ic svg { width: calc(var(--ox-u) * 46); height: calc(var(--ox-u) * 46); fill: none; stroke: var(--ox-green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.st-main { flex: 1; min-width: 0; }
.st-main strong { display: block; font-size: calc(var(--ox-u) * 39); font-weight: 700; }
.st-main small { display: block; margin-top: calc(var(--ox-u) * 12); color: var(--ox-muted); font-size: calc(var(--ox-u) * 30); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-main small.ok { color: var(--ox-green); }
.st-main small.warn { color: #e8c978; }
.st-row em { color: var(--ox-muted); font-style: normal; font-size: calc(var(--ox-u) * 32); }
.st-row i { flex: 0 0 auto; width: calc(var(--ox-u) * 16); height: calc(var(--ox-u) * 16); border-right: 2px solid var(--ox-muted); border-top: 2px solid var(--ox-muted); transform: rotate(45deg); }
[dir="rtl"] .st-row i { transform: rotate(-135deg); }
/* security forms: eye toggle + send-code button */
.ox-input .password-toggle { position: relative; flex: 0 0 calc(var(--ox-u) * 68); width: calc(var(--ox-u) * 68); height: calc(var(--ox-u) * 68); margin-right: calc(var(--ox-u) * -14); border: 0; background: transparent; cursor: pointer; }
.ox-input .password-toggle span { position: absolute; left: 50%; top: 50%; width: calc(var(--ox-u) * 37); height: calc(var(--ox-u) * 25); border: 1.5px solid #6d7872; border-radius: 50% 50% 45% 45%; transform: translate(-50%, -50%); }
.ox-input .password-toggle span::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--ox-u) * 8); height: calc(var(--ox-u) * 8); border: 1.5px solid #6d7872; border-radius: 50%; transform: translate(-50%, -50%); }
.ox-input .password-toggle .eye-off::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--ox-u) * 46); height: 1.5px; background: #6d7872; transform: translate(-50%, -50%) rotate(38deg); }
.ox-input .password-toggle .eye-on, .ox-input .password-toggle.is-showing .eye-off { display: none; }
.ox-input .password-toggle.is-showing .eye-on { display: block; }
.ox-code-btn { flex: 0 0 auto; margin-right: calc(var(--ox-u) * -14); padding: calc(var(--ox-u) * 22) calc(var(--ox-u) * 34); border: 1px solid #44552a; border-radius: calc(var(--ox-u) * 28); background: #2a331d; color: #c8ff28; font: inherit; font-size: calc(var(--ox-u) * 32); font-weight: 700; cursor: pointer; white-space: nowrap; }
.ox-code-btn:disabled { opacity: .55; cursor: not-allowed; }
.ox-help:empty { display: none; }
.ox-input[readonly], .ox-input input[readonly] { cursor: default; }
/* GM-configured banner carousel */
.ox-banner--gm { position: relative; margin-top: calc(var(--ox-u) * 56); }
.ox-banner__viewport { position: relative; width: 100%; aspect-ratio: 970 / 432; overflow: hidden; border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 56); background: #11160f; }
.ox-banner__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.ox-banner__slide.is-active { opacity: 1; }
.ox-banner__dots { position: absolute; left: 0; right: 0; bottom: calc(var(--ox-u) * 26); display: flex; justify-content: center; gap: calc(var(--ox-u) * 16); }
.ox-banner__dots button { width: calc(var(--ox-u) * 20); height: calc(var(--ox-u) * 20); padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer; }
.ox-banner__dots button.is-active { background: var(--ox-green); }

/* ===== VIP level carousel (等级介绍) ===== */
.ox-vhead { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--ox-u) * 56); height: calc(var(--ox-u) * 90); }
.ox-vhead h1 { position: absolute; left: 0; right: 0; margin: 0; text-align: center; font-size: calc(var(--ox-u) * 48); font-weight: 700; pointer-events: none; }
.ox-vhead__help { position: relative; display: grid; place-items: center; width: calc(var(--ox-u) * 90); height: calc(var(--ox-u) * 90); margin-right: calc(var(--ox-u) * -20); }
.ox-vhead__help img { width: calc(var(--ox-u) * 54); height: calc(var(--ox-u) * 54); }
.ox-vsub { margin: calc(var(--ox-u) * 18) 0 0; text-align: center; color: #aab7ac; font-size: calc(var(--ox-u) * 27); }
.ox-vstage { position: relative; margin: calc(var(--ox-u) * 58) calc(var(--ox-u) * -54) 0; overflow: hidden; }
.ox-vcard2 { display: none; position: absolute; z-index: 2; left: calc(var(--ox-u) * 205); top: 0; width: calc(var(--ox-u) * 670); min-height: calc(var(--ox-u) * 930); box-sizing: border-box; padding: calc(var(--ox-u) * 32) calc(var(--ox-u) * 40) calc(var(--ox-u) * 52); border: 1px solid #34503f; border-radius: calc(var(--ox-u) * 80); text-align: center; background: url("vip/glow.png") no-repeat center calc(var(--ox-u) * -48) / calc(var(--ox-u) * 624) auto, linear-gradient(170deg, #1d2a22 0%, #151b18 45%, #121714 100%); box-shadow: 0 0 0 calc(var(--ox-u) * 8) rgba(30, 44, 36, .55), 0 calc(var(--ox-u) * 30) calc(var(--ox-u) * 60) rgba(0, 0, 0, .45); }
.ox-vcard2.is-active { display: block; position: relative; left: auto; margin: 0 auto; animation: ox-vin .28s ease both; }
.ox-vcard2.from-left { animation-name: ox-vin-l; }
.ox-vcard2.from-right { animation-name: ox-vin-r; }
@keyframes ox-vin { from { opacity: 0; } to { opacity: 1; } }
@keyframes ox-vin-l { from { opacity: 0; transform: translateX(calc(var(--ox-u) * -90)); } to { opacity: 1; transform: none; } }
@keyframes ox-vin-r { from { opacity: 0; transform: translateX(calc(var(--ox-u) * 90)); } to { opacity: 1; transform: none; } }
.ox-vcard2__badge { display: block; width: calc(var(--ox-u) * 232); height: auto; margin: 0 auto; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
.ox-vcard2.is-unavailable .ox-vcard2__badge { filter: grayscale(.45) drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
.ox-vcard2 h2 { margin: calc(var(--ox-u) * 6) 0 0; font-size: calc(var(--ox-u) * 64); font-weight: 700; line-height: 1.2; }
.ox-vcard2__sub { margin: calc(var(--ox-u) * 12) 0 0; color: #aab7ac; font-size: calc(var(--ox-u) * 25); }
.ox-vcard2__price { display: flex; align-items: center; justify-content: space-between; margin: calc(var(--ox-u) * 36) calc(var(--ox-u) * 8) 0; padding-top: calc(var(--ox-u) * 20); border-top: 2px solid; border-image: linear-gradient(90deg, transparent, #4f8a34 20%, #8bd12b 50%, #4f8a34 80%, transparent) 1; }
.ox-vcard2__price span { color: #aab7ac; font-size: calc(var(--ox-u) * 23); }
.ox-vcard2__price strong { color: #c8ff24; font-size: calc(var(--ox-u) * 40); font-weight: 700; }
.ox-vrows { list-style: none; margin: calc(var(--ox-u) * 26) 0 0; padding: 0; }
.ox-vrows li { display: flex; align-items: center; gap: calc(var(--ox-u) * 18); height: calc(var(--ox-u) * 78); padding: 0 calc(var(--ox-u) * 14); border-bottom: 1px solid #2b342f; }
.ox-vrows li:last-child { border-bottom: 1px solid #2b342f; }
.ox-vrows img { flex: 0 0 auto; width: calc(var(--ox-u) * 50); height: calc(var(--ox-u) * 50); }
.ox-vrows span { flex: 1 1 auto; text-align: left; color: #aab7ac; font-size: calc(var(--ox-u) * 21); }
.ox-vrows b { flex: 0 0 auto; color: #f1f5ef; font-size: calc(var(--ox-u) * 30); font-weight: 700; }
.ox-vrows b.g { color: #c8ff24; }
.ox-vrows b.y { color: #ffc84b; }
.ox-vcard2 .ox-vnotice { margin-top: calc(var(--ox-u) * 34); padding: calc(var(--ox-u) * 24) calc(var(--ox-u) * 20); text-align: left; border-radius: calc(var(--ox-u) * 36); gap: calc(var(--ox-u) * 20); }
.ox-vcard2 .ox-vnotice i { flex-basis: calc(var(--ox-u) * 58); width: calc(var(--ox-u) * 58); height: calc(var(--ox-u) * 58); }
.ox-vcard2 .ox-vnotice strong { font-size: calc(var(--ox-u) * 24); }
.ox-vcard2 .ox-vnotice b { margin-top: calc(var(--ox-u) * 8); font-size: calc(var(--ox-u) * 21); color: #aab7ac; }
.ox-vcard2 .ox-vnotice b.g { color: var(--ox-green); }
.ox-vpeek { position: absolute; z-index: 1; top: calc(var(--ox-u) * 68); width: calc(var(--ox-u) * 385); bottom: calc(var(--ox-u) * -60); box-sizing: border-box; padding: calc(var(--ox-u) * 75) 0 0; border: 1px solid #27322b; border-radius: calc(var(--ox-u) * 70); background: linear-gradient(170deg, #1a221d, #121714); color: #b5c0b5; opacity: .82; font: inherit; cursor: pointer; text-align: left; }
.ox-vpeek[hidden] { display: none; }
.ox-vpeek img { display: block; width: calc(var(--ox-u) * 148); height: auto; }
.ox-vpeek b { display: block; width: calc(var(--ox-u) * 148); margin-top: calc(var(--ox-u) * 14); text-align: center; font-size: calc(var(--ox-u) * 42); font-weight: 700; }
.ox-vpeek--prev { left: calc(var(--ox-u) * -70); }
.ox-vpeek--prev img, .ox-vpeek--prev b { margin-left: calc(var(--ox-u) * 150); }
.ox-vpeek--next { right: calc(var(--ox-u) * -70); }
.ox-vpeek--next img, .ox-vpeek--next b { margin-left: calc(var(--ox-u) * 87); }
.ox-vpeek.is-unavailable img { filter: grayscale(.45); }
.ox-vpager { display: flex; align-items: center; justify-content: space-between; margin: calc(var(--ox-u) * 34) calc(var(--ox-u) * 20) 0; position: relative; z-index: 3; color: #d5ddd4; font-size: calc(var(--ox-u) * 30); }
.ox-vpager__btn { display: grid; place-items: center; width: calc(var(--ox-u) * 86); height: calc(var(--ox-u) * 86); padding: 0; border: 0; background: none; cursor: pointer; }
.ox-vpager__btn img { width: 100%; height: 100%; }
.ox-vpager__btn--next img { transform: scaleX(-1); }
.ox-vpager__btn:disabled { opacity: .35; cursor: default; }
.ox-vact { display: none; margin-top: calc(var(--ox-u) * 50); }
.ox-vact.is-active { display: block; }
.ox-vact form { margin: 0; }
.ox-vbtn { position: relative; display: flex; align-items: stretch; width: 100%; height: calc(var(--ox-u) * 118); padding: 0; border: 0; border-radius: 999px; background: linear-gradient(90deg, #dcff62, #b6f01c); box-shadow: 0 0 0 calc(var(--ox-u) * 4) rgba(200, 255, 36, .35), 0 calc(var(--ox-u) * 14) calc(var(--ox-u) * 36) rgba(160, 220, 20, .22); color: #11170b; font: inherit; font-size: calc(var(--ox-u) * 34); font-weight: 700; text-decoration: none; cursor: pointer; }
.ox-vbtn span { display: grid; place-items: center; flex: 1 1 0; padding: 0 calc(var(--ox-u) * 24); text-align: center; line-height: 1.15; }
.ox-vbtn span:first-child { flex-grow: 1.35; }
.ox-vbtn span + span { margin: calc(var(--ox-u) * 20) 0; border-left: 1px solid rgba(17, 23, 11, .22); }
.ox-vbtn.is-off, .ox-vbtn:disabled { opacity: .55; cursor: default; box-shadow: none; }
.ox-vrules { margin-top: calc(var(--ox-u) * 54); padding: calc(var(--ox-u) * 38) calc(var(--ox-u) * 38) calc(var(--ox-u) * 42); border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 56); background: linear-gradient(160deg, #1f2522, #171b19); }
.ox-vrules h3 { display: flex; align-items: center; gap: calc(var(--ox-u) * 22); margin: 0; font-size: calc(var(--ox-u) * 34); }
.ox-vrules h3 img { width: calc(var(--ox-u) * 8); height: calc(var(--ox-u) * 48); }
.ox-vrules ol { margin: calc(var(--ox-u) * 20) 0 0; padding-left: calc(var(--ox-u) * 44); color: #c2ccc3; font-size: calc(var(--ox-u) * 26); line-height: calc(var(--ox-u) * 60 / (var(--ox-u) * 26)); }
body.ox-page .ox-vact .ox-vbtn, body.ox-page .ox-vact .ox-vbtn span { color: #11170b; }

/* Profile wallet card: available balance | pending release */
.ox-wallet__bal { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; margin-top: calc(var(--ox-u) * 4); }
.ox-wallet__bal > div { min-width: 0; }
.ox-wallet__bal > div + div { padding-left: calc(var(--ox-u) * 36); border-left: 1px solid var(--ox-line); }
.ox-wallet__bal .lab { display: block; color: var(--ox-muted); font-size: calc(var(--ox-u) * 30); }
.ox-wallet__bal .amt { margin: calc(var(--ox-u) * 10) 0 0; font-size: calc(var(--ox-u) * 56); white-space: nowrap; }
.ox-wallet .hint { grid-column: 1; margin-top: calc(var(--ox-u) * 18); color: var(--ox-muted); font-size: calc(var(--ox-u) * 28); line-height: 1.4; }
.ox-wallet .link { align-self: end; margin-top: calc(var(--ox-u) * 18); }

/* Two wallets (A / B) */
.ox-wallets { display: flex; align-items: stretch; gap: calc(var(--ox-u) * 24); }
.ox-wallets > div { flex: 1 1 0; min-width: 0; }
.ox-wallets > i { align-self: center; color: var(--ox-green); font-style: normal; font-size: calc(var(--ox-u) * 48); }
.ox-wallets span { display: block; color: var(--ox-muted); font-size: calc(var(--ox-u) * 30); }
.ox-wallets strong { display: block; margin-top: calc(var(--ox-u) * 10); font-size: calc(var(--ox-u) * 52); font-weight: 800; white-space: nowrap; }
.ox-wallets strong.g { color: var(--ox-green); }
.ox-wallets small { display: block; margin-top: calc(var(--ox-u) * 10); color: var(--ox-muted); font-size: calc(var(--ox-u) * 25); line-height: 1.4; }
.ox-wallets--split { margin: calc(var(--ox-u) * 34) 0; padding: calc(var(--ox-u) * 30) 0; border-top: 1px solid var(--ox-line); border-bottom: 1px solid var(--ox-line); }
.ox-wallets--split > div + div { padding-left: calc(var(--ox-u) * 30); border-left: 1px solid var(--ox-line); }

/* VIP page: wallet balances used for purchases */
.ox-vbal { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--ox-u) * 20) 0; margin-top: calc(var(--ox-u) * 36); padding: calc(var(--ox-u) * 28) calc(var(--ox-u) * 36); border: 1px solid var(--ox-line); border-radius: calc(var(--ox-u) * 44); background: linear-gradient(160deg, #1f2522, #171b19); color: var(--ox-text); text-decoration: none; }
.ox-vbal > div { min-width: 0; }
.ox-vbal > div + div { padding-left: calc(var(--ox-u) * 36); border-left: 1px solid var(--ox-line); }
.ox-vbal span { display: block; color: var(--ox-muted); font-size: calc(var(--ox-u) * 28); }
.ox-vbal strong { display: block; margin-top: calc(var(--ox-u) * 8); font-size: calc(var(--ox-u) * 46); font-weight: 800; white-space: nowrap; }
.ox-vbal > div:first-child strong { color: var(--ox-green); }
.ox-vbal small { grid-column: 1 / -1; color: var(--ox-muted); font-size: calc(var(--ox-u) * 25); line-height: 1.4; }
.ox-vstage { margin-top: calc(var(--ox-u) * 36); }

/* Profile wallet card: the whole card (panel padding included) is a link; text links sit above the cover */
.ox-wallet { position: relative; }
.ox-wallet__cover { position: absolute; inset: calc(var(--ox-u) * -42); z-index: 1; border-radius: calc(var(--ox-u) * 56); }
.ox-wallet .ox-chip, .ox-wallet .link { position: relative; z-index: 2; }

/* Home "about" card is a button that opens the about dialog */
button.ox-aboutcard { width: 100%; font: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ox-about-dialog { width: min(100%, 360px); max-height: calc(100svh - 48px); overflow-y: auto; text-align: left; }
.ox-about-dialog h2 { text-align: center; }
.ox-about-dialog h3 { margin: 22px 0 0; color: var(--ox-green); font-size: 15px; font-weight: 700; }
.ox-about-dialog p { margin-top: 8px; }
.ox-about-dialog ul { margin: 8px 0 0; padding: 0; list-style: none; }
.ox-about-dialog li { position: relative; margin-top: 8px; padding-left: 18px; color: #cdd2ce; font-size: 15px; line-height: 1.5; }
.ox-about-dialog li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--ox-green); }