/* ==========================================================================
   222betapp.cyou - surface-responsive stylesheet
   Prefix     : ui83672-
   Canvas     : mobile-first, stable 320-430px layout, centered on wide view
   Palette    : #2E4057 deep ground / #F8F8FF ink / #26A69A teal accent
                #A9A9A9 dim ink / #5D5D5D hairline
   Direction  : technical headings + open body text, mixed radii with compact
                layers, big/small game cards mixed, scenario-branch rhythm,
                light press + color transitions, compact dual CTA pairs.
   Nav system : asymmetric brand head / right side drawer / compact icon rack
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --ui83672-ground: #2E4057;
  --ui83672-ground-deep: #24354a;
  --ui83672-ground-panel: #2a3d54;
  --ui83672-page-outer: #1b2838;
  --ui83672-ink: #F8F8FF;
  --ui83672-ink-dim: #A9A9A9;
  --ui83672-ink-faint: #c9cdd4;
  --ui83672-line: #5D5D5D;
  --ui83672-hair: #46586f;
  --ui83672-teal: #26A69A;
  --ui83672-teal-bright: #57cbbf;
  --ui83672-teal-soft: rgba(38, 166, 154, 0.16);
  --ui83672-amber: #d9a441;
  --ui83672-font-body: "Noto Sans Bengali", "Nirmala UI", "SolaimanLipi",
    "Segoe UI", system-ui, -apple-system, sans-serif;
  --ui83672-r-lg: 18px;
  --ui83672-r-md: 12px;
  --ui83672-r-sm: 8px;
  --ui83672-r-pill: 999px;
  --ui83672-top-h: 60px;
  --ui83672-rack-h: 62px;
  --ui83672-tap: 44px;
}

/* ---------- reset / base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ui83672-page-outer);
  color: var(--ui83672-ink);
  font-family: var(--ui83672-font-body);
  font-size: 14px;
  line-height: 1.62;
  overflow-x: hidden;
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
a { color: var(--ui83672-teal-bright); text-decoration: none; }
a:active { text-decoration: underline; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
body.ui83672-no-scroll { overflow: hidden; }

/* focus ring for keyboard users (scoped to site shell) */
.ui83672-shell :is(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--ui83672-teal-bright);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- phone canvas ---------- */
.ui83672-shell {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
  min-height: 100vh;
  background: var(--ui83672-ground);
  background-image:
    radial-gradient(120% 52% at 12% -4%, rgba(38, 166, 154, 0.14), transparent 60%),
    linear-gradient(180deg, #2f425a 0%, var(--ui83672-ground) 34%, #273850 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
}
@media (min-width: 431px) {
  .ui83672-shell {
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
    border-inline: 1px solid var(--ui83672-hair);
  }
}

/* ---------- fixed top bar : asymmetric brand head ---------- */
.ui83672-topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 60;
  background: rgba(33, 48, 66, 0.97);
  border-bottom: 1px solid var(--ui83672-hair);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.ui83672-topbar-in {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: var(--ui83672-top-h);
  padding: 9px 10px;
}
.ui83672-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  padding-left: 9px;
  position: relative;
  min-width: 0;
}
/* slanted accent rib gives the head its asymmetric cut */
.ui83672-brand::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 5px;
  border-radius: 4px;
  transform: skewY(-14deg);
  background: linear-gradient(180deg, var(--ui83672-teal-bright), var(--ui83672-teal));
}
.ui83672-brand-img {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  object-fit: cover;
  flex: 0 0 auto;
}
.ui83672-brand-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.045em;
  color: var(--ui83672-ink);
  line-height: 1.15;
  white-space: nowrap;
  font-feature-settings: "tnum";
}
.ui83672-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* compact dual CTA pair */
.ui83672-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: var(--ui83672-r-pill);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, background-color 0.2s ease,
    border-color 0.2s ease, color 0.2s ease;
}
.ui83672-btn:active { transform: translateY(-2px) scale(0.985); }
.ui83672-btn--solid {
  background: linear-gradient(135deg, var(--ui83672-teal-bright), var(--ui83672-teal));
  color: #0c2b30;
  box-shadow: 0 4px 14px rgba(38, 166, 154, 0.35);
}
.ui83672-btn--ghost {
  border: 1.4px solid var(--ui83672-teal);
  color: var(--ui83672-teal-bright);
  background: rgba(38, 166, 154, 0.07);
}
.ui83672-menu-btn {
  width: var(--ui83672-tap);
  height: var(--ui83672-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui83672-r-md);
  border: 1px solid var(--ui83672-hair);
  background: var(--ui83672-ground-panel);
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.ui83672-menu-btn:active { transform: translateY(-2px); border-color: var(--ui83672-teal); }
.ui83672-menu-btn svg { display: block; }
.ui83672-menu-btn .ui83672-ic-tone { fill: var(--ui83672-teal); }

/* ---------- side drawer ---------- */
.ui83672-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(8, 15, 24, 0.62);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.ui83672-scrim[data-open="1"] { opacity: 1; pointer-events: auto; }
.ui83672-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(84vw, 316px);
  z-index: 80;
  background: linear-gradient(180deg, #22334a, #1d2c40);
  border-left: 1px solid var(--ui83672-hair);
  transform: translateX(103%);
  transition: transform 0.27s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 13px calc(var(--ui83672-rack-h) + 26px);
}
.ui83672-drawer[data-open="1"] { transform: none; }
.ui83672-drawer-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--ui83672-hair);
}
.ui83672-drawer-head img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  object-fit: cover;
}
.ui83672-drawer-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.03em;
  margin-right: auto;
}
.ui83672-drawer-close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui83672-r-sm);
  border: 1px solid var(--ui83672-hair);
  color: var(--ui83672-ink-dim);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.ui83672-drawer-close:active { color: var(--ui83672-ink); transform: translateY(-2px); }
.ui83672-drawer-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0 4px;
}
.ui83672-drawer-group { margin-top: 15px; }
.ui83672-drawer-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: none;
  color: var(--ui83672-teal-bright);
  margin-bottom: 7px;
}
.ui83672-drawer-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ui83672-hair), transparent);
}
.ui83672-dlink {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 10px;
  margin-bottom: 5px;
  border-radius: var(--ui83672-r-md);
  color: var(--ui83672-ink-faint);
  font-size: 13px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    transform 0.15s ease;
}
.ui83672-dlink:active {
  transform: translateY(-2px);
  border-color: var(--ui83672-teal);
  color: var(--ui83672-ink);
}
.ui83672-dlink span { margin-left: auto; font-size: 10px; color: var(--ui83672-ink-dim); }

/* ---------- main column ---------- */
.ui83672-main {
  padding-top: calc(var(--ui83672-top-h) + 8px);
  padding-bottom: calc(var(--ui83672-rack-h) + 34px + env(safe-area-inset-bottom, 0px));
}

/* ---------- hero carousel ---------- */
.ui83672-hero {
  position: relative;
  margin: 8px 10px 2px;
  border-radius: var(--ui83672-r-lg);
  overflow: hidden;
  border: 1px solid var(--ui83672-hair);
  background: var(--ui83672-ground-deep);
}
.ui83672-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ui83672-track::-webkit-scrollbar { display: none; }
.ui83672-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
}
.ui83672-slide img {
  width: 100%;
  aspect-ratio: 410 / 176;
  object-fit: cover;
  filter: saturate(1.04);
}
.ui83672-slide-copy {
  position: absolute;
  inset: auto 0 0 0;
  padding: 34px 13px 13px;
  background: linear-gradient(180deg, rgba(24, 36, 51, 0) 0%, rgba(20, 30, 43, 0.94) 78%);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ui83672-slide-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ui83672-teal-bright);
}
.ui83672-slide-title {
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ui83672-ink);
}
.ui83672-slide-cta {
  align-self: flex-start;
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 13px;
  border-radius: var(--ui83672-r-pill);
  background: linear-gradient(135deg, var(--ui83672-teal-bright), var(--ui83672-teal));
  color: #0c2b30;
  font-size: 11.5px;
  font-weight: 800;
  transition: transform 0.15s ease;
}
.ui83672-slide:active .ui83672-slide-cta { transform: translateY(-2px); }
.ui83672-dots {
  position: absolute;
  right: 11px;
  bottom: 10px;
  display: flex;
  gap: 5px;
  z-index: 2;
}
.ui83672-cdot {
  width: 22px;
  height: 6px;
  border-radius: 4px;
  background: rgba(248, 248, 255, 0.32);
  transition: background-color 0.25s ease, width 0.25s ease;
}
.ui83672-cdot.is-on { background: var(--ui83672-teal-bright); width: 30px; }

/* ---------- intro block ---------- */
.ui83672-intro { padding: 14px 13px 2px; }
.ui83672-h1 {
  font-size: 21.5px;
  line-height: 1.34;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ui83672-ink);
}
.ui83672-h1 .ui83672-h1-mark { color: var(--ui83672-teal-bright); }
.ui83672-lead {
  margin-top: 9px;
  font-size: 13.2px;
  color: var(--ui83672-ink-faint);
}
.ui83672-lead + .ui83672-lead { margin-top: 8px; }
.ui83672-lead strong { color: var(--ui83672-ink); font-weight: 700; }
.ui83672-cta-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 13px 13px 0;
}
.ui83672-cta-pair .ui83672-btn { min-height: 44px; font-size: 13.5px; }

/* ---------- generic section shells ---------- */
.ui83672-sec { margin: 24px 10px 0; }
.ui83672-sec-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 9px;
}
.ui83672-sec-head h2 {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.38;
  color: var(--ui83672-ink);
}
.ui83672-sec-head--tick { border-left: 4px solid var(--ui83672-teal); padding-left: 10px; }
.ui83672-sec-head--band {
  background: linear-gradient(90deg, rgba(38, 166, 154, 0.2), rgba(38, 166, 154, 0));
  padding: 8px 10px;
  border-radius: 0 var(--ui83672-r-md) var(--ui83672-r-md) 0;
  margin-left: -10px;
}
.ui83672-sec-head--rail { justify-content: space-between; }
.ui83672-sec-chip {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #0c2b30;
  background: var(--ui83672-teal-bright);
  border-radius: var(--ui83672-r-pill);
  padding: 3px 9px;
  align-self: center;
}
.ui83672-sec-note {
  font-size: 12.4px;
  color: var(--ui83672-ink-dim);
  margin-bottom: 11px;
}
.ui83672-sec-note a { border-bottom: 1px dotted var(--ui83672-teal-bright); }

/* ---------- category blocks ---------- */
.ui83672-cat {
  margin: 22px 10px 0;
  background: linear-gradient(180deg, rgba(42, 61, 84, 0.65), rgba(36, 53, 74, 0.35));
  border: 1px solid var(--ui83672-hair);
  border-radius: var(--ui83672-r-lg);
  padding: 12px 10px 13px;
}
.ui83672-cat-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
}
.ui83672-cat-idx {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px 4px 10px 4px; /* mixed radii */
  background: var(--ui83672-teal-soft);
  border: 1px solid rgba(38, 166, 154, 0.45);
  color: var(--ui83672-teal-bright);
  font-size: 12.5px;
  font-weight: 800;
  font-feature-settings: "tnum";
}
.ui83672-cat-name { font-size: 15.5px; font-weight: 800; margin-right: auto; }
.ui83672-cat-count {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ui83672-ink-dim);
  border: 1px solid var(--ui83672-hair);
  border-radius: var(--ui83672-r-pill);
  padding: 2px 9px;
  white-space: nowrap;
}
.ui83672-cat-intro {
  font-size: 12.2px;
  line-height: 1.6;
  color: var(--ui83672-ink-dim);
  margin-bottom: 11px;
}
.ui83672-cat-intro a { border-bottom: 1px dotted var(--ui83672-teal-bright); }

/* ---------- game cells : big pair + small grid ---------- */
.ui83672-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.ui83672-gcell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: var(--ui83672-tap);
  padding: 6px 5px 7px;
  border-radius: var(--ui83672-r-md);
  background: linear-gradient(165deg, #33495f, #2a3c52);
  border: 1px solid var(--ui83672-hair);
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ui83672-gcell:active {
  transform: translateY(-2px);
  border-color: var(--ui83672-teal);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.ui83672-gcell img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 9px;
  background: #1d2c40;
}
.ui83672-gcell span {
  font-size: 10.5px;
  line-height: 1.38;
  font-weight: 600;
  color: var(--ui83672-ink-dim);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  word-break: break-word;
}
.ui83672-gcell--big {
  border-radius: var(--ui83672-r-lg);
  padding: 8px 8px 9px;
  gap: 7px;
  background: linear-gradient(170deg, #37506b, #2b3f57);
  border-color: rgba(87, 203, 191, 0.4);
}
.ui83672-gcell--big span {
  font-size: 12.5px;
  color: var(--ui83672-ink);
  font-weight: 700;
  min-height: 2.9em;
}
.ui83672-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 6px;
}
@media (min-width: 396px) {
  .ui83672-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- winners strip ---------- */
.ui83672-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ui83672-amber);
}
.ui83672-live-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ui83672-amber);
  animation: ui83672-pulse 1.9s ease-in-out infinite;
}
@keyframes ui83672-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.ui83672-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 3px 1px 9px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.ui83672-chips::-webkit-scrollbar { display: none; }
.ui83672-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: var(--ui83672-r-pill);
  background: var(--ui83672-ground-panel);
  border: 1px solid var(--ui83672-hair);
  font-size: 11.6px;
  color: var(--ui83672-ink-dim);
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ui83672-chip b { color: var(--ui83672-teal-bright); font-weight: 800; }
.ui83672-chip:hover, .ui83672-chip:active { border-color: var(--ui83672-teal); color: var(--ui83672-ink); }
.ui83672-mini-note {
  font-size: 10.8px;
  color: #8b939e;
  margin-top: 2px;
}

/* ---------- selection guide : scenario branches ---------- */
.ui83672-branches {
  display: grid;
  gap: 9px;
}
.ui83672-branch {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-radius: 14px 6px 14px 6px;
  background: rgba(42, 61, 84, 0.6);
  border: 1px solid var(--ui83672-hair);
  border-left: 4px solid var(--ui83672-teal);
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.ui83672-branch:active { transform: translateY(-2px); border-left-color: var(--ui83672-teal-bright); }
.ui83672-branch-q {
  font-size: 13px;
  font-weight: 800;
  color: var(--ui83672-ink);
}
.ui83672-branch-a {
  font-size: 12.2px;
  color: var(--ui83672-ink-dim);
  line-height: 1.58;
}
.ui83672-branch-a b { color: var(--ui83672-teal-bright); font-weight: 700; }

/* ---------- security rail ---------- */
.ui83672-rail {
  display: grid;
  gap: 0;
  border-left: 2px dashed rgba(87, 203, 191, 0.4);
  margin-left: 8px;
}
.ui83672-rail-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 10px 4px 12px;
}
.ui83672-rail-item::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ui83672-ground);
  border: 3px solid var(--ui83672-teal);
}
.ui83672-rail-num {
  font-size: 15px;
  font-weight: 800;
  color: var(--ui83672-teal-bright);
  font-feature-settings: "tnum";
  padding-top: 1px;
}
.ui83672-rail-txt { font-size: 12.3px; color: var(--ui83672-ink-dim); }
.ui83672-rail-txt b { color: var(--ui83672-ink); display: block; font-size: 12.8px; margin-bottom: 2px; }

/* ---------- trick tiles ---------- */
.ui83672-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
@media (max-width: 355px) {
  .ui83672-tiles { grid-template-columns: 1fr; }
}
.ui83672-tile {
  padding: 11px 11px 12px;
  border-radius: var(--ui83672-r-md);
  background: linear-gradient(175deg, #30455e, #283b52);
  border: 1px solid var(--ui83672-hair);
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.ui83672-tile:active { transform: translateY(-2px); border-color: var(--ui83672-teal); }
.ui83672-tile-tag {
  display: inline-block;
  font-size: 9.6px;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: #0c2b30;
  background: var(--ui83672-teal-bright);
  border-radius: 5px 5px 5px 1px;
  padding: 2px 7px;
  margin-bottom: 7px;
}
.ui83672-tile-txt { font-size: 11.9px; line-height: 1.58; color: var(--ui83672-ink-dim); }
.ui83672-tile-txt b { color: var(--ui83672-ink); }

/* ---------- decision checklist ---------- */
.ui83672-check {
  display: grid;
  gap: 8px;
}
.ui83672-check-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: var(--ui83672-r-sm);
  background: rgba(42, 61, 84, 0.5);
  border: 1px solid var(--ui83672-hair);
  transition: border-color 0.2s ease;
}
.ui83672-check-item:active { border-color: var(--ui83672-teal); }
.ui83672-check-box {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 5px;
  border: 2px solid var(--ui83672-teal-bright);
  position: relative;
  flex: 0 0 auto;
}
.ui83672-check-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #0c2b30;
  border-width: 0 2.4px 2.4px 0;
  transform: rotate(42deg);
}
.ui83672-check-txt { font-size: 12.3px; line-height: 1.56; color: var(--ui83672-ink-dim); }
.ui83672-check-txt b { color: var(--ui83672-ink); }

/* ---------- extended footer zone ---------- */
.ui83672-ext {
  margin: 30px 10px 0;
  border-top: 1px dashed var(--ui83672-hair);
  padding-top: 17px;
}
.ui83672-ext h2 { font-size: 15.5px; font-weight: 800; margin-bottom: 8px; }
.ui83672-ext-brand {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 11px 12px;
  border-radius: var(--ui83672-r-lg);
  background: linear-gradient(135deg, rgba(38, 166, 154, 0.14), rgba(38, 166, 154, 0.03));
  border: 1px solid rgba(38, 166, 154, 0.35);
}
.ui83672-ext-brand img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 auto;
}
.ui83672-ext-brand-txt { font-size: 12px; line-height: 1.6; color: var(--ui83672-ink-dim); }
.ui83672-ext-brand-txt b { color: var(--ui83672-ink); display: block; font-size: 13px; margin-bottom: 2px; }
.ui83672-ext-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ui83672-teal-bright);
  margin: 17px 0 9px;
}
.ui83672-ext-label::before {
  content: "";
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--ui83672-teal);
}
.ui83672-directory {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 9px;
}
@media (max-width: 355px) {
  .ui83672-directory { grid-template-columns: 1fr; }
}
.ui83672-dlink2 {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-radius: var(--ui83672-r-sm);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid transparent;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.ui83672-dlink2:active { transform: translateY(-2px); border-color: var(--ui83672-teal); }
.ui83672-dlink2 b {
  font-size: 12px;
  color: var(--ui83672-ink);
  font-weight: 700;
  line-height: 1.35;
}
.ui83672-dlink2 span { font-size: 10.4px; color: var(--ui83672-ink-dim); line-height: 1.45; }

/* horizontal promo shortcuts */
.ui83672-promos {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 2px 1px 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.ui83672-promos::-webkit-scrollbar { display: none; }
.ui83672-promo {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 138px;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 11px;
  border-radius: var(--ui83672-r-md);
  background: linear-gradient(160deg, #2f4760, #274050);
  border: 1px solid rgba(87, 203, 191, 0.38);
  text-align: left;
  transition: transform 0.15s ease, border-color 0.2s ease;
}
.ui83672-promo:active { transform: translateY(-2px); border-color: var(--ui83672-teal-bright); }
.ui83672-promo-ic { display: block; }
.ui83672-promo-ic .ui83672-ic-tone { fill: var(--ui83672-teal-bright); }
.ui83672-promo-tx {
  font-size: 11.3px;
  font-weight: 700;
  line-height: 1.42;
  color: var(--ui83672-ink);
}
.ui83672-ext-disc {
  margin-top: 14px;
  padding: 11px 12px;
  border-radius: var(--ui83672-r-md);
  border: 1px dashed var(--ui83672-hair);
  font-size: 11px;
  line-height: 1.66;
  color: #97a0ab;
}
.ui83672-ext-disc b { color: var(--ui83672-amber); }

/* ---------- common footer ---------- */
.ui83672-foot {
  margin-top: 24px;
  border-top: 1px solid var(--ui83672-hair);
  background: rgba(24, 36, 50, 0.8);
}
.ui83672-foot-in {
  padding: 14px 13px calc(14px + env(safe-area-inset-bottom, 0px) * 0.4);
  text-align: center;
  font-size: 11px;
  color: var(--ui83672-ink-dim);
}
.ui83672-foot-in b { color: var(--ui83672-ink-faint); font-weight: 700; }

/* ---------- bottom icon rack ---------- */
.ui83672-rack {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 65;
  background: rgba(23, 35, 49, 0.985);
  border-top: 1px solid var(--ui83672-hair);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}
.ui83672-rack-in {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}
.ui83672-ritem {
  min-height: var(--ui83672-rack-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 2px 8px;
  color: var(--ui83672-ink-dim);
  font-size: 9.8px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: var(--ui83672-r-md);
  margin: 5px 2px;
  transition: color 0.2s ease, transform 0.15s ease, background-color 0.2s ease;
}
.ui83672-ritem:active { transform: translateY(-3px); color: var(--ui83672-ink); }
.ui83672-ritem-ic { display: block; }
.ui83672-ritem-ic .ui83672-ic-tone { fill: var(--ui83672-teal); }
.ui83672-ritem-ic .ui83672-ic-line { stroke: currentColor; }
/* active state = contrast inversion */
.ui83672-ritem.is-on {
  background: linear-gradient(135deg, var(--ui83672-teal-bright), var(--ui83672-teal));
  color: #0c2b30;
}
.ui83672-ritem.is-on .ui83672-ic-tone { fill: #123c40; }

/* ---------- small screens ---------- */
@media (max-width: 360px) {
  .ui83672-brand-name { font-size: 15.5px; }
  .ui83672-brand-img { width: 32px; height: 32px; }
  .ui83672-btn { padding: 8px 11px; font-size: 11.8px; }
  .ui83672-h1 { font-size: 19.5px; }
  .ui83672-slide-title { font-size: 15px; }
  .ui83672-directory { gap: 6px 7px; }
}

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

/* ---------- help pages : procedural and review-specific surfaces ---------- */
.ui83672-help-main { padding-top: calc(var(--ui83672-top-h) + 15px); }
.ui83672-help-hero {
  margin: 10px 10px 0;
  padding: 18px 15px 17px;
  border: 1px solid rgba(87, 203, 191, 0.48);
  border-radius: 19px 7px 19px 7px;
  background:
    linear-gradient(135deg, rgba(38, 166, 154, 0.19), rgba(38, 166, 154, 0.03) 58%),
    var(--ui83672-ground-deep);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
}
.ui83672-help-eyebrow {
  color: var(--ui83672-teal-bright);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-bottom: 7px;
}
.ui83672-help-title { font-size: 22px; line-height: 1.32; font-weight: 850; }
.ui83672-help-deck { margin-top: 10px; color: var(--ui83672-ink-faint); font-size: 13px; line-height: 1.72; }
.ui83672-help-deck strong { color: var(--ui83672-ink); }
.ui83672-help-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.ui83672-help-actions .ui83672-btn { min-height: 44px; font-size: 12.5px; }
.ui83672-help-intent {
  margin: 11px 10px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--ui83672-amber);
  background: rgba(217, 164, 65, 0.09);
  color: var(--ui83672-ink-dim);
  font-size: 11.8px;
  line-height: 1.65;
}
.ui83672-step-stack { display: grid; gap: 10px; counter-reset: ui83672-step; }
.ui83672-step-card {
  counter-increment: ui83672-step;
  position: relative;
  padding: 13px 12px 13px 48px;
  border: 1px solid var(--ui83672-hair);
  border-radius: 15px 6px 15px 6px;
  background: linear-gradient(160deg, rgba(51, 73, 95, 0.86), rgba(42, 60, 82, 0.62));
}
.ui83672-step-card::before {
  content: counter(ui83672-step, decimal-leading-zero);
  position: absolute;
  left: 12px;
  top: 13px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 8px 3px 8px 3px;
  background: var(--ui83672-teal);
  color: #0c2b30;
  font-size: 10px;
  font-weight: 900;
}
.ui83672-step-card h3 { font-size: 14px; line-height: 1.4; margin-bottom: 4px; color: var(--ui83672-ink); }
.ui83672-step-card p { color: var(--ui83672-ink-dim); font-size: 12.2px; line-height: 1.65; }
.ui83672-step-card p + p { margin-top: 6px; }
.ui83672-step-card b { color: var(--ui83672-teal-bright); }
.ui83672-promo-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.ui83672-promo-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 11px;
  border-radius: 9px 3px 9px 3px;
  border: 1px solid rgba(87, 203, 191, 0.46);
  background: rgba(38, 166, 154, 0.1);
  color: var(--ui83672-teal-bright);
  font-size: 11.2px;
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
  transition: transform 0.15s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.ui83672-promo-link:active { transform: translateY(-2px); border-color: var(--ui83672-teal-bright); background: var(--ui83672-teal-soft); }
.ui83672-device-lanes { display: grid; gap: 9px; }
.ui83672-device-lane { padding: 12px; border-top: 3px solid var(--ui83672-teal); border-radius: 4px 14px 14px 14px; background: rgba(42, 61, 84, 0.62); border-inline: 1px solid var(--ui83672-hair); border-bottom: 1px solid var(--ui83672-hair); }
.ui83672-device-lane:nth-child(2) { border-top-color: var(--ui83672-amber); }
.ui83672-device-lane:nth-child(3) { border-top-color: #82a9d6; }
.ui83672-device-lane h3 { font-size: 13.2px; color: var(--ui83672-ink); margin-bottom: 4px; }
.ui83672-device-lane p { font-size: 12px; color: var(--ui83672-ink-dim); line-height: 1.63; }
.ui83672-device-lane b { color: var(--ui83672-teal-bright); }
.ui83672-memory { display: grid; gap: 7px; }
.ui83672-memory-item { display: grid; grid-template-columns: 20px 1fr; gap: 9px; padding: 9px 10px; border-bottom: 1px dashed var(--ui83672-hair); color: var(--ui83672-ink-dim); font-size: 12.1px; line-height: 1.6; }
.ui83672-memory-item::before { content: "✓"; color: var(--ui83672-teal-bright); font-weight: 900; }
.ui83672-compare-scroll { overflow-x: auto; border: 1px solid var(--ui83672-hair); border-radius: 12px 4px 12px 4px; scrollbar-width: thin; }
.ui83672-compare-table { width: 100%; min-width: 430px; border-collapse: collapse; font-size: 11.3px; }
.ui83672-compare-table th, .ui83672-compare-table td { padding: 9px 9px; border-bottom: 1px solid var(--ui83672-hair); text-align: left; vertical-align: top; }
.ui83672-compare-table th { background: rgba(38, 166, 154, 0.17); color: var(--ui83672-ink); font-size: 11px; }
.ui83672-compare-table td { color: var(--ui83672-ink-dim); line-height: 1.5; }
.ui83672-compare-table tr:last-child td { border-bottom: 0; }
.ui83672-answer-set { display: grid; gap: 7px; }
.ui83672-answer { border: 1px solid var(--ui83672-hair); border-radius: 10px 4px 10px 4px; padding: 10px 11px; background: rgba(42, 61, 84, 0.47); }
.ui83672-answer h3 { color: var(--ui83672-ink); font-size: 12.7px; line-height: 1.45; margin-bottom: 3px; }
.ui83672-answer p { color: var(--ui83672-ink-dim); font-size: 11.9px; line-height: 1.6; }
.ui83672-answer b { color: var(--ui83672-teal-bright); }

/* Review page uses a decision board rather than the procedural timeline. */
.ui83672-review-board { margin: 12px 10px 0; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 8px; }
.ui83672-score-panel, .ui83672-verdict-panel { min-height: 118px; padding: 12px; border: 1px solid var(--ui83672-hair); background: var(--ui83672-ground-panel); }
.ui83672-score-panel { border-radius: 17px 5px 5px 5px; }
.ui83672-verdict-panel { border-radius: 5px 17px 5px 5px; border-color: rgba(217, 164, 65, 0.5); }
.ui83672-board-label { color: var(--ui83672-ink-dim); font-size: 9.8px; font-weight: 800; letter-spacing: 0.08em; }
.ui83672-score { display: flex; align-items: baseline; gap: 5px; margin-top: 9px; color: var(--ui83672-teal-bright); font-size: 31px; font-weight: 900; line-height: 1; }
.ui83672-score small { color: var(--ui83672-ink-dim); font-size: 11px; font-weight: 600; }
.ui83672-verdict { margin-top: 9px; color: var(--ui83672-amber); font-size: 15px; font-weight: 900; line-height: 1.3; }
.ui83672-board-copy { margin-top: 7px; color: var(--ui83672-ink-dim); font-size: 11px; line-height: 1.5; }
.ui83672-condition-stack { display: grid; gap: 9px; }
.ui83672-condition {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 10px;
  padding: 11px 11px 11px 9px;
  border: 1px solid var(--ui83672-hair);
  border-radius: 4px 14px 14px 4px;
  background: rgba(42, 61, 84, 0.58);
}
.ui83672-condition-mark { width: 8px; border-radius: 5px; background: var(--ui83672-teal); }
.ui83672-condition:nth-child(2) .ui83672-condition-mark { background: var(--ui83672-amber); }
.ui83672-condition:nth-child(3) .ui83672-condition-mark { background: #82a9d6; }
.ui83672-condition h3 { color: var(--ui83672-ink); font-size: 13px; line-height: 1.42; margin-bottom: 4px; }
.ui83672-condition p { color: var(--ui83672-ink-dim); font-size: 12px; line-height: 1.62; }
.ui83672-support-sheet { display: grid; gap: 6px; }
.ui83672-support-row { display: grid; grid-template-columns: 34% 66%; gap: 7px; padding: 9px 10px; background: rgba(255,255,255,0.035); border-bottom: 1px solid var(--ui83672-hair); }
.ui83672-support-row dt { color: var(--ui83672-teal-bright); font-size: 11px; font-weight: 800; }
.ui83672-support-row dd { margin: 0; color: var(--ui83672-ink-dim); font-size: 11.6px; line-height: 1.5; }
.ui83672-support-row dd b { color: var(--ui83672-ink); }
.ui83672-checkline { display: grid; gap: 8px; }
.ui83672-checkline-item { display: flex; gap: 9px; align-items: flex-start; padding: 9px 10px; border: 1px solid var(--ui83672-hair); border-radius: 8px; color: var(--ui83672-ink-dim); font-size: 12px; line-height: 1.55; }
.ui83672-checkline-item::before { content: "01"; flex: 0 0 auto; color: var(--ui83672-amber); font-weight: 900; font-feature-settings: "tnum"; }
.ui83672-checkline-item:nth-child(2)::before { content: "02"; }
.ui83672-checkline-item:nth-child(3)::before { content: "03"; }
.ui83672-checkline-item:nth-child(4)::before { content: "04"; }
.ui83672-checkline-item:nth-child(5)::before { content: "05"; }
.ui83672-relation-map { display: grid; gap: 8px; }
.ui83672-relation-node { padding: 10px 11px; border-left: 4px solid var(--ui83672-teal); background: linear-gradient(90deg, rgba(38,166,154,0.15), rgba(38,166,154,0.03)); border-radius: 2px 11px 11px 2px; }
.ui83672-relation-node:nth-child(2) { border-left-color: var(--ui83672-amber); }
.ui83672-relation-node:nth-child(3) { border-left-color: #82a9d6; }
.ui83672-relation-node h3 { font-size: 12.8px; color: var(--ui83672-ink); margin-bottom: 3px; }
.ui83672-relation-node p { font-size: 11.8px; color: var(--ui83672-ink-dim); line-height: 1.58; }
.ui83672-review-note { margin-top: 10px; padding: 11px 12px; border: 1px dashed var(--ui83672-amber); border-radius: 12px; color: var(--ui83672-ink-dim); font-size: 11.5px; line-height: 1.65; }
.ui83672-review-note b { color: var(--ui83672-amber); }
@media (max-width: 355px) {
  .ui83672-review-board { grid-template-columns: 1fr; }
  .ui83672-score-panel, .ui83672-verdict-panel { min-height: auto; }
}