/* ============================================================
   Arcendium V22.31 — sharp surfaces + animated text navigation
   Visual-only hierarchy. No route, billing, broker or trading logic.
   ============================================================ */
:root{
  --arc-topbar-purple:#8b5cf6;
  --arc-topbar-gold:#d39b17;
  --arc-topbar-danger:var(--red,#ff4d6d);
  --arc-topbar-accent:var(--accent,#00d4a9);
}

/* ---- Dashboard top bar: unboxed SVG + text actions ----------------------- */
.topbar-right{
  gap:18px!important;
}
.topbar-right .topbar-btn,
.topbar-right a.topbar-btn,
.topbar-right button.topbar-btn{
  --arc-topbar-action-color:var(--arc-topbar-accent);
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:34px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  position:relative!important;
  padding:5px 1px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--text2)!important;
  font-family:var(--arc-receipt-font,var(--font-m,monospace))!important;
  font-size:11px!important;
  font-weight:650!important;
  letter-spacing:.055em!important;
  text-transform:uppercase;
  text-decoration:none!important;
  cursor:pointer;
  overflow:visible!important;
  transition:color .18s ease,transform .18s ease,opacity .18s ease!important;
}
.topbar-right .topbar-btn svg{
  width:16px!important;
  height:16px!important;
  flex:0 0 16px;
  transition:transform .18s ease,stroke .18s ease!important;
}
.topbar-right .topbar-btn::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:1px;
  height:1px;
  background:var(--arc-topbar-action-color);
  transform:scaleX(0);
  transform-origin:left center;
  opacity:.7;
  transition:transform .2s ease,opacity .2s ease;
  pointer-events:none;
}
.topbar-right .arc-topbar-theme{--arc-topbar-action-color:var(--arc-topbar-purple)}
.topbar-right .arc-topbar-alerts{--arc-topbar-action-color:var(--arc-topbar-gold)}
.topbar-right .arc-topbar-signout{--arc-topbar-action-color:var(--arc-topbar-danger)}
.topbar-right .topbar-btn:hover,
.topbar-right .topbar-btn:focus-visible{
  color:var(--arc-topbar-action-color)!important;
  background:transparent!important;
  outline:none!important;
  transform:translateY(-1px)!important;
}
.topbar-right .topbar-btn:hover::after,
.topbar-right .topbar-btn:focus-visible::after{
  transform:scaleX(1);
}
.topbar-right .topbar-btn:hover svg{transform:translateX(1px) scale(1.04)}
.topbar-right .topbar-btn:active{
  color:var(--arc-topbar-action-color)!important;
  transform:translateY(1px) scale(.97)!important;
  opacity:.78;
}
.topbar-right .topbar-btn:active::after{transform:scaleX(.72);opacity:1}
.topbar-right .notif-dot{
  top:2px!important;
  right:-4px!important;
  border-color:var(--topbar-bg)!important;
}

/* Sidebar trigger is deliberately compact; it is navigation chrome, not an
   action CTA. Keep it unboxed and give it the same accent motion. */
.topbar-left .sidebar-toggle,
.topbar-left .arc-sidebar-toggle{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--text2)!important;
  transition:color .18s ease,transform .18s ease!important;
}
.topbar-left .sidebar-toggle:hover,
.topbar-left .arc-sidebar-toggle:hover{
  color:var(--accent)!important;
  transform:translateX(2px)!important;
}
.topbar-left .sidebar-toggle:active,
.topbar-left .arc-sidebar-toggle:active{transform:translateX(0) scale(.94)!important}

/* ---- Landing/public top bars -------------------------------------------- */
header.nav .nav-links a,
.site-header .nav-links a,
.mn-header nav a{
  position:relative;
  border:0!important;
  background:transparent!important;
  transition:color .18s ease,transform .18s ease!important;
}
header.nav .nav-links a::after,
.site-header .nav-links a::after,
.mn-header nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-5px;
  height:1px;
  background:var(--accent,#00d4a9);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .2s ease;
}
header.nav .nav-links a:hover,
header.nav .nav-links a:focus-visible,
.site-header .nav-links a:hover,
.mn-header nav a:hover{
  color:var(--accent,#00d4a9)!important;
  transform:translateY(-1px);
}
header.nav .nav-links a:hover::after,
header.nav .nav-links a:focus-visible::after,
.site-header .nav-links a:hover::after,
.mn-header nav a:hover::after{transform:scaleX(1)}
header.nav .nav-links a:active,
.site-header .nav-links a:active,
.mn-header nav a:active{transform:translateY(1px) scale(.98)}

/* Public/auth header actions retain the V22.27 text+SVG language, now with a
   visible color response on hover/click instead of neutral button chrome. */
.nav-actions .btn,
.nav-actions a.btn,
.nav-actions button,
.arc-onboarding-header-actions .btn,
.mn-header .mn-cta{
  --arc-public-action-color:var(--accent,#00d4a9);
}
.nav-actions a[href*="login"],
.nav-actions a[href*="dashboard"]{--arc-public-action-color:var(--accent2,#2563eb)}
.nav-actions a[href*="logout"]{--arc-public-action-color:var(--red,#ff4d6d)}
.nav-actions .theme-toggle,
.nav-actions [id*="theme"],
.arc-onboarding-header-actions [onclick*="Theme"]{--arc-public-action-color:var(--arc-topbar-purple)}
.nav-actions .btn:hover,
.nav-actions a.btn:hover,
.nav-actions button:hover,
.arc-onboarding-header-actions .btn:hover,
.mn-header .mn-cta:hover{
  color:var(--arc-public-action-color)!important;
}
.nav-actions .btn:active,
.nav-actions a.btn:active,
.nav-actions button:active,
.arc-onboarding-header-actions .btn:active,
.mn-header .mn-cta:active{
  color:var(--arc-public-action-color)!important;
  transform:translateY(1px) scale(.97)!important;
  opacity:.8;
}

/* ---- Sharp card language ------------------------------------------------
   Cards and card-like content containers are square. Pills, status badges,
   avatars and form controls keep their functional geometry. */
.card,
.stat-card,
.master-card,
.feat-card,
.screen-card,
.arc-platform-card,
.arc-broker-option-card,
.arc-price-card,
.arc-onboarding-strategy-card,
.arc-onboarding-plan-card,
.arc-onboarding-broker-card,
.arc-onboarding-path-card,
.arc-broker-return-card,
.arc-prime-baseline-card,
.arc-landing-store-card,
.arc-master-join-card,
.arc-public-strategy-main,
.arc-public-strategy-price,
.arc-public-strategy-panel,
.arc-referral-card,
.arc-marketplace-pricing-preview,
.arc-journey-step,
.mn-card,
.mn-platform,
.admin-record-stat,
.store-card,
.checkout-card,
.order-status-card,
.store-hero-art,
.product-image,
.variant-row,
.mkt-chart-box,
.mkt-metric,
.hero-stats,
.arc-pricing-explainer>div,
.arc-master-tier-pair>div,
.arc-prime-baseline-metrics>div,
.arc-master-join-flow>div,
.arc-onboarding-three-steps>div,
.arc-onboarding-info-box,
.arc-onboarding-connection-result,
.arc-onboarding-empty,
.arc-onboarding-skeleton,
.arc-scm-partner-card,
.legal-notice,
.legal-consent-box,
.arc-regulatory-banner,
.table-wrap{
  border-radius:0!important;
}

/* Avoid rounded pseudo-card decoration on landing/provider cards. */
.master-card::after,
.arc-prime-baseline-card::after,
.arc-platform-card::after{border-radius:0!important}

/* Square cards still need a premium interaction signal. */
.card,
.stat-card,
.master-card,
.feat-card,
.arc-platform-card,
.arc-broker-option-card,
.arc-price-card,
.store-card,
.mn-card{
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease!important;
}
.card:hover,
.stat-card:hover,
.master-card:hover,
.feat-card:hover,
.arc-platform-card:hover,
.arc-broker-option-card:hover,
.arc-price-card:hover,
.store-card:hover,
.mn-card:hover{
  border-color:color-mix(in srgb,var(--accent,#00d4a9) 30%,var(--border2))!important;
}

/* Sidebar section labels are now semantic navigation groups. */
.sidebar-section-label{
  margin-top:15px!important;
  color:var(--text3)!important;
}
.sidebar-section-label:first-child{margin-top:4px!important}

@media(max-width:760px){
  .topbar-right{gap:12px!important}
  .topbar-right .topbar-btn{font-size:10px!important;letter-spacing:.035em!important}
  .topbar-right .topbar-btn .arc-topbar-action-label{display:none}
  .topbar-right .topbar-btn{min-width:28px!important}
}

@media(prefers-reduced-motion:reduce){
  .topbar-right .topbar-btn,
  .topbar-right .topbar-btn svg,
  header.nav .nav-links a,
  .site-header .nav-links a,
  .mn-header nav a{transition:none!important}
}

/* ---- V22.31.1 public-header action correction --------------------------
   V22.31 added the hover colour contract but the landing page's older inline
   .btn-primary/.btn-ghost/.theme-toggle rules still supplied filled and bordered
   chrome. Public header actions are now genuinely text-first, matching the
   authenticated topbar language. Hero/body CTAs are intentionally untouched. */
.nav-actions .btn,
.nav-actions a.btn,
.nav-actions button,
.nav-actions .theme-toggle,
.mn-header nav .mn-cta,
.store-header nav button{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:8px 2px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  color:var(--text2)!important;
  font-weight:700!important;
  line-height:1.2!important;
  text-decoration:none!important;
  transform:none!important;
  opacity:1!important;
}
.nav-actions .btn::after,
.nav-actions a.btn::after,
.nav-actions button::after,
.nav-actions .theme-toggle::after,
.mn-header nav .mn-cta::after,
.store-header nav button::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:1px;
  background:var(--arc-public-action-color,var(--accent,#00d4a9));
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .2s ease;
}
.nav-actions .btn:hover,
.nav-actions .btn:focus-visible,
.nav-actions a.btn:hover,
.nav-actions a.btn:focus-visible,
.nav-actions button:hover,
.nav-actions button:focus-visible,
.nav-actions .theme-toggle:hover,
.nav-actions .theme-toggle:focus-visible,
.mn-header nav .mn-cta:hover,
.mn-header nav .mn-cta:focus-visible,
.store-header nav button:hover,
.store-header nav button:focus-visible{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--arc-public-action-color,var(--accent,#00d4a9))!important;
  transform:translateY(-1px)!important;
  opacity:1!important;
}
.nav-actions .btn:hover::after,
.nav-actions .btn:focus-visible::after,
.nav-actions a.btn:hover::after,
.nav-actions a.btn:focus-visible::after,
.nav-actions button:hover::after,
.nav-actions button:focus-visible::after,
.nav-actions .theme-toggle:hover::after,
.nav-actions .theme-toggle:focus-visible::after,
.mn-header nav .mn-cta:hover::after,
.mn-header nav .mn-cta:focus-visible::after,
.store-header nav button:hover::after,
.store-header nav button:focus-visible::after{transform:scaleX(1)}
.nav-actions .btn:active,
.nav-actions a.btn:active,
.nav-actions button:active,
.nav-actions .theme-toggle:active,
.mn-header nav .mn-cta:active,
.store-header nav button:active{
  color:var(--arc-public-action-color,var(--accent,#00d4a9))!important;
  transform:translateY(1px) scale(.97)!important;
  opacity:.72!important;
}

/* Make the three landing actions deliberately distinct while remaining text-only. */
.nav-actions .theme-toggle,
.nav-actions [id*="theme"]{--arc-public-action-color:var(--arc-topbar-purple,#8b5cf6)}
.nav-actions a[href*="login"]{--arc-public-action-color:var(--accent2,#2563eb)}
.nav-actions a[href*="register"]{--arc-public-action-color:var(--accent,#00d4a9)}
.nav-actions a[href*="dashboard"]{--arc-public-action-color:var(--accent,#00d4a9)}
.nav-actions a[href*="logout"]{--arc-public-action-color:var(--red,#ff4d6d)}

@media(max-width:700px){
  .nav-actions{gap:14px!important}
  .nav-actions .btn,
  .nav-actions button,
  .nav-actions .theme-toggle{padding:7px 1px!important}
}

/* ---- V22.31.2 landing navigation interaction correction -----------------
   The landing markup uses <nav class="nav">, not <header class="nav">.
   The earlier selector therefore missed the primary desktop links. Keep the
   public navigation text-first and give every link the same visible hover /
   focus / press language as the other Arcendium header actions. */
.nav .nav-links a{
  --arc-nav-link-color:var(--accent,#00d4a9);
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:8px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--text2)!important;
  text-decoration:none!important;
  transition:color .18s ease,transform .18s ease!important;
}
.nav .nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:1px;
  background:var(--arc-nav-link-color);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .22s cubic-bezier(.22,.8,.28,1);
}
.nav .nav-links li:nth-child(3n+2) a{--arc-nav-link-color:var(--accent2,#2563eb)}
.nav .nav-links li:nth-child(3n) a{--arc-nav-link-color:var(--arc-topbar-purple,#8b5cf6)}
.nav .nav-links a:hover,
.nav .nav-links a:focus-visible{
  color:var(--arc-nav-link-color)!important;
  transform:translateY(-1px)!important;
}
.nav .nav-links a:hover::after,
.nav .nav-links a:focus-visible::after{transform:scaleX(1)}
.nav .nav-links a:active{
  color:var(--arc-nav-link-color)!important;
  transform:translateY(1px) scale(.98)!important;
}

@media(prefers-reduced-motion:reduce){
  .nav .nav-links a,
  .nav .nav-links a::after{transition:none!important}
}


/* ============================================================
   V22.31.4 — public/store header parity
   - Store navigation uses the same text-first colour/underline motion as landing.
   - Store theme control is an SVG action, not a plain text browser-like button.
   ============================================================ */
.store-header nav a,
.store-header nav button{
  --arc-store-nav-color:var(--accent,#00d4a9);
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  padding:8px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  color:var(--muted,var(--text2,#64748b))!important;
  font-family:var(--arc-receipt-font,var(--font-m,'IBM Plex Mono',monospace))!important;
  font-size:11px!important;
  font-weight:650!important;
  letter-spacing:.04em!important;
  text-decoration:none!important;
  transition:color .18s ease,transform .18s ease!important;
}
.store-header nav a::after,
.store-header nav button::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:1px;
  background:var(--arc-store-nav-color);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .22s cubic-bezier(.22,.8,.28,1);
}
.store-header nav > :nth-child(3n+2){--arc-store-nav-color:var(--blue,var(--accent2,#2563eb))}
.store-header nav > :nth-child(3n){--arc-store-nav-color:var(--arc-topbar-purple,#8b5cf6)}
.store-header nav a:hover,
.store-header nav a:focus-visible,
.store-header nav button:hover,
.store-header nav button:focus-visible{
  color:var(--arc-store-nav-color)!important;
  transform:translateY(-1px)!important;
  outline:none!important;
}
.store-header nav a:hover::after,
.store-header nav a:focus-visible::after,
.store-header nav button:hover::after,
.store-header nav button:focus-visible::after{transform:scaleX(1)}
.store-header nav a:active,
.store-header nav button:active{
  color:var(--arc-store-nav-color)!important;
  transform:translateY(1px) scale(.98)!important;
}
.store-header .store-theme-action{--arc-store-nav-color:var(--arc-topbar-purple,#8b5cf6)}
.store-header .store-theme-action svg{
  width:16px!important;
  height:16px!important;
  flex:0 0 16px!important;
  stroke:currentColor!important;
  transition:transform .18s ease!important;
}
.store-header .store-theme-action:hover svg,
.store-header .store-theme-action:focus-visible svg{transform:rotate(-8deg) scale(1.05)}

@media(prefers-reduced-motion:reduce){
  .store-header nav a,
  .store-header nav button,
  .store-header nav a::after,
  .store-header nav button::after,
  .store-header .store-theme-action svg{transition:none!important}
}


/* ============================================================
   V22.31.7 — Store hero actions use the Arcendium text-action language
   No filled/background button chrome: SVG + text + animated underline.
   ============================================================ */
.store-actions .arc-store-text-action{
  --arc-store-action-color:var(--accent,#00d4aa);
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  min-height:0!important;
  padding:8px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  color:var(--muted,var(--text2,#64748b))!important;
  font-family:var(--arc-receipt-font,var(--font-m,'IBM Plex Mono',monospace))!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:.035em!important;
  line-height:1.25!important;
  text-decoration:none!important;
  transition:color .18s ease,transform .18s ease!important;
}
.store-actions .arc-store-text-action.arc-store-cart-action{
  --arc-store-action-color:var(--blue,var(--accent2,#2563eb));
}
.store-actions .arc-store-text-action::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:1px;
  height:1px;
  background:var(--arc-store-action-color);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .22s cubic-bezier(.22,.8,.28,1);
}
.store-actions .arc-store-text-action svg{
  width:17px!important;
  height:17px!important;
  flex:0 0 17px!important;
  stroke:currentColor!important;
  transition:transform .18s ease!important;
}
.store-actions .arc-store-text-action:hover,
.store-actions .arc-store-text-action:focus-visible{
  color:var(--arc-store-action-color)!important;
  transform:translateY(-1px)!important;
  outline:none!important;
}
.store-actions .arc-store-text-action:hover::after,
.store-actions .arc-store-text-action:focus-visible::after{
  transform:scaleX(1);
}
.store-actions .arc-store-text-action:hover svg,
.store-actions .arc-store-text-action:focus-visible svg{
  transform:translateX(1px) scale(1.04);
}
.store-actions .arc-store-text-action:active{
  color:var(--arc-store-action-color)!important;
  transform:translateY(1px) scale(.985)!important;
}
.store-actions .arc-store-cart-count:empty{display:none!important}
.store-actions .arc-store-cart-count:not(:empty){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:18px!important;
  height:18px!important;
  padding:0 4px!important;
  border:1px solid currentColor!important;
  border-radius:0!important;
  font-size:9px!important;
  line-height:1!important;
}
@media(max-width:560px){
  .store-actions{gap:18px!important}
  .store-actions .arc-store-text-action{font-size:11.5px!important}
}
@media(prefers-reduced-motion:reduce){
  .store-actions .arc-store-text-action,
  .store-actions .arc-store-text-action::after,
  .store-actions .arc-store-text-action svg{transition:none!important}
}