/* ════════════════════════════════════════════════════════════════════
   paKIXto Digital Academy — Sidebar & Header Styles Only
   ────────────────────────────────────────────────────────────────────
   Applied LAST in the cascade so it wins over style.css, unified-nav,
   and unified-platform.
   ──────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────
   0. THEME VARS — previously duplicated here because this file loads
   on every page while style.css used to load on index.html only.
   Now that style.css is linked first on EVERY page, --bb-border /
   --bb-border2 are defined once in css/style.css and this duplicate
   block has been removed.
   ────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────
   1. SIDEBAR — dark with green active state (matches paKIXto nav)
   ────────────────────────────────────────────────────────────────── */















/* Nav buttons */





/* Active state — solid green tint */





/* ── Hide sidebar scrollbar globally ── */



.nav-badge {
  background: #ffffff !important;
  color: var(--text-ink) !important;
  font-weight: 700 !important;
}

/* Sidebar footer */

.net-dot-sm {
  background: #ffffff !important;
  border: 1px solid var(--bb-border)!important;
}

/* ──────────────────────────────────────────────────────────────────
   2. HEADER — dark surface, green-tinted bottom border
   ────────────────────────────────────────────────────────────────── */
header,
.header {
  background: linear-gradient(180deg,
      rgba(20,20,20,0.92) 0%,
      rgba(10,10,10,0.85) 100%) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  border-bottom: 1px solid var(--bb-border) !important;
  border: 1px solid var(--bb-border)!important;
}

/* Logo mark with green glow */
.logo-mark,
.logo-hex {
  background: linear-gradient(145deg, #ffffff, #ffffff) !important;
  border: 1px solid var(--bb-border)!important;
  color: var(--text-muted) !important;
}

.logo-text {
  background: linear-gradient(120deg, #ffffff 0%, #FFFFFF 60%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* GIDO brand letters */
.brand-ri { color: var(--text-muted) !important; font-weight: 800 !important; }
.brand-z  { color: var(--text-muted) !important; font-weight: 800 !important;
            text-shadow: 0 0 12px rgba(255,255,255,0.6) !important; }
.brand-q  { color: var(--text-muted) !important; font-weight: 800 !important; }

/* ──────────────────────────────────────────────────────────────────
   3. SIDEBAR LAYOUT FIXES — patch v1.1
   ──────────────────────────────────────────────────────────────────
   (a) Sidebar starts at viewport top:0 (full height left rail)
   (b) Header sits beside sidebar (not behind it) so logo stays clear
   (c) Header auto-grows on mobile so rocket + welcome CTA stay visible
   (d) Toggle arrow button gets bigger, glowing, easy to tap on mobile
   ────────────────────────────────────────────────────────────────── */

/* (a) Sidebar — inset from all edges for breathing room */



/* (b) Header — shifted right so sidebar covers the left rail */
header {
  left: 52px !important;
  width: calc(100vw - 52px) !important;
  max-width: calc(100vw - 52px) !important;
  z-index: 9997 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

/* Overlays — beside sidebar too */
/* [migrated to overlay.css] */


/* gidoverse & tradefi overlays cover the header (full viewport from top) */
/* [migrated to overlay.css] */


/* Hide rocket — no hero content to accompany it */
header::before {
  display: none !important;
}

/* #hdr-hero is always empty now — collapse it */
#hdr-hero {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Make hero CTA buttons reliably visible */
.hdr-hero-cta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 8px !important;
}
.hdr-hero-btn {
  font-family: "Montserrat", sans-serif !important;
  font-size: 11px !important;
  padding: 6px 14px !important;
  border-radius: 10px !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
}
.hdr-hero-btn-primary {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%) !important;
  color: var(--text-ink) !important;
  font-weight: 700 !important;
  border: 1px solid var(--bb-border)!important;
}
.hdr-hero-btn-outline {
  background: transparent !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--gold) !important;
  font-weight: 700 !important;
}

/* Header eyebrow + title — re-skin to paKIXto */
.hdr-hero-eyebrow {
  font-family: "Montserrat", sans-serif !important;
  color: var(--text-muted) !important;
}
.hdr-hero-eyebrow::before {
  background: #ffffff !important;
  border: 1px solid var(--bb-border)!important;
}
.hdr-hero-title {
  font-family: "Montserrat", sans-serif !important;
  color: var(--text-normal-tier) !important;
}
.hdr-hero-title .accent {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 60%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.hdr-hero-sub strong {
  color: var(--text-normal-tier) !important;
}

/* Header bottom glow line — green */
header::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.5) 15%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,0.5) 85%,
    transparent 100%) !important;
}

/* MOBILE (≤768px) — header is compact (no hero content) */
@media (max-width: 768px) {
  header {
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Brand block — show brand-name text at all states but truncate when collapsed */



/* ──────────────────────────────────────────────────────────────────
   4. SIDEBAR TWEAKS — patch v1.4
   ──────────────────────────────────────────────────────────────────
   • Reduce expanded sidebar width by 50% (180px → 90px)
   • Remove "GIDO / AIRDROP PORTAL" brand block from sidebar top
   ────────────────────────────────────────────────────────────────── */

/* Expanded body padding, header position, sidebar width — all 113px now */

body.sidebar-is-expanded header {
  left: 113px !important;
  width: calc(100vw - 113px) !important;
  max-width: calc(100vw - 113px) !important;
}


/* All popup overlays shift to the new 113px expanded width */
/* [migrated to overlay.css] */


/* Tighten padding inside expanded sidebar so labels fit in 90px */








/* Hide the GIDO / AIRDROP PORTAL brand block entirely (both states) */


/* Toggle button is now at bottom — nav content starts at the top */



/* Collapsed (icon-only) sidebar: allow scrolling when items overflow */





/* ──────────────────────────────────────────────────────────────────
   5. HEADER VISIBILITY — only show on AI Agent page
   The main header is hidden on all views except AI agent.
   body.view-ai is toggled by switchView() in wallet.js.
   On initial load (no class yet) the header is also hidden since
   GIDO is the landing view.
   ────────────────────────────────────────────────────────────────── */
body:not(.view-ai) header {
  display: none !important;
}

/* Sidebar stretches to top on every view — there is no real <header>
   element reserving space, so excluding the AI Agent view here was
   causing the sidebar to sit ~62px lower only on that page.
   NOTE: must match "aside.main-sidebar, .main-sidebar" specificity
   (0,1,1) from the base rule above, or the base rule wins and this
   has no effect at all. */


/* When header is hidden, overlays that normally sit below it
   should start from the very top instead */
/* [migrated to overlay.css] */


/* ──────────────────────────────────────────────────────────────────
   6. MOBILE EXPANDED SIDEBAR — width override (beats all prior rules)
   Target: 130px on mobile when sidebar-is-expanded.
   Icon-only (collapsed/default) stays at 52px — untouched.
   ────────────────────────────────────────────────────────────────── */@media (max-width: 600px) {
  /* ── Expanded width ─────────────────────────────────────────────── */
  

  /* ── Shift header + overlays to match 130px ─────────────────────── */
  body.sidebar-is-expanded header {
    left: 130px !important;
    width: calc(100vw - 130px) !important;
    max-width: calc(100vw - 130px) !important;
  }

  /* ── Hide scrollbar when expanded ──────────────────────────────── */
  
  

  /* ── Restore all labels when expanded ──────────────────────────── */
  

  /* ── Hide 2×2 / 3L badges when expanded ────────────────────────── */
  

  /* ── Restore item layout (icon + label) ─────────────────────────── */
  
  
  
}

/* ──────────────────────────────────────────────────────────────────
   7. BASE CHAIN LOGO — network button & dropdown options
   ────────────────────────────────────────────────────────────────── */

/* Logo in the active network button */


/* Logo in dropdown options */


/* ── Icon mode: hide dot + label, show only Base logo ── */





/* ── Expanded mode: show logo + dot + label together ── */


/* ──────────────────────────────────────────────────────────────────
   8. WALLET ICON — address chip & connect button
   ────────────────────────────────────────────────────────────────── */

/* Wallet SVG inside address chip */


/* ── Icon mode: show wallet icon in connect btn, hide text ── */



/* Hide "Connect" text in icon mode, show wallet SVG via pseudo */

/* ── Icon mode: show only wallet icon in addr chip ── */





/* ── Expanded mode: addr chip shows dot + text (wallet icon is prefix) ── */


/* ════════════════════════════════════════════════════════════════════
   End paKIXto sidebar & header styles
   ════════════════════════════════════════════════════════════════════ */

/* ── rz-stats-row + rz-stat-card — copied verbatim from rizq-base.css ── */
.rz-card { position: relative; background: var(--bb-surface, #2f2f2f); border: 1px solid var(--bb-border); border-radius: 14px; padding: 0px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: border-color 0.2s; max-width: 100% !important; overflow: hidden !important; word-break: break-word !important; }
.rz-stats-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
  background: #131412;
  border-radius: 14px;
  padding: 10px;
  border: 1px solid var(--bb-border)!important;
}
.rz-stats-row.rz-stats-6 { grid-template-columns: repeat(6, 1fr); }
.rz-stats-row.rz-stats-2 { grid-template-columns: repeat(2, 1fr); }
.rz-stats-row::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 1;
  display: none;
  background:
    linear-gradient(to bottom, transparent 0%, rgba(var(--accent-sky-rgb),.15) 10%, rgba(var(--accent-sky-rgb),.42) 35%, rgba(var(--accent-sky-rgb),.42) 65%, rgba(var(--accent-sky-rgb),.15) 90%, transparent 100%) 50% 0 / 1px 100% no-repeat,
    linear-gradient(to right, transparent 0%, rgba(var(--accent-sky-rgb),.15) 10%, rgba(var(--accent-sky-rgb),.42) 35%, rgba(var(--accent-sky-rgb),.42) 65%, rgba(var(--accent-sky-rgb),.15) 90%, transparent 100%) 0 50% / 100% 1px no-repeat;
}
.rz-stats-row::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 11px;
  background: var(--text-sky);
  border: none;
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid var(--bb-border);
  pointer-events: none;
  z-index: 2;
  display: none;
}
@media (max-width: 640px) {
  .rz-stats-row::before { display: block; }
  .rz-stats-row::after  { display: block; }
  .rz-stats-row { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .rz-stat-card { padding: 8px 10px !important; }
  .rz-stat-value { font-size: 16px !important; }
  .rz-stat-label { font-size: 9px !important; }
  .rz-stat-meta  { font-size: 9px !important; }
}
body.theme-light .rz-stats-row { background: #FFFFFF; border: 1px solid var(--bb-border)!important; }
body.theme-light .rz-stats-row::after { background: var(--text-sky); border: 1px solid var(--bb-border); }
body.theme-light .rz-stats-row::before { background: linear-gradient(to bottom, transparent 0%, rgba(var(--accent-sky-rgb),.12) 10%, rgba(var(--accent-sky-rgb),.3) 35%, rgba(var(--accent-sky-rgb),.3) 65%, rgba(var(--accent-sky-rgb),.12) 90%, transparent 100%) 50% 0 / 1px 100% no-repeat, linear-gradient(to right, transparent 0%, rgba(var(--accent-sky-rgb),.12) 10%, rgba(var(--accent-sky-rgb),.3) 35%, rgba(var(--accent-sky-rgb),.3) 65%, rgba(var(--accent-sky-rgb),.12) 90%, transparent 100%) 0 50% / 100% 1px no-repeat; }
.rz-stat-card { position: relative; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(145deg, #343434, #262626); border: 1px solid var(--bb-border) !important; border-radius: 14px !important; border: 1px solid var(--bb-border)!important; }
.rz-stat-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(var(--accent-sky-rgb),0.12); border: 1px solid rgba(var(--accent-sky-rgb),0.28); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.rz-stat-label { font-size: 10px; font-family: "Montserrat", sans-serif; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.rz-stat-value { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 20px; color: var(--text-normal-tier); line-height: 1.1; }
.rz-stat-value.rz-stat-mono { font-family: "Montserrat", sans-serif; font-size: 14px; color: var(--text-sky); }
.rz-stat-meta { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
body.theme-light .rz-stat-card { background: #FFFFFF; border: 1px solid var(--bb-border) !important; border: 1px solid var(--bb-border)!important; }
/* ──────────────────────────────────────────────────────────────────
   GIDO MATRIX — Frame/Panel/Header components, copied verbatim from
   rizq/rizq-base.css so embedded pages (wallet panel, etc.) that don't
   load rizq-base.css render the SAME cards as the Referrals/Matrix page.
   Variables use var(--x, fallback) since this file may load without
   rizq-base.css's body{--rz-*}

.rz-cta-panel { position: relative; padding: 22px 24px; background: linear-gradient(145deg, #343434, #000000); border: none; box-shadow: none; border-radius: 10px; display: flex; flex-direction: column; align-items: stretch; gap: 0; overflow: hidden; margin-bottom: 16px; }
body.theme-light .rz-cta-panel { background: #F0F0F0; border: none; box-shadow: none; }
.rz-cta-panel.rz-cta-warn { border-color: var(--bb-border); }

.rz-cta-header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 18px; border-radius: 10px 10px 5px 5px !important; background: linear-gradient(145deg, #343434, #262626); border: 1px solid var(--bb-border) !important; border: 1px solid var(--bb-border); }
body.theme-light .rz-cta-header { background: #FFFFFF; border: 1px solid var(--bb-border) !important; border: 1px solid var(--bb-border); }
.rz-cta-body { flex: 1; min-width: 0; width: 100%; }
.rz-cta-eyebrow { font-size: 10px; font-family: "Montserrat", sans-serif; color: var(--rz-green, var(--text-sky)); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 6px; }
.rz-cta-title { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 22px; color: var(--text-normal-tier); line-height: 1.1; margin-bottom: 4px; }
.rz-cta-sub { font-size: 12px; color: var(--text-muted); font-family: "Montserrat", sans-serif; }

.cta-btn-row { display: flex; gap: 10px; margin-top: 16px; justify-content: center; align-items: center; }
.cta-single-button { display: flex; align-items: center; justify-content: center; flex: 1; max-width: 140px; height: 46px; min-height: 46px; padding: 0 13px; border-radius: 18px !important; border: 1px solid var(--bb-border); outline: none; background: var(--text-sky); cursor: pointer; font-family: "Montserrat", sans-serif; font-size: 13px; line-height: 1; transition: opacity 150ms ease, transform 100ms ease; text-decoration: none; box-sizing: border-box; vertical-align: middle; border: 1px solid var(--bb-border)!important; }
.cta-single-button:hover { opacity: .92; transform: translateY(-1px); }
.cta-single-button:active { transform: translateY(0); opacity: 1; }
.cta-single-button:active .cta-button-text { transform: translateY(0.5px); scale: 0.95; }
.cta-button-text { color: var(--gold); letter-spacing: 0.07em; font-size: 13px; font-weight: 700; text-transform: uppercase; line-height: 1; transition: 0.1s ease-in-out; user-select: none; }

.rz-card-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-family: "Montserrat", sans-serif; font-weight: 700; color: var(--rz-fg, #f4fff4); padding: 5px 11px 5px 8px; background: rgba(255,255,255,0.06); border: 1px solid var(--bb-border); border-radius: 8px; white-space: nowrap; letter-spacing: 0.04em; }
.rz-card-badge::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--rz-green, var(--text-sky)); border: 1px solid var(--bb-border)!important; flex-shrink: 0; }

.rz-green-text { color: var(--rz-green, var(--text-sky)); text-shadow: 0 0 24px rgba(255,255,255,0.45); }
.rz-dim-text { color: var(--text-muted); }

.rz-notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; border: 1px solid; font-size: 12px; line-height: 1.55; word-break: break-word !important; overflow-wrap: anywhere !important; }
.rz-notice.rz-notice-info { background: rgba(var(--accent-sky-rgb),0.04); border-color: rgba(var(--accent-sky-rgb),0.2); color: var(--notice-info-text); }
.rz-notice.rz-notice-warn { background: rgba(255,255,255,0.04); border-color: var(--bb-border); color: var(--notice-warn-text); }
.rz-notice.rz-notice-err { background: rgba(239,68,68,0.04); border-color: rgba(239,68,68,0.2); color: var(--notice-err-text); }
.rz-notice.rz-notice-ok { background: rgba(255,255,255,0.04); border-color: var(--rz-green-bdr, rgba(var(--accent-sky-rgb),.22)); color: var(--notice-ok-text); }
.rz-notice strong { color: var(--text-muted); }
.rz-notice-ico { flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); }

.rz-icon-btn { width: 32px; height: 32px; border-radius: 18px !important; background: linear-gradient(145deg, #343434, #262626); border: 1px solid var(--bb-border); color: var(--rz-green, var(--text-sky)); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.18s; border: 1px solid var(--bb-border)!important; }
.rz-icon-btn:hover { transform: scale(1.05); }
body.theme-light .rz-icon-btn { background: #FFFFFF; border: 1px solid var(--bb-border); color: var(--sdv5-accent); border: 1px solid var(--bb-border)!important; }

/* ── Sidebar light mode ── */


/* ── Hide all scrollbars app-wide (keep scrolling functional) ── */
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   Registered-account view (Register page, already-registered state)
   Own class namespace (.rz-acct*) — shares nothing with .rz-stat-card,
   so none of that card's cross-file !important rules can touch it.
   Depth = border + background tint only (no box-shadow).
   ═══════════════════════════════════════════════════════════════ */
.rz-acct { width: 100%; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; font-family: "Montserrat", sans-serif; color: var(--text-normal-tier); box-sizing: border-box; }
.rz-acct *, .rz-acct *::before, .rz-acct *::after { box-sizing: border-box; }
.rz-acct-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px; border-radius: 20px; border: 1px solid var(--bb-border); background: linear-gradient(135deg, rgba(var(--accent-sky-rgb), 0.16), rgba(var(--accent-sky-rgb), 0.04) 60%), #131412; }
.rz-acct-avatar { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-sky); background: rgba(var(--accent-sky-rgb), 0.14); border: 1px solid rgba(var(--accent-sky-rgb), 0.4); }
.rz-acct-hero-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rz-acct-eyebrow, .rz-acct-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.rz-acct-title { margin: 0; font-size: clamp(18px, 4.6vw, 26px); font-weight: 800; line-height: 1.15; color: var(--text-normal-tier); }
.rz-acct-sub { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.rz-acct-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-sky); background: rgba(var(--accent-sky-rgb), 0.14); border: 1px solid rgba(var(--accent-sky-rgb), 0.35); }
.rz-acct-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-sky); }
.rz-acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.rz-acct-tile { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: 16px; background: #131412; border: 1px solid var(--bb-border); transition: border-color 0.16s; }
.rz-acct-tile:hover { border-color: rgba(var(--accent-sky-rgb), 0.5); }
.rz-acct-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; color: var(--text-sky); background: rgba(var(--accent-sky-rgb), 0.12); border: 1px solid rgba(var(--accent-sky-rgb), 0.25); }
.rz-acct-value { max-width: 100%; font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--text-normal-tier); overflow-wrap: anywhere; }
.rz-acct-value--sm { font-size: 16px; line-height: 1.3; }
.rz-acct-meta { font-size: 11px; line-height: 1.4; color: var(--text-muted); }
.rz-acct-ref { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #131412; border: 1px solid var(--bb-border); }
.rz-acct-ref .rz-acct-ico { margin-bottom: 0; }
.rz-acct-ref-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rz-acct-ref-value { font-size: 14px; font-weight: 700; color: var(--text-sky); overflow-wrap: anywhere; }
.rz-acct-copy { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 12px; font: 700 12px "Montserrat", sans-serif; cursor: pointer; color: var(--text-sky); background: transparent; border: 1px solid rgba(var(--accent-sky-rgb), 0.4); transition: background 0.16s; }
.rz-acct-copy:hover { background: rgba(var(--accent-sky-rgb), 0.12); }
.rz-acct-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.rz-acct-btn { height: 48px; padding: 0 18px; border-radius: 14px; font: 700 13px "Montserrat", sans-serif; cursor: pointer; color: var(--text-normal-tier); background: #131412; border: 1px solid var(--bb-border); transition: border-color 0.16s, background 0.16s; }
.rz-acct-btn:hover { border-color: rgba(var(--accent-sky-rgb), 0.5); }
.rz-acct-btn--primary { color: #fff; background: var(--text-sky); border-color: var(--text-sky); }
.rz-acct-btn--primary:hover { background: var(--text-sky); border-color: var(--text-sky); opacity: 0.9; }
.rz-acct-btn:focus-visible, .rz-acct-copy:focus-visible { outline: 2px solid var(--text-sky); outline-offset: 2px; }
body.theme-light .rz-acct-hero { background: linear-gradient(135deg, rgba(var(--accent-sky-rgb), 0.14), rgba(var(--accent-sky-rgb), 0.03) 60%), #F0F0F0; }
body.theme-light .rz-acct-tile, body.theme-light .rz-acct-ref, body.theme-light .rz-acct-btn { background: #F0F0F0; }
body.theme-light .rz-acct-btn--primary { background: var(--text-sky); }
@media (max-width: 520px) {
  .rz-acct-hero { grid-template-columns: auto minmax(0, 1fr); padding: 16px; gap: 12px; }
  .rz-acct-avatar { width: 48px; height: 48px; }
  .rz-acct-pill { grid-column: 1 / -1; justify-self: start; }
  .rz-acct-value { font-size: 20px; }
  .rz-acct-ref { flex-wrap: wrap; }
  .rz-acct-copy { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rz-acct-tile, .rz-acct-copy, .rz-acct-btn { transition: none; }
}