/* Page-specific Unit 2 widget CSS (was inline in each page). Global classes. */

/* ===== widgets from 2-1-number-systems.html ===== */
.qz-state-btns { display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.6rem; }
.qz-state-btn { padding:0.45rem 0.8rem; border-radius:8px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.8); font:inherit; font-size:0.85rem; cursor:pointer; transition:all 0.12s; }
.qz-state-btn:hover { background:rgba(255,255,255,0.1); }
.qz-state-btn.on { border-color:#00fff5; background:rgba(0,255,245,0.1); }
.qz-state-out { margin-top:0.75rem; font-size:0.97rem; font-weight:700; min-height:1.4rem; }
.qz-state-out.fit  { color:#00ff64; }
.qz-state-out.nofit { color:#ff006e; }
.qz-pv-row { display:flex; gap:6px; margin:0.5rem 0; }
.qz-pv-col { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; }
.qz-pv-lbl { font-size:0.65rem; color:rgba(255,255,255,0.3); font-weight:700; font-family:'Source Code Pro',monospace; }
.qz-pv-box { width:100%; aspect-ratio:1; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:clamp(1rem,3vw,1.6rem); font-weight:900; font-family:'Source Code Pro',monospace; }
.qz-pv-box.lit { background:rgba(0,255,245,0.12); border:2px solid #00fff5; color:#00fff5; }
.qz-pv-box.dim { background:rgba(255,255,255,0.03); border:2px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.18); }
.qz-pv-val { font-size:0.62rem; color:rgba(255,255,255,0.28); font-family:'Source Code Pro',monospace; }
.qz-bw-tile { width:100%; aspect-ratio:1; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; transition:all 0.12s; user-select:none; cursor:pointer; }
.qz-bw-tile.off { background:rgba(255,255,255,0.04); border:2px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.18); }
.qz-bw-tile.on  { background:rgba(0,255,245,0.13); border:2px solid #00fff5; color:#00fff5; }
.qz-bw-tile:hover { transform:scale(1.06); }
.qz-bw-digit { font-size:clamp(1rem,3.5vw,1.8rem); font-weight:900; font-family:'Source Code Pro',monospace; }
.qz-bw-pow   { font-size:clamp(0.5rem,1vw,0.68rem); font-weight:700; color:#ffcc00; }
.qz-dtable { width:100%; border-collapse:collapse; font-size:0.87rem; margin-bottom:0.75rem; }
.qz-dtable th { text-align:left; padding:0.45rem 0.65rem; color:rgba(255,255,255,0.35); font-size:0.65rem; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,0.07); }
.qz-dtable td { padding:0.45rem 0.65rem; border-bottom:1px solid rgba(255,255,255,0.04); color:rgba(255,255,255,0.78); font-family:'Source Code Pro',monospace; }
.qz-dtable td:first-child { color:#ffcc00; font-weight:700; }
.qz-dtable td:nth-child(3) { color:#00fff5; }
.qz-dtable tr:last-child td { border-bottom:none; }
.modern-container-v3 {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #121212; /* Or whatever your dark mode background is */
  color: #ffffff;
}
.q-text, .f-text {
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
}

/* ===== widgets from 2-2-analog-digital.html ===== */
.sampling-hero {
  margin-bottom: 2rem;
}
.sampling-hero-header {
  background: #FF007F;
  color: #fff;
  padding: 1rem 1.4rem;
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.5px;
}
.sampling-hero-header svg {
  flex-shrink: 0;
}
.sampling-hero-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FF007F;
  display: block;
  margin-bottom: 0.1rem;
}
.sampling-hero-body {
  background: rgba(0,255,245,0.04);
  border: 1px solid rgba(0,255,245,0.18);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 1rem 1.4rem 0.9rem;
}
.sampling-hero-desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.55;
  margin-bottom: 0.85rem;
}
.sampling-hero-desc strong { color: #00fff5; }
.sampling-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.9rem;
}
.sampling-hero-pill {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.sampling-hero-pill.cyan { background: rgba(0,255,245,0.12); color: #00fff5; border: 1px solid rgba(0,255,245,0.3); }
.sampling-hero-pill.gold { background: rgba(255,204,0,0.12); color: #ffcc00; border: 1px solid rgba(255,204,0,0.3); }
.sampling-hero-pill.pink { background: rgba(255,0,110,0.1); color: #ff006e; border: 1px solid rgba(255,0,110,0.25); }
.qz-wrap-hero { margin-bottom: 1.5rem; }
.sampling-hero-iframe {
  width: 100%;
  height: 500px;
  border: 1px solid rgba(176,38,255,0.18);
  border-radius: 16px;
  background: rgba(176,38,255,0.03);
  display: block;
  margin: 1.5rem 0 2rem;
}
@media (max-width: 600px) {
.sampling-hero-iframe { height: 380px; }
}

/* ===== widgets from 2-3-compression.html ===== */
.qz-bpe-box { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:1.1rem 1.2rem; font-family:'Source Code Pro',monospace; font-size:1.05rem; color:rgba(255,255,255,0.85); line-height:2.2; }
.qz-bpe-box .pair { color:#ffcc00; font-weight:800; }
.qz-bpe-box .sym  { color:#00fff5; font-weight:800; }

/* ===== widgets from 2-5-data-from-info.html ===== */
.qz-sq-code { font-family:'Source Code Pro',monospace; font-size:0.88rem; line-height:1.8; padding:0.85rem 1rem; background:rgba(0,0,0,0.35); border-radius:9px; border:1px solid rgba(255,255,255,0.07); margin-bottom:0.75rem; color:rgba(255,255,255,0.82); display:flex; flex-direction:column; gap:0.1rem; }
.qz-qcode { font-family:'Source Code Pro',monospace; font-size:0.85rem; line-height:1.8; padding:0.75rem 0.9rem; background:rgba(0,0,0,0.35); border-radius:9px; border:1px solid rgba(255,255,255,0.07); margin-bottom:0.65rem; color:rgba(255,255,255,0.82); display:flex; flex-direction:column; gap:0.1rem; }
kw { color:#c87aff; font-weight:800; }
op { color:#ffcc00; }

/* ═══════════════════════════════════════════════════════════════
   SITE-STANDARD DATA TABLE  (change-order-unit2 §4)
   .cbt = framed table wrapper. Thin pink border by owner decree —
   no reason whatsoever, and none needed.
   Variants: .cbt.sprd = spreadsheet look (lettered column header row
   via th.cl + numbered row labels via td.rn — CB stems say "column C");
   .cbt.rec = record/database look (field-name headers only).
   Use everywhere a data table appears. No more ad-hoc inline tables.
   ═══════════════════════════════════════════════════════════════ */
.cbt{border:1px solid var(--c-pink);border-radius:10px;overflow-x:auto;margin:0.9rem 0;background:rgba(255,255,255,0.02);}
.cbt table{width:100%;border-collapse:collapse;font-size:0.88rem;min-width:380px;}
.cbt th{font-family:'Outfit',sans-serif;font-weight:800;font-size:0.76rem;letter-spacing:0.4px;color:#fff;background:rgba(255,255,255,0.06);padding:0.5rem 0.7rem;text-align:left;border-bottom:1px solid rgba(255,255,255,0.14);}
.cbt td{padding:0.45rem 0.7rem;color:rgba(255,255,255,0.85);border-bottom:1px solid rgba(255,255,255,0.07);line-height:1.45;}
.cbt tr:last-child td{border-bottom:none;}
.cbt td+td,.cbt th+th{border-left:1px solid rgba(255,255,255,0.07);}
.cbt td.num{font-family:'Source Code Pro',monospace;text-align:right;}
/* spreadsheet variant extras */
.cbt.sprd th.cl{text-align:center;color:var(--c-pink);background:rgba(255,45,155,0.07);font-family:'Source Code Pro',monospace;font-size:0.7rem;letter-spacing:1px;}
.cbt.sprd td.rn{text-align:center;color:rgba(255,255,255,0.45);font-family:'Source Code Pro',monospace;font-size:0.7rem;background:rgba(255,255,255,0.03);width:2.2rem;}