/* Cohesive black/green component system. */
:root { --ink:#101815; --ink-2:#17231e; --green:#10c979; --green-dark:#009b5a; --green-soft:#ebfff5; --line:#dce7e2; --muted:#7b8a84; }
body,.energy-page,.swap-page,.profile-page,.pf-page { font-family: Inter,"Segoe UI","Microsoft YaHei",Arial,sans-serif !important; }
.energy-back,.swap-back { display: none !important; }
.energy-page,.swap-page,.profile-page,.pf-page { background: linear-gradient(180deg,#eff5f2 0,#e8f0ed 100%) !important; }
.energy-page-inner,.swap-inner,.profile-inner { padding-top: 12px !important; }
.energy-back,.swap-back,.pf-back { margin-left: 3px !important; color: #52635c !important; font-size: 13px !important; }
.energy-card,.swap-card,.fiat-card,.profile-user-card,.profile-assets,.profile-menu,.pf-card { border: 1px solid rgba(10,62,40,.08) !important; border-radius: 21px !important; box-shadow: 0 9px 28px rgba(16,58,41,.07) !important; }
.energy-card { padding: 19px 18px 20px !important; }.energy-eyebrow { color: var(--green-dark) !important; font-size: 10px !important; font-weight: 800; letter-spacing: .08em; }.energy-head h1 { color: var(--ink) !important; font-size: 26px !important; font-weight: 850; letter-spacing: -.03em; }.energy-subtitle { color: var(--muted) !important; font-size: 12px !important; }.energy-free { border-color: rgba(16,201,121,.45) !important; padding: 8px 12px !important; color: var(--green-dark) !important; background: var(--green-soft) !important; font-size: 12px !important; }
.energy-alert { grid-template-columns: 43px 1fr !important; margin: 18px 0 22px !important; border: 0 !important; border-radius: 16px !important; padding: 13px !important; color: #d8eee4 !important; background: linear-gradient(135deg,#15231d,#0d1713) !important; box-shadow: 0 8px 18px rgba(7,25,17,.13); }.energy-clock { width: 43px !important; height: 43px !important; border-radius: 13px !important; color: var(--ink) !important; background: var(--green) !important; }.energy-alert strong { color: #fff !important; font-size: 13px !important; }.energy-alert p { color: #a9bbb3 !important; font-size: 11px !important; }
.energy-label-row { margin: 17px 0 8px !important; }.energy-label-row label { color: var(--ink-2); font-size: 14px !important; }.energy-helper { font-size: 10px !important; }.energy-book { color: var(--green-dark) !important; }.energy-input-wrap { min-height: 55px !important; grid-template-columns: 45px minmax(0,1fr) auto !important; border-color: var(--line) !important; border-radius: 14px !important; box-shadow: none !important; }.energy-input-icon,.energy-input-icon.purple { color: var(--green-dark) !important; background: var(--green-soft) !important; font-size: 19px !important; }.energy-input-wrap input { font-size: 13px !important; }.energy-network { color: #fff !important; background: var(--ink-2) !important; }
.energy-plans { gap: 10px !important; margin-top: 18px !important; }.energy-plan { min-height: 137px !important; border: 1.5px solid var(--line) !important; border-radius: 17px !important; padding: 15px 13px !important; font-family: inherit !important; }.energy-plan.is-selected { border-color: var(--green) !important; background: var(--green-soft) !important; box-shadow: inset 0 0 0 1px var(--green); }.energy-plan-check { top: 12px !important; right: 11px !important; width: 23px !important; height: 23px !important; background: var(--green-dark) !important; }.energy-plan-title { font-size: 21px !important; }.energy-plan-energy { margin-top: 12px !important; font-family: inherit !important; font-size: 14px !important; }.energy-plan-note { margin-top: 4px !important; font-size: 10px !important; }.energy-plan-price { margin-top: 12px !important; color: var(--green-dark) !important; font-size: 14px !important; }.energy-summary { margin-block: 14px !important; }.energy-submit { min-height: 51px !important; border-radius: 14px !important; color: var(--green) !important; background: var(--ink) !important; box-shadow: 0 9px 22px rgba(8,24,16,.17) !important; font-size: 15px !important; }.energy-status { color: var(--muted) !important; }
.swap-card,.fiat-card { padding: 18px !important; }.swap-logo { color: var(--green) !important; background: var(--ink) !important; }.swap-head h1 { font-size: 22px !important; }.swap-box { border-color: var(--line) !important; border-radius: 17px !important; background: #f8fbf9 !important; }.swap-amount-row input,.swap-output,.fiat-price,.profile-value { font-family: inherit !important; }.swap-token { border-color: var(--line) !important; }.swap-arrow { background: var(--ink) !important; }.swap-submit { color: var(--green) !important; background: var(--ink) !important; }.fiat-item { border-color: var(--line) !important; border-radius: 16px !important; }.fiat-item.hot { border-color: var(--green) !important; background: var(--green-soft) !important; }.fiat-code,.fiat-price { font-family: inherit !important; }
.swap-arrow { cursor: pointer; transition: transform .2s ease,background .2s ease; }.swap-arrow:hover { transform: rotate(180deg); background: var(--green-dark) !important; }.swap-arrow:focus-visible { outline: 3px solid rgba(16,201,121,.28); outline-offset: 3px; }
.fiat-refresh:disabled { opacity: .6; cursor: wait; }
.profile-avatar { background: linear-gradient(145deg,#17251f,#050a07) !important; box-shadow: inset 0 0 0 2px rgba(16,201,121,.5); }.profile-vip { color: #061a10 !important; background: var(--green) !important; }.profile-balance { border: 1px solid rgba(10,62,40,.05); }.profile-balance.trx,.profile-balance.usdt,.profile-balance.energy { background: #f4f8f6 !important; }.profile-coin.trx,.profile-coin.usdt,.profile-coin.energy { color: var(--green) !important; background: var(--ink) !important; }.profile-actions button { border-color: var(--ink) !important; color: var(--ink) !important; }.profile-actions button:first-child { color: var(--green) !important; background: var(--ink) !important; }.profile-menu-icon,.pf-list-icon,.pf-empty-icon { color: var(--green-dark) !important; background: var(--green-soft) !important; }
.pf-invite-hero { background: linear-gradient(145deg,#17251f,#07110c) !important; }.pf-invite-icon { color: var(--green) !important; }.pf-invite-buttons button { color: var(--ink) !important; }.pf-support-icon,.pf-tutorial-icon { color: var(--green) !important; background: var(--ink) !important; }.pf-primary { color: var(--green) !important; background: var(--ink) !important; box-shadow: none !important; }
.lw-dialog { background: radial-gradient(circle at 50% 0,#183c2c 0,#0d1a14 48%,#070b09 100%) !important; }.lw-title { color: var(--green) !important; text-shadow: 0 0 18px rgba(16,201,121,.35) !important; }.lw-count { background: rgba(0,0,0,.28) !important; }.lw-count b { color: var(--green) !important; }.lw-wheel { border-color: var(--green) !important; }.lw-spin { color: var(--ink) !important; background: var(--green) !important; }.lwg-card { background: linear-gradient(155deg,#17251f,#07110c) !important; }.lwg-icon,.lwg-card button { color: var(--ink) !important; background: var(--green) !important; }
.lw-pointer { top: -7px !important; width: 34px !important; height: 45px !important; border: 0 !important; border-radius: 7px 7px 4px 4px !important; background: linear-gradient(180deg,#ff5b91 0,#ff2f76 100%) !important; clip-path: polygon(0 0,100% 0,50% 100%) !important; filter: drop-shadow(0 4px 4px rgba(0,0,0,.48)) !important; }
.lw-pointer::after { content: ""; position: absolute; top: 8px; left: 50%; width: 10px; height: 10px; transform: translateX(-50%); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.h5-bottom-nav { height: calc(74px + env(safe-area-inset-bottom)) !important; border-radius: 16px 16px 0 0 !important; }.h5-nav-item { top: 7px !important; height: 54px !important; }.energy-page,.swap-page,.profile-page { bottom: calc(74px + env(safe-area-inset-bottom)) !important; }#lucky-wheel-launcher { bottom: 20px !important; width: 65px !important; height: 65px !important; }#lucky-wheel-launcher::after { bottom: -20px !important; }
@media(max-width:390px){.energy-card{padding-inline:13px!important}.energy-head h1{font-size:23px!important}.energy-plan{min-height:130px!important;padding-inline:10px!important}.energy-alert{grid-template-columns:38px 1fr!important}.energy-clock{width:38px!important;height:38px!important}}

/* Platform beta wheel is part of the Energy page, not the bottom navigation. */
#lucky-wheel-launcher { display: none !important; }
.h5-bottom-nav { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; align-items: start !important; padding-inline: 8px !important; }
.h5-nav-item,.h5-nav-energy,.h5-nav-swap,.h5-nav-profile { position: relative !important; top: 7px !important; right: auto !important; left: auto !important; width: 100% !important; height: 56px !important; }
.energy-section-title { margin: 22px 4px 10px; }
.energy-section-title span { color: var(--green-dark); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.energy-section-title h1 { margin: 3px 0 0; color: var(--ink); font-size: 21px; line-height: 1.2; }
.beta-wheel-card { position: relative; min-height: 234px; overflow: hidden; border: 1px solid rgba(52,255,165,.22); border-radius: 22px; padding: 21px 19px 18px; color: #fff; background: radial-gradient(circle at 88% 12%,rgba(16,201,121,.28),transparent 34%),linear-gradient(145deg,#17271f 0,#08110d 75%); box-shadow: 0 14px 34px rgba(7,25,17,.2); }
.beta-wheel-copy { position: relative; z-index: 2; width: 70%; }
.beta-wheel-badge { display: inline-flex; border: 1px solid rgba(16,201,121,.42); border-radius: 999px; padding: 5px 8px; color: var(--green); background: rgba(16,201,121,.08); font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.beta-wheel-copy h2 { margin: 12px 0 7px; font-size: 24px; line-height: 1.15; letter-spacing: -.03em; }
.beta-wheel-copy p { margin: 0; color: #9fb2aa; font-size: 11px; line-height: 1.55; }
.beta-wheel-meta { display: flex; gap: 7px; margin-top: 13px; }
.beta-wheel-meta span { border-radius: 7px; padding: 5px 7px; color: #c4d4cd; background: rgba(255,255,255,.07); font-size: 9px; }
.beta-wheel-meta b { color: var(--green); }
.beta-wheel-art { position: absolute; z-index: 1; top: 24px; right: -21px; display: grid; width: 132px; height: 132px; place-items: center; border: 8px solid var(--green); border-radius: 50%; background: conic-gradient(#149963 0 45deg,#20352b 45deg 90deg,#0fc97a 90deg 135deg,#29473a 135deg 180deg,#149963 180deg 225deg,#20352b 225deg 270deg,#0fc97a 270deg 315deg,#29473a 315deg); box-shadow: 0 0 34px rgba(16,201,121,.24); transform: rotate(10deg); }
.beta-wheel-art::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }
.beta-wheel-art span { z-index: 2; display: grid; width: 42px; height: 42px; place-items: center; border: 4px solid #fff; border-radius: 50%; color: var(--green); background: var(--ink); font-size: 18px; box-shadow: 0 5px 15px rgba(0,0,0,.35); }
.beta-wheel-art i { position: absolute; top: -15px; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-right: 10px solid transparent; border-bottom: 24px solid #fff; border-left: 10px solid transparent; }
.beta-wheel-open { position: absolute; z-index: 3; right: 18px; bottom: 17px; left: 18px; display: flex; min-height: 44px; align-items: center; justify-content: space-between; border: 0; border-radius: 12px; padding: 0 14px; color: #07110c; background: var(--green); font-size: 13px; font-weight: 900; cursor: pointer; }
.beta-wheel-open span { font-size: 19px; }
@media(max-width:360px){.beta-wheel-card{min-height:226px;padding-inline:15px}.beta-wheel-copy{width:74%}.beta-wheel-copy h2{font-size:21px}.beta-wheel-art{right:-31px;width:120px;height:120px}}
.energy-insufficient-mask { position: fixed; z-index: 10050; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(3,12,8,.68); backdrop-filter: blur(8px); }
.energy-insufficient { width: min(100%,390px); border: 1px solid rgba(16,201,121,.18); border-radius: 25px; padding: 27px 22px 20px; text-align: center; color: var(--ink); background: #fff; box-shadow: 0 25px 80px rgba(0,0,0,.34); }
.energy-insufficient-icon { display: grid; width: 62px; height: 62px; margin: 0 auto 16px; place-items: center; border-radius: 19px; color: #b87800; background: #fff0ba; font-size: 32px; }
.energy-insufficient h2 { margin: 0; font-size: 24px; }
.energy-insufficient > p { margin: 14px 3px; color: #74817c; font-size: 13px; line-height: 1.65; }
.energy-insufficient > p b { color: var(--ink); }
.energy-balance-compare { border-radius: 14px; padding: 12px 14px; background: #f4f7f5; }
.energy-balance-compare div { display: flex; align-items: center; justify-content: space-between; min-height: 26px; color: #6f7c77; font-size: 12px; }
.energy-balance-compare strong { color: var(--ink); font-size: 13px; }
.energy-insufficient .energy-insufficient-tip { margin-block: 15px !important; }
.energy-insufficient button { width: 100%; min-height: 49px; border-radius: 13px; font-size: 14px; font-weight: 850; cursor: pointer; }
.energy-invite-action { border: 0; color: #07110c; background: var(--green); }
.energy-recharge-action { margin-top: 9px; border: 1.5px solid var(--line); color: var(--ink); background: #fff; }
.energy-cancel-action { min-height: 39px !important; margin-top: 7px; border: 0; color: #89958f; background: transparent; }
.swap-insufficient-mask { position: fixed; z-index: 10050; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(3,12,8,.68); backdrop-filter: blur(8px); }
.swap-insufficient { width: min(100%,370px); border: 1px solid rgba(16,201,121,.18); border-radius: 25px; padding: 27px 22px 19px; text-align: center; color: var(--ink); background: #fff; box-shadow: 0 25px 80px rgba(0,0,0,.34); }
.swap-insufficient-icon { display: grid; width: 62px; height: 62px; margin: 0 auto 16px; place-items: center; border-radius: 19px; color: #b87800; background: #fff0ba; font-size: 32px; }
.swap-insufficient h2 { margin: 0; font-size: 24px; }
.swap-insufficient > p { margin: 13px 3px 16px; color: #74817c; font-size: 13px; line-height: 1.6; }
.swap-balance-compare { border-radius: 14px; padding: 11px 14px; background: #f4f7f5; }
.swap-balance-compare div { display: flex; align-items: center; justify-content: space-between; min-height: 28px; color: #6f7c77; font-size: 12px; }
.swap-balance-compare strong { color: var(--ink); font-size: 13px; }
.swap-insufficient button { width: 100%; min-height: 49px; border-radius: 13px; font-size: 14px; font-weight: 850; cursor: pointer; }
.swap-recharge-action { margin-top: 15px; border: 0; color: #07110c; background: var(--green); }
.swap-cancel-action { min-height: 39px !important; margin-top: 7px; border: 0; color: #89958f; background: transparent; }