/* Wider H5 canvas and black/green navigation polish. */
:root { --h5-width: 520px; --nav-black: #090e0c; --nav-panel: #111815; --neon-green: #16e18d; --deep-green: #00ad67; }

.energy-page,
.swap-page,
.profile-page,
.h5-bottom-nav { width: min(100%, var(--h5-width)) !important; }
.energy-page-inner,
.swap-inner,
.profile-inner { max-width: var(--h5-width) !important; }
.pf-page { width: min(100%, var(--h5-width)) !important; }
.pf-modal { width: min(100%, 500px) !important; }

.h5-bottom-nav { height: calc(80px + env(safe-area-inset-bottom)) !important; border-top: 1px solid rgba(22,225,141,.28) !important; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); background: linear-gradient(180deg,#121a17 0,#080c0b 100%) !important; box-shadow: 0 -10px 32px rgba(0,0,0,.28),0 -1px 0 rgba(22,225,141,.1) !important; }
.h5-bottom-nav::before { content: ""; position: absolute; top: 0; left: 50%; width: 76px; height: 3px; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: var(--neon-green); box-shadow: 0 0 18px rgba(22,225,141,.75); }
.h5-nav-item { top: 10px !important; width: 82px !important; height: 58px !important; gap: 5px !important; color: #76817c !important; transition: color .2s ease,transform .2s ease; }
.h5-nav-item svg { width: 23px !important; height: 23px !important; }
.h5-nav-item span { font-size: 11px; font-weight: 700; }
.h5-nav-item:hover { color: #c7d1cc !important; transform: translateY(-1px); }
.h5-nav-item.is-active { color: var(--neon-green) !important; }
.h5-nav-energy { left: 7% !important; }
.h5-nav-swap { left: 27% !important; }
.h5-nav-profile { right: 7% !important; }

#lucky-wheel-launcher { bottom: 23px !important; width: 70px !important; height: 70px !important; border: 5px solid var(--nav-black) !important; color: var(--neon-green) !important; background: radial-gradient(circle at 38% 30%,#1c2c25,#070b09 70%) !important; box-shadow: 0 0 0 2px var(--neon-green),0 8px 25px rgba(0,0,0,.42),0 0 25px rgba(22,225,141,.32) !important; }
#lucky-wheel-launcher::before { color: var(--neon-green) !important; text-shadow: 0 0 14px rgba(22,225,141,.7); }
#lucky-wheel-launcher::after { bottom: -22px !important; color: var(--neon-green) !important; font-weight: 800; }

.energy-page,.swap-page,.profile-page { bottom: calc(80px + env(safe-area-inset-bottom)) !important; box-shadow: 0 0 42px rgba(11,38,28,.14); }
.energy-card,.swap-card,.fiat-card,.profile-user-card,.profile-assets,.profile-menu,.pf-card { border: 1px solid rgba(0,173,103,.08); }
.energy-submit,.swap-submit,.profile-actions button:first-child,.pf-primary { background: linear-gradient(135deg,#16cf7d,#009c5a) !important; box-shadow: 0 8px 22px rgba(0,156,90,.2); }

@media (min-width: 521px) {
  body { background: radial-gradient(circle at 50% 4%,#dffff0 0,#dfe9e5 42%,#d4dfdb 100%) !important; }
  .energy-page-inner,.swap-inner,.profile-inner { padding-inline: 18px !important; }
  .energy-card,.swap-card,.profile-assets,.profile-user-card,.profile-menu,.fiat-card { border-radius: 27px; }
  .energy-plans { gap: 14px; }
  .profile-menu-item { min-height: 76px; }
}

@media (max-width: 390px) {
  .h5-nav-item { width: 68px !important; }
  .h5-nav-energy { left: 4% !important; }
  .h5-nav-swap { left: 25% !important; }
  .h5-nav-profile { right: 4% !important; }
  #lucky-wheel-launcher { width: 64px !important; height: 64px !important; }
}