/* ═══════════════════════════════════════════════════════════════
   PC WEB APP OVERHAUL, part 1 (Ren 2026-11-06). Desktop only:
   every rule is under body.dx. Phone unchanged. Logic: deskx2.js.
   ═══════════════════════════════════════════════════════════════ */
#dxNav2, .dx2-acc, #dxWalHero { display: none; }

/* the green header now shows on Account and Wallet too */
body.dx.profile-active #dxTop, body.dx.wallet-active #dxTop { display: block; }

/* ── second bar ── */
body.dx #dxNav2 { display: block; background: var(--dx-card); border-bottom: 1px solid var(--dx-line); font-family: Inter, sans-serif; }
#dxNav2 .dx-in { display: flex; align-items: stretch; height: 48px; }
#dxNav2 .dx2-l, #dxNav2 .dx2-r { display: flex; align-items: stretch; gap: 4px; }
#dxNav2 .dx2-sp { flex: 1; }
#dxNav2 a { display: flex; align-items: center; padding: 0 16px; font-weight: 600; font-size: 14.5px; color: var(--dx-mut); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
#dxNav2 a:hover { color: var(--dx-ink); }
#dxNav2 a.on { color: var(--dx-g); border-bottom-color: var(--dx-g); }
body.dx.dark-mode #dxNav2 a.on { color: #4cc96a; border-bottom-color: #4cc96a; }

/* ── Account menu ── */
body.dx .dx2-acc { display: block; background: var(--dx-card); border: 1px solid var(--dx-line); border-radius: 12px; padding: 10px; align-self: start; position: sticky; top: 16px; font-family: Inter, sans-serif; color: var(--dx-ink); }
.dx2-me { display: flex; gap: 12px; align-items: center; padding: 10px 8px 16px; border-bottom: 1px solid var(--dx-line); margin-bottom: 8px; }
.dx2-me b { display: block; font-size: 15px; word-break: break-all; }
.dx2-me small { display: block; color: var(--dx-mut); font-size: 12px; margin: 2px 0 5px; }
.dx2-av { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%; background: #e5f5e8 center / cover no-repeat; color: var(--dx-g); font: 800 19px Inter, sans-serif; display: inline-flex; align-items: center; justify-content: center; }
.dx2-id { display: inline-flex; align-items: center; gap: 4px; background: #e6f0fc; color: #1f6fd1; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.dx2-a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--dx-ink); text-decoration: none; opacity: .86; }
.dx2-a:hover { background: rgba(30, 122, 51, .06); opacity: 1; }
.dx2-a.on { background: #e5f5e8; color: var(--dx-g); opacity: 1; }
body.dx.dark-mode .dx2-a.on { background: rgba(76, 201, 106, .14); color: #4cc96a; }
.dx2-a.dx2-out { color: #c0392b; }
.dx2-bd { margin-left: auto; background: #ef4444; color: #fff; font: 800 11px Inter, sans-serif; font-style: normal; border-radius: 9px; padding: 1px 6px; }
.dx2-bd[hidden] { display: none; }

/* ── Account page ── */
body.dx #profileView { max-width: 1200px; margin: 0 auto; padding: 20px 24px 40px; box-sizing: border-box; grid-template-columns: 260px minmax(0, 1fr); column-gap: 18px; align-items: start; }
body.dx #profileView:not([style*="display: none"]):not([style*="display:none"]) { display: grid !important; }
body.dx #profileView > #dxAccPf { grid-column: 1; grid-row: 1 / span 3; }
body.dx #profileView > .profile-hero, body.dx #profileView > .profile-main-content { grid-column: 2; min-width: 0; }
body.dx #profileView > #pfcSubHead, body.dx #profileView > #pfHeroMobile { display: none !important; }
body.dx #profileView .profile-hero-nav, body.dx #profileView .profile-tab-bar, body.dx #profileView #pfcMenu { display: none !important; }
body.dx #profileView .profile-hero { background: var(--dx-card) !important; border: 1px solid var(--dx-line); border-radius: 12px; margin: 0 0 14px; padding: 18px 20px !important; color: var(--dx-ink) !important; min-height: 0 !important; box-shadow: none !important; }
body.dx #profileView .profile-hero * { color: inherit; }
body.dx #profileView .profile-hero .profile-hero-body { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body.dx #profileView .profile-main-content { max-width: none !important; margin: 0 !important; padding: 0 !important; }

/* ── Wallet page ── */
body.dx #walletView { max-width: 1200px; margin: 0 auto; padding: 20px 24px 40px; box-sizing: border-box; grid-template-columns: 260px minmax(0, 1fr) 300px; column-gap: 18px; row-gap: 14px; align-items: start; }
body.dx #walletView:not([style*="display: none"]):not([style*="display:none"]) { display: grid !important; }
body.dx #walletView > #wlHeroMobile, body.dx #walletView > .wallet-hero { display: none !important; }
body.dx #walletView > .wallet-main-content { display: contents; }
body.dx #walletView > #dxAccWal { grid-column: 1; grid-row: 1 / span 6; }
body.dx #walletView > #dxWalHero { grid-column: 2; grid-row: 1; }
body.dx #walletView .wallet-actions-row, body.dx #walletView .wl-fees-row { display: none !important; }
body.dx #walletView #walletTxCard { grid-column: 2; grid-row: 2 / span 5; margin: 0 !important; }
body.dx #walletView #walletLimitsCard { grid-column: 3; grid-row: 1; display: block !important; margin: 0 !important; }
body.dx #walletView #walletFeesCard { grid-column: 3; grid-row: 2; display: block !important; margin: 0 !important; }

body.dx #dxWalHero { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: linear-gradient(120deg, #0f3d22, #1E7A33 60%, #2ea84a); color: #fff; border-radius: 14px; padding: 24px; font-family: Inter, sans-serif; }
#dxWalHero .dx2-k { opacity: .85; font-size: 13px; font-weight: 600; }
#dxWalHero .dx2-amt { font: 800 40px Outfit, Inter, sans-serif; margin: 4px 0; letter-spacing: -.5px; }
#dxWalHero .dx2-sl { opacity: .85; font-size: 13px; }
#dxWalHero .dx2-wbtns { display: flex; gap: 10px; flex-wrap: wrap; }
#dxWalHero .dx2-wb { display: inline-flex; align-items: center; gap: 7px; background: #fff; color: var(--dx-g); border: 0; border-radius: 10px; padding: 11px 18px; font: 800 14px Inter, sans-serif; cursor: pointer; }
#dxWalHero .dx2-wb2 { background: rgba(255, 255, 255, .16); color: #fff; }
#dxWalHero .dx2-wb:hover { filter: brightness(.97); }

@media (max-width: 1180px) {
  body.dx #walletView { grid-template-columns: 230px minmax(0, 1fr); }
  body.dx #walletView #walletLimitsCard, body.dx #walletView #walletFeesCard { grid-column: 2; grid-row: auto; }
  body.dx #profileView { grid-template-columns: 230px minmax(0, 1fr); }
}

/* page background and width */
body.dx.profile-active, body.dx.wallet-active { background: var(--dx-bg) !important; }
body.dx #profileView, body.dx #walletView { width: 100%; background: transparent !important; }
body.dx #walletView { grid-template-rows: repeat(5, auto) 1fr; }
body.dx #profileView { grid-template-rows: auto auto 1fr; }

/* profile header card */
body.dx #profileView .profile-hero-body > a { display: none !important; }
body.dx #profileView .profile-card { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; width: 100%; max-width: none !important; }
body.dx #profileView .profile-card-top { display: flex; align-items: center; gap: 18px; }
body.dx #profileView .avatar-container, body.dx #profileView #profileAvatar { width: 84px !important; height: 84px !important; min-width: 84px; border-radius: 50% !important; font-size: 30px !important; }
body.dx #profileView #profileAvatar { background-color: #e5f5e8; color: var(--dx-g) !important; display: flex; align-items: center; justify-content: center; font-weight: 800; }
body.dx #profileView .profile-info { display: flex; flex-direction: column; gap: 3px; }
body.dx #profileView .profile-info .username { order: -1; font: 800 24px Outfit, Inter, sans-serif !important; letter-spacing: -.3px; }
body.dx #profileView .profile-stars { font-size: 13px !important; font-weight: 700; color: var(--dx-g) !important; letter-spacing: 0 !important; }
body.dx #profileView .profile-meta { font-size: 13px !important; color: var(--dx-mut) !important; }
body.dx #profileView .profile-card-bottom { display: none !important; }