/* ════════════════════════════════════════════════════════════════════
   L8 MODERN · shared design language  ·  7SLF STUDIOS / OMNISOFT
   ──────────────────────────────────────────────────────────────────
   the consumer-wallet feel, extracted to one reusable layer:
     · Inter for prose  ·  JetBrains Mono ONLY for data (addr/hash/code/amounts)
     · rounded soft surfaces  ·  pill buttons  ·  layered depth  ·  calm tracking
   PALETTE-AGNOSTIC by design — it never sets bg/text colors, so every page
   keeps its OWN palette (MIDNIGHT GRAPHITE, near-black DEX, …) and just gains
   the modern craft. link it AFTER a page's own <style> so it wins by order:
       <link rel="stylesheet" href="../assets/l8-modern.css">
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&display=swap');

:root{
  --lm-sans:'Inter','SF Pro Text','Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --lm-mono:'JetBrains Mono','SF Mono','Consolas','Menlo',monospace;
  --lm-r:16px; --lm-r-sm:11px; --lm-pill:999px;
  --lm-sh:0 6px 20px rgba(0,0,0,.38);
  --lm-sh-lg:0 18px 48px rgba(0,0,0,.55);
  --lm-ring:0 0 0 3px rgba(125,211,252,.22);
  --lm-hair:rgba(255,255,255,.07);
}

/* ── TYPE · sans prose, calm tracking (was terminal-wide) ─────────────── */
html,body{
  font-family:var(--lm-sans)!important; letter-spacing:0!important;
  line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,
.title,.shead,.lead,.desc,.what,.role,.tagline,.sub,.note,.meta,.by,
.brand-name,.brand-sub,.nm,.lbl,label,button,small,p,li,
.cta,.btn,.tag,.badge,.htag,.pill,.chip{
  font-family:var(--lm-sans)!important; letter-spacing:0!important;
}
h1,h2,.hero h1{ letter-spacing:-.012em!important; font-weight:700; }
h3,.title,.shead{ font-weight:650; }

/* ── TYPE · mono for data + ALL mono-dependent UI (safety net for the
      ecosystem sweep: terminals/consoles/logs/ascii stay mono, never sans) ── */
pre,code,kbd,samp,tt,textarea,.editor,
.mono,.code,.addr,.amt,.num,.hash,.path,.id,.cnt,.dur,.hex,.bytes,.raw,.serial,
table,th,td,.v,.k,.stack-row,.bar-track,.runblock,
.terminal,.term,.console,.cli,.shell,.tty,.cmd,.output,.ascii,.hljs,.repl,
.codemirror,.CodeMirror,.cm-editor,.code-block,.codeblock,.snippet,.log,.logs,.tape,
[class*="mono"],[class*="hash"],[class*="addr"],[class*="-key"],[class*="ascii"],[class*="termin"]{
  font-family:var(--lm-mono)!important;
}
pre,code,.code,.runblock,.addr,.hash,.amt{ letter-spacing:0!important; }

/* ── SURFACES · rounded + layered depth (keep each page's own bg/border) ─ */
.section,.sec,.card,.hero,.fbox,.runblock,.chart,.stats,.stat,
.box,.panel,.honest,.decoded-card,.tx-input-card,.canary-card{
  border-radius:var(--lm-r)!important;
}
.section,.sec,.card,.hero,.fbox,.stats,.chart{
  box-shadow:var(--lm-sh); overflow:hidden;
}
.rulebox,.note,.meta,.runblock,pre,.stack,.bar-track,table.spec,.htag,.tag,.badge{
  border-radius:var(--lm-r-sm)!important;
}
.section-h,.shead{ letter-spacing:0!important; }
hr{ border:none; border-top:1px solid var(--lm-hair); margin:18px 0; }

/* ── PILLS + BUTTONS ─────────────────────────────────────────────────── */
.tag,.htag,.pill,.badge,.chip,.role,.tag-line{ border-radius:var(--lm-pill)!important; }
.cta,.btn,button,.btn-primary,a.cta,input[type="button"],input[type="submit"],input[type="reset"]{
  border-radius:var(--lm-pill)!important;
  transition:transform .12s cubic-bezier(.22,1,.36,1),box-shadow .15s,filter .15s,background .15s!important;
}
.cta:hover,.btn:hover{ transform:translateY(-1px); }
.cta:active,.btn:active{ transform:translateY(0) scale(.985); }

/* ── INPUTS ──────────────────────────────────────────────────────────── */
input,select,textarea,.inp{ border-radius:var(--lm-r-sm)!important; }
input:focus,select:focus,textarea:focus,.inp:focus{ box-shadow:var(--lm-ring)!important; outline:none!important; }

/* ── POLISH · smooth scroll + soft scrollbars ────────────────────────── */
html{ scroll-behavior:smooth; }
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-thumb{ background:var(--lm-hair); border-radius:999px; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.13); }
*::-webkit-scrollbar-track{ background:transparent; }