/* =====================================================================
   CryptoMath — SITE-WIDE UNIFICATION LAYER  (calm "Asme" homepage theme)
   ---------------------------------------------------------------------
   Loaded LAST on every interior page (after cm-pages.css & cm-enhance.css),
   so this one file re-skins all 20+ pages to match the homepage:

     · pure-black background (the bronze storm canvas is hidden)
     · Instrument Serif page titles · DM Sans everywhere else
     · a floating liquid-glass nav pill (hamburger menu at every width)
     · dark-glass cards / surfaces, gold accent kept for CTAs
     · white-on-black text, slim glass scrollbars & focus rings

   The homepage (body.cm-home) is self-contained and does NOT load this
   file — everything here is scoped to the interior pages.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:wght@400;500;600;700&display=swap');

:root{
  --cmx-accent:#C9A24B;
  --cmx-accent-light:#E3C77A;
  --cmx-ink:#ffffff;
  --cmx-ink-soft:rgba(255,255,255,.72);
  --cmx-ink-faint:rgba(255,255,255,.42);
  --cmx-bg:#000000;
  --cmx-surface:rgba(255,255,255,.035);
  --cmx-line:rgba(255,255,255,.12);
  --cmx-on-accent:#1a1206;
  --cmx-font-display:'Instrument Serif',Georgia,'Noto Serif',serif;
  --cmx-font-body:'DM Sans','Plus Jakarta Sans','Noto Sans Arabic',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --cmx-font-mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --cm-nav-h:76px;

  /* Remap the older cm-pages.css / cm-enhance.css design tokens so every
     component that references them turns dark-glass automatically. */
  --accent:#C9A24B; --accent-light:#E3C77A; --accent-2:#C9A24B;
  --bg:#000000; --surface:rgba(255,255,255,.04); --line:rgba(255,255,255,.12);
  --ink:#ffffff; --muted:rgba(255,255,255,.62); --good:#5DDC8A;
  --cm-accent:#C9A24B; --cm-accent-light:#E3C77A;
  --cm-ink:#ffffff; --cm-ink-soft:rgba(255,255,255,.66);
  --cm-bg:#000000; --cm-surface:rgba(255,255,255,.04); --cm-line:rgba(255,255,255,.12); --cm-good:#5DDC8A;
}

/* ------------------------------------------------------------------
   1. BACKGROUND — pure black; hide the bronze storm particle canvas
      (per-page inline styles set html to a warm radial with !important,
       so `html:root` — higher specificity — is used to win the cascade)
   ------------------------------------------------------------------ */
html:root{ background:#000 !important; }
body:not(.cm-home){ background:transparent !important; color:var(--cmx-ink) !important; padding-top:84px !important; }
#storm-bg-canvas,#webgl,#webgl-fallback{ display:none !important; }
html{ scroll-behavior:smooth !important; scroll-padding-top:98px !important; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto !important; } }

/* ------------------------------------------------------------------
   2. TYPOGRAPHY — Instrument Serif titles, DM Sans body
   ------------------------------------------------------------------ */
body:not(.cm-home){ font-family:var(--cmx-font-body) !important; }
/* big page titles → elegant serif */
body:not(.cm-home) .page-hero h1,
body:not(.cm-home) .page-title,
body:not(.cm-home) .hero-title{
  font-family:var(--cmx-font-display) !important;
  font-weight:400 !important; letter-spacing:-.01em !important;
}
/* section & card headings → crisp sans, like the homepage's card titles */
body:not(.cm-home) h2,
body:not(.cm-home) h3,
body:not(.cm-home) h4,
body:not(.cm-home) h5,
body:not(.cm-home) h6,
body:not(.cm-home) .cm-h,
body:not(.cm-home) .section-title,
body:not(.cm-home) .brand{
  font-family:var(--cmx-font-body) !important; letter-spacing:-.01em !important;
}
/* emphasis inside any heading → italic serif, gold (homepage idiom) */
body:not(.cm-home) h1 em, body:not(.cm-home) h1 i,
body:not(.cm-home) h2 em, body:not(.cm-home) h2 i{
  font-family:var(--cmx-font-display) !important; font-style:italic !important; color:var(--cmx-accent-light) !important;
}
body:not(.cm-home) code,
body:not(.cm-home) pre,
body:not(.cm-home) kbd,
body:not(.cm-home) samp,
body:not(.cm-home) .mono,
body:not(.cm-home) .hash,
body:not(.cm-home) .lb-xp{ font-family:var(--cmx-font-mono) !important; }
/* Arabic mode: serif has no Arabic glyphs — let Noto lead */
[dir=rtl] body:not(.cm-home),
[dir=rtl] body:not(.cm-home) h1,
[dir=rtl] body:not(.cm-home) h2,
[dir=rtl] body:not(.cm-home) h3,
[dir=rtl] body:not(.cm-home) h4{ font-family:'Noto Sans Arabic','DM Sans',sans-serif !important; }

/* ------------------------------------------------------------------
   3. PAGE HERO
   ------------------------------------------------------------------ */
body:not(.cm-home) .page-hero{ padding-top:40px !important; padding-bottom:20px !important; }
body:not(.cm-home) .page-hero .eyebrow{ color:var(--cmx-accent-light) !important; letter-spacing:.22em !important; }
body:not(.cm-home) .page-hero h1{ color:#fff !important; font-size:clamp(2.6rem,6.2vw,4.8rem) !important; line-height:1.04 !important; }
body:not(.cm-home) .page-hero p{ color:var(--cmx-ink-soft) !important; }

/* ------------------------------------------------------------------
   4. NAVBAR — floating liquid-glass pill + hamburger menu (all widths)
   ------------------------------------------------------------------ */
nav.navbar{
  position:fixed !important; top:14px !important; left:0 !important; right:0 !important; bottom:auto !important;
  z-index:1200 !important;
  width:min(1160px, calc(100% - 28px)) !important;
  margin:0 auto !important;
  display:flex !important; align-items:center !important; justify-content:flex-start !important;
  gap:.8rem !important;
  padding:.5rem .55rem .5rem 1.3rem !important;
  min-height:52px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(16,16,18,.55) !important;
  -webkit-backdrop-filter:blur(16px) saturate(140%) !important;
  backdrop-filter:blur(16px) saturate(140%) !important;
  box-shadow:0 10px 34px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.10) !important;
  visibility:visible !important; opacity:1 !important;
}
nav.navbar.scrolled{ background:rgba(10,10,12,.72) !important; }

nav.navbar .brand{
  font-family:var(--cmx-font-body) !important; font-weight:600 !important; font-size:1.02rem !important;
  color:#fff !important; text-decoration:none !important; letter-spacing:.2px !important;
  display:inline-flex !important; align-items:center !important; text-transform:none !important;
  order:0 !important;
}

/* primary link row — visible on desktop, sits just after the brand */
nav.navbar .nav-primary{ display:none; order:1; }
@media (min-width:1100px){
  nav.navbar .nav-primary{
    display:flex !important; align-items:center !important; gap:1.5rem !important; margin-left:1.6rem !important;
  }
  nav.navbar .nav-primary a{
    color:var(--cmx-ink-soft) !important; font-family:var(--cmx-font-body) !important;
    font-weight:500 !important; font-size:.86rem !important; letter-spacing:.2px !important;
    text-decoration:none !important; white-space:nowrap !important; transition:color .18s !important;
  }
  nav.navbar .nav-primary a:hover{ color:#fff !important; }
  nav.navbar .nav-primary a.active{ color:var(--cmx-accent-light) !important; }
}
nav.navbar .brand .brand-logo{
  width:24px !important; height:24px !important; border-radius:6px !important;
  display:block !important; flex:0 0 auto !important; margin-inline-end:.5rem !important; box-shadow:none !important;
}

/* right-side cluster: burger + auth */
nav.navbar .nav-actions{ display:flex !important; align-items:center !important; gap:.55rem !important; margin:0 !important; order:3; }
nav.navbar .nav-login{
  color:#fff !important; font-weight:500 !important; font-size:.84rem !important; text-decoration:none !important;
  background:none !important; border:0 !important; padding:.35rem .5rem !important; white-space:nowrap !important;
}
nav.navbar .nav-login:hover{ color:var(--cmx-accent-light) !important; }
nav.navbar .nav-cta{
  display:inline-flex !important; align-items:center !important;
  color:#1a1206 !important; font-weight:700 !important; font-size:.8rem !important; text-decoration:none !important;
  padding:.5rem 1.05rem !important; border-radius:999px !important; border:0 !important; white-space:nowrap !important;
  background:linear-gradient(135deg,var(--cmx-accent),var(--cmx-accent-light)) !important;
  box-shadow:0 4px 14px rgba(201,162,75,.3) !important;
}
nav.navbar .nav-cta:hover{ filter:brightness(1.06) !important; }

/* hamburger — always visible */
nav.navbar .nav-burger{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:38px !important; height:38px !important; order:2; margin-left:auto !important;
  background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.14) !important;
  border-radius:999px !important; cursor:pointer !important; position:relative !important;
}
nav.navbar .nav-burger span,
nav.navbar .nav-burger span::before,
nav.navbar .nav-burger span::after{
  content:'' !important; position:absolute !important; left:11px !important; right:11px !important; height:1.6px !important;
  background:#fff !important; top:50% !important; transition:.2s !important; border-radius:2px !important;
}
nav.navbar .nav-burger span::before{ top:-5px !important; }
nav.navbar .nav-burger span::after{ top:5px !important; }

/* the link list is a glass dropdown panel at every width */
nav.navbar .nav-links{
  position:fixed !important; top:76px !important; left:0 !important; right:0 !important;
  width:min(1160px, calc(100% - 28px)) !important; margin:0 auto !important;
  display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:.1rem !important;
  padding:.7rem 1rem 1rem !important;
  background:rgba(12,12,14,.92) !important;
  -webkit-backdrop-filter:blur(20px) saturate(140%) !important; backdrop-filter:blur(20px) saturate(140%) !important;
  border:1px solid rgba(255,255,255,.12) !important; border-radius:22px !important;
  box-shadow:0 22px 54px rgba(0,0,0,.55) !important;
  transform:translateY(-10px) !important; opacity:0 !important; pointer-events:none !important;
  transition:opacity .2s ease, transform .2s ease !important;
  max-height:calc(100vh - 100px) !important; overflow:auto !important; z-index:1199 !important;
}
nav.navbar .nav-links.open{ transform:none !important; opacity:1 !important; pointer-events:auto !important; }
nav.navbar .nav-links > a{
  color:var(--cmx-ink-soft) !important; font-family:var(--cmx-font-body) !important;
  font-weight:500 !important; font-size:.98rem !important; letter-spacing:.2px !important; text-decoration:none !important;
  padding:.62rem .3rem !important; border:0 !important; background:none !important; border-radius:8px !important;
  text-transform:none !important; transition:color .18s, background .18s !important;
}
nav.navbar .nav-links > a:hover{ color:#fff !important; background:rgba(255,255,255,.04) !important; }
nav.navbar .nav-links > a.active,
nav.navbar .nav-links > a[aria-current=page]{ color:var(--cmx-accent-light) !important; }
/* lang toggle inside the dropdown */
nav.navbar .lang-toggle{
  display:inline-flex !important; align-items:center !important; gap:.4rem !important; align-self:flex-start !important;
  margin:.4rem .3rem 0 !important; padding:.3rem .6rem !important;
  border:1px solid rgba(255,255,255,.18) !important; border-radius:999px !important;
  background:rgba(255,255,255,.04) !important; color:var(--cmx-ink-soft) !important;
  cursor:pointer !important; font-size:.74rem !important; font-weight:700 !important;
}
nav.navbar .lang-toggle .active{ color:#fff !important; }
/* duplicated auth links inside the menu stay hidden (auth lives in .nav-actions) */
nav.navbar .nav-menu-auth,
nav.navbar a.nav-menu-auth{ display:none !important; }
/* on tiny screens keep only the CTA button */
@media (max-width:440px){ nav.navbar .nav-login{ display:none !important; } }
/* once logged in, the Log In / Get Started buttons disappear (chip takes over) */
body.cm-authed nav.navbar .nav-login,
body.cm-authed nav.navbar .nav-cta{ display:none !important; }

/* ------------------------------------------------------------------
   4b. LOGGED-IN chip (unified across pages)
   ------------------------------------------------------------------ */
#authButton{ display:none !important; }
.cm-user-chip{
  display:inline-flex !important; align-items:center !important; gap:.5rem !important; order:2;
  text-decoration:none !important; white-space:nowrap !important;
  background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.16) !important;
  border-radius:999px !important; padding:.26rem .8rem .26rem .3rem !important;
  color:#fff !important; font-weight:600 !important; font-size:.84rem !important;
  font-family:var(--cmx-font-body) !important;
}
.cm-user-chip:hover{ border-color:rgba(255,255,255,.35) !important; }
.cm-user-av{
  width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--cmx-accent),var(--cmx-accent-light)); color:#1a1206; font-weight:800; font-size:.7rem; flex:0 0 auto;
}
.cm-user-av-img{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.cm-user-name{ max-width:14ch; overflow:hidden; text-overflow:ellipsis; }
.cm-logout{
  background:rgba(255,255,255,.03) !important; border:1px solid rgba(255,255,255,.16) !important; color:var(--cmx-ink-soft) !important;
  border-radius:999px !important; padding:.4rem .8rem !important; font-weight:600 !important; font-size:.82rem !important;
  cursor:pointer !important; font-family:var(--cmx-font-body) !important; white-space:nowrap !important; order:3;
}
.cm-logout:hover{ color:#fff !important; border-color:rgba(255,255,255,.35) !important; }
@media (max-width:640px){ .cm-user-name{ display:none; } }

/* ------------------------------------------------------------------
   5. SURFACES — cards, buttons, pills as dark glass
   ------------------------------------------------------------------ */
body:not(.cm-home) .cm-card,
body:not(.cm-home) .card,
body:not(.cm-home) .panel,
body:not(.cm-home) .box,
body:not(.cm-home) .tile{
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:20px !important;
  box-shadow:0 12px 40px rgba(0,0,0,.35) !important;
  -webkit-backdrop-filter:blur(6px) !important; backdrop-filter:blur(6px) !important;
  color:var(--cmx-ink) !important;
}
body:not(.cm-home) .cm-btn,
body:not(.cm-home) .btn-primary,
body:not(.cm-home) button[type=submit]{
  background:linear-gradient(135deg,var(--cmx-accent),var(--cmx-accent-light)) !important;
  color:#1a1206 !important; border:0 !important; border-radius:999px !important; font-weight:700 !important;
}
body:not(.cm-home) .cm-btn.ghost,
body:not(.cm-home) .btn-secondary,
body:not(.cm-home) .cm-btn.secondary{
  background:rgba(255,255,255,.03) !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important; border-radius:999px !important;
}
body:not(.cm-home) input:not([type=button]):not([type=submit]),
body:not(.cm-home) textarea,
body:not(.cm-home) select{
  background:rgba(255,255,255,.03) !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.14) !important; border-radius:12px !important;
}
body:not(.cm-home) input::placeholder,
body:not(.cm-home) textarea::placeholder{ color:rgba(255,255,255,.38) !important; }
/* generic links in body copy → gold */
body:not(.cm-home) main a:not([class]),
body:not(.cm-home) .cm-container a:not([class]){ color:var(--cmx-accent-light) !important; }

/* ------------------------------------------------------------------
   6. INJECTED CHROME — XP chip, footer, toasts
   ------------------------------------------------------------------ */
.cm-rail{ display:none !important; }
.cm-rail-chip{
  top:calc(var(--cm-nav-h,76px) + 12px) !important;
  background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.15) !important;
  color:#fff !important; -webkit-backdrop-filter:blur(12px) !important; backdrop-filter:blur(12px) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.4) !important;
}
.cm-rail-chip .cm-flame{ color:var(--cmx-accent-light) !important; }
.cm-rail-chip .cm-milestone{ color:var(--cmx-ink-soft) !important; }

body:not(.cm-home) .cm-footer{
  background:transparent !important; border-top:1px solid rgba(255,255,255,.1) !important; color:var(--cmx-ink-soft) !important;
}
.cm-footer .cm-foot-logo{ color:#fff !important; }
.cm-footer h4{ color:#fff !important; }
.cm-footer a{ color:var(--cmx-ink-faint) !important; }
.cm-footer a:hover{ color:#fff !important; }
.cm-footer .cm-foot-stats b{ color:var(--cmx-accent-light) !important; }
.cm-footer .cm-foot-bottom{ border-top-color:rgba(255,255,255,.1) !important; }

.cm-toast,.cm-continue,.cm-modal{
  background:rgba(16,16,18,.92) !important; border:1px solid rgba(255,255,255,.12) !important; color:#fff !important;
  -webkit-backdrop-filter:blur(16px) !important; backdrop-filter:blur(16px) !important;
}
.cm-modal-veil{ background:rgba(0,0,0,.72) !important; }

/* ------------------------------------------------------------------
   7. SCROLLBARS · SELECTION · FOCUS
   ------------------------------------------------------------------ */
html{ scrollbar-width:thin !important; scrollbar-color:rgba(255,255,255,.22) transparent !important; }
::-webkit-scrollbar{ width:10px !important; height:10px !important; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:999px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.34); background-clip:content-box; }
::-webkit-scrollbar-track{ background:transparent; }
::selection{ background:rgba(227,199,122,.32) !important; color:#fff !important; }
:where(a,button,input,select,textarea,summary,[role=button],[tabindex]):focus-visible{
  outline:2px solid var(--cmx-accent-light) !important; outline-offset:2px !important; border-radius:4px;
}

/* ------------------------------------------------------------------
   8. CURSOR — normal everywhere (some skins set cursor:none)
   ------------------------------------------------------------------ */
body:not(.cm-home){ cursor:auto !important; }
body:not(.cm-home) a,
body:not(.cm-home) button,
body:not(.cm-home) [role=button],
body:not(.cm-home) [onclick]{ cursor:pointer !important; }
body:not(.cm-home) .cm-cursor-inner,
body:not(.cm-home) .cm-cursor-outer,
body:not(.cm-home) .cursor-inner,
body:not(.cm-home) .cursor-outer{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}