/* ==========================================================================
   PixelMint Docs — Design System v2
   Classic, flat documentation styling — light (cream) + dark (Echo-inspired
   near-black) themes. Still NO animation, box-shadow, or transition anywhere
   in this file — theme switching and all state changes are instant.
   ========================================================================== */

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

/* ---------- Tokens: light (default) ---------- */
:root{
  --bg:            #faf6ee;
  --bg-subtle:     #f2e9d7;
  --bg-inset:      #ece1c9;
  --bg-card:       #ffffff;
  --bg-card-rgb:   255,255,255;
  --glass-edge:    rgba(255,255,255,.6);
  --glass-sheen:   rgba(255,255,255,.35);

  --ink:           #1b1a3a;
  --ink-2:         #55516f;
  --ink-3:         #8b87a1;

  --border:        #e3d9c1;
  --border-strong: #cfc09a;

  --blue:          #3b5bdb;
  --blue-dark:     #2c48b8;
  --purple:        #7c3aed;
  --cream:         #faf6ee;

  --grad-brand:      linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  --grad-brand-soft: linear-gradient(135deg, #eaeeff 0%, #f2e9ff 100%);
  --grad-logo:       conic-gradient(from 220deg, var(--blue), var(--purple), var(--blue));
  --grad-hero-glow-1: radial-gradient(circle, rgba(59,91,219,.16) 0%, rgba(124,58,237,.12) 45%, rgba(250,246,238,0) 72%);
  --grad-hero-glow-2: radial-gradient(circle, rgba(124,58,237,.12) 0%, rgba(250,246,238,0) 70%);

  --warn-bg:       #fdf1e0;
  --warn-border:   #e0a94e;
  --warn-ink:      #7a4e0c;

  --danger-bg:     #fbe9ea;
  --danger-border: #e2969a;
  --danger-ink:    #96262a;

  --tip-bg:        #eaf5ee;
  --tip-border:    #7dc79a;
  --tip-ink:       #1f6b3e;

  --note-bg:       #eceeff;
  --note-border:   #b3b9f5;
  --note-ink:      #34399a;

  --code-bg:       #1b1a2e;
  --code-ink:      #eae7f7;
  --code-ink-dim:  #9893b8;
  --code-bar:      #221f38;
  --code-border:   #2e2a4a;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', 'Consolas', monospace;

  --fs-h1: clamp(2.1rem, 1.6rem + 2vw, 3.4rem);
  --fs-h2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --fs-h3: clamp(1.2rem, 1.1rem + .5vw, 1.4rem);
  --fs-h4: 1.1rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem;

  --radius-s: 4px; --radius-m: 8px; --radius-l: 14px;

  --sidebar-w: 268px;
  --content-max: 46rem;
  --topbar-h: 64px;

  color-scheme: light;
}

/* ---------- Tokens: dark (Echo-inspired near-black) ---------- */
html[data-theme="dark"]{
  --bg:            #0a0a0f;
  --bg-subtle:     #131319;
  --bg-inset:      #1c1c26;
  --bg-card:       #101016;
  --bg-card-rgb:   16,16,22;
  --glass-edge:    rgba(255,255,255,.09);
  --glass-sheen:   rgba(255,255,255,.05);

  --ink:           #f3ede0;
  --ink-2:         #b7b2c8;
  --ink-3:         #726f87;

  --border:        #24232e;
  --border-strong: #34333f;

  --blue:          #7c95ff;
  --blue-dark:     #97acff;
  --purple:        #b794f6;
  --cream:         #f3ede0;

  --grad-brand-soft: linear-gradient(135deg, #14162b 0%, #1c1530 100%);
  --grad-hero-glow-1: radial-gradient(circle, rgba(124,149,255,.20) 0%, rgba(183,148,246,.14) 45%, rgba(10,10,15,0) 72%);
  --grad-hero-glow-2: radial-gradient(circle, rgba(183,148,246,.16) 0%, rgba(10,10,15,0) 70%);

  --warn-bg:       #2a2010;
  --warn-border:   #7a5a1e;
  --warn-ink:      #e0b464;

  --danger-bg:     #2a1416;
  --danger-border: #7a3438;
  --danger-ink:    #e78488;

  --tip-bg:        #10261a;
  --tip-border:    #2e6b48;
  --tip-ink:       #7cd8a0;

  --note-bg:       #171a30;
  --note-border:   #3d4380;
  --note-ink:      #a3aaf5;

  --code-bg:       #050508;
  --code-ink:      #eae7f7;
  --code-ink-dim:  #85809f;
  --code-bar:      #101014;
  --code-border:   #201f2c;

  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg{ max-width: 100%; display: block; }
a{ color: var(--blue-dark); text-decoration: none; }
a:hover{ text-decoration: underline; }
ul, ol{ padding-left: 1.25em; }
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.01em;
}
p{ margin: 0 0 var(--sp-4); color: var(--ink-2); }
strong{ color: var(--ink); }
:focus-visible{ outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Grain overlay — static texture, not animation ---------- */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: .12;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2.2' intercept='-.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.container{ max-width: 1180px; margin: 0 auto; padding: 0 var(--sp-5); }

/* ---------- Icons ---------- */
.icon{
  width: 1em; height: 1em;
  display: inline-block;
  vertical-align: -0.14em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icon-sm{ width: .85em; height: .85em; }
.icon-lg{ width: 1.3em; height: 1.3em; }

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-dark);
  margin-bottom: var(--sp-3);
}
.eyebrow::before{
  content: "";
  width: 8px; height: 8px;
  background: var(--grad-brand, linear-gradient(135deg, var(--blue), var(--purple)));
  border-radius: 2px;
  display: inline-block;
}
.pill{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: .35em .9em;
}
.pill .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--blue); display: inline-block; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  padding: .7em 1.3em;
  border-radius: var(--radius-m);
  border: 1.5px solid transparent;
  cursor: pointer;
  line-height: 1.1;
  background: var(--bg-card);
  color: var(--ink);
}
.btn:hover{ text-decoration: none; }
.btn-primary{
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  color: #fff;
}
.btn-primary:hover{ background: var(--blue-dark); }
.btn-outline{
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink);
}
.btn-outline:hover{ border-color: var(--blue); color: var(--blue-dark); background: var(--bg-subtle); }
.btn-row{ display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- Theme toggle ---------- */
.theme-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  background: var(--bg-card);
  color: var(--ink-2);
  cursor: pointer;
  flex: none;
}
.theme-toggle:hover{ color: var(--blue-dark); border-color: var(--blue); }
.theme-toggle .icon-moon{ display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display: block; }

/* ---------- Logo mark ---------- */
.logomark{
  width: 28px; height: 28px;
  flex: none;
}

/* ---------- Glass / crystal (static — blur only, no shadow, no motion) ---------- */
.glass{
  background: rgba(var(--bg-card-rgb), .68);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-edge);
  position: relative;
}
.glass::before{
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--glass-sheen);
  pointer-events: none;
}
.brand{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}

/* ---------- Top bar ---------- */
.topbar{
  height: var(--topbar-h);
  border-bottom: 1px solid var(--glass-edge);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  background: rgba(var(--bg-card-rgb), .7);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  z-index: 50;
}
.topbar .container{ display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--sp-4); }
.topbar-links{ display: flex; align-items: center; gap: var(--sp-5); }
.topbar-links a:not(.btn){ color: var(--ink-2); font-weight: 500; font-size: var(--fs-small); }
.topbar-links a:not(.btn):hover{ color: var(--blue-dark); }
.topbar-links button.link-btn-topbar{
  display: inline-flex; align-items: center; gap: .4em;
  background: none; border: none; font-family: var(--font-body); font-weight: 500;
  font-size: var(--fs-small); color: var(--ink-2); cursor: pointer; padding: 0;
}
.topbar-links button.link-btn-topbar:hover{ color: var(--blue-dark); text-decoration: underline; }
.navToggle{ display: none; }

/* ---------- Hero ---------- */
/* ---------- Rate the bot ---------- */
.rate-section{ padding: var(--sp-7) 0; border-bottom: 1px solid var(--border); }
.rate-box{ max-width: 480px; margin: 0 auto; text-align: center; border: 1px solid var(--border); border-radius: var(--radius-l); padding: var(--sp-6); }
.rate-box .eyebrow{ justify-content: center; }
.rate-box h2{ font-size: var(--fs-h2); margin-bottom: var(--sp-2); }
.rate-box > p{ margin-bottom: var(--sp-5); }
.rate-form{ text-align: left; }
.rate-stars{ display: flex; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.star-btn{
  background: none; border: none; padding: .2em; cursor: pointer;
  color: var(--border-strong);
}
.star-btn .icon{ fill: none; stroke: currentColor; }
.star-btn.is-filled{ color: var(--purple); }
.star-btn.is-filled .icon{ fill: currentColor; }
.rate-status{ font-size: var(--fs-small); color: var(--ink-3); min-height: 1.4em; margin: var(--sp-3) 0 0; text-align: center; }
.login-box p{ margin-bottom: var(--sp-4); }
.whoami{ font-family: var(--font-mono); font-size: var(--fs-small); color: var(--tip-ink); background: var(--tip-bg); border: 1px solid var(--tip-border); border-radius: var(--radius-s); padding: .5em .8em; margin-bottom: var(--sp-4); text-align: center; }
.rate-page-wrap{ max-width: 720px; margin: 0 auto; padding: var(--sp-8) var(--sp-5); }
.rate-page-wrap .rate-box{ max-width: none; }
.rate-page-wrap .comments-list{ margin-top: var(--sp-6); }

.comments-list{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.comment-card{ border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--sp-4) var(--sp-5); }
.comment-card .cc-stars{ display: flex; gap: .15em; color: var(--purple); margin-bottom: var(--sp-2); }
.comment-card .cc-stars .icon{ width: .9em; height: .9em; fill: currentColor; }
.comment-card .cc-stars .icon.is-empty{ fill: none; stroke: var(--border-strong); }
.comment-card .cc-meta{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .3em; }
.comment-card .cc-user{ font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
.comment-card .cc-date{ font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-3); }
.comment-card .cc-text{ font-size: var(--fs-small); color: var(--ink-2); margin: 0; }

.hero{ position: relative; overflow: hidden; padding: var(--sp-8) 0 var(--sp-7); border-bottom: 1px solid var(--border); }
.hero::before{
  content:"";
  position: absolute; top: -220px; right: -160px;
  width: 620px; height: 620px;
  background: var(--grad-hero-glow-1);
  z-index: 0;
}
.hero::after{
  content:"";
  position: absolute; bottom: -260px; left: -200px;
  width: 520px; height: 520px;
  background: var(--grad-hero-glow-2);
  z-index: 0;
}
.hero .container{ position: relative; z-index: 1; }
.hero-grid{ display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--sp-7); align-items: center; }
.hero h1{
  font-size: var(--fs-h1);
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--sp-4);
}
.hero-sub{ font-size: 1.1rem; color: var(--ink-2); max-width: 42ch; margin-bottom: var(--sp-5); }
.hero-stats{
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius-m); overflow: hidden;
}
.hero-stat{ background: var(--bg-card); padding: var(--sp-4); }
.hero-stat .num{ font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; display: block; }
.hero-stat .lbl{ font-size: var(--fs-micro); color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Quick links strip ---------- */
.quicklinks{ border-bottom: 1px solid var(--border); background: var(--bg-subtle); }
.quicklinks-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); }
.quicklink{ background: var(--bg-card); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); color: var(--ink); }
.quicklink:hover{ background: var(--bg-subtle); text-decoration: none; }
.quicklink .ql-tag{ font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--blue-dark); text-transform: uppercase; letter-spacing: .08em; }
.quicklink .ql-title{ font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.quicklink .ql-desc{ font-size: var(--fs-small); color: var(--ink-3); }

/* ---------- Section heading ---------- */
.section-head{ max-width: 640px; margin-bottom: var(--sp-6); }
.section-head h2{ font-size: var(--fs-h2); margin-bottom: var(--sp-2); }
.section-head p{ margin: 0; }
section{ padding: var(--sp-8) 0; }
section.tight{ padding: var(--sp-7) 0; }

/* ---------- Feature grid (home) ---------- */
.feature-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.feature-card{ border: 1px solid var(--border); border-top: 3px solid var(--blue); border-radius: var(--radius-m); padding: var(--sp-5); background: var(--bg-card); }
.feature-card.mint{ border-top-color: var(--purple); }
.feature-card h3{ font-size: 1.05rem; margin-bottom: var(--sp-2); }
.feature-card p{ font-size: var(--fs-small); margin-bottom: var(--sp-3); }
.feature-card a{ font-size: var(--fs-small); font-weight: 600; }
.feature-card .fc-count{ display: inline-block; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-3); margin-bottom: var(--sp-2); }

/* ---------- Footer ---------- */
.site-footer{ border-top: 1px solid var(--border); padding: var(--sp-6) 0; background: var(--bg-subtle); }
.footer-grid{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-4); }
.footer-links{ display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: center; }
.footer-links a{ font-size: var(--fs-small); color: var(--ink-2); }
.footer-note{ font-size: var(--fs-micro); color: var(--ink-3); }
.footer-links button.link-btn{
  font-size: var(--fs-small); color: var(--ink-2); background: none; border: none;
  font-family: var(--font-body); cursor: pointer; padding: 0; text-decoration: underline;
}
.footer-links button.link-btn:hover{ color: var(--blue-dark); }

/* ==========================================================================
   Docs layout (sidebar + content)
   ========================================================================== */
.docs-shell{ display: grid; grid-template-columns: var(--sidebar-w) minmax(0,1fr); }
.sidebar{
  border-right: 1px solid var(--border);
  padding: var(--sp-6) var(--sp-5);
  position: sticky; top: var(--topbar-h);
  align-self: start;
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  background: var(--bg);
}
.sidebar-group{ margin-bottom: var(--sp-6); }
.sidebar-group-title{ font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-bottom: var(--sp-2); }
.sidebar-link{
  display: block; padding: .4em .6em; margin-left: -.6em;
  border-radius: var(--radius-s); border-left: 2px solid transparent;
  font-size: var(--fs-small); color: var(--ink-2);
}
.sidebar-link:hover{ background: var(--bg-subtle); text-decoration: none; color: var(--ink); }
.sidebar-link.is-active{ color: var(--blue-dark); font-weight: 600; border-left-color: var(--blue); background: var(--bg-subtle); }
.sidebar-link.is-disabled{ color: var(--ink-3); cursor: default; }
.sidebar-link.is-disabled:hover{ background: transparent; }
.sidebar-link .soon{
  font-family: var(--font-mono); font-size: .65rem; color: var(--ink-3);
  border: 1px solid var(--border-strong); border-radius: 3px; padding: 0 .4em; margin-left: .5em; text-transform: uppercase;
}
.sidebar-link .new-tag{
  font-family: var(--font-mono); font-size: .65rem; color: #fff;
  background: var(--purple); border-radius: 3px; padding: 0 .4em; margin-left: .5em; text-transform: uppercase;
}
.sidebar-external{ display: flex; align-items: center; justify-content: space-between; }

.content{ padding: var(--sp-7) var(--sp-7) var(--sp-8); max-width: calc(var(--content-max) + 2 * var(--sp-7)); min-width: 0; }
.content-inner{ max-width: var(--content-max); }
.breadcrumb{ font-size: var(--fs-small); color: var(--ink-3); margin-bottom: var(--sp-4); }
.breadcrumb a{ color: var(--ink-3); }
.content h1{ font-size: var(--fs-h1); margin-bottom: var(--sp-3); }
.page-icon{ width: 40px; height: 40px; display: block; margin-bottom: var(--sp-3); image-rendering: pixelated; }
.content > .content-inner > p:first-of-type{ font-size: 1.15rem; color: var(--ink-2); }
.content h2{ font-size: var(--fs-h2); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.content h2:first-of-type{ border-top: none; margin-top: var(--sp-6); padding-top: 0; }
.content h3{ font-size: var(--fs-h3); margin-top: var(--sp-6); }
.content h4{ font-size: var(--fs-h4); margin-top: var(--sp-5); }
.content ul, .content ol{ color: var(--ink-2); margin-bottom: var(--sp-4); }
.content li{ margin-bottom: .35em; }
.content li::marker{ color: var(--blue); }

code{ font-family: var(--font-mono); font-size: .9em; background: var(--bg-inset); color: var(--blue-dark); padding: .15em .4em; border-radius: 4px; }

/* ---------- Code block w/ copy ---------- */
.code-block{ border-radius: var(--radius-m); overflow: hidden; margin: var(--sp-5) 0; border: 1px solid var(--code-border); }
.code-block-bar{ display: flex; align-items: center; justify-content: space-between; background: var(--code-bar); padding: .5em .9em; border-bottom: 1px solid var(--code-border); }
.code-block-lang{ font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--code-ink-dim); text-transform: uppercase; letter-spacing: .08em; }
.copy-btn{
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--code-ink);
  background: var(--code-border); border: 1px solid var(--code-border); border-radius: var(--radius-s);
  padding: .3em .7em; cursor: pointer;
}
.copy-btn:hover{ background: var(--blue-dark); color: #fff; }
.copy-btn.is-copied{ background: var(--purple); color: #fff; }
.code-block pre{ margin: 0; padding: var(--sp-4); background: var(--code-bg); overflow-x: auto; }
.code-block code{ background: none; color: var(--code-ink); padding: 0; font-size: .875rem; line-height: 1.6; }

/* ---------- Command reference ---------- */
.cmd{ border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--sp-4) var(--sp-5); margin: var(--sp-4) 0; }
.cmd-head{ display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.cmd-name{ font-family: var(--font-mono); font-weight: 700; color: var(--blue-dark); font-size: 1rem; }
.cmd-badge{ font-family: var(--font-mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; border-radius: 3px; padding: .1em .5em; border: 1px solid var(--border-strong); color: var(--ink-3); }
.cmd-badge.slash{ border-color: var(--blue); color: var(--blue-dark); }
.cmd-badge.prefix{ border-color: var(--purple); color: var(--purple); }
.cmd-badge.help{ border-color: var(--tip-border); color: var(--tip-ink); }
.cmd p{ margin: 0; font-size: var(--fs-small); }
.cmd .cmd-help-line{ margin-top: .5em; font-size: var(--fs-small); color: var(--ink-3); }
.cmd .cmd-help-line code{ font-size: .85em; }

/* ---------- Game / item grid on content pages ---------- */
.item-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin: var(--sp-5) 0 var(--sp-6); }
.item-card{ border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--sp-4); background: var(--bg-card); }
.item-card h4{ margin: 0 0 .3em; font-size: 1rem; }
.item-card p{ margin: 0; font-size: var(--fs-small); }
.item-card .item-cmd{ font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--blue-dark); display: block; margin-bottom: .4em; }

/* ---------- Callouts ---------- */
.callout{ border: 1px solid var(--border); border-left: 4px solid var(--ink-3); border-radius: var(--radius-s); padding: var(--sp-4) var(--sp-5); margin: var(--sp-5) 0; }
.callout p:last-child{ margin-bottom: 0; }
.callout-label{ font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; display: block; margin-bottom: .3em; }
.callout.tip{ background: var(--tip-bg); border-left-color: var(--tip-border); }
.callout.tip .callout-label{ color: var(--tip-ink); }
.callout.note{ background: var(--note-bg); border-left-color: var(--note-border); }
.callout.note .callout-label{ color: var(--note-ink); }
.callout.warn{ background: var(--warn-bg); border-left-color: var(--warn-border); }
.callout.warn .callout-label{ color: var(--warn-ink); }
.callout.danger{ background: var(--danger-bg); border-left-color: var(--danger-border); }
.callout.danger .callout-label{ color: var(--danger-ink); }

/* ---------- Tables ---------- */
table{ width: 100%; border-collapse: collapse; margin: var(--sp-5) 0; font-size: var(--fs-small); }
th, td{ text-align: left; padding: .6em .8em; border-bottom: 1px solid var(--border); }
th{ font-family: var(--font-mono); text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: .06em; color: var(--ink-3); border-bottom: 1px solid var(--border-strong); }

/* ---------- Page nav (prev/next) ---------- */
.page-nav{ display: flex; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.page-nav a{ border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--sp-3) var(--sp-4); flex: 1; color: var(--ink); }
.page-nav a:hover{ border-color: var(--blue); text-decoration: none; }
.page-nav .dir{ display: block; font-size: var(--fs-micro); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2em; }
.page-nav .next{ text-align: right; }

/* ---------- Was this page helpful? ---------- */
.feedback-box{ border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--sp-5); margin-top: var(--sp-7); background: var(--bg-subtle); text-align: center; }
.feedback-box .fb-q{ font-family: var(--font-display); font-weight: 600; margin-bottom: var(--sp-3); }
.fb-buttons{ display: flex; justify-content: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.fb-btn{
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small);
  padding: .55em 1.1em; border-radius: var(--radius-m); border: 1.5px solid var(--border-strong);
  background: var(--bg-card); color: var(--ink); cursor: pointer;
}
.fb-btn:hover{ border-color: var(--blue); color: var(--blue-dark); }
.fb-btn.is-picked{ border-color: var(--purple); color: #fff; background: var(--purple); }
.fb-btn .fb-count{ font-family: var(--font-mono); font-size: var(--fs-micro); color: inherit; opacity: .75; }
.fb-status{ font-size: var(--fs-small); color: var(--ink-3); min-height: 1.4em; }

/* ---------- Contact modal ("Ask a question") ---------- */
.contact-modal-overlay{
  display: none;
  position: fixed; inset: 0;
  background: rgba(10,10,15,.55);
  z-index: 100;
  align-items: center; justify-content: center;
  padding: var(--sp-5);
}
body.contact-open .contact-modal-overlay{ display: flex; }
.contact-modal{
  background: rgba(var(--bg-card-rgb), .82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-l);
  max-width: 480px; width: 100%;
  padding: var(--sp-6);
  max-height: 90vh;
  overflow-y: auto;
}
.contact-modal-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.contact-modal h3{ margin: 0; font-size: 1.25rem; }
.contact-close{
  background: none; border: 1px solid var(--border-strong); border-radius: var(--radius-s);
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2); cursor: pointer; flex: none;
}
.contact-close:hover{ color: var(--ink); border-color: var(--blue); }
.contact-modal p{ font-size: var(--fs-small); }
.contact-field{ margin-bottom: var(--sp-4); }
.contact-field label{ display: block; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-family: var(--font-mono); margin-bottom: .4em; }
.contact-field input, .contact-field textarea{
  width: 100%; font-family: var(--font-body); font-size: var(--fs-small); color: var(--ink);
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-s);
  padding: .65em .8em;
}
.contact-field textarea{ min-height: 110px; resize: vertical; }
.contact-field input:focus, .contact-field textarea:focus{ outline: 2px solid var(--blue); outline-offset: 0; }
.contact-hint{ font-size: var(--fs-micro); color: var(--ink-3); margin-top: var(--sp-2); }

/* ---------- Search ---------- */
.search-modal-overlay{
  display: none;
  position: fixed; inset: 0;
  background: rgba(10,10,15,.55);
  z-index: 100;
  align-items: flex-start; justify-content: center;
  padding: 12vh var(--sp-5) var(--sp-5);
}
body.search-open .search-modal-overlay{ display: flex; }
.search-modal{
  background: rgba(var(--bg-card-rgb), .82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-l);
  max-width: 560px; width: 100%;
  max-height: 70vh;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.search-input-row{ display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); flex: none; }
.search-input-row .icon{ color: var(--ink-3); flex: none; }
#searchInput{
  flex: 1; border: none; background: none; outline: none;
  font-family: var(--font-body); font-size: 1.05rem; color: var(--ink);
}
#searchInput::placeholder{ color: var(--ink-3); }
.search-results{ overflow-y: auto; padding: var(--sp-3); }
.search-result{ display: block; padding: var(--sp-3) var(--sp-3); border-radius: var(--radius-m); color: var(--ink); }
.search-result:hover{ background: var(--bg-subtle); text-decoration: none; }
.search-result .sr-page{ font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--blue-dark); text-transform: uppercase; letter-spacing: .06em; }
.search-result .sr-heading{ font-family: var(--font-display); font-weight: 600; font-size: 1rem; margin: .1em 0 .2em; }
.search-result .sr-snippet{ font-size: var(--fs-small); color: var(--ink-3); }
.search-result mark{ background: var(--note-bg); color: var(--note-ink); border-radius: 2px; padding: 0 .1em; }
.search-empty{ padding: var(--sp-5); text-align: center; color: var(--ink-3); font-size: var(--fs-small); }
.search-trigger{
  display: inline-flex; align-items: center; gap: .5em;
  border: 1px solid var(--border-strong); border-radius: var(--radius-m);
  padding: .4em .8em; color: var(--ink-3); font-size: var(--fs-small);
  background: var(--bg-card); cursor: pointer; font-family: var(--font-body);
}
.search-trigger:hover{ border-color: var(--blue); color: var(--blue-dark); }
.search-trigger kbd{
  font-family: var(--font-mono); font-size: var(--fs-micro);
  border: 1px solid var(--border-strong); border-radius: 3px; padding: 0 .35em;
  color: var(--ink-3); margin-left: .3em;
}
.search-trigger-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-m);
  background: var(--bg-card); color: var(--ink-2); cursor: pointer; flex: none;
}
.search-trigger-icon:hover{ color: var(--blue-dark); border-color: var(--blue); }

/* ---------- Updates & Status page ---------- */
.status-badge{
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 700;
  padding: .6em 1.1em; border-radius: 999px; border: 1px solid var(--border-strong);
}
.status-badge::before{ content: ""; width: 10px; height: 10px; border-radius: 50%; }
.status-badge.ok{ background: var(--tip-bg); color: var(--tip-ink); border-color: var(--tip-border); }
.status-badge.ok::before{ background: var(--tip-ink); }
.status-badge.warn{ background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-border); }
.status-badge.warn::before{ background: var(--warn-ink); }
.status-badge.down{ background: var(--danger-bg); color: var(--danger-ink); border-color: var(--danger-border); }
.status-badge.down::before{ background: var(--danger-ink); }

.update-entry{ border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--sp-5); margin-bottom: var(--sp-4); }
.ue-head{ display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.ue-tag{ font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; padding: .15em .6em; border-radius: 999px; border: 1px solid; }
.ue-tag.tip{ background: var(--tip-bg); color: var(--tip-ink); border-color: var(--tip-border); }
.ue-tag.note{ background: var(--note-bg); color: var(--note-ink); border-color: var(--note-border); }
.ue-tag.warn{ background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-border); }
.ue-date{ font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-3); }
.update-entry h3{ margin: 0 0 .3em; font-size: 1.05rem; }
.update-entry p{ margin: 0; font-size: var(--fs-small); }

/* ---------- Live stats panel (Stats page) ---------- */
.live-stats{ border: 1px solid var(--border); border-radius: var(--radius-m); padding: var(--sp-5); margin-bottom: var(--sp-6); }
.live-pill{ display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: var(--sp-4); }
.live-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); display: inline-block; }
.live-stats.is-live .live-dot{ background: var(--tip-ink); }
.live-stats.is-live .live-pill{ color: var(--tip-ink); }
.live-stats.is-live .live-fallback{ display: none; }
.live-stats-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.live-stat{ text-align: center; }
.live-stat .num{ display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; }
.live-stat .lbl{ font-size: var(--fs-micro); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.live-freshness{ margin: var(--sp-3) 0 0; font-size: var(--fs-micro); color: var(--ink-3); text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-stats{ max-width: 420px; }
  .feature-grid{ grid-template-columns: repeat(2,1fr); }
  .quicklinks-grid{ grid-template-columns: repeat(2,1fr); }
  .docs-shell{ grid-template-columns: 1fr; }
  .sidebar{ position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(var(--bg-card-rgb), .88); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); z-index: 40; display: none; height: calc(100vh - var(--topbar-h)); }
  body.nav-open .sidebar{ display: block; }
  .navToggle{ display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-s); background: var(--bg-card); cursor: pointer; }
  .content{ padding: var(--sp-6) var(--sp-5) var(--sp-7); }
}
@media (max-width: 640px){
  .feature-grid{ grid-template-columns: 1fr; }
  .quicklinks-grid{ grid-template-columns: 1fr; }
  .item-grid{ grid-template-columns: 1fr; }
  .topbar .container{ gap: var(--sp-2); }
  .topbar-links{ gap: var(--sp-2); }
  .topbar-links a:not(.btn){ display: none; }
  .topbar-label{ display: none; }
  .brand{ font-size: 0; gap: 0; }
  .link-btn-topbar{
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0;
    border: 1px solid var(--border-strong); border-radius: var(--radius-m);
    background: var(--bg-card);
  }
  .btn-primary{ padding: .55em .65em; font-size: var(--fs-micro); }
  .fb-buttons{ flex-direction: column; }
  .live-stats-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-3); }
  .comments-list{ grid-template-columns: 1fr; }
}