/* mad-home3.css — Home v3 (10-08, owner: "i thought it would look different and better").
   Restyles the existing home elements (ids kept, live updates untouched). Loads after every other stylesheet. */

/* ── stage: aurora behind the top of home ─────────────────────────────── */
body.h3 #panes > .tabpane.wrap{position:relative;isolation:isolate}
body.h3 #panes > .tabpane.wrap::before{content:"";position:absolute;z-index:-1;left:-16px;right:-16px;top:-90px;height:560px;pointer-events:none;
  background:
    radial-gradient(60% 46% at 18% 30%,rgba(139,92,246,.42),transparent 70%),
    radial-gradient(48% 38% at 88% 18%,rgba(51,226,160,.20),transparent 70%),
    radial-gradient(70% 50% at 60% 70%,rgba(109,40,217,.22),transparent 72%);
  animation:h3drift 14s ease-in-out infinite alternate;will-change:transform;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
@keyframes h3drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,14px,0) scale(1.06)}}

/* ── hero: open balance stage, no box ─────────────────────────────────── */
body.h3 .tabpane .hero{background:none!important;border:0!important;box-shadow:none!important;padding:14px 4px 58px!important;margin:0!important;overflow:visible!important;border-radius:0!important}
body.h3 .tabpane .hero::before,body.h3 .tabpane .hero::after{display:none!important}
body.h3 .tabpane .hero .hero-glow{display:none!important}
body.h3 .hero .hero-lbl{font:600 11px/1 var(--mono)!important;letter-spacing:.18em!important;color:rgba(255,255,255,.55)!important;text-transform:uppercase}
body.h3 .hero .hero-val{margin:14px 0 10px!important}
body.h3 .hero .hero-val #portUsd{font:800 52px/1 var(--head)!important;letter-spacing:-.035em!important;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 30%,#cbb8ff);-webkit-background-clip:text;background-clip:text;color:transparent!important;
  filter:drop-shadow(0 8px 30px rgba(139,92,246,.45))}
body.h3 .hero .hero-delta{display:inline-flex!important;align-items:center;gap:6px;padding:7px 12px!important;border-radius:999px!important;
  font:700 13px/1 var(--mono)!important}
body.h3 .hero .hero-delta.pos{background:rgba(51,226,160,.12)!important;border:1px solid rgba(51,226,160,.35)!important;color:var(--green)!important}
body.h3 .hero .hero-delta.neg{background:rgba(255,84,112,.12)!important;border:1px solid rgba(255,84,112,.35)!important;color:var(--red)!important}
body.h3 .hero .hero-chart{height:78px!important;margin:18px -4px 6px!important;opacity:1!important}
body.h3 .hero .hero-chart svg path,body.h3 .hero .hero-chart svg polyline{stroke:url(#h3grad)!important;stroke-width:2.6!important;fill:none;filter:drop-shadow(0 0 8px rgba(139,92,246,.75))}
body.h3 .hero .hero-chart .hc-empty span{font:500 11px/1 var(--mono)!important;color:rgba(255,255,255,.38)!important;letter-spacing:.04em}
body.h3 .hero .hero-sub{border:0!important;padding:4px 2px 0!important;font:500 12.5px/1 var(--mono)!important;color:rgba(255,255,255,.6)!important}
body.h3 .hero .hero-cta{color:var(--mad2)!important;font-weight:700!important}

/* quick actions dock into the bottom edge of the hero */
body.h3 #hbQuick.hb-home{position:relative;z-index:2;margin:-46px 0 22px!important;padding:10px!important;gap:6px!important;
  border-radius:24px!important;background:linear-gradient(180deg,rgba(30,24,52,.82),rgba(14,11,25,.9))!important;
  border:1px solid rgba(180,154,255,.18)!important;box-shadow:0 18px 40px -16px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08)!important;
  }
body.h3 #hbQuick .hb-qa{background:transparent!important;border:0!important;box-shadow:none!important;padding:8px 2px 6px!important;min-height:0!important;height:auto!important;gap:8px!important;border-radius:16px!important;transition:background .2s}
body.h3 #hbQuick .hb-qa:active{background:rgba(255,255,255,.06)!important;transform:scale(.96)}
body.h3 #hbQuick .hb-qa > :first-child{width:48px!important;height:48px!important;border-radius:16px!important}
body.h3 #hbQuick .hb-qa{font:600 12px/1 var(--disp)!important;color:rgba(255,255,255,.82)!important}

/* ── live now: FOMO + MAD Fun side by side as twin tiles ──────────────────
   Both layers insist their card is a DIRECT child of the home pane (":scope > #mfHome"), so nothing is moved:
   the pane becomes a 2-column grid and every other child spans both columns. */
body.h3 #panes > .tabpane.wrap:has(> .hero){display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;align-items:start}
body.h3 #panes > .tabpane.wrap > *{grid-column:1 / -1;min-width:0}
body.h3 #panes > .tabpane.wrap > #mfHome{grid-column:1}
body.h3 #panes > .tabpane.wrap > #fuHome{grid-column:2}
body.h3 .h3-sec{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 12px}
body.h3 .h3-sec h3{margin:0;font:800 19px/1 var(--head);letter-spacing:-.01em;color:#fff}
body.h3 .h3-sec small{font:600 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--green);display:inline-flex;align-items:center;gap:7px}
body.h3 .h3-sec small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);animation:h3ping 1.8s infinite}
@keyframes h3ping{0%{box-shadow:0 0 0 0 rgba(51,226,160,.55)}100%{box-shadow:0 0 0 9px rgba(51,226,160,0)}}

body.h3 #mfHome,body.h3 #fuHome{height:200px!important;margin:0 0 24px!important;padding:0!important;border-radius:24px!important;box-sizing:border-box;overflow:hidden!important;display:block!important;text-align:left!important;position:relative}
body.h3 #mfHome{background:radial-gradient(130% 90% at 100% 0%,rgba(255,84,112,.26),transparent 60%),linear-gradient(165deg,#1f1530,#0d0a17)!important;border:1px solid rgba(255,120,150,.24)!important}
body.h3 #fuHome{background:radial-gradient(130% 90% at 100% 0%,rgba(51,226,160,.22),transparent 60%),linear-gradient(165deg,#0f211b,#0a0f0d)!important;border:1px solid rgba(51,226,160,.24)!important}
/* the layers' own markup stays in the DOM (they repaint it); the v3 tile is drawn from it */
body.h3 #mfHome.h3-has > :not(.h3t),body.h3 #fuHome.h3-has > :not(.h3t){display:none!important}
body.h3 .h3t{position:absolute;inset:0;padding:14px;display:flex;flex-direction:column;gap:0}
body.h3 .h3t-h{display:flex;align-items:center;gap:8px;font:700 13.5px/1 var(--disp);color:#fff;white-space:nowrap}
body.h3 .h3t-i{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.08);flex:0 0 28px;overflow:hidden}
body.h3 .h3t-i img{width:18px;height:18px;object-fit:contain}
body.h3 .h3t-v{margin-top:16px;font:800 26px/1 var(--head);letter-spacing:-.025em;color:#fff;white-space:nowrap}
body.h3 .h3t-l{margin-top:6px;font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);white-space:nowrap}
body.h3 .h3t-rows{margin-top:auto;display:flex;flex-direction:column;gap:6px}
body.h3 .h3t-r{display:flex;align-items:center;justify-content:space-between;gap:6px;height:30px;padding:0 9px 0 4px;border-radius:11px;background:rgba(255,255,255,.055);min-width:0}
body.h3 .h3t-r .mf-tk{width:22px!important;height:22px!important;flex:0 0 22px;border-radius:7px!important}
body.h3 .h3t-r b{font:700 12px/1 var(--mono)!important;white-space:nowrap}
body.h3 .h3t-r .h3t-t{flex:1;min-width:0;font:700 12px/1 var(--disp);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.h3 .h3t-r em{font:600 11px/1 var(--mono);font-style:normal;color:var(--gold);white-space:nowrap}
body.h3 .h3t-av{display:flex;padding-left:6px}
body.h3 .h3t-av > *{width:26px!important;height:26px!important;margin-left:-6px!important;border-radius:50%!important;border:2px solid #0c1411!important;overflow:hidden;flex:0 0 26px}
body.h3 .h3t-av img{width:100%;height:100%;object-fit:cover}
body.h3 .h3t-k{font:700 9px/1 var(--mono);letter-spacing:.14em;color:var(--green);margin-bottom:-2px}

/* ── invite: slim banner ──────────────────────────────────────────────── */
body.h3 .tabpane > .rf-promo{min-height:0!important;padding:12px 14px!important;margin-bottom:26px!important;border-radius:20px!important;
  background:linear-gradient(100deg,rgba(139,92,246,.30),rgba(236,72,153,.16) 60%,rgba(255,255,255,.03))!important;border:1px solid rgba(200,170,255,.24)!important}
body.h3 .tabpane > .rf-promo .pe{width:46px!important;height:46px!important;flex:0 0 46px!important}
body.h3 .tabpane > .rf-promo .pe img{width:56px!important;height:auto!important;margin-top:-10px}
body.h3 .tabpane > .rf-promo .pt b{font:800 15px/1.2 var(--head)!important}
body.h3 .tabpane > .rf-promo .pt small{font-size:12px!important;opacity:.75}

/* ── section heads ────────────────────────────────────────────────────── */
body.h3 .tabpane > .shead{margin:8px 2px 12px!important}
body.h3 .tabpane > .shead h3{font:800 19px/1 var(--head)!important;letter-spacing:-.01em!important;color:#fff!important}
body.h3 .tabpane > .shead > .ic{display:none!important}

/* ── cards: one family ────────────────────────────────────────────────── */
body.h3 #posList .mx-port,body.h3 #logList .ds-list{border-radius:22px!important;border:1px solid rgba(255,255,255,.08)!important}
body.h3 #panes > .tabpane.wrap.h3-one > #mfHome,body.h3 #panes > .tabpane.wrap.h3-one > #fuHome{grid-column:1 / -1}
body.h3 .h3t-av{margin-bottom:8px}
@media (prefers-reduced-motion:reduce){body.h3 #panes > .tabpane.wrap::before,body.h3 .h3-sec small::before{animation:none!important}}

/* ══ v3 across the other tabs ══════════════════════════════════════════ */
/* page titles: one display style */
body.h3 .mc-title,body.h3 .more-head h2,body.h3 .mb-title b,body.h3 .mb-title h2,body.h3 .mb-title > :first-child{font-family:var(--head)!important;font-weight:800!important;letter-spacing:-.02em!important;
  background:linear-gradient(180deg,#fff 35%,#c9b6ff);-webkit-background-clip:text;background-clip:text;color:transparent!important}
body.h3 .mc-title{font-size:26px!important}
body.h3 .more-head h2{font-size:32px!important}
/* section headings */
body.h3 .mx-h{font:800 18px/1 var(--head)!important;letter-spacing:-.01em!important;text-transform:none!important;color:#fff!important;margin:4px 2px 12px!important;opacity:1!important}
body.h3 .sn-head h3,body.h3 .shead.hw-v h3{font:800 17px/1 var(--head)!important;letter-spacing:-.01em!important;color:#fff!important}
body.h3 .sn-head > .ic{display:none!important}
/* Calls: four numbers in one strip */
body.h3 .mc-score.ds-stats--4{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;padding:4px!important;border-radius:20px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))!important;border:1px solid rgba(255,255,255,.09)!important}
body.h3 .mc-score .ds-stat{background:none!important;border:0!important;box-shadow:none!important;padding:12px 6px 11px!important;text-align:center!important;min-height:0!important;border-radius:16px!important}
body.h3 .mc-score .ds-stat + .ds-stat{border-left:1px solid rgba(255,255,255,.07)!important;border-radius:0!important}
body.h3 .mc-score .ds-stat > :first-child{font:600 9.5px/1 var(--mono)!important;letter-spacing:.1em!important;white-space:nowrap}
body.h3 .mc-score .ds-stat > :last-child{font:800 19px/1 var(--head)!important;margin-top:8px!important;letter-spacing:-.02em}
/* one card family: rounder, hairline glass edge */
body.h3 .mc-card,body.h3 .sn-sec .sn-list > *,body.h3 .mx-feat > *,body.h3 .hb-tools > *,body.h3 .mx-list,body.h3 .hw-asset,body.h3 .mb-ca,body.h3 .mc-cta,body.h3 .sniper-hero{border-radius:22px!important}
body.h3 .mc-card{border:1px solid rgba(180,154,255,.14)!important;box-shadow:0 20px 40px -24px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06)!important}
/* the glow sits behind every tab, not just home */
body.h3 #panes > *:first-child{position:relative}