/* ============================================================================
   POOM LABS theme — matches the POOM website (poom.stellar-iot.com)
   Y2K / retro-brutalist: light dot-grid canvas, thick near-black borders,
   zero border-radius, hard offset shadows (no blur), orange interactive
   accent, pixel/blocky display type (Bitcount) with Hagrid body.
   Tokens lifted 1:1 from the site's src/index.css + tailwind.config.ts.
   Loads AFTER the GitBook base styles to re-skin all POOM LABS pages.
   ============================================================================ */

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

/* ---- Brand fonts (copied from the website /public/fonts) ------------------- */
@font-face {
  font-family: 'Hagrid';
  src: url('../fonts/hagrid-regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hagrid';
  src: url('../fonts/hagrid-light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hagrid';
  src: url('../fonts/hagrid-medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hagrid';
  src: url('../fonts/hagrid-bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bitcount Prop Double Square';
  src: url('../fonts/bitcount-prop-double-medium-square.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bitcount Prop Double Square';
  src: url('../fonts/bitcount-prop-double-bold-square.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'CC Smash';
  src: url('../fonts/cc-smash.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}

:root {
  --poom-bg:        hsl(220 12% 93%);
  --poom-fg:        hsl(0 0% 6%);
  --poom-card:      hsl(0 0% 100%);
  --poom-muted:     hsl(0 0% 35%);
  --poom-border:    hsl(0 0% 10%);
  --poom-accent:    hsl(21 90% 50%);   /* orange — interactive/hover */
  --poom-ring:      hsl(54 86% 61%);   /* yellow — focus */
  --poom-secondary: hsl(0 0% 93%);
  --poom-title: 'Bitcount Prop Double Square', 'CC Smash', 'Space Grotesk', sans-serif;
  --poom-body:  'Hagrid', 'Space Grotesk', sans-serif;
  --poom-mono:  'Space Grotesk', ui-monospace, Menlo, monospace;
  --poom-dot:   radial-gradient(hsl(0 0% 0% / 0.05) 0.5px, transparent 0.5px);
  --poom-dither-dark: linear-gradient(
      45deg,
      hsl(0 0% 100% / 0.28) 25%,
      transparent 25%,
      transparent 75%,
      hsl(0 0% 100% / 0.28) 75%,
      hsl(0 0% 100% / 0.28)
    ),
    linear-gradient(
      45deg,
      hsl(0 0% 100% / 0.14) 25%,
      transparent 25%,
      transparent 75%,
      hsl(0 0% 100% / 0.14) 75%,
      hsl(0 0% 100% / 0.14)
    );
}

/* ---- Standalone document foundation ---------------------------------------
   The docs ship with their own layout so they remain usable when hosted by
   the POOM Vite app without the original GitBook runtime. ------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { min-height: 100%; margin: 0; overflow-x: hidden; }
img, video, svg { max-width: 100%; }
button, input { font: inherit; }

.book .book-body .book-header {
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 0 26px;
}
.book .book-body .book-header h1 { margin: 0; }
.book .book-body .page-wrapper .page-inner {
  width: min(100%, 1000px);
  margin: 0 auto;
  padding: 46px 42px 80px;
}
.book .book-body .page-wrapper .page-inner section.normal {
  display: block;
  min-width: 0;
}
.book .book-body .page-wrapper .page-inner section.normal p { margin: 0 0 1rem; }
.book .book-body .page-wrapper .page-inner section.normal h2 { margin: 0 0 1.5rem; }
.book .book-body .page-wrapper .page-inner section.normal h3 { margin: 2.2rem 0 0.8rem; }
.book .book-body .page-wrapper .page-inner section.normal h4 { margin: 1.6rem 0 0.65rem; }
.book .book-body .page-wrapper .page-inner section.normal ul,
.book .book-body .page-wrapper .page-inner section.normal ol { padding-left: 1.5rem; }
.book .book-body .page-wrapper .page-inner section.normal table {
  width: 100%;
  max-width: 100%;
  margin: 1.25rem 0 1.75rem;
}
.book .book-body .navigation {
  position: fixed;
  z-index: 4;
  top: 50%;
  display: grid;
  place-items: center;
  width: 42px;
  height: 54px;
  border: 2px solid var(--poom-border);
  background: var(--poom-card);
  box-shadow: 3px 3px 0 var(--poom-border);
  text-decoration: none;
  font: 700 26px/1 var(--poom-title);
}
.book .book-body .navigation-prev { left: 294px; }
.book .book-body .navigation-next { right: 16px; }
.book .book-body .navigation i { display: none; }
.book .book-body .navigation-prev::before { content: "\2039"; }
.book .book-body .navigation-next::before { content: "\203A"; }

@media (max-width: 800px) {
  .book .book-body .book-header { padding: 0 18px; }
  .book .book-body .page-wrapper .page-inner { padding: 34px 18px 70px; }
  .book .book-body .navigation { display: none; }
}

/* ---- Sharp corners everywhere (site sets border-radius:0 !important) ------- */
.book,
.book * ,
.book *::before,
.book *::after {
  border-radius: 0 !important;
}

/* ---- Base canvas ----------------------------------------------------------- */
html,
body,
.book,
.book.font-family-1 {
  font-family: var(--poom-body) !important;
  color: var(--poom-fg);
  background: var(--poom-bg);
}

.book {
  background-color: var(--poom-bg);
  background-image: var(--poom-dot);
  background-size: 4px 4px;
  min-height: 100vh;
}

/* ---- Layout hardening --------------------------------------------------------
   Guarantee a fixed left sidebar + offset content even if the GitBook base
   stylesheet fails to load (e.g. in a preview/sandbox). Without this the nav
   collapses to a bulleted list stacked on top of the page. ------------------- */
.book .book-summary {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 280px !important;
  height: 100vh !important;
  overflow-y: auto !important;
  z-index: 5;
}
.book .book-summary ul.summary {
  list-style: none !important;
  margin: 0 !important;
  padding: 12px 0 !important;
}
.book .book-summary ul.summary li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.book .book-summary ul.summary li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
}
.book .book-body {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  margin-left: 280px !important;
}
.book .book-body .body-inner,
.book .book-body .page-wrapper {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}
@media (max-width: 800px) {
  .book .book-summary {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-height: 55vh;
    border-right: none !important;
    border-bottom: 2px solid var(--poom-border);
  }
  .book .book-body { margin-left: 0 !important; }
}

.book .book-body,
.book .book-body .body-inner {
  background: transparent;
  color: var(--poom-fg);
}

/* ---- Sidebar --------------------------------------------------------------- */
.book .book-summary {
  color: var(--poom-fg);
  background: var(--poom-card);
  border-right: 2px solid var(--poom-border);
  font-family: var(--poom-body);
}

.book .book-summary ul.summary li a {
  color: var(--poom-fg);
  border-left: 3px solid transparent;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.book .book-summary ul.summary li a:hover {
  color: var(--poom-accent) !important;
  background: hsl(21 90% 50% / 0.08);
  border-left-color: var(--poom-accent);
}
.book .book-summary ul.summary li.active > a {
  color: var(--poom-accent);
  font-weight: 700;
  background: hsl(21 90% 50% / 0.12);
  border-left: 3px solid var(--poom-accent);
}
.book .book-summary ul.summary li.chapter > a {
  font-size: 0.9em;
  padding-top: 0.42em !important;
  padding-bottom: 0.52em !important;
}
/* "POOM LABS" brand link */
.book .book-summary ul.summary > li:first-child a strong {
  font-family: var(--poom-title);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--poom-fg);
  font-size: 1.15em;
}
.book .book-summary ul.summary li.divider {
  background: var(--poom-border);
  height: 2px;
}
/* Flipper-style group headers */
.book .book-summary ul.summary li.header {
  font-family: var(--poom-title);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--poom-muted);
  padding: 16px 16px 6px !important;
  margin-top: 2px;
  pointer-events: none;
  list-style: none !important;
}
/* indent chapter links so they nest under their group header */
.book .book-summary ul.summary li.chapter > a { padding-left: 26px !important; }
.book .book-summary ul.summary li a .fa { color: var(--poom-muted); }
.book .book-summary ul.summary li.active > a .fa { color: var(--poom-accent); }

/* Sidebar search box */
#book-search-input {
  background: var(--poom-card);
  border-top: 2px solid var(--poom-border);
  border-bottom: 2px solid var(--poom-border);
}
#book-search-input input { color: var(--poom-fg); background: transparent; }
#book-search-input input::placeholder { color: var(--poom-muted); }

/* ---- Header bar ------------------------------------------------------------ */
.book .book-body .book-header {
  background: var(--poom-card);
  border-bottom: 2px solid var(--poom-border);
  color: var(--poom-fg);
  box-shadow: 0 3px 0 hsl(0 0% 10% / 0.12);
}
.book .book-body .book-header h1 {
  font-family: var(--poom-title);
  font-size: 1rem;
  font-weight: 700;
  color: var(--poom-fg);
  letter-spacing: 0.02em;
}
.book .book-body .book-header h1 a { color: var(--poom-fg); }
.book .book-body .book-header h1 a:hover { color: var(--poom-accent); }
.book .book-body .book-header .fa-circle-o-notch { color: var(--poom-accent); }
.book .book-header .btn { color: var(--poom-fg); }
.book .book-header .btn:hover { color: var(--poom-accent); }

/* ---- Content --------------------------------------------------------------- */
.book .book-body .page-wrapper .page-inner {
  max-width: 1000px;
}
.book .book-body .page-wrapper .page-inner section.normal {
  font-size: 16px;
  line-height: 1.65;
  color: var(--poom-fg);
  font-family: var(--poom-body);
}

.book .book-body .page-wrapper .page-inner section.normal h1,
.book .book-body .page-wrapper .page-inner section.normal h2,
.book .book-body .page-wrapper .page-inner section.normal h3,
.book .book-body .page-wrapper .page-inner section.normal h4 {
  font-family: var(--poom-title);
  color: var(--poom-fg);
  letter-spacing: 0.01em;
  scroll-margin-top: 72px;
  border: none;
}
.book .book-body .page-wrapper .page-inner section.normal h2 {
  font-weight: 700;
  border-bottom: 2px solid var(--poom-border);
  padding-bottom: 0.35em;
  text-transform: uppercase;
}
.book .book-body .page-wrapper .page-inner section.normal h3 {
  font-weight: 700;
}
.book .book-body .page-wrapper .page-inner section.normal h3:before {
  content: "\25B8  ";           /* small triangle bullet */
  color: var(--poom-accent);
}
.book .book-body .page-wrapper .page-inner section.normal h4 { color: var(--poom-muted); }

.book .book-body .page-wrapper .page-inner section.normal strong { color: var(--poom-fg); font-weight: 700; }

.book .book-body .page-wrapper .page-inner section.normal a {
  color: var(--poom-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--poom-border);
}
.book .book-body .page-wrapper .page-inner section.normal a:hover {
  color: var(--poom-accent) !important;
  text-decoration-color: var(--poom-accent);
}

.book .book-body .page-wrapper .page-inner section.normal ul li::marker,
.book .book-body .page-wrapper .page-inner section.normal ol li::marker {
  color: var(--poom-accent);
}

/* ---- Code (framed like the site's pixel panels) --------------------------- */
.book .book-body .page-wrapper .page-inner section.normal code {
  font-family: var(--poom-mono);
  color: var(--poom-fg);
  background: var(--poom-secondary);
  border: 1.5px solid var(--poom-border);
  padding: 0 5px;
  font-size: 0.88em;
  font-weight: 500;
}
.book .book-body .page-wrapper .page-inner section.normal pre {
  background: var(--poom-card);
  border: 2px solid var(--poom-border);
  box-shadow: 4px 4px 0 var(--poom-border);
  padding: 14px 16px;
  margin: 1.3rem 0;
}
.book .book-body .page-wrapper .page-inner section.normal pre code {
  color: var(--poom-fg);
  background: transparent;
  border: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
}

/* ---- Tables (thick borders, black header) --------------------------------- */
.book .book-body .page-wrapper .page-inner section.normal table {
  font-size: 0.9em;
  border: 2px solid var(--poom-border);
  border-collapse: collapse;
  background: var(--poom-card);
  box-shadow: 4px 4px 0 var(--poom-border);
}
.book .book-body .page-wrapper .page-inner section.normal table th,
.book .book-body .page-wrapper .page-inner section.normal table td {
  border: 1.5px solid var(--poom-border);
  padding: 8px 12px;
  color: var(--poom-fg);
}
.book .book-body .page-wrapper .page-inner section.normal table th {
  background: var(--poom-fg);
  background-image: var(--poom-dither-dark);
  background-position: 0 0, 2px 2px;
  background-size: 4px 4px;
  color: hsl(0 0% 98%);
  text-align: left;
  font-family: var(--poom-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.book .book-body .page-wrapper .page-inner section.normal table tr:nth-child(even) td {
  background: hsl(0 0% 0% / 0.035);
}
.book .book-body .page-wrapper .page-inner section.normal table tr:hover td {
  background: hsl(21 90% 50% / 0.08);
}

/* ---- Callouts as brutalist frost-panels ----------------------------------- */
.poom-callout {
  margin: 1.4rem 0;
  padding: 0.95rem 1.1rem;
  background: var(--poom-card);
  border: 2px solid var(--poom-border);
  border-left: 6px solid var(--poom-accent);
  box-shadow: 4px 4px 0 var(--poom-border);
  color: var(--poom-fg);
}
.poom-callout strong { color: var(--poom-fg); }

.poom-note {
  margin: 1.2rem 0;
  padding: 0.85rem 1.05rem;
  background: hsl(54 86% 61% / 0.18);
  border: 2px solid var(--poom-border);
  border-left: 6px solid var(--poom-ring);
  box-shadow: 4px 4px 0 var(--poom-border);
  color: var(--poom-fg);
}
.poom-note strong { color: var(--poom-fg); }

/* ---- Prev / next navigation arrows ---------------------------------------- */
.book .book-body .navigation { color: var(--poom-fg); }
.book .book-body .navigation:hover { color: var(--poom-accent) !important; }

/* ---- Scrollbars ------------------------------------------------------------ */
* { scrollbar-width: thin; scrollbar-color: var(--poom-border) transparent; }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: var(--poom-secondary); }
*::-webkit-scrollbar-thumb { background: var(--poom-border); border: 3px solid var(--poom-secondary); }

/* ---- Figures (screenshots / video demos) ---------------------------------- */
.poom-figure { margin: 1.5rem 0; }
.poom-figure { text-align: center; }
/* Videos keep the framed look (screen recordings) */
.poom-figure video {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--poom-border);
  box-shadow: 6px 6px 0 var(--poom-border);
  background: #000;
}
/* Photos: transparent PNGs float on the page — no frame, no background */
.poom-figure img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
  background: transparent;
  border: none;
  box-shadow: none;
}
.poom-figure figcaption { text-align: center; }
.poom-figure figcaption {
  font-family: var(--poom-title);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--poom-muted);
  margin-top: 10px;
}

/* ---- App cards grid (Flipper-style) --------------------------------------- */
.poom-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin: 0.8rem 0 1.8rem;
}
.book .book-body .page-wrapper .page-inner section.normal a.poom-card {
  display: block;
  background: var(--poom-card);
  border: 2px solid var(--poom-border) !important;
  box-shadow: 4px 4px 0 var(--poom-border);
  padding: 14px 16px;
  text-decoration: none !important;
  color: var(--poom-fg) !important;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.book .book-body .page-wrapper .page-inner section.normal a.poom-card:hover {
  border-color: var(--poom-accent) !important;
  box-shadow: 6px 6px 0 var(--poom-accent);
  transform: translate(-1px, -1px);
  text-shadow: none;
}
.poom-card-cat {
  display: inline-block;
  font-family: var(--poom-title);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #050505;
  background: var(--poom-accent);
  padding: 2px 7px;
  margin-bottom: 8px;
}
.poom-card-title {
  font-family: var(--poom-title);
  font-size: 15px;
  font-weight: 700;
  color: var(--poom-fg);
  margin: 0 0 6px;
  line-height: 1.2;
}
.poom-card p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--poom-muted);
  margin: 0;
}

/* ---- Selection ------------------------------------------------------------- */
::selection { background: var(--poom-accent); color: hsl(0 0% 5%); }

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 1240px) {
  .book .book-body .page-wrapper .page-inner { max-width: 880px; }
}
@media (max-width: 860px) {
  .book .book-body .page-wrapper .page-inner {
    max-width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }
  .book .book-body .page-wrapper .page-inner section.normal {
    font-size: 15px;
    line-height: 1.6;
  }
}

/* ============================================================================
   Copy button on every code block
   ============================================================================ */
.book .book-body .page-wrapper .page-inner section.normal .poom-code {
  position: relative;
  margin: 1.3rem 0;
}
.book .book-body .page-wrapper .page-inner section.normal .poom-code > pre {
  margin: 0;
}
.poom-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  font-family: var(--poom-title);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--poom-fg);
  background: var(--poom-secondary);
  border: 2px solid var(--poom-border);
  box-shadow: 2px 2px 0 var(--poom-border);
  padding: 3px 9px;
  cursor: pointer;
  transition: transform .08s ease, background .12s ease, color .12s ease;
}
.poom-copy:hover {
  color: var(--poom-accent);
  border-color: var(--poom-accent);
  box-shadow: 2px 2px 0 var(--poom-accent);
}
.poom-copy:active { transform: translate(2px, 2px); box-shadow: none; }
.poom-copy.ok { color: hsl(140 60% 30%); border-color: hsl(140 60% 30%); box-shadow: 2px 2px 0 hsl(140 60% 30%); }

/* ============================================================================
   POOM mini terminal (simulated CLI) — green terminal in a brutalist frame
   ============================================================================ */
.poom-term {
  margin: 1.6rem 0;
  background: #060a07;
  border: 3px solid var(--poom-border);
  box-shadow: 6px 6px 0 var(--poom-border);
  font-family: 'JetBrains Mono', 'Space Grotesk', ui-monospace, Menlo, monospace;
  color: #00ff66;
  overflow: hidden;
}
.poom-term-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #0c1710;
  background-image: var(--poom-dither-dark);
  background-position: 0 0, 2px 2px;
  background-size: 4px 4px;
  border-bottom: 2px solid #1f4f32;
}
.poom-term-dot { width: 10px; height: 10px; background: #2b6b45; display: inline-block; }
.poom-term-dot.r { background: #d85a30; }
.poom-term-dot.y { background: #e0a54a; }
.poom-term-title {
  margin-left: 6px;
  font-family: var(--poom-title);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #7dffb0;
  text-transform: uppercase;
  flex: 1;
}
.poom-term-copy {
  font-family: var(--poom-title);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #050505;
  background: #00ff66;
  border: none;
  padding: 3px 8px;
  cursor: pointer;
}
.poom-term-copy:hover { background: var(--poom-accent); color: #050505 !important; }
.poom-term-copy.ok { background: #7dffb0; }
.poom-term-screen {
  padding: 12px 14px;
  min-height: 150px;
  max-height: 340px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.poom-term-screen .l-cmd { color: #eaffef; }
.poom-term-screen .l-cmd .pmt { color: #00ff66; }
.poom-term-screen .l-out { color: #9be8bd; }
.poom-term-screen .l-err { color: #ff9a9a; }
.poom-term-screen .l-sys { color: #79c79a; opacity: 0.9; }
.poom-term-cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: #00ff66;
  vertical-align: -2px;
  animation: poom-blink 1s step-end infinite;
}
@keyframes poom-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }
.poom-term-inputrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 2px solid #1f4f32;
  background: #070f0a;
}
.poom-term-inputrow .pmt { color: #00ff66; font-size: 13px; }
.poom-term-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #00ff66;
  font-family: inherit;
  font-size: 13px;
}
.poom-term-input::placeholder { color: #3f6b52; }
.poom-term-run {
  font-family: var(--poom-title);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #050505;
  background: #00ff66;
  border: 2px solid #00ff66;
  padding: 3px 12px;
  cursor: pointer;
}
.poom-term-run:hover { background: var(--poom-accent); border-color: var(--poom-accent); color: #050505 !important; }
/* two-pane body: left command menu + right console */
.poom-term-body {
  display: flex;
  align-items: stretch;
}
.poom-term-menu {
  flex: 0 0 210px;
  width: 210px;
  background: #080d0a;
  border-right: 2px solid #1f4f32;
  padding: 8px;
  overflow-y: auto;
  max-height: 392px;
}
.poom-term-menu-label {
  font-family: var(--poom-title);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4f7f64;
  padding: 2px 6px 8px;
}
.poom-term-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: #00ff66;
  background: transparent;
  border: 1.5px solid transparent;
  padding: 6px 8px;
  margin-bottom: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color .1s ease, background .1s ease, color .1s ease;
}
.poom-term-menu-item .c-dim { color: #3f6b52; }
.poom-term-menu-item:hover {
  color: var(--poom-accent) !important;
  border-color: var(--poom-accent);
  background: hsl(21 90% 50% / 0.08);
}
.poom-term-menu-item:hover .c-dim { color: var(--poom-accent); }
.poom-term-menu-item.sel {
  color: #eaffef;
  border-color: #00ff66;
  background: hsl(140 90% 50% / 0.1);
}
.poom-term-menu-item.sel .c-dim { color: #00ff66; }
.poom-term-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.poom-term-main .poom-term-screen { border-top: none; }

@media (max-width: 760px) {
  .poom-term-body { flex-direction: column; }
  .poom-term-menu {
    flex: none;
    width: auto;
    max-height: none;
    border-right: none;
    border-bottom: 2px solid #1f4f32;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .poom-term-menu-label { width: 100%; padding-bottom: 4px; }
  .poom-term-menu-item { width: auto; margin-bottom: 0; }
}

/* ============================================================================
   POOM LABS launcher — left menu of labs + right detail panel (console style)
   ============================================================================ */
.poom-launcher {
  margin: 1.6rem 0 2rem;
  background: #060a07;
  border: 3px solid var(--poom-border);
  box-shadow: 6px 6px 0 var(--poom-border);
  font-family: 'JetBrains Mono', 'Space Grotesk', ui-monospace, Menlo, monospace;
  color: #00ff66;
  overflow: hidden;
}
.poom-launcher-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #0c1710;
  background-image: var(--poom-dither-dark);
  background-position: 0 0, 2px 2px;
  background-size: 4px 4px;
  border-bottom: 2px solid #1f4f32;
}
.poom-launcher-bar .poom-term-dot { width: 10px; height: 10px; display: inline-block; }
.poom-launcher-title {
  margin-left: 6px;
  font-family: var(--poom-title);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #7dffb0;
  text-transform: uppercase;
}
.poom-launcher-body { display: flex; align-items: stretch; min-height: 260px; }
.poom-launcher-menu {
  flex: 0 0 240px;
  width: 240px;
  background: #080d0a;
  border-right: 2px solid #1f4f32;
  padding: 8px;
  overflow-y: auto;
  max-height: 460px;
}
.poom-launcher-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  color: #00ff66;
  background: transparent;
  border: 1.5px solid transparent;
  padding: 7px 9px;
  margin-bottom: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color .1s ease, background .1s ease, color .1s ease;
}
.poom-launcher-item .c-dim { color: #3f6b52; }
.poom-launcher-item:hover {
  color: var(--poom-accent) !important;
  border-color: var(--poom-accent);
  background: hsl(21 90% 50% / 0.08);
}
.poom-launcher-item:hover .c-dim { color: var(--poom-accent); }
.poom-launcher-item.sel {
  color: #eaffef;
  border-color: #00ff66;
  background: hsl(140 90% 50% / 0.12);
}
.poom-launcher-item.sel .c-dim { color: #00ff66; }
.poom-launcher-detail {
  flex: 1 1 auto;
  min-width: 0;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.poom-launcher-cat {
  align-self: flex-start;
  font-family: var(--poom-title);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #050505;
  background: #00ff66;
  padding: 3px 9px;
}
.poom-launcher-h {
  font-family: var(--poom-title);
  font-size: 22px;
  font-weight: 700;
  color: #7dffb0;
  letter-spacing: 0.01em;
  margin: 0;
}
.poom-launcher-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #9be8bd;
  margin: 0;
  flex: 1 1 auto;
}
.poom-launcher-meta { font-size: 12px; color: #4f7f64; }
.poom-launcher-open {
  align-self: flex-start;
  font-family: var(--poom-title);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #050505 !important;
  background: var(--poom-accent);
  border: 2px solid var(--poom-accent);
  box-shadow: 4px 4px 0 #0c1710;
  padding: 8px 18px;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform .08s ease, background .12s ease;
}
.poom-launcher-open:hover { background: #ffb877; box-shadow: 4px 4px 0 #1f4f32; }
.poom-launcher-open:active { transform: translate(2px, 2px); box-shadow: none; }

@media (max-width: 760px) {
  .poom-launcher-body { flex-direction: column; }
  .poom-launcher-menu {
    flex: none;
    width: auto;
    max-height: 220px;
    border-right: none;
    border-bottom: 2px solid #1f4f32;
  }
}