/* ==========================================================================
   dainikshaka.click - compact viewport stylesheet
   File   : css/compact-7dddfb-viewport.css
   Prefix : cdddfb-
   Canvas : 320-430px phone-first, centered on wide screens
   Palette: charcoal base / lawn green + spring green accents /
            burlywood secondary / pale turquoise highlight
   Feel   : poster headings over narrow body text, near-square corners,
            image cards with a bottom name strip, question-driven rhythm,
            light press feedback and colour transitions only
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  --cdddfb-ink: #3a3a3a;
  --cdddfb-bg: #232323;
  --cdddfb-bg-deep: #1b1b1b;
  --cdddfb-panel: #2b2b2b;
  --cdddfb-panel-2: #262626;
  --cdddfb-line: #3c3c3c;
  --cdddfb-line-soft: #323232;
  --cdddfb-lime: #7cfc00;
  --cdddfb-lime-deep: #5fb800;
  --cdddfb-mint: #00ff7f;
  --cdddfb-sand: #deb887;
  --cdddfb-sand-dim: #a98d63;
  --cdddfb-ice: #afeeee;
  --cdddfb-text: #f1f1e8;
  --cdddfb-text-dim: #babaae;
  --cdddfb-text-faint: #8d8d82;
  --cdddfb-radius: 3px;
  --cdddfb-radius-lg: 4px;
  --cdddfb-topbar-h: 56px;
  --cdddfb-bnav-h: 80px;
  --cdddfb-font-head: 'Baloo Da 2', 'Hind Siliguri', 'Noto Sans Bengali', sans-serif;
  --cdddfb-font-body: 'Hind Siliguri', 'Noto Sans Bengali', 'Segoe UI', Arial, sans-serif;
}

/* ------------------------------------------------------------------ base -- */
* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

html.cdddfb-lock {
  overflow: hidden;
}

body {
  margin: 0;
  background: #151515 radial-gradient(120% 60% at 50% 0%, #1f1f1f 0%, #151515 62%);
  color: var(--cdddfb-text);
  font-family: var(--cdddfb-font-body);
  font-size: 14px;
  line-height: 1.65;
  overflow-x: hidden;
  padding-bottom: calc(var(--cdddfb-bnav-h) + env(safe-area-inset-bottom, 0px));
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--cdddfb-ice);
}

button {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--cdddfb-mint);
  outline-offset: 2px;
}

/* Phone canvas: every block keeps the same column, wide screens get rails. */
.cdddfb-topbar,
.cdddfb-menulayer,
.cdddfb-canvas,
.cdddfb-bnav {
  width: 100%;
  max-width: 430px;
  margin-left: auto;
  margin-right: auto;
}

.cdddfb-canvas {
  display: block;
  background: var(--cdddfb-bg);
  box-shadow: 0 0 44px rgba(0, 0, 0, 0.55);
}

@media (min-width: 480px) {
  .cdddfb-topbar,
  .cdddfb-canvas,
  .cdddfb-menulayer,
  .cdddfb-bnav {
    border-left: 1px solid rgba(222, 184, 135, 0.14);
    border-right: 1px solid rgba(222, 184, 135, 0.14);
  }
}

/* Progressively revealed blocks only hide when JS is proven present. */
.cdddfb-js .cdddfb-rise {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.cdddfb-js .cdddfb-rise.cdddfb-in {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------- topbar -- */
.cdddfb-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  height: var(--cdddfb-topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: rgba(27, 27, 27, 0.97);
  border-bottom: 1px solid var(--cdddfb-line);
  box-shadow: 0 1px 0 rgba(124, 252, 0, 0.16);
}

.cdddfb-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  text-decoration: none;
}

.cdddfb-brand-img {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: block;
  border: 1px solid #414141;
  border-radius: var(--cdddfb-radius);
  background: #202020;
  object-fit: cover;
}

.cdddfb-brand-name {
  font-family: var(--cdddfb-font-head);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: 0.2px;
  color: var(--cdddfb-lime);
  white-space: nowrap;
}

@media (max-width: 369px) {
  .cdddfb-brand-name {
    display: none;
  }
}

.cdddfb-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cdddfb-btn-register {
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--cdddfb-radius);
  background: linear-gradient(180deg, #8dff2a, var(--cdddfb-lime));
  color: #171707;
  font-family: var(--cdddfb-font-head);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition: filter 0.18s ease, transform 0.12s ease;
}

.cdddfb-btn-login {
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid rgba(124, 252, 0, 0.55);
  border-radius: var(--cdddfb-radius);
  background: transparent;
  color: var(--cdddfb-lime);
  font-family: var(--cdddfb-font-head);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.12s ease;
}

.cdddfb-btn-register:active,
.cdddfb-btn-login:active {
  transform: scale(0.94);
}

.cdddfb-btn-login:active {
  background-color: rgba(124, 252, 0, 0.12);
}

.cdddfb-burger {
  width: 42px;
  height: 42px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  border: 1px solid var(--cdddfb-line);
  border-radius: var(--cdddfb-radius);
  background: #242424;
  cursor: pointer;
}

.cdddfb-burger-line {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--cdddfb-ice);
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

.cdddfb-burger:active .cdddfb-burger-line {
  background: var(--cdddfb-mint);
}

/* ------------------------------------------------------------ menu layer -- */
.cdddfb-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 10, 10, 0.62);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.cdddfb-scrim.cdddfb-open {
  opacity: 1;
  pointer-events: auto;
}

.cdddfb-menulayer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  background: #212121;
  transform: translateX(103%);
  transition: transform 0.28s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cdddfb-menulayer.cdddfb-open {
  transform: none;
}

.cdddfb-menu-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #1c1c1c;
  border-bottom: 2px solid rgba(124, 252, 0, 0.35);
}

.cdddfb-menu-head img {
  width: 30px;
  height: 30px;
  border-radius: var(--cdddfb-radius);
  border: 1px solid #3c3c3c;
  display: block;
}

.cdddfb-menu-head-title {
  font-family: var(--cdddfb-font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--cdddfb-lime);
}

.cdddfb-menu-close {
  margin-left: auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--cdddfb-line);
  border-radius: var(--cdddfb-radius);
  background: #262626;
  color: var(--cdddfb-text-dim);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.cdddfb-menu-close:active {
  color: var(--cdddfb-mint);
}

.cdddfb-menu-groups {
  padding: 4px 0 18px;
}

.cdddfb-menu-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 16px 14px 6px;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--cdddfb-sand);
}

.cdddfb-menu-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--cdddfb-sand);
}

.cdddfb-mrow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  color: var(--cdddfb-text);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid #2b2b2b;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cdddfb-mrow:active {
  background: #2c2c2c;
  color: var(--cdddfb-mint);
}

.cdddfb-mnum {
  font-family: var(--cdddfb-font-head);
  font-size: 11px;
  color: #6d6f66;
  width: 18px;
  flex: 0 0 18px;
}

.cdddfb-menu-cta {
  margin: 18px 14px 6px;
  display: grid;
  gap: 8px;
}

.cdddfb-menu-cta .cdddfb-btn-register,
.cdddfb-menu-cta .cdddfb-btn-login {
  width: 100%;
}

/* ------------------------------------------------------------------ hero -- */
.cdddfb-hero {
  position: relative;
  margin: 12px 12px 0;
  border: 1px solid var(--cdddfb-line);
  border-radius: var(--cdddfb-radius-lg);
  overflow: hidden;
  background: #1e1e1e;
}

.cdddfb-hero-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cdddfb-hero-track::-webkit-scrollbar {
  display: none;
}

.cdddfb-hero-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: block;
  text-decoration: none;
}

.cdddfb-hero-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 2.42 / 1;
  object-fit: cover;
  background: #1a1a1a;
}

.cdddfb-hero-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 12px 12px;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0), rgba(14, 14, 14, 0.92));
}

.cdddfb-hero-cap-title {
  display: block;
  font-family: var(--cdddfb-font-head);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--cdddfb-lime);
}

.cdddfb-hero-cap-sub {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--cdddfb-text-dim);
}

.cdddfb-dots {
  position: absolute;
  right: 10px;
  bottom: 9px;
  display: flex;
  gap: 6px;
}

.cdddfb-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(175, 238, 238, 0.75);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.cdddfb-dot.cdddfb-on {
  background: var(--cdddfb-ice);
  transform: scale(1.12);
}

/* ----------------------------------------------------------------- intro -- */
.cdddfb-main {
  display: block;
  padding: calc(var(--cdddfb-topbar-h) + 14px) 0 6px;
}

.cdddfb-sec {
  margin: 20px 12px 0;
}

.cdddfb-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--cdddfb-sand);
  margin-bottom: 6px;
}

.cdddfb-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--cdddfb-sand);
  flex: 0 0 7px;
}

.cdddfb-h1 {
  margin: 0 0 10px;
  font-family: var(--cdddfb-font-head);
  font-weight: 800;
  font-size: clamp(23px, 6.8vw, 29px);
  line-height: 1.28;
  letter-spacing: 0.2px;
  color: var(--cdddfb-text);
  padding-bottom: 10px;
  border-bottom: 3px solid rgba(124, 252, 0, 0.55);
}

.cdddfb-lead {
  margin: 0;
  font-size: 13.5px;
  color: var(--cdddfb-text-dim);
}

.cdddfb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.cdddfb-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid #3b3b3b;
  border-radius: 2px;
  background: var(--cdddfb-panel-2);
  font-size: 11.5px;
  color: var(--cdddfb-ice);
}

.cdddfb-chip::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--cdddfb-mint);
}

.cdddfb-cta-wide {
  display: block;
  width: 100%;
  margin-top: 14px;
  min-height: 48px;
  border: 0;
  border-radius: var(--cdddfb-radius);
  background: linear-gradient(180deg, #8dff2a, var(--cdddfb-lime));
  box-shadow: 0 3px 0 var(--cdddfb-lime-deep);
  color: #171707;
  font-family: var(--cdddfb-font-head);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.cdddfb-cta-wide:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--cdddfb-lime-deep);
}

.cdddfb-h2 {
  margin: 0 0 10px;
  font-family: var(--cdddfb-font-head);
  font-weight: 700;
  font-size: 18.5px;
  line-height: 1.4;
  color: var(--cdddfb-text);
}

.cdddfb-h2::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 6px;
  background: var(--cdddfb-lime);
}

.cdddfb-p {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--cdddfb-text-dim);
}

.cdddfb-p strong,
.cdddfb-lead strong {
  color: var(--cdddfb-sand);
  font-weight: 600;
}

.cdddfb-p a,
.cdddfb-lead a {
  color: var(--cdddfb-ice);
  text-decoration: underline;
  text-decoration-color: rgba(175, 238, 238, 0.5);
  text-underline-offset: 3px;
}

.cdddfb-p a:active,
.cdddfb-lead a:active {
  color: var(--cdddfb-mint);
}

/* ----------------------------------------------------------- game zones -- */
.cdddfb-gsec {
  margin: 22px 12px 0;
}

.cdddfb-gsec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 0 8px;
  border-bottom: 2px solid var(--cdddfb-line);
}

.cdddfb-gsec-head::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--cdddfb-lime);
  flex: 0 0 8px;
}

.cdddfb-gsec-title {
  margin: 0;
  font-family: var(--cdddfb-font-head);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--cdddfb-ice);
}

.cdddfb-gsec-count {
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid #4a4436;
  border-radius: 2px;
  background: var(--cdddfb-panel-2);
  font-size: 11px;
  color: var(--cdddfb-sand);
  white-space: nowrap;
}

.cdddfb-gsec-note {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--cdddfb-text-dim);
}

.cdddfb-ggrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 6px;
}

@media (min-width: 390px) {
  .cdddfb-ggrid {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px 8px;
  }
}

.cdddfb-gcard {
  position: relative;
  display: block;
  background: var(--cdddfb-panel);
  border: 1px solid var(--cdddfb-ink);
  border-radius: var(--cdddfb-radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.14s ease, border-color 0.2s ease;
}

.cdddfb-gcard:active {
  transform: scale(0.94);
  border-color: var(--cdddfb-mint);
}

.cdddfb-gcard-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #1f1f1f;
}

.cdddfb-gname {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 4px 4px;
  border-top: 1px solid var(--cdddfb-ink);
  background: #252525;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  color: var(--cdddfb-sand);
  overflow: hidden;
}

.cdddfb-tag {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 1px 5px;
  border-radius: 2px;
  background: rgba(124, 252, 0, 0.9);
  color: #171707;
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.2px;
}

/* ------------------------------------------------------- payment module -- */
.cdddfb-paylist {
  margin: 12px 0 0;
  border-top: 1px solid var(--cdddfb-line-soft);
}

.cdddfb-payrow {
  display: flex;
  gap: 10px;
  padding: 10px 8px 10px 11px;
  border-bottom: 1px solid var(--cdddfb-line-soft);
  border-left: 3px solid var(--cdddfb-sand);
  background: var(--cdddfb-panel-2);
}

.cdddfb-payrow + .cdddfb-payrow {
  margin-top: 6px;
}

.cdddfb-payrow-key {
  flex: 0 0 76px;
  font-family: var(--cdddfb-font-head);
  font-weight: 700;
  font-size: 13px;
  color: var(--cdddfb-sand);
  line-height: 1.35;
}

.cdddfb-payrow-txt {
  margin: 0;
  font-size: 12.5px;
  color: var(--cdddfb-text-dim);
}

/* ------------------------------------------------------- features module -- */
.cdddfb-ftgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.cdddfb-ftile {
  padding: 10px 9px;
  background: var(--cdddfb-panel-2);
  border: 1px solid #343434;
  border-top: 2px solid rgba(124, 252, 0, 0.65);
  border-radius: var(--cdddfb-radius);
}

.cdddfb-ftile h3 {
  margin: 0 0 4px;
  font-family: var(--cdddfb-font-head);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  color: var(--cdddfb-ice);
}

.cdddfb-ftile p {
  margin: 0;
  font-size: 11.8px;
  line-height: 1.55;
  color: var(--cdddfb-text-dim);
}

/* ---------------------------------------------------- requirements steps -- */
.cdddfb-steps {
  margin: 12px 0 0;
  counter-reset: cdddfb-step;
}

.cdddfb-step {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 9px 4px;
  border-bottom: 1px dashed #3a3a3a;
  counter-increment: cdddfb-step;
}

.cdddfb-step-num {
  flex: 0 0 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(124, 252, 0, 0.75);
  border-radius: 2px;
  color: var(--cdddfb-lime);
  font-family: var(--cdddfb-font-head);
  font-size: 13px;
}

.cdddfb-step-num::before {
  content: counter(cdddfb-step, decimal-leading-zero);
}

.cdddfb-step-body strong {
  display: block;
  font-family: var(--cdddfb-font-head);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--cdddfb-text);
}

.cdddfb-step-body span {
  font-size: 12.3px;
  color: var(--cdddfb-text-dim);
}

/* ---------------------------------------------------- selection criteria -- */
.cdddfb-crit {
  margin: 10px 0 0;
  background: #242424;
  border: 1px solid #343434;
  border-radius: var(--cdddfb-radius);
  overflow: hidden;
}

.cdddfb-crit h3 {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0;
  padding: 10px 11px 8px;
  border-bottom: 1px solid #303030;
  font-family: var(--cdddfb-font-head);
  font-weight: 700;
  font-size: 13.8px;
  line-height: 1.4;
  color: var(--cdddfb-ice);
}

.cdddfb-crit h3::before {
  content: "?";
  flex: 0 0 auto;
  color: var(--cdddfb-mint);
  font-family: var(--cdddfb-font-head);
}

.cdddfb-crit p {
  margin: 0;
  padding: 9px 11px 11px;
  font-size: 12.5px;
  color: var(--cdddfb-text-dim);
}

/* ------------------------------------------------------------- qa blocks -- */
.cdddfb-qa {
  margin: 10px 0 0;
  background: #242424;
  border: 1px solid #343434;
  border-left: 3px solid var(--cdddfb-mint);
  border-radius: var(--cdddfb-radius);
}

.cdddfb-qa summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 9px 11px;
  cursor: pointer;
  list-style: none;
  font-family: var(--cdddfb-font-head);
  font-weight: 600;
  font-size: 13.4px;
  line-height: 1.4;
  color: var(--cdddfb-text);
}

.cdddfb-qa summary::-webkit-details-marker {
  display: none;
}

.cdddfb-qa summary::after {
  content: "+";
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--cdddfb-mint);
  font-family: var(--cdddfb-font-head);
  font-size: 16px;
  transition: transform 0.2s ease;
}

.cdddfb-qa[open] summary::after {
  transform: rotate(45deg);
}

.cdddfb-qa p {
  margin: 0;
  padding: 0 11px 11px;
  font-size: 12.5px;
  color: var(--cdddfb-text-dim);
}

/* -------------------------------------------------------- extended foot -- */
.cdddfb-ext {
  margin: 26px 12px 0;
  padding: 14px 12px 12px;
  background: #202020;
  border: 1px solid #343434;
  border-top: 3px solid var(--cdddfb-sand);
  border-radius: var(--cdddfb-radius);
}

.cdddfb-ext-brand {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--cdddfb-text-dim);
}

.cdddfb-promogrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cdddfb-promo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--cdddfb-radius);
  background: linear-gradient(180deg, #8dff2a, var(--cdddfb-lime));
  color: #171707;
  font-family: var(--cdddfb-font-head);
  font-weight: 700;
  font-size: 12.8px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.15s ease;
}

.cdddfb-promo-btn.cdddfb-alt {
  background: #2b2b2b;
  border: 1px solid #574f39;
  color: var(--cdddfb-sand);
}

.cdddfb-promo-btn:active {
  transform: scale(0.96);
}

.cdddfb-promo-btn.cdddfb-alt:active {
  background: #32302a;
}

.cdddfb-promo-wide {
  grid-column: 1 / -1;
}

.cdddfb-dirgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
  margin-top: 4px;
}

.cdddfb-dirlink {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 2px;
  border-bottom: 1px solid #2c2c2c;
  color: var(--cdddfb-ice);
  text-decoration: none;
  font-size: 12.8px;
}

.cdddfb-dirlink::before {
  content: "";
  width: 5px;
  height: 5px;
  background: rgba(175, 238, 238, 0.55);
  flex: 0 0 5px;
}

.cdddfb-dirlink:active {
  color: var(--cdddfb-mint);
}

.cdddfb-disclaim {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed #3f3f3f;
  font-size: 11px;
  line-height: 1.65;
  color: var(--cdddfb-text-faint);
}

/* ----------------------------------------------------------- common foot -- */
.cdddfb-foot {
  margin: 20px 12px 8px;
  padding: 12px 0 2px;
  border-top: 1px solid #303030;
  text-align: center;
  font-size: 11.8px;
  color: var(--cdddfb-text-faint);
}

.cdddfb-foot p {
  margin: 0;
}

/* ------------------------------------------------------------ bottom nav -- */
.cdddfb-bnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 75;
  height: var(--cdddfb-bnav-h);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: linear-gradient(180deg, #262626 0%, #1d1d1d 78%, #191919 100%);
  border-top: 2px solid rgba(124, 252, 0, 0.7);
  box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.45);
}

.cdddfb-bnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  min-width: 44px;
  padding: 9px 2px 7px;
  border: 0;
  background: none;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.cdddfb-bnav-item:active {
  transform: scale(0.92);
}

.cdddfb-bnav-ico {
  width: 24px;
  height: 24px;
  color: #93958b;
  transition: color 0.2s ease;
}

.cdddfb-bnav-label {
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.2px;
  color: #82847b;
  opacity: 0.7;
  transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cdddfb-bnav-item:active .cdddfb-bnav-label {
  opacity: 1;
  transform: translateY(-1px);
}

.cdddfb-bnav-item.cdddfb-live .cdddfb-bnav-ico {
  color: var(--cdddfb-mint);
}

.cdddfb-bnav-item.cdddfb-live .cdddfb-bnav-label {
  color: var(--cdddfb-lime);
  opacity: 1;
  font-weight: 700;
  transform: translateY(-1px);
}

.cdddfb-bnav-item[aria-current="page"] .cdddfb-bnav-ico {
  color: var(--cdddfb-mint);
}

/* ---------------------------------------------------------- motion guard -- */
/* --------------------------------------------------------- help pages -- */
.cdddfb-help-hero,
.cdddfb-tip-mast {
  margin: 18px 12px 0;
  padding: 15px 13px 16px;
  background: linear-gradient(135deg, #292d26, #202020 62%);
  border: 1px solid #4a4a3b;
  border-left: 4px solid var(--cdddfb-lime);
  border-radius: var(--cdddfb-radius);
}

.cdddfb-help-intro,
.cdddfb-tip-lead {
  margin: 0;
  font-size: 13px;
  color: var(--cdddfb-text-dim);
}

.cdddfb-help-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 13px;
}

.cdddfb-help-metrics span,
.cdddfb-tip-index {
  font-size: 10.5px;
  color: var(--cdddfb-ice);
}

.cdddfb-help-metrics span {
  padding: 7px 5px;
  border-top: 1px solid var(--cdddfb-sand-dim);
  background: rgba(0, 0, 0, 0.17);
  text-align: center;
}

.cdddfb-help-metrics b {
  display: block;
  margin-bottom: 2px;
  color: var(--cdddfb-lime);
  font-family: var(--cdddfb-font-head);
  font-size: 14px;
}

.cdddfb-help-actions {
  display: grid;
  gap: 8px;
  margin-top: 13px;
}

.cdddfb-help-outline,
.cdddfb-help-action,
.cdddfb-device-cards button {
  min-height: 44px;
  border: 1px solid rgba(175, 238, 238, 0.55);
  border-radius: var(--cdddfb-radius);
  background: transparent;
  color: var(--cdddfb-ice);
  font-family: var(--cdddfb-font-head);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.cdddfb-help-outline:active,
.cdddfb-help-action:active,
.cdddfb-device-cards button:active {
  transform: translateY(1px);
  background: rgba(0, 255, 127, 0.1);
}

.cdddfb-help-action {
  display: block;
  width: 100%;
  margin-top: 12px;
  background: rgba(0, 255, 127, 0.07);
}

.cdddfb-help-action-dark {
  border-color: rgba(222, 184, 135, 0.55);
  color: var(--cdddfb-sand);
  background: #242424;
}

.cdddfb-feature-board {
  margin: 16px 12px 0;
  border-top: 3px solid var(--cdddfb-mint);
  background: #202020;
}

.cdddfb-board-label,
.cdddfb-tip-index {
  padding: 8px 10px 5px;
  color: var(--cdddfb-sand);
  font-family: var(--cdddfb-font-head);
  font-weight: 700;
  letter-spacing: 0.4px;
}

.cdddfb-board-row {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 8px;
  padding: 9px 10px;
  border-top: 1px solid #343434;
}

.cdddfb-board-row strong {
  color: var(--cdddfb-lime);
  font-family: var(--cdddfb-font-head);
  font-size: 12px;
}

.cdddfb-board-row span,
.cdddfb-verify-cell p,
.cdddfb-branch p,
.cdddfb-boundary p,
.cdddfb-relation-node span {
  color: var(--cdddfb-text-dim);
  font-size: 12.5px;
}

.cdddfb-verify-grid {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.cdddfb-verify-cell {
  display: flex;
  gap: 9px;
  padding: 9px;
  border-left: 3px solid var(--cdddfb-sand);
  background: #252525;
}

.cdddfb-verify-no,
.cdddfb-branch-mark {
  flex: 0 0 25px;
  color: var(--cdddfb-lime);
  font-family: var(--cdddfb-font-head);
  font-weight: 800;
  font-size: 13px;
}

.cdddfb-verify-cell h3,
.cdddfb-branch h3,
.cdddfb-device-cards h3,
.cdddfb-sheet-line h3 {
  margin: 0 0 3px;
  color: var(--cdddfb-ice);
  font-family: var(--cdddfb-font-head);
  font-size: 14px;
}

.cdddfb-verify-cell p,
.cdddfb-branch p {
  margin: 0;
}

.cdddfb-branch-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.cdddfb-branch {
  display: flex;
  gap: 8px;
  padding: 10px;
  border: 1px dashed #4a4436;
  background: #242424;
}

.cdddfb-branch-mark {
  color: var(--cdddfb-sand);
}

.cdddfb-boundary {
  display: grid;
  gap: 1px;
  margin-top: 12px;
  border: 1px solid #3b3b3b;
}

.cdddfb-boundary > div {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 8px;
  padding: 9px;
  border-bottom: 1px solid #353535;
  background: #242424;
}

.cdddfb-boundary > div:last-child { border-bottom: 0; }
.cdddfb-boundary-key { color: var(--cdddfb-mint); font-family: var(--cdddfb-font-head); font-weight: 700; }
.cdddfb-boundary p { margin: 0; }

.cdddfb-checklist {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.cdddfb-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 44px;
  padding: 9px 8px;
  border-bottom: 1px solid #363636;
  color: var(--cdddfb-text-dim);
  font-size: 12.5px;
}

.cdddfb-checklist input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  accent-color: var(--cdddfb-mint);
}

.cdddfb-relation-map {
  display: grid;
  grid-template-columns: 1fr 16px 1fr 16px 1fr;
  align-items: center;
  gap: 3px;
  margin: 12px 0;
}

.cdddfb-relation-map i { color: var(--cdddfb-mint); text-align: center; font-style: normal; }
.cdddfb-relation-node { min-height: 68px; padding: 8px 4px; border-top: 2px solid var(--cdddfb-lime); background: #252525; text-align: center; }
.cdddfb-relation-node strong { display: block; color: var(--cdddfb-sand); font-family: var(--cdddfb-font-head); }
.cdddfb-relation-node span { font-size: 10.5px; }
.cdddfb-help-links,
.cdddfb-help-final { margin: 24px 12px 0; }
.cdddfb-help-links { padding: 12px; border: 1px solid #3b3b3b; background: #202020; }
.cdddfb-help-links .cdddfb-p { margin: 0; }
.cdddfb-help-final { padding-bottom: 10px; }

.cdddfb-tip-index { padding: 0 0 5px; font-size: 11px; }
.cdddfb-tip-command {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding: 9px 10px;
  border-left: 3px solid var(--cdddfb-sand);
  background: #202020;
}
.cdddfb-tip-command span { color: var(--cdddfb-sand); font-size: 10.5px; }
.cdddfb-tip-command strong { color: var(--cdddfb-ice); font-family: var(--cdddfb-font-head); font-size: 13px; line-height: 1.35; }
.cdddfb-device-table { margin: 16px 12px 0; border: 1px solid #3c3c3c; }
.cdddfb-table-head,
.cdddfb-table-row { display: grid; grid-template-columns: 42% 58%; }
.cdddfb-table-head { padding: 8px; color: var(--cdddfb-lime); font-family: var(--cdddfb-font-head); font-size: 11px; background: #1c1c1c; }
.cdddfb-table-row { border-top: 1px solid #373737; }
.cdddfb-table-row > * { margin: 0; padding: 8px; font-size: 11.5px; }
.cdddfb-table-row b { color: var(--cdddfb-sand); font-weight: 600; }
.cdddfb-table-row span { color: var(--cdddfb-text-dim); }
.cdddfb-device-cards { display: grid; gap: 8px; margin-top: 12px; }
.cdddfb-device-cards article { padding: 11px; border-top: 3px solid var(--cdddfb-mint); background: #242424; }
.cdddfb-device-icon { color: var(--cdddfb-lime); font-family: var(--cdddfb-font-head); font-size: 11px; letter-spacing: 0.6px; }
.cdddfb-device-cards h3 { margin-top: 3px; }
.cdddfb-device-cards p { margin: 0 0 8px; color: var(--cdddfb-text-dim); font-size: 12.5px; }
.cdddfb-device-cards button { width: 100%; min-height: 42px; font-size: 12px; }
.cdddfb-support-sheet { margin-top: 12px; border-left: 2px solid var(--cdddfb-mint); }
.cdddfb-sheet-line { display: flex; gap: 10px; padding: 9px 8px; border-bottom: 1px solid #353535; }
.cdddfb-sheet-line > span { flex: 0 0 24px; color: var(--cdddfb-lime); font-family: var(--cdddfb-font-head); font-weight: 800; }
.cdddfb-sheet-line p { margin: 0; color: var(--cdddfb-text-dim); font-size: 12.5px; }
.cdddfb-safety-ribbon { display: grid; gap: 6px; margin-top: 12px; }
.cdddfb-safety-ribbon > div { display: grid; grid-template-columns: 82px 1fr; gap: 8px; padding: 9px; background: #252525; border-right: 3px solid var(--cdddfb-sand); }
.cdddfb-safety-ribbon b { color: var(--cdddfb-sand); font-family: var(--cdddfb-font-head); font-size: 12px; }
.cdddfb-safety-ribbon span { color: var(--cdddfb-text-dim); font-size: 12px; }
.cdddfb-term-split { display: grid; gap: 7px; margin-top: 12px; }
.cdddfb-term-split article { padding: 10px; border: 1px solid #3b3b3b; background: #242424; }
.cdddfb-term-split h3 { margin: 0 0 2px; color: var(--cdddfb-lime); font-family: var(--cdddfb-font-head); }
.cdddfb-term-split p { margin: 0; color: var(--cdddfb-text-dim); font-size: 12.5px; }
.cdddfb-route { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 12px; }
.cdddfb-route > div { min-height: 100px; padding: 7px 4px; border-bottom: 3px solid var(--cdddfb-lime); background: #242424; text-align: center; }
.cdddfb-route span { display: block; color: var(--cdddfb-mint); font-family: var(--cdddfb-font-head); font-size: 13px; }
.cdddfb-route b { display: block; margin-top: 3px; color: var(--cdddfb-sand); font-size: 12px; }
.cdddfb-route small { display: block; margin-top: 5px; color: var(--cdddfb-text-dim); font-size: 10px; line-height: 1.4; }
.cdddfb-tip-qa { margin: 24px 12px 0; }
.cdddfb-tip-qa details { margin-top: 7px; border-left: 3px solid var(--cdddfb-mint); background: #242424; }
.cdddfb-tip-qa summary { min-height: 44px; padding: 9px 10px; color: var(--cdddfb-text); font-family: var(--cdddfb-font-head); font-size: 13px; cursor: pointer; }
.cdddfb-tip-qa details p { margin: 0; padding: 0 10px 10px; color: var(--cdddfb-text-dim); font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .cdddfb-js .cdddfb-rise {
    opacity: 1;
    transform: none;
  }
}