/* ============================================================= */
/* nGRND — Home / Dashboard                                       */
/* Canvas: 1352 x 758                                             */
/* ============================================================= */
:root {
  --gold-a: #FFCE00;
  --gold-b: #FFB000;
  --gold-line: rgba(255, 236, 0, 0.30);
  --muted: #CAB791;
  --green: #55A545;
  --track: #151408;
  --track-fill: #D7AA43;
  --font: 'Quicksand', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: #000;
  font-family: var(--font);
  min-height: 100vh;
  overflow: hidden;
}

img { display: block; max-width: none; }

/* ---- Stage / responsive scaling ---- */
.stage {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.canvas {
  position: relative;
  width: 1352px;
  height: 758px;
  background: #000;
  flex: none;
  transform-origin: center center;
}

/* ---- Primitives ---- */
.a { position: absolute; }

.txt {
  color: #fff;
  font-family: var(--font);
  line-height: normal;
  word-break: break-word;
  white-space: pre-line;
}
.muted { color: var(--muted); }
.green { color: var(--green); }
.up { color: var(--muted); }
.f400 { font-weight: 400; }
.f500 { font-weight: 500; }

/* gold framed outline around the content area */
.frame {
  left: 257px; top: 14px;
  width: 1080px; height: 729px;
  border: 1.5px solid var(--gold-line);
  border-radius: 14px;
  pointer-events: none;
}

/* ---- Sidebar ---- */
.sidebar { left: 0; top: 0; width: 248px; height: 758px; background: #050404; }
.sidebar__panel {
  left: 20px; top: 13px; width: 220px; height: 732px;
  border-radius: 8px; overflow: hidden;
  border: 1.5px solid var(--gold-line);
}
.sidebar__panel img { width: 100%; height: 100%; object-fit: cover; }
.sidebar__logo { left: 25px; top: 36px; width: 188px; height: 57px; }
.sidebar__logo img { width: 100%; height: 100%; object-fit: contain; }

.nav {
  left: 31px; width: 205px; height: 24px;
  display: flex; align-items: center; gap: 13px;
  color: #fff; font-size: 13.5px; font-weight: 400;
  text-decoration: none; cursor: pointer;
}
.nav .nav__icon {
  width: 20px; min-width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
}
.nav .nav__icon img { width: 100%; height: 100%; object-fit: contain; }
.nav span { line-height: 1.15; }

/* active highlight (Home) — bright gold on the left, fading to transparent on the right */
.nav-highlight {
  left: 19px; top: 122px; width: 222px; height: 46px;
  background: linear-gradient(
    152deg,
    #FFEC00 3%,
    rgba(255, 228, 0, 0.94) 4%,
    rgba(255, 209, 0, 0.78) 5%,
    rgba(255, 195, 0, 0.66) 7%,
    rgba(255, 184, 0, 0.57) 9%,
    rgba(255, 176, 0, 0.50) 12%,
    rgba(252, 173, 0, 0.49) 13%,
    rgba(200, 129, 2, 0.28) 42%,
    rgba(161, 97, 4, 0.13) 67%,
    rgba(138, 77, 5, 0.03) 88%,
    rgba(130, 70, 6, 0) 100%
  );
  border-top: 1px solid rgba(255, 236, 0, 0.85);
  border-bottom: 1px solid rgba(255, 236, 0, 0.18);
}
.nav--active { color: #fff; font-weight: 500; }

/* ---- Cards / metrics ---- */
.card {
  background: #000;
  border: 1px solid var(--gold-line);
  border-radius: 6px;
}
.metric-label { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
.metric-value { font-size: 19px; font-weight: 500; color: #fff; }
.delta { font-size: 11px; font-weight: 500; color: var(--green); display: inline-flex; align-items: center; gap: 3px; }
.delta::before { content: "▲"; font-size: 7px; line-height: 1; }

/* mini progress bar */
.bar { width: 65px; height: 3px; background: var(--track); border-radius: 2px; }
.bar::before { content: ""; display: block; width: 39px; height: 3px; background: var(--track-fill); border-radius: 2px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #000;
  border: 1px solid var(--gold-line);
  border-radius: 6px;
  color: var(--muted);
  font-family: var(--font); font-weight: 500;
  text-transform: uppercase; letter-spacing: .03em;
  text-decoration: none; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.btn:hover { border-color: var(--gold-b); color: #fff; }
.btn .arrow { font-size: 13px; line-height: 1; }

/* ---- Badges panel ---- */
.badges-panel {
  left: 268px; top: 153px; width: 400px; height: 585px;
  background: #020201; border: 1.5px solid var(--gold-line); border-radius: 6px;
}
.badge { border-radius: 50%; overflow: hidden; }
.badge img { width: 100%; height: 100%; object-fit: cover; }
.flip-y { transform: scaleY(-1); }

/* ---- Hero / performance (background image only, no border) ---- */
.hero {
  left: 676px; top: 159px; width: 662px; height: 497px;
  border-radius: 9px; overflow: hidden;
}
.hero img { width: 100%; height: 100%; object-fit: cover; }

/* single gold frame around the whole right column (pickaxe + offer + message) */
.rcol-frame {
  left: 677px; top: 159px; width: 660px; height: 579px;
  border: 1.5px solid var(--gold-line); border-radius: 12px;
  pointer-events: none;
}

.statstrip {
  left: 689px; top: 432px; width: 468px; height: 73px;
  background: rgba(0,0,0,0.70);
  border: 1px solid var(--gold-line);
  border-radius: 6px;
}
.statstrip .divider { width: 1px; height: 50px; top: 12px; background: rgba(255,255,255,0.18); }

/* ---- Featured offer ---- */
.offer-card { left: 689px; top: 524px; width: 628px; height: 100px; background: #000; border: 1px solid var(--gold-line); border-radius: 9px; }
.offer-img { left: 703px; top: 552px; width: 62px; height: 62px; border-radius: 8px; overflow: hidden; }
.offer-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Message from team ---- */
.message-card { left: 686px; top: 633px; width: 642px; height: 95px; background: #000; }
.message-bg { left: 689px; top: 637px; width: 629px; height: 82px; border-radius: 9px; overflow: hidden; }
.message-bg img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================= */
/* Staking page                                                  */
/* ============================================================= */
/* left action panel (Buy / Add / Reduce) — single composite image */
.stake-panel {
  left: 273px; top: 159px; width: 384px; height: 574px;
  background: #000201; border: 1.5px solid var(--gold-line);
  border-radius: 10px; overflow: hidden;
}
.stake-panel img {
  position: absolute; max-width: none;
  width: 104.43%; height: 124.01%; left: -1.82%; top: -13.2%;
}

/* news / event hero (headline + photos baked into the image) */
.news {
  left: 682px; top: 161px; width: 650px; height: 349px;
  border-radius: 9px; overflow: hidden; border: 1.5px solid var(--gold-line);
}
.news img { width: 100%; height: 100%; object-fit: cover; }

/* gold frame wrapping the whole right column */
.right-frame {
  left: 677px; top: 161px; width: 660px; height: 572px;
  border: 1.5px solid var(--gold-line); border-radius: 12px;
  pointer-events: none;
}

/* ============================================================= */
/* Treasury page                                                 */
/* ============================================================= */
.treasury-panel {
  left: 277px; top: 161px; width: 369px; height: 569px;
  background: #000201; border: 1.5px solid var(--gold-line);
  border-radius: 10px; overflow: hidden;
}
.treasury-panel img {
  position: absolute; max-width: none;
  width: 102.98%; height: 118.66%; left: -1.36%; top: -8.05%;
}

/* ============================================================= */
/* Rewards Account page                                          */
/* ============================================================= */
.rewards-panel {
  left: 271px; top: 158px; width: 389px; height: 576px;
  background: #000201; border: 1.5px solid var(--gold-line);
  border-radius: 6px;
}
.rewards-panel__img {
  position: absolute; left: 15px; top: 8px; width: 357px; height: 563px;
  overflow: hidden; border-radius: 4px;
}
.rewards-panel__img img {
  position: absolute; left: 0; top: -5.43%; width: 100%; height: 112.64%; max-width: none;
}

/* ============================================================= */
/* Generic left content panel (used by the remaining pages)      */
/* ============================================================= */
/* dark backing card behind the composite panel image */
.panel-frame {
  left: 271px; top: 158px; width: 389px; height: 576px;
  background: #000201; border: 1.5px solid var(--gold-line);
  border-radius: 8px;
}
/* the composite panel image, positioned per page (overflow crops it) */
.panel-img { position: absolute; overflow: hidden; }
.panel-img img { display: block; }

/* ============================================================= */
/* MOBILE  (≤ 820px) — single-column responsive layout           */
/* ============================================================= */
.m { display: none; }
.m-splash { display: none; }

@media (max-width: 820px) {
  html, body { overflow-x: clip; overflow-y: visible; height: auto; }
  .stage { display: none !important; }
  .m { display: flex; flex-direction: column; min-height: 100vh; }
  .m-main { flex: 1 0 auto; }
  .m-splash {
    display: flex; position: fixed; inset: 0; z-index: 9999;
    align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 42%, #0f0b04 0%, #000 72%);
    transition: opacity .5s ease, visibility .5s;
  }
  .m-splash.hide { opacity: 0; visibility: hidden; }
}
/* mobile splash / loader — animated nGRND coin (first load only) */
.m-splash__logo { position: relative; width: 128px; height: 128px; display: flex; align-items: center; justify-content: center; }
.m-splash__logo img { width: 92px; height: 92px; object-fit: contain; animation: splashPulse 1.6s ease-in-out infinite; }
.m-splash__logo::before {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  border: 3px solid rgba(245,197,66,.15); border-top-color: #f6c945;
  animation: splashSpin 1s linear infinite;
}
@keyframes splashSpin { to { transform: rotate(360deg); } }
@keyframes splashPulse {
  0%,100% { transform: scale(.92); filter: drop-shadow(0 0 6px rgba(245,197,66,.45)); }
  50%     { transform: scale(1.05); filter: drop-shadow(0 0 18px rgba(245,197,66,.78)); }
}
@media (prefers-reduced-motion: reduce) { .m-splash__logo img, .m-splash__logo::before { animation-duration: 3s; } }
@media (min-width: 821px) {
  .m-nav, .m-ovl { display: none !important; }
}

/* top bar */
/* gold-bordered header bar (logo left · plain gold hamburger right) */
.m-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: #050301;
  border-bottom: 1.5px solid var(--gold-line);
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.m-top__logo { height: 40px; order: -1; margin-right: auto; filter: drop-shadow(0 1px 5px rgba(0,0,0,.6)); }
.m-burger {
  flex: none; background: none; border: none; padding: 0; cursor: pointer;
  width: 40px; height: 32px; margin-right: -4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0; /* hide the ☰ glyph — bars drawn below */
}
.m-burger::before {
  content: ""; display: block;
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--gold-b);
  box-shadow: 0 -11px 0 var(--gold-b), 0 11px 0 var(--gold-b);
  transition: background .2s, box-shadow .2s;
}
.m-burger:hover::before, .m-burger:active::before {
  background: #ffe9a0; box-shadow: 0 -11px 0 #ffe9a0, 0 11px 0 #ffe9a0;
}

/* main column */
.m-main {
  padding: 16px; max-width: 540px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
}
.m-wallet { width: 100%; border-radius: 12px; border: 1px solid var(--gold-line); }
.m-title { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }

/* metrics 2x2 */
.m-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-metric { background: #000; border: 1px solid var(--gold-line); border-radius: 10px; padding: 11px 12px; }
.m-metric .lbl { color: var(--muted); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }
.m-metric .val { color: #fff; font-size: 19px; font-weight: 600; margin-top: 6px; }
.m-metric .dl { color: var(--green); font-size: 11px; font-weight: 500; display: inline-flex; gap: 3px; align-items: center; margin-top: 2px; }
.m-metric .dl::before { content: "▲"; font-size: 7px; }
/* value + delta on one line (matches desktop) */
.m-metric__vr { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 5px; }
.m-metric__vr .val { margin-top: 0; }
.m-metric__vr .dl { margin-top: 0; }
.m-metric .mbar { margin-top: 8px; height: 3px; background: var(--track); border-radius: 2px; }
.m-metric .mbar span { display: block; width: 60%; height: 3px; background: var(--track-fill); border-radius: 2px; }

/* image cards (panel / news) */
.m-imgcard { border: 1px solid var(--gold-line); border-radius: 12px; overflow: hidden; background: #000201; }
.m-imgcard img { width: 100%; display: block; }

/* badges grid */
.m-badges { background: #020201; border: 1px solid var(--gold-line); border-radius: 12px; padding: 16px; }
.m-badges h3 { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.m-badges__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.m-badges__grid img { width: 100%; aspect-ratio: 1; border-radius: 50%; }

/* stat strip */
.m-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: rgba(0,0,0,.6); border: 1px solid var(--gold-line); border-radius: 12px; padding: 14px; }
.m-stat .lbl { color: var(--muted); font-size: 9px; font-weight: 500; text-transform: uppercase; }
.m-stat .val { color: #fff; font-size: 16px; font-weight: 600; margin-top: 4px; }
.m-stat .val small { font-size: 10px; }

/* offer */
.m-offer { background: #000; border: 1px solid var(--gold-line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.m-offer__row { display: flex; align-items: center; gap: 12px; }
.m-offer__row img { width: 48px; height: 48px; border-radius: 8px; flex: none; }
.m-offer__t { color: #fff; font-size: 13px; font-weight: 600; }
.m-offer p { color: #fff; font-size: 11px; line-height: 1.6; }

/* message */
.m-msg { position: relative; border: 1px solid var(--gold-line); border-radius: 12px; overflow: hidden; padding: 16px; min-height: 96px; }
.m-msg__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.m-msg__in { position: relative; z-index: 1; }
.m-msg p { color: #fff; font-size: 11px; line-height: 1.6; margin-top: 6px; }

/* buttons */
.m-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  background: rgba(0,0,0,.55); border: 1px solid var(--gold-line); border-radius: 8px;
  color: var(--muted); font-family: var(--font); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; padding: 13px; margin-top: 4px;
  cursor: pointer; text-decoration: none;
}
.m-btn:hover { border-color: var(--gold-b); color: #fff; }

/* gold page-title bar (per-page, like the desktop "STAKING" banner) */
/* box style copied exactly from ngrnd-staking-button.html — with glow + sweep animation */
.m-titlebar {
  position: relative; display: flex;
  padding: 2px; border: none; border-radius: 5px; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #fff3b0 0%, #edc24a 10%, #8a6d20 38%, #564415 60%, #a08028 85%, #e0b73e 100%);
  box-shadow: 0 0 16px rgba(235,195,75,.18);
  animation: mtGlow 2.8s ease-in-out infinite;
}
.m-titlebar .inner {
  position: relative; width: 100%; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  padding: 20px 16px;
  background:
    linear-gradient(105deg, transparent 34%, rgba(255,241,180,.16) 46%, rgba(255,246,205,.34) 50%, rgba(255,241,180,.16) 54%, transparent 66%),
    radial-gradient(130% 150% at 100% 120%, rgba(190,140,35,.55) 0%, rgba(140,100,25,.32) 28%, rgba(80,58,14,.16) 48%, transparent 68%),
    linear-gradient(118deg, #0e0c08 0%, #060504 38%, #0a0805 60%, #1c150b 85%, #2e2210 100%);
  background-size: 220% 100%, 100% 100%, 100% 100%;
  background-position: -60% 0, center, center;
  background-repeat: no-repeat;
  animation: mtSweep 4.2s linear infinite;
}
.m-titlebar .inner::before {
  content: ""; position: absolute; top: -55%; left: -14%; width: 40%; height: 200%;
  background: radial-gradient(closest-side at 22% 28%, rgba(255,241,168,.95) 0%, rgba(248,210,92,.5) 28%, rgba(200,152,42,.18) 52%, transparent 72%);
  filter: blur(7px); pointer-events: none;
  animation: mtFlare 3.2s ease-in-out infinite;
}
@keyframes mtGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(235,195,75,.18); }
  50%      { box-shadow: 0 0 30px rgba(245,205,90,.52), 0 0 6px rgba(255,230,150,.40); }
}
@keyframes mtSweep {
  0%   { background-position: -60% 0, center, center; }
  100% { background-position: 170% 0, center, center; }
}
@keyframes mtFlare {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .m-titlebar, .m-titlebar .inner, .m-titlebar .inner::before { animation: none; }
}
.m-titlebar .inner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(118deg, rgba(255,225,130,.10) 0%, transparent 30%, transparent 62%, rgba(230,175,70,.14) 100%);
  pointer-events: none;
}
.m-titlebar .label {
  position: relative; z-index: 2; text-align: center;
  font-family: "Quicksand", sans-serif; font-weight: 500;
  font-size: 24px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.15;
  color: #f6c445; text-shadow: 0 0 18px rgba(246,196,69,.22);
}

/* mobile footer (copyright) — sticky bottom bar, mirrors the header */
.m-foot {
  position: sticky; bottom: 0; z-index: 30;
  text-align: center; color: var(--muted);
  font-size: 11px; letter-spacing: .03em; line-height: 1.5;
  padding: 12px 16px;
  background: #050301;
  border-top: 1.5px solid var(--gold-line);
  box-shadow: 0 -6px 20px rgba(0,0,0,.5);
}

/* slide-in drawer nav */
/* slide-in drawer nav — mirrors the desktop sidebar exactly */
.m-nav {
  position: fixed; top: 0; left: 0; bottom: 0; width: 252px; z-index: 50;
  background: #050404 url('assets/common/sidebar-bg.webp') center / cover no-repeat;
  border-right: 1.5px solid var(--gold-line);
  transform: translateX(-100%); transition: transform .25s ease;
  overflow-y: auto; padding: 16px 14px;
}
.m-nav.open { transform: translateX(0); }
.m-nav__logo { height: 44px; margin: 4px 0 18px 8px; }
.m-nav a {
  position: relative; display: flex; align-items: center; gap: 13px;
  padding: 11px 14px; margin: 1px 0; border-radius: 8px;
  color: #fff; font-size: 13.5px; font-weight: 400; text-decoration: none;
}
.m-nav a .ic { width: 20px; height: 20px; object-fit: contain; flex: none; }
/* active row — exact desktop gold highlight (bright gold left → transparent), full-width bar, white text */
.m-nav a.active {
  margin: 1px -14px; padding: 11px 28px; border-radius: 0;
  color: #fff; font-weight: 500;
  background: linear-gradient(152deg,
    #FFEC00 3%, rgba(255,228,0,.94) 4%, rgba(255,209,0,.78) 5%,
    rgba(255,195,0,.66) 7%, rgba(255,184,0,.57) 9%, rgba(255,176,0,.50) 12%,
    rgba(252,173,0,.49) 13%, rgba(200,129,2,.28) 42%, rgba(161,97,4,.13) 67%,
    rgba(138,77,5,.03) 88%, rgba(130,70,6,0) 100%);
  border-top: 1px solid rgba(255,236,0,.85);
  border-bottom: 1px solid rgba(255,236,0,.18);
}
.m-ovl { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .25s; }
.m-ovl.open { opacity: 1; pointer-events: auto; }
/* drawer close button */
.m-nav__head { display: flex; align-items: center; justify-content: space-between; margin: 4px 8px 14px; }
.m-nav__head .m-nav__logo { height: 40px; margin: 0; }
.m-nav__close { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center;
  background: #000; border: 1px solid var(--gold-line); border-radius: 8px; color: var(--gold-b); font-size: 20px; line-height: 1; cursor: pointer; }

/* section heading + lead (mobile) */
.m-eyebrow { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.m-h2 { color: #fff; font-size: 18px; font-weight: 700; line-height: 1.2; margin: 0; letter-spacing: .02em; }
.m-lead { color: #cfcfcf; font-size: 12px; line-height: 1.6; }
/* performance = one grouped panel: image + copy + stat strip (mirrors desktop) */
.m-perf { border: 1px solid var(--gold-line); border-radius: 12px; overflow: hidden; background: #000201; display: flex; flex-direction: column; }
.m-perf .m-imgcard { border: none; border-radius: 0; }
.m-perf .m-imgcard img { height: 165px; object-fit: cover; object-position: center top; }
.m-perf__body { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 9px; }
.m-perf .m-stats { border: none; border-top: 1px solid var(--gold-line); border-radius: 0; background: transparent; padding: 14px 0 2px; margin-top: 5px; }

/* ============================================================= */
/* Real-HTML content panel (Governance, etc.)                    */
/* ============================================================= */
.cpanel {
  left: 271px; top: 158px; width: 389px; height: 576px;
  background: linear-gradient(180deg, #0a0803 0%, #050402 100%);
  border: 1.5px solid var(--gold-line); border-radius: 12px;
  padding: 16px 16px 12px; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
}
.cpanel__head { text-align: center; }
.cpanel__emblem {
  width: 58px; height: 58px; margin: 2px auto 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-b);
}
.cpanel__emblem img { width: 100%; height: 100%; object-fit: contain; }
.cpanel__title {
  color: #fff; font-size: 22px; font-weight: 700; letter-spacing: .12em;
  background: linear-gradient(90deg, var(--gold-a), var(--gold-b));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cpanel__sub { color: var(--muted); font-size: 9.5px; line-height: 1.5; margin-top: 4px; }

.csec {
  border: 1px solid var(--gold-line); border-radius: 9px;
  padding: 10px; background: rgba(255, 196, 0, 0.015);
}
.csec__row { display: flex; align-items: center; gap: 9px; }
.csec__ic {
  width: 34px; height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.csec__ic img { width: 100%; height: 100%; object-fit: contain; }
.cpanel__foot svg { display: block; }
.csec__txt { flex: 1; min-width: 0; }
.csec__txt h3 { color: var(--gold-b); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.csec__txt p { color: var(--muted); font-size: 8.5px; line-height: 1.4; margin-top: 2px; }
.csec__chev { color: var(--muted); flex: none; }

.csub {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px;
  margin-top: 9px;
}
.csub__cell {
  border: 1px solid rgba(255, 236, 0, 0.16); border-radius: 7px;
  padding: 8px 4px 7px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.csub__ic { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; }
.csub__ic img { width: 100%; height: 100%; object-fit: contain; }
.csub__cell b { color: #efe7d4; font-size: 7px; font-weight: 600; letter-spacing: .02em; line-height: 1.25; text-transform: uppercase; }
.csub__cell span.d { color: var(--muted); font-size: 6.5px; line-height: 1.25; }

.cpanel__foot {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 7px;
  color: var(--muted); font-size: 8.5px; letter-spacing: .03em;
  padding-top: 8px; border-top: 1px solid rgba(255, 236, 0, 0.12);
}
.cpanel__foot svg { color: var(--gold-b); }

/* ============================================================= */
/* P6 — Header wallet (real HTML)                                */
/* ============================================================= */
.wallet {
  left: 274px; top: 42px; width: 300px; height: 97px;
  display: flex; align-items: center; gap: 13px; padding: 0 16px;
  border: 1px solid var(--gold-line); border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
}
.wallet__coin { width: 60px; height: 60px; flex: none; border-radius: 50%; object-fit: cover; }
.wallet__name { color: #fff; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.wallet__verify { color: #34c281; display: inline-flex; }
.wallet__addr { color: var(--muted); font-size: 12px; margin-top: 6px; display: flex; align-items: center; gap: 7px; }
.wallet__copy { color: var(--muted); display: inline-flex; cursor: pointer; transition: color .15s; }
.wallet__copy:hover { color: var(--gold-b); }

/* mobile wallet (real HTML) */
.m-wallet--live {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border: 1px solid var(--gold-line); border-radius: 12px;
  background: rgba(255, 255, 255, 0.012);
}
.m-wallet--live img { width: 46px; height: 46px; border-radius: 50%; flex: none; object-fit: cover; }
.m-wallet--live .wallet__name { font-size: 15px; }

/* ============================================================= */
/* Badge tilt + animations                                       */
/* ============================================================= */
/* subtle static tilt only — animation disabled */
.badge img, .m-badges__grid img {
  transform: rotate(var(--bt, 0deg));
}

/* ============================================================= */
/* P2 — content panel (used by Account Settings placeholder)     */
/* ============================================================= */
.p2 {
  left: 268px; top: 153px; width: 400px; height: 585px;
  background: #020201; border: 1.5px solid var(--gold-line); border-radius: 8px;
  padding: 18px 14px 18px 16px; display: flex; flex-direction: column;
}
.p2__title {
  color: var(--muted); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 13px;
}
.p2 .p2__list { flex: 1; overflow-y: auto; padding-right: 6px; }
.p2__list { display: flex; flex-direction: column; gap: 7px; }
.p2__row {
  display: flex; align-items: center; gap: 12px; padding: 6px 11px;
  border: 1px solid rgba(255, 236, 0, 0.16); border-radius: 9px;
  cursor: pointer; transition: border-color .18s ease, background .18s ease;
}
.p2__row:hover { border-color: var(--gold-b); background: rgba(255, 196, 0, 0.05); }
.p2__row img { width: 36px; height: 36px; flex: none; object-fit: contain; }
.p2__row b { color: #efe7d4; font-size: 12.5px; font-weight: 600; }
.p2__row .chev { margin-left: auto; color: var(--muted); font-size: 16px; line-height: 1; }
.p2 .p2__list::-webkit-scrollbar { width: 6px; }
.p2 .p2__list::-webkit-scrollbar-thumb { background: rgba(255, 176, 0, 0.3); border-radius: 3px; }
.p2 .p2__list::-webkit-scrollbar-track { background: transparent; }

/* mobile P2 */
.m-p2 { background: #020201; border: 1px solid var(--gold-line); border-radius: 12px; padding: 16px; }
.m-p2 h3 { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.m-p2 .p2__row img { width: 40px; height: 40px; }

/* ---- Rewards Account P2: embedded custom HTML column ---- */
.rwc-frame { left: 274px; top: 161px; width: 383px; height: 570px; border: 0; background: transparent; }
.m-rwc { line-height: 0; }
.m-rwc-frame { width: 100%; height: 524px; border: 0; background: transparent; display: block; }

/* ---- Account Settings P2: embedded custom HTML panel ---- */
.asf-frame { left: 274px; top: 161px; width: 383px; height: 570px; border: 0; background: transparent; }
.m-asf { line-height: 0; }
.m-asf-frame { width: 100%; height: 500px; border: 0; background: transparent; display: block; }

/* ============================================================= */
/* UNIVERSAL P2 ring — identical size on every page              */
/* ============================================================= */
.p2box {
  left: 268px; top: 153px; width: 400px; height: 585px;
  background: #020201; border: 1.6px solid #c9941e; border-radius: 18px;
  overflow: hidden; box-shadow: 0 0 22px rgba(245,197,66,.13), inset 0 0 0 1px rgba(0,0,0,.6);
}
.p2box > iframe { width: 100%; height: 100%; border: 0; display: block; }
.p2box > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p2box--img { border: none; box-shadow: none; background: transparent; }  /* placeholder images carry their own ring */
/* mobile */
.m-p2box { display: block; border: 1.5px solid #c9941e; border-radius: 14px; overflow: hidden; }
.m-p2box > iframe { width: 100%; height: 640px; border: 0; display: block; }
.m-p2box--img { border: none; }
.m-p2box--img > img { width: 100%; display: block; }